/* ═══════════════════════════════════════════════════════════════════════════
   Schrift — Instrument Sans, selbst ausgeliefert
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ Die Datei liegt BEI UNS. Ein Einbinden von fremden Servern schickt die IP
   jedes Besuchers zu einem Dritten — ohne Einwilligung nicht zulässig, und
   ausserdem eine Ladeverzögerung, die niemand braucht.

   Warum überhaupt eine eigene Schrift: Systemschrift ist der grösste einzelne
   Grund, warum eine Seite generisch wirkt. Ein Schriftschnitt mit eigener
   Handschrift hebt den Eindruck mehr als jede weitere Animation.
*/
@font-face{
  font-family:'Instrument'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('lib/schrift/instrument-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('lib/schrift/instrument-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Gestaltung — Obsidian
   ═══════════════════════════════════════════════════════════════════════════
   WARUM DIESE RICHTUNG

   Vorher: Tannengrün auf Papierweiss. Das war die Identität eines anderen
   Produkts aus demselben Haus — und für ein eigenständiges Werkzeug die
   falsche Anleihe.

   Jetzt: fast schwarzer Grund mit einem lebendigen Lichtfeld. Der Register ist
   der von Werkzeugen, die Entwickler und Betriebe gleichermassen ernst nehmen —
   dicht, dunkel, präzise, mit genau einem farbigen Ereignis.

   Bewusst NICHT der rosa-violette Farbverlaufsklecks, den derzeit jedes
   KI-Produkt trägt. Stattdessen Licht: Violett nach Cyan, als Leuchten hinter
   der Fläche statt als Farbe darauf. Dazu ein warmer Gegenpol in Bernstein für
   die Momente, in denen etwas passiert.

   Die Bewegung ist nicht Deko. Verstreute Punkte ordnen sich zu einem Raster —
   das ist die Aussage des Produkts in einem Bild.
*/

:root{
  /* Grund */
  --nacht:      #07070B;
  --nacht-2:    #0C0C13;
  --flaeche:    #11111A;
  --flaeche-2:  #171722;
  --kante:      rgba(255,255,255,.08);
  --kante-hell: rgba(255,255,255,.14);

  /* Schrift */
  --hell:    #F7F7FA;
  --hell-2:  #A8A8B8;
  --hell-3:  #6C6C80;

  /* Licht — als Leuchten, nicht als Fläche */
  --violett: #7C5CFF;
  --cyan:    #45D9FF;
  --bernstein:#FF9A4A;
  --licht: linear-gradient(115deg, var(--violett), var(--cyan));

  --r:   16px;
  --r-s: 10px;
  --r-l: 26px;
  --e: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{
  /* Sanftes Scrollen als Grundverhalten — der Rest kommt aus szene.js */
  scroll-behavior:smooth;
  background:var(--nacht);
}
body{
  margin:0; background:var(--nacht); color:var(--hell);
  font:400 16.5px/1.6 'Instrument',ui-sans-serif,-apple-system,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
p{max-width:58ch; color:var(--hell-2)}
a{color:inherit}

h1,h2,h3{
  margin:0; font-weight:600; letter-spacing:-.038em; line-height:1.0;
  text-wrap:balance; font-feature-settings:'ss01' 1;
}
h1{font-size:clamp(2.9rem, 7.2vw, 6.4rem)}
h2{font-size:clamp(2rem, 4.4vw, 3.6rem)}
h3{font-size:1.15rem; letter-spacing:-.015em; line-height:1.3; font-weight:580}

.mitte{max-width:1240px; margin:0 auto; padding:0 28px}
.eng{max-width:820px; margin:0 auto; padding:0 28px}

/* Text mit Licht gefüllt — sparsam, für genau ein Wort je Seite */
.leucht{
  background:var(--licht); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.braue{
  font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hell-3); margin:0 0 20px;
}

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
.knopf{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:999px; border:0; cursor:pointer;
  font:600 15px inherit; letter-spacing:-.01em; text-decoration:none;
  color:#08080C; background:var(--hell);
  transition:transform .35s var(--e), box-shadow .35s var(--e);
  box-shadow:0 0 0 0 rgba(124,92,255,0);
}
.knopf:hover{transform:translateY(-2px); box-shadow:0 14px 40px -12px rgba(124,92,255,.55)}
.knopf:active{transform:translateY(0)}
.knopf.licht{
  color:var(--hell); background:var(--licht);
}
.knopf.leer{
  background:transparent; color:var(--hell); box-shadow:inset 0 0 0 1px var(--kante-hell);
}
.knopf.leer:hover{background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--kante-hell)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}

/* ── Kopfleiste — schwebend, ohne Kante ─────────────────────────────────── */
/* ⚠️ KEIN Balken. Eine Leiste mit Hintergrund legt sich wie eine
   Verwaltungsoberfläche über die Seite. Marke und Einstieg schweben frei —
   sichtbar, ohne etwas abzuschneiden. */
.leiste{
  position:absolute; top:0; left:0; right:0; z-index:80; background:none;
  color:var(--hell);
}
.leiste .innen{display:flex; align-items:center; gap:26px; height:76px}
.marke-wort{font-weight:620; letter-spacing:-.04em; font-size:19px; text-decoration:none; color:var(--hell)}
.leiste nav{display:flex; gap:26px; margin-left:auto}
.leiste nav a{color:var(--hell-2); text-decoration:none; font-size:14.5px; transition:color .2s}
.leiste nav a:hover{color:var(--hell)}

/* ── Kopfbereich mit Lichtfeld ──────────────────────────────────────────── */
.kopf{position:relative; min-height:100svh; display:grid; align-items:center; overflow:hidden}
#szene{position:absolute; inset:0; z-index:0; opacity:0; transition:opacity 1.6s ease}
#szene.da{opacity:1}
/* Rückfall, falls WebGL fehlt: ein ruhiges Leuchten statt einer leeren Fläche. */
.kopf::before{
  content:''; position:absolute; z-index:0; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(58% 48% at 26% 34%, rgba(124,92,255,.22), transparent 64%),
    radial-gradient(50% 44% at 76% 64%, rgba(69,217,255,.15), transparent 66%);
  filter:blur(38px); pointer-events:none;
}
/* Ein dunkler Schleier unter der Schrift: Das Feld darf leuchten, der Text
   muss trotzdem auf jedem Bildschirm lesbar bleiben. */
.kopf::after{
  content:''; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(7,7,11,.72) 0%, rgba(7,7,11,.34) 46%, transparent 78%);
}
.kopf .innen{position:relative; z-index:2; padding:150px 0 100px}
.kopf h1{max-width:15ch}
.kopf .unter{
  font-size:clamp(1.05rem,1.7vw,1.25rem); color:var(--hell-2);
  margin:28px 0 40px; max-width:44ch;
}
.kopf .knoepfe{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.kopf .fein{font-size:13px; color:var(--hell-3); margin-top:22px}

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
/* Enger als zuvor: clamp(…,170px) erzeugte auf grossen Bildschirmen
   Leerflächen, die wie fehlender Inhalt aussehen. */
section{position:relative; padding:clamp(72px,7.5vw,116px) 0}
.trenn{border-top:1px solid var(--kante)}

/* ── Produktbilder: echte Oberfläche, in HTML gebaut ────────────────────── */
/* Statt Bestandsfotos oder Illustrationen zeigen wir die Oberfläche selbst.
   Ehrlicher, schärfer auf jedem Bildschirm — und es gibt nichts zu erfinden. */
.bild{
  position:relative; border-radius:var(--r-l); overflow:hidden;
  background:var(--flaeche); box-shadow:inset 0 0 0 1px var(--kante),
    0 40px 90px -40px rgba(0,0,0,.9);
}
.bild::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(124,92,255,.09), transparent 42%);
}
.bild-kopf{
  display:flex; align-items:center; gap:9px; padding:14px 20px;
  border-bottom:1px solid var(--kante); background:rgba(255,255,255,.02);
}
.bild-kopf i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.bild-kopf b{margin-left:8px; font-size:12.5px; font-weight:520; color:var(--hell-3)}
.bild-leib{padding:22px}

.zeile{display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--kante)}
.zeile:last-child{border-bottom:0}
.zeile .punkt{flex:none;width:7px;height:7px;border-radius:50%;margin-top:7px;background:var(--bernstein)}
.zeile .punkt.gut{background:var(--cyan)}
.zeile p{margin:0;font-size:14px;color:var(--hell);max-width:none}
.zeile small{display:block;color:var(--hell-3);font-size:12.5px;margin-top:3px}

/* Pipeline-Vorschau */
.spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.spalte{background:rgba(255,255,255,.025);border-radius:12px;padding:12px}
.spalte b{display:block;font-size:11px;font-weight:600;color:var(--hell-3);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.kachel{background:var(--flaeche-2);border-radius:9px;padding:10px 11px;margin-bottom:7px;
  font-size:12.5px;line-height:1.4;box-shadow:inset 0 0 0 1px var(--kante)}
.kachel span{display:block;color:var(--hell-3);font-size:11.5px;margin-top:3px}

/* ── Raster ─────────────────────────────────────────────────────────────── */
.raster{display:grid;gap:22px}
.r2{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.karte{
  background:var(--flaeche); border-radius:var(--r); padding:30px;
  box-shadow:inset 0 0 0 1px var(--kante);
  transition:box-shadow .4s var(--e), transform .4s var(--e);
}
.karte:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--kante-hell)}
.karte h3{margin-bottom:10px}
.karte p{font-size:14.5px;margin:0}
.karte .ziffer{
  font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--hell-3);
  display:block;margin-bottom:16px;
}

/* ── Preise ─────────────────────────────────────────────────────────────── */
.preise{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:start}
.preis{background:var(--flaeche);border-radius:var(--r);padding:32px 28px;
  box-shadow:inset 0 0 0 1px var(--kante);display:flex;flex-direction:column}
.preis.betont{box-shadow:inset 0 0 0 1px rgba(124,92,255,.5), 0 30px 70px -40px rgba(124,92,255,.6)}
.preis .n{font-size:13px;font-weight:600;color:var(--hell-3);letter-spacing:.08em;text-transform:uppercase}
.preis .z{font-size:3rem;font-weight:600;letter-spacing:-.045em;margin:12px 0 2px;font-variant-numeric:tabular-nums}
.preis .z small{font-size:.9rem;font-weight:400;color:var(--hell-3);letter-spacing:0}
.preis ul{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:11px}
.preis li{font-size:14px;color:var(--hell-2);display:flex;gap:10px;align-items:flex-start}
.preis li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--cyan);margin-top:8px}
.preis li.aus{color:var(--hell-3)}
.preis li.aus::before{background:rgba(255,255,255,.14)}
.preis .knopf{margin-top:auto;justify-content:center}

/* ── Fuss ───────────────────────────────────────────────────────────────── */
footer{padding:80px 0 50px;border-top:1px solid var(--kante);font-size:14px;color:var(--hell-3)}
footer a{text-decoration:none;color:var(--hell-2)}
footer a:hover{color:var(--hell)}
footer .reihen{display:flex;gap:56px;flex-wrap:wrap;margin-bottom:44px}
footer .spalte-f{display:grid;gap:11px;align-content:start}
footer .spalte-f b{color:var(--hell);font-size:13px;font-weight:560;margin-bottom:2px}

/* ── Bewegung ───────────────────────────────────────────────────────────── */
.auf{opacity:0;transform:translateY(26px);transition:opacity .9s var(--e),transform .9s var(--e)}
.auf.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .auf{opacity:1;transform:none;transition:none}
  #szene{display:none}
}

@media (max-width:820px){
  .leiste nav{display:none}
  .spalten{grid-template-columns:repeat(2,1fr)}
  .kopf .innen{padding:120px 0 70px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERSTELLUNGSSTRECKE
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ Diese Klassen fehlten nach dem Umbau des Stylesheets — die Strecke lud
   eine CSS, die ihre eigenen Bauteile nicht mehr kannte, und sah aus wie
   rohes HTML. Ein Umbau der Gestaltung muss IMMER beide Seiten mitnehmen.
*/
.strecke{min-height:100svh;display:flex;flex-direction:column;position:relative}
/* Ein ruhiges Leuchten auch hier — die Strecke soll nicht in ein Loch fallen. */
.strecke::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 40% at 14% 0%, rgba(124,92,255,.16), transparent 62%),
    radial-gradient(46% 38% at 90% 12%, rgba(69,217,255,.10), transparent 64%);
}
.schrittflaeche{position:relative;z-index:1;flex:1;display:grid;place-items:start center;
  padding:130px 0 110px}
.schrittinhalt{width:100%;max-width:880px;padding:0 28px}
.schrittinhalt.schmal{max-width:640px}

.stufe{display:none}
.stufe.an{display:block;animation:rein .5s var(--e)}
@keyframes rein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stufe.an{animation:none}}
.stufe h2{margin-bottom:14px}
.stufe .hinweis{color:var(--hell-2);font-size:1rem;margin:0 0 34px;max-width:52ch}

/* Eingabefelder */
.feld{
  width:100%;background:var(--flaeche);color:var(--hell);border:0;border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--kante);padding:17px 20px;font:400 16px inherit;
  transition:box-shadow .3s var(--e);
}
.feld:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--violett),0 0 0 4px rgba(124,92,255,.15)}
.feld::placeholder{color:var(--hell-3)}

.fuss{display:flex;gap:14px;align-items:center;margin-top:38px;flex-wrap:wrap}
.zurueck{background:none;border:0;color:var(--hell-3);font:inherit;font-size:14px;
  cursor:pointer;padding:8px 4px}
.zurueck:hover{color:var(--hell)}

/* Branchensuche */
.suchfeld{position:relative;margin-bottom:30px}
.suchfeld input{
  width:100%;background:var(--flaeche);color:var(--hell);border:0;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--kante);padding:16px 22px 16px 50px;font:400 16px inherit;
  transition:box-shadow .3s var(--e);
}
.suchfeld input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--violett),0 0 0 4px rgba(124,92,255,.15)}
.suchfeld input::placeholder{color:var(--hell-3)}
.suchfeld svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;stroke:var(--hell-3);fill:none;stroke-width:2}

.br-gruppe{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hell-3);margin:32px 0 12px}
.br-gruppe:first-child{margin-top:0}
.br-liste{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.br-karte{
  display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
  background:var(--flaeche);border:0;border-radius:var(--r);padding:17px 19px;color:var(--hell);
  box-shadow:inset 0 0 0 1px var(--kante);
  transition:transform .35s var(--e),box-shadow .35s var(--e);
}
.br-karte:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--kante-hell),0 16px 40px -22px rgba(124,92,255,.7)}
.br-karte[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--violett)}
.br-karte b{font-size:14.5px;font-weight:560;letter-spacing:-.01em}
.br-karte span{font-size:12.5px;color:var(--hell-3)}
.br-leer{padding:30px;text-align:center;color:var(--hell-3);font-size:14px;
  border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--kante)}

/* Erkannte Branche */
.form-karte{
  border-radius:var(--r);padding:26px 28px;margin-bottom:26px;
  background:linear-gradient(130deg,rgba(124,92,255,.16),rgba(69,217,255,.07));
  box-shadow:inset 0 0 0 1px var(--kante-hell);
}
.form-karte h3{font-size:1.5rem;margin-bottom:9px}
.form-karte p{font-size:14.5px;margin:0}
.wechseln{background:rgba(255,255,255,.07);border:0;color:var(--hell);border-radius:999px;
  padding:8px 17px;font:inherit;font-size:13px;cursor:pointer;margin-top:18px}
.wechseln:hover{background:rgba(255,255,255,.13)}

/* Blöcke */
.block{border-radius:var(--r);margin-bottom:16px;overflow:hidden;background:var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--kante)}
.block-kopf{padding:18px 22px;border-bottom:1px solid var(--kante);background:rgba(255,255,255,.02)}
.block-kopf h3{font-size:14.5px;margin:0;font-weight:580}
.block-kopf p{font-size:12.5px;color:var(--hell-3);margin:4px 0 0}
.block-leib{padding:8px 22px 18px}

.phasen-reihe{display:flex;gap:8px;flex-wrap:wrap;padding-top:14px}
.phase-pille{display:flex;align-items:center;gap:8px;background:var(--flaeche-2);
  border-radius:999px;padding:8px 15px;font-size:13.5px;box-shadow:inset 0 0 0 1px var(--kante)}
.phase-pille[data-rolle="gewonnen"]{box-shadow:inset 0 0 0 1px rgba(69,217,255,.4);color:var(--cyan)}
.phase-pille[data-rolle="verloren"]{color:var(--hell-3)}

.ablauf,.modul{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(--kante);
  align-items:flex-start}
.ablauf:last-child,.modul:last-child{border-bottom:0}
.ablauf .txt,.modul .txt{flex:1;min-width:0}
.ablauf b,.modul b{display:block;font-size:14.5px;font-weight:560;margin-bottom:4px}
/* Der entscheidende Satz: was passiert, wenn die Erinnerung fehlt. */
.ablauf small{display:block;color:var(--hell-2);font-size:13px;line-height:1.5;
  padding-left:12px;box-shadow:inset 2px 0 0 rgba(255,154,74,.5)}
.modul small{display:block;color:var(--hell-3);font-size:12.5px;margin-top:2px}
.ablauf.aus,.modul.aus{opacity:.38}
.fest-marke{font-size:11px;font-weight:600;color:var(--cyan);background:rgba(69,217,255,.1);
  padding:5px 10px;border-radius:999px;white-space:nowrap;align-self:flex-start;margin-top:2px}
.kernliste{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 6px}
.kernliste span{font-size:12.5px;color:var(--hell-2);background:var(--flaeche-2);
  border-radius:999px;padding:7px 14px;box-shadow:inset 0 0 0 1px var(--kante)}

.schalter{flex:none;width:46px;height:26px;border-radius:99px;background:rgba(255,255,255,.11);
  border:0;cursor:pointer;position:relative;transition:background .3s var(--e);margin-top:2px}
.schalter::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:var(--hell);transition:transform .3s var(--e)}
.schalter[aria-checked="true"]{background:var(--licht)}
.schalter[aria-checked="true"]::after{transform:translateX(20px)}

/* Paketwahl */
.paketwahl{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.paketkarte{background:var(--flaeche);border:0;border-radius:var(--r);padding:24px;cursor:pointer;
  text-align:left;color:var(--hell);box-shadow:inset 0 0 0 1px var(--kante);
  transition:transform .35s var(--e),box-shadow .35s var(--e)}
.paketkarte:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--kante-hell)}
.paketkarte[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--violett),
  0 20px 50px -30px rgba(124,92,255,.8)}
.paketkarte .n{font-size:11.5px;font-weight:600;color:var(--hell-3);letter-spacing:.1em;text-transform:uppercase}
.paketkarte .p{font-size:2.1rem;font-weight:600;letter-spacing:-.04em;margin:8px 0 2px;
  font-variant-numeric:tabular-nums}
.paketkarte .p small{font-size:.8rem;font-weight:400;color:var(--hell-3);letter-spacing:0}
.paketkarte .d{font-size:12.5px;color:var(--hell-3);line-height:1.5;margin-top:10px}
.paketkarte .empf{display:inline-block;background:var(--licht);color:#fff;font-size:10.5px;
  font-weight:600;padding:4px 10px;border-radius:999px;margin-bottom:11px}

.zusammenfassung{border-radius:var(--r);padding:24px 26px;
  background:linear-gradient(130deg,rgba(124,92,255,.14),rgba(69,217,255,.06));
  box-shadow:inset 0 0 0 1px var(--kante-hell)}
.zusammenfassung h3{font-size:1.05rem;margin-bottom:16px}
.zusammenfassung dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0;font-size:14px}
.zusammenfassung dt{color:var(--hell-3)}
.zusammenfassung dd{margin:0}

.zusagekasten,.zugang{background:var(--flaeche);border-radius:var(--r);padding:18px 20px;
  font-size:13.5px;color:var(--hell-2);line-height:1.6;margin-top:22px;
  box-shadow:inset 0 0 0 1px var(--kante)}
.zugang b{display:block;margin-bottom:7px;color:var(--hell)}
.zugang code{background:var(--flaeche-2);border-radius:6px;padding:3px 9px;font-size:13px;
  box-shadow:inset 0 0 0 1px var(--kante)}

/* Denkmoment und Ergebnis */
.denkt{display:grid;place-items:center;gap:20px;padding:90px 0;text-align:center}
.denkt .punkte{display:flex;gap:8px}
.denkt .punkte i{width:9px;height:9px;border-radius:50%;background:var(--violett);
  animation:atmen 1.3s ease-in-out infinite}
.denkt .punkte i:nth-child(2){animation-delay:.17s;background:#5EA8FF}
.denkt .punkte i:nth-child(3){animation-delay:.34s;background:var(--cyan)}
@keyframes atmen{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.denkt p{color:var(--hell-3);font-size:14.5px;margin:0}
@media (prefers-reduced-motion:reduce){.denkt .punkte i{animation:none;opacity:.8}}

.fertig{text-align:center;padding:30px 0 10px}
.fertig .haken{width:68px;height:68px;border-radius:50%;background:var(--licht);color:#fff;
  display:grid;place-items:center;font-size:30px;margin:0 auto 26px;
  box-shadow:0 20px 60px -20px rgba(124,92,255,.9)}
.fertig .hinweis{margin-left:auto;margin-right:auto}

/* ═══════════════════════════════════════════════════════════════════════════
   Untere Seitenhälfte — gegen die Dunkelheit
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ Nach dem Kopf wurde die Seite dunkel und leer. Eine Seite, die nach unten
   verlischt, liest sich wie ein Entwurf, der nicht fertig wurde.
   Gegenmittel: hellere Flächen im Wechsel, ein Lichtsaum an jedem Abschnitt,
   und — vor allem — DICHTE. Vierundzwanzig Gewerbe als Fläche sagen mehr als
   drei Karten mit Text.
*/
.hell-flaeche{
  background:
    radial-gradient(70% 60% at 50% -10%, rgba(124,92,255,.13), transparent 68%),
    var(--nacht-2);
}
.hell-flaeche + .hell-flaeche{background:var(--nacht)}
section.trenn::before{
  content:'';position:absolute;top:-1px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.5),rgba(69,217,255,.35),transparent);
}

/* Gewerbe-Fläche: der stärkste Beweis der Seite. Wer sein Handwerk hier sieht,
   ist überzeugt — ohne einen Satz gelesen zu haben. */
.gewerke{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.gewerk{
  position:relative;border-radius:13px;padding:18px 18px 20px;overflow:hidden;
  background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--kante);
  transition:transform .4s var(--e),box-shadow .4s var(--e);
}
.gewerk::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s var(--e);
  background:linear-gradient(140deg,rgba(124,92,255,.22),rgba(69,217,255,.08) 60%,transparent);
}
.gewerk:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--kante-hell)}
.gewerk:hover::before{opacity:1}
.gewerk b{position:relative;display:block;font-size:14px;font-weight:560;letter-spacing:-.012em}
.gewerk span{position:relative;display:block;font-size:12px;color:var(--hell-3);margin-top:5px}

/* Grosse Zahlen als Rhythmuswechsel */
.zahlen{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.zahl-block .gross{font-size:clamp(2.6rem,5vw,4rem);font-weight:600;letter-spacing:-.045em;
  line-height:1;background:var(--licht);-webkit-background-clip:text;background-clip:text;color:transparent}
.zahl-block p{font-size:14px;color:var(--hell-3);margin:12px 0 0;max-width:22ch}


/* ═══════════════════════════════════════════════════════════════════════════
   Helle Flächen
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ Die Seite war durchgehend fast schwarz. Das wirkt nach der zweiten
   Bildschirmhöhe nicht mehr edel, sondern unfertig — als hätte jemand
   vergessen, den Rest zu bauen.

   Gegenmittel ist nicht „etwas heller", sondern ein RHYTHMUS: dunkler Kopf,
   helle Mitte, dunkler Abschluss. Der Wechsel macht beide Seiten wertvoller —
   das Dunkle wirkt gewollt statt bequem.
*/
.papier{
  background:#F4F3F1; color:#0B0B10;
  background-image:radial-gradient(80% 50% at 50% 0%, rgba(124,92,255,.09), transparent 70%);
}
.papier h1,.papier h2,.papier h3{color:#0B0B10}
.papier p{color:#55555F}
.papier .braue{color:#7C5CFF}
.papier .knopf{background:#0B0B10;color:#FBFBFD}
.papier .knopf:hover{box-shadow:0 14px 40px -14px rgba(11,11,16,.5)}
.papier .knopf.leer{background:transparent;color:#0B0B10;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.papier .knopf.leer:hover{background:rgba(0,0,0,.04)}

/* Bauteile im hellen Kontext */
.papier .bild{background:#FFF;box-shadow:0 1px 2px rgba(11,11,16,.05),0 30px 70px -30px rgba(11,11,16,.22)}
.papier .bild::after{background:linear-gradient(160deg,rgba(124,92,255,.05),transparent 44%)}
.papier .bild-kopf{background:#FAFAFB;border-bottom-color:rgba(0,0,0,.07)}
.papier .bild-kopf i{background:rgba(0,0,0,.10)}
.papier .bild-kopf b{color:#8C8C97}
.papier .zeile{border-bottom-color:rgba(0,0,0,.06)}
.papier .zeile p{color:#0B0B10}
.papier .zeile small{color:#8C8C97}
.papier .spalte{background:#F6F6F8}
.papier .spalte b{color:#8C8C97}
.papier .kachel{background:#FFF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.papier .kachel span{color:#8C8C97}

.papier .gewerk{background:#FFF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.papier .gewerk:hover{box-shadow:0 1px 2px rgba(11,11,16,.05),0 18px 40px -22px rgba(124,92,255,.45)}
.papier .gewerk::before{background:linear-gradient(140deg,rgba(124,92,255,.12),rgba(69,217,255,.05) 60%,transparent)}
.papier .gewerk b{color:#0B0B10}
.papier .gewerk span{color:#8C8C97}

.papier .preis{background:#FFF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.papier .preis.betont{box-shadow:inset 0 0 0 1.5px rgba(124,92,255,.55),0 30px 70px -34px rgba(124,92,255,.5)}
.papier .preis .n{color:#8C8C97}
.papier .preis li{color:#55555F}
.papier .preis li.aus{color:#A6A6B0}
.papier .preis li.aus::before{background:rgba(0,0,0,.12)}

.papier section.trenn::before{
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.35),rgba(69,217,255,.22),transparent);
}
.papier .zahl-block p{color:#8C8C97}

/* Logo oben links — auf hellem wie dunklem Grund */
.leiste .marke-wort{
  display:inline-flex;align-items:center;gap:9px;
}
.leiste .marke-wort::before{
  content:'';width:11px;height:11px;border-radius:3px;background:var(--licht);
  box-shadow:0 0 18px rgba(124,92,255,.7);
}


/* ── Produkt-Zeilen ────────────────────────────────────────────────────────
   Der Text steht schmaler als das Bild. Gleich breite Spalten liessen die
   Textseite leer wirken — bei vier Wörtern Überschrift ist halbe Seite zu
   viel Platz. */
.mitte.prod{display:grid; gap:clamp(56px,6vw,88px)}
.raster.prod-r{grid-template-columns:.82fr 1.18fr; align-items:center;
               gap:clamp(32px,5vw,68px)}
.raster.prod-r.kehr{grid-template-columns:1.18fr .82fr}
.raster.prod-r.kehr .prod-text{order:2}
.raster.prod-r.kehr .bild{order:1}
.prod-text h2{margin:0}
.prod-sub{margin:16px 0 0; font-size:15px; color:var(--hell-2); max-width:30ch}
.papier .prod-sub{color:#5A5A66}

/* Postfach-Vorschau */
.post{display:grid; gap:9px}
.post-z{display:grid; grid-template-columns:1fr auto; gap:2px 14px;
        align-items:center; padding:12px 13px; border-radius:12px;
        background:rgba(255,255,255,.03)}
.post-z b{font-size:13.5px; font-weight:560; color:var(--hell)}
.post-z span{grid-column:1; font-size:12.5px; color:var(--hell-3)}
.post-z em{grid-row:1/3; grid-column:2; font-style:normal; font-size:11px;
           font-weight:560; letter-spacing:.02em; padding:4px 9px;
           border-radius:999px; color:#A78BFA;
           background:rgba(124,92,255,.14)}
.post-z.neu em{color:var(--hell-3); background:rgba(255,255,255,.06)}
.papier .post-z{background:#F6F6F8}
.papier .post-z b{color:#0B0B10}
.papier .post-z span{color:#8C8C97}
.papier .post-z em{color:#5B3FD9; background:rgba(124,92,255,.10)}
.papier .post-z.neu em{color:#8C8C97; background:rgba(11,11,16,.05)}

@media(max-width:860px){
  .raster.prod-r{grid-template-columns:1fr}
  .raster.prod-r.kehr .prod-text{order:1}
  .raster.prod-r.kehr .bild{order:2}
}

/* ── Übergang dunkel → hell ────────────────────────────────────────────────
   Eine harte Kante zwischen Sternenfeld und Papier sieht aus wie zwei
   zusammengeklebte Seiten. Der Verlauf gehört an die HELLE Fläche, sonst
   deckt er das Feld ab. */
.papier.trenn::before{
  content:''; position:absolute; inset:-56px 0 auto 0; height:56px;
  background:linear-gradient(to bottom,
    rgba(244,243,241,0) 0%, rgba(244,243,241,.28) 55%, rgba(244,243,241,.82) 84%, #F4F3F1 100%);
  pointer-events:none; z-index:1}
/* Die Trennlinie gehört nicht auf einen Verlauf — sie zeichnet genau die
   Kante nach, die der Verlauf auflösen soll. */
.papier.trenn{border-top:0}
.papier + .papier.trenn{border-top:1px solid var(--kante)}
.papier + .papier.trenn::before{display:none}


/* ── Gewerbe-Wähler mit lebender Vorschau ──────────────────────────────────
   Vorher standen hier 24 gleich aussehende Textkästen. Sie belegten Platz und
   bewiesen nichts. Jetzt ist die Liste ein Schalter: was rechts erscheint, ist
   dieselbe Ansicht, die in der Strecke entsteht — dieselbe Datenquelle,
   dieselben Bausteine. Wer das sieht, muss nichts mehr glauben. */
.gw-raster{display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(20px,3vw,44px);
  align-items:start}
.gw-liste{display:flex; flex-wrap:wrap; gap:7px; align-content:start}
.gw-knopf{
  border:0; cursor:pointer; font:inherit; font-size:13px; letter-spacing:-.01em;
  padding:8px 13px; border-radius:999px; background:#FFF; color:#3A3A46;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  transition:transform .22s var(--e), box-shadow .22s var(--e), color .22s;
}
.gw-knopf:hover{transform:translateY(-1px); color:#0B0B10;
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.36)}
.gw-knopf.an{background:#0B0B10; color:#fff; box-shadow:none}
.gw-schau{display:grid; gap:18px; justify-items:start}
.gw-start{align-self:start}
.gw-schau .k-rahmen{max-width:none; box-shadow:0 1px 2px rgba(11,11,16,.05),
  0 34px 80px -34px rgba(11,11,16,.34)}
@media(max-width:900px){
  .gw-raster{grid-template-columns:1fr}
  .gw-liste{max-height:168px; overflow-y:auto}
}