/* Stil der Web-Oberfläche nach dem Design-System (Lastenheft Abschnitt 15,
   .claude/skills/design-system/): CI aus Renes Kalender-Vorlage für alle Bereiche ([B17.1]).
   Papier hell, Deck dunkel, Schwarz und Weiß, Heebo für Titel und Beschriftungen, Haarlinien,
   keine Rundungen, keine Schatten (Lastenheft DS-1). Die Token in :root sind die einzige
   Quelle für Farben, Schrift, Abstände, Radien und Zeiten; Regeln darunter verwenden nur Token. */

/* ---------- Schrift: Heebo 3.100 (SIL Open Font License, schrift/LIZENZ.txt), vom eigenen Server ---------- */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schrift/heebo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schrift/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Token: hell = Papier ---------- */
:root {
  color-scheme: light;

  --grund: #ffffff;
  --grund-2: #f5f5f5;
  --grund-3: #ffffff;
  --text: #000000;
  --text-2: #5c5c5c;
  --linie: #d9d9d9;
  --linie-feld: #808080;
  --akzent: #000000;
  --akzent-text: #ffffff;
  --invers-grund: #000000;
  --invers-text: #ffffff;
  --invers-text-2: #b3b3b3;
  --fehler: #c8102e;
  --erfolg: #04751a;
  --warnung: #a65200;
  --admin: #ffffaa;
  --admin-text: #000000;
  --admin-linie: #c8102e;

  /* Getönte Flächen für Zustände */
  --ton-akzent: #ebebeb;
  --ton-fehler: color-mix(in srgb, var(--fehler) 8%, var(--grund));
  --ton-erfolg: color-mix(in srgb, var(--erfolg) 8%, var(--grund));
  --ton-warnung: color-mix(in srgb, var(--warnung) 10%, var(--grund));

  --schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-marke: "Heebo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --schrift-etikett: 0.6875rem;
  --schrift-klein: 0.8125rem;
  --schrift-text: 1rem;
  --schrift-gross: 1.25rem;
  --schrift-titel: 2rem;
  --schrift-anzeige: 3.125rem;
  --sperrung-etikett: 0.12em;
  --sperrung-leiste: 0.34em;
  --sperrung-titel: -0.015em;
  --zeile-titel: 0.92;

  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;
  --abstand-7: 3.375rem;
  --rand: clamp(1.25rem, 3vw, 3.375rem);

  --radius-klein: 0;
  --radius: 0;
  --schatten: none; /* keine Schatten (DS-1); Token bleibt für spätere schwebende Ebenen */

  --zeit-druck: 120ms;
  --zeit: 180ms;
  --zeit-lang: 260ms;
  --kurve: cubic-bezier(0.2, 0, 0, 1);
  --druck: 0.985;

  --qr-grund: #ffffff; /* QR-Code braucht hellen Grund, auch im Dunkelmodus */

  --breite: 72rem;
  --trefferflaeche: 2.75rem;
  --breite-auswahl: 16rem; /* alle Auswahlfelder gleich breit, damit das Layout ruhig bleibt ([L.19]) */
  --hoehe-auswahl: 2.25rem; /* flacher mit Maus; auf Touch die volle Trefferfläche (unten) */
  --leiste: 1.5625rem;

  /* Kalender ([B17.2]): Kunden- und Personenfarben aus Renes Vorlage (KA-9); Text steht nie auf
     der vollen Farbe, nur auf ihrer Tönung (--farbe-ton), damit der Kontrast in beiden Modi hält */
  --farbe-0: #3d6fa8;
  --farbe-1: #6b6f75;
  --farbe-2: #4e8a5c;
  --farbe-3: #d07a2e;
  --farbe-4: #5e8c8a;
  --farbe-5: #8a6aa8;
  --farbe-6: #b23a3a;
  --farbe-7: #2f8f8a;
  --farbe-8: #a89f8f;
  --farbe-9: #2f6db5;
  --farbe-10: #2e8b57;
  --farbe-11: #d9731a;
  --farbe-anteil: 18%;
}

/* ---------- Token: dunkel = Deck ----------
   Die Oberfläche ist immer hell (Rene, 12.11.2026, [L.19]). Der Dunkelmodus bleibt vorbereitet und
   wird später als Einstellung des Nutzers angeboten; er gilt nur mit data-theme="dark" an <html>. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #000000;
  --grund-2: #141414;
  --grund-3: #0b0b0b;
  --text: #ffffff;
  --text-2: #b3b3b3;
  --linie: #333333;
  --linie-feld: #8c8c8c;
  --akzent: #ffffff;
  --akzent-text: #000000;
  --invers-grund: #ffffff;
  --invers-text: #000000;
  --invers-text-2: #5c5c5c;
  --fehler: #f86464;
  --erfolg: #4cc764;
  --warnung: #f28c00;
  --ton-akzent: #262626;
  --ton-fehler: color-mix(in srgb, var(--fehler) 16%, var(--grund));
  --ton-erfolg: color-mix(in srgb, var(--erfolg) 14%, var(--grund));
  --ton-warnung: color-mix(in srgb, var(--warnung) 16%, var(--grund));
  --farbe-anteil: 30%;
}

@media (prefers-contrast: more) {
  :root, :root[data-theme="dark"] {
    --text-2: var(--text);
    --linie: var(--linie-feld);
  }
}

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

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

body {
  margin: 0;
  padding-right: var(--leiste);
  font-family: var(--schrift);
  font-size: var(--schrift-text);
  line-height: 1.4;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  hyphens: auto;
}

main {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--abstand-5) var(--rand) var(--abstand-7);
}

h1, h2, h3, h4 { font-family: var(--schrift-marke); font-weight: 900; letter-spacing: var(--sperrung-titel); }
h1 { font-size: var(--schrift-titel); line-height: var(--zeile-titel); margin: var(--abstand-4) 0 var(--abstand-5); }
h2 { font-size: var(--schrift-gross); line-height: 1.08; margin: var(--abstand-6) 0 var(--abstand-3); }
h3, h4 { font-size: var(--schrift-text); line-height: 1.2; margin: var(--abstand-5) 0 var(--abstand-2); }

p { margin: 0 0 var(--abstand-3); }
ul { margin: 0 0 var(--abstand-4); padding-left: var(--abstand-5); }
li { margin: var(--abstand-1) 0; }

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

code, pre, .code { font-family: var(--schrift-mono); font-size: 0.9em; }
code { overflow-wrap: anywhere; }
pre {
  background: var(--grund-2);
  border: 1px solid var(--linie);
  padding: var(--abstand-4);
  overflow-x: auto;
  font-size: var(--schrift-klein);
  line-height: 1.4;
}

small, .klein {
  font-size: var(--schrift-klein);
  line-height: 1.4;
  color: var(--text-2);
}

/* Beschriftung in Großbuchstaben (wie „PERSON“, „ANSICHT“ in der Vorlage) */
.etikett, th, legend, .nachricht .von {
  font-family: var(--schrift-marke);
  font-size: var(--schrift-etikett);
  font-weight: 700;
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  color: var(--text-2);
  hyphens: manual;
}

details { margin: var(--abstand-2) 0; }
summary { cursor: pointer; font-family: var(--schrift-marke); font-weight: 700; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Fokus auf invertierten Flächen und auf der Admin-Leiste sichtbar halten */
.nachricht.ich :focus-visible { outline-color: var(--invers-text); }
.admin-leiste :focus-visible { outline-color: var(--admin-text); }

/* ---------- Senkrechter Schriftzug rechts: Bereich, Seite, Person ---------- */
.leiste {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--leiste);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--abstand-7) 0;
  font-family: var(--schrift-marke);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--sperrung-leiste);
  text-transform: uppercase;
  color: var(--text);
  hyphens: manual;
  pointer-events: none;
}
.leiste span { writing-mode: vertical-rl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 30vh; }
.leiste .seite { letter-spacing: var(--sperrung-etikett); }

/* ---------- Kopf, Mandant, Admin-Sitzung ---------- */
.kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1) var(--abstand-5);
  align-items: center;
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--abstand-2) var(--rand);
  border-bottom: 1px solid var(--text);
}
.kopf nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 var(--abstand-4); }
.marke {
  font-family: var(--schrift-marke);
  font-weight: 900;
  font-size: 1.1875rem;
  line-height: var(--zeile-titel);
  letter-spacing: var(--sperrung-titel);
}
/* Links im Kopf mit Mindest-Trefferfläche */
.kopf a.marke, .kopf a.mandantenleiste, .kopf nav a, .kopf a.knopf {
  display: inline-flex;
  align-items: center;
  min-height: var(--trefferflaeche);
  text-decoration: none;
}
.kopf a.marke { color: var(--text); }
.kopf a.marke:hover { color: var(--text-2); }
.kopf nav a, .kopf a.knopf {
  font-family: var(--schrift-marke);
  font-size: var(--schrift-etikett);
  font-weight: 700;
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  color: var(--text);
  hyphens: manual;
}
.kopf nav a:hover { color: var(--text-2); }
.kopf nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--text); }
.kopf a.knopf { min-height: var(--trefferflaeche); padding: 0 var(--abstand-3); border: 1px solid var(--text); background: transparent; }

/* Menüs im Kopf ([L.19]): „Einstellungen“ und Name der Person, als <details> ohne JavaScript;
   die Liste liegt mit Linie in Textstärke über der Seite, ohne Schatten (DS-1) */
.kopf nav { align-items: center; }
.kopf details.menue { position: relative; margin: 0; }
.kopf details.menue > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-1);
  min-height: var(--trefferflaeche);
  font-size: var(--schrift-etikett);
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  color: var(--text);
  hyphens: manual;
}
.kopf details.menue > summary::-webkit-details-marker { display: none; }
.kopf details.menue > summary::after { content: "▾"; }
.kopf details.menue > summary:hover { color: var(--text-2); }
.kopf details.menue[open] > summary, .kopf details.menue > summary[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--text); }
.menue-liste {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
  min-width: 16rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--grund);
  border: 1px solid var(--text);
}
.menue-liste li { margin: 0; border-bottom: 1px solid var(--linie); }
.menue-liste li:last-child { border-bottom: 0; }
.menue-liste li.etikett { display: block; padding: var(--abstand-2) var(--abstand-3) 0; border-bottom: 0; }
.kopf .menue-liste a { display: flex; padding: 0 var(--abstand-3); }
.kopf .menue-liste a:hover, .kopf .menue-liste a[aria-current="page"] { background: var(--invers-grund); color: var(--invers-text); }
.menue-liste a:focus-visible { outline-offset: -2px; }
/* Wenn der Kopf umbricht, klappt die Liste unter dem Kopf auf statt über den Rand hinaus */
@media (max-width: 64rem) {
  .kopf details.menue[open] { flex-basis: 100%; }
  .menue-liste { position: static; min-width: 0; }
}

/* Mandant immer sichtbar (T-2): schwarzes Feld wie der gewählte Filter */
.mandantenleiste {
  padding: 0 var(--abstand-3);
  background: var(--invers-grund);
  color: var(--invers-text);
  font-family: var(--schrift-marke);
  font-size: var(--schrift-etikett);
  font-weight: 700;
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
}
/* Trefferfläche 44 px, das schwarze Feld bleibt innen schmaler (durchsichtiger Rand oben und unten) */
.kopf a.mandantenleiste { min-height: var(--trefferflaeche); border-block: 0.5rem solid transparent; background-clip: padding-box; color: var(--invers-text); }
.kopf a.mandantenleiste:hover { color: var(--invers-text-2); }

/* Admin-Sitzung unverwechselbar (T-5): Notizzettel mit roter Linie, in beiden Modi gleich */
.admin-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-4);
  background: var(--admin);
  color: var(--admin-text);
  border-bottom: 3px solid var(--admin-linie);
  padding: var(--abstand-2) var(--rand);
  font-family: var(--schrift-marke);
  font-weight: 700;
}
.admin-leiste form, .admin-leiste form.inline { margin: 0 0 0 auto; }
.admin-leiste button {
  background: var(--admin-text);
  color: var(--admin);
  border-color: var(--admin-text);
}
.admin-leiste button:hover { background: var(--admin-text); color: var(--admin); }

/* ---------- Formulare ---------- */
form { margin: 0 0 var(--abstand-4); }
form.inline { display: inline; margin: 0; }
form.inline + form.inline { margin-left: var(--abstand-2); }
/* Inline-Formular mit Feldern (Filter): Felder und Knopf auf einer Grundlinie */
form.inline:has(> label) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--abstand-2) var(--abstand-4); margin: 0 0 var(--abstand-4); }
form.inline:has(> label) > label { margin: 0; }

label {
  display: block;
  margin: 0 0 var(--abstand-4);
  font-family: var(--schrift-marke);
  font-size: var(--schrift-etikett);
  font-weight: 700;
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  color: var(--text-2);
  hyphens: manual;
}
label > input:not([type=checkbox]):not([type=radio]),
label > select,
label > textarea { display: block; margin-top: var(--abstand-1); }
/* Kästchen und Auswahlknöpfe: Beschriftung als normaler Text daneben */
label:has(> input[type=checkbox]), label:has(> input[type=radio]), label.zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  align-items: center;
  font-family: var(--schrift);
  font-size: var(--schrift-text);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
label.zeile > input:not([type=checkbox]):not([type=radio]) { flex: 1 1 12rem; min-width: 0; margin-top: 0; }
form.inline label, .filter label { display: inline-block; max-width: 100%; margin-right: var(--abstand-3); vertical-align: bottom; }

input, select, textarea, button { font: inherit; color: inherit; }

/* Alle Felder mit Rahmen, flach wie die Auswahlfelder (Rene, 12.11.2026, [L.19]) */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select {
  min-height: var(--hoehe-auswahl);
  max-width: 100%;
  min-width: 0;
  padding: 0 var(--abstand-3);
  background: var(--grund);
  border: 1px solid var(--linie-feld);
  border-radius: 0;
  font-family: var(--schrift);
  font-size: var(--schrift-text);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
/* Auswahlfelder ([L.19]): flach, mit Rahmen, alle gleich breit; Pfeil aus zwei Verläufen in Textfarbe */
select {
  appearance: none;
  width: var(--breite-auswahl);
  min-height: var(--hoehe-auswahl);
  padding: 0 calc(var(--abstand-3) + 1rem) 0 var(--abstand-3);
  border: 1px solid var(--linie-feld);
  background-color: var(--grund);
  background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - var(--abstand-3) - 0.3125rem) 55%, calc(100% - var(--abstand-3)) 55%;
  background-size: 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  font-family: var(--schrift-marke);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
@media (pointer: coarse) { :root { --hoehe-auswahl: var(--trefferflaeche); } }
/* Datumsfelder so breit wie die Auswahlfelder; in Tabellen schmal */
input:not([type=checkbox]):not([type=radio])[type=date] { width: var(--breite-auswahl); }
td input:not([type=checkbox]):not([type=radio])[type=date] { width: auto; }
select option { background: var(--grund); color: var(--text); }
input:not([type=checkbox]):not([type=radio]), textarea { width: 24rem; }
/* In Tabellenzellen (etwa Umfang in der Rechtematrix) so breit wie nötig, sonst wird die Tabelle zu breit */
td select { width: auto; }
select[multiple] { min-height: auto; padding: var(--abstand-1) var(--abstand-2); background-image: none; }
textarea {
  display: block;
  width: 100%;
  max-width: 48rem;
  min-height: 6rem;
  resize: vertical;
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--grund);
  border: 1px solid var(--linie-feld);
  border-radius: 0;
  font-family: var(--schrift);
  font-size: var(--schrift-text);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--text);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--text); }
input[type=checkbox], input[type=radio] { width: 1.125rem; height: 1.125rem; accent-color: var(--akzent); margin: 0; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.5; }
input:user-invalid { border-color: var(--fehler); }
.zahl { width: 8rem !important; text-align: right; font-variant-numeric: tabular-nums; }
fieldset { border: 1px solid var(--linie); padding: var(--abstand-4); margin: 0 0 var(--abstand-4); }
legend { padding: 0 var(--abstand-2); }

button, a.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: var(--trefferflaeche);
  padding: var(--abstand-2) var(--abstand-4);
  border: 1px solid var(--text);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--schrift-marke);
  font-size: var(--schrift-etikett);
  font-weight: 700;
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  text-decoration: none;
  hyphens: manual;
  cursor: pointer;
  transition: transform var(--zeit-druck) var(--kurve), background-color var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
button:hover, a.knopf:hover { background: var(--ton-akzent); color: var(--text); }
button:active, a.knopf:active { transform: scale(var(--druck)); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Hauptknopf: der letzte Knopf eines eigenständigen Formulars, schwarz gefüllt */
form:not(.inline) > button:last-of-type {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
}
form:not(.inline) > button:last-of-type:hover { background: var(--akzent); color: var(--invers-text-2); }

/* Kleiner Knopf in Tabellenzellen der Matrix */
button.klein { min-height: 2rem; padding: var(--abstand-1) var(--abstand-2); }

/* ---------- Module ([L.19]): Teile einer Seite umrandet, mit Unterüberschrift ---------- */
.modul {
  border: 1px solid var(--linie-feld);
  padding: var(--abstand-4) var(--abstand-5) var(--abstand-5);
  margin: 0 0 var(--abstand-5);
}
.modul > h2:first-child {
  margin: 0 calc(-1 * var(--abstand-5)) var(--abstand-4);
  padding: 0 var(--abstand-5) var(--abstand-3);
  border-bottom: 1px solid var(--linie);
}
.modul > :last-child, .modul > form:last-child { margin-bottom: 0; }
.modul table.liste { width: 100%; margin-bottom: 0; }
/* [L.19] Kennungen und Zeitstempel in Tabellen: nie trennen oder umbrechen, die Spalte wird so breit wie nötig */
table.liste .fest { white-space: nowrap; hyphens: manual; }
/* [L.19] Testbereich sichtbar markieren, damit er nicht für den echten gehalten wird */
.marke-test { display: inline-block; padding: 0 var(--abstand-2); background: var(--invers-grund); color: var(--invers-text); font-family: var(--schrift-marke); font-size: var(--schrift-etikett); font-weight: 700; letter-spacing: var(--sperrung-etikett); text-transform: uppercase; }
/* Im Modul ohne zweiten Rahmen: nur die Kante links bleibt */
.modul .kettenzustand { background: none; padding: 0 0 0 var(--abstand-4); }
.modul .blaettern { margin: var(--abstand-3) 0 0; }
/* Filterzeile: Knopf so hoch wie die Auswahlfelder daneben */
.modul form.filter > button { min-height: var(--hoehe-auswahl); }

/* Formular als Raster: Felder gleich breit nebeneinander, lange Felder (.breit) über die ganze Zeile */
form.felder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: var(--abstand-4) var(--abstand-5);
  align-items: end;
}
form.felder > label { margin: 0; }
form.felder > .breit { grid-column: 1 / -1; margin: 0; }
form.felder input:not([type=checkbox]):not([type=radio]), form.felder select, form.felder textarea { width: 100%; max-width: none; }
form.felder > button { grid-column: 1 / -1; justify-self: start; }
/* Raster mit drei gleich breiten Spalten (Kalender „Neu“); Knopf als Feld in der Zeile, gleich hoch */
form.felder.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
form.felder > button.im-raster { grid-column: auto; justify-self: start; min-height: var(--hoehe-auswahl); }
form.felder > fieldset { margin: 0; padding: var(--abstand-1) var(--abstand-3) var(--abstand-2); display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); }

/* Klappbares Modul: die Unterüberschrift ist der Schalter, Pfeil rechts */
details.modul > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-3);
  margin: 0 calc(-1 * var(--abstand-5));
  padding: 0 var(--abstand-5) var(--abstand-3);
}
details.modul > summary::-webkit-details-marker { display: none; }
details.modul > summary::after { content: "▸"; font-size: var(--schrift-gross); }
details.modul[open] > summary { margin-bottom: var(--abstand-4); border-bottom: 1px solid var(--linie); }
details.modul[open] > summary::after { content: "▾"; }
details.modul > summary h2 { margin: 0; }
details.modul:not([open]) { padding-bottom: 0; }

/* ---------- Tabellen ---------- */
table {
  border-collapse: collapse;
  margin: 0 0 var(--abstand-5);
  font-variant-numeric: tabular-nums;
}
th, td {
  padding: var(--abstand-2) var(--abstand-4) var(--abstand-2) 0;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}
th { border-bottom-color: var(--text); }
td form.inline button, td > button { min-height: 2.25rem; padding: var(--abstand-1) var(--abstand-3); }

/* Rechtematrix */
.matrix td, .matrix th { padding: var(--abstand-1) var(--abstand-2); }
.matrix .ebene td:first-child { font-family: var(--schrift-marke); font-weight: 700; }
.matrix .neu { background: var(--ton-warnung); }
.matrix .tiefe-1 td:first-child { padding-left: var(--abstand-5); }
.matrix .tiefe-2 td:first-child { padding-left: var(--abstand-7); }
.matrix .tiefe-3 td:first-child { padding-left: calc(var(--abstand-7) + var(--abstand-5)); }
.matrix .name { color: var(--text-2); }
.gesperrt, .grau { color: var(--text-2); }
td.gesperrt, input.gesperrt { opacity: 0.5; }
.ja { color: var(--erfolg); }
.nein { color: var(--text-2); }
.abweichung { background: var(--ton-akzent); }
.pausiert { color: var(--warnung); }

/* Vorher und nachher */
.diff .geaendert { background: var(--ton-warnung); }
tr.alt { background: var(--ton-fehler); }
tr.entfernt { color: var(--text-2); }

/* Audit-Log */
.log td { font-size: var(--schrift-klein); }
.log .ergebnis-verweigert td { background: var(--ton-warnung); }
.log .ergebnis-fehler td { background: var(--ton-fehler); }
.kettenzustand {
  background: var(--grund-2);
  border-left: 3px solid var(--text);
  padding: var(--abstand-4);
  margin: 0 0 var(--abstand-5);
}
.kettenzustand > :last-child { margin-bottom: 0; }
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 var(--abstand-3); }
.filter input:not([type=checkbox]) { width: auto; }
.blaettern { display: flex; gap: var(--abstand-4); margin: 0 0 var(--abstand-5); }

/* ---------- Meldungen ---------- */
.meldung { font-family: var(--schrift-marke); font-weight: 700; font-size: var(--schrift-gross); line-height: 1.2; }
.hinweis { color: var(--warnung); }
/* Text nur für Vorleseprogramme */
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Zahl in der Kopfzeile: neue Erinnerungen, offene eigene Aufgaben */
.zaehler {
  display: inline-block;
  min-width: 1.6em;
  margin-left: var(--abstand-1);
  padding: 0 var(--abstand-1);
  background: var(--fehler);
  color: var(--grund);
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* [L.19], Rene 14.11.2026: Die Zahl am Planner zählt, was heute läuft, nicht Neues; darum schlicht
   mit Rahmen. Rot gefüllt bleibt für wirklich Neues (Chat, „Wartet auf dich“). */
#kopf-planner .zaehler { background: none; color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
div.hinweis, p.hinweis {
  background: var(--ton-warnung);
  border-left: 3px solid var(--warnung);
  color: var(--text);
  padding: var(--abstand-2) var(--abstand-3);
}
body > .hinweis { margin: 0; text-align: center; }
span.hinweis { font-size: var(--schrift-klein); }
.fehler { color: var(--fehler); }
p.fehler {
  background: var(--ton-fehler);
  border-left: 3px solid var(--fehler);
  color: var(--text);
  padding: var(--abstand-2) var(--abstand-3);
}
.legende { color: var(--text-2); }

/* ---------- Startseite und Bereichswahl: Kacheln mit Haarlinien ---------- */
.verweise, .mandantenwahl {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--text);
  border-left: 1px solid var(--linie);
}
.verweise li, .mandantenwahl li {
  margin: 0;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.verweise a {
  display: flex;
  align-items: flex-end;
  min-height: 5rem;
  padding: var(--abstand-3) var(--abstand-4);
  color: var(--text);
  text-decoration: none;
  font-family: var(--schrift-marke);
  font-weight: 900;
  font-size: var(--schrift-gross);
  line-height: 1.08;
  letter-spacing: var(--sperrung-titel);
  transition: background-color var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
.verweise a:hover { background: var(--invers-grund); color: var(--invers-text); }
/* Zahl auf der Kachel der Startseite ([L.19]): groß rechts, wie die Anzeige-Zahl der Vorlage */
.verweise a { justify-content: space-between; gap: var(--abstand-3); }
.kachel-zahl { font-size: var(--schrift-titel); line-height: var(--zeile-titel); font-variant-numeric: tabular-nums; }
.mandantenwahl form { margin: 0; }
.mandantenwahl form > button:last-of-type {
  width: 100%;
  min-height: 5rem;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: left;
  background: var(--grund);
  border: 0;
  color: var(--text);
  padding: var(--abstand-3) var(--abstand-4);
  font-weight: 900;
  font-size: var(--schrift-gross);
  letter-spacing: var(--sperrung-titel);
  text-transform: none;
  line-height: 1.08;
}
.mandantenwahl form > button:last-of-type:hover { background: var(--invers-grund); color: var(--invers-text); }
/* Der aktuelle Bereich ist nicht wählbar und wird als gewählt gezeigt, nicht als gesperrt */
.mandantenwahl form > button:last-of-type:disabled { opacity: 1; cursor: default; background: var(--invers-grund); color: var(--invers-text); }

/* ---------- Anmeldung ---------- */
.code { font-size: var(--schrift-gross); letter-spacing: 0.1em; overflow-wrap: anywhere; }
.qr svg { width: 15rem; height: 15rem; background: var(--qr-grund); padding: var(--abstand-2); }

/* ---------- Assistent ---------- */
.verlauf { display: flex; flex-direction: column; gap: var(--abstand-3); margin-bottom: var(--abstand-5); }
.leer { color: var(--text-2); }
.nachricht {
  padding: var(--abstand-3) var(--abstand-4);
  border: 1px solid var(--linie);
  max-width: 48rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Eigene Nachricht invertiert wie der Block „What's up today?“ */
.nachricht.ich { align-self: flex-end; background: var(--invers-grund); border-color: var(--invers-grund); color: var(--invers-text); }
.nachricht.ich .von { color: var(--invers-text-2); }
.nachricht.ich a { color: var(--invers-text); }
.nachricht.assistent { align-self: flex-start; background: var(--grund); }
.nachricht.fehler { align-self: flex-start; background: var(--ton-fehler); border-color: var(--fehler); color: var(--text); }
.nachricht .von { display: block; margin-bottom: var(--abstand-1); }
.nachricht p { margin: var(--abstand-1) 0; }
.quellen { font-size: var(--schrift-klein); color: var(--text-2); margin: var(--abstand-1) 0 0 var(--abstand-4); white-space: normal; }
#frage-form textarea { display: block; }
#frage-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); }
#frage-form label, #frage-form textarea { flex-basis: 100%; margin: 0; }

/* Festhalten im Gedächtnis */
.festgehalten { font-size: var(--schrift-klein); color: var(--erfolg); margin: var(--abstand-1) 0 0; white-space: normal; }
/* Vorschlag des Assistenten: Rahmen mit roter Kante, Wort „Vorschlag“ steht im Text */
.vorschlag {
  border: 1px solid var(--linie-feld);
  box-shadow: inset 3px 0 0 var(--fehler);
  background: var(--grund);
  color: var(--text);
  padding: var(--abstand-3) var(--abstand-4) var(--abstand-3) var(--abstand-5);
  margin: var(--abstand-2) 0;
  white-space: normal;
}
.vorschlag p { margin: 0 0 var(--abstand-2); }
.vorschlag-knopf { display: inline; margin: 0 var(--abstand-2) 0 0; }
/* Vorschau eines Textes vor der Freigabe (etwa Hinweis beim Beitritt) */
.vorschau { background: var(--grund-2); border-left: 3px solid var(--text); padding: var(--abstand-3) var(--abstand-4); white-space: pre-wrap; }

/* ---------- Kalender ([B17.2], Lastenheft 5.13, KA-5 bis KA-9) ---------- */
.farbe-0 { --f: var(--farbe-0); }
.farbe-1 { --f: var(--farbe-1); }
.farbe-2 { --f: var(--farbe-2); }
.farbe-3 { --f: var(--farbe-3); }
.farbe-4 { --f: var(--farbe-4); }
.farbe-5 { --f: var(--farbe-5); }
.farbe-6 { --f: var(--farbe-6); }
.farbe-7 { --f: var(--farbe-7); }
.farbe-8 { --f: var(--farbe-8); }
.farbe-9 { --f: var(--farbe-9); }
.farbe-10 { --f: var(--farbe-10); }
.farbe-11 { --f: var(--farbe-11); }
.kalender-kopf { margin: 0 0 var(--abstand-4); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--abstand-3) var(--abstand-6); }
.kalender-kopf h1 { font-size: var(--schrift-gross); margin: var(--abstand-2) 0; }
/* „What's up today?“ als invertierter Block wie in der Vorlage (KA-6) */
.whats-up { flex: 0 1 45rem; min-width: 0; margin: 0; padding: var(--abstand-2) var(--abstand-4); background: var(--invers-grund); color: var(--invers-text); }
.whats-up summary { font-family: var(--schrift-marke); font-weight: 900; color: var(--invers-text); }
.whats-up dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--abstand-1) var(--abstand-4); margin: var(--abstand-2) 0 0; }
.whats-up dt { font-family: var(--schrift-marke); font-size: var(--schrift-etikett); font-weight: 700; letter-spacing: var(--sperrung-etikett); text-transform: uppercase; color: var(--invers-text); }
.whats-up dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-2); }
.whats-up .etikett { color: var(--invers-text-2); }
.whats-up .leer { color: var(--invers-text-2); margin: var(--abstand-2) 0 0; }
.heute-punkt { padding: 0 var(--abstand-2); border: 1px solid var(--invers-text-2); }
/* Filterreihen wie „PERSON · ALLE · …“ in der Vorlage (KA-8); gewählt = invertiert */
.filterreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-4); margin: 0 0 var(--abstand-2); }
.filterreihe > .etikett { min-width: 6rem; }
.ansicht-wahl { margin: 0 0 var(--abstand-4); }
.wahl { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--text); }
.wahl a { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 2.25rem; padding: 0 var(--abstand-3); border-right: 1px solid var(--linie); font-family: var(--schrift-marke); font-size: var(--schrift-etikett); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--text); hyphens: manual; }
.wahl a:last-child { border-right: 0; }
.wahl a:hover { background: var(--ton-akzent); color: var(--text); }
.wahl a[aria-current="true"] { background: var(--invers-grund); color: var(--invers-text); }
.marke-farbe { display: inline-block; width: 0.625rem; height: 0.625rem; background: var(--f); }
/* Einträge: Tönung der Kunden- oder Personenfarbe, Kante je Art wie in der Vorlage */
.eintraege { list-style: none; padding: 0; margin: 0 0 var(--abstand-4); display: flex; flex-direction: column; gap: var(--abstand-2); max-width: 48rem; }
.eintrag { margin: 0; padding: var(--abstand-2) var(--abstand-3); background: var(--grund); border: 1px solid var(--linie); box-shadow: inset 3px 0 0 var(--f); display: grid; grid-template-columns: 1fr auto; gap: 0 var(--abstand-3); }
.eintrag > :not(form) { grid-column: 1; }
.eintrag form.abhaken { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.eintrag-titel { font-family: var(--schrift-marke); font-weight: 700; }
.eintrag.typ-final { box-shadow: inset 3px 0 0 var(--fehler); border-color: var(--fehler); }
.eintrag.typ-option, .eintrag.typ-review { border-style: dashed; }
.eintrag.erledigt .eintrag-titel { text-decoration: line-through; color: var(--text-2); }
.personen { display: flex; flex-wrap: wrap; gap: var(--abstand-1); margin-top: var(--abstand-1); }
.person { font-family: var(--schrift-marke); font-size: var(--schrift-etikett); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 var(--abstand-1); background: color-mix(in srgb, var(--f) var(--farbe-anteil), var(--grund)); color: var(--text); }
.tagesgruppe h3 .etikett, .projektgruppe .etikett { margin-left: var(--abstand-2); }
/* Monatsraster (KA-5): Kalenderwoche vorn, Wochenende und Feiertage grau, Heute rot */
.monat-name { margin-top: var(--abstand-5); }
table.raster { width: 100%; table-layout: fixed; border-collapse: collapse; }
table.raster th, table.raster td { padding: var(--abstand-1); border: 1px solid var(--linie); vertical-align: top; }
table.raster th.kw { width: 2.5rem; color: var(--text-2); }
table.raster td.tag { height: 7rem; overflow: hidden; }
table.raster td.frei { background: var(--grund-2); }
table.raster td.fremd .tag-zahl { color: var(--text-2); }
.tag-kopf { display: flex; justify-content: space-between; gap: var(--abstand-1); text-decoration: none; color: var(--text); font-family: var(--schrift-marke); font-weight: 700; }
.feiertag { font-size: var(--schrift-etikett); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.heute .tag-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--fehler); color: var(--grund); }
.chip { display: block; margin-top: 2px; padding: 0 var(--abstand-1); font-size: var(--schrift-etikett); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--f) var(--farbe-anteil), var(--grund)); color: var(--text); border: 1px solid transparent; }
.chip-kunde { font-family: var(--schrift-marke); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.chip.typ-shoot, .chip.typ-prep { box-shadow: inset 3px 0 0 var(--f); font-weight: 700; }
.chip.typ-meeting, .chip.typ-allgemein { border-color: var(--f); }
.chip.typ-delivery { background: var(--grund); box-shadow: inset 3px 0 0 var(--f); border-color: var(--f); }
.chip.typ-option, .chip.typ-review { border: 1px dashed var(--f); }
.chip.typ-final { background: var(--fehler); color: var(--grund); }
.chip.typ-blocker { background: var(--text); color: var(--grund); }
.chip.erledigt { text-decoration: line-through; opacity: 0.7; }
.nachladen { padding: var(--abstand-4) 0; }
@media (max-width: 40rem) {
  table.raster td.tag { height: 4.5rem; }
  .chip-art { display: none; }
  .eintrag { grid-template-columns: 1fr; }
  .eintrag form.abhaken { grid-column: 1; grid-row: auto; }
}

/* ---------- Planner Monat und Häkchen je Person ([B17.3], Nachtrag 14.11.2026) ---------- */
/* Häkchen-Liste mit Namen (Baustein `_personen.html`, auch für [L.23]); grau = nicht im Projekt */
.haken-gruppe { display: flex; flex-direction: column; gap: var(--abstand-2); }
.haken-liste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-4); margin: 0; padding: var(--abstand-1) var(--abstand-3) var(--abstand-2); }
.haken-liste > label { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: var(--trefferflaeche); }
.haken-liste > label.grau { color: var(--text-2); }
.haken-liste > label.gesperrt { color: var(--text-2); }
.haken-liste > p.klein { flex-basis: 100%; margin: 0; color: var(--text-2); }
/* „Ausblenden“ rechts in der Reihe der Ansicht (Wunsch Rene über [L.19]) */
.ansicht-wahl .ausblenden-etikett { margin-left: auto; }
/* Monat in voller Breite mit Seitenleiste (Wunsch Rene über [L.19]): nur in dieser Ansicht breit */
main:has(.monat-voll) { max-width: none; }
.monat-voll { display: grid; grid-template-columns: 1fr; gap: var(--abstand-4); }
.monat-voll:has(.tag-leiste:not(:empty)) { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); }
.tag-leiste:empty { display: none; }
.tag-leiste { align-self: start; position: sticky; top: var(--abstand-3); max-height: calc(100vh - var(--abstand-6)); overflow-y: auto; border: 1px solid var(--text); padding: var(--abstand-3); background: var(--grund); }
.leiste-kopf { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.leiste-kopf h2 { margin: 0; }
.leiste-kopf .etikett { grid-column: 1; margin: var(--abstand-1) 0 var(--abstand-3); }
.leiste-kopf .schliessen { grid-column: 2; grid-row: 1; font-size: var(--schrift-gross); line-height: 1; text-decoration: none; color: var(--text); min-width: var(--trefferflaeche); min-height: var(--trefferflaeche); display: inline-flex; align-items: center; justify-content: center; }
.leiste-gruppe h3 { margin-top: var(--abstand-4); }
.eintraege.kacheln { max-width: none; }
table.raster td.tag:focus-within { outline: 2px solid var(--text); outline-offset: -2px; }
.chip .marke-farbe { margin-right: var(--abstand-1); vertical-align: middle; }
@media (max-width: 64rem) {
  .monat-voll:has(.tag-leiste:not(:empty)) { grid-template-columns: 1fr; }
  .tag-leiste { position: static; max-height: none; }
}

/* Zwei Spalten: links Termine, rechts Tasks (Rene über [L.19], 14.11.2026); schmal untereinander */
.planner-spalten { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: var(--abstand-5); align-items: start; }
.planner-spalten.ohne-tasks { grid-template-columns: 1fr; }
.planner-tasks h2 { margin-top: 0; }
.planner-tasks .eintraege { max-width: none; }
.tag-leiste .planner-tasks { margin-top: var(--abstand-5); }
@media (max-width: 56rem) {
  .planner-spalten { grid-template-columns: 1fr; }
}

/* ---------- Ladezustand (htmx) ---------- */
.htmx-indicator { display: none; color: var(--text-2); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.htmx-added { opacity: 0; }
.verlauf > * { transition: opacity var(--zeit) var(--kurve); }

/* ---------- Schmale oder niedrige Bildschirme: Schriftzug waagerecht oben ---------- */
@media (max-width: 40rem), (max-height: 30rem) {
  body { padding-right: 0; }
  .leiste {
    position: static;
    width: auto;
    flex-direction: row;
    gap: var(--abstand-3);
    padding: var(--abstand-2) var(--rand);
    border-bottom: 1px solid var(--linie);
    font-size: var(--schrift-etikett);
  }
  .leiste span { writing-mode: horizontal-tb; overflow: hidden; text-overflow: ellipsis; }
  main { padding: var(--abstand-4) var(--rand) var(--abstand-6); }
  h1 { font-size: 1.5rem; }
  .kopf nav { margin-left: 0; width: 100%; }
  input:not([type=checkbox]):not([type=radio]), textarea, select { width: 100%; }
  input:not([type=checkbox]):not([type=radio])[type=date] { width: 100%; }
  .zahl { width: 8rem !important; }
  /* Breite Tabellen scrollen in sich, die Seite bleibt fest */
  table { display: block; max-width: 100%; overflow-x: auto; }
  /* Keine Silbentrennung in schmalen Spalten; Kennungen wie „A-2“ bleiben ganz */
  table { hyphens: manual; }
  th, td:first-child { white-space: nowrap; }
  .admin-leiste form, .admin-leiste form.inline { margin-left: 0; }
  /* Module auf dem Handy mit weniger Innenrand */
  .modul { padding: var(--abstand-3) var(--abstand-3) var(--abstand-4); }
  .modul > h2:first-child { margin: 0 calc(-1 * var(--abstand-3)) var(--abstand-3); padding: 0 var(--abstand-3) var(--abstand-2); }
  details.modul > summary { margin: 0 calc(-1 * var(--abstand-3)); padding: 0 var(--abstand-3) var(--abstand-2); }
  form.felder.drei { grid-template-columns: 1fr; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  button:active, a.knopf:active { transform: none; }
}

/* Externe KI (Feinentwurf 15, 6.1, 6.2, 6.5): Freigabeansicht, Abzeichen, Schaltfläche */
.extern-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--grund-2);
  border: 1px solid var(--linie);
  padding: var(--abstand-4);
  margin: var(--abstand-4) 0;
}
.extern-text mark { color: var(--text); padding: 0 var(--abstand-1); }
.extern-text mark.ersetzt { background: var(--ton-akzent); }
.extern-text mark.restrisiko { background: var(--ton-warnung); font-weight: 700; box-shadow: inset 0 -2px 0 var(--warnung); }
.abzeichen {
  display: inline-block;
  font-family: var(--schrift-marke);
  font-size: var(--schrift-etikett);
  font-weight: 700;
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--text);
  padding: 0 var(--abstand-1);
}
.extern-knopf { margin-top: var(--abstand-2); }