/* Belegungskalender DGH Billertshausen – Stylesheet nach Danas Gestaltungsvorgabe (06.09.2026).
   Farben und Maße hängen an den Variablen unten; hell im nackten :root, dunkel zweimal. */

:root {
  --grund: #F4F5F2;
  --flaeche: #FFFFFF;
  --flaeche2: #EBEDE8;
  --linie: #D3D7D0;
  --linie2: #E6E9E3;
  --text: #1C221E;
  --text2: #5A645C;
  --link: #2C4F6E;
  --knopf: #1C221E;
  --knopf-text: #FFFFFF;
  --heute-tint: #F0EFE8;
  --schatten: 0 12px 40px rgba(20,30,24,.22);
  --ueberlagerung: rgba(28,34,30,.28);
  --chip-ok: #E1F2E6; --chip-ok-text: #1C6B37;
  --chip-angefragt: #FFF1CC; --chip-angefragt-text: #7A5200; --chip-angefragt-rand: #D9B24A;
  --chip-storniert: #ECEEEA; --chip-storniert-text: #5A645C;
  --chip-abgelehnt: #FBE6E4; --chip-abgelehnt-text: #9E2A22;
  --fehler: #9E2A22; --fehler-grund: #FBE6E4;
  --sans: "Atkinson Hyperlegible", system-ui, "Segoe UI", Arial, sans-serif;
  --stundenhoehe: 44px;
  --ferien-grund: #FBF0D8;
  --ferien-grund-we: #F3E6CB;
  --ferien-text: #7A5200;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #171A18; --flaeche: #1F2320; --flaeche2: #2A2F2B; --linie: #3A403B; --linie2: #2F3531;
    --text: #E8EBE6; --text2: #A3ABA5; --link: #8FB4D9; --knopf: #E8EBE6; --knopf-text: #171A18;
    --heute-tint: #2C312D; --schatten: 0 12px 40px rgba(0,0,0,.6); --ueberlagerung: rgba(0,0,0,.5);
    --chip-ok: #17301F; --chip-ok-text: #82D3A0;
    --chip-angefragt: #3A2F12; --chip-angefragt-text: #F0C75E; --chip-angefragt-rand: #8A7430;
    --chip-storniert: #2A2F2B; --chip-storniert-text: #A3ABA5;
    --chip-abgelehnt: #3D1E1B; --chip-abgelehnt-text: #F09A93;
    --fehler: #F09A93; --fehler-grund: #3D1E1B;
    --ferien-grund: #3A2F12; --ferien-grund-we: #332911; --ferien-text: #F0C75E;
  }
}
:root[data-theme="dark"] {
  --grund: #171A18; --flaeche: #1F2320; --flaeche2: #2A2F2B; --linie: #3A403B; --linie2: #2F3531;
  --text: #E8EBE6; --text2: #A3ABA5; --link: #8FB4D9; --knopf: #E8EBE6; --knopf-text: #171A18;
  --heute-tint: #2C312D; --schatten: 0 12px 40px rgba(0,0,0,.6); --ueberlagerung: rgba(0,0,0,.5);
  --chip-ok: #17301F; --chip-ok-text: #82D3A0;
  --chip-angefragt: #3A2F12; --chip-angefragt-text: #F0C75E; --chip-angefragt-rand: #8A7430;
  --chip-storniert: #2A2F2B; --chip-storniert-text: #A3ABA5;
  --chip-abgelehnt: #3D1E1B; --chip-abgelehnt-text: #F09A93;
  --fehler: #F09A93; --fehler-grund: #3D1E1B;
  --ferien-grund: #3A2F12; --ferien-grund-we: #332911; --ferien-text: #F0C75E;
}

/* Raumfarben: --raum je Raum aus der Datenbank (Seitenkopf). Daraus: --raum-voll für Leiste,
   Quadrate und Punkte, --raum-tint als Blockgrund, --raum-text als Text auf der Tönung.
   Dunkel wird anders gemischt (Danas K2), damit Leiste und Text auf dem dunklen Grund tragen. */
[class*="raum-"] { --raum-voll: var(--raum, #777); --raum-tint: color-mix(in srgb, var(--raum, #777) 14%, var(--flaeche)); --raum-text: color-mix(in srgb, var(--raum, #777) 62%, var(--text)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [class*="raum-"] { --raum-voll: color-mix(in srgb, var(--raum, #777) 70%, white); --raum-text: color-mix(in srgb, var(--raum, #777) 45%, var(--text)); }
}
:root[data-theme="dark"] [class*="raum-"] { --raum-voll: color-mix(in srgb, var(--raum, #777) 70%, white); --raum-text: color-mix(in srgb, var(--raum, #777) 45%, var(--text)); }

* { box-sizing: border-box; }
/* hidden gewinnt immer, auch gegen display: flex/block einer Klasse (Fehler vom 06.09.: „Anfrage ablehnen?" war sichtbar). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
a { color: var(--link); }
h1 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0 0 12px; }
h2 { font-size: 17px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
h3 { font-size: 15px; font-weight: 700; margin: 16px 0 8px; }
p { margin: 0 0 8px; }
blockquote { margin: 4px 0 8px 12px; padding-left: 8px; border-left: 2px solid var(--linie); color: var(--text2); }
code { font-family: Consolas, "Courier New", monospace; font-size: .9em; }
.num, .tabelle .num, .zahlen td, .zahlen th { font-variant-numeric: tabular-nums; }
.leise, .hilfe { color: var(--text2); font-size: 13px; }
.hilfe { display: block; margin-top: 2px; }
.warn { color: var(--chip-angefragt-text); font-weight: 700; }
.nowrap { white-space: nowrap; }
.klein { font-size: 13px; }
.mitte { text-align: center; }
.fliesstext { white-space: pre-wrap; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Kopfzeile und Menü (Danas Abschnitt 3) */
header.kopf { display: flex; align-items: center; gap: 24px; min-height: 56px; padding: 0 20px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.marke { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; color: var(--text); }
.marke-1 { font-size: 17px; font-weight: 700; }
.marke-2 { font-size: 12px; color: var(--text2); }
.marke-gross { display: flex; flex-direction: column; align-items: center; margin: 24px 0 12px; line-height: 1.2; }
.marke-gross .marke-1 { font-size: 20px; }
nav.menue { display: flex; align-items: center; gap: 4px; flex: 1; }
nav.menue a { color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 4px; }
nav.menue a:hover { background: var(--flaeche2); }
nav.menue a.aktiv { background: var(--flaeche2); font-weight: 700; }
nav.menue .menue-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
nav.menue .konto { font-weight: 700; }
.menue-knopf { display: none; margin-left: auto; }
/* Anmelden ist auf jeder Breite sichtbar und sieht wie ein Bedienelement aus.
   Auf dem Desktop schiebt es sich selbst nach rechts, auf dem Handy sitzt es
   neben dem Knopf „Menü" (Kais Befund vom 06.09.2026). */
.anmelden-knopf { order: 3; margin-left: auto; }
.theme-schalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; }
.theme-schalter button { min-height: 36px; padding: 0 10px; border: 0; border-radius: 0; background: var(--flaeche); color: var(--text2); font-size: 13px; }
.theme-schalter button + button { border-left: 1px solid var(--linie); }
.theme-schalter button[aria-pressed="true"] { background: var(--flaeche2); color: var(--text); font-weight: 700; }
.kopf-rechts { margin-left: auto; }
main.inhalt { padding: 20px; max-width: 1400px; margin: 0 auto; }
main.embed-main { padding: 8px; }
footer.fuss { padding: 16px 20px; color: var(--text2); font-size: 13px; text-align: center; }
footer.fuss a { color: var(--text2); }
.seite.schmal { max-width: 720px; }
.seite.anfrage-seite { max-width: 560px; }
.seite.anmeldung { max-width: 400px; margin: 0 auto; }
.embed-fuss { font-size: 13px; color: var(--text2); margin-top: 8px; }

/* Hinweisleiste, Fehler */
.hinweisleiste { background: var(--flaeche2); color: var(--text); padding: 10px 12px; border-radius: 4px; margin: 0 0 12px; }
.hinweisleiste.warn { border-left: 4px solid var(--chip-angefragt-rand); }
.fehlerleiste, .fehlertext { background: var(--fehler-grund); color: var(--fehler); padding: 10px 12px; border-radius: 4px; margin: 0 0 12px; }
.hinweis-angefragt { background: var(--chip-angefragt); color: var(--chip-angefragt-text); border: 1px solid var(--chip-angefragt-rand); padding: 8px 12px; border-radius: 4px; margin: 8px 0; }
.linkbox .kopierfeld { width: 100%; margin: 6px 0; font-family: Consolas, monospace; font-size: 13px; }

/* Karten, Reiter, Daten */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; padding: 16px; margin: 0 0 16px; }
.reiter { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--linie); }
.reiter a { padding: 8px 12px; text-decoration: none; color: var(--text); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter a.aktiv { font-weight: 700; border-bottom-color: var(--text); }
dl.daten { display: grid; gap: 4px 12px; margin: 0 0 16px; }
dl.daten div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
dl.daten dt { color: var(--text2); font-size: 13px; font-weight: 700; }
dl.daten dd { margin: 0; }
details.aufklapp > summary { cursor: pointer; margin: 8px 0; color: var(--link); }
details.aufklapp > summary.knopf { display: inline-block; color: var(--text); }
details.aufklapp > summary.link { text-decoration: underline; }

/* Formulare (Danas 2.5) */
.formular label { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--text2); }
.formular label > input, .formular label > select, .formular label > textarea {
  display: block; width: 100%; margin-top: 4px; min-height: 38px; padding: 6px 10px; font: inherit; font-size: 15px; font-weight: 400; color: var(--text);
  border: 1px solid var(--linie); border-radius: 4px; background: var(--flaeche);
}
.formular textarea { min-height: 0; }
.formular input.kurz, .formular label > input.kurz { width: 8rem; display: inline-block; }
.formular input[type="color"] { width: 3.5rem; padding: 2px; }
.formular label.haken, .formular label.radio { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text); font-size: 15px; }
.formular label.haken input, .formular label.radio input { width: auto; min-height: 0; margin: 0; }
.formular label.inline-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.formular label.ohne { font-weight: 400; color: var(--text2); }
.formular .zeile { display: flex; flex-wrap: wrap; gap: 0 12px; }
.formular .zeile > label { flex: 1 1 10rem; }
.formular fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.formular legend, .beschriftung { display: block; padding: 0; color: var(--text2); font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.formular .hilfe { font-weight: 400; }
.raumwahl { display: flex; gap: 8px; }
.raum-option, .formular label.raum-option { display: flex; flex: 1; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; margin: 0; border: 1px solid var(--linie); border-radius: 4px; background: var(--flaeche); color: var(--text); font-size: 15px; font-weight: 400; cursor: pointer; }
.raum-option input, .formular label.raum-option > input { width: 18px !important; height: 18px; min-height: 0 !important; margin: 0 !important; accent-color: var(--raum-voll); }
.raum-option:has(input:checked), .formular label.raum-option:has(input:checked) { background: var(--raum-tint); color: var(--raum-text); border-color: var(--raum-voll); font-weight: 700; }
.zeit-zeile { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.zeit-zeile > div { flex: 1 1 14rem; }
.wiederholung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.wiederholung label { margin: 0; }
.wiederholung input[type="date"] { font: inherit; padding: 4px 8px; border: 1px solid var(--linie); border-radius: 4px; background: var(--flaeche); color: var(--text); }
.honig { position: absolute; left: -9999px; }
.inline { display: inline; }
.pruefzeile { background: var(--flaeche2); padding: 8px 12px; border-radius: 4px; margin: 0 0 12px; font-size: 14px; }
.pruefzeile.belegt { background: var(--chip-angefragt); color: var(--chip-angefragt-text); border: 1px solid var(--chip-angefragt-rand); }
.zustand-zeile { display: flex; align-items: center; gap: 8px; }
.inline-frage { background: var(--flaeche2); padding: 10px 12px; border-radius: 4px; margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.knopfzeile { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.knopfzeile .rechts { margin-left: auto; display: flex; gap: 8px; }
.mieter-felder { padding: 8px 12px; border-left: 3px solid var(--linie); margin-bottom: 12px; }

/* Knöpfe */
button, .knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; font: inherit; font-size: 15px; border-radius: 4px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); cursor: pointer; text-decoration: none; line-height: 1.2; }
button:hover, .knopf:hover { background: var(--flaeche2); }
button.primaer, .knopf.primaer { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-text); font-weight: 700; }
button.primaer:hover, .knopf.primaer:hover { opacity: .9; }
button.gefahr { color: var(--fehler); }
button[disabled] { opacity: .5; cursor: not-allowed; }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--link); text-decoration: underline; font-size: inherit; display: inline; }
button.link.gefahr-text { color: var(--fehler); }
.knopf.pfeil { padding: 0 8px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Chips und Raummarken */
.chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 1.3; vertical-align: middle; background: var(--flaeche2); color: var(--text2); }
.chip.zustand-bestaetigt { background: var(--chip-ok); color: var(--chip-ok-text); }
.chip.zustand-angefragt { background: var(--chip-angefragt); color: var(--chip-angefragt-text); border: 1px solid var(--chip-angefragt-rand); }
.chip.zustand-storniert { background: var(--chip-storniert); color: var(--chip-storniert-text); }
.chip.zustand-abgelehnt { background: var(--chip-abgelehnt); color: var(--chip-abgelehnt-text); }
.chip.zustand-fehleingabe { background: none; border: 1px dotted var(--text2); color: var(--text2); }
.raumchip { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; font-size: 13px; }
.raumchip i, .quadrat { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--raum-voll, var(--text2)); vertical-align: -1px; }
.quadrat.angefragt { background: var(--flaeche); border: 1px dashed var(--text2); }
.quadrat.storniert { background: var(--chip-storniert); border: 1px solid var(--linie); }
.leiste { display: flex; height: 5px; border-radius: 2px 2px 0 0; overflow: hidden; }
.leiste .seg { flex: 1; background: var(--raum-voll); }
.leiste.klein { display: inline-flex; width: 36px; height: 6px; border-radius: 2px; vertical-align: middle; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; margin: 0 0 8px; }
.legende .legende-zustaende { display: inline-flex; gap: 4px 16px; }
.abrechnung .haken-text { font-weight: 700; }
.legende-raum { display: inline-flex; align-items: center; gap: 6px; }

/* Tabellen */
.tabelle-scroll { overflow-x: auto; }
table.tabelle { border-collapse: collapse; width: 100%; font-size: 14px; }
.tabelle th, .tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle th { background: var(--flaeche2); font-size: 13px; color: var(--text2); }
.tabelle td.num, .tabelle th.num { text-align: right; white-space: nowrap; }
.tabelle tr.summe td { font-weight: 700; border-top: 2px solid var(--linie); }
.tabelle tr.inaktiv td { color: var(--text2); }
.tabelle tr.storniert td { color: var(--text2); }
.tabelle tr.storniert td:first-child a { text-decoration: line-through; }
.tabelle tr.ausgeblendet td { color: var(--text2); opacity: .7; }
.tabelle.klein { font-size: 13px; }
.tabelle.matrix tr.neben td { border-top: 2px solid var(--linie); }
.tabelle.betrag td { vertical-align: middle; }
.tabelle.betrag .radio { display: flex; }
.tabelle input.kurz { width: 6.5rem; text-align: right; padding: 4px 6px; border: 1px solid var(--linie); border-radius: 4px; font: inherit; background: var(--flaeche); color: var(--text); }
.abschnitt-kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gesamt { font-size: 17px; margin-top: 12px; display: flex; justify-content: space-between; }
.kopierfeld { font-family: Consolas, monospace; font-size: 13px; }

/* Kalenderleiste (Danas 4.1) */
.kal-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.kal-blaettern { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kal-titel { font-size: 20px; margin: 0 0 0 8px; }
.kal-titel small { font-size: 13px; font-weight: 400; color: var(--text2); margin-left: 8px; }
.kal-rechts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kal-ansichten { display: inline-flex; border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; }
.kal-ansichten a { padding: 7px 14px; text-decoration: none; color: var(--text); border-right: 1px solid var(--linie); }
.kal-ansichten a:last-child { border-right: 0; }
.kal-ansichten a.aktiv { background: var(--flaeche2); font-weight: 700; }
.kal-rahmen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }

/* Tag und Woche (4.3, 4.4) */
.kal-raster { --achse: 56px; }
.kal-raster .kal-kopf, .kal-raster .kal-koerper { display: grid; grid-template-columns: var(--achse) repeat(var(--spalten, 7), minmax(0, 1fr)); }
.kal-raster .kal-kopf { border-bottom: 1px solid var(--linie); background: var(--flaeche); }
/* Der Kopf liegt IM Scrollcontainer und klebt oben. Stünde er daneben, fehlten
   dem Körper die Pixel des Scrollbalkens und die Spalten liefen auseinander
   (Kai, 07.09.2026). Nebeneffekt: Die Wochentage bleiben beim Scrollen stehen. */
.kal-scroll > .kal-kopf { position: sticky; top: 0; z-index: 5; }
.kal-raster .spalte-kopf { padding: 6px 4px; font-size: 13px; text-align: center; border-left: 1px solid var(--linie2); }
.kal-raster .spalte-kopf a { color: var(--text); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kal-raster .spalte-kopf .wd { color: var(--text2); }
.kal-raster .spalte-kopf .quadrat { margin-right: 6px; }
.kal-tag .spalte-kopf { font-weight: 700; }
.tagkreis { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; font-weight: 700; }
.spalte-kopf.heute .tagkreis, .tag.heute .tagkreis, .mini-raster a.d.heute .tagkreis { background: var(--link); color: var(--knopf-text); }
.kal-scroll { height: 640px; overflow: auto; position: relative; }
.kal-raster .kal-koerper { position: relative; min-height: calc(24 * var(--stundenhoehe)); }
.zeitachse { position: sticky; left: 0; z-index: 3; background: var(--flaeche); }
.zeitachse .stunde { height: var(--stundenhoehe); font-size: 11px; color: var(--text2); text-align: right; padding-right: 6px; transform: translateY(-.6em); font-variant-numeric: tabular-nums; }
.jetzt-punkt { position: absolute; right: -5px; width: 10px; height: 10px; margin-top: -4px; border-radius: 50%; background: var(--link); z-index: 4; }
.kal-koerper .spalte { position: relative; border-left: 1px solid var(--linie2); height: calc(24 * var(--stundenhoehe)); background-image: repeating-linear-gradient(to bottom, var(--linie2) 0 1px, transparent 1px var(--stundenhoehe)); }
.kal-koerper .spalte.heute { background-color: var(--heute-tint); }
.slot { display: block; height: calc(var(--stundenhoehe) / 2); }
.slot:hover { background: var(--flaeche2); }
.jetzt-linie { position: absolute; left: 0; right: 0; height: 2px; background: var(--link); z-index: 2; pointer-events: none; }
/* overflow: clip statt hidden, damit der Inhalt am Scrollrand kleben kann (Danas M3);
   Rand in der Raumfarbe, damit ein Block auch auf der Heute-Tönung eine Fläche hat (S3). */
.block { position: absolute; overflow: clip; z-index: 2; border-radius: 4px; background: var(--raum-tint); color: var(--raum-text); font-size: 12px; line-height: 16px; text-decoration: none; border: 1px solid color-mix(in srgb, var(--raum, #777) 55%, var(--flaeche)); }
.block .leiste { height: 5px; }
.block .block-inhalt { position: sticky; top: 0; display: block; background: inherit; }
.block .z1, .block .z2, .block .z3 { display: block; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block .z1 { font-weight: 700; padding-top: 2px; }
.block .z2 { font-variant-numeric: tabular-nums; }
.block.fremd { color: var(--text2); }
.block.zustand-angefragt { background: var(--flaeche); border: 1px dashed var(--text2); color: var(--text); }
.block.zustand-storniert { background: var(--chip-storniert); color: var(--chip-storniert-text); border-color: var(--linie); }
.block.zustand-storniert .z1 { text-decoration: line-through; }
.block.zustand-storniert .leiste .seg { background: var(--linie); }
a.block:hover, a.block:focus-visible { border-color: var(--raum-voll); }
.vorschau-block { position: absolute; z-index: 1; border: 1px dashed var(--text2); border-radius: 4px; background: var(--flaeche2); pointer-events: none; }

/* Wochenliste fürs Handy (4.8); dieselben Bausteine unter dem Handy-Monat (S2) */
.woche-liste, .monat-liste { display: none; }
.monat-liste .liste-tag { display: none; }
.monat-liste .liste-tag.aktiv { display: block; }
.monat-liste .liste-tag, .woche-liste .liste-tag { padding: 8px 12px; border-bottom: 1px solid var(--linie); }
.monat-liste h2, .woche-liste h2 { font-size: 15px; margin: 0 0 6px; }
.monat-liste h2 a, .woche-liste h2 a { color: var(--text); text-decoration: none; }
.monat-liste .liste-tag.heute h2 a, .woche-liste .liste-tag.heute h2 a { color: var(--link); }
.monat-liste .frei, .woche-liste .frei { color: var(--text2); font-size: 13px; }
.monat-liste .karte, .woche-liste .karte { display: flex; gap: 10px; align-items: stretch; padding: 8px 10px 8px 6px; margin: 0 0 6px; border-radius: 4px; background: var(--raum-tint); color: var(--raum-text); text-decoration: none; border: 1px solid transparent; }
.monat-liste .karte .leiste-senkrecht, .woche-liste .karte .leiste-senkrecht { display: flex; flex-direction: column; width: 6px; border-radius: 2px; overflow: hidden; }
.monat-liste .karte .leiste-senkrecht .seg { flex: 1; background: var(--raum-voll); }
.monat-liste .karte .zeit { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 6rem; font-size: 15px; }
.monat-liste .karte-text, .woche-liste .karte-text { display: flex; flex-direction: column; min-width: 0; }
.monat-liste .karte .z1, .woche-liste .karte .z1 { font-weight: 700; }
.monat-liste .karte .z3, .woche-liste .karte .z3 { font-size: 13px; }
.monat-liste .karte.zustand-angefragt, .woche-liste .karte.zustand-angefragt { background: var(--flaeche); border: 1px dashed var(--text2); color: var(--text); }
.monat-liste .karte.zustand-storniert, .woche-liste .karte.zustand-storniert { background: var(--chip-storniert); color: var(--chip-storniert-text); }
.monat-liste .karte.zustand-storniert .z1, .woche-liste .karte.zustand-storniert .z1 { text-decoration: line-through; }
.monat-liste .eintragen, .woche-liste .eintragen { font-size: 13px; }

/* Monat (4.5) */
.monat-kopf, .monat-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.monat-kopf div { padding: 6px 4px; text-align: center; font-size: 13px; color: var(--text2); border-bottom: 1px solid var(--linie); }
.monat-raster .tag { position: relative; min-height: 96px; border-right: 1px solid var(--linie2); border-bottom: 1px solid var(--linie2); padding: 4px 6px 24px; }
.monat-raster .tag:nth-child(7n) { border-right: 0; }
.monat-raster .tag.fremd-monat { color: var(--text2); background: var(--flaeche2); }
.monat-raster .tag.ferientag { background: var(--ferien-grund, #FBF0D8); }
.monat-raster .ferienmarke { display: block; font-size: 11px; color: var(--ferien-text, #7A5200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monat-raster .tagzahl { text-decoration: none; color: inherit; position: relative; z-index: 2; }
.monat-raster .tagzahl .tagkreis { width: 24px; height: 24px; font-size: 13px; }
.monat-raster .punkte { display: none; }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 2px; background: var(--raum-voll, var(--text2)); visibility: hidden; }
.punkt.an { visibility: visible; }
.monat-raster .eintrag { position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; margin: 2px 0; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monat-raster .eintrag .zeile-punkte { display: inline-flex; flex-shrink: 0; }
.monat-raster .eintrag .zeit { font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.monat-raster .eintrag .text { overflow: hidden; text-overflow: ellipsis; }
.monat-raster .eintrag.zustand-storniert .text { text-decoration: line-through; color: var(--text2); }
.monat-raster .eintrag.zustand-angefragt .text { color: var(--text2); }
.monat-raster .mehr { position: relative; z-index: 2; font-size: 12px; }
.monat-raster .frei-flaeche { position: absolute; inset: 0; z-index: 1; }
.monat-raster .frei-flaeche:hover { background: var(--flaeche2); }

/* Jahr (4.6) */
.kal-jahr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px; }
.mini-monat { min-width: 0; }
.mini-titel { display: block; font-size: 15px; font-weight: 700; text-decoration: none; color: var(--text); margin-bottom: 4px; }
.mini-raster { display: grid; grid-template-columns: repeat(7, 32px); gap: 1px; justify-content: start; }
.mini-raster .wd { text-align: center; font-size: 11px; color: var(--text2); }
.mini-raster a.d { display: flex; flex-direction: column; align-items: center; height: 32px; text-decoration: none; color: var(--text); font-size: 12px; border-radius: 4px; }
.mini-raster a.d .tagkreis { width: 20px; height: 20px; font-size: 12px; font-weight: 400; }
.mini-raster a.d.belegt .tagkreis { font-weight: 700; }
.mini-raster a.d:hover { background: var(--flaeche2); }
.mini-raster .quadrate { display: flex; gap: 2px; height: 5px; }
.mini-raster .q { width: 5px; height: 5px; background: var(--raum-voll); visibility: hidden; }
.mini-raster .q.an { visibility: visible; }

/* Dialog (Abschnitt 5) */
dialog.dialog { width: 540px; max-width: calc(100vw - 24px); border: 0; border-radius: 8px; padding: 0; background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }
dialog.dialog::backdrop { background: var(--ueberlagerung); }
.dialog-inhalt { padding: 16px 20px 20px; max-height: 90vh; overflow: auto; }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dialog-kopf h2 { font-size: 20px; margin: 0; }
.dialog-schliessen { border: 0; background: none; font-size: 24px; line-height: 1; padding: 4px 8px; min-height: 0; }
body.dialog-offen .dialog-kopf { position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
.seite .dialog-schliessen { display: none; }
.anfrage-info .zeitraum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anfrage-info .zeitraum .leiste { width: 48px; }
.anfrage-info .anlass { font-size: 15px; }

/* Anfragekarten (Abschnitt 7) */
.anfragen .anfrage-karte { max-width: 720px; }
.anfrage-kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.anfrage-kopf .zeitraum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.anfrage-kopf .zeitraum .leiste { width: 48px; }
.anfrage-karte .anlass { font-size: 15px; margin-top: 4px; }
.entscheidung .tabelle { margin: 8px 0; }
.entscheidung .klasse-name { color: var(--text2); }
.entscheidung .grund-gesperrt:empty { display: none; }

/* Abrechnung (Abschnitt 9) */
.abrechnung .speichern-leiste { position: sticky; bottom: 0; background: var(--flaeche); padding: 8px 0; border-top: 1px solid var(--linie); }

/* Druck */
@media print {
  header.kopf, footer.fuss, .kal-leiste, .knoepfe, .speichern-leiste, .reiter, dialog { display: none !important; }
  body { background: #fff; }
  .karte { border: 0; padding: 0; }
}

/* Handy (bis 720 px) */
@media (max-width: 720px) {
  body { font-size: 16px; }
  main.inhalt { padding: 12px 12px 88px; }
  .theme-schalter button { min-height: 44px; }
  .anfrage-form .zeile.zeit > label:first-child { flex-basis: 100%; }
  .kal-tag .block .z2 { white-space: normal; }
  .monat-liste { display: block; }
  .monat-raster .tag.gewaehlt { outline: 2px solid var(--link); outline-offset: -2px; }
  .mini-raster { justify-content: center; }
  header.kopf { flex-wrap: wrap; gap: 12px; padding: 8px 12px; }
  .menue-knopf { display: inline-flex; margin-left: 8px; }
  /* Auf dem Handy trägt der Anmelden-Knopf den Abstand nach links, nicht der
     Menü-Knopf: sonst stehen beide am rechten Rand aufeinander. */
  /* Auf dem Handy steht Anmelden VOR dem Menue-Knopf, nicht hinter dem
     aufgeklappten Menue (das bricht auf volle Breite um). */
  .anmelden-knopf { order: 0; }
  .anmelden-knopf ~ .menue-knopf { margin-left: 8px; }
  nav.menue { display: none; flex-direction: column; align-items: stretch; flex-basis: 100%; }
  nav.menue.offen { display: flex; }
  nav.menue .menue-rechts { margin-left: 0; padding-top: 8px; border-top: 1px solid var(--linie); }
  button, .knopf { min-height: 44px; }
  .formular label > input, .formular label > select, .formular label > textarea { min-height: 44px; }
  .raumwahl { flex-direction: column; }
  .kal-leiste { flex-direction: column; align-items: stretch; }
  .kal-blaettern { display: grid; grid-template-columns: auto 1fr auto; }
  .kal-blaettern > .knopf:first-child { grid-column: 1 / -1; order: 3; }
  .kal-blaettern .pfeil[data-nav="prev"] { order: 1; }
  .kal-blaettern .pfeil[data-nav="next"] { order: 2; grid-column: 3; }
  .kal-titel { order: 1; grid-column: 2; text-align: center; font-size: 17px; margin: 0; }
  .kal-rechts { flex-direction: column; align-items: stretch; }
  .kal-ansichten a { flex: 1; text-align: center; }
  .hauptknopf { position: fixed; right: 16px; bottom: 16px; z-index: 5; min-height: 48px; box-shadow: var(--schatten); }
  .kal-raster { --achse: 40px; --stundenhoehe: 48px; }
  .kal-tag .block .z3 { display: none; }
  .kal-woche { display: none; }
  .woche-liste { display: block; }
  .monat-raster .tag { min-height: 44px; padding: 2px 4px 4px; }
  .monat-raster .eintrag, .monat-raster .mehr { display: none; }
  .monat-raster .punkte { display: block; margin-top: 2px; }
  .kal-jahr { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .mini-raster { grid-template-columns: repeat(7, 36px); }
  .mini-raster a.d { height: 36px; }
  .mini-raster .q { width: 4px; height: 4px; }
  dialog.dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 8px 8px 0 0; }
  .dialog-inhalt { max-height: 92vh; }
  /* Danas M2: 14rem Flex-Basis würde in Spaltenrichtung zur Höhe; und ein umbrechender
     Spalten-Flexcontainer ohne feste Höhe dehnt in Chrome jedes Kind auf 181 px (gemessen). */
  .zeit-zeile { flex-direction: column; flex-wrap: nowrap; }
  .zeit-zeile > div { flex: 0 0 auto; }
  footer.fuss { padding-bottom: 80px; }
  .legende .legende-zustaende { flex-basis: 100%; }
  .knopfzeile { position: sticky; bottom: 0; background: var(--flaeche); padding: 8px 0; }
  dl.daten div { grid-template-columns: 1fr; gap: 0; }
}
@media (min-width: 481px) and (max-width: 720px) { .kal-jahr { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 721px) and (max-width: 1100px) { .kal-jahr { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Fehlt eine Preiszeile, ist das seit 07.09.2026 ein Hinweis, kein Fehler: Beim
   Gerätehaus wird der Betrag je Fall von Hand festgeschrieben (Kai). */
.entscheidung tr.z-fehlt td.fehlertext { background: var(--flaeche2); color: var(--text2); }

/* Serienblock in der Anfragenliste: Vormerkungen einer Serie werden zusammengefasst
   freigegeben (Kais Regel vom 06.09.2026, Befund beim Prüfen mit fünf Terminen). */
.serien-karte .serien-liste { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.serien-karte .serien-liste li { min-width: 8.5rem; }
.serien-karte .serien-freigabe .betrag { margin-top: 6px; }

/* „Wiederholung einrichten" im Bearbeiten-Dialog (Kai, 07.09.2026). Liegt in
   .inline-frage, und das ist ein Flex-Container mit Umbruch: Ohne volle Breite
   für die Absätze stünden Text, Auswahl und Knöpfe alle in einer Zeile. */
.wiederholung-nachtrag p { flex-basis: 100%; margin: 0; }
.wiederholung-nachtrag p.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wiederholung-nachtrag select { max-width: 100%; }

/* Feiertage (Kai, 07.09.2026). Gesetzliche Feiertage in Hessen werden wie ein
   Sonntag dargestellt — das Haus ist zu. Feiertage, die in Hessen keine sind,
   bekommen nur ihren Namen in Grau: Eine Tönung würde eine Schließung
   behaupten, die es nicht gibt. */
.monat-raster .tag.feiertag { background: var(--flaeche2); }
.monat-raster .tag.ferientag.feiertag { background: var(--ferien-grund-we, #F3E6C8); }
.monat-raster .feiertagmarke { display: block; font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monat-raster .feiertagmarke.auswaerts { font-weight: 400; color: var(--text2); }
.kal-kopf .spalte-kopf.feiertag { background: var(--flaeche2); }
.kal-kopf .feiertagmarke { display: block; font-size: 10px; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.kal-kopf .feiertagmarke.auswaerts { color: var(--text2); }
.liste-tag.feiertag { background: var(--flaeche2); }
.liste-tag h2 .feiertagmarke { font-size: 12px; font-weight: 600; color: var(--text2); }

/* Serienseite (Kai, 07.09.2026: Pausen im Sommer und Winter). */
.serie-seite .karte { margin-bottom: 16px; }
.serie-seite .pause-formular .zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.serie-seite .vorschau .serien-liste { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.serie-seite tr.vergangen td { color: var(--text2); }

/* „Belegung an diesem Tag eintragen" stand siebenmal untereinander und drängte
   sich vor die Termine; ein Pluszeichen in der Datumszeile reicht und spart je
   Tag eine Zeile (Kai, 07.09.2026). Die Beschriftung bleibt im aria-label. */
.liste-tag h2 { display: flex; align-items: center; gap: 8px; }
.liste-tag h2 .tagname { flex: 1 1 auto; min-width: 0; }
.liste-tag h2 .eintragen-plus {
  flex: 0 0 auto; width: 34px; height: 34px; margin: -4px 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linie); border-radius: 50%;
  font-size: 22px; line-height: 1; font-weight: 400;
  color: var(--text2); text-decoration: none; background: var(--flaeche);
}
.liste-tag h2 .eintragen-plus:hover, .liste-tag h2 .eintragen-plus:focus-visible { border-color: var(--link); color: var(--link); }
/* Die „heute"-Färbung gilt dem Datum, nicht dem Pluszeichen. */
.monat-liste .liste-tag.heute h2 .eintragen-plus, .woche-liste .liste-tag.heute h2 .eintragen-plus { color: var(--text2); }

/* In der Tagesansicht trägt JEDE Raumspalte die Klasse „heute" — eine flächige
   Tönung über die ganze Ansicht sagt dort nichts und sieht nach Belegung aus.
   Die Klasse bleibt, app.js hängt die Jetzt-Linie daran (Kai, 07.09.2026). */
.kal-tag .spalte.heute { background-color: transparent; }

/* Zeitraumwahl der Abrechnung (Kai, 07.09.2026: feste Nutzer über längere
   Strecken abrechnen, nicht Monat für Monat durchblättern). */
.zeitraum-leiste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 14px; }
.zeitraum-leiste label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text2); }
.zeitraum-leiste .schnellwahl { font-size: 13px; color: var(--text2); padding-bottom: 6px; }

/* Haken „abgerechnet" (Kai, 07.09.2026). Das Datum steht klein darunter, damit
   in der Tabelle nachvollziehbar bleibt, wann die Rechnung gestellt wurde. */
.abrechnung .abger-datum { display: block; color: var(--text2); font-size: 11px; line-height: 1.2; }
.zeitraum-leiste .nur-offene { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); padding-bottom: 6px; }

/* ==========================================================================
   Bedienelemente mit mehr Leben (Kai, 07.09.2026: „peppiger"). Ein Block am
   Ende, damit er als Ganzes zurückgenommen werden kann. Grundlage sind vier
   Akzent-Töne; alles Weitere leitet sich daraus ab. Bewegung bleibt klein
   (120 ms, ein Pixel Hub) und respektiert prefers-reduced-motion weiter oben.
   ========================================================================== */
:root { --akzent: #2F6DA3; --akzent-dunkel: #245683; --akzent-text: #FFFFFF; --akzent-weich: #E1EDF8; --akzent-ring: rgba(47,109,163,.28); --radius: 8px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --akzent: #6FAEE6; --akzent-dunkel: #8DC0EE; --akzent-text: #0F1A24; --akzent-weich: #21354A; --akzent-ring: rgba(111,174,230,.35); }
}
:root[data-theme="dark"] { --akzent: #6FAEE6; --akzent-dunkel: #8DC0EE; --akzent-text: #0F1A24; --akzent-weich: #21354A; --akzent-ring: rgba(111,174,230,.35); }

/* Knöpfe */
button, .knopf { min-height: 38px; padding: 0 16px; border-radius: var(--radius); font-weight: 600; transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease; }
button:hover, .knopf:hover { background: var(--flaeche2); border-color: var(--akzent); color: var(--akzent); }
button:active, .knopf:active { transform: translateY(1px); }
button.primaer, .knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 700; box-shadow: 0 2px 6px var(--akzent-ring); }
button.primaer:hover, .knopf.primaer:hover { opacity: 1; background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: var(--akzent-text); box-shadow: 0 4px 12px var(--akzent-ring); transform: translateY(-1px); }
button.primaer:active, .knopf.primaer:active { transform: translateY(0); box-shadow: 0 1px 3px var(--akzent-ring); }
button.gefahr { color: var(--fehler); }
button.gefahr:hover { background: var(--fehler-grund); border-color: var(--fehler); color: var(--fehler); }
button.link, button.link:hover { background: none; border: 0; transform: none; box-shadow: none; color: var(--akzent); }
button.link.gefahr-text, button.link.gefahr-text:hover { color: var(--fehler); }
button[disabled], button[disabled]:hover { transform: none; box-shadow: none; }
.knopf.pfeil { padding: 0 10px; }
.hauptknopf { padding: 0 20px; }
.liste-tag h2 .eintragen-plus:hover, .liste-tag h2 .eintragen-plus:focus-visible { background: var(--akzent-weich); border-color: var(--akzent); color: var(--akzent); }

/* Umschalter als Pillen: Tag/Woche/Monat/Jahr, Hell/Dunkel */
.kal-ansichten, .theme-schalter { border: 1px solid var(--linie); border-radius: 999px; padding: 3px; gap: 2px; background: var(--flaeche); overflow: visible; }
.kal-ansichten a, .theme-schalter button { border: 0 !important; border-radius: 999px; min-height: 32px; padding: 0 14px; display: inline-flex; align-items: center; font-weight: 600; color: var(--text2); background: transparent; transition: background-color .12s ease, color .12s ease; }
.kal-ansichten a:hover, .theme-schalter button:hover { background: var(--akzent-weich); color: var(--akzent); transform: none; }
.kal-ansichten a.aktiv, .theme-schalter button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); font-weight: 700; }
.theme-schalter button { font-size: 13px; padding: 0 12px; }

/* Menü und Reiter */
nav.menue a { border-radius: 999px; padding: 6px 12px; transition: background-color .12s ease, color .12s ease; }
nav.menue a:hover { background: var(--akzent-weich); color: var(--akzent); }
nav.menue a.aktiv { background: var(--akzent-weich); color: var(--akzent); }
nav.menue .konto { color: var(--text); }
.reiter a { border-bottom-width: 3px; border-radius: var(--radius) var(--radius) 0 0; transition: color .12s ease, border-color .12s ease; }
.reiter a:hover { color: var(--akzent); }
.reiter a.aktiv { border-bottom-color: var(--akzent); color: var(--akzent); }

/* Eingabefelder */
.formular label > input, .formular label > select, .formular label > textarea, .wiederholung input[type="date"], .wiederholung select,
.zeitraum-leiste input, .zeitraum-leiste select, .entscheidung select, .rhythmuswahl {
  border-radius: var(--radius); transition: border-color .12s ease, box-shadow .12s ease;
}
.formular label > input:hover, .formular label > select:hover, .formular label > textarea:hover { border-color: var(--text2); }
.formular label > input:focus, .formular label > select:focus, .formular label > textarea:focus, .wiederholung input:focus, .wiederholung select:focus,
.zeitraum-leiste input:focus, .zeitraum-leiste select:focus, .entscheidung select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-ring); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--akzent); width: 17px; height: 17px; }
.raum-option, .formular label.raum-option { border-radius: var(--radius); transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; cursor: pointer; }
.raum-option:hover, .formular label.raum-option:hover { border-color: var(--raum-voll, var(--akzent)); }
.raum-option:has(input:checked), .formular label.raum-option:has(input:checked) { box-shadow: 0 0 0 2px var(--raum-tint); }
.raum-option input, .formular label.raum-option > input { accent-color: var(--raum-voll); }
.karte { border-radius: 10px; }
.chip { border-radius: 999px; padding: 2px 9px; }
/* Der Heute-Kreis und die Jetzt-Linie folgen dem Akzent, sonst stehen zwei Blautöne nebeneinander. */
.spalte-kopf.heute .tagkreis, .tag.heute .tagkreis, .mini-raster a.d.heute .tagkreis { background: var(--akzent); color: var(--akzent-text); }
.jetzt-linie { background: var(--akzent); }
.jetzt-linie::before { background: var(--akzent); }