/* Berichtsheft 1v0 – Gestaltung. Hell = Papier & Tinte, Dunkel = Nachtblau. */
:root{
  --bg:#efeae0; --papier:#fffdf8; --papier2:#f7f3ea; --linie:#c9d6ee; --rand:#dcd5c6; --text:#1c2333; --leise:#6b7385;
  --tinte:#1f3c88; --tinte2:#3559c7; --tinte-hell:#e6ecfb; --gold:#e3a33b; --gut:#1f8a5b; --warn:#c2412d;
  --schatten:0 1px 2px rgba(40,30,10,.06),0 8px 24px rgba(40,30,10,.08); --rund:16px;
  --a-betrieb:#3559c7; --a-schule:#8a4fd1; --a-ueberbetr:#11867d; --a-urlaub:#2f9e5b; --a-krank:#d0453a; --a-feiertag:#e08a1e;
  --a-ausflug:#0f8fb8; --a-pruefung:#c4407a; --a-frei:#9aa1ad; --a-ferien:#d7a514;
  --fs:16px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1320; --papier:#171d2e; --papier2:#1c2337; --linie:#2b3654; --rand:#29324a; --text:#e7ebf5; --leise:#9aa4bd;
  --tinte:#8fb0ff; --tinte2:#a9c2ff; --tinte-hell:#22305a; --schatten:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);}}
:root[data-theme="dark"]{
  --bg:#0f1320; --papier:#171d2e; --papier2:#1c2337; --linie:#2b3654; --rand:#29324a; --text:#e7ebf5; --leise:#9aa4bd;
  --tinte:#8fb0ff; --tinte2:#a9c2ff; --tinte-hell:#22305a; --schatten:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:var(--fs)/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100vh;overscroll-behavior-y:contain}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--tinte)}
.laden{display:grid;place-items:center;min-height:90vh;text-align:center;color:var(--leise)}
.laden-heft{font-size:56px;animation:wipp 1.4s ease-in-out infinite}
@keyframes wipp{50%{transform:rotate(-8deg) translateY(-4px)}}

/* ---------- Grundgerüst ---------- */
.rahmen{display:flex;min-height:100vh}
.seite{flex:1;min-width:0;padding:0 0 96px}
.kopf{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rand)}
.kopf-in{max-width:980px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:10px}
.kopf h1{font-size:19px;margin:0;font-weight:750;letter-spacing:-.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inhalt{max-width:980px;margin:0 auto;padding:14px}
.navi{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;background:var(--papier);border-top:1px solid var(--rand);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.06)}
.navi button{flex:1;max-width:120px;background:none;border:0;padding:6px 2px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;color:var(--leise);cursor:pointer}
.navi button b{font-size:22px;line-height:1;font-weight:400}
.navi button.an{color:var(--tinte);background:var(--tinte-hell)}
@media (min-width:900px){
  .navi{position:sticky;top:0;flex-direction:column;justify-content:flex-start;gap:6px;width:200px;height:100vh;border-top:0;border-right:1px solid var(--rand);padding:18px 12px;box-shadow:none}
  .navi::before{content:"📒 Berichtsheft";font-weight:800;font-size:18px;padding:6px 10px 16px;color:var(--tinte)}
  .navi button{flex:none;flex-direction:row;max-width:none;gap:10px;font-size:15px;padding:10px 12px;justify-content:flex-start}
  .navi button b{font-size:20px}
  .seite{padding-bottom:40px}
}
.signatur{position:fixed;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));font-size:11px;color:var(--leise);opacity:.75;z-index:5;pointer-events:none}
@media (min-width:900px){.signatur{bottom:8px}}

/* ---------- Knöpfe, Felder ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--rand);background:var(--papier);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600;min-height:44px;transition:transform .08s,background .15s}
.knopf:active{transform:scale(.97)}
.knopf.voll{background:var(--tinte);border-color:var(--tinte);color:#fff}
:root[data-theme="dark"] .knopf.voll{color:#0f1320}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .knopf.voll{color:#0f1320}}
.knopf.gold{background:linear-gradient(135deg,#f3c25a,#e3a33b);border-color:#d79a2f;color:#3a2600}
.knopf.klein{min-height:36px;padding:6px 10px;font-size:14px;border-radius:10px}
.knopf.rot{color:var(--warn)}
.knopf.breit{width:100%}
.knopf:disabled{opacity:.5;cursor:default}
.rund{width:42px;height:42px;border-radius:50%;border:1px solid var(--rand);background:var(--papier);display:grid;place-items:center;cursor:pointer;font-size:18px;flex:none}
.feld{display:block;margin:0 0 12px}
.feld>span{display:block;font-size:13px;color:var(--leise);margin:0 0 4px;font-weight:600}
.eingabe,select.eingabe,textarea.eingabe{width:100%;border:1px solid var(--rand);background:var(--papier);border-radius:12px;padding:11px 12px;min-height:46px;outline:none}
.eingabe:focus{border-color:var(--tinte2);box-shadow:0 0 0 3px color-mix(in srgb,var(--tinte2) 22%,transparent)}
.reihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.reihe>.feld{flex:1;min-width:130px}
.leise{color:var(--leise)} .klein{font-size:13px} .mitte{text-align:center}
.karte{background:var(--papier);border:1px solid var(--rand);border-radius:var(--rund);box-shadow:var(--schatten);padding:16px;margin:0 0 14px}
.karte h2{margin:0 0 10px;font-size:18px}
.karte h3{margin:14px 0 8px;font-size:15px}
.schalter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--rand)}
.schalter:first-of-type{border-top:0}
.schalter input[type=checkbox]{appearance:none;width:50px;height:30px;border-radius:30px;background:var(--rand);position:relative;cursor:pointer;flex:none;transition:background .2s}
.schalter input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}
.schalter input[type=checkbox]:checked{background:var(--gut)}
.schalter input[type=checkbox]:checked::after{left:23px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--rand);background:var(--papier);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;gap:5px;min-height:36px}
.chip.an{background:var(--tinte);border-color:var(--tinte);color:#fff}
:root[data-theme="dark"] .chip.an{color:#0f1320}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.an{color:#0f1320}}
.chip .x{opacity:.6;font-weight:700;margin-left:2px}
.tage-wahl{display:flex;gap:6px;flex-wrap:wrap}
.tage-wahl .chip{min-width:46px;justify-content:center}

/* ---------- Woche ---------- */
.wochenkopf{display:flex;align-items:center;gap:8px}
.wochenkopf .titel{flex:1;text-align:center;line-height:1.2;cursor:pointer}
.wochenkopf .titel b{display:block;font-size:17px}
.wochenkopf .titel small{color:var(--leise);font-size:13px}
.blattinfo{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.blattinfo .werte{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px}
.blattinfo .werte b{font-size:16px}
.fortschritt{height:6px;border-radius:6px;background:var(--rand);overflow:hidden;margin-top:10px}
.fortschritt i{display:block;height:100%;background:linear-gradient(90deg,var(--gut),#5fd18f);border-radius:6px;transition:width .4s}
.aktionen{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.aktionen .knopf{flex:1;min-width:110px}

.tag{position:relative;background:var(--papier);border:1px solid var(--rand);border-radius:var(--rund);box-shadow:var(--schatten);margin:0 0 12px;overflow:hidden}
.tag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--artfarbe,var(--a-betrieb))}
.tag-kopf{display:flex;align-items:center;gap:8px;padding:10px 12px 6px 16px;flex-wrap:wrap}
.tag-name{font-weight:750;font-size:16px;min-width:0}
.tag-name small{font-weight:500;color:var(--leise);margin-left:6px;font-size:13px}
.tag.heute .tag-name::after{content:"heute";margin-left:8px;font-size:11px;font-weight:700;background:var(--gold);color:#3a2600;padding:2px 7px;border-radius:999px;vertical-align:2px}
.art-chip{border:0;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:650;cursor:pointer;background:color-mix(in srgb,var(--artfarbe) 16%,transparent);color:var(--artfarbe);display:inline-flex;gap:4px;align-items:center;min-height:30px}
.zeit-chip{border:1px dashed var(--rand);background:transparent;border-radius:999px;padding:4px 10px;font-size:13px;cursor:pointer;color:var(--leise);min-height:30px}
.zeit-chip b{color:var(--text)}
.tag-kopf .platz{flex:1}
.tag-kopf .mini{width:34px;height:34px;border-radius:10px;border:1px solid var(--rand);background:var(--papier);cursor:pointer;display:grid;place-items:center;font-size:16px}
.tag-hinweis{padding:0 16px 4px;font-size:12px;color:var(--leise)}
.zeit-edit{display:none;padding:4px 16px 10px;gap:8px;flex-wrap:wrap;align-items:end}
.zeit-edit.offen{display:flex}
.zeit-edit label{font-size:12px;color:var(--leise);display:flex;flex-direction:column;gap:2px}
.zeit-edit input{border:1px solid var(--rand);background:var(--papier2);border-radius:10px;padding:7px 8px;min-height:40px;width:112px}
.zeit-edit input.kurz{width:80px}
.faecher{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 6px}
.faecher .chip{min-height:30px;padding:3px 10px;font-size:13px;background:color-mix(in srgb,var(--a-schule) 12%,var(--papier));border-color:color-mix(in srgb,var(--a-schule) 30%,transparent)}
.zeilen{padding:2px 12px 8px 16px}
.zeile{border-bottom:1px solid var(--linie)}
.zeile{display:flex;align-items:flex-start;gap:6px;position:relative}
.zeile textarea{flex:1;border:0;background:transparent;resize:none;padding:6px 2px;line-height:22px;min-height:34px;outline:none;overflow:hidden;font-size:16px;color:var(--text)}
.zeile textarea::placeholder{color:color-mix(in srgb,var(--leise) 70%,transparent);font-style:italic}
.zeile .std{width:58px;border:0;border-bottom:1px solid transparent;background:transparent;text-align:right;padding:6px 2px;line-height:22px;font-variant-numeric:tabular-nums;outline:none}
.zeile .std:focus,.zeile .rp:focus{border-bottom-color:var(--tinte2)}
.zeile .rp{width:58px;border:0;background:transparent;text-align:center;padding:6px 2px;line-height:22px;outline:none;font-size:14px}
.zeile .ber{border:0;border-radius:8px;width:30px;height:28px;margin-top:3px;font-size:12px;font-weight:800;cursor:pointer;flex:none}
.ber-b{background:color-mix(in srgb,var(--a-betrieb) 15%,transparent);color:var(--a-betrieb)}
.ber-u{background:color-mix(in srgb,var(--a-ueberbetr) 15%,transparent);color:var(--a-ueberbetr)}
.ber-s{background:color-mix(in srgb,var(--a-schule) 15%,transparent);color:var(--a-schule)}
.zeile .zauber{border:0;background:none;cursor:pointer;font-size:16px;padding:6px 2px;opacity:0;transition:opacity .15s}
.zeile:focus-within .zauber{opacity:1}
.tag-fuss{display:flex;align-items:center;justify-content:space-between;padding:4px 12px 10px 16px;font-size:13px;color:var(--leise);gap:8px}
.tag-fuss .summe{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.stift-vorschau{margin:2px 12px 10px 16px;border:1px dashed var(--rand);border-radius:12px;cursor:pointer;display:block;width:calc(100% - 28px);background:var(--papier2)}
.tag.zu .zeilen,.tag.zu .tag-fuss,.tag.zu .faecher,.tag.zu .stift-vorschau,.tag.zu .tag-hinweis{display:none}
.tag.zu{opacity:.75;box-shadow:none}
.tag.zu .tag-kopf{padding-bottom:10px}
.status-punkt{width:10px;height:10px;border-radius:50%;background:var(--rand);flex:none}
.status-punkt.gut{background:var(--gut)} .status-punkt.fehlt{background:var(--warn)}
.speicher{font-size:12px;color:var(--leise);min-width:70px;text-align:right}
.speicher.fehler{color:var(--warn);font-weight:700}

/* Vorschläge */
.vorschlag{position:absolute;left:0;right:0;top:100%;z-index:15;background:var(--papier);border:1px solid var(--rand);border-radius:12px;box-shadow:var(--schatten);overflow:hidden;max-height:260px;overflow-y:auto}
.vorschlag button{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 12px;cursor:pointer;border-top:1px solid var(--rand);font-size:15px}
.vorschlag button:first-child{border-top:0}
.vorschlag button:hover,.vorschlag button.an{background:var(--tinte-hell)}
.vorschlag button small{color:var(--leise);font-size:11px;margin-left:6px}
.vorschlag mark{background:none;color:var(--tinte);font-weight:700}

/* Unterschriften */
.unterschriften{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.sig{border:1px solid var(--rand);border-radius:14px;padding:10px;background:var(--papier2);cursor:pointer;min-height:110px;display:flex;flex-direction:column}
.sig span{font-size:12px;color:var(--leise)}
.sig canvas{flex:1;width:100%;height:60px}
.sig .leer{flex:1;display:grid;place-items:center;color:var(--leise);font-size:14px}

/* ---------- Fenster (unten aufgehend am Handy) ---------- */
.schleier{position:fixed;inset:0;background:rgba(10,14,25,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:auf .18s ease}
@keyframes auf{from{opacity:0}}
.fenster{background:var(--papier);width:100%;max-width:640px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:hoch .22s cubic-bezier(.2,.8,.2,1)}
@keyframes hoch{from{transform:translateY(40px)}}
@media (min-width:700px){.schleier{align-items:center}.fenster{border-radius:22px}}
.fenster h2{margin:0 0 12px;font-size:20px}
.fenster .griff{width:44px;height:5px;border-radius:5px;background:var(--rand);margin:-8px auto 12px}
.knopfreihe{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.knopfreihe .knopf{flex:1}
.artwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.artwahl button{border:2px solid transparent;background:color-mix(in srgb,var(--artfarbe) 13%,var(--papier));color:var(--text);border-radius:14px;padding:12px 10px;cursor:pointer;font-weight:650;text-align:left;display:flex;gap:8px;align-items:center;min-height:52px}
.artwahl button.an{border-color:var(--artfarbe)}
.artwahl button i{font-style:normal;font-size:20px}

/* Zeichenfläche */
.zeichnen{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column}
.zeichnen .leiste{display:flex;gap:6px;align-items:center;padding:8px calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left));border-bottom:1px solid var(--rand);background:var(--papier);flex-wrap:wrap}
.zeichnen .leiste b{flex:1;font-size:16px;min-width:120px}
.zeichnen .flaeche{flex:1;position:relative;overflow:hidden;touch-action:none}
.zeichnen canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.zeichnen .tip{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:13px;color:var(--leise);pointer-events:none}
.werkzeug.an{background:var(--tinte-hell);border-color:var(--tinte2)}

/* ---------- Kalender ---------- */
.jahr{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.monat{background:var(--papier);border:1px solid var(--rand);border-radius:16px;padding:10px 10px 12px;box-shadow:var(--schatten)}
.monat h3{margin:0 0 6px;font-size:15px;text-align:center}
.mgitter{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.mgitter .wt{font-size:10px;text-align:center;color:var(--leise);font-weight:700}
.ktag{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font-size:12px;position:relative;cursor:pointer;background:color-mix(in srgb,var(--artfarbe,transparent) 22%,transparent);color:var(--text);font-variant-numeric:tabular-nums;border:2px solid transparent}
.ktag.frei{background:transparent;color:var(--leise)}
.ktag.eigen{font-weight:800}
.ktag.heute{border-color:var(--gold)}
.ktag.wahl{outline:3px solid var(--tinte2);outline-offset:-1px;z-index:1}
.ktag.ok::after,.ktag.fehlt::after{content:"";position:absolute;bottom:2px;width:5px;height:5px;border-radius:50%;background:var(--gut)}
.ktag.fehlt::after{background:var(--warn)}
.legende{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;margin:4px 0 12px}
.legende span{display:inline-flex;align-items:center;gap:5px}
.legende i{width:14px;height:14px;border-radius:4px;background:color-mix(in srgb,var(--artfarbe) 35%,transparent);display:inline-block}
.wahlleiste{position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:35;background:var(--tinte);color:#fff;border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:8px;box-shadow:0 10px 30px rgba(31,60,136,.35);flex-wrap:wrap;max-width:940px;margin:0 auto}
@media (min-width:900px){.wahlleiste{left:224px;bottom:18px}}
:root[data-theme="dark"] .wahlleiste{background:#2b4aa8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wahlleiste{background:#2b4aa8}}
.wahlleiste span{flex:1;font-weight:600;min-width:150px}
.wahlleiste .knopf{min-height:38px;padding:6px 12px;background:#fff;color:var(--tinte);border:0}

/* Suche */
.treffer{display:block;width:100%;text-align:left;border:1px solid var(--rand);background:var(--papier);border-radius:14px;padding:12px;margin:0 0 8px;cursor:pointer}
.treffer b{font-size:14px}
.treffer p{margin:4px 0 0;white-space:pre-line;font-size:14px;color:var(--leise)}
.treffer mark{background:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--text);border-radius:3px;padding:0 1px}

/* Vorlagen-Auswahl */
.vorlagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.vorlage{border:2px solid var(--rand);border-radius:14px;padding:10px;background:var(--papier2);cursor:pointer;text-align:left}
.vorlage.an{border-color:var(--tinte2);background:var(--tinte-hell)}
.vorlage svg{width:100%;height:auto;display:block;margin-bottom:6px;border-radius:6px;background:#fff}
.vorlage span{font-size:13px;font-weight:650;line-height:1.25;display:block}

/* Anmelden */
.start{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--tinte2) 18%,var(--bg)),var(--bg) 60%)}
.start-box{width:100%;max-width:420px}
.start h1{font-size:30px;margin:6px 0 4px;letter-spacing:-.02em}
.start .logo{font-size:52px}
.reiter{display:flex;background:var(--papier2);border-radius:12px;padding:4px;margin:0 0 14px;border:1px solid var(--rand)}
.reiter button{flex:1;border:0;background:none;padding:9px;border-radius:9px;font-weight:650;cursor:pointer;color:var(--leise)}
.reiter button.an{background:var(--papier);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.vorteile{display:grid;gap:6px;margin:16px 0 0;font-size:14px;color:var(--leise)}

/* Assistent */
.schritte{display:flex;gap:6px;margin:0 0 16px}
.schritte i{flex:1;height:5px;border-radius:5px;background:var(--rand)}
.schritte i.an{background:var(--tinte2)}

.werbung{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#241a52,#4a2c7a);color:#f4eefc;border:0;text-decoration:none}
.werbung b{color:#f3c25a}
.werbung .stern{font-size:34px}
.werbung-zeile{text-align:center;font-size:12px;color:var(--leise);margin:18px 0 6px}
.werbung-zeile a{color:inherit}

#toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#1c2333;color:#fff;padding:11px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:100;max-width:90vw;text-align:center}
#toast.zeigen{opacity:1;transform:translateX(-50%)}
@media (min-width:900px){#toast{bottom:30px}}
@media print{.navi,.kopf,.signatur{display:none}}

.start~.signatur,.signatur.unten{bottom:8px}
.start{padding-bottom:40px}
.zeile .std::placeholder{opacity:0}.zeile:focus-within .std::placeholder,.zeile:hover .std::placeholder{opacity:1}