/* Einsatzplanung IG BW Dresden-Altstadt — das einzige Stilblatt.
   Telefon zuerst. Keine fremden Quellen. Hell und dunkel nach Geraet. */

@font-face { font-family: Barlow; src: url("schrift/barlow500.8e986e86d57e.woff2") format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Barlow; src: url("schrift/barlow600.a1e2a2d7d4c0.woff2") format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Barlow; src: url("schrift/barlow700.15481e4eab6d.woff2") format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --tinte: #16181a;
  --tinte-leise: #5c6266;
  --grund: #f2f3f1;
  --karte: #ffffff;
  --kante: #d7d9d6;
  --kante-stark: #16181a;
  --rot: #a3262a;
  --messing: #b08a3e;
  --ja: #1e7a41;
  --vielleicht: #9a7000;
  --nein: #9b2226;
  --ja-grund: #e7f2ea;
  --vielleicht-grund: #f6efdc;
  --nein-grund: #f7e8e8;
  --kopf: #16181a;
  --kopf-tinte: #ffffff;

  --b-gruen: #2f6b43;
  --b-blau: #2a5d8f;
  --b-rot: #a3262a;
  --b-messing: #9a7628;
  --b-grau: #63696e;
  --b-violett: #64488c;

  --schrift: Barlow, system-ui, sans-serif;
  --text: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem;
  --griff: 2.75rem;                 /* 44 px Daumen */
  --breite: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinte: #e9ebea; --tinte-leise: #9aa1a6;
    --grund: #121415; --karte: #1c1f21; --kante: #32383b; --kante-stark: #6b7378;
    --rot: #e26265; --messing: #d6ac62;
    --ja: #56b57c; --vielleicht: #d0a63a; --nein: #e1696c;
    --ja-grund: #1a2b21; --vielleicht-grund: #2b2518; --nein-grund: #2c1c1d;
    --kopf: #000000; --kopf-tinte: #ffffff;
    --b-gruen: #57a473; --b-blau: #5b93c9; --b-rot: #e26265;
    --b-messing: #c79b4b; --b-grau: #8d959b; --b-violett: #9b7cc4;
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* Der Grund auch am html: Ist die Seite kuerzer als der Bildschirm, endete der
   graue Grund sonst unter dem Inhalt und darunter wurde es weiss. */
html { -webkit-text-size-adjust: 100%; background: var(--grund); }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font: 1rem/1.5 var(--text); overflow-x: hidden;
  container-type: inline-size; container-name: seite;
}
h1, h2, h3, .marke, .tagfeld b, .knopf, button, .zahl, .zeitraum {
  font-family: var(--schrift);
}
h1 { font: 700 1.5rem/1.15 var(--schrift); margin: 0; letter-spacing: -.01em; }
h2 { font: 600 1.0625rem/1.2 var(--schrift); margin: 0; }
a { color: var(--rot); }
a:hover { color: var(--tinte); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
::selection { background: var(--rot); color: #fff; }

/* ── Kopf: Lokschwarz mit Erkennungsstreifen ─────────────────────────── */
.kopf {
  background: var(--kopf); color: var(--kopf-tinte);
  border-bottom: 3px solid var(--rot);
  padding: var(--e2) var(--e4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e4);
}
.marke {
  display: flex; align-items: center; gap: .55rem;
  color: inherit; text-decoration: none;
  font: 600 1.0625rem/1 var(--schrift); letter-spacing: .01em;
  min-height: var(--griff);
}
.marke::before {
  content: ''; width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  background: url("bild/igbw.c6990f67d65a.png") center/contain no-repeat;
}
.marke b { font-weight: 700; }
.marke:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.wege { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e4); margin-left: auto; }
.wege a, .wege button {
  color: var(--kopf-tinte); text-decoration: none; background: none; border: 0;
  font: 500 .9375rem/1 var(--text); padding: 0; cursor: pointer;
  min-height: var(--griff); display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.wege a[aria-current] { border-bottom-color: var(--rot); font-weight: 700; }
.wege a:hover, .wege button:hover { border-bottom-color: currentColor; color: #fff; }
.wege .wer { color: var(--messing); }
.aus { margin: 0; }

main { max-width: var(--breite); margin: 0 auto; padding: var(--e4) var(--e4) var(--e6); }
body.zugang main { max-width: 26rem; padding-top: var(--e6); }

/* ── Meldungen ───────────────────────────────────────────────────────── */
.meldung {
  margin: 0 0 var(--e4); padding: var(--e3) var(--e4);
  background: var(--karte); border: 1px solid var(--kante); border-left: 4px solid var(--tinte);
  font-weight: 500;
}
.meldung.success { border-left-color: var(--ja); background: var(--ja-grund); }
.meldung.error { border-left-color: var(--nein); background: var(--nein-grund); }

/* ── Knoepfe ─────────────────────────────────────────────────────────── */
.knopf, button, .btn {
  font: 600 .9375rem/1 var(--schrift);
  min-height: var(--griff); padding: 0 var(--e4);
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--karte); color: var(--tinte);
  border: 2px solid var(--kante-stark); border-radius: 0;
  text-decoration: none; cursor: pointer;
}
.knopf:hover, button:hover { background: var(--tinte); color: var(--grund); }
.knopf.haupt, button.haupt { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.haupt:hover, button.haupt:hover { background: var(--tinte); border-color: var(--tinte); }
.knopf.zweit { border-color: var(--kante); font-weight: 500; }
.knopf.gefahr { border-color: var(--nein); color: var(--nein); }
.knopf.gefahr:hover { background: var(--nein); border-color: var(--nein); color: #fff; }
button[disabled] { opacity: .45; cursor: not-allowed; }
button[disabled]:hover { background: var(--karte); color: var(--tinte); }

/* Die drei Staende */
.knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); margin: 0; }
.stand {
  padding: 0 var(--e2); font-size: .875rem; border-width: 2px;
  border-color: var(--kante); background: var(--karte); color: var(--tinte-leise);
}
.stand::before { content: ''; width: .75rem; height: .75rem; flex: none; border: 2px solid currentColor; }
.stand.ja:hover, .stand.ja.aktiv { background: var(--ja-grund); border-color: var(--ja); color: var(--ja); }
.stand.vielleicht:hover, .stand.vielleicht.aktiv { background: var(--vielleicht-grund); border-color: var(--vielleicht); color: var(--vielleicht); }
.stand.nein:hover, .stand.nein.aktiv { background: var(--nein-grund); border-color: var(--nein); color: var(--nein); }
/* Farbe nie allein: der gewaehlte Stand traegt ein Zeichen */
.stand.aktiv::before { border: 0; width: auto; height: auto; font-weight: 700; }
.stand.ja.aktiv::before { content: '✓'; }
.stand.vielleicht.aktiv::before { content: '?'; }
.stand.nein.aktiv::before { content: '×'; }
.knoepfe.klein .stand { font-size: .8125rem; }

/* ── Naechster Einsatz ───────────────────────────────────────────────── */
.naechster {
  background: var(--karte); border: 2px solid var(--kante-stark);
  border-left: 8px solid var(--rot); margin-bottom: var(--e5);
}
.naechster .ziel {
  display: block; padding: var(--e4); text-decoration: none; color: var(--tinte);
}
.naechster .ziel:hover .was { text-decoration: underline; text-underline-offset: 3px; }
.naechster .wann {
  display: inline-block; background: var(--rot); color: #fff;
  font: 700 .75rem/1 var(--schrift); letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem .5rem; margin-bottom: var(--e3);
}
.naechster .was { display: block; font: 700 1.375rem/1.15 var(--schrift); }
.naechster .dann { display: block; color: var(--tinte-leise); font-size: .9375rem; margin-top: .25rem; }
.naechster .unten {
  border-top: 1px solid var(--kante); padding: var(--e3) var(--e4);
  display: grid; gap: var(--e3);
}

/* ── Leiste, Umschalter, Filter ──────────────────────────────────────── */
.leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  padding-bottom: var(--e3); border-bottom: 3px solid var(--tinte); margin-bottom: var(--e4);
}
.leiste h1, .leiste .zeitraum { margin-right: auto; }
.zeitraum { font: 700 1.25rem/1.15 var(--schrift); }
.pfeil {
  width: var(--griff); height: var(--griff); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--kante-stark); color: var(--tinte); text-decoration: none;
  font: 600 1.25rem/1 var(--schrift);
}
.pfeil:hover { background: var(--tinte); color: var(--grund); }
.umschalter { display: inline-flex; border: 2px solid var(--kante-stark); }
.umschalter a {
  min-height: var(--griff); padding: 0 var(--e3);
  display: inline-flex; align-items: center;
  font: 600 .875rem/1 var(--schrift); color: var(--tinte); text-decoration: none;
}
.umschalter a + a { border-left: 2px solid var(--kante-stark); }
.umschalter a.an { background: var(--tinte); color: var(--grund); }

.filter {
  display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4);
}
.chip {
  min-height: var(--griff); padding: 0 var(--e3);
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--kante); background: var(--karte); color: var(--tinte);
  font: 500 .875rem/1 var(--text); text-decoration: none;
}
.chip:hover { border-color: var(--tinte); }
.chip.an { background: var(--tinte); border-color: var(--tinte); color: var(--grund); font-weight: 600; }
.chip[class*='farbe-']::before {
  content: ''; width: .625rem; height: .625rem; flex: none; background: var(--bereich, var(--b-grau));
}

/* Bereichsfarben */
.farbe-gruen { --bereich: var(--b-gruen); }
.farbe-blau { --bereich: var(--b-blau); }
.farbe-rot { --bereich: var(--b-rot); }
.farbe-messing { --bereich: var(--b-messing); }
.farbe-grau { --bereich: var(--b-grau); }
.farbe-violett { --bereich: var(--b-violett); }

/* ── Liste ───────────────────────────────────────────────────────────── */
.monatskopf {
  font: 600 .8125rem/1 var(--schrift); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinte-leise); margin: var(--e5) 0 var(--e2);
  padding-bottom: var(--e2); border-bottom: 1px solid var(--kante);
}
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }

.karte {
  background: var(--karte); border: 1px solid var(--kante);
  border-left: 6px solid var(--bereich, var(--kante-stark));
  padding: var(--e3); display: grid; gap: var(--e3);
  grid-template-columns: auto 1fr;
}
.karte .mitte { min-width: 0; }
.karte .knoepfe, .karte .rueckblick { grid-column: 1 / -1; }
.karte .titel {
  display: block; font: 700 1.0625rem/1.2 var(--schrift);
  color: var(--tinte); text-decoration: none; text-wrap: pretty;
}
.karte .titel:hover { text-decoration: underline; text-underline-offset: 3px; }
.karte .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem var(--e2);
  margin-top: .3rem; font-size: .875rem; color: var(--tinte-leise);
}
.karte.abgesagt .titel { text-decoration: line-through; }
.karte.vorbei { opacity: .72; }

/* Nummernschild */
.tagfeld {
  width: 3rem; flex: none; text-decoration: none;
  display: grid; place-items: center; align-content: center;
  border: 2px solid var(--kante-stark); background: var(--karte); color: var(--tinte);
  padding: .3rem 0; align-self: start;
}
.tagfeld span {
  font: 600 .6875rem/1 var(--schrift); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-leise);
}
.tagfeld b { font: 700 1.375rem/1.05 var(--schrift); font-variant-numeric: tabular-nums; }
a.tagfeld:hover { background: var(--tinte); color: var(--grund); }
a.tagfeld:hover span { color: var(--grund); }

/* Einsatzart: Typografie und Rahmen, nie Farbe — sonst stritte sie mit dem Bereich */
.art {
  font: 600 .6875rem/1 var(--schrift); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid currentColor; padding: .25rem .35rem; color: var(--tinte);
}
.art-museum .art { background: var(--tinte); color: var(--karte); border-color: var(--tinte); }
.art-veranstaltung .art { border-style: dashed; }
.art-sitzung .art { border: 0; border-bottom: 2px solid currentColor; padding: 0 0 .1rem; }
.bereich { display: inline-flex; align-items: center; gap: .3rem; font-weight: 500; color: var(--tinte); }
.bereich::before { content: ''; width: .625rem; height: .625rem; flex: none; background: var(--bereich, var(--b-grau)); }
.warnung {
  color: var(--nein); font-weight: 700; text-transform: uppercase;
  font-size: .75rem; letter-spacing: .08em;
}

.besetzung { font-weight: 500; }
.besetzung b { font-variant-numeric: tabular-nums; }
.besetzung.voll { color: var(--ja); }
.besetzung.voll::after { content: ' ✓'; }
.besetzung.fehlt { color: var(--vielleicht); }
.rueckblick { font-size: .875rem; color: var(--tinte-leise); font-weight: 500; }

.merktag {
  display: flex; align-items: center; gap: var(--e3);
  padding: .2rem 0 .2rem .1rem; color: var(--tinte-leise); font-size: .875rem;
}
.merktag .tagfeld {
  width: 3rem; border: 0; border-left: 2px dotted var(--kante-stark); background: none;
  padding: .1rem 0; place-items: center;
}
.merktag .tagfeld b { font-size: 1rem; font-weight: 600; }
.merktag.feiertag { color: var(--rot); }

.leer { color: var(--tinte-leise); font-style: italic; padding: var(--e4) 0; }
.mehr { display: flex; align-items: center; gap: var(--e3); margin: var(--e4) 0 0; }
.mehr span { color: var(--tinte-leise); font-size: .875rem; }
.nebenweg { margin: var(--e5) 0 0; font-size: .9375rem; }

/* ── Kalender ────────────────────────────────────────────────────────── */
.blatt { border: 2px solid var(--kante-stark); background: var(--karte); }
.wochentage, .woche { display: grid; grid-template-columns: repeat(7, 1fr); }
.wochentage {
  background: var(--tinte); color: var(--grund);
  font: 600 .75rem/1 var(--schrift); letter-spacing: .08em; text-transform: uppercase;
}
.wochentage span { padding: .5rem .25rem; text-align: center; }
.woche + .woche { border-top: 1px solid var(--kante); }
.tag {
  min-height: 4rem; padding: .25rem; border-left: 1px solid var(--kante);
  display: flex; flex-direction: column; gap: .15rem; min-width: 0;
}
.tag:first-child { border-left: 0; }
.tag .zahl {
  font: 600 .875rem/1 var(--schrift); font-variant-numeric: tabular-nums;
  color: var(--tinte); text-decoration: none; align-self: start;
  min-width: 1.5rem; padding: .15rem; text-align: center;
}
a.zahl:hover { background: var(--tinte); color: var(--grund); }
.tag.fremd { background: color-mix(in srgb, var(--kante) 30%, transparent); }
.tag.fremd .zahl { color: var(--tinte-leise); }
.tag.vorbei { opacity: .6; }
.tag.wochenende { background: color-mix(in srgb, var(--kante) 22%, transparent); }
.tag.heute .zahl { background: var(--rot); color: #fff; }
.tag.feiertag .zahl { color: var(--rot); text-decoration: underline; }
.tag.ferien { background: color-mix(in srgb, var(--messing) 14%, transparent); }
.feiertagsname {
  font-size: .625rem; line-height: 1.1; color: var(--rot);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag .eintrag {
  display: block; text-decoration: none; color: var(--tinte);
  border-left: 3px solid var(--bereich, var(--tinte));
  background: color-mix(in srgb, var(--bereich, var(--tinte)) 12%, transparent);
  padding: .1rem .2rem; font-size: .6875rem; line-height: 1.2;
}
.tag .eintrag .text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag .eintrag i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.tag .eintrag.dabei::after { content: '✓'; float: right; font-weight: 700; color: var(--ja); }
.tag .eintrag.abgesagt .text { text-decoration: line-through; }
.tag .eintrag:hover { background: var(--bereich, var(--tinte)); color: #fff; }

/* Der Monat als Liste — am Telefon die eigentliche Bedienung */
.monatsliste { margin-top: var(--e5); }

/* ── Ein Einsatz ─────────────────────────────────────────────────────── */
.einsatzkopf { border-bottom: 3px solid var(--tinte); padding-bottom: var(--e4); margin-bottom: var(--e4); }
.einsatzkopf .marken { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.einsatzkopf h1 { text-wrap: pretty; }
.einsatzkopf .wann { font: 600 1rem/1.3 var(--schrift); margin: var(--e2) 0 0; }
.einsatzkopf .wo, .einsatzkopf .wer { margin: .15rem 0 0; color: var(--tinte-leise); font-size: .9375rem; }
.einsatz.abgesagt .einsatzkopf h1 { text-decoration: line-through; }
.notiz {
  background: var(--karte); border: 1px solid var(--kante); border-left: 6px solid var(--bereich, var(--messing));
  padding: var(--e3) var(--e4); margin-bottom: var(--e4); text-wrap: pretty;
}
.block { margin-bottom: var(--e5); }
.block h2 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e3);
  padding-bottom: var(--e2); border-bottom: 1px solid var(--kante); margin-bottom: var(--e3);
}
.block h2 .besetzung { font: 500 .875rem/1 var(--text); }

/* Postenwahl als Liste — am Telefon passt keine Kachel mit Namen */
.postenwahl { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: var(--e2); }
.postenwahl li { background: var(--karte); border: 1px solid var(--kante); }
.postenwahl form { margin: 0; }
.postenwahl button {
  width: 100%; border: 0; background: none; justify-content: flex-start;
  gap: var(--e3); padding: var(--e2) var(--e3); text-align: left;
}
.postenwahl button:hover { background: var(--tinte); color: var(--grund); }
.postenwahl .pname { flex: 1; font-weight: 600; }
.postenwahl .pzeit { color: var(--tinte-leise); font: 500 .8125rem/1 var(--text); font-variant-numeric: tabular-nums; }
.postenwahl button:hover .pzeit { color: inherit; }
.postenwahl .pzahl {
  font-variant-numeric: tabular-nums; font-weight: 700;
  border: 2px solid currentColor; padding: .15rem .35rem; font-size: .8125rem;
}
.postenwahl .pleute {
  display: block; padding: 0 var(--e3) var(--e2); font-size: .8125rem; color: var(--tinte-leise);
}
.postenwahl .voll { background: color-mix(in srgb, var(--kante) 35%, var(--karte)); }
.postenwahl .voll .pzahl { color: var(--tinte-leise); }
.postenwahl .meiner { border-color: var(--ja); border-left: 6px solid var(--ja); }
.postenwahl .meiner .pname::after { content: ' ✓'; color: var(--ja); }

.gruppe { margin: 0 0 var(--e2); text-wrap: pretty; }
.gruppe b {
  display: inline-block; min-width: 7rem;
  font: 600 .75rem/1.4 var(--schrift); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinte-leise);
}
.gruppe.vielleicht b { color: var(--vielleicht); }
.gruppe.nein b { color: var(--nein); }
.gruppe.nein { color: var(--tinte-leise); text-decoration: line-through; }
.leute { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.leute li { background: var(--karte); border: 1px solid var(--kante); padding: .3rem var(--e2); font-size: .9375rem; }
.leute li.ja::before { content: '✓ '; color: var(--ja); font-weight: 700; }

.aufgaben { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.aufgaben li {
  display: flex; align-items: center; gap: var(--e3);
  border-bottom: 1px solid var(--kante); padding: .2rem 0;
}
.aufgaben form { margin: 0; }
.aufgaben .haken {
  width: var(--griff); height: var(--griff); padding: 0; flex: none;
  border: 2px solid var(--kante-stark); background: var(--karte);
  font-size: 1.125rem; font-weight: 700; color: var(--ja);
}
.aufgaben .haken:hover { background: var(--ja-grund); color: var(--ja); }
.aufgaben .text { flex: 1; text-wrap: pretty; }
.aufgaben .text small { color: var(--tinte-leise); font-weight: 500; }
.aufgaben .fertig .text { text-decoration: line-through; color: var(--tinte-leise); }
.aufgaben .weg { width: var(--griff); height: var(--griff); padding: 0; border-color: var(--kante); color: var(--tinte-leise); }
.aufgaben .weg:hover { background: var(--nein); border-color: var(--nein); color: #fff; }

.zeile { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; }
.zeile input[type=text], .zeile input:not([type]) { flex: 1; min-width: 8rem; }
.zeile .kurz { display: flex; align-items: center; gap: .3rem; font-weight: 600; }
.zeile .kurz input { width: 5rem; }

.wegeleiste {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  border-top: 3px solid var(--tinte); padding-top: var(--e4); margin-top: var(--e5);
}
.verlauf { margin-top: var(--e4); border-top: 1px solid var(--kante); }
.verlauf summary {
  min-height: var(--griff); display: flex; align-items: center; cursor: pointer;
  font: 600 .875rem/1 var(--schrift);
}
.verlauf ul { list-style: none; margin: 0 0 var(--e4); padding: 0; font-size: .875rem; }
.verlauf li { padding: .2rem 0; border-bottom: 1px solid var(--kante); }
.verlauf time { color: var(--tinte-leise); font-variant-numeric: tabular-nums; margin-right: var(--e2); }

/* ── Formulare ───────────────────────────────────────────────────────── */
.formular { display: grid; gap: var(--e4); }
.feld { display: grid; gap: .3rem; }
.feld > span { font: 600 .8125rem/1 var(--schrift); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-leise); }
input, select, textarea {
  font: 1rem/1.3 var(--text); color: var(--tinte); background: var(--karte);
  border: 2px solid var(--kante); border-radius: 0; padding: .6rem var(--e3);
  min-height: var(--griff); width: 100%; max-width: 100%;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--tinte); }
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--rot); }
.feld.fehlt input, .feld.fehlt select, .feld.fehlt textarea { border-color: var(--nein); }
.fehler { display: block; color: var(--nein); font-size: .875rem; font-style: normal; font-weight: 600; }
.hinweis { color: var(--tinte-leise); font-size: .8125rem; }
.paar { display: grid; gap: var(--e4); }
.wahl { border: 1px solid var(--kante); background: var(--karte); padding: var(--e3); margin: 0; display: grid; gap: var(--e2); }
.wahl legend { font: 600 .8125rem/1 var(--schrift); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-leise); padding: 0 .3rem; }
.wahl .chip { cursor: pointer; }
.wahl .chip:has(input:checked) { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }
.feldreihe { display: grid; gap: var(--e4); }
.schalter { display: flex; align-items: center; gap: var(--e3); min-height: var(--griff); font-weight: 600; }

.zugangskarte {
  background: var(--karte); border: 2px solid var(--kante-stark);
  border-top: 8px solid var(--rot); padding: var(--e5) var(--e4);
}
body.zugang .zugangskarte.breit { max-width: none; }
body.zugang main { max-width: 26rem; }
.zugangskarte h1 { margin-bottom: var(--e4); }
.zugangskarte .haupt { width: 100%; }
.wappen { display: grid; justify-items: start; gap: var(--e3); margin-bottom: var(--e4); }
.wappen img.rund { width: 4.5rem; }
.wappen .verein { font: 700 1rem/1.2 var(--schrift); }
.fussmarke {
  margin-top: var(--e6); padding-top: var(--e4); border-top: 1px solid var(--kante);
  display: flex; align-items: center; gap: var(--e3);
}
.fussmarke img { width: 5.5rem; }
/* Kein Umkehren im Dunkeln: Das Logo ist aussen freigestellt und steht auf
   jedem Grund richtig. Umgekehrt faerbte sich das braune Schild hell. */
.fussmarke span { font-size: .8125rem; color: var(--tinte-leise); }

/* ── Tabellen ────────────────────────────────────────────────────────── */
.tafel { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tafel caption {
  text-align: left; font: 600 .8125rem/1 var(--schrift); letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinte-leise); padding-bottom: var(--e2);
}
.tafel th, .tafel td { text-align: left; padding: .55rem var(--e2); border-bottom: 1px solid var(--kante); }
.tafel thead th {
  font: 600 .75rem/1 var(--schrift); letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 2px solid var(--tinte); color: var(--tinte);
}
.tafel tfoot td { border-top: 2px solid var(--tinte); border-bottom: 0; font-weight: 700; }
.tafel .zahl-z { text-align: right; font-variant-numeric: tabular-nums; }
.tafel tbody tr:hover { background: var(--karte); }
.rollen { display: flex; flex-wrap: wrap; gap: var(--e2); }
.umschlag { overflow-x: auto; }
/* Statt style="…" am Element: Die Sicherheitsregel (style-src 'self') laesst
   keine Inline-Stile zu, der Abstand fehlte sonst stumm. */
.umschlag.abstand { margin-top: var(--e6); }

.marke-klein {
  font: 600 .6875rem/1 var(--schrift); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--kante-stark); padding: .2rem .35rem;
}
.marke-klein.gut { border-color: var(--ja); color: var(--ja); }
.marke-klein.warte { border-color: var(--vielleicht); color: var(--vielleicht); }
.marke-klein.sperre { border-color: var(--nein); color: var(--nein); }

.antrag {
  background: var(--karte); border: 1px solid var(--kante); border-left: 6px solid var(--messing);
  padding: var(--e3); display: grid; gap: var(--e3); margin-bottom: var(--e2);
}
.antrag .wer { font: 700 1.0625rem/1.2 var(--schrift); }
.antrag .kontakt { font-size: .875rem; color: var(--tinte-leise); }
.antrag .taten { display: flex; flex-wrap: wrap; gap: var(--e2); }
.antrag .taten form { margin: 0; }

.jahrwahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e4); }
.summen { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: var(--e5); }
.summe { background: var(--karte); border: 1px solid var(--kante); border-top: 4px solid var(--tinte); padding: var(--e3); }
.summe b { display: block; font: 700 1.75rem/1 var(--schrift); font-variant-numeric: tabular-nums; }
.summe span { font: 600 .75rem/1 var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); }
.summe.bestaetigt { border-top-color: var(--ja); }
.summe.bestaetigt b { color: var(--ja); }

/* ── Breiter: Tablet und Rechner ─────────────────────────────────────── */
@container seite (min-width: 30rem) {
  .karte { grid-template-columns: auto 1fr auto; align-items: center; }
  .karte .knoepfe { grid-column: auto; width: 17rem; }
  .karte .rueckblick { grid-column: auto; }
  .paar, .feldreihe { grid-template-columns: 1fr 1fr; }
  .naechster .unten { grid-template-columns: 1fr auto; align-items: center; }
  .naechster .unten .knoepfe { width: 19rem; }
}
@container seite (min-width: 48rem) {
  main { padding-inline: var(--e5); }
  h1 { font-size: 1.75rem; }
  .tag { min-height: 6rem; }
  .monatsliste { display: none; }
}
/* Am Telefon ist eine Zelle ~50 px breit: dort nur Punkte, gehandelt wird in der Liste darunter */
@container seite (max-width: 47.99rem) {
  .tag .eintrag {
    height: .5rem; padding: 0; border: 0; margin-bottom: .1rem;
    background: var(--bereich, var(--tinte));
  }
  .tag .eintrag .text { display: none; }
  .tag .eintrag.dabei { border: 2px solid var(--ja); background: var(--karte); height: .6rem; }
  .tag .eintrag.dabei::after { content: none; }
  .tag .eintrag.abgesagt { opacity: .4; }
  .feiertagsname { display: none; }
  .tag { min-height: 3.25rem; }
}

/* ── Druckblatt A4 ───────────────────────────────────────────────────── */
.druck { max-width: 48rem; }
.druckkopf { display: flex; align-items: flex-start; gap: var(--e4); border-bottom: 3px solid #000; padding-bottom: var(--e3); }
.druckkopf img { width: 3.5rem; }
.druckkopf .tz { width: 7rem; margin-left: auto; }
.druckkopf h1 { font-size: 1.5rem; }
.druckposten { margin-top: var(--e5); }
.druckposten h2 { border-bottom: 2px solid #000; padding-bottom: .2rem; margin-bottom: var(--e2); }
.zeilen { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.zeilen li { border-bottom: 1px solid #000; min-height: 1.9rem; padding: .25rem .2rem; display: flex; gap: var(--e3); }
.zeilen li.frei { border-bottom-style: dashed; color: transparent; }
.kasten { width: 1.1rem; height: 1.1rem; border: 2px solid #000; flex: none; margin-top: .15rem; }

@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .kopf, .wegeleiste, .filter, .leiste .umschalter, .knoepfe, .verlauf, .nebenweg, .mehr { display: none !important; }
  main { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  .karte, .blatt, .notiz, .zugangskarte { break-inside: avoid; }
}