/* Designsystem der Club Suite: Bausteine (R6.1, R6.2). Beschreibung: docs/DESIGNSYSTEM.md.
   Keine Inline-Styles, keine Fremdquellen (R7.1). Tippflächen mindestens 48 px (R6.2).
   Handy zuerst; ab 960 px Seitenleiste statt Tab-Leiste. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--groesse);
  line-height: 1.5;
  font-feature-settings: "tnum" 0;
  overflow-wrap: anywhere;
}

[hidden] { display: none !important; }

a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: var(--r-klein); }

h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: var(--groesse-h1); font-weight: 700; letter-spacing: 0.02em; }
h2 { font-size: var(--groesse-h2); font-weight: 700; text-transform: uppercase; letter-spacing: var(--sperrung); }
h3 { font-size: var(--groesse); font-weight: 600; }
p { margin: 0 0 var(--a-3); }

code, .mono { font-family: var(--schrift-mono); font-size: 0.95em; }

.sprung {
  position: absolute; left: var(--a-3); top: -100px; z-index: 100;
  background: var(--aktiv); color: var(--aktiv-schrift); padding: var(--a-2) var(--a-4); border-radius: var(--r);
}
.sprung:focus { top: var(--a-3); }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.symbol { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- Rahmen: Kopfleiste (Handy), Seitenleiste (Desktop), Tab-Leiste (Handy) ------------------- */

.kopfleiste {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-3);
  min-height: var(--kopfleiste);
  padding: 0 var(--a-4);
  padding-top: env(safe-area-inset-top);
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
}

.wortmarke { display: flex; flex-direction: column; text-decoration: none; min-width: 0; }
.wortmarke strong {
  font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--sperrung-weit);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wortmarke small { font-size: 0.7rem; color: var(--leise); text-transform: uppercase; letter-spacing: var(--sperrung-weit); }

.seitenleiste { display: none; }

.navigation { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.navigation a {
  display: flex; align-items: center; gap: var(--a-3);
  min-height: 44px; padding: 0 var(--a-3);
  border-radius: var(--r-pille);
  text-decoration: none; font-size: var(--groesse-klein); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--sperrung);
  color: var(--text-2);
}
.navigation a:hover { background: var(--flaeche-hover); color: var(--text); }
.navigation a[aria-current="page"] { background: var(--aktiv); color: var(--aktiv-schrift); }
.navigation .bereich {
  margin: var(--a-4) var(--a-3) var(--a-1); padding-top: var(--a-3); border-top: 1px solid var(--linie);
  font-size: 0.7rem; color: var(--leise); text-transform: uppercase; letter-spacing: var(--sperrung-weit);
}

.tableiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  min-height: var(--tableiste);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--grund);
  border-top: 1px solid var(--linie);
}
.tableiste a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tableiste); padding: var(--a-1);
  text-decoration: none; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--leise); text-align: center;
}
.tableiste a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableiste a[aria-current="page"] { color: var(--text); }
.tableiste a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--akzent);
}

.inhalt {
  width: 100%;
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: var(--a-5) var(--a-4) calc(var(--tableiste) + var(--a-7) + env(safe-area-inset-bottom));
}
.ohne-menue .inhalt { padding-bottom: var(--a-7); }
.schmal .inhalt, .inhalt.schmal { max-width: 34rem; }

.fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-5);
  margin-top: var(--a-7); padding-top: var(--a-4); border-top: 1px solid var(--linie);
  font-size: var(--groesse-klein); color: var(--leise);
}
.fuss form { margin: 0; }

.konto-block { display: flex; flex-direction: column; gap: var(--a-2); font-size: var(--groesse-klein); }
.konto-block strong { font-weight: 600; }
.konto-block .zeile { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-4); align-items: center; }

@media (min-width: 960px) {
  .kopfleiste, .tableiste { display: none; }
  .mit-menue .seitenleiste {
    position: fixed; inset: 0 auto 0 0; z-index: 10;
    display: flex; flex-direction: column; gap: var(--a-4);
    width: var(--seitenleiste);
    padding: var(--a-5) var(--a-4);
    border-right: 1px solid var(--linie);
    border-top: 3px solid var(--akzent);
    background: var(--grund);
    overflow-y: auto;
  }
  .mit-menue .seitenleiste .wortmarke { padding: 0 var(--a-3) var(--a-2); }
  .mit-menue .seitenleiste .wortmarke strong { white-space: normal; overflow: visible; letter-spacing: var(--sperrung); }
  .mit-menue .seitenleiste .konto-block { margin-top: auto; padding: var(--a-4) var(--a-3) 0; border-top: 1px solid var(--linie); }
  .mit-menue .rahmen { margin-left: var(--seitenleiste); }
  .inhalt { padding: var(--a-6) var(--a-6) var(--a-7); }
  .ohne-menue .kopfleiste { display: flex; }
}

/* --- Bänder und Meldungen ------------------------------------------------------------------------ */

.band { margin: 0; padding: var(--a-3) var(--a-4); font-weight: 600; text-align: center; }
.band.warnung { background: var(--warnung-flaeche); color: var(--warnung); border-bottom: 1px solid var(--warnung); }

.meldungen { display: flex; flex-direction: column; gap: var(--a-3); margin-bottom: var(--a-5); }
.meldung {
  margin: 0 0 var(--a-3);
  padding: var(--a-3) var(--a-4);
  border-radius: var(--r);
  border-left: 4px solid var(--linie-stark);
  background: var(--flaeche);
  color: var(--text);
}
.meldungen .meldung { margin: 0; }
.meldung.gut { border-color: var(--gut); background: var(--gut-flaeche); }
.meldung.hinweis { border-color: var(--info); background: var(--info-flaeche); }
.meldung.warnung { border-color: var(--warnung); background: var(--warnung-flaeche); }
.meldung.fehler { border-color: var(--fehler); background: var(--fehler-flaeche); }
.meldung > :last-child { margin-bottom: 0; }
.meldung .knopf { margin-top: var(--a-2); }

/* --- Seitenkopf mit Zurück -------------------------------------------------------------------- */

.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--a-3) var(--a-4); margin-bottom: var(--a-5); }
.seitenkopf .titel { min-width: 0; flex: 1 1 18rem; }
.seitenkopf h1 { text-transform: uppercase; letter-spacing: 0.06em; }
.seitenkopf .unterzeile { margin: var(--a-1) 0 0; color: var(--leise); }
.seitenkopf .aktionen { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.zurueck {
  display: inline-flex; align-items: center; gap: var(--a-1);
  min-height: 36px; margin-bottom: var(--a-1);
  font-size: var(--groesse-klein); font-weight: 600; text-transform: uppercase; letter-spacing: var(--sperrung);
  text-decoration: none; color: var(--leise);
}
.zurueck:hover { color: var(--text); }

.abschnitt { margin-top: var(--a-6); }
.abschnitt > h2 { margin-bottom: var(--a-3); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--a-2); margin-bottom: var(--a-3); }

/* --- Knöpfe -------------------------------------------------------------------------------------- */

.knopf, button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2);
  min-height: var(--tippflaeche);
  padding: 0 var(--a-5);
  border: 2px solid var(--akzent);
  border-radius: var(--r);
  background: var(--akzent);
  color: var(--akzent-schrift);
  font: inherit; font-size: var(--groesse-klein); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--sperrung);
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: filter var(--dauer), background-color var(--dauer);
}
.knopf:hover, button:hover { filter: brightness(0.94); text-decoration: none; }
.knopf.zweit, button.zweit { background: transparent; color: var(--text); border-color: var(--text); }
.knopf.zweit:hover, button.zweit:hover { background: var(--flaeche-hover); filter: none; }
.knopf.leise, button.leise {
  background: transparent; border-color: transparent; color: var(--text);
  padding: 0 var(--a-3); text-decoration: underline; text-underline-offset: 0.2em;
}
.knopf.leise:hover, button.leise:hover { background: var(--flaeche-hover); filter: none; }
.knopf.gefahr, button.gefahr { background: var(--fehler); border-color: var(--fehler); color: #ffffff; }
:root[data-theme="dunkel"] .knopf.gefahr, :root[data-theme="dunkel"] button.gefahr { color: #111111; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .knopf.gefahr, :root:not([data-theme="hell"]) button.gefahr { color: #111111; }
}
.knopf.klein, button.klein { min-height: 40px; padding: 0 var(--a-3); }
.kopfleiste .knopf, .kopfleiste button { white-space: nowrap; flex: none; }
@media (pointer: coarse) { .knopf.klein, button.klein { min-height: var(--tippflaeche); } }
.knopf.breit, button.breit { width: 100%; }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-2); align-items: center; }
.knoepfe form { margin: 0; }

/* --- Formulare ------------------------------------------------------------------------------------ */

.formular { display: flex; flex-direction: column; gap: var(--a-4); max-width: 34rem; }
.formular.breit { max-width: none; }
.feld { display: flex; flex-direction: column; gap: var(--a-1); }
.feld > label, .feld > .bezeichnung, fieldset > legend {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2);
}
.feld .hilfe { font-size: var(--groesse-klein); color: var(--leise); margin: 0; }
.feld .fehlertext { font-size: var(--groesse-klein); color: var(--fehler); font-weight: 600; margin: 0; }
.felder-reihe { display: grid; gap: var(--a-4); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="date"],
input[type="number"], input[type="tel"], input[type="url"], input[type="time"], input[type="month"], select, textarea {
  width: 100%;
  min-height: var(--tippflaeche);
  padding: var(--a-2) var(--a-3);
  border: 1px solid var(--linie-stark);
  border-radius: var(--r);
  background: var(--grund);
  color: var(--text);
  font: inherit;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; border-color: var(--fokus); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--fehler); }
select {
  appearance: none;
  padding-right: 2.5rem;
  /* Pfeil ohne Bilddatei (CSP): zwei Verläufe ergeben ein Winkelzeichen */
  background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--akzent); flex: none; }
.haken { display: flex; gap: var(--a-3); align-items: flex-start; min-height: var(--tippflaeche); padding: var(--a-2) 0; cursor: pointer; }
.haken input { margin-top: 0.15rem; }
fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--a-1); }
/* Safari: fieldset und Datums-/Zeitfelder sind sonst mindestens so breit wie ihr Inhalt und ragen aus dem Rahmen (2.5, iOS-Simulator) */
fieldset, .feld, .felder-reihe > * { min-width: 0; }
input[type="date"], input[type="time"], input[type="month"] { min-width: 0; max-width: 100%; display: block; -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value, input[type="month"]::-webkit-date-and-time-value { text-align: left; }
input[type="color"] { width: 4rem; height: var(--tippflaeche); padding: 2px; border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--grund); }
input[readonly].link { font-family: var(--schrift-mono); font-size: var(--groesse-klein); }

/* Filterleiste über Listen (E1: wirkt sofort) */
.filter { display: grid; gap: var(--a-3); grid-template-columns: 1fr; margin-bottom: var(--a-4); }
@media (min-width: 640px) { .filter { grid-template-columns: minmax(12rem, 2fr) repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; } }

/* --- Karten, Listen, Angaben -------------------------------------------------------------------- */

.karte {
  padding: var(--a-4);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: var(--grund);
}
.karte + .karte { margin-top: var(--a-3); }
.karte h2, .karte h3 { margin-bottom: var(--a-2); }
.karte.flaeche { background: var(--flaeche); border-color: transparent; }

.raster > .karte { margin: 0; }  /* im Raster sorgt gap für den Abstand, sonst stehen Karten versetzt */
.raster { display: grid; gap: var(--a-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.kacheln a {
  display: flex; align-items: center; gap: var(--a-3);
  min-height: 64px; padding: var(--a-3) var(--a-4);
  border: 1px solid var(--linie); border-radius: var(--r-gross);
  text-decoration: none; font-weight: 600;
}
.kacheln a:hover { background: var(--flaeche-hover); }

/* Liste als Karten auf dem Handy, als Zeilen auf dem Desktop (R6.2: keine breiten Tabellen) */
.liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--r-gross); overflow: hidden; }
.liste > li { padding: var(--a-3) var(--a-4); border-top: 1px solid var(--linie); }
.liste > li:first-child { border-top: 0; }
.liste .leer { color: var(--leise); }
.eintrag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-4); }
.eintrag .haupt { flex: 1 1 14rem; min-width: 0; }
.eintrag .haupt a { font-weight: 700; text-decoration: none; }
.eintrag .haupt a:hover { text-decoration: underline; }
.eintrag .neben { color: var(--leise); font-size: var(--groesse-klein); }
.eintrag .chips { flex: 1 1 14rem; }
.eintrag .knoepfe { flex: none; }
a.ganze-zeile { display: block; text-decoration: none; }

.angaben { display: grid; grid-template-columns: 1fr; gap: var(--a-1) var(--a-4); margin: 0; }
.angaben dt { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leise); margin-top: var(--a-2); }
.angaben dd { margin: 0; }
@media (min-width: 640px) {
  .angaben { grid-template-columns: minmax(10rem, max-content) 1fr; align-items: baseline; }
  .angaben dt { margin-top: 0; }
}

.chips { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--a-1);
  min-height: 26px; padding: 0 var(--a-2);
  border: 1px solid var(--linie-stark); border-radius: var(--r-pille);
  font-size: 0.8rem; font-weight: 600; line-height: 1.2;
  color: var(--text-2); background: var(--grund);
  white-space: nowrap;
}
.chip.gut { color: var(--gut); border-color: var(--gut); background: var(--gut-flaeche); }
.chip.warnung { color: var(--warnung); border-color: var(--warnung); background: var(--warnung-flaeche); }
.chip.fehler { color: var(--fehler); border-color: var(--fehler); background: var(--fehler-flaeche); }
.chip.info { color: var(--info); border-color: var(--info); background: var(--info-flaeche); }
.chip.leise { color: var(--leise); border-style: dashed; }
.chip.akzent { background: var(--akzent); color: var(--akzent-schrift); border-color: var(--akzent); }

.klein { font-size: var(--groesse-klein); }
.leise { color: var(--leise); }
.zahl { font-variant-numeric: tabular-nums; }

/* --- Umschalter (Hell/Dunkel/Automatisch, Sprache, Reiter) ------------------------------------ */

.umschalter { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--linie-stark); border-radius: var(--r-pille); }
.umschalter button {
  min-height: 36px; padding: 0 var(--a-3);
  border: 0; border-radius: var(--r-pille);
  background: transparent; color: var(--text-2);
  font-size: 0.75rem; letter-spacing: 0.06em;
}
.umschalter button:hover { background: var(--flaeche-hover); filter: none; }
.umschalter button[aria-pressed="true"] { background: var(--aktiv); color: var(--aktiv-schrift); }
@media (pointer: coarse) { .umschalter button { min-height: 44px; } }

.reiter { display: flex; gap: var(--a-1); margin: 0 0 var(--a-5); padding: 0; list-style: none; border-bottom: 1px solid var(--linie); overflow-x: auto; }
.reiter a {
  display: inline-flex; align-items: center; min-height: var(--tippflaeche); padding: 0 var(--a-4);
  text-decoration: none; font-size: var(--groesse-klein); font-weight: 700; text-transform: uppercase; letter-spacing: var(--sperrung);
  color: var(--leise); border-bottom: 3px solid transparent; white-space: nowrap;
}
.reiter a[aria-current="page"] { color: var(--text); border-bottom-color: var(--akzent); }

/* --- Besondere Inhalte --------------------------------------------------------------------------- */

.qr { max-width: 15rem; margin: var(--a-3) 0; padding: var(--a-3); background: #ffffff; border-radius: var(--r); }
.qr svg { display: block; width: 100%; height: auto; }
.ziffern { font: 700 2rem/1.2 var(--schrift-mono); letter-spacing: 0.12em; }
.codes { list-style: none; padding: 0; margin: var(--a-4) 0; display: grid; gap: var(--a-2); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.codes li { padding: var(--a-2) var(--a-3); border: 1px dashed var(--linie-stark); border-radius: var(--r); }
.schritte { padding-left: 1.25rem; }
.schritte > li { margin-bottom: var(--a-4); }
.protokoll .zeit { font-variant-numeric: tabular-nums; color: var(--leise); font-size: var(--groesse-klein); white-space: nowrap; }
.mehr-laden { margin-top: var(--a-4); }

/* Flächen und Öffnungskalender (Teilschritt 2.5) */
details > summary { cursor: pointer; min-height: var(--tippflaeche); display: flex; align-items: center; font-weight: 600; }
details[open] > summary { margin-bottom: var(--a-3); }
.farbfleck { width: 16px; height: 16px; flex: none; vertical-align: -2px; margin-right: var(--a-2); }
.farbfleck.leer rect { fill: none; stroke: var(--linie-stark); }
.baum .ebene-1 { padding-left: calc(var(--a-4) + 1.25rem); }
.baum .ebene-2 { padding-left: calc(var(--a-4) + 2.5rem); }
.baum .ebene-3 { padding-left: calc(var(--a-4) + 3.75rem); }
.baum .ebene-4 { padding-left: calc(var(--a-4) + 5rem); }
.baum .ebene-1 .haupt, .baum .ebene-2 .haupt, .baum .ebene-3 .haupt, .baum .ebene-4 .haupt { border-left: 2px solid var(--linie); padding-left: var(--a-3); }
.monat-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--a-2); margin-bottom: var(--a-3); }
.monat-kopf p { margin: 0; }
.monat { list-style: none; margin: 0 0 var(--a-3); padding: 0; display: grid; gap: var(--a-1); grid-template-columns: 1fr; }
.monat-kuerzel, .monat-leer { display: none; }
.monat-tag { display: flex; flex-direction: column; gap: 2px; padding: var(--a-2) var(--a-3); border: 1px solid var(--linie); border-radius: var(--r); background: var(--grund); min-width: 0; overflow-wrap: anywhere; }
.monat-tag.offen { border-color: var(--gut); background: var(--gut-flaeche); }
.monat-tag.zu { color: var(--text-2); }
.monat-tag.sonder { border-style: dashed; border-width: 2px; }
.monat-tag .datum { font-weight: 700; font-variant-numeric: tabular-nums; }
.monat-tag .zustand { font-variant-numeric: tabular-nums; }
.monat-tag .grund, .monat-tag .hinweis { font-size: var(--groesse-klein); color: var(--leise); }
.monat-tag .hinweis { color: var(--info); }
@media (min-width: 960px) {
  .monat { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .monat-kuerzel { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leise); padding: 0 var(--a-1); }
  .monat-leer { display: block; }
  .monat-tag { min-height: 6.5rem; padding: var(--a-2); font-size: var(--groesse-klein); hyphens: auto; }
  .monat-tag .grund, .monat-tag .hinweis { font-size: 0.75rem; }
  .monat-tag .wochentag { display: none; }
}
.wochentage { display: flex; flex-direction: column; gap: var(--a-2); }
.wochentag-zeile { display: grid; gap: var(--a-2) var(--a-3); grid-template-columns: 1fr 1fr; align-items: end; padding-bottom: var(--a-2); border-bottom: 1px solid var(--linie); }
.wochentag-zeile .haken { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .wochentag-zeile { grid-template-columns: 12rem 1fr 1fr; }
  .wochentag-zeile .haken { grid-column: auto; }
}
fieldset.karte { padding: var(--a-4); gap: var(--a-3); }
fieldset.karte > legend { padding: 0 var(--a-2); }

/* --- Kalender (Teilschritt 2.6) ---------------------------------------------------------------------
   Raster als Tabelle: Flächen als Zeilen, Unterflächen eingerückt. Unter 960 px wird jede Zeile zu einer
   Karte (R6.2): leere Zellen verschwinden, jede Belegung steht mit Tag und Uhrzeit untereinander. */
.weit .inhalt { max-width: 1500px; }
.knopf[aria-current="true"] { background: var(--aktiv); color: var(--aktiv-schrift); border-color: var(--aktiv); }
.kal-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-3); margin-bottom: var(--a-3); }
.kal-form { display: inline-flex; gap: var(--a-1); margin-left: var(--a-3); }
.kal-tagkopf { margin-bottom: var(--a-3); }
.kal-oeffnung { display: block; font-size: 0.75rem; font-weight: 600; color: var(--leise); white-space: nowrap; }
.kal-oeffnung.offen { color: var(--gut); }
.kal-tagkopf .kal-oeffnung, .kal-gruppe h3 .kal-oeffnung { display: inline; font-size: var(--groesse-klein); }
.kal .hinweis { color: var(--info); font-size: var(--groesse-klein); font-weight: 400; }
.kal-legende { margin-top: var(--a-4); }

.kal-b {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--a-2);
  min-height: var(--tippflaeche); padding: var(--a-1) var(--a-2);
  border: 1px solid var(--linie-stark); border-left: 4px solid var(--text-2); border-radius: var(--r-klein);
  background: var(--flaeche); color: var(--text);
  font-size: var(--groesse-klein); line-height: 1.25; text-decoration: none; min-width: 0;
}
a.kal-b:hover { background: var(--flaeche-hover); }
.kal-b .zeit { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.kal-b .was { font-weight: 600; min-width: 0; }
.kal-b.belegt .was { font-weight: 400; font-style: italic; }
.kal-b.vorlaeufig, .kal-b.idee { border-style: dashed; border-left-style: dashed; }
.kal-b.abgesagt { color: var(--leise); }
.kal-b.abgesagt .was { text-decoration: line-through; }
.kal-b.konflikt { border-color: var(--fehler); border-left-color: var(--fehler); }
.kal-b + .kal-b { margin-top: var(--a-1); }
.kal-b .chip { min-height: 20px; font-size: 0.7rem; }
.kal-zeile.abgesagt .haupt a, .kal-zeile.abgesagt .haupt strong { text-decoration: line-through; color: var(--leise); }
/* Liste: Die ganze Zeile ist die Tippfläche des Verweises (R6.2); der Titel allein wäre nur eine Textzeile hoch. */
.kal-zeile { position: relative; }
.kal-zeile .haupt a::after { content: ""; position: absolute; inset: 0; }

.kal-gruppe { margin-top: var(--a-5); }
.kal-gruppe h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-1) var(--a-3); margin-bottom: var(--a-2); }
.kal-gruppe h3 a { text-decoration: none; }
.kal-gruppe h3 a:hover { text-decoration: underline; }
.kal-gruppe.zu .liste { background: var(--flaeche); }

/* Handy zuerst: Karten */
.kal-raster { display: block; width: 100%; border-collapse: collapse; }
.kal-raster thead { display: none; }
.kal-raster tbody { display: block; }
.kal-raster tr { display: block; padding: var(--a-3) var(--a-4); border: 1px solid var(--linie); border-radius: var(--r-gross); margin-bottom: var(--a-2); }
.kal-raster th[scope="row"] { display: block; text-align: left; font-weight: 700; padding: 0; }
.kal-raster td { display: block; padding: var(--a-2) 0 0; }
.kal-raster td.leer { display: none; }
.kal-raster tr.leer td { display: none; }
.kal-raster .ebene-1 { margin-left: var(--a-3); } .kal-raster .ebene-2 { margin-left: calc(2 * var(--a-3)); }
.kal-raster .ebene-3 { margin-left: calc(3 * var(--a-3)); } .kal-raster .ebene-4 { margin-left: calc(4 * var(--a-3)); }
.kal-wann { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--leise); margin-bottom: 2px; }
.kal-zahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-1) var(--a-3); min-height: var(--tippflaeche); text-decoration: none; }
.kal-zahl .kal-wann { margin: 0; }
.kal-zahl .zahl { display: none; }
.kal-zahl:hover .kal-was { text-decoration: underline; }
.kal-zeit { display: block; }
.kal-zeit > div + div { margin-top: var(--a-1); }
/* Am Handy steht die Öffnung schon über dem Raster; die Zeile mit dem Balken gibt es nur am Desktop. */
.kal-raster tr.kal-offen-zeile { display: none; }
.kal-offen { color: var(--gut); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (min-width: 960px) {
  .kal-raster { display: table; table-layout: fixed; border: 1px solid var(--linie); }
  .kal-raster thead { display: table-header-group; }
  .kal-raster tbody { display: table-row-group; }
  .kal-raster tr, .kal-raster tr.leer, .kal-raster tr.kal-offen-zeile { display: table-row; padding: 0; border: 0; margin: 0; }
  .kal-raster th, .kal-raster td, .kal-raster td.leer, .kal-raster tr.leer td, .kal-raster th[scope="row"],
  .kal-raster .kal-offen-zeile th, .kal-raster .kal-offen-zeile td {
    display: table-cell; padding: var(--a-1); border: 1px solid var(--linie); vertical-align: top; text-align: left;
  }
  .kal-raster thead th { font-size: var(--groesse-klein); font-weight: 700; background: var(--grund); }
  .kal-raster thead th a { text-decoration: none; display: block; }
  .kal-raster thead th.heute a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
  .kal-raster th:first-child { width: 13rem; }
  .kal-raster th[scope="row"] { padding: var(--a-2); font-weight: 600; font-size: var(--groesse-klein); }
  .kal-raster .ebene-1, .kal-raster .ebene-2, .kal-raster .ebene-3, .kal-raster .ebene-4 { margin-left: 0; }
  .kal-raster .ebene-1 .kal-flaeche { padding-left: var(--a-3); } .kal-raster .ebene-2 .kal-flaeche { padding-left: calc(2 * var(--a-3)); }
  .kal-raster .ebene-3 .kal-flaeche { padding-left: calc(3 * var(--a-3)); } .kal-raster .ebene-4 .kal-flaeche { padding-left: calc(4 * var(--a-3)); }
  .kal-raster .ebene-0 th[scope="row"] { font-weight: 700; }
  .kal-raster .zu { background: var(--flaeche); }
  .kal-raster .kal-wann, .kal-raster .kal-was { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kal-b { min-height: 36px; }

  /* Monat und Jahr: schmale Spalten mit einer Zahl */
  .kal-raster.monat thead th:not(:first-child), .kal-raster.monat td, .kal-raster.jahr td { padding: 2px; text-align: center; }
  .kal-raster.monat thead th:not(:first-child) { font-weight: 600; }
  .kal-raster.monat thead .wt { display: block; font-size: 0.65rem; color: var(--leise); text-transform: uppercase; }
  .kal-raster.monat thead .nr { display: block; font-variant-numeric: tabular-nums; }
  .kal-raster.jahr thead th:not(:first-child) { text-align: center; }
  .kal-zahl { justify-content: center; min-height: 36px; border-radius: var(--r-klein); border: 1px solid var(--linie-stark); background: var(--flaeche); font-weight: 700; }
  .kal-zahl .zahl { display: inline; font-variant-numeric: tabular-nums; }
  .kal-raster .vorlaeufig .kal-zahl { border-style: dashed; font-weight: 400; }
  .kal-raster .leise .kal-zahl { color: var(--leise); font-weight: 400; border-style: dotted; }
  .kal-raster .konflikt .kal-zahl { border-color: var(--fehler); color: var(--fehler); background: var(--fehler-flaeche); }
  .kal-raster .fest .kal-zahl { border-color: var(--text-2); }

  /* Tag: Zeitachse, eine Spalte je halbe Stunde; 46, 48 oder 50 je nach Zeitumstellung */
  .kal-raster.tag td { padding: var(--a-1) 0; }
  .kal-zeit { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 2px 0; min-height: 36px; }
  .kal-zeit.s46 { grid-template-columns: repeat(46, minmax(0, 1fr)); }
  .kal-zeit.s50 { grid-template-columns: repeat(50, minmax(0, 1fr)); }
  .kal-zeit > div + div { margin-top: 0; }
  .kal-zeit > div { min-width: 0; }
  .kal-zeit .kal-b { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; height: 100%; }
  .kal-zeit .kal-b .zeit, .kal-zeit .kal-b .chip.leise { display: none; }
  .kal-zeit .kal-b .was { overflow: hidden; text-overflow: ellipsis; }
  .kal-zeit.achse { min-height: 0; }
  .kal-zeit.achse span { font-size: 0.75rem; font-weight: 600; color: var(--leise); font-variant-numeric: tabular-nums; border-left: 1px solid var(--linie-stark); padding-left: 3px; }
  .kal-offen { display: flex; align-items: center; justify-content: center; min-height: 24px; border-radius: var(--r-klein); background: var(--gut-flaeche); border: 1px solid var(--gut); font-size: 0.75rem; overflow: hidden; white-space: nowrap; }
  .kal-raster .kal-offen-zeile th { font-weight: 400; color: var(--leise); }
  .kal-zeit .von-1 { grid-column-start: 1; } .kal-zeit .von-2 { grid-column-start: 2; } .kal-zeit .von-3 { grid-column-start: 3; } .kal-zeit .von-4 { grid-column-start: 4; } .kal-zeit .von-5 { grid-column-start: 5; } .kal-zeit .von-6 { grid-column-start: 6; } .kal-zeit .von-7 { grid-column-start: 7; } .kal-zeit .von-8 { grid-column-start: 8; } .kal-zeit .von-9 { grid-column-start: 9; } .kal-zeit .von-10 { grid-column-start: 10; } .kal-zeit .von-11 { grid-column-start: 11; } .kal-zeit .von-12 { grid-column-start: 12; } .kal-zeit .von-13 { grid-column-start: 13; } .kal-zeit .von-14 { grid-column-start: 14; } .kal-zeit .von-15 { grid-column-start: 15; } .kal-zeit .von-16 { grid-column-start: 16; } .kal-zeit .von-17 { grid-column-start: 17; } .kal-zeit .von-18 { grid-column-start: 18; } .kal-zeit .von-19 { grid-column-start: 19; } .kal-zeit .von-20 { grid-column-start: 20; } .kal-zeit .von-21 { grid-column-start: 21; } .kal-zeit .von-22 { grid-column-start: 22; } .kal-zeit .von-23 { grid-column-start: 23; } .kal-zeit .von-24 { grid-column-start: 24; } .kal-zeit .von-25 { grid-column-start: 25; } .kal-zeit .von-26 { grid-column-start: 26; } .kal-zeit .von-27 { grid-column-start: 27; } .kal-zeit .von-28 { grid-column-start: 28; } .kal-zeit .von-29 { grid-column-start: 29; } .kal-zeit .von-30 { grid-column-start: 30; } .kal-zeit .von-31 { grid-column-start: 31; } .kal-zeit .von-32 { grid-column-start: 32; } .kal-zeit .von-33 { grid-column-start: 33; } .kal-zeit .von-34 { grid-column-start: 34; } .kal-zeit .von-35 { grid-column-start: 35; } .kal-zeit .von-36 { grid-column-start: 36; } .kal-zeit .von-37 { grid-column-start: 37; } .kal-zeit .von-38 { grid-column-start: 38; } .kal-zeit .von-39 { grid-column-start: 39; } .kal-zeit .von-40 { grid-column-start: 40; } .kal-zeit .von-41 { grid-column-start: 41; } .kal-zeit .von-42 { grid-column-start: 42; } .kal-zeit .von-43 { grid-column-start: 43; } .kal-zeit .von-44 { grid-column-start: 44; } .kal-zeit .von-45 { grid-column-start: 45; } .kal-zeit .von-46 { grid-column-start: 46; } .kal-zeit .von-47 { grid-column-start: 47; } .kal-zeit .von-48 { grid-column-start: 48; } .kal-zeit .von-49 { grid-column-start: 49; } .kal-zeit .von-50 { grid-column-start: 50; } .kal-zeit .von-51 { grid-column-start: 51; }
  .kal-zeit .bis-2 { grid-column-end: 2; } .kal-zeit .bis-3 { grid-column-end: 3; } .kal-zeit .bis-4 { grid-column-end: 4; } .kal-zeit .bis-5 { grid-column-end: 5; } .kal-zeit .bis-6 { grid-column-end: 6; } .kal-zeit .bis-7 { grid-column-end: 7; } .kal-zeit .bis-8 { grid-column-end: 8; } .kal-zeit .bis-9 { grid-column-end: 9; } .kal-zeit .bis-10 { grid-column-end: 10; } .kal-zeit .bis-11 { grid-column-end: 11; } .kal-zeit .bis-12 { grid-column-end: 12; } .kal-zeit .bis-13 { grid-column-end: 13; } .kal-zeit .bis-14 { grid-column-end: 14; } .kal-zeit .bis-15 { grid-column-end: 15; } .kal-zeit .bis-16 { grid-column-end: 16; } .kal-zeit .bis-17 { grid-column-end: 17; } .kal-zeit .bis-18 { grid-column-end: 18; } .kal-zeit .bis-19 { grid-column-end: 19; } .kal-zeit .bis-20 { grid-column-end: 20; } .kal-zeit .bis-21 { grid-column-end: 21; } .kal-zeit .bis-22 { grid-column-end: 22; } .kal-zeit .bis-23 { grid-column-end: 23; } .kal-zeit .bis-24 { grid-column-end: 24; } .kal-zeit .bis-25 { grid-column-end: 25; } .kal-zeit .bis-26 { grid-column-end: 26; } .kal-zeit .bis-27 { grid-column-end: 27; } .kal-zeit .bis-28 { grid-column-end: 28; } .kal-zeit .bis-29 { grid-column-end: 29; } .kal-zeit .bis-30 { grid-column-end: 30; } .kal-zeit .bis-31 { grid-column-end: 31; } .kal-zeit .bis-32 { grid-column-end: 32; } .kal-zeit .bis-33 { grid-column-end: 33; } .kal-zeit .bis-34 { grid-column-end: 34; } .kal-zeit .bis-35 { grid-column-end: 35; } .kal-zeit .bis-36 { grid-column-end: 36; } .kal-zeit .bis-37 { grid-column-end: 37; } .kal-zeit .bis-38 { grid-column-end: 38; } .kal-zeit .bis-39 { grid-column-end: 39; } .kal-zeit .bis-40 { grid-column-end: 40; } .kal-zeit .bis-41 { grid-column-end: 41; } .kal-zeit .bis-42 { grid-column-end: 42; } .kal-zeit .bis-43 { grid-column-end: 43; } .kal-zeit .bis-44 { grid-column-end: 44; } .kal-zeit .bis-45 { grid-column-end: 45; } .kal-zeit .bis-46 { grid-column-end: 46; } .kal-zeit .bis-47 { grid-column-end: 47; } .kal-zeit .bis-48 { grid-column-end: 48; } .kal-zeit .bis-49 { grid-column-end: 49; } .kal-zeit .bis-50 { grid-column-end: 50; } .kal-zeit .bis-51 { grid-column-end: 51; }
}
@media (pointer: coarse) {
  .kal-b, .kal-zahl { min-height: var(--tippflaeche); }
  .kal-gruppe h3 a { display: inline-flex; align-items: center; min-height: var(--tippflaeche); }
}

/* Anmeldeseiten: schmal und mittig, mit Wortmarke */
.anmeldung .inhalt { max-width: 28rem; padding-top: var(--a-7); }
.anmeldung .kopfleiste { justify-content: center; }

.htmx-request.laedt, .laedt.htmx-request { opacity: 0.6; transition: opacity var(--dauer); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .kopfleiste, .seitenleiste, .tableiste, .fuss, .zurueck, .knoepfe { display: none !important; }
  .mit-menue .rahmen { margin-left: 0; }
  body { background: #ffffff; color: #000000; }
}