/* ==========================================================================
   NobleDrop — Design System
   Ein gemeinsames Stylesheet für alle Seiten (index, sortimentsempfehlung,
   visitenkarte, impressum, datenschutz). Vorher hatte jede Seite eigene
   Tokens — dadurch drifteten die Unterseiten optisch auseinander.

   Farbwelt "Pewter/Graphite": kühles Stein-Weiß, fast-neutrale Tinte,
   stark gedämpfter Bronze-Akzent. Bewusst KEIN Creme/Gold.
   Typografie: Fraunces (Serif, optical sizing) + Work Sans (Sans).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root{
  /* Flächen */
  --bg:            #F2F1ED;   /* Seitenhintergrund — kühles Stein-Weiß */
  --bg-alt:        #EDECE7;   /* abgesetzte Sektion */
  --surface:       #FFFFFF;   /* Karten, Eingabefelder */
  --ink:           #1C1B19;   /* Fast-Schwarz, ein Hauch Wärme */
  --ink-inv:       #F2F1ED;   /* Text auf dunklem Grund */
  --line:          #DEDBD3;   /* Trennlinien, Rahmen */
  --line-strong:   #C6C2B8;   /* Rahmen auf Eingabefeldern */
  --muted:         #86827A;   /* Sekundärtext */
  --accent:        #6E6250;   /* gedämpftes Bronze — sparsam einsetzen */
  --accent-soft:   #9A8E79;   /* Akzent auf dunklem Grund */
  --danger:        #8C3B34;

  /* Typografie */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Maße */
  --maxw: 1200px;
  --gutter: clamp(24px, 5vw, 64px);   /* seitlicher Mindestabstand */
  --maxw-narrow: 720px;
  --radius: 2px;          /* bewusst kantig — keine weichgespülten Ecken */
  --radius-media: 3px;

  /* Motion — Werte aus der Animations-Doktrin, nicht approximiert */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press:   140ms;
  --dur-fast:    180ms;
  --dur-panel:   260ms;
  --dur-reveal:  620ms;
  --dur-slide:   660ms;   /* Hero-Flaschen: laengerer Weg, daher etwas mehr Zeit */
}

/* ---------- 2. Reset & Basis --------------------------------------------- */

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;color:inherit;}

/* Fraunces optical sizing: große Grade schmaler/kontrastreicher, kleine offener.
   Das ist die Technik hinter "wirkt in jeder Größe richtig" statt einfach skaliert. */
h1,h2,h3,h4,h5{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:400;
  letter-spacing:-0.012em;
  margin:0;
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--ink-inv);
  padding:12px 20px;font-size:13px;text-decoration:none;
}
.skip-link:focus{left:0;}

/* ---------- 3. Typografische Bausteine ------------------------------------ */

.eyebrow{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 14px;
}

.rule{width:44px;height:1px;background:var(--accent);margin:0 0 26px;}

.h-section{
  font-size:clamp(26px,3.6vw,40px);
  line-height:1.16;
  margin:0 0 18px;
  max-width:20ch;
}

.lede{
  font-size:clamp(15px,1.5vw,16.5px);
  line-height:1.75;
  color:var(--muted);
  max-width:62ch;
  margin:0 0 40px;
}

/* Die Sektionen der Startseite haben KEINE innere Hülle im HTML. Breite und
   Seitenabstand müssen deshalb direkt hier sitzen. */
.section{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(72px,10vw,132px) var(--gutter);
}
.section-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

/* ---------- 4. Buttons ---------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  padding:15px 28px;
  border:1px solid transparent;
  border-radius:var(--radius);
  text-decoration:none;
  cursor:pointer;
  /* Nur transform/Farbe animieren — beides GPU-freundlich, kein "all" */
  transition:transform var(--dur-press) var(--ease-out),
             background-color var(--dur-fast) ease,
             color var(--dur-fast) ease,
             border-color var(--dur-fast) ease;
}
/* Druckfeedback: bestätigt dem Nutzer, dass die Oberfläche zugehört hat */
.btn:active{transform:scale(0.97);}

.btn-gold{background:var(--accent);color:var(--bg);}
.btn-dark{background:var(--ink);color:var(--ink-inv);}
.btn-outline-dark{background:transparent;border-color:var(--ink);color:var(--ink);}

@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{background:var(--ink);}
  .btn-dark:hover{background:var(--accent);}
  .btn-outline-dark:hover{background:var(--ink);color:var(--ink-inv);}
}

.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;letter-spacing:.03em;
  color:var(--accent);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid var(--line-strong);
  transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease;
}
@media (hover:hover) and (pointer:fine){
  .link-arrow:hover{color:var(--ink);border-color:var(--ink);}
}

/* ---------- 5. Navigation ------------------------------------------------- */

.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(242,241,237,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter);
  height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-left{display:flex;align-items:center;gap:20px;}

.nav-logo{
  font-family:var(--serif);
  font-size:19px;font-weight:500;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.nav-logo span{color:var(--accent);}

.lang-switch{display:flex;gap:2px;}
.lang-switch button{
  background:none;border:none;cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--muted);padding:5px 6px;
  border-bottom:1px solid transparent;
  transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
.lang-switch button.active{color:var(--ink);border-bottom-color:var(--accent);}

.nav-links{display:flex;align-items:center;gap:clamp(16px,2vw,30px);}
.nav-links a{
  font-size:13.5px;font-weight:500;
  color:var(--ink);text-decoration:none;
  padding:4px 0;position:relative;
}
/* Unterstrich wächst aus der Mitte — clip-path statt width, damit kein Layout entsteht */
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);
  clip-path:inset(0 50% 0 50%);
  transition:clip-path var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover::after{clip-path:inset(0 0 0 0);}
}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line-strong);
  border-radius:var(--radius);
  width:42px;height:42px;cursor:pointer;font-size:17px;line-height:1;
  transition:transform var(--dur-press) var(--ease-out);
}
.nav-toggle:active{transform:scale(0.95);}
.nav-backdrop{display:none;}

/* ---------- 6. Hero ------------------------------------------------------- */

.hero-final{
  padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px);
  overflow:hidden;
}
.hero-final-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter);
  display:flex;align-items:center;gap:clamp(28px,5vw,64px);
}
.hero-final .text-col{flex:1 1 46%;min-width:0;}

.hero-h1{
  font-size:clamp(32px,5.2vw,60px);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0 0 20px;
  max-width:16ch;
}
.hero-h1 em{font-style:italic;color:var(--accent);}

.hero-sub{
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.72;
  color:var(--muted);
  max-width:46ch;
  margin:0 0 34px;
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;}

/* --- Flaschen-Bühne ---
   Höhen proportional zum realen Volumen: Magnum > 0,75 L > 0,5 L.
   Startzustand = nach rechts versetzt; die .play-Klasse fährt sie herein.
   Kein scale(0) — nichts erscheint aus dem Nichts. */
.bottle-stage{
  flex:1 1 54%;
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(6px,1.4vw,18px);
  min-width:0;
}
.bottle-stage .item{
  flex:0 1 auto;
  opacity:0;
  /* Startpunkt liegt rechts ausserhalb der Endposition. Je weiter links eine
     Flasche am Ende steht, desto laenger ist ihr Weg — dadurch wirkt es, als
     wuerden sie von rechts nacheinander hereingeschoben. */
  transform:translate3d(var(--slide-from,140px),0,0);
  transition:opacity var(--dur-slide) var(--ease-out),
             transform var(--dur-slide) var(--ease-out);
  will-change:transform,opacity;
}
.bottle-stage .item img{
  width:100%;height:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 18px 26px rgba(28,27,25,.13));
}
.bottle-stage .item.gin      {height:clamp(150px,20vw,250px);}
.bottle-stage .item.wein     {height:clamp(170px,23vw,286px);}
.bottle-stage .item.original {height:clamp(178px,24vw,300px);}
.bottle-stage .item.reposado {height:clamp(205px,28vw,348px);}

/* Reihenfolge: die am weitesten links stehende Flasche fährt zuerst los und
   legt den längsten Weg zurück; die anderen folgen im Abstand von 115ms.
   So kommen sie sichtbar eine nach der anderen von rechts herein. */
.bottle-stage .item.gin     {--slide-from:210px;}
.bottle-stage .item.wein    {--slide-from:175px;}
.bottle-stage .item.original{--slide-from:140px;}
.bottle-stage .item.reposado{--slide-from:105px;}

.bottle-stage.play .item{opacity:1;transform:translate3d(0,0,0);}
.bottle-stage.play .item.gin     {transition-delay:0ms;}
.bottle-stage.play .item.wein    {transition-delay:115ms;}
.bottle-stage.play .item.original{transition-delay:230ms;}
.bottle-stage.play .item.reposado{transition-delay:345ms;}

/* ---------- 7. Kategorie-Karten ------------------------------------------ */

.cat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);
  margin-bottom:clamp(56px,7vw,88px);
}
.cat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(28px,3.4vw,42px);
  display:flex;flex-direction:column;
  transition:border-color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .cat-card:hover{border-color:var(--line-strong);transform:translateY(-2px);}
}
.cat-card h3{font-size:21px;margin:0 0 6px;}
.cat-tag{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:0 0 16px;
}
.cat-card p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 22px;flex:1;}

/* ---------- 8. Marken-Blöcke & Produkt-Zeilen ---------------------------- */

.brand-block{margin-bottom:clamp(56px,8vw,104px);}
.brand-block:last-of-type{margin-bottom:0;}

.brand-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid var(--ink);
  margin-bottom:8px;
}
.brand-head h3{font-size:clamp(21px,2.6vw,28px);margin:0;}
.brand-head h3 span{color:var(--muted);font-style:italic;}
.brand-note{
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
}

/* --- DAS Kernstück: editoriale Wechsel-Anordnung ---
   Jedes Produkt ist eine Zeile über die volle Breite: Bild auf der einen,
   Text auf der anderen Seite — und die Seite wechselt von Produkt zu Produkt.
   Ersetzt das frühere 2-spaltige Karten-Raster. */
.product-grid{display:flex;flex-direction:column;}

.pcard{
  display:grid;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4.5vw,72px);
  align-items:center;
  padding:clamp(44px,6vw,80px) 0;
  border-top:1px solid var(--line);
}
.product-grid .pcard:first-child{border-top:none;}

/* Gerade Produkte spiegeln: Text links, Bild rechts */
.product-grid .pcard:nth-child(even) .pcard-media-wrap{order:2;}

.pcard-media-wrap{position:relative;min-width:0;}

.pcard-media{
  position:relative;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-media);
  aspect-ratio:4/5;
}
.pcard-media::-webkit-scrollbar{display:none;}
.pcard-media-single{overflow-x:visible;}

.pcard-media .slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,3vw,40px);
}
.pcard-media .slide img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
}

.lot-tag,.avail-tag{
  position:absolute;z-index:2;top:14px;
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 10px;border-radius:var(--radius);
}
.lot-tag{left:14px;background:var(--ink);color:var(--ink-inv);}
.avail-tag{right:14px;background:var(--bg);border:1px solid var(--line-strong);color:var(--muted);}
.avail-ok{color:var(--accent);}
.avail-limited{color:var(--danger);border-color:var(--danger);}

.pcard-dots{display:flex;justify-content:center;gap:7px;margin-top:14px;}
.pcard-dots .dot{
  width:6px;height:6px;padding:0;border-radius:50%;
  border:none;background:var(--line-strong);cursor:pointer;
  transition:background-color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}
.pcard-dots .dot.active{background:var(--accent);transform:scale(1.35);}

.pcard-body{min-width:0;}
.pcard-body h4{font-size:clamp(21px,2.7vw,30px);line-height:1.2;margin:0 0 8px;}
.spec{
  font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);margin:0 0 16px;
}
.teaser{
  font-size:clamp(14.5px,1.5vw,16px);line-height:1.72;
  color:var(--muted);margin:0 0 26px;max-width:46ch;
}

/* ---------- 9. Aufklapp-Panels ------------------------------------------- */

.toggle-row{display:flex;gap:10px;flex-wrap:wrap;}

.details-toggle{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:11px 17px;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;
  cursor:pointer;
  transition:border-color var(--dur-fast) ease,
             background-color var(--dur-fast) ease,
             color var(--dur-fast) ease,
             transform var(--dur-press) var(--ease-out);
}
.details-toggle:active{transform:scale(0.97);}
.details-toggle svg{
  width:12px;height:12px;flex-shrink:0;
  transition:transform var(--dur-panel) var(--ease-out);
}
.details-toggle[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--ink-inv);}
.details-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
@media (hover:hover) and (pointer:fine){
  .details-toggle:hover{border-color:var(--ink);}
  .details-toggle[aria-expanded="true"]:hover{background:var(--accent);border-color:var(--accent);}
}

/* grid-template-rows 0fr→1fr: unterbrechbar und retargetbar, im Gegensatz
   zu Keyframes, die bei schnellem Doppelklick von vorn anfangen würden. */
.details-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows var(--dur-panel) var(--ease-out),
             opacity var(--dur-panel) var(--ease-out),
             margin-top var(--dur-panel) var(--ease-out);
  margin-top:0;
}
.details-panel[data-open="true"]{grid-template-rows:1fr;opacity:1;margin-top:22px;}
.details-inner{overflow:hidden;min-height:0;}
.details-body{
  border-left:1px solid var(--accent);
  padding:2px 0 2px 20px;
}

.full-desc{font-size:14.5px;line-height:1.75;color:var(--muted);margin:0 0 14px;}
.full-desc b{color:var(--ink);font-weight:600;}
.full-desc-note,.spec-note{
  font-size:12.5px;line-height:1.65;color:var(--muted);
  font-style:italic;margin:14px 0 0;
}

.pc-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:22px;}
.pc-cols h5{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  margin:0 0 10px;
}
.pc-cols ul{margin:0;padding-left:17px;font-size:13.5px;line-height:1.7;color:var(--muted);}
.pc-cols li{margin:3px 0;}

/* Datenblatt */
.spec-group{margin-bottom:22px;}
.spec-group:last-child{margin-bottom:0;}
.spec-group h6{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.spec-row{
  display:grid;grid-template-columns:minmax(120px,38%) 1fr;
  gap:14px;padding:6px 0;
  font-size:13px;line-height:1.6;
  border-bottom:1px solid var(--line);
}
.spec-row:last-child{border-bottom:none;}
.spec-row span:first-child{color:var(--muted);}
.spec-row span:last-child{color:var(--ink);}

/* ---------- 10. Sortiment-Zusätze ---------------------------------------- */

.produkte-head{margin-bottom:clamp(32px,4vw,52px);}

.finder-promo,.products-cta,.schatzkammer{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(24px,3.5vw,40px);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.finder-promo{background:var(--surface);margin-bottom:clamp(40px,5vw,64px);}
.products-cta{background:var(--surface);margin-top:clamp(40px,5vw,64px);}
.schatzkammer{background:var(--bg-alt);border-style:dashed;margin-top:28px;}
.finder-promo p,.products-cta p,.schatzkammer p{
  margin:0;font-size:15px;line-height:1.7;color:var(--muted);max-width:52ch;
}
.finder-promo h3,.products-cta h3{font-size:20px;margin:0 0 6px;}

/* ---------- 11. Über uns -------------------------------------------------- */

.about-grid{
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.about-copy p{font-size:15.5px;line-height:1.78;color:var(--muted);margin:0 0 20px;}

.loc-group{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:clamp(22px,3vw,30px);
}
.loc-caption{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:0 0 16px;
}
.loc-badges{display:flex;flex-wrap:wrap;gap:8px;}
.loc-badge{
  font-size:12.5px;padding:8px 13px;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--ink);
}

/* Route */
.route{margin-top:clamp(56px,7vw,88px);}
.route-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 26px;
}
.route-track{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px);}
.route-line-wrap{grid-column:1/-1;height:1px;background:var(--line);margin-bottom:-1px;}
.route-step{padding-top:24px;position:relative;border-top:1px solid var(--line);}
.route-dot{
  position:absolute;top:-4px;left:0;
  width:7px;height:7px;border-radius:50%;background:var(--accent);
}
.r-label{
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 8px;
}
.route-step h4{font-size:16px;margin:0 0 8px;}
.route-step p{font-size:13.5px;line-height:1.68;color:var(--muted);margin:0;}

/* Werte */
.value-list{
  margin-top:clamp(56px,7vw,88px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.value-item{background:var(--bg);padding:clamp(24px,3vw,34px);}
.value-item h4{font-size:17px;margin:0 0 10px;}
.value-item p{font-size:13.5px;line-height:1.72;color:var(--muted);margin:0;}

/* ---------- 12. B2B ------------------------------------------------------- */

.benefit-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,30px);
}
.benefit-card{
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);
}
.benefit-num{
  font-family:var(--serif);font-size:13px;font-style:italic;
  color:var(--accent);margin:0 0 12px;
}
.benefit-rule{width:26px;height:1px;background:var(--accent);margin:0 0 16px;}
.benefit-card h4{font-size:17px;margin:0 0 10px;}
.benefit-card p{font-size:13.5px;line-height:1.72;color:var(--muted);margin:0;}

/* ---------- 13. Kontakt --------------------------------------------------- */

.contact-grid{
  display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:start;
}

.field{margin-bottom:18px;}
.field label{
  display:block;font-size:12px;font-weight:600;
  letter-spacing:.05em;margin-bottom:7px;color:var(--ink);
}
.field input,.field textarea{
  width:100%;font-family:var(--sans);font-size:15px;
  padding:13px 15px;
  background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--ink);
  transition:border-color var(--dur-fast) ease;
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

fieldset{border:none;margin:0 0 22px;padding:0;}
legend{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;padding:0;
}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;}
.check-item{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;cursor:pointer;}
.check-item input{margin:3px 0 0;accent-color:var(--accent);flex-shrink:0;}

.form-submit{width:100%;margin-top:6px;}
.form-note{font-size:12.5px;color:var(--muted);margin:12px 0 0;text-align:center;}
.form-confirm{
  display:none;margin-top:16px;padding:16px 18px;
  background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);
  font-size:14px;color:var(--ink);
}

.contact-aside{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:clamp(24px,3vw,34px);
}
.aside-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;
}
.contact-line{display:flex;flex-direction:column;gap:16px;margin-bottom:26px;}
.contact-line div{display:flex;flex-direction:column;gap:3px;}
.contact-line span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.contact-line a,.contact-line strong{font-size:14.5px;color:var(--ink);text-decoration:none;font-weight:500;}
@media (hover:hover) and (pointer:fine){ .contact-line a:hover{color:var(--accent);} }

.fair-list{display:flex;flex-wrap:wrap;gap:7px;}
.fair-badge{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;
  padding:6px 11px;border:1px solid var(--line-strong);border-radius:var(--radius);
  color:var(--muted);
}

/* ---------- 14. Footer ---------------------------------------------------- */

footer{background:var(--ink);color:var(--ink-inv);}
.footer-grid{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(48px,6vw,76px) var(--gutter) 40px;
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,48px);
}
.footer-brand .nav-logo{color:var(--ink-inv);font-size:20px;}
.footer-brand .nav-logo span{color:var(--accent-soft);}
.footer-brand p{
  font-size:13.5px;line-height:1.72;
  color:rgba(242,241,237,.6);
  margin:16px 0 22px;max-width:40ch;
}
.footer-social{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--accent-soft);text-decoration:none;
  border:1px solid rgba(154,142,121,.4);border-radius:var(--radius);
  padding:9px 15px;
  transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease;
}
@media (hover:hover) and (pointer:fine){
  .footer-social:hover{background:var(--accent);color:var(--ink-inv);}
}
.footer-col h5{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(242,241,237,.5);margin:0 0 16px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer-col a{font-size:13.5px;color:var(--ink-inv);text-decoration:none;}
@media (hover:hover) and (pointer:fine){ .footer-col a:hover{color:var(--accent-soft);} }
.footer-bottom{
  max-width:var(--maxw);margin:0 auto;
  padding:22px var(--gutter);
  border-top:1px solid rgba(242,241,237,.12);
  display:flex;gap:22px;flex-wrap:wrap;
  font-size:12px;color:rgba(242,241,237,.45);
}

/* ---------- 15. Scroll-Reveal --------------------------------------------- */

.reveal-init{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity var(--dur-reveal) var(--ease-out),
             transform var(--dur-reveal) var(--ease-out);
}
.reveal-init.in-view{opacity:1;transform:translate3d(0,0,0);}

/* ---------- 16. Responsive ------------------------------------------------ */

@media (max-width:1024px){
  .cat-grid{grid-template-columns:1fr;}
  .benefit-grid{grid-template-columns:1fr 1fr;}
  .route-track{grid-template-columns:1fr 1fr;row-gap:32px;}
  .about-grid,.contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:860px){
  /* Editoriales Wechsel-Layout wird einspaltig — Bild immer zuerst,
     damit die Lesereihenfolge auf dem Handy konsistent bleibt. */
  .pcard{grid-template-columns:1fr;gap:26px;}
  .product-grid .pcard:nth-child(even) .pcard-media-wrap{order:0;}
  .pcard-media{aspect-ratio:1/1;}

  .hero-final-inner{flex-direction:column;align-items:flex-start;gap:40px;}
  .hero-final .text-col{flex:1 1 auto;width:100%;}
  .bottle-stage{width:100%;flex:1 1 auto;}

  .nav-toggle{display:block;}
  .nav-links{
    position:fixed;top:76px;right:0;bottom:0;
    width:min(320px,84vw);
    flex-direction:column;align-items:flex-start;
    gap:0;padding:24px;
    background:var(--bg);
    border-left:1px solid var(--line);
    transform:translate3d(100%,0,0);
    transition:transform var(--dur-panel) var(--ease-out);
    z-index:99;overflow-y:auto;
  }
  .nav-links.open{transform:translate3d(0,0,0);}
  .nav-links a{width:100%;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;}
  .nav-links a::after{display:none;}
  .nav-backdrop{
    display:block;position:fixed;inset:76px 0 0;
    background:rgba(28,27,25,.4);
    opacity:0;pointer-events:none;
    transition:opacity var(--dur-panel) var(--ease-out);
    z-index:98;
  }
  .nav-backdrop.open{opacity:1;pointer-events:auto;}
}

@media (max-width:640px){
  .benefit-grid{grid-template-columns:1fr;}
  .route-track{grid-template-columns:1fr;}
  .pc-cols,.check-grid,.form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .spec-row{grid-template-columns:1fr;gap:2px;padding:8px 0;}
  .spec-row span:first-child{font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
  .brand-head{flex-direction:column;align-items:flex-start;gap:8px;}
  .finder-promo,.products-cta,.schatzkammer{flex-direction:column;align-items:flex-start;}
  .details-body{padding-left:14px;}
}

/* ---------- 17. Reduzierte Bewegung --------------------------------------- */
/* Weniger und sanfter — nicht null. Deckkraft bleibt (hilft beim Verstehen),
   Positionswechsel entfallen. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .reveal-init,.bottle-stage .item{
    transform:none !important;
    transition:opacity 200ms ease !important;
  }
  .bottle-stage .item{opacity:1;}
  .btn:active,.details-toggle:active,.nav-toggle:active{transform:none;}
  .cat-card:hover{transform:none;}
}

/* ---------- 18. Druck ------------------------------------------------------ */
@media print{
  .nav,.nav-backdrop,footer,.finder-promo,.products-cta{display:none;}
  .details-panel{grid-template-rows:1fr !important;opacity:1 !important;}
  body{background:#fff;}
}

/* ==========================================================================
   19. Wegweiser (sortimentsempfehlung.html)
   Klassenpräfix nd-* bleibt unverändert, weil finder.js diese Namen erzeugt.
   Nur die Optik wurde ans Hauptsystem angeglichen — vorher hatte die Seite
   ein eigenes, abweichendes Token-Set.
   ========================================================================== */

.nd-page{max-width:var(--maxw-narrow);margin:0 auto;padding:clamp(40px,6vw,72px) var(--gutter) clamp(64px,9vw,110px);}

.nd-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(26px,4vw,40px);
}

.nd-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}
.nd-h1{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(26px,4.4vw,38px);line-height:1.14;margin:0 0 12px;}
.nd-h2{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(20px,3vw,26px);line-height:1.24;margin:0 0 16px;}
.nd-lede{color:var(--muted);font-size:15px;line-height:1.72;margin:0 0 26px;}
.nd-hint{color:var(--muted);font-size:13.5px;margin:0 0 18px;}

.nd-progress{height:2px;background:var(--line);overflow:hidden;margin-bottom:10px;}
.nd-progress-fill{height:100%;background:var(--accent);transition:width var(--dur-panel) var(--ease-out);}
.nd-progress-label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 26px;}

.nd-options{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px;}
.nd-chip{
  font-family:var(--sans);font-size:14px;
  padding:12px 19px;border-radius:var(--radius);
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  cursor:pointer;
  transition:background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,
             color var(--dur-fast) ease,transform var(--dur-press) var(--ease-out);
}
.nd-chip:active{transform:scale(0.97);}
.nd-chip.selected{background:var(--ink);border-color:var(--ink);color:var(--ink-inv);}
@media (hover:hover) and (pointer:fine){
  .nd-chip:hover{border-color:var(--ink);}
  .nd-chip.selected:hover{background:var(--accent);border-color:var(--accent);}
}

.nd-textarea{
  width:100%;min-height:118px;
  font-family:var(--sans);font-size:15px;padding:14px 15px;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--bg);color:var(--ink);resize:vertical;
}
.nd-textarea:focus{outline:none;border-color:var(--accent);}

.nd-nav{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.nd-btn{
  font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.04em;
  padding:14px 26px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;
  text-decoration:none;display:inline-block;text-align:center;
  transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,
             border-color var(--dur-fast) ease,opacity var(--dur-fast) ease,
             transform var(--dur-press) var(--ease-out);
}
.nd-btn:active:not(:disabled){transform:scale(0.97);}
.nd-btn:disabled{opacity:.38;cursor:not-allowed;}
.nd-btn-gold{background:var(--accent);color:var(--bg);}
.nd-btn-outline{background:transparent;border-color:var(--line-strong);color:var(--ink);}
.nd-btn-text{background:none;border:none;color:var(--accent);padding:16px 0 0;font-size:12.5px;text-decoration:underline;cursor:pointer;}
@media (hover:hover) and (pointer:fine){
  .nd-btn-gold:hover:not(:disabled){background:var(--ink);}
  .nd-btn-outline:hover{background:var(--ink);border-color:var(--ink);color:var(--ink-inv);}
}

.nd-results .nd-result-card{display:flex;gap:20px;padding:24px 0;border-top:1px solid var(--line);}
.nd-results .nd-result-card:first-of-type{border-top:none;padding-top:6px;}
.nd-result-img{
  width:98px;height:124px;object-fit:contain;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  flex-shrink:0;padding:8px;
}
.nd-result-rank{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 5px;font-weight:600;}
.nd-result-name{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:18px;margin:0 0 4px;}
.nd-result-spec{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;}
.nd-result-reason{font-size:13.5px;color:var(--ink);margin:0 0 10px;font-style:italic;}
.nd-result-vorteile{margin:0 0 12px;padding-left:17px;font-size:13.5px;color:var(--muted);line-height:1.65;}
.nd-result-vorteile li{margin:2px 0;}

.nd-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:22px 0;}
.nd-cta-grid .nd-btn{width:100%;}

.nd-form .nd-field{margin-bottom:15px;}
.nd-form label{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;margin-bottom:6px;}
.nd-form input{
  width:100%;font-family:var(--sans);font-size:15px;padding:13px 15px;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--bg);color:var(--ink);
}
.nd-form input:focus{outline:none;border-color:var(--accent);}
.nd-form .nd-btn{width:100%;margin-top:8px;}
.nd-form-msg{margin-top:12px;font-size:13.5px;}
.nd-form-msg-error{color:var(--danger);}

@media (max-width:520px){
  .nd-cta-grid{grid-template-columns:1fr;}
  .nd-results .nd-result-card{flex-direction:column;}
  .nd-result-img{width:100%;height:190px;}
  .nd-nav{flex-direction:column-reverse;}
  .nd-nav .nd-btn{width:100%;}
}

/* ==========================================================================
   20. Rechtsseiten (impressum.html, datenschutz.html)
   ========================================================================== */

.legal{max-width:760px;margin:0 auto;padding:clamp(44px,6vw,72px) var(--gutter) clamp(64px,9vw,104px);}
.legal h1{font-size:clamp(28px,4.4vw,40px);line-height:1.14;margin:0 0 10px;}
.legal h2{
  font-size:clamp(18px,2.4vw,22px);margin:44px 0 14px;
  padding-left:14px;border-left:1px solid var(--accent);
}
.legal h3{font-family:var(--sans);font-size:15px;font-weight:600;margin:24px 0 8px;}
.legal p{margin:0 0 15px;color:var(--muted);font-size:14.5px;line-height:1.78;}
.legal ul{margin:0 0 15px;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.78;}
.legal li{margin:5px 0;}
.legal a{color:var(--accent);}
.meta-block{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:24px 0;
}
.meta-block p{margin:4px 0;color:var(--ink);font-size:14.5px;}
.legal-back{
  display:inline-block;margin-top:52px;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:3px;
}
.legal-date{margin-top:44px;font-size:13px;color:var(--muted);}

/* Schlanker Kopf/Fuß für Unterseiten */
.sub-header{background:var(--ink);padding:20px var(--gutter);}
.sub-header a{
  font-family:var(--serif);font-optical-sizing:auto;
  font-size:18px;font-weight:500;letter-spacing:.06em;
  color:var(--ink-inv);text-decoration:none;
}
.sub-header a span{color:var(--accent-soft);}
.sub-footer{
  text-align:center;padding:26px 20px;
  font-size:11.5px;color:var(--muted);
  border-top:1px solid var(--line);
}
.sub-footer a{color:var(--accent);}

/* ==========================================================================
   21. Nachträge
   ========================================================================== */

/* Zweiter Umschalter je Produkt ("Technisches Datenblatt") — optisch
   nachgeordnet, damit "Details" die primäre Aktion bleibt. */
.details-toggle.spec-btn{
  border-color:var(--line);
  color:var(--muted);
}
.details-toggle.spec-btn[aria-expanded="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--bg);
}
@media (hover:hover) and (pointer:fine){
  .details-toggle.spec-btn:hover{border-color:var(--line-strong);color:var(--ink);}
}

/* Von finder.js zur Laufzeit erzeugt */
.nd-link-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;letter-spacing:.03em;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
  transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
@media (hover:hover) and (pointer:fine){
  .nd-link-arrow:hover{color:var(--ink);border-color:var(--ink);}
}
.nd-result-text{min-width:0;}

/* ==========================================================================
   22. Unterseiten: Marken- und Produktseiten
   ========================================================================== */

.detail-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.detail-page,.brand-page{padding:clamp(24px,3vw,36px) 0 clamp(72px,9vw,120px);}

/* Brotkrumen */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.03em;color:var(--muted);
  margin-bottom:clamp(28px,4vw,48px);
}
.crumbs a{color:var(--muted);text-decoration:none;}
.crumbs span[aria-current]{color:var(--ink);}
.crumb-sep{color:var(--line-strong);}
@media (hover:hover) and (pointer:fine){ .crumbs a:hover{color:var(--accent);} }

/* Produktkopf: Bild und Einstieg nebeneinander */
.detail-hero{
  display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px);align-items:center;
  padding-bottom:clamp(44px,6vw,76px);
  border-bottom:1px solid var(--line);
}
.detail-media{min-width:0;}
/* Ohne Deckelung rechnet aspect-ratio 4/5 das Bild auf breiten Schirmen
   sehr hoch — die Flasche wirkte dann erschlagend. */
.detail-media .pcard-media{max-height:min(72vh,620px);aspect-ratio:auto;height:min(72vh,620px);}
.detail-media .pcard-media .slide{padding:clamp(24px,3vw,44px);}
.detail-media .pcard-media .slide img{max-height:100%;height:auto;width:auto;max-width:100%;}
.detail-intro{min-width:0;}
.detail-intro h1{
  font-size:clamp(28px,4.4vw,50px);line-height:1.1;letter-spacing:-0.018em;
  margin:0 0 12px;
}
.detail-intro .spec{margin-bottom:18px;}
.detail-intro .teaser{margin-bottom:30px;}

/* Inhaltsabschnitte */
.detail-section{
  padding:clamp(40px,5.5vw,72px) 0;
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);
  gap:clamp(20px,4vw,56px);
}
.detail-section > h2{
  font-size:clamp(19px,2.4vw,26px);line-height:1.2;margin:0;
  align-self:start;position:sticky;top:96px;
}
.detail-section > *:not(h2){grid-column:2;}
.detail-section .full-desc{font-size:15.5px;line-height:1.78;}
.detail-section .pc-cols{margin-top:28px;}

.sheet .spec-group:first-child h6{margin-top:0;}

/* Abschluss-Aufruf */
.detail-cta{
  margin-top:clamp(44px,6vw,76px);
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3.5vw,42px);
  display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;
}
.detail-cta h3{font-size:21px;margin:0 0 8px;}
.detail-cta p{margin:0;font-size:14.5px;line-height:1.7;color:var(--muted);max-width:52ch;}

/* Weitere Abfüllungen */
.related{margin-top:clamp(48px,6vw,80px);}
.rel-heading{font-size:clamp(18px,2.2vw,23px);margin:0 0 24px;}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);}
.rel-card{
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;
  transition:border-color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}
.rel-card img{height:140px;width:100%;object-fit:contain;}
.rel-name{font-family:var(--serif);font-optical-sizing:auto;font-size:15.5px;line-height:1.35;}
@media (hover:hover) and (pointer:fine){
  .rel-card:hover{border-color:var(--line-strong);transform:translateY(-2px);}
}

/* Markenseite */
.brand-hero{
  max-width:64ch;
  padding-bottom:clamp(36px,5vw,60px);
  border-bottom:1px solid var(--ink);
}
.brand-hero h1{font-size:clamp(32px,5vw,56px);line-height:1.08;letter-spacing:-0.02em;margin:0 0 12px;}
.brand-hero h1 span{display:block;font-style:italic;color:var(--muted);font-size:.52em;letter-spacing:0;margin-top:8px;}
.brand-hero .brand-note{display:block;margin-bottom:20px;}
.brand-hero .lede{margin-bottom:0;}

/* Produktliste auf der Markenseite — gleiche Wechsel-Logik wie auf der Startseite */
.brandrows{display:flex;flex-direction:column;}
.brandrow{
  display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,60px);align-items:center;
  padding:clamp(36px,5vw,64px) 0;
  border-bottom:1px solid var(--line);
}
.brandrows .brandrow:nth-child(even) .brandrow-media{order:2;}
.brandrow-media{
  display:block;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-media);
  padding:clamp(18px,2.5vw,32px);
  transition:border-color var(--dur-fast) ease;
}
.brandrow-media img{width:100%;height:clamp(180px,26vw,300px);object-fit:contain;}
@media (hover:hover) and (pointer:fine){
  .brandrow-media:hover{border-color:var(--line-strong);}
}
.brandrow-body{min-width:0;}
.brandrow-lot{
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}
.brandrow-body h2{font-size:clamp(21px,2.8vw,32px);line-height:1.16;margin:0 0 8px;}
.brandrow-body h2 a{text-decoration:none;color:var(--ink);}
@media (hover:hover) and (pointer:fine){ .brandrow-body h2 a:hover{color:var(--accent);} }

@media (max-width:860px){
  .detail-hero{grid-template-columns:1fr;gap:26px;}
  .detail-section{grid-template-columns:1fr;gap:16px;}
  .detail-section > *:not(h2){grid-column:1;}
  .detail-section > h2{position:static;}
  .brandrow{grid-template-columns:1fr;gap:22px;}
  .brandrows .brandrow:nth-child(even) .brandrow-media{order:0;}
  .rel-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .rel-grid{grid-template-columns:1fr;}
  .detail-cta{flex-direction:column;align-items:flex-start;}
}

/* Link zur Produktseite in der Umschalter-Zeile — optisch als dritte,
   gleichrangige Option neben Details und Datenblatt. */
a.details-toggle.pcard-link{
  text-decoration:none;
  border-color:var(--accent);
  color:var(--accent);
}
@media (hover:hover) and (pointer:fine){
  a.details-toggle.pcard-link:hover{background:var(--accent);border-color:var(--accent);color:var(--bg);}
}
.brand-head-link{text-decoration:none;color:inherit;}
@media (hover:hover) and (pointer:fine){
  .brand-head-link:hover{color:var(--accent);}
}

/* Statischer Kopf des Wegweisers (steht vor dem JS-Ablauf) */
.nd-page-h1{
  font-size:clamp(28px,4.4vw,42px);line-height:1.12;
  letter-spacing:-0.018em;margin:0 0 14px;
}
.nd-page-intro{
  color:var(--muted);font-size:15.5px;line-height:1.75;
  max-width:56ch;margin:0 0 clamp(28px,4vw,44px);
}