/* ==========================================================================
   NeoPeptide Labs · Stil 1 — Schwarz · Violett-CTA · Lime-Signal
   Diese Datei ist die Arbeitsfassung. Werte identisch zu styles/tokens.css
   im Übergabepaket, damit Vorschau und Produktion nicht auseinanderlaufen.
   ========================================================================== */
/* Hover-Zustand der Dropdowns — eine Quelle fuer alle drei Menues, damit
   sie nicht auseinanderlaufen. Herkunft: .mega .mi aus Ziele und Tools. */
:root{
  --menue-hover-flaeche:var(--tint);
  --menue-hover-marke:var(--sig);
  --menue-hover-versatz:3px;
  --menue-hover-ic-flaeche:var(--sig);
  --menue-hover-ic-ink:var(--sig-ink);
  --menue-hover-ic-skalierung:1.06;
  --menue-hover-uebergang:background-color .18s, border-color .18s, transform .2s ease-out;
  /* Bestseller-Flamme: zwei Stufen derselben Rotfamilie wie --sale */
  --hot-aussen:#E2705C;
  --hot-kern:#C0392B;
}

:root{
  --nav:#0B0B0D; --bar:#000000; --tint:#F8F5FF; --tint2:#EFE9FE;
  --cta:#6D34D6; --cta-hover:#7B45E4; --cta-ink:#FFFFFF;
  --sig:#A8FC03; --sig-ink:#0B0B0D;
  --ink:#131020; --ink-2:#5A5372;
  --line:#E6DFF9; --line-strong:#D6CCF3;
  --sale:#C0392B; --ok:#1E8A5F;
  --cart:var(--sig); --cart-ink:var(--sig-ink);   /* ← der eine Schalter */
  --r:4px;
  --f-display:"Sora","Segoe UI",system-ui,sans-serif;
  --f-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
/* Sprungziele duerfen nicht unter der klebenden Kopfzeile landen. */
html{scroll-padding-top:88px}
body{background:#fff;color:var(--ink);font:400 16px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.tnum,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.display{font-family:var(--f-display);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.022em;line-height:1.04}
.ttl{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em}
.skw{clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
:where(a,button,input,select):focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
@media(min-width:640px){.wrap{padding:0 24px}}

/* ---- Topbar ---- */
.topbar{background:var(--bar);color:rgba(255,255,255,.75)}
.topbar ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 38px;list-style:none;margin:0;padding:10px 0;
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-align:center}
.topbar em{font-style:normal;color:var(--sig)}
/* Flagge sitzt optisch auf der Textmittelachse — inline-flex statt
   Baseline-Ausrichtung, sonst haengt sie ein bis zwei Pixel tiefer. */
.topbar li{display:inline-flex;align-items:center;gap:7px}
.flagge{display:block;width:16px;height:12px;flex:none;line-height:0}
.flagge svg{width:100%;height:100%;display:block;border-radius:1px}
/* ---- Header ---- */
/* Die Kopfzeile bleibt beim Scrollen stehen — auf Desktop wie auf Mobil.
   Der z-index macht sie zum Stapelkontext, damit liegt alles in ihr (auch das
   mobile Menue mit z-index 98) fest darin. Deshalb muss sie ueber der
   Menue-Maske (97) stehen, sonst wuerde die das eigene Menue verdecken —
   und die Warenkorb-Schublade wiederum ueber ihr, die ist hoeher gesetzt.
   Reihenfolge: Inhalt < Menue-Maske 97 < Kopf 98 < Schublade 110/111
                < Warenkorb-Hinweis 120.
   Die Topbar darueber scrollt bewusst weg, sie ist einmalige Information. */
header.site{position:sticky;top:0;z-index:98;background:var(--nav);
  box-shadow:0 14px 30px -22px rgba(0,0,0,.9)}
/* Kopfzeile: alles in einer Reihe — Logo, Navigation, Suche, Warenkorb.
   nowrap überall, Schriftgröße und Abstände so gewählt, dass die acht
   Menüpunkte bis 1024 px nebeneinander passen. */
header.site .in{display:flex;flex-wrap:nowrap;align-items:center;gap:14px;min-height:72px;padding:10px 0}
header.site .logo{flex:none}
/* Das Logo ruecken wir aus der Spur des Seiteninhalts heraus - es steht
   sonst zu weit in der Mitte. Erst ab 1280px: darunter ist der Aussenrand
   zu schmal, das Logo klebte sonst am Bildrand. */
@media(min-width:1280px){header.site .logo{margin-left:-18px}}
header.site .logo img{height:30px;width:auto}
@media(min-width:1280px){header.site .logo img{height:34px}}
nav.main{min-width:0}
/* Minimaler Extra-Abstand zwischen dem letzten Menuepunkt (Kontakt) und dem
   Trennstrich der Aktionen. Nur ab 1280px, wo Platz ist - die enge Stufe
   1024-1279px bleibt unangetastet. */
@media(min-width:1280px){nav.main{margin-right:12px}}
/* WICHTIG: nur die direkte Kindliste der Navigation liegt in einer Reihe.
   Ohne den >-Selektor erben auch die Listen im Mega-Dropdown nowrap und
   laufen dann horizontal aus dem Panel heraus. */
nav.main > ul{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
/* Der groessere Satz gilt nur fuer die Desktop-Leiste. Bei Mobil steckt die
   Navigation in der Schublade und wird dort eigenstaendig gesetzt. */
/* Ab 1280px etwas mehr Luft zwischen den Menuepunkten. FESTER Gap, kein vw:
   der Header-Container ist bei ~1132px gedeckelt, ein mit dem Viewport
   wachsender Gap wuerde die Leiste ueber den Container hinaus schieben (Such-
   Icon ueberlappt dann den letzten Punkt) - und mit/ohne Scrollbar zaehlt vw
   unterschiedlich, daher sah es je Seite anders aus. 14px nutzt den gedeckelten
   Container fast voll aus, ohne zu ueberlaufen. */
@media(min-width:1280px){nav.main > ul{font-size:11.2px;gap:14px}}
/* Zwischen 1024 und 1280px ist die Leiste am engsten: volle Navigation, aber
   noch kein zusaetzlicher Aussenrand. Dort bleibt der Satz kompakt. */
@media(min-width:1024px) and (max-width:1279px){nav.main > ul{font-size:11.2px;gap:4px}
  /* Engstelle 1024-1279: Navigation darf nie unter die Aktionen laufen —
     sonst ueberdeckt das Such-Icon "Kontakt" (Betreiber-Meldung 2026-09-19). */
  nav.main{min-width:0;overflow:hidden}
  header.site .in{gap:10px}
  .hactions{padding-left:8px;gap:2px}}
/* Frueher wurde der Satz ab 1280px vergroessert (gap 12, 11.5px). Das kostete
   die Leiste rund 200px, genau dort kam auch die Warenkorb-Beschriftung dazu
   — zusammen lief die Navigation unter die Aktionen und der Trennstrich
   schnitt durch "Kontakt". Die kompakte Staffelung gilt jetzt auf allen
   Breiten; die Kopfzeile bleibt damit in derselben Spur wie der Seiteninhalt
   und der Abstand zum Trennstrich bleibt gleich. */
nav.main > ul > li > a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:6px 0;
  border-bottom:2px solid transparent;opacity:.9}
nav.main > ul > li > a:hover{opacity:1;border-bottom-color:var(--sig)}
/* [aria-current] traf auch aria-current="false" — deshalb der genaue Wert. */
nav.main > ul > li > a[aria-current="page"],
nav.main > ul > li > a.ist-aktiv{opacity:1;border-bottom-color:var(--sig)}
nav.main .neu{display:inline-flex;align-items:center;border-radius:999px;
  background:var(--sig);color:var(--sig-ink);
  font-size:8.5px;line-height:1;padding:4px 7px;letter-spacing:.08em}

/* Aktionsbereich ist ein eigenständiger Block: schrumpft nie, wird nie
   überlagert. Die Trennlinie setzt ihn optisch von den Menüpunkten ab. */
.hactions{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:4px;
  padding-left:10px;border-left:1px solid rgba(255,255,255,.14)}
@media(min-width:1440px){.hactions{gap:10px;padding-left:22px}}
.iconbtn{display:grid;place-items:center;width:40px;height:40px;flex:none;
  border:0;padding:0;background:transparent;color:rgba(255,255,255,.85);text-decoration:none;
  cursor:pointer;transition:color .18s,background-color .18s}
.iconbtn:hover{color:#fff;background:rgba(255,255,255,.08)}
/* Konto-Knopf: quadratisch und kantig wie die uebrigen Kopfelemente,
   Hoehe an den Warenkorb daneben angeglichen. */
.iconbtn.konto{width:44px;height:44px;border-radius:0}
.cart{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:var(--cart);
  color:var(--cart-ink);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  border:0;cursor:pointer;text-decoration:none;white-space:nowrap}
@media(min-width:1280px){.cart{padding:0 18px;font-size:11.5px}}
/* Zwischen 1024 und 1180 px wird es eng — Warenkorb dort nur als Symbol */
@media(max-width:1180px){.cart .cartlabel{display:none}.cart{padding:0 13px}}
.cart:hover{filter:brightness(1.06)}
.strip{height:4px;background:var(--sig)}
/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;background:var(--tint);border-bottom:1px solid var(--line)}
.hero .deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .in{position:relative;display:grid;gap:40px;padding:48px 0 52px}
/* Rechte Spalte bekommt mehr Breite, damit das Vial als Anker groß stehen kann */
@media(min-width:1024px){.hero .in{grid-template-columns:.88fr 1.12fr;gap:44px;padding:56px 0 60px;align-items:center}}
@media(min-width:1280px){.hero .in{gap:52px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--sig);color:var(--sig-ink);
  padding:8px 16px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin:0 0 20px}
h1{font-size:32px;margin:0 0 16px}
@media(min-width:640px){h1{font-size:38px}} @media(min-width:1024px){h1{font-size:44px}}
/* Auch fuer Abschnittsueberschriften — nicht nur die Seitenueberschrift */
h1 .hl,h2 .hl{background:var(--sig);color:var(--sig-ink);padding:0 8px}
/* In Ueberschriften ohne Kursivsatz sitzt die Flaeche sonst zu eng */
h2 .hl{padding:0 9px}
.sub{max-width:48ch;font-size:15px;line-height:1.65;color:var(--ink-2);margin:0 0 24px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;
  border:1px solid transparent;font:800 11.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.05em;
  text-decoration:none;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s}
.btn-p{background:var(--cta);color:var(--cta-ink)} .btn-p:hover{background:var(--cta-hover)}
.btn-o{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.btn-o:hover{border-color:var(--cta);color:var(--cta)}
.btn-l{background:var(--sig);color:var(--sig-ink)} .btn-l:hover{filter:brightness(1.06)}
.metrics{display:flex;flex-wrap:wrap;gap:16px 32px;margin:0;padding-top:20px;border-top:2px solid var(--ink)}
.metrics dd{margin:0;font:800 22px/1 var(--f-display);font-style:italic}
.metrics dt{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
/* ---- Produktkarten ---- */
.pcard{background:#fff;border:2px solid var(--ink);padding:20px}
@media(min-width:640px){.pcard{padding:24px}}
.pcard .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.pcard h2{font:700 20px/1.2 var(--f-display);letter-spacing:-.02em;margin:0}
.pcard .meta{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin:2px 0 0}
.badge{display:inline-block;background:var(--sig);color:var(--sig-ink);padding:6px 11px;
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
/* Bildbühne: Flexbox statt Grid, Begrenzung über max-* statt Prozenthöhe.
   Grund: Prozenthöhen auf Grid-Items lösen in Safari nicht auf — das Bild
   behält seine Originalhöhe und wird von overflow:hidden beschnitten.
   Alle Produktbilder sind 1024x1024, deshalb quadratische Bühnen. */
.media{position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--tint);border:1px solid var(--line);overflow:hidden}
.media svg.pl{width:auto;max-height:78%;color:var(--cta);opacity:.45}
.media img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.specs{margin:0 0 14px;padding-top:12px;border-top:1px solid var(--line)}
.specs div{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}
.specs dt{color:var(--ink-2)} .specs dd{margin:0;font-weight:700}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:4px}
.price b{font:800 29px/1 var(--f-display);font-style:italic}
.price s{font-size:13.5px;color:var(--sale)}
.vat{font-size:10.5px;color:var(--ink-2);margin:0 0 14px}
/* ---- Streifen ---- */
.gifts{background:var(--nav);color:#fff}
.gifts ul{display:grid;grid-template-columns:1fr 1fr;gap:16px;list-style:none;margin:0;padding:20px 0}
@media(min-width:1024px){.gifts ul{grid-template-columns:repeat(4,1fr)}}
.gifts li{display:flex;align-items:center;gap:12px}
.gifts .n{display:grid;place-items:center;width:36px;height:36px;flex:none;background:var(--sig);color:var(--sig-ink);
  font:800 11px/1 var(--f-sans);font-style:italic}
/* Die Icons erben ihre Farbe nicht ueber img — deshalb dunkel einfaerben,
   passend zur limefarbenen Kachel. Betrifft nur noch die Vertrauensleiste;
   in der Geschenkleiter steht wieder die Schwelle als Zahl. */
.trust .ic img{width:19px;height:19px;display:block;object-fit:contain;
  filter:brightness(0) saturate(100%)}
.gifts b{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.3}
.gifts small{font-size:10.5px;color:rgba(255,255,255,.6)}
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust ul{display:grid;gap:22px;list-style:none;margin:0;padding:24px 0}
@media(min-width:640px){.trust ul{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.trust ul{grid-template-columns:repeat(4,1fr)}}
.trust li{display:flex;gap:12px}
.trust .ic{display:grid;place-items:center;width:36px;height:36px;flex:none;background:var(--sig);color:var(--sig-ink)}
.trust b{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.trust small{display:block;font-size:11px;line-height:1.45;color:var(--ink-2)}
/* ---- Sektionen ---- */
section.blk{padding:48px 0;background:#fff}
@media(min-width:1024px){section.blk{padding:56px 0}}
section.blk.tint{background:var(--tint)}
section.blk.dark{background:var(--nav);color:#fff}
.slabel{display:inline-block;background:var(--ink);color:#fff;padding:6px 14px;margin:0 0 14px;
  font:800 9px/1 var(--f-sans);font-style:italic;text-transform:uppercase;letter-spacing:.1em}
section.dark .slabel{background:var(--sig);color:var(--sig-ink)}
.shead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-bottom:24px}
.shead h2{font-size:24px;margin:0}
@media(min-width:640px){.shead h2{font-size:29px}}
.shead p{max-width:78ch;margin:8px 0 0;font-size:14px;color:var(--ink-2)}
section.dark .shead p{color:rgba(255,255,255,.7)}
.shead a.more{white-space:nowrap;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--cta);text-decoration:none}
.shead a.more:hover{text-decoration:underline;text-underline-offset:4px}
.grid4{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.grid4{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid4{grid-template-columns:repeat(4,1fr)}}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);padding:16px;
  text-decoration:none;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);border-color:var(--cta);box-shadow:0 20px 40px -26px rgba(19,16,32,.28)}
.card .media{aspect-ratio:1/1;margin-bottom:14px;padding:8px}
.card h3{font:700 15.5px/1.25 var(--f-display);letter-spacing:-.02em;margin:0 0 4px}
.card .d{font-size:11px;line-height:1.45;color:var(--ink-2);margin:0 0 10px;min-height:32px}
.card .hp{font:600 10.5px/1 var(--f-mono);color:var(--cta);margin:0 0 12px}
.card .foot{margin-top:auto}
.card .foot s{display:block;font:600 10.5px/1.4 var(--f-mono);color:var(--sale)}
.card .foot b{display:block;font:800 19px/1.2 var(--f-display);font-style:italic;margin-bottom:10px}
/* display:grid ist noetig, weil der Knopf in den Kategoriekacheln als <span>
   ausgegeben wird — als inline-Element griffen weder min-height noch die
   Zentrierung und er stand als nackte Textzeile in der Kachel. */
.addbtn{display:grid;place-items:center;text-align:center;
  width:100%;min-height:44px;background:var(--cart);color:var(--cart-ink);border:0;cursor:pointer;
  font:800 9.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.05em}
.addbtn:hover{filter:brightness(1.06)}
.soldoutbtn{display:grid;place-items:center;text-align:center;
  width:100%;min-height:44px;background:var(--line-strong);color:var(--ink-2);
  cursor:not-allowed;font:800 9.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.05em}
.ausverkauft-badge{position:absolute;z-index:3;top:12px;left:12px;
  padding:5px 10px;border-radius:999px;background:var(--sale);color:#fff;
  font:800 9px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em}
/* Bewertungen */
.revs{display:grid;gap:16px;list-style:none;margin:0;padding:0}
@media(min-width:1024px){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);padding:20px}
.rev .stars{display:flex;gap:2px;color:var(--cta);margin-bottom:10px}
.rev blockquote{flex:1;margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.rev figcaption{display:flex;align-items:center;gap:10px;font-size:12px}
.rev .av{display:grid;place-items:center;width:32px;height:32px;flex:none;background:var(--ink);color:#fff;
  font:800 12px/1 var(--f-sans);font-style:italic}
.rev .av+div b{display:block} .rev .av+div small{font-size:10.5px;color:var(--ink-2)}
/* Datenschutz */
/* Ziele + Tools */
.goals{display:grid;gap:12px;grid-template-columns:1fr 1fr;list-style:none;margin:0;padding:0}
@media(min-width:640px){.goals{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.goals{grid-template-columns:repeat(5,1fr)}}
.goal{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;background:#fff;border:1px solid var(--line);
  padding:16px;text-decoration:none;color:inherit;transition:border-color .18s,background-color .18s}
.goal:hover{border-color:var(--cta);background:var(--tint)}
.goal .gi{display:grid;place-items:center;width:36px;height:36px;background:var(--tint2);color:var(--cta)}
.goal .gi img{width:20px;height:20px}
.goal b{font-size:12px;font-weight:700;line-height:1.35}
/* Kurzbeschreibung je Ziel — der Abstand sitzt hier, nicht als gap,
   damit er zwischen Titel und Text kleiner bleibt als zum Symbol. */
.goal small{display:block;margin-top:-4px;font-size:10.5px;line-height:1.5;
  color:var(--ink-2)}
@media(min-width:1024px){.goal small{font-size:11px}}
.tools{display:grid;gap:14px;list-style:none;margin:0;padding:0}
@media(min-width:640px){.tools{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.tools{grid-template-columns:repeat(4,1fr)}}
.tool{display:flex;flex-direction:column;gap:8px;height:100%;background:#fff;border:1px solid var(--line);
  padding:16px;text-decoration:none;color:inherit;transition:transform .18s,border-color .18s}
.tool:hover{transform:translateY(-2px);border-color:var(--cta)}
.tool .ti{display:grid;place-items:center;width:40px;height:40px;background:var(--sig);color:var(--sig-ink)}
.tool .ti img{width:21px;height:21px}
.tool b{font:700 13.5px/1.3 var(--f-display);letter-spacing:-.01em}
.tool small{font-size:11px;line-height:1.45;color:var(--ink-2)}
/* SEO-Block */
.seo{display:grid;gap:32px}
@media(min-width:1024px){.seo{grid-template-columns:1fr 300px;gap:44px}}
.prose{max-width:74ch;font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.prose h2{color:var(--ink);font-size:24px;margin:0 0 16px}
@media(min-width:640px){.prose h2{font-size:26px}}
.prose h3{color:var(--ink);font:700 17px/1.3 var(--f-display);letter-spacing:-.02em;margin:28px 0 10px}
.prose p{margin:0 0 14px}
.prose .todo{font-size:12px;font-style:italic;opacity:.72;border-left:3px solid var(--line-strong);padding-left:12px}
.aside{align-self:start;background:var(--tint);border:1px solid var(--line);padding:20px}
.aside h2,.aside h3{font:800 9.5px/1 var(--f-sans);font-style:italic;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);margin:0 0 14px}
.aside h3{margin-top:22px}
.aside p{margin:0 0 14px;font-size:13px;line-height:1.65;color:var(--ink-2)}
.aside ul{list-style:none;margin:0;padding:0;font-size:13px}
.aside li{border-bottom:1px solid var(--line)} .aside li:last-child{border:0}
.aside a{display:flex;justify-content:space-between;gap:10px;padding:11px 0;color:var(--cta);
  text-decoration:none;font-weight:600}
.aside a:hover{text-decoration:underline;text-underline-offset:3px}
/* COA */
.coawrap{overflow-x:auto;background:#fff;border:1px solid var(--line)}
table.coa{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px}
table.coa th{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
table.coa td{padding:14px 16px;border-bottom:1px solid var(--line)}
table.coa tr:last-child td{border-bottom:0}
table.coa .bar{display:block;height:8px;min-width:70px;max-width:110px;background:var(--tint2)}
table.coa .bar i{display:block;height:100%;background:var(--sig)}
table.coa a{color:var(--cta);text-decoration:none;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
table.coa a:hover{text-decoration:underline;text-underline-offset:3px}
/* ==========================================================================
   NEWSLETTER
   Abgerundeter Kasten mit Rand statt scharfer Kante, darin ein sehr langsam
   wandernder Farbschleier. Das Eingabefeld ist rechts oben angeschraegt und
   greift 9px unter den Button — dessen .skw-Schraege legt genau diesen Keil
   wieder frei, dadurch stossen beide auf einer Linie zusammen.
   ========================================================================== */
.news{position:relative;isolation:isolate;overflow:hidden;
  background:var(--nav);color:#fff;padding:26px 22px;
  border:1px solid rgba(255,255,255,.13);border-radius:20px}
@media(min-width:640px){.news{padding:36px}}
@media(min-width:1024px){.news{padding:52px 56px;border-radius:24px}}

/* Der Schleier. Nur Violett-Toene — das Lime hatte als Schleier einen
   gruenen Schimmer ueber die Schrift gelegt. Eine Maske haelt die Ecke mit
   der Ueberschrift frei, dort bleibt der Grund fast schwarz. Bewegt wird per
   transform, nicht per background-position — das laeuft im Compositor. */
.news::before{content:"";position:absolute;top:-60%;left:-50%;
  width:200%;height:220%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 48% at 74% 34%,rgba(109,52,214,.40),transparent 70%),
    radial-gradient(36% 46% at 92% 76%,rgba(58,28,132,.46),transparent 72%),
    radial-gradient(30% 40% at 60% 92%,rgba(148,96,255,.16),transparent 74%);
  filter:blur(26px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 58%);
  mask-image:linear-gradient(180deg,transparent 0,#000 58%);
  animation:news-zug 26s ease-in-out infinite alternate}
@media(min-width:1024px){
  .news::before{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%);
    mask-image:linear-gradient(90deg,transparent 0,#000 46%)}}
@keyframes news-zug{
  0%{transform:translate3d(-4%,-2%,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.10)}
  100%{transform:translate3d(7%,-1%,0) scale(1.03)}}
/* Feiner Lichtrand oben — laesst die Kante nicht flach wirken */
.news::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}

.newsgrid{display:grid;gap:26px;position:relative}
@media(min-width:1024px){
  .newsgrid{grid-template-columns:1fr 430px;gap:48px;align-items:center}}
.news h2{font-size:22px;margin:0 0 10px}
@media(min-width:640px){.news h2{font-size:26px}}
@media(min-width:1024px){.news h2{font-size:33px;margin-bottom:12px}}
.news p{max-width:52ch;margin:0;font-size:13.5px;line-height:1.6;
  color:rgba(255,255,255,.7)}
@media(min-width:1024px){.news p{font-size:15px;line-height:1.65}}

.newsform{display:flex;align-items:stretch}
/* Die Huelle traegt die Randfarbe als Flaeche; das Feld liegt 2px darin.
   Beide sind gleich beschnitten, deshalb bleibt an der Schraege ein Strich.
   Ein outline waere vom clip-path abgeschnitten und unsichtbar. */
.nlfeld{position:relative;z-index:1;flex:1;min-width:0;display:block;
  margin-right:-9px;padding:2px;background:rgba(255,255,255,.32);
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);
  transition:background .18s}
.nlfeld:focus-within{background:var(--sig)}
.newsform input{display:block;width:100%;min-height:48px;
  border:0;border-radius:0;background:#fff;color:var(--ink);
  padding:0 26px 0 16px;font:400 13.5px var(--f-sans);
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.newsform input:focus{outline:none}
.newsform input::placeholder{color:var(--ink-2)}
.newsform input::selection{background:var(--cta);color:#fff}
/* Der Button behaelt links eine gerade Kante und liegt unter dem Feld —
   die Schraege entsteht allein durch das Feld darueber. Zwei aufeinander
   treffende clip-Kanten haetten an der Naht eine dunkle Haarlinie ergeben. */
.newsform button.skw{clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.newsform button{position:relative;min-height:48px;flex:none;padding:0 24px 0 30px;border:0;
  background:var(--cta);color:var(--cta-ink);
  font:800 11.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.05em;
  cursor:pointer;transition:background .18s}
.newsform button:hover{background:var(--cta-hover)}
.newsform button:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
@media(min-width:1024px){
  .newsform input{min-height:56px;font-size:14.5px;padding-left:20px}
  .newsform button{min-height:56px;padding:0 30px 0 36px;font-size:12px}}
/* Unter 400px wird es eng — der Button gibt dem Feld Platz zurueck,
   damit die Platzhalteradresse vollstaendig lesbar bleibt. */
@media(max-width:399px){
  .newsform button{padding:0 14px 0 20px;font-size:10.5px;letter-spacing:.04em}}
.newsnote{margin:12px 0 0;font-size:10.5px;color:rgba(255,255,255,.55)}

@media(prefers-reduced-motion:reduce){
  .news::before{animation:none}
  .nlfeld,.newsform button{transition:none}}
/* FAQ */
.faq{display:grid;gap:14px;list-style:none;margin:0;padding:0}
@media(min-width:1024px){.faq{grid-template-columns:1fr 1fr}}
.fq{background:#fff;border:1px solid var(--line);padding:20px}
.fq h3{font:700 14px/1.4 var(--f-display);letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.fq p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
/* Footer */
footer.site{background:var(--nav);color:#fff;padding:40px 0 0}
footer.site .cols{display:grid;gap:28px;padding-bottom:28px}
@media(min-width:640px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){footer.site .cols{grid-template-columns:1.6fr 1fr 1fr 1fr}}
footer.site img{height:32px;width:auto}
footer.site .disc{max-width:44ch;margin:14px 0 0;font-size:11px;line-height:1.55;color:rgba(255,255,255,.55)}
footer.site h2{font:800 9.5px/1 var(--f-sans);font-style:italic;text-transform:uppercase;letter-spacing:.1em;
  color:var(--sig);margin:0 0 12px}
footer.site ul{list-style:none;margin:0;padding:0;font-size:12.5px}
footer.site li{margin-bottom:8px}
footer.site a{color:rgba(255,255,255,.7);text-decoration:none} footer.site a:hover{color:#fff}
footer.site .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding:16px 0;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:rgba(255,255,255,.5)}
footer.site .base ul{display:flex;flex-wrap:wrap;gap:4px 12px}
/* Dev-Schalter (nur Vorschau, nicht Teil des Designs) */
#dev{position:fixed;right:14px;bottom:14px;z-index:99;display:flex;gap:6px;padding:6px;
  background:rgba(11,11,13,.92);border:1px solid #2A2A33;border-radius:6px;backdrop-filter:blur(8px)}
#dev button{padding:8px 12px;border:0;border-radius:3px;background:#22222B;color:#C9C9D8;cursor:pointer;
  font:700 11px/1 var(--f-sans)}
#dev button[aria-pressed="true"]{background:var(--sig);color:var(--sig-ink)}
@media print{#dev{display:none}}

/* ==========================================================================
   HERO-BÜHNE — die schwebende Ampulle
   Kein Kasten mehr: Produkt freistehend, Glow dahinter, Bodenschatten
   darunter, Info-Chips daneben. Preis und CTA sitzen in einer flachen
   Leiste, damit der Kaufweg trotzdem sofort sichtbar bleibt.
   ========================================================================== */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;
  min-height:440px;padding:8px 0 0}
/* Keine erzwungene Mindesthöhe auf großen Schirmen: Die Bühne ist genau so
   hoch wie Vial plus Kaufleiste. Sonst wird der Hero so lang, dass die
   Preiskarte unter die Sichtkante rutscht. */
@media(min-width:1024px){.stage{min-height:0}}

/* Glow und Rahmenschräge sind Kinder von .floater und machen deshalb
   Schweben, Auftritt und Zeiger-Parallaxe 1:1 mit. Vorher hingen sie an
   der Bühne und blieben stehen, während sich das Vial bewegte. */
.floater .glow{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1/1;z-index:0;
  transform:translate(-50%,-50%);pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%, rgba(168,252,3,.40) 0%, rgba(168,252,3,0) 50%),
    radial-gradient(circle at 62% 62%, rgba(109,52,214,.28) 0%, rgba(109,52,214,0) 56%);
  filter:blur(6px)}

.floater .frameline{position:absolute;left:50%;top:50%;width:64%;height:82%;z-index:0;
  transform:translate(-50%,-50%) skewX(-9deg);border:2px solid var(--sig);
  opacity:.45;pointer-events:none}

/* Nur das Vial schwebt. Chips und Rahmen stehen fest, damit die Bewegung
   eindeutig einem Objekt zugeordnet wird — alles gleichzeitig zu bewegen
   liest sich als Wackeln, nicht als Schweben. */
/* Vial-Zone: eigener Bezugsrahmen. Bodenschatten und Ring liegen hier als
   Geschwister der Ampulle — dadurch sind sie von deren Bewegung entkoppelt
   und werden weder verschoben noch vom Bildfilter überdeckt. */
.stage .vialzone{position:relative;z-index:1;display:flex;justify-content:center;width:100%}
.stage .floatwrap{position:relative;z-index:2;display:flex;justify-content:center;width:100%}
/* .floater ist exakt so groß wie das Bild. Nur dann deckt sich die
   maskierte Glanz-Ebene (inset:0) pixelgenau mit der Ampulle. */
.stage .floater{position:relative;display:block;width:min(100%,490px);
  will-change:transform;backface-visibility:hidden;
  animation:heroIn 1s cubic-bezier(.2,.8,.25,1) both, bobY 7.4s 1s linear infinite}
/* Zweite, langsamere Ebene für die Neigung. Zwei Zyklen mit
   unterschiedlicher Dauer (7,4 s und 9,6 s) überlagern sich, dadurch
   wiederholt sich das Bewegungsmuster praktisch nie — das ist der
   Unterschied zwischen "schwebt" und "läuft eine Schleife ab". */
.stage .tilt{position:relative;display:block;width:100%;
  will-change:transform;backface-visibility:hidden;
  animation:tiltR 9.6s 1s linear infinite}
/* Nur noch ein enger Kontaktschatten am Glas. Der große Abwärts-Halo ist
   entfallen: Er überlagerte die Boden-Ellipse und wurde bei jedem Frame neu
   gezeichnet — das war die Ursache des Flackerns. Die Bodenebene übernimmt
   jetzt der eigenständige Schatten in .vialzone. */
.stage .floatwrap img{position:relative;z-index:1;display:block;width:100%;height:auto;
  filter:none}

/* Auftritt: steigt auf, wird scharf, setzt sich */
@keyframes heroIn{
  from{opacity:0;transform:translate3d(0,34px,0) scale(.94);filter:blur(6px)}
  to  {opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}

/* Schweben als Sinuskurve: y = -A·(1-cos 2πt)/2, A = 12 px.
   Neun Stützpunkte mit linearem Timing statt weniger Punkte mit ease —
   dadurch gibt es keine Segmentgrenzen, an denen die Geschwindigkeit
   springt. Start- und Endwert sind identisch, der Loop ist nahtlos. */
@keyframes bobY{
  0%    {transform:translate3d(0,0,0)}
  12.5% {transform:translate3d(0,-1.8px,0)}
  25%   {transform:translate3d(0,-6px,0)}
  37.5% {transform:translate3d(0,-10.2px,0)}
  50%   {transform:translate3d(0,-12px,0)}
  62.5% {transform:translate3d(0,-10.2px,0)}
  75%   {transform:translate3d(0,-6px,0)}
  87.5% {transform:translate3d(0,-1.8px,0)}
  100%  {transform:translate3d(0,0,0)}
}
/* Neigung als echte Sinuswelle: r = 0,7° · sin 2πt.
   Am Loop-Punkt sind Wert UND Richtung gleich, deshalb kein sichtbarer Reset. */
@keyframes tiltR{
  0%    {transform:rotate(0deg)}
  12.5% {transform:rotate(.495deg)}
  25%   {transform:rotate(.7deg)}
  37.5% {transform:rotate(.495deg)}
  50%   {transform:rotate(0deg)}
  62.5% {transform:rotate(-.495deg)}
  75%   {transform:rotate(-.7deg)}
  87.5% {transform:rotate(-.495deg)}
  100%  {transform:rotate(0deg)}
}

/* Glanzstreifen läuft über die Ampulle. Die Maske nimmt dieselbe Bilddatei,
   dadurch folgt das Licht exakt der Silhouette statt über den Kasten zu laufen. */
.stage .sheen{position:absolute;inset:0;pointer-events:none;z-index:2;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(108deg,transparent 40%,rgba(255,255,255,.82) 48%,
             rgba(255,255,255,.25) 53%,transparent 62%);
  background-size:260% 100%;
  animation:sheen 7s cubic-bezier(.3,.1,.2,1) 1.6s infinite}
@keyframes sheen{0%{background-position:170% 0} 34%,100%{background-position:-70% 0}}

/* Ring am Boden pulst langsam mit — hebt die Ampulle optisch an */
/* Deko-Boden-Ring entfernt (Betreiber): las sich als fremder gruener Kreis im
   Hintergrund. Erdung uebernimmt der dunkle .ground-Schatten. */
.vialzone .ring{display:none;position:absolute;left:50%;bottom:16px;z-index:0;width:50%;height:52px;
  border:2px solid var(--sig);border-radius:50%;filter:blur(.4px);pointer-events:none;
  transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;
  /* Ruhezustand = Endzustand der Animation: zentriert (translateX) UND flach
     (rotateX) + blass. Sonst zeigt die 1s-Animationsverzoegerung den Ring
     rechts-versetzt und aufrecht (grosser gruener Kreis beim Laden). */
  transform:translateX(-50%) rotateX(74deg);opacity:.34;
  animation:ringpulse 7.4s 1s linear infinite}
@keyframes ringpulse{
  0%    {transform:translateX(-50%) rotateX(74deg) scale(1);    opacity:.34}
  25%   {transform:translateX(-50%) rotateX(74deg) scale(.955); opacity:.28}
  50%   {transform:translateX(-50%) rotateX(74deg) scale(.9);   opacity:.17}
  75%   {transform:translateX(-50%) rotateX(74deg) scale(.955); opacity:.28}
  100%  {transform:translateX(-50%) rotateX(74deg) scale(1);    opacity:.34}
}

/* Bodenschatten: eigenes Element in .vialzone, NICHT in der bewegten Ebene.
   Er wandert nicht mit nach unten, sondern atmet gegenläufig in Größe und
   Deckkraft — Vial unten heißt Schatten größer und dunkler.
   Die Animation ist auf dieselbe Dauer wie das Schweben phasengekoppelt. */
.vialzone .ground{display:none;position:absolute;left:50%;bottom:10px;z-index:0;
  width:44%;height:34px;pointer-events:none;
  transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;
  /* Ruhezustand zentriert - translateX steckt sonst nur in den Keyframes und
     der Bodenschatten sitzt waehrend der 1s-Verzoegerung rechts-versetzt. */
  transform:translateX(-50%);opacity:.95;
  background:radial-gradient(ellipse at center, rgba(19,16,32,.34) 0%, rgba(19,16,32,0) 70%);
  animation:grounded 7.4s 1s linear infinite}

/* Badges sitzen an den Außenkanten der Bühne. Breite auf 28 % begrenzt,
   damit sie auch bei 1280 px und 1024 px nicht in die Ampulle laufen —
   das Glas belegt rund 29 bis 71 % der Bildbreite. */
.chipzeile{display:contents}
.stage .chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:6px;
  max-width:28%;padding:8px 11px;font-size:9px;line-height:1.3;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;box-shadow:0 10px 22px -12px rgba(19,16,32,.4)}
@media(min-width:1280px){.stage .chip{font-size:9.5px;padding:9px 13px;max-width:30%}}
/* Beide Badges gibt es nur mobil: die Ausfuehrung des DHL-Badges in der
   Kaufleiste und die Bewertung an der Ampulle. Die Regel muss .stage .chip
   an Spezifitaet erreichen, sonst setzt deren display:inline-flex sie am
   Desktop wieder sichtbar. */
.stage .chip-bewertung{display:none}
.stage .chip-purity{top:3%;right:0;background:var(--sig);color:var(--sig-ink)}
/* Einzeiler: max-width:30% der Buehne (592px) liess nur 178px — zu wenig
   fuer "Chargenspezifisches COA" in Versalien. */
.stage .chip-coa{top:30%;left:0;background:#fff;color:var(--ink);border:1px solid var(--line);
  max-width:none;white-space:nowrap}
.stage .chip-lab{bottom:26%;right:0;background:var(--ink);color:#fff}
/* Versandzusage — Gegenstück zum COA-Badge auf der linken Seite */
/* Liegt in .vialzone, nicht in .stage — dadurch richtet er sich an der
   Ampulle aus und kann nie in die Kaufleiste ragen. */
/* Versandzusage bewusst kraeftiger als die uebrigen Chips: dunkle Pille
   mit limefarbenem Symbolkreis. Setzt sich vom hellen Umfeld ab und traegt
   die Aussage, auf die es beim Kauf ankommt. */
.stage .chip-dhl{bottom:4%;left:0;max-width:none;white-space:nowrap;
  gap:8px;padding:6px 13px 6px 6px;
  background:var(--nav);color:#fff;border:0;border-radius:999px;
  font-size:9.5px;letter-spacing:.05em;
  box-shadow:0 10px 22px -13px rgba(11,11,13,.55)}
@media(min-width:1280px){.stage .chip-dhl{font-size:10px;padding:6px 15px 6px 6px}}
.stage .chip-dhl .dhlk{width:12px;height:12px;padding:5px;box-sizing:content-box;
  border-radius:999px;background:var(--sig);color:var(--nav);flex:none}
/* Die Verbindungslinie folgt sonst currentColor und waere hier weiss */
.stage .chip-dhl::before{background:var(--nav);opacity:.28}

/* Zahlungs- und Versandzusage unter der Kaufleiste */
.stage .paytrust{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:12px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2)}
.stage .paytrust svg{flex:none;color:var(--cta)}
.stage .paytrust span{white-space:nowrap}
/* Feine Verbindungslinien von den Chips zum Produkt — Labor-Anmutung */
.stage .chip::before{content:"";position:absolute;top:50%;width:22px;height:1px;
  background:currentColor;opacity:.35}
.stage .chip-purity::before,.stage .chip-lab::before{right:100%;margin-right:4px}
.stage .chip-coa::before,.stage .chip-dhl::before{left:100%;margin-left:4px}

.stage .buybar{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;
  gap:14px;width:100%;margin-top:26px;padding:16px;background:#fff;border:2px solid var(--ink)}
.stage .buybar .nm{flex:1 1 130px;min-width:0}
.stage .buybar .nm b{display:block;font:700 18px/1.2 var(--f-display);letter-spacing:-.02em}
.stage .buybar .nm small{font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-2)}
.stage .buybar .pc{text-align:right}
.stage .buybar .pc s{display:block;font:600 11px/1.3 var(--f-mono);color:var(--sale)}
.stage .buybar .pc b{font:800 24px/1 var(--f-display);font-style:italic}
.stage .buybar .btn{flex:1 1 100%;justify-content:center}
@media(min-width:480px){.stage .buybar .btn{flex:0 0 auto}}

@keyframes floaty{from{transform:translateY(0)} to{transform:translateY(-17px)}}
/* Gegenläufig zum Schweben: bei t=0 und t=1 steht das Vial unten, der
   Schatten ist also am größten und dunkelsten; bei t=0,5 steht es oben,
   der Schatten schrumpft und wird heller. Gleiche Stützpunkte wie bobY,
   damit beide Bewegungen exakt phasengekoppelt bleiben. */
@keyframes grounded{
  0%    {transform:translateX(-50%) scale(1);    opacity:.95}
  12.5% {transform:translateX(-50%) scale(.983); opacity:.91}
  25%   {transform:translateX(-50%) scale(.94);  opacity:.82}
  37.5% {transform:translateX(-50%) scale(.897); opacity:.72}
  50%   {transform:translateX(-50%) scale(.88);  opacity:.68}
  62.5% {transform:translateX(-50%) scale(.897); opacity:.72}
  75%   {transform:translateX(-50%) scale(.94);  opacity:.82}
  87.5% {transform:translateX(-50%) scale(.983); opacity:.91}
  100%  {transform:translateX(-50%) scale(1);    opacity:.95}
}

/* ==========================================================================
   INTERAKTION — Hover, Fokus, Bewegung
   Regeln: nur transform und opacity animieren, 150–300 ms, ease-out.
   Jeder Effekt hat eine Aufgabe, nichts ist reine Dekoration.
   ========================================================================== */

/* Produktkarte: anheben, Rahmen einfärben, Bild leicht heranholen,
   Warenkorb-Button gewinnt Kontrast */
.card{will-change:transform}
.card:hover .media img,.card:focus-visible .media img{transform:scale(1.07)}
.card:hover .badge{transform:scale(1.05)}
.badge{transition:transform .2s ease-out}
.card:hover .addbtn{filter:brightness(1.08)}

/* Glanzstreifen über Hauptbuttons — deutet Klickbarkeit an, ohne Layout zu bewegen */
.btn,.addbtn,.cart{position:relative;overflow:hidden;isolation:isolate}
.btn::after,.addbtn::after,.cart::after{content:"";position:absolute;inset:0;z-index:-1;
  transform:translateX(-115%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.btn:hover::after,.addbtn:hover::after,.cart:hover::after{transform:translateX(115%) skewX(-18deg)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(109,52,214,.65)}
.btn-l:hover,.cart:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(11,11,13,.5)}
.btn-o:hover{transform:translateY(-2px)}
.btn,.cart,.addbtn{transition:transform .2s ease-out,background-color .2s,border-color .2s,
  color .2s,box-shadow .25s,filter .2s}
.btn:active,.cart:active,.addbtn:active{transform:translateY(0) scale(.985)}

/* Navigation: Unterstrich wächst aus der Mitte statt hart umzuschalten */
/* Ebenfalls nur die oberste Ebene — sonst bekämen auch die Dropdown-Einträge
   den Lime-Unterstrich und die Innenabstände der Header-Tabs. */
nav.main > ul > li > a{position:relative;border-bottom:0!important;padding-bottom:8px}
nav.main > ul > li > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--sig);transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease-out}
nav.main > ul > li > a:hover::after,nav.main > ul > li > a:focus-visible::after,
nav.main > ul > li > a[aria-current="page"]::after,
nav.main > ul > li > a.ist-aktiv::after{transform:scaleX(1)}

/* Dropdown-Listen ausdrücklich wieder vertikal */
.mega ul{display:block;white-space:normal;font-size:12.5px;font-weight:400;
  text-transform:none;letter-spacing:0}

/* Anwendungsgebiete: Icon-Fläche wird zum Signal, Text rückt nach */
.goal .gi{transition:background-color .2s,color .2s,transform .25s ease-out}
.goal b{transition:transform .25s ease-out}
.goal:hover .gi{background:var(--sig);color:var(--sig-ink);transform:rotate(-4deg) scale(1.06)}
.goal:hover b{transform:translateX(3px)}

/* Tools: Icon hebt sich, Pfeil erscheint */
.tool{position:relative}
.tool .ti{transition:transform .25s ease-out}
.tool:hover .ti{transform:translateY(-3px) rotate(-3deg)}
.tool b{transition:color .2s}
.tool:hover b{color:var(--cta)}
.tool::after{content:"→";position:absolute;right:14px;top:16px;font-weight:800;color:var(--cta);
  opacity:0;transform:translateX(-6px);transition:opacity .22s,transform .22s ease-out}
.tool:hover::after{opacity:1;transform:translateX(0)}

/* Sekundärlinks: der Pfeil rutscht mit */
.shead a.more,.aside a{transition:transform .2s ease-out,color .2s}
.shead a.more:hover{transform:translateX(4px)}
.aside a:hover{transform:translateX(4px)}

/* Bewertungen und Tabellenzeilen reagieren, damit die Seite überall lebt */
.rev{transition:transform .2s ease-out,border-color .2s,box-shadow .25s}
.rev:hover{transform:translateY(-3px);border-color:var(--cta);
  box-shadow:0 18px 34px -24px rgba(19,16,32,.3)}
table.coa tbody tr{transition:background-color .18s}
table.coa tbody tr:hover{background:var(--tint)}
table.coa .bar i{transition:filter .2s}
table.coa tbody tr:hover .bar i{filter:brightness(1.06)}

/* Bonus-Staffel: Zahl dreht sich leicht auf, wenn man darüber ist */
.gifts li .n{transition:transform .25s ease-out}
.gifts li:hover .n{transform:rotate(-5deg) scale(1.08)}

/* Einblenden beim Scrollen — gestaffelt, 40 ms Abstand */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;
  transition:opacity .5s ease-out var(--d,0s),transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0s)}

/* ==========================================================================
   PROSE — Listen und Links im Textblock
   ========================================================================== */
.prose .plist{list-style:none;margin:0 0 16px;padding:0}
.prose .plist li{position:relative;padding-left:26px;margin-bottom:9px}
.prose .plist li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--sig)}
.prose a{color:var(--cta);text-decoration:none;font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--cta) 35%, transparent);
  transition:border-color .18s,background-color .18s}
.prose a:hover{border-bottom-color:var(--cta);background:var(--tint2)}

/* Bewertungskopf: Sterne links, Produktbezug rechts */
.revtop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.revprod{font:800 9px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.08em;
  padding:5px 9px;background:var(--tint2);color:var(--cta)}

/* ==========================================================================
   PREMIUM-INTERAKTION
   Drei Ebenen pro Karte: Lichtkegel folgt dem Zeiger, Rahmen bekommt
   Farbverlauf, Karte hebt sich mit zwei gestaffelten Schatten.
   Alles nur transform/opacity/background — kein Layout-Neuaufbau.
   ========================================================================== */
.card,.tool,.goal,.rev{position:relative;isolation:isolate}

/* Lichtkegel: --mx/--my werden per JS gesetzt (Zeigerposition in Prozent) */
.card::before,.tool::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .3s ease-out;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb, var(--cta) 13%, transparent) 0%, transparent 62%)}
.card:hover::before,.tool:hover::before{opacity:1}
.card > *,.tool > *{position:relative;z-index:1}

/* Rahmen mit Verlauf: liegt als zweite Ebene über dem Standardrahmen */
.card::after{content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .3s ease-out;
  background:linear-gradient(135deg, var(--sig) 0%, var(--cta) 52%, transparent 78%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px}
.card:hover::after{opacity:.9}

/* Anheben: zwei Schatten — enger Kontaktschatten plus weiter Raumschatten */
.card{transition:transform .34s cubic-bezier(.2,.7,.2,1),box-shadow .34s cubic-bezier(.2,.7,.2,1)}
.card:hover{transform:translateY(-6px);
  box-shadow:0 2px 6px rgba(19,16,32,.06), 0 26px 50px -22px rgba(19,16,32,.34)}

/* Bild: heranholen und minimal kippen — wirkt wie ein Produkt in der Hand */
.card:hover .media img{transform:scale(1.08) rotate(-1.2deg)}
.card .media{transition:background-color .3s}
.card:hover .media{background:color-mix(in srgb, var(--sig) 9%, var(--tint))}

/* Warenkorb-Button füllt sich von links, Text bleibt lesbar */
.addbtn{position:relative;overflow:hidden;z-index:1}
.addbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateX(-101%);transition:transform .36s cubic-bezier(.2,.7,.2,1)}
.addbtn:hover{color:#fff}
.addbtn:hover::before{transform:translateX(0)}

/* Preis rückt beim Überfahren leicht heraus */
.card .foot b{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.card:hover .foot b{transform:translateX(3px)}

/* Ziele: Lichtkante links, Icon wird zum Signal */
.goal::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sig);
  transform:scaleY(0);transform-origin:top;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.goal:hover::after{transform:scaleY(1)}
.goal{transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .22s,background-color .22s,box-shadow .3s}
.goal:hover{transform:translateY(-3px);box-shadow:0 18px 32px -24px rgba(19,16,32,.3)}

/* Tools: Karte hebt sich, Icon dreht, Pfeil fährt ein */
.tool{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .22s,box-shadow .3s}
.tool:hover{transform:translateY(-4px);box-shadow:0 20px 38px -24px rgba(19,16,32,.32)}

/* Hero-Bühne: Zeiger bewegt das Produkt leicht mit (Parallaxe, per JS) */
.stage{--px:0deg;--py:0deg}
.stage .floater{transform-style:preserve-3d}

/* ==========================================================================
   MEGA-DROPDOWN
   Öffnet per Hover und per Tastatur (focus-within). Panel ist Teil des
   Headers, damit es beim Scrollen mitgeht. Escape schließt.
   ========================================================================== */
nav.main li.has-menu{position:relative}
nav.main .caret{transition:transform .22s ease-out}
nav.main li.has-menu:hover .caret,
nav.main li.has-menu:focus-within .caret{transform:rotate(180deg)}

/* Sichtbarkeit läuft ausschließlich über opacity/transform/visibility.
   Kein display:none — die Links bleiben im Rendering und im Quelltext. */
.mega{position:absolute;left:0;top:calc(100% + 14px);z-index:60;width:min(680px,86vw);
  padding:24px;background:#fff;border:0;border-radius:20px;
  /* Kein Rahmen, sondern ein Ring als Schatten - der folgt dem Radius sauber.
     Darueber zwei Schattenlagen: eine weiche, tiefe fuer die Hoehe und eine
     enge fuer die Kante. */
  box-shadow:0 0 0 1px var(--line), 0 40px 80px -34px rgba(11,11,13,.5),
             0 12px 26px -18px rgba(11,11,13,.28);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.986);transform-origin:top left;
  /* Schließen kürzer als Öffnen — fühlt sich reaktionsschneller an */
  transition:opacity .13s ease-in,transform .13s ease-in,visibility 0s linear .13s}
nav.main li.has-menu:hover > .mega,
nav.main li.has-menu:focus-within > .mega{opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .2s ease-out,transform .2s cubic-bezier(.2,.8,.25,1),visibility 0s}
/* unsichtbare Brücke, damit der Zeiger die Lücke überqueren kann */
nav.main li.has-menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
/* Frueher lag hier ein Lime-Streifen ueber der ganzen Panelbreite. Der
   wirkte wie eine aufgesetzte Leiste; jetzt traegt ein weicher Schimmer aus
   der oberen linken Ecke dieselbe Farbe, ohne das Panel oben abzuschneiden. */
.mega .lime{position:absolute;left:0;top:0;width:260px;height:190px;
  border-radius:20px 0 0 0;pointer-events:none;
  background:radial-gradient(170px 130px at 12px 0,rgba(168,252,3,.22),transparent 72%)}
.mega .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mega .cols.three{grid-template-columns:1fr 1fr 1fr}
.mega .cols.vier{grid-template-columns:repeat(4,1fr);gap:18px}
.mega h4{font:800 9px/1 var(--f-sans);font-style:italic;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-2);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.mega ul{list-style:none;margin:0;padding:0}
.mega li{margin:0}
.mega .mi{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -10px;
  text-decoration:none;color:var(--ink);border-left:2px solid transparent;
  transition:var(--menue-hover-uebergang)}

.mega .mi .ico{display:grid;place-items:center;width:28px;height:28px;flex:none;
  background:var(--tint2);color:var(--cta);transition:background-color .18s,color .18s}

.mega .mi b{display:block;font-size:12.5px;font-weight:700;line-height:1.3}
.mega .mi small{display:block;font-size:10.5px;color:var(--ink-2);line-height:1.35}
/* Ausgezeichnetes Produkt im Panel */
.mega .feat{display:flex;gap:14px;align-items:center;padding:14px;background:var(--tint);
  border:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:border-color .2s,transform .24s cubic-bezier(.2,.7,.2,1)}
.mega .feat:hover{border-color:var(--cta);transform:translateY(-2px)}
.mega .feat img{width:64px;height:64px;object-fit:contain;flex:none}
.mega .feat .fb{font:700 14px/1.2 var(--f-display);letter-spacing:-.02em;display:block}
.mega .feat .fp{font:800 17px/1 var(--f-display);font-style:italic;display:block;margin-top:5px}
.mega .feat .fs{font:600 10px/1 var(--f-mono);color:var(--sale);display:block;margin-top:3px}
.mega .allrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mega .allrow a{font:800 10.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;
  color:var(--cta);text-decoration:none;transition:transform .2s ease-out;display:inline-flex;
  align-items:center;gap:6px;white-space:nowrap}
.mega .allrow a:hover{transform:translateX(4px)}


@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  .stage .floater,.stage .ground,.stage .ring{animation:none!important}
  .card:hover,.goal:hover,.tool:hover,.rev:hover{transform:none}
}


/* ==========================================================================
   SEITENTYPEN — Produkt, Kategorie, Rechner, Artikel, Blog, Zertifikate
   Nutzt dieselben Tokens wie die Startseite.
   ========================================================================== */
.crumb{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 0;font-size:12px;color:var(--ink-2)}
.crumb a{color:var(--cta);text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
/* Ein Mass fuer alle Seiten mit Kopfbalken — vorher war er hier deutlich
   hoeher als auf den Kategorieseiten. */
.pagehead{background:var(--nav);color:#fff;padding:32px 0 30px}
.pagehead .krume{margin-bottom:10px}
.pagehead .slabel{margin-bottom:10px;padding:5px 12px}
.pagehead h1{font-size:27px;margin:0}
@media(min-width:768px){.pagehead h1{font-size:34px}}
.pagehead h1 u{text-decoration:none;color:var(--sig)}
.pagehead p{margin:0;max-width:64ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72)}
.pagehead .stats{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.15)}
.pagehead .stats b{display:block;font:800 20px/1 var(--f-display);font-style:italic;color:var(--sig)}
.pagehead .stats small{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6)}

/* Produktseite */
.pdp{display:grid;gap:32px;padding:40px 0}
@media(min-width:1024px){.pdp{grid-template-columns:1.02fr .98fr;gap:44px}}
.pdp .gal .main{position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--tint);border:1px solid var(--line);border-radius:16px;
  aspect-ratio:1/1;overflow:hidden}
.pdp .gal .main img{max-width:88%;max-height:88%;width:auto;height:auto}
.pdp .gal .main .tag{position:absolute;top:12px;left:12px}
.pdp .gal .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.pdp .gal .thumbs button{aspect-ratio:1/1;background:var(--tint);border:1px solid var(--line);cursor:pointer;
  display:grid;place-items:center;padding:6px;transition:border-color .18s}
.pdp .gal .thumbs button.on{border:2px solid var(--ink)}
.pdp .gal .thumbs img{max-width:100%;max-height:100%;width:auto;height:auto}
.pdp h1{font-size:34px;margin:0 0 10px}
@media(min-width:768px){.pdp h1{font-size:40px}}
.pdp .meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:12px;color:var(--ink-2);margin-bottom:18px}
.pdp .meta b{color:var(--cta)}
.pdp .lager{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:700}
.pdp .lager::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.opts{margin:22px 0}
.opts .lab{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
/* Runde Ecken statt Kanten. Der aktive Zustand liegt als inset-Ring auf dem
   1px-Rand — mit border:2px waere die Kachel beim Umschalten um 1px gewandert
   und die ganze Reihe haette gezuckt. */
.chipbtn{position:relative;overflow:hidden;isolation:isolate;
  padding:11px 16px;border-radius:12px;
  border:1px solid var(--line-strong);background:#fff;cursor:pointer;
  font:700 12.5px/1.3 var(--f-sans);text-align:left;
  transition:border-color .18s,box-shadow .18s}
.chipbtn:hover{border-color:var(--cta)}
.chipbtn small{display:block;font-size:10px;color:var(--ink-2);margin-top:4px;font-weight:600}
.chipbtn.on{border-color:var(--sig-ink);box-shadow:inset 0 0 0 1px var(--sig-ink)}
.chipbtn.on small{color:rgba(11,11,13,.7)}
/* Ausverkauft-Kennzeichnung im Varianten-Chip (Betreiber 2026-09-29):
   kleines schwarzes Badge mit weisser Schrift oben rechts. */
.chipbtn.soldout{opacity:.62;cursor:default}
.chipbtn .chip-soldout{position:absolute;top:0;right:0;z-index:2;
  background:#0b0b0d;color:#fff;font:800 7.5px/1 var(--f-sans);
  letter-spacing:.06em;padding:3px 5px;border-radius:0 11px 0 8px;
  pointer-events:none;user-select:none}
.chipbtn:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.qtyrow{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 14px}
.qty{display:flex;align-items:center;border:1px solid var(--line-strong);background:#fff}
.qty button{width:44px;height:48px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--ink)}
.qty span{width:46px;text-align:center;font-weight:700}
.qtyrow .btn{flex:1 1 200px;justify-content:center}
.ubullets{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);font-size:13px}
.ubullets li{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px}
.ubullets svg{flex:none;margin-top:2px;color:var(--cta)}
.ptabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--ink)}
.ptabs button{padding:13px 20px;border:0;background:none;cursor:pointer;color:var(--ink-2);
  font:800 11.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em}
.ptabs button.on{background:var(--ink);color:#fff}
.tabpanel{display:none;padding-top:26px} .tabpanel.on{display:block}
.spectable{border:1px solid var(--line);background:#fff}
.spectable table{width:100%;border-collapse:collapse;font-size:13.5px}
.spectable td{padding:13px 18px;border-bottom:1px solid var(--line)}
.spectable tr:last-child td{border-bottom:0}
.spectable td:first-child{color:var(--ink-2);width:42%}
.spectable td:last-child{font-weight:700}

/* Rechner */
.calcgrid{display:grid;gap:26px;padding:40px 0}
/* Zwei gleich breite Spalten: Eingaben links, Ergebnis rechts. */
@media(min-width:1024px){.calcgrid{grid-template-columns:1fr 1fr;gap:24px;align-items:start}}
.panel{border:2px solid var(--ink);background:#fff;padding:24px}
.panel h2{font-size:20px;margin:0 0 20px}
.feldgrid{display:grid;gap:16px}
@media(min-width:640px){.feldgrid{grid-template-columns:1fr 1fr}}
.feld label{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-2);margin-bottom:7px}
.segmented{display:flex;flex-wrap:wrap;gap:6px}
.segmented button{flex:1 1 auto;min-width:54px;min-height:44px;padding:0 10px;cursor:pointer;
  border:1px solid var(--line-strong);background:#fff;font:700 13px/1 var(--f-mono);color:var(--ink);
  transition:border-color .18s,background-color .18s}
.segmented button.on{border:2px solid var(--ink);background:var(--sig)}
.ergebnis{background:var(--nav);color:#fff;padding:26px}
.ergebnis .k{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--sig);margin-bottom:12px}
.ergebnis .gross{font:800 46px/1 var(--f-display);font-style:italic;margin-bottom:6px}
.ergebnis .sub{font-size:12.5px;color:rgba(255,255,255,.65)}
.ergebnis .split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.15)}
.ergebnis .split b{display:block;font:800 19px/1 var(--f-display);font-style:italic;color:var(--sig)}
.ergebnis .split small{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.6)}
.spritze{margin-top:20px;padding:16px;background:var(--tint2)}
.spritze .skala{position:relative;height:34px;background:#fff;border:1px solid var(--line-strong);overflow:hidden}
.spritze .skala i{position:absolute;left:0;top:0;bottom:0;background:var(--sig);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.spritze .ticks{display:flex;justify-content:space-between;margin-top:7px;font:600 10px/1 var(--f-mono);color:var(--ink-2)}
.hinweis{display:flex;gap:11px;padding:15px;background:var(--lime-wash,#F5FEE2);border-left:4px solid var(--sig);
  font-size:12.5px;line-height:1.6;color:var(--ink-2);margin-top:18px}
.hinweis svg{flex:none;margin-top:1px;color:var(--ink)}

/* Artikel / Lexikon */
.artikel{display:grid;gap:34px;padding:40px 0}
@media(min-width:1024px){.artikel{grid-template-columns:1fr 280px;gap:44px;align-items:start}}
.toc{position:sticky;top:20px;border:1px solid var(--line);background:var(--tint);padding:18px}
.toc h2{font-size:9.5px;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.1em;
  margin:0 0 12px;color:var(--ink)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t;font-size:12.5px}
.toc li{counter-increment:t;border-bottom:1px solid var(--line)}
.toc li:last-child{border:0}
.toc a{display:block;padding:9px 0;color:var(--ink-2);text-decoration:none;transition:color .18s,transform .18s}
.toc a::before{content:counter(t) " · ";color:var(--cta);font-weight:700}
.toc a:hover{color:var(--cta);transform:translateX(3px)}

/* Blog */
.bloggrid{display:grid;gap:20px;padding:40px 0}
@media(min-width:768px){.bloggrid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.bloggrid{grid-template-columns:repeat(3,1fr)}}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .3s}
.post:hover{transform:translateY(-4px);border-color:var(--cta);box-shadow:0 22px 42px -26px rgba(19,16,32,.3)}
.post .bild{aspect-ratio:16/10;background:var(--tint);display:grid;place-items:center;color:var(--cta);
  border-bottom:1px solid var(--line)}
.post .inner{padding:18px;display:flex;flex-direction:column;flex:1}
.post .kat{align-self:flex-start;background:var(--sig);color:var(--sig-ink);padding:5px 10px;
  font:800 9px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.07em;margin-bottom:11px}
.post h2{font:700 17px/1.3 var(--f-display);letter-spacing:-.02em;margin:0 0 8px}
.post p{margin:0 0 14px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.post .datum{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  font:600 10.5px/1 var(--f-mono);color:var(--ink-2)}

/* Zertifikate */
.coafilter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:20px 0}
.coafilter .lab{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
/* Runde Knoepfe. Der aktive Zustand liegt als inset-Ring auf dem 1px-Rand —
   mit border:2px waere der Knopf beim Umschalten um 1px gewandert. */
.coafilter button{min-height:40px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line-strong);background:#fff;
  cursor:pointer;font:700 12px/1 var(--f-sans);
  transition:border-color .18s,background-color .18s,box-shadow .18s}
.coafilter button:hover{border-color:var(--cta)}
.coafilter button.on{border-color:var(--sig-ink);background:var(--sig);
  box-shadow:inset 0 0 0 1px var(--sig-ink)}


/* ==========================================================================
   BROTKRÜMEL — kein eigener Balken mehr
   Vorher lag zwischen Navigation und Banner ein grauer Streifen, der die
   Seite optisch zerschnitten hat. Jetzt sitzt der Pfad im Banner selbst
   bzw. als feine Zeile über dem ersten Modul.
   ========================================================================== */
.krume{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;
  font-size:11px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.55)}
.krume a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .18s}
.krume a:hover{color:var(--sig)}
.krumezeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:18px 0 0;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink-2)}
.krumezeile a{color:var(--ink-2);text-decoration:none;transition:color .18s}
.krumezeile a:hover{color:var(--cta)}

/* Bewertungszeile unter dem Produktnamen */
.bewertung{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px;font-size:12.5px}
.bewertung .sterne{display:flex;gap:2px;color:var(--cta)}
.bewertung b{font-weight:700}
.bewertung span{color:var(--ink-2)}

/* Staffelhinweis unter den Mengenoptionen */
.staffelhinweis{display:flex;gap:9px;align-items:flex-start;margin-top:10px;
  font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.staffelhinweis svg{flex:none;margin-top:1px;color:var(--cta)}

/* Vertrauenszeile auf der Produktseite */
.pdptrust{display:grid;gap:16px;padding:22px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-top:8px}
@media(min-width:640px){.pdptrust{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.pdptrust{grid-template-columns:repeat(4,1fr)}}
.pdptrust li{display:flex;gap:10px;align-items:flex-start;list-style:none}
.pdptrust .ic{display:grid;place-items:center;width:30px;height:30px;flex:none;
  background:var(--sig);color:var(--sig-ink)}
.pdptrust b{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:2px}
.pdptrust small{font-size:11px;color:var(--ink-2);line-height:1.45}


/* ==========================================================================
   AUFKLAPPER (FAQ)
   Mit <details>/<summary> gebaut: Der Antworttext steht dadurch im HTML und
   bleibt crawlbar, auch ohne JavaScript.
   ========================================================================== */
.fqliste{display:grid;gap:12px}
@media(min-width:1024px){.fqliste{grid-template-columns:1fr 1fr;align-items:start}}
.fq-auf{background:#fff;border:1px solid var(--line);transition:border-color .2s}
.fq-auf[open]{border-color:var(--cta)}
.fq-auf summary{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;
  list-style:none;font:700 14px/1.4 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.fq-auf summary::-webkit-details-marker{display:none}
.fq-auf summary::after{content:"";flex:none;margin-left:auto;width:11px;height:11px;
  border-right:2px solid var(--cta);border-bottom:2px solid var(--cta);
  transform:rotate(45deg) translateY(-2px);transition:transform .25s ease-out}
.fq-auf[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.fq-auf summary:hover{color:var(--cta)}
.fq-auf p{margin:0 18px 16px;font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.fq-auf p+p{margin-top:10px}


/* ==========================================================================
   PRODUKTKOPF — Badges, Kaufinformationen, Zahlungsarten
   ========================================================================== */
.pbadges{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.badge.sale{background:var(--sale);color:#fff}
.kaufinfo{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.kaufinfo li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
.kaufinfo li b{color:var(--ink);font-weight:700}
.kaufinfo .ic{display:grid;place-items:center;width:26px;height:26px;flex:none;
  background:var(--tint2);color:var(--cta)}
.zahlarten{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:13px 0;margin-bottom:4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zlabel{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.zicons{display:flex;flex-wrap:wrap;gap:6px}
.zi{display:inline-flex;align-items:center;height:26px;padding:0 9px;background:#fff;
  border:1px solid var(--line-strong);font:700 9.5px/1 var(--f-sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2)}


/* ==========================================================================
   KAUFSICHERHEIT — Vertrauenszusagen und Zahlungsarten
   Ein zusammenhängender Block statt loser Zeilen: gerahmt, mit Haarlinien
   getrennt, ruhige Typo-Hierarchie. Die Zahlungsarten stehen als echte
   Markenzeichen in gleich großen Kacheln.
   ========================================================================== */
.kaufsicherheit{border:1px solid var(--line);background:#fff;margin:20px 0 4px}
.ks-liste{list-style:none;margin:0;padding:0}
.ks-liste li{display:flex;align-items:center;gap:13px;padding:13px 16px;
  border-bottom:1px solid var(--line)}
.ks-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;
  background:var(--sig);color:var(--sig-ink)}
.ks-ic svg{width:17px;height:17px}
.ks-txt b{display:block;font-size:12.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.ks-txt small{display:block;font-size:11.5px;line-height:1.4;color:var(--ink-2);margin-top:1px}

.ks-zahlung{padding:14px 16px 16px;background:var(--tint)}
.ks-label{display:flex;align-items:center;gap:7px;margin:0 0 10px;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.ks-label svg{color:var(--cta)}
.ks-karten{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.zk{display:grid;place-items:center;width:52px;height:32px;background:#fff;
  border:1px solid var(--line-strong);transition:transform .2s ease-out,border-color .2s,box-shadow .2s}
.zk:hover{transform:translateY(-2px);border-color:var(--cta);
  box-shadow:0 8px 16px -10px rgba(19,16,32,.4)}
.zk svg{width:42px;height:14px;display:block}


/* ==========================================================================
   VERTRAUENSELEMENTE
   Janoshik als Prägestempel, DHL als flache Bandzeile — bewusst
   unterschiedliche Formensprache für unterschiedliche Aussagen.
   ========================================================================== */

/* --- Prägestempel -------------------------------------------------------- */
.siegelstempel{display:flex;align-items:center;gap:20px;margin:20px 0 12px;
  padding:20px 22px;background:var(--tint);border:1px solid var(--line)}
.st-marke{width:104px;height:104px;flex:none;transform:rotate(-7deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.siegelstempel:hover .st-marke{transform:rotate(-2deg) scale(1.03)}
.st-marke svg{width:100%;height:100%;display:block}
.st-text{margin:0;min-width:0}
.st-text b{display:block;font:700 16px/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.st-text small{display:block;margin-top:6px;font-size:12px;line-height:1.55;color:var(--ink-2)}

/* --- Versandband --------------------------------------------------------- */
.versandband{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 16px;
  background:#fff;border:1px solid var(--line)}
.vb-marke{flex:none;padding:5px 9px;background:#FFCC00;color:#D40511;
  font:700 13px/1 var(--f-sans);font-style:italic;letter-spacing:-.3px}
.vb-text{min-width:0}
.vb-text b{display:block;font-size:12.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.vb-text small{display:block;font-size:11.5px;color:var(--ink-2)}

/* --- Versandhinweis unter dem Kaufweg ------------------------------------ */
.versandzeile{display:flex;align-items:center;gap:9px;margin:10px 0 0;
  font-size:11.5px;line-height:1.45;color:var(--ink-2)}
.versandzeile svg{flex:none;color:var(--cta)}
.versandzeile b{color:var(--ink);font-weight:700}

/* --- Zahlungsarten ------------------------------------------------------- */
.zahlblock{margin:18px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.zahl-label{display:flex;align-items:center;gap:7px;margin:0 0 11px;
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.zahl-label svg{color:var(--cta)}
.zahl-karten{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.zk{display:grid;place-items:center;width:64px;height:40px;background:#fff;
  border:1px solid var(--line);transition:transform .2s ease-out,border-color .2s,box-shadow .2s}
.zk svg{width:54px;height:19px;display:block}
.zk:hover{transform:translateY(-2px);border-color:var(--line-strong);
  box-shadow:0 8px 18px -12px rgba(19,16,32,.45)}

@media(max-width:520px){
  .siegelstempel{flex-direction:column;align-items:flex-start;gap:14px}
  .st-marke{width:84px;height:84px}
}

/* ==========================================================================
   VERTRAUENSPAAR
   Prüfsiegel und Versandzusage in einem gemeinsamen Rahmen, getrennt durch
   eine Haarlinie. Zwei Aussagen, eine Einheit — dadurch wirkt es geordnet
   statt wie zwei lose Kästen. Der Stempel ist bewusst klein gehalten: er
   beglaubigt, er dominiert nicht.
   ========================================================================== */
.vertrauenspaar{margin:20px 0 14px;border:1px solid var(--line);background:#fff;overflow:hidden}

/* --- Zeile 1: Laborprüfung ---------------------------------------------- */
.vp-labor{display:flex;align-items:center;gap:13px;margin:0;padding:11px 15px;
  background:var(--tint);border-bottom:1px solid var(--line)}
.vp-stempel{width:40px;height:40px;flex:none;transform:rotate(-8deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.vertrauenspaar:hover .vp-stempel{transform:rotate(-3deg) scale(1.04)}
.vp-stempel svg{width:100%;height:100%;display:block}
.vp-labor figcaption{min-width:0}
.vp-labor b{display:block;font:700 12.5px/1.2 var(--f-display);letter-spacing:-.015em;color:var(--ink)}
.vp-labor span{display:block;margin-top:0;font-size:11.5px;font-weight:600;color:var(--cta)}
.vp-labor em{display:block;margin-top:3px;font:500 10px/1.35 var(--f-mono);
  font-style:normal;color:var(--ink-2)}

/* --- Zeile 2: Versand ---------------------------------------------------- */

/* --- DHL: offizielles Markenband, unverändert in Farbe und Proportion --- */
.vp-marke{flex:none;display:block;line-height:0}
.vp-marke img{display:block;height:29px;width:auto}
.vp-tempo{flex:none;display:grid;place-items:center;width:34px;color:var(--line-strong);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),color .25s}
.vp-tempo svg{width:26px;height:10px}
.vertrauenspaar:hover .vp-tempo{transform:translateX(4px);color:var(--cta)}
.vp-versand{display:flex;align-items:center;gap:14px;padding:12px 17px}



/* Geschwindigkeitsstreifen als Markenanmutung, sehr zurückgenommen */

.vp-vtext{flex:1;min-width:0}
.vp-vtext b{display:block;font-size:12.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.vp-vtext em{display:block;margin-top:1px;font-size:11.5px;font-style:normal;color:var(--ink-2)}


.vertrauenspaar:hover 

@media(max-width:520px){
  .vp-labor{gap:12px;padding:13px 14px}
  .vp-stempel{width:46px;height:46px}
  .vp-versand{padding:11px 14px;gap:11px}
}

/* --- Versandhinweis unter dem Kaufweg ------------------------------------ */
.versandzeile{display:flex;align-items:center;gap:9px;margin:10px 0 0;
  font-size:11.5px;line-height:1.45;color:var(--ink-2)}
.versandzeile svg{flex:none;color:var(--cta)}
.versandzeile b{color:var(--ink);font-weight:700}

/* --- Zahlungsarten ------------------------------------------------------- */
.zahlblock{margin:18px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.zahl-label{display:flex;align-items:center;gap:7px;margin:0 0 11px;
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.zahl-label svg{color:var(--cta)}
.zahl-karten{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.zk{display:grid;place-items:center;width:64px;height:40px;background:#fff;
  border:1px solid var(--line);transition:transform .2s ease-out,border-color .2s,box-shadow .2s}
.zk svg{width:54px;height:19px;display:block}
.zk:hover{transform:translateY(-2px);border-color:var(--line-strong);
  box-shadow:0 8px 18px -12px rgba(19,16,32,.45)}

/* ==========================================================================
   DHL-BADGE
   Gelbe Fläche, roter Kreis mit Blitz, Markenname in DHL-Rot — dasselbe
   Prinzip wie auf der Bestandsseite. Die Parallelogramm-Schräge macht es
   zu unserem Badge statt zu einer runden Standardpille.
   ========================================================================== */
.vp-versand{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 15px}
/* Form vom Versand-Chip im Hero uebernommen: runde Pille, Symbol im Kreis
   links. Nur die Farben sind die von DHL — Gelb als Flaeche, Rot fuer Kreis
   und Wortmarke, damit auf einen Blick klar ist, um welchen Dienst es geht. */
.dhlbadge{display:inline-flex;align-items:center;gap:8px;
  padding:5px 15px 5px 5px;border-radius:999px;
  background:#FFCC00;box-shadow:0 10px 22px -13px rgba(212,5,17,.55);
  transition:transform .22s ease-out,filter .22s}
.dhlbadge:hover{transform:translateY(-1px);filter:brightness(1.04)}
.dhlbadge-ic{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:999px;background:#D40511}
.dhlbadge-ic svg{width:15px;height:15px;display:block}
.dhlbadge-t{font-size:11px;font-weight:700;letter-spacing:.04em;color:#1A1A1A;
  text-transform:uppercase;white-space:nowrap}
.dhlbadge-t b{font-weight:800;letter-spacing:.06em;color:#D40511}
.dhlbadge-zusatz{font-size:11px;color:var(--ink-2)}

/* ==========================================================================
   CROSS-SELLING · LEXIKON-TEASER · CTA-BAND
   Drei Bausteine, die vorher nur als Rohtext existierten. Sie teilen die
   Formensprache der Seite: Haarlinien, Schräge als Akzent, Lime als Fläche.
   ========================================================================== */
/* Vier feste Spalten statt auto-fill: mit auto-fill entstanden bei breiten
   Schirmen fuenf Spuren und die vier Karten blieben schmal. Mobil stehen
   zwei nebeneinander — untereinander waere die Reihe vier Bildschirme lang. */
.crossgrid{display:grid;gap:12px;list-style:none;margin:0;padding:0;
  grid-template-columns:1fr 1fr}
@media(min-width:1024px){.crossgrid{grid-template-columns:repeat(4,1fr);gap:16px}}
/* Auf zwei Spalten bleiben je Karte nur rund 150px — Polster und Satz
   entsprechend knapper, sonst bricht jede Zeile. */
@media(max-width:559px){
  .ck-txt{padding:12px 12px 13px;gap:4px}
  .ck-rein{font-size:8px;padding:4px 7px}
  .ck-txt b{font-size:13px}
  .ck-txt small{font-size:11.5px}
  .ck-preis{gap:6px;margin:6px 0 11px;flex-wrap:wrap}
  .ck-preis s{font-size:11px}
  .ck-preis b{font-size:15px}
  .ck-cta{min-height:40px;padding:0 10px;font-size:10px;letter-spacing:.04em;gap:6px}}
/* min-width:0 — sonst zieht der laengste Inhalt (Preiszeile, Knopf) die
   Rasterspur ueber ihren Anteil hinaus und die Seite scrollt seitlich. */
.crossgrid > li{min-width:0}
.ck{display:flex;flex-direction:column;height:100%;min-width:0;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:#fff;
  text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .25s,transform .25s ease-out}
.ck:hover{border-color:var(--cta);transform:translateY(-3px);
  box-shadow:0 18px 34px -22px rgba(19,16,32,.55)}
/* Weisser Grund ohne Trennlinie — Bild und Text gehen ineinander ueber. */
.ck-bild{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  background:#fff;overflow:hidden}
.ck-bild img{max-width:80%;max-height:80%;width:auto;height:auto;display:block;
  transition:transform .35s ease-out}
.ck:hover .ck-bild img{transform:scale(1.05)}
.ck-txt{display:flex;flex-direction:column;gap:5px;padding:16px 17px 18px;flex:1}
.ck-rein{align-self:flex-start;font:800 8.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.1em;color:var(--sig-ink);background:var(--sig);
  border-radius:999px;padding:5px 9px;margin-bottom:4px}
.ck-txt b{font-size:15px;font-weight:700;line-height:1.25;color:var(--ink)}
.ck-txt small{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.ck-preis{display:flex;align-items:baseline;gap:8px;margin:7px 0 14px}
.ck-preis s{font-size:12px;color:var(--sale);text-decoration-thickness:1px}
.ck-preis b{font-size:17px;font-weight:800;color:var(--ink)}
/* Der Verweis ist ein eigener Knopf, mittig und ueber die ganze Kartenbreite.
   margin-top:auto haelt ihn am Kartenboden, damit die Knoepfe aller vier
   Karten auf einer Linie stehen, auch wenn die Beschreibungen verschieden
   lang sind. Spitze Kanten wie sonst im Stil. */
.ck-cta{position:relative;overflow:hidden;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:auto;min-height:44px;padding:0 16px;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  background:var(--sig);color:var(--sig-ink);
  font:800 11px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;
  transition:color .18s}
/* Beim Ueberfahren laeuft das Lila von links ein — dieselbe Bewegung wie beim
   Warenkorb-Knopf der Produktkacheln. Die Schrift wird weiss, sonst waere sie
   auf der dunklen Flaeche kaum zu lesen. */
.ck-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cta);
  transform:translateX(-101%);transition:transform .36s cubic-bezier(.2,.7,.2,1)}
.ck:hover .ck-cta{color:#fff}
.ck:hover .ck-cta::before{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){
  .ck-cta::before{transition:none}}
.ck-cta em{font-style:normal;display:inline-block;transition:transform .2s ease-out}
.ck:hover .ck-cta em{transform:translateX(3px)}

/* Eine Spur groesser als zuvor — der Teaser stand zwischen zwei kraeftigen
   Abschnitten und wirkte daneben zu leicht. */
.lexteaser{display:flex;align-items:center;gap:22px;padding:26px 28px;
  border-radius:16px;
  border:1px solid var(--line);background:var(--tint);text-decoration:none;color:inherit;
  transition:border-color .2s,background .2s,transform .25s ease-out}
.lexteaser:hover{border-color:var(--cta);background:var(--tint2);transform:translateY(-2px)}
.lex-ic{display:grid;place-items:center;width:50px;height:50px;flex:none;
  border-radius:14px;background:var(--cta);color:#fff}
.lex-ic svg{width:25px;height:25px}
.lex-txt{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.lex-txt b{font-size:16.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.lex-txt small{font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.lex-cta{flex:none;display:inline-flex;align-items:center;gap:8px;padding:14px 22px;
  border-radius:999px;
  background:var(--cta);color:#fff;font:700 11.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.07em;transition:background .2s}
.lexteaser:hover .lex-cta{background:var(--cta-hover)}
.lex-cta em{font-style:normal;display:inline-block;transition:transform .2s ease-out}
.lexteaser:hover .lex-cta em{transform:translateX(3px)}
/* Unter 560px passt der Knopf nicht mehr neben Symbol und Text — bei 360px
   ragte er 1,7px ueber den Rand und die Seite scrollte seitlich. Er rutscht
   dort auf eine eigene Zeile ueber die volle Breite. */
@media(max-width:559px){
  .lexteaser{flex-wrap:wrap;gap:14px 16px;padding:20px}
  .lex-txt{flex:1 1 60%;min-width:0}
  .lex-cta{flex:1 1 100%;justify-content:center}}

/* --------------------------------------------------------------------------
   CTA-BAND ueber dem Footer
   Es stand vorher auf demselben Schwarz wie der Footer und ging darin unter.
   Jetzt traegt es die Signalfarbe: ein klarer Schnitt zwischen Inhalt und
   Fusszeile. Laeuft in derselben breiten Spur wie der Footer.
   -------------------------------------------------------------------------- */
.ctaband{position:relative;overflow:hidden;padding:40px 0;
  background:linear-gradient(102deg,#B6FF2E 0%,var(--sig) 46%,#8FD400 100%);
  color:var(--nav)}
/* Feines Raster als Tiefe, sehr zurueckgenommen */
.ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(11,11,13,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,11,13,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 82% 50%,#000,transparent 78%);
  mask-image:radial-gradient(120% 90% at 82% 50%,#000,transparent 78%)}
.ctaband .fwrap{position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 30px}
/* Der Textblock darf schrumpfen, sonst rutscht der Knopf schon bei 1024px
   unter die Zeile — im Bestand stehen beide bis hinunter zum Tablet nebeneinander. */
.cb-txt{flex:1 1 280px;min-width:0}
.cb-txt h2{margin:0 0 7px;font-size:26px;line-height:1.15;color:var(--nav)}
@media(min-width:1024px){.cb-txt h2{font-size:32px}}
.cb-txt p{margin:0;font-size:13.5px;color:rgba(11,11,13,.72)}
@media(min-width:1024px){.cb-txt p{font-size:14.5px}}
/* Dunkler Knopf auf der hellen Flaeche — spitze Ecke wie sonst im Stil */
.ctaband .cb-cta{display:inline-flex;align-items:center;gap:10px;flex:none;
  min-height:54px;padding:0 30px;border:0;border-radius:0;
  background:var(--nav);color:#fff;text-decoration:none;
  font:800 12px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  transition:background .18s,transform .18s ease-out}
.ctaband .cb-cta:hover{background:var(--cta);transform:translateY(-2px)}
.ctaband .cb-cta:focus-visible{outline:3px solid var(--nav);outline-offset:4px}
.ctaband .cb-cta svg{flex:none}
@media(max-width:640px){
  .ctaband{padding:30px 0}
  .cb-txt h2{font-size:21px}
  .ctaband .cb-cta{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.ctaband .cb-cta{transition:none}
  .ctaband .cb-cta:hover{transform:none}}

/* Tool-Kacheln: Pfeil folgt dem Zeiger */
.tool-pfeil{margin-left:auto;font-size:14px;color:var(--cta);
  transition:transform .2s ease-out}
.tool:hover .tool-pfeil{transform:translateX(4px)}

/* Weiterführende Links — Textzeilen, kein Kachelraster */
/* Eine Spur groesser — die Zeilen standen sehr eng und wirkten neben dem
   Lexikon-Teaser darueber wie eine Fussnote. */
.weiterlinks{display:grid;gap:3px 30px;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.weiterlinks a{display:flex;align-items:baseline;gap:11px;padding:13px 3px;font-size:14px;
  color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);
  transition:color .18s,border-color .18s}
.weiterlinks a:hover{color:var(--cta);border-color:var(--line-strong)}
.weiterlinks em{font-style:normal;color:var(--cta);flex:none;
  transition:transform .2s ease-out}
.weiterlinks a:hover em{transform:translateX(3px)}

/* Bewertungszeile über den Zahlungsarten */
.bewertzeile{display:flex;align-items:center;gap:7px;margin:0 0 9px;
  font-size:11.5px;color:var(--ink-2)}
.bewertzeile b{font-size:12.5px;font-weight:800;color:var(--ink)}
.bz-sterne{display:inline-flex;gap:1px;color:#F5B50A}
.bz-sterne svg{display:block}

/* Produkt-Disclaimer am Ende des Fließtexts */
.pdisc{margin-top:18px;padding:13px 15px;border-left:3px solid var(--line-strong);
  background:var(--tint);font-size:12px;line-height:1.6;color:var(--ink-2)}

/* ==========================================================================
   FOOTER — Anordnung nach dem Bestand
   Markenspalte mit Support und Newsletter, drei Linkspalten, Tools als
   Kacheln, darunter Vertrauenszeile, Rechtliches und die Lexikon-Leiste.
   Steht seit dem Umbau statisch im HTML jeder Seite: entstuende er per
   JavaScript, fehlten seine 38 internen Links im Quelltext.
   ========================================================================== */
footer.site{position:relative;padding-top:52px}
/* Eigene, deutlich breitere Huelle — mit der 1180px-Spur wirkte der Footer
   zusammengepresst. */
.fwrap{max-width:1680px;margin:0 auto;padding:0 20px}
@media(min-width:640px){.fwrap{padding:0 40px}}
@media(min-width:1024px){.fwrap{padding:0 64px}}
/* Lichtkante als Abschluss nach oben, laeuft nach rechts aus */
footer.site::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,var(--sig),rgba(168,252,3,.28) 26%,rgba(255,255,255,.06) 62%,transparent)}
footer.site::after{content:"";position:absolute;top:0;left:0;width:min(680px,55%);height:300px;
  pointer-events:none;z-index:0;
  background:radial-gradient(58% 70% at 12% 0,rgba(168,252,3,.05),transparent 72%)}
footer.site > .fwrap{position:relative;z-index:1}

footer.site .cols{display:grid;gap:34px 30px;align-content:start;
  grid-template-columns:1fr}
/* Zwischen 640 und 1100px liegt die Markenspalte ueber den Listen: als
   schmale Rasterspalte waere das Newsletter-Feld auf unter 100px gequetscht. */
@media(min-width:640px){
  footer.site .cols{grid-template-columns:1fr 1fr}
  footer.site .fmarke{grid-column:1/-1}}
@media(min-width:900px){footer.site .cols{grid-template-columns:1fr 1fr 1fr}}
@media(min-width:1100px){
  footer.site .cols{grid-template-columns:1.9fr 1fr 1fr 1fr 1.5fr;gap:40px}
  footer.site .fmarke{grid-column:auto}
  /* Fuenf Spalten passen hier gerade so — die Kacheln stehen daher noch
     untereinander, sonst bliebe fuer Titel und Zeile kein Platz. */
  .fwerk ul{grid-template-columns:1fr}}
@media(min-width:1500px){
  footer.site .cols{grid-template-columns:1.55fr 1fr 1fr 1fr 1.85fr}
  .fwerk ul{grid-template-columns:1fr 1fr}}

/* --- Markenspalte --- */
.fmarke-logo{display:block;margin-bottom:16px}
footer.site .fmarke img{max-width:200px;width:100%;height:auto;display:block}
.fbeschr{margin:0 0 16px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.62);max-width:36ch}
.fsupport{margin:0 0 16px;font-size:13px;color:rgba(255,255,255,.62)}
.fsupport a{color:#fff;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(168,252,3,.5);transition:border-color .18s}
.fsupport a:hover{border-color:var(--sig)}
.fmail{display:grid;place-items:center;width:46px;height:46px;margin:0 0 24px;
  border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.8);transition:background .18s,border-color .18s,color .18s}
.fmail svg{width:20px;height:20px}
.fmail:hover{background:rgba(168,252,3,.10);border-color:rgba(168,252,3,.4);color:var(--sig)}
.fmail:focus-visible{outline:2px solid var(--sig);outline-offset:3px}

footer.site .fnews h2{margin:0 0 5px;font:700 14.5px/1.2 var(--f-sans);
  font-style:normal;color:#fff;text-transform:none;letter-spacing:0}
.fnews p{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.6)}
/* Gleiches Feld wie im Newsletter-Abschnitt, nur eine Nummer kleiner */
.fnewsform{max-width:330px}
.fnewsform input{min-height:44px;font-size:13px;padding:0 24px 0 14px}
.fnewsform button{min-height:44px;padding:0 18px 0 24px;font-size:11px}

/* --- Linkspalten --- */
footer.site nav h2{display:flex;align-items:center;gap:8px;
  margin:0 0 16px;padding-bottom:11px;font:800 10px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.12em;color:var(--sig);
  border-bottom:1px solid rgba(168,252,3,.22)}
footer.site nav h2::before{content:"";width:5px;height:5px;flex:none;background:var(--sig)}
footer.site nav ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.site nav a{display:inline-block;font-size:13px;
  color:rgba(255,255,255,.68);text-decoration:none;
  transition:color .18s,transform .18s ease-out}
footer.site nav a:hover{color:#fff;transform:translateX(3px)}
footer.site nav a:focus-visible{outline:2px solid var(--sig);outline-offset:3px}

/* --- Tools & Rechner als Kacheln, zweispaltig --- */
.fwerk ul{gap:10px}
@media(min-width:520px) and (max-width:1099px){.fwerk ul{grid-template-columns:1fr 1fr}}
.fwerk a{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.2);
  transition:background .18s,border-color .18s,transform .18s ease-out}
.fwerk a:hover{background:rgba(255,255,255,.07);border-color:rgba(168,252,3,.3);
  transform:translateX(0) translateY(-2px)}
/* Runde Ecken wie im Bestand, gleiche Form wie die Vertrauens-Icons */
.fw-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;
  border-radius:10px;
  background:rgba(168,252,3,.12);border:1px solid rgba(168,252,3,.26);color:var(--sig)}
.fw-ic svg{width:18px;height:18px}
.fw-t{min-width:0}
.fw-t b{display:block;font-weight:700;font-size:12.5px;line-height:1.25;color:#fff}
.fw-t small{display:block;font-size:11px;line-height:1.3;margin-top:2px;
  color:rgba(255,255,255,.48);transition:color .18s}
.fwerk a:hover .fw-t small{color:rgba(255,255,255,.66)}

/* --- Vertrauenszeile: je Merkmal ein eigenes Icon --- */
/* footer.site ul{margin:0;padding:0} ist spezifischer als .fvertrauen —
   ohne den Elternselektor blieb die Innenkante wirkungslos und die Icons
   klebten an der oberen Trennlinie. */
footer.site .fvertrauen{display:grid;gap:14px 18px;list-style:none;
  margin:40px 0 0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.11);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* footer.site li{margin-bottom:8px} machte die Rasterzeile 8px hoeher als
   die Eintraege — dadurch sassen sie nicht mittig zwischen den Linien. */
footer.site .fvertrauen li{margin:0;display:flex;align-items:center;gap:11px;
  font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.78)}
/* Runde Ecken wie im Bestand — hier bewusst nicht die schraege Form */
.fv-ic{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:11px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);color:var(--sig)}
.fv-ic svg{width:18px;height:18px}

.fschluss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 20px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.11)}
.fschluss p{margin:0;font-size:12px;color:rgba(255,255,255,.5)}
.fschluss nav{flex:1}
footer.site .fschluss nav ul{display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:6px 18px;list-style:none;margin:0;padding:0}
.fschluss a{font-size:12px;color:rgba(255,255,255,.62);text-decoration:none;transition:color .18s}
.fschluss a:hover{color:#fff}
/* ==========================================================================
   WARENKORB-SCHUBLADE mit Geschenkleiter
   ========================================================================== */
/* display:flex/block schlaegt die Standardregel fuer [hidden] — deshalb explizit */
.cdrawer[hidden],.cdmask[hidden]{display:none}
.cdmask{position:fixed;inset:0;z-index:110;background:rgba(11,11,13,.5);
  backdrop-filter:blur(2px);animation:cdEin .22s ease-out}
@keyframes cdEin{from{opacity:0}to{opacity:1}}
/* Lage und Einblendung. Aussehen und Masse stehen im Schubladenblock am
   Dateiende — die frueheren .cd-gifts-Regeln sind dort abgeloest und
   wurden entfernt: .cd-gifts li span{flex:1} liess sonst den Icon-Kreis
   auf 60px aufgehen und quetschte den Beschreibungstext. */
.cdrawer{position:fixed;top:0;right:0;bottom:0;z-index:111;
  box-shadow:-24px 0 60px -30px rgba(11,11,13,.5);
  animation:cdRein .3s cubic-bezier(.4,0,.2,1)}
@keyframes cdRein{from{transform:translateX(100%)}to{transform:none}}
body.cd-offen{overflow:hidden}

.cd-leer{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:15px;padding:30px 20px;text-align:center}
.cd-leer p{margin:0;font-size:13.5px;color:var(--ink-2)}

/* Lexikon-Promozeile unter dem Footer */
.lexpromo{background:#000;margin-top:16px;
  border-top:1px solid rgba(255,255,255,.09)}
.lexpromo a{display:block;padding:15px 16px;text-align:center;
  font-size:12px;color:rgba(255,255,255,.62);text-decoration:none;
  transition:background .22s,color .18s}
.lexpromo a:hover{background:rgba(168,252,3,.055);color:rgba(255,255,255,.85)}
.lexpromo a:focus-visible{outline:2px solid var(--sig);outline-offset:-3px}
.lexpromo b{color:#fff;font-weight:700}
.lexpromo em{display:inline-block;font-style:normal;color:var(--sig);font-weight:700;
  transition:transform .2s ease-out}
.lexpromo a:hover em{transform:translateX(3px)}

@media(prefers-reduced-motion:reduce){
  footer.site nav a,.lexpromo a,.lexpromo em{transition:none}
  footer.site nav a:hover,.lexpromo a:hover em{transform:none}}

/* ==========================================================================
   PEN-HERO
   Der Pen dosiert per Klick — das trägt der Abschnitt als Motiv: ein
   Zählwerk rastet durch die Schritte, ein Lime-Strahl liegt im Winkel des
   Pens und greift die Parallelogramm-Schräge der Seite auf.
   ========================================================================== */
.penhero{position:relative;overflow:hidden;background:var(--nav);color:#fff;
  padding:74px 0 66px;isolation:isolate}
/* Der Abschnitt beginnt hart auf Schwarz nach dem hellen Bewertungsblock —
   die Haarlinie setzt den Schnitt, wie beim Footer. */
.penhero::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  z-index:3;pointer-events:none;
  background:linear-gradient(90deg,var(--sig),rgba(168,252,3,.28) 26%,rgba(255,255,255,.06) 62%,transparent)}
.ph-strahl{position:absolute;z-index:0;top:-40%;left:46%;width:26%;height:190%;
  background:linear-gradient(180deg,rgba(168,252,3,0) 0%,rgba(168,252,3,.13) 42%,
    rgba(109,52,214,.10) 68%,rgba(168,252,3,0) 100%);
  transform:rotate(34deg);filter:blur(38px);pointer-events:none}
.ph-raster{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(115% 85% at 68% 45%,#000 20%,transparent 78%)}
.ph-in{position:relative;z-index:1;display:grid;gap:42px;align-items:center}
@media(min-width:1000px){.ph-in{grid-template-columns:1.02fr .98fr;gap:36px}}

.ph-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;
  font:800 9.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.13em;
  color:var(--sig)}
.ph-punkt{width:7px;height:7px;background:var(--sig);border-radius:50%;
  box-shadow:0 0 0 0 rgba(168,252,3,.65);animation:phPuls 2.4s ease-out infinite}
@keyframes phPuls{0%{box-shadow:0 0 0 0 rgba(168,252,3,.6)}
  70%{box-shadow:0 0 0 11px rgba(168,252,3,0)}100%{box-shadow:0 0 0 0 rgba(168,252,3,0)}}

.penhero h2{margin:0 0 16px;font-size:clamp(28px,3.4vw,44px);line-height:1.08;color:#fff}
.penhero h2 em{font-style:italic;color:var(--sig)}
.ph-lead{margin:0 0 26px;max-width:52ch;font-size:14.5px;line-height:1.72;
  color:rgba(255,255,255,.7)}

.ph-merkmale{display:grid;gap:15px 22px;list-style:none;margin:0 0 30px;padding:0}

/* --------------------------------------------------------------------------
   Preis- und Verfuegbarkeitszeile ueber dem CTA
   Bisher musste man erst auf die Produktseite, um Preis und Lieferzeit zu
   erfahren. Die Werte stehen hier fest im Markup — der Techniker haengt sie
   spaeter an dieselbe Quelle wie die Produktkarten.
   -------------------------------------------------------------------------- */
.ph-preis{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin:0 0 20px;padding:14px 16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.ph-p-wert{display:flex;align-items:baseline;gap:9px}
.ph-p-wert b{font:800 24px/1 var(--f-display);font-style:italic;color:#fff;
  letter-spacing:-.02em}
.ph-p-wert s{font-size:12.5px;color:rgba(255,255,255,.42)}
.ph-p-wert em{font-style:normal;padding:4px 9px;
  background:var(--sig);color:var(--sig-ink);
  font:800 10px/1 var(--f-sans);letter-spacing:.04em}
.ph-p-lager{display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:rgba(255,255,255,.8)}
.ph-p-lager i{width:7px;height:7px;flex:none;border-radius:999px;
  background:var(--sig);box-shadow:0 0 0 3px rgba(168,252,3,.18)}
/* Eigene Zeile: rechtsbuendig neben dem Lagerhinweis brach der Satz um und
   stand dann verloren am rechten Rand. */
.ph-p-mwst{flex-basis:100%;font-size:10.5px;color:rgba(255,255,255,.4)}
@media(max-width:520px){.ph-preis{gap:7px 12px}}
@media(min-width:640px){.ph-merkmale{grid-template-columns:1fr 1fr}}
.ph-merkmale li{display:flex;align-items:flex-start;gap:12px}
/* Runde Form statt der schraegen — der Rand laeuft hier ohne Kniff um die
   ganze Kachel, weil kein clip-path im Spiel ist. */
.ph-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;
  border-radius:11px;color:var(--sig);
  background:rgba(168,252,3,.10);border:1px solid rgba(168,252,3,.30)}
.ph-ic svg{width:18px;height:18px;display:block}

/* --------------------------------------------------------------------------
   Neuheiten-Siegel ueber dem Pen
   Ein Stempel statt eines Etiketts: der Schriftring dreht sich langsam um
   einen ruhenden Kern. Der Vorspann nennt die Neuheit bereits im Text,
   deshalb aria-hidden — Vorleseprogramme sollen sie nicht doppeln.
   -------------------------------------------------------------------------- */
.ph-neu{position:absolute;z-index:3;top:3%;left:1%;
  width:116px;height:116px;display:grid;place-items:center;pointer-events:none}
/* Weicher Schein, damit das Siegel nicht flach auf dem Raster klebt */
.ph-neu::before{content:"";position:absolute;inset:-18%;border-radius:999px;
  background:radial-gradient(closest-side,rgba(168,252,3,.22),transparent 70%)}
.ph-neu-ring{position:absolute;inset:0;width:100%;height:100%;
  fill:var(--sig);font-family:var(--f-sans);font-size:10.6px;font-weight:800;
  animation:ph-neu-dreh 20s linear infinite;transform-origin:50% 50%}
.ph-neu-kern{position:relative;display:grid;place-items:center;
  width:54px;height:54px;border-radius:999px;
  background:var(--sig);color:var(--sig-ink);
  box-shadow:0 0 0 6px rgba(168,252,3,.12),0 8px 24px -8px rgba(168,252,3,.55)}
.ph-neu-kern svg{width:23px;height:23px;
  animation:ph-neu-funkeln 3.4s ease-in-out infinite}
@keyframes ph-neu-dreh{to{transform:rotate(360deg)}}
@keyframes ph-neu-funkeln{0%,72%,100%{transform:scale(1);opacity:1}
  84%{transform:scale(1.14);opacity:.82}}
@media(max-width:639px){
  .ph-neu{width:92px;height:92px;top:1%}
  .ph-neu-kern{width:44px;height:44px}
  .ph-neu-kern svg{width:19px;height:19px}}
@media(prefers-reduced-motion:reduce){
  .ph-neu-ring,.ph-neu-kern svg{animation:none}}
.ph-mt b{display:block;font-size:12.5px;font-weight:700;line-height:1.3;color:#fff}
.ph-mt small{display:block;margin-top:3px;font-size:11.5px;line-height:1.5;
  color:rgba(255,255,255,.56)}

.ph-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-bottom:18px}
.ph-zweit{font:700 11px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.78);text-decoration:none;transition:color .18s}
.ph-zweit:hover{color:#fff}
.ph-zweit em{font-style:normal;display:inline-block;transition:transform .2s ease-out}
.ph-zweit:hover em{transform:translateX(3px)}
.ph-fuss{margin:0;font-size:10.5px;line-height:1.6;color:rgba(255,255,255,.38);max-width:46ch}

/* ---------------------------------------------------------------- Bühne */
.ph-buehne{position:relative;display:grid;place-items:center;min-height:390px}
.ph-glanz{position:absolute;z-index:0;width:72%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle,rgba(168,252,3,.2) 0%,rgba(109,52,214,.13) 42%,transparent 68%);
  filter:blur(26px)}
.ph-boden{position:absolute;z-index:0;bottom:12%;width:52%;height:16px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.55) 0%,transparent 70%);
  filter:blur(7px);animation:phBoden 8.2s linear infinite}
@keyframes phBoden{0%,100%{transform:scaleX(1);opacity:.55}50%{transform:scaleX(.9);opacity:.4}}

.ph-schweb{position:relative;z-index:1;display:block;width:min(80%,428px);
  animation:phRein 1s cubic-bezier(.2,.8,.25,1) both, phHeben 8.2s 1s linear infinite}
.ph-neig{display:block;animation:phNeigen 11.4s 1s linear infinite}
.ph-schweb img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.42))}
@keyframes phRein{from{opacity:0;transform:translateY(26px) scale(.96)}
  to{opacity:1;transform:none}}
@keyframes phHeben{0%{transform:translateY(0)}25%{transform:translateY(-9px)}
  50%{transform:translateY(0)}75%{transform:translateY(7px)}100%{transform:translateY(0)}}
@keyframes phNeigen{0%{transform:rotate(0deg)}25%{transform:rotate(1.5deg)}
  50%{transform:rotate(0deg)}75%{transform:rotate(-1.3deg)}100%{transform:rotate(0deg)}}

/* -------------------------------------------------------------- Zählwerk */
.ph-zaehlwerk{position:absolute;z-index:2;bottom:4%;right:1%;display:grid;gap:5px;
  padding:14px 16px 13px;min-width:132px;
  background:rgba(11,11,13,.72);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(7px);
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
/* Leitung vom Dosisfenster zum Zählwerk — erklärt den Bezug des Werts,
   ohne den Pen mit einer Beschriftung zu belasten. */
.ph-leitung{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  pointer-events:none;overflow:visible}
@media(max-width:999px){.ph-leitung{display:none}}

.ph-zw-kopf{font:800 8.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.13em;
  color:rgba(255,255,255,.5)}
.ph-zw-wert{display:flex;align-items:baseline;gap:4px}
.ph-zw-wert b{font:800 30px/1 var(--f-mono);color:var(--sig);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ph-zw-wert i{font-style:normal;font-size:11px;color:rgba(255,255,255,.55)}
.ph-zw-skala{display:flex;gap:3px;margin-top:2px}
.ph-zw-skala i{display:block;width:9px;height:3px;background:rgba(255,255,255,.16);
  transition:background .18s}
.ph-zw-skala i.an{background:var(--sig)}
/* Waehrend das Rad faehrt, zuckt die Ziffer kurz — sonst wechselt der Wert
   lautlos und niemand merkt, dass sich hier etwas einstellen laesst. */
.ph-zaehlwerk.dreht .ph-zw-wert b{animation:ph-tick .13s steps(2) infinite}
@keyframes ph-tick{0%{transform:translateY(0);opacity:1}
  50%{transform:translateY(-1px);opacity:.72}
  100%{transform:translateY(0);opacity:1}}
.ph-zaehlwerk.dreht{box-shadow:0 0 0 1px rgba(168,252,3,.35)}
.ph-zw-fuss{font-size:9.5px;color:rgba(255,255,255,.4)}

@media(max-width:999px){
  .penhero{padding:56px 0 62px}
  .ph-buehne{min-height:300px;order:-1}
  .ph-zaehlwerk{bottom:0;right:0;min-width:112px;padding:11px 13px}
  .ph-zw-wert b{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .ph-schweb,.ph-neig,.ph-boden,.ph-punkt{animation:none}
}

/* Fuß der Schublade: der Weg zur vollständigen Warenkorbseite */
.cd-fuss{margin-top:auto;padding:15px 20px 18px;border-top:1px solid var(--line);
  background:var(--tint)}
.cd-zum-korb{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;font:800 11px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.07em;color:var(--cta);text-decoration:none;
  border:1px solid var(--line-strong);background:#fff;transition:border-color .18s,color .18s}
.cd-zum-korb:hover{border-color:var(--cta);color:var(--cta-hover)}
.cd-zum-korb em{font-style:normal;display:inline-block;transition:transform .2s ease-out}
.cd-zum-korb:hover em{transform:translateX(3px)}
.cd-leer{flex:0 1 auto}

/* Ausverkauft: Kaufweg sichtbar gesperrt statt weggelassen */
.btn.ausverkauft,.btn[disabled]{background:var(--line-strong);color:var(--ink-2);
  cursor:not-allowed;pointer-events:none}
.lager.aus{color:var(--sale)}
.lager.aus::before{background:var(--sale)}

/* ==========================================================================
   MENGENSTUFEN
   Je Stufe drei Angaben: Menge, Rabatt, Stückpreis samt Ersparnis. Als
   Kacheln statt als Satz, weil man sie vergleicht statt liest.
   ========================================================================== */
.staffel{margin:14px 0 4px}
.staffel-kopf{margin:0 0 8px;font:800 9.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.11em;color:var(--ink-2)}
.stufen{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.stufe{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:11px 13px;border-radius:12px;
  background:#fff;border:1px solid var(--line);cursor:pointer;
  text-align:left;font:inherit;
  transition:border-color .18s,background .18s,box-shadow .18s,transform .2s ease-out}
.stufe:hover{border-color:var(--cta);transform:translateY(-2px)}
.stufe{position:relative;overflow:hidden;isolation:isolate}
.stufe.on{border-color:var(--sig-ink);box-shadow:inset 0 0 0 1px var(--sig-ink)}
.stufe:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.stufe b{font-size:14px;font-weight:800;color:var(--ink);line-height:1.2}
.stufe em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;
  color:var(--sig-ink);background:var(--sig);border-radius:999px;
  padding:3px 8px;margin:3px 0 4px}
.stufe.on em{background:var(--sig-ink);color:var(--sig)}
.stufe .stufe-preise{font-size:10.5px;line-height:1.35;color:var(--ink-2)}
.stufe.on .stufe-preise{color:rgba(11,11,13,.72)}
.staffel-fuss{display:flex;align-items:flex-start;gap:7px;margin:9px 0 0;
  font-size:11px;line-height:1.5;color:var(--ink-2)}

/* ==========================================================================
   PRODUKTE-MENÜ: Suchfeld, Bestseller-Marker, gestaffeltes Einblenden
   ========================================================================== */
.visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#mega-produkte .msuche{position:relative;display:flex;align-items:center;gap:8px;
  margin:0 0 18px}
.msuche-ic{position:absolute;left:13px;width:16px;height:16px;color:var(--ink-2);
  pointer-events:none}
#mega-produkte .msuche input{flex:1;min-width:0;height:44px;padding:0 14px 0 38px;
  font:400 13px/1 var(--f-sans);color:var(--ink);text-transform:none;letter-spacing:0;
  background:var(--tint);border:1px solid var(--line);outline:none;
  transition:border-color .18s,background .18s}
#mega-produkte .msuche input::placeholder{color:var(--ink-2);text-transform:none}
#mega-produkte .msuche input:focus{border-color:var(--cta);background:#fff}
#mega-produkte .msuche button{flex:none;height:44px;padding:0 18px;border:0;cursor:pointer;
  background:var(--cta);color:var(--cta-ink);
  font:800 10.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.07em;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  transition:background .18s}
#mega-produkte .msuche button:hover{background:var(--cta-hover)}

/* Bestseller-Marker: Flamme in Lime, ohne Emoji */

.hot{width:13px;height:13px;flex:none;fill:var(--cta);
  transition:fill .16s,transform .16s ease-out}


/* Gestaffeltes Einblenden der Spalten — kurz gehalten, damit nichts träge wirkt */

/* Sieben Gruppen inklusive Zubehör */

@media(prefers-reduced-motion:reduce){
  .mega{transition:none}
  nav.main li.has-menu:hover > .mega,
  nav.main li.has-menu:focus-within > .mega{transition:none}
  .mspalten .msp > div{opacity:1;transform:none;transition:none;transition-delay:0s}
}

/* ==========================================================================
   HOVER DER DROPDOWNS — eine Definition fuer alle drei
   Vorher lagen fuenf Einzelregeln verstreut, die auseinanderlaufen konnten:
   das Icon-Feld wurde in Ziele und Tools lime, in der Produkte-Sidebar weiss.
   Jetzt steuert ein Block alle Eintraege und alle Icon-Felder.
   ========================================================================== */
.mega .mi:hover,
#mega-produkte .msp li a:hover,
#mega-produkte .mseiten a:hover{
  background:var(--menue-hover-flaeche);
  border-left-color:var(--menue-hover-marke)}

/* Eintraege wandern seitlich, die Sidebar-Kacheln heben ab —
   gleiche Zeiten, gleiche Akzentfarbe, nur der Bewegungsvektor
   folgt der jeweiligen Anordnung. */
.mega .mi:hover,
#mega-produkte .msp li a:hover{transform:translateX(var(--menue-hover-versatz))}
#mega-produkte .mseiten a:hover{transform:translateY(-2px)}

.mega .mi:hover .ico,
#mega-produkte .mseiten a:hover .ms-ic{
  background:var(--menue-hover-ic-flaeche);
  color:var(--menue-hover-ic-ink);
  transform:scale(var(--menue-hover-ic-skalierung))}

/* ==========================================================================
   PRODUKTE-MEGA-MENÜ — drei Zonen
   Sidebar, gestapelte Gruppen, Bestseller-Karte. Weicher als der Rest der
   Seite: gerundetes Panel, randlose Kacheln, getönte Flächen statt Kästen.
   Die kantige Formensprache bleibt dem übrigen Layout vorbehalten.
   ========================================================================== */
@media(min-width:1024px){
  /* Das Panel spannt breiter als sein Menüpunkt — deshalb verliert dieser
     seinen Positionsbezug und die Kopfzeile wird zum Anker. */
  header.site .in{position:relative}
  nav.main li.has-menu.breit{position:static}
  #mega-produkte{
    left:50%;right:auto;
    width:min(1240px,calc(100vw - 40px));
    padding:20px 22px 22px;
    border:0;border-radius:20px;
    box-shadow:0 0 0 1px var(--line), 0 40px 80px -34px rgba(11,11,13,.46),
               0 12px 26px -18px rgba(11,11,13,.24);
    transform:translate(-50%,-10px) scale(.986);transform-origin:top center}
  nav.main li.has-menu:hover > #mega-produkte,
  nav.main li.has-menu:focus-within > #mega-produkte{transform:translate(-50%,0) scale(1)}
}
/* Das breite Panel ist mittig verankert - der Schimmer sitzt dort ebenfalls
   in der oberen linken Ecke, nur etwas grosszuegiger. */
#mega-produkte .lime{width:340px;height:210px}

/* --------------------------------------------------------------- Suche */
#mega-produkte .msuche{position:relative;display:flex;align-items:center;margin:0 0 14px}
.msuche-ic{position:absolute;left:14px;width:16px;height:16px;color:var(--ink-2);
  pointer-events:none;z-index:1}
#mega-produkte .msuche input{flex:1;min-width:0;height:40px;padding:0 50px 0 38px;
  font:400 13.5px/1 var(--f-sans);color:var(--ink);text-transform:none;letter-spacing:0;
  background:var(--tint);border:1px solid var(--line);border-radius:10px;outline:none;
  transition:border-color .14s,background .14s}
#mega-produkte .msuche input::placeholder{color:var(--ink-2);text-transform:none}
#mega-produkte .msuche input:focus{border-color:var(--cta);background:#fff}
/* Der Pfeil sitzt optisch mittig: quadratische Fläche, Flex-Zentrierung,
   keine Schräge, die den Schwerpunkt verzieht. */
#mega-produkte .msuche button{position:absolute;right:4px;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;cursor:pointer;line-height:0;
  background:var(--cta);color:var(--cta-ink);border-radius:8px;
  transition:background .14s}
#mega-produkte .msuche button svg{width:16px;height:16px;display:block}
#mega-produkte .msuche button:hover{background:var(--cta-hover)}

/* --------------------------------------------------------------- Zonen */
.mzonen{display:grid;grid-template-columns:226px minmax(0,1fr) 216px;gap:20px;
  align-items:start}
/* Die DOM-Reihenfolge folgt der mobilen Ansicht (Karte zuerst). Auf Desktop
   stellt order die Zonenfolge Sidebar · Spalten · Karte wieder her. */
.mseiten{order:1}
.mspalten{order:2}
.mkarte{order:3}

/* ------------------------------------------------------------- Sidebar */
.mseiten{display:grid;gap:1px;list-style:none;margin:0;padding:0}
/* Kacheln rechtwinklig: dadurch laeuft die Lime-Marke links als gerade Linie
   durch, wie in den anderen Dropdowns. Rechts endet die Flaeche in unserer
   Parallelogramm-Schraege statt in einer Rundung. */
.mseiten a{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:11px;
  padding:8px 16px 8px 10px;border:0;border-left:2px solid transparent;border-radius:0;
  background:transparent;text-decoration:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%);
  transition:var(--menue-hover-uebergang)}

.ms-ic{display:grid;place-items:center;width:34px;height:34px;
  color:var(--cta);background:var(--tint2);border-radius:9px;
  transition:transform .14s ease-out,background .14s}
.ms-ic svg{width:18px;height:18px}
/* Der asymmetrische Spar-Tag braucht fuer die optische Mitte einen Pixel
   Gegengewicht nach links; das Raster-Icon darunter bleibt exakt zentriert. */
.mseiten li:nth-child(4) .ms-ic svg{transform:translateX(-1px)}

.ms-t{min-width:0}
.ms-t b{display:block;font:700 13px/1.2 var(--f-sans);color:var(--ink);
  text-transform:none;letter-spacing:0}
.ms-t small{display:block;font-size:10.5px;line-height:1.25;color:var(--ink-2);
  text-transform:none;letter-spacing:0;margin-top:1px}
.ms-zahl{font:800 10px/1 var(--f-mono);font-style:normal;color:var(--sig-ink);
  background:var(--sig);padding:4px 6px;border-radius:6px}

/* ------------------------------------------------- Gruppen in 3 Spalten */
.mspalten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.msp{display:grid;gap:12px;align-content:start}
.msp > div{min-width:0}
.msp h4{margin:0 0 3px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.msp h4 a{font:800 9px/1.2 var(--f-sans);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-2);text-decoration:none;transition:color .14s}
.msp h4 a:hover{color:var(--cta)}
.msp ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.msp li a{display:flex;align-items:center;gap:6px;padding:3px 9px;margin:0 -9px;
  font-size:15px;line-height:1.35;color:var(--ink);text-decoration:none;
  text-transform:none;letter-spacing:0;
  border-left:2px solid transparent;
  transition:var(--menue-hover-uebergang)}

/* Produktname + Flamme in einer Zeile: pl-name ist ein Span mit Textknoten
   und der Block-SVG-Flamme. Ohne inline-flex bricht die Block-SVG auf Desktop
   in die naechste Zeile (die Mobilregel weiter unten hatte das schon, die
   Desktop-Basis fehlte). */
.pl-name{display:inline-flex;align-items:center;gap:6px}

/* Bestseller-Flamme: gefuelltes Symbol in zwei Rottoenen. Bewusst nicht in
   --cta, damit sie als Auszeichnung liest und nicht als Link-Signal. */
.hot{width:13px;height:13px;flex:none;
  transition:transform .2s ease-out,filter .18s}
.hot-aussen{fill:var(--hot-aussen)}
.hot-kern{fill:var(--hot-kern)}
.msp li a:hover .hot{transform:scale(1.14);filter:saturate(1.15)}

/* --------------------------------------------------- Bestseller-Karte */
.mkarte{position:relative;display:flex;flex-direction:column;
  box-sizing:border-box;overflow:hidden;
  padding:14px;background:var(--tint);border:0;border-radius:14px;
  text-decoration:none;transition:background .14s,transform .14s ease-out}
.mkarte:hover{background:var(--tint2);transform:translateY(-2px)}
.mk-badge{position:absolute;top:0;left:0;font:800 8px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.09em;color:var(--sig-ink);background:var(--sig);padding:5px 9px;
  border-radius:14px 0 10px 0}
.mk-bild{display:grid;place-items:center;margin:16px 0 10px}
.mk-bild img{width:150px;height:150px;max-width:100%;object-fit:contain;display:block;
  transition:transform .16s ease-out}
.mkarte:hover .mk-bild img{transform:scale(1.05)}
.mk-name{font:700 15px/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink);
  text-transform:none}
/* Die Metazeile lief vorher über den Kartenrand — sie darf umbrechen */
.mk-meta{margin-top:3px;font-size:10.5px;line-height:1.45;color:var(--ink-2);
  text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.mk-preis{margin-top:6px;font:800 17px/1 var(--f-display);font-style:italic;color:var(--ink);
  text-transform:none}
.mk-preis em{font-style:normal;font-size:10px;font-weight:400;color:var(--ink-2)}
/* CTA als gefüllte Fläche, nicht als Textlink */
.mk-cta{margin-top:11px;display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:0 14px;background:var(--cta);color:var(--cta-ink);border-radius:9px;
  font:800 10.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.07em;
  transition:background .14s}
.mkarte:hover .mk-cta{background:var(--cta-hover)}
.mk-cta em{font-style:normal;display:inline-block;transition:transform .14s ease-out}
.mkarte:hover .mk-cta em{transform:translateX(3px)}

/* Gestaffeltes Einblenden der drei Zonen */
.mzonen > *{opacity:0;transform:translateY(5px);
  transition:opacity .16s ease-out,transform .16s ease-out}
nav.main li.has-menu:hover > #mega-produkte .mzonen > *,
nav.main li.has-menu:focus-within > #mega-produkte .mzonen > *{opacity:1;transform:none}
.mzonen > *:nth-child(1){transition-delay:.03s}
.mzonen > *:nth-child(2){transition-delay:.07s}
.mzonen > *:nth-child(3){transition-delay:.11s}

@media(max-width:1180px) and (min-width:1024px){
  .mzonen{grid-template-columns:200px minmax(0,1fr);gap:16px}
  .mkarte{position:absolute;right:20px;top:70px;width:200px;
    visibility:hidden;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
  .mseiten a:hover,.mkarte:hover,.msp li a:hover,.mega .mi:hover{transform:none}
  .mseiten a:hover .ms-ic,.mkarte:hover .mk-bild img,.msp li a:hover .hot{transform:none}
  .mzonen > *{opacity:1;transform:none;transition:none;transition-delay:0s}
}



/* Auf schmalem Desktop wuerden die Ziele- und Tools-Menues rechts aus dem
   Viewport ragen, weil sie am Menuepunkt haengen. Dort verankern sie sich
   stattdessen an der Kopfzeile und richten sich rechtsbuendig aus. */
@media(min-width:1024px) and (max-width:1279px){
  nav.main li.has-menu{position:static}
  #mega-ziele{left:auto;right:0;width:min(880px,calc(100vw - 40px))}
  #mega-tools{left:auto;right:0;width:min(1020px,calc(100vw - 40px))}
}

/* Ab 1280px traegt das Ziele-Menue vier Spalten und sitzt mittig unter
   seinem Menuepunkt. Die Verschiebung steckt im transform, deshalb muessen
   Ruhe- und Offenzustand sie beide mitfuehren. */
@media(min-width:1280px){
  /* Mittig unter dem Menuepunkt: auf schmalem Desktop wuerde die volle
     Breite links aus dem Viewport laufen, deshalb gestaffelt. */
  #mega-ziele{left:50%;right:auto;width:min(800px,calc(100vw - 40px));
    transform:translate(-50%,-10px) scale(.986);transform-origin:top center}
  nav.main li.has-menu:hover > #mega-ziele,
  nav.main li.has-menu:focus-within > #mega-ziele{transform:translate(-50%,0) scale(1)}

  #mega-tools{left:50%;right:auto;width:min(1020px,calc(100vw - 40px));
    transform:translate(-50%,-10px) scale(.986);transform-origin:top center}
  nav.main li.has-menu:hover > #mega-tools,
  nav.main li.has-menu:focus-within > #mega-tools{transform:translate(-50%,0) scale(1)}
}

/* ==========================================================================
   TOOLS-MENÜ — Kachelraster
   Alle Werkzeuge gleichrangig in drei Spalten, zeilenweise gefuellt, ohne
   Oberkategorien. Darunter die Grundlagen als eigene Zeile, ganz unten die
   bestehende Fusszeile — bewusst leichter gesetzt, damit nicht zwei
   gleichgewichtige Leisten uebereinander stehen.
   ========================================================================== */
#mega-tools{padding:22px}

/* nav.main > ul vererbt Versalien und nowrap — das Raster ist kein ul und
   muss beides selbst zuruecksetzen. minmax(0,1fr) verhindert, dass lange
   Beschreibungen die Spalten aufblaehen. */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  align-items:stretch;white-space:normal;text-transform:none;letter-spacing:0}
/* Karten: rechtwinklig, duenner Rahmen, in der Zeile gleich hoch */
#mega-tools .tkarte{align-items:flex-start;gap:13px;margin:0;padding:14px;
  height:100%;box-sizing:border-box;
  border:1px solid var(--line);border-left:2px solid var(--line);background:#fff}
#mega-tools .tkarte .ico{width:42px;height:42px}
#mega-tools .tkarte .ico img,
#mega-tools .tkarte .ico svg{width:27px!important;height:27px!important}
#mega-tools .tkarte > span{min-width:0}
#mega-tools .tkarte b{font-size:14px;line-height:1.3;text-transform:none;letter-spacing:0}
#mega-tools .tkarte small{font-size:11.5px;line-height:1.5;margin-top:2px;
  text-transform:none;letter-spacing:0}

/* Grundlagen als volle Zeile, dezent abgesetzt */
.twissen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin-top:12px;padding:12px 14px;background:var(--tint);
  white-space:normal;text-transform:none;letter-spacing:0}
/* Molekuel-Symbol: Wabenstruktur und Kette, Verlauf aus unseren beiden
   Akzentfarben statt der warmen Originaltoene. */
.tw-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;
  background:#fff;border:1px solid var(--line)}
.tw-ic svg{width:21px;height:21px;display:block}
.tw-label{font:800 9.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-2)}
.twissen a{display:inline-flex;align-items:center;gap:7px;
  font:700 13.5px/1 var(--f-sans);color:var(--cta);text-decoration:none;
  text-transform:none;letter-spacing:0;transition:color .18s,transform .2s ease-out}
.twissen a:hover{color:var(--cta-hover);transform:translateX(3px)}
.twissen a em{font-style:normal;display:inline-block;transition:transform .2s ease-out}
.twissen a:hover em{transform:translateX(2px)}

/* Fusszeile leichter als die Wissenszeile darueber */
#mega-tools .allrow{margin-top:12px;padding-top:11px;background:none}
#mega-tools .allrow span{font-size:10px;color:var(--ink-2)}
#mega-tools .allrow a{font-size:9.5px}

/* ==========================================================================
   ZIELE-MENÜ — dichter gesetzt
   Es war das kleinste der drei Panels, trug aber bei 13 kurzen Eintraegen
   die meiste Leerflaeche. Enger gesetzt, ohne Icon- oder Schriftgroessen
   anzutasten — die sollen ueber alle Dropdowns konsistent bleiben.
   ========================================================================== */
#mega-ziele{padding:22px}
#mega-ziele .cols.vier{gap:20px}
#mega-ziele h4{margin:0 0 11px;padding-bottom:8px}
#mega-ziele .mi{padding:8px 11px;gap:11px}
#mega-ziele .allrow{margin-top:18px;padding-top:14px}

@media(min-width:1440px){
  #mega-ziele{width:min(880px,calc(100vw - 40px))}
}

/* ==========================================================================
   ANMELDESEITE
   Eine zentrierte Karte, sonst nichts. Kantig wie der Rest der Seite;
   der Fokusring ist bewusst deutlich, weil Eingabefelder der einzige Ort
   sind, an dem der Tastaturfokus wirklich gebraucht wird.
   ========================================================================== */
.ankarte{max-width:440px;margin:8px auto 32px;padding:30px 30px 26px;
  background:#fff;border:1px solid var(--line)}
.ankarte h1{margin:10px 0 8px;font-size:clamp(26px,3vw,34px)}
.an-lead{margin:0 0 24px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}

.anform{display:grid;gap:15px}
.anfeld{display:grid;gap:6px}
.anfeld label{font:800 9.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-2)}
.anfeld input{height:48px;padding:0 14px;font:400 14px/1 var(--f-sans);color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);outline:none;
  transition:border-color .16s,box-shadow .16s}
.anfeld input::placeholder{color:var(--ink-2)}
.anfeld input:focus{border-color:var(--cta);box-shadow:0 0 0 3px rgba(109,52,214,.16)}
.anfeld input:focus-visible{outline:none}
.anform .btn{margin-top:5px;width:100%}

.an-wechsel{margin:16px 0 0;font-size:12.5px;color:var(--ink-2);text-align:center}
.an-wechsel a{color:var(--cta);text-decoration:none;font-weight:700;transition:color .16s}
.an-wechsel a:hover{color:var(--cta-hover);text-decoration:underline}

.an-schutz{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.an-schutz-kopf{display:flex;align-items:center;gap:7px;margin:0 0 6px;
  font:800 9.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.1em;color:var(--ink)}
.an-schutz-kopf svg{color:var(--cta);flex:none}
.an-schutz-text{margin:0;font-size:11.5px;line-height:1.6;color:var(--ink-2)}

@media(max-width:520px){.ankarte{padding:24px 20px 22px;margin-inline:0}}

.burger{display:none;place-items:center;width:42px;height:42px;flex:none;
  gap:4px;padding:0;border:0;background:transparent;cursor:pointer}
/* Kompakter als zuvor: kuerzer, feiner, enger — passt zur Strichstaerke
   der uebrigen Kopfsymbole. */
.burger-strich{display:block;width:16px;height:1.6px;background:#fff;
  transition:transform .2s ease-out,opacity .16s}
body.nav-offen .burger-strich:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
body.nav-offen .burger-strich:nth-child(2){opacity:0}
body.nav-offen .burger-strich:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

.navmaske{position:fixed;inset:0;z-index:94;background:rgba(11,11,13,.55);
  backdrop-filter:blur(2px)}
.navmaske[hidden]{display:none}

/* ==========================================================================
   MOBILE NAVIGATION — Vollbild-Panel
   Steht am Dateiende: die Desktop-Menues bringen feste Raster mit, jede
   spaeter ergaenzte Regel wuerde einen frueheren Mobilblock ueberschreiben.

   Gefiltert und ein-/ausgeblendet wird ausschliesslich ueber
   visibility/position/transform — nie ueber display, height oder max-height.
   Nur so behalten die Produktlinks ihre Layoutbox im gerenderten DOM.
   ========================================================================== */
@media(max-width:1023px){
  .burger{order:3}
  .hactions .iconbtn:not(.konto){position:absolute;visibility:hidden;pointer-events:none}
  .hactions{gap:8px;padding-left:0;border-left:0;position:relative;
    display:flex;align-items:center}
  .cart{order:1}
  .konto{order:2}

  /* Warenkorb, Konto und Burger als eine Gruppe gleichwertiger Flaechen —
     gleiche Kantenlaenge, gleicher Grund, gleiche Symbolgroesse. */
  .hactions .cart,.hactions .konto{
    display:grid;place-items:center}
  /* Gerundet mit Rand — dieselbe Formensprache wie Tabs, Chips, CTA und
     die Warenkorb-Pille im Panelkopf. */
  .hactions .cart,.hactions .konto,.hactions .burger{
    width:42px;height:42px;min-height:0;flex:none;
    padding:0;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.24);border-radius:11px;
    clip-path:none;color:#fff;
    transition:background-color .16s,border-color .16s}
  /* Flex statt Raster: nur so bleibt der Abstand der drei Striche wirklich
     bei 4px — im Raster verteilen sie sich ueber die volle Hoehe. */
  .hactions .burger{display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:4px}
  .hactions .cart:hover,.hactions .konto:hover,.hactions .burger:hover,
  .hactions .cart:active,.hactions .konto:active,.hactions .burger:active{
    background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
  .hactions .cart:focus-visible,.hactions .konto:focus-visible,
  .hactions .burger:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
  .hactions .cart svg,.hactions .konto svg{width:18px;height:18px}
  .cartlabel{position:absolute;visibility:hidden;pointer-events:none;
    width:0;height:0;overflow:hidden}

  /* Zaehler am Warenkorb */
  .cart{position:relative}
  .cartzahl{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;
    display:grid;place-items:center;padding:0 4px;
    background:var(--cta);color:#fff;font:800 9.5px/1 var(--f-mono)}

  /* ------------------------------------------------------------- Panel */
  nav.main{position:fixed;inset:0;z-index:98;width:100%;height:100%;padding:0;
    display:flex;flex-direction:column;
    background:var(--nav);overflow:hidden;
    transform:translateX(-100%);visibility:hidden;
    transition:transform .24s ease-out,visibility 0s linear .24s}
  body.nav-offen nav.main{transform:none;visibility:visible;
    transition:transform .24s ease-out,visibility 0s}
  body.nav-offen{overflow:hidden}
  .navmaske{z-index:97}

  /* --------------------------------------------------------- Panelkopf */
  .mkopf{display:flex;align-items:center;gap:12px;flex:none;
    padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
  .mkopf-logo{display:flex;align-items:center;min-height:44px}
  .mkopf-logo img{width:132px;height:auto;display:block}
  .mkopf-korb{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
    min-height:44px;padding:0 12px;background:rgba(255,255,255,.08);
    color:#fff;font:800 11px/1 var(--f-sans);text-decoration:none;
    text-transform:none;letter-spacing:0}
  .mkopf-zu{display:grid;place-items:center;width:44px;height:44px;flex:none;
    border:0;background:transparent;color:#fff;cursor:pointer}

  /* Scrollbereich zwischen Kopf und Sticky-CTA */
  /* Die Liste waechst nur so weit wie noetig; der Rest bleibt leer, ohne
     dass Trust-Zeile und CTA nach unten gedrueckt werden. */
  nav.main > ul{flex:0 1 auto;min-height:0;margin-bottom:auto;
    overflow-y:auto;overscroll-behavior:contain;
    display:block;padding:0;margin:0;text-transform:none;white-space:normal;
    -webkit-overflow-scrolling:touch}

  /* -------------------------------------------- Produkte ohne Akkordeon */
  /* Der Bereich steht mobil direkt im Panel, nicht hinter einer Zeile. */
  nav.main li.has-menu.breit > a{position:absolute;visibility:hidden;pointer-events:none}
  nav.main li.has-menu.breit{border-bottom:0}
  nav.main li.has-menu.breit > .mega{position:static;opacity:1;visibility:visible;
    pointer-events:auto}

  /* Uebrige Zeilen als Akkordeon bzw. Link */
  nav.main > ul > li{border-bottom:1px solid rgba(255,255,255,.1)}
  nav.main > ul > li > a{display:flex;align-items:center;gap:11px;
    min-height:52px;padding:0 16px;
    font:800 12px/1.2 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;
    color:#fff;text-decoration:none}
  nav.main > ul > li > a .caret{margin-left:auto;transition:transform .2s ease-out}
  .navic{display:grid;place-items:center;width:22px;height:22px;flex:none;color:var(--sig)}
  .navic svg{width:18px;height:18px}
  nav.main li.has-menu.auf > a .caret{transform:rotate(180deg)}

  /* Zugeklappt: der Inhalt wird ueber den Elternknoten weggeklippt, statt
     auszublenden. Vorher wechselte position sofort auf absolut, waehrend der
     Inhalt noch 180 ms nachblendete — in diesem Fenster rutschten die Zeilen
     darunter hoch und lagen ueber dem noch sichtbaren Inhalt.
     Die Links behalten dabei ihre Box: Clipping ist rein visuell. */
  nav.main > ul > li.has-menu:not(.breit){position:relative;overflow:hidden;overflow:clip}
  .mega{position:absolute;left:0;right:0;top:0;width:auto;max-width:100%;
    padding:0 16px 16px;margin:0;background:transparent;border:0;box-shadow:none;
    border-radius:0;transform:translateY(-100%);opacity:1;visibility:hidden;
    pointer-events:none;transition:none}
  nav.main li.has-menu.auf > .mega{position:static;transform:none;opacity:1;
    visibility:visible;pointer-events:auto}
  .mega .lime{display:none}

  /* Alle Raster einspaltig, unabhaengig vom Menue */
  /* align-items:start stammt vom Desktopraster — im Spaltenfluss wuerden
     dadurch alle Kinder auf Inhaltsbreite schrumpfen. */
  .mzonen,.mspalten,.msp,.mega .cols,.mega .cols.three,.mega .cols.vier,.tgrid{
    display:flex!important;flex-direction:column!important;gap:12px!important;
    align-items:stretch!important;align-content:stretch!important;
    width:auto!important;max-width:100%!important}
  .mega .mi,.msp li a,.tkarte{margin-left:0!important;margin-right:0!important;
    max-width:100%!important}

  /* ------------------------------------------------- Produkte: Reihenfolge */
  /* Die Desktop-Staffelung blendet die Zonen erst bei Hover ein — mobil gibt
     es kein Hover, also muss sie hier abgeschaltet werden. */
  .mzonen > *{opacity:1!important;transform:none!important;transition:none!important}
  #mega-produkte{padding:14px 16px 18px;width:auto;left:0;right:0;transform:none}
  #mega-produkte .msuche{order:1;margin:0 0 14px}
  .mkarte{order:2}
  .mseiten{order:3}
  .mchips{order:4}
  .mspalten{order:5}
  .malle{order:6}

  #mega-produkte .msuche input{height:46px;background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.16);color:#fff;border-radius:0}
  #mega-produkte .msuche input::placeholder{color:rgba(255,255,255,.5)}
  /* Form 1:1 wie im Desktop-Dropdown: gleiche Schraege, gleiche Rundung,
     rechts eingerueckt. Nur die Groesse folgt dem hoeheren Mobilfeld
     (46px Feld statt 40px, Knopf im selben Verhaeltnis). */
  #mega-produkte .msuche button{width:38px;height:38px;right:4px;
    border-radius:8px;
    clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
  .msuche-ic{color:rgba(255,255,255,.5)}

  /* Bestsellerkarte oben, waagerecht */
  .mkarte{position:relative!important;flex-direction:row!important;align-items:center;
    gap:12px;padding:12px!important;background:rgba(255,255,255,.05);border:0;
    visibility:visible!important;pointer-events:auto!important}
  .mk-badge{position:static;order:-1;align-self:flex-start;border-radius:0;
    clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%)}
  .mkarte{display:grid!important;grid-template-columns:64px 1fr!important;
    grid-template-areas:"badge badge" "bild text"!important}
  .mk-badge{grid-area:badge;justify-self:start;margin-bottom:8px}
  .mk-bild{grid-area:bild;margin:0}
  .mk-bild img{width:64px;height:64px}
  .mk-name,.mk-meta,.mk-preis,.mk-cta{grid-area:text}
  .mk-name{align-self:start;color:#fff;font-size:14px}
  .mk-meta{visibility:hidden;position:absolute}
  .mk-preis{align-self:center;color:#fff;font-size:15px;margin:0}
  .mk-cta{align-self:end;margin:0;background:none;color:var(--sig);min-height:0;
    padding:0;justify-content:flex-start;font-size:10px}

  /* Segment-Tabs */
  .mseiten{display:flex!important;flex-direction:row!important;gap:0!important;
    align-items:stretch;width:100%;border:1px solid rgba(255,255,255,.14)}
  .mseiten li{flex:1 1 0;min-width:0}
  .mseiten li:not(.ist-tab){position:absolute;visibility:hidden;pointer-events:none}
  .mseiten a{position:relative;display:flex!important;flex-direction:column;align-items:center;
    justify-content:center;gap:1px;min-height:52px;padding:6px 4px;
    grid-template-columns:none!important;background:transparent;clip-path:none;
    border:0;border-right:1px solid rgba(255,255,255,.14);border-radius:0}
  .mseiten li:nth-child(3) a{border-right:0}
  .mseiten a.an{background:rgba(168,252,3,.14)}
  .ms-ic{display:none}
  .ms-t{text-align:center}
  .ms-t b{font-size:11.5px;color:#fff}
  .ms-t small{font-size:9.5px;color:rgba(255,255,255,.5)}
  .ms-zahl{position:absolute;top:5px;right:6px;font-size:9px;padding:2px 5px}

  /* Filterchips */
  .mchips{display:flex;flex-wrap:wrap;gap:8px}
  .mchip{min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.18);
    background:transparent;color:rgba(255,255,255,.75);cursor:pointer;
    font:800 10px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.07em;
    transition:background .16s,color .16s,border-color .16s}
  .mchip.an{background:var(--sig);border-color:var(--sig);color:var(--sig-ink)}

  /* Flache Produktliste mit Chevron */
  .msp{gap:0!important}
  .msp h4{position:absolute;visibility:hidden;pointer-events:none}
  .msp ul{display:block!important;width:100%}
  .msp li a{display:flex!important;align-items:center;justify-content:space-between;
    gap:10px;min-height:48px;padding:0;border-left:0;
    color:rgba(255,255,255,.9);font-size:15px;
    border-bottom:1px solid rgba(255,255,255,.08)}
  .pl-name{display:inline-flex;align-items:center;gap:6px}
  .pl-chev{color:rgba(255,255,255,.35);font-size:18px;line-height:1}
  .msp li a:hover{background:rgba(255,255,255,.06);color:#fff}
  .hot-aussen{fill:#F2897A}
  .hot-kern{fill:#DC5442}

  /* Gefiltert: aus dem Fluss, Box bleibt erhalten */
  .msp li.aus > a,.msp > div.aus{position:absolute;visibility:hidden;
    pointer-events:none;left:0;width:100%}
  .msp,.msp > div{position:relative}

  .malle{display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;margin-top:4px;background:rgba(255,255,255,.08);color:#fff;
    text-decoration:none;font:800 10.5px/1 var(--f-sans);text-transform:uppercase;
    letter-spacing:.07em}

  /* --------------------------------------- Ziele- und Tools-Menue mobil */
  /* Kein transform hier! Die Regel soll nur die Desktop-Zentrierung
     (translate(-50%,...)) aufheben — als ID-Selektor schlug sie aber auch
     das translateY(-100%), mit dem das zugeklappte Panel weggeschoben
     wird, und legte den Inhalt genau auf die geschlossene Zeile. */
  #mega-ziele,#mega-tools{padding:14px 16px 16px;width:auto;left:0;right:0}
  #mega-ziele .cols > div:first-child h4,#mega-tools .cols > div:first-child h4{margin-top:0}
  #mega-ziele .cols > div h4,#mega-tools .cols > div h4{margin-top:4px}
  .mega h4{color:rgba(255,255,255,.55)}
  .mega .mi{min-height:48px;padding:8px 0;color:#fff;border-left:0}
  .mega .mi b{color:#fff}
  .mega .mi small{color:rgba(255,255,255,.55)}
  .tkarte{padding:12px!important;background:rgba(255,255,255,.05)!important;
    border-color:rgba(255,255,255,.13)!important}
  .twissen{background:rgba(255,255,255,.05);margin-top:10px}
  .tw-label{color:rgba(255,255,255,.55)}
  .twissen a{color:var(--sig);min-height:44px}
  .tw-ic{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
  .mega .allrow{flex-wrap:wrap;border-top-color:rgba(255,255,255,.12)}
  .mega .allrow a{color:var(--sig);min-height:44px;display:inline-flex;align-items:center}
  .mega .allrow span{color:rgba(255,255,255,.5)}

  /* ------------------------------------------- Trust-Zeile und Sticky-CTA */
  .mtrust{flex:none;margin:0;padding:11px 16px;
    border-top:1px solid rgba(255,255,255,.12);
    font-size:10px;letter-spacing:.02em;color:rgba(255,255,255,.55);text-align:center}
  .msticky{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:54px;background:var(--sig);color:var(--sig-ink);text-decoration:none;
    font:800 11.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.07em}
  .msticky em{font-style:normal}
}

/* Panelkopf, Trust-Zeile und Sticky-CTA sind rein mobil — auf Desktop
   treten sie zurueck, behalten aber ihre Box. */
@media(min-width:1024px){
  /* .cartzahl steht hier nicht mehr drin — der Zaehler wird auf dem Desktop
     gebraucht. Der Zwilling im Panelkopf (.mkopf-zahl) bleibt verborgen,
     weil sein Elternknoten .mkopf verborgen ist. */
  .mkopf,.mtrust,.msticky,.mchips,.malle,.pl-chev,.navic{
    position:absolute;visibility:hidden;pointer-events:none;
    width:0;height:0;overflow:hidden}
}

@media(max-width:1023px) and (prefers-reduced-motion:reduce){
  nav.main,body.nav-offen nav.main,.mega,.burger-strich{transition:none}
}

/* Rueckmeldung beim Hinzufuegen — kurz, unaufdringlich, ueber dem CTA */
.korbhinweis{position:fixed;left:50%;bottom:24px;z-index:120;margin:0;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  padding:12px 18px;background:var(--nav);color:#fff;
  font:700 12px/1.3 var(--f-sans);
  box-shadow:0 16px 40px -18px rgba(11,11,13,.7);
  border-left:3px solid var(--sig);
  transition:opacity .2s ease-out,transform .2s ease-out}
.korbhinweis.an{opacity:1;transform:translate(-50%,0)}
@media(max-width:1023px){.korbhinweis{bottom:70px;left:16px;right:16px;
  transform:translateY(14px);text-align:center}
  .korbhinweis.an{transform:none}}
@media(prefers-reduced-motion:reduce){.korbhinweis{transition:opacity .2s}}

/* ==========================================================================
   MOBILE KORREKTUREN — muessen ganz am Dateiende stehen (siehe Hinweis am
   Mobilblock: spaeter angehaengte Regeln gewinnen sonst die Kaskade).
   ========================================================================== */
@media(max-width:1023px){

  /* ------------------------------------------------------------ Zaehler
     Die Kachel clippte ihren eigenen Zaehler weg: a.cart traegt
     overflow:hidden (fuer die Schraege im Desktop-Stil), das Badge sitzt
     mit negativem Versatz auf der Ecke. Auf Mobil braucht die Kachel kein
     Clipping — die Icon-Gruppe bleibt, wo sie ist. */
  .hactions a.cart{overflow:visible}
  /* Der Glanzstreifen (.cart::after) parkt auf translateX(-115%) links
     ausserhalb der Kachel und war bisher vom overflow:hidden verdeckt.
     Ohne das Clipping lag er als grauer Schraegbalken frei. Auf Touch
     wischt er ohnehin nie durch — hier also ganz abbestellt. */
  .hactions a.cart::after{content:none}
  /* Kein Ring: das Badge liegt zur Haelfte auf der aufgehellten Kachel,
     dort zeichnete sich ein Ring in var(--nav) als grauer Bogen ab. */
  .cartzahl{top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;
    border-radius:999px;border:0;
    background:var(--cta);color:#fff;
    font:800 10px/1 var(--f-mono);letter-spacing:0}

  /* ------------------------------------------------- Hoverfarben mobil
     --menue-hover-flaeche ist var(--tint) — eine helle Flaeche fuer das
     helle Desktop-Panel. Mobil ist das Panel dunkel, also wurde jeder
     Hover weiss auf weiss. Auf Touch bleibt :hover nach dem Antippen
     kleben, deshalb sah es wie ein kaputter Aktivzustand aus.
     Zentral ueber die Variablen korrigiert statt je Komponente. */
  nav.main{
    --menue-hover-flaeche:rgba(255,255,255,.08);
    --menue-hover-marke:var(--sig);
    --menue-hover-ic-flaeche:var(--sig);
    --menue-hover-ic-ink:var(--sig-ink)}

  /* Hover nur dort, wo es einen Zeiger gibt. Ohne diese Schranke friert
     der Hoverzustand auf Touch nach dem Tippen ein. */
  @media(hover:none){
    .mega .mi:hover,#mega-produkte .msp li a:hover,#mega-produkte .mseiten a:hover,
    .msp li a:hover,.mchip:hover,nav.main > ul > li > a:hover{background:transparent}
    .mchip.an:hover{background:var(--sig)}
    #mega-produkte .mseiten a.an:hover{background:rgba(168,252,3,.14)}
  }

  /* Kein systemeigener Tap-Schleier ueber den eigenen Zustaenden */
  nav.main a,nav.main button,nav.main input{-webkit-tap-highlight-color:transparent}

  /* ------------------------------------------ Kategorie-Tabs: vier Zustaende */
  #mega-produkte .mseiten a{color:rgba(255,255,255,.82);background:transparent;
    transition:background .16s,color .16s}
  #mega-produkte .mseiten a b,#mega-produkte .mseiten a small,
  #mega-produkte .mseiten a .zahl{color:inherit}
  /* Aktiv bleibt der bestehende Limeton (.mseiten a.an) — nur Textfarbe
     und Akzentlinie werden hier ausdruecklich festgehalten. */
  #mega-produkte .mseiten a.an{background:rgba(168,252,3,.14);color:#fff;
    border-left:2px solid var(--sig)}
  #mega-produkte .mseiten a.an small{color:rgba(255,255,255,.6)}
  /* Gedrueckt: nur eine Spur heller, Textfarbe ausdruecklich mitgesetzt */
  #mega-produkte .mseiten a:active{background:rgba(255,255,255,.12);color:#fff}
  #mega-produkte .mseiten a.an:active{background:rgba(168,252,3,.22);color:#fff}
  #mega-produkte .mseiten a:active b,#mega-produkte .mseiten a:active small{color:#fff}
  #mega-produkte .mseiten a:focus-visible{outline:2px solid var(--sig);
    outline-offset:-2px;background:rgba(255,255,255,.08);color:#fff}

  /* Chips, Produktzeilen und Akkordeonzeilen — dieselbe Logik */
  .mchip:active{background:rgba(255,255,255,.14);color:#fff}
  .mchip.an:active{background:var(--sig);color:var(--sig-ink)}
  .mchip:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
  .msp li a:active{background:rgba(255,255,255,.1);color:#fff}
  .msp li a:focus-visible{outline:2px solid var(--sig);outline-offset:-2px}
  .mega .mi:active{background:rgba(255,255,255,.1)}
  .mega .mi:focus-visible{outline:2px solid var(--sig);outline-offset:-2px}
  nav.main > ul > li > a:active{background:rgba(255,255,255,.08);color:#fff}
  nav.main > ul > li > a:focus-visible{outline:2px solid var(--sig);outline-offset:-2px}

  /* ------------------------------------------------------------ Suchfeld
     #mega-produkte .msuche input:focus setzt background:#fff — gedacht fuer
     das helle Panel, mobil wurde daraus weisser Text auf weissem Grund. */
  #mega-produkte .msuche input,
  #mega-produkte .msuche input:focus,
  #mega-produkte .msuche input:focus-visible{
    background:rgba(255,255,255,.06);color:#fff;caret-color:var(--sig);
    border:1px solid rgba(255,255,255,.16);outline:none}
  #mega-produkte .msuche input:focus,
  #mega-produkte .msuche input:focus-visible{
    border-color:var(--sig);box-shadow:0 0 0 2px rgba(198,255,0,.28)}
  #mega-produkte .msuche input::placeholder{color:rgba(255,255,255,.45)}
  #mega-produkte .msuche input::selection{background:var(--sig);color:var(--sig-ink)}
  /* Chrome faerbt Autofill-Felder eigenmaechtig — der Innenschatten ist der
     einzige Weg, die Flaeche zurueckzuholen. */
  #mega-produkte .msuche input:-webkit-autofill,
  #mega-produkte .msuche input:-webkit-autofill:hover,
  #mega-produkte .msuche input:-webkit-autofill:focus{
    -webkit-text-fill-color:#fff;caret-color:var(--sig);
    -webkit-box-shadow:0 0 0 1000px #17171a inset;
    transition:background-color 9999s ease-out 0s}

  /* ------------------------------------------------------ Akkordeon zu
     :focus-within steht im Grundteil ohne Media-Schranke und zwang das
     zugeklappte Panel zurueck auf sichtbar — nach dem Antippen behaelt die
     Zeile den Fokus, also blieb der Inhalt auf der Zeile stehen.
     Mobil oeffnet ausschliesslich die Klasse .auf. */
  /* WICHTIG: .breit ausnehmen. Das ist die Produktespalte, die mobil
     dauerhaft offen steht (Zeile "li.has-menu.breit > .mega"). Ohne das
     :not() schob diese Regel sie beim ersten Beruehren weg und setzte
     pointer-events:none — Suchfeld tot, Tabs trafen die Zeile darunter. */
  nav.main li.has-menu:not(.breit):hover > .mega,
  nav.main li.has-menu:not(.breit):focus-within > .mega{
    opacity:1;visibility:hidden;transform:translateY(-100%);
    position:absolute;pointer-events:none;transition:none}
  nav.main li.has-menu:not(.breit).auf > .mega,
  nav.main li.has-menu:not(.breit).auf:hover > .mega,
  nav.main li.has-menu:not(.breit).auf:focus-within > .mega{
    position:static;transform:none;opacity:1;visibility:visible;
    pointer-events:auto}
  /* Die Zeile clippt ihren Inhalt; das zugeklappte Panel liegt komplett
     oberhalb der Clipkante und beeinflusst die Zeilenhoehe nicht. */
  nav.main > ul > li.has-menu{position:relative;overflow:hidden;overflow:clip}
}

/* ==========================================================================
   MOBIL: Zustandsanzeigen der Akkordeonzeile
   Beide Ausloeser stehen im Grundteil ohne Media-Schranke:
     nav.main li.has-menu:hover/:focus-within .caret{transform:rotate(180deg)}
     nav.main > ul > li > a:hover::after{transform:scaleX(1)}
   Auf Touch bleibt :hover nach dem Tippen kleben und der Fokus sitzt weiter
   auf der Zeile — Pfeil blieb also oben und die Limelinie stehen. Mobil
   haengt beides ausschliesslich an der Klasse .auf.
   ========================================================================== */
@media(max-width:1023px){
  nav.main li.has-menu:hover .caret,
  nav.main li.has-menu:focus-within .caret{transform:none}
  nav.main li.has-menu.auf .caret,
  nav.main li.has-menu.auf:hover .caret,
  nav.main li.has-menu.auf:focus-within .caret{transform:rotate(180deg)}

  nav.main > ul > li > a:hover::after,
  nav.main > ul > li > a:focus::after,
  nav.main > ul > li > a:focus-visible::after,
  nav.main > ul > li > a:focus-within::after{transform:scaleX(0)}
  nav.main > ul > li.has-menu.auf > a::after,
  nav.main > ul > li.has-menu.auf > a:hover::after{transform:scaleX(1)}
}

/* ==========================================================================
   MOBIL: Stueckzahl im Panelkopf
   Im geoeffneten Menue stand oben nur der Preis. Das Badge sitzt auf der
   Ecke des Warenkorb-Symbols — dieselbe Optik wie in der Kopfzeile, aber
   vollstaendig innerhalb der Pille, damit nichts geclippt wird.
   ========================================================================== */
@media(max-width:1023px){
  /* Etwas mehr Luft zum Preis, damit das Badge nicht auf die Ziffern laeuft */
  .mkopf-korb{position:relative;gap:12px}
  .mkopf-zahl{position:absolute;left:20px;top:6px;right:auto;
    min-width:16px;height:16px;padding:0 4px;
    display:grid;place-items:center;border:0;border-radius:999px;
    background:var(--cta);color:#fff;
    font:800 9.5px/1 var(--f-mono);letter-spacing:0}
  .mkopf-zahl.leer{display:none}
}

/* ==========================================================================
   MOBIL: Formen im geoeffneten Mega-Menue
   ========================================================================== */
@media(max-width:1023px){

  /* --- Suchleiste: spitzes Ende oben rechts, wie .skw ----------------------
     Der Schnitt sitzt auf dem Formular, damit Feld und Knopf gemeinsam
     beschnitten werden. Der Knopf rueckt weiter nach innen, sonst wuerde
     ihm die Schraege die untere rechte Ecke abschneiden. */
  #mega-produkte .msuche{clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
  #mega-produkte .msuche input{padding-right:60px}
  #mega-produkte .msuche button{right:12px}

  /* --- Kategorie-Tabs: Segmentleiste statt Gitter -------------------------
     Vorher harte Kanten und 1px-Trenner. Jetzt eine gerundete Leiste mit
     Innenabstand; der aktive Tab ist eine eigene Kachel darin. Die
     Akzentlinie bleibt, sitzt aber als Innenschatten unten und folgt
     damit der Rundung. */
  /* padding braucht !important: der Reset .mega ul{padding:0} ist
     spezifischer und setzte den Innenabstand sonst zurueck — der Schieber
     lief dann um 2,3px neben den Tabs. */
  .mseiten{gap:4px!important;padding:4px!important;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);border-radius:14px}
  .mseiten a{border-right:0!important;border-radius:10px}
  .mseiten li:nth-child(3) a{border-right:0}
  #mega-produkte .mseiten a{border-radius:10px}
  /* Kein eigener Hintergrund und keine Linie mehr: die Toenung liefert
     der Schieber weiter unten, damit sie zwischen den Tabs wandert. */
  #mega-produkte .mseiten a.an{border-left:0;background:transparent;box-shadow:none}
  #mega-produkte .mseiten a:active{border-radius:10px}
  #mega-produkte .mseiten a:focus-visible{outline-offset:-2px;border-radius:10px}

  /* --- Filterchips: Pillenform ------------------------------------------- */
  .mchip{border-radius:999px}

  /* --- "Alle Peptide ansehen": Umriss statt Flaeche ----------------------- */
  .malle{background:transparent;
    border:1px solid rgba(255,255,255,.22);border-radius:10px;
    transition:border-color .16s,background .16s}
  .malle:active{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}

  /* --- Sticky-CTA: freistehende Kachel -----------------------------------
     Nimmt die Formensprache der Tabs, Chips und des Umriss-Knopfes auf:
     vom Rand abgesetzt und gerundet statt kantenbuendig. */
  .msticky{clip-path:none;width:auto;margin:0 16px 16px;border-radius:12px;
    min-height:54px;transition:background .16s}
  .msticky:active{background:#b7e600}
}

/* ==========================================================================
   MOBIL: Tab-Schieber, Warenkorb-Umriss, Produktbild
   ========================================================================== */
@media(max-width:1023px){

  /* --- Schieber unter den drei Tabs ---------------------------------------
     Eine einzige getoente Kachel, die zum angewaehlten Tab wandert, statt
     dass jeder Tab seine eigene Flaeche einblendet. Position kommt ueber
     :has() vom aktiven Tab — ohne JavaScript, damit die Zustandslogik an
     einer Stelle bleibt (die Klasse .an setzt bereits mobileListe()). */
  .mseiten{position:relative}
  .mseiten::before{content:"";position:absolute;z-index:0;
    left:4px;top:4px;bottom:4px;
    width:calc((100% - 8px - 8px) / 3);
    background:rgba(168,252,3,.16);border-radius:10px;
    transition:transform .26s cubic-bezier(.4,0,.2,1)}
  .mseiten:has(li:nth-child(1) a.an)::before{transform:translateX(0)}
  .mseiten:has(li:nth-child(2) a.an)::before{transform:translateX(calc(100% + 4px))}
  .mseiten:has(li:nth-child(3) a.an)::before{transform:translateX(calc(200% + 8px))}
  /* Beschriftung ueber den Schieber legen */
  .mseiten li{position:relative;z-index:1}
  @media(prefers-reduced-motion:reduce){
    .mseiten::before{transition:none}
  }

  /* --- Warenkorb im Panelkopf: Umriss wie die uebrigen Flaechen ----------- */
  .mkopf-korb{border:1px solid rgba(255,255,255,.22);border-radius:10px;
    background:rgba(255,255,255,.05);padding:0 12px}

  /* --- Produktbild der Bestsellerkarte ------------------------------------
     Im PNG steckt ein eingebackener heller Schlagschatten (36 219
     halbdurchsichtige Pixel, alle hell, unten sogar deckendes Weiss). Auf
     den hellen Produktseiten faellt er nicht auf, auf dem dunklen Panel
     wurde daraus ein grauer Kasten. Gleiche Loesung wie in der
     Warenkorb-Schublade: eine helle Flaeche dahinter. */
  .mkarte .mk-bild{background:var(--tint);border-radius:8px;padding:5px}
}

/* ==========================================================================
   WARENKORB-SCHUBLADE
   Aufbau, Reihenfolge, Wortlaut und Masse vom Bestand uebernommen; die
   Animation ebenfalls (transform .3s cubic-bezier(.4,0,.2,1)). Geaendert
   sind die Farben und die Breite — statt voller Breite rund 80 %, links
   bleibt Flaeche frei.
   ========================================================================== */
/* Mobil volle Breite, ab 448px gedeckelt — wie im Bestand (w-full max-w-md). */
.cdrawer{width:min(100%,448px);max-width:448px;
  display:flex;flex-direction:column;background:#fff;
  border-left:1px solid var(--line);
  transition:transform .3s cubic-bezier(.4,0,.2,1)}

/* --- Kopf --- */
.cd-kopf{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.cd-titel{margin:0;font:800 18px/1.2 var(--f-sans);color:var(--ink);
  text-transform:none;letter-spacing:0}
.cd-anzahl{font-size:14px;font-weight:700;color:var(--ink-2)}
.cd-zu{display:grid;place-items:center;width:36px;height:36px;flex:none;
  border:0;border-radius:999px;background:transparent;color:var(--ink);
  cursor:pointer;transition:background .16s}
.cd-zu:hover{background:var(--tint)}
.cd-zu:focus-visible{outline:2px solid var(--cta);outline-offset:2px}

/* --- Geschenkleiter --- */
.cd-gifts{flex:none;padding:12px 20px;border-bottom:1px solid var(--line)}
.cd-kicker{margin:0 0 8px;font:800 9.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-2)}
.cd-stufen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
/* Bei 80 % Breite ist rund ein Viertel weniger Platz als im Bestand.
   Deshalb kompaktere Masse, damit die Zeilen einzeilig bleiben und alle
   gleich hoch sind. */
.cd-stufen li{display:flex;align-items:center;gap:9px;min-height:50px;
  padding:6px 11px;border:1px solid var(--line);border-radius:13px;
  background:#fff;transition:border-color .3s,background .3s}
/* Noch offen: der Kreis bekommt einen ganz leichten Lilaring */
.cd-ic{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:999px;background:var(--tint);color:var(--cta);
  border:1px solid rgba(109,52,214,.22);
  transition:background .3s,color .3s,border-color .3s}
.cd-ic{position:relative}
.cd-ic img{width:17px;height:17px;object-fit:contain}
.cd-haken{width:15px;height:15px;display:none}
/* Erreicht: Icon weicht dem Haken — wie im Bestand */
.cd-stufen li:not(.aus) .cd-ic img{display:none}
.cd-stufen li:not(.aus) .cd-haken{display:block}
.cd-stufen li b{flex:none;font:700 13.5px/1 var(--f-sans);color:var(--ink)}
.cd-was{min-width:0;flex:1;font-size:12px;line-height:1.3;color:var(--ink);
  overflow-wrap:anywhere}
.cd-neu{flex:none;padding:2px 6px;border-radius:999px;background:var(--sig);
  color:var(--sig-ink);font:800 8.5px/1.4 var(--f-sans);text-transform:uppercase;
  letter-spacing:.06em;font-style:normal}
.cd-noch{flex:none;padding:3px 7px;border-radius:999px;background:var(--cta);
  color:#fff;font:700 9.5px/1.4 var(--f-mono);font-style:normal;white-space:nowrap}
.cd-noch:empty{display:none}
/* Unter 380px reicht der Platz nicht fuer Beschreibung und Marke in einer
   Zeile. Die Marke entfaellt dort — derselbe Betrag steht direkt darunter
   im Satz "Noch X € bis zum naechsten Geschenk.", es geht nichts verloren. */
@media(max-width:379px){.cd-noch{display:none}}
/* Erreicht: Limerand und getoenter Kreis */
.cd-stufen li:not(.aus){border-color:var(--sig);background:rgba(168,252,3,.08)}
.cd-stufen li:not(.aus) .cd-ic{background:var(--sig);color:var(--sig-ink);
  border-color:var(--sig)}
/* Noch nicht erreicht: zurueckgenommen */
.cd-stufen li.aus .cd-was,.cd-stufen li.aus b{color:var(--ink-2)}
.cd-stufen li.aus .cd-ic{color:var(--ink-2)}
.cd-stufen li.naechste{border-color:var(--cta)}

.cd-rest{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.cd-rest b{color:var(--ink);font-weight:800}
/* Ladebalken: vertiefte Rinne, Verlauf mit hellerer Spitze, darueber ein
   wanderndes Glanzlicht — dieselbe Kurve wie der Schimmer der Geschenkzeile. */
.cd-balken{display:block;height:8px;margin-top:9px;overflow:hidden;
  border-radius:999px;background:var(--tint2);
  box-shadow:inset 0 1px 2px rgba(11,11,13,.10)}
.cd-balken i{position:relative;display:block;height:100%;width:0;overflow:hidden;
  border-radius:999px;
  background:linear-gradient(90deg,#8FD400 0%,var(--sig) 62%,#E4FFA6 100%);
  box-shadow:0 0 10px -1px rgba(168,252,3,.85);
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.cd-balken i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:balkenGlanz 2.2s ease-in-out infinite}
@keyframes balkenGlanz{0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(200%)}}
.cd-gifts.leer .cd-balken i{width:0}

/* --- Positionen --- */
.cd-liste{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;overflow-y:auto}
.cd-pos{display:flex;align-items:flex-start;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--line)}
.cd-bild{display:grid;place-items:center;width:54px;height:54px;flex:none;
  border-radius:10px;background:var(--tint);overflow:hidden}
.cd-bild img{max-width:82%;max-height:82%;display:block}
.cd-txt{min-width:0;flex:1}
.cd-txt b{display:block;font:700 13.5px/1.3 var(--f-sans);color:var(--ink)}
.cd-txt small{display:block;margin-top:1px;font-size:12px;color:var(--ink-2)}
.cd-menge{display:inline-flex;align-items:center;margin-top:8px;
  border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.cd-menge button{width:28px;height:28px;border:0;background:transparent;cursor:pointer;
  font:700 14px/1 var(--f-sans);color:var(--ink);transition:background .16s}
.cd-menge button:hover{background:var(--tint)}
.cd-menge > span{min-width:26px;text-align:center;font-size:13px;font-weight:700}
.cd-rechts{display:flex;flex-direction:column;align-items:flex-end;
  justify-content:space-between;align-self:stretch;gap:8px;flex:none}
.cd-weg{display:grid;place-items:center;width:24px;height:24px;border:0;
  background:transparent;color:var(--ink-2);cursor:pointer;transition:color .16s}
.cd-weg:hover{color:var(--sale)}
.cd-preis{font:800 14px/1 var(--f-sans);color:var(--ink)}

/* --- Fuss --- */
.cd-fuss{flex:none;padding:14px 20px 18px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px}
.cd-spar{margin:0;font:700 12px/1.3 var(--f-sans);color:var(--sig-tief,#4d7a00)}
.cd-spar.leer{display:none}
.cd-summe{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cd-summe > span:first-child{font:400 14px/1.4 var(--f-sans);color:var(--ink-2)}
.cd-preise{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.cd-preise s{font-size:12.5px;color:var(--sale)}
.cd-preise s.leer{display:none}
.cd-preise b{font:800 20px/1.2 var(--f-display);font-style:italic;color:var(--ink)}
.cd-kasse{display:grid;place-items:center;min-height:48px;margin-top:10px;
  border-radius:999px;background:var(--cta);color:#fff;text-decoration:none;
  font:700 16px/1 var(--f-sans);transition:background .16s}
.cd-kasse:hover{background:#5a2ab8}
.cd-kasse:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.cd-leeren{margin-top:8px;border:0;background:transparent;cursor:pointer;
  font:400 12px/1.4 var(--f-sans);color:var(--ink-2);text-decoration:none;
  transition:color .16s}
.cd-leeren:hover{color:var(--ink);text-decoration:underline}
.cd-fuss.leer{display:none}
.cd-leer.weg{display:none}
/* Leerzustand fuellt die freie Flaeche und sitzt mittig, statt unten
   an der Liste zu kleben. Der Knopf nimmt die Rundung der Schublade an. */
.cd-leer{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:24px 20px}
.cd-leer p{margin:0;font-size:14px;color:var(--ink-2)}
.cd-leer .btn{clip-path:none;border-radius:999px;min-height:44px;padding:0 22px;
  display:grid;place-items:center}

.cartzahl.leer{display:none}

@media(prefers-reduced-motion:reduce){
  .cdrawer,.cd-balken i,.cd-stufen li,.cd-ic{transition:none}
}

/* ==========================================================================
   GESCHENKSTUFEN — Schimmer, Haken, Erfolgsanimation
   Kurven und Zeiten 1:1 aus dem Bestand ausgelesen (giftShimmer, giftPop,
   giftFlash, giftSpark, np-confetti). Die Farben sind unsere.
   ========================================================================== */

/* --- Marke "erreicht" statt Restbetrag --- */
.cd-erreicht{flex:none;font:700 11px/1.4 var(--f-sans);font-style:normal;
  color:var(--sig-tief,#4d7a00);display:none}
.cd-stufen li:not(.aus) .cd-erreicht{display:block}
.cd-stufen li:not(.aus) .cd-neu{display:none}

/* --- Schimmer auf der naechsten, noch nicht erreichten Stufe --- */
.cd-stufen li.naechste{position:relative;overflow:hidden}
.cd-stufen li.naechste::after{content:"";position:absolute;inset:0;
  pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 35%,rgba(109,52,214,.16) 50%,transparent 65%);
  animation:giftSchimmer 3s ease-in-out infinite}
@keyframes giftSchimmer{0%{transform:translateX(-130%)}100%{transform:translateX(230%)}}

/* --- Stufe erreicht: Stups plus auslaufender Ring --- */
.cd-stufen li.feier{animation:giftStups .7s cubic-bezier(.22,1,.36,1),
  giftBlitz .9s ease-out}
@keyframes giftStups{0%{transform:scale(1)}35%{transform:scale(1.05)}
  65%{transform:scale(.99)}100%{transform:scale(1)}}
@keyframes giftBlitz{0%{box-shadow:0 0 0 0 rgba(168,252,3,.5)}
  100%{box-shadow:0 0 0 16px rgba(168,252,3,0)}}

/* --- Funken um den Icon-Kreis --- */
.cd-funke{position:absolute;left:50%;top:50%;width:6px;height:6px;
  margin:-3px 0 0 -3px;border-radius:999px;background:var(--sig);
  pointer-events:none;animation:giftFunke .85s ease-out forwards}
@keyframes giftFunke{0%{opacity:1;transform:translate(0,0) scale(.3)}
  100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}

/* --- Konfetti aus dem unteren Rand des Geschenkbereichs --- */
.cd-gifts{position:relative}
.cd-konfetti{position:absolute;left:0;right:0;bottom:8px;height:0;z-index:30;
  pointer-events:none}
.cd-konfetti i{position:absolute;top:0;display:block;will-change:transform,opacity;
  animation-name:giftKonfetti;animation-timing-function:cubic-bezier(.18,.7,.28,1);
  animation-iteration-count:1;animation-fill-mode:forwards}
@keyframes giftKonfetti{
  0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
  10%{opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.6);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .cd-stufen li.naechste::after,.cd-stufen li.feier,.cd-funke,.cd-konfetti i,
  .cd-balken i::after{animation:none}
  .cd-konfetti{display:none}
}

/* ==========================================================================
   DESKTOP: Zaehler im Warenkorb-Knopf
   Die Kachel ist dort kein Symbolfeld, sondern eine breite Flaeche mit
   Beschriftung — und sie ist geschraegt und beschnitten. Ein Eck-Badge
   wuerde das clip-path abschneiden, deshalb sitzt der Zaehler als Chip
   hinter dem Text im Fluss. Dunkler Grund mit Limeschrift, also die
   Umkehrung der Kachel.
   ========================================================================== */
@media(min-width:1024px){
  .hactions a.cart .cartzahl{
    position:static;visibility:visible;pointer-events:auto;
    display:grid;place-items:center;flex:none;
    min-width:20px;width:auto;height:20px;padding:0 6px;overflow:visible;
    border:0;border-radius:999px;
    background:var(--nav);color:var(--sig);
    font:800 11px/1 var(--f-mono);letter-spacing:0}
  .hactions a.cart .cartzahl.leer{display:none}
}

/* ==========================================================================
   MOBIL: Ankuendigungsleiste einen Tick kleiner
   ========================================================================== */
@media(max-width:1023px){
  .topbar ul{font-size:9.5px;letter-spacing:.03em;padding:9px 0;gap:5px 20px}
  .topbar li{gap:6px}
  .flagge{width:14px;height:10.5px}
}

/* ==========================================================================
   MOBIL: Hero-Buehne
   Reihenfolge umgedreht — erst Ampulle samt Badges, darunter die Kaufleiste
   (sie steckt bereits in .stage), erst danach Ueberschrift und Text.
   ========================================================================== */
@media(max-width:1023px){
  /* Die Rasterspalte folgte dem Mindestmass von .vialzone (min-width:auto)
     statt dem Behaelter — bei 360px war die Buehne dadurch 362px breit und
     .hero{overflow:hidden} schnitt die rechts verankerten Badges ab. */
  .hero .in{grid-template-columns:minmax(0,1fr)}
  .stage,.vialzone,.floatwrap,.floater,.tilt{min-width:0;max-width:100%}
  .hero .in > .stage{order:1}
  .hero .in > div:first-child{order:2;margin-top:28px}

  /* --- Badges wie am Desktop um die Ampulle legen -----------------------
     Die Prozentwerte des Desktops beziehen sich auf eine breite, flache
     Buehne. Mobil ist sie hoch und schmal (390x634), die Ampulle sitzt in
     den oberen 8–398px. Deshalb eigene Anker, damit die Badges auf der
     Ampulle liegen statt in die Kaufleiste zu rutschen. */
  /* --- Die drei Nachweise stehen nicht mehr frei ueber der Ampulle ------
     Sie schweben mobil zwangslaeufig ungluecklich, weil die Buehne hoch und
     schmal ist. Stattdessen bilden sie eine ruhige Zeile unter der
     Zahlungszusage. Der Umschlag .chipzeile ist am Desktop display:contents
     und damit dort wirkungslos. */
  .chipzeile{display:flex;flex-wrap:wrap;justify-content:center;
    align-items:stretch;gap:7px;order:5;width:100%;margin-top:14px}
  .chipzeile .chip{position:static;top:auto;right:auto;bottom:auto;left:auto;
    max-width:none;white-space:nowrap;
    display:inline-flex;align-items:center;justify-content:center;
    min-height:30px;padding:0 12px;font-size:8.5px;letter-spacing:.05em;
    box-shadow:none}
  .chipzeile .chip::before{display:none}
  /* Sie liegen jetzt auf hellem Grund statt auf der Ampulle — die weissen
     Chips brauchen deshalb eine sichtbare Kante. */
  .chipzeile .chip-coa{border:1px solid var(--line-strong)}
  /* Unter 380px passen sonst nicht zwei Chips nebeneinander und jeder
     bekaeme eine eigene Zeile. */
  @media(max-width:379px){
    .chipzeile{gap:6px}
    .chipzeile .chip{font-size:8px;padding:0 9px;min-height:28px}
  }

  /* --- DHL-Badge: dieselbe Pille wie am Desktop -------------------------- */
  /* --- DHL bleibt frei stehend an der Standflaeche ------------------------ */
  .stage .chip-dhl{bottom:-4%;font-size:9.5px;padding:6px 13px 6px 6px;gap:8px}
  .stage .chip-dhl .dhlk{width:12px;height:12px;padding:5px}

  /* --- Bewertung unter dem Kaufknopf, innerhalb der Leiste ---------------- */
  .buybar .chip-bewertung{display:inline-flex;align-items:center;
    justify-content:center;gap:7px;position:static;
    align-self:stretch;margin-top:11px;
    max-width:none;white-space:nowrap;
    min-height:32px;padding:0 13px;border-radius:999px;
    background:var(--tint);border:1px solid var(--line);box-shadow:none}
  .buybar .chip-bewertung::before{display:none}
  .bw-sterne{color:var(--sig-tief,#7fbe00);font-size:11px;letter-spacing:1px;line-height:1}
  .buybar .chip-bewertung b{font:800 11.5px/1 var(--f-sans);color:var(--ink)}
  .buybar .chip-bewertung small{font:600 9px/1 var(--f-sans);color:var(--ink-2);
    text-transform:uppercase;letter-spacing:.05em}

  /* --- Die beiden Handlungsknoepfe nebeneinander ------------------------- */
  .btns{flex-wrap:nowrap;gap:9px}
  .btns > .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;
    padding-left:12px;padding-right:12px;font-size:9.5px;letter-spacing:.04em;
    line-height:1.25;white-space:normal}
  .btns > .btn svg{flex:none}

  /* --- Die vier Kennzahlen in eine Reihe --------------------------------- */
  .metrics{flex-wrap:nowrap;gap:10px;align-items:flex-start}
  .metrics > div,.metrics dd{min-width:0}
  .metrics dd{font-size:17px}
  .metrics dt{font-size:8px;letter-spacing:.05em;white-space:nowrap}
}

/* ==========================================================================
   MOBIL: Vorteilsband als Laufband
   Statt zwei- bis vierzeilig gestapelt laufen beide Baender einzeilig
   endlos durch. Der Eintragssatz ist im Markup verdoppelt; die Schleife
   verschiebt um genau die halbe Breite, dadurch ist der Uebergang nahtlos.
   Gegenlaeufig, damit die beiden Baender sich nicht wie ein Block bewegen.
   ========================================================================== */
@media(max-width:1023px){
  .gifts .wrap,.trust .wrap{overflow:hidden;padding-left:0;padding-right:0}
  .gifts ul,.trust ul{
    display:flex!important;flex-wrap:nowrap;width:max-content;
    grid-template-columns:none!important;
    gap:0;align-items:center}
  .gifts ul{padding:14px 0;animation:bandLinks 32s linear infinite}
  .trust ul{padding:16px 0;animation:bandRechts 34s linear infinite}

  /* Der Abstand sitzt am Eintrag, nicht als gap — sonst zaehlt er beim
     letzten Element mit und der Umlauf bekaeme einen Sprung. */
  .gifts li,.trust li{flex:none;align-items:center;padding:0 26px;
    white-space:nowrap}
  .gifts li b,.trust li b,.gifts li small,.trust li small{white-space:nowrap}
  .trust b{margin-bottom:1px}

  /* Weiche Kanten, damit die Eintraege nicht hart abgeschnitten erscheinen */
  .gifts,.trust{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
}
/* Am Desktop stehen die Baender wieder im Raster — die Kopien fuer den
   Umlauf muessen dort weg, sonst ergaeben acht Eintraege zwei Zeilen.
   Betrifft den Fall, dass mobil geladen und dann vergroessert wird. */
@media(min-width:1024px){
  .gifts li[aria-hidden="true"],.trust li[aria-hidden="true"]{display:none}}
@keyframes bandLinks{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bandRechts{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){
  .gifts ul,.trust ul{animation:none}}

/* ==========================================================================
   BEWERTUNGEN — Laufband, Herkunft, Formular
   Das Laufband laeuft auf allen Breiten. Der Eintragssatz ist im Markup
   verdoppelt, die Schleife verschiebt um genau die halbe Breite — dadurch
   ist der Uebergang nahtlos (dasselbe Verfahren wie beim Vorteilsband).
   ========================================================================== */
.revs-band{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.revs-band .revs{display:flex!important;flex-wrap:nowrap;width:max-content;
  grid-template-columns:none!important;gap:0;align-items:stretch;
  animation:bwBand 110s linear infinite}
/* Abstand am Eintrag statt als gap: ein gap zaehlt beim letzten Element
   nicht mit, die Haelfte waere dann nicht exakt die Haelfte. */
.revs-band .rev{flex:none;width:318px;margin-right:16px}
@media(min-width:640px){.revs-band .rev{width:352px}}
.revs-band:hover .revs,.revs-band:focus-within .revs{animation-play-state:paused}
@keyframes bwBand{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .revs-band .revs{animation:none;overflow-x:auto}}

/* --- Herkunftsland --- */
.revland{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:10.5px;font-weight:600;color:var(--ink-2)}
.revflagge{display:block;width:15px;height:9px;flex:none;line-height:0;
  border:1px solid rgba(11,11,13,.12)}
.revflagge svg{width:100%;height:100%;display:block}

/* --- Knopf und Formular --- */
.bw-auf{display:inline-flex;align-items:center;gap:8px;flex:none;
  border-radius:10px;clip-path:none}
.bw-auf svg{flex:none}
.bwform{margin:0 0 24px;padding:22px;background:#fff;border:1px solid var(--line)}
.bwform[hidden]{display:none}
.bwf-titel{margin:0 0 14px;font:800 10px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-2)}
.bwf-sterne{display:flex;align-items:center;gap:4px;margin-bottom:16px}
.bwf-sterne button{border:0;background:transparent;cursor:pointer;padding:2px;
  font-size:23px;line-height:1;color:var(--line-strong);transition:color .14s}
.bwf-sterne button.an{color:var(--sig-tief,#7fbe00)}
.bwf-sterne button:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.bwf-sterntext{margin-left:8px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
/* Die Paarzeile traegt den Abstand nach unten selbst — die Felder darin
   haben keinen, sonst schoebe er die beiden Spalten auseinander. Ohne das
   klebte das Textfeld direkt am Namensfeld. */
.bwf-paar{display:grid;gap:14px;margin-bottom:16px}
@media(min-width:640px){.bwf-paar{grid-template-columns:1fr 1fr}}
.bwf-feld{margin:0 0 14px}
.bwf-paar .bwf-feld{margin:0}
.bwf-feld label{display:block;margin-bottom:5px;
  font:700 10px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-2)}
/* Spitze obere rechte Ecke wie sonst im Stil. Ein clip-path wuerde den
   Rand an der Schraege wegschneiden, deshalb traegt die Huelle die
   Randfarbe als Flaeche und das Feld liegt 1px darin — beide gleich
   beschnitten, dadurch bleibt an der Schraege ein sauberer Strich. */
.bwf-huelle{display:block;padding:1px;background:var(--line-strong);
  clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%);
  transition:background .16s}
.bwf-feld input,.bwf-feld textarea{display:block;width:100%;
  padding:11px 22px 11px 13px;background:var(--tint);color:var(--ink);
  border:0;border-radius:0;
  clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%);
  font:400 14px/1.5 var(--f-sans);transition:background .16s}
.bwf-feld textarea{resize:vertical;min-height:96px}
.bwf-feld input:focus,.bwf-feld textarea:focus{outline:none;background:#fff}
/* Der Fokus faerbt die Huelle — ein outline wuerde vom clip-path
   mitbeschnitten und waere an der Schraege nicht zu sehen. */
.bwf-huelle:focus-within{background:var(--cta)}
.bwf-feld input::placeholder,.bwf-feld textarea::placeholder{color:var(--ink-2)}
/* Pillenform wie "Zur Kasse" in der Warenkorb-Schublade — dieselbe Art
   von Handlung, dieselbe Form. Die Schraege ist im Markup entfallen. */
.bwf-senden{margin-top:4px;border-radius:999px;clip-path:none;
  padding-left:26px;padding-right:26px}
.bwf-hinweis{margin:12px 0 0;font-size:11.5px;color:var(--ink-2)}
.bwf-danke{margin:0;font:700 14px/1.5 var(--f-sans);color:var(--ink)}
.bwf-danke[hidden]{display:none}

/* ==========================================================================
   BELIEBTE FORSCHUNGSPEPTIDE
   Mobil zwei Karten je Reihe. Retatrutide belegt zwei Spalten und traegt
   eine Marke — damit ist auf einen Blick klar, welcher der Bestseller ist.
   ========================================================================== */
/* Zwei Spalten schon ab der kleinsten Breite, nicht erst ab 640.
   Eingegrenzt auf unter 640 — sonst wuerde diese Regel am Dateiende die
   Vier-Spalten-Regel fuer Desktop ueberschreiben. */
@media(max-width:639px){
  .grid4{grid-template-columns:1fr 1fr;gap:12px}
  .grid4 .card{padding:12px}
  .grid4 .card h3{font-size:14px}
  .grid4 .card .d{font-size:11px}
}

/* Retatrutide bleibt in der Reihe und behaelt die Kachelgroesse — die
   Hervorhebung laeuft ueber die Farbe: dunkle Kachel zwischen weissen,
   dazu die Limemarke. Kein Sprung im Raster. */
.card.spitzenreiter{position:relative;
  background:var(--nav);border-color:var(--nav);color:#fff;
  box-shadow:0 20px 40px -26px rgba(11,11,13,.6)}
.card.spitzenreiter:hover{border-color:var(--sig);
  box-shadow:0 26px 48px -26px rgba(11,11,13,.7)}
/* Das Produktbild braucht seine helle Flaeche, sonst verschwindet die
   Ampulle im dunklen Grund. */
.card.spitzenreiter .media{background:#fff;border-radius:4px}
.card.spitzenreiter h3{color:#fff}
.card.spitzenreiter .d{color:rgba(255,255,255,.6)}
.card.spitzenreiter .hp{color:var(--sig)}
.card.spitzenreiter .foot s{color:rgba(255,255,255,.45)}
.card.spitzenreiter .foot b{color:#fff}
/* Der Knopf faehrt beim Ueberfahren sonst eine dunkle Flaeche aus
   (.addbtn::before mit var(--ink)) — auf der schwarzen Kachel verschwaende
   er damit. Hier laeuft die Flaeche deshalb in unserem Lila ein, die
   Schrift wird weiss: gleiche Bewegung, sichtbarer Kontrast. */
.card.spitzenreiter .addbtn{background:var(--sig);color:var(--sig-ink)}
.card.spitzenreiter .addbtn::before{background:var(--cta)}
.card.spitzenreiter .addbtn:hover,
.card.spitzenreiter:hover .addbtn{color:#fff}

/* Kein Aufkleber, sondern eine Zeile im Textfluss ueber dem Produktnamen —
   ruhiger als ein Etikett auf dem Bild und nimmt der Kachel keinen Platz. */
.spitzenmarke{display:flex;align-items:center;gap:6px;
  margin:0 0 5px;color:var(--sig);
  font:800 8.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.13em}
.spitzenmarke svg{width:10px;height:10px;flex:none;margin-top:-1px}
.spitzenmarke em{font-style:normal}
.spitzenmarke b{font-weight:800}
@media(min-width:1024px){
  .spitzenmarke{font-size:9px;gap:7px}
  .spitzenmarke svg{width:11px;height:11px}}

/* Abschlussknopf unter dem Raster */
.pop-mehr{display:flex;justify-content:center;margin:26px 0 0}
.pop-mehr .btn{display:inline-flex;align-items:center;gap:9px;
  border-radius:999px;clip-path:none;padding:0 30px;min-height:50px}
.pop-mehr .btn svg{flex:none}

/* ==========================================================================
   DATENSICHERHEIT und GRUNDLAGENWISSEN
   Zwei eigenstaendige Abschnitte. Vorher waren sie zu einem Raster
   verschmolzen, wodurch die vier Merkmale auf zwei Haken zusammenfielen.
   ========================================================================== */

/* --- Datensicherheit --- */
.sicher{display:grid;gap:30px}
@media(min-width:1024px){
  .sicher{grid-template-columns:1fr 1fr;gap:52px;align-items:center}}
.sicher h2{font-size:26px;line-height:1.15;margin:0 0 16px}
@media(min-width:640px){.sicher h2{font-size:31px}}
/* Der zweite Satz traegt die Aussage — deshalb in der Signalfarbe */
.sicher h2 em{display:block;font-style:normal;color:var(--sig)}
.sicher p.body{margin:0;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.75)}

.sicher-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  list-style:none;margin:0;padding:0}
.sicher-kacheln li{display:flex;flex-direction:column;align-items:flex-start;
  padding:16px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  transition:border-color .2s,background .2s}
.sicher-kacheln li:hover{border-color:var(--sig);background:rgba(168,252,3,.06)}
.sk-ic{display:grid;place-items:center;width:34px;height:34px;margin-bottom:12px;
  background:rgba(168,252,3,.14);color:var(--sig)}
.sk-ic svg{width:17px;height:17px}
.sicher-kacheln b{font:700 12.5px/1.3 var(--f-sans);color:#fff;margin-bottom:3px}
.sicher-kacheln small{font-size:11px;line-height:1.45;color:rgba(255,255,255,.55)}
@media(min-width:640px){
  .sicher-kacheln li{padding:18px}
  .sicher-kacheln b{font-size:13.5px}
  .sicher-kacheln small{font-size:11.5px}}

/* --- Datensicherheit: feines Raster im Grund, wie im Bestand ------------- */
section.blk.dark:has(.sicher){position:relative;overflow:hidden}
section.blk.dark:has(.sicher)::before{content:"";position:absolute;inset:0;
  pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(168,252,3,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,252,3,.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 50%,#000,transparent 72%);
  mask-image:radial-gradient(120% 90% at 78% 50%,#000,transparent 72%)}
section.blk.dark:has(.sicher) > .wrap{position:relative;z-index:1}

/* ==========================================================================
   WISSENSBAND — "Was sind Peptide?"
   Eigenes Band ueber die volle Breite statt eines Kastens im Abschnitt.
   Das gelieferte Zeichen steht gross und angeschnitten im Grund, die
   Schraege des Bandes nimmt die Formensprache auf.
   ========================================================================== */
.wissenband{position:relative;overflow:hidden;
  background:var(--nav);color:#fff;
  padding:52px 0;
  border-top:3px solid var(--sig)}
@media(min-width:1024px){.wissenband{padding:68px 0}}

/* Schraeger Limekeil am rechten Rand */
.wissenband::before{content:"";position:absolute;top:0;bottom:0;right:-8%;width:46%;
  background:linear-gradient(120deg,rgba(168,252,3,.10),rgba(109,52,214,.16));
  transform:skewX(-11deg);pointer-events:none}

.wb-in{position:relative;z-index:1;display:grid;gap:26px;align-items:center}
@media(min-width:1024px){
  .wb-in{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:52px}}

/* --- Das Zeichen --- */
.wb-zeichen{position:relative;display:grid;place-items:center;
  width:170px;height:170px;justify-self:start}
@media(min-width:1024px){.wb-zeichen{width:280px;height:280px;justify-self:center}}
.wb-zeichen::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(168,252,3,.20),transparent 68%)}
.wb-zeichen img{position:relative;width:100%;height:100%;object-fit:contain;
  /* Die Datei bringt schwarze Pfade mit — hier auf Lime umgefaerbt */
  filter:brightness(0) saturate(100%) invert(84%) sepia(58%) saturate(1900%)
    hue-rotate(24deg) brightness(108%) contrast(101%);
  animation:wbSchweben 9s ease-in-out infinite}
@keyframes wbSchweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.wb-zeichen img{animation:none}}

/* --- Text --- */
.wissenband .slabel{background:var(--sig);color:var(--sig-ink)}
.wb-text h2{margin:0 0 14px;font-size:30px;line-height:1.1}
@media(min-width:640px){.wb-text h2{font-size:38px}}
@media(min-width:1024px){.wb-text h2{font-size:46px}}
.wb-text h2 em{font-style:normal;color:var(--sig)}
.wb-lead{margin:0 0 18px;font-size:14.5px;line-height:1.7;
  color:rgba(255,255,255,.72);max-width:62ch}
@media(min-width:640px){.wb-lead{font-size:15.5px}}

.wb-punkte{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 24px;padding:0}
.wb-punkte li{padding:7px 13px;background:rgba(255,255,255,.07);
  border-left:2px solid var(--sig);
  font:700 10.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.9)}

.wb-cta{display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 30px;border-radius:999px;
  background:var(--sig);color:var(--sig-ink);text-decoration:none;
  font:800 12px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.07em;
  transition:transform .18s ease-out,box-shadow .18s}
.wb-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(168,252,3,.75)}
.wb-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wb-cta svg{flex:none;transition:transform .18s ease-out}
.wb-cta:hover svg{transform:translateX(3px)}

/* ==========================================================================
   ANWENDUNGSGEBIETE — Symbol oben rechts, Kacheln etwas breiter
   Ab 1024px sitzt das Symbol in der oberen rechten Ecke statt ueber dem
   Titel. Dadurch beginnt der Text ganz oben und die Kachel wirkt breiter.
   Der engere Fugenabstand gibt jeder Kachel zusaetzliche Breite.
   ========================================================================== */
@media(min-width:1024px){
  /* Vier statt fuenf Spalten — die Regel steht hier am Dateiende und
     ueberschreibt damit die fruehere repeat(5,1fr). */
  .goals{grid-template-columns:repeat(4,1fr);gap:12px}
  /* Block statt Flex: nur so kann das Symbol schwimmen und der Text um es
     herumfliessen. Mit fester Aussparung waeren sonst auch die Zeilen
     unterhalb des Symbols verkuerzt. */
  .goal{display:block;padding:20px 22px}
  .goal .gi{position:static;float:right;width:38px;height:38px;
    margin:0 0 8px 14px}
  .goal .gi img{width:21px;height:21px}
  .goal b{display:block;margin:0 0 6px;padding-right:0;font-size:13.5px}
  .goal small{margin-top:0;font-size:11.5px}
  /* Der Float muss eingeschlossen bleiben, sonst faellt er aus der Kachel */
  .goal::after{content:"";display:block;clear:both}
}

/* ==========================================================================
   RECHNER & TOOLS
   Ab 1024px steht der Text links und die Kacheln rechts. Darunter bleibt
   die bisherige Anordnung: Text oben, Kacheln darunter.
   ========================================================================== */
.werkzeuge{display:grid;gap:26px}
@media(min-width:1024px){
  .werkzeuge{grid-template-columns:minmax(0,350px) minmax(0,1fr);
    gap:48px;align-items:start}
  /* Der Text bleibt beim Scrollen neben den Kacheln stehen */
  .wz-text{position:sticky;top:96px}
  /* Zwei Spalten statt vier — die Kacheln haben rechts weniger Platz */
  .werkzeuge .tools{grid-template-columns:1fr 1fr}
}
.wz-text h2{margin:0 0 12px;font-size:26px;line-height:1.15}
@media(min-width:640px){.wz-text h2{font-size:31px}}
@media(min-width:1024px){.wz-text h2{font-size:34px}}
.wz-lead{margin:0 0 22px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
@media(min-width:640px){.wz-lead{font-size:15px}}
.wz-cta{display:inline-flex;align-items:center;gap:10px;
  min-height:50px;padding:0 26px;border-radius:999px;
  background:var(--nav);color:#fff;text-decoration:none;
  font:800 11.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.07em;
  transition:background .18s,transform .18s ease-out}
.wz-cta:hover{background:var(--cta);transform:translateY(-2px)}
.wz-cta:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
.wz-cta svg{flex:none;transition:transform .18s ease-out}
.wz-cta:hover svg{transform:translateX(3px)}

/* ==========================================================================
   SEO-ABSCHNITT — Textspalte und Qualitaetskasten
   Der Kasten ist ab 1024px klebrig, damit er neben dem langen Text
   mitlaeuft statt am Anfang zu verschwinden.
   ========================================================================== */
@media(min-width:1024px){
  .seo{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
  /* Der Kasten steht im Markup zwischen den beiden Textteilen, damit er
     mobil zwischen Aufzaehlung und zweiter Ueberschrift landet. Am Desktop
     holen ihn diese Platzierungen zurueck in die rechte Spalte. */
  .prose-oben{grid-column:1;grid-row:1}
  .qkasten{grid-column:2;grid-row:1 / span 2;position:sticky;top:96px}
  .prose-unten{grid-column:1;grid-row:2}
}
/* Mobil folgt alles der Markup-Reihenfolge */
.prose-unten{margin-top:8px}
/* Abstand vor der zweiten Hauptueberschrift des Blocks */
.prose .seo-h2{margin-top:40px}
.prose a{color:var(--cta);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .16s}
.prose a:hover{color:var(--ink)}

.qkasten{align-self:start;background:#fff;border:1px solid var(--line);padding:24px}
@media(min-width:640px){.qkasten{padding:28px}}
.qkasten h2{margin:0 0 18px;font-size:22px;line-height:1.2;color:var(--ink)}
.qliste{margin:0 0 22px}
.qliste dt{font:700 13px/1.35 var(--f-sans);color:var(--ink)}
.qliste dd{margin:2px 0 14px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.qliste dd:last-of-type{margin-bottom:0}
.qkasten-cta{display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:0 22px;border-radius:999px;
  background:var(--nav);color:#fff;text-decoration:none;
  font:800 11px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;
  transition:background .18s,transform .18s ease-out}
.qkasten-cta:hover{background:var(--cta);transform:translateY(-2px)}
.qkasten-cta:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
.qkasten-cta svg{flex:none;transition:transform .18s ease-out}
.qkasten-cta:hover svg{transform:translateX(3px)}

/* ==========================================================================
   ANALYSEZERTIFIKATE — Laborbefund
   Statt einer Liste von Namen steht links ein vollstaendiger Befund mit
   Messwerten; rechts die geprueften Chargen. Ein Klick tauscht den Befund.
   ========================================================================== */
.labor{position:relative;overflow:hidden;background:var(--nav);color:#fff;
  padding:56px 0;border-top:3px solid var(--sig)}
@media(min-width:1024px){.labor{padding:58px 0}}
/* Feines Raster im Grund — Laboranmutung, sehr zurueckgenommen */
.labor::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(168,252,3,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,252,3,.05) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 80% at 30% 40%,#000,transparent 75%);
  mask-image:radial-gradient(120% 80% at 30% 40%,#000,transparent 75%)}
.labor > .wrap{position:relative;z-index:1}

.labor-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-end;gap:14px 28px;margin-bottom:26px}
.labor .slabel{background:var(--sig);color:var(--sig-ink)}
.labor-kopf h2{margin:0 0 12px;font-size:27px;line-height:1.12;color:#fff}
@media(min-width:640px){.labor-kopf h2{font-size:29px}}
.labor-kopf h2 em{font-style:normal;color:var(--sig)}
.labor-lead{margin:0;max-width:62ch;font-size:14px;line-height:1.7;
  color:rgba(255,255,255,.68)}
.labor-lead b{color:#fff;font-weight:700}
.labor .more{color:var(--sig)}

.labor-in{display:grid;gap:18px}
@media(min-width:1024px){
  .labor-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}}

/* --- Der Befund --- */
.befund{background:#fff;color:var(--ink);padding:24px;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
@media(min-width:640px){.befund{padding:26px}}
.bf-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.bf-marke{display:inline-block;margin:0 0 8px;padding:5px 10px;
  background:var(--sig);color:var(--sig-ink);
  font:800 8.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.1em}
.bf-kopf h3{margin:0 0 5px;font:700 21px/1.15 var(--f-display);letter-spacing:-.02em}
@media(min-width:640px){.bf-kopf h3{font-size:22px}}
.bf-charge{margin:0;font-size:11.5px;color:var(--ink-2)}
.bf-siegel{display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:999px;background:var(--sig);color:var(--sig-ink)}
.bf-siegel svg{width:22px;height:22px}

.bf-wert{padding:18px 0 16px;border-bottom:1px solid var(--line)}
.bf-zahl{display:flex;align-items:baseline;gap:3px;margin:0}
.bf-zahl b{font:800 52px/1 var(--f-display);font-style:italic;letter-spacing:-.03em}
@media(min-width:640px){.bf-zahl b{font-size:50px}}
.bf-zahl em{font:800 22px/1 var(--f-display);font-style:italic;color:var(--ink-2)}
.bf-label{margin:6px 0 12px;font:700 10px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-2)}
.bf-balken{display:block;height:7px;overflow:hidden;background:var(--tint2)}
.bf-balken i{display:block;height:100%;
  background:linear-gradient(90deg,#8FD400,var(--sig));
  transition:width .5s cubic-bezier(.4,0,.2,1)}

.bf-zeilen{margin:0;padding:15px 0 19px}
.bf-zeilen > div{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:9px 0;border-bottom:1px dashed var(--line)}
.bf-zeilen > div:last-child{border-bottom:0}
.bf-zeilen dt{font-size:12.5px;color:var(--ink-2)}
.bf-zeilen dd{margin:0;font-size:12.5px;font-weight:700;color:var(--ink);
  text-align:right}

.bf-cta{display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:0 24px;border-radius:999px;
  background:var(--nav);color:#fff;text-decoration:none;
  font:800 11px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;
  transition:background .18s,transform .18s ease-out}
.bf-cta:hover{background:var(--cta);transform:translateY(-2px)}
.bf-cta:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
.bf-cta svg{flex:none;transition:transform .18s ease-out}
.bf-cta:hover svg{transform:translateX(3px)}

/* --- Die Chargenliste --- */
.zliste{display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.zliste-kopf{display:flex;align-items:center;justify-content:space-between;
  margin:0;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.14);
  font:800 9.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.55)}
.zliste-zahl{color:var(--sig)}
.zliste ul{list-style:none;margin:0;padding:0;max-height:432px;overflow-y:auto}
@media(min-width:1024px){.zliste ul{max-height:368px}}
.zliste li + li{border-top:1px solid rgba(255,255,255,.08)}
.zliste button{display:grid;grid-template-columns:1fr auto auto 14px;
  align-items:center;gap:12px;width:100%;
  padding:13px 18px;border:0;background:transparent;cursor:pointer;text-align:left;
  transition:background .16s}
.zliste button:hover{background:rgba(255,255,255,.06)}
.zliste button[aria-current="true"]{background:rgba(168,252,3,.10);
  box-shadow:inset 3px 0 0 var(--sig)}
.zliste button:focus-visible{outline:2px solid var(--sig);outline-offset:-2px}
.zl-name{font:700 13px/1.3 var(--f-sans);color:#fff;min-width:0}
.zl-charge{font-size:10.5px;color:rgba(255,255,255,.4)}
@media(max-width:479px){.zl-charge{display:none}}
.zl-rein{font:700 12.5px/1 var(--f-mono);color:var(--sig)}
.zl-pfeil{font-size:17px;line-height:1;color:rgba(255,255,255,.35)}
.zliste button[aria-current="true"] .zl-pfeil{color:var(--sig)}

.zliste-alle{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:16px;border-top:1px solid rgba(255,255,255,.14);
  color:var(--sig);text-decoration:none;
  font:800 10.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.08em;
  transition:background .16s}
.zliste-alle:hover{background:rgba(168,252,3,.08)}
.zliste-alle svg{flex:none;transition:transform .18s ease-out}
.zliste-alle:hover svg{transform:translateX(3px)}

@media(prefers-reduced-motion:reduce){
  .bf-balken i,.bf-cta,.zliste button{transition:none}}

/* Auf grossen Schirmen wirkte der Block zu wuchtig — enger gefasst und
   der Befund etwas breiter als die Liste, damit die Zahlen tragen. */
@media(min-width:1024px){
  .labor-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:20px;
    max-width:1000px;margin:0 auto}
  .labor-kopf{max-width:1000px;margin-left:auto;margin-right:auto}
  .labor-lead{font-size:13.5px;max-width:56ch}
  .zliste button{padding:11px 16px}
  .bf-cta{min-height:46px;padding:0 22px}
}

/* --------------------------------------------------------------------------
   Charge noch im Labor
   Kein Befund, also auch keine Zahl: Statt Reinheit steht ein Strich, der
   Balken laeuft unbestimmt weiter und die Messzeilen sagen "ausstehend".
   Ausgeloest wird das allein durch eine leere Reinheit in ZERT.
   -------------------------------------------------------------------------- */
.befund-laeuft{--wartet:#D9891B}
.befund-laeuft .bf-marke{background:rgba(217,137,27,.14);color:var(--wartet);
  box-shadow:inset 0 0 0 1px rgba(217,137,27,.4)}
.befund-laeuft .bf-siegel{background:rgba(217,137,27,.12);color:var(--wartet);
  box-shadow:inset 0 0 0 1.5px rgba(217,137,27,.35)}
.befund-laeuft .bf-siegel svg{animation:bf-dreh 3.6s ease-in-out infinite}
@keyframes bf-dreh{0%,72%{transform:rotate(0)}86%,100%{transform:rotate(180deg)}}

/* Die Ziffern fehlen noch — die Form des Befunds bleibt trotzdem stehen,
   damit spaeter nur die Zahl einrueckt und nichts springt. */
.bf-skelett{color:transparent;border-radius:4px;
  background:linear-gradient(100deg,#E7E4DC 34%,#F6F5F1 50%,#E7E4DC 66%);
  background-size:260% 100%;animation:bf-schimmer 1.7s linear infinite}
@keyframes bf-schimmer{0%{background-position:130% 0}100%{background-position:-30% 0}}
.bf-wartet .bf-zahl em{color:#C9C6BE}
.bf-wartet .bf-label{color:var(--wartet)}
.bf-balken-laeuft{position:relative;background:var(--tint2)}
.bf-balken-laeuft i{width:34%;
  background:linear-gradient(90deg,transparent,var(--wartet),transparent);
  animation:bf-lauf 1.9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bf-lauf{0%{transform:translateX(-110%)}100%{transform:translateX(400%)}}

.befund-laeuft .bf-zeilen dd{font-weight:600;color:var(--ink-3,#8A8A82);
  font-style:italic}
.bf-hinweis{margin:0 0 16px;padding:11px 13px;
  background:rgba(217,137,27,.08);border-left:3px solid var(--wartet);
  font-size:12px;line-height:1.55;color:var(--ink-2)}
.bf-cta-still{background:transparent;color:var(--nav);
  box-shadow:inset 0 0 0 1.5px var(--nav)}
.bf-cta-still:hover{background:var(--nav);color:#fff}

/* Liste: laufende Chargen bleiben lesbar, treten aber zurueck */
.zl-rein-laeuft{display:inline-flex;align-items:center;gap:6px;
  font:700 10px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.08em;
  color:#E0A44A}
.zl-rein-laeuft::before{content:"";width:6px;height:6px;border-radius:999px;
  background:currentColor;animation:zl-puls 1.8s ease-in-out infinite}
@keyframes zl-puls{0%,100%{opacity:1}50%{opacity:.25}}
.zliste .zl-laeuft .zl-name{color:rgba(255,255,255,.82)}
.zliste .zl-laeuft[aria-current="true"]{background:rgba(224,164,74,.10);
  box-shadow:inset 3px 0 0 #E0A44A}
.zliste .zl-laeuft[aria-current="true"] .zl-pfeil{color:#E0A44A}

@media(prefers-reduced-motion:reduce){
  .bf-balken-laeuft i{animation:none;width:100%;opacity:.5}
  .bf-skelett{animation:none}
  .befund-laeuft .bf-siegel svg,.zl-rein-laeuft::before{animation:none}}


/* Gruppenkoepfe in der Chargenliste */
.zl-gruppe{padding:11px 18px 7px;
  font:800 8.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.13em;
  color:rgba(255,255,255,.38);background:rgba(255,255,255,.03)}
.zliste li.zl-gruppe + li{border-top:0}
.zliste li + li.zl-gruppe{border-top:1px solid rgba(255,255,255,.14)}
@media(min-width:1024px){.zliste ul{max-height:392px}}

/* ==========================================================================
   WHATSAPP-BESTELLUNG auf der Produktseite
   Steht dort, wo vorher der COA-Knopf sass. Bewusst im WhatsApp-Gruen —
   der Knopf lebt vom Wiedererkennen, nicht von der Hausfarbe.
   ========================================================================== */
.wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:52px;padding:0 22px;border:0;
  background:#25D366;color:#0B2E17;text-decoration:none;
  font:800 12.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.05em;
  transition:background .18s,transform .18s ease-out}
.wa-btn:hover{background:#1FBE5A;transform:translateY(-2px)}
.wa-btn:focus-visible{outline:2px solid var(--nav);outline-offset:3px}
.wa-btn svg{flex:none}
@media(prefers-reduced-motion:reduce){.wa-btn{transition:none}.wa-btn:hover{transform:none}}

/* ==========================================================================
   PRODUKTSEITE — Nachbesserungen
   ========================================================================== */
/* --- Versandzeile und DHL-Marke nebeneinander unter dem WhatsApp-Knopf ---
   Die Marke sass vorher im Vertrauenskasten. Hier steht sie dort, wo ueber
   Versand entschieden wird. Beide Angaben eine Spur kleiner, damit sie in
   eine Zeile passen. */
.versandrow{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:10px 16px;margin:12px 0 0}
.versandrow .versandzeile{margin:0;flex:1 1 210px;min-width:0;font-size:11px}
.versandrow-dhl{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.versandrow-dhl .dhlbadge{padding:4px 13px 4px 4px;gap:7px}
.versandrow-dhl .dhlbadge-ic{width:22px;height:22px}
.versandrow-dhl .dhlbadge-ic svg{width:13px;height:13px}
.versandrow-dhl .dhlbadge-t{font-size:10px;letter-spacing:.045em}
.versandrow-dhl .dhlbadge-zusatz{font-size:10px;color:var(--ink-2)}
/* Unter 620px untereinander, beide linksbuendig.
   flex-basis wirkt in Spaltenrichtung auf die Hoehe — das 210px-Basismass
   der Versandzeile blies sie sonst auf 210px Hoehe auf. Deshalb hier
   ausdruecklich zuruecksetzen. */
@media(max-width:619px){
  .versandrow{flex-direction:column;flex-wrap:nowrap;
    align-items:flex-start;justify-content:flex-start;gap:11px}
  .versandrow .versandzeile{flex:0 0 auto;width:100%}
  .versandrow-dhl{align-items:flex-start}}

/* --- Zweite Fassung des WhatsApp-Knopfs: abgerundet --- */
.wa-btn.wa-rund{border-radius:999px}

/* --- Zweite Fassung der Rabattmarke: rund und in unserem Lila --- */
.badge.tag-rund{border-radius:999px;padding:7px 13px}
.badge.tag-lila{background:var(--cta);color:#fff}

/* Produktseiten: Text-Hyperlinks tragen sichtbar die lila Handlungsfarbe.
   Bewusst ausgenommen sind Kaufbuttons, Tool-Kacheln und Produktkarten; deren
   Flaechen- und Kontrastsystem bleibt unveraendert. Diese unlayered Regeln
   schlagen das globale `a{color:inherit}` gezielt nur in Linkrollen. */
.product-page .krumezeile a,
.product-page .product-richtext a,
.product-page .product-author-link,
.product-page .product-aside-link,
.product-page .weiterlinks a,
.product-page .product-reference-link,
.product-page .product-analysis-link,
.product-page .crosssek .shead a.more{
  color:var(--cta);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--cta) 38%,transparent);
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color .18s,text-decoration-color .18s}
.product-page .krumezeile a:hover,
.product-page .product-richtext a:hover,
.product-page .product-author-link:hover,
.product-page .product-aside-link:hover,
.product-page .weiterlinks a:hover,
.product-page .product-reference-link:hover,
.product-page .product-analysis-link:hover,
.product-page .crosssek .shead a.more:hover{
  color:var(--cta-hover);text-decoration-color:currentColor}
.product-page .product-goal-link{
  color:var(--cta);border-color:color-mix(in srgb,var(--cta) 35%,var(--line));
  background:color-mix(in srgb,var(--cta) 5%,#fff);text-decoration:none}
.product-page .product-goal-link:hover{
  color:var(--cta-hover);border-color:var(--cta);background:var(--tint2)}

/* Der Vertrauenskasten traegt jetzt Laborzeile und Zahlungsarten. Zwischen
   beiden steht bewusst keine Linie — sie gehoeren zusammen als eine Zusage. */
.vertrauenspaar .vp-labor{border-bottom:0;padding-bottom:4px}
.vertrauenspaar .zahlblock{margin:0;padding:8px 15px 15px;border-top:0}
.vertrauenspaar .zahl-label{margin-bottom:9px}

/* ==========================================================================
   MENGENRABATT UND ZAHLUNGSARTEN AUF SCHMALEN SCHIRMEN
   ========================================================================== */
/* Desktop: die beiden Preisangaben stehen in einer Zeile, getrennt durch
   einen Mittelpunkt — wie vorher, nur jetzt als zwei Elemente. */
.stufe-preise{display:flex;flex-wrap:wrap;gap:0 5px}
.stufe-spar::before{content:"·";margin-right:5px;color:var(--line-strong)}

/* Mobil eine Liste: eine Zeile je Stufe, Sparbetrag rechts am Rand.
   display:contents loest die Preishuelle auf, damit ihre beiden Felder
   direkt in der Zeile mitlaufen und der Sparbetrag nach rechts kann. */
@media(max-width:639px){
  .stufen{grid-template-columns:1fr;gap:7px}
  .stufe{flex-direction:row;align-items:center;gap:9px;padding:10px 12px}
  .stufe b{font-size:13px;min-width:30px}
  .stufe em{margin:0;flex:none}
  .stufe .stufe-preise{display:contents}
  .stufe-je{color:var(--ink-2)}
  .stufe-spar{margin-left:auto;font-weight:700;color:var(--ink);white-space:nowrap}
  .stufe.on .stufe-spar{color:var(--sig-ink)}
  .stufe-spar::before{content:none}
}

/* Alle sieben Zahlungsarten in eine Reihe: feste Kachelbreiten passen dort
   nicht, deshalb teilen sie sich die Breite zu gleichen Teilen. */
@media(max-width:639px){
  .zahl-karten{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
  .zahl-karten .zk{width:auto;height:30px;min-width:0}
  .zahl-karten .zk svg{width:100%;height:auto;max-height:16px}
}

/* ==========================================================================
   TECHNISCHE DATEN — rechte Spalte der Produktbeschreibung
   Der Weiterfuehrend-Kasten sitzt darunter. Die Spalte ist auf der
   Produktseite breiter als sonst, sonst brechen die Werte in jeder Zeile.
   ========================================================================== */
@media(min-width:1024px){.seo-pdp{grid-template-columns:1fr 400px}}
/* Zwischen 1024 und 1180px wird die Textspalte sonst zu schmal */
@media(min-width:1024px) and (max-width:1179px){.seo-pdp{grid-template-columns:1fr 340px;gap:32px}}
/* Die Huelle traegt hier keine eigene Flaeche mehr — die beiden Kaesten
   darin bringen ihre eigene mit. */
.aside-pdp{background:transparent;border:0;padding:0;display:grid;gap:22px;
  align-content:start}
@media(min-width:1024px){.aside-pdp{position:sticky;top:96px}}
.aside-pdp > h2{margin-top:0}

.technik{background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden}
/* .aside p ist spezifischer als .tech-kopf und faerbte die Kopfzeile grau
   und gab ihr einen Aussenabstand — deshalb hier mit Elternselektor. */
.aside .tech-kopf{margin:0;padding:13px 17px;background:var(--nav);color:#fff;
  font:800 11.5px/1 var(--f-sans);letter-spacing:.05em}
.tech-liste{margin:0;padding:0 17px 4px}
.tech-liste > div{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.tech-liste > div:last-child{border-bottom:0}
.tech-liste dt{flex:0 0 33%;font-size:12px;line-height:1.4;color:var(--ink-2)}
/* Kein hyphens:auto — die Trennung zerlegte Begriffe wie "modifiziertes"
   mitten im Wort und machte die Spalte unruhig. */
.tech-liste dd{margin:0;flex:1;min-width:0;font-size:12px;line-height:1.45;
  font-weight:600;color:var(--ink);text-align:right}

/* Freistehend unter dem Datenkasten — kein eigener Rahmen, keine Flaeche. */
.zielblock{padding:0 2px}
.aside .tech-zielkopf{margin:0 0 9px;padding:0;border-top:0;
  font:800 9.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-2)}
/* Immer zwei nebeneinander. Mit flex und fester Textbreite passten sie in der
   schmalen Spalte (340px bei 1024px Fenster) nicht in eine Zeile — als Raster
   mit zwei gleichen Spalten teilen sie sich die Breite und brechen notfalls
   innerhalb der Marke um, statt untereinander zu rutschen. */
.aside .tech-ziele{display:grid;grid-template-columns:1fr 1fr;gap:7px;
  list-style:none;margin:0;padding:0;font-size:11px}
.aside .tech-ziele li{border-bottom:0;display:flex}
.aside .tech-ziele a{display:flex;align-items:center;justify-content:center;
  width:100%;padding:8px 12px;border-radius:999px;text-align:center;line-height:1.3;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-weight:700;
  text-decoration:none;
  transition:border-color .18s,background .18s,color .18s}
.aside .tech-ziele a:hover{border-color:var(--cta);background:var(--tint);
  color:var(--cta);text-decoration:none}

/* Der Weiterfuehrend-Kasten behaelt seine getoente Flaeche. Ueberschrift und
   Liste stecken dafuer in einer eigenen Huelle — als zwei Rasterfelder haette
   der 22px-Abstand der Spalte den Kasten mitten durchgeschnitten. */
.weiterbox{background:var(--tint);border:1px solid var(--line);
  border-radius:14px;padding:18px}
.aside-pdp .weiterbox h2{margin:0 0 6px}
.aside-pdp .weiterbox ul{margin:0}

/* ==========================================================================
   SERVICEKACHELN auf der Produktseite
   Drei Zusagen ueber dem Lexikon-Teaser. Die beiden Versand-Symbole stammen
   aus dem Vorteilsband der Startseite, damit dieselbe Zusage nicht zweimal
   anders aussieht. Die Lime-Flaeche ist rund gefasst wie die Symbolfelder in
   der Fusszeile und im Pen-Abschnitt.
   ========================================================================== */
.service3{display:grid;gap:14px;list-style:none;margin:0;padding:0;
  grid-template-columns:1fr}
@media(min-width:700px){.service3{grid-template-columns:repeat(3,1fr)}}
.service3 li{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:26px 20px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  transition:border-color .18s,box-shadow .2s,transform .2s ease-out}
.service3 li:hover{border-color:var(--sig-ink);transform:translateY(-2px);
  box-shadow:0 14px 28px -20px rgba(19,16,32,.45)}
.sv-ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:11px;
  border-radius:13px;background:var(--sig);color:var(--sig-ink)}
.sv-ic img{width:21px;height:21px;display:block}
.sv-ic svg{width:22px;height:22px;display:block}
.service3 b{font:800 11.5px/1.3 var(--f-sans);text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink)}
.service3 small{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){
  .service3 li{transition:none}.service3 li:hover{transform:none}}

/* ==========================================================================
   KOSTENLOSE PEPTID-TOOLS auf der Produktseite
   Dunkle Tafel unter den Servicekacheln. Die sechs Rechner stehen im Raster,
   der Finder darunter ueber die volle Breite — er ist der Einstieg, wenn man
   noch nicht weiss, wonach man sucht, und schliesst die Reihe sauber ab,
   statt als einzelne Karte in der letzten Zeile stehen zu bleiben.
   ========================================================================== */
.ptools{position:relative;overflow:hidden;isolation:isolate;
  background:var(--nav);color:#fff;border-radius:22px;
  padding:34px 22px 26px}
@media(min-width:768px){.ptools{padding:44px 40px 36px}}
/* Feines Raster im Grund, wie im Laborabschnitt */
.pt-raster{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(168,252,3,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,252,3,.055) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0,#000,transparent 78%)}

.pt-kopf{text-align:center;margin-bottom:26px}
.ptools .slabel{background:var(--sig);color:var(--sig-ink)}
.pt-kopf h2{margin:12px 0 10px;font-size:27px;line-height:1.12;color:#fff}
@media(min-width:640px){.pt-kopf h2{font-size:33px}}
.pt-kopf h2 em{font-style:normal;color:var(--sig)}
.pt-lead{margin:0 auto;max-width:56ch;font-size:13.5px;line-height:1.6;
  color:rgba(255,255,255,.66)}

.pt-gitter{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.pt-gitter{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.pt-gitter{grid-template-columns:repeat(3,1fr)}}

.pt-karte{display:flex;align-items:center;gap:13px;
  padding:15px 16px;border-radius:14px;text-decoration:none;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  transition:background .18s,border-color .18s,transform .2s ease-out}
.pt-karte:hover{background:rgba(255,255,255,.08);border-color:rgba(168,252,3,.45);
  transform:translateY(-2px)}
.pt-karte:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
.pt-ic{display:grid;place-items:center;width:42px;height:42px;flex:none;
  border-radius:12px;background:var(--sig);color:var(--sig-ink)}
.pt-ic svg{width:20px;height:20px;display:block}
.pt-t{min-width:0;flex:1}
.pt-t b{display:block;font:700 13.5px/1.3 var(--f-sans);color:#fff}
.pt-t small{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;
  color:rgba(255,255,255,.55)}
.pt-pfeil{flex:none;color:rgba(255,255,255,.3);transition:color .18s,transform .2s ease-out}
.pt-karte:hover .pt-pfeil{color:var(--sig);transform:translateX(3px)}

/* Der Finder schliesst die Tafel ab — etwas kraeftiger als die uebrigen. */
.pt-finder{margin-top:12px;
  background:rgba(168,252,3,.09);border-color:rgba(168,252,3,.3)}
.pt-finder:hover{background:rgba(168,252,3,.14)}
.pt-finder .pt-pfeil{color:rgba(168,252,3,.65)}

@media(prefers-reduced-motion:reduce){
  .pt-karte,.pt-pfeil{transition:none}
  .pt-karte:hover{transform:none}.pt-karte:hover .pt-pfeil{transform:none}}

/* ==========================================================================
   PASSENDE FORSCHUNGSPEPTIDE — mobile Abweichungen
   Auf Desktop bleibt alles wie gehabt: spitze Knoepfe, "Alle ansehen" oben
   rechts in der Kopfzeile.
   ========================================================================== */
@media(max-width:1023px){
  /* Runde Knoepfe. clip-path faellt weg, die Fuellung von links laeuft
     weiter — sie wird jetzt vom border-radius beschnitten. */
  .crosssek .ck-cta{clip-path:none;border-radius:999px}

  /* "Alle ansehen" unter das Raster. display:contents loest die Kopfzeile
     auf, damit ihre beiden Teile als eigene Rasterfelder in der Spalte
     mitlaufen und einzeln sortiert werden koennen. */
  .crosssek > .wrap{display:grid;grid-template-columns:1fr;gap:14px}
  .crosssek .shead{display:contents}
  /* Rasterfelder werden von Haus aus auf die Spurbreite gedehnt — die
     Marke lief dadurch ueber die ganze Zeile statt nur ueber ihren Text. */
  .crosssek > .wrap > .slabel{order:1;margin-bottom:0;justify-self:start}
  .crosssek .shead > div{order:2}
  .crosssek .crossgrid{order:3;margin-top:2px}
  .product-page .crosssek .shead a.more{order:4;justify-self:center;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;margin:4px 0 6px;padding:13px 30px;border-radius:999px;
    background:var(--cta);color:#fff;text-decoration:none;
    font-size:11.5px;line-height:1.2;letter-spacing:.06em;
    transition:background .18s}
  .product-page .crosssek .shead a.more:hover{
    background:var(--cta-hover);color:#fff;text-decoration:none}
}

/* ==========================================================================
   AUSWAHL LAEUFT AUS DER MITTE EIN (Variante und Mengenrabatt)
   Ein Kreis waechst aus dem Kachelmittelpunkt, bis er die Flaeche deckt. Die
   Breite ist mit 170 % so gewaehlt, dass der Kreis auch die Diagonale der
   flachsten Kachel ueberdeckt — sonst blieben die Ecken hell.
   ========================================================================== */
.chipbtn::before,.stufe::before{content:"";position:absolute;z-index:-1;
  left:50%;top:50%;width:170%;aspect-ratio:1;
  border-radius:50%;background:var(--sig);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s cubic-bezier(.35,.05,.25,1)}
.chipbtn.on::before,.stufe.on::before{transform:translate(-50%,-50%) scale(1)}
@media(prefers-reduced-motion:reduce){
  .chipbtn::before,.stufe::before{transition:none}}

/* --------------------------------------------------------------------------
   Mengenrabatt auf Desktop: Menge und Rabattmarke in einer Zeile
   Die Marke stand unter der Menge und zog jede Kachel unnoetig in die Hoehe.
   -------------------------------------------------------------------------- */
@media(min-width:640px){
  .stufe{display:grid;grid-template-columns:auto 1fr;align-items:center;
    gap:3px 9px}
  .stufe b{grid-column:1;grid-row:1}
  .stufe em{grid-column:2;grid-row:1;justify-self:start;margin:0}
  .stufe .stufe-preise{grid-column:1 / -1;grid-row:2}
}

/* ==========================================================================
   KATEGORIESEITE
   ========================================================================== */
.pagehead .kat-lead{margin:8px 0 0;font-size:14.5px;line-height:1.6;
  color:rgba(255,255,255,.72);max-width:62ch}

/* --- Merkmalsleiste direkt unter der Kopfzeile --- */
.katfakten{background:#fff;border-bottom:1px solid var(--line)}
.katfakten ul{display:grid;gap:16px 26px;list-style:none;margin:0;padding:22px 0;
  grid-template-columns:1fr}
@media(min-width:560px){.katfakten ul{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.katfakten ul{grid-template-columns:repeat(4,1fr)}}
.katfakten li{position:relative;padding-left:17px}
.katfakten li::before{content:"";position:absolute;left:0;top:6px;
  width:7px;height:7px;border-radius:999px;background:var(--sig);
  box-shadow:0 0 0 3px rgba(168,252,3,.22)}
.katfakten b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.katfakten small{display:block;margin-top:2px;font-size:12px;line-height:1.45;
  color:var(--ink-2)}

/* --- Zweispaltiger Aufbau: Produkte links, Randkaesten rechts --- */
.katgrid{display:grid;gap:26px}
@media(min-width:1024px){
  .katgrid{grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}}
.katmain{min-width:0}
.kat-sub{margin:0 0 20px;padding:18px 20px;border-radius:14px;
  background:var(--tint);border:1px solid var(--line);
  font-size:14.5px;line-height:1.65;color:var(--ink-2)}
/* Drei Kacheln je Reihe — die Randspalte nimmt sonst zu viel Breite. */
@media(min-width:1024px){.katliste{grid-template-columns:repeat(3,1fr)}}

.katside{display:grid;gap:16px}
@media(min-width:1024px){.katside{position:sticky;top:96px}}
.katbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.katbox-kopf{margin:0 0 6px;font:800 9.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-2)}
.katbox ul{list-style:none;margin:0;padding:0}
.katbox li{border-bottom:1px solid var(--line)}
.katbox li:last-child{border-bottom:0}
.katbox a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 0;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
  transition:color .18s}
.katbox a span{color:var(--cta);transition:transform .2s ease-out}
.katbox a:hover{color:var(--cta)}
.katbox a:hover span{transform:translateX(3px)}
/* Verwandte Ziele stehen als Marken, nicht als Liste */
.katbox-ziele{background:var(--tint)}
.katbox-ziele ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.katbox-ziele li{border-bottom:0}
.katbox-ziele a{padding:8px 13px;border-radius:999px;background:#fff;
  border:1px solid var(--line-strong);font-size:12.5px;font-weight:700}
.katbox-ziele a:hover{border-color:var(--cta);color:var(--cta)}

/* --- Beliebt-Marke auf der Produktkachel --- */
.card{position:relative}
.beliebt{position:absolute;z-index:2;top:12px;right:12px;
  padding:6px 11px;border-radius:999px;
  background:var(--sig);color:var(--sig-ink);
  font:800 9px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.09em}

@media(prefers-reduced-motion:reduce){.katbox a span{transition:none}}

/* Lange Kategorienamen wie "Gewebe- & Verletzungsregeneration" sind ein
   einziges Wort ohne Trennmoeglichkeit — auf schmalen Schirmen malte die
   Ueberschrift ueber ihren Kasten hinaus und die Seite scrollte seitlich
   (bei 360px um 122px). Trennung erlauben und den Satz dort kleiner setzen. */
/* Auf dem dunklen Kopfbalken traegt die Marke die Signalfarbe — das dunkle
   Standardfeld verschwand darauf fast. */
.pagehead .slabel{background:var(--sig);color:var(--sig-ink)}

.pagehead h1{overflow-wrap:break-word;hyphens:auto}
@media(max-width:559px){
  .pagehead h1{font-size:23px}
  .pagehead .kat-lead{font-size:13.5px}}

/* --- Hinweis zur Verwendung als eigener Kasten --- */
.hinweisbox{margin:30px 0 0;padding:20px 22px;border-radius:14px;
  background:var(--tint);border:1px solid var(--line)}
.hinweisbox b{display:block;margin-bottom:6px;font-size:15px;font-weight:700;color:var(--ink)}
.hinweisbox p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-2)}

/* --- Alle Produkte & Kapseln dieses Ziels --- */
.zielliste{margin:18px 0 0;padding:22px 24px;border-radius:14px;
  background:#fff;border:1px solid var(--line)}
.zielliste-kopf{margin:0 0 6px;font:800 9.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-2)}
/* Mehrspaltiger Textfluss statt Raster: so laeuft die erste Spalte erst voll
   (Vials), bevor die zweite beginnt (Kapseln) — wie im Bestand. Ein Raster
   haette die Eintraege zeilenweise verteilt. */
.zielliste ul{list-style:none;margin:0;padding:0;column-gap:34px}
@media(min-width:700px){.zielliste ul{column-count:2}}
.zielliste li{break-inside:avoid;border-bottom:1px solid var(--line)}
.zielliste a{display:flex;align-items:baseline;gap:11px;padding:12px 2px;
  font-size:14px;color:var(--ink-2);text-decoration:none;
  transition:color .18s}
.zielliste a span{color:var(--cta);flex:none;transition:transform .2s ease-out}
.zielliste a:hover{color:var(--cta)}
.zielliste a:hover span{transform:translateX(3px)}

/* --- Band ueber dem Footer: eigener Inhalt auf Kategorieseiten --- */
.katband .cb-knoepfe{display:flex;flex-wrap:wrap;gap:12px;flex:none}
.katband .cb-cta,.katband .cb-zweit{min-height:54px;padding:0 30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:0;text-decoration:none;
  font:800 12px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  transition:background .18s,color .18s,transform .18s ease-out}
.katband .cb-cta{background:var(--nav);color:#fff}
.katband .cb-cta:hover{background:var(--cta);transform:translateY(-2px)}
/* Beide Knoepfe dunkel. Ein Umriss statt einer Flaeche kaeme hier nicht in
   Frage — der clip-path schneidet an den Schraegen jeden Rand weg. */
.katband .cb-zweit{background:var(--nav);color:#fff}
.katband .cb-zweit:hover{background:var(--cta);transform:translateY(-2px)}
@media(max-width:640px){
  .katband .cb-knoepfe{width:100%}
  .katband .cb-cta,.katband .cb-zweit{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){
  .katband .cb-cta,.katband .cb-zweit{transition:none}
  .katband .cb-cta:hover,.katband .cb-zweit:hover{transform:none}}

/* ==========================================================================
   MOBIL: Merkmalsleiste der Kategorieseite als Laufband
   Dasselbe Verfahren wie beim Vorteilsband der Startseite: verdoppelter
   Satz, Verschiebung um genau die halbe Breite, dadurch nahtloser Umlauf.
   ========================================================================== */
@media(max-width:1023px){
  .katfakten .wrap{overflow:hidden;padding-left:0;padding-right:0}
  .katfakten ul{display:flex!important;flex-wrap:nowrap;width:max-content;
    grid-template-columns:none!important;gap:0;align-items:center;
    padding:18px 0;animation:bandLinks 30s linear infinite}
  /* Abstand am Eintrag statt als gap — ein gap zaehlt beim letzten Element
     nicht mit, die Haelfte waere dann nicht exakt die Haelfte. */
  .katfakten li{flex:none;padding:0 24px 0 41px;white-space:nowrap}
  .katfakten li::before{left:24px}
  .katfakten b,.katfakten small{white-space:nowrap}
  .katfakten{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
}
/* Am Desktop steht die Leiste wieder im Raster — die Kopien muessen dort weg,
   sonst ergaeben acht Eintraege zwei Zeilen. */
@media(min-width:1024px){.katfakten li[aria-hidden="true"]{display:none}}
@media(prefers-reduced-motion:reduce){.katfakten ul{animation:none}}

/* --- Bandknoepfe auf schmalen Schirmen nebeneinander statt gestapelt --- */
@media(max-width:640px){
  .katband .cb-knoepfe{width:100%;gap:10px}
  .katband .cb-cta,.katband .cb-zweit{flex:1 1 0;min-width:0;
    min-height:46px;padding:0 12px;font-size:10.5px;letter-spacing:.04em}
}

/* ==========================================================================
   PEPTID-RECHNER
   ========================================================================== */

/* min-width:0 — Zahlenfelder bringen eine eigene Mindestbreite mit und
   zogen die Rasterspur sonst ueber den Bildschirm hinaus. */
.calcgrid > *{min-width:0}
.calcgrid .panel{border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}
.rf input{min-width:0}
@media(min-width:640px){.calcgrid .panel{padding:28px}}
.rpanel{background:var(--tint)}
.rerg{background:#fff}
.rp-kopf{margin:0 0 20px;font:800 9.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.13em;color:var(--ink-2)}

/* --- Zahlenfeld mit Schnellwahl --- */
.rf + .rf{margin-top:18px}
.rf label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:8px;font-size:14px;font-weight:600;color:var(--ink)}
.rf label em{font-style:normal;font-size:12px;font-weight:600;color:var(--ink-2)}
.rf input{width:100%;min-height:52px;padding:0 16px;border-radius:12px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  font:700 17px/1 var(--f-sans);
  transition:border-color .18s,box-shadow .18s}
.rf input:focus{outline:none;border-color:var(--cta);
  box-shadow:0 0 0 3px rgba(109,52,214,.15)}
/* Die Pfeilchen der Zahlenfelder stoeren hier — die Schnellwahl darunter
   uebernimmt das Springen. */
.rf input::-webkit-outer-spin-button,.rf input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.rf input[type=number]{-moz-appearance:textfield}
.rf-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.rf-chips button{min-height:30px;padding:0 13px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  cursor:pointer;font:700 12px/1 var(--f-sans);
  transition:border-color .18s,background .18s,color .18s}
.rf-chips button:hover{border-color:var(--cta);color:var(--cta)}
.rf-chips button.on{border-color:var(--sig-ink);background:var(--sig);color:var(--sig-ink)}
.rf-hinweis{margin:12px 0 0;font-size:13px;color:var(--ink-2)}
.rf-hinweis b{color:var(--ink)}

/* --- Spritzenwahl --- */
.rspritzen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rspritzen button{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 6px;border-radius:12px;
  border:1px solid var(--line-strong);background:#fff;cursor:pointer;
  transition:border-color .18s,background .18s,box-shadow .18s}
.rspritzen button b{font:700 14px/1 var(--f-sans);color:var(--ink)}
.rspritzen button small{font-size:11.5px;color:var(--ink-2)}
.rspritzen button:hover{border-color:var(--cta)}
.rspritzen button.on{border-color:var(--sig-ink);background:var(--sig);
  box-shadow:inset 0 0 0 1px var(--sig-ink)}
.rspritzen button.on small{color:rgba(11,11,13,.7)}

/* --- Umschalter Dosis nach Koerpergewicht --- */
.rdosis{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.rschalter{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
/* Das Kaestchen selbst bleibt bedienbar, ist aber unsichtbar — sichtbar ist
   der Schieber daneben, der auf :checked reagiert. */
.rschalter input{position:absolute;opacity:0;width:0;height:0}
.rschieber{position:relative;flex:none;width:46px;height:26px;border-radius:999px;
  background:var(--line-strong);transition:background .2s}
.rschieber::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .2s cubic-bezier(.3,.7,.3,1)}
.rschalter input:checked ~ .rschieber{background:var(--sig)}
.rschalter input:checked ~ .rschieber::after{transform:translateX(20px)}
.rschalter input:focus-visible ~ .rschieber{outline:2px solid var(--cta);outline-offset:3px}

/* --- Ergebniskacheln --- */
.rkacheln{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.rk{padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:#fff}
.rk small{display:block;font-size:12px;line-height:1.35;color:var(--ink-2)}
.rk b{display:block;margin-top:5px;font:800 21px/1.15 var(--f-display);color:var(--ink)}
.rk-haupt{background:var(--nav);border-color:var(--nav)}
.rk-haupt small{color:rgba(255,255,255,.66)}
.rk-haupt b{font-size:27px;color:var(--sig)}

/* --------------------------------------------------------------------------
   DIE SPRITZE
   Form nach dem Bestand: helle Daumenplatte, duenne Stange, dunkler Kolben,
   schlanker Zylinder mit Teilung nach oben, konische Spitze im Umriss, lange
   duenne Nadel. Als Inline-SVG gezeichnet — nur so laesst sich der Konus als
   sauberer Umriss fuehren, und die Form bleibt bei jeder Breite massgetreu.
   Die Fuellung ist ein Rechteck darin, dessen Breite beim Rechnen gesetzt
   wird; ein clipPath haelt Glanz und Blaeschen im Zylinder.
   -------------------------------------------------------------------------- */
.rspritze{margin:18px 0 0;padding:22px 18px 18px;border-radius:14px;
  border:1px solid var(--line);background:#fff}
.rspritze figcaption{margin:0 0 14px;text-align:center;
  font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.rspritze figcaption b{color:var(--ink)}
.sp-buehne{position:relative}
/* Die Zahlen sitzen ueber den Strichen: der Zylinder liegt im SVG zwischen
   x=65 und x=485 von 600 — das sind 10,83 % und 80,83 %. */
.sp-skala{position:relative;height:14px;margin:0 19.17% 1px 10.83%}
.sp-skala span{position:absolute;top:0;transform:translateX(-50%);
  font:600 9.5px/1 var(--f-mono);color:var(--ink-2)}
.sp-svg{display:block;width:100%;height:auto}
/* Die beschrifteten Striche kraeftiger als die feine Zwischenteilung */
#sp-striche line{stroke-width:1}
#sp-striche line.gross{stroke-width:1.6}

/* Vorderkante der Fluessigkeit — sie atmet leicht, damit es nach Fluessigkeit
   aussieht und nicht nach Balken. */
#sp-welle{transition:cx .55s cubic-bezier(.35,.05,.25,1),opacity .3s;
  animation:sp-schwapp 2.8s ease-in-out infinite;transform-origin:center;
  transform-box:fill-box}
@keyframes sp-schwapp{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.05)}}
#sp-fluid,#sp-glanz,#sp-clip{transition:width .55s cubic-bezier(.35,.05,.25,1)}

/* Aufsteigende Blaeschen. Der clipPath schneidet sie am Fuellstand ab,
   dadurch bleiben sie immer in der Fluessigkeit. Verschoben wird in
   SVG-Nutzerkoordinaten — Prozentwerte greifen bei SVG-Transforms nicht
   zuverlaessig, die erste Fassung lief deshalb kaum sichtbar. */
/* Jedes Blaeschen bekommt eine eigene Bahn — steigen alle senkrecht und
   gleich schnell, wirkt es mechanisch statt nach Fluessigkeit. Die Strecke
   bleibt knapp innerhalb der Fluessigkeit, sonst verdeckt der clipPath den
   halben Lauf.
   Sie liefen zeitweise nur ab 480px: bei der ersten Fassung war der Zylinder
   auf schmalen Schirmen halb so breit. Seit der Rechner dort einspaltig
   steht, ist er breit genug — die Blaeschen laufen jetzt ueberall. */
.sp-blase{opacity:0}
.sp-b1{animation:sp-blase-a 3.2s ease-in infinite}
.sp-b2{animation:sp-blase-b 3.9s ease-in infinite .7s}
.sp-b3{animation:sp-blase-c 2.9s ease-in infinite 1.5s}
.sp-b4{animation:sp-blase-b 4.3s ease-in infinite 2.2s}
.sp-b5{animation:sp-blase-a 3.5s ease-in infinite 2.9s}
@keyframes sp-blase-a{
  0%{transform:translate(0,6px) scale(.45);opacity:0}
  14%{opacity:.95}
  50%{transform:translate(-3px,-9px) scale(.9)}
  78%{opacity:.9}
  100%{transform:translate(2px,-26px) scale(1.1);opacity:0}}
@keyframes sp-blase-b{
  0%{transform:translate(0,6px) scale(.4);opacity:0}
  16%{opacity:.9}
  45%{transform:translate(4px,-8px) scale(.85)}
  76%{opacity:.85}
  100%{transform:translate(-3px,-25px) scale(1.05);opacity:0}}
@keyframes sp-blase-c{
  0%{transform:translate(0,7px) scale(.5);opacity:0}
  12%{opacity:.95}
  55%{transform:translate(-5px,-11px) scale(.95)}
  80%{opacity:.9}
  100%{transform:translate(-1px,-27px) scale(1.15);opacity:0}}

/* Ein Lichtschimmer wandert ueber die Saeule — er macht die Bewegung auch
   dann sichtbar, wenn nur wenig aufgezogen ist. */
#sp-glanz{animation:sp-schimmer 3.4s ease-in-out infinite}
@keyframes sp-schimmer{0%,100%{opacity:.26}50%{opacity:.7}}

.sp-warnung{margin:14px 0 0;font-size:12.5px;font-weight:700;color:var(--sale);
  text-align:center}

/* --- Formel und Fussnote --- */
.rformel{margin:16px 0 0;padding:16px 18px;border-radius:14px;
  background:var(--tint2)}
.rformel-kopf{margin:0 0 6px;font:800 9.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.12em;color:var(--cta)}
.rformel p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.rfuss{margin:14px 0 0;font-size:12px;color:var(--ink-2)}

@media(max-width:479px){
  .rkacheln{grid-template-columns:1fr}
  .sp-skala span{font-size:8.5px}}
@media(prefers-reduced-motion:reduce){
  .sp-fluid,.sp-kolben{transition:none}
  .sp-welle{animation:none}}

/* --------------------------------------------------------------------------
   FAQ auf den Tool-Seiten: gestapelt statt zweispaltig
   Neben dem Fliesstext stehen hier nur vier Fragen — nebeneinander wirkten
   sie gedraengt, und die zweite Spalte liess neben der offenen Antwort eine
   Luecke stehen. Untereinander und grosszuegiger gesetzt.
   -------------------------------------------------------------------------- */
.fq-lang{gap:10px}
@media(min-width:1024px){.fq-lang{grid-template-columns:1fr}}
.fq-lang .fq-auf{border-radius:12px}
.fq-lang .fq-auf summary{padding:20px 22px;font-size:15px;line-height:1.45;gap:16px}
.fq-lang .fq-auf summary::after{width:12px;height:12px;border-width:2.4px}
.fq-lang .fq-auf p{margin:0 22px 20px;padding-top:16px;
  border-top:1px solid var(--line);font-size:14px;line-height:1.75}

/* --------------------------------------------------------------------------
   REFERENZTABELLE im Retatrutide-Rechner
   -------------------------------------------------------------------------- */
.reftab{margin:16px 0 0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.reftab-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0;padding:13px 16px;background:var(--nav);color:#fff;
  font:700 12.5px/1.3 var(--f-sans)}
.reftab-kopf span{font:700 11px/1 var(--f-mono);color:var(--sig)}
.reftab table{width:100%;border-collapse:collapse;font-size:13px}
.reftab thead th{padding:11px 16px;background:var(--tint);text-align:right;
  font:700 11.5px/1 var(--f-sans);color:var(--ink-2);white-space:nowrap}
.reftab thead th:first-child{text-align:left}
.reftab tbody th{padding:11px 16px;text-align:left;font-weight:700;color:var(--ink)}
.reftab tbody td{padding:11px 16px;text-align:right;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.reftab tbody tr+tr th,.reftab tbody tr+tr td{border-top:1px solid var(--line)}
.reftab tbody tr:hover th,.reftab tbody tr:hover td{background:var(--tint)}
/* Vier Spalten passen unter 480px nicht mehr in die Breite — die Tabelle
   bekommt dort ihre eigene Scrollflaeche, statt die Seite zu verbreitern. */
@media(max-width:479px){
  .reftab table{font-size:12px;min-width:340px}
  .reftab thead th,.reftab tbody th,.reftab tbody td{padding:9px 10px;white-space:nowrap}
  .reftab{overflow-x:auto}}

/* ==========================================================================
   STACK-BUILDER
   ========================================================================== */
/* Schrittanzeige im Kopfbalken */
/* nowrap: die drei Schritte gehoeren als eine Kette gelesen — umgebrochen
   stand "3 Warenkorb" allein in der zweiten Zeile. */
.sbschritte{display:flex;flex-wrap:nowrap;align-items:center;gap:10px 18px;
  list-style:none;margin:20px 0 0;padding:0}
.sbschritte li{flex:none;white-space:nowrap}
.sbschritte li{display:flex;align-items:center;gap:9px;
  font-size:13px;color:rgba(255,255,255,.5)}
.sbschritte li+li::before{content:"";width:26px;height:1px;background:rgba(255,255,255,.2);
  margin-right:9px}
.sbschritte b{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;
  background:rgba(255,255,255,.1);font:800 11.5px/1 var(--f-sans)}
.sbschritte li.an{color:#fff}
.sbschritte li.an b{background:var(--sig);color:var(--sig-ink)}

.sbwrap{padding:40px 0 8px}
.sb-lead{margin:8px 0 22px;max-width:64ch;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* --- Vorgefertigte Protokolle --- */
.sbprotokolle{margin-bottom:44px}
.sbp-gitter{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.sbp-gitter{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.sbp-gitter{grid-template-columns:repeat(4,1fr)}}
.sbprot{display:flex;flex-direction:column;align-items:stretch;gap:7px;
  padding:18px;border-radius:16px;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--line);font:inherit;
  transition:border-color .18s,box-shadow .22s,transform .2s ease-out}
.sbprot:hover{border-color:var(--line-strong);transform:translateY(-2px);
  box-shadow:0 16px 30px -24px rgba(19,16,32,.45)}
.sbprot:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
/* Gesetztes Protokoll: schwarzer Rahmen und Lime-Kante, damit es sich auch
   ohne Farbe vom Rest abhebt. */
/* Gesetztes Protokoll: schwarze Kante aussen, Lime-Rahmen innen rundum.
   Zwei inset-Schatten uebereinander — ein echter border kann nur eine Farbe
   fuehren. */
.sbprot.an{border-color:var(--sig-ink);
  box-shadow:inset 0 0 0 1px var(--sig-ink),inset 0 0 0 4px var(--sig)}
.sbp-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.sbp-kopf em{font-style:normal;padding:5px 10px;background:var(--nav);color:#fff;
  font:800 9px/1 var(--f-sans);letter-spacing:.1em}
.sbprot.an .sbp-kopf em{background:var(--sig);color:var(--sig-ink)}
/* Die Symbole sind die farbigen Originaldateien — kein getoentes Feld
   darunter, das wuerde mit ihren eigenen Farben kollidieren. */
.sbp-ic{display:grid;place-items:center;width:34px;height:34px;flex:none}
.sbp-ic img{width:28px;height:28px;display:block}
.sbprot b{font:700 15px/1.3 var(--f-sans);color:var(--ink)}
.sbprot small{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.sbp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:10px}
.sbp-chips i{font-style:normal;padding:4px 8px;border-radius:999px;
  background:var(--tint);font-size:10.5px;font-weight:600;color:var(--ink-2)}
.sbprot.an .sbp-chips i{background:rgba(168,252,3,.2);color:var(--sig-ink)}
/* Trennzeile zwischen Protokollen und Einzelauswahl */
.sbp-oder{position:relative;margin:26px 0 0;text-align:center}
.sbp-oder::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--line)}
.sbp-oder span{position:relative;padding:0 16px;background:#fff;
  font-size:13px;color:var(--ink-2)}

/* --- Auswahl und Korb --- */
.sbgrid{display:grid;gap:24px}
@media(min-width:1024px){
  .sbgrid{grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}}
.sbwahl{min-width:0}
.sbk-gitter{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(min-width:700px){.sbk-gitter{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.sbk-gitter{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1300px){.sbk-gitter{grid-template-columns:repeat(4,1fr)}}
.sbkarte{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;
  padding:16px 12px;border-radius:14px;text-align:center;cursor:pointer;
  background:#fff;border:1px solid var(--line);font:inherit;
  transition:border-color .18s,box-shadow .2s,transform .2s ease-out}
.sbkarte:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.sbkarte:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
.sbkarte[aria-pressed="true"]{border-color:var(--sig-ink);
  box-shadow:inset 0 0 0 1px var(--sig-ink)}
/* Haken statt Farbwechsel: die Kategoriemarke traegt schon eine Farbe. */
.sbkarte[aria-pressed="true"]::after{content:"";position:absolute;top:9px;right:9px;
  width:17px;height:17px;border-radius:999px;background:var(--sig);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0D' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}
.sbkarte{position:relative}
.sbkarte b{font:700 14px/1.25 var(--f-sans);color:var(--ink)}
.sbkarte small{font-size:11.5px;color:var(--ink-2)}
.sbk-kat{font-style:normal;margin:6px 0 8px;padding:4px 9px;border-radius:999px;
  font:700 10px/1.2 var(--f-sans)}
.sbk-preis{font:800 15px/1 var(--f-display);color:var(--ink)}
/* Kategorien tragen je eine eigene Tönung — sie ordnen die Kacheln, ohne
   dass jede Karte eine Überschrift dafür braucht. */
.sbk-regeneration{background:rgba(168,252,3,.22);color:#3C5A00}
.sbk-longevity{background:var(--tint2);color:var(--cta)}
.sbk-fokus{background:rgba(56,132,255,.14);color:#1F58C0}
.sbk-schlaf{background:rgba(90,90,120,.14);color:#4A4A63}
.sbk-stoffwechsel{background:rgba(255,178,0,.18);color:#8A5A00}
.sbk-hormone{background:rgba(255,92,138,.14);color:#B02A55}
.sbk-aesthetik{background:rgba(255,92,138,.14);color:#B02A55}
.sbk-zubehoer{background:var(--tint);color:var(--ink-2)}

/* --- Der Korb --- */
@media(min-width:1024px){.sbkorb{position:sticky;top:96px}}
/* Der Korb steht durchgehend auf Dunkel — er soll sich als Ablage klar von
   den weissen Auswahlkacheln daneben absetzen. Alle Werte darin sind
   entsprechend aufgehellt. */
.sbk-innen{border-radius:18px;background:var(--nav);color:#fff;overflow:hidden}
.sbk-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 20px 16px}
.sbk-titel{margin:0;font:700 18px/1.2 var(--f-display);color:#fff}
.sbk-zahl{margin:3px 0 0;font-size:12.5px;color:rgba(255,255,255,.55)}
.sbk-marke{display:grid;place-items:center;min-width:34px;height:34px;padding:0 9px;flex:none;
  border-radius:999px;background:var(--sig);color:var(--sig-ink);
  font:800 14px/1 var(--f-display)}
.sbk-koerper{padding:0 20px 20px}

.sbk-liste{display:grid;gap:8px;list-style:none;margin:0;padding:0}
/* Jede Position auf eigener Flaeche — sie reicht vom Namen bis zum
   Entfernen-Knopf und macht die Zeilen als Bloecke lesbar. */
.sbk-liste li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border-radius:12px;border-bottom:0;
  background:rgba(168,252,3,.14);transition:background .18s}
.sbk-liste li:hover{background:rgba(168,252,3,.24)}
.sbk-liste b{display:block;font:700 13.5px/1.3 var(--f-sans);color:#fff}
.sbk-liste small{display:block;margin-top:2px;font-size:11.5px;color:rgba(255,255,255,.6)}
.sbk-weg{flex:none;width:26px;height:26px;border-radius:999px;border:0;
  background:rgba(255,255,255,.12);color:#fff;font-size:15px;line-height:1;cursor:pointer;
  transition:background .18s,color .18s}
.sbk-weg:hover{background:var(--sale);color:#fff}
.sbk-leer{margin:0;padding:22px 16px;border-radius:12px;
  border:1px dashed rgba(255,255,255,.2);
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.6);text-align:center}
.sbk-summe{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;color:rgba(255,255,255,.6)}
.sbk-summe b{font:800 22px/1 var(--f-display);color:var(--sig)}
.sbk-versand{margin:14px 0 0;padding:11px 13px;border-radius:12px;
  background:rgba(168,252,3,.14);font-size:12.5px;line-height:1.5;
  color:var(--sig);text-align:center}
/* Erreicht: kraeftiger, damit "fehlt noch" und "geschafft" unterscheidbar
   bleiben, ohne die Farbe zu wechseln. */
.sbk-versand.sbk-erreicht{background:rgba(168,252,3,.26);font-weight:700}
.sbk-knoepfe{display:flex;gap:10px;margin-top:16px}
/* Beim Ueberfahren laeuft das Lila von links ein — dieselbe Bewegung wie bei
   den uebrigen Kaufknoepfen. Die Fuellung liegt als eigene Ebene darunter,
   damit der clip-path sie mitbeschneidet. */
.sbk-cta{position:relative;overflow:hidden;z-index:1;
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 14px;border:0;cursor:pointer;
  background:var(--sig);color:var(--sig-ink);
  font:800 11.5px/1.3 var(--f-sans);text-transform:uppercase;letter-spacing:.05em;
  transition:color .18s,opacity .18s}
.sbk-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cta);
  transform:translateX(-101%);transition:transform .36s cubic-bezier(.2,.7,.2,1)}
.sbk-cta:hover:not(:disabled){color:#fff}
.sbk-cta:hover:not(:disabled)::before{transform:translateX(0)}
.sbk-cta:disabled{opacity:.32;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.sbk-cta::before{transition:none}}
.sbk-reset{flex:none;min-height:52px;padding:0 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;
  font:700 12.5px/1 var(--f-sans);cursor:pointer;transition:border-color .18s,background .18s}
.sbk-reset:hover{border-color:var(--sig);background:rgba(168,252,3,.12)}

/* --- Warum NeoPeptide --- */
.sbwarum{padding:34px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);
  text-align:center}
.sbwarum h2{margin:0 0 26px;font-size:26px}
.sbv-gitter{display:grid;gap:24px 20px;list-style:none;margin:0;padding:0;
  grid-template-columns:1fr}
@media(min-width:560px){.sbv-gitter{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.sbv-gitter{grid-template-columns:repeat(4,1fr)}}
.sbv-gitter li{display:flex;flex-direction:column;align-items:center;gap:4px}
.sbv-ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:10px;
  border-radius:13px;background:var(--sig);color:var(--sig-ink)}
.sbv-ic svg{width:22px;height:22px}
.sbv-gitter b{font:700 15px/1.3 var(--f-sans);color:var(--ink)}
.sbv-gitter small{font-size:13px;line-height:1.55;color:var(--ink-2);max-width:26ch}
.sbdisc{margin:14px 0 0;padding:18px 22px;border-radius:14px;
  background:var(--tint);font-size:12.5px;line-height:1.65;color:var(--ink-2);
  text-align:center}
.sbdisc b{color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .sbprot,.sbkarte{transition:none}
  .sbprot:hover,.sbkarte:hover{transform:none}}

/* --------------------------------------------------------------------------
   Stack-Builder auf schmalen Schirmen
   Die Kaesten liefen bis dicht an beide Raender. Mehr Aussenabstand und
   knappere Innenpolster geben ihnen Luft, ohne dass der Inhalt bricht.
   -------------------------------------------------------------------------- */
@media(max-width:639px){
  /* Mehr Rand, nicht weniger: die Spur ist hier 20px breit, die Kaesten
     liefen dadurch fast bis an beide Kanten. */
  .sbwrap{padding-left:28px;padding-right:28px}
  .sbprot{padding:16px}
  .sbkarte{padding:14px 10px}
  .sbk-kopf{padding:17px 16px 14px}
  .sbk-koerper{padding:0 16px 17px}
  .sbwarum{padding:26px 18px;margin:0 8px}
  .sbdisc{margin:14px 8px 0;padding:16px 18px}
  .sbk-titel{font-size:16.5px}
  .sbk-summe b{font-size:20px}
  .sbk-cta{min-height:48px;font-size:11px}
  .sbk-reset{min-height:48px;padding:0 16px}
  /* Enger gesetzt, damit die Kette in eine Zeile passt */
  .sbschritte{gap:8px;margin-top:16px}
  .sbschritte li{font-size:11.5px;gap:6px}
  .sbschritte li+li::before{width:12px;margin-right:6px}
  .sbschritte b{width:22px;height:22px;font-size:10.5px}
}
@media(max-width:400px){
  .sbschritte li{font-size:10.5px}
  .sbschritte li+li::before{width:8px;margin-right:4px}
}

/* ==========================================================================
   PEPTID-VERGLEICHSTOOL
   ========================================================================== */
.vgwrap{padding:40px 0 8px}
.vgwahl{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:22px}
@media(min-width:760px){.vgwahl{grid-template-columns:repeat(3,1fr);gap:16px}}
.vgw label{display:block;margin-bottom:8px;font:800 9.5px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2)}
/* Das eigene Pfeilchen liegt ueber dem Feld; das des Browsers ist
   abgeschaltet, damit die Form ueberall gleich aussieht. */
.vgw-feld{position:relative}
.vgw-feld svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--ink-2)}
.vgw select{appearance:none;-webkit-appearance:none;
  width:100%;min-height:54px;padding:0 44px 0 16px;border-radius:14px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  font:600 14.5px/1 var(--f-sans);cursor:pointer;
  transition:border-color .18s,box-shadow .18s}
.vgw select:hover{border-color:var(--cta)}
.vgw select:focus{outline:none;border-color:var(--cta);
  box-shadow:0 0 0 3px rgba(109,52,214,.15)}

.vgtafel{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
/* Bei drei Peptiden wird die Tafel breiter als der Schirm — sie scrollt dann
   in sich, statt die Seite zu verbreitern. */
.vgtab-scroll{overflow-x:auto}
.vgtab{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.vgtab th,.vgtab td{padding:16px 20px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line)}
/* Merkmalspalte: getoent, damit die Werte daneben ruhig stehen */
.vgtab tbody th{width:210px;background:var(--tint);font:700 13.5px/1.4 var(--f-sans);
  color:var(--ink)}
.vgtab td{color:var(--ink-2)}
.vgtab td b{color:var(--ink)}
.vgtab tbody tr:last-child th,.vgtab tbody tr:last-child td{border-bottom:0}
/* Feine Linie zwischen den Peptidspalten. Sie sitzt links an jeder Spalte ab
   der zweiten — die erste grenzt schon an die getoente Merkmalspalte. */
.vgtab td + td,
.vgtab thead th:not(.vg-eck) + th{border-left:1px solid var(--line)}
.vg-eck{width:210px;background:var(--tint);
  font:800 9.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-2);vertical-align:bottom}
.vgtab thead th{border-bottom:1px solid var(--line);vertical-align:top}

/* --- Kopf einer Peptidspalte --- */
.vg-kopf{display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:inherit}
.vg-bild{display:grid;place-items:center;width:54px;height:54px;flex:none;
  border-radius:12px;background:var(--tint);overflow:hidden}
.vg-bild img{max-width:80%;max-height:80%;width:auto;height:auto}
.vg-nam b{display:block;font:700 17px/1.2 var(--f-display);color:var(--ink)}
.vg-nam small{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.vg-kopf:hover .vg-nam b{color:var(--cta)}
.vg-preis{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:16px;flex-wrap:wrap}
.vg-preis s{display:block;font-size:12px;color:var(--sale)}
.vg-preis b{display:block;font:800 21px/1.1 var(--f-display);color:var(--ink)}
.vg-cta{display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 20px;background:var(--nav);color:#fff;text-decoration:none;
  font:800 10.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;
  transition:background .18s}
.vg-cta:hover{background:var(--cta)}

/* --- Werte --- */
.vgz{display:inline-block;margin:0 5px 5px 0;padding:5px 10px;border-radius:999px;
  background:var(--tint2);font-style:normal;font-size:11.5px;font-weight:600;color:var(--cta)}
.vgja{color:var(--sig-ink);background:var(--sig);padding:3px 9px;border-radius:999px;
  font-size:12.5px}
.vg-promg th,.vg-promg td{background:rgba(168,252,3,.1)}
.vg-best{font-weight:800;color:var(--ink)}
.vg-marke{display:inline-block;margin-left:9px;padding:4px 9px;border-radius:999px;
  background:var(--sig);color:var(--sig-ink);
  font-style:normal;font:800 9.5px/1 var(--f-sans);letter-spacing:.05em}
.vg-hinweis{padding:40px 20px;text-align:center;color:var(--ink-2)}
.vgfuss{margin:12px 2px 0;font-size:12px;line-height:1.55;color:var(--ink-2)}

@media(max-width:559px){
  .vgtab th,.vgtab td{padding:13px 14px}
  .vgtab tbody th,.vg-eck{width:130px;font-size:12.5px}
  .vg-nam b{font-size:15px}
  .vg-preis{margin-top:12px}
  .vg-preis b{font-size:18px}}

/* Auf schmalen Schirmen mehr Rand — Auswahlfelder und Tafel liefen sonst
   bis dicht an beide Kanten. */
@media(max-width:639px){
  .vgwrap{padding-left:28px;padding-right:28px}
  .vgw select{min-height:50px;font-size:14px;padding-right:40px}
  .vgwahl{gap:12px;margin-bottom:18px}
  .vgfuss{margin-left:0;margin-right:0}}

/* ==========================================================================
   PEPTID-FINDER
   ========================================================================== */
.pfwrap{padding:40px 0 8px}
.pfblock+.pfblock{margin-top:34px}
.pf-schritt{display:flex;align-items:center;gap:13px;margin:0 0 18px;
  font:700 21px/1.2 var(--f-display);color:var(--ink)}
.pf-schritt b{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:999px;background:var(--nav);color:#fff;font:800 13px/1 var(--f-sans)}
.pf-gruppe{margin:20px 0 9px;font:800 9.5px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-2)}
.pf-gruppe:first-child{margin-top:0}
.pf-chips{display:flex;flex-wrap:wrap;gap:9px}
.pf-chips button{min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);cursor:pointer;
  font:600 14px/1 var(--f-sans);
  transition:border-color .18s,background .18s,color .18s,box-shadow .18s}
.pf-chips button:hover{border-color:var(--cta);color:var(--cta)}
.pf-chips button.an{border-color:var(--sig-ink);background:var(--sig);color:var(--sig-ink);
  font-weight:700;box-shadow:inset 0 0 0 1px var(--sig-ink)}
.pf-chips button:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
/* Die Eingrenzung ist der Nebenschalter — kleiner als die Zielwahl. */
.pf-formen button{min-height:38px;padding:0 15px;font-size:13px}

.pf-gitter{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:860px){.pf-gitter{grid-template-columns:1fr 1fr}}
.pfkarte{display:flex;flex-direction:column;gap:14px;
  padding:20px;border-radius:16px;background:#fff;border:1px solid var(--line);
  transition:border-color .18s,box-shadow .22s,transform .2s ease-out}
.pfkarte:hover{border-color:var(--line-strong);transform:translateY(-2px);
  box-shadow:0 16px 30px -24px rgba(19,16,32,.45)}
.pfk-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pfk-kopf b{display:block;font:700 17px/1.2 var(--f-display);color:var(--ink)}
.pfk-kopf small{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.pfk-preis{flex:none;padding:6px 12px;border-radius:999px;
  background:rgba(168,252,3,.18);font:700 12.5px/1 var(--f-sans);color:var(--sig-ink);
  white-space:nowrap}
.pfk-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto}
.pfk-p{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;
  background:var(--nav);color:#fff;text-decoration:none;
  font:800 11px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.05em;
  transition:background .18s}
.pfk-p:hover{background:var(--cta)}
.pfk-l{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;
  border-radius:999px;border:1px solid var(--line-strong);color:var(--ink);
  text-decoration:none;font:700 12.5px/1 var(--f-sans);
  transition:border-color .18s,color .18s}
.pfk-l:hover{border-color:var(--cta);color:var(--cta)}
.pf-leer{margin:0;padding:34px 20px;border-radius:16px;border:1px dashed var(--line-strong);
  text-align:center;color:var(--ink-2)}
/* Der Hinweis gehoert nicht zur letzten Frage — der Abstand macht das
   sichtbar. .prose > p setzt oben 0, deshalb hier ausdruecklich. */
.prose .pf-hinweis{margin:32px 0 0;padding:16px 18px;border-radius:12px;
  background:var(--tint);font-size:13px;line-height:1.6;color:var(--ink-2)}

@media(max-width:639px){
  .pfwrap{padding-left:28px;padding-right:28px}
  .pf-schritt{font-size:18px}
  .pf-chips button{min-height:40px;padding:0 15px;font-size:13.5px}
  .pf-formen button{min-height:36px;padding:0 13px;font-size:12.5px}
  .pfkarte{padding:17px}}
@media(prefers-reduced-motion:reduce){
  .pfkarte{transition:none}.pfkarte:hover{transform:none}}

/* ==========================================================================
   LAGERUNGS-GUIDE
   ========================================================================== */
.lgwrap{padding:40px 0 8px}
.lggrid{display:grid;gap:20px}
@media(min-width:1024px){
  .lggrid{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:24px;align-items:start}}
.lglinks{display:grid;gap:14px;min-width:0}
.lg-lab{display:block;margin:0 0 8px;font:800 9.5px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2)}
/* Eigenes Pfeilchen ueber dem Feld — das des Browsers ist abgeschaltet,
   damit die Form ueberall gleich aussieht. */
.lg-feld{position:relative}
.lg-feld svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--ink-2)}
.lg-feld select{appearance:none;-webkit-appearance:none;
  width:100%;min-height:54px;padding:0 44px 0 16px;border-radius:14px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  font:600 14.5px/1 var(--f-sans);cursor:pointer;
  transition:border-color .18s,box-shadow .18s}
.lg-feld select:hover{border-color:var(--cta)}
.lg-feld select:focus{outline:none;border-color:var(--cta);
  box-shadow:0 0 0 3px rgba(109,52,214,.15)}

.lgkarte{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.lgk-kopf{display:flex;align-items:flex-start;gap:14px;padding:18px}
.lgk-bild{display:grid;place-items:center;width:64px;height:64px;flex:none;
  border-radius:12px;background:var(--tint);overflow:hidden}
.lgk-bild img{max-width:80%;max-height:80%;width:auto;height:auto}
.lgk-kopf b{display:block;font:700 17px/1.2 var(--f-display);color:var(--ink)}
.lgk-kopf small{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.lgk-link{display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  color:var(--cta);text-decoration:none;font:700 13px/1 var(--f-sans)}
.lgk-link em{font-style:normal;transition:transform .2s ease-out}
.lgk-link:hover em{transform:translateX(3px)}
.lgk-fuss{padding:16px 18px;border-top:1px solid var(--line);background:var(--tint)}
.lgk-fuss p:last-child{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}

/* Der allgemeine Hinweis steht dunkel — er gilt fuer jedes Peptid und soll
   sich von der wechselnden Karte darueber absetzen. */
.lghinweis{padding:18px;border-radius:16px;background:var(--nav);color:#fff}
.lghinweis .lg-lab{color:var(--sig)}
.lghinweis p:last-child{margin:0;font-size:13.5px;line-height:1.65;
  color:rgba(255,255,255,.75)}
.lghinweis a{color:var(--sig);font-weight:600}

.lgrechts{display:grid;gap:16px;min-width:0}
.lgbox{border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px}
@media(min-width:640px){.lgbox{padding:24px}}
.lgb-kopf{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.lgb-ic{display:grid;place-items:center;width:48px;height:48px;flex:none;
  border-radius:13px;background:var(--sig)}
.lgb-ic img{width:30px;height:30px;display:block}
.lgb-kopf h2{margin:2px 0 0;font:700 21px/1.2 var(--f-display);color:var(--ink)}
.lgb-kopf .lg-lab{margin:0}
.lgb-werte{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.lgb-werte{grid-template-columns:repeat(3,1fr)}}
.lgb-werte > div{padding:14px 16px;border-radius:12px;background:var(--tint)}
.lgw-lab{display:flex;align-items:center;gap:8px;margin:0 0 6px;
  font:600 12px/1 var(--f-sans);color:var(--ink-2)}
.lgw-lab svg{width:15px;height:15px;flex:none;color:var(--cta);display:block}
.lgb-werte > div p:last-child{margin:0;font:500 14px/1.45 var(--f-sans);color:var(--ink)}

@media(max-width:639px){
  .lgwrap{padding-left:28px;padding-right:28px}
  .lgb-kopf h2{font-size:18px}
  .lgb-ic{width:42px;height:42px}
  .lgb-ic img{width:27px;height:27px}}
@media(prefers-reduced-motion:reduce){.lgk-link em{transition:none}}

/* ==========================================================================
   Peptid-Lexikon
   Die Kategoriefarbe traegt hier keinen Balken mehr ueber der Karte. Sie
   sitzt im Kuerzel-Feld, in der Marke und als weicher Schimmer, der aus der
   oberen linken Ecke hinter das Kuerzel laeuft - gleiche Farbwelt, aber die
   Karte bleibt oben geschlossen und ruhig.
   ========================================================================== */
.lxkopf .kat-lead{max-width:60ch}
.lxsuche{display:flex;align-items:center;max-width:620px;margin:22px 0 2px;
  background:#fff;border:2px solid transparent;border-radius:15px;
  transition:border-color .2s, box-shadow .2s}
.lxsuche:focus-within{border-color:var(--sig);box-shadow:0 0 0 4px rgba(168,252,3,.2)}
.lxs-ic{display:grid;place-items:center;width:20px;height:20px;flex:none;margin-left:16px;color:var(--ink-2)}
.lxs-ic svg{width:20px;height:20px;display:block}
.lxsuche input{flex:1;min-width:0;border:0;background:transparent;outline:none;border-radius:15px;
  padding:15px 16px 15px 12px;font:400 15px/1.3 var(--f-sans);color:var(--ink)}
.lxsuche input::placeholder{color:#9990b5}

.lxwrap{padding-top:26px}
.lxfilter{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 0}
.lxchips{display:flex;flex-wrap:wrap;gap:8px}
.lxchips button{border:1px solid var(--line-strong);background:#fff;color:var(--ink);cursor:pointer;
  border-radius:999px;padding:9px 15px;font:600 13px/1 var(--f-sans);
  transition:background-color .18s, border-color .18s, color .18s}
.lxchips button:hover{background:var(--tint);border-color:var(--cta);color:var(--cta)}
.lxchips button.an{background:var(--nav);border-color:var(--nav);color:#fff}
.lxaz{display:flex;flex-wrap:wrap;gap:2px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.lxaz button{width:30px;height:30px;border:0;background:transparent;border-radius:9px;cursor:pointer;
  font:700 13px/1 var(--f-sans);color:var(--ink-2);
  transition:background-color .16s, color .16s}
.lxaz button:hover:not(:disabled){background:var(--tint);color:var(--cta)}
.lxaz button.an{background:var(--sig);color:var(--sig-ink)}
.lxaz button:disabled{color:#cec6e3;cursor:default}
.lxstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0 0;
  padding:16px 0 18px;border-top:1px solid var(--line);text-align:center}
.lxstats > div{display:flex;flex-direction:column-reverse;gap:5px;min-width:0}
.lxstats dd{margin:0;font:800 26px/1 var(--f-display);font-style:italic;letter-spacing:-.02em;color:var(--ink)}
.lxstats dt{font:600 11px/1.2 var(--f-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}

.lxzahl{margin:24px 0 14px;font:600 11.5px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.lxgitter{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(292px,1fr))}
.lxleer{margin:24px 0 0;padding:26px;border:1px dashed var(--line-strong);border-radius:16px;
  text-align:center;color:var(--ink-2)}
.lxleer a{color:var(--cta);font-weight:600}

.lxk{--kf:#4A5568;--kf-w:rgba(74,85,104,.11);--kf-m:rgba(74,85,104,.5);
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 0;
  transition:border-color .2s, transform .2s ease-out, box-shadow .2s}
.lxk[hidden]{display:none}
.lxk::before{content:"";position:absolute;left:0;top:0;width:210px;height:150px;pointer-events:none;
  background:radial-gradient(120px 105px at 6px -4px, var(--kf-w), transparent 72%)}
.lxk:hover{transform:translateY(-3px);border-color:var(--kf-m);box-shadow:0 16px 34px -20px var(--kf-m)}
.lxk-kopf{position:relative;display:flex;align-items:flex-start;gap:12px}
.lxk-av{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:13px;
  background:var(--kf);color:#fff;font:700 19px/1 var(--f-display);letter-spacing:-.02em}
.lxk-tit{flex:1;min-width:0}
.lxk-tit h2{margin:1px 0 0;font:700 17px/1.25 var(--f-display);letter-spacing:-.02em;
  color:var(--ink);overflow-wrap:anywhere}
.lxk-tit p{margin:5px 0 0;font:400 12.5px/1.4 var(--f-sans);color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.lxk-tag{flex:none;border-radius:999px;padding:5px 9px;background:var(--kf-w);color:var(--kf);
  font:700 9.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.lxk-txt{position:relative;margin:15px 0 16px;font:400 14px/1.55 var(--f-sans);color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.lxk-daten{display:flex;flex-wrap:wrap;gap:4px 18px;margin:auto 0 0;padding:13px 0;
  border-top:1px solid var(--line);font:400 12.5px/1.5 var(--f-sans);color:var(--ink-2)}
.lxk-daten b{font:700 13px/1.5 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.lxk-mehr{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 -18px;
  padding:14px 18px;background:var(--tint);border-top:1px solid var(--line);
  font:600 14px/1 var(--f-sans);color:var(--cta);text-decoration:none;
  transition:background-color .2s}
.lxk-mehr span{transition:transform .2s ease-out}
.lxk:hover .lxk-mehr{background:var(--kf-w)}
.lxk:hover .lxk-mehr span{transform:translateX(5px)}

/* Kategoriefarben - Herkunft: Vorlage neopeptide.de/peptid-lexikon.
   Bewusst am Attribut haengend, damit Lexikon-Karten, Peptid-Seite und
   verwandte Eintraege aus derselben Quelle schoepfen. */
[data-kat="regen"]    {--kf:#189E63;--kf-w:rgba(24,158,99,.11); --kf-m:rgba(24,158,99,.5)}
[data-kat="gewicht"]  {--kf:#DE8A16;--kf-w:rgba(222,138,22,.13);--kf-m:rgba(222,138,22,.5)}
[data-kat="kognition"]{--kf:#3667DE;--kf-w:rgba(54,103,222,.11);--kf-m:rgba(54,103,222,.5)}
[data-kat="haut"]     {--kf:#DB3B90;--kf-w:rgba(219,59,144,.11);--kf-m:rgba(219,59,144,.5)}
[data-kat="immun"]    {--kf:#12A099;--kf-w:rgba(18,160,153,.11);--kf-m:rgba(18,160,153,.5)}
[data-kat="schlaf"]   {--kf:#4A6CE0;--kf-w:rgba(74,108,224,.11);--kf-m:rgba(74,108,224,.5)}
[data-kat="hormone"]  {--kf:#7A3AE2;--kf-w:rgba(122,58,226,.11);--kf-m:rgba(122,58,226,.5)}
[data-kat="sexual"]   {--kf:#DC3A3A;--kf-w:rgba(220,58,58,.11); --kf-m:rgba(220,58,58,.5)}
[data-kat="longevity"]{--kf:#8B4CE8;--kf-w:rgba(139,76,232,.11);--kf-m:rgba(139,76,232,.5)}
[data-kat="mito"]     {--kf:#DE4436;--kf-w:rgba(222,68,54,.11); --kf-m:rgba(222,68,54,.5)}
[data-kat="blend"]    {--kf:#4A5568;--kf-w:rgba(74,85,104,.11); --kf-m:rgba(74,85,104,.5)}

.lxprose{max-width:82ch}
.lxhinweis{margin:26px 0 0;padding:16px 18px;border-radius:14px;
  background:rgba(168,252,3,.13);border:1px solid rgba(168,252,3,.55);
  font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* section.blk setzt 48px oben - hier gewinnt nur die gleiche Staerke. */
section.lxindexblk{padding-top:0}
.lxindex{background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:24px}
.lxi-lab{margin:0 0 14px;font:700 11.5px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.lxindex ul{display:grid;grid-template-columns:1fr;gap:2px 30px;list-style:none;margin:0;padding:0}
.lxindex li{margin:0}
.lxindex a{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:10px;
  text-decoration:none;font:400 14.5px/1.4 var(--f-sans);color:var(--ink);
  transition:background-color .16s, color .16s}
.lxindex a span{color:var(--cta);transition:transform .18s ease-out}
.lxindex a:hover{background:#fff;color:var(--cta)}
.lxindex a:hover span{transform:translateX(3px)}
@media(min-width:760px){.lxindex ul{grid-template-columns:1fr 1fr}}

@media(max-width:639px){
  .lxsuche{margin-top:18px}
  .lxsuche input{padding:13px 14px 13px 10px;font-size:14.5px}
  .lxwrap{padding-left:20px;padding-right:20px}
  .lxfilter{padding:14px 14px 0;border-radius:16px}
  .lxchips button{padding:8px 13px;font-size:12.5px}
  .lxstats dd{font-size:22px}
  .lxgitter{grid-template-columns:1fr}
  .lxindex{padding:16px}
  .lxindex a{font-size:14px}}
@media(prefers-reduced-motion:reduce){
  .lxk,.lxk-mehr span,.lxindex a span{transition:none}
  .lxk:hover{transform:none}}

/* ==========================================================================
   Peptid-Seite (Lexikon-Eintrag)
   Kopf, Steckbrief und verwandte Eintraege ziehen die Kategoriefarbe aus
   demselben Satz wie die Lexikon-Karten - siehe [data-kat] weiter oben.
   ========================================================================== */
.pxkopf{padding-bottom:34px}
.pxk-in{display:flex;align-items:center;gap:18px;margin-top:16px}
.pxk-av{display:grid;place-items:center;width:64px;height:64px;flex:none;border-radius:19px;
  background:var(--kf);color:#fff;font:700 28px/1 var(--f-display);letter-spacing:-.02em}
.pxk-t{min-width:0}
.pxk-kat{margin:0 0 8px;display:inline-block;border-radius:999px;padding:5px 11px;
  background:var(--kf);color:#fff;
  font:700 10px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.08em}
.pxkopf h1{margin:0;font-size:34px}
.pxk-syn{margin:8px 0 0;font-size:14.5px;color:rgba(255,255,255,.66)}

.pxgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media(min-width:960px){.pxgrid{grid-template-columns:minmax(0,1fr) 342px;gap:40px;align-items:start}}
.pxprose{max-width:74ch}
.pxprose h2{margin-top:34px}
.pxprose > h2:first-child{margin-top:0}
.pxpubmed{margin:22px 0 0}
.pxpubmed a{display:inline-flex;align-items:center;gap:9px}
.pxpubmed a span{transition:transform .18s ease-out}
.pxpubmed a:hover span{transform:translateX(4px)}
.pxhinweis{margin:24px 0 0;padding:16px 18px;border-radius:14px;
  background:rgba(168,252,3,.13);border:1px solid rgba(168,252,3,.55);
  font-size:13.5px;line-height:1.6;color:var(--ink-2)}

.pxseite{display:grid;gap:16px;min-width:0}
@media(min-width:960px){.pxseite{position:sticky;top:96px}}
.pxshop{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}
.pxs-lager{display:flex;align-items:center;gap:8px;margin:0;
  font:600 12px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
/* Der Verfuegbarkeitspunkt leuchtet dauerhaft leicht und schlaegt alle
   vier Sekunden einmal aus - ein Ring, der aufgeht und verblasst. */
.pxs-lager span{position:relative;width:9px;height:9px;flex:none;border-radius:50%;
  background:var(--ok);box-shadow:0 0 10px 1px rgba(30,138,95,.65);
  animation:pxpuls 4s ease-out infinite}
.pxs-lager span::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(30,138,95,.6);animation:pxring 4s ease-out infinite}
@keyframes pxpuls{
  0%,72%,100%{transform:scale(1);box-shadow:0 0 10px 1px rgba(30,138,95,.65)}
  80%{transform:scale(1.3);box-shadow:0 0 16px 3px rgba(30,138,95,.95)}
  90%{transform:scale(1);box-shadow:0 0 10px 1px rgba(30,138,95,.65)}}
@keyframes pxring{
  0%,72%{box-shadow:0 0 0 0 rgba(30,138,95,.6)}
  92%,100%{box-shadow:0 0 0 9px rgba(30,138,95,0)}}
.pxs-name{margin:12px 0 0;font:700 20px/1.2 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.pxs-preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:10px 0 0}
.pxs-preis b{font:800 26px/1 var(--f-display);font-style:italic;letter-spacing:-.02em;color:var(--ink)}
.pxs-preis s{font-size:14px;color:var(--sale)}
.pxs-btn{width:100%;margin-top:16px;border-radius:14px}

.pxsteck{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.px-sbkopf{margin:0;padding:14px 20px;background:var(--nav);color:#fff;
  font:700 14px/1.2 var(--f-display);letter-spacing:-.01em}
.px-sbliste{margin:0;padding:0 20px}
.px-sbz{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.px-sbz:last-child{border-bottom:0}
.px-sbz dt{font:400 13.5px/1.45 var(--f-sans);color:var(--ink-2)}
.px-sbz dd{margin:0;flex:1;min-width:0;text-align:right;
  font:600 13.5px/1.45 var(--f-sans);color:var(--ink);overflow-wrap:break-word}

.pxband{background:var(--nav);color:#fff;padding:0}
.pxb-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px;padding:34px 0}
.pxb-txt{min-width:0}
.pxb-lab{margin:0 0 10px;font:700 11px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.1em;color:var(--sig)}
.pxband h2{margin:0;font-size:26px}
.pxb-sub{margin:10px 0 0;font-size:14px;color:rgba(255,255,255,.7)}
.pxb-preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.pxb-preis b{font:800 26px/1 var(--f-display);font-style:italic;letter-spacing:-.02em;color:#fff}
.pxb-preis s{font-size:14px;color:rgba(255,255,255,.5)}
.pxb-btn{flex:none;padding:0 30px}
.pxb-btn span{transition:transform .18s ease-out}
.pxb-btn:hover span{transform:translateX(4px)}

section.pxunten{padding-top:48px}
.pxu-titel{margin:0 0 20px;font-size:24px}
.pxvgitter{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pxv{display:flex;align-items:center;gap:13px;min-width:0;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px;
  transition:border-color .2s, transform .2s ease-out, box-shadow .2s}
.pxv:hover{transform:translateY(-3px);border-color:var(--kf-m);
  box-shadow:0 16px 34px -20px var(--kf-m)}
.pxv-av{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;
  background:var(--kf);color:#fff;font:700 18px/1 var(--f-display);letter-spacing:-.02em}
.pxv-t{min-width:0}
.pxv-t b{display:block;font:700 16px/1.25 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.pxv-t small{display:block;margin-top:3px;font:400 13px/1.35 var(--f-sans);color:var(--ink-2)}

.pxweiter{margin-top:26px;background:var(--tint);border:1px solid var(--line);
  border-radius:18px;padding:22px 24px}
.pxw-lab{margin:0 0 12px;font:700 11.5px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.pxweiter ul{display:grid;grid-template-columns:1fr;gap:2px 30px;list-style:none;margin:0;padding:0}
.pxweiter li{margin:0}
.pxweiter a{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:10px;
  text-decoration:none;font:400 14.5px/1.4 var(--f-sans);color:var(--ink);
  transition:background-color .16s, color .16s}
.pxweiter a span{color:var(--cta);transition:transform .18s ease-out}
.pxweiter a:hover{background:#fff;color:var(--cta)}
.pxweiter a:hover span{transform:translateX(3px)}
@media(min-width:760px){.pxweiter ul{grid-template-columns:1fr 1fr}}

@media(max-width:639px){
  .pxk-in{gap:14px;margin-top:14px}
  .pxk-av{width:52px;height:52px;border-radius:16px;font-size:23px}
  .pxkopf h1{font-size:26px}
  .pxb-in{padding:28px 0}
  .pxband h2{font-size:21px}
  .pxb-btn{width:100%}
  .pxshop,.pxweiter{padding:16px}
  .px-sbliste{padding:0 16px}
  .px-sbz{flex-direction:column;gap:3px}
  .px-sbz dd{text-align:left}}
@media(prefers-reduced-motion:reduce){
  .pxv,.pxpubmed a span,.pxb-btn span,.pxweiter a span{transition:none}
  .pxv:hover{transform:none}
  .pxs-lager span,.pxs-lager span::after{animation:none}}

/* ==========================================================================
   Was sind Peptide? - Leitfaden
   ========================================================================== */
/* Bei Mobile loesen sich beide Spalten auf (display:contents). Damit werden
   Abschnitte, Verzeichnis und Werbekasten zu Kindern desselben Gitters und
   lassen sich frei sortieren: Verzeichnis direkt unter die Kurzfassung,
   Werbekasten ans Ende. Ab 1000px stehen wieder die beiden Spalten. */
.wpgrid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0;column-gap:0}
.wpinhalt,.wpseite{display:contents}
.wpsec-eins{order:1}
.wp-tocbox{order:2;margin-top:26px;min-width:0}
.wpsec:not(.wpsec-eins){order:3}
.wp-promo{order:4;margin-top:30px}
@media(min-width:1000px){
  .wpgrid{grid-template-columns:minmax(0,1fr) 300px;column-gap:48px;align-items:start}
  .wpinhalt{display:block;min-width:0;grid-column:1;grid-row:1}
  .wpseite{display:grid;gap:16px;min-width:0;grid-column:2;grid-row:1;
    position:sticky;top:96px}
  .wp-tocbox,.wp-promo{margin-top:0}}
/* html traegt bereits scroll-padding-top:88px fuer die klebende
   Kopfzeile - hier reicht der Atemabstand darunter. */
.wpsec{scroll-margin-top:16px}
.wpsec + .wpsec{margin-top:46px}
.wpinhalt h2{margin:0 0 10px;font-size:24px;color:var(--ink)}
.wp-sub{margin:0 0 18px;font:400 14.5px/1.6 var(--f-sans);color:var(--ink-2)}
.wp-text{margin:0 0 14px;font:400 14.5px/1.75 var(--f-sans);color:var(--ink-2)}
.wp-text:last-child{margin-bottom:0}
.wp-text a{color:var(--cta);text-decoration:none;font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--cta) 35%, transparent);
  transition:border-color .15s, background-color .15s}
.wp-text a:hover{border-bottom-color:var(--cta);background:var(--tint2)}

/* Kurzfassung - traegt die Kernaussage, deshalb Lime statt Flieder */
.wp-kurz{background:rgba(168,252,3,.13);border:1px solid rgba(168,252,3,.55);
  border-radius:18px;padding:22px 24px;margin:0 0 22px}
.wp-kurz-lab{margin:0 0 10px;font:700 11px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.wp-kurz p:last-child{margin:0;font:600 16px/1.65 var(--f-sans);color:var(--ink)}

/* Kettenbild: sechs Reste, dazwischen eine durchgehende Linie. Die Linie
   liegt hinter den Ringen, damit sie nicht durchscheint. */
.wp-struktur{background:var(--tint);border:1px solid var(--line);border-radius:18px;
  padding:20px;margin:0 0 26px}
.wp-st-lab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 18px;
  font:400 13px/1.4 var(--f-sans);color:var(--ink-2)}
.wp-st-lab b{font:700 11px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.1em;color:var(--ink)}
.wp-st-feld{position:relative;padding:34px 0 0}
.wp-st-n,.wp-st-c{position:absolute;top:0;margin:0;
  font:600 12px/1 var(--f-sans);color:var(--ink)}
.wp-st-n{left:0} .wp-st-c{right:0}
.wp-st-bind{position:absolute;top:0;left:50%;transform:translateX(-50%);margin:0;text-align:center}
.wp-st-bind span{display:inline-block;background:var(--nav);color:#fff;border-radius:999px;
  padding:6px 12px;font:700 11px/1 var(--f-sans)}
.wp-st-bind::after{content:"";display:block;width:1px;height:16px;margin:0 auto;
  background:var(--line-strong)}
.wp-kette{position:relative;display:flex;justify-content:space-between;align-items:flex-start;
  gap:4px;list-style:none;margin:0;padding:0}
.wp-kette::before{content:"";position:absolute;left:8%;right:8%;top:26px;height:2px;
  background:var(--line-strong)}
.wp-kette li{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:8px;min-width:0}
.wp-ring{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--sig);color:var(--sig-ink);border:2px solid #fff;
  font:800 19px/1 var(--f-display);letter-spacing:-.02em}
.wp-kette small{font:400 11.5px/1 var(--f-sans);color:var(--ink-2);white-space:nowrap}

/* Groessenklassen */
.wp-gkgitter{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:0 0 16px}
.wp-gk{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}
.wp-punkte{display:flex;gap:4px;margin-bottom:12px}
.wp-punkte i{width:7px;height:7px;border-radius:50%;background:var(--sig);
  outline:1px solid var(--sig-ink)}
.wp-gk b{display:block;font:700 16px/1.25 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.wp-gk-z{display:block;margin-top:3px;font:400 13.5px/1.4 var(--f-sans);color:var(--ink-2)}
.wp-gk small{display:block;margin-top:10px;font:600 12.5px/1.3 var(--f-sans);color:var(--cta)}

/* Vergleichstabelle */
.wp-tabhuelle{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.wp-tab{width:100%;min-width:520px;border-collapse:collapse;background:#fff}
.wp-tab thead th{background:var(--nav);color:#fff;text-align:left;padding:13px 16px;
  font:700 13.5px/1.3 var(--f-sans)}
.wp-tab thead td{background:var(--nav)}
.wp-tab tbody th{text-align:left;padding:13px 16px;font:700 13.5px/1.45 var(--f-sans);color:var(--ink);
  white-space:nowrap}
.wp-tab td{padding:13px 16px;font:400 13.5px/1.45 var(--f-sans);color:var(--ink-2)}
.wp-tab tbody tr + tr th,.wp-tab tbody tr + tr td{border-top:1px solid var(--line)}
.wp-tab tbody tr:nth-child(even){background:var(--tint)}

/* Bekannte Beispiele */
.wp-bsp{background:var(--tint);border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.wp-bsp-t{margin:0 0 12px;font:700 14px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.wp-marken{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.wp-marken li{background:#fff;border:1px solid var(--line-strong);border-radius:999px;
  padding:8px 13px;font:600 12.5px/1 var(--f-sans);color:var(--ink)}
.wp-bsp-n{margin:14px 0 0;font:400 12.5px/1.6 var(--f-sans);color:var(--ink-2)}

/* Arten - die vierte Karte ist unser Feld, deshalb dunkel */
.wp-artgitter{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.wp-art{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;min-width:0}
.wp-art b{display:block;margin-bottom:8px;font:700 16px/1.3 var(--f-display);
  letter-spacing:-.02em;color:var(--ink)}
.wp-art p{margin:0;font:400 13.5px/1.6 var(--f-sans);color:var(--ink-2)}
.wp-art-hell{background:var(--nav);border-color:var(--nav)}
.wp-art-hell b{color:var(--sig)}
.wp-art-hell p{color:rgba(255,255,255,.75)}

/* Forschungsbereiche */
.wp-bergitter{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:0 0 18px}
.wp-ber{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  transition:border-color .2s, transform .2s ease-out, box-shadow .2s}
.wp-ber:hover{border-color:var(--cta);transform:translateY(-3px);
  box-shadow:0 16px 34px -20px rgba(109,52,214,.6)}
.wp-ber-t{flex:1;min-width:0}
.wp-ber-t b{display:block;font:700 15.5px/1.3 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.wp-ber-t small{display:block;margin-top:3px;font:400 13px/1.4 var(--f-sans);color:var(--ink-2)}
.wp-ber-p{flex:none;color:var(--cta);font-size:18px;transition:transform .2s ease-out}
.wp-ber:hover .wp-ber-p{transform:translateX(4px)}

/* Qualitaetsmerkmale */
.wp-qmgitter{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:0 0 18px}
.wp-qm{display:flex;align-items:flex-start;gap:13px;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.wp-qm-ic{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:9px;
  background:var(--sig);color:var(--sig-ink)}
.wp-qm-ic svg{width:15px;height:15px;display:block}
.wp-qm-t{min-width:0}
.wp-qm-t b{display:block;font:700 15px/1.3 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.wp-qm-t small{display:block;margin-top:3px;font:400 13px/1.5 var(--f-sans);color:var(--ink-2)}

@media(min-width:560px){
  .wp-artgitter,.wp-bergitter,.wp-qmgitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wp-schluss{margin:26px 0 0;padding:18px 20px;border-radius:16px;
  background:rgba(168,252,3,.13);border:1px solid rgba(168,252,3,.55)}
.wp-schluss-t{margin:0 0 6px;font:700 14px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.wp-schluss p:last-child{margin:0;font:400 13.5px/1.65 var(--f-sans);color:var(--ink-2)}

/* Seitenspalte */
.wp-toc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 16px}
.wp-toc-lab{display:flex;align-items:center;gap:10px;padding:0 8px;cursor:pointer;
  list-style:none;font:700 11px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.wp-toc-lab::-webkit-details-marker{display:none}
.wp-toc-lab::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s ease-out}
.wp-toc[open] .wp-toc-lab::after{transform:rotate(-135deg) translateY(1px)}
.wp-toc ul{list-style:none;margin:12px 0 0;padding:0}
/* Ab Tablet ist es kein Aufklapper mehr, sondern eine offene Liste. Die
   Liste wird erzwungen, damit ein bei Mobile zugeklapptes Feld nach dem
   Drehen nicht leer bleibt. */
@media(min-width:1000px){
  /* Zwei Wege, weil Browser das Zuklappen unterschiedlich umsetzen:
     aeltere ueber display am Kind, neuere ueber ::details-content. */
  .wp-toc > ul{display:block}
  .wp-toc::details-content{content-visibility:visible;block-size:auto}
  .wp-toc-lab{cursor:default}
  .wp-toc-lab::after{display:none}}
.wp-toc li{margin:0}
.wp-toc a{display:block;padding:8px 10px;border-radius:9px;text-decoration:none;
  font:400 14px/1.35 var(--f-sans);color:var(--ink-2);
  transition:background-color .16s, color .16s}
.wp-toc a:hover{background:var(--tint);color:var(--cta)}
.wp-toc a.an{background:var(--tint);color:var(--ink);font-weight:600;
  box-shadow:inset 3px 0 0 var(--sig)}
.wp-promo{background:var(--nav);border-radius:18px;padding:22px}
.wp-promo-t{margin:0 0 8px;font:700 17px/1.25 var(--f-display);letter-spacing:-.02em;color:#fff}
.wp-promo-x{margin:0 0 16px;font:400 13.5px/1.6 var(--f-sans);color:rgba(255,255,255,.72)}
.wp-promo-b{width:100%;border-radius:14px}
.wp-promo-b span{transition:transform .18s ease-out}
.wp-promo-b:hover span{transform:translateX(4px)}

@media(max-width:639px){
  .wpsec + .wpsec{margin-top:38px}
  .wpinhalt h2{font-size:20px}
  .wp-kurz{padding:18px}
  .wp-kurz p:last-child{font-size:15px}
  .wp-struktur{padding:16px 12px}
  .wp-ring{width:40px;height:40px;font-size:15px}
  .wp-kette::before{top:20px}
  .wp-kette small{font-size:10px}
  .wp-st-n,.wp-st-c{font-size:11px}
  .wp-gkgitter{grid-template-columns:1fr 1fr}
  .wp-art,.wp-ber,.wp-qm{padding:15px 16px}
  .wp-promo,.wp-toc{padding:16px 14px}
  .wp-toc a{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){
  .wp-ber,.wp-ber-p,.wp-promo-b span{transition:none}
  .wp-ber:hover{transform:none}}

/* ==========================================================================
   Wissen & Blog
   ========================================================================== */
section.bgoben{padding-bottom:0}
.bgintro{max-width:80ch;margin:0 auto 34px;
  font:400 15px/1.8 var(--f-sans);color:var(--ink-2)}
.bgintro a{color:var(--cta);text-decoration:none;font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--cta) 35%, transparent);
  transition:border-color .15s, background-color .15s}
.bgintro a:hover{border-bottom-color:var(--cta);background:var(--tint2)}

.bgchips{margin:0 0 22px}
.bgleer{margin:24px 0 0;padding:26px;border:1px dashed var(--line-strong);border-radius:16px;text-align:center;color:var(--ink-2)}
.bggitter{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* Die ganze Karte ist anklickbar - der Verweis im Titel spannt sich per
   Pseudoelement ueber die Karte, so bleibt genau ein Link im Quelltext. */
.bgk{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;
  transition:border-color .2s, transform .2s ease-out, box-shadow .2s}
.bgk-txt{display:flex;flex-direction:column;flex:1;min-width:0}
/* Beim Ueberfahren faehrt unten rechts unsere spitze Lime-Ecke ein. Unten,
   weil oben rechts das Datum steht - dort wuerde die Flaeche es zudecken. */
.bgk::before{content:"";position:absolute;right:-2px;bottom:-2px;width:70px;height:30px;
  background:var(--sig);clip-path:polygon(0 0,100% 0,100% 100%,24px 100%);
  transform:translate(70px,30px);transition:transform .26s ease-out;pointer-events:none}
.bgk:hover::before,.bgk:focus-within::before{transform:translate(0,0)}
.bgk:hover{border-color:var(--rf-m);transform:translateY(-3px);
  box-shadow:0 16px 34px -20px var(--rf-m)}
.bgk:focus-within{border-color:var(--rf-m)}
.bgk-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 12px;margin:0 0 14px}
.bgk-marke{border-radius:999px;padding:6px 11px;background:var(--rf-w);
  border:1px solid var(--rf-m);color:var(--rf);
  font:700 10px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.08em}
/* Rubrikfarben - dieselbe Familie wie die Kategoriefarben im Lexikon */
.bgk{--rf:#5A5372;--rf-w:rgba(90,83,114,.10);--rf-m:rgba(90,83,114,.45)}
.bgk[data-thema="forschung"]{--rf:#189E63;--rf-w:rgba(24,158,99,.11); --rf-m:rgba(24,158,99,.5)}
.bgk[data-thema="dosierung"]{--rf:#3667DE;--rf-w:rgba(54,103,222,.11);--rf-m:rgba(54,103,222,.5)}
.bgk[data-thema="vergleich"]{--rf:#7A3AE2;--rf-w:rgba(122,58,226,.11);--rf-m:rgba(122,58,226,.5)}
.bgk[data-thema="rechtslage"]{--rf:#DE8A16;--rf-w:rgba(222,138,22,.13);--rf-m:rgba(222,138,22,.5)}
.bgk[data-thema="ratgeber"]{--rf:#12A099;--rf-w:rgba(18,160,153,.11);--rf-m:rgba(18,160,153,.5)}
.bgk[hidden]{display:none}
.bgk-kopf time{font:400 12.5px/1 var(--f-sans);color:var(--ink-2)}
.bgk-titel{margin:0 0 10px;font:700 17px/1.35 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.bgk-titel a{text-decoration:none;color:inherit}
.bgk-titel a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:16px;cursor:pointer}
.bgk-titel a:focus-visible{outline:none}
.bgk-anriss{margin:0 0 18px;font:400 14px/1.6 var(--f-sans);color:var(--ink-2)}
.bgk-mehr{display:flex;align-items:center;gap:8px;margin:auto 0 0;
  font:600 14px/1 var(--f-sans);color:var(--cta)}
.bgk-mehr span{transition:transform .2s ease-out}
.bgk:hover .bgk-mehr span{transform:translateX(5px)}

section.bgunten{padding-top:44px}
.bgprose{max-width:82ch}
.bgprose h2{margin-top:32px}
.bgprose > h2:first-child{margin-top:0}
.bghinweis{margin:26px 0 0;padding:16px 18px;border-radius:14px;
  background:rgba(168,252,3,.13);border:1px solid rgba(168,252,3,.55);
  font-size:13.5px;line-height:1.65;color:var(--ink-2)}

/* Aufmacher: erster Beitrag ueber die volle Breite, dunkel, mit der
   Ringkette aus der Struktur-Grafik als Zierrat. */
@media(min-width:760px){.bgk-auf{grid-column:1/-1}}
.bgk-auf{background:var(--nav);border-color:var(--nav);padding:30px 32px}
.bgk-auf::before{background:var(--sig);width:92px;height:38px;
  clip-path:polygon(0 0,100% 0,100% 100%,30px 100%);transform:translate(92px,38px)}
.bgk-auf::after{content:"";position:absolute;right:-90px;bottom:-140px;
  width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(168,252,3,.22),transparent 62%)}
.bgk-auf .bgk-txt{position:relative;max-width:64ch}
.bgk-lab{display:inline-block;margin-bottom:14px;
  font:700 10.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.14em;color:var(--sig)}
.bgk-auf .bgk-marke{background:color-mix(in srgb, var(--rf) 26%, transparent);
  border-color:color-mix(in srgb, var(--rf) 60%, transparent);
  color:color-mix(in srgb, var(--rf) 55%, #fff)}
.bgk-auf .bgk-kopf time{color:rgba(255,255,255,.6)}
.bgk-auf .bgk-titel{margin-bottom:14px;font-size:27px;line-height:1.2;color:#fff}
.bgk-auf .bgk-anriss{margin-bottom:22px;font-size:15px;color:rgba(255,255,255,.74)}
.bgk-auf .bgk-mehr{align-self:flex-start;margin:0;padding:12px 20px;color:var(--sig-ink);
  background:var(--sig);clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.bgk-auf:hover{transform:translateY(-3px);border-color:var(--rf-m);
  box-shadow:0 20px 40px -22px rgba(11,11,13,.75)}
/* Die Ringkette liegt hinter dem Text und verschwindet auf schmalen Bildschirmen */
.bgk-zier{display:none}
@media(min-width:1080px){
  .bgk-zier{position:absolute;right:38px;top:50%;transform:translateY(-50%);
    display:flex;align-items:center;gap:14px;pointer-events:none}
  .bgk-zier i{width:46px;height:46px;border-radius:50%;
    border:2px solid rgba(168,252,3,.42);position:relative}
  .bgk-zier i + i::before{content:"";position:absolute;right:100%;top:50%;
    width:14px;height:2px;background:rgba(168,252,3,.42)}
  .bgk-zier i:nth-child(2){background:rgba(168,252,3,.14)}
  .bgk-zier i:nth-child(4){background:rgba(168,252,3,.14)}}

@media(max-width:639px){
  .bgintro{margin-bottom:26px;font-size:14.5px}
  .bggitter{grid-template-columns:1fr}
  .bgk{padding:16px}
  .bgk-titel{font-size:16px}
  .bgk-auf{padding:20px 18px}
  .bgk-auf .bgk-titel{font-size:20px}
  .bgk-auf .bgk-anriss{font-size:14.5px}}
@media(prefers-reduced-motion:reduce){
  .bgk,.bgk::before,.bgk-mehr span{transition:none}
  .bgk:hover,.bgk-auf:hover{transform:none}}

/* ==========================================================================
   Blogartikel
   ========================================================================== */
/* Lesefortschritt: duenne Linie ganz oben im Bild, waechst von links.
   Fest statt klebend - sonst verschwindet sie unter der Kopfzeile. z-index
   liegt ueber der Kopfzeile (98), aber unter der Schublade (110). */
.lesebalken{position:fixed;left:0;right:0;top:0;z-index:99;height:3px;
  background:transparent;pointer-events:none}
.lesebalken i{display:block;height:100%;background:var(--sig);
  transform-origin:0 50%;transform:scaleX(0);will-change:transform}
/* Der Titel wird nicht getrennt - "FOR-SCHUNG" liest sich furchtbar. */
.artkopf h1{font-size:31px;max-width:22ch;hyphens:manual;-webkit-hyphens:manual}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:22px 0 0}
.art-marke{border-radius:999px;padding:6px 11px;background:rgba(24,158,99,.2);
  border:1px solid rgba(24,158,99,.55);color:#7BE3AE;
  font:700 10px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.08em}
.art-meta time{font:400 13px/1 var(--f-sans);color:rgba(255,255,255,.6)}

.artikel h3{margin:26px 0 8px;font:700 17px/1.35 var(--f-display);
  letter-spacing:-.02em;color:var(--ink)}
.artikel .wp-text + h3{margin-top:24px}
/* Einleitung traegt die Kernaussage - etwas groesser als der Fliesstext. */
#einleitung .wp-text{font-size:15.5px}
.art-vorab,.art-disclaimer{margin:20px 0 0;padding:16px 18px;border-radius:14px;
  background:rgba(168,252,3,.13);border:1px solid rgba(168,252,3,.55);
  font:400 13.5px/1.7 var(--f-sans);color:var(--ink-2)}
.art-vorab b,.art-disclaimer b{color:var(--ink)}
.art-disclaimer{margin-top:26px}
.art-disclaimer a{color:var(--cta);font-weight:600;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--cta) 35%, transparent)}

.art-tabhuelle{margin:18px 0 6px}
.art-tab2{min-width:420px}
.art-tab4{min-width:640px}
/* Die Zeile zum Artikelthema wird hervorgehoben. */
.wp-tab tbody tr.art-tab-hebe{background:rgba(168,252,3,.16)}
.wp-tab tbody tr.art-tab-hebe th{color:var(--ink)}
.wp-tab tbody tr.art-tab-hebe th::before{content:"";display:inline-block;
  width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--sig-ink);
  vertical-align:middle}

/* Stark / Offen / Kritisch - im Original ein Absatz mit fetten Anfuehrungen,
   hier drei Karten. Der Wortlaut bleibt unveraendert. */
.art-eingitter{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:16px 0 18px}
@media(min-width:820px){.art-eingitter{grid-template-columns:repeat(3,minmax(0,1fr))}}
.art-ein{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;min-width:0}
.art-ein b{display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font:700 12px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.09em;color:var(--ke)}
.art-ein b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ke)}
.art-ein p{margin:0;font:400 13.5px/1.6 var(--f-sans);color:var(--ink-2)}
.art-ein-gut{--ke:#189E63}
.art-ein-offen{--ke:#DE8A16}
.art-ein-kritisch{--ke:#C0392B}

.art-kritgitter{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:16px 0 18px}
@media(min-width:700px){.art-kritgitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
.art-krit{background:var(--tint);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;min-width:0}
.art-krit b{display:block;margin-bottom:6px;font:700 15px/1.3 var(--f-display);
  letter-spacing:-.02em;color:var(--ink)}
.art-krit p{margin:0;font:400 13.5px/1.6 var(--f-sans);color:var(--ink-2)}
.art-krit a{color:var(--cta);font-weight:600;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--cta) 35%, transparent)}

@media(max-width:639px){
  .artkopf h1{font-size:23px}
  .artikel h3{font-size:15.5px}
  #einleitung .wp-text{font-size:15px}
  .art-ein,.art-krit{padding:14px 16px}}
@media(prefers-reduced-motion:reduce){.lesebalken i{transition:none}}

/* ==========================================================================
   Transparenz & Reinheit
   ========================================================================== */
section.zoben{padding-bottom:0}
.zkgitter{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 46px}
@media(min-width:820px){.zkgitter{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zkz{position:relative;overflow:hidden;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:20px}
/* Lime-Fuss statt Balken oben - traegt die Farbe, ohne die Karte zu kappen */
.zkz::after{content:"";position:absolute;left:20px;bottom:0;width:34px;height:3px;background:var(--sig)}
.zkz b{display:block;font:800 27px/1.05 var(--f-display);font-style:italic;
  letter-spacing:-.03em;color:var(--ink)}
.zkz span{display:block;margin-top:7px;font:400 13px/1.4 var(--f-sans);color:var(--ink-2)}

.zsicht{max-width:66ch;margin:0 0 22px}
.zsicht h2{margin:0 0 10px;font-size:24px}

/* ---- Chromatogramm ---- */
.zchroma{position:relative;max-width:900px;margin:0 auto;padding:24px 20px 14px;background:#fff;
  border:1px solid var(--line);border-radius:20px;overflow:hidden}
.zchroma::before{content:"";position:absolute;left:0;top:0;width:320px;height:200px;
  pointer-events:none;background:radial-gradient(200px 150px at 0 0,rgba(168,252,3,.16),transparent 72%)}
.zchroma svg{position:relative;display:block;width:100%;height:auto}
.zc-marke{position:absolute;right:22px;top:22px;z-index:1}
.zc-marke span{display:inline-block;background:var(--nav);color:var(--sig);
  padding:10px 20px 10px 24px;
  font:800 12.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.05em}
.zc-raster line{stroke:var(--line);stroke-width:1}
.zc-achse{stroke:var(--line-strong);stroke-width:1.4}
.zc-flaeche{fill:rgba(168,252,3,.3)}
.zc-spur{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.zc-leiter{stroke:var(--line-strong);stroke-width:1.4;stroke-dasharray:2 3}
.zc-haupt{fill:var(--cta);font:700 17px var(--f-display);letter-spacing:-.01em}
.zc-neben{fill:var(--ink-2);font:400 14px var(--f-sans)}
.zc-achstext{fill:var(--ink-2);font:400 14px var(--f-sans)}

/* Grundstellung: sichtbar. Erst wenn das Skript "laeuft" setzt, wird
   zurueckgespult und gezeichnet - so steht ohne Skript trotzdem alles da. */
.zchroma.laeuft .zc-spur{stroke-dasharray:1;stroke-dashoffset:1;
  animation:zzeichnen 1.7s cubic-bezier(.55,.05,.3,1) forwards}
.zchroma.laeuft .zc-flaeche,
.zchroma.laeuft .zc-text{opacity:0;animation:zauf .7s ease-out .95s forwards}
.zchroma.laeuft .zc-marke{opacity:0;animation:zauf .5s ease-out 1.5s forwards}
@keyframes zzeichnen{to{stroke-dashoffset:0}}
@keyframes zauf{to{opacity:1}}

/* ---- Qualitaetsbelege ---- */
.zbelege h2,.zcoa h2,.zverf h2,.zfaq h2,.zmehr h2{margin:0 0 18px;font-size:24px}
.zbliste{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);list-style:none;margin:0;padding:0}
@media(min-width:760px){.zbliste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zbliste li{display:flex;align-items:flex-start;gap:13px;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  font:400 14.5px/1.55 var(--f-sans);color:var(--ink)}
.zb-ic{display:grid;place-items:center;width:24px;height:24px;flex:none;margin-top:1px;
  border-radius:8px;background:var(--sig);color:var(--sig-ink)}
.zb-ic svg{width:14px;height:14px;display:block}

/* ---- COA erklaert ---- */
section.zcoa{padding-bottom:34px}
.zcoa-kopf{max-width:72ch;margin:0 0 46px}
.zcoa-h2{margin-bottom:20px}
.zsgitter{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);list-style:none;margin:0;padding:0;
  counter-reset:none}
@media(min-width:760px){.zsgitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zs{position:relative;overflow:hidden;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  transition:border-color .2s, transform .2s ease-out, box-shadow .2s}
.zs:hover{border-color:var(--sig);transform:translateY(-3px);
  box-shadow:0 16px 34px -20px rgba(168,252,3,.9)}
/* Inhalt liegt ueber der Geisterziffer. Ohne z-index gewinnt sonst das
   spaeter im Markup stehende Element und die Ziffer legt sich auf den Text. */
.zs-nr,.zs b,.zs p{position:relative;z-index:1}
.zs-nr{display:grid;place-items:center;width:30px;height:30px;margin-bottom:14px;
  border-radius:10px;background:var(--sig);color:var(--sig-ink);
  font:800 15px/1 var(--f-display);font-style:italic}
.zs b{display:block;margin-bottom:7px;font:700 16.5px/1.3 var(--f-display);
  letter-spacing:-.02em;color:var(--ink)}
.zs p{margin:0;font:400 14px/1.6 var(--f-sans);color:var(--ink-2)}
/* Grosse Geisterziffer als Tiefenebene - reine Zier, deshalb aria-hidden */
.zs-geist{position:absolute;right:-10px;bottom:-38px;z-index:0;pointer-events:none;
  font:800 124px/1 var(--f-display);font-style:italic;color:var(--tint);
  -webkit-text-stroke:1px var(--tint2)}

/* ---- Verfahren ---- */
.zverf-lead{max-width:70ch;margin-bottom:22px}
.zvgitter{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin:0 0 16px}
@media(min-width:760px){.zvgitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zv{min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.zv-ic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:16px;
  border-radius:13px;background:var(--tint);color:var(--cta)}
/* Die gelieferten Symbole haben eine 64er Zeichenflaeche und mehr
   Binnendetail als unsere Strichsymbole - deshalb etwas groesser. */
.zv-ic svg{width:25px;height:25px;display:block}
.zv-lab{margin:0 0 6px;font:700 11px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.11em;color:var(--cta)}
.zv b{display:block;margin-bottom:8px;font:700 18px/1.3 var(--f-display);
  letter-spacing:-.02em;color:var(--ink)}
.zv-txt{margin:0;font:400 14px/1.6 var(--f-sans);color:var(--ink-2)}
.zwarum{background:rgba(168,252,3,.13);border:1px solid rgba(168,252,3,.55);
  border-radius:16px;padding:20px 22px}
.zwarum-t{margin:0 0 7px;font:700 15px/1.3 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.zwarum p:last-child{margin:0;font:400 14px/1.65 var(--f-sans);color:var(--ink-2)}

/* ---- Mehr entdecken ---- */
section.zmehr{padding-top:0}
.zm-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.zm-chip{border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  border-radius:999px;padding:11px 19px;text-decoration:none;
  font:600 14px/1 var(--f-sans);
  transition:background-color .18s, border-color .18s, color .18s, transform .2s ease-out}
.zm-chip:hover{background:var(--nav);border-color:var(--nav);color:#fff;transform:translateY(-2px)}
.zhinweis{margin:0;padding:16px 18px;border-radius:14px;
  background:var(--tint);border:1px solid var(--line);
  font:400 13.5px/1.65 var(--f-sans);color:var(--ink-2)}

@media(max-width:639px){
  .zkz{padding:16px}
  .zkz b{font-size:22px}
  .zkz::after{left:16px}
  .zchroma{padding:16px 12px 8px;border-radius:16px}
  .zc-marke{position:static;margin:0 0 12px}
  .zc-marke span{padding:8px 16px 8px 20px;font-size:11.5px}
  .zc-haupt{font-size:22px}
  .zc-neben,.zc-achstext{font-size:18px}
  .zsicht h2,.zbelege h2,.zcoa h2,.zverf h2,.zfaq h2,.zmehr h2{font-size:20px}
  .zs{padding:16px 18px}
  .zs-geist{font-size:88px;bottom:-26px}
  .zv{padding:18px}}
@media(prefers-reduced-motion:reduce){
  .zs,.zm-chip{transition:none}
  .zs:hover,.zm-chip:hover{transform:none}
  .zchroma.laeuft .zc-spur,.zchroma.laeuft .zc-flaeche,
  .zchroma.laeuft .zc-text,.zchroma.laeuft .zc-marke{animation:none;opacity:1;stroke-dasharray:none}}

/* ==========================================================================
   Über uns
   ========================================================================== */
section.uoben{padding-bottom:0}
.ukgitter{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 46px}
@media(min-width:900px){.ukgitter{grid-template-columns:repeat(4,minmax(0,1fr))}}
.uk{position:relative;overflow:hidden;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:20px}
.uk::after{content:"";position:absolute;left:20px;bottom:0;width:34px;height:3px;background:var(--sig)}
.uk b{display:block;font:800 26px/1.05 var(--f-display);font-style:italic;
  letter-spacing:-.03em;color:var(--ink)}
.uk-lab{display:block;margin-top:9px;font:700 13.5px/1.3 var(--f-sans);color:var(--ink)}
.uk-txt{display:block;margin-top:3px;font:400 12.5px/1.4 var(--f-sans);color:var(--ink-2)}

.uwer{max-width:74ch}
.uwer h2,.uweg h2,.ustehen h2,.uunter h2{margin:0 0 12px;font-size:24px}

/* ---- Weg der Charge ---- */
/* Fuenf Stationen, auf breiten Schirmen von einer Linie verbunden - die
   Reihenfolge ist hier echte Information, kein Ziernummerieren. */
.uweg-lead,.ustehen-lead{max-width:66ch;margin-bottom:22px}
.uwgitter{position:relative;display:grid;gap:14px;grid-template-columns:minmax(0,1fr);
  list-style:none;margin:0;padding:0}
@media(min-width:640px){.uwgitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){
  .uwgitter{grid-template-columns:repeat(5,minmax(0,1fr))}
  .uwgitter::before{content:"";position:absolute;left:34px;right:34px;top:38px;height:2px;
    background:var(--line-strong)}}
.uw{position:relative;min-width:0;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:18px 20px 20px;
  transition:border-color .2s, transform .2s ease-out, box-shadow .2s}
.uw:hover{border-color:var(--sig);transform:translateY(-3px);
  box-shadow:0 16px 34px -20px rgba(168,252,3,.9)}
.uw-nr{position:relative;display:grid;place-items:center;width:40px;height:40px;
  margin-bottom:14px;border-radius:50%;background:var(--nav);color:var(--sig);
  font:800 13px/1 var(--f-mono);letter-spacing:.02em;
  box-shadow:0 0 0 5px #fff}
.uw b{display:block;margin-bottom:6px;font:700 17px/1.25 var(--f-display);
  letter-spacing:-.02em;color:var(--ink)}
.uw p{margin:0;font:400 13.5px/1.55 var(--f-sans);color:var(--ink-2)}

/* ---- Wofuer wir stehen ---- */
.ustgitter{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);list-style:none;margin:0 0 18px;padding:0}
@media(min-width:760px){.ustgitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ust{display:flex;align-items:flex-start;gap:13px;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.ust-ic{display:grid;place-items:center;width:24px;height:24px;flex:none;margin-top:2px;
  border-radius:8px;background:var(--sig);color:var(--sig-ink)}
.ust-ic svg{width:14px;height:14px;display:block}
.ust-t{min-width:0}
.ust-t b{display:block;margin-bottom:4px;font:700 15px/1.3 var(--f-display);
  letter-spacing:-.02em;color:var(--ink)}
.ust-t small{display:block;font:400 13.5px/1.55 var(--f-sans);color:var(--ink-2)}
.ust-mehr{margin:0;font:400 14px/1.6 var(--f-sans);color:var(--ink-2)}
.ust-mehr a{color:var(--cta);text-decoration:none;font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--cta) 35%, transparent)}
.ust-mehr a:hover{border-bottom-color:var(--cta);background:var(--tint2)}

/* ---- Was uns unterscheidet ---- */
.uugitter{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:660px){.uugitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.uugitter{grid-template-columns:repeat(3,minmax(0,1fr))}}
.uu{position:relative;overflow:hidden;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:22px;
  transition:border-color .2s, transform .2s ease-out, box-shadow .2s}
.uu::before{content:"";position:absolute;left:0;top:0;width:190px;height:140px;pointer-events:none;
  background:radial-gradient(120px 100px at 4px -6px,rgba(168,252,3,.16),transparent 72%)}
.uu:hover{border-color:var(--cta);transform:translateY(-3px);
  box-shadow:0 16px 34px -20px rgba(109,52,214,.6)}
.uu-ic{position:relative;display:grid;place-items:center;width:46px;height:46px;
  margin-bottom:16px;border-radius:14px;background:var(--nav);color:var(--sig)}
.uu-ic svg{width:23px;height:23px;display:block}
.uu b{position:relative;display:block;margin-bottom:8px;font:700 17px/1.3 var(--f-display);
  letter-spacing:-.02em;color:var(--ink)}
.uu p{position:relative;margin:0;font:400 14px/1.6 var(--f-sans);color:var(--ink-2)}

/* ---- Team, Seriositaet ---- */
section.uteam{padding-bottom:34px}
.uprose{max-width:76ch}
.uprose h2{margin:0 0 12px;font-size:24px}
.uprose h2 + p{margin-bottom:34px}
.uprose p:last-child{margin-bottom:0}

/* ---- Schlussband ---- */
section.uschluss{padding-top:0}
.uband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  background:var(--nav);border-radius:20px;padding:34px 36px;margin:0 0 22px}
.uband-txt{min-width:0}
.uband h2{margin:0;font-size:26px;color:#fff}
.uband p{margin:10px 0 0;font:400 14.5px/1.6 var(--f-sans);color:rgba(255,255,255,.72)}
.uband-btn{flex:none;padding:0 30px}
.uband-btn span{transition:transform .18s ease-out}
.uband-btn:hover span{transform:translateX(4px)}
.uhinweis{margin:0;padding:16px 18px;border-radius:14px;
  background:var(--tint);border:1px solid var(--line);
  font:400 13.5px/1.65 var(--f-sans);color:var(--ink-2)}

@media(max-width:639px){
  .uk{padding:16px}
  .uk b{font-size:21px}
  .uk::after{left:16px}
  .uwer h2,.uweg h2,.ustehen h2,.uunter h2,.uprose h2{font-size:20px}
  .uw,.uu{padding:16px 18px}
  .uband{padding:24px 20px;border-radius:16px}
  .uband h2{font-size:21px}
  .uband-btn{width:100%}}
@media(prefers-reduced-motion:reduce){
  .uw,.uu,.uband-btn span{transition:none}
  .uw:hover,.uu:hover{transform:none}}

/* ==========================================================================
   Kontakt
   ========================================================================== */
.kogrid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){
  .kogrid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:30px;align-items:start}}
.kolinks{display:grid;gap:18px;min-width:0}

/* ---- Kontaktdaten ---- */
.kokarte{position:relative;overflow:hidden;background:var(--nav);color:#fff;
  border-radius:20px;padding:26px 28px}
.kokarte::after{content:"";position:absolute;right:-70px;bottom:-110px;
  width:280px;height:280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(168,252,3,.2),transparent 62%)}
.kokarte h2{position:relative;margin:0 0 20px;font-size:22px;color:#fff}
/* Die Mailzeile ist der Hauptweg - deshalb als eigene Flaeche, nicht als Link im Text. */
.ko-mail{position:relative;display:flex;align-items:center;gap:14px;
  padding:15px 16px;border-radius:14px;text-decoration:none;
  background:rgba(168,252,3,.12);border:1px solid rgba(168,252,3,.4);
  transition:background-color .18s, border-color .18s, transform .2s ease-out}
.ko-mail:hover{background:rgba(168,252,3,.2);border-color:var(--sig);transform:translateY(-2px)}
.ko-mail-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:13px;background:var(--sig);color:var(--sig-ink)}
.ko-mail-ic svg{width:21px;height:21px;display:block}
.ko-mail-t{flex:1;min-width:0}
.ko-mail-t small{display:block;font:700 10px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.6)}
.ko-mail-t b{display:block;margin-top:6px;font:700 16px/1.3 var(--f-sans);
  color:var(--sig);overflow-wrap:anywhere}
.ko-mail-pf{flex:none;color:var(--sig);font-size:18px;transition:transform .2s ease-out}
.ko-mail:hover .ko-mail-pf{transform:translateX(4px)}
.ko-daten{position:relative;display:grid;gap:0;margin:8px 0 0}
.ko-daten > div{padding:15px 0;border-top:1px solid rgba(255,255,255,.13)}
.ko-daten dt{font:700 10px/1 var(--f-sans);text-transform:uppercase;
  letter-spacing:.11em;color:rgba(255,255,255,.6)}
.ko-daten dd{margin:7px 0 0;font:400 14px/1.6 var(--f-sans);color:rgba(255,255,255,.86)}
.ko-daten a{color:var(--sig);text-decoration:none;
  border-bottom:1px solid rgba(168,252,3,.45)}
.ko-daten a:hover{border-bottom-color:var(--sig)}

/* ---- Häufige Anliegen ---- */
.koanliegen{background:var(--tint);border:1px solid var(--line);border-radius:20px;padding:22px 24px}
.ko-an-t{margin:0 0 14px;font:700 16px/1.35 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.koanliegen ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:2px}
.koanliegen li{margin:0}
.koanliegen li a{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:10px;
  text-decoration:none;font:400 14.5px/1.4 var(--f-sans);color:var(--ink);
  transition:background-color .16s, color .16s}
.koanliegen li a span{color:var(--cta);transition:transform .18s ease-out}
.koanliegen li a:hover{background:#fff;color:var(--cta)}
.koanliegen li a:hover span{transform:translateX(3px)}
.ko-an-x{margin:0;font:400 13.5px/1.65 var(--f-sans);color:var(--ink-2)}
.ko-an-x a{color:var(--cta);text-decoration:none;font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--cta) 35%, transparent)}
.ko-an-x a:hover{border-bottom-color:var(--cta);background:var(--tint2)}

/* ---- Formular ---- */
.koform{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 28px;min-width:0}
.koform h2{margin:0 0 8px;font-size:22px}
.ko-f-sub{margin:0 0 16px;font:400 14.5px/1.6 var(--f-sans);color:var(--ink-2)}
.ko-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 24px;padding:0}
.ko-chips li{display:flex;align-items:center;gap:7px;
  background:rgba(168,252,3,.15);border:1px solid rgba(168,252,3,.5);border-radius:999px;
  padding:7px 13px 7px 10px;font:600 12.5px/1 var(--f-sans);color:var(--ink)}
.ko-chips span{display:grid;place-items:center;width:15px;height:15px;flex:none;color:var(--sig-ink)}
.ko-chips svg{width:12px;height:12px;display:block}

.ko-felder{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:560px){.ko-felder{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ko-breit{grid-column:1/-1}
.ko-feld{margin:0;min-width:0}
.ko-feld label,.ko-lab{display:block;margin:0 0 7px;
  font:600 13px/1.2 var(--f-sans);color:var(--ink)}
.ko-feld label span{font-weight:400;color:var(--ink-2)}
.ko-feld input,.ko-feld textarea{display:block;width:100%;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:12px;
  padding:13px 15px;font:400 14.5px/1.5 var(--f-sans);color:var(--ink);
  transition:border-color .18s, box-shadow .18s}
.ko-feld textarea{resize:vertical;min-height:132px}
.ko-feld input::placeholder,.ko-feld textarea::placeholder{color:#9990b5}
.ko-feld input:focus,.ko-feld textarea:focus{outline:none;
  border-color:var(--sig);box-shadow:0 0 0 4px rgba(168,252,3,.22)}
/* Fehlende Pflichtangabe - erst nach dem Absenden, nicht beim Tippen */
.ko-feld .ko-leer{border-color:var(--sale);box-shadow:0 0 0 4px rgba(192,57,43,.12)}

.ko-pruef{display:flex;align-items:center;gap:12px;
  border:1.5px dashed var(--line-strong);border-radius:12px;padding:16px;
  font:400 13px/1.5 var(--f-sans);color:var(--ink-2);background:var(--tint)}
.ko-pruef-ic{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--cta)}
.ko-pruef-ic svg{width:16px;height:16px;display:block}

.ko-senden{grid-column:1/-1;width:100%;margin-top:2px;border-radius:14px}
.ko-stand{grid-column:1/-1;margin:0;padding:13px 15px;border-radius:12px;
  font:600 13.5px/1.5 var(--f-sans)}
.ko-stand:empty{display:none}
.ko-stand-ok{background:rgba(168,252,3,.16);border:1px solid rgba(168,252,3,.55);color:var(--ink)}
.ko-stand-fehler{background:rgba(192,57,43,.09);border:1px solid rgba(192,57,43,.4);color:var(--sale)}
.ko-klein{grid-column:1/-1;margin:0;font:400 12.5px/1.6 var(--f-sans);color:var(--ink-2)}
.ko-klein a{color:var(--cta);text-decoration:none;font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--cta) 35%, transparent);
  overflow-wrap:anywhere}

.kohinweis{margin:26px 0 0;padding:16px 18px;border-radius:14px;
  background:var(--tint);border:1px solid var(--line);
  font:400 13.5px/1.65 var(--f-sans);color:var(--ink-2)}

@media(max-width:639px){
  .kokarte,.koform{padding:20px}
  .koanliegen{padding:18px}
  .kokarte h2,.koform h2{font-size:19px}
  .ko-mail-t b{font-size:15px}}
@media(prefers-reduced-motion:reduce){
  .ko-mail,.ko-mail-pf,.koanliegen li a span{transition:none}
  .ko-mail:hover{transform:none}}

/* ==========================================================================
   Rechtstexte — AGB, Widerruf, Datenschutz, Cookie-Richtlinie, Impressum
   Alle fünf teilen sich dieses Layout und die Verzeichnis-Bausteine aus
   dem Abschnitt "Was sind Peptide?" (.wpgrid, .wp-toc, .wpsec).
   ========================================================================== */
.rtext{max-width:76ch}
.rtext h2{margin:0 0 12px;font-size:21px;color:var(--ink)}
.rtext h3{margin:24px 0 8px;font:700 15.5px/1.35 var(--f-display);
  letter-spacing:-.01em;color:var(--ink)}
.rtext p{margin:0 0 14px;font:400 14.5px/1.75 var(--f-sans);color:var(--ink-2)}
.rtext p:last-child{margin-bottom:0}
.rtext b{color:var(--ink)}
.rtext a{color:var(--cta);text-decoration:none;font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--cta) 35%, transparent);
  transition:border-color .15s, background-color .15s;overflow-wrap:anywhere}
.rtext a:hover{border-bottom-color:var(--cta);background:var(--tint2)}

/* Der erste Abschnitt braucht keinen Extraabstand nach oben, alle weiteren
   werden durch eine feine Linie getrennt - bei neun Paragrafen hilft das
   beim Wiederfinden der Stelle. */
.rtext .wpsec + .wpsec{margin-top:34px;padding-top:32px;border-top:1px solid var(--line)}
.rt-vorspann + .wpsec{border-top:0;padding-top:0}
.rt-vorspann p{margin:0;padding:18px 20px;border-radius:14px;
  background:rgba(168,252,3,.13);border:1px solid rgba(168,252,3,.55);
  font-size:14.5px;color:var(--ink-2)}

.rt-liste{margin:0 0 14px;padding:0;list-style:none}
.rt-liste li{position:relative;padding-left:24px;margin-bottom:9px;
  font:400 14.5px/1.7 var(--f-sans);color:var(--ink-2)}
.rt-liste li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:2px;
  background:var(--sig);outline:1px solid var(--line-strong)}

.rt-adresse{margin:0 0 14px;padding:18px 20px;border-radius:14px;
  background:var(--tint);border:1px solid var(--line);
  font:600 15px/1.75 var(--f-sans);font-style:normal;color:var(--ink)}

@media(max-width:639px){
  .rtext h2{font-size:18px}
  .rtext .wpsec + .wpsec{margin-top:28px;padding-top:26px}
  .rt-adresse{padding:15px 16px;font-size:14.5px}}

/* ==========================================================================
   Versand
   ========================================================================== */
section.voben{padding-bottom:34px}
.vkgitter{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 46px}
@media(min-width:900px){.vkgitter{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vk{position:relative;overflow:hidden;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:20px}
.vk::after{content:"";position:absolute;left:20px;bottom:0;width:34px;height:3px;background:var(--sig)}
.vk b{display:block;font:800 24px/1.1 var(--f-display);font-style:italic;
  letter-spacing:-.03em;color:var(--ink)}
.vk span{display:block;margin-top:8px;font:400 13px/1.45 var(--f-sans);color:var(--ink-2)}

.voben h2,.vkosten h2{margin:0 0 18px;font-size:24px}
.vsgitter{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);list-style:none;margin:0;padding:0}
@media(min-width:820px){.vsgitter{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vs{min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;transition:border-color .2s, transform .2s ease-out, box-shadow .2s}
.vs:hover{border-color:var(--sig);transform:translateY(-3px);
  box-shadow:0 16px 34px -20px rgba(168,252,3,.9)}
.vs-nr{display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;
  border-radius:50%;background:var(--nav);color:var(--sig);
  font:800 13px/1 var(--f-mono);letter-spacing:.02em}
.vs b{display:block;margin-bottom:6px;font:700 17px/1.3 var(--f-display);
  letter-spacing:-.02em;color:var(--ink)}
.vs p{margin:0;font:400 13.5px/1.6 var(--f-sans);color:var(--ink-2)}

/* Zwei Zeilen, die zweite ist die gute Nachricht - deshalb in Lime. */
section.vkosten{padding-top:0}
.vpreise{display:grid;gap:12px;margin:0;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.vpreise{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vpreise > div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.vpreise dt{font:400 14.5px/1.4 var(--f-sans);color:var(--ink-2)}
.vpreise dd{margin:0;font:800 22px/1.1 var(--f-display);font-style:italic;
  letter-spacing:-.03em;color:var(--ink)}
/* .vpreise > div ist gleich stark - deshalb hier ebenfalls mit Elternteil. */
.vpreise > .vp-frei{background:rgba(168,252,3,.14);border-color:rgba(168,252,3,.55)}
.vp-frei dt{color:var(--ink)}

.vtgrid{display:grid;gap:26px 34px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.vtgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vt h2{margin:0 0 10px;font-size:20px}
.vt p{margin:0;font:400 14.5px/1.75 var(--f-sans);color:var(--ink-2)}
.vt a,.vfragen a{color:var(--cta);text-decoration:none;font-weight:600;
  border-bottom:1px solid color-mix(in srgb, var(--cta) 35%, transparent)}
.vt a:hover,.vfragen a:hover{border-bottom-color:var(--cta);background:var(--tint2)}
.vfragen{margin:34px 0 0;padding:20px 22px;border-radius:16px;
  background:var(--tint);border:1px solid var(--line)}
.vf-t{margin:0 0 6px;font:700 16px/1.3 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.vfragen p:last-child{margin:0;font:400 14px/1.7 var(--f-sans);color:var(--ink-2)}

/* ==========================================================================
   Zahlungsmethoden
   ========================================================================== */
section.zmoben{padding-bottom:0}
.zmoben h2{margin:0 0 10px;font-size:24px}
.zm-lead{max-width:66ch;margin-bottom:22px}
.zmgitter{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));
  list-style:none;margin:0;padding:0}
@media(min-width:640px){.zmgitter{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.zmgitter{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zm{display:flex;align-items:center;gap:13px;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:15px 16px;
  transition:border-color .2s, transform .2s ease-out, box-shadow .2s}
.zm:hover{border-color:var(--cta);transform:translateY(-3px);
  box-shadow:0 16px 34px -20px rgba(109,52,214,.55)}
/* Weisse Fläche unter den Markenzeichen - die Logos sind auf Weiss gezeichnet
   und verlieren auf getöntem Grund ihre Kontur. */
.zm-logo{display:grid;place-items:center;width:60px;height:40px;flex:none;padding:6px;
  border:1px solid var(--line);border-radius:11px;background:#fff}
.zm-logo img{max-width:100%;max-height:100%;width:auto;height:auto}
.zm-t{min-width:0}
.zm-t b{display:block;font:700 14.5px/1.3 var(--f-sans);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zm-t small{display:block;margin-top:2px;font:400 12.5px/1.4 var(--f-sans);color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

section.zmkrypto{padding-bottom:34px}
.zkrypto{display:flex;flex-wrap:wrap;gap:20px;background:var(--nav);color:#fff;
  border-radius:20px;padding:28px 30px;position:relative;overflow:hidden}
.zkrypto::after{content:"";position:absolute;right:-80px;top:-90px;width:280px;height:280px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(168,252,3,.2),transparent 62%)}
.zkrypto-ic{position:relative;display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:16px;background:var(--sig);color:var(--sig-ink)}
.zkrypto-ic svg{width:27px;height:27px;display:block}
.zkrypto-t{position:relative;flex:1;min-width:min(100%,260px)}
.zkrypto h2{margin:0 0 10px;font-size:22px;color:#fff}
.zkrypto p{margin:0;max-width:72ch;font:400 14.5px/1.75 var(--f-sans);color:rgba(255,255,255,.76)}

section.zmtext{padding-top:0}
.zagrid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.zagrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.za{min-width:0;background:var(--tint);border:1px solid var(--line);
  border-radius:16px;padding:22px 24px}
.za h2{margin:0 0 9px;font-size:19px}
.za p{margin:0;font:400 14px/1.7 var(--f-sans);color:var(--ink-2)}

@media(max-width:639px){
  .vk,.vs,.za{padding:16px 18px}
  .vk b{font-size:20px}
  .vk::after{left:16px}
  .voben h2,.vkosten h2,.zmoben h2{font-size:20px}
  .vpreise > div{padding:16px 18px}
  .zkrypto{padding:20px;border-radius:16px}
  .zkrypto h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){
  .vs,.zm{transition:none}
  .vs:hover,.zm:hover{transform:none}}

/* Coin-Marken im Krypto-Band. Weisse Pille, weil die Coin-Logos ihre
   eigenen Marken­farben tragen und auf Schwarz untergehen. */
.zcoins{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:20px 0 0;padding:0}
.zcoins li{display:flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:8px 15px 8px 11px;
  font:600 13.5px/1 var(--f-sans);color:var(--ink)}
.zcoins img{width:20px;height:20px;flex:none;object-fit:contain}
.zc-weitere{padding-left:15px !important;color:var(--ink-2) !important;font-weight:400 !important}
@media(max-width:639px){
  .zcoins{gap:7px;margin-top:16px}
  .zcoins li{padding:7px 12px 7px 9px;font-size:12.5px}}

/* ==========================================================================
   Dropdown-Kaskade (nur Desktop)
   Erst faehrt das Panel auf, dann ziehen die Gruppen darin gestaffelt nach.
   Die Verzoegerung steht ausschliesslich im geoeffneten Zustand - beim
   Schliessen gehen alle Teile sofort mit, sonst wirkt das Zuklappen zaeh.
   ========================================================================== */
@media(min-width:1024px){
  /* Runde Ecken im Panelinneren - bei Mobil ist das Panel Teil der Schublade
     und bleibt dort wie gehabt. */
  .mega .mi{border-radius:11px}
  .mega .mi .ico{border-radius:9px}
  .mega .feat{border-radius:14px}

  .mega :is(.lime, .msuche, .cols > *, .tgrid > *, .mzonen > *, .allrow){
    opacity:0;transform:translateY(8px);transition-delay:0s;
    transition:opacity .14s ease-in, transform .14s ease-in}
  .mega .lime{transform:none}

  nav.main li.has-menu:hover > .mega :is(.lime, .msuche, .cols > *, .tgrid > *, .mzonen > *, .allrow),
  nav.main li.has-menu:focus-within > .mega :is(.lime, .msuche, .cols > *, .tgrid > *, .mzonen > *, .allrow){
    opacity:1;transform:none;transition-delay:var(--verzug,0s);
    transition-property:opacity, transform;
    transition-duration:.34s, .4s;
    transition-timing-function:ease-out, cubic-bezier(.2,.8,.25,1)}

  /* Reihenfolge der Staffelung */
  .mega .lime{--verzug:.10s}
  .mega .msuche{--verzug:.04s}
  /* Im Produktpanel steht die Quelltextfolge nicht in der Bildfolge - die
     Zonen werden per order sortiert. Deshalb wird hier nach Zone benannt
     statt nach Position, sonst laeuft die Kaskade quer durchs Bild. */
  .mega .mseiten{--verzug:.09s}
  .mega .mspalten{--verzug:.13s}
  .mega .mkarte{--verzug:.17s}
  .mega .mchips,.mega .malle{--verzug:.13s}
  .mega .cols > *:nth-child(1){--verzug:.05s}
  .mega .cols > *:nth-child(2){--verzug:.09s}
  .mega .cols > *:nth-child(3){--verzug:.13s}
  .mega .cols > *:nth-child(4){--verzug:.17s}
  .mega .tgrid > *:nth-child(1){--verzug:.04s}
  .mega .tgrid > *:nth-child(2){--verzug:.07s}
  .mega .tgrid > *:nth-child(3){--verzug:.10s}
  .mega .tgrid > *:nth-child(4){--verzug:.13s}
  .mega .tgrid > *:nth-child(5){--verzug:.16s}
  .mega .tgrid > *:nth-child(6){--verzug:.19s}
  .mega .tgrid > *:nth-child(n+7){--verzug:.22s}
  .mega .allrow{--verzug:.22s}
}
@media(min-width:1024px) and (prefers-reduced-motion:reduce){
  /* Ohne Bewegung faehrt nichts nach - der Inhalt steht sofort. */
  .mega :is(.lime, .msuche, .cols > *, .tgrid > *, .mzonen > *, .allrow){
    opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   KASSE  (/kasse)

   Zwei Spalten: links das Formular auf weissem Blatt, rechts die
   Bestelluebersicht als dunkle Karte. Die dunkle Karte ist Absicht — sie
   ist der einzige Ort der Seite, an dem Geld steht, und holt Kopfzeile und
   Fusszeile optisch in die Mitte. Auf Mobil steht sie unter dem Formular.

   Formularfelder folgen dem Kontaktformular (12 px Radius, Lime-Fokusring),
   damit beide Seiten dieselbe Sprache sprechen. Neu ist nur die Marke ueber
   dem Feld: sie traegt denselben Wortlaut wie der Platzhalter und blendet
   sich ein, sobald etwas eingetippt ist — so bleibt die Beschriftung
   sichtbar, ohne dass das Feld beim Tippen springt.
   ========================================================================== */

/* Fortschritt im Kopfbalken */
.ka-weg{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:20px 0 0;padding:0}
.ka-weg li{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  font:700 10.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.07em;
  color:rgba(255,255,255,.55)}
.ka-weg i{display:grid;place-items:center;width:20px;height:20px;flex:none;
  border-radius:999px;background:rgba(255,255,255,.1);
  font:700 9.5px/1 var(--f-mono);font-style:normal;color:inherit}
.ka-weg .ab{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)}
.ka-weg .ab i{background:rgba(168,252,3,.18);color:var(--sig)}
.ka-weg .an{color:var(--sig-ink);background:var(--sig);border-color:var(--sig)}
.ka-weg .an i{background:rgba(11,11,13,.14);color:var(--sig-ink)}

section.blk.kasse{background:var(--tint);padding:34px 0 56px}
/* Mehrere Bausteine der Kasse setzen display (flex, block, grid) und wuerden
   damit hidden aushebeln. Ein Riegel fuer die ganze Seite. */
.kasse [hidden]{display:none !important}

/* ---- Raster ---- */
.ka-grid{display:grid;gap:22px;align-items:start}
.ka-grid[hidden]{display:none}
@media(min-width:1024px){.ka-grid{grid-template-columns:minmax(0,1fr) 384px;gap:28px}}

/* ---- Linke Spalte ----
   Jeder Schritt steht in einem eigenen Kasten. Vorher war es ein einziges
   Blatt mit Trennlinien; getrennte Kaesten machen sichtbar, dass es drei
   abgeschlossene Schritte sind, und lassen dem Auge zwischen ihnen Luft. */
.ka-blatt{min-width:0;display:grid;gap:16px;align-content:start}

.ka-block{min-width:0;margin:0;padding:22px 20px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 48px -40px rgba(19,16,32,.5)}
@media(min-width:640px){.ka-block{padding:26px 28px}}
/* Ueberschrift statt <legend>: eine legend wird vom Browser auf die
   Rahmenlinie des fieldsets gesetzt und ragt damit aus dem Kasten heraus.
   Hier ist es eine gewoehnliche Ueberschrift im Kasten. */
.ka-block-t{margin:0 0 16px;font:700 19px/1.25 var(--f-display);letter-spacing:-.02em;
  color:var(--ink)}

.ka-felder{display:grid;gap:12px;min-width:0}
@media(min-width:560px){.ka-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ka-breit{grid-column:1/-1}}

.ka-feld{position:relative;margin:0;min-width:0}
.ka-feld input{display:block;width:100%;height:58px;
  background:#fff;border:1.5px solid var(--line-strong);border-radius:12px;
  padding:22px 15px 8px;font:400 14.5px/1.4 var(--f-sans);color:var(--ink);
  transition:border-color .18s, box-shadow .18s}
.ka-feld input::placeholder{color:#9990b5}
.ka-feld input:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 4px rgba(168,252,3,.22)}
.ka-feld label{position:absolute;left:16px;top:9px;pointer-events:none;
  font:700 9px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.09em;color:var(--cta);
  opacity:0;transform:translateY(3px);transition:opacity .16s, transform .16s}
.ka-feld input:not(:placeholder-shown) + label,
.ka-feld input:focus + label{opacity:1;transform:none}
/* Pflichtfeld leer — erst nach dem Absenden, nicht beim Tippen */
.ka-feld.fehler input{border-color:var(--sale);box-shadow:0 0 0 4px rgba(192,57,43,.12)}

/* Land steht fest: gleiche Form, aber sichtbar unveraenderlich. */
.ka-fest input{background:var(--tint);color:var(--ink-2);cursor:default;padding-top:15px;padding-right:52px}
.ka-fahne{position:absolute;right:15px;top:50%;transform:translateY(-50%);
  width:22px;height:14px;border-radius:2px;overflow:hidden;line-height:0;
  box-shadow:0 0 0 1px var(--line-strong)}
.ka-fahne svg{width:100%;height:100%;display:block}

.ka-pruefblock{margin-top:14px}
.ka-lab{display:block;margin:0 0 7px;font:600 13px/1.2 var(--f-sans);color:var(--ink)}
.ka-pruef{display:flex;align-items:center;gap:12px;
  border:1.5px dashed var(--line-strong);border-radius:12px;padding:16px;
  font:400 13px/1.5 var(--f-sans);color:var(--ink-2);background:var(--tint)}
.ka-pruef-ic{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--cta)}
.ka-pruef-ic svg{width:16px;height:16px;display:block}

.ka-klein{margin:12px 0 0;font:400 12.5px/1.6 var(--f-sans);color:var(--ink-2)}
.ka-klein a{color:var(--cta);font-weight:700;text-decoration:none}
.ka-klein a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Zahlarten ---- */
.ka-zahl{display:grid;gap:10px;min-width:0}
.ka-opt{position:relative;display:block;min-width:0;cursor:pointer;
  border:1.5px solid var(--line-strong);border-radius:14px;padding:15px 16px 15px 17px;
  background:#fff;transition:border-color .18s, box-shadow .18s, background-color .18s}
.ka-opt::before{content:"";position:absolute;left:-1.5px;top:14px;bottom:14px;width:3px;
  border-radius:3px;background:var(--sig);opacity:0;transition:opacity .18s}
.ka-opt:hover{border-color:var(--ink-2)}
.ka-opt.an{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink), 0 14px 30px -26px rgba(19,16,32,.8)}
.ka-opt.an::before{opacity:1}
.ka-opt:has(input:focus-visible){box-shadow:0 0 0 4px rgba(168,252,3,.3)}
/* Der Knopf bleibt bedienbar und in der Tabreihenfolge — nur unsichtbar,
   die Marke daneben uebernimmt die Darstellung. */
.ka-opt input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.ka-opt-in{display:block;min-width:0}
.ka-opt-kopf{display:flex;align-items:center;gap:10px;min-width:0}
.ka-opt-kopf b{font:700 14.5px/1.3 var(--f-sans);color:var(--ink);overflow-wrap:anywhere}
.ka-punkt{position:relative;display:block;width:18px;height:18px;flex:none;border-radius:999px;
  border:2px solid var(--line-strong);background:#fff;transition:border-color .18s}
.ka-punkt::after{content:"";position:absolute;inset:3px;border-radius:999px;
  background:var(--ink);transform:scale(0);transition:transform .18s ease-out}
.ka-opt.an .ka-punkt{border-color:var(--ink)}
.ka-opt.an .ka-punkt::after{transform:scale(1)}
.ka-opt-txt{display:block;margin-top:7px;padding-left:28px;
  font:400 12.5px/1.6 var(--f-sans);color:var(--ink-2)}
.ka-coins{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding-left:28px}
.ka-coins img{width:20px;height:20px;padding:3px;box-sizing:content-box;
  border:1px solid var(--line);border-radius:6px;background:#fff}

/* ---- Vertrauensfeld ---- */
.ka-sicher{background:var(--nav);color:#fff;border-radius:16px;padding:20px}
@media(min-width:640px){.ka-sicher{padding:22px 24px}}
.ka-sicher-t{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font:700 14.5px/1.3 var(--f-sans)}
.ka-sicher-t span{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:9px;background:rgba(168,252,3,.14);color:var(--sig)}
.ka-sicher-l{display:grid;gap:9px 22px;list-style:none;margin:0;padding:0}
@media(min-width:520px){.ka-sicher-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ka-sicher-l li{display:flex;align-items:center;gap:9px;min-width:0;
  font:600 12.5px/1.4 var(--f-sans);color:rgba(255,255,255,.85)}
.ka-sicher-l svg{color:var(--sig);flex:none}
.ka-sicher-x{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  font:400 12px/1.6 var(--f-sans);color:rgba(255,255,255,.55)}

/* ---- Bestelluebersicht ---- */
/* Kleben muss die Spalte, nicht die Karte: die Karte ist genauso hoch wie
   ihr Kasten, damit bliebe kein Weg zum Kleben uebrig. */
.ka-summe{min-width:0}
@media(min-width:1024px){.ka-summe{position:sticky;top:88px;align-self:start}}
.ka-karte{background:var(--nav);color:#fff;border-radius:18px;padding:22px;
  box-shadow:0 30px 60px -40px rgba(11,11,13,.9)}
@media(min-width:640px){.ka-karte{padding:24px}}
.ka-summe-t{position:relative;margin:0 0 4px;padding-bottom:14px;
  font:700 17px/1.2 var(--f-display);letter-spacing:-.02em}
.ka-summe-t::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--sig)}

.ka-pos{list-style:none;margin:0;padding:0}
.ka-pos-z{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;
  align-items:start;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.ka-bild{display:grid;place-items:center;width:52px;height:52px;overflow:hidden;
  background:#fff;border-radius:11px}
.ka-bild img{width:100%;height:100%;object-fit:contain;padding:5px}
.ka-pos-txt{min-width:0}
.ka-pos-txt b{display:block;font:700 13.5px/1.35 var(--f-sans);overflow-wrap:anywhere}
.ka-pos-txt small{display:block;margin-top:2px;font:400 11.5px/1.4 var(--f-sans);color:rgba(255,255,255,.55)}
.ka-menge{display:inline-flex;align-items:center;gap:2px;margin-top:9px;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:2px}
.ka-menge button{width:24px;height:24px;display:grid;place-items:center;
  border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.7);
  font:700 14px/1 var(--f-sans);cursor:pointer;transition:background-color .16s,color .16s}
.ka-menge button:hover{background:rgba(255,255,255,.12);color:#fff}
.ka-menge .tnum{min-width:22px;text-align:center;font:600 12px/1 var(--f-mono)}
.ka-entf{display:inline-flex;align-items:center;gap:5px;margin:9px 0 0 10px;padding:0;
  border:0;background:transparent;cursor:pointer;color:rgba(255,255,255,.5);
  font:600 11px/1 var(--f-sans);transition:color .16s}
.ka-entf:hover{color:#FF8A7A}
.ka-pos-preis{font:700 13.5px/1.4 var(--f-mono);text-align:right;white-space:nowrap}

.ka-gaben{list-style:none;margin:0;padding:0}
.ka-gabe{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12)}
/* Die Geschenk-Symbole sind fill:currentColor und werden als <img> immer
   schwarz gezeichnet. Auf der dunklen Karte brauchen sie deshalb eine helle
   Flaeche darunter — Lime, weil die Stufe erreicht ist. */
.ka-gabe-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--sig)}
.ka-gabe-ic img{width:18px;height:18px}
.ka-gabe-txt{min-width:0}
.ka-gabe-txt b{display:block;font:700 12.5px/1.35 var(--f-sans);overflow-wrap:anywhere}
.ka-gabe-txt small{display:block;font:700 9px/1.4 var(--f-sans);text-transform:uppercase;
  letter-spacing:.09em;color:var(--sig)}
.ka-gabe-preis{font:700 10px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.08em;
  color:var(--sig)}

/* Rabattcode: dunkles Feld, damit es zur Karte gehoert. */
.ka-code{display:flex;gap:8px;margin-top:16px;min-width:0}
.ka-code-feld{flex:1 1 auto;min-width:0}
.ka-code .ka-feld input{height:46px;padding:16px 13px 5px;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.ka-code .ka-feld input::placeholder{color:rgba(255,255,255,.5)}
.ka-code .ka-feld input:focus{border-color:var(--sig);box-shadow:0 0 0 3px rgba(168,252,3,.25)}
.ka-code .ka-feld label{top:6px;left:14px;color:var(--sig)}
.ka-code-btn{flex:none;height:46px;padding:0 16px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
  font:700 11.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.05em;
  transition:background-color .18s, border-color .18s, color .18s}
.ka-code-btn:hover{background:var(--sig);border-color:var(--sig);color:var(--sig-ink)}
.ka-code.geloest .ka-feld input{border-color:rgba(168,252,3,.5)}
.ka-code-meldung{margin:8px 0 0;font:600 11.5px/1.5 var(--f-sans)}
.ka-code-meldung:empty{display:none}
.ka-code-meldung.ok{color:var(--sig)}
.ka-code-meldung.fehler{color:#FF8A7A}

.ka-dl{margin:16px 0 0;padding-top:15px;border-top:1px solid rgba(255,255,255,.14)}
.ka-dl > div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:4px 0;font-size:13.5px}
.ka-dl dt{color:rgba(255,255,255,.62)}
.ka-dl dd{margin:0;font-weight:600}
.ka-versand.frei{color:var(--sig)}
.ka-gesamtzeile{margin-top:8px;padding-top:12px !important;
  border-top:1px solid rgba(255,255,255,.14);align-items:flex-end !important}
.ka-gesamtzeile dt{font:700 15px/1.2 var(--f-sans);color:#fff !important}
.ka-gesamtzeile dd{text-align:right}
.ka-vorher{display:block;font:400 12px/1.4 var(--f-mono);color:rgba(255,255,255,.45)}
.ka-spar{display:block;font:700 11px/1.5 var(--f-sans);font-style:normal;color:var(--sig)}
.ka-gesamt{display:block;font:800 21px/1.15 var(--f-display);font-style:italic;color:var(--sig)}

/* Bestaetigungskaestchen */
.ka-best{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  align-items:start;margin-top:18px;cursor:pointer}
.ka-best input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.ka-haecken{display:grid;place-items:center;width:18px;height:18px;margin-top:2px;flex:none;
  border:1.5px solid rgba(255,255,255,.4);border-radius:5px;color:var(--sig-ink);
  background:transparent;transition:background-color .16s, border-color .16s}
.ka-haecken svg{width:12px;height:12px;opacity:0;transform:scale(.6);
  transition:opacity .16s, transform .16s ease-out}
.ka-best input:checked ~ .ka-haecken{background:var(--sig);border-color:var(--sig)}
.ka-best input:checked ~ .ka-haecken svg{opacity:1;transform:none}
.ka-best input:focus-visible ~ .ka-haecken{box-shadow:0 0 0 3px rgba(168,252,3,.35)}
.ka-best-txt{font:400 11.5px/1.65 var(--f-sans);color:rgba(255,255,255,.62)}
.ka-best-txt a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ka-best-txt a:hover{color:var(--sig)}
.ka-best.fehler .ka-haecken{border-color:#FF8A7A;box-shadow:0 0 0 3px rgba(192,57,43,.28)}

.ka-meldung{margin:12px 0 0;font:600 12px/1.5 var(--f-sans);color:#FF8A7A}
.ka-meldung:empty{display:none}

.ka-cta{width:100%;margin-top:16px;min-height:52px}
.ka-ssl{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;
  padding:11px 12px;border-radius:11px;background:rgba(255,255,255,.06);
  font:600 11px/1.4 var(--f-sans);color:rgba(255,255,255,.6);text-align:center}
.ka-ssl span{color:var(--sig);display:block;flex:none}

/* ---- Leerer Korb ---- */
.ka-leer{max-width:440px;margin:8px auto 0;padding:44px 26px;text-align:center;
  background:#fff;border:1.5px dashed var(--line-strong);border-radius:18px}
.ka-leer-ic{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 16px;
  border-radius:16px;background:var(--tint2);color:var(--cta)}
.ka-leer p{margin:0 0 18px;font:700 15px/1.4 var(--f-sans);color:var(--ink)}

/* ---- Bestaetigung ---- */
.ka-fertig{max-width:620px;margin:8px auto 0;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 22px;
  box-shadow:0 24px 48px -40px rgba(19,16,32,.5)}
@media(min-width:640px){.ka-fertig{padding:36px 34px}}
.ka-fertig-kopf{text-align:center}
.ka-haken{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 16px;
  border-radius:999px;background:var(--sig);color:var(--sig-ink)}
.ka-fertig h2{margin:0 0 10px;font-size:24px}
.ka-dank{margin:0;font:400 14px/1.6 var(--f-sans);color:var(--ink-2)}
.ka-nummer{font-weight:700;color:var(--ink)}
.ka-bank{margin-top:24px;background:var(--tint);border:1px solid var(--line);
  border-radius:14px;padding:20px}
.ka-bank-t{margin:0 0 6px;font:700 15px/1.3 var(--f-sans);color:var(--ink)}
.ka-bank-x{margin:0 0 16px;font:400 12.5px/1.6 var(--f-sans);color:var(--ink-2)}
.ka-bank-dl{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:11px;overflow:hidden}
.ka-bank-dl > div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 14px;padding:11px 14px;background:#fff}
.ka-bank-dl dt{font:700 10px/1.4 var(--f-sans);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-2)}
.ka-bank-dl dd{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0;
  font:600 13px/1.4 var(--f-sans);color:var(--ink);overflow-wrap:anywhere}
.ka-bank-betrag{font:800 15px/1.2 var(--f-mono)}
.ka-kopie{border:1px solid var(--line-strong);background:#fff;border-radius:999px;
  padding:3px 10px;cursor:pointer;font:700 9.5px/1.4 var(--f-sans);text-transform:uppercase;
  letter-spacing:.07em;color:var(--cta);transition:background-color .16s,border-color .16s,color .16s}
.ka-kopie:hover{background:var(--cta);border-color:var(--cta);color:#fff}
.ka-zweck{margin-top:16px;padding:14px;border:1.5px dashed var(--line-strong);border-radius:12px;
  background:#fff}
.ka-zweck-t{margin:0 0 7px;font:700 10px/1.4 var(--f-sans);text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-2)}
.ka-zweck-w{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 9px;
  font:800 16px/1.2 var(--f-mono);color:var(--ink)}
.ka-zweck-x{margin:0;font:400 11.5px/1.6 var(--f-sans);color:var(--ink-2)}
.ka-cod,.ka-krypto-hin{margin:22px 0 0;padding:14px 16px;border-radius:12px;
  background:var(--tint);border:1px solid var(--line);
  font:400 13px/1.6 var(--f-sans);color:var(--ink-2)}
/* Der zweite Knopf traegt kein .skw: clip-path wuerde seinen Rahmen an
   den Schraegen abschneiden (bekannte Stolperstelle). */
.ka-fertig-btn{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.ka-fertig-btn .btn{flex:1 1 190px}
.ka-fertig-btn .btn-o{border-radius:2px}

@media(prefers-reduced-motion:reduce){
  .ka-feld label,.ka-opt,.ka-punkt::after,.ka-haecken,.ka-haecken svg,
  .ka-menge button,.ka-code-btn,.ka-kopie{transition:none}
}

/* ---- Mobile Abschlussleiste ----
   Ab 1024 px uebernimmt die klebende Bestelluebersicht diese Aufgabe,
   dort verschwindet die Leiste ersatzlos. */
.ka-leiste{position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:12px;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:var(--nav);border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -18px 40px -30px rgba(0,0,0,.9)}
.ka-leiste-s{display:flex;flex-direction:column;gap:2px;flex:none;min-width:0}
.ka-leiste-s small{font:700 8.5px/1 var(--f-sans);text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.55)}
.ka-leiste-s b{font:800 17px/1.1 var(--f-display);font-style:italic;color:var(--sig)}
.ka-leiste-btn{flex:1 1 auto;min-height:46px;min-width:0;padding:0 14px;font-size:11px}
/* Damit die Leiste nichts verdeckt, bekommt der Abschnitt unten Luft. */
section.blk.kasse{padding-bottom:96px}
@media(min-width:1024px){
  .ka-leiste{display:none}
  section.blk.kasse{padding-bottom:56px}
}

/* ==========================================================================
   ALTERSTOR — Bestaetigung vor dem ersten Besuch

   Schwarzer Kopf mit Lime-Raster, weisser Rumpf, violetter Knopf: dieselbe
   Dreiteilung wie Kopfbalken, Inhalt und CTA auf den Seiten dahinter. Der
   Knopf bleibt gesperrt, bis beide Haken sitzen — die Sperre ist der Sinn
   des Fensters, sie darf nicht uebersehbar sein.
   ========================================================================== */
.tor-offen{overflow:hidden}
.tor{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px;
  background:rgba(11,11,13,.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  overflow-y:auto}
.tor[hidden]{display:none}
.tor-karte{width:100%;max-width:520px;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85);
  animation:tor-auf .3s cubic-bezier(.2,.9,.3,1) both}
@keyframes tor-auf{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.tor-kopf{position:relative;display:flex;align-items:center;gap:14px;
  padding:22px 22px 20px;background:var(--nav);color:#fff;overflow:hidden}
@media(min-width:520px){.tor-kopf{padding:26px 28px 24px}}
/* Lime-Raster im Kopf — dieselbe Punktdichte wie im Kopfbalken der Seiten. */
.tor-kopf::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(168,252,3,.22) 1px, transparent 1px);
  background-size:14px 14px;opacity:.7}
.tor-kopf > *{position:relative}
.tor-ic{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:13px;
  background:rgba(168,252,3,.14);border:1px solid rgba(168,252,3,.32);color:var(--sig)}
.tor-kopf-txt{display:block;min-width:0}
.tor-kicker{display:block;margin-bottom:5px;font:700 9.5px/1 var(--f-sans);
  text-transform:uppercase;letter-spacing:.14em;color:var(--sig)}
.tor-kopf h2{margin:0;font-size:21px;overflow-wrap:anywhere}
@media(min-width:520px){.tor-kopf h2{font-size:24px}}

.tor-inhalt{padding:22px}
@media(min-width:520px){.tor-inhalt{padding:26px 28px 24px}}
.tor-text{margin:0 0 18px;font:400 13.5px/1.65 var(--f-sans);color:var(--ink-2)}

.tor-haken{display:grid;gap:10px;margin-bottom:20px}
.tor-opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:14px 15px;cursor:pointer;
  border:1.5px solid var(--line-strong);border-radius:13px;background:#fff;
  transition:border-color .18s, box-shadow .18s}
.tor-opt:hover{border-color:var(--ink-2)}
/* Der Haken bleibt bedienbar und in der Tabreihenfolge — nur unsichtbar,
   das Kaestchen daneben uebernimmt die Darstellung. */
.tor-opt input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.tor-box{display:grid;place-items:center;width:22px;height:22px;flex:none;margin-top:1px;
  border:1.5px solid var(--line-strong);border-radius:6px;background:#fff;color:var(--sig-ink);
  transition:background-color .16s, border-color .16s}
.tor-box svg{width:14px;height:14px;opacity:0;transform:scale(.6);
  transition:opacity .16s, transform .16s ease-out}
.tor-opt:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.tor-opt input:checked ~ .tor-box{background:var(--sig);border-color:var(--sig)}
.tor-opt input:checked ~ .tor-box svg{opacity:1;transform:none}
.tor-opt:has(input:focus-visible){box-shadow:0 0 0 4px rgba(168,252,3,.32)}
.tor-txt{font:400 13.5px/1.55 var(--f-sans);color:var(--ink);overflow-wrap:anywhere}
.tor-txt strong{font-weight:700}

.tor-ok{width:100%;min-height:52px}
.tor-ok[disabled]{cursor:not-allowed}
.tor-nein{display:block;width:100%;margin-top:12px;padding:8px;border:0;background:transparent;
  cursor:pointer;font:600 12.5px/1.4 var(--f-sans);color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;transition:color .16s}
.tor-nein:hover{color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .tor-karte{animation:none}
  .tor-opt,.tor-box,.tor-box svg,.tor-nein{transition:none}
}

/* Homepage hero: real reports, compact product row. */
.hero-coa{background:radial-gradient(ellipse at 79% 52%,#e8ffd2 0,transparent 45%),linear-gradient(120deg,#fff 32%,#f8fbf7);border-bottom:1px solid #edf0e9}
.hero-coa .wrap,.vialsband .wrap{max-width:1440px}
.hero-coa .deco{opacity:.38}
.hero-coa .in{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:32px;align-items:center;padding:38px 0 42px}
.hero-coa h1{font-size:clamp(34px,3.65vw,55px);font-style:normal;text-transform:none;letter-spacing:-.05em;line-height:1.12;margin:0 0 22px}
.hero-coa h1 .hl{display:inline-block;padding:.025em .13em .08em;margin:.14em 0 .13em}
.hero-coa h1 .h1zeile{white-space:nowrap}
.hero-coa .sub{max-width:49ch;font-size:clamp(15px,1.2vw,18px);line-height:1.6;margin:0;color:#646773}
.hero-usps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:32px 0 0;padding:0}
.hero-usps li{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:9px;align-content:center}
.hero-usps .ui{grid-row:span 2;align-self:center;width:38px;height:42px;display:grid;place-items:center;color:#69ad15;background:#effcde;border:1px solid #daf0be;border-radius:12px}
.hero-usps .ui svg{width:25px;height:25px}
.hero-usps b{font-size:11px;line-height:1.5;letter-spacing:.025em;text-transform:uppercase}
.hero-usps small{color:#747780;font-size:10px;line-height:1.6;overflow-wrap:anywhere}
.hero-coa .coawrap{position:relative;min-width:0;isolation:isolate;background:transparent;border:0;overflow:visible}
.hero-coa .coastage{position:relative;width:100%;height:470px;perspective:1400px;overflow:hidden;outline-offset:4px;touch-action:pan-y;cursor:grab;scrollbar-width:none}
.hero-coa .coastage::-webkit-scrollbar{display:none}
.hero-coa .coastage:active{cursor:grabbing}
.hero-coa .coacard{position:absolute;left:calc(50% - 145px);top:20px;width:290px;height:428px;margin:0;background:#fff;border:1px solid #e1e7df;border-radius:7px;box-shadow:0 14px 38px -10px #24341730;transition:transform .55s cubic-bezier(.22,.68,.24,1),opacity .4s ease;will-change:transform;overflow:hidden}
.hero-coa .coacard img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.hero-coa .coanav{position:absolute;top:50%;translate:0 -50%;z-index:110;width:44px;height:44px;border-radius:50%;background:#ffffffed;border:1px solid #e5e9e2;box-shadow:0 5px 18px #17241512;display:grid;place-items:center;cursor:pointer;color:#131020;transition:background .2s,box-shadow .2s}
.hero-coa .coanav:hover{background:var(--sig);box-shadow:0 6px 22px #17241526}
.hero-coa .coanav svg{width:18px;height:18px}
#coaPrev{left:0}#coaNext{right:0}
.hero-coa .coanote{position:absolute;right:8px;bottom:-8px;margin:0;font-style:italic;color:#697368;font-size:11px;line-height:1.4;text-align:right;transform:rotate(-4deg);pointer-events:none}
.blk.vialsband{padding:28px 0 42px}
.vialsband .shead{margin-bottom:22px;gap:20px}
.vialsband .shead h2{font-style:normal;text-transform:none;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.04em}
.vialsband .slabel{background:none;clip-path:none;color:#648f25;padding:0;font-size:10px;margin-bottom:12px}
.vialsband #vials{display:grid;grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 16px;padding:4px 0 16px}
.vialsband .card{min-width:0;scroll-snap-align:start;border:1px solid #e7eae4;border-radius:14px;box-shadow:none;overflow:hidden}
.vialsband .card:hover{border-color:#bedb98;box-shadow:0 8px 24px #31471912;transform:translateY(-3px)}
.vialsband .card .media{background:linear-gradient(155deg,#fafcf8,#f4f5f2);height:185px}
.vialsband .card h3{font-style:normal;text-transform:none;font-size:15px}
.vialsband .card .d{font-size:11px;min-height:3.2em}
.vialsband .card .foot{gap:8px}
.vialsband .card .addbtn{background:var(--sig);color:var(--sig-ink);clip-path:none;border-radius:24px;font-size:10px;letter-spacing:0}
@media(min-width:1500px){.hero-coa .coacard{width:310px;height:457px;left:calc(50% - 155px);top:10px}.hero-coa .coastage{height:485px}}
@media(min-width:901px) and (max-width:1100px){.hero-coa .in{gap:20px}.hero-coa h1{font-size:37px}.hero-usps{gap:8px}.hero-usps li{grid-template-columns:1fr;gap:5px}.hero-usps .ui{grid-row:auto}.hero-coa .coacard{width:245px;height:362px;left:calc(50% - 122.5px);top:35px}.hero-coa .coastage{height:440px}}
@media(max-width:900px){
 .hero-coa .in{grid-template-columns:minmax(0,1fr);gap:20px;padding:10px 0 28px}
 .hero-coa .coawrap{grid-row:1;width:100%;max-width:520px;justify-self:center}
 .hero-coa h1{font-size:clamp(29px,6.3vw,44px);max-width:640px;margin:0 0 16px}
 .hero-coa .sub{font-size:15px;max-width:60ch}
 .hero-usps{margin-top:22px;gap:12px}
 .hero-usps li{grid-template-columns:34px minmax(0,1fr);column-gap:7px}
 .hero-usps .ui{width:34px;height:38px;border-radius:10px}
 .hero-usps .ui svg{width:22px;height:22px}
 .hero-usps b{font-size:10px}.hero-usps small{font-size:9px}
 .hero-coa .coastage{display:flex;flex-direction:column;align-items:center;gap:18px;height:350px;width:100%;padding:22px 52px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;scroll-padding-block:22px;perspective:none;cursor:auto;touch-action:pan-y}
 .hero-coa .coacard{position:relative;left:auto;top:auto;flex:0 0 auto;width:204px;height:301px;scroll-snap-align:center;scroll-snap-stop:always;transform:none!important;opacity:1!important;box-shadow:0 8px 26px #24341720}
 .hero-coa .coanav{right:0;left:auto!important;width:40px;height:40px;translate:none}
 #coaPrev{top:calc(50% - 46px)}#coaNext{top:calc(50% + 6px)}
 .hero-coa .coanav svg{transform:rotate(90deg)}
 .hero-coa .coanote{display:none}
 .vialsband{padding-top:24px}.vialsband #vials{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:540px){
 .hero-coa .in{gap:16px}.hero-usps li{grid-template-columns:1fr;gap:3px}.hero-usps .ui{grid-row:auto;margin-bottom:3px}
 .hero-usps b{font-size:10px}.hero-usps small{font-size:10px}
 .vialsband #vials{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .vialsband .shead{align-items:flex-start;flex-direction:column;gap:10px}
 .vialsband .card .media{height:165px}
}
@media(prefers-reduced-motion:reduce){.hero-coa .coacard,.hero-coa .coanav,.vialsband .card{transition:none}}

.vialsband .more{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.vialsband .card .media{border:0;border-radius:8px;aspect-ratio:auto}

/* Certificate lightbox: native modal focus and Escape handling. */
.hero-coa .coacard{cursor:zoom-in}
.hero-coa .coacard:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
.hero-coa .coanote{font-style:normal;transform:none;font-size:12px;line-height:1.45}
body.coa-zoom-open{overflow:hidden}
.coa-zoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;color:var(--ink);overflow:auto}
.coa-zoom[open]{display:grid;place-items:center}
.coa-zoom::backdrop{background:rgba(11,11,13,.82);backdrop-filter:blur(6px)}
.coa-zoom-panel{position:relative;width:fit-content;max-width:100%;margin:auto}
.coa-zoom-panel>img{display:block;width:auto;height:auto;max-width:min(90vw,960px);max-height:90dvh;object-fit:contain;background:white;border-radius:8px;box-shadow:0 24px 80px #0006}
.coa-zoom-close{position:absolute;right:8px;top:8px;z-index:1;width:44px;height:44px;border:1px solid #dce3d7;border-radius:50%;background:white;color:#131020;box-shadow:0 3px 12px #0002;font:400 30px/1 sans-serif;cursor:pointer}
.coa-zoom-close:hover{background:var(--sig)}
@media(max-width:900px){.hero-coa .coanote{display:block;position:static;margin:6px 0 0;text-align:center}.coa-zoom{padding:12px}.coa-zoom-panel>img{max-width:calc(100vw - 24px);max-height:88dvh}}

/* Pens: four columns on desktop, two on tablet and mobile. */
.vialsband #pens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px;margin:26px 0 0}
.vialsband #pens .card .media{height:210px}
@media(max-width:1100px){.vialsband #pens{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.vialsband #pens{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.vialsband #pens .card .media{height:165px}}


/* Portrait certificates with left/right neighbours on mobile too. */
@media(max-width:900px){
 .hero-coa .coastage{display:block;position:relative;height:350px;padding:0;overflow:hidden;perspective:1100px;scroll-snap-type:none;touch-action:pan-y;cursor:grab}
 .hero-coa .coacard{position:absolute;left:calc(50% - 102px);top:22px;width:204px;height:301px;transform:var(--coa-transform)!important;opacity:var(--coa-opacity)!important}
 .hero-coa .coanav{top:calc(50% - 20px)!important;translate:0 -50%;right:auto}
 .hero-coa #coaPrev{left:0!important;right:auto}
 .hero-coa #coaNext{left:auto!important;right:0}
 .hero-coa .coanav svg{transform:none}
}

/* React cart count: consistent purple bubble on desktop and mobile. */
.hactions a.cart .cartzahl,
.hactions button.cart .cartzahl {
  background:var(--cta);color:#fff;border-radius:999px;
  font-weight:800;letter-spacing:0;
}

@media(min-width:1024px){
  .hactions button.cart .cartzahl{
    position:static;visibility:visible;pointer-events:auto;
    place-items:center;flex:none;min-width:20px;width:auto;height:20px;
    padding:0 6px;overflow:visible;border:0;
    font:800 11px/1 var(--f-mono);
  }
}
@media(max-width:1023px){
  .hactions button.cart{overflow:visible}
  .hactions button.cart::after{content:none}
}