/* KI-Führerschein, Marketing-Website (site/). Eigenständig von app/app.css, damit der Kurs
   (eigene SPA, #kif-app-gescoped) unangetastet bleibt. Heller, ruhiger Look (Referenz noomoagency.com):
   viel Platz, große Großbuchstaben-Überschrift, wenige Elemente pro Bildschirm. Die Seite scrollt nur
   normal nach unten, es gibt keine seitlichen Bewegungen. Schrift Hanken Grotesk lokal (DSGVO). Siehe DESIGN.md. */

@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{--u:1vw;--uh:1vh;background:#C9D2E7;color-scheme:light;-webkit-text-size-adjust:100%;font-size:max(100%,calc(var(--u)*.95))}
body{margin:0;min-height:100vh;min-height:100dvh}

body.kif-site{
  --bg:#C9D2E7;
  --bg-light:#DEE7F1;
  --blush:#EBDFE4;
  --ink:#181520;            /* fast Schwarz mit leichtem Violett (Referenz) */
  --intro:#231B35;          /* Einleitungstext, dunkel-violett (Referenz) */
  --ink-2:#3D4554;          /* Nebentext, über 4,5:1 */
  --accent:#1F3FD6;        /* Platzhalter-Akzent, wird später gegen die Markenfarbe getauscht */
  --accent-ink:#fff;
  --glass:rgba(255,255,255,.38);
  --glass-edge:rgba(255,255,255,.7);
  --hair:rgba(24,21,32,.14);
  --pad:max(1.25rem,2.4vw);
  --t-small:max(14px,calc(var(--u)*.9));
  --t-body:max(17px,calc(var(--u)*1.1));
  --t-lede:max(18px,calc(var(--u)*1.25));
  --t-h3:max(21px,calc(var(--u)*1.6));
  --t-h2:max(28px,calc(var(--u)*2.6));
  --t-h1:max(38px,calc(var(--u)*4.6));
  --header-h:clamp(64px,3.8vw,8rem);
  position:relative;isolation:isolate;overflow-x:hidden;
  background:var(--bg);color:var(--ink);
  font-family:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;font-size:1.25rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* Rosa Schimmer: radialer Verlauf, etwa Mitte rechts, läuft ins Transparente aus. Eigene feste Ebene statt
   background-attachment:fixed (das ist in Safari auf dem iPhone unzuverlässig). */
body.kif-site::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 21% 44% at 59% 67%,rgba(235,223,228,.96) 0%,rgba(235,223,228,.6) 46%,rgba(235,223,228,0) 100%),
    radial-gradient(ellipse 58% 48% at 70% 10%,rgba(222,231,241,.9) 0%,rgba(222,231,241,0) 100%),
    linear-gradient(100deg,#C9D2E7 0%,#CBD4E8 48%,#D5DDEE 100%);
}
body.kif-site ::selection{background:var(--accent);color:var(--accent-ink)}
body.kif-site :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.site-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}
.site-wrap{position:relative;max-width:var(--site-content,none);margin:0 auto;padding:0 var(--pad)}
.site-main{display:block}
#site-header-mount,#site-footer-mount{display:contents}   /* sonst klebt die Kopfzeile nicht (Eltern-Container) */

/* ---------- Kopfzeile ---------- */
.site-header{
  position:sticky;top:0;z-index:30;background:transparent;
  transition:background-color .25s ease;
}
.site-header.is-stuck,.site-header.is-open{
  background:rgba(201,210,231,.9);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.site-header-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--header-h);padding:0 var(--pad)}
.site-wordmark{font-size:max(2.25rem,calc(var(--u)*2.4));line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.site-nav{display:none;align-items:center;justify-content:space-between}
.site-nav a,.site-mobile-nav a{
  font-size:max(18px,calc(var(--u)*1.2));font-weight:400;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;
  padding:.5rem 0;background:linear-gradient(var(--accent),var(--accent)) left bottom/0 2px no-repeat;transition:background-size .3s cubic-bezier(.16,1,.3,1),color .2s ease-out;
}
.site-nav a:hover{background-size:100% 2px}
.site-nav a[aria-current="page"],.site-mobile-nav a[aria-current="page"]{color:var(--accent);background-size:100% 2px}
.site-burger{display:inline-flex;position:relative;align-items:center;justify-content:center;width:max(52px,2.7vw);height:max(52px,2.7vw);border-radius:999px;border:1px solid var(--hair);background:var(--glass);cursor:pointer;color:var(--ink)}
.site-burger svg{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.site-burger .icon-menu,.site-burger .icon-close{position:absolute;transition:opacity .2s ease-out}
.site-burger .icon-close{opacity:0}
.site-burger.kif-open .icon-menu{opacity:0}
.site-burger.kif-open .icon-close{opacity:1}
.site-mobile-nav{display:none;flex-direction:column;padding:.25rem var(--pad) 1.5rem;border-top:1px solid var(--hair)}
.site-mobile-nav a{align-self:flex-start;font-size:1.0625rem;padding:.9rem 0;background-position:left calc(100% - .6rem)}
.site-mobile-nav.kif-open{display:flex}
/* Desktop (breiter als 1024px, Querformat): Schriftzug links bei 2,6vw, Navigation von 47,5vw bis 98vw gleichmäßig verteilt,
   Kopfzeile 6,7vh hoch. Schmaler oder im Hochformat: Menü-Knopf statt Links. */
@media (min-width:1025px) and (orientation:landscape){
  body.kif-site{--header-h:max(48px,calc(var(--uh)*6.7))}
  .site-header-row{height:var(--header-h);min-height:0;padding:0 2vw 0 2.6vw}
  .site-wordmark{font-size:max(26px,calc(var(--u)*2.1))}
  .site-nav{display:flex;flex:0 0 50.5vw;width:50.5vw}
  .site-nav a{font-size:max(13px,calc(var(--u)*1.15));padding:.4em 0}
  .site-burger,.site-mobile-nav{display:none!important}
}

/* ---------- Glas ---------- */
.glass{
  background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.7);border-radius:28px;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}

/* ---------- Buttons: Pillen, mindestens 52px ---------- */
.site-btn-primary,.site-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:max(52px,2.7vw);min-width:52px;padding:.7rem 1.75rem;
  font:inherit;font-size:.95rem;font-weight:500;line-height:1.2;border-radius:999px;cursor:pointer;text-decoration:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s ease-out,color .2s ease-out;
}
.site-btn-primary{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.site-btn-primary:hover{transform:translateY(-2px);background:#1c2030}
.site-btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.site-btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.5)}
.site-btn-primary svg{width:1.1rem;height:1.1rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.site-cta-row{display:flex;flex-wrap:wrap;gap:.875rem 1rem;align-items:center}

/* ---------- Startseite: Hero ---------- */
/* Grundfassung (Handy, Tablet, Hochformat, ohne JavaScript): alles untereinander, Schätz-mal-Block, Aussage, „Kurs starten“.
   Desktop-Fassung (Fenster breiter als 1024px im Querformat): site.js setzt die Klasse .is-framed und gibt jedem Element
   einen Rahmen in vw und vh (Tabelle HERO_FRAMES in site.js). Die Schriftgrößen von Aussage, Frage und Zahl berechnet
   site.js so, dass der Text seinen Rahmen ausfüllt. Alle anderen Schriften hängen an --u (1vw in Pixel) und --uh (1vh in
   Pixel), die site.js setzt: Safari rechnet vw/vh in font-size bei Seitenzoom nur halb so groß, Pixelwerte stimmen. */
.home-hero{--h1-size:min(calc(var(--u)*12),7rem);padding:1.5rem 0 3rem}
.home-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:2.5rem}
.home-guess{grid-row:1;min-width:0}
.home-main{grid-row:2;min-width:0}
.home-h1{margin:0;font-weight:500;font-size:var(--h1-size);line-height:1;letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
.home-main .site-cta-row{margin-top:1.75rem}

/* ---------- Schätz mal im Hero ---------- */
.gs-stage{display:grid}
.gs-play{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.gs-play.is-active{opacity:1;visibility:visible;transition-delay:0s}
.gs-q{margin:0;font-weight:500;font-size:clamp(2rem,calc(var(--u)*9),3.5rem);line-height:1.05;letter-spacing:0;color:var(--intro);overflow-wrap:break-word}
.gs-sub{margin:.6rem 0 0;font-size:1rem;line-height:1.4;font-weight:500;color:var(--ink-2)}
.gs-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.5rem;row-gap:.5rem;align-items:end;margin-top:1.5rem}
.gs-controls .gs-scale{grid-column:1 / -1;grid-row:2}
.gs-controls .gs-resolve{grid-column:2;grid-row:1}
.gs-est{min-width:0}
.gs-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}   /* nur für Screenreader: Beschriftung des Reglers */
.gs-num{display:block;font-size:clamp(2.5rem,calc(var(--u)*12),4rem);font-weight:400;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:4.2ch}
.gs-scale{--th:2.75rem;--x:calc(var(--th)/2 + (100% - var(--th))*var(--p));--xs:calc(var(--th)/2 + (100% - var(--th))*var(--s,0));--xl:calc(var(--th)/2 + (100% - var(--th))*var(--lo,0));position:relative;height:var(--th);margin:.25rem 0 1.9rem}
.gs-rail{position:absolute;left:0;right:0;top:50%;height:.5rem;margin-top:-.25rem;border-radius:999px;background:rgba(24,21,32,.16)}
.gs-diff{position:absolute;top:0;bottom:0;left:var(--xl);width:calc((100% - var(--th))*var(--span,0));border-radius:999px;background:var(--accent);opacity:0;transition:opacity .25s ease}
.gs-end{position:absolute;bottom:-1.6rem;font-size:1rem;line-height:1.2;color:var(--ink-2);transition:opacity .25s ease}
.gs-end-lo{left:0}
.gs-end-hi{right:0}
.gs-scale.is-resolved .gs-end{opacity:0}
.gs-hint{position:absolute;top:50%;left:var(--x);width:1.15rem;height:.6rem;margin:-.3rem 0 0 -.575rem;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.gs-pin,.gs-pin-t{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.gs-pin{position:absolute;top:50%;left:var(--xs);width:.3rem;height:2.25rem;margin:-1.125rem 0 0 -.15rem;border-radius:999px;background:var(--accent)}
.gs-pin-t{position:absolute;width:8rem;font-size:1rem;line-height:1.2;text-align:center;color:var(--accent);font-weight:600}
.gs-pin-t-you{top:-1.7rem;left:clamp(0px,calc(var(--x) - 4rem),calc(100% - 8rem));color:var(--ink)}
.gs-pin-t-real{bottom:-1.7rem;left:clamp(0px,calc(var(--xs) - 4rem),calc(100% - 8rem))}
.gs-scale.is-resolved .gs-pin,.gs-scale.is-resolved .gs-pin-t,.gs-scale.is-resolved .gs-diff{opacity:1;visibility:visible;transition-delay:0s}
/* Der echte <input type=range> liegt transparent über der Skala: Tastatur, Screenreader und Touch bleiben nativ. */
.gs-range{line-height:1.6;-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.gs-range::-webkit-slider-runnable-track{height:var(--th);background:transparent}
.gs-range::-moz-range-track{height:var(--th);background:transparent}
.gs-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--th);height:var(--th);border:0;border-radius:50%;cursor:inherit;background:radial-gradient(circle,var(--ink) 0 .85rem,transparent calc(.85rem + 1px))}
.gs-range::-moz-range-thumb{width:var(--th);height:var(--th);border:0;border-radius:50%;cursor:inherit;background:radial-gradient(circle,var(--ink) 0 .85rem,transparent calc(.85rem + 1px))}
.gs-range:focus-visible{outline:none}
.gs-range:focus-visible::-webkit-slider-thumb{background:radial-gradient(circle,var(--ink) 0 .85rem,transparent .85rem 1.05rem,var(--accent) 1.05rem 1.25rem,transparent calc(1.25rem + 1px))}
.gs-range:focus-visible::-moz-range-thumb{background:radial-gradient(circle,var(--ink) 0 .85rem,transparent .85rem 1.05rem,var(--accent) 1.05rem 1.25rem,transparent calc(1.25rem + 1px))}
.gs-resolve.is-gone{visibility:hidden}
/* Auflösung: erscheint nur über opacity und transform (nichts springt). */
.gs-res{display:grid;grid-template-columns:minmax(0,1fr);row-gap:.35rem;align-items:start;margin-top:.9rem;visibility:hidden;opacity:0;transform:translateY(.5rem);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.gs-res.is-on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.gs-real{margin:0;font-size:clamp(1.5rem,calc(var(--u)*6),2.25rem);font-weight:400;line-height:1.2;letter-spacing:-.015em}
.gs-real strong{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums}
.gs-ctx{margin:0;font-size:1rem;line-height:1.45;font-weight:500;color:var(--intro);max-width:46em}
.gs-src{margin:0;font-size:.9375rem;line-height:1.4;color:var(--ink-2)}
.gs-real,.gs-ctx,.gs-src{grid-column:1}
.gs-actions{grid-column:1;display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.gs-play:not(.is-active) .gs-res,.gs-play:not(.is-active) .gs-pin,.gs-play:not(.is-active) .gs-pin-t{visibility:hidden}
/* Einspaltig reserviert die Auflösung keinen leeren Platz: sie klappt unterhalb auf und schiebt nur das Folgende. */
.home-hero:not(.is-framed) .gs-play:not(.is-active){display:none}   /* einspaltig: kein reservierter Leerraum für die längere zweite Frage */
.home-hero:not(.is-framed) .gs-res{display:none}
.home-hero:not(.is-framed) .gs-res.is-on{display:grid}
/* Ohne JavaScript: beide Fragen mit Antwort als normaler Text. */
.hq-js .gs-static{display:none}
.gs-static{display:flex;flex-direction:column;gap:2.5rem}
.gs-static p{margin:.5rem 0 0;color:var(--ink-2)}
.gs-static strong{color:var(--accent)}

/* ---------- Desktop: Rahmen-Fassung (Klasse .is-framed, Geometrie inline aus HERO_FRAMES) ---------- */
.home-hero.is-framed{position:relative;height:100vh;height:100dvh;margin-top:calc(-1*var(--header-h));padding:0}
.is-framed .home-hero-grid{position:static;display:block;padding:0;max-width:none}
.is-framed .home-main,.is-framed .home-guess,.is-framed .gs-stage,.is-framed .gs-controls,.is-framed .gs-est,.is-framed .site-cta-row{display:contents}
/* Jede Frage deckt den ganzen Hero ab (gleiches Koordinatensystem), lässt aber Klicks auf Leerflächen durch. */
.is-framed .gs-play{display:block;position:absolute;inset:0;pointer-events:none}
.is-framed .gs-play *{pointer-events:auto}
.is-framed .home-main .site-btn-primary,.is-framed .gs-num,.is-framed .gs-head,.is-framed .gs-scale,.is-framed .gs-resolve,.is-framed .gs-res{position:absolute;margin:0}
.is-framed .home-main .site-btn-primary{display:flex;align-items:center;justify-content:center;padding:0;min-height:0;min-width:0;font-size:max(14px,calc(var(--u)*1.05))}
.is-framed .gs-num{display:flex;align-items:flex-end;white-space:nowrap;line-height:1;min-width:0;text-align:left}
.is-framed .gs-head{display:flex;flex-direction:column;justify-content:flex-end}
.is-framed .gs-q{width:auto;font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--ink);overflow-wrap:normal}
.is-framed .gs-sub{margin-top:1.4rem;font-size:max(14px,calc(var(--u)*1.1));line-height:1.3}
.is-framed .gs-scale{--th:max(44px,calc(var(--u)*2.4))}
.is-framed .gs-rail{height:max(6px,calc(var(--u)*.45));margin-top:calc(max(6px,calc(var(--u)*.45))/-2)}
.is-framed .gs-end{font-size:max(12px,calc(var(--u)*.8));bottom:auto;top:calc(var(--th)/2 + max(6px,calc(var(--u)*.6)));transform:none}
.is-framed .gs-resolve{padding:0;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;font-size:max(14px,calc(var(--u)*1))}
.is-framed .gs-res{grid-template-columns:calc(var(--u)*35.8) calc(var(--u)*12.2);column-gap:calc(var(--u)*2);row-gap:.3em;margin:0}
.is-framed .gs-real{font-size:max(22px,calc(var(--u)*2.1))}
.is-framed .gs-ctx{font-size:max(14px,calc(var(--u)*1.05))}
.is-framed .gs-src{font-size:max(12px,calc(var(--u)*.85))}
.is-framed .gs-actions{grid-column:2;grid-row:1 / span 3;flex-direction:column;align-items:stretch;margin-top:0;gap:.6em}
.is-framed .gs-actions .site-btn-primary,.is-framed .gs-actions .site-btn-ghost{min-height:0;padding:.6em .8em;font-size:max(14px,calc(var(--u)*1));text-align:center;line-height:1.15}
.is-framed .gs-static{position:absolute}
/* Vor der ersten Berechnung unsichtbar, damit nichts springt; nach spätestens 1,2s sichtbar, auch wenn die Berechnung scheitert. */
.hq-js:not(.hq-ready) .home-hero{opacity:0}
.home-hero{transition:opacity .2s ease}
/* Prüfhilfe: mit ?debug=1 werden die Rahmen als gestrichelte Linien gezeigt. Ohne Zusatz ist davon nichts zu sehen. */
.kif-frame-debug{position:absolute;box-sizing:border-box;border:2px dashed;pointer-events:none;z-index:40;font:600 11px/1 ui-monospace,monospace}
.kif-frame-debug span{position:absolute;left:2px;top:2px;padding:1px 3px;background:rgba(255,255,255,.85)}

/* ---------- Startseite: Probier es aus ---------- */
.home-hero,.home-overview,.home-founders,.home-try,#datenschutz,#tipps{scroll-margin-top:var(--header-h)}

/* ---------- Startseite: Überblick (kleine Kachel direkt unter dem oberen Bereich) ---------- */
.home-overview{padding:clamp(2rem,6vh,4.5rem) 0 0}
.home-overview-card{padding:clamp(1.5rem,3.2vw,3.5rem);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.25rem,2.4vw,2.5rem) clamp(2rem,5vw,6rem);align-items:start}
.home-overview-h{grid-column:1;margin:0;font-weight:500;font-size:max(15px,calc(var(--u)*1.05));line-height:1.3;letter-spacing:.24px;text-transform:uppercase;color:var(--ink-2)}
.home-overview-lede{grid-column:1;margin:0;font-weight:500;font-size:max(22px,calc(var(--u)*2.1));line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.home-facts{grid-column:2;grid-row:1 / span 3;list-style:none;margin:0;padding:0;display:grid}
.home-facts li{display:flex;flex-direction:column;gap:.25em;padding:clamp(.9rem,1.6vw,1.6rem) 0;border-top:1px solid var(--hair)}
.home-facts li:first-child{border-top:0;padding-top:0}
.home-fact-n{font-weight:400;font-size:max(28px,calc(var(--u)*3.2));line-height:1;letter-spacing:-.02em;color:var(--ink)}
.home-fact-t{font-weight:500;font-size:max(16px,calc(var(--u)*1.15));line-height:1.35;color:var(--intro)}
.home-overview-card .site-btn-ghost{grid-column:1;justify-self:start;margin-top:.5rem}
@media (max-width:860px){.home-overview-card{grid-template-columns:minmax(0,1fr)}.home-facts{grid-column:1;grid-row:auto}}

/* ---------- Startseite: Probier es aus (Aufbau wie die Referenz: große Überschrift, Pille rechts, Linie, eine Zeile mit Vorschau) ---------- */
.home-try{padding:clamp(1rem,3vh,2.5rem) 0 clamp(4rem,11vh,9rem)}
.home-try-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.25rem,2.4vw,2.5rem)}
.home-h2{margin:0;font-weight:400;font-size:clamp(2.25rem,calc(var(--u)*7.6),12rem);line-height:.95;letter-spacing:-.02em;text-transform:uppercase}
.home-try-pill{flex:none;display:inline-flex;align-items:center;margin-bottom:.4em;padding:.5em 1.15em;border:1.5px solid var(--ink);border-radius:999px;font-weight:400;font-size:max(16px,calc(var(--u)*1.1));line-height:1.2;color:var(--ink);text-decoration:none;transition:background .2s ease-out,color .2s ease-out}
.home-try-pill:hover{background:var(--ink);color:#fff}
.home-try-rule{margin:0;border:0;border-top:1.5px solid var(--ink)}
.home-try-row{display:grid;grid-template-columns:minmax(0,31fr) minmax(0,60fr);column-gap:clamp(1.5rem,3vw,4rem);padding-top:clamp(1.25rem,2vw,2.25rem);color:var(--ink);text-decoration:none}
.demo-preview{position:relative;aspect-ratio:1.72;overflow:hidden;border-radius:4px;padding:6%;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#E9E3F3,#D6E1F4 55%,#E8DFE9);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.home-try-row:hover .demo-preview{transform:scale(1.015)}
.demo-preview-chip{align-self:flex-start;padding:.25em .8em;border-radius:999px;background:rgba(255,255,255,.7);font-size:max(11px,calc(var(--u)*.8));font-weight:500;color:var(--ink-2)}
.demo-preview-bubble{align-self:flex-start;max-width:86%;padding:.7em .95em;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.88);font-size:max(13px,calc(var(--u)*1.15));line-height:1.3;font-weight:500;color:var(--ink)}
.demo-preview-opts{display:flex;gap:.5em;flex-wrap:wrap}
.demo-preview-opts span{padding:.35em .9em;border-radius:999px;border:1px solid rgba(24,21,32,.35);font-size:max(11px,calc(var(--u)*.85));font-weight:500;color:var(--ink)}
.home-try-text{display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;min-width:0}
.home-try-title{margin:0;font-weight:400;font-size:max(24px,calc(var(--u)*2.1));line-height:1.15;letter-spacing:-.01em;max-width:18em;transition:opacity .2s ease}
.home-try-row:hover .home-try-title{opacity:.7}
.home-try-meta{margin:0;display:flex;gap:.7em;align-items:baseline;font-size:max(16px,calc(var(--u)*1.1));color:var(--ink)}
.home-try-meta b{font-weight:500}
@media (max-width:860px){.home-try-row{grid-template-columns:minmax(0,1fr);row-gap:1.25rem}.demo-preview{aspect-ratio:1.6}.home-try-title{font-size:1.5rem}}

/* ---------- Demo-Dialog ---------- */
.demo{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;background:transparent;color:var(--ink);font-family:inherit}
.demo[open]{display:grid;place-items:center;padding:clamp(.75rem,2vw,2rem)}
.demo::backdrop{background:rgba(201,210,231,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.demo-card{width:min(100%,calc(var(--u)*62),68rem);max-height:100%;overflow:auto;padding:clamp(1.25rem,3vw,3rem);border-radius:28px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);box-shadow:0 30px 80px rgba(24,21,32,.12)}
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.25rem,2.4vw,2.25rem)}
.demo-title{margin:0;font-weight:500;font-size:max(14px,calc(var(--u)*.95));letter-spacing:.24px;text-transform:uppercase;color:var(--ink-2)}
.demo-close{flex:none;font:inherit;font-size:max(15px,calc(var(--u)*1));font-weight:500;padding:.5em 1.1em;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s ease-out,color .2s ease-out}
.demo-close:hover{background:var(--ink);color:#fff}
.demo-step{display:flex;align-items:center;gap:.7em;margin:0 0 .9em;font-weight:500;font-size:max(15px,calc(var(--u)*1));color:var(--ink-2)}
.demo-tag{display:inline-grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--ink);color:#fff;font-weight:600;font-size:.95em}
.demo-q{margin:0 0 .6em;font-weight:500;font-size:max(24px,calc(var(--u)*2.3));line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.demo-bubble{margin:0 0 1.25em;padding:.9em 1.2em;border-radius:20px 20px 20px 6px;background:rgba(255,255,255,.85);border:1px solid var(--hair);font-weight:500;font-size:max(18px,calc(var(--u)*1.4));line-height:1.35;color:var(--ink)}
.demo-opts{display:grid;gap:.7rem;margin:1.25rem 0 0}
.demo-bubble + .demo-opts{margin-top:0}
.demo-opt{font:inherit;font-size:max(17px,calc(var(--u)*1.25));font-weight:500;line-height:1.3;text-align:left;padding:.85em 1.2em;border:1.5px solid var(--hair);border-radius:18px;background:rgba(255,255,255,.65);color:var(--ink);cursor:pointer;transition:background .2s ease-out,border-color .2s ease-out,transform .25s cubic-bezier(.16,1,.3,1)}
.demo-opt:hover:not(:disabled){background:#fff;border-color:var(--ink);transform:translateY(-1px)}
.demo-opt:disabled{cursor:default}
.demo-opt.is-ok{border-color:var(--accent);background:rgba(31,63,214,.1)}
.demo-opt.is-bad{border-style:dashed;border-color:var(--ink);opacity:.7}
.demo-opt.is-picked{box-shadow:0 0 0 2px var(--ink) inset}
.demo-fb{min-height:0}
.demo-fb p{margin:1.1rem 0 0;font-weight:500;font-size:max(16px,calc(var(--u)*1.1));line-height:1.45;color:var(--intro)}
.demo-next[hidden]{display:none}
.demo-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.demo-frag{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.6rem}
.demo-frag li{display:flex;align-items:center;gap:.8em;font-weight:500;font-size:max(18px,calc(var(--u)*1.5));color:var(--ink)}
.demo-step-plain{margin-top:1.1rem}
.demo-note{margin:1.4rem 0 0;font-size:max(14px,calc(var(--u)*.9));color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.demo-preview,.demo-opt,.home-try-title{transition:none}.home-try-row:hover .demo-preview{transform:none}}

/* ---------- Unterseiten: Typografie / Sektionen ---------- */
.site-section{position:relative;padding:clamp(2.5rem,7vh,5rem) 0}
.site-section-head{max-width:64rem;margin:0 0 clamp(1.5rem,2.4vw,2.5rem)}
.site-wrap.site-section-head{max-width:none;margin:0 0 clamp(1.5rem,2.4vw,2.5rem)}
.site-h2{margin:0 0 .875rem;font-weight:500;font-size:var(--t-h2);line-height:1.1;letter-spacing:-.022em;text-wrap:balance}
h1.site-h2{font-weight:400;font-size:var(--t-h1);line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:1.25rem;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:600px){h1.site-h2{font-size:clamp(28px,calc(var(--u)*8),40px)}}
.site-section .site-sub{max-width:36em;margin:0 0 1rem;color:var(--intro);font-weight:500;font-size:var(--t-lede);line-height:1.45}
.site-label{display:inline-block;margin:0 0 .75rem;font-size:var(--t-small);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
p.site-body{font-size:var(--t-body);line-height:1.6;color:var(--ink-2);max-width:36em}
.site-lede{font-size:var(--t-body);line-height:1.6;color:var(--ink-2);max-width:36em}

/* ---------- Karten / Raster ---------- */
.site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1.25rem}
.site-grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.site-card,.site-founders-inner{
  background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.7);border-radius:24px;padding:clamp(1.5rem,2.6vw,2.25rem);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:.625rem;
}
a.site-card{text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s ease-out}
a.site-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.52)}
.site-card h3,.site-founders-inner h3{margin:0;font-size:var(--t-h3);font-weight:500;letter-spacing:-.012em;line-height:1.2}
.site-card p,.site-founders-inner p{margin:0;font-size:var(--t-body);line-height:1.55;color:var(--ink-2)}
.site-card .site-card-link{margin-top:auto;font-size:1.0625rem;color:var(--accent);font-weight:500}
.site-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.site-split .site-founders-inner h3{font-size:var(--t-h3);letter-spacing:-.018em}
@media (max-width:700px){.site-split{grid-template-columns:minmax(0,1fr)}}

/* Glossar (wissen.html) */
.site-glossary{display:flex;flex-direction:column}
.site-glossary-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,8rem);align-items:start;padding:clamp(1.5rem,2.6vw,2.5rem) 0;border-top:1px solid var(--hair)}
.site-glossary-item:last-child{border-bottom:1px solid var(--hair)}
.site-glossary-item h3{margin:0;font-size:var(--t-h3);font-weight:500;letter-spacing:-.015em;line-height:1.2}
.site-glossary-item .site-lede{margin:0}
@media (max-width:760px){.site-glossary-item{grid-template-columns:minmax(0,1fr);row-gap:.6rem}}

.site-badge-todo{display:inline-flex;font-size:.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#7a4b00;background:rgba(255,190,80,.35);padding:.2rem .6rem;border-radius:999px}

/* FAQ */
.site-faq{display:flex;flex-direction:column;gap:.75rem}
.site-faq details{background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.7);border-radius:20px;overflow:hidden;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.site-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1em 1.4em;font-size:var(--t-body);font-weight:500;color:var(--ink)}
.site-faq summary::-webkit-details-marker{display:none}
.site-faq summary:focus-visible{outline-offset:-3px;border-radius:16px}
.site-faq summary .chev{width:1.15rem;height:1.15rem;flex:0 0 auto;stroke:var(--ink-2);fill:none;stroke-width:1.8;transition:transform .25s ease-out}
.site-faq details[open] summary .chev{transform:rotate(180deg)}
.site-faq details[open] summary{color:var(--accent)}
.site-faq details[open] summary .chev{stroke:var(--accent)}
.site-faq-a{padding:0 1.4em 1.2em;color:var(--ink-2);font-size:var(--t-body);line-height:1.6;max-width:44em}
.site-faq-a a,.site-todo-note a,.site-legal-block a,.site-form-hint a{color:var(--accent)}

/* Schritte ("So läuft's ab", kurs/fuer-schulen) */
.site-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:2rem 1.25rem;counter-reset:step;position:relative}
.site-steps::before{content:'';position:absolute;top:1.375rem;left:0;right:0;height:1px;background:var(--hair)}
.site-step{position:relative;padding:0 1rem 0 0}
.site-step-n{counter-increment:step;position:relative;z-index:1;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:999px;background:var(--bg);color:var(--accent);font-size:1.1875rem;font-weight:600;margin-bottom:1rem;box-shadow:inset 0 0 0 2px var(--accent)}
.site-step-n::before{content:counter(step)}
.site-step-trigger{display:block;width:100%;margin:0 0 .5rem;text-align:left}
.site-step h3{font-size:var(--t-h3);font-weight:500;margin:0;line-height:1.2}
.site-step-desc>p{font-size:var(--t-body);color:var(--ink-2);margin:0;line-height:1.55}
@media (max-width:760px){
  .site-steps{display:flex;flex-direction:column;gap:0}
  .site-steps::before{display:none}
  .site-step{padding:0 0 1.75rem 4rem}
  .site-step::after{content:'';position:absolute;left:1.375rem;top:2.75rem;bottom:.375rem;width:1px;background:var(--hair)}
  .site-step:last-child{padding-bottom:0}
  .site-step:last-child::after{display:none}
  .site-step-n{position:absolute;left:0;top:0;margin-bottom:0}
}

/* Tipps */
.site-tip-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:.875rem;align-items:start}
.site-tip{display:flex;gap:1rem;align-items:flex-start;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:1.125rem 1.25rem;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.site-tip-n{flex:0 0 auto;width:2.125rem;height:2.125rem;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:1rem;font-weight:600}
.site-tip p{margin:0;font-size:var(--t-body);line-height:1.5;color:var(--ink)}

.site-note{max-width:60rem;background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:1.2em 1.4em;font-size:var(--t-body);color:var(--ink-2);line-height:1.55}
.site-note strong{color:var(--ink)}

/* Formular (mailto, kein Backend) */
.site-form{max-width:36rem;display:flex;flex-direction:column;gap:1rem}
.site-field label{display:block;font-size:1.0625rem;color:var(--ink-2);margin-bottom:.4rem}
.site-field input,.site-field textarea{width:100%;font:inherit;font-size:1.125rem;color:var(--ink);background:rgba(255,255,255,.6);border:1px solid var(--hair);border-radius:14px;padding:.75rem 1rem}
.site-field textarea{min-height:7.5rem;resize:vertical}
.site-field input:focus,.site-field textarea:focus{outline:3px solid var(--accent);outline-offset:2px}
.site-form-hint{font-size:1rem;color:var(--ink-2)}

/* Impressum */
.site-legal-block{max-width:none;margin:0 0 2.5rem}
.site-legal-block h3{font-size:var(--t-h3);font-weight:500;margin:0 0 .6rem}
.site-legal-block p{font-size:var(--t-body);color:var(--ink-2);line-height:1.6;margin:0 0 .4rem;max-width:44em}
.site-todo-note{display:block;margin:.75rem 0 1.25rem;padding:.8rem 1rem;border-radius:14px;font-size:1.0625rem;color:#7a4b00;background:rgba(255,190,80,.35)}

/* ---------- Fußzeile ---------- */
.site-footer{position:relative;border-top:1px solid var(--hair);padding:2.5rem 0 2rem}
.site-footer-top{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:center;justify-content:space-between}
.site-footer-brand{font-size:1.45rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.site-footer-nav{display:flex;flex-wrap:wrap;gap:.5rem 2rem}
.site-footer-nav a{font-size:max(1.0625rem,calc(var(--u)*1.1));font-weight:400;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:.5rem 0;background:linear-gradient(var(--accent),var(--accent)) left bottom/0 2px no-repeat;transition:background-size .3s cubic-bezier(.16,1,.3,1)}
.site-footer-nav a:hover{background-size:100% 2px}
.site-footer-bottom{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--hair);font-size:1rem;color:var(--ink-2)}

@media (max-width:540px){
  body.kif-site{font-size:1.125rem}
  .site-btn-primary,.site-btn-ghost{padding:.8rem 1.5rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .site-btn-primary:hover,.site-btn-ghost:hover,.try-card:hover,a.site-card:hover{transform:none}
}

/* ---------- Tippanimation, Hinweis-Kreis, Zahl und „Auflösen“ erst nach dem ersten Schieben ---------- */
.gs-w{white-space:nowrap}
.gs-play.is-typing .gs-ch:not(.on){opacity:0}
.gs-ch.cur{box-shadow:.055em 0 0 var(--ink)}
.gs-sub{transition:opacity .45s ease}
.gs-play.is-typing .gs-sub{opacity:0}
.gs-num{transition:opacity .3s ease}
.gs-play:not(.has-guess) .gs-num{opacity:0}
.gs-resolve{transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s ease-out,color .2s ease-out,opacity .3s ease}
.gs-play:not(.has-guess) .gs-resolve{opacity:0;visibility:hidden;pointer-events:none}
/* Schwarzer Kreis um den Regler-Griff und „Schätzen Sie“ darüber: der Kreis wird langsam gezeichnet, bleibt kurz stehen und ist dann etwa 0,45 s weg (Takt 1,8 s), bis der
   Regler bewegt wird. Alles Dekorative lässt Mausklicks durch, sonst ließe sich der Griff nicht ziehen. */
.gs-ring{position:absolute;left:var(--x);top:50%;width:calc(var(--th)*1.9);height:calc(var(--th)*1.9);transform:translate(-50%,-50%) rotate(-90deg);overflow:visible;opacity:0}
.gs-ring circle{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.gs-scale.is-hint .gs-ring{animation:gs-ring-pulse 1.8s linear infinite}
.gs-scale.is-hint .gs-ring circle{animation:gs-ring-draw 1.8s cubic-bezier(.45,0,.3,1) infinite}
@keyframes gs-ring-draw{0%{stroke-dashoffset:1}50%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes gs-ring-pulse{0%{opacity:1}72%{opacity:1}76%{opacity:0}100%{opacity:0}}
.gs-cta-hint{position:absolute;left:var(--x);bottom:calc(100% + var(--th)*.5);transform:translateX(-50%);white-space:nowrap;font-size:max(14px,calc(var(--u)*1.15));font-weight:500;color:var(--ink);opacity:0;transition:opacity .3s ease}
.gs-scale.hint-on .gs-cta-hint{opacity:1}
.gs-ring,.gs-hint,.gs-cta-hint,.gs-rail,.gs-diff,.gs-end,.gs-pin,.gs-pin-t,.is-framed .gs-play .gs-ring,.is-framed .gs-play .gs-hint,.is-framed .gs-play .gs-cta-hint,.is-framed .gs-play .gs-rail,.is-framed .gs-play .gs-diff,.is-framed .gs-play .gs-end,.is-framed .gs-play .gs-pin,.is-framed .gs-play .gs-pin-t{pointer-events:none}
.gs-range{cursor:grab}
.gs-range:active{cursor:grabbing}
@media (prefers-reduced-motion:reduce){.gs-ring{display:none}.gs-cta-hint{transition:none}.gs-sub,.gs-num,.gs-resolve{transition:none}}

/* ---------- Startseite: Text der Gründer (zwischen Hero und „Probier es aus.“) ---------- */
.home-founders{padding:clamp(4rem,12vh,9rem) 0 clamp(3rem,8vh,6rem)}
.home-founders-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,8rem);align-items:start}
.home-founders-h{margin:0;font-weight:500;font-size:max(18px,calc(var(--u)*1.2));line-height:1.3;letter-spacing:.24px;text-transform:uppercase;color:var(--ink-2)}
.home-founders-text p{margin:0 0 1.25em;font-weight:500;font-size:max(18px,calc(var(--u)*1.5));line-height:1.5;color:var(--intro);max-width:34em}
.home-founders-text .home-founders-sign{margin:2em 0 0;font-weight:400;font-size:max(16px,calc(var(--u)*1.15));color:var(--ink-2)}
@media (max-width:860px){.home-founders-grid{grid-template-columns:minmax(0,1fr);row-gap:1.5rem}.home-founders-text p{font-size:1.125rem}}