/* ═══════════════════════════════════════════════════════════════
   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;
  background:radial-gradient(ellipse 58% 100% at 50% 50%,
             rgba(178,190,186,.13),rgba(150,164,160,.05) 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));
  transform:
    translate3d(
      calc(var(--x0) + (var(--dx) - var(--x0)) * var(--f)),
      calc(var(--oy,0px) + (var(--dy) - var(--oy,0px)) * var(--f)),
      0)
    rotate(calc(var(--rot,0deg) * var(--f)))
    scale(calc((var(--s0,.48) + (var(--s1,.95) - var(--s0,.48)) * var(--f)) * var(--sf,1)));
  opacity:calc(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);
}
.scbox-flaps{position:relative;height:0}
.scbox-flap{
  position:absolute;bottom:0;width:48%;height:clamp(30px,5vw,46px);
  background:linear-gradient(180deg,#224836,#152E23);
  border:1px solid rgba(192,154,107,.22);
  border-bottom:0;border-radius:4px 4px 0 0;
  box-shadow:inset 0 1px 0 rgba(224,188,140,.14);
}
/* 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);
}
.scbox-front{
  position:relative;
  padding:clamp(22px,3.6vw,36px) clamp(18px,3vw,30px) clamp(24px,4vw,40px);
  background:linear-gradient(180deg,#1E3E2F 0%,#173427 20%,#12291F 66%,#0E211A 100%);
  border:1px solid rgba(192,154,107,.24);border-top:0;
  border-radius:0 0 10px 10px;
  display:grid;justify-items:center;gap:10px;
  box-shadow:0 40px 90px -38px rgba(0,0,0,.92),inset 0 1px 0 rgba(224,188,140,.1);
}
.scbox-front .logo{width:clamp(30px,4.4vw,42px);opacity:.9}
.scbox-word{
  font-size:clamp(18px,3.3vw,36px);font-weight:640;
  letter-spacing:.17em;color:var(--ivory);line-height:1;text-align:center;
}
.scbox-code{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.28em;color:var(--gold);opacity:.7}
.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,.ai-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 */
.ai-panel{background:rgba(11,26,19,.97);border:1px solid rgba(255,255,255,.12)}
.ai-msg.bot{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:#DCE1DF}
.ai-msg.me{background:var(--ivory);color:#0A0C0B}
.ai-chips button{border-color:rgba(255,255,255,.18);color:#9BA3A0}
.ai-chips button:hover{background:var(--ivory);color:#0A0C0B;border-color:var(--ivory)}
.ai-form{background:rgba(8,10,11,.9);border-top-color:rgba(255,255,255,.1)}

/* 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)}
.ai-form{background:rgba(6,17,12,.92)}

/* ── 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;
  }
}