/* ── Kontrast: WCAG 2.1 AA (4.5:1 fuer normalen Text) ──────────────
   Am 14.08.2026 im Browser nachgemessen: Auf der Verkaufsseite fielen 73
   Textstellen durch, praktisch alle mit --muted-2. Der Wert lag bei
   3,0–3,4:1 (hell) bzw. 3,8:1 (dunkel) — betroffen waren unter anderem die
   Schrittnummern („SCHRITT 1"), die Bildunterschriften und die Zeile
   „214 Fotos → 43 Produkte".

   --muted-2 ist die dritte Textstufe und darf ruhig zurueckhaltend wirken,
   aber sie traegt echten Text und keine Dekoration. Neue Werte:
     hell   #6a6a73 → 4,6:1 auch auf dem dunkelsten Panel (#ededee)
     dunkel #8b8b95 → 5,4:1 auf #0a0a0b
   --muted (#52525b / #a1a1aa) lag mit 7,7:1 immer schon richtig.
   ────────────────────────────────────────────────────────────────── */

/* =========================================================================
   KLAMOX — Landing Stylesheet (gemeinsam für index.html + anfrage.html)
   Monochrom, professionell. Light + Dark. Keine externen Fonts/CDNs.
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---- Tokens: DARK ist Basis (spiegelt die Software) ---- */
:root{
  --bg:#09090b; --bg-2:#0d0d10; --panel:#131317; --panel-2:#181820;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
  --text:#fafafa; --muted:#a1a1aa; --muted-2:#8b8b95;
  --cta-bg:#fafafa; --cta-fg:#0a0a0a; --cta-hover:#ffffff;
  --ring:rgba(255,255,255,.55);
  --panel-shadow:0 1px 0 rgba(255,255,255,.02);
  --lift:0 30px 70px -40px rgba(0,0,0,.9);
  --grid:rgba(255,255,255,.03);
  --paper:#e9e9ea; --paper-ink:#18181b; --paper-line:rgba(0,0,0,.14);
}
@media(prefers-color-scheme:light){
  :root{
    --bg:#ffffff; --bg-2:#fafafa; --panel:#ffffff; --panel-2:#f7f7f8;
    --line:rgba(9,9,11,.10); --line-2:rgba(9,9,11,.16); --line-3:rgba(9,9,11,.28);
    --text:#0a0a0b; --muted:#52525b; --muted-2:#6a6a73;
    --cta-bg:#0a0a0b; --cta-fg:#fafafa; --cta-hover:#000000;
    --ring:rgba(9,9,11,.4);
    --panel-shadow:0 1px 2px rgba(9,9,11,.05),0 8px 24px -16px rgba(9,9,11,.18);
    --lift:0 24px 60px -32px rgba(9,9,11,.28);
    --grid:rgba(9,9,11,.035);
    --paper:#1a1a1e; --paper-ink:#f4f4f5; --paper-line:rgba(255,255,255,.16);
  }
}
:root[data-theme="light"]{
  --bg:#ffffff; --bg-2:#fafafa; --panel:#ffffff; --panel-2:#f7f7f8;
  --line:rgba(9,9,11,.10); --line-2:rgba(9,9,11,.16); --line-3:rgba(9,9,11,.28);
  --text:#0a0a0b; --muted:#52525b; --muted-2:#6a6a73;
  --cta-bg:#0a0a0b; --cta-fg:#fafafa; --cta-hover:#000000;
  --ring:rgba(9,9,11,.4);
  --panel-shadow:0 1px 2px rgba(9,9,11,.05),0 8px 24px -16px rgba(9,9,11,.18);
  --lift:0 24px 60px -32px rgba(9,9,11,.28);
  --grid:rgba(9,9,11,.035);
  --paper:#1a1a1e; --paper-ink:#f4f4f5; --paper-line:rgba(255,255,255,.16);
}
:root[data-theme="dark"]{
  --bg:#09090b; --bg-2:#0d0d10; --panel:#131317; --panel-2:#181820;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
  --text:#fafafa; --muted:#a1a1aa; --muted-2:#8b8b95;
  --cta-bg:#fafafa; --cta-fg:#0a0a0a; --cta-hover:#ffffff;
  --ring:rgba(255,255,255,.55);
  --panel-shadow:0 1px 0 rgba(255,255,255,.02);
  --lift:0 30px 70px -40px rgba(0,0,0,.9);
  --grid:rgba(255,255,255,.03);
  --paper:#e9e9ea; --paper-ink:#18181b; --paper-line:rgba(0,0,0,.14);
}

:root{
  --font-display:"Helvetica Neue","Segoe UI",Roboto,Arial,system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --maxw:1200px;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}

.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%)}
main,header,footer{position:relative;z-index:2}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:26px}

/* ---- Type ---- */
.eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:inline-flex;gap:10px;align-items:center}
.eyebrow .idx{color:var(--text);font-weight:600}
/* Der 26-px-Strich vor der Rubrik ist am 12.08.2026 entfallen.
   Er war zusammen mit der Nummerierung (01/02/03) und der gesperrten
   Grossschreibung genau die Kombination, die auf generierten Seiten
   immer gleich aussieht. Uebrig ist eine einzige Rubrik — bei „Kunden",
   wo sie die einzige Ueberschrift des Abschnitts ist. Eine bleibt
   unauffaellig; wiederholt wird sie zum Muster. */
h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.032em;line-height:1.03;text-wrap:balance}
h1{font-size:clamp(2.7rem,6.4vw,4.9rem);letter-spacing:-.04em}
h2{font-size:clamp(2rem,4.2vw,3.2rem)}
h3{font-size:clamp(1.12rem,1.9vw,1.35rem);letter-spacing:-.02em}
.lead{font-size:clamp(1.03rem,1.5vw,1.26rem);color:var(--muted);max-width:60ch;line-height:1.62}
.mono{font-family:var(--font-mono)}
.tnum{font-variant-numeric:tabular-nums}
em{font-style:normal;color:var(--text);font-weight:600;box-shadow:inset 0 -0.3em 0 var(--line-2)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-mono);font-size:13.5px;letter-spacing:.01em;
  padding:13px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .16s ease,box-shadow .22s ease,background .18s ease,border-color .18s ease,color .18s ease}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.btn-primary{background:var(--cta-bg);color:var(--cta-fg);font-weight:600}
.btn-primary:hover{background:var(--cta-hover);transform:translateY(-1px);box-shadow:var(--lift)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--line-3);background:var(--panel-2)}
.btn-block{width:100%;justify-content:center}
/* Die Regeln fuer `.p-aktionen` (zwei Knoepfe nebeneinander in einer
   Tarifkarte) sind am 13.08.2026 entfallen. Der zweite Knopf auf der
   Volumen-Karte ist weggefallen, weil die Karte daneben ohnehin ganz dem
   Gespraech gewidmet ist — damit hatte die Klasse keinen Verwender mehr.
   Ungenutzte Regeln stehen zu lassen kostet nichts und verwirrt jeden,
   der spaeter sucht, wo sie greifen. */
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- Header ---- */
header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
header.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.1);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
/* Wortmarke: Versalien, sehr fett, eng gesetzt — ohne Zeichen davor.
   Das Kaestchen mit dem Buchstaben (.brand .mark) ist am 06.08. entfallen:
   Das Markenblatt ist eine WORTMARKE, ein Quadrat davor teilt den Blick auf
   zwei Dinge auf. Seine Regel stand noch bis zum 06.08.2026 hier — und mit
   ihr die Beizeile .brand .name small. Beide ohne ein einziges Vorkommen im
   HTML. Geloescht, damit der naechste Bearbeiter sie nicht versehentlich
   wieder mit Leben fuellt. */
/* ─── DAS QUADRATISCHE K VOR DER WORTMARKE (15.09.2026) ────────────
   Betreiber: „links daneben dieses Kaestchen, so kann auch in der Hoehe …
   das jetzt ja nicht zu gross, und dann ein bisschen weiter nach rechts
   gerueckt, dieses Klamox."

   Es stand hier schon einmal und ist am 06.08.2026 entfallen, mit der
   Begruendung, das Markenblatt sei eine WORTMARKE und ein Quadrat davor
   teile den Blick. Der Betreiber will es zurueck — seine Marke, seine
   Entscheidung. Der Abstand nach rechts kommt aus dem `gap` von .brand.

   Die Hoehe richtet sich nach der Wortmarke (22px): 26px Kante wirkt
   gleich hoch, ohne sie zu ueberragen. Farben aus den Tokens, damit es
   mitzieht, wenn die Palette wechselt. */
.brand .mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:none;border-radius:7px;
  background:var(--cta-bg);color:var(--cta-fg);
  font-family:var(--font-display);font-weight:800;font-size:15.5px;
  letter-spacing:-.03em;line-height:1;
}
.brand .name{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:22px;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:28px}
/* Auf dem Desktop verdoppelt dieser Eintrag den Knopf rechts daneben und
   bleibt deshalb aus. Eingeblendet wird er nur in der Telefon-Auflösung
   (@media max-width:720px), wo der Knopf selbst weichen muss. */
.nav-anmelden{display:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-family:var(--font-mono);transition:color .16s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:10px}

/* ---- Sprachumschalter ----
   Übernimmt bewusst die Maße der vorhandenen Kopfzeilen-Knöpfe: 1px-Kante in
   --line-2, Radius 10px wie .btn, Monospace 12.5px wie .nav-links. Zwei
   Verweise, kein Aufklappmenü — bei genau zwei Sprachen versteckt ein Menü
   die Hälfte der Auskunft.
   Unter 720px verschwindet er aus der Kopfzeile (dort ist schon „Einloggen"
   ausgeblendet und die Navigation eingeklappt); die Fußzeile trägt ihn dann. */
/* Marktwahl. Neun Einträge passen nicht in eine Segment-Leiste — deshalb ein
   NATIVES <select>: es bringt Tastaturbedienung, Vorlesbarkeit und auf dem
   Telefon den systemeigenen Auswahldialog mit, ohne eine Zeile JavaScript für
   Fokusfang oder Escape. Die Optik folgt der Leiste, die hier vorher stand. */
.market-seg{display:inline-flex;align-items:center}
/* Maße folgen den Nachbarn in der Kopfzeile: .btn ist 49 px hoch bei 13,5 px
   Schrift. Vorher stand hier ein 33 px flaches Feld neben zwei 49 px hohen
   Knöpfen — die Zeile sah dadurch schief aus, und mit dem ausgeschriebenen
   „Deutschland" war das Feld mit 176 px sogar breiter als „Einloggen" (120).
   Mit Länderkürzel und gleicher Höhe ist es das, was es sein soll: ein
   nachgeordnetes Bedienelement.

   line-height:1.55 ist NICHT geraten: Es ist der Wert aus body (Zeile 63).
   Formularelemente erben ihn nicht — der Browser setzt für sie `normal`,
   was hier 5 px zu wenig ergab. Ohne diese Zeile bleibt das Feld flacher
   als seine Nachbarn, egal wie das Polster gewählt wird. */
.market-select{font-family:var(--font-mono);font-size:13.5px;line-height:1.55;padding:13px 26px 13px 12px;border:1px solid var(--line-2);border-radius:10px;background:transparent;color:var(--text);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
.market-select:hover{border-color:var(--line)}
.market-select:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.foot .market-select{border:0;padding:0 18px 0 0;font-size:12px;background-position:right 2px center}
/* Nur sichtbar für Vorlesesoftware — das Feld trägt sein Label sonst nicht. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* In der Fußzeile ohne Rahmen — dort ist es eine Zeile unter Verweisen,
   kein Bedienelement in einer Leiste. */

.menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:9px;width:42px;height:42px;color:var(--text);cursor:pointer}
.menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---- Section rhythm ---- */
section{padding-block:clamp(70px,10vw,130px);scroll-margin-top:84px}
.sec-head{max-width:64ch;margin-bottom:52px;display:flex;flex-direction:column;gap:18px}

/* ---- HERO ---- */
.hero{padding-top:clamp(46px,6vw,84px);padding-bottom:clamp(60px,8vw,110px)}
.hero-copy{display:flex;flex-direction:column;gap:24px;max-width:72ch}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.trust{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.trust span{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em;border:1px solid var(--line);border-radius:7px;padding:7px 11px}

/* ---- HERO showcase (Foto -> Listing) ---- */
.showcase{margin-top:clamp(42px,6vw,74px);background:var(--panel);border:1px solid var(--line-2);border-radius:20px;padding:clamp(22px,3vw,34px);box-shadow:var(--lift)}
.sc-grid{display:grid;grid-template-columns:auto auto 1fr;gap:clamp(20px,3vw,42px);align-items:center}
.sc-h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.sc-input{display:flex;gap:9px;align-items:flex-end}
.frame{width:58px;height:74px;border-radius:8px;border:1px solid var(--line-2);
  background:repeating-linear-gradient(135deg,transparent,transparent 6px,var(--line) 6px,var(--line) 7px),var(--bg-2)}
.frame.tall{height:88px}
.skutag{width:66px;min-height:74px;border-radius:8px;background:var(--paper);color:var(--paper-ink);padding:10px 9px;display:flex;flex-direction:column;justify-content:space-between}
.skutag .t{font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;opacity:.55}
.skutag .s{font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-weight:700;font-size:13px;line-height:1.1}
.sc-arrow{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted)}
.sc-arrow .a{font-size:22px}
.sc-arrow small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--muted-2);text-align:center}
.listing{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--bg-2);display:grid;grid-template-columns:104px 1fr}
.listing .l-img{background:repeating-linear-gradient(135deg,transparent,transparent 7px,var(--line) 7px,var(--line) 8px),var(--panel-2);min-height:150px;position:relative}
.listing .l-img::after{content:"IMG";position:absolute;left:10px;top:9px;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--muted-2)}
.listing .l-body{padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.l-status{align-self:flex-start;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:3px 7px}
.l-title{font-family:var(--font-display);font-weight:700;font-size:15.5px;line-height:1.25;letter-spacing:-.01em}
.l-price{font-family:var(--font-mono);font-size:14px;display:flex;align-items:baseline;gap:9px}
.l-price .cmp{color:var(--muted-2);text-decoration:line-through;font-size:12px}
.l-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.l-tags span{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 7px}
.l-meta{font-family:var(--font-mono);font-size:10px;color:var(--muted-2);margin-top:4px;letter-spacing:.04em}

/* ---- PROBLEM ---- */
.backlog{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:4px}
.stat{background:var(--panel);padding:28px}
.stat .num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.3rem,4.6vw,3.2rem);letter-spacing:-.04em;line-height:1;display:flex;align-items:baseline;gap:9px}
.stat .num .of{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);letter-spacing:.02em}
.stat.b .num{color:var(--muted-2)}
.stat .cap{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:11px;letter-spacing:.01em}
.insights{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:26px}
.insight{display:flex;gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
.insight .m{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted-2);min-width:70px;flex:none;padding-top:1px}
.insight p{font-size:14.5px;color:var(--muted);line-height:1.5}

/* ---- STATEMENT (fixed layout) ---- */
/* Die Aussage-Abschnitte stehen auf dem WEISS der Seite, nicht auf einem
   getönten Balken (geändert am 07.08.2026).

   Vorher `--bg-2` als vollflächige Tönung: Von dreizehn Abschnitten waren
   genau diese zwei eingefärbt, und `--bg-2` war zu allem Überfluss der
   einzige warme Wert in einer sonst durchweg kühlen Palette (Blau unter
   Rot, während Text, Muted und Panel-2 alle Blau ÜBER Rot haben). Auf
   einer so grossen Fläche neben reinem Weiss liest sich das als Beige.

   Getragen wird der Abschnitt jetzt von den beiden Haarlinien oben und
   unten — und im Abschluss zusätzlich davon, dass die drei Schrittkarten
   endlich sichtbar werden: Sie füllen mit `--bg-2` und hatten bisher exakt
   dieselbe Farbe wie der Balken, auf dem sie lagen. */
.statement{background:var(--bg);border-block:1px solid var(--line)}
.statement .wrap{display:flex;flex-direction:column;gap:20px}
.statement h2{max-width:22ch}
.statement .lead{max-width:56ch}
.statement .kick{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.statement.center .wrap{align-items:center;text-align:center}
.statement.center h2{max-width:20ch}

/* ---- PIPELINE ---- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:4px;align-items:stretch}
.node{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:13px;position:relative;box-shadow:var(--panel-shadow)}
.node .nh{display:flex;align-items:center;justify-content:space-between}
.node .nh .no{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--muted-2)}
.node .nh .ic{width:34px;height:34px;border:1px solid var(--line-2);border-radius:9px;display:grid;place-items:center}
.node h3{font-size:1.02rem}
.node .desc{font-size:13.5px;color:var(--muted);line-height:1.5}
.node.arrowed::after{content:"";position:absolute;right:-11px;top:50%;width:14px;height:14px;transform:translateY(-50%) rotate(45deg);border-top:1px solid var(--line-3);border-right:1px solid var(--line-3);background:var(--bg);z-index:3}
.readout{margin-top:2px;display:grid;gap:5px;font-family:var(--font-mono);font-size:12px}
.readout .rr{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.readout .rr:last-child{border-bottom:none}
.readout .rr span{color:var(--muted-2)}
.readout .rr b{color:var(--text);font-weight:600}
.imgset{display:flex;gap:8px;flex-wrap:wrap}
.thumb{width:44px;height:54px;border-radius:7px;border:1px solid var(--line-2);
  background:repeating-linear-gradient(135deg,transparent,transparent 6px,var(--line) 6px,var(--line) 7px),var(--bg-2)}
.thumb.label{display:grid;place-items:center;background:var(--paper)}
.thumb.label b{font-family:var(--font-mono);font-size:9px;color:var(--paper-ink);transform:rotate(-8deg)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--font-mono);font-size:11px;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:4px 8px}
.chip.on{color:var(--text);border-color:var(--line-3)}
.statusbar{display:flex;align-items:center;margin-top:40px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.statusbar .sb{flex:1;padding:15px 16px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);border-right:1px solid var(--line);display:flex;align-items:center;gap:9px}
.statusbar .sb:last-child{border-right:none}
.statusbar .sb .dot{width:7px;height:7px;border-radius:50%;background:var(--muted-2)}
.statusbar .sb.done{color:var(--text)}
.statusbar .sb.done .dot{background:var(--text)}

/* ---- LABOR / TEAM ---- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:4px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px;display:flex;flex-direction:column;gap:13px;box-shadow:var(--panel-shadow)}
.card .ic{width:38px;height:38px;border:1px solid var(--line-2);border-radius:10px;display:grid;place-items:center}
.card h3{font-size:1.1rem}
.card p{color:var(--muted);font-size:14.5px;line-height:1.55}
.card .note{font-family:var(--font-mono);font-size:11.5px;color:var(--muted-2);border-top:1px solid var(--line);padding-top:14px;margin-top:2px}

/* ---- COMPARE ---- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:4px}
.cmp{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--panel-shadow)}
.cmp.after{border-color:var(--line-3)}
.cmp .tag{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cmp .big{font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,6vw,3.9rem);letter-spacing:-.04em;line-height:1;margin:14px 0 6px}
.cmp .unit{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.bar{height:8px;border-radius:999px;background:var(--bg-2);margin-top:22px;overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;width:0;border-radius:999px;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.cmp.before .bar>i{background:var(--muted-2)}
.cmp.after .bar>i{background:var(--text)}
.cmp .sub{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);margin-top:12px}
.cmp-note{text-align:center;margin-top:32px;font-family:var(--font-mono);font-size:14px;color:var(--muted)}
.cmp-note b{color:var(--text)}

/* ---- FEATURES (refined cards) ---- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.feat .f{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.feat .f::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--text);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.feat .f:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--lift)}
.feat .f:hover::before{transform:scaleX(1)}
.feat .f .fh{display:flex;align-items:center;justify-content:space-between}
.feat .f .ic{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:10px}
.feat .f .sku{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--muted-2)}
.feat .f h3{font-size:1.06rem;margin-top:2px}
.feat .f p{color:var(--muted);font-size:14px;line-height:1.5}
.also{margin-top:18px;border:1px solid var(--line);border-radius:12px;padding:18px 22px;display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center;background:var(--panel)}
.also .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.also .it{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:9px}
.also .it::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text);opacity:.55}

/* ---- OBJECTIONS (accordion) ---- */
.acc{display:grid;gap:12px}
.acc details{background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:border-color .18s}
.acc details[open]{border-color:var(--line-2)}
.acc summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.02rem,1.7vw,1.18rem);letter-spacing:-.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary:focus-visible{outline:2px solid var(--ring);outline-offset:-2px;border-radius:12px}
.acc .pm{position:relative;width:18px;height:18px;flex:none}
.acc .pm::before,.acc .pm::after{content:"";position:absolute;background:var(--muted);border-radius:2px;transition:transform .22s ease,opacity .22s ease}
.acc .pm::before{left:0;right:0;top:8px;height:2px}
.acc .pm::after{top:0;bottom:0;left:8px;width:2px}
.acc details[open] .pm::after{transform:scaleY(0);opacity:0}
.acc details[open] .pm::before{background:var(--text)}
.acc .body{padding:0 26px 24px;color:var(--muted);font-size:15px;line-height:1.62;max-width:70ch}

/* ---- PRICING ---- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:4px}
@media(max-width:1080px){.price-grid{grid-template-columns:1fr;max-width:600px;margin-left:auto;margin-right:auto}}
.ptag{position:relative;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;padding:34px 32px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--panel-shadow)}
.ptag.feature{border-color:var(--line-3);box-shadow:var(--lift)}
.ptag .p-badge{position:absolute;top:-12px;left:32px;background:var(--cta-bg);color:var(--cta-fg);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:7px}
.ptag .p-name{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ptag .p-price{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;line-height:1;display:flex;align-items:baseline;gap:10px}
.ptag .p-price .amt{font-size:clamp(2.6rem,5.5vw,3.6rem)}
.ptag .p-price .per{font-family:var(--font-mono);font-size:13.5px;color:var(--muted);letter-spacing:.01em}
.ptag .p-price.sm .amt{font-size:clamp(1.9rem,3.6vw,2.4rem)}
.ptag .p-tax{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);margin-top:-12px}
.ptag .p-desc{color:var(--muted);font-size:14.5px;min-height:42px;line-height:1.55}
.p-feats{display:flex;flex-direction:column;gap:11px}
.p-feats li{list-style:none;position:relative;padding-left:27px;font-size:14.5px;line-height:1.5;color:var(--text)}
.p-feats li svg{position:absolute;left:0;top:3px;width:16px;height:16px;stroke:var(--text);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.p-feats li span{color:var(--muted)}
/* `min-height` fuer zwei Zeilen: Die Fussnote steht UNTER dem Knopf, und
   der Kartenboden liegt fest. Eine zweizeilige Fussnote schiebt den Knopf
   also nach OBEN — gemessen am 12.08.2026 stand der Starter-Knopf
   dadurch 17 px hoeher als die beiden anderen, obwohl die Karten exakt
   gleich hoch sind.
   Mit reserviertem Platz fuer zwei Zeilen bleibt die Knopfhoehe gleich,
   ob die Fussnote nun ein- oder zweizeilig ist. */
.p-foot{font-family:var(--font-mono);font-size:11px;line-height:1.45;color:var(--muted-2);text-align:center;min-height:2.9em;display:flex;align-items:flex-start;justify-content:center}
/* Die Handlungsaufforderung sitzt in jeder Karte auf DERSELBEN Hoehe.
   `margin-top:auto` schiebt sie ans untere Ende des Flex-Stapels; die
   Fussnote folgt ihr.

   Ohne diese Zeile richtet sich die Knopfhoehe nach der Laenge des Textes
   darueber. Gemessen am 12.08.2026: 730 / 753 / 631 px — eine Spanne von
   122 px zwischen den drei Karten, allein weil eine Beschreibung eine
   Zeile laenger war und eine Karte ein Merkmal weniger hatte.

   Die Karten selbst waren immer gleich hoch (Grid-Zeile). Nur der Inhalt
   trieb auseinander, und genau das sieht man als „versetzt".

   WICHTIG: Damit ist die Ausrichtung unabhaengig vom Text. Wer kuenftig
   eine Beschreibung verlaengert oder ein Merkmal ergaenzt, verschiebt
   nichts mehr — vorher musste man dafuer die Texte gegeneinander
   auszaehlen. */
.ptag > .btn{margin-top:auto}

/* ---- FORM (anfrage page) ---- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:12px 13px;color:var(--text);font-size:15px;font-family:var(--font-body);width:100%;transition:border-color .16s,box-shadow .16s}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--line-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 10%,transparent)}
.field textarea{resize:vertical;min-height:120px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.slip{background:var(--panel);border:1px solid var(--line-2);border-radius:16px;padding:clamp(24px,3vw,34px);box-shadow:var(--lift)}
.slip-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;border-bottom:1px dashed var(--line-2);padding-bottom:16px;margin-bottom:22px}
.slip-note{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);margin-top:14px;text-align:center}
.form-ok{background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;padding:15px;font-family:var(--font-mono);font-size:13px;color:var(--text);text-align:center;margin-top:14px;display:none}
.form-ok.show{display:block}

/* anfrage page layout */
.req{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(64px,8vw,120px)}
.req-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:start}
.req-copy{display:flex;flex-direction:column;gap:20px}
.req-copy .expect{display:grid;gap:11px;margin-top:6px}
.req-copy .expect .e{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);display:flex;gap:11px;align-items:baseline;line-height:1.5}
.req-copy .expect .e::before{content:"—";color:var(--muted-2)}
.req-copy .mailto{font-family:var(--font-mono);font-size:14px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-2);align-self:flex-start;padding-bottom:2px;margin-top:4px}
.plan-pill{align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);border:1px solid var(--line-2);border-radius:999px;padding:7px 14px}
.back{font-family:var(--font-mono);font-size:13px;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.back:hover{color:var(--text)}

/* ---- CLOSE ---- */
.close .wrap{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.close h2{max-width:18ch}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--line);padding-block:38px;color:var(--muted-2)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--text)}
.foot .fl{display:flex;gap:22px;flex-wrap:wrap}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media(max-width:1000px){
  .sc-grid{grid-template-columns:1fr;gap:22px;justify-items:start}
  .sc-arrow{flex-direction:row;gap:12px}
  .sc-arrow .a{transform:rotate(90deg)}
  .flow{grid-template-columns:1fr 1fr}
  .node.arrowed::after{display:none}
  .feat{grid-template-columns:1fr 1fr}
  .req-grid{grid-template-columns:1fr;gap:32px}
  .statusbar{flex-wrap:wrap}
  .statusbar .sb{flex:1 1 45%;border-bottom:1px solid var(--line)}
}
@media(max-width:720px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:6px 26px 18px}
  .nav-links.open a{padding:14px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:grid;place-items:center}
  /* Der Einloggen-Knopf hat in der Kopfzeile keinen Platz mehr — er wandert
     ins aufgeklappte Menue (siehe .nav-anmelden weiter unten). Ohne diesen
     Ersatz fand ein bestehender Kunde den Login auf dem Telefon nur ganz
     unten im Fuss, und dafuer muss er die komplette Verkaufsseite scrollen. */
  .nav-cta .btn-ghost{display:none}
  .nav-links .nav-anmelden{display:block}
  /* Kein Platz mehr neben Marke, „Jetzt starten" und Menüknopf.
     Die Fußzeile trägt den Umschalter weiter — und wer aus dem Englischen
     kommt, wurde ohnehin schon auf /en geleitet. */
  .nav-cta .market-seg{display:none}
  .backlog,.insights,.flow,.compare,.feat,.price-grid,.two,.grid2{grid-template-columns:1fr}
  .listing{grid-template-columns:84px 1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.feat .f,.node,.acc details{transition:none}
}

/* =========================================================================
   v4 — Overrides & neue Komponenten (Hero 2-spaltig, Terminal, Batch,
   Theme-Toggle, gestaffelte Reveals, klareres Listing)
   ========================================================================= */

/* Theme toggle button */
.theme-toggle{width:42px;height:42px;border:1px solid var(--line-2);border-radius:9px;background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;transition:border-color .16s,background .16s}
.theme-toggle:hover{border-color:var(--line-3);background:var(--panel-2)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .moon{display:none}
.theme-toggle.light .sun{display:none}
.theme-toggle.light .moon{display:block}

/* Hero: zweispaltig, rechts das Terminal */
.hero-grid2{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,60px);align-items:center}
.hero-grid2 .hero-copy{max-width:none}

/* Upload-Terminal */
.console{background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden;box-shadow:var(--lift);font-family:var(--font-mono)}
.cons-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.1em;color:var(--muted-2)}
.cons-head .dots{display:flex;gap:6px}
.cons-head .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-3)}
.cons-body{padding:16px 18px;display:grid;gap:10px;align-content:start;min-height:236px}
.cons-line{font-size:12.5px;color:var(--muted);display:flex;gap:10px;align-items:baseline;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.cons-line.show{opacity:1;transform:none}
.cons-line .mk{color:var(--muted-2);flex:none;min-width:30px}
.cons-line.ok .mk{color:var(--text)}
.cons-line b{color:var(--text);font-weight:600}
.cons-cursor{display:inline-block;width:8px;height:15px;background:var(--text);vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cons-foot{padding:12px 18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted-2);display:flex;align-items:center;gap:9px}
.cons-foot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text);opacity:.55}

/* Showcase: Eingaben beschriften */
.sc-input{display:flex;gap:14px;align-items:flex-start}
.sc-fig{display:flex;flex-direction:column;gap:9px;align-items:center}
.sc-cap{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted-2);text-align:center;text-transform:uppercase;max-width:70px}

/* Showcase: klareres Shopify-Listing */
.listing{display:block;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--bg-2);grid-template-columns:none}
.l-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.l-head .l-status{color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:3px 8px}
.l-main{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:16px}
.l-main .l-img{min-height:92px;border-radius:9px;
  background:repeating-linear-gradient(135deg,transparent,transparent 7px,var(--line) 7px,var(--line) 8px),var(--panel-2);position:relative}
.l-main .l-img::after{content:"IMG";position:absolute;left:8px;top:7px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.12em;color:var(--muted-2)}
.l-info{display:flex;flex-direction:column;gap:9px;justify-content:center}
.l-info .l-title{font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.28;letter-spacing:-.01em}
.l-info .l-price{font-family:var(--font-mono);font-size:14px;display:flex;align-items:baseline;gap:9px}
.l-info .l-price .cmp{color:var(--muted-2);text-decoration:line-through;font-size:12px}
.l-attrs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.l-attrs .at{background:var(--bg-2);display:flex;justify-content:space-between;gap:8px;padding:10px 14px;font-family:var(--font-mono);font-size:11px}
.l-attrs .at span{color:var(--muted-2)}
.l-attrs .at b{color:var(--text);font-weight:600}
.l-note{padding:11px 16px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;color:var(--muted-2)}

/* Batch-Sektion */
.batch{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,3vw,38px);align-items:center;margin-top:4px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:20px;padding:clamp(24px,3vw,38px);box-shadow:var(--lift)}
.batch .sc-h{margin-bottom:14px}
.pile{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.pile .m{aspect-ratio:3/4;border-radius:4px;border:1px solid var(--line-2);
  background:repeating-linear-gradient(135deg,transparent,transparent 4px,var(--line) 4px,var(--line) 5px),var(--bg-2)}
.pile-badge{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:12px;letter-spacing:.04em}
.batch-mid{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted)}
.batch-mid .a{font-size:22px}
.batch-mid small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted-2);text-align:center;line-height:1.5}
.batch-out{display:grid;gap:8px}
.batch-out .po{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:12px;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.batch-out .po b{color:var(--text);font-weight:600}
.batch-out .po.more{border-style:dashed;color:var(--muted-2);justify-content:center}
.handsoff{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.ho{border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:var(--panel)}
.ho .m{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.03em;line-height:1.05}
.ho p{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}
.batch-line{text-align:center;margin-top:26px;font-family:var(--font-mono);font-size:14px;color:var(--muted)}
.batch-line b{color:var(--text)}

/* ---- Gestaffelte Reveals (geführter Scroll-Flow) ---- */
.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.04s}
.stagger.in>*:nth-child(2){transition-delay:.11s}
.stagger.in>*:nth-child(3){transition-delay:.18s}
.stagger.in>*:nth-child(4){transition-delay:.25s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
.stagger.in>*:nth-child(6){transition-delay:.39s}
.stagger.in>*:nth-child(7){transition-delay:.46s}
.stagger.in>*:nth-child(8){transition-delay:.53s}
.stagger.in>*:nth-child(9){transition-delay:.60s}
.stagger.in>*:nth-child(10){transition-delay:.67s}

@media(max-width:1000px){
  .hero-grid2{grid-template-columns:1fr;gap:36px}
  .batch{grid-template-columns:1fr;gap:24px}
  .batch-mid{flex-direction:row;gap:12px}
  .batch-mid .a{transform:rotate(90deg)}
  .handsoff{grid-template-columns:1fr}
  .l-main{grid-template-columns:76px 1fr}
}
@media(prefers-reduced-motion:reduce){
  .stagger>*{opacity:1;transform:none;transition:none}
  .cons-line{opacity:1;transform:none}
  .cons-cursor{animation:none}
}

/* =========================================================================
   v5 — Handy-Mockup, offenere Sektionen (weniger Boxen), Gründer-Nutzen
   ========================================================================= */

/* Handy-Mockup (App auf dem Smartphone) */
.phone-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.phone{width:min(292px,80%);border-radius:42px;border:1px solid var(--line-2);background:var(--panel);padding:9px;box-shadow:var(--lift);position:relative}
.phone::before{content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%);width:58px;height:6px;border-radius:999px;background:var(--line-2);z-index:3}
.phone-screen{border-radius:34px;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.ph-status{display:flex;justify-content:space-between;align-items:center;padding:13px 22px 8px;font-family:var(--font-mono);font-size:10px;color:var(--muted-2)}
.ph-sig{display:flex;gap:3px}.ph-sig i{width:4px;height:4px;border-radius:50%;background:var(--muted-2)}
.ph-app{padding:4px 16px 20px;display:grid;gap:12px}
.ph-head{display:flex;align-items:center;justify-content:space-between;padding:4px 0 2px}
.ph-brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.02em}
.ph-brand .mk{width:20px;height:20px;border-radius:6px;background:var(--cta-bg);color:var(--cta-fg);display:grid;place-items:center;font-size:12px}
.ph-av{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);background:var(--panel-2)}
.ph-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel)}
.ph-drop{border:1.5px dashed var(--line-2);border-radius:10px;padding:13px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ph-drop-t{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.ph-thumbs{display:flex;gap:4px}
.ph-thumbs i{width:19px;height:23px;border-radius:3px;border:1px solid var(--line-2);background:repeating-linear-gradient(135deg,transparent,transparent 3px,var(--line) 3px,var(--line) 4px),var(--bg-2)}
.ph-count{font-family:var(--font-mono);font-size:9px;color:var(--muted-2)}
.ph-btn{margin-top:10px;background:var(--cta-bg);color:var(--cta-fg);border-radius:8px;text-align:center;padding:9px;font-family:var(--font-mono);font-size:11px;font-weight:600}
.ph-prog{display:grid;gap:6px}
.ph-prog-bar{height:5px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.ph-prog-bar>i{display:block;height:100%;width:70%;background:var(--text);border-radius:999px;animation:phfill 1.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes phfill{from{width:0}}
.ph-prog span{font-family:var(--font-mono);font-size:9.5px;color:var(--muted)}
.ph-list{display:grid;gap:8px}
.ph-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.ph-thumb{width:30px;height:36px;border-radius:5px;border:1px solid var(--line-2);flex:none;
  background:repeating-linear-gradient(135deg,transparent,transparent 4px,var(--line) 4px,var(--line) 5px),var(--bg-2)}
.ph-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ph-info b{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-info small{font-family:var(--font-mono);font-size:9px;color:var(--muted-2)}
.ph-pill{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:3px 7px;border:1px solid var(--line-2);color:var(--muted);flex:none}
.ph-pill.live{color:var(--text);border-color:var(--line-3)}
.ph-pill.proc{animation:phpulse 1.5s ease-in-out infinite}
@keyframes phpulse{50%{opacity:.4}}
.phone-cap{font-family:var(--font-mono);font-size:11.5px;color:var(--muted-2);text-align:center;max-width:36ch;line-height:1.5}

/* Preisvorschlag-Label im Showcase */
.l-pricelbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--muted-2);border:1px solid var(--line-2);border-radius:5px;padding:2px 7px}

/* Features offener (weniger Kästen) */
.feat{grid-template-columns:repeat(3,1fr);gap:0 44px}
.feat .f{background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;padding:26px 0;box-shadow:none}
.feat .f::before{display:none}
.feat .f:hover{transform:none;box-shadow:none;background:transparent}
.feat .f:hover h3{opacity:.72}
.feat .f h3{transition:opacity .18s ease}

/* Hands-off offener */
.handsoff{grid-template-columns:repeat(3,1fr);gap:0 44px}
.ho{background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;padding:24px 0}

/* Gründer-Nutzen (offene Liste statt Boxen) */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:4px}
.benefit{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line);align-items:start}
.benefit .bn{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);padding-top:3px;letter-spacing:.06em}
.benefit h3{font-size:1.08rem;margin-bottom:8px}
.benefit p{color:var(--muted);font-size:14.5px;line-height:1.56}

@media(max-width:1000px){
  .feat,.handsoff,.benefits{grid-template-columns:1fr;gap:0}
}
@media(prefers-reduced-motion:reduce){
  .ph-prog-bar>i{animation:none}
  .ph-pill.proc{animation:none}
}

/* =========================================================================
   v6 — Kunden-/Trust-Sektion (Social Proof, offen statt boxig)
   ========================================================================= */
.trustbar{padding-block:clamp(46px,6vw,72px);border-bottom:1px solid var(--line)}
/* Die Kopfzeile traegt nur noch die Rubrik. Bis 12.08.2026 stand rechts
   daneben eine Gesamtzahl der Follower; sie ist entfernt worden. Das
   space-between bleibt trotzdem richtig — es schadet bei einem Kind nicht
   und haelt die Zeile offen, falls dort wieder etwas hinzukommt. */
.tb-head{margin-bottom:26px;display:flex;align-items:baseline;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.tb-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.tb-brand{display:block;text-decoration:none;color:var(--text);padding:26px 0;border-top:1px solid var(--line);transition:opacity .18s}
.tb-brand:hover{opacity:.7}
.tb-name{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3vw,1.9rem);letter-spacing:-.03em}
.tb-meta{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);margin-top:8px}
.tb-stats{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.tb-stats span{font-family:var(--font-mono);font-size:12px;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;letter-spacing:.01em}
@media(max-width:720px){ .tb-grid{grid-template-columns:1fr;gap:0} }

/* =========================================================================
   v7 — Zeit-Säulendiagramm (Ohne vs. Mit Klamox), visueller Vergleich
   ========================================================================= */
.tchart{margin-top:clamp(34px,5vw,52px)}
.tchart .cap{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:26px}
.chart{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,8vw,84px);align-items:end;max-width:600px}
.col{display:flex;flex-direction:column;align-items:center;text-align:center}
.col .cv{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.03em;margin-bottom:14px;line-height:1}
.col.mit .cv{color:var(--text)}
.col.ohne .cv{color:var(--muted)}
.col .track{width:min(148px,72%);height:clamp(190px,30vw,290px);display:flex;align-items:flex-end;border-bottom:1px solid var(--line-2)}
.col .cbar{width:100%;height:0;border-radius:9px 9px 0 0;transition:height 1.2s cubic-bezier(.2,.7,.2,1)}
.tchart.in .cbar{height:var(--h)}
.col.ohne .cbar{border:1px solid var(--line-2);border-bottom:none;
  background:repeating-linear-gradient(135deg,var(--line-3),var(--line-3) 5px,transparent 5px,transparent 11px),var(--panel-2)}
.col.mit .cbar{background:var(--text);min-height:7px}
.col .cl{font-family:var(--font-display);font-weight:700;font-size:1.04rem;margin-top:16px;letter-spacing:-.01em}
.col .cs{font-family:var(--font-mono);font-size:11.5px;color:var(--muted-2);margin-top:8px;max-width:23ch;line-height:1.5}
.tchart .concl{margin-top:30px;font-family:var(--font-mono);font-size:14px;color:var(--muted);line-height:1.6;max-width:52ch}
.tchart .concl b{color:var(--text)}
@media(prefers-reduced-motion:reduce){ .col .cbar{transition:none} }

/* =========================================================================
   v8 — Realistisches iPhone-Mockup (App 1:1) + gezeichnete Line-Art
   ersetzt die scratchy Diagonal-Platzhalter
   ========================================================================= */

/* ---- Line-Art (Sprite via <use>) ---- */
.art{display:block;color:var(--muted)}
.frame,.thumb,.l-img,.appui .pth{display:grid;place-items:center;overflow:hidden}
.frame{background:var(--panel-2);border:1px solid var(--line-2)}
.frame .art{width:58%;height:62%}
.thumb{background:var(--panel-2)}
.thumb .art{width:60%;height:64%}
.thumb.label{background:var(--paper)}
.l-main .l-img,.listing .l-img{background:var(--panel-2)}
.l-main .l-img::after{content:none}
.l-main .l-img .art{width:56%;height:60%}
/* Batch-Kacheln: flach statt Streifen */
.pile .m{background:var(--panel-2);border:1px solid var(--line)}

/* ---- Device (iPhone 15/16-Stil) ---- */
.device{--dlift:0 44px 90px -30px rgba(0,0,0,.6),0 16px 34px -14px rgba(0,0,0,.45);
  width:min(300px,82vw);aspect-ratio:300/620;margin-inline:auto;color:var(--text);font-family:var(--font-display);
  animation:floaty 6.5s ease-in-out infinite}
.device-frame{position:relative;width:100%;height:100%;border-radius:52px;padding:11px;
  background:linear-gradient(150deg,var(--line-2),var(--line-3) 30%,var(--panel-2) 55%,var(--line-3) 80%,var(--line-2));
  box-shadow:var(--dlift),inset 0 0 0 1.5px var(--line),inset 0 1px 1px rgba(255,255,255,.28),inset 0 -2px 3px rgba(0,0,0,.35)}
.device-frame::before{content:"";position:absolute;inset:2px;border-radius:50px;
  background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 22% 78%,rgba(255,255,255,.10));pointer-events:none;z-index:6}
.screen{position:relative;width:100%;height:100%;border-radius:41px;overflow:hidden;background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line-2);isolation:isolate}
.dynamic-island{position:absolute;top:19px;left:50%;transform:translateX(-50%);width:104px;height:31px;border-radius:18px;background:#000;z-index:5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.5)}
.status-bar{position:absolute;top:20px;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:0 26px;height:28px;color:var(--text);pointer-events:none}
.sb-time{font-weight:700;font-size:13.5px;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.sb-icons{display:flex;align-items:center;gap:5px}
.sb-ico{height:10px;width:auto;display:block;color:var(--text)}
.sb-batt{height:12px}
.home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:112px;height:5px;border-radius:5px;z-index:4;background:var(--text);opacity:.5}
@keyframes floaty{50%{transform:translateY(-8px)}}

/* ---- App-Screen (1:1 Klamox-Dashboard) ---- */
.appui{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:50px;background:var(--bg)}
.app-top{display:flex;align-items:center;justify-content:space-between;padding:4px 15px 8px}
.app-brand{display:flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-.035em;text-transform:uppercase}
.app-av{width:22px;height:22px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--font-mono);font-size:9px;color:var(--muted)}
.app-scroll{flex:1;overflow:hidden;padding:0 13px;display:flex;flex-direction:column;gap:10px}
.app-title{display:flex;align-items:center;justify-content:space-between}
.app-title b{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.02em}
.app-title .live{font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;gap:5px}
.app-title .live::before{content:"";width:5px;height:5px;border-radius:50%;background:#43b581;animation:phpulse 1.5s ease-in-out infinite}
.app-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.kpi{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--panel)}
.kpi .l{font-family:var(--font-mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.kpi .v{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.03em;margin-top:3px}
.plist2{display:grid;gap:7px}
.pcard{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:7px 8px;background:var(--panel)}
.pcard .pth{width:38px;height:38px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line-2);flex:none}
.pcard .pth .art{width:66%;height:66%;color:var(--muted)}
.pcard .pi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pcard .pi b{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .pi small{font-family:var(--font-mono);font-size:8px;color:var(--muted-2)}
.pcard .ps{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:8.5px;color:var(--muted);flex:none}
.sdot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--muted-2)}
.sdot.ok{background:#43b581}.sdot.warn{background:#d6a53a}
.app-nav{display:flex;justify-content:space-around;align-items:flex-start;padding:8px 4px 6px;border-top:1px solid var(--line);background:var(--panel)}
.navitem{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted-2);font-family:var(--font-mono);font-size:7.5px;letter-spacing:.02em;position:relative}
.navitem svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.navitem.active{color:var(--text)}
.navitem.active::before{content:"";position:absolute;top:-6px;width:4px;height:4px;border-radius:50%;background:var(--text)}

.phone-cap{font-family:var(--font-mono);font-size:11.5px;color:var(--muted-2);text-align:center;max-width:36ch;line-height:1.5;margin-top:18px}
.phone-wrap{display:flex;flex-direction:column;align-items:center}

@media(prefers-reduced-motion:reduce){
  .device{animation:none}
  .app-title .live::before{animation:none}
}

/* v8.1 — Home-Indicator sauber unter der Tab-Bar */
.app-nav{padding-bottom:13px}
.home-indicator{bottom:6px}

/* =========================================================================
   v9 — Mehrstufige App-Demo im Mockup (Schritt 1→2→3, auto-play)
   ========================================================================= */
.app-stage{position:relative;flex:1;overflow:hidden}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;padding:2px 13px 8px;
  opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.scr.on{opacity:1;transform:none;pointer-events:auto}
.scr-title{display:flex;align-items:center;justify-content:space-between}
.scr-title b{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.02em}
.scr-title .tag{font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;color:var(--muted-2)}

/* Schritt 1: Upload */
.updrop{border:1.6px dashed var(--line-2);border-radius:12px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--panel)}
.updrop .upic{width:30px;height:30px;border:1px solid var(--line-2);border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.updrop .upic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.updrop .upt{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.upthumbs{display:flex;gap:5px}
.upthumbs .t{width:26px;height:32px;border-radius:4px;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center}
.upthumbs .t .art{width:70%;height:70%;color:var(--muted)}
.upsplit{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);text-align:center}
.upsplit b{color:var(--text)}
.appbtn{margin-top:auto;background:var(--cta-bg);color:var(--cta-fg);border-radius:9px;text-align:center;padding:11px;font-family:var(--font-mono);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px}
.appbtn svg{width:13px;height:13px;fill:currentColor}

/* Schritt 2: Verarbeitung */
.vprog{display:grid;gap:7px}
.vprog .vlabel{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.vprog .vlabel b{color:var(--text)}
.vbar{height:7px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.vbar>i{display:block;height:100%;width:12%;background:var(--text);border-radius:999px;transition:width 2s cubic-bezier(.3,.7,.2,1)}
.vnote{font-family:var(--font-mono);font-size:8.5px;color:var(--muted-2);text-align:center;margin-top:auto}

/* Schritt 3: Shopify-Produkt (Detail, Bild oben, Sticky-CTA) */
.pd-img{height:132px;border-radius:11px;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center}
.pd-img .art{width:44%;height:66%;color:var(--muted)}
.pd-status{align-self:flex-start;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:3px 8px;display:flex;align-items:center;gap:6px}
.pd-status .sdot{background:var(--muted-2)}
.pd-title{font-family:var(--font-display);font-weight:700;font-size:14px;line-height:1.25;letter-spacing:-.01em}
.pd-price{font-family:var(--font-mono);font-size:14px;color:var(--text)}
.pd-attrs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:1px}
.pd-attrs .a{background:var(--panel);display:flex;justify-content:space-between;padding:7px 10px;font-family:var(--font-mono);font-size:9.5px}
.pd-attrs .a span{color:var(--muted-2)}.pd-attrs .a b{color:var(--text);font-weight:600}
.pd-cta{margin-top:auto;display:flex;gap:7px}
.pd-cta .b1{flex:1;background:var(--cta-bg);color:var(--cta-fg);border-radius:9px;text-align:center;padding:10px;font-family:var(--font-mono);font-size:10.5px;font-weight:600}
.pd-cta .b2{border:1px solid var(--line-2);color:var(--text);border-radius:9px;text-align:center;padding:10px 12px;font-family:var(--font-mono);font-size:10.5px}

/* Schritt-Anzeige unter dem Handy */
.stepper{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px}
.stepdots{display:flex;gap:7px;align-items:center}
.stepdots i{width:7px;height:7px;border-radius:50%;background:var(--line-3);transition:all .4s ease}
.stepdots i.on{background:var(--text);width:22px;border-radius:4px}
.stepcap{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-align:center}
.stepcap b{color:var(--text)}

/* =========================================================================
   v10 — Voller Prozess im Mockup: Workflow → Galerie → Batches → Upload
   ========================================================================= */
/* Workflow wählen */
.wf-list{display:grid;gap:8px}
.wf-opt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--panel)}
.wf-opt.sel{border-color:var(--line-3)}
.wf-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-3);flex:none;display:grid;place-items:center}
.wf-opt.sel .wf-radio{border-color:var(--text)}
.wf-opt.sel .wf-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--text)}
.wf-opt .wf-i{flex:1;min-width:0}
.wf-opt .wf-i b{font-size:12px}
.wf-opt .wf-i small{display:block;font-family:var(--font-mono);font-size:8.5px;color:var(--muted-2);margin-top:2px}

/* Galerie (privater Foto-Picker) */
.galbar{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:9.5px;color:var(--muted)}
.galbar b{color:var(--text)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.gcell{position:relative;aspect-ratio:1;border-radius:6px;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden}
.gcell .art{width:64%;height:64%;color:var(--muted)}
.gcell .gcheck{position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center}
.gcell .gcheck svg{width:8px;height:8px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gcell.off{opacity:.45}
.gcell.off .gcheck{display:none}

/* Batches */
.batchcards{display:grid;gap:7px}
.batchrow{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--panel)}
.batchrow .bl{font-family:var(--font-mono);font-size:9px;color:var(--text);white-space:nowrap}
.batchrow .bt{display:flex;gap:3px;flex:1;justify-content:flex-end}
.batchrow .bt i{width:14px;height:17px;border-radius:3px;background:var(--panel-2);border:1px solid var(--line-2)}
.batchrow.more{border-style:dashed;justify-content:center;color:var(--muted-2);font-family:var(--font-mono);font-size:9px}
.batchcap{font-family:var(--font-mono);font-size:9px;color:var(--muted-2);text-align:center}
.batchcap b{color:var(--text)}

/* v10.1 — Mini-Produktbilder in den Batch-Kästchen */
.batchrow .bt i{display:grid;place-items:center;overflow:hidden}
.batchrow .bt i .art{width:80%;height:80%;color:var(--muted)}

/* v11 — "Der wahre Feind": Text links, Diagramm rechts */
.statement.split .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,6vw,72px);align-items:center}
.statement.split .st-copy{display:flex;flex-direction:column;gap:20px}
.statement.split .tchart{margin-top:0}
.statement.split .tchart .chart{max-width:none}
@media(max-width:900px){
  .statement.split .wrap{grid-template-columns:1fr;gap:36px}
}

/* =========================================================================
   v12 — Logos einbinden + Dark-only (Light-Mode/Toggle entfernt)
   ========================================================================= */
.tb-logo-wrap{display:block;margin-bottom:2px}
.tb-logo{display:none;max-height:34px;max-width:190px;width:auto;height:auto}
.tb-logo-wrap.has-logo .tb-logo{display:block}
.tb-logo-wrap.has-logo .tb-name{display:none}

/* Dark fest verankern — Seite bleibt immer im aktuellen (weiß-auf-schwarz) Look */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --bg:#09090b; --bg-2:#0d0d10; --panel:#131317; --panel-2:#181820;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
  --text:#fafafa; --muted:#a1a1aa; --muted-2:#8b8b95;
  --cta-bg:#fafafa; --cta-fg:#0a0a0a; --cta-hover:#ffffff;
  --ring:rgba(255,255,255,.55);
  --panel-shadow:0 1px 0 rgba(255,255,255,.02);
  --lift:0 30px 70px -40px rgba(0,0,0,.9);
  --grid:rgba(255,255,255,.03);
  --paper:#e9e9ea; --paper-ink:#18181b; --paper-line:rgba(0,0,0,.14);
}
@media(prefers-color-scheme:light){
  :root{
    --bg:#09090b; --bg-2:#0d0d10; --panel:#131317; --panel-2:#181820;
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
    --text:#fafafa; --muted:#a1a1aa; --muted-2:#8b8b95;
    --cta-bg:#fafafa; --cta-fg:#0a0a0a; --cta-hover:#ffffff;
    --ring:rgba(255,255,255,.55);
    --panel-shadow:0 1px 0 rgba(255,255,255,.02);
    --lift:0 30px 70px -40px rgba(0,0,0,.9);
    --grid:rgba(255,255,255,.03);
    --paper:#e9e9ea; --paper-ink:#18181b; --paper-line:rgba(0,0,0,.14);
  }
}
.theme-toggle{display:none !important}

/* =========================================================================
   v13 — Light-only: Dark-Mode deaktiviert, ganze Seite hell/weiß
   (überschreibt v12; gilt in jedem Kontext)
   ========================================================================= */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --bg:#ffffff; --bg-2:#f6f6f7; --panel:#ffffff; --panel-2:#f4f4f5;
  --line:rgba(9,9,11,.10); --line-2:rgba(9,9,11,.16); --line-3:rgba(9,9,11,.30);
  --text:#0a0a0b; --muted:#54545c; --muted-2:#6a6a73;
  --cta-bg:#0a0a0b; --cta-fg:#fafafa; --cta-hover:#000000;
  --ring:rgba(9,9,11,.4);
  --panel-shadow:0 1px 2px rgba(9,9,11,.05),0 8px 24px -16px rgba(9,9,11,.16);
  --lift:0 24px 60px -32px rgba(9,9,11,.26);
  --grid:rgba(9,9,11,.04);
  --paper:#1a1a1e; --paper-ink:#f4f4f5; --paper-line:rgba(255,255,255,.16);
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#ffffff; --bg-2:#f6f6f7; --panel:#ffffff; --panel-2:#f4f4f5;
    --line:rgba(9,9,11,.10); --line-2:rgba(9,9,11,.16); --line-3:rgba(9,9,11,.30);
    --text:#0a0a0b; --muted:#54545c; --muted-2:#6a6a73;
    --cta-bg:#0a0a0b; --cta-fg:#fafafa; --cta-hover:#000000;
    --ring:rgba(9,9,11,.4);
    --panel-shadow:0 1px 2px rgba(9,9,11,.05),0 8px 24px -16px rgba(9,9,11,.16);
    --lift:0 24px 60px -32px rgba(9,9,11,.26);
    --grid:rgba(9,9,11,.04);
    --paper:#1a1a1e; --paper-ink:#f4f4f5; --paper-line:rgba(255,255,255,.16);
  }
}
@media(prefers-color-scheme:light){
  :root{
    --bg:#ffffff; --bg-2:#f6f6f7; --panel:#ffffff; --panel-2:#f4f4f5;
    --line:rgba(9,9,11,.10); --line-2:rgba(9,9,11,.16); --line-3:rgba(9,9,11,.30);
    --text:#0a0a0b; --muted:#54545c; --muted-2:#6a6a73;
    --cta-bg:#0a0a0b; --cta-fg:#fafafa; --cta-hover:#000000;
    --ring:rgba(9,9,11,.4);
    --panel-shadow:0 1px 2px rgba(9,9,11,.05),0 8px 24px -16px rgba(9,9,11,.16);
    --lift:0 24px 60px -32px rgba(9,9,11,.26);
    --grid:rgba(9,9,11,.04);
    --paper:#1a1a1e; --paper-ink:#f4f4f5; --paper-line:rgba(255,255,255,.16);
  }
}
/* Kunden-Logos umkehren — und zwar IMMER.
   Beide Dateien sind nachgemessen rein weiss (mittlere Helligkeit 255/255 ueber
   allen Pixeln mit Alpha > 40, PNG mit Transparenz). Die Seite ist seit dem
   07.08. in JEDER Theme-Einstellung weiss: `--bg` wird ab Zeile 853 dreimal auf
   #ffffff gesetzt — im Grundblock, unter prefers-color-scheme:dark UND unter
   prefers-color-scheme:light. Weiss auf Weiss waere unsichtbar, also invertieren.

   ACHTUNG, FALLE — hier am 11.08.2026 einmal hineingelaufen:
   Weiter oben (ab Zeile 817) steht der Kommentar „Dark fest verankern — Seite
   bleibt immer im aktuellen (weiss-auf-schwarz) Look" mit --bg:#09090b. Der ist
   ueberholt; die spaeteren Bloecke gewinnen. Wer diese Regel anfassen will,
   MISST den berechneten Wert im Browser (getComputedStyle(document.body)
   .backgroundColor) und glaubt keinem Kommentar in dieser Datei.

   Ein Ausfall faellt hier nicht auf: Der `onerror`-Rueckfall in home.html greift
   nur, wenn das Bild NICHT laedt. Ein geladenes, aber unsichtbares Logo blendet
   ueber `.has-logo` zusaetzlich den Schriftzug aus — sichtbar bleibt dann gar
   nichts, ohne jede Fehlermeldung. */
.tb-logo{filter:invert(1)}

/* =========================================================================
   v14 — Vorher / Nachher (Ohne Klamox vs. Mit Klamox)
   ========================================================================= */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:4px}
.ba-col{border:1px solid var(--line);border-radius:16px;padding:clamp(24px,3vw,32px);background:var(--panel)}
.ba-col.after{border-color:var(--line-3);box-shadow:var(--lift)}
.ba-head{display:flex;flex-direction:column;gap:5px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.ba-tag{font-family:var(--font-display);font-weight:800;font-size:clamp(1.2rem,2.4vw,1.5rem);letter-spacing:-.02em}
.ba-col.before .ba-tag{color:var(--muted)}
.ba-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.ba-list{display:flex;flex-direction:column;gap:14px}
.ba-list li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.ba-list li::before{font-family:var(--font-mono);font-weight:700;flex:none;margin-top:1px;width:14px}
.ba-col.before .ba-list li{color:var(--muted)}
.ba-col.before .ba-list li::before{content:"\2715";color:var(--muted-2)}
.ba-col.after .ba-list li{color:var(--text)}
.ba-col.after .ba-list li::before{content:"\2713";color:var(--text)}
@media(max-width:760px){ .ba-grid{grid-template-columns:1fr} }

/* v14.1 — "Hunderte Fotos"-Kacheln mit Mini-Kleidung füllen */
.pile .m{display:grid;place-items:center;overflow:hidden}
.pile .m .art{width:72%;height:72%;color:var(--muted)}

/* =========================================================================
   v15 — Foto-Haufen nach Produkt gruppieren (gleiche Teil-Fotos + SKU zusammen)
   ========================================================================= */
.pile{display:flex;flex-direction:column;gap:10px}
.pgroup{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;position:relative;padding-left:13px}
.pgroup::before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:3px;border-radius:3px;background:var(--line-3)}
.pile .m.tag{background:var(--paper);border-color:var(--paper-line)}
.pile .m.tag .art{color:var(--paper-ink)}
.pile-note{font-family:var(--font-mono);font-size:10px;color:var(--muted-2);margin-top:4px;line-height:1.5}

/* =========================================================================
   v16 — Scroll-Pfeil am Hero-Ende + "Für Desktop & Handy"-Hinweis
   ========================================================================= */
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:7px;width:max-content;margin:clamp(30px,5vw,54px) auto 0;
  color:var(--muted);text-decoration:none;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;transition:color .2s}
.scroll-cue:hover{color:var(--text)}
.scroll-cue svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero-note{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:4px}
.hn-i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media(prefers-reduced-motion:reduce){ .scroll-cue svg{animation:none} }

/* =========================================================================
   v17 — Anker-Sprung fixen (kein Riesenabstand beim Reiter-Klick) +
   Scroll-Pfeil zwischen Mockup und Grafik
   ========================================================================= */
/* kleinerer oberer Innenabstand -> beim Sprung landet die Überschrift knapp
   unter dem Header; großzügiger Abstand bleibt über die untere Padding */
section{padding-top:clamp(30px,4vw,52px);padding-bottom:clamp(66px,9vw,118px);scroll-margin-top:80px}
.scroll-cue{margin:clamp(16px,2.5vw,30px) auto 0}
.scroll-cue svg{width:26px;height:26px}

/* v17.1 — geschwungener Scroll-Pfeil (Bogen + Spitze nach unten) */
.scroll-cue svg{width:40px;height:auto;stroke-width:2.4}

/* =========================================================================
   v18 — Großer geschwungener Pfeil rechts (vom Mockup als Halbkreis nach
   unten zur Grafik). Ersetzt den kleinen Scroll-Pfeil.
   ========================================================================= */
.hero .wrap{position:relative}
.hero-grid2{position:relative;z-index:1}
.hero-arrow{position:absolute;z-index:0;pointer-events:none;color:var(--muted-2);
  top:clamp(56px,7vw,110px);
  right:clamp(2px,2.5vw,52px);
  width:clamp(84px,11vw,150px);height:auto}
@media(max-width:1000px){ .hero-arrow{display:none} }

/* v18.1 — Pfeil größer, rechts neben dem Handy, bis zur Grafik */
.hero-arrow{top:clamp(4px,1vw,20px);right:clamp(0px,1.2vw,22px);width:clamp(112px,13.5vw,172px)}

/* v18.2 — Pfeil dicker, runder, mehr zum Rand */
.hero-arrow{top:clamp(0px,0.5vw,14px);right:clamp(-8px,0vw,8px);width:clamp(150px,17vw,208px)}

/* v19.1 — Header-CTA "Zugang anfragen" auf dem Handy kleiner */
@media(max-width:720px){
  .nav{gap:12px}
  .nav-cta{gap:8px}
  .nav-cta .btn-primary{padding:9px 14px;font-size:12px;border-radius:9px}
}
@media(max-width:400px){
  .nav-cta .btn-primary{padding:8px 12px;font-size:11px}
}

/* ═══ MARKTWAHL — eigenes Aufklappmenü ═══════════════════════
   Vorher ein natives <select>: Der Auslöser war gestylt, die AUFGEKLAPPTE
   Liste kam aber vom Betriebssystem — grau, systemschriftig, auf jedem
   Rechner anders und mit keinem Mittel gestaltbar. Genau das fiel auf.

   Deshalb hier ein eigenes Menü mit denselben Rollen, die auch die App
   benutzt (combobox/listbox/option). Es zeigt in der Liste die VOLLEN
   Namen — im Auslöser steht seit dem 06.08.2026 eine Weltkugel statt des
   Länderkürzels; der Name des gewählten Marktes wandert dafür in `title`
   und `aria-label`, geht also nicht verloren.
   ═══════════════════════════════════════════════════════════ */
.markt{position:relative}
/* min-height ist hier KEINE Vorsichtsmassnahme, sondern eine Reparatur:
   Solange „DE" im Knopf stand, spannte dieser Textknoten eine Zeilenbox von
   20,9 px auf und der Knopf war 47 px hoch. Mit der Weltkugel (07.08.2026)
   ist das hoechste Element im Flex-Container nur noch das 17-px-SVG — der
   Knopf schrumpfte damit auf 43 px und fiel unter den 44-px-Richtwert fuer
   Tippflaechen. Die Hoehe darf nicht davon abhaengen, wie gross zufaellig das
   Zeichen darin ist. */
.markt-knopf{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:13.5px;line-height:1.55;padding:12px 12px;min-height:44px;box-sizing:border-box;
  border:1px solid var(--line-2);
  border-radius:10px;background:transparent;color:var(--text);cursor:pointer}
.markt-knopf:hover{border-color:var(--line)}
.markt-knopf:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.markt-knopf svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  opacity:.55;transition:transform .15s ease}
/* Der Auslöser trägt eine Weltkugel statt des Länderkürzels. Zwei Gründe:
   „CA" oder „IE" muss man kennen, um es zu lesen — die Kugel ist das
   international eingeführte Zeichen für „Sprache und Region", und sie muss
   nicht übersetzt werden. Etwas größer und kräftiger als der Pfeil, weil sie
   jetzt die Beschriftung IST und nicht nur eine Verzierung daneben. */
.markt-knopf .markt-globus{width:17px;height:17px;stroke-width:1.5;opacity:.72}
.markt-knopf:hover .markt-globus{opacity:1}
/* Nur der PFEIL dreht sich beim Aufklappen. Vorher stand hier
   `.markt-knopf svg` — die Weltkugel hätte sich mitgedreht, und eine
   rotierende Erdkugel liest sich als Ladeanzeige, nicht als offenes Menü. */
.markt[data-offen="true"] .markt-knopf .markt-pfeil{transform:rotate(180deg)}
/* Kein verstecktes Textfeld im Knopf: Der Knopf trägt ein `aria-label`, und
   das überstimmt jeden Inhalt — eine unsichtbare Beschriftung darin würde von
   Vorlesesoftware gar nicht erst gelesen. Der Marktname steht deshalb IM
   `aria-label` selbst, fortgeschrieben von zeige(). */

.markt-menue{position:absolute;top:calc(100% + 6px);right:0;z-index:70;min-width:230px;
  margin:0;padding:6px;list-style:none;border:1px solid var(--line-2);border-radius:12px;
  background:var(--bg);box-shadow:0 12px 32px rgba(0,0,0,.13);
  max-height:min(70vh,420px);overflow-y:auto}
.markt[data-offen="false"] .markt-menue{display:none}
.markt-gruppe{padding:8px 10px 4px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.markt-eintrag{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text)}
.markt-eintrag:hover,.markt-eintrag[data-aktiv="true"]{background:var(--line-2)}
.markt-eintrag .kuerzel{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
/* Ohne Haken traegt die Hervorhebung allein: kraeftigere Schrift,
   volle Textfarbe, ruhige Flaeche. */
.markt-eintrag[aria-selected="true"]{font-weight:600;color:var(--text)}
.markt-eintrag[aria-selected="true"] .kuerzel{color:var(--text)}
/* Randlos und klein — aber mit einer Tippflaeche, die man auch trifft.
   Auf dem Telefon ist der Waehler im Kopf ausgeblendet (.nav-cta .market-seg),
   dieser hier ist also die EINZIGE Sprachumschaltung der ganzen Seite. Er mass
   43x17 px; der Richtwert fuer eine Tippflaeche sind 44 px. Die Polsterung
   vergroessert nur die Flaeche, nicht das Sichtbare — der negative Rand haelt
   den Fuss dabei in derselben Zeilenhoehe wie vorher.

   ABSICHTLICH UNSYMMETRISCH: Bei gleichmaessigen 14 px begann die Tippflaeche
   exakt an der Unterkante des Absatzes darueber (gemessen: 0 px Luft) — die
   Polsterung frass genau die 14 px Abstand, die .fg-marke mit `gap` setzt.
   Gestohlen wird dadurch zwar kein Klick, weil der Absatz nicht bedienbar ist;
   eine Flaeche, die unmittelbar unter dem letzten Wort beginnt, ist trotzdem
   falsch. Nach UNTEN schliesst leerer Fussbereich an, dorthin darf sie. */
.foot .markt-knopf{border:0;padding:5px 8px 23px 0;margin:-5px 0 -23px;font-size:12px}
.foot .markt-menue{right:auto;left:0;top:auto;bottom:calc(100% + 6px)}
.markt-suche{padding:4px 4px 8px}
.markt-suche input{width:100%;box-sizing:border-box;font-family:inherit;font-size:13.5px;
  padding:9px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);
  color:var(--text)}
.markt-suche input:focus-visible{outline:2px solid var(--ring);outline-offset:1px;border-color:var(--line)}
.markt-leer{padding:9px 10px;font-size:13.5px;color:var(--muted)}

/* ══════════════════════════════════════════════════════════════════
   ABSCHLUSS (09 · Loslegen) UND GROSSER SEITENFUSS
   ──────────────────────────────────────────────────────────────────
   Vorher endete die Seite mit drei Zeilen: Kicker, Schlagzeile, ein
   Knopf — die Formel, mit der jede zusammengeklickte Seite aufhört.
   Darunter eine einzelne Reihe Links als Fuss. Zusammen ergab das viel
   Leere und keine Aussage an der Stelle, an der sich jemand entscheidet.

   Der Abschluss traegt jetzt die Nummer 09 und fuehrt die Gliederung
   der Seite zu Ende, statt daneben zu stehen. Das ist der eigentliche
   Unterschied: nicht mehr Zierrat, sondern ein weiteres Kapitel — das
   letzte, das die Frage „und jetzt?" beantwortet.

   ADDITIV gebaut: `.foot` bleibt unveraendert, weil anfrage.html und
   anfrage.en.html dieselbe Datei laden. Der grosse Fuss haengt an der
   ZUSAETZLICHEN Klasse `.foot-gross`; auf einer Formularseite waere er
   fehl am Platz.
   ══════════════════════════════════════════════════════════════════ */

.close .wrap{align-items:stretch;text-align:left;gap:0}
.close .sec-head{margin-bottom:clamp(38px,5vw,58px)}
.close h2{max-width:20ch}

/* ── Die drei Schritte ── */
.los-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.los-step{
  background:var(--bg-2);padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:10px;
}
/* Die Schrittnummer traegt die Gliederung — gross genug, um beim
   Ueberfliegen die Reihenfolge zu zeigen, ohne die Schlagzeile zu
   ueberbieten. */
.los-n{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;
  color:var(--muted-2);
}
.los-step h3{
  font-family:var(--font-display);font-weight:750;
  font-size:clamp(1.06rem,1.5vw,1.24rem);letter-spacing:-.02em;
  line-height:1.25;margin:0;
}
.los-step p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0}
/* Die Zeitangabe steht unten und ist der eigentliche Einwand-Killer:
   „wie lange dauert das" wird beantwortet, bevor die Frage kommt. */
.los-time{
  margin-top:auto;padding-top:14px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--text);display:flex;align-items:center;gap:7px;
}
.los-time::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--text);opacity:.5;flex:none;
}

/* ── Handlungsleiste ── */
.los-act{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:clamp(30px,3.6vw,44px);
}
.los-note{
  font-family:var(--font-mono);font-size:11.5px;color:var(--muted-2);
  margin-left:4px;
}

/* ── Vertrauenszeile ── */

/* ── Grosser Seitenfuss ── */
.foot-gross{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.foot-gross .fg-marke{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.foot-gross .fg-wort{
  font-family:var(--font-display);font-weight:800;
  font-size:1.15rem;letter-spacing:.14em;color:var(--text);
  line-height:1;text-transform:uppercase;
}
.foot-gross .fg-sub{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-2);
}
.foot-gross .fg-satz{
  font-size:.9rem;line-height:1.6;color:var(--muted);max-width:34ch;
}
.foot-gross .fg-spalte{display:flex;flex-direction:column;gap:11px}
.foot-gross .fg-titel{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:2px;
}
.foot-gross .fg-spalte a{font-size:.9rem;line-height:1.4}

/* Abschlusszeile — Kleingedrucktes, klar abgesetzt */
.foot-unten{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:12px;
  margin-top:clamp(30px,4vw,46px);padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;color:var(--muted-2);
}

@media (max-width:900px){
  .los-steps{grid-template-columns:1fr}
  .foot-gross{grid-template-columns:1fr 1fr;gap:32px}
  .foot-gross .fg-marke{grid-column:1 / -1}
}
@media (max-width:560px){
  .foot-gross{grid-template-columns:1fr}
  }

/* ── Sprungmarke zum Inhalt (WCAG 2.4.1 „Bypass Blocks", Stufe A) ──
   Erstes fokussierbares Element der Seite. Sie ueberspringt die
   Kopfnavigation fuer alle, die mit der Tastatur oder einem
   Vorleseprogramm arbeiten.

   Bewusst aus dem Bild geschoben statt display:none — Letzteres nimmt das
   Element aus der Tabreihenfolge, und dann gibt es die Sprungmarke zwar,
   aber niemand erreicht sie. Das Ziel (#top) traegt tabindex="-1", sonst
   landet der Fokus am Anker statt im Inhalt. */
.sprung-zum-inhalt{position:absolute;left:-9999px;top:0;z-index:200;
  padding:.75rem 1.25rem;border-radius:0 0 8px 0;background:#111;color:#fff;
  font-size:.875rem;font-weight:600;text-decoration:none}
.sprung-zum-inhalt:focus{left:0}
#top:focus{outline:none}


/* ── Grenzen („Was Klamox nicht verspricht") ────────────────
   Bewusst ruhiger gesetzt als die Verkaufsabschnitte: kein Rahmen,
   keine Nummern, keine Akzentfarbe. Der Abschnitt soll gelesen und
   geglaubt werden, nicht beworben — eine als Werbeflaeche gestaltete
   Ehrlichkeitserklaerung liest sich wie ein weiteres Versprechen. */
#grenzen{border-top:1px solid var(--line)}
.gr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:34px 40px}
.gr-item h3{font-size:1.02rem;margin-bottom:9px;line-height:1.35}
.gr-item p{color:var(--muted);font-size:14.5px;line-height:1.58;max-width:46ch}
@media (max-width:640px){.gr-grid{gap:28px}}