/* Hotline-Planner — Leitstand-Look mit Dark/Hell-Umschalter.
   Systemschriften, damit alles ohne Internetzugang im internen Netz läuft. */

:root, [data-theme="dark"] {
  --bg:      #0e1420;
  --surface: #17202f;
  --raise:   #1d2938;
  --line:    #26324a;
  --text:    #e8edf6;
  --muted:   #8b99b0;
  --amber:   #ffb020;
  --amber-dim: #b47a12;
  --green:   #3ddc97;
  /* Schriftfarbe auf gefuelltem Gruen – im Dunkelmodus ist das Gruen hell,
     also muss die Schrift dunkel sein, im Hellmodus genau andersherum. */
  --green-ink: #0b1a13;
  --red:     #ff5d5d;
  --tile-bg: #17202f;
  --shadow:  0 6px 20px rgba(0,0,0,.35);
}
[data-theme="light"] {
  --bg:      #eef1f6;
  --surface: #ffffff;
  --raise:   #f4f6fb;
  --line:    #d7deea;
  --text:    #1a2233;
  --muted:   #5c6a80;
  --amber:   #d98200;
  --amber-dim: #b06a00;
  --green:   #129d6b;
  --green-ink: #ffffff;
  --red:     #d83b3b;
  --tile-bg: #ffffff;
  --shadow:  0 6px 18px rgba(30,50,90,.10);
}

* { box-sizing: border-box; }
/* Ein Element mit `hidden` muss verschwinden – und zwar auch dann, wenn ihm
   weiter unten ein `display: flex` o. ä. zugewiesen wird. Die Browser-Regel für
   [hidden] ist so schwach, dass JEDE eigene display-Angabe sie aushebelt; ohne
   diese Zeile stand die Bildvorschau des Melders von Anfang an als kaputtes
   Bildsymbol da. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  transition: background .2s ease, color .2s ease;
}
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ------------------------------------------------ Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.6rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--amber) 55%, transparent); }
.brand-name { font-weight: 700; letter-spacing: .04em; }
.topbar nav { display: flex; gap: 1.1rem; align-items: center; }
.topbar nav a { color: var(--muted); font-weight: 600; padding: .3rem 0; }
.topbar nav a.active { color: var(--text); border-bottom: 2px solid var(--amber); }
.topbar nav a.quiet { font-weight: 400; font-size: .85rem; }
.topbar nav a:hover { color: var(--text); text-decoration: none; }
.theme-btn {
  background: var(--raise); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; width: 2.1rem; height: 2.1rem; cursor: pointer;
  font-size: 1rem; line-height: 1; display: grid; place-items: center;
}
.theme-btn:hover { border-color: var(--amber); }

.page { max-width: 1180px; margin: 0 auto; padding: 1.4rem; }
.full { max-width: 1680px; margin: 0 auto; padding: 1.6rem clamp(1rem, 3vw, 2.4rem); }

.page-title { font-size: 1.6rem; margin: .2rem 0 1.2rem; }
.page-sub { color: var(--muted); font-size: .95rem; font-weight: 400; margin-left: .5rem; }

/* ------------------------------------------------ Flash + Warnbar */
.flashes { max-width: 1680px; margin: 0 auto; padding: .8rem clamp(1rem,3vw,2.4rem) 0; }
.flash { padding: .55rem .9rem; border-radius: 10px; margin-bottom: .4rem; font-size: .95rem; }
.flash-ok    { background: color-mix(in srgb, var(--green) 15%, transparent); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.flash-warn  { background: color-mix(in srgb, var(--amber) 15%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); }
.flash-error { background: color-mix(in srgb, var(--red) 15%, transparent);   border: 1px solid color-mix(in srgb, var(--red) 50%, transparent); }
.flash-info  { background: color-mix(in srgb, var(--line) 35%, transparent); border: 1px solid var(--line); }
.rp-balken   { border-left-width: 6px; }
.rp-balken .admin-table, #zustaendig .admin-table { margin: .4rem 0; }
.check-row   { display: inline-flex; align-items: center; gap: .4rem; }

.warnbar { max-width: 1680px; margin: .8rem auto 0; padding: 0 clamp(1rem,3vw,2.4rem); }
.warnbar-inner {
  display: flex; align-items: center; gap: .9rem;
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--red) 55%, transparent);
  border-radius: 10px; padding: .7rem 1rem;
  animation: warnpulse 2.4s ease-in-out infinite;
}
@keyframes warnpulse { 0%,100%{ box-shadow:0 0 0 0 transparent;} 50%{ box-shadow:0 0 18px 0 color-mix(in srgb, var(--red) 35%, transparent);} }
.warnbar-icon { flex:none; width:1.7rem; height:1.7rem; border-radius:50%; background:var(--red); color:#fff; font-weight:800; display:grid; place-items:center; }
.warnbar p { margin: .1rem 0; font-size: .95rem; }
.warnbar-link { margin-left: auto; white-space: nowrap; font-weight: 700; }
.warnbar-close { background:none; border:none; color:var(--muted); font-size:1.3rem; cursor:pointer; line-height:1; }
.warnbar-close:hover { color: var(--text); }

/* ------------------------------------------------ Übersicht (TV) */
.hero {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: clamp(1.6rem,3vw,2.8rem); margin-bottom: 1.6rem;
  box-shadow: var(--shadow);
}
.hero-meta { display: flex; gap: 1.4rem; align-items: center; justify-content: space-between;
             flex-wrap: wrap; color: var(--muted); margin-bottom: 1rem; }
.hero-meta-left { display: flex; flex-direction: column; gap: .3rem; }
.hero-label { text-transform: uppercase; letter-spacing: .18em; font-size: 1rem; color: var(--amber); font-weight: 800; }
.hero-date { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 600; color: var(--text); }
/* Uhr deutlich größer – die Übersicht hängt mit am großen Bildschirm */
.hero-clock {
  margin-left: auto; color: var(--text); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  font-size: clamp(2.6rem, 8vw, 7rem);
}
.hero-status { display: inline-flex; align-items: center; gap: .5rem; color: var(--green); font-weight: 700; font-size: 1.3rem; margin-bottom: .4rem; }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--green); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 50%,transparent);} 50%{ box-shadow:0 0 0 10px transparent;} }
@media (prefers-reduced-motion: reduce) { .pulse, .warnbar-inner { animation: none; } }
.hero-name { font-size: clamp(3.4rem, 11vw, 9rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; overflow-wrap: anywhere; }
.hero-off { color: var(--muted); }
.hero-missing { color: var(--red); }
.hero-sub { color: var(--muted); margin-top: .8rem; font-size: clamp(1.1rem,1.6vw,1.4rem); }

.week-heading { font-size: clamp(1.3rem,2vw,1.7rem); margin: 0 0 1rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.week-heading-sub { color: var(--muted); font-weight: 400; font-size: .95rem; }
.kiosk-link { margin-left: auto; font-weight: 600; }
a.kiosk-link:hover { text-decoration: none; }

/* Große TV-Kacheln der aktuellen Woche */
.tv-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.7rem,1.4vw,1.2rem); }

/* ------------------------------------------------ Tag-Kacheln (geteilt) */
.day-tile {
  display: flex; flex-direction: column; gap: .3rem; text-align: left;
  background: var(--tile-bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.2rem; color: var(--text); cursor: pointer;
  font: inherit; box-shadow: var(--shadow); transition: transform .08s ease, border-color .12s ease;
}
button.day-tile:hover { border-color: var(--amber); transform: translateY(-2px); }
.day-tile.selected { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber) inset, var(--shadow); }
.tile-today { border-color: var(--amber); }
.tile-today .tile-wd { color: var(--amber); }
.tile-past { opacity: .5; }
.tile-holiday { cursor: default; }
/* Vergangene Tage: für normale Nutzer gesperrt, für Admins nachträglich änderbar */
.tile-locked { cursor: default; }
.tile-past-edit { opacity: .62; border-style: dotted; }
.tile-past-edit:hover { opacity: 1; border-color: var(--amber); border-style: dashed; }
.tile-wd { font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.7rem); }
.tile-date { color: var(--muted); font-size: .95rem; font-variant-numeric: tabular-nums; }
.tile-name { margin-top: auto; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.6rem); overflow-wrap: anywhere; line-height: 1.05; }
.tile-open { color: var(--red); font-weight: 700; }
.tile-off { color: var(--muted); font-style: italic; font-weight: 600; font-size: clamp(1.1rem,2vw,1.7rem); }
.tile-hint { color: var(--amber); font-size: .9rem; font-weight: 600; }
.tile-empty { border-style: dashed; }

/* Auf der Planung sind die Kacheln kompakter */
.tile-row .day-tile { padding: .8rem .9rem; border-radius: 12px; min-height: 6.5rem; }
.tile-row .tile-name { font-size: clamp(1.1rem, 1.6vw, 1.5rem); }
.tile-row .tile-wd { font-size: 1rem; }

/* ------------------------------------------------ Planung */
.plan-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* Statt des früheren Auswahlfelds: das Fenster nur noch nennen, nicht anbieten. */
.fenster-fest { display: flex; align-items: baseline; gap: .5rem; padding: .35rem .85rem;
  background: var(--raise); border: 1px solid var(--line); border-radius: 999px; cursor: help; }
.fenster-fest strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

.fair-inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-top: .3rem; }
.fair-label { color: var(--muted); font-size: .85rem; }
.fair-chip { background: var(--raise); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; }
.fair-chip b { color: var(--amber); font-variant-numeric: tabular-nums; }

.plan-week { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 1.1rem; overflow: hidden; box-shadow: var(--shadow); }
.plan-week-current { border-color: var(--amber-dim); }
.plan-week-head { display: flex; align-items: center; gap: .8rem; padding: .6rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--raise); }
.week-kw { font-weight: 800; letter-spacing: .03em; }
.week-range { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.chip { font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 700; }
.chip-amber { background: color-mix(in srgb,var(--amber) 18%,transparent); color: var(--amber); border: 1px solid color-mix(in srgb,var(--amber) 45%,transparent); }
.chip-ok  { background: color-mix(in srgb,var(--green) 16%,transparent); color: var(--green); border: 1px solid color-mix(in srgb,var(--green) 42%,transparent); }
.chip-red { background: color-mix(in srgb,var(--red) 16%,transparent); color: var(--red); border: 1px solid color-mix(in srgb,var(--red) 42%,transparent); }

/* Fairness in Klartext */
.fair-explain p { margin: 0 0 .7rem; line-height: 1.6; color: var(--muted); }
.fair-explain p:last-child { margin-bottom: 0; }
.fair-explain strong { color: var(--text); }
.stand-minus { color: var(--red); font-weight: 700; }
.stand-plus { color: var(--muted); }

/* ------------------------------------------------ Änderungshistorie
   Zum Überfliegen gebaut: Version und Einzeiler zuerst, dann je Rubrik eine
   farbige Marke, darunter Punkte mit fetter Überschrift und erklärendem Satz. */
.change-block { border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 1.3rem; }
.change-block:first-of-type { border-top: none; padding-top: .2rem; margin-top: .4rem; }
.change-head { margin: 0 0 .25rem; font-size: 1rem; display: flex;
  align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.change-ver { font-weight: 800; font-size: 1.15rem; color: var(--amber);
  font-variant-numeric: tabular-nums; }
.change-date { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.change-summary { margin: 0 0 .9rem; color: var(--text); font-size: .95rem; line-height: 1.5; }

.change-group { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem;
  align-items: start; margin-bottom: .7rem; }
.change-tag { font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 5px;
  justify-self: start; margin-top: .15rem; white-space: nowrap; }
.change-tag-hinzugefugt { background: color-mix(in srgb,var(--green) 15%,transparent);
  color: var(--green); border: 1px solid color-mix(in srgb,var(--green) 40%,transparent); }
.change-tag-geandert { background: color-mix(in srgb,var(--amber) 15%,transparent);
  color: var(--amber); border: 1px solid color-mix(in srgb,var(--amber) 40%,transparent); }
.change-tag-behoben { background: color-mix(in srgb,var(--red) 14%,transparent);
  color: var(--red); border: 1px solid color-mix(in srgb,var(--red) 38%,transparent); }

.change-list { margin: 0; padding-left: 1.1rem; }
.change-list li { margin-bottom: .5rem; line-height: 1.55; color: var(--muted);
  font-size: .92rem; max-width: 78ch; }
.change-list li:last-child { margin-bottom: 0; }
.change-list strong { color: var(--text); font-weight: 700; }

@media (max-width: 700px) {
  .change-group { grid-template-columns: 1fr; gap: .3rem; }
}
.tile-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; padding: .9rem 1.1rem 1.1rem; }

/* ------------------------------------------------ Auswahl-Panel */
.picker {
  position: sticky; bottom: 1rem; margin-top: 1.4rem;
  background: var(--surface); border: 1px solid var(--amber); border-radius: 14px;
  padding: 1rem 1.2rem 1.2rem; box-shadow: var(--shadow);
}
.picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.picker-title { font-size: 1.15rem; }
.picker-title strong { color: var(--amber); }
.picker-close { background: none; border: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.picker-close:hover { color: var(--text); }
.picker-people { display: flex; flex-wrap: wrap; gap: .6rem; }
.picker-is-past { border-color: var(--red); }
.picker-past {
  margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: 10px;
  background: var(--raise); border: 1px solid var(--red);
  color: var(--muted); font-size: .92rem; line-height: 1.45;
}
.picker-past strong { color: var(--red); }
.person-btn {
  font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
  background: var(--raise); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: .7rem 1.2rem;
}
.person-btn:hover { border-color: var(--amber); }
.person-btn.is-current { background: var(--amber); border-color: var(--amber); color: #14100a; }
.person-btn.is-suggest { border-color: var(--amber); border-style: dashed; color: var(--amber); }
.person-none { color: var(--muted); font-weight: 500; }

/* ------------------------------------------------ Buttons / Inputs */
/* `textarea` gehörte hier von Anfang an hinein und fehlte: ein mehrzeiliges Feld
   stand deshalb weiß und mit Systemrahmen mitten in einer dunklen Seite. */
select, textarea, input[type="text"], input[type="password"], input[type="date"],
input[type="number"], input[type="email"], input[type="file"] {
  background: var(--raise); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: .45rem .6rem; font: inherit;
}
textarea { line-height: 1.5; }
select:hover, input:hover, textarea:hover { border-color: var(--amber-dim); }
.btn { font: inherit; font-weight: 600; cursor: pointer; border-radius: 7px; border: 1px solid var(--line); background: var(--raise); color: var(--text); padding: .45rem .9rem; }
.btn:hover { border-color: var(--amber); }
.btn-primary { background: var(--amber); border-color: var(--amber); color: #14100a; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-small { font-size: .8rem; padding: .25rem .6rem; }
/* „Offene Tage fuellen“ – der einzige Knopf, der auf einen Schlag mehrere Tage
   setzt. Er soll sich von den Blaetter-Knoepfen daneben abheben, aber nicht mit
   dem bernsteinfarbenen „Zurueck zu heute“ verwechselt werden. Deshalb gruen. */
.btn-fill { background: var(--green); border-color: var(--green); color: var(--green-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent),
              0 2px 10px color-mix(in srgb, var(--green) 30%, transparent); }
.btn-fill:hover { filter: brightness(1.08); border-color: var(--green); }
.autofill-schnell { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.btn-danger { color: var(--red); }
.btn-danger:hover { border-color: var(--red); }
.btn-wide { width: 100%; }

/* ------------------------------------------------ Admin */
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem 1.2rem; margin-bottom: 1.2rem; box-shadow: var(--shadow); }
.side-card h2 { margin: .2rem 0 .6rem; font-size: 1.1rem; }
.side-hint { color: var(--muted); font-size: .87rem; }
.admin-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2rem; align-items: start; }
.admin-grid .side-card:last-child { grid-column: 2; }
.admin-table { width: 100%; border-collapse: collapse; margin-bottom: .9rem; }
.admin-table th { text-align: left; color: var(--muted); font-size: .8rem; padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
.admin-table td { padding: .45rem .4rem; border-bottom: 1px solid var(--line); }
.th-wd, .td-wd { text-align: center; width: 2.2rem; }
.cell-name { font-weight: 600; }
.row-inactive .cell-name { color: var(--muted); text-decoration: line-through; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.inline-form input[type="text"], .inline-form input[type="password"] { flex: 1; min-width: 9rem; max-width: 26rem; }
/* Ein beschriftetes Feld in einer Zeile mit Knöpfen – „gültig bis [ Datum ]“.
   Ohne Beschriftung wäre ein leeres Datumsfeld neben einem Kennwortfeld ein Rätsel. */
.feld-inline { display: flex; align-items: center; gap: .4rem; font-size: .82rem;
               color: var(--muted); white-space: nowrap; }
.feld-inline input { font-size: .9rem; }
.holiday-list { list-style: none; margin: .4rem 0 .8rem; padding: 0; }
.holiday-list li { display: flex; align-items: center; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.holiday-date { font-variant-numeric: tabular-nums; color: var(--muted); }
.holiday-name { flex: 1; }

/* ------------------------------------------------ Login */
/* Anmeldeseiten: die Karte steht in der Mitte des freien Platzes.
   `place-items: center` auf dem ganzen Body war falsch, sobald es überhaupt
   etwas anderes als die Karte gab: Wer schon als Benutzer angemeldet ist und
   die Console aufruft, bekommt die Kopfzeile mitgeliefert – und die wurde als
   Rasterelement mittig zusammengequetscht, mitten auf die leere Seite.
   Jetzt: Kopfzeile oben über die volle Breite, die Karte darunter zentriert. */
.login-body { display: flex; flex-direction: column; min-height: 100vh; }
.login-body > header, .login-body > .warnbar { flex: none; width: 100%; }
.login-body > main { flex: 1 1 auto; display: grid; place-items: center; width: 100%; }
/* Auf der Anmeldeseite steht die Karte in der Mitte. Eine Meldung über ihr
   schöbe sie nach unten – gemessen: 137 Pixel, sobald der Code verschickt ist.
   Der Sprung sieht aus, als wäre die Seite eine andere geworden, und das Feld
   für den Code liegt dann woanders als der Knopf, den man gerade gedrückt hat.
   Deshalb schwebt die Meldung hier oben und nimmt keinen Platz im Fluss weg. */
.login-body .flashes {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 20; width: min(92vw, 34rem); padding: 0; margin: 0;
}
.login-body .flash { box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 2.2rem 2.4rem; width: min(92vw, 23rem); text-align: center; box-shadow: var(--shadow); }
.login-brand { justify-content: center; margin-bottom: .6rem; }
.login-hint { color: var(--muted); margin: 0 0 1.2rem; }
.pin-input { width: 100%; text-align: center; font-size: 1.6rem; letter-spacing: .4em; margin-bottom: .9rem; }
.pin-wide { letter-spacing: .1em; font-size: 1.2rem; }
.login-error { color: var(--red); margin: 0 0 .8rem; }
.login-back { margin: 1rem 0 0; font-size: .9rem; }

/* ------------------------------------------------ Planung: Historie */
.hist-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.hist-bar .btn { text-decoration: none; }
.hist-bar a.btn:hover { text-decoration: none; }
.btn-disabled { opacity: .45; cursor: default; }
/* Das Formular soll in der Leiste stehen wie ein Knopf, nicht wie ein Block. */
.hist-form { display: contents; }
.hist-note { margin-left: .4rem; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }

/* ------------------------------------------------ Console (Admin)
   Zwei Ebenen: oben vier Bereiche, darunter die Seiten des offenen Bereichs.
   Zwölf Reiter in einer Zeile waren nicht mehr zu überblicken. */
.admin-nav { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.4rem;
  align-items: center; margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--line); padding-bottom: .55rem; }
.admin-title { margin: 0; grid-row: 1 / span 2; align-self: center; }
.subnav { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.subnav a { color: var(--muted); font-weight: 600; padding: .2rem 0; }
.subnav a.active { color: var(--text); border-bottom: 2px solid var(--amber); }
.subnav a:hover { color: var(--text); text-decoration: none; }
/* Erste Ebene: die Bereiche – etwas kräftiger als die Seiten darunter */
.subnav-gruppen { font-size: 1.02rem; }
.subnav-gruppen a { letter-spacing: .01em; }
/* Zweite Ebene: die Seiten des offenen Bereichs – leiser, enger */
.subnav-seiten { gap: .95rem; font-size: .88rem; padding-top: .1rem; }
.subnav-seiten a { font-weight: 500; }
.subnav-seiten a.active { border-bottom-width: 2px; font-weight: 700; }
.subnav-rechts { margin-left: auto; font-weight: 500 !important; }
@media (max-width: 820px) {
  .admin-nav { grid-template-columns: 1fr; }
  .admin-title { grid-row: auto; }
}

.admin-grid-even { grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr)); }
.admin-grid .side-card.card-span,
.admin-grid .side-card.card-span:last-child { grid-column: 1 / -1; }
.soft-hr { border: none; border-top: 1px solid var(--line); margin: 1rem 0; }
.danger-text { color: var(--red); }
.row-off { color: var(--muted); text-decoration: line-through; }

.cfg-form { margin-top: .6rem; }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .7rem 1rem; }
/* Der Abstand NACH dem Raster fehlte: das Raster sorgt intern über `gap` für Luft,
   nach außen aber für gar nichts. Steht direkt darunter ein weiteres Feld, klebte
   dessen Beschriftung am Hinweistext der letzten Zeile darüber. */
.cfg-grid + label, .cfg-grid + .tpl-label, .cfg-grid + .cfg-grid,
.cfg-grid + p, .cfg-grid + .inline-form, .cfg-grid + table { margin-top: 1rem; }
.cfg-grid label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted); }
/* Ein Hinweistext ist die letzte Zeile seines Feldes – er braucht selbst Luft nach
   unten, damit er nicht an der nächsten Beschriftung klebt. */
.cfg-grid label > .field-hint, .tpl-label > .field-hint { margin-bottom: .15rem; }
.cfg-grid input { width: 100%; }
.cfg-wide { grid-column: 1 / -1; }
.cfg-flags { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.cfg-flags-tight { flex-direction: row; flex-wrap: wrap; gap: 1rem; margin: .6rem 0; }
.cfg-flags label { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; }
.cfg-flags input { margin-top: .2rem; }
.mini-check { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem;
  margin-right: .45rem; color: var(--muted); }

.open-list { margin: .4rem 0 .9rem; padding-left: 1.1rem; }
.open-list li { margin: .2rem 0; }

.sched-table input[type="text"] { padding: .3rem .4rem; }
.log-table { font-size: .82rem; table-layout: fixed; }
.log-table td { vertical-align: top; }
.status { border-radius: 999px; padding: .1rem .5rem; font-size: .75rem; font-weight: 700; }
.status-ok      { background: color-mix(in srgb,var(--green) 18%,transparent); color: var(--green); }
.status-error   { background: color-mix(in srgb,var(--red) 18%,transparent);   color: var(--red); }
.status-ignored { background: color-mix(in srgb,var(--amber) 18%,transparent); color: var(--amber); }
.status-skipped { background: var(--raise); color: var(--muted); }
.row-new td { background: color-mix(in srgb, var(--amber) 6%, transparent); }

/* Zahlenkacheln.
   `auto-fit` füllte die letzte Reihe nur halb und ließ rechts ein Loch; dazu
   waren die Kacheln unterschiedlich hoch, weil manche Beschriftung ein-, andere
   zweizeilig ist. Das Raster wirkte dadurch zerrissen. Jetzt: feste Spaltenzahl
   je nach Platz, alle Kacheln gleich hoch (`stretch` + `min-height`), die Zahl
   oben, die Beschriftung unten bündig. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .7rem; margin: .6rem 0 1rem; align-items: stretch; }
.stat { background: var(--raise); border: 1px solid var(--line); border-radius: 10px;
  padding: .7rem .9rem; display: flex; flex-direction: column; gap: .2rem;
  min-height: 5.4rem; }
/* Beschriftung nach unten schieben, damit alle Kacheln auf derselben Linie enden */
.stat > .stat-lbl { margin-top: auto; }
.stat-wide { grid-column: 1 / -1; }
.stat-num { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--amber); line-height: 1.15; }
.stat-lbl { color: var(--muted); font-size: .8rem; line-height: 1.45; }
/* Kachel schlägt Alarm, wenn ein Wert die Handlungsschwelle reißt */
.stat-warn { border-color: var(--red); background: color-mix(in srgb,var(--red) 8%,var(--raise)); }
.stat-warn .stat-num { color: var(--red); }

/* ------------------------------------------------ Kiosk (55"-TV) */
.kiosk-body { overflow: hidden; background: var(--bg); }
.kiosk {
  height: 100vh; width: 100vw; display: grid;
  grid-template-rows: auto 1fr auto auto auto;   /* Kopf, Name, Wochen-Überschrift, Woche, Fuß */
  gap: .8vh; padding: 1.6vh 2vw 1.2vh;
  /* Sehr langsamer Versatz gegen Einbrennen auf dem Fernseher */
  animation: drift 900s linear infinite alternate;
}
@keyframes drift { from { transform: translate(-6px, -4px); } to { transform: translate(6px, 4px); } }
@media (prefers-reduced-motion: reduce) { .kiosk { animation: none; } }

.k-top { display: flex; align-items: center; justify-content: space-between; gap: 2vw; }
.k-top-left { display: flex; align-items: baseline; gap: 1.2vw; flex-wrap: wrap;
  min-width: 0; }
.k-brand { display: inline-flex; align-items: center; gap: .6vw; color: var(--amber);
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(1rem, 1.7vw, 2.2rem); }
.k-brand .brand-dot { width: 1.1vw; height: 1.1vw; min-width: 10px; min-height: 10px; }
.k-date { font-size: clamp(1.1rem, 2.2vw, 2.8rem); font-weight: 700; white-space: nowrap; }
.k-kw { color: var(--muted); font-size: clamp(.9rem, 1.5vw, 1.8rem); }
.k-clock {
  font-variant-numeric: tabular-nums; font-weight: 800; line-height: .92;
  letter-spacing: -.02em; font-size: clamp(2.2rem, 8vw, 11rem); white-space: nowrap;
}

.k-main { display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 0; overflow: hidden; }
.k-name-box { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center;
  overflow: hidden; }
.k-label { color: var(--amber); text-transform: uppercase; letter-spacing: .2em; font-weight: 800;
  font-size: clamp(.9rem, 1.5vw, 1.8rem); margin-bottom: .2vh; }
.k-name-wrap { font-weight: 800; letter-spacing: -.025em; line-height: .95;
  font-size: 20vh; overflow-wrap: anywhere; width: 100%; }
.k-off { color: var(--muted); }
.k-missing { color: var(--red); }
.k-hint { margin-top: 1vh; color: var(--muted); font-size: clamp(1rem, 1.8vw, 2.2rem); font-weight: 600; }
.k-hint-warn { color: var(--red); }

.k-week-label { margin: 0 0 .6vh; }
.k-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1vw; }
.k-tile {
  background: var(--surface); border: 2px solid var(--line); border-radius: 1.2vw;
  padding: 1.1vh 1vw; display: flex; flex-direction: column; gap: .2vh; min-height: 15vh;
}
.k-tile-today { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--surface)); }
.k-tile-past { opacity: .45; }
.k-tile-empty { border-style: dashed; }
.k-tile-wd { font-weight: 800; font-size: clamp(1rem, 2vw, 2.6rem); }
.k-tile-today .k-tile-wd { color: var(--amber); }
.k-tile-date { color: var(--muted); font-variant-numeric: tabular-nums; font-size: clamp(.8rem, 1.3vw, 1.7rem); }
.k-tile-name { margin-top: auto; font-weight: 800; line-height: 1.05; overflow-wrap: anywhere;
  font-size: clamp(1.1rem, 2.6vw, 3.6rem); }
.k-tile-open { color: var(--red); }
.k-tile-off { color: var(--muted); font-style: italic; font-size: clamp(1rem, 1.8vw, 2.2rem); }

.k-foot { display: flex; justify-content: space-between; gap: 1vw; color: var(--muted);
  font-size: clamp(.7rem, 1.1vw, 1.3rem); }

/* ------------------------------------------------ Responsiv */
@media (max-width: 1000px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-grid .side-card:last-child { grid-column: auto; }
}
@media (max-width: 820px) {
  .tv-week, .tile-row { grid-template-columns: repeat(2, 1fr); }
  .topbar { flex-direction: column; gap: .5rem; }
}
@media (max-width: 480px) {
  .tv-week, .tile-row { grid-template-columns: 1fr; }
  .hero-clock { font-size: 3rem; }
}
/* Sehr breite Bildschirme (TV): Kacheln dürfen ruhig höher werden */
@media (min-width: 1900px) {
  .k-tile { min-height: 16vh; }
}

/* ------------------------------------------------ Ergänzungen: Console v2 */
.who { color: var(--muted); font-size: .8rem; max-width: 16rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sub-head { font-size: .95rem; margin: 1.1rem 0 .4rem; color: var(--text); }
.field-hint { display: block; color: var(--muted); font-size: .75rem; font-weight: 400;
  line-height: 1.35; margin-top: .15rem; }
.cfg-grid label { gap: .3rem; }
.btn-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.inline-block { display: inline-block; }
.clear-pw { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; font-size: .85rem; }
.chip-off { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); }
.chip { background: var(--raise); border: 1px solid var(--line); color: var(--muted);
  margin-left: .5rem; vertical-align: middle; }

/* Vorlagen */
.var-table { max-width: 46rem; }
.var-table code { background: var(--raise); border: 1px solid var(--line); border-radius: 5px;
  padding: .1rem .35rem; font-size: .85rem; white-space: nowrap; }
.tpl-label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem;
  color: var(--muted); margin-bottom: .8rem; }
/* Zwei Textfelder untereinander brauchen auch untereinander Abstand */
.tpl-label + .tpl-label { margin-top: .2rem; }
.tpl-subject { width: 100%; }
.tpl-body { width: 100%; background: var(--raise); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem;
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: .88rem;
  line-height: 1.5; resize: vertical; }
.tpl-body:hover, .tpl-subject:hover { border-color: var(--amber-dim); }
.preview-box { margin-top: 1rem; border: 1px solid var(--amber); border-radius: 10px;
  overflow: hidden; }
.preview-head { background: color-mix(in srgb, var(--amber) 15%, var(--surface));
  color: var(--amber); font-weight: 700; font-size: .82rem; padding: .4rem .8rem;
  text-transform: uppercase; letter-spacing: .1em; }
.preview-subject { padding: .6rem .8rem; border-bottom: 1px solid var(--line); font-weight: 700; }
.preview-body { margin: 0; padding: .8rem; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: .85rem;
  line-height: 1.55; background: var(--raise); }

/* Lange Protokollausgaben – ein Rebuild sind schnell 400 Zeilen. Sichtbar bleibt
   die Kurzfassung, der Rest steckt hinter einem Aufklapper. Die Höhe ist gedeckelt,
   damit auch die aufgeklappte Fassung nicht die halbe Seite wegdrückt. */
.log-kurz { border-radius: 8px 8px 0 0; border: 1px solid var(--line); border-bottom: 0; }
.log-box { border: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-bottom: .9rem;
  background: var(--surface); }
.log-box > summary { cursor: pointer; padding: .45rem .8rem; font-size: .82rem;
  color: var(--muted); user-select: none; list-style-position: inside; }
.log-box > summary:hover { color: var(--amber); }
.log-box[open] > summary { border-bottom: 1px solid var(--line); }
.log-box > .preview-body { max-height: 22rem; overflow: auto; border-radius: 0 0 8px 8px; }
/* Ohne Kurzfassung darüber ist der Kasten für sich allein – dann rundum abgerundet */
.log-box-solo { border-radius: 8px; margin-top: .6rem; }

/* Audit */
.filter-form { margin-bottom: .8rem; }
.filter-form a.btn { text-decoration: none; }
.audit-table { table-layout: auto; }
.status-src-console { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.status-src-mail    { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.status-src-system  { background: var(--raise); color: var(--muted); }
.status-src-kiosk   { background: var(--raise); color: var(--muted); }

/* Login */
.login-card-wide { width: min(94vw, 27rem); }
.login-select { width: 100%; margin-bottom: .9rem; font-size: 1rem; padding: .6rem .5rem; }
.resend-form { margin-top: .6rem; }
textarea { font: inherit; }
.log-table th:first-child, .log-table td:first-child { width: 10.5rem; }
.log-table td:first-child { padding-right: .9rem; }

/* ------------------------------------------------ Console-Layout v4
   Spalten statt Raster: Karten rutschen nach oben, statt auf die höchste
   Karte der Zeile zu warten – dadurch keine großen Löcher mehr. */
/* Die Karten der Console.
   Früher `columns: 2` – also CSS-Mehrspaltensatz, der die Karten wie Fließtext
   auf zwei Spalten verteilt. Das sieht bei gleich langen Karten gut aus und bei
   ungleich langen schlecht: Der Browser entscheidet selbst, wo er umbricht, eine
   Spalte wurde lang, die andere kurz, und mittendrin klafften Löcher. Genau das
   waren die gemeldeten „kollidierenden Flächen“.
   Jetzt ein Raster: feste Spalten, jede Karte beginnt oben, nichts rutscht.

   Nachtrag: Damit war es nur halb gelöst. `align-items: start` ließ jede Karte
   genau so hoch werden, wie ihr Inhalt es verlangt – und weil ein Raster seine
   Zellen ZEILENWEISE ausrichtet, hörte die kürzere Karte einer Zeile oben auf
   und darunter klaffte bis zur nächsten Zeile ein Loch. Auf /admin/allgemein
   waren das mehrere hundert Pixel. Mit `stretch` füllt jede Karte ihre Zelle;
   die Zeile ist wieder eine Zeile. Der Inhalt bleibt oben, nur der Rahmen wird
   so hoch wie die Nachbarin. */
.card-wide .admin-table { width: 100%; }

/* ------------------------------------------------ Console-Layout v5
   Und damit war es immer noch nicht gelöst: `stretch` beseitigte zwar das Loch
   ZWISCHEN den Karten, dafür klaffte es jetzt IN der kürzeren Karte – der
   Rahmen wurde so hoch wie die Nachbarin, der Inhalt blieb kurz. Auf
   /admin/wartung waren das gut dreihundert Pixel Leere in einer Karte.

   Beides zusammen geht mit einem Raster nicht: Ein Raster richtet zeilenweise
   aus, entweder klafft es außen oder innen. Und `columns: 2` – schon einmal
   versucht – überlässt dem Browser, wo er umbricht; das ging schief.

   Deshalb jetzt zwei echte Spalten: Ein kurzes Skript in base.html verteilt die
   Karten auf zwei Spaltenkästen, jede Karte in die gerade KÜRZERE Spalte. In
   einem Spaltenkasten sitzen die Karten wie Bauklötze übereinander – kein Loch
   dazwischen, kein Loch darin. Übrig bleibt nur der natürliche Rest am Fuß der
   kürzeren Spalte; ohne den geht Zweispaltigkeit nicht.

   Wichtig: ohne JavaScript bleibt es EINSPALTIG. Der Standard unten hat eine
   Spalte, erst das Skript setzt `zwei`. Lieber untereinander als löchrig. */
.admin-cols { display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: 1.1rem; row-gap: 0; align-items: start; }
/* Erst wenn das Skript die Karten verteilt hat, gibt es zwei Spalten. */
.admin-cols.spalten.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Ein Spaltenkasten: die Karten darin stapeln sich, hier entsteht kein Loch.
   `align-items: start` oben gilt jetzt für diese Kästen, nicht für Karten –
   genau deshalb ist es diesmal richtig. */
.admin-cols > .admin-col { display: flex; flex-direction: column; min-width: 0; }
.admin-cols > .admin-col > .side-card,
.admin-cols > .side-card { margin-bottom: 1.1rem; }
.admin-cols > .card-wide { grid-column: 1 / -1; }

.side-card { margin-bottom: 1.1rem; }
.side-card h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.side-card > p.side-hint:first-of-type { margin-top: 0; }
.side-card form + form { margin-top: .8rem; }
.cfg-form > .btn, .cfg-form > .btn-primary { margin-top: .2rem; }
.inline-form { align-items: center; }
.admin-table + .inline-form, .holiday-list + .inline-form { margin-top: .8rem; }
.sub-head:first-child { margin-top: 0; }

/* Nummerierte Schrittfolge in der Hilfe – Luft zwischen den Punkten, damit man
   sie einzeln abarbeiten kann, statt eine Textwand zu lesen. */
.help-steps { margin: .6rem 0 1rem; padding-left: 1.4rem; }
.help-steps > li { margin-bottom: .7rem; }

/* ------------------------------------------------ Reiter
   Für Seiten, die zu lang geworden sind. Ohne JavaScript ist kein Feld
   ausgeblendet – dann steht wieder alles untereinander, und das ist in Ordnung. */
.reiter { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.1rem;
  border-bottom: 1px solid var(--line); }
.reiter-btn { background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: .95rem; padding: .55rem .9rem;
  cursor: pointer; border-radius: 8px 8px 0 0; }
.reiter-btn:hover { color: var(--text); background: var(--surface); }
.reiter-btn.aktiv { color: var(--amber); border-bottom-color: var(--amber); font-weight: 600; }
.reiter-feld.aus { display: none; }

/* ------------------------------------------------ Hilfe */
/* `1fr` allein reicht hier NICHT: Eine Rasterspalte ist von Haus aus mindestens
   so breit wie ihr breitester unteilbarer Inhalt (min-width: auto). Ein langer
   Befehl in einem <pre> macht die Spalte damit breiter als das Fenster, und die
   rechte Seite der Hilfe war schlicht abgeschnitten. `minmax(0, 1fr)` erlaubt
   der Spalte, schmaler zu werden als ihr Inhalt – dann bricht der Inhalt um
   bzw. bekommt seinen eigenen Rollbalken. */
.help-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.help-body { min-width: 0; }
.help-body pre { overflow-x: auto; }
.help-body table { display: block; overflow-x: auto; max-width: 100%; }
@media (max-width: 1000px) { .help-layout { grid-template-columns: 1fr; } }
/* Das Verzeichnis klebt oben mit und ist mittlerweile 29 Punkte lang – damit
   ist es höher als der Bildschirm. Ein klebender Kasten, der nicht passt, wird
   unten schlicht abgeschnitten: Die letzten Abschnitte waren nicht erreichbar.
   Deshalb eine Höhe, die zum Fenster passt, und ein eigener Rollbalken. */
.help-nav { position: sticky; top: 1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: .9rem 1rem; box-shadow: var(--shadow);
  max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1000px) { .help-nav { position: static; max-height: none; } }
.help-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: h; }
.help-nav li { margin: .35rem 0; font-size: .88rem; }
.help-nav a { color: var(--muted); }
.help-nav a:hover { color: var(--amber); text-decoration: none; }
.help-body h2 { scroll-margin-top: 1rem; border-bottom: 1px solid var(--line);
  padding-bottom: .4rem; }
.help-body h3 { margin: 1.2rem 0 .4rem; font-size: 1rem; }
/* Zwischenüberschrift innerhalb eines h3-Abschnitts – etwas leiser als h3 */
.help-body h4 { margin: 1rem 0 .3rem; font-size: .92rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
.help-body p, .help-body li { line-height: 1.6; }
.help-body ul, .help-body ol { padding-left: 1.2rem; }
.help-body li { margin: .3rem 0; }
.help-body code { background: var(--raise); border: 1px solid var(--line); border-radius: 5px;
  padding: .05rem .3rem; font-size: .87rem; }
.help-body .admin-table td { vertical-align: top; }
/* Befehls- und Formelblöcke: als <pre>, damit die Zeilenumbrüche erhalten bleiben.
   Als <div> hat der Browser alle Zeilen zu einer zusammengeklebt – mehrzeilige
   Befehle waren dadurch unlesbar und nicht kopierbar. Lange Zeilen scrollen
   waagerecht, statt umzubrechen: ein umgebrochener Befehl lädt zu Tippfehlern ein. */
.formula { background: var(--raise); border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 8px; padding: .8rem 1rem; margin: .8rem 0; font-family: "Cascadia Mono",
  Consolas, monospace; font-size: .9rem; line-height: 1.7; overflow-x: auto;
  white-space: pre; }
/* In einer Karte ist kein Platz zum seitlichen Scrollen – ein Befehl, den man
   abtippen oder kopieren soll, muss ganz sichtbar sein. Umgebrochen wird nur
   an Leerzeichen, damit kein Pfad mitten im Wort zerreißt. */
.callout .formula { white-space: pre-wrap; overflow-wrap: break-word; }
.callout { border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent);
  border-radius: 0 8px 8px 0; padding: .7rem 1rem; margin: .9rem 0; }
.callout.warn { border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent); }
.help-body .side-card { margin-bottom: 1.4rem; }

/* ---------------------------------------------------------------- Melder
   Der Knopf unten rechts, mit dem man eine Idee oder einen Fehler notiert,
   ohne die Arbeit zu unterbrechen. Liegt über allem, stört aber nichts:
   schmal, gedeckt, und beim Öffnen tritt der Knopf hinter den Kasten zurück. */
.melder-btn { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem .95rem; font: inherit; font-size: .85rem;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.melder-btn:hover { color: var(--amber); border-color: var(--amber-dim); }

.melder-box { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 61;
  width: min(27rem, calc(100vw - 2rem)); max-height: calc(100vh - 2.5rem);
  overflow: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: .9rem 1rem 1rem; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.melder-kopf { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .6rem; }
.melder-zu { background: none; border: 0; color: var(--muted); font-size: 1.3rem;
  line-height: 1; cursor: pointer; padding: 0 .2rem; }
.melder-zu:hover { color: var(--red); }
.melder-art { display: flex; align-items: center; gap: .9rem; margin-bottom: .55rem;
  font-size: .87rem; }
.melder-art label { display: inline-flex; align-items: center; gap: .3rem; }
.melder-art select { margin-left: auto; }
.melder-box input[type="text"], .melder-box textarea { width: 100%; margin-bottom: .5rem; }
.melder-box textarea { resize: vertical; }
.melder-pfad { margin: .1rem 0 .6rem; font-size: .78rem; color: var(--muted);
  overflow-wrap: anywhere; }
.melder-bild { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.melder-datei { cursor: pointer; }
.melder-hinweis { font-size: .78rem; color: var(--muted); }
.melder-vorschau { margin-top: .6rem; display: flex; flex-direction: column; gap: .4rem;
  align-items: flex-start; }
.melder-vorschau img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.melder-fuss { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; }

/* --- Art der Meldung: zwei Flächen statt zweier Radioknöpfe.
   Man trifft sie ohne hinzusehen, und das Piktogramm sagt schneller, was
   gemeint ist, als das Wort daneben. Es sind echte Radios; der eigentliche
   Knopf wird nur versteckt, damit die Fläche als Ganzes klickbar ist und die
   Tastaturbedienung trotzdem funktioniert. */
.fb-art { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  margin-bottom: .7rem; }
.fb-art-knopf { position: relative; cursor: pointer; }
.fb-art-knopf input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-art-inhalt { display: block; border: 1px solid var(--line); border-radius: 10px;
  padding: .55rem .6rem; background: var(--raise); transition: border-color .12s; }
.fb-art-knopf:hover .fb-art-inhalt { border-color: var(--amber-dim); }
/* :focus-visible am versteckten Radio – sonst sieht man bei Tab-Bedienung nichts */
.fb-art-knopf input:focus-visible + .fb-art-inhalt { outline: 2px solid var(--amber);
  outline-offset: 2px; }
.fb-art-knopf input:checked + .fb-art-inhalt { border-color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber); }
.fb-art-fehler input:checked + .fb-art-inhalt { border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red); }
.fb-art-icon { font-size: 1.15rem; line-height: 1; margin-right: .35rem; }
.fb-art-wort { font-weight: 700; font-size: .95rem; }
.fb-art-sub { display: block; font-size: .74rem; color: var(--muted); margin-top: .15rem; }

.fb-zeile { display: flex; align-items: center; gap: .6rem; }
.fb-zeile .melder-pfad { flex: 1; min-width: 0; }
.fb-prio { flex: none; }

/* --- Die Bildergalerie im Feedback-Kasten. Feste Kachelhöhe, damit drei Bilder
   unterschiedlicher Form den Kasten nicht in die Länge ziehen. */
.fb-bilder { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .6rem; }
.fb-kachel { position: relative; margin: 0; width: 6.4rem; }
.fb-kachel img { width: 100%; height: 4.2rem; object-fit: cover;
  border: 1px solid var(--line); border-radius: 8px; display: block; }
.fb-kachel figcaption { font-size: .7rem; color: var(--muted); text-align: center;
  margin-top: .15rem; }
.fb-kachel-weg { position: absolute; top: -.35rem; right: -.35rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: .9rem; line-height: 1;
  cursor: pointer; padding: 0; display: grid; place-items: center; }
.fb-kachel-weg:hover { color: var(--red); border-color: var(--red); }

/* ---------------------------------------------------------------- Meldungsliste */
.mld { border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem;
  margin-bottom: .8rem; background: var(--surface); scroll-margin-top: 1rem; }
.mld-hoch { border-left: 3px solid var(--amber); }
.mld-fehler { border-left: 3px solid var(--red); }
.mld-zu { opacity: .55; }
.mld-kopf { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.mld-nr { font-family: "Cascadia Mono", Consolas, monospace; color: var(--muted);
  font-size: .85rem; }
.mld-titel { font-weight: 700; }
/* Historie: eine Zeile je abgeschlossener Meldung, zugeklappt. */
.mld-historie { margin-top: 1rem; }
.mld-hist-tab td { padding: .3rem .5rem; font-size: .85rem; }
.mld-hist-tab .cell-name { width: 100%; }
.mld-meta { font-size: .78rem; color: var(--muted); margin: .35rem 0 0;
  overflow-wrap: anywhere; }
.mld-text { margin: .5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mld-bild { margin-top: .6rem; }
.mld-bild img { max-width: 100%; max-height: 26rem; border: 1px solid var(--line);
  border-radius: 8px; display: block; }
/* Mehrere Bilder je Meldung: nebeneinander, jedes für sich zu entfernen.
   `align-items: start` ist hier richtig – anders als beim Karten-Raster der
   Console sollen unterschiedlich hohe Bilder NICHT gestreckt werden. */
.mld-bilder { display: flex; gap: .7rem; flex-wrap: wrap; align-items: start;
  margin-top: .4rem; }
.mld-bildkachel { margin: 0; max-width: min(100%, 22rem); }
.mld-bildkachel figcaption { display: flex; align-items: center; gap: .5rem;
  font-size: .76rem; color: var(--muted); margin-top: .25rem; }
.mld-bildweg { margin: 0; }
.mld-aktionen { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
  margin-top: .7rem; }
.mld-aktionen form { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.filter-leiste { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.filter-leiste a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .83rem; color: var(--muted); text-decoration: none; }
.filter-leiste a:hover { border-color: var(--amber-dim); color: var(--amber); }
.filter-leiste a.aktiv { background: color-mix(in srgb, var(--amber) 16%, transparent);
  border-color: var(--amber-dim); color: var(--amber); }

/* ------------------------------------------------ Abwesenheiten bearbeiten */
/* Zeitraum direkt in der Zeile änderbar – ein Urlaub, der länger wird, soll
   kein zweiter Eintrag werden. */
.abw-zeile { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.abw-form { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; flex: 1 1 auto; }
.abw-form input[type="date"] { font-size: .85rem; padding: .15rem .3rem; }
.abw-bis { color: var(--muted); font-size: .85rem; }

/* Eine Klappzeile je Person – sonst läuft die Liste über. */
.abw-gruppen { margin: .4rem 0 .8rem; }
.abw-gruppe { border-bottom: 1px solid var(--line); }
.abw-gruppe > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .45rem .2rem; list-style: none; }
.abw-gruppe > summary::-webkit-details-marker { display: none; }
/* Eigener Pfeil, damit er in beiden Browsern gleich aussieht und sich dreht. */
.abw-gruppe > summary::before { content: "▸"; color: var(--muted); width: .9rem;
  flex: 0 0 auto; transition: transform .12s ease; }
.abw-gruppe[open] > summary::before { transform: rotate(90deg); }
.abw-gruppe > summary:hover { background: var(--raise); border-radius: 8px; }
.abw-gruppe .holiday-list { margin: 0 0 .5rem 1.5rem; }
.abw-gruppe .holiday-list li:last-child { border-bottom: none; }

/* Versandweg wählen: zwei Karten statt zweier Radioknöpfe – man trifft sie ohne
   hinzusehen, und was der Unterschied ist, steht dabei statt in der Hilfe. */
.weg-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .8rem; margin: .6rem 0 1rem; }
.weg { display: grid; grid-template-columns: auto 1fr; grid-template-areas:
  "radio titel" "radio text"; gap: .1rem .6rem; align-items: start;
  background: var(--raise); border: 1px solid var(--line); border-radius: 12px;
  padding: .8rem 1rem; cursor: pointer; }
.weg:hover { border-color: var(--amber-dim); }
.weg input[type="radio"] { grid-area: radio; margin-top: .25rem; }
.weg-titel { grid-area: titel; font-weight: 700; }
.weg-text { grid-area: text; color: var(--muted); font-size: .85rem; }
.weg-aktiv { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); }

/* Eine Tabelle, die breiter ist als ihre Karte, rollt IN der Karte – sonst
   schiebt sie die ganze Seite auseinander und ein Teil wird unerreichbar.
   Gemessen an der Zeitplan-Tabelle: 1603 px Seitenbreite bei 1280 px Fenster. */
.tab-breit { overflow-x: auto; }
.tab-breit > table { min-width: 100%; }

/* Umgeschaltete Felder wirklich verstecken: `hidden` setzt display:none, aber
   eine Regel wie `.cfg-grid label { display: grid }` sticht das aus. */
[hidden] { display: none !important; }

/* =====================================================================
   2.0 – Feinschliff. Struktur und Navigation bleiben, wie sie sind; diese
   Schicht macht das Bild ruhiger: mehr Luft, weichere Flächen, klare
   Hierarchie, lange Erklärtexte eingeklappt („mehr“), einheitliche Bauteile
   wie in Bereitschafts-Planer und Schulungsplattform.
   ===================================================================== */
:root, [data-theme="dark"] {
  --bg: #0b111b; --surface: #131b28; --raise: #1a2433; --line: #233047;
  --text: #e9eef7; --muted: #8e9bb2; --amber: #ffb224;
  --radius: 14px; --radius-s: 9px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.22);
  --ring: 0 0 0 3px color-mix(in srgb, var(--amber) 35%, transparent);
}
[data-theme="light"] {
  --bg: #f3f5f9; --surface: #ffffff; --raise: #f6f8fc; --line: #e1e6ef;
  --text: #182134; --muted: #5d6a80; --amber: #c97a00;
  --shadow: 0 1px 2px rgba(20,30,60,.06), 0 6px 18px rgba(20,30,60,.06);
}
body { font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* Kopfleiste: klebt oben, dezent */
.topbar { position: sticky; top: 0; z-index: 30; padding: .6rem clamp(1rem, 3vw, 2.4rem);
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); }
.topbar nav { gap: .35rem; }
.topbar nav a { padding: .4rem .7rem; border-radius: 8px; border-bottom: 0 !important; }
.topbar nav a:hover { background: var(--raise); }
.topbar nav a.active { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--text); }

/* Console-Kopf: Bereiche als Segmente, Seiten als Reiter mit Grundlinie */
.admin-nav { align-items: end; padding-bottom: 0; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.admin-title { font-size: 1.55rem; letter-spacing: -.01em; margin-bottom: .55rem; }
.subnav-gruppen { gap: .25rem; background: var(--raise); border: 1px solid var(--line); border-radius: 11px;
  padding: .22rem; width: fit-content; }
.subnav-gruppen a { padding: .32rem .9rem; border-radius: 8px; border-bottom: 0 !important; font-size: .93rem; }
.subnav-gruppen a.active { background: var(--surface); box-shadow: var(--shadow); color: var(--text); }
.subnav-gruppen a.subnav-rechts { background: none; box-shadow: none; }
.subnav-seiten { gap: 1.3rem; margin-top: .55rem; }
.subnav-seiten a { padding: .45rem 0 .55rem; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.subnav-seiten a.active { border-bottom-color: var(--amber); }

/* Karten */
.side-card { border-radius: var(--radius); padding: 1.15rem 1.35rem 1.3rem; box-shadow: var(--shadow); }
.side-card h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.05rem;
  font-weight: 650; margin: 0 0 .5rem; }
.side-card h3, .sub-head { font-size: .95rem; margin: 1.1rem 0 .4rem; }
.side-card.soft { background: var(--raise); box-shadow: none; }
.side-hint { line-height: 1.5; max-width: 78ch; }
p.side-hint { margin: .3rem 0 .7rem; }
/* Lange Erklärungen: zwei Zeilen sichtbar, Rest per „mehr“ (app.js). Ohne Skript alles offen. */
.hint-kurz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mehr-btn { background: none; border: 0; padding: 0; margin: -.45rem 0 .7rem; color: var(--amber);
  font: inherit; font-size: .82rem; cursor: pointer; }
.hilfe-link { margin-left: auto; display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem;
  border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 700;
  text-decoration: none !important; }
.hilfe-link:hover { border-color: var(--amber); color: var(--amber); }

/* Formulare und Knöpfe */
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="date"],
input[type="time"], input[type="url"], select, textarea {
  border-radius: var(--radius-s); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); box-shadow: var(--ring); }
.btn { border-radius: var(--radius-s); padding: .48rem 1rem; transition: border-color .15s, background .15s, filter .15s; }
.btn-primary { box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }

/* Tabellen */
.admin-table th { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; font-weight: 650; }
.admin-table tbody tr:hover td { background: color-mix(in srgb, var(--raise) 70%, transparent); }

/* Chips */
.chip { border-radius: 999px; }

/* Seitenkopf, Kennzahlen, Versionen (Aufbau wie Schulungsplattform) */
.pagehead { margin: 0 0 1.1rem; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--amber); }
.pagehead h1 { margin: .15rem 0 .25rem; font-size: 1.6rem; letter-spacing: -.01em; }
.lead { margin: 0; color: var(--muted); }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.kennzahl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .15rem; }
.kennzahl b { font-size: 1.45rem; letter-spacing: -.01em; }
.kennzahl span { color: var(--muted); font-size: .82rem; }
.kennzahl.hl { background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 22%, var(--surface)), var(--surface));
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.vers-raster { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.6rem; align-items: start; }
@media (max-width: 1000px) { .vers-raster { grid-template-columns: 1fr; } }
.vers-raster aside { position: sticky; top: 4.5rem; }
.vers-titel { font-size: 1.1rem; margin: 0 0 .8rem; }
.zeitleiste { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--line); }
.zeitleiste > li { position: relative; }
.zeitleiste > li::before { content: ""; position: absolute; left: calc(-1.4rem - 7px); top: 1.25rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.zeitleiste > li.aktuell::before { background: var(--amber); border-color: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 25%, transparent); }
.vers-kopf { display: flex; align-items: center; gap: .6rem; }
.vers-kopf h3 { margin: 0; font-size: 1.05rem; }
.vers-datum { margin-left: auto; color: var(--muted); font-size: .85rem; }
.vers-kern { margin: .55rem 0 .2rem; }
.vers-rubrik h4 { display: flex; align-items: center; gap: .4rem; margin: .9rem 0 .3rem; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em; }
.vers-icon { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; font-size: .8rem; }
.vers-rubrik.added h4 { color: var(--green); } .vers-rubrik.added .vers-icon { background: color-mix(in srgb, var(--green) 18%, transparent); }
.vers-rubrik.changed h4 { color: var(--amber); } .vers-rubrik.changed .vers-icon { background: color-mix(in srgb, var(--amber) 18%, transparent); }
.vers-rubrik.fixed h4 { color: #6aa8ff; } .vers-rubrik.fixed .vers-icon { background: rgba(106,168,255,.18); }
.vers-rubrik.removed h4 { color: var(--red); } .vers-rubrik.removed .vers-icon { background: color-mix(in srgb, var(--red) 18%, transparent); }
.vers-rubrik ul { margin: 0; padding-left: 1.1rem; }
.vers-rubrik li { margin: .25rem 0; }
.vers-aeltere > summary { cursor: pointer; color: var(--muted); margin: .4rem 0 .9rem; font-weight: 600; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 .6rem; }
.kv dt { font-weight: 650; } .kv dd { margin: 0; color: var(--muted); }

/* Vorlagen (Aufbau wie im Bereitschafts-Planer) */
.vorlagen-leiste { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.chip-link { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: .85rem; font-weight: 600; text-decoration: none !important; }
.chip-link:hover { border-color: var(--amber); }
.chip-link.aktiv { background: var(--amber); border-color: var(--amber); color: #14100a; }
.chip-link.aus { opacity: .6; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1100px) { .zweispaltig { grid-template-columns: 1fr; } }
.platzhalter { display: flex; flex-direction: column; gap: .3rem; max-height: 22rem; overflow: auto; }
.ph { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .6rem; text-align: left; align-items: baseline;
  background: var(--raise); border: 1px solid transparent; border-radius: 8px; padding: .35rem .55rem; color: var(--text);
  font: inherit; font-size: .84rem; cursor: copy; }
.ph:hover { border-color: var(--amber); }
.ph span { color: var(--muted); }
.ph-allg code { opacity: .8; }
.mailframe { width: 100%; min-height: 26rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; }

/* Wartungsmodus-Hinweisseite */
.wartung-karte { text-align: center; max-width: 30rem; }
.konsole-link { display: inline-block; font-size: .82rem; font-weight: 600; margin: -.2rem 0 .6rem; }

/* Hilfe: Kasten „So ist es hier eingestellt“ (Werte live aus dieser Installation) */
.einst { border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 10px; padding: .55rem .85rem;
  margin: .8rem 0; max-width: 46rem; }
.einst .einst-kopf { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; font-weight: 700;
  font-size: .88rem; margin-bottom: .3rem; }
.einst dl { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: .25rem .9rem; margin: 0; font-size: .9rem; }
.einst dt { color: var(--muted); } .einst dd { margin: 0; font-weight: 600; }
.einst-neu { background: color-mix(in srgb, var(--amber) 25%, transparent); border-radius: 4px; }