/* ======================================================================
   website/assets/site.css · Startseite, Richtung A „Ein Tag" (#1872)

   Übernommen aus design/mockups/landing/landing-varianten.html (Richtung A).
   Abweichungen gegenüber dem Mockup, alle ohne sichtbare Änderung:
   - Hell und dunkel folgen der Geräteeinstellung statt einem Umschalter.
   - Die Breitenstufen sind Medienabfragen statt Container-Abfragen: Die Seite
     ist hier das Fenster, nicht ein Gerät in einer Bühne.
   - Die Balkenhöhen der Klausurkarte stehen hier statt als style-Attribut im
     HTML, damit die Inhaltsrichtlinie (vercel.json) keine Inline-Stile
     erlauben muss.
   - Schriften liegen als Dateien im Ordner (Web ohne Google, #1830).
   ====================================================================== */

/* Schriften · aus assets/fonts/ der App (OFL), beim Bau nach fonts/ kopiert.
   Beide sind variable Schriften: eine Datei trägt alle Stärken. */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("../fonts/BricolageGrotesque.ttf") format("truetype");
  font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("../fonts/HankenGrotesk.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ======================================================================
   Tokens · wörtlich aus DESIGN.md §3/§4 (über das Mockup). Kein Hex außerhalb
   dieser Blöcke.
   ====================================================================== */
:root{
  --bg:#eeede6;--surface:#faf9f4;--surface-2:#eceae2;
  --ink:#16140d;--muted:#5b594f;--faint:#9b988c;
  --line:rgba(22,20,13,.11);--line-2:rgba(22,20,13,.18);
  --accent:#a9d62e;--accent-2:#97c327;--on-accent:#33420a;
  --fill-edge:var(--ink);--focus-ring:var(--on-accent);
  --warn:#c0492f;
  --fach-1:#015a34;--fach-2:#015c9f;
  --on-fach:#fff;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0a0a0a;--surface:#161616;--surface-2:#1f1f1f;
    --ink:#f4f2ec;--muted:#a2a09a;--faint:#6e6c67;
    --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.18);
    --accent:#bfe34a;--accent-2:#abcf3c;--on-accent:#1c2406;
    --fill-edge:var(--line-2);--focus-ring:var(--accent-2);
    --warn:#e0795f;
    --fach-1:#46986a;--fach-2:#6897dc;
    --on-fach:#000;
  }
}
:root{
  --r-chip:10px;--r-btn:12px;--r-card:14px;
  --ctrl-h:44px;
  --ease:cubic-bezier(.23,1,.32,1);
  --font-ui:"Hanken Grotesk",system-ui,sans-serif;
  --font-disp:"Bricolage Grotesque",system-ui,sans-serif;
  --z-sticky:10;
  /* Zeitschiene: Spalte Uhrzeit, Spalte Punkt, Abstand */
  --tc:58px;--rc:20px;--cg:12px;--nd-y:13px;
  color-scheme:light dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.5;min-height:100vh;overflow-x:hidden}
a{color:inherit}
svg{flex:0 0 auto;display:block}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2.5px solid var(--focus-ring);outline-offset:2px;border-radius:6px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.disp{font-family:var(--font-disp)}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.skip{position:absolute;left:12px;top:-60px;z-index:calc(var(--z-sticky) + 1);background:var(--accent);color:var(--on-accent);
  font-weight:700;padding:10px 14px;border-radius:var(--r-btn);text-decoration:none}
.skip:focus{top:12px}

/* Kopfzeile */
.head{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg);border-bottom:1px solid var(--line)}
.head .in{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 16px;max-width:1240px;margin:0 auto}
.home{display:inline-flex;align-items:center;text-decoration:none;min-height:44px;margin-right:auto;border-radius:10px}
/* Das Lockup (#1993) ist ein Bild mit Schriftzug in Pfaden. 20px hoch: Das
   Zeichen ist dann etwa so hoch wie im Entwurf der Kopfzeile (Runde 3).
   Zwei Bilder statt <picture>: Ein <source media> wählt Chromium nur beim
   Laden aus. Stellt jemand das Gerät bei offener Seite auf Dunkel, stünde
   das helle Lockup auf dunklem Grund. Die Medienabfrage wechselt sofort. */
.lockup{display:block;flex:0 0 auto;width:auto;height:20px}
.lockup-dunkel{display:none}
@media (prefers-color-scheme:dark){
  .lockup-hell{display:none}
  .lockup-dunkel{display:block}
}
.head .head-cta{display:none}
.head.cta-on .head-cta{display:inline-flex}

/* Knöpfe (§7). Ein Primary je Sicht. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ctrl-h);padding:0 18px;
  border-radius:var(--r-btn);font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .12s var(--ease),background-color .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn .ico{width:17px;height:17px}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-2)}
.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-text{color:var(--ink);padding:0 10px;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.btn-text:hover{text-decoration-thickness:2.5px}
.btn-sm{min-height:var(--ctrl-h);padding:0 12px;font-size:.88rem}
.btn-lg{min-height:52px;padding:0 22px;font-size:1rem}

/* Fußzeile */
.foot{border-top:1px solid var(--line);padding:22px 16px 30px}
.foot .in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 6px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:.92rem;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px;border-radius:8px}
.foot nav a:hover{color:var(--ink)}

/* Nachgebaute App-Ausschnitte (§8): dieselben Flächen wie in der App */
.app-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-card);padding:14px 15px}
.kick{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.fk{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 6px;border-radius:6px;
  font-size:.7rem;font-weight:700;letter-spacing:.02em;color:var(--on-fach)}
.f1{background:var(--fach-1)}.f2{background:var(--fach-2)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{min-height:var(--ctrl-h);padding:0 13px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);
  border-radius:var(--r-chip);background:var(--surface-2);color:var(--ink);font-weight:600;font-size:.86rem}
.chip.on{background:color-mix(in srgb,var(--accent) 22%,var(--surface));border-color:color-mix(in srgb,var(--accent) 60%,var(--surface));font-weight:700}

/* ======================================================================
   Seitenkopf
   ====================================================================== */
.hero{padding:34px 16px 8px;max-width:1240px;margin:0 auto;display:grid;gap:18px}
h1{font-family:var(--font-disp);font-weight:700;font-size:2.3rem;line-height:1.04;letter-spacing:-.03em;max-width:13ch}
.lede{font-size:1.06rem;line-height:1.55;color:var(--muted);max-width:50ch}
.lede span{color:var(--ink);font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px}
.where{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.92rem;color:var(--muted)}
.where .ico{width:17px;height:17px}

/* Uhrzeit-Leiste: springt in den Tag */
.ruler{margin-top:8px;border-top:1px solid var(--line)}
.ruler ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 6px;padding-top:14px}
.ruler a{display:inline-flex;align-items:center;gap:7px;min-height:var(--ctrl-h);padding:0 11px;border:1px solid var(--line-2);
  border-radius:var(--r-chip);background:var(--surface);text-decoration:none;font-size:.86rem;color:var(--muted);font-weight:600}
.ruler a b{color:var(--ink);font-weight:700}
.ruler a:hover{background:var(--surface-2)}

/* ======================================================================
   Die Zeitschiene des Tages
   ====================================================================== */
.day{max-width:1240px;margin:0 auto;padding:34px 16px 18px}
.slots-wrap{position:relative}
.slots{list-style:none;position:relative}
.slot:not(:last-child)::before{content:"";position:absolute;left:calc(var(--tc) + var(--cg) + var(--rc) / 2 - 1px);top:var(--nd-y);bottom:calc(var(--nd-y) * -1);width:2px;background:var(--line-2)}
.rail-fill{position:absolute;z-index:1;left:calc(var(--tc) + var(--cg) + var(--rc) / 2 - 3px);top:var(--nd-y);width:6px;height:var(--rail-h,0px);
  background:var(--accent);border:1.5px solid var(--fill-edge);border-radius:4px;transform-origin:top;transform:scaleY(var(--p,0));
  transition:transform .3s var(--ease)}
.slot{position:relative;display:grid;grid-template-columns:var(--tc) var(--rc) minmax(0,1fr);column-gap:var(--cg);row-gap:14px;padding-bottom:44px;scroll-margin-top:76px}
.slot:last-child{padding-bottom:6px}
.slot:focus{outline:none}
.t{grid-column:1;grid-row:1;text-align:right;padding-top:2px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.t b{font-family:var(--font-disp);font-weight:600;font-size:1.06rem;letter-spacing:-.01em;color:var(--muted)}
.t span{font-size:.74rem;font-weight:600;color:var(--muted);line-height:1.25}
.nd{grid-column:2;grid-row:1;justify-self:center;margin-top:6px;position:relative;z-index:2;width:14px;height:14px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-2);box-shadow:0 0 0 4px var(--bg)}
.appt .nd{background:var(--muted);border-color:var(--muted)}
.life .nd{background:var(--surface-2);border:2px dashed var(--muted)}
.slot.past .nd{background:var(--ink);border-color:var(--ink)}
.slot.is-now .nd{width:20px;height:20px;margin-top:3px;background:var(--accent);border:2px solid var(--fill-edge)}
.slot.is-now .t b{color:var(--ink);font-weight:700}
.txt{grid-column:3;grid-row:1;max-width:46ch}
.txt h3{font-weight:600;font-size:1.4rem;line-height:1.15;letter-spacing:-.025em}
.txt p{margin-top:8px;color:var(--muted);line-height:1.55}
.shot{grid-column:3;grid-row:2;max-width:420px;width:100%}

/* App-Ausschnitte */
.cal ul{list-style:none;margin-top:10px;display:grid;gap:1px}
.cal li{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:.9rem}
.cal li span:first-child{color:var(--muted);font-weight:600}
.cal .m{font-size:.8rem;color:var(--muted)}
.cal .ok{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:.88rem;font-weight:600}
.cal .ok .ico{width:16px;height:16px}
.next .kick{display:flex;align-items:center;gap:6px}
.now-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--accent);color:var(--on-accent);
  border:1px solid var(--fill-edge);letter-spacing:.05em}
.nx-title{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:1.15rem;font-family:var(--font-disp);letter-spacing:-.015em}
.nx-title b{font-weight:600}
p.m{font-size:.86rem;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
p.m .ico{width:15px;height:15px}
p.m b{color:var(--ink)}
.fake{width:100%;margin-top:14px;pointer-events:none}
.fb-q,.cq{font-size:1.12rem;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin-top:6px}
.fb .chips{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.fb .chip{justify-content:center;padding:0 4px;font-size:.8rem;text-align:center;white-space:nowrap}
.fb .chip .ico{width:15px;height:15px}
.card-q .kick{display:flex;align-items:center;gap:8px}
.mini-rail{display:grid;gap:10px}
.mr{display:grid;grid-template-columns:44px 12px 1fr;gap:10px;align-items:center;font-size:.9rem}
.mr>span{color:var(--muted);font-weight:600;text-align:right;font-size:.82rem}
.mr i{width:10px;height:10px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface)}
.mr.done i{background:var(--ink);border-color:var(--ink)}
.mr.done p{color:var(--muted)}
.mr.life i{border-style:dashed;border-color:var(--muted)}
.mr p{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mr.plan p{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-card);padding:10px 12px}
.lifebox{border:1.5px dashed var(--line-2);border-radius:11px;background:var(--surface-2);padding:9px 12px;color:var(--muted)}
.lifebox b{color:var(--ink);font-weight:600}
.lifebox .ico{width:16px;height:16px}
.lifebox span{margin-left:auto}
.chat{display:grid;gap:10px;font-size:.92rem;line-height:1.5}
.chat .me{justify-self:end;max-width:85%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-card) var(--r-card) 4px var(--r-card);padding:10px 13px}
.chat .srch{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--muted)}
.chat .srch .ico{width:15px;height:15px}
.chat .ai{max-width:92%;color:var(--ink)}
.ex-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.98rem}
.ex-h .ico{width:17px;height:17px;color:var(--warn)}
.ex-h span{margin-left:auto;font-size:.86rem;font-weight:700;padding:3px 8px;border-radius:7px;border:1px solid var(--line-2);background:var(--surface-2)}
.bars{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:128px;margin-top:12px}
.bars li{display:grid;grid-template-rows:1fr auto auto;justify-items:center;height:100%;gap:3px}
.bars i{align-self:end;width:100%;max-width:30px;height:calc(var(--h) * 100%);min-height:8px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:5px}
/* Höhen = Minuten je Tag / 60 (20, 25, 30, 30, 40, 45, 60), wie im Mockup */
.bars li:nth-child(1){--h:.33}.bars li:nth-child(2){--h:.42}.bars li:nth-child(3){--h:.5}.bars li:nth-child(4){--h:.5}
.bars li:nth-child(5){--h:.67}.bars li:nth-child(6){--h:.75}.bars li:nth-child(7){--h:1}
.bars .today i{background:var(--accent);border:1.5px solid var(--fill-edge)}
.bars span{font-size:.74rem;color:var(--muted);font-weight:600}
.bars b{font-size:.74rem;font-weight:700}

/* ======================================================================
   Daten und Ende
   ====================================================================== */
.facts{max-width:1240px;margin:0 auto;padding:30px 16px 8px}
.facts h2,.end h2{font-weight:600;font-size:1.55rem;line-height:1.15;letter-spacing:-.025em}
.facts ul{list-style:none;margin-top:14px;border-top:1px solid var(--line)}
.facts li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.facts li .ico{width:20px;height:20px;margin-top:1px;color:var(--muted)}
.facts-more{margin-top:10px}
.facts-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-underline-offset:3px;text-decoration-thickness:1.5px}
.facts-more a:hover{text-decoration-thickness:2.5px}
.end{max-width:1240px;margin:0 auto;padding:36px 16px 44px}
.end>p{margin-top:8px;color:var(--muted);max-width:52ch}
.alt{color:var(--muted);font-size:.95rem;display:flex;align-items:center;flex-wrap:wrap}
.alt .btn-text{padding:0 6px}
.end>p.store{font-size:.88rem}

/* ======================================================================
   Breitenstufen (DESIGN.md §15): unter 600 Handy, ab 600 iPad, ab 1100 Browser
   ====================================================================== */
@media (min-width:600px){
  :root{--tc:96px;--rc:24px;--cg:18px}
  .hero{padding:52px 32px 12px}
  h1{font-size:3.4rem}
  .day,.facts,.end{padding-left:32px;padding-right:32px}
  .ruler ol{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
  .ruler li{display:flex}
  .ruler a{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:8px 10px;min-height:56px;font-size:.8rem;width:100%}
  .ruler a b{font-size:.95rem}
  .t b{font-size:1.7rem}
  .txt h3{font-size:1.6rem}
  .slot{padding-bottom:56px}
  .facts ul,.facts-more{max-width:720px}
  .head .in{padding-left:24px;padding-right:24px}
}
@media (min-width:1100px){
  :root{--tc:150px;--rc:28px;--cg:24px;--nd-y:21px}
  .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:56px;align-items:end;padding:72px 40px 16px}
  h1{font-size:4.6rem;max-width:12ch}
  .hero-side{padding-bottom:8px}
  .ruler{grid-column:1 / -1}
  .ruler ol{gap:10px}
  .ruler a{padding:10px 14px;font-size:.86rem}
  .ruler a b{font-size:1.05rem}
  .day,.facts,.end{padding-left:40px;padding-right:40px}
  .t b{font-size:2.6rem;letter-spacing:-.02em;line-height:1}
  .t span{font-size:.82rem}
  .nd{margin-top:14px}
  .slot.is-now .nd{margin-top:11px}
  .slot{grid-template-columns:var(--tc) var(--rc) minmax(0,1fr) 440px;column-gap:var(--cg);padding-bottom:72px}
  .txt{padding-top:8px;padding-right:24px}
  .txt h3{font-size:2rem}
  .txt p{font-size:1.05rem}
  .shot{grid-column:4;grid-row:1}
  .end{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:end}
  .end h2{font-size:2.4rem;max-width:18ch}
  .end .cta-row{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .head .in{padding-left:40px;padding-right:40px}
  .foot{padding-left:40px;padding-right:40px}
}

/* Bewegung reduzieren: ohne Übergang, „Jetzt" springt */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}