/* Louise – Theme "Dunkel" (wie lokal: Graphit-Flächen, Pink nur als Akzent) */
:root {
  --flaeche: #14181D;
  --karte: #1C2128;
  --leiste: #0F1216;
  --text: #E6E8EB;
  --text-leise: #9AA3AD;
  --rahmen: #2B323B;
  --akzent: #E0609A;
  --link: #F08CB8;
  --info: #26303A;
  --fehler: #F07070;
  --ecke: 8px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  line-height: 1.5;
  display: flex;
  min-height: 100vh;
  /* Inhalt so hoch wie nötig, Seitenleiste läuft mit (sticky) */
  align-items: flex-start;
}

a { color: var(--link); }
h1, h2 { font-weight: 700; margin: 0 0 0.5em; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.15rem; font-weight: 600; margin-top: 1.6em; }

/* ---------- Seitenleiste ---------- */
.seitenleiste {
  /* wächst mit dem Bildschirm: 260 px (Laptop) bis 320 px (großer Monitor) */
  width: clamp(260px, 17vw, 320px);
  flex-shrink: 0;
  background: var(--leiste);
  border-right: 1px solid var(--rahmen);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* bleibt beim Scrollen stehen, Kalender immer sichtbar */
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.2rem; }
nav { display: flex; flex-direction: column; gap: 2px; }
nav a { color: var(--text); text-decoration: none; padding: 7px 10px; border-radius: var(--ecke); }
nav a:hover { background: var(--karte); }
nav a.aktiv { background: var(--karte); box-shadow: inset 3px 0 0 var(--akzent); }
.abmelden { margin-top: auto; }

/* Inhalt nutzt die ganze Breite (wie lokal layout="wide"), Rand wächst mit */
main { flex: 1; padding: 32px clamp(24px, 3vw, 56px); min-width: 0; }

/* ---------- Bausteine ---------- */
.knopf-haupt, .knopf-leise {
  font: inherit; border-radius: var(--ecke); padding: 8px 16px; cursor: pointer;
}
.knopf-haupt { background: var(--akzent); color: #fff; border: 1px solid var(--akzent); font-weight: 600; }
.knopf-haupt:hover { filter: brightness(1.1); }
.knopf-leise { background: transparent; color: var(--text-leise); border: 1px solid var(--rahmen); width: 100%; }
.knopf-leise:hover { color: var(--text); }

input {
  font: inherit; color: var(--text); background: var(--karte);
  border: 1px solid var(--rahmen); border-radius: var(--ecke); padding: 8px 10px; width: 100%;
}
input:focus { outline: 2px solid var(--akzent); outline-offset: 0; }

.hinweis { background: var(--info); border-radius: var(--ecke); padding: 12px 16px; }
.fehler { background: #3A1E24; color: var(--fehler); border-radius: var(--ecke); padding: 10px 14px; }
.leise { color: var(--text-leise); }

/* ---------- Startseite: Variante C „Fokus“ (03.11.2026) ---------- */
.s-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--text-leise); font-size: 0.9rem; flex-wrap: wrap; }
.s-kopf b { color: var(--text); font-weight: 600; }
.s-kopf-r { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.s-kopf-r a { color: var(--text-leise); text-decoration: none; }
.s-kopf-r a:hover { color: var(--text); }
.s-kopf .globus { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--rahmen); border-radius: 8px; }
.s-fokus { margin: 58px 0 40px; }
.s-fokus small { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent); font-weight: 600; }
.s-fokus h1 { font-size: 3.6rem; line-height: 1.05; margin: 10px 0 14px; letter-spacing: -0.03em; font-weight: 700; overflow-wrap: anywhere; }
.s-fokus h1 a { color: var(--text); text-decoration: none; }
.s-fokus h1 a:hover { color: var(--link); }
.s-fokus p { font-size: 1.15rem; color: #C3C9D0; margin: 0; }
.s-fokus p b { color: var(--text); }
.s-kratz { display: block; width: 100%; max-width: 420px; height: auto; margin-top: 16px; }
/* Zeilen unter dem Fokus: Name als kleine Spalte links, Termine rechts; „Vorbei“ ausgegraut */
.s-dann { margin: 22px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; width: fit-content; max-width: 100%; font-size: 0.95rem; }
.s-dann > div { display: contents; }
.s-dann dt, .s-dann dd { padding: 7px 0; }
.s-dann dd { padding-left: 18px; } /* Abstand als Innenabstand, damit die Trennlinie keine Lücke hat */
.s-dann > div + div > * { border-top: 1px solid var(--rahmen); } /* feine Linie zwischen den Zeilen (Wunsch 04.11.2026), so breit wie die längste Zeile */
.s-dann dt { font-weight: 600; color: var(--text-leise); } /* gleiche Größe wie die Termine (Wunsch 04.11.2026), normal geschrieben wie „Danach“ über dem Strich */
.s-dann dd { margin: 0; color: var(--text-leise); }
.s-dann dd span, .s-dann dd s { color: var(--text); white-space: nowrap; } /* Eintrag nur als Ganzes umbrechen */
.s-dann .vorbei dt, .s-dann .vorbei dd, .s-dann .vorbei dd span { color: #5F6772; }
.s-stapel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rahmen); border-bottom: 1px solid var(--rahmen); }
.s-stapel a { padding: 18px 20px; text-decoration: none; color: var(--text); border-right: 1px solid var(--rahmen); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.s-stapel a:first-child { padding-left: 0; }
.s-stapel a:last-child { border-right: 0; }
.s-stapel b { font-size: 2.2rem; font-weight: 300; grid-row: span 2; font-variant-numeric: tabular-nums; }
.s-stapel span { font-size: 0.95rem; }
.s-stapel em { font-style: normal; font-size: 0.82rem; color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-stapel em.rot, .s-stapel b.rot { color: #F07070; }
.s-stapel a:hover span { color: var(--link); }
nav.s-mehr { flex-direction: row; flex-wrap: wrap; gap: 4px 26px; margin-top: 16px; font-size: 0.88rem; }
nav.s-mehr a { color: var(--text-leise); padding: 0; background: none; }
nav.s-mehr a:hover { color: var(--text); background: none; }
.s-news { margin-top: 44px; }
.s-news h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-leise); font-weight: 600; margin: 0 0 6px; }
.s-news-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
.s-news-liste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-content: start; padding: 10px 0; border-bottom: 1px solid #232A33; color: var(--text); text-decoration: none; }
.s-news-liste a:hover .s-titel { color: var(--link); }
.s-dach { grid-column: 1; font-size: 0.75rem; color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-dach.eil { color: var(--akzent); font-weight: 600; }
.s-titel { grid-column: 1; font-size: 0.95rem; line-height: 1.35; }
.s-zeit { grid-column: 2; grid-row: 1 / 3; font-size: 0.8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; align-self: center; }
.s-quelle { font-size: 0.75rem; color: #6B7480; margin-top: 10px; }
.s-quelle a { color: inherit; }

/* ---------- Seitenleisten-Kalender ---------- */
.kalender {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--ecke); padding: 10px; font-size: 0.85rem;
}
.kalender-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.kalender-kopf a { color: var(--text); text-decoration: none; padding: 2px 8px; border-radius: 6px; }
.kalender-kopf a:hover { background: var(--karte); }
.kalender-monat { font-weight: 700; }
.kalender table { width: 100%; border-collapse: collapse; }
.kalender th { font-weight: 600; opacity: 0.6; padding: 2px; }
.kalender td { text-align: center; padding: 1px; }
.kalender .tag { display: inline-block; width: 1.7em; height: 1.7em; line-height: 1.7em; border-radius: 50%; }
.kalender .tag.heute { background: var(--akzent); color: #fff; font-weight: 700; }
.kalender .punkte { display: block; height: 5px; line-height: 5px; }
.kalender .punkte i, .legende i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin: 0 1px; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; margin-top: 6px; font-size: 0.7rem; opacity: 0.85; }
.legende i { width: 6px; height: 6px; margin-right: 3px; vertical-align: middle; }
.p-frist { background: #E0609A; }
.p-todo { background: #5FBF7A; }
.p-stundenplan { background: #F0A030; }

a.knopf-leise { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.knopf-leise.klein { width: auto; white-space: nowrap; }

.karte { background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--ecke); padding: 14px 16px; }
.karte p { margin: 6px 0 0; }
.klein-text { font-size: 0.85rem; }

.kennzahlen { display: flex; flex-direction: column; gap: 10px; }
.kennzahl {
  background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--ecke);
  padding: 10px 14px; display: flex; flex-direction: column;
}
.kennzahl span { font-size: 0.85rem; color: var(--text-leise); }
.kennzahl strong { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }

/* ---------- Formulare ---------- */
.zeile-formular { display: flex; gap: 10px; align-items: flex-end; margin: 12px 0; max-width: 520px; }
.zeile-formular label { flex: 1; display: flex; flex-direction: column; gap: 4px; }
form.karte { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin-top: 12px; }
form.karte .knopf-haupt { align-self: flex-start; margin-top: 4px; }
.auswahl { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.auswahl input { width: auto; }

/* ---------- To-Do ---------- */
.erfolg { background: #1E3326; color: #8FD8A4; border-radius: var(--ecke); padding: 10px 14px; margin-bottom: 12px; }
.rot { color: #F07070; }
.durch { text-decoration: line-through; opacity: 0.6; }
form.neu-formular { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; max-width: none; }
.bearbeiten > label.haekchen, .neu-formular > label.haekchen { flex-direction: row; align-self: flex-start; margin-top: 0; }
.neu-formular .knopf-haupt, .bearbeiten .knopf-haupt { align-self: flex-start; }
.felder-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.felder-reihe label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; font-size: 0.9rem; }
.felder-reihe label.breit { flex: 3 1 260px; }
label { font-size: 0.9rem; }
details.mehr label, .bearbeiten > label { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.haekchen { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.haekchen input { width: auto; }
select, textarea {
  font: inherit; color: var(--text); background: var(--karte);
  border: 1px solid var(--rahmen); border-radius: var(--ecke); padding: 8px 10px; width: 100%;
}
textarea { resize: vertical; }
details > summary { cursor: pointer; color: var(--text-leise); font-size: 0.9rem; margin: 4px 0; }
details > summary:hover { color: var(--text); }

.ansicht-reihe { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.ansichten { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--ecke); padding: 3px; }
.ansichten a { color: var(--text-leise); text-decoration: none; padding: 5px 10px; border-radius: 6px; font-size: 0.9rem; }
.ansichten a:hover { color: var(--text); }
.ansichten a.aktiv { background: var(--akzent); color: #fff; font-weight: 600; }
.fach-filter { display: flex; gap: 6px; align-items: center; }
.fach-filter select { width: auto; padding: 5px 8px; }

.aufgaben { display: flex; flex-direction: column; gap: 10px; }
.aufgabe { background: var(--karte); border: 1px solid var(--rahmen); border-radius: var(--ecke); padding: 10px 14px; scroll-margin-top: 16px; }
.aufgabe-kopf { display: flex; gap: 12px; align-items: flex-start; }
.aufgabe-text { flex: 1; min-width: 0; }
.aufgabe.fertig .aufgabe-text strong { text-decoration: line-through; opacity: 0.6; }
.infos { color: var(--text-leise); font-size: 0.88rem; }
.knopf-form { display: inline; margin: 0; }
.haken {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--text-leise); background: transparent;
  color: #fff; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; margin-top: 2px; flex-shrink: 0;
}
.haken:hover { border-color: var(--akzent); }
.haken.an { background: var(--akzent); border-color: var(--akzent); }
.haken.klein { width: 18px; height: 18px; font-size: 0.75rem; margin-top: 0; }
.aufgabe details { margin-top: 6px; padding-left: 34px; }
.aufgabe details details { padding-left: 0; }
.notiz { white-space: pre-wrap; margin: 6px 0; }
.schritte { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.schritt { display: flex; gap: 10px; align-items: center; }
.schritt span { flex: 1; }
.x { background: transparent; border: 0; color: var(--text-leise); font-size: 1.1rem; cursor: pointer; padding: 0 6px; }
.x:hover { color: #F07070; }
.zeile-formular.eng { margin: 4px 0 0; }
.bearbeiten { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rahmen); padding-top: 10px; margin-top: 10px; }
.loeschen { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.loeschen .knopf-leise { width: auto; }

/* Dein Tag */
.tagesplan { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.tagesplan a { color: var(--text); text-decoration: none; }
.tagesplan a:hover { color: var(--link); }
.zwischentitel { font-weight: 600; margin-top: 10px !important; }

/* ---------- Fristen ---------- */
.reiter { margin-bottom: 14px; display: inline-flex; }
label.spalte { display: flex; flex-direction: column; gap: 4px; }
.frist-kopf { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.frist-kopf .knopf-leise { width: auto; white-space: nowrap; }
.aufgabe .frist-kopf + details, .aufgabe .frist-kopf ~ details { padding-left: 0; }
.infos em { font-style: italic; }
.stufe h2 { font-size: 1.05rem; margin: 18px 0 8px; }
.filter-zeile { margin-bottom: 6px; flex-wrap: wrap; gap: 12px; }
.knopf-link { display: inline-block; text-decoration: none; margin: 6px 0 10px; }
.export p { margin: 0 0 10px; }
.export-formular { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
fieldset { border: 1px solid var(--rahmen); border-radius: var(--ecke); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
legend { color: var(--text-leise); font-size: 0.85rem; padding: 0 4px; }
code { background: #26303A; padding: 1px 5px; border-radius: 4px; }

/* ---------- Stundenplan ---------- */
.orange { color: #F0A030; }
.wochen-wahl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.wochen-wahl .knopf-leise { width: auto; }
.radio-reihe { display: flex; gap: 16px; flex-wrap: wrap; }
.knopf-reihe { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.knopf-reihe .knopf-leise { width: auto; }
.zuordnung { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.kennzahlen.zeile { flex-direction: row; flex-wrap: wrap; }
.kennzahlen.zeile .kennzahl { flex: 1 1 140px; }
.klein-zahl { font-size: 1.1rem !important; }
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabelle th { text-align: left; color: var(--text-leise); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--rahmen); }
.tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--rahmen); vertical-align: middle; }
.tabelle td input { padding: 5px 8px; }

/* Wochenraster: eine Rasterzeile = 15 Minuten; Positionen über Klassen aus raster.css */
.raster-rahmen { overflow-x: auto; }
.raster-kopf, .raster { display: grid; gap: 0 4px; min-width: 560px; }
.raster-kopf { margin-bottom: 4px; font-size: 0.8rem; font-weight: 600; text-align: center; }
.raster-kopf .heute { background: var(--akzent); color: #fff; border-radius: var(--ecke); }
.raster-kopf > div { padding: 3px 0; }
.raster { grid-auto-rows: 11px; position: relative; }
.tage-5 { grid-template-columns: 44px repeat(5, minmax(0, 1fr)); }
.tage-6 { grid-template-columns: 44px repeat(6, minmax(0, 1fr)); }
.tage-7 { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
.stundenlinie { grid-column: 2 / -1; border-top: 1px solid rgba(255,255,255,0.06); }
.stunde { font-size: 0.7rem; color: var(--text-leise); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.heute-spalte { background: rgba(224,96,154,0.07); border-radius: 4px; }
.block {
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--ecke); padding: 3px 6px; overflow: hidden;
  font-size: 0.75rem; line-height: 1.25; color: var(--text); text-decoration: none; margin: 1px 0; z-index: 1;
}
.block:hover { outline: 2px solid var(--akzent); }
.block.aus { background: #252A31; }
.block.aus span:not(.block-hinweis) { opacity: 0.6; }
.block.verlegt { border: 2px dashed var(--link); }
.block-hinweis { display: block; font-weight: 700; color: var(--link); }
.fach-0 { background: #5A2E44; } .fach-1 { background: #2E4A35; } .fach-2 { background: #55401F; } .fach-3 { background: #28405A; }
.fach-4 { background: #45335A; } .fach-5 { background: #4F4A1F; } .fach-6 { background: #1F4A47; } .fach-7 { background: #56352B; }
.tagesplan li.naechste a { color: var(--text); }

/* ---------- Lernen ---------- */
.abstand-oben { margin-top: 12px; }
h2.ohne-abstand { margin-top: 0; }
.auswahl-formular { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.auswahl-formular .felder-reihe { width: 100%; }
.kennzahlen.stufen { margin-bottom: 14px; }
.kennzahlen.stufen .kennzahl { flex: 1 1 90px; }
.lernkarte { margin-bottom: 12px; }
.lernkarte strong { display: block; margin-bottom: 4px; }
.md p { margin: 0 0 8px; }
.md ul, .md ol { margin: 4px 0 8px; padding-left: 22px; }
.md p:last-child { margin-bottom: 0; }
details.aufgabe > summary.karten-zeile { color: var(--text); font-size: 0.95rem; margin: 0; }
details.aufgabe[open] > summary.karten-zeile { margin-bottom: 8px; }
.begrenzt { max-height: 420px; overflow-y: auto; }
.legende.links { justify-content: flex-start; font-size: 0.8rem; margin-bottom: 6px; }

/* Balkendiagramme (Höhen über Klassen .hp0–.hp100 aus raster.css) */
.balken-diagramm { display: flex; gap: 3px; align-items: stretch; height: 180px; padding: 8px 0 0; border-bottom: 1px solid var(--rahmen); overflow-x: auto; }
.balken-spalte { flex: 1 0 18px; display: flex; flex-direction: column; align-items: center; min-width: 18px; }
.balken-saeule { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.balken-teil { width: 100%; }
.balken-teil:first-child { border-radius: 3px 3px 0 0; }
.balken-gewusst { background: #6FAE5F; }
.balken-nicht { background: var(--akzent); }
.legende i.balken-gewusst, .legende i.balken-nicht { width: 8px; height: 8px; border-radius: 2px; }
.balken-name { font-size: 0.62rem; color: var(--text-leise); writing-mode: vertical-rl; transform: rotate(180deg); height: 38px; margin-top: 4px; }

/* ---------- Recht ---------- */
.normtext p { margin: 0 0 8px; line-height: 1.55; }
.normtext p.einzug { margin-left: 1.6rem; }
.norm h2 { font-size: 1.15rem; }
.norm .knopf-link { margin-top: 6px; }
.ausschnitt { margin: 6px 0; color: var(--text); }
mark { background: rgba(224,96,154,0.35); color: var(--text); border-radius: 3px; padding: 0 2px; }
.breit-voll { width: 100%; }
.lade-status { margin: 10px 0; font-size: 0.92rem; display: flex; flex-direction: column; gap: 4px; }
.lade-status[hidden] { display: none; }
.lade-status .ok { color: #8FD8A4; }
details.verweis { margin-top: 8px; }
details.verweis .normtext { margin-top: 6px; font-size: 0.92rem; }

/* ---------- COCO (Design „sauber“ vom 03.11.2026: Chips, Farbpunkte, dünne graue Balken) ---------- */
h3 { font-size: 1rem; font-weight: 600; margin: 18px 0 8px; }
.plakette { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: #2B323B; color: #fff; }
.st-rot { background: #E5484D; } .st-orange { background: #F0A030; } .st-gruen { background: #5FBF7A; } .st-grau { background: #9AA3AE; }
/* INFORM-Klassen (eigene, auf Dunkel lesbare Farben) */
.kl-0 { background: #3E7D5A; } .kl-1 { background: #5FBF7A; } .kl-2 { background: #E8C547; } .kl-3 { background: #F0A030; } .kl-4 { background: #E5484D; }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.knopf-spalte { display: flex; flex-direction: column; gap: 6px; }
.knopf-spalte .knopf-leise { width: 100%; }
.bearbeiten > .knopf-leise { align-self: flex-start; width: auto; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
tr.gewaehlt td { background: rgba(224,96,154,0.10); }

nav.tabs { flex-direction: row; gap: 22px; border-bottom: 1px solid var(--rahmen); margin-bottom: 14px; }
nav.tabs a { padding: 8px 0; color: var(--text-leise); font-size: 0.95rem; border-radius: 0; background: none; }
nav.tabs a:hover { color: var(--text); background: none; }
nav.tabs a.aktiv { color: var(--text); background: none; box-shadow: inset 0 -2px 0 var(--akzent); }
.filter-leiste { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.filter-leiste select { max-width: 260px; }
.chip { border: 1px solid var(--rahmen); border-radius: 999px; padding: 3px 11px; font-size: 0.82rem; color: var(--text-leise); text-decoration: none; }
.chip:hover { color: var(--text); }
.chip.aktiv { border-color: var(--akzent); color: var(--text); }
.trenner-v { width: 1px; height: 18px; background: var(--rahmen); margin: 0 6px; }
.neu-laden { margin-left: auto; font-size: 0.8rem; color: var(--text-leise); }
.pk { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right: 6px; vertical-align: middle; }
.kz-zeile { display: flex; gap: 14px 34px; align-items: flex-start; margin: 10px 0 14px; flex-wrap: wrap; }
.kz-zeile b { font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.kz-zeile span { font-size: 0.78rem; color: var(--text-leise); display: block; }
.kz-zeile .kz-stand { margin-left: auto; align-self: flex-end; font-size: 0.78rem; color: #6B7480; }
.kz-stand a { color: inherit; }
.karte-rahmen { background: var(--leiste); border: 1px solid #232A33; border-radius: 10px; padding: 8px; }
.weltkarte { width: 100%; height: auto; display: block; }
.weltkarte a:hover circle:last-of-type { stroke: #E6E8EB; stroke-width: 2; }
.zwei { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; margin-top: 16px; align-items: start; }
.zwei .ev-liste { max-height: 560px; overflow: auto; }
.ev-liste { border-top: 1px solid #232A33; }
.ev-zeile { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 8px; padding: 9px 6px; border-bottom: 1px solid #232A33; color: var(--text); text-decoration: none; align-items: center; }
.ev-zeile:hover { background: var(--karte); }
.ev-zeile .pk { grid-row: span 2; margin: 0; }
.ev-name { font-size: 0.92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-meta { grid-column: 2; font-size: 0.78rem; color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-datum { grid-column: 3; grid-row: 1 / 3; font-size: 0.8rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.ev-zeile.gewaehlt { background: var(--karte); box-shadow: inset 2px 0 0 var(--akzent); }
.det { padding: 4px 2px; }
.det-leer { padding-top: 10px; font-size: 0.9rem; }
.det-titel { font-size: 0.78rem; color: var(--text-leise); display: flex; align-items: center; text-transform: uppercase; letter-spacing: 0.05em; }
.det h3, .profil h3 { font-size: 1.15rem; margin: 6px 0 10px; }
.det dl { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 6px 10px; font-size: 0.88rem; margin: 0; }
.det dt { color: var(--text-leise); }
.det dd { margin: 0; }
.det-links { font-size: 0.88rem; margin: 12px 0 4px; }
.det-fuss, .fuss { font-size: 0.75rem; color: #6B7480; }
.det-fuss { margin: 0; }
.fuss { margin-top: 14px; }
.abschnitt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-leise); margin: 30px 0 10px; font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.stat-grid.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 4px; }
.bgr h4, h4.unter { font-size: 0.88rem; font-weight: 600; margin: 0 0 8px; }
h4.unter { margin-top: 20px; }
h4.unter .leise { font-weight: 400; font-size: 0.78rem; }
.bz { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 2.6em; gap: 8px; align-items: center; font-size: 0.82rem; padding: 3px 0; color: var(--text); text-decoration: none; }
a.bz:hover .bz-n { color: var(--link); }
.bz-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #C3C9D0; }
.bz-b { height: 6px; background: var(--karte); border-radius: 3px; overflow: hidden; }
.bz-b i { display: block; height: 100%; background: #7D8794; border-radius: 3px; }
.bz-b i.hervor { background: var(--akzent); }
.bz-w { text-align: right; font-variant-numeric: tabular-nums; }
.risiko-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 6px; }
.streu { width: 100%; max-width: 440px; height: auto; display: block; }
.streu a:hover circle { stroke: #E6E8EB; stroke-width: 2; }
.legende-zeile { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.75rem; color: var(--text-leise); }
.profil { border-top: 1px solid #232A33; padding-top: 12px; }
.profil-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
details.erklaerung { margin-top: 24px; font-size: 0.88rem; }
details.erklaerung summary { cursor: pointer; color: var(--text-leise); }
.beob-liste { display: flex; flex-direction: column; }
.beob { border-top: 1px solid #232A33; padding: 14px 0; }
.beob-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.beob h3 { margin: 0 0 2px; font-size: 1.05rem; }
.beob .ev-meta { white-space: normal; display: block; }
.beob-knoepfe { display: flex; gap: 6px; flex-shrink: 0; }
.beob .ev-liste { margin-top: 10px; }
.beob-notiz { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.beob-notiz textarea { flex: 1; min-height: 2.6em; font-size: 0.88rem; }
.filter-leiste .knopf-leise.klein, .beob .knopf-leise.klein, .profil-kopf .knopf-leise.klein { padding: 4px 12px; font-size: 0.82rem; }
.filter-leiste select { padding: 4px 8px; font-size: 0.85rem; }

/* ---------- Wetter-Orte ---------- */
.ort-block { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ort-block p { margin: 0; }

/* ---------- Recht: Navigationszeile über dem Normtext ---------- */
.norm-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: stretch; margin: 14px 0 16px; }
.norm-nav > * { margin: 0; }
.norm-nav select { width: 100%; min-width: 0; }
.norm-nav .aus { opacity: 0.35; pointer-events: none; }

/* ---------- Handy: nur die Startseite (Wunsch 04.11.2026) ----------
   Gilt nur für Touch-Geräte mit schmalem Bildschirm – ein schmales Browserfenster am Laptop bleibt voll nutzbar.
   Reine Anzeige-Regel, keine Sperre auf dem Server (Louise nutzt nur eine Person). */
.nur-pc-hinweis { display: none; }
@media (max-width: 800px) and (pointer: coarse) {
  .seitenleiste nav, .seitenleiste .kalender { display: none; }
  .seitenleiste { flex-direction: row; justify-content: space-between; align-items: center; }
  .seitenleiste .abmelden { margin: 0; }
  .seitenleiste .abmelden .knopf-leise { width: auto; padding: 5px 12px; font-size: 0.85rem; }
  /* andere Seiten: Inhalt weg, Hinweis zeigen */
  .seite-andere main > :not(.nur-pc-hinweis) { display: none; }
  .seite-andere .nur-pc-hinweis { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 30px; }
  .nur-pc-hinweis p { margin: 0; color: var(--text-leise); }
  /* Startseite: nur ansehen – Links in andere Bereiche, Wetter-Ort und COCO-Globus aus */
  .s-kopf-r a, .s-kopf .globus, nav.s-mehr { display: none; }
  .s-fokus h1 a, .s-stapel a { pointer-events: none; }
}

/* ---------- Anmeldung ---------- */
.anmelde-body { align-items: center; justify-content: center; padding: 16px; }
.anmelde-karte {
  background: var(--karte); border: 1px solid var(--rahmen); border-radius: 12px;
  padding: 28px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px;
}
.anmelde-karte img { align-self: center; }
.anmelde-karte h1 { text-align: center; margin: 0; }
.anmelde-karte label { display: flex; flex-direction: column; gap: 4px; font-size: 0.92rem; }

/* ---------- Handy ---------- */
@media (max-width: 800px) {
  /* untereinander und auf Bildschirmbreite (die Ausrichtung für die mitlaufende Seitenleiste gilt nur am PC) */
  body { flex-direction: column; align-items: stretch; }
  .seitenleiste { position: static; height: auto; overflow: visible; width: auto; border-right: 0; border-bottom: 1px solid var(--rahmen); padding: 12px 16px; gap: 10px; }
  nav { flex-direction: row; flex-wrap: wrap; }
  nav a { padding: 5px 9px; font-size: 0.92rem; }
  .abmelden { margin-top: 0; }
  main { padding: 20px 16px; }
  .zwei-spalten, .zwei, .stat-grid, .stat-grid.vier, .risiko-raster { grid-template-columns: minmax(0, 1fr); }
  .zwei .ev-liste { max-height: 420px; }
  .karte-rahmen { padding: 4px; }
  .kz-zeile { gap: 10px 22px; }
  .kz-zeile b { font-size: 1.25rem; }
  .kz-zeile .kz-stand { margin-left: 0; flex-basis: 100%; }
  nav.tabs { flex-wrap: nowrap; gap: 18px; }
  nav.tabs a { padding: 8px 0; font-size: 0.92rem; }
  .beob-notiz { flex-direction: column; align-items: stretch; }
  .trenner-v { display: none; }
  .beob-notiz .knopf-leise { align-self: flex-start; }
  .aufgabe details { padding-left: 0; }
  .ansicht-reihe { flex-direction: column; align-items: stretch; }
  .knopf-leise.klein { padding: 5px 12px; font-size: 0.9rem; }
  /* Am Handy kein Seitenleisten-Kalender (wie bei Streamlit eingeklappt) */
  .kalender { display: none; }
  .norm-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .norm-nav select { grid-column: 1 / -1; grid-row: 1; }
  .s-kopf { flex-direction: column; align-items: flex-start; gap: 6px; }
  .s-kopf-r { display: block; line-height: 1.9; }
  .s-kopf-r a { margin-left: 10px; }
  .s-kopf .globus { width: 26px; height: 26px; vertical-align: middle; }
  .s-fokus { margin: 30px 0 28px; }
  .s-fokus h1 { font-size: 2.3rem; }
  .s-stapel { grid-template-columns: minmax(0, 1fr); }
  .s-stapel a { border-right: 0; border-bottom: 1px solid var(--rahmen); padding: 14px 0; }
  .s-stapel a:last-child { border-bottom: 0; }
  .s-news-liste { grid-template-columns: minmax(0, 1fr); }
  .s-news { margin-top: 32px; }
  .kennzahlen { flex-direction: row; }
  .kennzahl { flex: 1; padding: 8px 10px; }
  .kennzahl strong { font-size: 1.3rem; }
  .kennzahl span { font-size: 0.75rem; }
}