/* ==========================================================================
   Helvion Biosciences — ein Stylesheet für alle Seiten und alle Breiten.
   Im Entwurf gab es getrennte Fassungen für Schreibtisch und Telefon; hier
   nicht. Zwei Quellen laufen auseinander, sobald man eine davon anfasst.
   ========================================================================== */

:root {
  /* Flächen */
  --grund:      #EBE9E5;
  --papier:     #FFFFFF;
  --gedaempft:  #F2F1EF;
  --dunkel:     #14171C;
  --dunkel-2:   #1E2229;

  /* Schrift */
  --tinte:      #14171C;
  --tinte-2:    #3C4149;
  --tinte-3:    #6E737C;
  --tinte-4:    #8A8F98;
  --auf-dunkel: #EDEBE7;
  --auf-dunkel-2: #A8ADB6;

  /* Linien */
  --linie:      #D6D2CB;
  --linie-2:    #E2DED7;
  --linie-3:    #C4C0B8;
  --linie-dunkel: #262B33;

  /* Akzent — trägt die Handlung, sonst nichts */
  --akzent:     #F2D24B;
  --akzent-tief:#E4C238;
  --akzent-schrift: #4A421A;

  /* Signale */
  --gruen:      #2B6640;
  --gruen-flaeche: #E7EDE5;
  --warn:       #7A5A0E;
  --warn-flaeche: #F7F1DE;

  /* Maße */
  --box:        1320px;
  --box-hero:   1760px;   /* der Hero darf breiter als der Satzspiegel */
  --box-kopf:   1200px;   /* = Satzspiegel minus Innenabstand: das Menü beginnt auf der Textlinie */
  --rand-hero:  clamp(14px, 1.8vw, 34px);
  --luft-hero:  clamp(12px, 1.6vw, 28px);   /* Abstand Kopfleiste zum Bild */
  --radius-hero: 30px;
  --rand:       60px;
  --radius:     26px;
  --radius-klein: 20px;
  --pille:      100px;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", Consolas, "Courier New", monospace;

  --schwung: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 900px) { :root { --rand: 28px; --radius: 20px; --radius-hero: 22px; } }
@media (max-width: 560px) { :root { --rand: 20px; } }

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

html { scroll-behavior: smooth; background: var(--grund); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.ser  { font-family: var(--serif); font-weight: 400; }
.mono { font-family: var(--mono); }

/* Nur für Vorleseprogramme, nicht sichtbar */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.springen {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--dunkel); color: #FFF; padding: 12px 20px;
  border-radius: var(--pille); font-size: 14px; transition: top 160ms ease;
}
.springen:focus { top: 8px; }

:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Typografie — die Größen wachsen mit dem Fenster, statt in Sprüngen an
   Haltepunkten umzuklappen. clamp() nimmt Mindestmaß, Wunschmaß, Höchstmaß.
   -------------------------------------------------------------------------- */

.titel-xl {
  font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(3.4rem, 11.6vw, 10.5rem);
  line-height: 0.87; letter-spacing: -0.035em;
}
.titel-l {
  font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(2.9rem, 6.4vw, 5.75rem);
  line-height: 0.94; letter-spacing: -0.03em;
}
.titel-m {
  font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(2.2rem, 3.9vw, 3.5rem);
  line-height: 0.98; letter-spacing: -0.025em;
}
.titel-s {
  font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.0; letter-spacing: -0.022em;
}
.zahl-gross {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.8rem, 5.7vw, 5.125rem);
  line-height: 0.9; letter-spacing: -0.03em;
}

.vorspann { font-size: clamp(1rem, 1.45vw, 1.3125rem); line-height: 1.5; color: var(--tinte-2); font-weight: 300; }
.fliess    { font-size: clamp(0.95rem, 1.15vw, 1.125rem); line-height: 1.62; color: var(--tinte-2); font-weight: 300; }
.klein     { font-size: 0.875rem; line-height: 1.55; color: var(--tinte-3); font-weight: 300; }
.winzig    { font-size: 0.78rem; line-height: 1.5; color: var(--tinte-4); font-weight: 300; }

.kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.72rem; letter-spacing: 0.22em; color: var(--tinte-3);
  text-transform: uppercase;
}
.kicker::before { content: ""; width: 40px; height: 1px; background: currentColor; flex-shrink: 0; }
@media (max-width: 560px) { .kicker::before { width: 26px; } }

/* --------------------------------------------------------------------------
   Gerüst
   -------------------------------------------------------------------------- */

/* Der Satzspiegel: begrenzte Breite, mittig. Auf breiten Schirmen laufen
   Textzeilen sonst so weit, dass das Auge die nächste Zeile nicht mehr findet. */
.bahn { max-width: var(--box); margin-left: auto; margin-right: auto;
        padding-left: var(--rand); padding-right: var(--rand); }

/* Über die ganze Fläche: Hero und farbige Bänder. Deren INHALT sitzt in einer
   eigenen .bahn darin, damit er auf der Linie der übrigen Seite bleibt. */
.voll { width: 100%; }
.luft-oben  { padding-top: clamp(48px, 7vw, 104px); }
.luft-unten { padding-bottom: clamp(48px, 7vw, 104px); }

.randlos { margin-left: calc(var(--rand) * -1); margin-right: calc(var(--rand) * -1); }

.dunkelband { background: #111111; color: var(--auf-dunkel); }
.dunkelband .titel-l, .dunkelband .titel-m, .dunkelband .titel-s { color: #FFFFFF; }
.dunkelband .fliess { color: var(--auf-dunkel-2); }
.dunkelband .kicker { color: var(--tinte-4); }

/* --------------------------------------------------------------------------
   Kopfleiste — schwebende Pille, ab 900px klappt sie zum Menü
   -------------------------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 100;
  padding: 18px var(--rand) 0 var(--rand);
}
.pille {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  max-width: 1060px; margin: 0 auto;
  padding: 9px 9px 9px 30px;
  background: var(--papier); border-radius: var(--pille);
  box-shadow: 0 8px 30px rgba(20, 23, 28, 0.09), 0 1px 2px rgba(20, 23, 28, 0.05);
}
@media (max-width: 560px) { .pille { padding: 7px 7px 7px 20px; } }

.wortmarke { font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing: 0.13em; white-space: nowrap; }
.wortmarke:hover { text-decoration: none; }

.hauptnav { display: flex; align-items: center; gap: 32px; font-size: 0.9rem; color: var(--tinte-2); }
.hauptnav a { padding: 6px 0; border-bottom: 1.5px solid transparent; transition: border-color 180ms ease; }
.hauptnav a:hover, .hauptnav a[aria-current="page"] { text-decoration: none; border-bottom-color: var(--tinte); color: var(--tinte); }

.menuknopf {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: var(--pille);
  background: var(--dunkel); cursor: pointer; padding: 0;
}
.menuknopf svg { stroke: #FFFFFF; }

@media (max-width: 1060px) {
  .hauptnav, .kopf .knopf { display: none; }
  .menuknopf { display: flex; }
}

/* Aufgeklapptes Menü */
/* Vollbild mit Milchglas: der Inhalt bleibt dahinter erkennbar, das Menü
   liegt darüber statt die Seite zu ersetzen.

   Öffnen und Schließen laufen unterschiedlich lang — hinein zügig (440ms),
   hinaus etwas gelassener (560ms) mit weicherer Kurve. Gleich lange Wege in
   beide Richtungen wirken beim Schließen abgehackt. */
.klappmenu {
  position: fixed; inset: 0; z-index: 150;
  box-shadow: 0 0 0 100vmax #EFEEEB;
  background: #EFEEEB;
  display: flex; flex-direction: column;
  padding: 0 var(--rand) 40px var(--rand);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-14px) scale(0.985);
  transition: opacity 560ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 560ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 560ms;
}
.klappmenu[data-offen="ja"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 440ms var(--schwung),
              transform 440ms var(--schwung),
              visibility 0s linear 0s;
}


/* Die Einträge kommen gestaffelt nach, sobald das Menü offen ist */
.klappmenu nav a, .klappmenu .gruppe, .klappmenu .knopf {
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--schwung), transform 420ms var(--schwung);
}
.klappmenu[data-offen="ja"] nav a,
.klappmenu[data-offen="ja"] .gruppe,
.klappmenu[data-offen="ja"] .knopf { opacity: 1; transform: none; }
.klappmenu[data-offen="ja"] nav > *:nth-child(1) { transition-delay: 90ms; }
.klappmenu[data-offen="ja"] nav > *:nth-child(2) { transition-delay: 130ms; }
.klappmenu[data-offen="ja"] nav > *:nth-child(3) { transition-delay: 170ms; }
.klappmenu[data-offen="ja"] nav > *:nth-child(4) { transition-delay: 210ms; }
.klappmenu[data-offen="ja"] nav > *:nth-child(5) { transition-delay: 250ms; }
.klappmenu[data-offen="ja"] nav > *:nth-child(6) { transition-delay: 290ms; }
.klappmenu[data-offen="ja"] nav > *:nth-child(n+7) { transition-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
  .klappmenu, .klappmenu nav a, .klappmenu .gruppe, .klappmenu .knopf { transition-duration: 1ms; }
}
/* Dieselbe Dreiteilung wie die Kopfleiste darunter: Schließen links,
   Wortmarke mittig, Warenkorb rechts. Beide Außenspalten gleich breit,
   sonst sitzt die Marke nicht in der Mitte. */
.klappmenu-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 8px;
  /* Deckungsgleich mit der Kopfleiste: dasselbe Polster, derselbe Randabstand,
     dieselbe Symbolgröße — sonst springen X und Warenkorb beim Öffnen an eine
     andere Stelle. */
  /* Exakt dieselben Werte wie die Kopfleiste: gleiches Polster, gleicher
     Randabstand, gleiche Symbolgröße. Eine min-height würde den Kopf dehnen
     und die Symbole dabei aus der Linie schieben. */
  margin: 0 calc(var(--rand) * -1);
  padding: 7px var(--rand-hero);
}
.klappmenu-kopf .menuknopf { justify-self: start; display: flex; background: transparent; color: var(--tinte); }
.klappmenu-kopf .menuknopf svg { stroke: currentColor; }
.klappmenu-kopf .wortmarke { justify-self: center; }
.klappmenu-kopf .kopf-symbol { justify-self: end; color: var(--tinte); }
.klappmenu nav { display: flex; flex-direction: column; gap: 4px; margin-top: 40px; }
.klappmenu nav a {
  font-family: var(--serif); font-size: clamp(1.9rem, 7.4vw, 2.7rem);
  line-height: 1.15; letter-spacing: -0.022em; padding: 7px 0;
  border-bottom: 0;
}
.klappmenu .gruppe {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-2); margin: 30px 0 10px 0;
}
.klappmenu .gruppe:first-child { margin-top: 0; }
.klappmenu nav a:hover { text-decoration: none; padding-left: 10px; transition: padding 200ms var(--schwung); }
.klappmenu .knopf { margin-top: 34px; }

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 32px;
  border-radius: var(--pille); border: 1px solid transparent;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: transform 180ms var(--schwung), background 180ms ease, box-shadow 180ms ease;
}
.knopf:hover { text-decoration: none; transform: translateY(-2px); }
.knopf:active { transform: none; }

.knopf-akzent { background: var(--akzent); color: var(--tinte); }
.knopf-akzent:hover { background: var(--akzent-tief); box-shadow: 0 8px 22px rgba(242, 210, 75, 0.4); }

.knopf-dunkel { background: var(--dunkel); color: #FFFFFF; }
.knopf-dunkel:hover { box-shadow: 0 8px 22px rgba(20, 23, 28, 0.24); }

.knopf-umriss { border-color: var(--linie-3); color: var(--tinte); background: transparent; font-weight: 500; }
.knopf-umriss:hover { border-color: var(--tinte); }

.dunkelband .knopf-umriss { border-color: #3A3F48; color: var(--auf-dunkel); }
.dunkelband .knopf-umriss:hover { border-color: var(--auf-dunkel); }

.knopf-klein { min-height: 46px; padding: 0 24px; font-size: 0.875rem; }
.knopf[disabled], .knopf[aria-disabled="true"] {
  background: #DAD6CF; color: var(--tinte-4); cursor: not-allowed; transform: none; box-shadow: none;
}

/* --------------------------------------------------------------------------
   Bausteine
   -------------------------------------------------------------------------- */

.karte { background: var(--papier); border-radius: var(--radius); padding: clamp(28px, 3.4vw, 52px); }
.karte-akzent { background: var(--akzent); color: var(--tinte); }
.karte-akzent .fliess { color: var(--akzent-schrift); }
.karte-dunkel { background: #111111; color: var(--auf-dunkel); }

.marke { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--tinte-4); text-transform: uppercase; }
.karte-akzent .marke { color: #6B5A16; }
.karte-dunkel .marke { color: var(--tinte-4); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.72rem;
  padding: 7px 13px; border-radius: var(--pille);
  background: #DCD8D1; color: var(--tinte-2);
}
.chip svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.75; }
.chip-gruen { background: #D7E3D6; color: #235235; }
.chip-warn  { background: #F0E5C2; color: #6B4E0C; }

/* Datenliste: Feld links, Wert rechts, feine Linie dazwischen */
.datenliste { display: flex; flex-direction: column; }
.datenzeile {
  display: grid; grid-template-columns: minmax(140px, 260px) minmax(0, 1fr);
  gap: 24px; padding: 19px 0; border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.datenzeile dt { font-size: 0.94rem; color: var(--tinte-3); font-weight: 300; margin: 0; }
.datenzeile dd { font-family: var(--mono); font-size: 0.94rem; color: var(--tinte); margin: 0; word-break: break-word; }
.dunkelband .datenzeile { border-bottom-color: var(--linie-dunkel); }
.dunkelband .datenzeile dt { color: var(--auf-dunkel-2); }
.dunkelband .datenzeile dd { color: #FFFFFF; }

@media (max-width: 640px) {
  .datenzeile { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}

/* Prüfliste: Bezeichnung links, Wert rechts auf einer Zeile */
.pruefzeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 19px 0; border-bottom: 1px solid var(--linie-dunkel);
}
.pruefzeile > span:first-child { font-size: 0.94rem; color: var(--auf-dunkel-2); font-weight: 300; }
.pruefzeile > span:last-child { font-family: var(--mono); font-size: 0.94rem; color: #FFFFFF; white-space: nowrap; }

/* Kennwerte nebeneinander, mit Trennlinien */
.kennwerte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linie); }
.kennwert { display: flex; flex-direction: column; gap: 10px;
  padding: clamp(32px, 4vw, 62px) 24px clamp(30px, 3.8vw, 58px) 24px;
  border-right: 1px solid var(--linie); }
.kennwert:last-child { border-right: 0; }
@media (max-width: 860px) {
  .kennwerte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kennwert { border-right: 1px solid var(--linie); padding: 22px 10px !important; }
  .kennwert:last-child { border-right: 0; }
  .kennwert .zahl-gross { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .kennwert .klein { font-size: 0.76rem; line-height: 1.42; }
}
@media (max-width: 400px) {
  .kennwert { padding: 20px 6px !important; }
  .kennwert .zahl-gross { font-size: 1.34rem; }
  .kennwert .klein { font-size: 0.68rem; }
}

/* Formularfeld als Linie, nicht als Kasten */
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld > label { font-size: 0.78rem; color: var(--tinte-4); }
.feld input, .feld select, .feld textarea {
  font-family: var(--sans); font-size: 1.0625rem; color: var(--tinte);
  background: transparent; border: 0; border-bottom: 1px solid var(--linie-3);
  padding: 10px 2px; min-height: 46px; width: 100%;
  transition: border-color 200ms ease;
}
.feld textarea { min-height: 100px; resize: vertical; line-height: 1.55; }
.feld input::placeholder, .feld textarea::placeholder { color: #A5AAB4; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-bottom-color: var(--tinte-3); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 0; border-bottom-color: var(--tinte); border-bottom-width: 2px; padding-bottom: 9px; }
.feld select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; }
.feld-hinweis { font-size: 0.78rem; color: var(--tinte-4); }
.feld-fehler { font-size: 0.82rem; color: #A33; display: none; }
.feld[data-fehler="ja"] input, .feld[data-fehler="ja"] select, .feld[data-fehler="ja"] textarea { border-bottom-color: #A33; }
.feld[data-fehler="ja"] .feld-fehler { display: block; }

.feldreihe { display: grid; gap: 34px 40px; }
.feldreihe-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feldreihe-3 { grid-template-columns: 1fr 2fr 1.4fr; }
.feldreihe-breit { grid-template-columns: 2.4fr 1fr; }
.feld-voll { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .feldreihe-2, .feldreihe-3, .feldreihe-breit { grid-template-columns: 1fr; gap: 26px; }
}

/* Auswahl: Radio und Haken ohne Systemoptik */
.wahl { display: flex; align-items: center; gap: 13px; min-height: 60px; padding: 0 22px;
        border: 1.5px solid var(--linie-3); border-radius: var(--pille); cursor: pointer;
        transition: border-color 180ms ease, background 180ms ease; }
.wahl:hover { border-color: var(--tinte-3); }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-punkt { display: flex; align-items: center; justify-content: center; width: 17px; height: 17px;
              border: 1.5px solid var(--linie-3); border-radius: 50%; flex-shrink: 0; }
.wahl-punkt::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tinte); transform: scale(0); transition: transform 180ms var(--schwung); }
.wahl input:checked ~ .wahl-punkt::after { transform: scale(1); }
.wahl:has(input:checked) { border-color: var(--tinte); background: var(--papier); }
.wahl:has(input:focus-visible) { outline: 2px solid var(--dunkel); outline-offset: 3px; }

.haken { display: flex; align-items: flex-start; gap: 15px; min-height: 46px; cursor: pointer; }
.haken input { position: absolute; opacity: 0; pointer-events: none; }
.haken-kasten { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
                border: 1.5px solid var(--linie-3); border-radius: 4px; flex-shrink: 0; margin-top: 3px;
                background: var(--papier); transition: background 160ms ease, border-color 160ms ease; }
.haken-kasten svg { opacity: 0; transition: opacity 160ms ease; }
.haken input:checked ~ .haken-kasten { background: var(--dunkel); border-color: var(--dunkel); }
.haken input:checked ~ .haken-kasten svg { opacity: 1; }
.haken:has(input:focus-visible) .haken-kasten { outline: 2px solid var(--dunkel); outline-offset: 3px; }
.haken > span:last-child { font-size: 0.94rem; line-height: 1.62; color: var(--tinte-2); font-weight: 300; }

/* Mengensteller */
.menge { display: inline-flex; align-items: center; border: 1px solid var(--linie-3); border-radius: var(--pille); background: var(--papier); }
.menge button { width: 52px; height: 52px; border: 0; background: transparent; cursor: pointer;
                font-size: 1.25rem; color: var(--tinte-2); font-family: var(--sans); border-radius: var(--pille); }
.menge button:hover { color: var(--tinte); background: var(--gedaempft); }
.menge output { display: flex; align-items: center; justify-content: center; min-width: 44px;
                font-family: var(--mono); font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   Bewegung — dieselbe Regel wie im Entwurf: nichts wird vorsorglich versteckt.
   Verborgen wird ein Abschnitt erst, wenn der Beobachter meldet, dass er
   außerhalb liegt. Ohne Skript steht die Seite vollständig da.
   -------------------------------------------------------------------------- */

.zeig { opacity: 0; transform: translateY(30px);
        transition: opacity 900ms var(--schwung), transform 900ms var(--schwung); }
.zeig.da { opacity: 1; transform: none; }
.zeig[data-stufe="1"] { transition-delay: 90ms; }
.zeig[data-stufe="2"] { transition-delay: 180ms; }
.zeig[data-stufe="3"] { transition-delay: 270ms; }

.reihe { opacity: 0; transform: translateY(14px);
         transition: opacity 620ms var(--schwung), transform 620ms var(--schwung); }
.reihe.da { opacity: 1; transform: none; }

@keyframes auf { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.auf { animation: auf 780ms var(--schwung) both; }
.auf[data-stufe="1"] { animation-delay: 60ms; }
.auf[data-stufe="2"] { animation-delay: 150ms; }
.auf[data-stufe="3"] { animation-delay: 250ms; }
.auf[data-stufe="4"] { animation-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  .zeig, .reihe { opacity: 1 !important; transform: none !important; transition: none; }
  .auf { animation: none; }
  .knopf:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */

.fuss { padding-top: clamp(48px, 6vw, 96px); padding-bottom: 40px; }
.fuss-oben { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
             padding-bottom: 40px; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.fuss-wortmarke { font-family: var(--serif); font-size: clamp(3.5rem, 8vw, 7.25rem); line-height: 0.8; letter-spacing: -0.03em; }
.fuss-spalten { display: flex; gap: 60px; font-size: 0.875rem; }
.fuss-spalten div { display: flex; flex-direction: column; gap: 12px; }
.fuss-spalten a { color: var(--tinte-3); }
.fuss-unten { display: flex; align-items: center; justify-content: space-between; gap: 24px;
              padding-top: 26px; font-size: 0.78rem; color: var(--tinte-4); font-weight: 300; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Rechtstexte — schmale Spalte, damit man sie lesen kann
   -------------------------------------------------------------------------- */

.rechtstext { max-width: 720px; }
.rechtstext h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.2rem);
                 line-height: 1.05; letter-spacing: -0.022em; margin: 48px 0 14px 0; }
.rechtstext h3 { font-size: 1rem; font-weight: 600; margin: 28px 0 8px 0; }
.rechtstext p, .rechtstext li { font-size: 0.97rem; line-height: 1.7; color: var(--tinte-2); font-weight: 300; }
.rechtstext ul { padding-left: 20px; }
.rechtstext li { margin-bottom: 8px; }
.rechtstext a { text-decoration: underline; text-underline-offset: 3px; }
.rechtstext dl { margin: 0; }

/* Platzhalter sichtbar machen — was fehlt, soll auffallen, nicht untergehen */
.luecke { background: rgba(242, 210, 75, 0.34); border-radius: 3px; padding: 0 4px; box-decoration-break: clone; }

/* Schrittmarken der Freischaltung — Zustand kommt aus dem Skript */
[data-schrittmarke] { color: #B0B4BB; transition: color 200ms ease; }
[data-schrittmarke]:hover { color: var(--tinte-3); }
[data-schrittmarke][data-zustand="jetzt"]   { color: var(--tinte); }
[data-schrittmarke][data-zustand="fertig"]  { color: var(--tinte-3); }
[data-schrittmarke] .titel-s { color: inherit; }
[data-schrittmarke] .mono { color: inherit; }

/* --------------------------------------------------------------------------
   Layout-Raster.
   Die Spaltenbreiten standen vorher als Inline-Angaben in den Seiten und
   brachen deshalb nirgends um — eine 400px-Seitenspalte passt nicht in ein
   390px-Fenster. Jetzt hier, an einer Stelle, mit Umbruchpunkten.
   -------------------------------------------------------------------------- */

.raster { display: grid; gap: clamp(30px, 5vw, 80px); align-items: start; }

/* Inhalt + Seitenspalte (Freischaltung, Kasse) */
.raster-seitlich { grid-template-columns: minmax(0, 1fr) 400px; }
@media (max-width: 1040px) { .raster-seitlich { grid-template-columns: minmax(0, 1fr); gap: 34px; } }

/* Zwei ungleiche Spalten (Analytik, Stoffdaten, Beschränkung) */
.raster-breit-schmal { grid-template-columns: 1.25fr minmax(0, 1fr); }
.raster-schmal-breit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.raster-kurz-lang    { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: center; }
@media (max-width: 900px) {
  .raster-breit-schmal, .raster-schmal-breit, .raster-kurz-lang { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* Hero: Vorspann und Knöpfe */
.raster-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 40px 80px; align-items: end; }
@media (max-width: 860px) { .raster-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Warenkorbposition: Bild + Angaben */
.raster-position { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 3.5vw, 46px); align-items: center; }
@media (max-width: 780px) { .raster-position { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* Zwei gleich breite Karten, brechen von selbst um */
.raster-karten { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: stretch; }
.raster-karten > * { height: 100%; }

/* Auf schmalen Fenstern darf nichts mehr auf einer Zeile kleben */
@media (max-width: 560px) {
  .pruefzeile { flex-wrap: wrap; gap: 4px 20px; }
  .pruefzeile > span:last-child { white-space: normal; }
  .menge button { width: 46px; height: 46px; }
}

/* Lange Kennungen und Platzhalter dürfen umbrechen statt zu schieben */
.mono { overflow-wrap: anywhere; }
.luecke { overflow-wrap: anywhere; }

/* Sehr schmale Geräte (320px): Fußspalten und Titel dürfen nicht schieben */
@media (max-width: 380px) {
  .fuss-spalten { gap: 30px; flex-wrap: wrap; }
  .fuss-oben { gap: 26px; }
  .titel-l, .titel-xl { word-break: break-word; hyphens: auto; }
}

/* --------------------------------------------------------------------------
   Bildhero: 16:9-Aufnahme, die Schrift liegt darin.

   Am Bild gemessen, nicht geschätzt: der obere Bildbereich ist hell
   (rgb 226,215,197 — dunkle Schrift 12,7:1), der untere dunkel
   (rgb 56,56,39 — weiße Schrift 11,8:1). Deshalb trägt die Kopfleiste oben
   dunkle Schrift und der Hero-Text unten weiße. Das ist kein Stilbruch,
   sondern die Anpassung an die Vorlage: eine durchgehende Farbe wäre an
   einer der beiden Stellen unlesbar.
   -------------------------------------------------------------------------- */

/* Der Hero ist die Ausnahme vom Satzspiegel: eigene, breitere Box, nur ein
   schmaler Rand zum Fenster.

   Höhe: Kopfleiste und Hero zusammen füllen genau eine Bildschirmhöhe — er
   ist beim Öffnen vollständig zu sehen, ohne zu scrollen. Die Höhe hängt
   deshalb am Fenster, nicht am Seitenverhältnis des Bildes; über
   object-fit: cover füllt die Aufnahme die Fläche.

   svh statt vh: auf Telefonen meint vh die Höhe OHNE eingeblendete
   Browserleiste — der Hero ragte damit beim Laden unter die Leiste.

   Die untere Schranke von 460px verhindert, dass auf einem sehr flachen
   Fenster (aufgeklapptes Entwicklerwerkzeug, geteilter Bildschirm) ein
   Streifen übrig bleibt, in dem die Überschrift nicht mehr steht. */
.bildhero {
  position: relative; background: var(--dunkel);
  max-width: var(--box-hero);
  width: calc(100% - var(--rand-hero) * 2);
  /* Oben und unten derselbe Abstand wie an den Seiten: der Hero sitzt in
     einem gleichmäßigen Rahmen, statt oben zu kleben.
     Der Abstand steht in der margin-Kurzform — eine getrennte Angabe für
     margin-top darüber würde von ihr wieder auf 0 gesetzt. */
  /* Etwas Luft zwischen Kopfleiste und Bild, und die Höhe entsprechend
     zurückgenommen — der Hero soll die Seite eröffnen, nicht sie ausfüllen.
     Er bleibt vollständig auf einem Bildschirm. */
  height: max(440px, calc(100svh - var(--kopfhoehe, 74px) - var(--luft-hero) - var(--rand-hero)));
  max-height: 900px;
  margin: var(--luft-hero) auto 0 auto;
  border-radius: var(--radius-hero); overflow: hidden;
}
/* --------------------------------------------------------------------------
   Der Hero ist eine Diashow: die Studioaufnahme mit unserer Schrift darauf,
   danach die Produktaufnahme, die ihre Angaben selbst traegt. Beide Blaetter
   liegen uebereinander und werden ueberblendet.
   -------------------------------------------------------------------------- */
.heroshow { position: absolute; inset: 0; display: block; }
.heroblatt {
  position: absolute; inset: 0; display: block;
  opacity: 0; transition: opacity 260ms ease;
}
.heroblatt[data-aktiv] { opacity: 1; }

/* Die zweite Aufnahme traegt ihre Angaben an den Raendern — beschnitten waere
   sie ihre halbe Aussage los. Sie wird deshalb ganz gezeigt und faehrt dabei
   langsam heraus: der Blick geht vom Produkt auf das ganze Bild. */
.bildhero .heroblatt-voll img {
  object-fit: cover;
  background: var(--dunkel);
}
@keyframes herauszoomen {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}
.bildhero picture { display: block; width: 100%; height: 100%; }
.bildhero img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Die zweite Aufnahme traegt ihre eigene Ueberschrift. Unsere Schrift daneben
   waere doppelt gemoppelt und wuerde sich mit ihr ueberlagern — also tritt
   sie zurueck, solange das zweite Blatt zu sehen ist. */
/* visibility nimmt den Text aus Trefferpruefung UND Tabulatorfolge —
   opacity allein laesst ihn unsichtbar anklickbar zurueck, und
   pointer-events an der Huelle holen sich die Kinder unten wieder. */
.bildhero[data-blatt="2"] .bildhero-text { opacity: 0; visibility: hidden; }
.bildhero[data-blatt="2"] .bildhero-schleier { opacity: 0; }
.bildhero-text, .bildhero-schleier { transition: opacity 240ms ease; }

/* --------------------------------------------------------------------------
   Der Name laeuft senkrecht am Rand des Hero — um eine Vierteldrehung
   gekippt, sodass man das Geraet drehen muss, um ihn zu lesen.

   Er schreibt sich beim Laden selbst: eine Blende faehrt langsam ueber den
   Zug, so wie eine Feder ihn zoege. Echtes Schreiben braeuchte SVG-Pfade —
   die Blende erreicht denselben Eindruck mit der Hausschrift.
   -------------------------------------------------------------------------- */
.heroschriftzug {
  position: absolute; z-index: 2; pointer-events: none;
  right: clamp(4px, 0.8vw, 16px); top: 50%;
  transform: translateY(-50%) rotate(180deg);
  /* Echte senkrechte Schrift statt einer gedrehten Zeile: so bleibt die Box
     schmal und hoch und laesst sich am Rand ausrichten. */
  writing-mode: vertical-rl; text-orientation: mixed;
  /* Fett und breit wie auf der Packung — Manrope traegt die Achse bis 800. */
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(2.6rem, min(21vh, 16vw), 13rem);
  line-height: 1; letter-spacing: -0.02em;
  /* Nur die Kontur, innen leer: der Zug steht wie gezeichnet auf dem Bild,
     ohne ihm eine Flaeche zu nehmen. */
  color: transparent;
  -webkit-text-stroke: 3px rgba(17, 17, 17, 0.5);
  white-space: nowrap;
  /* Gezogen wird von der Spitze her: bei gedrehter Schrift ist das unten. */
  animation: schreiben 3200ms cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
@keyframes schreiben {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* Auf der zweiten Aufnahme steht der Name schon im Bild — dort tritt er ab */
.bildhero[data-blatt="2"] .heroschriftzug { opacity: 0; }
.heroschriftzug { transition: opacity 240ms ease; }

@media (max-width: 760px) {
  .heroschriftzug {
    right: auto; left: clamp(8px, 3vw, 22px);
    top: 62%;
    font-size: min(17vh, 19vw);
    -webkit-text-stroke-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .heroschriftzug { animation: none; clip-path: none; }
}

/* --------------------------------------------------------------------------
   Anzeige, welche Aufnahme laeuft und wie lange noch: zwei Balken, die sich
   ueber die Standzeit fuellen. Sie schalten auch selbst weiter.
   -------------------------------------------------------------------------- */
.heroleiste {
  position: absolute; left: 50%; bottom: clamp(6px, 0.9vw, 14px);
  transform: translateX(-50%); z-index: 4;
  display: flex; gap: 8px; align-items: center;
}
.herobalken {
  position: relative; width: clamp(34px, 5vw, 58px); height: 3px;
  padding: 12px 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.herobalken::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: rgba(20, 23, 28, 0.22);
}
.herobalken-fuellung {
  position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px;
  width: 0; border-radius: 2px; background: var(--tinte);
}
/* Der aktive Balken fuellt sich ueber die Standzeit — dieselbe Dauer wie im
   Skript. Aendert sich die eine, muss die andere mit. */
.herobalken[data-laeuft] .herobalken-fuellung { animation: balkenfuellen 5500ms linear both; }
.herobalken[data-fertig] .herobalken-fuellung { width: 100%; }
.heroleiste[data-hand] .herobalken .herobalken-fuellung { animation: none; width: 0; }
.heroleiste[data-hand] .herobalken[aria-current="true"] .herobalken-fuellung { width: 100%; }
.herobalken::after {
  content: ''; position: absolute; left: -7px; right: -7px; top: -11px; bottom: -11px;
}
.herobalken:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; border-radius: 2px; }
@keyframes balkenfuellen { from { width: 0; } to { width: 100%; } }

/* Auf der dunklen zweiten Aufnahme braucht die Leiste helle Farben */
.bildhero[data-blatt="2"] .herobalken::before { background: rgba(255, 255, 255, 0.34); }
.bildhero[data-blatt="2"] .herobalken-fuellung { background: #FFFFFF; }
.bildhero[data-blatt="2"] .herobalken:focus-visible { outline-color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .herobalken[data-laeuft] .herobalken-fuellung { animation: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .heroblatt, .bildhero-text, .bildhero-schleier { transition: none; }
}

/* --------------------------------------------------------------------------
   Der warme Schein liegt hinter der ganzen Kopfzone: hinter der Kopfleiste
   und hinter dem Bild, und füllt die Flächen ringsum — genau die hellen
   Ränder, die sonst kalt weiß dastehen.

   Er hängt NICHT mehr in einem Rahmen um Kopfleiste und Hero. Der war die
   Ursache dafür, dass die sticky-Leiste beim Scrollen verschwand: sticky
   klebt nur innerhalb seines Elternelements, und dieser Rahmen endete
   direkt unter dem Bild.

   Die Ellipse ist breiter als hoch und trägt ein Plateau, damit die Farbe
   die seitlichen Ränder erreicht, statt schon in der Bildmitte auszulaufen.
   -------------------------------------------------------------------------- */

.seitenschein {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(580px, 100svh, 1150px);
  z-index: 0; pointer-events: none;
  /* Der Verlauf ist OBEN am kräftigsten — dort, wo die Kopfleiste sitzt und
     wo man ihn sieht. Vorher lief er nach oben auf transparent aus, also
     ausgerechnet an der Stelle ins Nichts.

     Eine Ellipse hätte einen Mittelpunkt und damit einen sichtbaren Fleck;
     die vielen Zwischenstufen hier lassen die Farbe gleichmäßig auslaufen. */
  background-image: linear-gradient(to bottom,
    #FFF9A8 0%,
    #FFFAB4 18%,
    #FFFBC2 38%,
    rgba(255, 252, 208, 0.86) 58%,
    rgba(255, 253, 224, 0.62) 76%,
    rgba(255, 254, 238, 0.34) 88%,
    rgba(255, 255, 255, 0.14) 96%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0.62;
  mix-blend-mode: multiply;
}
body > header, body > main, body > footer { position: relative; z-index: 1; }

/* Die neue Aufnahme ist links durchgehend hell (rgb 227,225,228 — dunkle
   Schrift ergibt 13,9:1, weiße nur 1,3:1). Also dunkler Text, und kein
   dunkler Verlauf: der würde das helle Studiobild nur schmutzig machen.
   Ein zarter Aufheller von links hält den Kontrast, wo das Produkt näher
   rückt. */
.bildhero-schleier {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(244,243,241,0.86) 0%, rgba(244,243,241,0.5) 30%, rgba(244,243,241,0) 56%);
}

.bildhero-text {
  position: absolute; inset: 0; z-index: 3;
  padding: clamp(30px, 4vw, 64px) clamp(28px, 4.4vw, 76px);
  display: flex; flex-direction: column; justify-content: center;
  pointer-events: none; color: var(--tinte);
}
.bildhero-text > * { max-width: min(38ch, 48%); pointer-events: auto; }
.bildhero-text .titel-xl { font-size: clamp(2.6rem, 6.4vw, 6.6rem); line-height: 0.93; color: var(--tinte); text-shadow: none; }
.bildhero-text .vorspann { color: var(--tinte-2); text-shadow: none; }
.bildhero-text .kicker { color: var(--tinte-3); text-shadow: none; }


.bildhero-text .hero-link { color: var(--tinte); }

.hero-link {
  position: relative;
  align-self: flex-start; margin-top: 26px;
  font-size: 1rem; font-weight: 500; padding-bottom: 6px;
  border-bottom: 1.5px solid currentColor;
  display: inline-flex; align-items: center; gap: 10px;
  transition: gap 200ms var(--schwung);
}
.hero-link:hover { text-decoration: none; gap: 16px; }

@media (max-width: 860px) {
  .bildhero { height: max(500px, calc(100svh - var(--kopfhoehe, 70px) - var(--luft-hero) - var(--rand-hero))); }
  .bildhero-text > * { max-width: 100%; }
  .bildhero-text .titel-xl { font-size: clamp(2.7rem, 12vw, 4.2rem); }
}

/* --------------------------------------------------------------------------
   Kopfleiste über dem Bild: durchsichtig, drei Felder, Wortmarke in der Mitte
   -------------------------------------------------------------------------- */

/* Die Kopfleiste hat zwei Zustände.

   Oben auf der Seite: gar keine Fläche. Nur Schrift und Symbole auf dem
   Seitengrund — nichts, was das Bild darunter stört.

   Sobald gescrollt wird: die FLÄCHE läuft über die volle Breite und
   zeichnet weich, was unter ihr durchläuft; die TEXTE bleiben dabei im
   Satzspiegel stehen, damit sie mit dem Inhalt fluchten. Getrennt gelöst,
   weil beides verschiedenen Regeln folgt — Fläche randlos, Inhalt geboxt.

   Ohne Skript bleibt es beim ersten Zustand. */
.kopf-ueberlagert, .kopf-schlicht {
  position: sticky; top: 0; z-index: 100;
  padding: 11px var(--rand-hero);
  background: transparent; color: var(--tinte);
  border-bottom: 1px solid transparent;
  /* Nur die Fläche blendet auf — Maße und Polster bleiben, damit beim
     Umschalten nichts wandert. */
  transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

/* Gescrollt: Fläche über die ganze Breite, Schatten nur als Haaransatz */
[data-gescrollt="ja"].kopf-ueberlagert,
[data-gescrollt="ja"].kopf-schlicht {
  background: rgba(240, 239, 236, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom-color: rgba(20, 23, 28, 0.08);
  box-shadow: 0 1px 1px rgba(20, 23, 28, 0.02),
              0 6px 16px rgba(20, 23, 28, 0.035),
              0 18px 44px rgba(20, 23, 28, 0.045);
}


/* Nur Maße animieren, keine Schriftgrößen: clamp()-Werte überblenden nicht
   gleichmäßig, die Beschriftungen sprangen dadurch beim Umschalten. */

/* Der Inhalt sitzt in beiden Zuständen im Satzspiegel */
.kopf-ueberlagert .balken, .kopf-schlicht .balken {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 20px;
  max-width: var(--box-kopf); margin: 0 auto;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-gescrollt="ja"].kopf-ueberlagert,
  [data-gescrollt="ja"].kopf-schlicht { background: rgba(240, 239, 236, 0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .kopf-ueberlagert, .kopf-schlicht { transition: none; }
}

.kopf-ueberlagert .wortmarke, .kopf-schlicht .wortmarke { justify-self: center; font-size: clamp(1.35rem, 2.1vw, 1.95rem); letter-spacing: 0.28em; }

.kopf-links  { display: flex; align-items: center; gap: 22px; font-size: 0.9rem; font-weight: 500; }
.kopf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 0.9rem; font-weight: 500; }
.kopf-links a, .kopf-rechts a { position: relative; padding: 4px 0 2px 0; }
.kopf-links a::after, .kopf-rechts a:not(.kopf-symbol)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 620ms var(--schwung);
}
.kopf-links a:hover, .kopf-rechts a:hover,
.kopf-links a:focus-visible, .kopf-rechts a:focus-visible { text-decoration: none; }
.kopf-links a:hover::after, .kopf-rechts a:not(.kopf-symbol):hover::after,
.kopf-links a:focus-visible::after, .kopf-rechts a:not(.kopf-symbol):focus-visible::after { transform: scaleX(1); }
.kopf-links a[aria-current="page"]::after, .kopf-rechts a:not(.kopf-symbol)[aria-current="page"]::after { transform: scaleX(1); }
/* Beim Verlassen läuft der Strich nach rechts hinaus statt zurückzuschnappen */
.kopf-links a:not(:hover)::after, .kopf-rechts a:not(.kopf-symbol):not(:hover)::after { transform-origin: right center; }
.kopf-links a[aria-current="page"]:not(:hover)::after { transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
  .kopf-links a::after, .kopf-rechts a:not(.kopf-symbol)::after { transition: none; }
}
.kopf-symbol { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; padding: 0; color: inherit; border-radius: 50%; transition: background 180ms ease; }

@media (max-width: 1060px) {
  .kopf-links, .kopf-rechts a:not(.kopf-symbol) { display: none; }
  .kopf-ueberlagert .balken { grid-template-columns: auto 1fr auto; }
  .kopf-ueberlagert .wortmarke { justify-self: start; }
  .kopf-ueberlagert .menuknopf { display: flex; }
}

/* Unterseiten haben kein Vollbild — gleiche Aufteilung, aber auf dem Grund
   statt über einem Foto. Die Wortmarke bleibt dort, wo das Auge sie sucht. */

@media (max-width: 1060px) {
  .kopf-schlicht .kopf-links, .kopf-schlicht .kopf-rechts a:not(.kopf-symbol) { display: none; }
  .kopf-schlicht .balken { grid-template-columns: auto 1fr auto; }
  .kopf-schlicht .wortmarke { justify-self: start; }
  .kopf-schlicht .menuknopf { display: flex; }
}

/* Auf 320px-Geräten ist die untere Schranke von clamp() noch zu hoch: ein
   einzelnes langes Wort in der Serifenschrift schiebt die Seite auf. */
@media (max-width: 400px) {
  .titel-xl { font-size: clamp(2.6rem, 13vw, 4rem); }
  .titel-l  { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .titel-m  { font-size: clamp(1.8rem, 8.5vw, 2.6rem); }
  .zahl-gross { font-size: clamp(2.2rem, 11vw, 3.4rem); }
}

/* Grid- und Flex-Kinder dürfen unter ihre Inhaltsbreite schrumpfen. Ohne das
   schiebt ein einziges langes Wort die ganze Seite auf. */
.raster > *, .karte, form, fieldset, .feldreihe > * { min-width: 0; }
@media (max-width: 400px) {
  .feldreihe-2, .feldreihe-3, .feldreihe-breit { grid-template-columns: minmax(0, 1fr); }
  .wahl { padding: 0 16px; }
  .chip { font-size: 0.68rem; padding: 5px 10px; }
}

/* Die farbige Fläche geht durch, der Text darin bleibt im Satzspiegel */
.dunkelband > .bahn { padding-top: inherit; padding-bottom: inherit; }

/* ==========================================================================
   Schichten: Suche fährt von oben ein, Warenkorb von rechts.
   Beide liegen über der Seite, verdunkeln sie und geben den Fokus zurück,
   wo er herkam. Ohne JavaScript sind sie nicht erreichbar — deshalb führen
   ihre Auslöser zusätzlich auf echte Seiten (siehe href).
   ========================================================================== */

.schleier {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(20, 23, 28, 0.42);
  opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--schwung), visibility 0s linear 320ms;
}
.schleier[data-offen="ja"] { opacity: 1; visibility: visible; transition-delay: 0s; }

/* --- Suche: von oben --- */
.suchschicht {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--papier);
  transform: translateY(-100%);
  transition: transform 460ms var(--schwung);
  box-shadow: 0 20px 50px rgba(20, 23, 28, 0.14);
}
.suchschicht[data-offen="ja"] { transform: none; }
.suchschicht-inhalt {
  max-width: var(--box); margin: 0 auto;
  padding: clamp(26px, 4vw, 44px) var(--rand);
  display: flex; align-items: center; gap: 20px;
}
.suchschicht input {
  flex: 1; min-width: 0;
  font-family: var(--sans); font-size: clamp(1.1rem, 2.6vw, 1.9rem); font-weight: 500;
  color: var(--tinte); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--tinte);
  padding: 10px 2px 14px 2px;
}
.suchschicht input::placeholder { color: var(--tinte-4); font-weight: 400; }
.suchschicht input:focus { outline: 0; border-bottom-width: 2px; padding-bottom: 13px; }

.rundknopf {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 0; border-radius: 50%; background: var(--gedaempft);
  cursor: pointer; color: var(--tinte);
  transition: background 180ms ease, transform 180ms var(--schwung);
}
.rundknopf:hover { background: var(--linie); transform: rotate(90deg); }

.suchvorschlaege { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--rand) clamp(24px, 3vw, 36px) var(--rand);
                   max-width: var(--box); margin: 0 auto; }
.suchvorschlaege .winzig { width: 100%; margin: 0 0 4px 0; }

/* --- Warenkorb: von rechts --- */
.korbschicht {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  box-shadow: -20px 0 50px rgba(20, 23, 28, 0.16), 0 50vh 0 0 var(--papier);
  width: min(460px, 100vw);
  background: var(--papier);
  transform: translateX(100%);
  transition: transform 460ms var(--schwung);
  box-shadow: -20px 0 50px rgba(20, 23, 28, 0.16);
  display: flex; flex-direction: column;
}
.korbschicht[data-offen="ja"] { transform: none; }
.korbschicht-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 28px 30px 20px 30px; border-bottom: 1px solid var(--linie);
}
.korbschicht-liste { flex: 1; overflow-y: auto; padding: 24px 30px; }
.korbschicht-fuss { padding: 22px 30px 28px 30px; border-top: 1px solid var(--linie); }
.korbposten { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; }
.korbposten-bild { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px;
                   background: var(--gedaempft); border-radius: 14px; padding: 8px; }
.korbposten-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }

@media (max-width: 520px) {
  .korbschicht { width: 100vw; }
  .korbschicht-kopf, .korbschicht-liste, .korbschicht-fuss { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .suchschicht, .korbschicht, .schleier { transition-duration: 1ms; }
  .rundknopf:hover { transform: none; }
}

/* Symbolreihe in der Kopfleiste */
.kopf-symbole { display: flex; align-items: center; gap: 4px; }
.kopf-symbol { position: relative; text-decoration: none; }
.kopf-symbol::after { content: none !important; }
.kopf-symbol:hover { text-decoration: none; }
.kopf-symbol:hover { background: rgba(20, 23, 28, 0.06); border-radius: 50%; }
.kopf-ueberlagert .kopf-symbol:hover { background: rgba(20, 23, 28, 0.10); }
.korbzahl {
  position: absolute; top: 4px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dunkel); color: #FFFFFF;
  border-radius: 100px; font-family: var(--mono); font-size: 0.62rem; line-height: 1;
}


/* --------------------------------------------------------------------------
   Wortmarke: Name über der Zeile mit Fachgebiet und Herkunftszeichen —
   dieselbe Anordnung wie auf der Packung.

   Das Kreuz folgt den amtlichen Proportionen der Schweizer Flagge: auf einem
   Quadrat der Seite 32 sind die Arme 6 breit und 20 lang, mittig gesetzt.
   Ein „+" aus der Schrift wäre keine Flagge, sondern ein Pluszeichen.
   -------------------------------------------------------------------------- */

.wortmarke {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  line-height: 1;
}
.wortmarke-name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.85rem); letter-spacing: 0.26em;
  text-indent: 0.26em;   /* die Sperrung hängt rechts an — hier ausgleichen */
}
.wortmarke-fuss {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--tinte-3);
  text-indent: 0.26em;
}
.wortmarke-fuss .kreuz { width: 9px; height: 9px; flex-shrink: 0; margin-left: -2px; }
.wortmarke:hover { text-decoration: none; }
.wortmarke:hover .wortmarke-name { text-decoration: none; }


.klappmenu .wortmarke-name { font-size: 1.5rem; }


/* --------------------------------------------------------------------------
   Wechselndes Schlusswort im Hero.

   Der Platz ist so breit wie das LÄNGSTE Wort — sonst zuckt die Zeile bei
   jedem Wechsel und zieht die Zeile darunter mit. Ohne Skript steht das
   erste Wort einfach da; das ist dann kein Fehler, nur weniger Bewegung.
   -------------------------------------------------------------------------- */

.wechsler { position: relative; display: inline-block; vertical-align: top; }
/* Der Rahmen schneidet seitlich, damit die Wörter durchlaufen. Er braucht
   dafür unten Luft für die Unterlängen von g, p und y — bei line-height 0.93
   ragen die unter die Zeile und wurden sonst abgeschnitten. Das negative
   margin holt den Zuschlag aus dem Layout wieder heraus, damit der Abstand
   zum Absatz darunter gleich bleibt. */
.wechsler { overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.wechsler-wort {
  display: block;
  opacity: 0; transform: translateX(0.4em);
  transition: opacity 520ms var(--schwung), transform 620ms var(--schwung);
}
/* Kommt von rechts herein, geht nach links hinaus — dadurch entsteht eine
   Laufrichtung statt eines Sprungs an derselben Stelle. */
.wechsler-wort[data-aktiv] { opacity: 1; transform: none; }
.wechsler-wort:not([data-aktiv]) { position: absolute; top: 0; left: 0; white-space: nowrap; }
.wechsler-wort[data-geht] { opacity: 0; transform: translateX(-0.4em); }


@media (prefers-reduced-motion: reduce) {
  .wechsler-wort { transition: none; }
}


/* --------------------------------------------------------------------------
   Produktschau: Ware auf einer Farbfläche links, Text rechts.
   Der Verlauf läuft vom Akzentgelb in den Seitengrund — dadurch sitzt die
   Fläche auf der Seite, statt als Farbklotz darauf zu liegen.
   -------------------------------------------------------------------------- */

.produktschau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .produktschau { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

.produktschau-flaeche picture { display: contents; }

/* Räumliche Wirkung: der Behälter spannt die Perspektive auf, das Glas
   kippt darin. Ohne Zeigegerät schwebt es langsam von selbst — ein Effekt,
   der nur auf Mausbewegung reagiert, bliebe am Telefon tot. */
/* --------------------------------------------------------------------------
   Die Schau ist eine Karte mit zwei Seiten: vorn das freigestellte Glas,
   hinten die Aufnahme mit Karton und Kennwerten. Ein Tippen dreht sie.
   -------------------------------------------------------------------------- */
.produktschau-buehne { display: flex; flex-direction: column; align-items: center; }

.schaukarte {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 1600px;
  -webkit-tap-highlight-color: transparent;
}
.schaukarte-blatt {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 900ms var(--schwung);
}
.schaukarte[aria-pressed="true"] .schaukarte-blatt { transform: rotateY(180deg); }

/* Einmal, wenn die Karte ins Bild kommt: sie kippt kurz an und faellt zurueck.
   Das zeigt in einer Sekunde, was der Hinweis daneben behauptet. Weit genug,
   dass die Bewegung auffaellt — nicht so weit, dass die Karte auf der Kante
   steht und der Blick ins Leere faellt. */
.schaukarte.vorfuehren .schaukarte-blatt {
  animation: kartenwink 1700ms var(--schwung) both;
}
@keyframes kartenwink {
  0%   { transform: rotateY(0deg); }
  40%  { transform: rotateY(-84deg); }
  100% { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .schaukarte.vorfuehren .schaukarte-blatt { animation: none; }
}
.schaukarte { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.schauhinweis-pille:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; border-radius: 4px; }
.produktschau-buehne:has(.schauhinweis-pille:focus-visible) .schauseite-vorn,
.produktschau-buehne:has(.schauhinweis-pille:focus-visible) .schauseite-hinten {
  box-shadow: inset 0 0 0 3px var(--akzent);
}

.schauseite {
  position: absolute; inset: 0;
  border-radius: var(--radius); overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.schauseite-vorn { transform: rotateY(0deg); }
/* Innerhalb der Drehkarte fuellt die Flaeche die Kartenseite. Ohne Karte
   (kasse.html) traegt sie ihr eigenes Format — sonst legt sie sich als
   absolut gesetzte Schicht ueber die halbe Seite. */
.schauseite-vorn .produktschau-flaeche { position: absolute; inset: 0; aspect-ratio: auto; }
.schauseite-hinten {
  transform: rotateY(180deg);
  background: #111111;
  display: flex; align-items: center; justify-content: center;
}
/* Rueckseite: dieselbe Aufnahme wie im Kopf der Seite, quer oder hoch je nach
   Bildschirm. Sie traegt ihre Angaben an den Raendern — also ganz zeigen. */
.schaubild { position: absolute; inset: 0; display: block; }
.schaubild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sobald die Karte gedreht ist, faehrt die Aufnahme heraus: der Blick geht
   vom Produkt auf das ganze Bild. */
.schaukarte[aria-pressed="true"] .schaubild img { animation: herauszoomen 2400ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .schaukarte[aria-pressed="true"] .schaubild img { animation: none; transform: none; }
}

/* Hinweis und Herkunft unter der Karte */
.schauhinweis { margin: 18px 0 0 0; }

/* Der Hinweis muss auffallen, sonst probiert es niemand: eine Pille in der
   Akzentfarbe, die ruhig atmet. Kein Blinken — das liest sich billig und
   ist fuer lichtempfindliche Menschen unangenehm. */
.schauhinweis-pille {
  border: 0; background: none; cursor: pointer; padding: 6px 4px;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--tinte);
  font-family: var(--mono); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  animation: tippen 2s ease-in-out infinite;
  transition: color 200ms ease;
}
.schauhinweis-pille svg {
  width: 15px; height: 15px; flex-shrink: 0;
  animation: tippen-hand 2s ease-in-out infinite;
}
@keyframes tippen-hand {
  0%, 38%, 100% { transform: translateY(0); }
  50%           { transform: translateY(2.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .schauhinweis-pille svg { animation: none; }
}
.schaukarte:hover + .schauhinweis .schauhinweis-pille,
.schauhinweis-pille:hover,
.schauhinweis-pille:focus-visible {
  animation-play-state: paused; color: var(--tinte);
}
/* Ist die Karte gedreht, hat der Hinweis seinen Zweck erfuellt */
.schaukarte[aria-pressed="true"] + .schauhinweis .schauhinweis-pille {
  animation: none; color: var(--tinte-3);
}
/* Aufblitzen statt hartem Blinken: die Schrift geht auf und wieder zurueck,
   die Hand tippt einmal mit. */
@keyframes tippen {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .schauhinweis-pille { animation: none; opacity: 1; }
}
/* Herkunft auf der Flaeche selbst, unter dem Glas — nicht als Zeile darunter:
   dort gehoert sie zum Bild, hier waere sie nur noch eine Fusszeile. */
.schauherkunft {
  position: absolute; left: 50%; top: clamp(14px, 2.6vw, 26px);
  transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: clamp(0.6rem, 1vw, 0.7rem);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(20, 23, 28, 0.62); white-space: nowrap;
}
.schauherkunft .kreuz { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .schaukarte-blatt { transition-duration: 1ms; }
}

.produktschau-flaeche { perspective: 1200px; perspective-origin: 50% 44%; }
.produktschau-flaeche {
  position: relative; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(to bottom, #FFF200 0%, #FBF3A8 42%, var(--grund) 100%);
  padding: clamp(24px, 3vw, 46px);
}
.produktschau-flaeche img {
  width: 72%; height: 94%;
  object-fit: contain;
  transform-style: preserve-3d;
  transform:
    perspective(1200px)
    rotateX(var(--kippX, 0deg))
    rotateY(var(--kippY, 0deg))
    translateZ(var(--hebung, 0px));
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  animation: schweben 7s ease-in-out infinite;
  /* nur mit Zeigegeraet, siehe unten */
  /* Zwei Schattenlagen: ein enger, dunkler direkt am Glas und ein weiter,
     weicher darunter — ein einzelner Schatten wirkt entweder hart oder
     schmutzig. */
  filter: drop-shadow(0 6px 12px rgba(20, 23, 28, 0.13))
          drop-shadow(0 28px 48px rgba(20, 23, 28, 0.17));
}


.produktschau-text { display: flex; flex-direction: column; gap: 20px; }
.produktschau-daten { display: flex; gap: 10px; flex-wrap: wrap; }


/* ==========================================================================
   Fußzeile mit Laufband
   ========================================================================== */

.fussbereich { background: #111111; color: var(--auf-dunkel); margin-top: clamp(60px, 8vw, 120px); }

.fuss-oberteil {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--linie-dunkel);
}
.fuss-oberteil > * { padding: clamp(38px, 5vw, 76px) clamp(24px, 4vw, 70px); }
.fuss-oberteil > *:first-child { border-right: 1px solid var(--linie-dunkel); }
@media (max-width: 860px) {
  .fuss-oberteil { grid-template-columns: minmax(0, 1fr); }
  .fuss-oberteil > *:first-child { border-right: 0; border-bottom: 1px solid var(--linie-dunkel); }
}

.fuss-spalten-neu { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 34px; }
.fuss-titel { font-size: 0.95rem; font-weight: 600; color: #FFFFFF; margin: 0 0 12px 0; }
.fuss-zeile { font-size: 0.9rem; line-height: 1.7; color: var(--auf-dunkel-2); font-weight: 300; margin: 0; }
.fuss-zeile a { color: var(--auf-dunkel-2); }
.fuss-zeile a:hover { color: #FFFFFF; }

.fuss-verweise {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-top: 36px; font-size: 0.76rem;
}
.fuss-verweise a { position: relative; color: #FFFFFF; padding-bottom: 3px; }
.fuss-verweise a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: left center; transition: transform 560ms var(--schwung);
}
.fuss-verweise a:hover { text-decoration: none; }
.fuss-verweise a:hover::after { transform: scaleX(0); transform-origin: right center; }

.fuss-feld { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.fuss-feld input {
  flex: 1 1 220px; min-width: 0; height: 56px; padding: 0 22px;
  font-family: var(--sans); font-size: 0.95rem; color: #FFFFFF;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--linie-dunkel);
  border-radius: var(--pille); transition: border-color 200ms ease, background 200ms ease;
}
.fuss-feld input::placeholder { color: #7E838C; }
.fuss-feld input:focus { outline: 0; border-color: #58606D; background: rgba(255, 255, 255, 0.1); }
.fuss-feld .knopf { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Laufband: die Zeile wird zweimal nebeneinander gelegt und um genau eine
   Länge verschoben — dadurch schließt sie lückenlos an sich selbst an.
   In Konturschrift, damit sie den Abschluss bildet und nicht schreit.
   -------------------------------------------------------------------------- */

.laufband { overflow: hidden; padding: clamp(14px, 2vw, 26px) 0; }
.laufband-spur { display: flex; width: max-content; animation: laufen 38s linear infinite; }
.laufband-spur:hover { animation-play-state: paused; }
.laufband-teil {
  display: flex; align-items: center; gap: clamp(24px, 3vw, 52px);
  padding-right: clamp(24px, 3vw, 52px);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 6.5rem); line-height: 1.06; white-space: nowrap;
  /* Konturschrift: innen leer, nur der Umriss. Deckend gesetzt wäre das
     Band die lauteste Fläche der Seite. */
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.72);
}
.laufband-punkt { -webkit-text-stroke: 0; color: rgba(255, 255, 255, 0.5); font-size: 0.5em; }

@keyframes laufen {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .laufband-spur { animation: none; }
}

.fuss-unterteil {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px clamp(24px, 4vw, 70px) 30px clamp(24px, 4vw, 70px);
  border-top: 1px solid var(--linie-dunkel);
  font-size: 0.78rem; color: #7E838C; font-weight: 300;
}


/* Langsames Schweben, solange niemand mit dem Zeiger darauf ist */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .produktschau-flaeche img { animation: none; transform: none; will-change: auto; }
}

@keyframes schweben {
  0%, 100% { --kippX: 1.6deg;  --kippY: -3deg;  --hebung: 0px; }
  50%      { --kippX: -1.2deg; --kippY: 3deg;   --hebung: 14px; }
}
@property --kippX { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --kippY { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --hebung { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* Sobald der Zeiger über der Fläche ist, führt er — das Schweben pausiert */
.produktschau-flaeche[data-zeiger] img { animation-play-state: paused; }

/* Der Schatten wandert mit der Neigung mit, sonst klebt das Glas an der Fläche */
.produktschau-schatten {
  position: absolute; left: 50%; bottom: 8%;
  width: 46%; height: 5%;
  transform: translateX(-50%) translateX(var(--schattenX, 0px));
  background: radial-gradient(ellipse at center, rgba(20, 23, 28, 0.3) 0%, rgba(20, 23, 28, 0.12) 45%, transparent 72%);
  filter: blur(6px);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .produktschau-flaeche img { animation: none; transition: none; transform: none; }
  .produktschau-schatten { transform: translateX(-50%); }
}




/* --------------------------------------------------------------------------
   Auswahlzeilen in der Kasse: kleiner Punkt links, Text daneben, Zusatz rechts.
   Vorher waren es hohe Pillen — bei fünf Zahlungsarten wird daraus eine Wand.
   -------------------------------------------------------------------------- */

.wahlliste { display: flex; flex-direction: column; }
.wahlliste .wahl {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  min-height: 62px; padding: 12px 4px;
  border: 0; border-bottom: 1px solid var(--linie-2); border-radius: 0;
  background: transparent;
}
.wahlliste .wahl:first-child { border-top: 1px solid var(--linie-2); }
.wahlliste .wahl:hover { background: var(--gedaempft); }
.wahlliste .wahl:has(input:checked) { background: transparent; }
.wahl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wahl-titel { font-size: 0.97rem; font-weight: 500; }
.wahl:has(input:checked) .wahl-titel { font-weight: 600; }
.wahl-zusatz { font-size: 0.8rem; color: var(--tinte-3); font-weight: 300; line-height: 1.45; }
.wahl-preis { font-size: 0.9rem; white-space: nowrap; }

/* Kleines Kästchen statt Pille */
.wahlliste .wahl-punkt { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--linie-3); }
.wahlliste .wahl:has(input:checked) .wahl-punkt { border-color: var(--tinte); }

.kartenreihe { display: flex; gap: 5px; }
.kartenmarke {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 24px; padding: 0 7px;
  border: 1px solid var(--linie); border-radius: 4px;
  font-family: var(--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--tinte-2); background: var(--papier);
}
@media (max-width: 560px) {
  .wahlliste .wahl { grid-template-columns: 18px minmax(0, 1fr); }
  .kartenreihe, .wahl-preis { grid-column: 2; margin-top: 4px; }
}

/* Steuerhinweis unter der Summe */
.steuerhinweis {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 12px; padding: 12px 14px;
  background: var(--gedaempft); border-radius: 12px;
  font-size: 0.78rem; line-height: 1.55; color: var(--tinte-3);
}
.karte-dunkel .steuerhinweis { background: rgba(255,255,255,0.06); color: var(--auf-dunkel-2); }


/* Zahlungsmarken in einheitlicher Kartengröße */
.zahlmarke { width: 42px; height: 28px; display: block; flex-shrink: 0; }
@media (max-width: 560px) { .zahlmarke { width: 36px; height: 24px; } }


/* Eine feste Versandart braucht kein Optionsfeld — sie wird angezeigt,
   nicht gewählt. */
.versandfest {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center; gap: 16px; margin-top: 26px;
  padding: 20px 22px; border-radius: var(--radius-klein);
  background: var(--gruen-flaeche);
}
.versandfest-symbol { display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--papier); color: var(--gruen); }
.versandfest-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.versandfest-preis { font-size: 0.95rem; font-weight: 600; color: var(--gruen); white-space: nowrap; }
@media (max-width: 560px) {
  .versandfest { grid-template-columns: 44px minmax(0, 1fr); }
  .versandfest-preis { grid-column: 2; }
}


/* Tippziele auf Telefonen: alles Anklickbare bekommt mindestens 44px Höhe.
   Der Zuschlag geht über die Innenabstände, damit sich das Aussehen kaum
   ändert — die getroffene Fläche aber schon. */
@media (hover: none), (max-width: 760px) {
  .fuss-zeile a, .fuss-verweise a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .fuss-zeile { line-height: 1.2; }
  .hero-link { position: relative; }
  .hero-link::after {
    content: ''; position: absolute; left: -8px; right: -8px;
    top: -12px; bottom: -12px;
  }
  .produktschau-daten .chip, .suchvorschlaege .chip {
    min-height: 40px; padding: 10px 14px;
  }
  .menge button { width: 48px; height: 48px; }
  .wortmarke { min-height: 44px; justify-content: center; }
}


/* ==========================================================================
   Telefon: Burger links, Wortmarke mittig, Symbole rechts
   ========================================================================== */

@media (max-width: 1060px) {
  .kopf-ueberlagert .balken, .kopf-schlicht .balken {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
  }
  .kopf-ueberlagert .menuknopf, .kopf-schlicht .menuknopf {
    display: flex; grid-column: 1; justify-self: start;
    background: transparent; color: var(--tinte);
  }
  .kopf-rechts { grid-column: 3; justify-self: end; }
  .kopf-ueberlagert .menuknopf svg, .kopf-schlicht .menuknopf svg { stroke: currentColor; }
  .kopf-ueberlagert .wortmarke, .kopf-schlicht .wortmarke {
    grid-column: 2; justify-self: center;
  }
  .kopf-rechts { grid-column: 3; }

  /* Schmaler: kleinere Marke, engere Symbole, weniger Polster */
  .kopf-ueberlagert, .kopf-schlicht { padding: 7px var(--rand-hero); }
  .wortmarke-name { font-size: 1.05rem; letter-spacing: 0.2em; text-indent: 0.2em; }
  .wortmarke-fuss { font-size: 0.46rem; gap: 5px; letter-spacing: 0.2em; text-indent: 0.2em; }
  .wortmarke-fuss .kreuz { width: 7px; height: 7px; }
  .kopf-symbol { width: 40px; height: 40px; }
  .kopf-symbol svg { width: 17px; height: 17px; }
  .kopf-symbole { gap: 0; }
  .korbzahl { top: 2px; right: 0; min-width: 15px; height: 15px; font-size: 0.56rem; }
}

/* --------------------------------------------------------------------------
   Telefon-Hero: Bild und Schrift getrennt.

   Am Schreibtisch liegt die Schrift im Bild — dort ist links Platz. Auf einem
   390px-Fenster wäre der Rahmen 0,46 breit wie hoch; ein 16:9-Foto zeigt darin
   nur einen senkrechten Streifen, und das Produkt steht rechts im Bild. Also:
   Bild im eigenen Seitenverhältnis oben, Schrift darunter auf dem Grund.
   -------------------------------------------------------------------------- */

/* Telefon-Hero: das Foto in voller Breite und ungeschnitten — sein eigenes
   Seitenverhältnis, kein Ausschnitt. Die Schrift steht darunter.

   Im Bild wäre auf 390px kein Platz: der Text bekäme höchstens 60 % der
   Breite, und das Produkt steht rechts im Foto. Ausgezoomt sieht man beides
   ganz, dafür untereinander. */
@media (max-width: 760px) {
  .bildhero {
    height: auto; max-height: none; aspect-ratio: auto;
    display: flex; flex-direction: column;
    background: transparent; overflow: visible;
  }
  .bildhero picture { display: block; width: 100%; }
  .bildhero img {
    width: 100%; height: auto; aspect-ratio: auto;
    object-fit: contain;
    border-radius: var(--radius-hero);
    background: #F2F1EF;
  }
  /* Die Schrift liegt im Bild, links auf der hellen Studiofläche. Bei rund
     195px Bildhöhe wird jede Zeile knapp — deshalb sehr kleine Grade, enge
     Zeilen und ein kurzer Vorspann. */
  .bildhero-schleier { display: none; }
  /* Ganzseitiger Hero: die Hochformat-Aufnahme füllt den Bildschirm, die
     Schrift steht oben auf der hellen Fläche darüber. Dort gemessen:
     rgb(231,228,232) — dunkle Schrift ergibt 14,3:1. */
  .bildhero {
    display: block; position: relative;
    height: min(
      calc(100svh - var(--kopfhoehe, 59px) - var(--luft-hero) - var(--rand-hero)),
      calc((100vw - var(--rand-hero) * 2) * 1672 / 941)
    );
    max-height: none;
  }
  .bildhero img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center bottom;
    aspect-ratio: auto;
  }
  .bildhero-text {
    position: absolute; inset: 0;
    padding: 30px 22px 34px 22px;
    justify-content: flex-start;
  }
  .bildhero-text > * { max-width: 100%; }
  /* Der Link rutscht ans untere Ende — unter den Karton, statt direkt unter
     dem Vorspann zu kleben. Der Rest bleibt oben. */
  .bildhero-text .hero-link { margin-top: auto; }
  .bildhero-text .titel-xl { font-size: clamp(2.3rem, 10.4vw, 3.2rem); line-height: 0.97; letter-spacing: -0.024em; }
  .bildhero-text .vorspann { font-size: 0.95rem; line-height: 1.5; margin-top: 16px !important; }
  .bildhero-text .kicker { font-size: 0.62rem; letter-spacing: 0.18em; margin-bottom: 14px !important; }
  .bildhero-text .kicker::before { width: 22px; }
  .hero-link { font-size: 0.95rem; margin-top: 18px; gap: 8px; }
  .hero-link svg { width: 14px; height: 14px; }
  .wechsler { padding-bottom: 0.2em; margin-bottom: -0.2em; }
}


/* Symbole im geöffneten Menü in derselben Größe wie in der Kopfleiste */
@media (max-width: 1060px) {
  .klappmenu-kopf .menuknopf, .klappmenu-kopf .kopf-symbol { width: 40px; height: 40px; }
  .klappmenu-kopf .kopf-symbol svg { width: 17px; height: 17px; }
  .klappmenu nav { margin-top: 30px; }
}


/* Das X braucht keinen Kreis — die Fläche darum ist Tippziel, kein Knopf */
.klappmenu-kopf .menuknopf,
.klappmenu-kopf .menuknopf:hover {
  background: transparent; border-radius: 0; box-shadow: none;
}


/* ==========================================================================
   Burger, der sich zum X dreht.

   Ein einziger Knopf für beide Zustände: er liegt über dem Vollbildmenü und
   bleibt beim Öffnen an Ort und Stelle. Zwei Knöpfe an derselben Stelle
   auszutauschen sähe aus wie ein Sprung, egal wie genau sie sitzen.

   Die äußeren Linien fahren zuerst zur Mitte, dann drehen sie — deshalb die
   zwei Stufen im Übergang. Alles auf einmal wirkt wie ein Zucken.
   ========================================================================== */

.burgerlinien {
  position: relative; display: block; width: 18px; height: 12px;
}
.burgerlinien i {
  position: absolute; left: 0; width: 100%; height: 1.7px;
  background: currentColor; border-radius: 2px;
  transition: transform 380ms var(--schwung), opacity 200ms ease 120ms, top 220ms var(--schwung) 200ms;
}
.burgerlinien i:nth-child(1) { top: 0; }
.burgerlinien i:nth-child(2) { top: 5.15px; }
.burgerlinien i:nth-child(3) { top: 10.3px; }

/* Offen: außen zur Mitte, dann drehen; die mittlere Linie blendet aus */
[aria-expanded="true"] .burgerlinien i {
  transition: top 220ms var(--schwung), transform 380ms var(--schwung) 200ms, opacity 200ms ease;
}
[aria-expanded="true"] .burgerlinien i:nth-child(1) { top: 5.15px; transform: rotate(45deg); }
[aria-expanded="true"] .burgerlinien i:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
[aria-expanded="true"] .burgerlinien i:nth-child(3) { top: 5.15px; transform: rotate(-45deg); }

/* Der Knopf bleibt über dem Menü sichtbar und bedienbar */
.kopf-ueberlagert, .kopf-schlicht { }
.menuknopf[aria-expanded="true"] { position: relative; z-index: 200; }
.kopf-ueberlagert:has(.menuknopf[aria-expanded="true"]),
.kopf-schlicht:has(.menuknopf[aria-expanded="true"]) { z-index: 200; }

/* Platzhalter im Menükopf: hält die Wortmarke mittig, wo vorher das X saß */
.menuknopf-platz { display: block; width: 40px; height: 40px; }

@media (prefers-reduced-motion: reduce) {
  .burgerlinien i { transition: none; }
}




/* Der Fokusrahmen folgt der Form des Elements: um einen runden Knopf gehört
   kein Rechteck. Er bleibt sichtbar — wer mit der Tastatur bedient, muss
   sehen, wo er steht — nur eben rund.
   Beim Zeigen mit der Maus erscheint er ohnehin nicht (:focus-visible). */
.menuknopf:focus-visible,
.kopf-symbol:focus-visible,
.rundknopf:focus-visible { outline-offset: 2px; border-radius: 50%; }
.menuknopf:focus, .kopf-symbol:focus { outline: none; }
.menuknopf:focus-visible { outline: 2px solid var(--tinte); }
.kopf-symbol:focus-visible { outline: 2px solid var(--tinte); }

/* Und kein Kasten beim Antippen auf Mobilgeräten */
.menuknopf, .kopf-symbol, .rundknopf, .wahl, .haken {
  -webkit-tap-highlight-color: transparent;
}


/* --------------------------------------------------------------------------
   Überscroll unter der Fußzeile.

   Zieht man auf dem Telefon über das Seitenende hinaus, zeigt der Browser
   dort die Hintergrundfarbe des Dokuments — bei uns das helle Creme, was
   unter der dunklen Fußzeile als weißer Streifen aufblitzt.

   Der Schatten unter der Fußzeile füllt diesen Bereich in ihrer eigenen
   Farbe. Er kostet kein zusätzliches Element und keine Höhe, weil ein
   box-shadow nicht am Layout teilnimmt.
   -------------------------------------------------------------------------- */
.fussbereich {
  box-shadow: 0 50vh 0 50vh #111111; clip-path: inset(0 0 -100vh 0);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* --------------------------------------------------------------------------
   Eine Kopfleiste, nicht zwei.

   Der Burger liegt über dem Menü und bleibt beim Öffnen stehen — damit ist
   auch die übrige Kopfleiste sichtbar. Ein eigener Menükopf darunter würde
   Wortmarke und Warenkorb ein zweites Mal zeigen. Also: der Menükopf
   entfällt, die Kopfleiste gilt für beide Zustände.
   -------------------------------------------------------------------------- */
.klappmenu-kopf { display: none; }

/* Die ganze Kopfleiste liegt über dem Menü, nicht nur der Burger */
.kopf-ueberlagert:has(.menuknopf[aria-expanded="true"]),
.kopf-schlicht:has(.menuknopf[aria-expanded="true"]) { z-index: 200; }
.kopf-ueberlagert:has(.menuknopf[aria-expanded="true"]) .balken,
.kopf-schlicht:has(.menuknopf[aria-expanded="true"]) .balken { position: relative; z-index: 200; }

/* Bei offenem Menue steht die Kopfleiste auf dem Milchglas des Menues. Ihre
   eigene Flaeche samt Schatten wuerde dort als zweiter Balken erscheinen —
   also weg damit, auch im gescrollten Zustand. */
.kopf-ueberlagert:has(.menuknopf[aria-expanded="true"]),
.kopf-schlicht:has(.menuknopf[aria-expanded="true"]) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Das Menü beginnt unter der Kopfleiste, statt sie zu überdecken */
.klappmenu { padding-top: var(--kopfhoehe, 59px); }
.klappmenu nav { margin-top: 26px; }


/* --------------------------------------------------------------------------
   Symbol VOR der Kennzahl, in der Schriftfarbe und in einer Zeile mit ihr.

   Die Linien zeichnen sich beim Eintreten ins Bild — über stroke-dasharray:
   die Kontur wird zuerst als lückenlose Lücke gesetzt und dann geschlossen.
   Deshalb steht die Länge auf einem großzügigen Festwert; sie muss nur
   mindestens so lang sein wie der längste Pfad.
   -------------------------------------------------------------------------- */
.kennwert { display: block; text-align: center; }
/* Die Beschreibung folgt direkt unter der Kopfzeile aus Symbol und Zahl */
.kennwert .klein { display: block; margin-top: 10px; }
.kennwert-kopf { display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1.2vw, 16px); }
.kennwert-symbol { display: inline-flex; align-items: center; color: var(--tinte); flex-shrink: 0; }
.kennwert-symbol svg { width: clamp(30px, 3.1vw, 44px); height: clamp(30px, 3.1vw, 44px); display: block; overflow: visible; }

.kennwert-symbol .zeichnen {
  stroke-dasharray: 120; stroke-dashoffset: 120;
  transition: stroke-dashoffset 900ms cubic-bezier(0.65, 0, 0.35, 1);
}
.kennwert-symbol .punkt { opacity: 0; transform: scale(0.4); transform-origin: center;
  transition: opacity 360ms ease 700ms, transform 460ms var(--schwung) 700ms; }

.kennwert.da .kennwert-symbol .zeichnen { stroke-dashoffset: 0; }
.kennwert.da .kennwert-symbol .zug2 { transition-delay: 160ms; }
.kennwert.da .kennwert-symbol .zug3 { transition-delay: 300ms; }
.kennwert.da .kennwert-symbol .zug4 { transition-delay: 430ms; }
.kennwert.da .kennwert-symbol .punkt { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .kennwert-kopf { gap: 8px; }
  .kennwert-symbol svg { width: 26px; height: 26px; }
}
@media (max-width: 400px) {
  .kennwert-kopf { gap: 6px; }
  .kennwert-symbol svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .kennwert-symbol .zeichnen { stroke-dashoffset: 0; transition: none; }
  .kennwert-symbol .punkt { opacity: 1; transform: none; transition: none; }
}


/* --------------------------------------------------------------------------
   Beschriftung neben dem Glas: „99 %" links, „Purity" rechts.
   Waagrecht gesetzt, nicht gedreht — gekippte Schrift liest niemand gern,
   und auf einer Verkaufsfläche schon gar nicht.
   Sie liegt hinter dem Glas, damit dieses davor steht statt daneben.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Beschriftung im Produktbild: links zaehlt die Zahl von 1 auf 99 hoch,
   danach blendet "Purity" dazu. Weiss auf dem gelben Verlauf — als Marke
   auf der Flaeche gedacht, nicht als Lesetext (deshalb aria-hidden und
   ein weicher Schatten, damit die Kante im hellen Gelb nicht verschwindet).
   -------------------------------------------------------------------------- */
.produktschau-flaeche { --markenrand: clamp(12px, 2.4vw, 34px); }
.schaumarke {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; pointer-events: none;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.5rem, 10.8vw, 9.1rem);
  line-height: 1; letter-spacing: -0.03em;
  color: rgba(17, 17, 17, 0.5);
  white-space: nowrap;
}
.schaumarke-links  { left: var(--markenrand); }
.schaumarke-rechts {
  right: var(--markenrand);
  transition: opacity 620ms var(--schwung), transform 620ms var(--schwung);
}
/* .wartet setzt das Skript, solange der Zaehler noch laeuft — nie das Markup:
   ohne Skript stehen 99 % und Purity einfach da. */
.produktschau-flaeche.wartet .schaumarke-rechts {
  opacity: 0; transform: translateY(-50%) translateX(14px);
}

/* Das Glas liegt darüber */
.produktschau-flaeche picture, .produktschau-flaeche img { position: relative; z-index: 3; }
.produktschau-schatten { z-index: 1; }

@media (max-width: 560px) {
  .schaumarke { font-size: 2.9rem; }
}