/* ═══════════════════════════════════════════════════════════════
   SECOND CHANCE — Design System
   01 Tokens · 02 Basis · 03 Logo · 04 Motion · 05 Chrome
   06 Landing · 07 Entdecken · 08 Produkte · 09 Händler werden
   10 Responsive · 11 Reduced Motion
   ═══════════════════════════════════════════════════════════════ */

/* ══ 01 · TOKENS ═══════════════════════════════════════════ */
:root{
  --ivory:#F4F1E8;
  --ivory-warm:#EDE8DA;
  --ivory-deep:#E3DCC9;
  --forest:#12291F;
  --forest-deep:#08150F;
  --forest-soft:#1C3A2C;
  --forest-line:#24483789;
  --sage:#7D9483;
  --gold:#C09A6B;
  --gold-bright:#E0BC8C;
  --clay:#C4633F;
  --amber:#D89B3C;
  --moss:#5B7F62;
  --ink:#12291F;
  --ink-soft:#5A6B60;

  /* Bedienoberfläche bleibt unter 300ms — alles darüber wirkt träge.
     Nur die Scroll-Erzählung (--t-slow, --t-draw) darf sich Zeit
     lassen, weil sie erklärt statt zu reagieren.
       --t-micro  Druckfeedback      (Richtwert 100–160)
       --t-fast   Tooltip, Popover   (125–200)
       --t-base   Menü, Karte, Panel (150–250)
       --t-page   Seitenwechsel      (200–500) */
  --t-micro:140ms; --t-fast:200ms; --t-base:260ms;
  --t-slow:700ms;  --t-page:500ms; --t-draw:1500ms;

  /* Eingänge bremsen ab, Ausgänge beschleunigen weg.
     --e-glide trägt lange Wege, --e-press gibt Druckfeedback.
     Ein Ease-In-Token gibt es bewusst nicht: es startet langsam
     und verzögert genau den Moment, auf den der Nutzer schaut. */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.77,0,.175,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --e-glide:cubic-bezier(.22,1,.36,1);
  --e-press:cubic-bezier(.34,1.26,.5,1);

  --f-sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --f-serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --f-mono:"SF Mono","Roboto Mono","Consolas",ui-monospace,monospace;

  --wrap:1280px;
  --gut:clamp(20px,5vw,64px);
  --nav-h:70px;

  --hp-line:#2A4A38; --hp-body:#1C3A2C; --hp-pad:#3D6350; --hp-wear:#C4633F;
  --bx-flap:#D8CDB2; --bx-left:#CFC2A2; --bx-right:#BFB08D; --bx-inner:#8E7F60;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--f-sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* Die Landingpage liegt auf dunklem Grund, damit der animierte
   Hintergrund durchscheint. Alle hellen Sections bringen ihre
   eigene Fläche mit und legen sich darüber. */
body.landing{background:#050706}
body.landing main>section,
body.landing .foot{position:relative;z-index:1}

h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.035em;line-height:1.04}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--f-mono);letter-spacing:.16em;text-transform:uppercase}

.eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 20px;
}
.eyebrow.gold{color:var(--gold)}
.sec-head{margin-bottom:clamp(44px,6.5vw,84px)}
.sec-h2{font-size:clamp(36px,6vw,76px)}
.ico{width:18px;height:18px;flex:none;transition:transform var(--t-fast) var(--e-soft)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:100px;
  font-size:15px;font-weight:560;letter-spacing:-.01em;
  border:1px solid transparent;
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft),
             border-color var(--t-fast) var(--e-soft),box-shadow var(--t-fast) var(--e-soft);
}
.btn:hover .ico{transform:translateX(4px)}
.btn-solid{background:var(--forest);color:var(--ivory)}
.btn-solid:hover{background:var(--forest-soft);box-shadow:0 0 0 4px rgba(18,41,31,.08)}
.btn-light{background:var(--ivory);color:var(--forest)}
.btn-light:hover{background:#fff;box-shadow:0 0 0 4px rgba(244,241,232,.16)}
.btn-gold{background:var(--gold);color:var(--forest-deep)}
.btn-gold:hover{background:var(--gold-bright);box-shadow:0 0 0 4px rgba(192,154,107,.2)}
.btn-quiet{color:var(--ink);border-color:rgba(18,41,31,.22)}
.btn-quiet:hover{border-color:var(--forest);background:rgba(18,41,31,.04)}
.btn-ghost{padding:11px 20px;font-size:14px;border-color:rgba(18,41,31,.22)}
.btn-ghost:hover{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
.btn-sm{padding:10px 18px;font-size:13.5px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ══ 02 · LOGO ═════════════════════════════════════════════ */
/* ── Markenzeichen ──────────────────────────────────────────
   Die echte Marke liegt als PNG vor (aus logo.png freigestellt,
   weiß mit Alphakanal). Das SVG bleibt als Größengerüst stehen
   und wird unsichtbar geschaltet — so muss kein Markup in acht
   Dateien geändert werden.

   Vektor bleibt dort aktiv, wo Form gebraucht wird:
   Box auf der Landingpage, Scanner-Ring, Zeichen-Animationen. */
.logo{display:block;color:#fff}
.logo{background-position:center;background-repeat:no-repeat;background-size:contain}
.logo > *{visibility:hidden}

/* Bildmarke: die Box mit den Produkten, freigestellt.
   Steht überall ohne Unterlage — auf dunklem Grund sorgt ein
   weicher heller Schein für Trennung statt einer Fläche. */
.brand .logo,.empty .logo,
.boot .logo,.pt .logo,.done .logo,.sig-logo,
.avatar .logo,.mcard-avatar .logo,.msg-ava .logo,
.prow-img .logo,.drop .logo{
  background-image:url("sc-box.png");
  aspect-ratio:730/800;height:auto;border-radius:0;
}
/* Wasserzeichen bleiben das weiße Monogramm — eine farbige
   Illustration bei 6 % Deckkraft wäre nur ein Fleck. */
.mcard-logo,.sheet-logo,.mhero-logo,.grade-logo,.pcard-logo,
.cta-logo,.phero-logo{
  background-image:url("sc-2c.png");
  aspect-ratio:120/156;height:auto;
}

/* Vektor behalten — Form ist hier Teil der Funktion */
.scbox-front .logo > *{visibility:visible}
.scbox-front .logo{background-image:none;aspect-ratio:auto;border-radius:0}

.pt .logo{width:min(210px,44vw)}
.boot .logo{width:min(260px,56vw)}
.done .logo{width:min(200px,44vw);padding:0;border-radius:18px}
.empty .logo{width:104px;padding:0;border-radius:0;background-color:transparent;opacity:1}
.sig-logo{width:min(420px,58vw)}

/* Keine Fläche hinter der Marke — auf dunklem Grund trennt ein
   weicher Schein entlang der echten Kontur. */
.nav.on-dark .brand .logo{
  filter:drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 2px 10px rgba(255,255,255,.28));
}
.logo .lg-p{fill:currentColor}
.logo .lg-dash{stroke:#fff;stroke-width:9;stroke-linecap:round;fill:none}
.logo .lg-word text{
  fill:currentColor;font-family:var(--f-sans);
  font-size:34px;font-weight:300;letter-spacing:0;
}
.logo .lg-o circle{stroke:currentColor}
.logo .lg-o-arc{stroke:var(--gold);fill:none}
.logo.on-dark,.on-dark .logo{color:var(--ivory)}

/* Draw-On: erst Kontur zeichnen, dann Fläche füllen */
html.anim .logo-draw .lg-p{
  fill:currentColor;fill-opacity:0;
  stroke:currentColor;stroke-width:1.3;
  stroke-dasharray:100;stroke-dashoffset:100;
}
html.anim .logo-draw .lg-dash,
html.anim .logo-draw .lg-o-arc{stroke-dasharray:100;stroke-dashoffset:100}
html.anim .logo-draw .lg-word text,
html.anim .logo-draw .lg-o circle{opacity:0}

html.anim .logo-draw.is-drawn .lg-p{
  stroke-dashoffset:0;fill-opacity:1;
  transition:stroke-dashoffset var(--t-draw) var(--e-inout),
             fill-opacity 620ms var(--e-out) 940ms;
}
html.anim .logo-draw.is-drawn .lg-c{transition-delay:180ms,1120ms}
html.anim .logo-draw.is-drawn .lg-dash,
html.anim .logo-draw.is-drawn .lg-o-arc{
  stroke-dashoffset:0;transition:stroke-dashoffset 620ms var(--e-out) 1240ms;
}
html.anim .logo-draw.is-drawn .lg-word text,
html.anim .logo-draw.is-drawn .lg-o circle{
  opacity:1;transition:opacity 520ms var(--e-out) 1180ms;
}
html.anim .logo-draw.is-drawn .lg-word text:nth-of-type(n+5){transition-delay:1280ms}

/* Holografischer Scan-Sweep über dem Logo */
.logo-scan{position:relative;overflow:hidden}
.logo-scan::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(224,188,140,.55) 50%,transparent 58%);
  transform:translateX(-120%);
}
html.anim .logo-scan.is-scanning::after{animation:lgSweep 2.6s var(--e-inout) infinite}
@keyframes lgSweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

/* Langsame Eigenrotation für Hintergrund-Instanzen */
.logo-spin{animation:lgSpin 44s linear infinite}
@keyframes lgSpin{to{transform:rotate(360deg)}}

.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
/* Bildmarke oben links, Schriftzug daneben */
.brand .logo{
  width:42px;flex:none;
  box-shadow:0 0 0 1px rgba(18,41,31,.14);
  transition:box-shadow var(--t-fast) var(--e-soft),transform var(--t-base) var(--e-out);
}
.nav.on-dark .brand .logo{box-shadow:0 0 0 1px rgba(244,241,232,.22)}
.brand:hover .logo{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(192,154,107,.55)}
.brand-txt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;font-weight:600}
.brand-txt span{opacity:.5;margin-left:.5em}

/* ══ 03 · FUTURISTISCHE LAYER ══════════════════════════════ */
.hologrid{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.5}
.hologrid::before{
  content:"";position:absolute;left:-50%;right:-50%;bottom:-30%;height:130%;
  background-image:
    linear-gradient(rgba(125,148,131,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,148,131,.16) 1px,transparent 1px);
  background-size:52px 52px;
  transform:perspective(340px) rotateX(64deg);
  transform-origin:50% 100%;
  mask-image:linear-gradient(to top,#000 5%,transparent 78%);
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 78%);
}
.readout{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--gold);text-transform:uppercase;
}

/* ══ 04 · MOTION PATTERNS ══════════════════════════════════ */
.line{display:block;overflow:hidden}
.line>span{display:block}

/* Echte Maske: nur Versatz, keine Opazität. Ein Text, der hinter
   der Kante hervorfährt UND gleichzeitig aufblendet, sieht weich
   und unentschlossen aus — die Kante allein ist schärfer. */
html.anim .line>span,
html.anim .reveal-line>span,
html.anim .reveal>span{transform:translateY(106%)}
html.anim .reveal-line,html.anim .reveal{overflow:hidden;display:block}

html.anim .is-in .line>span,
html.anim .is-in.reveal-line>span,
html.anim .is-in.reveal>span,
html.anim .is-in>.line>span{
  transform:translateY(0);
  transition:transform var(--t-slow) var(--e-glide);
}
html.anim .is-in>.line:nth-child(2)>span{transition-delay:90ms}
html.anim .is-in>.line:nth-child(3)>span{transition-delay:180ms}
html.anim .is-in>.line:nth-child(4)>span{transition-delay:270ms}

/* Gestaffeltes Einblenden von Karten */
/* Karten sind nicht maskiert, also blenden sie auf — dazu ein
   Hauch Skalierung, damit sie nach vorn kommen statt nur zu rutschen.
   --i wird beim Rendern gesetzt und skaliert auf beliebig viele. */
html.anim .stagger>*{opacity:0;transform:translateY(24px) scale(.985)}
html.anim .stagger.is-in>*{
  opacity:1;transform:none;
  transition:opacity 520ms var(--e-out) calc(var(--i,0) * 60ms),
             transform 640ms var(--e-glide) calc(var(--i,0) * 60ms);
}
/* Fallback, falls --i nicht gesetzt wurde */
html.anim .stagger.is-in>*:nth-child(1){--i:0}
html.anim .stagger.is-in>*:nth-child(2){--i:1}
html.anim .stagger.is-in>*:nth-child(3){--i:2}
html.anim .stagger.is-in>*:nth-child(4){--i:3}
html.anim .stagger.is-in>*:nth-child(5){--i:4}
html.anim .stagger.is-in>*:nth-child(6){--i:5}
html.anim .stagger.is-in>*:nth-child(n+7){--i:6}

/* ══ 05 · CHROME (Preloader, Cursor, Nav, Transition) ══════ */

/* Preloader — das Logo zeichnet sich selbst */
.boot{
  position:fixed;inset:0;z-index:9800;
  background:var(--forest);display:grid;place-items:center;
}
.boot-in{display:grid;place-items:center;gap:26px}
.boot .logo{width:min(280px,58vw);color:var(--ivory)}
.boot-bar{width:min(220px,44vw);height:1px;background:rgba(244,241,232,.18);overflow:hidden}
.boot-bar i{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
html.anim .boot.is-go .boot-bar i{transform:scaleX(1);transition:transform 1.9s var(--e-inout)}
.boot-txt{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.26em;color:var(--sage)}
.boot.is-done{
  opacity:0;pointer-events:none;
  transition:opacity 620ms var(--e-out);
}
html:not(.anim) .boot{display:none}

/* Cursor */
/* Der Rahmen hat immer 82px und wird nur verschoben. Der sichtbare
   Kreis ist ein Pseudo-Element und wird skaliert statt in der Größe
   animiert: width/height lösen Layout aus, transform nicht.
   Nebeneffekt, der vorher falsch war — der Kreis wuchs aus der
   linken oberen Ecke und wanderte dabei von der Zeigerspitze weg.
   Skalierung geht von der Mitte aus, also bleibt er zentriert. */
.cursor{
  position:fixed;top:0;left:0;z-index:9000;
  width:82px;height:82px;
  pointer-events:none;opacity:0;transform:translate3d(-120px,-120px,0);
  transition:opacity var(--t-fast) var(--e-soft);
  display:none;
}
.cursor::before{
  content:"";position:absolute;inset:0;border-radius:100px;
  background:rgba(18,41,31,.85);
  transform:scale(.1463);           /* 12 von 82 */
  transition:transform var(--t-base) var(--e-out),
             background var(--t-fast) var(--e-soft);
}
html.has-cursor .cursor{display:block}
html.has-cursor.cursor-on .cursor{opacity:1}
.cursor.is-label::before{transform:scale(1);background:var(--forest)}
.cursor-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  color:var(--ivory);opacity:0;transition:opacity var(--t-micro) var(--e-soft);
}
.cursor.is-label .cursor-label{opacity:1;transition-delay:60ms}
.cursor.on-dark::before{background:var(--gold)}
.cursor.on-dark .cursor-label{color:var(--forest-deep)}

/* Scroll-Progress */
.progress{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:14px;
  opacity:0;transition:opacity var(--t-slow) var(--e-out);
}
.progress.is-on{opacity:1}
.progress a{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--ink-soft);opacity:.42;
  transition:opacity var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft);
}
/* Strich auf voller Länge angelegt und zusammengestaucht — so
   wächst er per transform statt per width. */
.progress a::after{content:"";width:30px;height:1px;background:currentColor;
  transform:scaleX(.5333);transform-origin:left center;
  transition:transform var(--t-base) var(--e-out)}
.progress a.is-on{opacity:1;color:var(--forest)}
.progress a.is-on::after{transform:scaleX(1)}
.progress.on-dark a{color:var(--sage)}
.progress.on-dark a.is-on{color:var(--gold)}

/* Page Transition — Forest-Layer mit sich zeichnendem Logo */
.pt{
  position:fixed;inset:0;z-index:9500;background:var(--forest);
  display:grid;place-items:center;transform:translateY(100%);pointer-events:none;
}
.pt .logo{width:min(150px,32vw);color:var(--ivory);opacity:0}
.pt.is-cover{transform:translateY(0);transition:transform var(--t-page) var(--e-inout)}
.pt.is-cover .logo{opacity:1;transition:opacity 200ms var(--e-out) 160ms}
.pt.is-clear{transform:translateY(-100%);transition:transform var(--t-page) var(--e-inout)}

/* Nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--gut);
  transition:background var(--t-slow) var(--e-soft),color var(--t-slow) var(--e-soft),
             padding var(--t-base) var(--e-soft),transform var(--t-base) var(--e-out);
}
.nav.is-stuck{
  padding:10px var(--gut);background:rgba(244,241,232,.84);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(18,41,31,.08);
}
.nav.is-hidden{transform:translateY(-105%)}
.nav-links{display:flex;gap:30px}
.nav-links a{position:relative;font-size:14.5px;padding:4px 0;opacity:.72;transition:opacity var(--t-fast) var(--e-soft)}
.nav-links a:hover,.nav-links a.is-here{opacity:1}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-fast) var(--e-out);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a.is-here::after{transform:scaleX(1);background:var(--gold)}
.nav-right{display:flex;align-items:center;gap:14px}

.nav.on-dark{color:var(--ivory)}
.nav.on-dark.is-stuck{background:rgba(8,21,15,.74);box-shadow:0 1px 0 rgba(244,241,232,.1)}
.nav.on-dark .btn-ghost{border-color:rgba(244,241,232,.3)}
.nav.on-dark .btn-ghost:hover{background:var(--gold);color:var(--forest-deep);border-color:var(--gold)}

.nav-burger{display:none;width:40px;height:40px;place-items:center}
.nav-burger i{display:block;width:19px;height:1.5px;background:currentColor;position:relative;transition:background var(--t-fast)}
.nav-burger i::before,.nav-burger i::after{
  content:"";position:absolute;left:0;width:19px;height:1.5px;background:currentColor;
  transition:transform var(--t-fast) var(--e-out);
}
.nav-burger i::before{top:-6px}.nav-burger i::after{top:6px}
.nav.is-open .nav-burger i{background:transparent}
.nav.is-open .nav-burger i::before{transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav-burger i::after{transform:translateY(-6px) rotate(-45deg)}

/* Sub-Page Header */
.phero{position:relative;padding:calc(var(--nav-h) + 62px) 0 clamp(40px,6vw,72px);background:var(--forest);color:var(--ivory);overflow:hidden}
.phero .hologrid{opacity:.4}
.phero-in{position:relative;z-index:1}
.phero h1{font-size:clamp(40px,7vw,88px);margin-bottom:18px}
.phero-sub{color:rgba(244,241,232,.62);max-width:52ch;font-size:clamp(15px,1.5vw,18px)}
.phero-logo{
  position:absolute;right:-4%;top:50%;translate:0 -50%;z-index:0;
  width:min(420px,44vw);color:var(--ivory);opacity:.09;
}

/* ══ 06 · LANDING ══════════════════════════════════════════ */

/* Typisierter Scroll-Fortschritt: erlaubt Rechnen in calc()
   und sauberes Interpolieren, wo Browser es unterstützen. */
@property --p{syntax:'<number>';inherits:true;initial-value:0}

/* ── Animierter Hintergrund ──────────────────────────────── */
/* Schwarzer Marmor, vollständig aus CSS.
   feTurbulence liefert fraktales Rauschen, feComponentTransfer
   presst es über eine Sprungtabelle in schmale Bänder — daraus
   entstehen die Adern.

   Bewegt wird ausschließlich per transform. Die Textur selbst
   wird einmal gerastert und danach nur noch verschoben, sonst
   müsste der Browser das Rauschen in jedem Bild neu berechnen. */
/* Schwarzer Grund mit schwebenden Blasen und grauen Wellen.
   Alles bewegt sich ausschließlich über transform und opacity —
   das läuft auf der Grafikkarte und kostet kein Layout. */
.bgfx{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 112%,#16382A 0%,#0C1E16 42%,#08150F 100%);
}

/* Graue Wellen: weiche, langgezogene Schleier, die driften
   und dabei ihre Neigung ändern. */
.bg-wave{
  position:absolute;left:-35%;right:-35%;
  height:52vh;border-radius:48%;
  filter:blur(52px);
  will-change:transform;
  /* Am 2026-09-02 zurueckgenommen (.13 -> .06). Die Schleier
     geben dem dunklen Grund weiterhin Tiefe, treten aber hinter
     Raster, Leitungen und Kennungen zurueck. */
  background:radial-gradient(ellipse 58% 100% at 50% 50%,
             rgba(178,190,186,.06),rgba(150,164,160,.025) 55%,transparent 74%);
}
.bg-wave.w1{top:-8%;animation:waveA 41s ease-in-out infinite alternate}
.bg-wave.w2{top:32%;opacity:.8;animation:waveB 57s ease-in-out infinite alternate}
.bg-wave.w3{bottom:-12%;opacity:.65;animation:waveC 73s ease-in-out infinite alternate}

@keyframes waveA{
  from{transform:translate3d(-4%,-2%,0) rotate(-3deg) scaleY(.9)}
  to  {transform:translate3d(5%,4%,0) rotate(4deg) scaleY(1.15)}
}
@keyframes waveB{
  from{transform:translate3d(6%,3%,0) rotate(3.5deg) scaleY(1.1)}
  to  {transform:translate3d(-5%,-4%,0) rotate(-2.5deg) scaleY(.88)}
}
@keyframes waveC{
  from{transform:translate3d(-3%,2%,0) rotate(2deg) scaleY(1.05)}
  to  {transform:translate3d(4%,-3%,0) rotate(-3.5deg) scaleY(.92)}
}

/* Blasen: Glanzpunkt oben links, weicher Rand, sonst durchsichtig */
.bg-bubbles{position:absolute;inset:0}
.bub{
  position:absolute;bottom:-12vh;border-radius:50%;
  background:
    radial-gradient(circle at 32% 27%,rgba(255,255,255,.95),rgba(255,255,255,.22) 30%,rgba(255,255,255,.04) 56%,transparent 66%),
    radial-gradient(circle at 50% 52%,rgba(255,255,255,.13),transparent 74%);
  box-shadow:inset 0 0 16px rgba(255,255,255,.24),0 0 28px rgba(255,255,255,.11);
  opacity:0;
  animation:bubUp var(--dur,34s) linear infinite;
  animation-delay:var(--del,0s);
  will-change:transform,opacity;
}
@keyframes bubUp{
  0%  {transform:translate3d(0,0,0) scale(.72);opacity:0}
  9%  {opacity:var(--op,.4)}
  88% {opacity:var(--op,.4)}
  100%{transform:translate3d(var(--sway,30px),-118vh,0) scale(1.06);opacity:0}
}

/* Fluchtpunkt-Raster stillgelegt — Technikgitter und Naturstein
   arbeiten gegeneinander. Eine Zeile, falls es zurück soll. */
.bgfx-grid{display:none}
.bgfx-grid.on{display:block;position:absolute;inset:0;overflow:hidden}
.bgfx-grid::before{
  content:"";position:absolute;left:-70%;right:-70%;top:48%;bottom:-46%;
  background-image:
    linear-gradient(rgba(125,148,131,.24) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,148,131,.13) 1px,transparent 1px);
  background-size:74px 74px;
  transform:perspective(300px) rotateX(74deg);
  transform-origin:50% 0;
  animation:gridRun 3.4s linear infinite;
  mask-image:linear-gradient(to bottom,transparent 0,#000 26%,transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,transparent 88%);
}
@keyframes gridRun{to{background-position:0 74px,0 0}}

.bgfx-scan{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(224,188,140,.45),transparent);
  animation:scanRun 11s linear infinite;
}
@keyframes scanRun{
  0%{transform:translateY(-6vh);opacity:0}
  10%{opacity:1}90%{opacity:1}
  100%{transform:translateY(106vh);opacity:0}
}
.bgfx-vig{position:absolute;inset:0;background:radial-gradient(102% 72% at 50% 40%,transparent 32%,rgba(0,0,0,.78) 100%)}

/* ── Hero ────────────────────────────────────────────────── */
.hero{position:relative;height:265svh}
.hero-stick{position:sticky;top:0;height:100svh;overflow:hidden}

.hero-copy{
  position:absolute;left:0;right:0;top:0;z-index:4;
  padding:calc(var(--nav-h) + 7svh) var(--gut) 0;
  text-align:center;color:var(--ivory);
  transform:translate3d(0,calc(var(--p,0) * -9svh),0);
  opacity:calc(1 - max(0, var(--p,0) - .58) * 3);
}
.hero .eyebrow{color:var(--gold)}
.hero .hero-h1{font-size:clamp(42px,8.6vw,132px);margin:0 auto;max-width:15ch}
.hero-h1{font-size:clamp(40px,7vw,96px);margin:0 0 26px}
.hero-h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--gold-bright)}
.hero-actions{margin-top:clamp(26px,4vw,40px)}
.hero-actions>span{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn-ghost-l{color:var(--ivory);border-color:rgba(244,241,232,.32)}
.btn-ghost-l:hover{background:var(--ivory);color:var(--forest);border-color:var(--ivory)}

/* Dunkle Sections der Landingpage lassen den Hintergrund durch */
body.landing .sig{background:rgba(8,21,15,.5)}
body.landing .mission{background:rgba(8,21,15,.72)}

/* HUD-Randbeschriftungen */
.hud{
  position:absolute;z-index:6;font-family:var(--f-mono);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);
}
.hud-tl{left:var(--gut);top:calc(var(--nav-h) + 20px)}
.hud-bl{left:var(--gut);bottom:24px;display:flex;align-items:center;gap:12px}
.hud-br{right:var(--gut);bottom:24px;text-align:right;color:var(--gold)}
.hud-bl i{display:block;width:46px;height:1px;background:rgba(125,148,131,.5);position:relative;overflow:hidden}
.hud-bl i::after{content:"";position:absolute;inset:0;background:var(--gold);animation:hint 2.4s var(--e-inout) infinite}
@keyframes hint{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ── Fliegende Produkte ──────────────────────────────────── */
/* ── Die Box ─────────────────────────────────────────────────
   .scbox ist nur Anker und bewegt sich nicht. Die Bewegung
   trägt .scbox-body — sonst würden die herausfliegenden
   Objekte mit der Box absinken und verblassen.

   Reihenfolge im Markup entscheidet die Überdeckung:
   flyfield steht VOR scbox-body, also verdecken Maul und
   Frontpanel die Objekte, solange sie noch drinliegen. */
.scbox{
  --bw:min(560px,84vw);
  position:absolute;left:50%;bottom:-6svh;translate:-50% 0;z-index:5;
  width:var(--bw);
}
.scbox-body{
  position:relative;transform-origin:50% 100%;
  transform:translate3d(0,calc(var(--p,0) * 42svh),0) scale(calc(1 - var(--p,0) * .12));
  opacity:calc(1 - max(0, var(--p,0) - .5) * 2.6);
  will-change:transform;
}

/* Ankerpunkt: Oberkante des Mauls, mittig */
.flyfield{position:absolute;left:50%;top:0;width:0;height:0;pointer-events:none}
.fi{
  position:absolute;left:0;top:0;
  width:var(--w,66px);height:var(--w,66px);
  margin-left:calc(var(--w,66px) / -2);
  margin-top:calc(var(--w,66px) / -2);
  color:var(--c,rgba(244,241,232,.62));
  /* --ox ist ein Anteil der Boxbreite, damit die Ladung
     bei jeder Bildschirmgröße im Karton bleibt. */
  --f:clamp(0,calc((var(--pe,0) - var(--d,0)) * var(--k,2.15)),1);
  --x0:calc(var(--bw) * var(--ox,0));

  /* Absenkung: Im Ruhezustand liegt jedes Stueck tief genug im
     Karton, dass Maul und Frontflaeche es vollstaendig verdecken.
     Vorher standen die Objekte durch negative --oy-Werte ueber der
     Kante und ragten schon vor dem Scrollen heraus — genau das
     sah nach "haengt im Rand" aus. Der Betrag faellt mit dem
     Flugfortschritt auf null. */
  --sink:calc((1 - var(--f)) * clamp(34px, 5vw, 62px));

  transform:
    translate3d(
      calc(var(--x0) + (var(--dx) - var(--x0)) * var(--f)),
      calc(var(--oy,0px) + (var(--dy) - var(--oy,0px)) * var(--f) + var(--sink)),
      0)
    rotate(calc(var(--rot,0deg) * var(--f)))
    scale(calc((var(--s0,.48) + (var(--s1,.95) - var(--s0,.48)) * var(--f)) * var(--sf,1)));

  /* Zwei Blenden in einem Ausdruck: schnell auf, spaet wieder zu.
     Der erste Faktor haelt das Stueck unsichtbar, solange es noch
     im Karton steckt — auch dann, wenn ein Rand es einmal nicht
     sauber verdecken sollte. Doppelte Absicherung ist hier
     billiger als ein Darstellungsfehler. */
  opacity:calc(
    clamp(0, calc(var(--f) * 9), 1)
    * (1 - max(0, var(--f) - .72) * 3.4)
  );
  will-change:transform;
}
.fi svg{width:100%;height:100%;display:block}
.flyfield.idle .fi{will-change:auto}
/* Drei Tiefenstufen — vorne heller, hinten zurückgenommen */
.fi.gold{--c:rgba(224,188,140,.82)}
.fi.sage{--c:rgba(141,171,150,.66)}
.fi.deep{--c:rgba(244,241,232,.42)}

.scbox-glow{
  position:absolute;left:50%;top:-14%;translate:-50% 0;
  width:124%;height:64%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(192,154,107,.26),transparent 70%);
  filter:blur(30px);
  opacity:calc(.35 + var(--p,0) * .45);
}
/* ── Innendeckel ───────────────────────────────────────────
   Steht hinter der Box und richtet sich beim Öffnen auf.
   Traegt die Leitidee, wie auf der Vorlage. */
.scbox-lid{
  position:absolute;left:8%;right:8%;bottom:0;
  padding:clamp(14px,2.4vw,26px) 4% clamp(26px,4vw,42px);
  display:grid;justify-items:center;gap:clamp(6px,1vw,11px);
  background:linear-gradient(180deg,#16382A 0%,#0F2A20 100%);
  border:1px solid rgba(192,154,107,.20);
  border-radius:10px 10px 0 0;
  transform-origin:50% 100%;
  /* Von fast flach (versteckt) zu aufgerichtet. */
  transform:perspective(900px)
            rotateX(calc(84deg - var(--p,0) * 66deg))
            translateY(-4%);
  opacity:calc(.15 + var(--p,0) * .85);
  z-index:0;
}
.scbox-lid-rule{
  width:clamp(26px,4vw,44px);height:1px;
  background:rgba(198,165,116,.5);
}
.scbox-lid-txt{
  font-family:var(--f-mono);
  font-size:clamp(7px,.92vw,10px);
  letter-spacing:.2em;text-transform:uppercase;text-align:center;
  line-height:1.9;color:rgba(198,165,116,.88);
}
.scbox-lid-globe{
  width:clamp(13px,1.7vw,19px);height:auto;
  fill:none;stroke:rgba(198,165,116,.7);stroke-width:1.1;
}

/* ── Klappen ───────────────────────────────────────────────
   Innenseite in Kraftpapier-Ton wie auf der Vorlage; die
   Aussenkante bleibt dunkelgruen. */
.scbox-flaps{position:relative;height:0;z-index:2}
.scbox-flap{
  position:absolute;bottom:0;width:48%;height:clamp(30px,5vw,46px);
  background:linear-gradient(180deg,#D3BC96 0%,#B99C6E 62%,#9C8055 100%);
  border:1px solid rgba(120,96,58,.5);
  border-bottom:0;border-radius:3px 3px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,244,222,.5),
             0 6px 14px -6px rgba(0,0,0,.6);
}
/* Fast geschlossen im Ruhezustand, dann sauber aufklappend */
.scbox-flap.l{left:0;transform-origin:bottom left;transform:rotate(calc(-4deg - var(--p,0) * 64deg))}
.scbox-flap.r{right:0;transform-origin:bottom right;transform:rotate(calc(4deg + var(--p,0) * 64deg))}

/* Das Maul: dunkle Öffnung, in der die Ladung sitzt */
.scbox-mouth{
  position:relative;height:clamp(20px,3vw,30px);
  background:linear-gradient(180deg,#020C07 0%,#061109 55%,#0B1B13 100%);
  border:1px solid rgba(192,154,107,.2);border-bottom:0;
  border-radius:6px 6px 0 0;
  box-shadow:inset 0 12px 20px -4px rgba(0,0,0,.85);
}
/* ── Korpus ────────────────────────────────────────────────
   Zwei Flaechen statt einer: links die angeschnittene
   Seitenwand mit Claim, Monogramm und Strichcode, rechts die
   Frontflaeche mit der Marke. So entsteht die Perspektive der
   Vorlage ohne 3D-Transformationen. */
.scbox-front{
  position:relative;z-index:3;
  padding:clamp(20px,3.2vw,34px) clamp(16px,2.6vw,28px) clamp(22px,3.6vw,36px);
  background:linear-gradient(180deg,#17392B 0%,#123024 26%,#0E261D 70%,#0A1D16 100%);
  border:1px solid rgba(192,154,107,.24);border-top:0;
  border-radius:0 0 10px 10px;
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(12px,2.4vw,26px);
  box-shadow:0 40px 90px -38px rgba(0,0,0,.92),inset 0 1px 0 rgba(224,188,140,.1);
}
/* Seitenwand: eine Spur dunkler, damit sie als abgewandte
   Flaeche gelesen wird. Die Kante dazwischen ist die Knickkante. */
.scbox-side{
  position:relative;align-self:stretch;
  display:grid;justify-items:start;align-content:space-between;
  gap:clamp(8px,1.6vw,16px);
  padding-right:clamp(10px,2vw,20px);
  background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 78%);
  border-right:1px solid rgba(192,154,107,.16);
}
.scbox-claim{
  font-family:var(--f-mono);
  font-size:clamp(6px,.74vw,8px);
  letter-spacing:.2em;text-transform:uppercase;line-height:1.85;
  color:rgba(228,222,206,.62);
}
.scbox-mono{
  width:clamp(38px,6.4vw,74px);height:auto;
  color:var(--gold);opacity:.92;
}
.scbox-foot{display:flex;align-items:flex-end;gap:clamp(6px,1.2vw,12px)}
/* Strichcode als Verlaufsmuster — kein Bild noetig. */
.scbox-bars{
  width:clamp(26px,4.4vw,50px);height:clamp(16px,2.4vw,28px);
  background:repeating-linear-gradient(90deg,
    rgba(198,165,116,.82) 0 1px,
    transparent 1px 2px,
    rgba(198,165,116,.82) 2px 4px,
    transparent 4px 6px);
  opacity:.75;
}
.scbox-ready{
  font-family:var(--f-mono);
  font-size:clamp(5.5px,.66vw,7.5px);
  letter-spacing:.18em;text-transform:uppercase;line-height:1.8;
  color:rgba(228,222,206,.5);
}

.scbox-face{display:grid;justify-items:center;gap:clamp(6px,1.1vw,12px)}
.scbox-mark{width:clamp(22px,3.2vw,34px);opacity:.9;color:var(--gold)}
.scbox-word{
  font-size:clamp(15px,2.7vw,34px);font-weight:600;
  letter-spacing:.2em;color:#F3F0E6;line-height:1.18;text-align:center;
  text-indent:.2em;
}
.scbox-rule{
  width:clamp(30px,5vw,62px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(198,165,116,.9),transparent);
}
.scbox-code{
  font-family:var(--f-mono);
  font-size:clamp(6px,.78vw,8.5px);
  letter-spacing:.3em;color:var(--gold);opacity:.72;
}
.scbox-tape{
  position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,188,140,.45),transparent);
}

/* ── Kreislauf ──────────────────────────────────────────────
   Fünf Stationen in einer Reihe, umschlossen von einer Ellipse
   mit zwei Pfeilspitzen: der Weg führt vorne durch und hinten
   zurück. Die Ellipse ist reines CSS (border-radius:50% auf
   einem breiten Kasten) und skaliert deshalb mit. */
.cycle{
  position:relative;
  padding:clamp(72px,11vw,132px) 0 clamp(64px,9vw,112px);
  color:var(--ivory);
}
.cyc-grid{
  display:grid;grid-template-columns:.74fr 1.26fr;
  gap:clamp(28px,4vw,58px);align-items:center;
}

/* Textspalte */
.cyc-copy{min-width:0}
.cyc-h{
  font-size:clamp(30px,3.9vw,52px);line-height:1.06;
  letter-spacing:-.035em;margin-bottom:16px;max-width:15ch;
}
.cyc-h em{font-style:italic;font-weight:500}
.cyc-sub{
  color:rgba(244,241,232,.66);font-size:clamp(15px,1.5vw,17.5px);
  line-height:1.6;max-width:38ch;margin-bottom:26px;
}

/* Der Ring */
.cyc-loop{position:relative;padding:clamp(30px,4vw,48px) 0}
.cyc-ring{
  position:absolute;left:0;right:0;top:0;bottom:0;
  border:1px solid rgba(125,148,131,.34);border-radius:50%;
  pointer-events:none;
}
.cyc-head{
  position:absolute;width:21px;height:21px;color:var(--sage);
  opacity:.9;pointer-events:none;
}
/* Oben rechts läuft der Weg nach vorne, unten links zurück —
   die Drehung folgt ungefähr der Tangente der Ellipse. */
.cyc-head.a{top:-10px;left:64%;transform:rotate(28deg)}
.cyc-head.b{bottom:-10px;left:36%;transform:rotate(208deg)}

/* Stationen */
.cyc-steps{
  position:relative;list-style:none;margin:0;
  padding:clamp(10px,1.6vw,18px) clamp(16px,3.2%,38px);
  display:grid;grid-template-columns:repeat(5,1fr);
}
.cyc-step{
  position:relative;text-align:center;padding:0 5px;
  transition:opacity var(--t-base) var(--e-soft);
}
/* Verbindungspfeil in die Lücke zur nächsten Station */
.cyc-step:not(:last-child)::after{
  content:"";position:absolute;top:22px;right:0;
  width:9px;height:9px;
  border-top:1px solid rgba(125,148,131,.5);
  border-right:1px solid rgba(125,148,131,.5);
  transform:translate(50%,-50%) rotate(45deg);
}
.cyc-ico{
  display:grid;place-items:center;width:44px;height:44px;margin:0 auto 14px;
  color:var(--sage);
  transition:color var(--t-base) var(--e-soft),transform var(--t-base) var(--e-out);
}
.cyc-ico svg{width:100%;height:100%}
.cyc-step b{
  display:block;margin-bottom:7px;
  font-family:var(--f-mono);font-size:9.5px;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;color:#D6DCDA;
  transition:color var(--t-base) var(--e-soft);
}
.cyc-step>span:last-child{
  display:block;font-size:11.5px;line-height:1.55;color:#8E9793;
  text-wrap:balance;
}

/* Wandernde Hervorhebung — hält den Kreislauf in Bewegung,
   ohne dass etwas springt. */
.cyc-step.is-on .cyc-ico{color:var(--gold);transform:translateY(-3px)}
.cyc-step.is-on b{color:var(--ivory)}

@media (max-width:900px){
  .cyc-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
  .cyc-h,.cyc-sub{max-width:none}
  /* Ellipse und Pfeilspitzen ergeben hochkant keinen Sinn */
  .cyc-ring,.cyc-head{display:none}
  .cyc-loop{padding:0}
  .cyc-steps{grid-template-columns:1fr;gap:22px;padding:0}
  /* Die Linie läuft durch die Symbolmitte, die Symbole liegen
     mit eigenem Grund darauf — Perlen auf einer Schnur. */
  .cyc-steps::before{
    content:"";position:absolute;left:13px;top:12px;bottom:12px;
    width:1px;background:rgba(125,148,131,.3);
  }
  .cyc-step{display:grid;grid-template-columns:auto 1fr;
    column-gap:16px;text-align:left;padding:0}
  .cyc-ico{width:26px;height:26px;margin:0;grid-row:span 2;
    background:#08150F;padding:2px 0}
  .cyc-step:not(:last-child)::after{display:none}
  .cyc-step b{margin-bottom:3px;align-self:end}
  .cyc-step>span:last-child{align-self:start}
}

/* Zustände A/B/C — ohne Preise */
.grades{padding:clamp(88px,13vw,160px) 0;background:var(--ivory)}
.grade-layout{display:grid;gap:clamp(30px,5vw,60px)}
.grade-picker{display:flex;gap:clamp(10px,2vw,22px)}
.grade-key{
  flex:1;position:relative;padding:clamp(18px,3vw,34px) 0;border-radius:18px;
  border:1px solid rgba(18,41,31,.14);
  font-size:clamp(48px,9vw,116px);font-weight:640;letter-spacing:-.05em;line-height:1;
  color:rgba(18,41,31,.2);overflow:hidden;
  transition:color var(--t-base) var(--e-inout),border-color var(--t-base) var(--e-inout),background var(--t-base) var(--e-inout);
}
.grade-key::after{content:"";position:absolute;left:50%;bottom:14px;translate:-50% 0;width:26px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform var(--t-base) var(--e-out)}
.grade-key:hover{color:rgba(18,41,31,.42);border-color:rgba(18,41,31,.28)}
.grade-key.is-active{color:var(--forest);border-color:var(--forest);background:var(--ivory-warm)}
.grade-key.is-active::after{transform:scaleX(1)}

.grade-card{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,60px);align-items:center}
.grade-visual{position:relative;aspect-ratio:4/3;border-radius:22px;background:var(--ivory-warm);display:grid;place-items:center;overflow:hidden;transition:background var(--t-base) var(--e-inout)}
.grade-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.6),transparent 62%)}
.grade-logo{position:absolute;width:78%;color:var(--forest);opacity:.06}
.grade-product{width:56%;height:56%;position:relative;z-index:1;transition:transform var(--t-base) var(--e-out)}
.grade-visual:hover .grade-product{transform:scale(1.03)}
.grade-badge{position:absolute;z-index:2;left:20px;top:20px;display:flex;align-items:center;gap:9px;padding:8px 15px;border-radius:100px;background:var(--forest);color:var(--ivory)}
.grade-badge b{font-size:15px;font-weight:680}
.grade-badge i{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;font-style:normal;text-transform:uppercase;opacity:.85}

.grade-info h3{font-size:clamp(28px,3.8vw,46px);margin-bottom:16px}
.grade-info>p{color:var(--ink-soft);max-width:46ch;margin-bottom:30px}
.grade-info dl{margin:0 0 30px;display:grid;gap:15px}
.grade-info dl div{display:grid;gap:4px;padding-top:15px;border-top:1px solid rgba(18,41,31,.11)}
.grade-info dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.grade-info dd{margin:0;font-size:15.5px}

/* Zustandsindex statt Preis */
.meter{display:grid;gap:10px}
.meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.meter-top span{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.meter-top b{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;color:var(--forest)}
.meter-track{display:flex;gap:5px}
.meter-track i{
  flex:1;height:8px;border-radius:2px;background:rgba(18,41,31,.1);
  transition:background var(--t-base) var(--e-inout);
  transition-delay:calc(var(--i,0) * 22ms);
}
.meter-track i.on{background:var(--forest)}
[data-grade-card="b"] .meter-track i.on{background:var(--amber)}
[data-grade-card="c"] .meter-track i.on{background:var(--clay)}

.checks{display:grid;gap:9px;margin-top:24px}
.checks div{display:flex;align-items:center;gap:10px;font-size:14.5px}
.checks svg{width:16px;height:16px;flex:none;color:var(--moss)}
.checks div.off{color:var(--ink-soft);opacity:.62}
.checks div.off svg{color:var(--ink-soft)}

[data-grade-card="a"]{--hp-wear-b:0;--hp-wear-c:0}
[data-grade-card="b"]{--hp-wear-b:1;--hp-wear-c:0}
[data-grade-card="c"]{--hp-wear-b:1;--hp-wear-c:1}
[data-grade-card="b"] .grade-badge{background:var(--amber);color:var(--forest-deep)}
[data-grade-card="c"] .grade-badge{background:var(--clay);color:#fff}
.is-swapping .grade-product,.is-swapping [data-gv]{opacity:0;transition:opacity 170ms var(--e-inout)}
.grade-product,[data-gv]{transition:opacity var(--t-base) var(--e-inout)}

/* Händler-Vorschau auf der Landing */
.mpreview{padding:clamp(88px,13vw,160px) 0;background:var(--ivory-warm)}
.mpreview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}

/* Statistiken */
.stats{padding:clamp(76px,10vw,128px) 0;background:var(--ivory)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.stat b{display:block;font-size:clamp(40px,5.4vw,74px);font-weight:640;letter-spacing:-.05em;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.stat i{display:block;font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);line-height:1.5}

/* Signature: 2ND morpht ins Logo */
.sig{position:relative;height:210svh;background:var(--forest);color:var(--ivory);overflow:hidden}
.sig-stick{position:sticky;top:0;height:100svh;display:grid;place-items:center}
.sig-word,.sig-stack,.sig-logo{grid-area:1/1;display:grid;place-items:center}
.sig-word{
  font-size:clamp(160px,38vw,560px);font-weight:700;letter-spacing:-.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(244,241,232,.16);
  user-select:none;white-space:nowrap;
  transform:scale(calc(.92 + var(--p,0) * .16));
  opacity:calc(1 - var(--p3,0));
}
.sig-logo{width:min(560px,72vw);color:var(--ivory);opacity:var(--p3,0);transform:scale(calc(.82 + var(--p3,0) * .18))}
.sig-line{grid-area:1/1;font-family:var(--f-mono);font-size:clamp(18px,3.2vw,46px);letter-spacing:.22em;transition:opacity var(--t-slow) var(--e-inout),transform var(--t-slow) var(--e-out)}
.sig-first{opacity:calc((1 - var(--p2,0)) * (1 - var(--p3,0)));transform:translateY(calc(var(--p2,0) * -18px))}
.sig-second{opacity:calc(var(--p2,0) * (1 - var(--p3,0)));transform:translateY(calc((1 - var(--p2,0)) * 18px))}
.sig-stack{align-content:end;padding-bottom:8svh}

/* Mission */
.mission{padding:clamp(88px,14vw,172px) 0;background:var(--forest);color:var(--ivory);position:relative;overflow:hidden}
.mission-h{font-size:clamp(42px,9.5vw,144px);line-height:.94;margin-bottom:clamp(44px,6.5vw,84px)}
.mission-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);max-width:900px;margin-left:auto}
.mission-cols p{color:rgba(244,241,232,.62);font-size:clamp(15px,1.5vw,18px)}

/* CTA */
.cta{padding:clamp(76px,10vw,128px) 0 clamp(88px,12vw,148px);background:var(--ivory)}
.cta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,32px)}
.cta-side{padding:clamp(32px,5vw,58px);border-radius:26px;background:var(--ivory-warm);position:relative;overflow:hidden}
.cta-side>span{display:flex;flex-direction:column;align-items:flex-start;height:100%;position:relative;z-index:1}
.cta-side h3{font-size:clamp(25px,3.3vw,40px);margin-bottom:14px}
.cta-side>span>p:not(.eyebrow){color:var(--ink-soft);margin-bottom:30px;max-width:38ch}
.cta-b2b{background:var(--forest);color:var(--ivory)}
.cta-b2b>span>p:not(.eyebrow){color:rgba(244,241,232,.62)}
.cta-logo{position:absolute;right:-14%;bottom:-24%;width:58%;color:currentColor;opacity:.07;z-index:0}

/* Footer */
.foot{padding:48px 0;background:var(--ivory);border-top:1px solid rgba(18,41,31,.12)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot p{font-size:14px;color:var(--ink-soft)}
.foot small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;color:var(--ink-soft);opacity:.6}
.foot-nav{display:flex;gap:20px;font-size:14px;color:var(--ink-soft)}
.foot-nav a:hover{color:var(--forest)}

/* ══ 07 · ENTDECKEN (Händler) ══════════════════════════════ */
.toolbar{
  position:sticky;top:0;z-index:70;
  background:rgba(244,241,232,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(18,41,31,.1);padding:16px 0;
}
.toolbar-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.search{
  display:flex;align-items:center;gap:10px;flex:1 1 260px;min-width:0;
  padding:11px 16px;border-radius:100px;background:var(--ivory-warm);
  border:1px solid transparent;transition:border-color var(--t-fast) var(--e-soft),background var(--t-fast) var(--e-soft);
}
.search:focus-within{border-color:var(--forest);background:#fff}
.search svg{width:17px;height:17px;flex:none;color:var(--ink-soft)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;font-size:15px;color:inherit}
.search input::placeholder{color:var(--ink-soft);opacity:.75}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:9px 16px;border-radius:100px;border:1px solid rgba(18,41,31,.18);
  font-size:13.5px;white-space:nowrap;
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft),border-color var(--t-fast) var(--e-soft);
}
.chip:hover{border-color:var(--forest)}
.chip.is-on{background:var(--forest);color:var(--ivory);border-color:var(--forest)}

.sortsel{padding:10px 14px;border-radius:100px;border:1px solid rgba(18,41,31,.18);font:inherit;font-size:13.5px;background:var(--ivory);cursor:pointer}

.results{padding:clamp(32px,5vw,56px) 0 clamp(80px,11vw,132px)}
.results-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px;font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.results-meta b{color:var(--forest);font-size:13px}

.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:clamp(18px,2.4vw,28px)}
.mcard{
  position:relative;border-radius:20px;overflow:hidden;background:var(--ivory-warm);
  border:1px solid rgba(18,41,31,.09);
  transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out),border-color var(--t-base) var(--e-out);
}
.mcard:hover{transform:translateY(-3px);box-shadow:0 14px 40px -18px rgba(18,41,31,.34);border-color:rgba(18,41,31,.2)}
.mcard-visual{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(150deg,var(--c1),var(--c2));
}
.mcard-visual[data-tone="1"]{--c1:#2A4A38;--c2:#0E2219}
.mcard-visual[data-tone="2"]{--c1:#C9BFA4;--c2:#8A7C5E}
.mcard-visual[data-tone="3"]{--c1:#8E6B57;--c2:#4E362B}
.mcard-visual[data-tone="4"]{--c1:#4E6B78;--c2:#213841}
.mcard-visual[data-tone="5"]{--c1:#B08256;--c2:#5F4026}
.mcard-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.24),transparent 60%)}
.mcard-logo{position:absolute;right:-8%;bottom:-30%;width:56%;color:#fff;opacity:.16;z-index:1}
.mcard-tag{
  position:absolute;z-index:2;left:16px;top:14px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.mcard-own{
  position:absolute;z-index:2;right:14px;top:12px;
  padding:5px 11px;border-radius:100px;background:var(--gold);color:var(--forest-deep);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
}
.mcard-body{padding:20px 22px 22px}
.mcard-body h3{font-size:21px;margin-bottom:6px}
.mcard-cat{font-size:14px;color:var(--ink-soft);margin-bottom:12px}
.mcard-desc{font-size:14.5px;color:var(--ink-soft);margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.mcard-foot b{color:var(--forest);font-size:11px}

.empty{padding:70px 0;text-align:center;color:var(--ink-soft)}
.empty .logo{
  width:76px;margin:0 auto 22px;opacity:.9;
  padding:22px;box-sizing:content-box;
  background:var(--forest);border-radius:50%;
}
.empty h3{font-size:22px;margin-bottom:10px;color:var(--forest)}

/* ══ 08 · PRODUKTE ═════════════════════════════════════════ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:clamp(16px,2.2vw,26px)}
.pcard{position:relative;border-radius:18px;overflow:hidden;background:var(--ivory-warm);border:1px solid rgba(18,41,31,.09);transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 36px -18px rgba(18,41,31,.3)}
.pcard-visual{position:relative;aspect-ratio:1/1;display:grid;place-items:center;background:var(--ivory-deep);overflow:hidden}
.pcard-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.55),transparent 64%)}
.pcard-logo{position:absolute;width:82%;color:var(--forest);opacity:.06}
.pcard-visual .prod{width:58%;height:58%;position:relative;z-index:1;transition:transform var(--t-base) var(--e-out)}
.pcard:hover .prod{transform:scale(1.05)}
.pcard[data-grade="a"]{--hp-wear-b:0;--hp-wear-c:0}
.pcard[data-grade="b"]{--hp-wear-b:1;--hp-wear-c:0}
.pcard[data-grade="c"]{--hp-wear-b:1;--hp-wear-c:1}
.pgrade{
  position:absolute;z-index:2;left:13px;top:13px;
  display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:100px;
  background:var(--forest);color:var(--ivory);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
}
.pgrade b{font-family:var(--f-sans);font-size:13px;letter-spacing:-.02em}
.pcard[data-grade="b"] .pgrade{background:var(--amber);color:var(--forest-deep)}
.pcard[data-grade="c"] .pgrade{background:var(--clay);color:#fff}
.pcard-body{padding:16px 18px 18px}
.pcard-body h3{font-size:16px;line-height:1.3;margin-bottom:6px;letter-spacing:-.02em}
.pcard-m{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.pcard-note{font-size:13.5px;color:var(--ink-soft);margin-bottom:14px;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-price{display:flex;align-items:baseline;gap:9px}
.pcard-price b{font-size:19px;font-weight:640;letter-spacing:-.03em}
.pcard-price s{font-size:13px;color:var(--ink-soft);opacity:.7}

/* ══ 09 · HÄNDLER WERDEN ═══════════════════════════════════ */
.formwrap{padding:clamp(44px,6vw,80px) 0 clamp(80px,11vw,130px)}
.formgrid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(32px,5vw,72px);align-items:start}

.fform{display:grid;gap:26px}
fieldset{border:0;padding:0;margin:0;display:grid;gap:16px}
legend{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);padding:0 0 4px;
}
.frow{display:grid;gap:16px}
.frow.two{grid-template-columns:1fr 1fr}
.field{display:grid;gap:7px}
.field>label{font-size:13.5px;font-weight:540}
.field>label .req{color:var(--clay);margin-left:2px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 16px;border-radius:12px;
  border:1px solid rgba(18,41,31,.18);background:var(--ivory-warm);
  font:inherit;font-size:15px;color:inherit;outline:none;
  transition:border-color var(--t-fast) var(--e-soft),background var(--t-fast) var(--e-soft),box-shadow var(--t-fast) var(--e-soft);
}
.field textarea{min-height:112px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--forest);background:#fff;box-shadow:0 0 0 3px rgba(18,41,31,.08);
}
.field .hint{font-size:12.5px;color:var(--ink-soft)}
.field .err{font-size:12.5px;color:var(--clay);display:none}
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{border-color:var(--clay);background:rgba(196,99,63,.05)}
.field.is-bad .err{display:block}
.counter{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-soft);text-align:right}

.fnote{
  display:flex;gap:12px;padding:16px 18px;border-radius:14px;
  background:var(--ivory-warm);border:1px solid rgba(18,41,31,.1);
  font-size:13.5px;color:var(--ink-soft);
}
.fnote svg{width:17px;height:17px;flex:none;color:var(--gold);margin-top:2px}
/* Warnvariante — für den Hinweis zu Zahlungsdaten */
.fnote.warn{background:rgba(196,99,63,.07);border-color:rgba(196,99,63,.28)}
.fnote.warn svg{color:var(--clay)}
.fnote.warn b{color:var(--clay)}
.factions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ══ 18 · MESSENGER ════════════════════════════════════════ */
.msg{position:relative;padding:clamp(76px,10vw,128px) 0;color:var(--ivory);overflow:hidden}
.msg::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(8,21,15,.62) 0%,rgba(11,26,19,.84) 50%,rgba(8,21,15,.7) 100%);
}
.msg .wrap{position:relative;z-index:1}
.msg .sec-h2{color:var(--ivory)}

.msg-note{
  display:flex;gap:12px;max-width:74ch;margin:0 0 clamp(24px,3.4vw,38px);
  padding:15px 18px;border-radius:14px;
  background:rgba(4,14,10,.4);border:1px solid rgba(125,148,131,.22);
  font-size:13.5px;line-height:1.6;color:rgba(244,241,232,.66);
}
.msg-note svg{width:17px;height:17px;flex:none;color:var(--gold);margin-top:3px}
.msg-note b{color:var(--ivory)}

/* Perspektivwechsel */
.msg-as{display:flex;gap:6px;padding:6px;border-radius:100px;background:rgba(4,14,10,.5);border:1px solid rgba(125,148,131,.2);margin-bottom:16px}
.msg-as button{
  flex:1;padding:9px 14px;border-radius:100px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft);
}
.msg-as button:hover{color:var(--ivory)}
.msg-as button.is-on{background:var(--gold);color:var(--forest-deep)}

.msg-gate{
  padding:26px;border-radius:18px;text-align:center;
  background:rgba(4,14,10,.45);border:1px solid rgba(125,148,131,.22);
}
.msg-gate p{color:rgba(244,241,232,.7);margin-bottom:18px}

.msg-shell{
  display:grid;grid-template-columns:minmax(220px,290px) 1fr;
  height:clamp(420px,52svh,540px);
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(125,148,131,.22);background:rgba(4,14,10,.42);
}
.msg-side{display:flex;flex-direction:column;border-right:1px solid rgba(125,148,131,.18);min-width:0}
.msg-side .msg-as{margin:14px 14px 10px}
.msg-list{flex:1;overflow-y:auto;padding:0 8px 12px;display:grid;gap:2px;align-content:start}

.msg-row{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 11px;border-radius:12px;text-align:left;min-width:0;
  transition:background var(--t-fast) var(--e-soft);
}
.msg-row:hover{background:rgba(244,241,232,.06)}
.msg-row.is-on{background:rgba(192,154,107,.14)}
.msg-ava{
  flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;
  background:var(--forest);display:grid;place-items:center;
}
.msg-ava img{width:100%;height:100%;object-fit:cover}
.msg-ava .logo{width:58%;color:var(--ivory);opacity:.6}
.msg-row-txt{min-width:0;display:grid;gap:2px}
.msg-row-txt b{font-size:14px;font-weight:560;color:var(--ivory);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-row-txt i{font-style:normal;font-size:12.5px;color:rgba(244,241,232,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.msg-main{display:flex;flex-direction:column;min-width:0}
.msg-head{
  display:flex;align-items:center;gap:12px;min-height:64px;
  padding:12px 18px;border-bottom:1px solid rgba(125,148,131,.18);
}
.msg-head b{display:block;font-size:15px;color:var(--ivory)}
.msg-head i{font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}

.msg-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.msg-b{max-width:76%;align-self:flex-start}
.msg-b p{
  padding:11px 15px;border-radius:14px;border-bottom-left-radius:5px;
  background:rgba(244,241,232,.1);color:var(--ivory);
  font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;
}
.msg-b time{display:block;margin-top:5px;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;color:rgba(244,241,232,.38)}
.msg-b.me{align-self:flex-end}
.msg-b.me p{background:var(--gold);color:var(--forest-deep);border-bottom-left-radius:14px;border-bottom-right-radius:5px}
.msg-b.me time{text-align:right}

.msg-none{padding:22px 4px;font-size:13.5px;color:rgba(244,241,232,.45);line-height:1.6}

.msg-form{display:flex;gap:9px;padding:14px 18px;border-top:1px solid rgba(125,148,131,.18)}
.msg-form.is-off{display:none}
.msg-form input{
  flex:1;min-width:0;padding:12px 16px;border-radius:100px;
  background:rgba(4,14,10,.55);border:1px solid rgba(125,148,131,.26);
  font:inherit;font-size:14.5px;color:var(--ivory);outline:none;
  transition:border-color var(--t-fast) var(--e-soft);
}
.msg-form input::placeholder{color:rgba(244,241,232,.35)}
.msg-form input:focus{border-color:var(--gold)}
.msg-form button{
  width:44px;height:44px;flex:none;border-radius:100px;
  background:var(--gold);color:var(--forest-deep);display:grid;place-items:center;
  transition:background var(--t-fast) var(--e-soft),transform var(--t-micro) var(--e-out);
}
.msg-form button:hover{background:var(--gold-bright)}
.msg-form button:active{transform:scale(.94)}
.msg-form button svg{width:18px;height:18px}

/* ══ 17 · KUNDENKONTO ══════════════════════════════════════ */
.authwrap{max-width:560px;margin:0 auto}
.authwrap .tabs{justify-content:center}
/* Ohne Fieldsets muss das Formular seine Abstände selbst tragen */
.authform{margin-top:26px;display:grid;gap:18px}
.authform .field{margin-bottom:0}
.authform .frow.two{margin-bottom:0}

.checkrow{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-size:14px;color:var(--ink-soft);line-height:1.5;
}
.checkrow input{
  flex:none;width:19px;height:19px;margin-top:1px;
  accent-color:var(--forest);cursor:pointer;
}
.checkrow span{padding-top:1px}
.field.is-bad .checkrow span{color:var(--clay)}

/* Kontochip in der Navigation */
.nav-acct{position:relative;padding-left:34px}
.nav-acct::before{
  content:"";position:absolute;left:14px;top:50%;translate:0 -50%;
  width:7px;height:7px;border-radius:50%;
  background:var(--ink-soft);opacity:.45;
  transition:background var(--t-fast) var(--e-soft),opacity var(--t-fast) var(--e-soft);
}
.nav-acct.is-in::before{background:var(--gold);opacity:1;box-shadow:0 0 0 3px rgba(192,154,107,.22)}
.nav.on-dark .nav-acct::before{background:var(--sage)}
.nav.on-dark .nav-acct.is-in::before{background:var(--gold)}

/* Live-Vorschau */
.preview{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:16px}
.preview-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft)}
.preview .mcard{transition:none}
.preview .mcard:hover{transform:none;box-shadow:none}

/* Erfolgs-Zustand */
.done{display:none;place-items:center;text-align:center;padding:clamp(48px,8vw,96px) 0}
.done.is-on{display:grid}
.done .logo{
  width:min(190px,42vw);margin-bottom:28px;
  padding:26px 30px;box-sizing:content-box;
  background:var(--forest);border-radius:22px;
}
.done h2{font-size:clamp(30px,5vw,58px);margin-bottom:14px}
.done p{color:var(--ink-soft);max-width:46ch;margin:0 auto 30px}
.done-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.fform.is-off{display:none}

/* Verwaltung eigener Händler */
.owned{margin-top:44px;padding-top:30px;border-top:1px solid rgba(18,41,31,.12)}
.owned h3{font-size:17px;margin-bottom:16px}
.owned-list{display:grid;gap:10px}
.owned-row{
  display:flex;align-items:center;gap:14px;padding:13px 16px;
  border-radius:12px;background:var(--ivory-warm);border:1px solid rgba(18,41,31,.1);
}
.owned-row b{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.owned-row span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.owned-row button{
  padding:7px 13px;border-radius:100px;border:1px solid rgba(196,99,63,.4);
  font-size:12.5px;color:var(--clay);
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft);
}
.owned-row button:hover{background:var(--clay);color:#fff;border-color:var(--clay)}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:28px;translate:-50% 0;z-index:9400;
  display:flex;align-items:center;gap:11px;
  padding:14px 22px;border-radius:100px;
  background:var(--forest);color:var(--ivory);
  font-size:14px;box-shadow:0 16px 44px -18px rgba(8,21,15,.6);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out);
}
.toast svg{width:17px;height:17px;color:var(--gold)}
.toast.is-on{opacity:1;transform:translateY(0)}

/* Shared-Element Sheet */
.sheet{position:fixed;inset:0;z-index:9200;display:none}
.sheet.is-open{display:block}
/* Das Panel liegt immer bildschirmfüllend und wird per transform auf
   die Kachel zurückgerechnet, aus der es kommt (FLIP). Vorher wurden
   top/left/width/height animiert — vier Layout-Eigenschaften, die
   jeden Frame Layout, Paint und Composite auslösen. transform läuft
   allein auf der Grafikkarte.
   Der Eckradius wird in JS getrennt für x und y vorverzerrt
   (border-radius: Xpx / Ypx), damit er trotz ungleicher Skalierung
   im geschrumpften Zustand rund aussieht wie die Kachel. */
.sheet-panel{
  position:fixed;top:0;left:0;width:100vw;height:100svh;
  border-radius:0;overflow:hidden;transform-origin:0 0;
  background:linear-gradient(150deg,var(--c1,#2A4A38),var(--c2,#0E2219));color:var(--ivory);
  transition:transform var(--t-page) var(--e-inout),
             border-radius var(--t-page) var(--e-inout);
  will-change:transform;
}
.sheet.is-full .sheet-panel{transform:none;border-radius:0}
/* Während das Panel skaliert, ist nur der Verlauf zu sehen. Alles
   Inhaltliche blendet danach ein, sonst sieht man es verzerrt. */
.sheet-logo{
  position:absolute;right:-6%;top:50%;translate:0 -50%;width:min(460px,52vw);color:#fff;
  opacity:0;transition:opacity var(--t-base) var(--e-out);
}
.sheet.is-full .sheet-logo{opacity:.12;transition-delay:210ms}
.sheet-hero{position:absolute;left:0;right:0;bottom:0;padding:clamp(26px,6vw,78px);opacity:0;transform:translateY(14px);transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out)}
.sheet.is-full .sheet-hero{opacity:1;transform:translateY(0);transition-delay:210ms}
.sheet-hero h2{font-size:clamp(36px,7.5vw,104px);margin-bottom:12px}
.sheet-city{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:rgba(244,241,232,.6)}
.sheet-desc{margin-top:16px;max-width:52ch;color:rgba(244,241,232,.72);font-size:15px}
.sheet-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.sheet-close{
  position:absolute;right:20px;top:20px;z-index:3;width:44px;height:44px;border-radius:100px;
  background:rgba(244,241,232,.14);color:var(--ivory);display:grid;place-items:center;
  opacity:0;transition:opacity var(--t-base) var(--e-out),background var(--t-fast) var(--e-soft);
}
.sheet-close svg{width:17px;height:17px}
.sheet.is-full .sheet-close{opacity:1;transition-delay:250ms}
.sheet-close:hover{background:rgba(244,241,232,.28)}

/* ══ 12 · BILDER & AVATARE ═════════════════════════════════ */
.avatar{
  position:relative;flex:none;border-radius:50%;overflow:hidden;
  background:var(--forest);display:grid;place-items:center;
  width:56px;height:56px;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar .logo{width:64%;color:var(--ivory);opacity:.55}
.avatar.lg{width:104px;height:104px}
.avatar.xl{width:min(186px,30vw);height:min(186px,30vw)}
.avatar.sq{border-radius:18px}

/* Karten-Avatar im Verzeichnis */
/* Medaillon mittig im Kachelvisual.
   Vorher saß es mit bottom:-26px halb außerhalb und wurde vom
   overflow:hidden des Visuals abgeschnitten — sichtbar war nur
   eine Halbkreis-Scheibe unten links. */
.mcard-avatar{
  position:absolute;z-index:2;
  left:50%;top:50%;translate:-50% -50%;
  width:clamp(86px,30%,120px);aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  background:rgba(4,14,10,.5);
  box-shadow:0 0 0 1px rgba(244,241,232,.3),0 18px 42px -18px rgba(0,0,0,.72);
  display:grid;place-items:center;
  transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out);
}
.mcard-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.mcard-avatar .logo{width:54%;color:var(--ivory);opacity:.7}
.mcard:hover .mcard-avatar{
  transform:scale(1.045);
  box-shadow:0 0 0 1px rgba(224,188,140,.55),0 24px 52px -18px rgba(0,0,0,.78);
}
/* Wasserzeichen zurücknehmen, sobald das Medaillon Bildmitte hält */
.mcard.has-avatar .mcard-logo{opacity:.07}

/* Produktbild */
.pcard-photo{position:absolute;inset:0;z-index:1}
.pcard-photo img{width:100%;height:100%;object-fit:cover}

/* Uploader */
.drop{
  position:relative;display:flex;align-items:center;gap:16px;
  padding:14px;border-radius:16px;
  border:1px dashed rgba(18,41,31,.28);background:var(--ivory-warm);
  transition:border-color var(--t-fast) var(--e-soft),background var(--t-fast) var(--e-soft);
}
.drop:hover,.drop.is-over{border-color:var(--forest);background:#fff}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-txt{flex:1;min-width:0}
.drop-txt b{display:block;font-size:14px;font-weight:560;margin-bottom:3px}
.drop-txt span{font-size:12.5px;color:var(--ink-soft)}
.drop-clear{
  position:relative;z-index:1;flex:none;
  padding:7px 13px;border-radius:100px;font-size:12.5px;
  border:1px solid rgba(196,99,63,.4);color:var(--clay);
}
.drop-clear:hover{background:var(--clay);color:#fff}

/* ══ 13 · KONTO / DASHBOARD ════════════════════════════════ */
.acct{padding:clamp(30px,4vw,52px) 0 clamp(80px,11vw,130px)}

.acct-bar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:18px 22px;border-radius:20px;
  background:var(--ivory-warm);border:1px solid rgba(18,41,31,.1);
  margin-bottom:26px;
}
.acct-id{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.acct-id b{display:block;font-size:19px;letter-spacing:-.02em}
.acct-id span{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:26px;border-bottom:1px solid rgba(18,41,31,.12)}
.tab{
  position:relative;padding:12px 18px;font-size:14.5px;
  color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t-fast) var(--e-soft),border-color var(--t-fast) var(--e-soft);
}
.tab:hover{color:var(--forest)}
.tab.is-on{color:var(--forest);border-bottom-color:var(--forest);font-weight:560}
.tab b{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:100px;
  background:rgba(18,41,31,.1);font-size:11px;font-weight:600;
}
.pane{display:none}
.pane.is-on{display:block}

/* Stat-Kacheln */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px);margin-bottom:22px}
.tile{
  padding:20px 22px;border-radius:18px;
  background:var(--ivory-warm);border:1px solid rgba(18,41,31,.1);
}
.tile-k{
  display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;
}
/* Proportionale Ziffern: tabular-nums lässt große Zahlen locker wirken */
.tile-v{display:block;font-size:clamp(26px,3.2vw,38px);font-weight:640;letter-spacing:-.04em;line-height:1}
.tile-s{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-soft)}

/* ══ 14 · CHARTS ═══════════════════════════════════════════
   Marken-Chrome, aber Datenfarben nach Regel:
   geordnete Klassen → einfarbige Ordinal-Rampe,
   nominale Kategorien → eine Farbe für alle Balken.       */
.viz{
  --g1:#12291F;   /* Klasse A — 13,7:1 auf Ivory */
  --g2:#3D6350;   /* Klasse B —  6,0:1 */
  --g3:#7D9483;   /* Klasse C —  2,9:1, über Ordinal-Grenze 2:1 */
  --bar:#2A4A38;
  --grid:rgba(18,41,31,.12);
  --axis:rgba(18,41,31,.2);
}
.vgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(14px,2vw,20px)}
.card{
  padding:22px 24px 24px;border-radius:20px;
  background:var(--ivory-warm);border:1px solid rgba(18,41,31,.1);
}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:20px}
.card-head h3{font-size:16px;letter-spacing:-.02em}
.card-head p{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.card-toggle{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);padding:5px 10px;border-radius:100px;border:1px solid rgba(18,41,31,.18);
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft);
}
.card-toggle:hover{background:var(--forest);color:var(--ivory);border-color:var(--forest)}

/* Balken: dünn, Datenende 4px gerundet, 2px Fläche zwischen den Marken */
.bars{display:grid;gap:14px}
.bar-row{display:grid;grid-template-columns:minmax(96px,auto) 1fr auto;align-items:center;gap:14px;min-height:26px}
.bar-key{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.3}
.bar-key i{
  flex:none;width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;font-style:normal;
  font-size:11px;font-weight:680;color:var(--ivory);
}
.bar-track{position:relative;height:14px;background:rgba(18,41,31,.07);border-radius:0 4px 4px 0}
.bar-fill{
  height:100%;width:100%;border-radius:0 4px 4px 0;background:var(--bar);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-slow) var(--e-out);
}
.bar-val{font-size:13.5px;font-variant-numeric:tabular-nums;min-width:2.5em;text-align:right}
.bar-row:hover .bar-fill{filter:brightness(1.12)}

/* Preisspanne */
.range{padding:6px 0 2px}
.range-track{position:relative;height:14px;background:rgba(18,41,31,.07);border-radius:7px;margin-bottom:14px}
.range-span{position:absolute;top:0;bottom:0;background:var(--bar);border-radius:7px;min-width:4px}
.range-med{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--forest);border-radius:2px}
.range-med::after{
  content:attr(data-l);position:absolute;left:50%;top:-20px;translate:-50% 0;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;color:var(--forest);white-space:nowrap;
}
.range-scale{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.range-scale b{display:block;color:var(--ink);font-size:14px;font-weight:560}

/* Tabellen-Zwilling */
.vtable{display:none;width:100%;border-collapse:collapse;margin-top:4px}
.vtable.is-on{display:table}
.vtable th,.vtable td{
  text-align:left;padding:9px 10px;font-size:13.5px;
  border-bottom:1px solid rgba(18,41,31,.1);
}
.vtable th{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.vtable td:last-child,.vtable th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.plot.is-off{display:none}

/* Tooltip */
.tip{
  position:fixed;z-index:9300;pointer-events:none;
  padding:9px 13px;border-radius:10px;
  background:var(--forest);color:var(--ivory);
  font-size:12.5px;white-space:nowrap;
  opacity:0;transform:translate(-50%,-118%);
  transition:opacity var(--t-micro) var(--e-soft);
  box-shadow:0 10px 30px -12px rgba(8,21,15,.6);
}
.tip.is-on{opacity:1}
.tip b{color:var(--gold)}

/* Hinweis auf fehlendes Backend */
.vnote{
  margin-top:20px;padding:16px 18px;border-radius:14px;
  background:rgba(18,41,31,.05);border:1px solid rgba(18,41,31,.1);
  font-size:13px;color:var(--ink-soft);
}
.vnote b{color:var(--forest)}

/* Speicheranzeige */
.storage{display:grid;gap:8px;margin-top:20px}
.storage-top{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.storage-track{height:6px;border-radius:3px;background:rgba(18,41,31,.1);overflow:hidden}
/* Füllstand über scaleX statt width: width löst Layout, Paint und
   Composite aus, transform nur den Composite auf der Grafikkarte. */
.storage-fill{height:100%;width:100%;background:var(--forest);border-radius:3px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-slow) var(--e-out)}
.storage-fill.warn{background:var(--amber)}
.storage-fill.crit{background:var(--clay)}

/* ══ 15 · PRODUKTVERWALTUNG ════════════════════════════════ */
.pman-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.pman-head h3{font-size:19px}
.plist{display:grid;gap:10px}
.prow{
  display:grid;grid-template-columns:64px 1fr auto auto;align-items:center;gap:16px;
  padding:12px 16px;border-radius:14px;
  background:var(--ivory-warm);border:1px solid rgba(18,41,31,.1);
}
.prow-img{
  width:64px;height:64px;border-radius:10px;overflow:hidden;
  background:var(--forest);display:grid;place-items:center;
}
.prow-img img{width:100%;height:100%;object-fit:cover}
.prow-img .logo{width:62%;opacity:.55}
.prow-main{min-width:0}
.prow-main b{display:block;font-size:15px;letter-spacing:-.01em;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow-meta{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.prow-g{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
  font-size:11px;font-weight:680;color:var(--ivory);
}
.prow-price{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.prow-act{display:flex;gap:7px}
.prow-act button{
  padding:7px 12px;border-radius:100px;font-size:12.5px;
  border:1px solid rgba(18,41,31,.2);color:var(--ink-soft);
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft),border-color var(--t-fast) var(--e-soft);
}
.prow-act button:hover{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
.prow-act button.del{border-color:rgba(196,99,63,.4);color:var(--clay)}
.prow-act button.del:hover{background:var(--clay);color:#fff;border-color:var(--clay)}

/* Produkt-Formular als Panel */
.pform{
  display:none;margin-bottom:22px;padding:24px;border-radius:20px;
  background:var(--ivory-warm);border:1px solid rgba(18,41,31,.14);
}
.pform.is-on{display:block}
.pform h4{font-size:17px;margin-bottom:18px}
.pform .frow.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gradepick{display:flex;gap:8px}
.gradepick label{
  flex:1;position:relative;padding:12px 8px;border-radius:12px;text-align:center;cursor:pointer;
  border:1px solid rgba(18,41,31,.18);background:var(--ivory);
  transition:border-color var(--t-fast) var(--e-soft),background var(--t-fast) var(--e-soft);
}
.gradepick input{position:absolute;opacity:0;pointer-events:none}
.gradepick b{display:block;font-size:22px;font-weight:680;letter-spacing:-.03em;line-height:1}
.gradepick span{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-soft)}
.gradepick label:has(input:checked){border-color:var(--forest);background:#fff;box-shadow:0 0 0 2px rgba(18,41,31,.1)}
.gradepick label:has(input:focus-visible){outline:2px solid var(--forest);outline-offset:2px}

/* Begründung der Zustandsklasse ─────────────────────────────
   Sitzt direkt unter der Klassenwahl und färbt sich mit ihr.
   Die Kante links ist der sichtbare Bezug zur getroffenen Wahl. */
.gradewhy{
  margin:0 0 16px;padding:17px 18px 18px;border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--gc,var(--sage));
  transition:border-color var(--t-fast) var(--e-soft);
}
.gradewhy[data-grade="a"]{--gc:var(--sage)}
.gradewhy[data-grade="b"]{--gc:var(--amber)}
.gradewhy[data-grade="c"]{--gc:var(--clay)}

.gradewhy-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:12px}
.gradewhy-badge{
  flex:none;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--gc,var(--sage));color:#0A0C0B;
  font-size:17px;font-weight:680;letter-spacing:-.03em;
}
.gradewhy-head b{display:block;font-size:13.5px;color:#EDF0EF;margin-bottom:3px}
.gradewhy-head p{font-size:12.5px;line-height:1.5;color:#9BA3A0;margin:0}

.gradewhy-crit{
  display:flex;flex-wrap:wrap;gap:7px 15px;
  margin:0 0 15px;padding:0;list-style:none;
}
.gradewhy-crit li{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:#9BA3A0;margin:0;
}
.gradewhy-crit svg{width:12px;height:12px;flex:none;color:var(--gc,var(--sage))}

/* Textbausteine: gestrichelt, solange ungenutzt — sie sind ein
   Angebot, keine Schaltfläche mit Gewicht. */
.gradewhy-sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.gradewhy-sug .sug{
  padding:6px 11px;border-radius:100px;
  font-size:11.5px;line-height:1.3;text-align:left;
  border:1px dashed rgba(255,255,255,.2);color:#9BA3A0;
  transition:transform var(--t-micro) var(--e-out),
             background var(--t-fast) var(--e-soft),
             color var(--t-fast) var(--e-soft),
             border-color var(--t-fast) var(--e-soft);
}
.gradewhy-sug .sug::before{content:"+ ";opacity:.6}
.gradewhy-sug .sug:hover{
  border-style:solid;border-color:var(--gc,var(--sage));
  background:rgba(255,255,255,.06);color:#EDF0EF;
}
.gradewhy-sug .sug:active{transform:scale(.97)}

.gradewhy-foot{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;margin-top:8px;
}
.gradewhy-foot .hint{flex:1}
.counter.is-short{color:var(--amber)}

@media (max-width:560px){
  .gradewhy-foot{flex-direction:column;gap:4px}
  .gradewhy-crit{gap:6px 12px}
}

/* ══ 15b · PRODUKTDETAIL ═══════════════════════════════════
   Der Kopfbereich übernimmt hier NICHT den Farbton des Händlers —
   ein Produkt ist keine Marke. Er läuft in den Seitenhintergrund
   über, damit der Titel frei steht. */
.pphero{
  position:relative;
  padding:calc(var(--nav-h) + clamp(30px,5vw,54px)) 0 clamp(14px,2.4vw,24px);
  background:transparent;
}
.pphero .mhero-sub{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;
}
.pphero h1{
  font-size:clamp(30px,5.2vw,60px);line-height:1.02;
  letter-spacing:-.035em;color:#F1F3F2;max-width:16ch;
}

/* ── Zweispaltiges Detail ──────────────────────────────────
   Links das Bild, rechts Preis, Zustand, Daten. Die Begründung
   des Händlers steht ungekürzt im Zustandsblock — dafür wurde
   sie schließlich verlangt. */
.pp-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,52px);align-items:start;
  margin-top:clamp(18px,3vw,28px);
}
@media (max-width:900px){ .pp-grid{grid-template-columns:1fr} }

.pp-visual{
  position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
}
.pp-visual .pcard-logo{width:44%;opacity:.09}
.pp-visual .prod{width:52%;height:52%;color:var(--sage);opacity:.5}
.pp-visual .pcard-photo{position:absolute;inset:0}
.pp-visual .pcard-photo img{width:100%;height:100%;object-fit:cover}
.pp-visual .pgrade{left:18px;top:18px}

.pp-side{display:grid;gap:clamp(16px,2.4vw,22px)}

.pp-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pp-price b{font-size:clamp(30px,4.4vw,42px);font-weight:660;letter-spacing:-.04em;color:#F1F3F2}
.pp-price s{font-size:17px;color:#9BA3A0;opacity:.75}
.pp-save{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;
  background:rgba(125,148,131,.16);border:1px solid rgba(125,148,131,.4);color:var(--sage);
}

/* Der Zustandsblock ist derselbe wie im Haendlerformular —
   gleiche Kriterien, gleiche Optik, damit beide Seiten dasselbe lesen. */
.pp-gradewhy{margin:0}
.pp-note{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
}
.pp-note-label{
  display:block;margin-bottom:6px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gc,var(--sage));
}
.pp-note p{font-size:14.5px;line-height:1.62;color:#C4CBC8;margin:0}
.pp-note em{color:#9BA3A0}

.pp-facts{margin:0;display:grid;gap:0}
.pp-facts>div{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.08);
}
.pp-facts>div:last-child{border-bottom:0}
.pp-facts dt{font-size:13.5px;color:#9BA3A0;margin:0}
.pp-facts dd{font-size:13.5px;color:#E4E9E6;margin:0;text-align:right}

.pp-merchant{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:16px;
  background:rgba(14,32,24,.6);border:1px solid rgba(255,255,255,.1);
}
.pp-merchant .avatar{width:46px;height:46px;flex:none}
.pp-m-txt{flex:1;min-width:0}
.pp-m-txt b{display:block;font-size:14.5px;color:#F1F3F2}
.pp-m-txt span{display:block;font-size:12px;color:#9BA3A0;margin-top:2px}
.pp-m-foot{margin-top:5px;font-size:11.5px;color:#9BA3A0}
.pp-m-foot b{display:inline;color:var(--gold)}

.pp-hint{font-size:12.5px;color:#9BA3A0;line-height:1.6}
.pp-hint a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* Produktkarte: sichtbar anklickbar */
.pcard{cursor:pointer}
.pcard h3 a,.pcard-link{color:inherit;text-decoration:none}
.pcard:hover h3 a{color:var(--gold)}
.pcard-more{
  margin-left:auto;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#9BA3A0;
  opacity:0;translate:-6px 0;
  transition:opacity var(--t-fast) var(--e-soft),translate var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft);
}
.pcard:hover .pcard-more,.pcard:focus-within .pcard-more{opacity:1;translate:0 0;color:var(--gold)}
.pcard-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
@media (hover:none){ .pcard-more{opacity:1;translate:0 0} }

/* ══ 16 · HÄNDLERSEITE ═════════════════════════════════════ */
.mhero{
  position:relative;padding:calc(var(--nav-h) + 54px) 0 clamp(36px,5vw,60px);
  color:var(--ivory);overflow:hidden;
  background:linear-gradient(150deg,var(--c1,#2A4A38),var(--c2,#08150F));
}
.mhero[data-tone="1"]{--c1:#2A4A38;--c2:#0E2219}
.mhero[data-tone="2"]{--c1:#5C5340;--c2:#241F16}
.mhero[data-tone="3"]{--c1:#5A3F32;--c2:#231811}
.mhero[data-tone="4"]{--c1:#2F4A55;--c2:#131F25}
.mhero[data-tone="5"]{--c1:#6B4C2E;--c2:#2A1C0F}
.mhero .hologrid{opacity:.35}
.mhero-in{position:relative;z-index:1;display:flex;align-items:flex-end;gap:clamp(20px,3vw,34px);flex-wrap:wrap}
.mhero .avatar{box-shadow:0 0 0 5px rgba(244,241,232,.12)}
.mhero-txt{flex:1;min-width:260px}
.mhero h1{font-size:clamp(34px,6vw,72px);margin-bottom:12px}
.mhero-sub{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.mhero-desc{color:rgba(244,241,232,.68);max-width:56ch;font-size:clamp(14.5px,1.4vw,16.5px)}
.mhero-logo{position:absolute;right:-5%;top:44%;translate:0 -50%;width:min(400px,42vw);color:var(--ivory);opacity:.08;z-index:0}
.mstats{display:flex;gap:clamp(20px,4vw,48px);flex-wrap:wrap;margin-top:26px;position:relative;z-index:1}
.mstat b{display:block;font-size:clamp(22px,3vw,32px);font-weight:640;letter-spacing:-.03em;line-height:1}
.mstat span{display:block;margin-top:6px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--sage)}
.backlink{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.backlink svg{width:15px;height:15px;transition:transform var(--t-fast) var(--e-soft)}
.backlink:hover{color:var(--forest)}
.backlink:hover svg{transform:translateX(-3px)}

/* Verkäufer-Zeile auf der Produktkarte */
.pcard-m{display:flex;align-items:center;gap:7px}
.pcard-m .dot{width:15px;height:15px;border-radius:50%;overflow:hidden;background:var(--forest);flex:none}
.pcard-m .dot img{width:100%;height:100%;object-fit:cover}
.pcard-m a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(18,41,31,.25)}
.pcard-m a:hover{color:var(--forest);text-decoration-color:currentColor}

/* ══ 10 · RESPONSIVE ═══════════════════════════════════════ */
@media (max-width:1080px){
  .progress{display:none}
  .mission-cols{margin-left:0}
  .formgrid{grid-template-columns:1fr}
  .preview{position:static}
}

@media (max-width:880px){
  body{font-size:16px}
  /* Mobile: kürzere Scroll-Distanz, weniger Objekte, kleinere Marken */
  .hero{height:205svh}
  /* Inline gesetzte --w schlagen jede Regel, also über den
     Skalierungsfaktor verkleinern statt über die Breite. */
  .flyfield{--sf:.76}
  .fi.opt{display:none}
  .bgfx-orb{filter:blur(54px)}
  .nav-burger{display:grid}
  .nav-links{
    position:fixed;left:0;right:0;top:0;
    flex-direction:column;gap:0;
    padding:calc(var(--nav-h) + 24px) var(--gut) 30px;
    background:var(--forest);color:var(--ivory);
    transform:translateY(-101%);transition:transform var(--t-base) var(--e-inout);
  }
  .nav.is-open .nav-links{transform:translateY(0)}
  .nav-links a{font-size:22px;padding:15px 0;opacity:.9;border-bottom:1px solid rgba(244,241,232,.12)}
  .nav-links a::after{display:none}
  /* Der Kontochip bleibt — er ist der Einstieg zum Anmelden.
     Nur der Händler-Aufruf weicht dem Burger-Menü. */
  .nav-cta{display:none}
  .nav-acct{padding:9px 14px 9px 30px;font-size:12.5px}
  .nav-acct::before{left:12px}
  /* Messenger: Liste über den Verlauf statt daneben */
  .msg-shell{grid-template-columns:1fr;height:auto}
  .msg-side{border-right:0;border-bottom:1px solid rgba(125,148,131,.18)}
  .msg-list{max-height:190px}
  .msg-log{height:300px}
  .grade-card{grid-template-columns:1fr;gap:26px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .cta-grid{grid-template-columns:1fr}
  .mission-cols{grid-template-columns:1fr;gap:20px}
  .sig{height:180svh}
  .foot-in{flex-direction:column;align-items:flex-start;gap:12px}
  .frow.two{grid-template-columns:1fr}
  .toolbar-in{gap:12px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .vgrid{grid-template-columns:1fr}
  .pform .frow.three{grid-template-columns:1fr}
  .prow{grid-template-columns:52px 1fr auto;row-gap:12px}
  .prow-img{width:52px;height:52px}
  .prow-act{grid-column:1/-1}
  .mhero-in{align-items:flex-start}
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap}
}

@media (max-width:560px){
  .hero-h1{font-size:clamp(36px,10.5vw,56px)}
  .grade-picker{gap:8px}
  .grade-key{font-size:clamp(38px,15vw,64px);border-radius:14px}
  .hud-tl,.hud-br{display:none}
  .mgrid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{padding:16px 16px}
  .bar-row{grid-template-columns:minmax(74px,auto) 1fr auto;gap:10px}
  .gradepick{flex-direction:column}
  .acct-bar{padding:14px 16px}
}

@media (hover:none){
  .mcard:hover,.pcard:hover{transform:none;box-shadow:none}
  .pcard:hover .prod,.grade-visual:hover .grade-product{transform:none}
}

/* ══ 11 · REDUCED MOTION ═══════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .boot{display:none !important}
  .sig{height:auto;padding:88px 0}
  .sig-stick{position:static;height:auto;gap:26px}
  .sig-word,.sig-stack,.sig-logo{grid-area:auto}
  .sig-word{transform:none;font-size:clamp(110px,28vw,300px);opacity:1}
  .sig-logo{opacity:1;transform:none;width:min(340px,60vw)}
  .sig-first{display:none}
  .sig-second{opacity:1;transform:none}
  .hologrid,.bgfx-scan,.hud-bl i::after{display:none}
  /* Hero kollabiert zu einem ruhigen, statischen Block */
  .hero{height:auto}
  .hero-stick{position:static;height:auto;overflow:visible;padding-bottom:40px}
  .hero-copy{position:static;transform:none;opacity:1;padding:calc(var(--nav-h) + 40px) var(--gut) 30px}
  .flyfield{display:none}
  .scbox{position:static;translate:none;margin:0 auto}
  .scbox-body{transform:none;opacity:1}
  .scbox-flap.l{transform:rotate(-52deg)}
  .scbox-flap.r{transform:rotate(52deg)}
  .bgfx-orb,.bgfx-grid::before{animation:none}
  .cursor,.pt{display:none !important}
  .progress{opacity:1}
  .logo-spin{animation:none}
  .preview{position:static}
}

/* ══ 19 · MARKE — ABSCHLUSS ════════════════════════════════
   Steht bewusst am Dateiende. Die Träger der Bildmarke werden
   weiter oben noch auf Forest gesetzt; da CSS bei gleicher
   Spezifität die letzte Regel gewinnt, wird das hier korrigiert.
   Die freigestellte Box ist dunkelgrün und braucht helle Flächen. */
/* Die Marke steht überall frei. Keine Kacheln, keine Flächen —
   nur die freigestellte Box. Wo sie auf Dunkel sitzt, trennt ein
   Schein entlang der Kontur statt eines Rechtecks dahinter. */
.brand .logo{background-color:transparent;border-radius:0;padding:0;box-shadow:none}
.empty .logo{background-color:transparent;border-radius:0;padding:0;width:104px;opacity:1}
.done .logo{background-color:transparent;padding:0;border-radius:0}
.boot .logo,.pt .logo,.sig-logo{background-color:transparent;border-radius:0}

/* Profil- und Händlerbilder: helle Scheibe als Träger.
   Hier ist die Fläche gewollt — es ist ein Platzhalter für ein
   Foto, kein frei stehendes Markenzeichen wie in der Kopfzeile. */
.avatar,.prow-img,.msg-ava{background:#EFEADF}
.mcard-avatar{background:#F2EEE4}
.avatar .logo,.msg-ava .logo,.prow-img .logo,
.mcard-avatar .logo,.drop .logo{opacity:1}
.avatar .logo{width:74%}
.mcard-avatar .logo{width:66%}
.msg-ava .logo{width:70%}
.prow-img .logo{width:72%}

/* Auf dunklem Grund trennt ein Schein entlang der echten Kontur,
   statt ein Rechteck dahinterzulegen. */
.nav.on-dark .brand .logo,
.boot .logo,.pt .logo,.sig-logo{
  filter:drop-shadow(0 0 1px rgba(255,255,255,.65)) drop-shadow(0 3px 16px rgba(255,255,255,.22));
}
.brand:hover .logo{transform:translateY(-1px);box-shadow:none}

/* ══ 20 · DUNKLE OBERFLÄCHE ════════════════════════════════
   Die Seite steht jetzt komplett auf Schwarz. Flächen sind
   durchscheinend, damit Blasen und Wellen dahinter sichtbar
   bleiben — eine deckende Karte würde den Hintergrund tot machen.

   Steht am Dateiende, weil die hellen Ausgangswerte weiter oben
   stehen und bei gleicher Spezifität die letzte Regel gewinnt. */
body{background:#08150F;color:#E4E9E6}
body.landing{background:#08150F}
/* .bgfx ist fixed mit z-index:0. Positionierte Elemente malen über
   statischem Inhalt — Abschnitte müssen deshalb angehoben werden.
   Die Regel griff nur bei direkten Kindern von <main>. Produkt- und
   Händlerseite verpacken ihre Abschnitte aber in einen <div> für den
   „nicht gefunden"-Zustand; die lagen damit unter dem Hintergrund
   und wurden von dessen Vignette (bis 78 % Schwarz am Rand)
   verschluckt. Eine Ebene tiefer mitnehmen. */
main > section,main > div > section,.foot{position:relative;z-index:1}

h1,h2,h3,h4,legend,.sec-h2,.tile-v,.mcard-foot b{color:#F1F3F2}
p,dd,li{color:#A6AEAB}
.eyebrow{color:var(--gold)}
.ink-soft,.mcard-cat,.mcard-desc,.pcard-note,.tile-s,.hint,
.results-meta,.bar-val,.range-scale,.prow-meta,.foot small,
/* .backlink stand auf var(--ink-soft) — die Variable wird hier nicht
   umgesetzt, nur die gleichnamige Klasse. Ergebnis war dunkelgrau
   auf fast schwarzem Grund. */
.backlink{color:#9BA3A0}
.backlink:hover{color:var(--gold)}

/* Kopfzeile und Fußzeile */
.nav{background:rgba(8,21,15,.74);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-links a,.foot-nav a{color:#B9C0BD}
.nav-links a:hover,.nav-links a.is-here,.foot-nav a:hover{color:#fff}
.foot{background:transparent;border-top:1px solid rgba(255,255,255,.08)}

/* ── Sprachumschalter (rechts oben in der Fußzeile) ──────────
   Sitzt bewusst nicht in .foot-in, sondern absolut in der Ecke —
   sonst müsste jede der acht Fußzeilen umgebaut werden. */
.foot{position:relative}
.langsel{position:absolute;right:var(--gut);top:18px;z-index:3}
.langsel-btn{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:100px;
  border:1px solid rgba(255,255,255,.16);color:#B9C0BD;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  transition:border-color var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft),background var(--t-fast) var(--e-soft);
}
.langsel-btn:hover{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.05)}
.langsel-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.langsel-globe{width:15px;height:15px;flex:none}
.langsel-chev{width:12px;height:12px;flex:none;opacity:.7;transition:transform var(--t-fast) var(--e-soft)}
.langsel.is-open .langsel-chev{transform:rotate(180deg)}

.langsel-menu{
  position:absolute;right:0;bottom:calc(100% + 8px);min-width:172px;
  display:grid;padding:6px;border-radius:14px;
  background:rgba(10,26,18,.97);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.8);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity var(--t-fast) var(--e-soft),transform var(--t-fast) var(--e-soft);
}
.langsel.is-open .langsel-menu{opacity:1;transform:none;pointer-events:auto}
.langsel-menu button{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:9px;text-align:left;
  font-size:13.5px;color:#C4CBC8;
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft);
}
.langsel-menu button i{
  font-family:var(--f-mono);font-style:normal;font-size:9.5px;letter-spacing:.12em;
  color:#8E9793;min-width:20px;
}
.langsel-menu button:hover{background:rgba(255,255,255,.07);color:#fff}
.langsel-menu button.is-on{color:var(--gold)}
.langsel-menu button.is-on i{color:var(--gold)}

/* Auf schmalen Schirmen steht die Fußzeile ohnehin gestapelt —
   dort läuft der Umschalter im Fluss mit statt in der Ecke. */
@media (max-width:720px){
  .langsel{position:static;margin:0 auto 18px;width:max-content}
  .langsel-menu{bottom:auto;top:calc(100% + 8px);right:auto;left:50%;translate:-50% 0}
}

/* Sections, die auf Ivory standen */
.grades,.mpreview,.stats,.cta,.results,.acct,.formwrap,.phero{background:transparent}
.toolbar{background:rgba(9,23,17,.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}

/* Karten und Panels — grünstichiges Dunkel, damit sie zum
   Hintergrund gehören statt grau darüberzuliegen. */
.mcard,.pcard,.tile,.card,.prow,.pform,.fnote,.acct-bar,.owned,
.drop,.msg-note,.vnote,.storage,.authwrap .pane{
  background:rgba(14,32,24,.6);
  border-color:rgba(255,255,255,.1);
}
.mcard:hover,.pcard:hover{border-color:rgba(255,255,255,.22);box-shadow:0 18px 46px -20px rgba(0,0,0,.8)}
.mcard-body,.pcard-body{background:transparent}
.pcard-visual{background:rgba(255,255,255,.04)}
.grade-card,.grade-visual{background:rgba(14,32,24,.55);border-color:rgba(255,255,255,.1)}
.grade-key{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#E4E7E6}
.grade-key.is-active{background:var(--gold);color:#0A0C0B}
.meter-track,.bar-track,.range-track,.storage-track{background:rgba(255,255,255,.08)}

/* Eingabefelder */
.field input,.field select,.field textarea,.search input,.sortsel,
.msg-form input{
  background:rgba(6,17,12,.75);
  border-color:rgba(255,255,255,.14);
  color:#E9ECEB;
}
.field input::placeholder,.field textarea::placeholder,
.search input::placeholder{color:rgba(230,235,233,.34)}
/* Beim Fokus stand hier ein background:#fff aus der hellen
   Fassung. Meine Regel setzte nur Rahmen und Schein — den
   Hintergrund musste ich mit überschreiben. */
.field input:focus,.field select:focus,.field textarea:focus,
.search input:focus{
  border-color:var(--gold);
  background:rgba(9,24,17,.9);
  box-shadow:0 0 0 3px rgba(192,154,107,.16);
}
/* Fehlerhafte Felder: getönt statt aufgehellt */
.field.is-bad input,.field.is-bad textarea,.field.is-bad select{
  background:rgba(196,99,63,.14);border-color:var(--clay);
}
/* Aufklappmenüs zeichnet das Betriebssystem — die Einträge
   brauchen ihre Farben separat, sonst weiß auf weiß. */
.field select option,.sortsel option{background:#0E2018;color:#E4E9E6}

/* Zustandswahl im Produktformular stand auf Weiß */
.gradepick label{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.gradepick label:has(input:checked){
  background:rgba(192,154,107,.14);border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(192,154,107,.18);
}
.gradepick b{color:#F1F3F2}
.gradepick span{color:#939C99}

/* Browser-Autovervollständigung erzwingt sonst einen hellen
   Grund — der Innenschatten überdeckt ihn zuverlässig. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill,
.search input:-webkit-autofill{
  -webkit-text-fill-color:#E9ECEB;
  -webkit-box-shadow:0 0 0 1000px #0A1A12 inset;
  box-shadow:0 0 0 1000px #0A1A12 inset;
  caret-color:#E9ECEB;
  transition:background-color 99999s ease-in-out 0s;
}
.field label{color:#C4CBC8}
.chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#B9C0BD}
.chip:hover{color:#fff;border-color:rgba(255,255,255,.28)}
.chip.is-on{background:var(--gold);color:#0A0C0B;border-color:var(--gold)}
.checkrow{color:#A6AEAB}

/* Schaltflächen: Forest auf Schwarz trägt nicht mehr */
.btn-solid{background:var(--ivory);color:#0A0C0B}
.btn-solid:hover{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.btn-quiet,.btn-ghost{color:#CDD3D1;border-color:rgba(255,255,255,.2)}
.btn-quiet:hover,.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* Reiter, Tabellen, Zeilen */
.tabs,.vtable th,.vtable td,.owned-row,.prow{border-color:rgba(255,255,255,.1)}
.tab{color:#98A09D}
.tab:hover{color:#E4E7E6}
.tab.is-on{color:#fff;border-bottom-color:var(--gold)}
.tab b{background:rgba(255,255,255,.12);color:#E4E7E6}
.card-toggle,.prow-act button{color:#9BA3A0;border-color:rgba(255,255,255,.18)}
.card-toggle:hover,.prow-act button:hover{background:var(--ivory);color:#0A0C0B;border-color:var(--ivory)}
.prow-img,.avatar,.msg-ava{background:rgba(255,255,255,.07)}
.mcard-avatar{background:rgba(255,255,255,.1)}

/* Diagramme: auf dunkler Fläche kehrt sich die Rampe um.
   A ist der hellste Wert, C der zurückgenommenste.
   A/B/C ist eine Rangfolge, also EIN Farbton (161,8°) und nur
   die Helligkeit trägt die Bedeutung — geprüft mit
   validate_palette.js: Farbtonspanne 1°, Helligkeitsstufen
   gleichmäßig, schwächster Wert 4,08:1 auf der Kartenfläche. */
.viz{--g1:#BFD8CA;--g2:#93AB9E;--g3:#6A8174;--bar:#8FA79A;
     --grid:rgba(255,255,255,.12);--axis:rgba(255,255,255,.2)}
.bar-key i{color:#0A0C0B}
.range-med{background:var(--gold)}
.range-med::after{color:var(--gold)}
.range-scale b{color:#E4E7E6}

/* Assistent */
/* Der Assistent faerbt sich selbst.

   Hier standen sechs Regeln, die ein DUNKLES Panel annahmen
   (heller Text, dunkler Grund). assist.js baut das Panel aber
   hell — und weil es sein Stylesheet zur Laufzeit anhaengt,
   gewinnt es bei allem, was es selbst erklaert.

   Uebrig blieb genau die eine Eigenschaft, die assist.js NICHT
   erklaerte: die Textfarbe der Bot-Blase. Die kam deshalb von
   hier — hell — und stand auf cremefarbener Blase. Praktisch
   unlesbar, am 2026-09-04 im Testbild bestaetigt.

   Zwei Quellen fuer dieselben Farben sind die Ursache. Der
   Assistent besitzt sein Aussehen jetzt allein; die Textfarben
   stehen in assist.js neben dem Layout. */

/* Reste heller Flächen */
.toast{background:rgba(14,32,24,.96);border:1px solid rgba(255,255,255,.14);color:#E4E9E6}
/* Die Grundregel färbt .empty h3 mit --forest — dunkelgrün auf
   dunklem Grund war unlesbar. Fiel erst auf, als die Beispieldaten
   weg waren und der Leerzustand überhaupt erschien. */
.empty{color:#9BA3A0}
.empty h3{color:#E9E4D7}
.done p{color:#A6AEAB}
.sheet-panel{background:rgba(11,26,19,.96)}


/* ── Nachbesserungen ──────────────────────────────────────────
   Drei Stellen, an denen ältere Regeln höhere Spezifität haben
   und meinen Umbau überstimmt haben. */

/* 1 · Kopfzeile wurde beim Scrollen weiß.
   .nav.is-stuck schlägt .nav — deshalb hier auf gleicher Stufe. */
.nav.is-stuck,.nav.on-dark.is-stuck{
  background:rgba(8,21,15,.86);
  box-shadow:0 1px 0 rgba(255,255,255,.09);
}
.nav,.nav.on-dark,.nav.is-stuck{color:#E4E9E6}

/* 2 · Zustände: Hierarchie war umgekehrt. Vorher waren die
   inaktiven Buchstaben zurückgenommen und der aktive kräftig —
   ich hatte alle drei gleich hell gemacht. */
.grade-key{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.24)}
.grade-key:hover{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.26)}
.grade-key.is-active{background:rgba(192,154,107,.14);border-color:var(--gold);color:var(--gold-bright)}

/* Der weiße Lichtschein über dem Produkt war für Ivory gedacht
   und leuchtete auf Dunkel als heller Fleck. */
.grade-visual::after{background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.07),transparent 62%)}
.grade-badge{background:var(--gold);color:#0A140E}
.grade-info dl div{border-top-color:rgba(255,255,255,.12)}
.grade-info dt,.meter-top span{color:#939C99}
.grade-info dd{color:#DDE3E0}
.meter-top b{color:var(--gold)}
.meter-track i.on{background:var(--gold)}
.checks div{color:#A6AEAB}
.checks div svg{color:var(--gold)}
.checks div.off{color:#79837F}
.checks div.off svg{color:#7C8683}

/* 3 · „Für Kunden" blieb als weiße Kachel stehen. */
.cta-side{background:rgba(14,32,24,.6);border:1px solid rgba(255,255,255,.1)}
.cta-side h3{color:#F1F3F2}
.cta-side > span > p:not(.eyebrow){color:#A6AEAB}
.cta-b2b{background:rgba(192,154,107,.11);border-color:rgba(192,154,107,.32)}
.cta-b2b > span > p:not(.eyebrow){color:#BFC6C2}

/* Kennzahlen und Preise, die noch auf Forest standen */
.stat b{color:#F1F3F2}
.stat i{color:#939C99}
.pcard-price b,.prow-price,.mcard-foot b{color:#F1F3F2}
.pcard-price s{color:#7E8784}
.pcard-m a{color:#BFC6C2;text-decoration-color:rgba(255,255,255,.28)}
.pcard-m a:hover{color:#fff}
.results-meta b{color:var(--gold)}

/* ══ 21 · BEWEGUNGSHANDWERK ══════════════════════════════════════
   Nachgezogen anhand der Animationsstandards von Emil Kowalski.
   Der Prüfdurchlauf fand drei Lücken:
     1. 91 drückbare Elemente, davon eines mit Druckfeedback
     2. 12 Hover-Bewegungen, keine gegen Touchscreens abgesichert
     3. Reduzierte Bewegung schaltete auch die Rückmeldung ab
   Steht am Dateiende, weil es frühere Regeln überschreiben muss.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Druckfeedback ─────────────────────────────────────────
   Jedes drückbare Element quittiert den Druck. 0.97 ist der Wert,
   den man spürt, ohne dass etwas wackelt — darunter wirkt es
   billig, darüber merkt man es nicht. Der Druck läuft schnell
   (140ms), damit die Hand nicht auf die Oberfläche wartet. */
.btn,.tab,.chip,.card-toggle,.drop-clear,.nav-burger,.sheet-close,
.prow-act button,.msg-form button,.ai-chips button,.gradepick label{
  transition:transform var(--t-micro) var(--e-out),
             background var(--t-fast) var(--e-soft),
             color var(--t-fast) var(--e-soft),
             border-color var(--t-fast) var(--e-soft),
             box-shadow var(--t-fast) var(--e-soft),
             opacity var(--t-fast) var(--e-soft);
}
.btn:active,.tab:active,.chip:active,.card-toggle:active,
.drop-clear:active,.nav-burger:active,.sheet-close:active,
.prow-act button:active,.ai-chips button:active,
.gradepick label:active{transform:scale(.97)}

/* Der Absende-Knopf im Messenger sprang auf .94 — zu weit. */
.msg-form button:active{transform:scale(.97)}

/* Karten sind ebenfalls anklickbar, brauchen aber weniger,
   weil sie große Flächen sind: große Dinge bewegen sich weniger. */
.mcard:active,.pcard:active{transform:scale(.99)}

/* ── 2 · Hover gehört echten Zeigegeräten ──────────────────────
   Auf einem Touchscreen löst ein Tippen ein Hover aus, das
   danach hängen bleibt, bis man woanders hintippt. Die Karte
   bleibt also angehoben stehen. Deshalb: Bewegung nur, wenn ein
   Zeiger existiert, der wirklich schweben kann. */
@media (hover:none),(pointer:coarse){
  .mcard:hover,.pcard:hover,.preview .mcard:hover{transform:none}
  .pcard:hover .prod,.grade-visual:hover .grade-product{transform:none}
  .btn:hover .ico,.backlink:hover svg,.brand:hover .logo{transform:none}
}

/* ── 3 · Reduzierte Bewegung heißt sanfter, nicht tot ──────────
   Vorher wurde jede Übergangsdauer auf 0.01ms gesetzt. Damit
   verschwand auch die Rückmeldung: Knöpfe schalteten hart um,
   Farben sprangen. Richtig ist, Ortswechsel zu entfernen und
   Deckkraft und Farbe weiterlaufen zu lassen — nur kürzer. */
@media (prefers-reduced-motion:reduce){
  .btn,.tab,.chip,.card-toggle,.drop-clear,.nav-burger,.sheet-close,
  .prow-act button,.msg-form button,.ai-chips button,.gradepick label,
  .mcard,.pcard,.field input,.field select,.field textarea{
    transition-duration:120ms !important;
  }
  /* Ortswechsel bleiben aus. */
  .mcard:hover,.pcard:hover,.preview .mcard:hover,
  .pcard:hover .prod,.grade-visual:hover .grade-product,
  .btn:hover .ico,.backlink:hover svg,.brand:hover .logo,
  .btn:active,.tab:active,.chip:active,.mcard:active,.pcard:active{
    transform:none !important;
  }
}

/* ══ 21 · SHOP-VERIFIZIERUNG ═══════════════════════════════ */
.vfyblock{margin:46px auto 0;max-width:760px}

/* Schrittanzeige. Die Linie liegt hinter den Ziffern und wird von
   deren Hintergrund unterbrochen — deshalb braucht jede Ziffer eine
   eigene Fläche, sonst läuft der Strich mitten hindurch. */
.vsteps{list-style:none;display:flex;gap:0;margin:0 0 26px;padding:0;position:relative}
.vsteps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  position:relative;font-size:13px;color:var(--ink-soft,#9BA3A0);text-align:center}
.vsteps li::before{content:"";position:absolute;top:17px;left:-50%;width:100%;
  height:1px;background:rgba(255,255,255,.14)}
.vsteps li:first-child::before{display:none}
.vsteps li b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:600;position:relative;z-index:1;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:var(--ink-soft,#9BA3A0);transition:all .3s ease}
.vsteps li.is-on b{background:#C9A227;border-color:#C9A227;color:#0B1A13}
.vsteps li.is-on{color:#E9E4D7}
.vsteps li.is-done b{background:rgba(122,163,106,.22);border-color:rgba(122,163,106,.6);
  color:#7AA36A}

.vpanel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  border-radius:18px;padding:clamp(24px,4vw,38px);text-align:center}
.vpanel h3{font-size:clamp(21px,2.6vw,26px);margin:0 0 12px;color:#E9E4D7}
.vlead{color:var(--ink-soft,#9BA3A0);line-height:1.65;margin:0 auto 10px;max-width:440px}
.vsub{color:var(--ink-soft,#9BA3A0);opacity:.8;font-size:14px;line-height:1.6;
  margin:0 auto 18px;max-width:440px}
.vpanel .vlead b{color:#E9E4D7;font-weight:600}

.vicon{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:grid;
  place-items:center;background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.42)}
.vicon svg{width:28px;height:28px;fill:none;stroke:#C9A227;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.vicon-ok{background:rgba(122,163,106,.16);border-color:rgba(122,163,106,.5)}
.vicon-ok svg{stroke:#7AA36A}
.vicon-quiet{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.vicon-quiet svg{stroke:#9BA3A0}

/* Formular im Panel linksbündig — zentrierte Beschriftungen über
   Eingabefeldern lassen das Auge bei jeder Zeile neu suchen. */
.vform{text-align:left;max-width:440px;margin:22px auto 0}

.vstatus{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
  padding:7px 15px;border-radius:999px;font-size:14px;
  background:rgba(201,162,39,.10);border:1px solid rgba(201,162,39,.30);color:#C9A227}
.vdot{width:8px;height:8px;border-radius:50%;background:#C9A227;
  animation:vpulse 1.9s ease-in-out infinite}
@keyframes vpulse{0%,100%{opacity:1}50%{opacity:.32}}

.verr{margin:0 0 16px;padding:12px 16px;border-radius:12px;text-align:left;
  background:rgba(201,90,70,.12);border:1px solid rgba(201,90,70,.38);
  color:#E7B4A8;font-size:14px;line-height:1.55}
.vnote{margin:0 0 16px;padding:12px 16px;border-radius:12px;text-align:left;
  background:rgba(122,163,106,.12);border:1px solid rgba(122,163,106,.38);
  color:#BBD5AE;font-size:14px;line-height:1.55}

.vpanel .factions{justify-content:center;margin-top:22px}

@media (max-width:620px){
  .vsteps li span{display:none}
  .vsteps li::before{top:17px}
}
@media (prefers-reduced-motion:reduce){
  .vdot{animation:none}
}
/* ══ 22 · VERIFIZIERUNGSBANNER IM KONTO ════════════════════ */
.vbanner{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  margin:0 0 clamp(20px,3vw,30px);padding:18px 20px;border-radius:16px;
  background:rgba(201,162,39,.09);border:1px solid rgba(201,162,39,.32)}
.vbanner[hidden]{display:none}

.vbanner-icon{flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:rgba(201,162,39,.16)}
.vbanner-icon svg{width:21px;height:21px;fill:none;stroke:#C9A227;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.vbanner-txt{flex:1 1 260px;display:flex;flex-direction:column;gap:4px;min-width:0}
.vbanner-txt b{color:#E9E4D7;font-size:15px;font-weight:600}
.vbanner-txt span{color:var(--ink-soft,#9BA3A0);font-size:14px;line-height:1.55}
.vbanner-mail{font-size:13px !important;opacity:.85}
.vbanner-mail[hidden]{display:none}
.vbanner-err{color:#E7B4A8 !important;font-size:13px !important}
.vbanner-err[hidden]{display:none}

.vbanner-act{flex:0 0 auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.vbanner-act [hidden]{display:none}

/* Unter 720 px stapeln: Nebeneinander bliebe für den Text zu wenig
   Platz, und ein Hinweis, den man nicht lesen kann, ist keiner. */
@media (max-width:720px){
  .vbanner{flex-direction:column;gap:13px}
  .vbanner-act{width:100%}
  .vbanner-act .btn{flex:1 1 auto;justify-content:center}
}
/* ══ 23 · WAS IST NEU ══════════════════════════════════════ */
.chlog{list-style:none;margin:0 auto;padding:0;max-width:760px}
.chlog-item{position:relative;padding:0 0 clamp(30px,4vw,44px) 26px;
  border-left:1px solid rgba(255,255,255,.13)}
.chlog-item:last-child{border-left-color:transparent}
/* Der Punkt sitzt auf der Linie, nicht daneben — deshalb genau die
   halbe Punktbreite nach links versetzt. */
.chlog-item::before{content:"";position:absolute;left:-5px;top:7px;
  width:9px;height:9px;border-radius:50%;background:#C9A227}

.chlog-meta{display:flex;align-items:center;gap:11px;margin:0 0 9px;flex-wrap:wrap}
.chlog-tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px}
.chlog-new{background:rgba(122,163,106,.16);border:1px solid rgba(122,163,106,.45);color:#9CC48B}
.chlog-fix{background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.40);color:#C9A227}
.chlog-meta time{font-size:13px;color:var(--ink-soft,#9BA3A0);opacity:.85}

.chlog-item h2{font-size:clamp(20px,2.6vw,26px);line-height:1.25;margin:0 0 12px;color:#E9E4D7}
.chlog-item p{color:var(--ink-soft,#9BA3A0);line-height:1.7;margin:0 0 12px}
.chlog-item p b{color:#E9E4D7;font-weight:600}
.chlog-item p em{color:#E9E4D7;font-style:italic}

/* Hintergründe zurückgenommen: Wer nur wissen will, was neu ist,
   soll nicht durch Technikdetails waten. Wer mag, liest weiter. */
.chlog-detail{font-size:14px !important;opacity:.78;
  padding-left:14px;border-left:2px solid rgba(255,255,255,.10)}

.chlog-open{max-width:760px;margin:clamp(20px,3vw,34px) auto 0;
  padding:clamp(22px,3vw,30px);border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.chlog-open h3{font-size:20px;margin:0 0 12px;color:#E9E4D7}
.chlog-open p{color:var(--ink-soft,#9BA3A0);line-height:1.7;margin:0 0 12px}
.chlog-open ul{margin:0 0 14px;padding-left:20px;color:var(--ink-soft,#9BA3A0);line-height:1.9}

@media (max-width:620px){
  .chlog-item{padding-left:20px}
}
/* ══ 24 · RECHTSTEXTE ══════════════════════════════════════ */
.legal{padding:clamp(90px,11vw,140px) 0 clamp(60px,8vw,100px);position:relative;z-index:1}
.legal-in{max-width:760px}
.legal h1{font-size:clamp(30px,4.4vw,46px);line-height:1.12;margin:8px 0 18px;color:#E9E4D7}
.legal h2{font-size:clamp(18px,2.3vw,22px);margin:38px 0 12px;color:#E9E4D7;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.10)}
.legal h3{font-size:17px;margin:22px 0 10px;color:#E9E4D7}
.legal p{color:var(--ink-soft,#9BA3A0);line-height:1.75;margin:0 0 13px}
.legal p b{color:#E9E4D7;font-weight:600}
.legal-lead{font-size:17px !important;line-height:1.7 !important;margin-bottom:22px !important}

/* Platzhalter fallen bewusst auf. Wer sie übersieht und die Seite
   veröffentlicht, hat ein nachweislich unvollständiges Impressum —
   das ist schlimmer als gar keines. */
.ph{display:inline-block;padding:1px 7px;border-radius:5px;
  background:rgba(201,90,70,.16);border:1px dashed rgba(201,90,70,.55);
  color:#E7B4A8;font-size:.94em}

.legal-warn{margin:0 0 30px;padding:16px 20px;border-radius:14px;
  background:rgba(201,162,39,.10);border:1px solid rgba(201,162,39,.35);
  color:#D8CDA8;font-size:14px;line-height:1.65}
.legal-warn b{display:block;color:#C9A227;margin-bottom:5px}

.legal-note{font-size:13.5px !important;opacity:.82;padding-left:14px;
  border-left:2px solid rgba(255,255,255,.12);margin-top:-4px !important}

.legal-box{margin:18px 0 26px;padding:22px 24px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10)}
.legal-box p{font-size:14.5px;margin-bottom:12px}
.legal-box p:last-child{margin-bottom:0}
.legal-box h3:first-child{margin-top:0}

.legal-hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:44px 0}
.legal-stand{margin-top:38px !important;font-size:13px !important;opacity:.7}

.legal-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.10)}
.legal-nav a{padding:7px 15px;border-radius:999px;font-size:14px;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:var(--ink-soft,#9BA3A0)}
.legal-nav a:hover{border-color:rgba(201,162,39,.5);color:#C9A227}
/* ══ 25 · HINTERGRUNDSYSTEM (scfx) ═════════════════════════════
   Gebaut von scfx.js. Leitidee: der Weg einer Retoure, nicht
   mehr Grün.

   z-index:-1 ist hier die tragende Entscheidung, nicht 0.
   Ein positioniertes Element mit z-index:0 malt ÜBER statischem
   Geschwisterinhalt — genau daran ist auf dieser Seite schon
   einmal die halbe Produktseite unsichtbar geworden. Bei -1 malt
   die Ebene nach dem Hintergrund des Abschnitts, aber vor dem
   Inhalt kommt sie nie. Der Inhalt braucht dafür keine eigene
   z-index-Angabe.

   overflow:hidden liegt auf der Ebene selbst, nicht auf dem
   Abschnitt. So beschneidet jede Ebene ihren eigenen Inhalt und
   ich muss das Layout des Abschnitts nicht anfassen. */
.scfx{
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;overflow:hidden;
  border-radius:inherit;
}

/* ── 01 · Technisches Raster ─────────────────────────────────
   Zwei Verläufe im Abstand von 104 px. Die Maske ist der Punkt:
   Ohne sie sieht ein gleichmäßiges Gitter wie Millimeterpapier
   aus. Mit zwei radialen Masken taucht es an einer Stelle auf
   und verliert sich wieder — wie Licht, das über eine technische
   Zeichnung streift. */
.scfx-grid::before{
  content:"";position:absolute;inset:-10%;
  background-image:
    linear-gradient(to right, rgba(125,148,131,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125,148,131,.055) 1px, transparent 1px);
  background-size:104px 104px;
  -webkit-mask-image:
    radial-gradient(58% 46% at 72% 34%, #000 0%, transparent 72%),
    radial-gradient(44% 38% at 18% 82%, #000 0%, transparent 76%);
  mask-image:
    radial-gradient(58% 46% at 72% 34%, #000 0%, transparent 72%),
    radial-gradient(44% 38% at 18% 82%, #000 0%, transparent 76%);
  transform:translate3d(0, calc(var(--scfx-y, 0) * -9px), 0);
}
/* Feinere Teilung für Abschnitte, die ohnehin viel Struktur
   tragen — dort soll das Raster nur Tiefe geben. */
.scfx-grid.is-fein::before{
  background-size:72px 72px;
  background-image:
    linear-gradient(to right, rgba(125,148,131,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125,148,131,.04) 1px, transparent 1px);
}

/* ── 02 · Radialer Glow ──────────────────────────────────────
   Drei überlagerte Verläufe. Kein sichtbarer Kreis: die Ränder
   laufen weit und weich aus. Der wärmste (Sand) ist der
   kleinste und schwächste — er soll das Produkt anwärmen, nicht
   die Fläche einfärben. */
.scfx-glow::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(38% 34% at var(--gx,66%) var(--gy,50%),
      rgba(125,148,131,.13), transparent 68%),
    radial-gradient(58% 52% at var(--gx,66%) var(--gy,50%),
      rgba(28,58,44,.34), transparent 74%),
    radial-gradient(16% 14% at var(--gx,66%) var(--gy,50%),
      rgba(192,154,107,.07), transparent 70%);
  transform:translate3d(0, calc(var(--scfx-y, 0) * -5px), 0);
}

/* ── 03 · Das große 2ND ──────────────────────────────────────
   Angeschnitten am Rand, damit es als Form gelesen wird und
   nicht als Wort. Deckkraft bleibt unter fünf Prozent. */
.scfx-mark span{
  position:absolute;
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(240px, 42vw, 640px);
  line-height:.78;
  letter-spacing:-.04em;
  color:rgba(244,241,232,.038);
  white-space:nowrap;
  transform:translate3d(0, calc(var(--scfx-y, 0) * -14px), 0);
}
.scfx-mark.at-right span{right:-9%;bottom:-16%}
.scfx-mark.at-left  span{left:-13%;top:-18%}
/* Auf cremefarbenem Grund dunkles Forest statt Ivory. */
.scfx-mark.on-light span{color:rgba(18,41,31,.032)}

/* ── 04 · Systemkennungen ────────────────────────────────────
   Monospace, Versalien, weit gesperrt, sehr klein. Sie sollen
   erst beim zweiten Blick auffallen — deshalb liegt die
   Deckkraft zwischen 11 und 15 Prozent und nie höher. */
.scfx-lab{
  position:absolute;
  font-family:var(--f-mono);
  font-size:9.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(224,220,206,var(--lop,.13));
  transform:translate3d(0, calc(var(--scfx-y, 0) * -6px), 0);
}

/* ── 05 · Kreislauf-Leitungen ────────────────────────────────
   RETURN → CHECK → GRADE → RESELL → SECOND LIFE, aber nur
   angedeutet. Rechte Winkel und eine Pfeilspitze genügen; ein
   lesbares Diagramm wäre Inhalt und würde mit dem echten
   Kreislauf-Abschnitt konkurrieren.

   vector-effect hält die Strichstärke konstant, obwohl das SVG
   ohne Seitenverhältnis gestreckt wird — sonst würden die
   Waagerechten dünner als die Senkrechten. */
/* Feste Groesse statt gestreckt.

   Zuerst lag hier inset:8% 6% mit preserveAspectRatio="none" —
   das streckte ein quadratisches viewBox ueber einen breiten,
   flachen Bereich. Im Testbild las sich die Leitung dadurch als
   grosses Rechteck quer ueber den Hero, nicht als technische
   Fuehrung. Eine feste, kleine Groesse in einer Ecke trifft die
   Absicht: ein Detail am Rand, kein Rahmen um den Inhalt. */
.scfx-route{inset:0}
.scfx-route svg{
  position:absolute;
  width:clamp(200px, 20vw, 300px);height:auto;aspect-ratio:5/3;
  overflow:visible;
  transform:translate3d(0, calc(var(--scfx-y, 0) * -7px), 0);
}
.scfx-route.r-hero svg{left:4%;top:34%}
.scfx-route.r-loop svg{right:6%;bottom:12%}
.scfx-route.r-calm svg{right:5%;top:52%}
.scfx-route path{
  fill:none;stroke:rgba(125,148,131,.10);stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.scfx-route path.tip{fill:rgba(125,148,131,.14);stroke:none}
.scfx-route circle{fill:rgba(192,154,107,.16)}

/* ── 06 · Produkt-Blueprints ─────────────────────────────────
   Technische Zeichnung, absichtlich angeschnitten: etwa 40 %
   ragen ins Bild. Ein vollständig sichtbares Gerät wäre eine
   Illustration und würde zum Motiv werden. */
.scfx-bp svg{
  position:absolute;
  width:clamp(320px, 34vw, 520px);height:auto;
  fill:none;
  stroke:rgba(125,148,131,.055);
  stroke-width:1.1;
  vector-effect:non-scaling-stroke;
  transform:translate3d(0, calc(var(--scfx-y, 0) * -11px), 0);
}
.scfx-bp.bp-phones svg{left:-11%;bottom:-24%}
.scfx-bp.bp-speaker svg{right:-8%;top:-20%;
  stroke:rgba(18,41,31,.05)}

/* ── 07 · A / B / C hinter der Zustandskarte ─────────────────
   Die Vorgabe beschreibt drei Karten, über die man fährt. Diese
   Seite hat eine Karte und drei Wähler — der Buchstabe folgt
   deshalb der Auswahl und hebt sich beim Überfahren eines
   Wählers kurz an. Gleiche Idee, an das vorhandene Bedienmuster
   angepasst.

   640 ms Übergang: langsam genug, dass es nicht schaltet,
   schnell genug, dass es antwortet. */
.scfx-abc span{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-46%);
  font-family:var(--f-serif);
  font-size:clamp(300px, 40vw, 560px);
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(18,41,31,.055);
  opacity:0;
  transition:opacity 640ms cubic-bezier(.22,.61,.36,1);
}
.scfx-abc span.is-on{opacity:1}
.scfx-abc.is-hi span.is-on{
  -webkit-text-stroke-color:rgba(18,41,31,.085);
}

/* ── 08 · Papier auf cremefarbenen Flächen ──────────────────
   Rauschen als SVG-Filter im Datenpfad, kein JPG: eine Datei
   weniger, keine Auflösungsfrage, in der Deckkraft feinjustierbar.
   Dazu eine sehr flache Vignette, damit die Fläche nicht wie
   Karton wirkt, sondern wie Papier mit Licht darauf. */
/* Auf dunklem Grund braucht das Korn mehr Deckkraft als auf
   Papier - .5 war fuer eine cremefarbene Flaeche gerechnet, die
   diese Seite nicht hat. */
.scfx-paper::before{
  content:"";position:absolute;inset:0;
  opacity:.85;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
/* Vignette entfernt: Sie war fuer helle Flaechen gedacht und
   verdunkelt einen dunklen Grund nur weiter. */

/* ── Reduktion nach Bildschirmgröße ─────────────────────────
   Die Stufen entscheidet scfx.js beim Aufbau — Ebenen, die auf
   kleinen Schirmen nicht hergehören, entstehen dort gar nicht.
   Was bleibt, wird hier zusätzlich zurückgenommen: Inhalt,
   Produkte und Handlungsknöpfe haben immer Vorrang. */
@media (max-width:1100px){
  .scfx-mark span{font-size:clamp(200px, 46vw, 420px)}
  .scfx-abc span{font-size:clamp(240px, 44vw, 400px)}
}
@media (max-width:720px){
  /* Nur noch 2ND und Papier — beide ruhig und ohne Bewegung. */
  .scfx-mark span{
    font-size:clamp(180px, 62vw, 300px);
    color:rgba(244,241,232,.03);
    transform:none;
  }
  .scfx-mark.on-light span{color:rgba(18,41,31,.026)}
  .scfx-paper::before{opacity:.38}
  .scfx-abc span{font-size:clamp(200px, 56vw, 300px);
    -webkit-text-stroke-width:1.1px}
}

/* ── Bewegung abbestellt ────────────────────────────────────
   Kein Umherfahren, keine Übergänge. Die Ebenen bleiben
   sichtbar — sie sind Gestaltung, nicht Animation. */
@media (prefers-reduced-motion: reduce){
  .scfx-grid::before,.scfx-glow::before,.scfx-mark span,
  .scfx-lab,.scfx-route svg,.scfx-bp svg{transform:none}
  .scfx-abc span{transition:none}
}
.scfx-still .scfx-grid::before,
.scfx-still .scfx-glow::before,
.scfx-still .scfx-mark span,
.scfx-still .scfx-lab,
.scfx-still .scfx-route svg,
.scfx-still .scfx-bp svg{transform:none}
/* ══ 26 · BOX UND LADUNG ALS AUFNAHME ══════════════════════════
   Ersetzt den CSS-Nachbau des Kartons und die Strich-Symbole
   durch die freigestellten Produktaufnahmen.

   Beide Dateien bringen einen Alphakanal mit (Ecken pruefen:
   Alpha 0). Deshalb braucht es weder Blend-Modus noch Maske —
   sie liegen direkt auf dem Hintergrund.

   Die Regeln fuer .scbox-front, -side, -face, -lid, -flaps und
   -mouth stehen weiter oben und laufen jetzt ins Leere, weil die
   Elemente nicht mehr im Markup stehen. Sie bleiben stehen,
   falls der CSS-Karton je zurueckkehren soll. */
.scbox-img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 42px 70px rgba(0,0,0,.55));
}

/* Die Aufnahme bringt ihr eigenes Licht mit — der zusaetzliche
   CSS-Schein darf deshalb nur noch andeuten, nicht leuchten. */
.scbox-glow{
  top:2%;width:104%;height:52%;
  background:radial-gradient(ellipse at center,rgba(192,154,107,.16),transparent 72%);
  opacity:calc(.22 + var(--p,0) * .3);
}

/* Ankerpunkt der Ladung: die Kartonoeffnung.
   Sie liegt in der Aufnahme bei rund 34 % der Bildhoehe; das
   Bild hat das Verhaeltnis 1536:1024, also 1,5. Daraus folgt
   der Abstand von der Oberkante: Breite / 1,5 * 0,34. */
.flyfield{left:51%;top:calc(var(--bw) * .212)}

.fi img{
  width:100%;height:100%;
  object-fit:contain;display:block;
}
/* Untere Lage etwas zurueckgenommen, damit Tiefe entsteht.
   Frueher lief das ueber die Strichfarbe --c; Aufnahmen bringen
   ihre eigene Farbe mit, also arbeitet die Tiefe hier ueber
   Helligkeit. */
.fi.deep img{filter:brightness(.78) saturate(.9)}

@media (max-width:860px){
  /* Weniger Stuecke auf kleinen Schirmen — die Aufnahmen wiegen
     mehr als die fruehere Strichgrafik. */
  .fi.opt{display:none}
}
/* ── Rangfolge im Hero ─────────────────────────────────────
   Ueberschrift und Knoepfe standen hinter dem Karton: im
   Testbild ragte "…ansehen" unter dem Deckel hervor. Der Text
   bekommt deshalb eine eigene Ebene ueber der Box.

   Die Ladung bleibt bewusst darueber (.scbox hat z-index:5 und
   die Stuecke fliegen aus ihr heraus) — Produkte, die vor der
   Ueberschrift vorbeiziehen, sind gewollt; ein Karton, der sie
   verdeckt, ist es nicht.

   Wichtig: hier NUR z-index setzen. Ein zusaetzliches
   position:relative haette die Grundregel (position:absolute auf
   dem Desktop, static auf dem Handy) ueberschrieben und das
   Hero-Layout verschoben — genau das war im ersten Versuch der
   Fall. .hero-copy ist bereits positioniert, z-index greift. */
.hero-copy{z-index:6}
.hero-actions{position:relative;z-index:7}
/* Auf schmalen Schirmen stehen die beiden Knoepfe untereinander.
   Nebeneinander ergeben sie rund 430 px und liefen bei 414 px
   Fensterbreite rechts aus dem Bild — flex-wrap allein hat das
   nicht aufgefangen, weil die Beschriftungen nicht umbrechen. */
@media (max-width:470px){
  .hero-actions>span{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
}
/* ── Missions-Spruch ────────────────────────────────────────
   Die Versalien kommen aus dem Stylesheet, nicht aus dem
   Markup. Vorher stand dort woertlich "NOT NEW. STILL
   VALUABLE." in Grossbuchstaben.

   Warum die Umstellung: Vorlesewerkzeuge sprechen durchgehende
   Grossschreibung teils buchstabenweise, und das Woerterbuch der
   Sprachumschaltung ist ueber den deutschen Quelltext
   geschluesselt — "Die erste Chance" ist ein besserer Schluessel
   als "DIE ERSTE CHANCE". Das Bild bleibt identisch.

   Die leichte Sperrung gleicht aus, dass deutsche Versalien
   enger wirken als englische. */
.mission-h{
  text-transform:uppercase;
  letter-spacing:-.005em;
  /* Kleiner als das englische Original.

     "STILL VALUABLE." hat 15 Zeichen, "WAR NICHT DIE LETZTE."
     hat 21. Bei den urspruenglichen 144 px brach der deutsche
     Satz in vier ausgefranste Zeilen statt in zwei. Aus dem
     Testbild gemessen: rund 0,553 em Vorschub je Versalzeichen.
     21 Zeichen brauchen damit das 11,6-fache der Schriftgroesse
     — bei 1140 px Spaltenbreite passen hoechstens 98 px. */
  font-size:clamp(30px,6.4vw,100px);
}

/* ══ 27 · WARENKORB ════════════════════════════════════════════
   Symbol in der Kopfzeile, Warenkorbseite, Kasse.

   Das Symbol bleibt auch auf dem Handy sichtbar, waehrend
   "Haendler werden" dort ausgeblendet wird (Zeile 1852): Wer etwas
   kaufen will, muss seinen Korb jederzeit erreichen koennen. Der
   Haendler-Aufruf steht im Klappmenue. */

.cartlink{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;color:inherit;flex:none;
  transition:background var(--t-fast) var(--e-soft),color var(--t-fast) var(--e-soft);
}
.cartlink:hover{background:rgba(255,255,255,.07);color:var(--gold)}
.cartlink:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ico-cart{width:21px;height:21px}

/* Der Zaehler haengt am Symbol statt daneben — sonst springt die
   Kopfzeile in der Breite, sobald der erste Artikel dazukommt. */
.cartlink-n{
  position:absolute;top:1px;right:0;
  min-width:17px;height:17px;padding:0 4.5px;border-radius:999px;
  background:var(--gold);color:#0E2119;
  font:600 10.5px/17px var(--f-mono,ui-monospace,monospace);
  letter-spacing:.02em;text-align:center;pointer-events:none;
}
.cartlink-n[hidden]{display:none}

/* Kurzes Aufpoppen, wenn etwas hineingelegt wird. */
@keyframes cartpop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.cartlink.is-pop .cartlink-n{animation:cartpop .42s var(--e-soft)}
@media (prefers-reduced-motion:reduce){.cartlink.is-pop .cartlink-n{animation:none}}

/* ── Warenkorbseite ──────────────────────────────────────────── */
.cartwrap{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(24px,3.4vw,52px);align-items:start}
@media (max-width:900px){.cartwrap{grid-template-columns:1fr}}

.cartlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cartrow{
  display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;
  padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:14px;
  background:rgba(255,255,255,.025);
}
.cartrow-img{width:84px;height:84px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05);display:grid;place-items:center}
.cartrow-img img{width:100%;height:100%;object-fit:cover;display:block}
.cartrow-img .logo{width:38px;height:38px;opacity:.30}
.cartrow h3{margin:0 0 3px;font-size:15.5px;line-height:1.3}
.cartrow h3 a{color:inherit;text-decoration:none}
.cartrow h3 a:hover{color:var(--gold)}
.cartrow-meta{font:11px/1.5 var(--f-mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase;color:#9BA3A0}
.cartrow-right{text-align:right;display:grid;gap:9px;justify-items:end}
.cartrow-sum{font-size:16px;font-weight:600;white-space:nowrap}

.qty{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.16);border-radius:999px;overflow:hidden}
.qty button{
  width:30px;height:30px;border:0;background:transparent;color:inherit;
  font-size:16px;line-height:1;cursor:pointer;
}
.qty button:hover:not(:disabled){background:rgba(255,255,255,.08);color:var(--gold)}
.qty button:disabled{opacity:.32;cursor:default}
.qty b{min-width:26px;text-align:center;font-size:14px;font-weight:600}

.cartrow-del{
  background:none;border:0;padding:0;cursor:pointer;color:#9BA3A0;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
}
.cartrow-del:hover{color:#E4A0A0}

/* ── Zusammenfassung ─────────────────────────────────────────── */
.cartsum{
  position:sticky;top:96px;
  padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(255,255,255,.035);
}
@media (max-width:900px){.cartsum{position:static}}
.cartsum h2{margin:0 0 16px;font-size:17px}
.cartsum dl{display:grid;grid-template-columns:1fr auto;gap:9px 12px;margin:0 0 16px}
.cartsum dt{color:#9BA3A0;font-size:14px}
.cartsum dd{margin:0;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.cartsum .tot dt,.cartsum .tot dd{
  font-size:18px;font-weight:600;color:var(--ivory);
  padding-top:11px;border-top:1px solid rgba(255,255,255,.12);
}
.cartsum .btn{width:100%;justify-content:center}
.cartsum-note{margin:13px 0 0;font-size:12px;line-height:1.55;color:#9BA3A0}

/* ── Kasse ───────────────────────────────────────────────────── */
.ckgrid{display:grid;grid-template-columns:1.35fr .95fr;gap:clamp(24px,3.4vw,52px);align-items:start}
@media (max-width:900px){.ckgrid{grid-template-columns:1fr}}
.ckrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.ckrow{grid-template-columns:1fr}}
.ckstep{margin:0 0 22px;font:11px/1 var(--f-mono,ui-monospace,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

.cklines{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:11px}
.cklines li{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:13.5px;line-height:1.45}
.cklines span{color:#9BA3A0}
.cklines b{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* [hidden] muss gewinnen.

   Das Attribut wirkt nur ueber die Vorgabe des Browsers
   (display:none). Jede Klasse im Stylesheet, die selbst ein display
   setzt — .msg-note{display:flex}, .cartwrap{display:grid} — ist
   spezifischer und hebt es auf. Ergebnis am 2026-09-08: Der Hinweis
   "Nicht mehr verfuegbar" stand sichtbar da und meldete 0 Artikel.

   Bewusst global und mit !important: Ein verstecktes Element muss
   versteckt sein, ohne dass man an jeder Stelle daran denkt. */
[hidden]{display:none !important}

/* .hint ist bisher nur INNERHALB von .field klein (Zeile 1118).
   Steht der Hinweis daneben — etwa der Rechtstext unter dem
   Bestellknopf — erbt er die Absatzgroesse und draengt sich vor.
   Hier bewusst nur fuer Warenkorb und Kasse nachgezogen statt
   global: Eine allgemeine Regel wuerde jeden vorhandenen .hint
   auf allen Seiten verkleinern, und das ist nicht geprueft. */
[data-checkout] .hint,[data-cart-page] .hint{font-size:12.5px;line-height:1.65;color:var(--ink-soft)}

/* "optional" im Feldnamen soll als Nebenbemerkung lesbar sein und
   nicht wie Teil der Beschriftung. (.opt allein war bisher
   ungestylt — die vorhandene Regel .fi.opt betrifft die fliegenden
   Geraete im Hero, nicht Formulare.) */
[data-checkout] label .opt{
  margin-left:5px;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:11.5px;color:var(--ink-soft);opacity:.8;
}

/* Auszahlungsbanner: gleiche Bauform wie das Verifizierungsbanner,
   nur ruhiger gefaerbt. Zwei gleich laute Banner uebereinander
   heben sich gegenseitig auf — die Verifizierung kommt zuerst, die
   Auszahlung ist der zweite Schritt. */
.vbanner-pay{border-color:rgba(125,148,131,.24);background:rgba(14,32,24,.55)}
.vbanner-pay .vbanner-icon{color:var(--sage,#7D9483)}