@font-face{font-family:"Schibsted Grotesk";font-weight:400;font-display:swap;src:url(fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:600;font-display:swap;src:url(fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:700;font-display:swap;src:url(fonts/schibsted-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:800;font-display:swap;src:url(fonts/schibsted-grotesk-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --bg:#F4F4F0;--ink:#000;--paper:#fff;--muted:#3d3d3a;
  --rosa:#F28B8E;--blau:#A4B8DD;--limette:#A6CB52;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --rand:2px solid var(--ink);--schatten:5px 5px 0 var(--ink);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.55 var(--sans)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{background:var(--rosa)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}
.eyebrow{font:500 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0}
h1{font-size:clamp(40px,7.5vw,84px);letter-spacing:-.045em}
h2{font-size:clamp(32px,5vw,52px);margin-bottom:24px}
h3{font-size:24px}
p{margin:0 0 14px}

/* Kopf */
.kopf{border-bottom:var(--rand);background:var(--bg);position:sticky;top:0;z-index:5}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.kopf .logo{display:block;height:34px}
.kopf .logo img{height:34px;width:auto}
.kopf .logo:hover{background:none}
.kopf nav{display:flex;gap:22px;font-weight:600;font-size:16px}
.kopf nav a{text-decoration:none}
@media (max-width:700px){.kopf nav .opt{display:none}.kopf nav{gap:14px}}

/* Abschnitte */
section{padding:72px 0;border-bottom:var(--rand)}
.hero{padding:64px 0 72px}
.hero .eyebrow{margin-bottom:18px}
.hero h1{max-width:13ch;margin-bottom:26px}
.hero .lead{font-size:clamp(19px,2.2vw,22px);max-width:62ch}
.hero .knoepfe{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 17px/1 var(--sans);color:var(--ink);background:var(--paper);border:var(--rand);box-shadow:4px 4px 0 var(--ink);padding:15px 20px;text-decoration:none;cursor:pointer;transition:transform .08s,box-shadow .08s}
.knopf:hover{background:var(--paper);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.knopf:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.knopf.rosa,.knopf.rosa:hover{background:var(--rosa)}
.knopf.blau,.knopf.blau:hover{background:var(--blau)}
.knopf.klein{font-size:14px;padding:9px 12px;box-shadow:3px 3px 0 var(--ink)}
.knopf[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 var(--ink)}

/* Angebot */
.reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.reihe{grid-template-columns:1fr}}
.karte{background:var(--paper);border:var(--rand);box-shadow:var(--schatten);padding:24px;display:flex;flex-direction:column;position:relative}
.karte .fuer{color:var(--muted);margin:8px 0 16px;font-size:16px}
.karte .preis{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1}
.karte .preis small{font-size:15px;font-weight:600;letter-spacing:0}
.karte .zusatz{font:400 13px/1.5 var(--mono);color:var(--muted);margin-top:6px}
.karte ul{padding:0;margin:18px 0;list-style:none;font-size:16px;flex:1}
.karte li{padding:7px 0 7px 26px;border-top:1px solid #0002;position:relative}
.karte li::before{content:"";position:absolute;left:2px;top:14px;width:11px;height:11px;border:2px solid var(--ink);background:var(--limette)}
.karte .knopf{align-self:flex-start}
.karte.star{background:var(--blau)}
.karte.star li{border-color:#0003}
.marke{position:absolute;top:-14px;right:18px;background:var(--rosa);border:var(--rand);font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px}
.hinweis{font-size:15px;color:var(--muted);margin-top:22px}

/* Playbook-Verkauf */
.pb{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:900px){.pb{grid-template-columns:1fr}}
.pb .punkte{list-style:none;padding:0;margin:20px 0}
.pb .punkte li{padding:10px 0;border-top:1px solid #0002;display:flex;gap:12px}
.pb .punkte b{font:500 14px/1.6 var(--mono);min-width:28px}
.kauf{background:var(--rosa);border:var(--rand);box-shadow:var(--schatten);padding:26px}
.kauf .preis{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1}
.kauf .preis small{font-size:17px;font-weight:600;letter-spacing:0}
.kauf form{margin:0}
.kauf .wahl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
@media (max-width:480px){.kauf .wahl{grid-template-columns:1fr}}
.kauf .knopf{width:100%;flex-direction:column;gap:6px;padding:14px 10px}
.kauf .knopf span{font:400 12.5px/1.3 var(--mono)}
.zustimmung{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:var(--rand);padding:12px 14px;font-size:15px;line-height:1.45;margin-top:18px;cursor:pointer}
.zustimmung input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:#000}
.klein{font-size:14px;line-height:1.5}
.meldung{border:var(--rand);background:var(--paper);padding:12px 14px;margin:16px 0 0;font-size:15px}
.meldung.fehler{background:#fff0f0}

/* Muster-Karte */
.muster{background:var(--paper);border:var(--rand);box-shadow:var(--schatten)}
.muster .kopfzeile{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:var(--rand);background:var(--limette);font:500 12.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.muster .inhalt{padding:20px}
.muster h3{margin-bottom:10px}
.muster ol{margin:12px 0;padding-left:22px;font-size:16px}
.prompt{position:relative;background:#111;color:#F4F4F0;font:400 14px/1.6 var(--mono);padding:16px;white-space:pre-wrap;border:var(--rand);margin:14px 0 0}
.prompt.verdeckt{max-height:120px;overflow:hidden}
.prompt.verdeckt::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;background:linear-gradient(transparent,#111)}

/* Über mich */
.ueber{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:700px){.ueber{grid-template-columns:1fr}.ueber img{max-width:220px}}
.ueber img{border:var(--rand);box-shadow:var(--schatten);background:var(--blau)}
.ueber p{max-width:60ch}

/* Kontakt + Fuss */
.kontakt{background:var(--ink);color:var(--bg)}
.kontakt h2{color:var(--bg)}
.kontakt a{color:var(--bg)}
.kontakt a:hover{background:var(--rosa);color:var(--ink)}
.kontakt .gross{font-size:clamp(24px,4vw,40px);font-weight:800;letter-spacing:-.03em}
.fuss{padding:28px 0;font-size:15px}
.fuss .wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
.fuss nav{display:flex;gap:18px;flex-wrap:wrap}

/* Textseiten */
.text{max-width:760px;padding:56px 20px 80px;margin:0 auto}
.text h1{font-size:clamp(36px,6vw,56px);margin-bottom:28px}
.text h2{font-size:24px;margin:34px 0 10px;letter-spacing:-.02em}
.text ul{padding-left:22px}
.text .entwurf{background:var(--limette);border:var(--rand);padding:12px 14px;font-size:15px;margin-bottom:24px}
.platzhalter{background:var(--rosa);padding:0 4px;border:1px dashed #000}

/* Formulare */
.feld{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.feld input[type=email]{flex:1 1 240px;font:400 17px var(--sans);padding:13px 14px;border:var(--rand);background:var(--paper);min-width:0}

/* Playbook-App */
.pbkopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:40px 0 22px}
.pbkopf h1{font-size:clamp(36px,6vw,60px)}
.lizenz{font:400 13px/1.5 var(--mono);text-align:right}
.fortschritt{border:var(--rand);background:var(--paper);height:18px;position:relative;margin:4px 0 6px}
.fortschritt i{position:absolute;inset:0 auto 0 0;background:var(--limette);border-right:2px solid #000;width:0;transition:width .3s}
.filter{display:flex;gap:8px;flex-wrap:wrap;padding:16px 0;border-top:var(--rand);border-bottom:var(--rand);margin:18px 0 26px;position:sticky;top:68px;background:var(--bg);z-index:3}
.filter button,.filter select{font:600 14px/1 var(--sans);border:var(--rand);background:var(--paper);padding:9px 12px;cursor:pointer;color:var(--ink)}
.filter button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.filter input[type=search]{font:400 15px var(--sans);border:var(--rand);padding:8px 12px;flex:1 1 180px;min-width:0}
.liste{display:grid;gap:16px;padding-bottom:60px}
.anw{background:var(--paper);border:var(--rand);box-shadow:4px 4px 0 var(--ink)}
.anw.erledigt{background:#eef5e1}
.anw summary{list-style:none;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;cursor:pointer}
.anw summary::-webkit-details-marker{display:none}
.anw .nr{font:500 15px/1 var(--mono);border:var(--rand);height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.anw.erledigt .nr{background:var(--limette)}
.anw .t{font-weight:700;font-size:19px;line-height:1.25}
.anw .meta{font:400 12.5px/1.5 var(--mono);color:var(--muted);margin-top:3px}
.anw .pfeil{font:700 22px/1 var(--sans);transition:transform .15s}
.anw[open] .pfeil{transform:rotate(90deg)}
.anw .koerper{padding:4px 18px 20px 76px;border-top:1px solid #0002}
@media (max-width:600px){.anw .koerper{padding:4px 16px 18px}}
.anw dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 14px;margin:14px 0;font-size:16px}
.anw dt{font:500 12.5px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.anw dd{margin:0}
@media (max-width:600px){.anw dl{grid-template-columns:1fr}.anw dd{margin-bottom:6px}}
.anw ol{margin:6px 0;padding-left:20px}
.anw .aktionen{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.leer{border:2px dashed #000;padding:24px;text-align:center}
.sperre{max-width:620px;padding:48px 0 80px}
[hidden]{display:none !important}
.klein-titel{font-size:24px;margin:44px 0 8px;letter-spacing:-.02em}
@media (max-width:700px){.filter{position:static}.lizenz{text-align:left}}

/* Breite: nutzt grosse Bildschirme besser, Text oben und unten auf gleicher Kante */
.wrap{max-width:1360px;padding:0 clamp(20px,4vw,56px)}
h1{font-size:clamp(40px,7vw,104px)}
.hero h1{max-width:none}
.hero .lead{max-width:none}
.hero .eyebrow{display:flex;align-items:center;gap:10px;font:600 clamp(16px,1.6vw,19px)/1.4 var(--sans);letter-spacing:0;text-transform:none}
.hero .eyebrow::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--rosa);border:1.5px solid var(--ink)}

/* Angebotskarten: runde Ecken, Häkchen */
.karte{border-radius:20px}
.karte li{padding-left:28px}
.karte li::before{content:"✓";top:6px;left:0;width:auto;height:auto;border:0;background:none;font-weight:800;font-size:18px;line-height:1.4}
.marke{border-radius:999px}
.karte .knopf{border-radius:10px}

/* Neuer Aufbau 02.11. */
.beweis{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:var(--rand)}
.beweis li{padding:18px 16px 0 0}
.beweis b{display:block;font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.beweis span{font-size:15px;color:var(--muted)}
@media (max-width:700px){.beweis{grid-template-columns:1fr 1fr;row-gap:8px}}
.gitter3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gitter2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:900px){.gitter3,.gitter2{grid-template-columns:1fr}}
.feld-karte{background:var(--paper);border:var(--rand);border-radius:20px;padding:24px}
.feld-karte .zahl{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:14px;color:var(--ink)}
.feld-karte h3{margin-bottom:10px}
.feld-karte p{font-size:16px}
.quelle{font:400 12.5px/1.5 var(--mono);color:var(--muted);margin:0}
.weg{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:var(--rand);border-radius:20px;box-shadow:var(--schatten);padding:24px;text-decoration:none;transition:transform .08s,box-shadow .08s}
.weg:hover{background:var(--paper);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.weg:nth-child(2){background:var(--blau)}
.weg .nr{font:500 14px/1 var(--mono)}
.weg p{font-size:16px;flex:1;margin:0}
.weg .ziel{font-weight:700}
.haltung{background:var(--rosa)}
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
@media (max-width:900px){.zwei{grid-template-columns:1fr}}
.zwei .lead{font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.4}
.ueber .lead{font-size:clamp(19px,2vw,22px);font-weight:600}
.ueber img{border-radius:20px}
.werdegang{list-style:none;padding:0;margin:20px 0 0;border-top:var(--rand);max-width:60ch}
.werdegang li{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid #0002;font-size:16px}
.werdegang b{font:500 13px/1.9 var(--mono);text-transform:uppercase;min-width:80px}
.zitat{margin:0;background:var(--paper);border:var(--rand);border-radius:20px;padding:26px}
.zitat blockquote{margin:0 0 18px;font-size:clamp(19px,2vw,22px);font-weight:600;line-height:1.4}
.zitat figcaption{display:flex;gap:14px;align-items:center;font-size:15px}
.zitat .bild{width:56px;height:56px;border-radius:50%;border:var(--rand);background:var(--blau);display:flex;align-items:center;justify-content:center;font-size:10px;overflow:hidden;flex:none}
.faq{border-top:var(--rand);max-width:900px}
.faq details{border-bottom:var(--rand)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-weight:700;font-size:clamp(18px,1.8vw,21px);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:28px;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;max-width:70ch}

/* Unterseiten 02.11. */
.kopf nav a{padding:22px 0 20px;border-bottom:3px solid transparent}
.kopf nav a[aria-current=page]{border-bottom-color:var(--ink)}
.kopf nav a:hover{background:none;border-bottom-color:var(--rosa)}
.kopf .wrap{gap:28px}
.kopf nav{margin-left:auto;gap:28px}
.kopf nav .opt{display:inline}
.nav-knopf{border-radius:10px}
@media (max-width:700px){
  .kopf .wrap{flex-wrap:wrap;height:auto;padding-top:12px;row-gap:0}
  .kopf nav{order:3;width:100%;margin:0;gap:20px;overflow-x:auto;font-size:15px}
  .kopf nav a{padding:12px 0 10px;white-space:nowrap}
  .nav-knopf{margin-left:auto}
}
.seitenkopf{padding-top:64px}
.seitenkopf h1{font-size:clamp(40px,6vw,80px);margin-bottom:20px}
.seitenkopf .lead{font-size:clamp(19px,2vw,22px);margin-bottom:36px;max-width:none}
.einleitung{font-size:18px;margin-bottom:28px}
.schritte{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.schritte li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;background:var(--paper);border:var(--rand);border-radius:20px;padding:20px 22px}
.schritte .nr{width:44px;height:44px;border-radius:50%;border:var(--rand);background:var(--limette);display:flex;align-items:center;justify-content:center;font:500 18px/1 var(--mono)}
.schritte h3{margin-bottom:6px}
.schritte p{font-size:16px;margin:0}
.schritte .dauer{display:inline-block;margin-top:8px;font:400 12.5px/1 var(--mono);color:var(--muted)}
.bereit{margin-top:28px;background:var(--blau);border:var(--rand);border-radius:20px;box-shadow:var(--schatten);padding:24px}
.bereit ul{margin:12px 0 0;padding-left:20px;font-size:16px}
.bereit li{margin:6px 0}
.weiter{padding:56px 0}

/* Einheitlich 02.11.: Schriftgrössen, Überzeilen, Knöpfe
   Text: 14 klein · 16 normal in Karten · 18 Grundtext · 22 Einleitung
   Titel: 24 Karte · 40 Preis · h2 · h1 */
.eyebrow,.hero .eyebrow{display:flex;align-items:center;gap:10px;font:600 18px/1.4 var(--sans);letter-spacing:0;text-transform:none;margin-bottom:12px}
.eyebrow::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--rosa);border:1.5px solid var(--ink)}
.kontakt .eyebrow::before{border-color:var(--bg)}
*{text-transform:none !important}
.marke,.muster .kopfzeile,.werdegang b,.anw dt{letter-spacing:0}

.knopf,.knopf.klein,.filter button,.filter select,.filter input[type=search],.feld input[type=email]{border-radius:10px}

.lead,.hero .lead,.ueber .lead,.zwei .lead,.seitenkopf .lead,.pb .lead,.zitat blockquote{font-size:22px;line-height:1.45}
@media (max-width:700px){.lead,.hero .lead,.ueber .lead,.zwei .lead,.seitenkopf .lead,.pb .lead,.zitat blockquote{font-size:19px}}
body,.einleitung,.faq summary,.faq details p,.kopf nav{font-size:18px}
.karte .fuer,.karte ul,.feld-karte p,.weg p,.schritte p,.bereit ul,.muster ol,.hinweis,.klein,.zustimmung,.werdegang li,.fuss,.zitat figcaption,.anw dl,.knopf.klein,.meldung{font-size:16px}
.quelle,.karte .zusatz,.schritte .dauer,.kauf .knopf span,.muster .kopfzeile,.werdegang b,.marke,.lizenz,.anw .meta,.weg .nr,.pb .punkte b{font-size:14px}
h3,.anw .t{font-size:24px}
.karte .preis,.feld-karte .zahl{font-size:40px}
.kauf .preis,.kontakt .gross{font-size:clamp(32px,5vw,52px)}
.text h2{font-size:24px}
@media (max-width:700px){.kopf nav{font-size:16px}}
.kauf,.muster,.anw,.leer{border-radius:20px}.muster .kopfzeile{border-radius:18px 18px 0 0}.zustimmung,.meldung{border-radius:10px}
.seitenkopf h1{margin-bottom:36px}

/* Kontakt mit Kanälen */
.kontakt .knopf{border-color:var(--bg);box-shadow:4px 4px 0 var(--rosa)}
.kontakt .knopf:hover{box-shadow:5px 5px 0 var(--rosa)}
.kontakt .knopf:not(.rosa){background:var(--paper);color:var(--ink)}
.kontakt .knoepfe{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 48px}
.kontakt .folge{color:var(--bg);margin-bottom:8px}
.socials{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.socials a{display:flex;flex-direction:column;gap:2px;border:2px solid var(--bg);border-radius:14px;padding:12px 18px;text-decoration:none;font-weight:700;font-size:18px}
.socials a span{font:400 14px/1.3 var(--mono);opacity:.8}
.kontakt .socials a:hover{background:var(--rosa);color:var(--ink);border-color:var(--rosa)}

/* Treppe */
.treppe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr);gap:12px;margin-top:8px}
.zone{border:2px dashed var(--ink);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:18px}
.mitvaibai{background:#F28B8E2b}
.zone-kopf{display:flex;gap:14px;align-items:center;min-height:56px}
.zone-kopf b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}
.zone-kopf span{font-size:16px}
.allein .zone-kopf{text-align:center;justify-content:center}
.stufen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;flex:1}
.allein .stufen{grid-template-columns:1fr}
.stufe{border:var(--rand);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:16px 12px;text-align:center;display:flex;flex-direction:column;gap:6px;background:var(--paper)}
.stufe b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.stufe span{font-size:16px;line-height:1.4}
.s1{min-height:110px}.s2{min-height:190px;background:var(--blau)}.s3{min-height:270px;background:var(--blau)}.s4{min-height:340px;background:var(--limette)}.s5{min-height:410px;background:var(--rosa)}
@media (max-width:900px){
  .treppe{grid-template-columns:1fr}
  .stufen{grid-template-columns:1fr}
  .stufe{min-height:0 !important;text-align:left}
}

/* Begriffe */
.begriffe{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:8px}
.kasten{background:var(--paper);border:var(--rand);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:16px 20px;text-align:center;display:flex;flex-direction:column;gap:4px}
.kasten b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.kasten span{font-size:16px}
.b-prompt{min-width:260px}
.b-pfeil{width:2px;height:40px;background:var(--ink);position:relative}
.b-pfeil::after{content:"";position:absolute;left:-6px;bottom:-2px;border:7px solid transparent;border-top:10px solid var(--ink);border-bottom:0}
.b-agent{width:100%;background:var(--rosa);border:var(--rand);border-radius:20px;box-shadow:var(--schatten);padding:24px;margin-top:4px}
.b-titel{text-align:center;margin-bottom:20px}
.b-titel b{display:block;font-size:24px;font-weight:800}
.b-titel span{font-size:16px}
.b-innen{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:center}
.liest{font:600 16px/1 var(--sans)}
.b-projekt{background:var(--blau);border:var(--rand);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;text-align:center}
.b-label{font-size:16px}
.schlaufe{margin:20px 0 0;font-weight:600;font-size:16px}
.b-unten{width:100%;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px;margin-top:28px;align-items:start}
.b-output{text-align:left}
.b-output p{margin:0 0 12px;font-size:16px}
.b-output p b{margin-right:8px}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{border:var(--rand);border-radius:999px;padding:6px 14px;font-size:16px;font-weight:600;background:var(--blau)}
.chips li:nth-child(3n+2){background:var(--limette)}
.chips li:nth-child(3n){background:var(--rosa)}
.b-werkzeuge{background:var(--limette)}
@media (max-width:900px){
  .b-innen{grid-template-columns:1fr}
  .liest{text-align:center}
  .b-unten{grid-template-columns:1fr}
}

/* Anwendungen mit Vorher/Nachher */
.anw-karte{background:var(--paper);border:var(--rand);border-radius:20px;box-shadow:4px 4px 0 var(--ink);padding:24px;display:flex;flex-direction:column;gap:10px}
.anw-karte h3{margin:4px 0 0}
.anw-karte p{font-size:16px;margin:0}
.vorher-nachher{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.vorher-nachher s{font-size:24px;font-weight:600;color:var(--muted);text-decoration-thickness:2px}
.vorher-nachher b{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1;background:var(--limette);border:var(--rand);border-radius:10px;padding:4px 10px}
.vorher-nachher s::after{content:" →";display:inline}
.rechnung{margin-top:28px;background:var(--blau);border:var(--rand);border-radius:20px;padding:22px 24px}
.rechnung p{font-size:22px;margin:0}
.rechnung .klein{font-size:14px;margin-top:6px;color:var(--muted)}
.einleitung.neu{margin:24px 0 0;font-weight:600}
.feld-karte .chips{margin-top:12px}
.vorher-nachher s::after{display:inline-block;margin-left:10px;text-decoration:none;color:var(--ink)}

/* Kontakt 02.11. spät: rosa Knöpfe mit weissem Schatten, Icons */
.kontakt .knopf,.kontakt .knopf:not(.rosa){background:var(--rosa);color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--bg)}
.kontakt .knopf:hover{box-shadow:5px 5px 0 var(--bg)}
.kontakt .knoepfe{margin:22px 0 36px}
.socials a{flex-direction:row;align-items:center;gap:12px}
.socials a span{display:flex;flex-direction:column;font:700 18px/1.2 var(--sans);opacity:1}
.socials small{font:400 14px/1.3 var(--mono);opacity:.8}
.socials svg{flex:none}

/* Playbook-Seite */
.pb-unten{align-items:start}
.zugang{background:var(--paper);border:var(--rand);border-radius:20px;box-shadow:var(--schatten);padding:26px}
.zugang h2{font-size:40px;margin-bottom:12px}

.studi{display:inline-block;align-self:flex-start;margin-top:10px;background:var(--limette);border:var(--rand);border-radius:999px;padding:4px 12px;font-size:16px;font-weight:700}
.zitat{display:flex;flex-direction:column}
.zitat blockquote{flex:1}
.zitat img.bild{width:56px;height:56px;border-radius:50%;border:var(--rand);object-fit:cover;flex:none}
.anw-tag{display:inline-block;align-self:flex-start;margin:0 0 16px;background:var(--limette);border:var(--rand);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:600}

/* Stimmen grösser, ohne grünes Schild */
.zitat{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:start;padding:24px;box-shadow:var(--schatten)}
.zitat .foto{width:180px;height:180px;border-radius:16px;border:var(--rand);object-fit:cover}
.zitat blockquote{font-size:22px;font-weight:700;line-height:1.35;letter-spacing:-.01em;margin:0 0 16px}
.zitat figcaption{display:flex;flex-direction:column;gap:2px;font-size:16px}
.zitat figcaption b{font-size:18px}
.zitat .anw-info{margin-top:8px;font:400 14px/1.4 var(--mono);color:var(--muted)}
@media (max-width:1100px){.zitat{grid-template-columns:1fr}.zitat .foto{width:140px;height:140px}}
.zitat figcaption{align-items:flex-start;text-align:left}
.nav-knopf:focus:not(:focus-visible){outline:none}

/* Kaufbox: ein Knopf, dann Land */
.kauf{border-radius:20px}
.kauf-text{margin:10px 0 0;font-size:16px}
.kauf .gross-knopf{width:100%;margin-top:16px;font-size:20px;padding:18px;flex-direction:row}
.landwahl{margin-top:16px}
.landwahl p{margin:0 0 10px;font-size:16px}
.kauf .wahl .knopf{font-size:16px;padding:14px 10px;flex-direction:row}
.kauf .klein{margin:14px 0 0}

/* Vorschau Playbook im Fenster */
.pb-fenster{border:var(--rand);border-radius:20px;box-shadow:var(--schatten);overflow:hidden;background:var(--bg)}
.pb-leiste{display:flex;align-items:center;gap:7px;padding:10px 16px;border-bottom:var(--rand);background:var(--paper)}
.pb-leiste i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink);background:var(--bg)}
.pb-leiste i:first-child{background:var(--rosa)}.pb-leiste i:nth-child(2){background:var(--limette)}.pb-leiste i:nth-child(3){background:var(--blau)}
.pb-leiste span{margin-left:10px;font:400 14px/1 var(--mono);color:var(--muted)}
.pb-innen{padding:0 clamp(16px,3vw,32px) 28px}
.pb-innen .pbkopf{padding:24px 0 16px}
.pb-titel{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1}
.vorschau-filter{position:static;margin:14px 0 20px}
.vorschau-filter span{font:600 14px/1 var(--sans);border:var(--rand);border-radius:10px;background:var(--paper);padding:9px 12px}
.vorschau-filter .f-suche{flex:1 1 180px;font-weight:400;color:var(--muted)}
.vorschau-filter .an{background:var(--ink);color:var(--bg)}
.pb-innen .liste{padding-bottom:0}
.vorschau-mehr{margin:4px 0 0;font:400 14px/1.5 var(--mono);color:var(--muted);text-align:center}
.zitat .tags{margin-top:14px}.zitat .tags li{font-size:14px;padding:4px 12px}.zitat figcaption a{text-decoration-thickness:1.5px}

/* Socials ohne Rahmen: grosses Icon, Name daneben, Bewegung beim Hover */
.socials{gap:14px 36px;margin-top:8px}
.socials a,.kontakt .socials a:hover{border:0;padding:6px 0;border-radius:0;background:none;color:var(--bg);gap:14px}
.socials svg{width:34px;height:34px;transition:transform .15s,color .15s}
.socials a span{transition:color .15s}
.kontakt .socials a:hover svg{transform:translateY(-3px) scale(1.08);color:var(--rosa)}
.kontakt .socials a:hover span{color:var(--rosa)}

/* Stimmen: Person links unter dem Bild, Tags unter dem Zitat, je zwei nebeneinander */
.zitat .person{display:flex;flex-direction:column;gap:12px}
.zitat .person figcaption{gap:2px}
.zitat .tags{display:grid;grid-template-columns:repeat(2,max-content);gap:8px;margin-top:16px}
.zitat .tags li{text-align:center}
@media (max-width:1100px){.zitat .person{flex-direction:row;align-items:center}.zitat .foto{width:110px;height:110px}}

/* Kontakt: Fokus auf Knöpfe, Socials weiter unten */
.kontakt .knoepfe .knopf{min-width:150px;font-size:18px}
.socials{margin-top:56px;padding-top:28px;border-top:1px solid #F4F4F040}
.nowrap{white-space:nowrap}
/* Tags bleiben in der Karte */
.zitat .tags{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
.zitat .tags li{white-space:normal;min-width:0}
.zitat .tags li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zitat .tags{max-width:440px}
@media (max-width:1320px){.zitat{grid-template-columns:1fr}.zitat .person{flex-direction:row;align-items:center}.zitat .foto{width:120px;height:120px}}
@media (max-width:420px){.zitat .tags{grid-template-columns:1fr 1fr}.zitat .tags li{font-size:13px;padding:4px 8px}}
@media (max-width:520px){.zitat .tags{display:flex;flex-wrap:wrap}.zitat .tags li{font-size:14px;padding:4px 12px;overflow:visible}}
.bild-breit{padding:0 0 72px;border-bottom:var(--rand)}
.bild-breit figure{margin:0}
.bild-breit img{width:100%;height:auto;max-height:620px;object-fit:cover;border:var(--rand);border-radius:20px}
.bild-breit figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.werdegang b{min-width:110px}

/* Studienzahlen als Balken */
.balken-karten .feld-karte{display:flex;flex-direction:column;gap:14px}
.balken-karten h3{margin:0}
.wert-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wert-kopf b{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1}
.wert-kopf span{font-size:16px}
.balken{height:14px;border:var(--rand);border-radius:999px;background:var(--bg);overflow:hidden;margin-top:8px}
.balken i{display:block;height:100%;width:var(--w);background:var(--limette);border-right:2px solid var(--ink);transform-origin:left;animation:wachsen 1.1s cubic-bezier(.2,.8,.2,1) both;animation-play-state:paused}
.balken i.rosa{background:var(--rosa)}
.sichtbar .balken i{animation-play-state:running}
@keyframes wachsen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.balken i{animation:none}}
.null{font-size:96px;font-weight:800;letter-spacing:-.04em;line-height:.9}
.balken-karten .quelle{margin-top:auto}
.bild-breit{padding:56px 0 72px}

/* 05.11.: Null rot, Über-mich-Text volle Breite */
.null{color:var(--rosa)}
.ueber p,.ueber .lead,.werdegang{max-width:none}
.haltung .quelle{color:var(--ink);margin-top:10px}.feld-karte .chips li{font-size:14px;padding:4px 12px}
.haltung .zwei>div{display:flex;flex-direction:column}.haltung .quelle{margin-top:auto;padding-top:10px}
.karussell{position:relative}
.k-spur{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 22px)/2);gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 8px 10px 2px;margin:-2px -8px -10px -2px}
.k-spur::-webkit-scrollbar{display:none}
.k-spur>.zitat:nth-child(odd){scroll-snap-align:start}
.k-spur:focus-visible{outline:2px dashed var(--ink);outline-offset:6px}
@media (max-width:900px){.k-spur{grid-auto-columns:100%}.k-spur>.zitat{scroll-snap-align:start}}
.k-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:clamp(18px,4vw,56px);height:56px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.k-links{left:calc(-1 * clamp(20px,4vw,56px))}.k-rechts{right:calc(-1 * clamp(20px,4vw,56px))}
.k-pfeil svg{width:12px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.k-links:hover svg{transform:translateX(-3px)}.k-rechts:hover svg{transform:translateX(3px)}
.k-pfeil:disabled{opacity:.2;cursor:default}.k-pfeil:disabled svg{transform:none}
.b-werkzeuge .chips li{background:var(--paper)}
.vb-falle{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.vb-banner{position:fixed;z-index:50;left:16px;right:16px;bottom:16px;max-width:560px;margin-left:auto;background:var(--paper);border:var(--rand);border-radius:20px;box-shadow:var(--schatten);padding:20px 22px;font-size:15px;line-height:1.5}
.vb-banner p{margin:0 0 12px}
.vb-banner .vb-titel{font-weight:700;font-size:18px;margin-bottom:6px}
.vb-wahl{display:grid;gap:8px;margin:0 0 14px}
.vb-wahl label{display:flex;gap:10px;align-items:center}
.vb-wahl input{width:18px;height:18px;accent-color:var(--ink)}
.vb-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.vb-knoepfe .knopf{padding:10px 16px;font-size:15px}
@media (max-width:520px){.vb-knoepfe .knopf{flex:1 1 100%}}
/* Stimmen: immer Bild links mit Name darunter, Zitat rechts (ausser Handy) */
@media (min-width:701px){
  .zitat{grid-template-columns:180px minmax(0,1fr)}
  .zitat .person{flex-direction:column;align-items:flex-start}
  .zitat .foto{width:180px;height:180px}
  .zitat figcaption{align-items:flex-start;text-align:left}
}
@media (min-width:901px) and (max-width:1319px){.zitat{grid-template-columns:140px minmax(0,1fr);gap:20px}.zitat .foto{width:140px;height:140px}}
@media (min-width:901px) and (max-width:1099px){.zitat{grid-template-columns:110px minmax(0,1fr);gap:16px;padding:20px}.zitat .foto{width:110px;height:110px}.zitat blockquote{font-size:18px}}
.null{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
@media (min-width:901px){.b-unten{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}
@media (min-width:901px) and (max-width:1360px){.b-unten{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:901px) and (max-width:1319px){.zitat .tags{display:flex;flex-wrap:wrap;gap:8px}.zitat .tags li{overflow:visible;white-space:nowrap;text-overflow:clip;padding:4px 10px;font-size:13px}}
/* Handy: Menü und Playbook-Knopf auf einer Linie, Logo darüber */
@media (max-width:700px){
  .kopf .logo{flex-basis:100%}
  .kopf nav{order:3;width:auto;flex:1 1 auto;gap:14px;font-size:15px;overflow:visible}
  .kopf .nav-knopf{order:4;margin-left:auto;align-self:center;padding:7px 12px;font-size:14px}
}
@media (max-width:389px){.kopf nav{gap:10px;font-size:14px}.kopf .nav-knopf{padding:6px 10px;font-size:13px}}
.muster .aktionen{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.muster.erledigt .kopfzeile{background:var(--hellblau,#A4B8DD)}
@media (max-width:700px){
  .kopf .wrap{column-gap:10px}
  .kopf nav{flex:0 1 auto}
  .karte{padding:20px}
  .karte li{padding-top:5px;padding-bottom:5px}
  .karte li::before{top:4px}
  .karte ul{margin:12px 0}
  .muster .inhalt{padding:16px}
  .muster h3{font-size:21px;margin-bottom:8px}
  .muster p{font-size:16px;margin-bottom:6px}
  .muster .mono.klein{font-size:13px}
  .muster ol{margin:8px 0;font-size:15px}
  .muster .prompt.verdeckt{max-height:66px;padding:10px 12px;font-size:12.5px}
  .muster .prompt.verdeckt::after{height:40px}
  .muster .aktionen{margin-top:10px;gap:8px}
  .muster .aktionen .knopf{padding:8px 12px;font-size:14px}
}
@media (max-width:389px){.kopf nav{font-size:14px}}
.ueber img{height:auto;aspect-ratio:1/1;object-fit:cover}
/* Handy: Menü und Knopf brechen nie um, das Menü wird notfalls seitlich scrollbar */
@media (max-width:700px){
  .kopf .wrap{flex-wrap:wrap}
  .kopf nav{flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:none;gap:12px}
  .kopf nav::-webkit-scrollbar{display:none}
  .kopf .nav-knopf{flex:0 0 auto}
}
@media (max-width:399px){.kopf nav{font-size:14px;gap:10px}.kopf .nav-knopf{padding:6px 10px;font-size:13px}}
/* Handy: Menü passt sich der Breite an, ohne Überschneidung */
@media (max-width:700px){
  .kopf .wrap{column-gap:clamp(6px,2vw,10px)}
  .kopf nav{gap:clamp(8px,3vw,14px);font-size:clamp(12px,3.75vw,15px);overflow:visible}
  .kopf nav a{white-space:nowrap}
  .kopf .nav-knopf{font-size:clamp(12px,3.4vw,14px);padding:6px clamp(8px,2.6vw,12px)}
}
@media (max-width:700px){.kopf .nav-knopf{position:relative;top:-3px}}

/* Für wen: Zeile im Hero und Liste in den Fragen */
.fuerwen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:22px;font-weight:600;font-size:17px}
.fuerwen .chips li{font-size:15px;padding:5px 13px}
.fuerwen .chips{display:contents}
.fuerwen-liste{margin:0;padding:0 0 20px 20px;display:grid;gap:8px}
@media (max-width:600px){.fuerwen{gap:8px;font-size:16px}.fuerwen .chips li{font-size:14px;padding:4px 11px}}

/* Sprachschalter DE / EN klein in der Fusszeile, ganz rechts (10.11.) */
.fuss .wrap{justify-content:flex-start;align-items:center}
.fuss nav{margin-left:auto}
.sprache{display:flex;align-items:center;gap:6px;font:500 14px/1 var(--mono);color:var(--muted);white-space:nowrap}
.sprache a{text-decoration:none;color:var(--muted);padding:4px 2px;border-bottom:2px solid transparent}
.sprache a:hover{background:none;color:var(--ink);border-bottom-color:var(--rosa)}
.sprache a[aria-current=true]{color:var(--ink);border-bottom-color:var(--ink)}
.sprache span{opacity:.6}
.fuss .sprache{margin-left:22px}
@media (max-width:700px){.fuss nav{display:contents}.fuss .wrap>span{flex-basis:100%}}

/* Playbook 1.0: Ablauf mit Bild pro Schritt und Prompt beim richtigen Schritt */
.anw .ablauftitel{font:500 12.5px/1.9 var(--mono);text-transform:uppercase;letter-spacing:0;margin:18px 0 4px;font-size:14px}
.anw ol.ablauf{margin:0 0 18px;padding-left:24px;display:grid;gap:18px;font-size:16px}
.anw ol.ablauf li{min-width:0}
.anw .schrittbild{display:block;margin-top:10px;border:var(--rand);border-radius:12px;overflow:hidden;background:#fff;max-width:860px}
.anw .schrittbild img{display:block;width:100%;height:auto}
.anw .promptblock{margin-top:12px}
.anw .prompttitel{display:block;margin-bottom:-6px}
.anw .promptblock .prompt{margin-top:10px}
@media (max-width:600px){.anw ol.ablauf{padding-left:20px}}