:root{
  --grund:#F4F6F7; --flaeche:#FFFFFF; --linie:#DCE2E4;
  --tinte:#17222A; --tinte-2:#5A6670;
  --plan:#0F6B72; --plan-hell:#DCEBEC;
  --abschluss:#6B4A8F; --abschluss-hell:#EAE1F3;
  --ok:#3F7A52; --warn:#A24336;
}
@media (prefers-color-scheme:dark){
  :root{
    --grund:#0E1517; --flaeche:#16202333; --flaeche:#162023; --linie:#2A3639;
    --tinte:#E6EDEF; --tinte-2:#9FADB3;
    --plan:#5CC2C7; --plan-hell:#14312F;
    --abschluss:#B79AD8; --abschluss-hell:#2A1F3B;
    --ok:#7BBE90; --warn:#DE8B7C;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Muss ueber allem stehen: eigene display-Regeln gewinnen sonst gegen das
   Attribut hidden, und dann laesst sich ein Overlay nicht mehr schliessen. */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:var(--grund); color:var(--tinte);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:17px; line-height:1.5;
}
/* Nur die Startseite zentriert ihre Kacheln. Frueher galt das fuer jede Seite
   und hat auf /heute die Termine nebeneinander gestellt. */
body.startseite{display:flex; flex-direction:column; min-height:100%;}
body.startseite header{padding:40px 24px 8px; text-align:center}
h1{font-size:1.6rem; font-weight:600; margin:0 0 6px; letter-spacing:-.01em}
header p{margin:0; color:var(--tinte-2); font-size:.95rem}
body.startseite main{flex:1; display:flex; align-items:center;
  justify-content:center; padding:24px}
.kacheln{
  display:grid; gap:20px; width:100%; max-width:760px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.kachel{
  display:block; text-decoration:none; color:inherit;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:18px;
  padding:32px 28px; min-height:190px;
  border-top:6px solid var(--rand);
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 28px -18px rgba(0,0,0,.3);
}
.kachel:active{transform:scale(.985)}
.kachel h2{margin:0 0 8px; font-size:1.5rem; font-weight:600; color:var(--rand); letter-spacing:-.01em}
.kachel p{margin:0 0 18px; color:var(--tinte-2); font-size:.97rem}
.kachel .stand{
  display:inline-block; font-size:.78rem; padding:5px 11px; border-radius:99px;
  background:var(--hell); color:var(--rand); font-weight:600;
}
.k-plan{--rand:var(--plan); --hell:var(--plan-hell)}
.k-abschluss{--rand:var(--abschluss); --hell:var(--abschluss-hell)}
body.startseite footer{
  padding:16px 24px 28px; text-align:center; font-size:.8rem; color:var(--tinte-2);
}
footer .punkt{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--tinte-2); margin-right:7px; vertical-align:0}
footer.ok .punkt{background:var(--ok)} footer.weg .punkt{background:var(--warn)}
/* Platzhalterseiten */
.zurueck{display:inline-block; margin:0 0 20px; color:var(--tinte-2);
  text-decoration:none; font-size:.95rem}
.platz{max-width:640px; margin:0 auto; padding:8px 4px}
.platz h1{text-align:left; font-size:1.9rem; margin-bottom:14px}
.platz ul{padding-left:1.2em; color:var(--tinte-2)}
.platz li{margin-bottom:.45em}
.hinweis{background:var(--flaeche); border:1px solid var(--linie);
  border-left:4px solid var(--rand,var(--tinte-2)); border-radius:0 12px 12px 0;
  padding:16px 20px; margin:22px 0; font-size:.95rem}

/* ---------- Mein Plan: Aufgaben ---------- */
.plan-seite{max-width:660px;margin:0 auto;padding:8px 4px 40px}
.eingabe-karte{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:18px;padding:22px 20px;margin-bottom:26px}
.eingabe-karte input[type=text]{
  width:100%;font:inherit;font-size:1.25rem;padding:14px 4px;border:0;
  border-bottom:2px solid var(--linie);background:transparent;color:var(--tinte);
  outline:none;border-radius:0}
.eingabe-karte input[type=text]:focus{border-bottom-color:var(--plan)}
.eingabe-karte input::placeholder{color:var(--tinte-2);opacity:.7}
.frage{font-size:.85rem;color:var(--tinte-2);margin:20px 0 10px}
.dauern{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end}
.dauer{border:1px solid var(--linie);border-radius:12px;padding:10px 4px 12px;
  background:transparent;color:var(--tinte);font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:border-color .12s,background .12s}
.dauer .balken{width:24px;border-radius:4px;background:var(--tinte-2);opacity:.45}
.dauer .zahl{font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums}
.dauer .wort{font-size:.72rem;color:var(--tinte-2)}
.dauer[aria-pressed=true]{border-color:var(--plan);border-width:2px;background:var(--plan-hell)}
.dauer[aria-pressed=true] .balken{background:var(--plan);opacity:1}
.dauer[aria-pressed=true] .zahl,.dauer[aria-pressed=true] .wort{color:var(--plan)}
.knopf{width:100%;margin-top:20px;padding:16px;border:0;border-radius:12px;
  background:var(--plan);color:#fff;font:inherit;font-size:1.08rem;font-weight:600;
  cursor:pointer}
@media (prefers-color-scheme:dark){.knopf{color:#0E1517}}
.knopf:disabled{opacity:.4}

.liste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.eintrag{display:flex;align-items:center;gap:14px;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:14px;padding:14px 16px}
.eintrag .haken{width:30px;height:30px;flex:none;border-radius:50%;
  border:2px solid var(--linie);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:transparent;
  font-size:16px;line-height:1}
.eintrag .haken:hover{border-color:var(--plan)}
.eintrag .text{flex:1;min-width:0}
.eintrag .titel{font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eintrag .min{font-size:.8rem;color:var(--tinte-2);font-variant-numeric:tabular-nums}
.eintrag .weg{border:0;background:transparent;color:var(--tinte-2);font-size:1.3rem;
  cursor:pointer;padding:4px 8px;line-height:1}
.eintrag.fertig{opacity:.5}
.eintrag.fertig .titel{text-decoration:line-through}
.eintrag.fertig .haken{background:var(--plan);border-color:var(--plan);color:#fff}
@media (prefers-color-scheme:dark){.eintrag.fertig .haken{color:#0E1517}}
.leer{text-align:center;color:var(--tinte-2);padding:36px 20px;font-size:.97rem}
.abschnitt{font-size:.8rem;color:var(--tinte-2);margin:26px 0 10px;
  text-transform:uppercase;letter-spacing:.08em}

/* ---------- Anmeldung und Einrichtung ---------- */
.mitte{max-width:420px;margin:0 auto;padding:8px 4px 40px}
.mitte h1{font-size:1.7rem;margin:0 0 8px;text-align:left}
.mitte .unter{color:var(--tinte-2);margin:0 0 26px;font-size:.97rem}
.feld{margin-bottom:18px}
.feld label{display:block;font-size:.85rem;color:var(--tinte-2);margin-bottom:6px}
.feld input{width:100%;font:inherit;font-size:1.1rem;padding:14px 16px;
  border:1px solid var(--linie);border-radius:12px;background:var(--flaeche);
  color:var(--tinte);outline:none}
.feld input:focus{border-color:var(--plan);border-width:2px;padding:13px 15px}
.fehler{background:#F7E3DF;color:#8A342A;border-radius:12px;
  padding:13px 16px;margin-bottom:18px;font-size:.93rem}
@media (prefers-color-scheme:dark){.fehler{background:#2E1A16;color:#DE8B7C}}
.gruppe{border:1px solid var(--linie);border-radius:16px;padding:20px;
  margin-bottom:20px;background:var(--flaeche)}
.gruppe h2{font-size:1.05rem;margin:0 0 14px}
.kopfzeile{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:18px}
.kopfzeile .wer{font-size:.85rem;color:var(--tinte-2)}
.kopfzeile .raus{border:0;background:transparent;color:var(--tinte-2);
  font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline}

/* ---------- Auswahlfelder ---------- */
.wahl{display:flex;flex-direction:column;gap:12px}
.wahlfeld{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  width:100%;text-align:left;font:inherit;color:var(--tinte);cursor:pointer;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;
  padding:18px 20px;transition:border-color .12s,background .12s}
.wahlfeld .w-titel{font-size:1.1rem;font-weight:600}
.wahlfeld .w-text{font-size:.88rem;color:var(--tinte-2)}
.wahlfeld[aria-pressed=true]{border-color:var(--plan);border-width:2px;
  padding:17px 19px;background:var(--plan-hell)}
.wahlfeld[aria-pressed=true] .w-titel{color:var(--plan)}
.kachel.gesperrt{opacity:.55}
.kachel.gesperrt .stand{background:var(--linie);color:var(--tinte-2)}

/* ---------- Meldeleiste, wenn die Seite kein Fehlerfeld hat ---------- */
.meldeleiste{position:fixed;top:0;left:0;right:0;z-index:99;
  background:#A24336;color:#fff;padding:14px 20px;font-size:.95rem;
  text-align:center;box-shadow:0 4px 16px -8px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){.meldeleiste{background:#8A342A}}

/* Farbsystem des Plans. Steht hier und nicht in kalender.css, weil auch
   Einstellungen und Dein Bild die Balkenfarben brauchen.
   Kuehl = Schule und Arbeit.  Warm = Freizeit. */
:root{
  --f-tuerkis:#0F6B72;  --f-blau:#2C5D8A;   --f-indigo:#4C4F8F;
  --f-violett:#6B4A8F;  --f-schiefer:#4C5A62;
  --f-bernstein:#B5762A; --f-koralle:#C0574A; --f-himbeer:#A8476A;
  --f-oliv:#6F7A33;     --f-mokka:#7A5A46;
  --schrift-auf-farbe:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root{
    --f-tuerkis:#5CC2C7;  --f-blau:#7FB2DC;   --f-indigo:#9AA0E0;
    --f-violett:#B79AD8;  --f-schiefer:#9DB0BC;
    --f-bernstein:#DFAE66; --f-koralle:#E8917F; --f-himbeer:#DE8AA6;
    --f-oliv:#AEBB6B;     --f-mokka:#C0A08A;
    --schrift-auf-farbe:#0E1517;
  }
}