/* Educazione Vedana Helligkeit steuert das data-theme-Attribut am (siehe base.html): tagsueber hell, nach Sonnenuntergang dunkel, per Schalter uebersteuerbar. prefers-color-scheme dient nur als Rueckfall, falls kein Skript laeuft. */ :root, :root[data-theme="light"]{ --paper:#EFEFEA; --card:#F7F7F3; --sunk:#E5E6DF; --ink:#1A1F1C; --ink-2:#454C47; --ink-3:#6D746E; --rule:#D2D4CB; --rule-soft:#E1E3DA; --accent:#2F5D50; --accent-soft:#DDE7E2; --signal:#8F2D2D; --signal-soft:#F0DEDC; --amber:#7A5A16; --amber-soft:#EDE5CE; --shadow:0 1px 2px rgba(26,31,28,.06), 0 8px 24px -12px rgba(26,31,28,.18); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#12150F; --card:#1B1F19; --sunk:#242821; --ink:#E7E9E0; --ink-2:#B3B8AD; --ink-3:#878D82; --rule:#33382F; --rule-soft:#272C24; --accent:#7FB3A0; --accent-soft:#1F2C27; --signal:#D98A80; --signal-soft:#2E2020; --amber:#C6A45A; --amber-soft:#2A2418; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); } } :root[data-theme="dark"]{ --paper:#12150F; --card:#1B1F19; --sunk:#242821; --ink:#E7E9E0; --ink-2:#B3B8AD; --ink-3:#878D82; --rule:#33382F; --rule-soft:#272C24; --accent:#7FB3A0; --accent-soft:#1F2C27; --signal:#D98A80; --signal-soft:#2E2020; --amber:#C6A45A; --amber-soft:#2A2418; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); } html{transition:background-color .5s ease} *{box-sizing:border-box} body{background:var(--paper); color:var(--ink); margin:0; font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17.5px; line-height:1.62; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; transition:background-color .5s ease, color .5s ease} /* ---------- Navigation ---------- */ .nav{position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--rule)} .nav-in{max-width:1140px; margin:0 auto; padding:0 clamp(16px,4vw,40px); display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:62px} .brand{font-family:"Archivo",sans-serif; font-weight:700; font-size:21px; margin-right:18px; text-decoration:none; color:var(--ink); white-space:nowrap; letter-spacing:-.01em} .brand span{color:var(--accent)} .nav a.tab{font-size:16px; font-weight:500; color:var(--ink-2); text-decoration:none; padding:8px 13px; border-radius:6px; white-space:nowrap} .nav a.tab:hover{background:var(--sunk); color:var(--ink)} .nav a.tab.on{background:var(--accent-soft); color:var(--accent); font-weight:600} .nav .rechts{margin-left:auto; display:flex; align-items:center; gap:12px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12.5px; color:var(--ink-3)} .nav .rechts a{color:var(--ink-3)} .schalter{background:var(--sunk); color:var(--ink-2); border:1px solid var(--rule-soft); border-radius:6px; width:34px; height:32px; font-size:16px; line-height:1; cursor:pointer; padding:0; display:grid; place-items:center} .schalter:hover{background:var(--accent-soft); color:var(--accent); border-color:transparent} .subnav{border-top:1px solid var(--rule-soft); background:var(--sunk)} .subnav .nav-in{min-height:46px; gap:2px} .subnav a{font-size:15px; padding:6px 12px} .wrap{max-width:1140px; margin:0 auto; padding:clamp(26px,4vw,48px) clamp(16px,4vw,40px) 80px} h1{font-family:"Archivo",sans-serif; font-weight:600; font-size:clamp(30px,4.6vw,44px); line-height:1.06; margin:0 0 10px; letter-spacing:-.018em; text-wrap:balance} h2{font-family:"Archivo",sans-serif; font-weight:600; font-size:25px; margin:0 0 8px; letter-spacing:-.017em} .lede{color:var(--ink-2); font-size:17px; margin:0 0 28px; max-width:66ch} a{color:var(--accent)} a:focus-visible,button:focus-visible,input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px} /* ---------- Anmeldung ---------- */ .login-mitte{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px} .login-box{background:var(--card); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); padding:38px 34px; width:100%; max-width:410px} .login-box h1{font-size:31px; margin-bottom:6px} .login-box .unter{color:var(--ink-3); font-size:15px; margin:0 0 26px} label{display:block; font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 7px} input[type=email],input[type=password],input[type=search],input[type=text]{ width:100%; padding:12px 14px; font-size:16.5px; font-family:inherit; background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:7px} .feld{margin-bottom:18px} button[type=submit]{font-family:inherit; font-size:16.5px; font-weight:600; cursor:pointer; background:var(--accent); color:var(--paper); border:0; padding:13px 22px; border-radius:7px; width:100%} button[type=submit]:hover{filter:brightness(1.12)} .fehler{background:var(--signal-soft); color:var(--signal); font-size:15px; padding:11px 14px; border-radius:6px; margin:0 0 20px} /* ---------- Suche ---------- */ .suchzeile{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:10px} .suchzeile input{flex:1; min-width:230px} .suchzeile button{width:auto; padding:12px 26px} .bereich{display:flex; gap:5px; margin-bottom:28px} .bereich a{font-size:15px; text-decoration:none; color:var(--ink-2); padding:6px 15px; border-radius:20px; border:1px solid var(--rule)} .bereich a.on{background:var(--accent); color:var(--paper); border-color:transparent; font-weight:600} .treffer{display:flex; flex-direction:column; gap:15px} .t{background:var(--card); border:1px solid var(--rule); border-radius:9px; padding:18px 20px} .t .kopf{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px} .t .titel{font-family:"Archivo",sans-serif; font-weight:600; font-size:19px; letter-spacing:-.01em} .badge{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.07em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:var(--sunk); color:var(--ink-3)} .badge.amtlich{background:var(--accent-soft); color:var(--accent); font-weight:500} .badge.alt{background:var(--signal-soft); color:var(--signal)} .t .zeile{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-3); margin:0 0 10px} .t .aus{font-size:16px; color:var(--ink-2); margin:0; line-height:1.58} .t mark{background:var(--accent-soft); color:var(--ink); padding:0 3px; border-radius:3px} .t .warn{font-size:14px; color:var(--signal); margin:9px 0 0} .leer{color:var(--ink-3); font-size:17px; padding:44px 0; text-align:center} /* ---------- Kalender ---------- */ .timeline{display:flex; flex-direction:column; border-left:2px solid var(--rule); margin-left:9px} .tl{position:relative; padding:0 0 26px 28px} .tl:last-child{padding-bottom:0} .tl::before{content:""; position:absolute; left:-8px; top:7px; width:14px; height:14px; border-radius:50%; background:var(--paper); border:2px solid var(--ink-3)} .tl.hart::before{background:var(--signal); border-color:var(--signal)} .tl.vorbei{opacity:.45} .tl-kopf{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap} .tl-datum{font-family:"JetBrains Mono",monospace; font-size:13.5px; font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums; letter-spacing:.02em} .tl.hart .tl-datum{color:var(--signal)} .tl-in{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--ink-3); background:var(--sunk); border-radius:4px; padding:2px 8px} .tl-titel{font-family:"Archivo",sans-serif; font-size:20px; font-weight:600; margin:4px 0 6px; line-height:1.2; letter-spacing:-.012em} .tl-wer{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--ink-3); background:var(--sunk); border-radius:4px; padding:3px 8px; margin-left:9px; vertical-align:3px; letter-spacing:0} .tl-text{font-size:16px; color:var(--ink-2); margin:0; max-width:70ch; white-space:pre-line; line-height:1.6} /* ---------- Kind ---------- */ .kacheln{display:grid; gap:15px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:32px} .kachel{background:var(--card); border:1px solid var(--rule); border-radius:9px; padding:18px 20px; text-decoration:none; color:inherit; display:block} .kachel:hover{border-color:var(--accent)} .kachel .n{font-family:"Archivo",sans-serif; font-weight:600; font-size:22px; margin:0 0 3px} .kachel .k{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-3); margin:0 0 9px} .kachel .p{font-size:15px; color:var(--ink-2); margin:0} .kachel .f{font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--signal); margin:9px 0 0} .platzhalter{background:var(--card); border:1px dashed var(--rule); border-radius:9px; padding:38px 28px; color:var(--ink-3); font-size:16px; max-width:72ch; line-height:1.6} .platzhalter b{color:var(--ink); font-weight:600} .kette{font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--ink-2); background:var(--sunk); border-radius:6px; padding:15px 17px; margin-top:18px; overflow-x:auto; white-space:nowrap; line-height:1.9} .kette b{color:var(--accent); font-weight:500} @media (prefers-reduced-motion: reduce){ html, body{transition:none} } /* ================= Dokumentseite ================= */ .brotkrume{font-family:"JetBrains Mono",monospace; font-size:13px; margin:0 0 18px} .brotkrume a{text-decoration:none} .dok-kopf{border-bottom:2px solid var(--ink); padding-bottom:20px; margin-bottom:22px} .dok-marken{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px} .dok-kopf h1{font-size:clamp(26px,4vw,38px); margin:0 0 10px} .dok-meta{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ink-3); margin:0; word-break:break-word} .warnkasten{background:var(--signal-soft); color:var(--signal); font-size:15px; padding:11px 14px; border-radius:6px; margin:14px 0 0} .dok-aktionen{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:26px} .knopf{display:inline-block; font-size:15.5px; font-weight:600; text-decoration:none; background:var(--accent); color:var(--paper); padding:10px 18px; border-radius:7px; border:1px solid transparent} .knopf:hover{filter:brightness(1.12)} .knopf.leer{background:transparent; color:var(--accent); border-color:var(--rule)} .knopf.leer:hover{background:var(--accent-soft); border-color:transparent; filter:none} .knopf.klein{font-size:14px; padding:7px 14px} .vorschau{border:1px solid var(--rule); border-radius:9px; overflow:hidden; background:var(--card); margin-bottom:32px} .vorschau iframe{display:block; width:100%; height:min(78vh,900px); border:0; background:var(--card)} .hinweis{background:var(--sunk); border-radius:7px; padding:16px 18px; color:var(--ink-2); font-size:15.5px; margin:0 0 32px; max-width:66ch} /* ---- In den Plan aufnehmen ---- */ .zum-plan{background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:24px 26px; margin-top:34px} .zum-plan h2{margin-top:0} .planform{display:flex; flex-direction:column; gap:2px} .planform .reihe{display:grid; gap:14px; grid-template-columns:1fr; margin-bottom:2px} @media(min-width:700px){.planform .reihe{grid-template-columns:1.2fr 1.2fr .8fr}} .planform .feld{margin-bottom:14px} .planform select, .planform input[type=date]{ width:100%; padding:11px 13px; font-size:16px; font-family:inherit; background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:7px} .opt{font-family:"Instrument Sans",sans-serif; text-transform:none; letter-spacing:0; color:var(--ink-3); font-size:12px; opacity:.8} .planform button{align-self:flex-start; width:auto; font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; background:var(--accent); color:var(--paper); border:0; padding:12px 24px; border-radius:7px; margin-top:4px} .planform button:hover{filter:brightness(1.12)} .schon{margin-top:24px; border-top:1px solid var(--rule-soft); padding-top:18px} .schon-kopf{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px} .schon-zeile{display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid var(--rule-soft); font-size:15px} .schon-zeile:last-child{border-bottom:0} .schon-zeile .fach{color:var(--ink-3); font-size:14px} .schon-zeile .thema{flex:1; min-width:140px} .schon-zeile form{margin-left:auto} .mini{background:none; border:0; color:var(--ink-3); font-family:"JetBrains Mono",monospace; font-size:12px; cursor:pointer; padding:3px 6px; border-radius:4px} .mini:hover{background:var(--signal-soft); color:var(--signal)} .t.schmal{display:block; text-decoration:none; color:inherit} .t.schmal:hover{border-color:var(--accent)} .t.schmal .titel{display:block; margin-bottom:4px} .t .titel{color:inherit; text-decoration:none} a.titel:hover{color:var(--accent); text-decoration:underline} .t .fuss{margin:10px 0 0; font-size:12.5px} /* ================= Plan je Kind ================= */ .bilanz{display:flex; gap:16px; flex-wrap:wrap; align-items:center; background:var(--card); border:1px solid var(--rule); border-radius:9px; padding:14px 18px; margin-bottom:30px; font-size:15px; color:var(--ink-2)} .bilanz b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums} .bilanz .s-fertig b{color:var(--accent)} .bilanz .s-laeuft b{color:var(--amber)} .bilanz a{margin-left:auto} .planliste{display:flex; flex-direction:column; gap:12px; margin-bottom:34px} .karte{background:var(--card); border:1px solid var(--rule); border-radius:9px; padding:16px 18px; border-left:4px solid var(--rule); display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:start} .karte.st-laeuft{border-left-color:var(--amber)} .karte.st-fertig{border-left-color:var(--accent)} .karte-kopf{grid-column:1/-1; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .karte .thema{font-family:"Archivo",sans-serif; font-size:19px; font-weight:600} .karte .datum{font-family:"JetBrains Mono",monospace; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-left:auto} .karte .ziel{grid-column:1/-1; font-size:15.5px; color:var(--ink-2); margin:0} .karte .notiz{grid-column:1/-1; font-size:15px; color:var(--ink-3); margin:0} .karte .quelle{grid-column:1/-1; font-family:"JetBrains Mono",monospace; font-size:12.5px; margin:2px 0 0} .karte-steuer{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px} .karte-steuer select{font-family:inherit; font-size:14.5px; padding:6px 10px; background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:6px} .haken{display:flex; align-items:center; gap:6px; font-family:"Instrument Sans",sans-serif; font-size:14px; text-transform:none; letter-spacing:0; color:var(--ink-3); margin:0} .karte-weg{margin-top:6px} /* ================= Drucken ================= */ @media print{ .nav, .dok-aktionen, .zum-plan, .karte-steuer, .karte-weg, .bilanz a, .brotkrume, .vorschau, .schon form{display:none !important} body{background:#fff; color:#000; font-size:11pt} .wrap{max-width:none; padding:0} .karte, .t{border:1px solid #ccc; break-inside:avoid; box-shadow:none} h1{font-size:22pt} h2{font-size:15pt; break-after:avoid} a{color:#000; text-decoration:none} }