/* Tresen · Bauteile (AP-14). Nur Tokens aus tokens.css: keine Farbe, kein Abstand, kein Radius als freier Wert.
   Zustände je Bauteil: Ruhe, darüber, Fokus (sichtbar, 2 px Kobalt), aus (mit Grund), Fehler, erledigt.
   tests/test_designsystem.py prüft diese Regeln. */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-wrap: anywhere; scroll-padding-block: var(--s4) var(--s9); }
body { margin: 0; min-width: 0; background: var(--grund); color: var(--tinte); font-family: var(--schrift); font-size: 1rem; line-height: 1.5; }
h1, h2, h3, h4 { font-family: var(--anzeige); line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0; max-width: 68ch; }
a { color: var(--aktion); text-underline-offset: 2px; }
code, .mono { font-family: var(--mono); font-size: 0.86em; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--aktion); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; }
  .knopf, .eingabe, .slot, .wahlkachel, .chip, .karte, .hinweis, .stempel, .marke { border: 1px solid CanvasText; }
  .artmarke::before, .heute__zeile > i { forced-color-adjust: none; }
}

/* Knöpfe: genau ein Hauptknopf je Handlungskontext */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2) var(--s4);
  min-height: 44px; border-radius: var(--r); border: 1px solid var(--aktion); background: var(--aktion); color: var(--aktion-auf);
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; }
.knopf:hover { filter: brightness(1.08); }
.knopf:active { transform: translateY(1px); }
.knopf--zweit { background: var(--flaeche); color: var(--tinte); border-color: var(--control-border); }
.knopf--leise { background: transparent; color: var(--aktion); border-color: transparent; padding-inline: var(--s2); }
.knopf--gefahr { background: var(--fehler); color: var(--fehler-auf); border-color: var(--fehler); }
.knopf--klein { min-height: 32px; padding: var(--s1) var(--s3); font-size: 0.875rem; border-radius: var(--r-s); }
.knopf--breit { display: flex; width: 100%; }
.knopf:disabled, .knopf[aria-disabled="true"] { background: var(--flaeche-2); color: var(--leise); border-color: var(--linie);
  cursor: not-allowed; filter: none; transform: none; }
.knopf__grund { display: block; font-size: 0.8rem; color: var(--leise); margin-top: var(--s1); }

/* Felder */
.feld { display: grid; gap: var(--s1); min-width: 0; }
.feld > label { font-size: 0.875rem; font-weight: 600; color: var(--tinte); }
.feld__pflicht::after { content: " *"; color: var(--fehler); }
.feld__hilfe { font-size: 0.8rem; color: var(--leise); }
.eingabe { font: inherit; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--control-border); border-radius: var(--r-s);
  background: var(--flaeche); color: var(--tinte); width: 100%; }
.eingabe:hover { border-color: var(--tinte); }
.eingabe[aria-invalid="true"] { border-color: var(--fehler); background: var(--fehler-zart); }
.eingabe:disabled { background: var(--flaeche-2); color: var(--leise); cursor: not-allowed; }
.feldfehler { font-size: 0.8rem; color: var(--fehler); font-weight: 600; }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s3); align-items: start; }

/* Auswahl ohne Dropdown: Kacheln und Chips */
.wahlkacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s3); }
.wahlkachel { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); border: 1px solid var(--control-border); border-radius: var(--r);
  background: var(--flaeche); color: var(--tinte); text-align: left; font: inherit; cursor: pointer; }
.wahlkachel:hover { border-color: var(--aktion); }
.wahlkachel[aria-pressed="true"], .wahlkachel[aria-checked="true"] { border: 2px solid var(--aktion); background: var(--aktion-zart); }
.wahlkachel small { color: var(--leise); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: var(--s1); min-height: 32px; padding: var(--s1) var(--s3); border-radius: var(--r-pille);
  border: 1px solid var(--control-border); background: var(--flaeche); color: var(--tinte); font: inherit; font-size: 0.875rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--aktion-zart); border-color: var(--aktion); color: var(--aktion); font-weight: 600; }

/* Stempel und Marken: Zustand in Form und Farbe, nie nur in Farbe */
.stempel { display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); border: 2px solid currentColor; border-radius: var(--r-s);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.stempel--frei { color: var(--frei); }
.stempel--gehalten { color: var(--gehalten); }
.stempel--belegt { color: var(--tinte); }
.stempel--gesperrt { color: var(--gesperrt); border-style: dashed; }
.stempel--fehler { color: var(--fehler); }
.stempel--aktion { color: var(--aktion); }
.marke { display: inline-flex; align-items: center; padding: 0 var(--s2); border-radius: var(--r-pille); font-size: 0.8rem; font-weight: 600; }
.marke--frei { background: var(--frei-zart); color: var(--frei); }
.marke--gehalten { background: var(--gehalten-zart); color: var(--gehalten); }
.marke--fehler { background: var(--fehler-zart); color: var(--fehler); }
.marke--aktion { background: var(--aktion-zart); color: var(--aktion); }

/* Arten: dekorative Farbe nur als Streifen und Punkt, Text in der lesbaren Textfarbe */
.art-miete { --a: var(--a-miete); --a-text: var(--a-miete-text); --a-balken: var(--balken-miete); }
.art-termin { --a: var(--a-termin); --a-text: var(--a-termin-text); --a-balken: var(--balken-termin); }
.art-service { --a: var(--a-service); --a-text: var(--a-service-text); --a-balken: var(--balken-service); }
.art-objekt { --a: var(--a-objekt); --a-text: var(--a-objekt-text); --a-balken: var(--balken-objekt); }
.artmarke { display: inline-flex; align-items: center; gap: var(--s1); font-size: 0.8rem; font-weight: 700; color: var(--a-text); }
.artmarke::before { content: ""; width: var(--s2); height: var(--s2); border-radius: var(--r-s); background: var(--a); }

/* Flächen */
.karte { display: grid; gap: var(--s3); min-width: 0; padding: var(--s4) var(--s5); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); }
.hinweis { padding: var(--s3) var(--s4); border-left: 4px solid var(--etikett); background: var(--flaeche); border-radius: 0 var(--r) var(--r) 0; }
.hinweis--aktion { border-left-color: var(--aktion); }
.hinweis--fehler { border-left-color: var(--fehler); }
.hinweis--gesperrt { border-left-color: var(--gesperrt); }
.nein { font-size: 0.875rem; color: var(--fehler); background: var(--fehler-zart); padding: var(--s1) var(--s2); border-radius: var(--r-s); }

/* Tabellen: dürfen seitlich scrollen, die Seite nicht */
.tabelle-rahmen { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); }
.tabelle-rahmen table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.tabelle-rahmen th { text-align: left; padding: var(--s2) var(--s3); background: var(--flaeche-2); font-size: 0.8rem; color: var(--tinte); }
.tabelle-rahmen td { padding: var(--s2) var(--s3); border-top: 1px solid var(--linie); vertical-align: top; }

/* Heute: eine Zeile, eine Handlung */
.heute { display: grid; }
.heute__zeile { display: grid; grid-template-columns: var(--s1) minmax(0, 1fr) auto; gap: var(--s3); align-items: center;
  padding: var(--s3) 0; border-top: 1px solid var(--linie); }
.heute__zeile:first-child { border-top: 0; }
.heute__zeile > i { align-self: stretch; border-radius: var(--r-s); background: var(--a); }
.heute__zeile b { display: block; }
.heute__zeile small { color: var(--leise); }
.heute__zeile--ueberfaellig > i { background: var(--fehler); }
.heute__zeile--erledigt { color: var(--leise); }
.heute__zeile--erledigt b { text-decoration: line-through; }

/* Belegungsplan */
.balken { display: block; padding: var(--s1) var(--s2); border-radius: var(--r-s); background: var(--a-balken, var(--aktion)); color: var(--balken-auf);
  font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balken--gehalten { background: var(--etikett); color: var(--etikett-auf); }
.balken--gesperrt { background: repeating-linear-gradient(45deg, var(--flaeche-2) 0 var(--s2), var(--flaeche) 0 var(--s4)); color: var(--tinte);
  border: 1px dashed var(--gesperrt); }

/* Kasse und Belege */
.preisschild { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3); background: var(--etikett); color: var(--etikett-auf);
  border-radius: var(--r-s); font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.beleg { display: grid; gap: var(--s2); padding: var(--s4); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); }
.beleg__lochung { border-top: 2px dashed var(--linie); margin-inline: calc(-1 * var(--s4)); }
.beleg__nr { font-family: var(--mono); font-size: 0.8rem; color: var(--leise); }
.zeitfenster { display: flex; flex-wrap: wrap; gap: var(--s2); }
.slot { min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--control-border); border-radius: var(--r-s); background: var(--flaeche);
  color: var(--tinte); font: inherit; font-family: var(--mono); font-size: 0.875rem; cursor: pointer; }
.slot[aria-pressed="true"] { border: 2px solid var(--aktion); background: var(--aktion-zart); color: var(--aktion); font-weight: 600; }
.slot:disabled { background: var(--flaeche-2); color: var(--leise); text-decoration: line-through; cursor: not-allowed; }

/* Kategorien (AP-19, D-UI-208): Baum links, gewählte Kategorie rechts; auf dem Handy untereinander */
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.formular { display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--linie); }
.formular fieldset { border: 0; padding: 0; margin: 0; }
.kategorien { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 60rem) { .kategorien { grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr); } }
.baum { list-style: none; margin: 0; padding: 0; display: grid; }
.baum__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); min-height: 44px;
  padding: var(--s2) var(--s3); border-top: 1px solid var(--linie); cursor: pointer; }
.baum__zeile:first-child { border-top: 0; }
.baum__zeile a { color: var(--tinte); text-decoration: none; }
.baum__zeile small { color: var(--leise); font-variant-numeric: tabular-nums; }
.baum__zeile--t2 { padding-left: var(--s6); }
.baum__zeile--t3 { padding-left: var(--s8); }
.baum__zeile:hover { background: var(--flaeche-2); }
.baum__zeile[aria-selected="true"] { background: var(--aktion-zart); border-radius: var(--r-s); }
.baum__zeile[aria-selected="true"] a { color: var(--aktion); }
.papierkorb { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.papierkorb li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.papierkorb small { color: var(--leise); }
.reihe .eingabe { width: auto; }
.reihe form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.formular > .knopf { justify-self: start; }
.formular legend { padding: 0; margin-bottom: var(--s1); font-weight: 600; }
.rollenwahl { grid-column: 1 / -1; display: grid; gap: var(--s3); }
.rollenwahl .wahlkachel { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.rollenwahl__weitere { display: grid; gap: var(--s3); }
.rollenwahl__weitere > summary { min-height: 44px; display: flex; align-items: center; color: var(--aktion); cursor: pointer; }
.rollenwahl__weitere[open] { grid-column: 1 / -1; }

/* Tabellen als Karten auf dem Handy (Bestand): jede Zeile ein Block, jeder Wert mit seiner Spaltenbezeichnung */
@media (max-width: 40rem) {
  .tabelle-rahmen--karten { overflow-x: visible; border: 0; background: transparent; }
  .tabelle-rahmen--karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle-rahmen--karten tr { display: grid; gap: var(--s1); padding: var(--s3); margin-bottom: var(--s3);
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); }
  .tabelle-rahmen--karten td { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s2); padding: 0;
    border: 0; }
  .tabelle-rahmen--karten td[data-titel]::before { content: attr(data-titel); color: var(--leise); font-size: 0.8rem; }
}

/* Heute (AP-35): Kennzahlen des Tages, Filter, Knöpfe einer Zeile */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s3); }
.kennzahl { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); }
.kennzahl small { font-size: 0.8rem; color: var(--leise); }
.kennzahl b { font-family: var(--schrift); font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.heute__filter { align-items: end; }
.heute__knoepfe { display: flex; flex-wrap: nowrap; align-items: center; justify-content: end; gap: var(--s2); }
.heute__mehr > summary { list-style: none; }
.heute__mehr > summary::-webkit-details-marker { display: none; }
.heute__mehr[open] { display: grid; gap: var(--s2); width: 100%; justify-items: end; }
.heute__mehr[open] > .heute__liste { justify-self: stretch; }
.heute__schritt { display: grid; gap: var(--s1); justify-items: end; text-align: right; max-width: 18rem; }
.heute__schritt .feld { justify-self: stretch; text-align: left; }
.heute__liste { margin: 0; padding-left: var(--s4); font-size: 0.875rem; }
@media (max-width: 40rem) { .heute__zeile { grid-template-columns: var(--s1) minmax(0, 1fr); }
  .heute__knoepfe { grid-column: 2; justify-content: start; max-width: none; }
  .heute__schritt { justify-items: start; text-align: left; } }
/* Angebote (AP-34): Liste mit Filter, Anlegeseite mit Artkacheln, Bearbeiten mit sechs Reitern und Prüfliste */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.filter { display: grid; gap: var(--s3); justify-items: start; }
.blaettern { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-block: var(--s4); }
.filter__suche { display: flex; gap: var(--s2); width: 100%; max-width: 32rem; }
.filter__suche .eingabe { flex: 1; min-width: 0; }
.filter__mehr { width: 100%; }
.filter__mehr summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--aktion); }
.filter__felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s3); align-items: end;
  padding-top: var(--s2); }
.filter__schalter { display: flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: 0.875rem; }
.mehrfach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.mehrfach .eingabe { width: auto; }
.wahlkachel { position: relative; text-decoration: none; }
.wahlkachel input { position: absolute; opacity: 0; pointer-events: none; }
.wahlkachel:has(input:checked) { border: 2px solid var(--aktion); background: var(--aktion-zart); }
.wahlkachel:focus-within { outline: 2px solid var(--aktion); outline-offset: 2px; }
.formular-neu { max-width: 48rem; }
.angebot { display: grid; gap: var(--s5); align-items: start; }
.angebot__formular { display: grid; gap: var(--s4); min-width: 0; }
.angebot__felder { display: grid; gap: var(--s4); }
@media (min-width: 64rem) {
  .angebot { grid-template-columns: minmax(0, 1fr) 20rem; }
  .pruefliste { position: sticky; top: var(--s4); }
}
/* position: relative hält den Text für Vorleser (.sr, absolut) im Rollbereich, sonst rollte die ganze Seite. */
.reiter { position: relative; display: flex; gap: var(--s1); overflow-x: auto; border-bottom: 1px solid var(--linie); }
/* Auf dem Handy wischbar, ab Tablet umbrechend: Alle sechs Reiter bleiben sichtbar. */
@media (min-width: 40rem) { .reiter { flex-wrap: wrap; overflow-x: visible; } }
.reiter__knopf { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; padding: 0 var(--s2); color: var(--tinte);
  text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; }
.reiter__knopf[aria-selected="true"] { color: var(--aktion); border-bottom-color: var(--aktion); }
/* Ohne Skript stehen alle Reiter untereinander; mit Skript ist genau einer offen. .karte setzt display, darum hier. */
.reiter__inhalt[hidden] { display: none; }
.reiter__punkt { display: inline-block; width: var(--s2); height: var(--s2); border-radius: var(--r-pille); background: var(--fehler); }
.feld__titel { font-size: 0.875rem; font-weight: 600; color: var(--tinte); }
.feld__stufe { font-size: 0.75rem; color: var(--leise); }
.feld__stufe--offen { color: var(--fehler); font-weight: 600; }
.feld__zusatz { display: flex; align-items: center; gap: var(--s2); font-size: 0.875rem; }
.teile { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s3); }
.betrag, .zahl, .dauer, .adresse { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.betrag .eingabe, .zahl .eingabe { max-width: 12rem; }
.dauer .eingabe { max-width: 8rem; }
.dauer .eingabe--einheit, .eingabe--einheit { width: auto; }
.adresse .eingabe { flex: 1; min-width: 0; }
.eintraege td { min-width: 9rem; }
.folgen { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s2); }
.folgen-box { border-left: 4px solid var(--aktion); }
.konflikt { border-left: 4px solid var(--fehler); }
/* Ihre Eingabe und das Gespeicherte stehen gleich breit nebeneinander; lange Sätze brechen um, statt die Karte zu sprengen. */
.konflikt table { table-layout: fixed; }
.konflikt th:first-child { inline-size: 9rem; }
.buero__inhalt .konflikt .tabelle-rahmen td { white-space: normal; vertical-align: top; }
.fassung { font-size: 0.8rem; color: var(--leise); }
.pruefliste form { display: grid; gap: var(--s1); justify-items: start; }
.pruefliste small { color: var(--leise); }
.pruefliste__punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pruefliste__punkte li { position: relative; padding-left: var(--s5); }
.pruefliste__punkte li::before { content: "✓"; position: absolute; left: 0; color: var(--frei); font-weight: 700; }
.pruefliste__punkte li.offen::before { content: "✗"; color: var(--fehler); }
/* AP-36: dichter, tastaturbedienbarer Belegungsplan. */
.ansichten, .legende, .folgefunktionen { display: flex; flex-wrap: wrap; gap: var(--s2); }
.plan { position: relative; overflow: auto; border: 1px solid var(--linie); border-radius: var(--r); }
.planzeile { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(36rem, 1fr); min-height: 5rem; border-block-end: 1px solid var(--linie); }
.planzeile > header { position: sticky; left: 0; z-index: 2; display: grid; padding: var(--s3); background: var(--flaeche); }
.planinhalt { min-width: 0; }
.planwerkzeuge { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--s2); padding: var(--s2); }
.planwerkzeuge:empty { display: none; }
.planbahn { --spur-hoehe: 5rem; position: relative; min-height: calc(var(--spuren, 1) * var(--spur-hoehe) + var(--s4)); padding: var(--s2); background-image: linear-gradient(90deg, transparent 95%, var(--linie) 95%); background-size: 5rem 100%; }
.planbahn .balken { position: absolute; inset-block-start: calc(var(--s2) + var(--spur, 0) * var(--spur-hoehe)); z-index: 1; min-width: 2rem; max-width: 100%; max-height: calc(var(--spur-hoehe) - var(--s2)); overflow: hidden; padding: var(--s2); border: 2px solid transparent; border-radius: var(--r-s); cursor: pointer; }
.planbahn .balken--gehalten { background: var(--etikett); color: var(--etikett-auf); }
.planbahn .balken--gesperrt { background-color: var(--flaeche); background-image: repeating-linear-gradient(135deg, var(--flaeche-2) 0 6px, var(--linie) 6px 9px); color: var(--tinte); }
.planzeile--gesperrt .planbahn { background-color: var(--flaeche); background-image: repeating-linear-gradient(135deg, var(--flaeche-2) 0 6px, var(--linie) 6px 9px); }
.legende .status::before { content: ""; display: inline-block; inline-size: 1rem; block-size: 0.75rem; margin-inline-end: var(--s1); vertical-align: -0.1em; border-radius: var(--r-s); }
.legende .gehalten::before { background: var(--etikett); }
.legende .belegt::before { background: var(--a-balken, var(--aktion)); }
.legende .gesperrt::before { background-color: var(--flaeche); background-image: repeating-linear-gradient(135deg, var(--flaeche-2) 0 3px, var(--linie) 3px 5px); border: 1px dashed var(--gesperrt); }
.planluecke { position: absolute; inset-block: var(--s2); z-index: 0; min-width: 2rem; overflow: hidden; padding: var(--s1);
  border: 1px dashed var(--linie); border-radius: var(--r-s); color: var(--aktion); background: color-mix(in srgb, var(--aktion-zart) 35%, transparent);
  font-size: 0.75rem; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.planluecke:hover, .planluecke:focus-visible { z-index: 2; border-color: var(--aktion); background: var(--aktion-zart); outline: 2px solid var(--aktion); }
.balken.konflikt { border-color: var(--fehler); }
.balken:focus-visible { outline: 3px solid var(--aktion); outline-offset: 2px; }
.balken > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken em { padding-inline: var(--s1); border-radius: var(--r-s); background: var(--fehler); color: var(--fehler-auf);
  font-style: normal; font-weight: 700; }
.sperrformular { position: relative; z-index: 3; }
.sperrformular form { display: grid; gap: var(--s2); min-width: 18rem; padding: var(--s2); background: var(--flaeche); }
.jetzt { position: absolute; inset-block: 0; z-index: 2; width: 2px; background: var(--fehler); pointer-events: none; }
.ressourcensperre { padding: var(--s1) var(--s2); border: 1px solid var(--fehler); border-radius: var(--r-s); background: var(--fehler-zart); color: var(--fehler); font-weight: 700; }
@media (max-width: 48rem) { .planzeile { grid-template-columns: 8rem minmax(30rem, 1fr); } }

/* Vorgangsakte (AP-37): Positionen mit Art-Farbe am Rand, Schritte darunter, Verlauf als Zeitleiste. */
.akte { display: grid; gap: var(--s3); min-width: 0; }
.karte__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.karte__kopf > h2 { margin: 0; }
.schaden { display: grid; gap: var(--s3); padding-block: var(--s4); border-block-start: 1px solid var(--linie); }
.schaden__kopf { display: grid; gap: var(--s1); }
.schaden__kopf h3, .schaden__kopf p { margin: 0; }
.schaden__zahlen { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s4); margin: 0; }
.schaden__zahlen dt { color: var(--leise); }
.schaden__zahlen dd { margin: 0; font-variant-numeric: tabular-nums; }
.schaden__fotos { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.schaden__fotos img { inline-size: 7rem; block-size: 5.25rem; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--linie); }
.schaden__schritte { display: grid; gap: var(--s3); margin: 0; padding-inline-start: var(--s5); }
.schaden__schritte > li { display: grid; gap: var(--s2); }
.schaden__schritte h4 { margin: 0; font-size: 0.95rem; }
.akte__position { display: grid; gap: var(--s2); padding-block: var(--s3); border-block-start: 1px solid var(--linie); }
.akte__position:first-of-type { border-block-start: 0; padding-block-start: 0; }
.akte__kopf { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.akte__kopf h3 { margin: 0; }
.akte__schritte { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-start; }
.akte__plaetze { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.akte__plaetze li { display: grid; gap: var(--s1); }
.akte__summe { display: flex; justify-content: flex-end; gap: var(--s2); margin: 0; }
.herleitung { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.herleitung td { padding: var(--s1) 0; border-block-end: 1px solid var(--linie); }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.verlauf__eintrag { display: grid; gap: var(--s1); padding-inline-start: var(--s2); border-inline-start: 3px solid var(--linie); overflow-wrap: anywhere; }
.verlauf__eintrag small { color: var(--leise); }
.verlauf__eintrag--notiz { border-inline-start-color: var(--gehalten); }
.verlauf__eintrag--nachricht { border-inline-start-color: var(--aktion); }
.betragszelle { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ein Formular mitten im Text (Zurück-Knöpfe in Regeln und Gutscheinen); vorher ein style-Attribut, das die
   Sicherheitsrichtlinie blockierte. */
.formular-im-text { display: inline; }
.akte__stand { font-weight: 600; margin: 0; }
.akte__schritte .heute__schritt { justify-items: start; text-align: start; }
/* Kontaktakte (AP-38): kurze Listen ohne Aufzählungszeichen. */
.kontakt__liste, .kontakt__erreichbar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); overflow-wrap: anywhere; }
/* Website-Editor (AP-45): Blöcke links, Prüfen und Veröffentlichen rechts; auf dem Handy untereinander */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: var(--s4); align-items: start; }
.editor__flaeche, .editor__seite { display: grid; gap: var(--s3); min-width: 0; }
.editor__bloecke { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.editor__block { gap: var(--s2); }
.editor__block[draggable="true"] { cursor: grab; }
.editor__block--gezogen { opacity: 0.6; outline: 2px dashed var(--aktion); outline-offset: 2px; }
.editor__formular { display: grid; gap: var(--s3); }
.editor__versionen { display: grid; gap: var(--s2); margin: 0; padding-left: var(--s4); font-size: 0.875rem; }
.editor__link { overflow-wrap: anywhere; }
@media (max-width: 56rem) { .editor { grid-template-columns: minmax(0, 1fr); } }

/* Bilder (AP-45 Teil 3): Mediathek als Raster, Fokuspunkt im Bild, die drei Ausschnitte nebeneinander. */
.medien { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s3); list-style: none; padding: 0; margin: 0; }
.medien__karte { display: grid; gap: var(--s2); padding: var(--s2); }
.medien__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-s); background: var(--flaeche-2); }
.medien__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medien__platz { display: grid; place-items: center; height: 100%; color: var(--leise); font-size: 0.9rem; }
.medien__text { display: grid; gap: var(--s1); min-width: 0; overflow-wrap: anywhere; }
.medium, .medium__seite { display: grid; gap: var(--s3); }
.fokus { position: relative; cursor: crosshair; max-width: 100%; }
.fokus__bild { display: block; width: 100%; height: auto; border-radius: var(--r-s); }
.fokus__punkt { position: absolute; width: 1.5rem; height: 1.5rem; transform: translate(-50%, -50%); border-radius: var(--r-pille);
  border: 3px solid var(--flaeche); box-shadow: 0 0 0 2px var(--aktion); pointer-events: none; }
.medium__formate { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s2); align-items: end; }
.medium__formate figure { margin: 0; display: grid; gap: var(--s1); }
.medium__formate img { width: 100%; height: auto; border-radius: var(--r-s); }
.medium__formate figcaption { color: var(--leise); font-size: 0.8rem; }
.eingabe--kurz { width: 6rem; }
.bildwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--s2); }
.bildwahl__eintrag { display: grid; gap: var(--s1); justify-items: start; font-size: 0.8rem; overflow-wrap: anywhere; cursor: pointer; }
.bildwahl__eintrag img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--r-s); }
.bildwahl__eintrag:has(input:checked) img { outline: 3px solid var(--aktion); outline-offset: 2px; }
/* Beiträge (AP-45 Teil 4): Formular als Gruppe (gesperrt, solange nicht Entwurf), Teilen-Vorschau wie ein Link. */
.felder-gruppe { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s3); min-width: 0; }
.teilen { display: grid; border: 1px solid var(--linie); border-radius: var(--r-s); overflow: hidden; background: var(--flaeche); }
.teilen__bild { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.teilen__bild--leer { display: grid; place-items: center; padding: var(--s3); color: var(--leise); font-size: 0.85rem; background: var(--flaeche-2); }
.teilen__text { display: grid; gap: var(--s1); padding: var(--s2) var(--s3); overflow-wrap: anywhere; }
.teilen__text small { color: var(--leise); text-transform: lowercase; }
.haken { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; }
.haken input { margin-top: var(--s1); flex: none; }
/* Buchung im Büro (AP-37 Teil 2): zwei Schritte untereinander, Treffer als Liste zum Antippen. */
.buchen__schritt { display: grid; gap: var(--s3); }
.buchen__formular { margin-top: var(--s4); }
.buchen__schritt .teile { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s3); }
.buchen__schritt h2 { margin: 0; }
.buchen__treffer { display: grid; gap: var(--s2); border: 0; padding: 0; margin: 0; }
/* Übergabe am Handy (AP-41): Stücke untereinander, großer Abschlussknopf, Unterschriftsfläche in voller Breite. */
.uebergabe { display: grid; gap: var(--s3); }
.uebergabe__stueck { display: grid; gap: var(--s2); }
/* Eine Karte als fieldset: Die Überschrift steht in der Karte statt auf ihrem Rand (B50). */
fieldset.karte > legend { float: inline-start; inline-size: 100%; padding: 0; margin: 0 0 var(--s2); font-size: 1.125rem; font-weight: 700; }
fieldset.karte > legend + * { clear: both; }
.uebergabe__geld { display: grid; gap: var(--s2); }
.uebergabe__geld p { margin: 0; }
.uebergabe__knopf { justify-self: stretch; }
.uebergabe__checkliste { display: grid; gap: var(--s2); border: 1px solid var(--linie); border-radius: var(--r); padding: var(--s3); }
.uebergabe__checkliste legend { font-weight: 600; padding-inline: var(--s1); }
.uebergabe__punkt { display: grid; gap: var(--s1); padding-block: var(--s2); border-block-start: 1px solid var(--linie); }
.uebergabe__punkt:first-of-type { border-block-start: 0; }
.uebergabe__punkt p { margin: 0; }
/* Notiz und Foto erst, wenn ein Mangel gewählt ist oder der Punkt ein Foto verlangt: kurz am Handy. */
.uebergabe__punkt:not(.uebergabe__punkt--foto):not(:has(input[value="mangel"]:checked)) .uebergabe__mangel { display: none; }
.uebergabe__punkt small { color: var(--leise); margin-inline-start: var(--s1); }
.checkliste-punkte th:not(:first-child), .checkliste-punkte td:not(:first-child) { inline-size: 5rem; text-align: center; }
.checkliste-punkte td:first-child .eingabe { inline-size: 100%; }
.unterschrift__flaeche { width: 100%; height: auto; aspect-ratio: 3 / 1; border: 1px dashed var(--linie); border-radius: var(--r-s); background: var(--flaeche); touch-action: none; }

/* Angebotsmaske als Bausteinkasten (AP-94): Pflicht zuerst, Freiwilliges eingeklappt, Bedingtes nur bei Bedarf. */
[data-nur-wenn][hidden] { display: none; }
.feld__stufe--frei { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.feld__stufe--online, .feld__stufe--direkt, .feld__stufe--bedingt { justify-self: start; padding: 0 var(--s2); border-radius: var(--r-pille); background: var(--aktion-zart); }
.chips--wahl .chip { cursor: pointer; }
.chips--wahl .chip:has(input:checked) { background: var(--aktion-zart); border-color: var(--aktion); color: var(--aktion); font-weight: 600; }
.chips--wahl .chip:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.weitere { margin-top: var(--s4); border-top: 1px solid var(--linie); padding-top: var(--s3); }
.weitere > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.weitere[open] > summary { margin-bottom: var(--s3); }
.kommt-spaeter { margin-top: var(--s4); }
.bildwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s3); }
.bildwahl__bild { display: grid; gap: var(--s1); }
.bildwahl__wahl { display: grid; gap: var(--s1); cursor: pointer; }
.bildwahl__wahl img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); border: 2px solid transparent; }
.bildwahl__wahl:has(input:checked) img { border-color: var(--aktion); }
.bildwahl__wahl span { font-size: 0.8rem; overflow-wrap: anywhere; }
.bildwahl__titel { font-size: 0.8rem; }
.wirkt { margin-top: var(--s4); display: grid; gap: var(--s2); }
.wirkt__liste { display: grid; gap: var(--s2); padding-left: var(--s4); }
/* Unterreiter eines Bereichs (Angebote · Kategorien · Bestand · Regeln). */
.ausstattung { display: grid; gap: var(--s3); border: 1px solid var(--linie); border-radius: var(--r-s); padding: var(--s3); margin: 0 0 var(--s3); }
.ausstattung > legend { font-weight: 600; padding: 0 var(--s1); }
.chip[hidden] { display: none; }
.eigener-wert { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.eigener-wert label { font-size: 0.85rem; color: var(--aktion); }
.eingabe--mittel { max-width: 16rem; }
.eingabe--suche { max-width: 20rem; }

/* Kalender (AP-95, nach VERK): Tag als Liste, Woche und Monat als Raster; auf dem Telefon eine Tagesliste. */
.kal-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.kal-ansicht { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--r-pille); overflow: hidden; }
.kal-ansicht a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); color: var(--tinte); text-decoration: none; }
.kal-ansicht a[aria-current="page"] { background: var(--aktion); color: var(--aktion-auf); font-weight: 600; }
.kal-blaettern { display: flex; flex-wrap: wrap; gap: var(--s1); }
.kal-titel { font-weight: 600; color: var(--leise); }
.kal-filter > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.kal-filter form { align-items: flex-end; }
.kal-raster { width: 100%; table-layout: fixed; border-collapse: collapse; }
.kal-raster th { padding: var(--s2); font-size: 0.8rem; color: var(--leise); text-align: left; border-bottom: 1px solid var(--linie); }
.kal-tag { vertical-align: top; border: 1px solid var(--linie); padding: var(--s1); height: 7rem; background: var(--flaeche); }
.kal-raster--woche .kal-tag { height: 18rem; }
.kal-tag--fremd { background: var(--grund); }
.kal-tag--heute { box-shadow: inset 0 3px 0 var(--aktion); }
.kal-tag__zahl { display: inline-flex; gap: var(--s1); align-items: baseline; min-height: 32px; padding: var(--s1); color: var(--tinte); text-decoration: none; font-weight: 600; }
.kal-tag--heute .kal-tag__zahl { color: var(--aktion); }
.kal-tag__wochentag { display: none; font-weight: 400; color: var(--leise); }
.kal-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.kal-eintrag { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s1); padding: var(--s1); border-radius: var(--r-s); border-left: 3px solid var(--a, var(--aktion)); background: var(--flaeche-2); color: var(--tinte); text-decoration: none; font-size: 0.8rem; line-height: 1.3; overflow: hidden; }
.kal-eintrag:hover, .kal-eintrag:focus-visible { background: var(--aktion-zart); }
.kal-eintrag .kal-zeit { color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kal-eintrag .kal-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-eintrag .kal-art { grid-column: 1 / -1; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-eintrag--termin { --a: var(--a-termin); }
.kal-eintrag--miete { --a: var(--a-miete); }
.kal-eintrag--service { --a: var(--a-service, var(--aktion)); }
.kal-eintrag--objekt { --a: var(--a-objekt, var(--aktion)); }
.kal-eintrag--sperre { --a: var(--gesperrt); background: repeating-linear-gradient(135deg, var(--flaeche-2) 0 6px, var(--grund) 6px 12px); }
.kal-eintrag--abgesagt .kal-name { text-decoration: line-through; }
.kal-mehr a { font-size: 0.8rem; padding: 0 var(--s1); }
.kal-liste--lang { gap: var(--s2); }
.kal-liste--lang .kal-eintrag { font-size: 0.95rem; padding: var(--s2) var(--s3); }
.kal-neu__formulare { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
@media (max-width: 47.99rem) {
  .kal-raster, .kal-raster tbody, .kal-raster tr { display: block; }
  .kal-raster thead { display: none; }
  .kal-tag { display: block; height: auto; border-width: 0 0 1px; padding: var(--s2) 0; }
  .kal-raster--woche .kal-tag { height: auto; }
  .kal-tag--fremd, .kal-tag--leer { display: none; }
  .kal-tag__wochentag { display: inline; }
}

/* Finanzen (AP-96): Einnahmen und Ausgaben klar unterscheidbar, auch ohne Farbe (Vorzeichen). */
.betrag--einnahme { color: var(--frei); font-variant-numeric: tabular-nums; }
.betrag--ausgabe { color: var(--tinte); font-variant-numeric: tabular-nums; }
.balkenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.balkenliste li { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr auto; gap: var(--s2); align-items: center; }
.balkenliste__balken { width: 100%; height: 8px; }
.reihe--oben { align-items: flex-start; }
form.inline { display: inline; }

/* Akte eines Stücks (AP-97): der Lebenslauf als ruhige Zeitleiste. */
.lebenslauf { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); border-left: 2px solid var(--linie); }
.lebenslauf li { padding-left: var(--s3); }
.lebenslauf time { color: var(--leise); font-variant-numeric: tabular-nums; margin-right: var(--s2); }
/* Gestaltung der Website (AP-99): fünf Karten mit einer echten Probe; die Werte kommen je Karte aus
   /website/gestaltung/vorschau.css, darum gilt jede Probe nur in ihrer eigenen Gestaltung. */
.gestaltung { display: grid; gap: var(--s5); }
.stilwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s3); }
/* Ein Raster, keine Flexzeile: sonst stand die Probe gequetscht neben dem Namen, Wörter brachen mitten im Wort
   (AP-102 Befund 28). In der schmalen Leiste setzt .stilwahl--leiste zwei Spalten. */
.stilwahl .stilwahl__karte { display: grid; align-content: start; gap: var(--s3); padding: var(--s3); }
.stilwahl__name { display: grid; gap: var(--s1); }
.stilprobe { display: grid; gap: var(--s2); padding: var(--s3); background: var(--grund); color: var(--tinte);
  font-family: var(--schrift); border: 1px solid var(--linie); border-radius: var(--r); }
.stilprobe__kopf { display: flex; justify-content: space-between; gap: var(--s2); font-size: 0.75rem; color: var(--leise); }
.stilprobe__kopf b { color: var(--tinte); font-family: var(--anzeige); }
.stilprobe__titel { font-family: var(--anzeige); font-size: 1.35rem; font-weight: 700; line-height: 1.15; }
.stilprobe__text { font-size: 0.8rem; color: var(--leise); }
.stilprobe__karten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.stilprobe__karten span { block-size: 2.5rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-s); }
.stilprobe__knopf { justify-self: start; padding: var(--s1) var(--s3); background: var(--aktion); color: var(--aktion-auf);
  border-radius: var(--r-s); font-size: 0.8rem; font-weight: 600; }
.stilprobe--nacht .stilprobe__titel, .stilprobe--weite .stilprobe__titel { font-weight: 800; }
.stilprobe--weite .stilprobe__titel { font-size: 1.6rem; letter-spacing: -0.02em; text-transform: uppercase; }
.stilprobe--leise .stilprobe__titel { font-size: 1rem; font-weight: 600; }
.stilprobe--marmor .stilprobe__titel { font-weight: 400; }
/* Website-Editor als Werkbank (AP-99, nach VERK Studio): links die Editorleiste mit aufklappbaren Teilen, rechts
   die Bühne mit der ganzen Website in Desktopbreite, auf den Platz verkleinert. Der Editor nutzt die volle Breite
   neben der Seitenleiste des Büros. */
.inhalt:has(.editorlayout) { max-width: none; }
.editorlayout { display: grid; gap: var(--s5); align-items: start; }
.editorleiste { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.editorleiste > * { flex-shrink: 0; }
.leistenstand { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-l); }
.leistenstand__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.leistenstand h1 { margin: 0; font-size: 1.35rem; }
.leistenstand__aktion { display: grid; }
.editor-speicherstand { margin: 0; font-size: 0.85rem; color: var(--leise); }
.editor-speicherstand[data-stand="fehler"] { color: var(--fehler); font-weight: 600; }
.leistenteil { margin: 0; overflow: hidden; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); }
.leistenkopf { display: flex; align-items: center; gap: var(--s2); min-height: 44px; margin: 0; padding: 0 var(--s4); cursor: pointer;
  font-size: 1rem; font-weight: 700; list-style: none; }
.leistenkopf::-webkit-details-marker { display: none; }
.leistenkopf::after { content: "+"; flex: none; color: var(--leise); font-weight: 400; font-size: 1.25rem; }
.leistenteil[open] > .leistenkopf::after { content: "−"; }
.leistenteil--fest > .leistenkopf { cursor: default; }
.leistenteil--fest > .leistenkopf::after { content: none; }
.leistenteil[open] > .leistenkopf, .leistenteil--fest > .leistenkopf { border-bottom: 1px solid var(--linie); }
.leistenkopf:hover { background: var(--flaeche-2); }
.leistentitel { flex: 1; min-width: 0; }
.leistendazu { flex: none; font-size: 0.8rem; font-weight: 400; color: var(--leise); max-width: 9rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.leisteninhalt { display: grid; gap: var(--s3); padding: var(--s3) var(--s4) var(--s4); }
.leistenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.leistenzeile { border-radius: var(--r-s); }
.leistenzeile.hier { background: var(--aktion-zart); }
.leistenweg { display: grid; gap: var(--s1); min-height: 44px; padding: var(--s2); border-radius: var(--r-s); color: var(--tinte);
  text-decoration: none; }
.leistenweg:hover { background: var(--flaeche-2); }
.leistenzeile.hier .leistenweg > span { font-weight: 700; color: var(--aktion); }
.leistenweg .technik { font-size: 0.75rem; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seiten-neu { display: grid; gap: var(--s2); }
.navliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.navzeile { display: grid; gap: var(--s1); padding: var(--s2); border: 1px solid var(--linie); border-radius: var(--r); }
.navzeile form { margin: 0; flex-wrap: nowrap; }
.navwort { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stilwahl--leiste { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.stilwahl--leiste .stilwahl__karte { grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: var(--s2); padding: var(--s2); }
.stilwahl--leiste .stilprobe { padding: var(--s2); gap: var(--s1); overflow: hidden; }
.stilwahl--leiste .stilprobe__titel { font-size: 1.1rem; }
/* In der schmalen Probe brach „Knopf“ sonst Buchstabe für Buchstabe um (AP-102 Befund 27). */
.stilwahl--leiste .stilprobe__knopf { font-size: 0.7rem; padding: var(--s1) var(--s2); white-space: nowrap; }
.google-vorschau { display: grid; gap: var(--s1); padding: var(--s3); background: var(--flaeche-2); border-radius: var(--r); }
.google-vorschau p { margin: 0; }
.google-vorschau__titel { color: var(--aktion); font-size: 1.05rem; }
.google-vorschau__text { color: var(--leise); font-size: 0.85rem; }
.editorspalte { display: grid; gap: var(--s3); min-width: 0; }
.editorband { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); font-size: 0.8rem; color: var(--leise); }
.editorband .marke { display: inline-flex; align-items: center; gap: var(--s1); }
.editorband .marke::before { content: ""; inline-size: var(--s3); block-size: var(--s3); border-radius: var(--r-s); }
.editorband .bearbeitbar::before { border: 1px dashed var(--aktion); background: var(--aktion-zart); }
.editorband .einfuegepunkt::before { border: 1px dashed var(--aktion); border-radius: var(--r-pille); }
.editorband .werkzeug::before { background: var(--tinte); }
.editorband__geraet { display: inline-flex; gap: var(--s1); margin-inline-start: auto; }
.editorband__geraet [aria-pressed="true"] { background: var(--aktion-zart); color: var(--aktion); }
.editorbuehne { position: relative; overflow: hidden; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); }
.werkbank__leinwand { display: block; inline-size: 100%; block-size: calc(100vh - 9rem); min-block-size: 32rem; border: 0;
  transform-origin: top left; background: var(--flaeche); }
.leer-buehne { display: grid; gap: var(--s2); }
@media (min-width: 64rem) {
  .editorlayout { grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); }
  .editorleiste { position: sticky; inset-block-start: var(--s4); max-block-size: calc(100vh - 6rem); overflow-y: auto;
    overscroll-behavior: contain; padding-inline-end: var(--s1); }
}
.einfuegen { inline-size: min(56rem, calc(100vw - var(--s6))); max-block-size: 85vh; padding: var(--s5); border: 1px solid var(--linie);
  border-radius: var(--r-l); background: var(--flaeche); color: var(--tinte); }
.einfuegen::backdrop { background: var(--tinte); opacity: 0.4; }
.einfuegen[open] { display: grid; gap: var(--s4); }
.einfuegen__kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.einfuegen__kopf h2, .einfuegen__gruppe h3 { margin: 0; }
.einfuegen__gruppe { display: grid; gap: var(--s2); }
.einfuegen__kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s2); }
.einfuegen__kacheln form { display: grid; margin: 0; }
.einfuegen__kachel { display: grid; gap: var(--s1); align-content: start; min-height: 44px; padding: var(--s3); text-align: start;
  font: inherit; color: var(--tinte); background: var(--grund); border: 1px solid var(--control-border); border-radius: var(--r);
  text-decoration: none; cursor: pointer; }
.einfuegen__kachel:hover, .einfuegen__kachel:focus-visible { border-color: var(--aktion); background: var(--aktion-zart); }
.einfuegen__kachel small { color: var(--leise); }
.editorband__seite { inline-size: 100%; margin: 0; font-size: 1.1rem; color: var(--tinte); }
.editorband__seite code { font-size: 0.8rem; color: var(--leise); }
/* Filter über Listen (AP-101): Felder nebeneinander, am Telefon untereinander; der Knopf steht auf Feldhöhe. */
.filterleiste { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); }
.filterleiste .feld { min-width: 10rem; }
.filterleiste .feld:first-child { flex: 1 1 16rem; }
/* Globale Suche (AP-101): ein Feld in der Kopfzeile, Treffer je Bereich als Karten. */
.buero-leiste__suche .eingabe { inline-size: 100%; }
.suchergebnis { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s4); align-items: start; }
.trefferliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.trefferliste a { display: grid; gap: var(--s1); min-height: 44px; padding: var(--s2) var(--s3); border-radius: var(--r-s);
  color: var(--tinte); text-decoration: none; }
.trefferliste a:hover, .trefferliste a:focus-visible { background: var(--aktion-zart); }
.trefferliste small { color: var(--leise); }
/* Standorte in den Einstellungen (AP-101): je Standort aufklappbar, darunter das Anlegen. */
.standortliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.standortliste details { padding: var(--s2) var(--s3); border: 1px solid var(--linie); border-radius: var(--r); }
.standortliste summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.dokumente { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.dokumente li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); min-height: 44px; }
.dokumente small { color: var(--leise); }
.dokumente { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.dokumente li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); min-height: 44px; }
.dokumente small { color: var(--leise); }
.speicherstand { display: grid; gap: var(--s1); max-width: 28rem; font-size: 0.875rem; color: var(--leise); }
.speicherstand meter { inline-size: 100%; }

/* Listen als Badges und Zeilen mit ✕ (AP-102, VERK-Maskentechnik). */
.badges { display: grid; gap: var(--s2); }
.badges__liste { list-style: none; margin: 0; padding: 0; }
.badges__liste:empty { display: none; }
.badges__liste .chip { background: var(--aktion-zart); border-color: var(--aktion); padding-right: var(--s1); }
.chip__weg { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin: calc(-1 * var(--s2)) 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
.chip__weg:focus-visible { outline: 2px solid var(--aktion); outline-offset: -6px; border-radius: var(--r-pille); }
.eintraege .zeile__weg { min-width: 44px; }

/* Optik des Büros (AP-102) nach dem Entwurf „Tresen Anlagemasken“: ruhige Arbeitsfläche, Überschriften im Maß einer
   Anwendung statt einer Werbeseite, Stufen als umrandete Etiketten in Monospace, Karten mit Kopf. Nur Tokens. */
.buero__inhalt h1 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); letter-spacing: -0.02em; }
.buero__inhalt .karte > h2, .buero__inhalt section > h2, .pruefliste h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.buero__inhalt .karte h3 { font-size: 1rem; }
.seitenkopf { align-items: center; padding-block-end: var(--s2); }
.seitenkopf > div:first-child { display: grid; gap: var(--s1); }
.seitenkopf > div:first-child > p:first-child { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; }
.seitenkopf > div:first-child > p:first-child a { color: var(--leise); text-decoration: none; }
.seitenkopf > div:first-child > p:first-child a:hover { color: var(--aktion); text-decoration: underline; }

/* Karten: eine Fläche mit klarer Kante, Inhalt in einem Raster, Abstand statt Linien. */
.buero__inhalt .karte { border-radius: var(--r-l); padding: var(--s5); gap: var(--s4); }
.buero__inhalt .karte > h2 + p, .buero__inhalt .karte > h2 + .feld__hilfe { color: var(--leise); margin-top: calc(-1 * var(--s2)); }

/* Stufen wie im Entwurf: Etikett mit Rand, Farbe nach Bedeutung, Pflicht ohne Etikett (Stern am Namen). */
.feld__stufe { justify-self: start; font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1; padding: var(--s1) var(--s2); border: 1px solid currentColor; border-radius: var(--r-s);
  color: var(--leise); background: transparent; }
/* Pflicht ist der Normalfall: ein leiser Hinweis, kein Etikett. */
.feld__stufe--pflicht, .feld__stufe--anlegen { font-family: var(--schrift); font-size: 0.75rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; border: 0; padding: 0; color: var(--leise); }
.feld__stufe--online, .feld__stufe--bedingt { color: var(--fehler); background: transparent; border-radius: var(--r-s); }
.feld__stufe--direkt { color: var(--aktion); background: transparent; border-radius: var(--r-s); }
.feld__stufe--offen { background: var(--fehler-zart); }
.feld--angebot { padding-block: var(--s1); }
.angebot__felder { display: grid; gap: var(--s4); }

/* Reiter: Unterstrich in Akzentfarbe, offener Punkt für „hier fehlt noch etwas“. */
.reiter { gap: var(--s3); }
.reiter__knopf { padding: 0 var(--s1); color: var(--leise); }
.reiter__knopf:hover { color: var(--tinte); }
.reiter__knopf[aria-selected="true"] { color: var(--tinte); }

/* Online-Prüfung: kompakt, Haken und Kreuz in Farbe, Gründe leise. */
.pruefliste { gap: var(--s3); border-radius: var(--r-l); }
.pruefliste__punkte { gap: var(--s3); }
.pruefliste__punkte li { line-height: 1.35; }
.pruefliste__punkte b { font-weight: 600; }

/* Seitenleiste: ruhiger, aktive Fläche mit Akzentkante. */
.seitenleiste a { font-weight: 500; }
.seitenleiste a[aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--aktion); }
.seitenleiste__gruppe { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; }
.buero-leiste__marke { font-size: 1.05rem; letter-spacing: -0.01em; }

/* Tabellen im Büro: Kopf in Monospace, Zahlen gleich breit. */
.buero__inhalt th { font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--leise); }
.buero__inhalt td { font-variant-numeric: tabular-nums; }

/* Stempel für Zustände: Monospace mit Rand, wie „ENTWURF“ im Entwurf. */
.stempel { font-family: var(--mono); letter-spacing: 0.04em; }

/* Online-Prüfung eingeklappt (AP-102): die Maske nimmt die ganze Breite. */
.angebot[data-pruefung="zu"] { grid-template-columns: minmax(0, 1fr); }
.angebot[data-pruefung="zu"] > .pruefliste { display: none; }
.pruefung__schalter--offen[aria-expanded="false"] { border-color: var(--fehler); color: var(--fehler); }
/* Termine in der Maske (AP-102): breite Zeilen rollen in ihrem Rahmen, nie die Seite. */
.wirkt, .termine-neu { min-width: 0; }
.termine-neu { display: grid; gap: var(--s3); margin-top: var(--s4); }
.termine-neu h4 { margin-top: var(--s2); }
.ausstattung-neu > summary, .extras__neu h4 { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
/* Vorlesetext in Tabellenköpfen ist absolut gesetzt; der Rahmen hält ihn, sonst rollte die ganze Seite. */
.tabelle-rahmen { position: relative; }
/* Ein Knopf mit hidden bleibt verborgen, auch wenn .knopf ihn sonst als inline-flex setzt. */
.knopf[hidden] { display: none; }
/* Gruppen ohne Browserrahmen: Die Überschrift trägt, wie bei jedem Feld. Knöpfe so breit wie ihr Wort. */
.buero__inhalt fieldset.feld { border: 0; padding: 0; margin: 0; }
.buero__inhalt fieldset.feld > legend { padding: 0; margin-bottom: var(--s1); font-size: 0.875rem; font-weight: 600; }
.buero__inhalt :is(.karte, .termine-neu, .extras__neu, .ausstattung-neu, .formular-neu, form) > .knopf:not(.knopf--breit) { justify-self: start; }
.chips[hidden], .eingabe[hidden] { display: none; }
.buero__inhalt .feld > .knopf, .buero__inhalt .tabelle-rahmen + .knopf { justify-self: start; }
/* Bestand je Angebot (AP-102): Kopf mit Mengen, darunter die Stücke. */
.bestandsgruppe__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.bestandsgruppe__kopf a { color: inherit; }
.bestandsgruppe__zahlen { display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0; color: var(--leise); font-size: 0.9rem; }
.bestandsgruppe__zahlen b { color: var(--tinte); font-variant-numeric: tabular-nums; }
.bestandsgruppe__warn, .bestandsgruppe__warn b { color: var(--fehler); }
/* Nachrichtenvorlagen als Liste (AP-102). */
.vorlagenliste { gap: 0; padding-block: var(--s2); }
.vorlage + .vorlage { border-top: 1px solid var(--linie); }
.vorlage__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-height: 44px; cursor: pointer;
  padding-block: var(--s2); }
.vorlage__kopf small, .vorlage__kanal { color: var(--leise); font-size: 0.85rem; }
.vorlage[open] > form { padding-block: var(--s2) var(--s4); }
/* Dateiwahl bleibt in ihrer Karte. */
.buero__inhalt input[type="file"].eingabe { max-width: 100%; min-width: 0; }

/* Grundschicht des Büros (AP-102, Rückmeldung Florian 05.10.2026: „sieht aus wie Windows XP“, „komische Umbrüche“).
   Jedes Formularelement und jede Tabelle sieht gleich aus, auch ohne Klasse; nichts bleibt im Rohzustand des
   Browsers. Wörter brechen in Tabellen nur zwischen Wörtern um, Spaltenköpfe gar nicht. */
.buero__inhalt table { overflow-wrap: normal; word-break: normal; }
.buero__inhalt th { white-space: nowrap; }
.buero__inhalt td { hyphens: auto; }
.buero__inhalt td:first-child { min-width: 7rem; }
.buero__inhalt :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="color"], [type="range"]),
  select, textarea):not(.eingabe) {
  font: inherit; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--control-border);
  border-radius: var(--r-s); background-color: var(--flaeche); color: var(--tinte); max-width: 100%; }
.buero__inhalt :is(input, select, textarea):hover:not(:disabled, [type="checkbox"], [type="radio"]) { border-color: var(--tinte); }
.buero__inhalt textarea { line-height: 1.5; resize: vertical; }
/* Auswahllisten mit ruhigem Pfeil statt Systemknopf. */
.buero__inhalt select { appearance: none; padding-inline-end: var(--s7);
  background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.buero__inhalt select[multiple] { background-image: none; padding-inline-end: var(--s3); }
/* Häkchen und Optionen in der Akzentfarbe, in Lesegröße. */
.buero__inhalt :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--aktion); width: 1.05rem; height: 1.05rem; margin: 0; }
.buero__inhalt label:where(:not(.wahlkachel)):has(> input[type="checkbox"], > input[type="radio"]) { display: inline-flex; align-items: center; gap: var(--s2); }
/* Dateiwahl: der Knopf sieht aus wie jeder zweite Knopf. */
.buero__inhalt input[type="file"] { font: inherit; color: var(--leise); max-width: 100%; }
.buero__inhalt input[type="file"]::file-selector-button { font: inherit; font-weight: 600; min-height: 44px; margin-inline-end: var(--s3);
  padding: var(--s2) var(--s4); border: 1px solid var(--control-border); border-radius: var(--r); background: var(--flaeche);
  color: var(--tinte); cursor: pointer; }
.buero__inhalt input[type="file"]::file-selector-button:hover { border-color: var(--tinte); }
/* Knöpfe ohne Klasse bekommen die Gestalt des zweiten Knopfs. */
.buero__inhalt button:not([class]) { font: inherit; font-weight: 600; min-height: 44px; padding: var(--s2) var(--s4); border-radius: var(--r);
  border: 1px solid var(--control-border); background: var(--flaeche); color: var(--tinte); cursor: pointer; }
.buero__inhalt button:not([class]):hover { border-color: var(--tinte); }
/* Gruppen ohne Rahmen; Knöpfe als Zusammenfassung ohne Dreieck. */
.buero__inhalt fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.buero__inhalt legend { padding: 0; font-size: 0.875rem; font-weight: 600; }
.buero__inhalt summary.knopf { list-style: none; }
.buero__inhalt summary.knopf::-webkit-details-marker { display: none; }
.buero__inhalt label { font-size: 0.875rem; }
.buero__inhalt label > :is(input, select, textarea):not([type="checkbox"], [type="radio"]) { display: block; width: 100%; margin-top: var(--s1); }
/* Karten: weiche Kante statt harter Linie, gleicher Radius überall. */
.buero__inhalt .karte { border-color: var(--linie); box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 6%, transparent); }
.buero__inhalt .tabelle-rahmen { border-radius: var(--r); }
.buero__inhalt .tabelle-rahmen td { vertical-align: middle; }
.bestandsgruppe__kopf h2 { font-size: 1.2rem; }
.bestandsgruppe__kopf h2 a { text-decoration: none; }
.bestandsgruppe__kopf h2 a:hover { text-decoration: underline; }
/* Dateiwahl als ein Knopf mit Dateiname, ohne Kasten drumherum; in einer Reihe nimmt sie den freien Platz. */
.buero__inhalt input[type="file"].eingabe { border: 0; padding: 0; min-height: 0; background: none; }
.buero__inhalt .reihe > input[type="file"] { flex: 1 1 12rem; min-width: 0; width: auto; }
/* Seitenköpfe, deren Überschrift ohne Hülle direkt im Kopf steht, stehen untereinander statt verteilt. */
.seitenkopf:has(> h1) { display: grid; justify-content: start; gap: var(--s1); }
.seitenkopf > .ueberzeile, .seitenkopf .ueber { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--leise); margin: 0; }
/* Formulare aus beschrifteten Feldern ohne eigenes Raster stehen in Spalten statt als eine lange Leiste. */
.buero__inhalt form:not(.reihe, .felder, .formular-neu, .angebot__formular, .heute__schritt, .buchen__schritt, [hidden]):has(> label > :is(input, select, textarea)) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s3) var(--s4); align-items: end; }
.buero__inhalt form:has(> label > :is(input, select, textarea)) > :is(button, .knopf) { grid-column: 1 / -1; justify-self: start; }
.buero__inhalt form:has(> label > :is(input, select, textarea)) > :is(p, h3, fieldset, details) { grid-column: 1 / -1; }
/* Reihen umbrechen, statt aus der Karte zu laufen. */
.buero__inhalt form.reihe { flex-wrap: wrap; }
/* Dateiwahl und ihr Knopf untereinander: Die Dateiwahl wird nie schmaler als ihr Inhalt. */
.buero__inhalt form.reihe:has(> input[type="file"]) { display: grid; justify-items: start; min-width: 0; }
.buero__inhalt .karte > form { min-width: 0; }

/* Angaben als Paare (Tarif, Zahlungsanbieter, Stände): Bezeichnung leise links, Wert rechts, ohne Browser-Einzug.
   Befund der Simulation 05.10.2026: auf „Tarif und Vertrag“ stand der Wert eingerückt unter der Bezeichnung. */
.karte dl:not(:has(> div)), .datenliste { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--s2) var(--s4);
  margin: 0; }
.karte dt, .datenliste dt { color: var(--leise); }
.karte dd, .datenliste dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .karte dl:not(:has(> div)), .datenliste { grid-template-columns: 1fr; gap: var(--s1); }
  .karte dd, .datenliste dd { margin-bottom: var(--s2); }
}

/* ── Ordnung des Büros (Rückmeldung Florian 06.10.2026: „unterirdisch angeordnet“) ─────────────────────────────
   Eine Schicht über allem davor. Grundsätze: ein Arbeitswerkzeug, kein Schaufenster. Ruhige Überschriften,
   Beschriftung immer über dem Feld, Formulare in einer festen Breite mit gleich breiten Spalten, Knöpfe unten links,
   Hauptaktion einer Seite oben rechts, Tabellen in Lesetext statt Großbuchstaben, Zustände als getönte Plaketten. */

/* Schrift: Hierarchie über Gewicht und Größe, nicht über laute Größen. */
.buero__inhalt h1 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 800; letter-spacing: -0.01em; }
.buero__inhalt h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }
.buero__inhalt h3 { font-size: 1rem; font-weight: 700; }
.buero__inhalt h4 { font-size: 0.95rem; font-weight: 700; }
.buero__inhalt { gap: var(--s5); }
.buero__inhalt > :not(.editorlayout) { max-width: 68rem; }

/* Seitenkopf: Titel und Satz links, Hauptaktion rechts; schmal untereinander. */
.buero__inhalt .seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s3) var(--s5); padding-block-end: var(--s2); }
.buero__inhalt .seitenkopf > :first-child { display: grid; gap: var(--s1); min-width: 0; max-width: 46rem; }
.buero__inhalt .seitenkopf:has(> h1) { display: grid; justify-content: stretch; }
.buero__inhalt .seitenkopf p { color: var(--leise); }
.buero__inhalt .seitenkopf .ueberzeile, .buero__inhalt .seitenkopf .ueber { font-family: var(--schrift); font-size: 0.85rem;
  letter-spacing: 0; text-transform: none; color: var(--leise); }

/* Karten: gleiche Innenabstände, Kopf mit Titel links und Aktion rechts, Beschreibung leise. */
.buero__inhalt .karte { gap: var(--s4); padding: var(--s5); border-radius: var(--r-l); }
.buero__inhalt .karte > h2 + p, .buero__inhalt .karte > .karte__kopf + p { color: var(--leise); margin-top: calc(-1 * var(--s2)); }
.karte__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.karte__kopf > :is(h2, h3) { margin: 0; }

/* Formulare: höchstens 46rem breit, Felder in gleich breiten Spalten, Beschriftung darüber, Knöpfe unten links. */
.buero__inhalt form:not(.reihe, .formular-im-text, [hidden]) { max-width: 46rem; }
.buero__inhalt form:not(.reihe, .felder, .formular-neu, .angebot__formular, .heute__schritt, .uebergabe, [hidden]):has(> label > :is(input, select, textarea)) {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); align-items: end; }
.buero__inhalt form > label:has(> :is(input, select, textarea):not([type="checkbox"], [type="radio"])) {
  display: grid; gap: var(--s1); font-weight: 600; }
.buero__inhalt label > :is(input, select, textarea):not([type="checkbox"], [type="radio"]) { margin-top: 0; font-weight: 400; }
.buero__inhalt .formular, .buero__inhalt .formular-neu { display: grid; gap: var(--s4); max-width: 46rem; }
.buero__inhalt .formular { padding-top: 0; border-top: 0; }
.buero__inhalt .felder { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s3) var(--s4); }
.buero__inhalt .feld > label, .buero__inhalt .feld > legend { font-weight: 600; }
.buero__inhalt .eingabe--kurz { max-width: 10rem; }
.buero__inhalt form > :is(.knopf, button):last-child { justify-self: start; }
.buero__inhalt textarea { min-height: calc(var(--s8) + var(--s5)); }

/* Aufklapper sehen aus wie etwas, das sich öffnen lässt: Pfeil, kräftige Zeile, Fläche beim Darüberfahren. */
.buero__inhalt details:not(.anlegen, .kachelmaske, .hinzufuegen, .plus, .weiterer-schaden, .chip-plus) > summary:not(.knopf) { display: flex; align-items: center; gap: var(--s2); min-height: 44px;
  padding-inline: var(--s2); margin-inline: calc(-1 * var(--s2)); border-radius: var(--r-s); font-weight: 600; cursor: pointer;
  list-style: none; }
.buero__inhalt details:not(.anlegen, .kachelmaske, .hinzufuegen, .plus, .weiterer-schaden, .chip-plus) > summary:not(.knopf)::-webkit-details-marker { display: none; }
.buero__inhalt details:not(.anlegen, .kachelmaske, .hinzufuegen, .plus, .weiterer-schaden, .chip-plus) > summary:not(.knopf)::before { content: "›"; display: inline-block; inline-size: 1em;
  color: var(--leise); font-size: 1.2em; line-height: 1; transition: transform 0.15s ease; }
.buero__inhalt details[open]:not(.anlegen, .kachelmaske, .hinzufuegen, .plus, .weiterer-schaden, .chip-plus) > summary:not(.knopf)::before { transform: rotate(90deg); }
.buero__inhalt details:not(.anlegen, .kachelmaske, .hinzufuegen, .plus, .weiterer-schaden, .chip-plus) > summary:not(.knopf):hover { background: var(--flaeche-2); }
.buero__inhalt details[open] > summary + * { margin-top: var(--s3); }

/* Tabellen: Lesetext in den Köpfen, nur Linien zwischen den Zeilen, Zeilenköpfe in normaler Schrift. */
.buero__inhalt th { font-family: var(--schrift); font-size: 0.8rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--leise); }
.buero__inhalt tbody th { font-size: 0.875rem; font-weight: 500; color: var(--tinte); white-space: normal; }
.buero__inhalt table { border-collapse: collapse; width: 100%; }
.buero__inhalt :is(th, td) { padding: var(--s2) var(--s3); text-align: start; }
.buero__inhalt tbody tr + tr > :is(th, td) { border-top: 1px solid var(--linie); }
.buero__inhalt thead :is(th, td) { border-bottom: 1px solid var(--linie); background: transparent; }
.buero__inhalt .tabelle-rahmen th { background: transparent; }
.buero__inhalt .tabelle-rahmen td { border-top: 0; }
.buero__inhalt .tabelle-rahmen tbody tr + tr > td { border-top: 1px solid var(--linie); }

/* Zustände als Plaketten: Rand (Form) und Tönung (Farbe), Lesetext statt Großbuchstaben. */
.stempel { font-family: var(--schrift); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 0 var(--s2); border-width: 1px; border-radius: var(--r-pille); background: var(--flaeche); line-height: 1.6; }
.stempel--frei { background: var(--frei-zart); }
.stempel--gehalten { background: var(--gehalten-zart); }
.stempel--fehler { background: var(--fehler-zart); }
.stempel--aktion { background: var(--aktion-zart); }
.stempel--gesperrt { background: var(--flaeche-2); }

/* Seitenleiste: Gruppen leise in Lesetext, Einträge kompakter. */
.seitenleiste__gruppe { font-family: var(--schrift); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--leise); padding: var(--s4) var(--s3) var(--s1); }
.seitenleiste a { min-height: 40px; font-weight: 500; }
.seitenleiste a[aria-current="page"] { font-weight: 650; }

/* Kennzahlen: eine ruhige Reihe statt vier schwerer Kästen. */
.buero__inhalt .kennzahl small { color: var(--leise); font-size: 0.8rem; }
.buero__inhalt .kennzahl b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* Meldungen über dem Inhalt: dieselbe Breite wie Formulare, nicht über die ganze Seite. */
.buero__inhalt > :is(.hinweis, .meldung, p[role="status"], p[role="alert"]) { max-width: 46rem; }

/* Handy: alles einspaltig, Seitenkopf untereinander, Aktionen über volle Breite. */
@media (max-width: 40rem) {
  .buero__inhalt .seitenkopf { display: grid; }
  .buero__inhalt .seitenkopf .reihe { justify-content: flex-start; }
  .buero__inhalt .karte { padding: var(--s4); }
  .buero__inhalt form:not(.reihe) { grid-template-columns: minmax(0, 1fr); }
}

/* Restliche Programmschrift im Büro: Brotkrumen und Pflichtstufen in Lesetext. */
.buero__inhalt .seitenkopf > div:first-child > p:first-child { font-family: var(--schrift); font-size: 0.85rem; letter-spacing: 0;
  color: var(--leise); }
.feld__stufe { font-family: var(--schrift); font-size: 0.72rem; letter-spacing: 0; text-transform: none; border-radius: var(--r-pille);
  line-height: 1.4; }
/* Schritte eines Vorgangs: mögliche als Knopfreihe, gesperrte gesammelt mit Grund. */
.akte__schritte { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2); }
.akte__schritte > :is(form, details, .heute__schritt) { margin: 0; }
.akte__gesperrt > summary { font-size: 0.875rem; color: var(--leise); }
.akte__gesperrt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.akte__gesperrt li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s3); align-items: start; }
.akte__gesperrt .knopf__grund { margin: 0; }
/* Formulare in Tabellenzellen stehen untereinander, nicht im Spaltenraster der großen Formulare. */
.buero__inhalt td form:not(.reihe) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); max-width: none; }
.buero__inhalt td form > label:has(> input[type="checkbox"]) { display: inline-flex; }

/* Übersichtsseite (Wunsch Florian 06.10.2026): Kennzahlen, Liste, oben rechts ein Knopfband; jede Aktion öffnet ihre
   Anlegemaske als eigene Fläche über der Liste, statt dass alle Formulare untereinander stehen. */
.aktionsband { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }
.knopf--aktiv { box-shadow: inset 0 0 0 2px var(--aktion-zart); }
.buero__inhalt .maske { border-color: var(--aktion); box-shadow: 0 0 0 3px var(--aktion-zart); }
.buero__inhalt .leerzustand { color: var(--leise); }
@media (max-width: 40rem) { .aktionsband { justify-content: flex-start; } }
/* Vorgang (Wunsch Florian 06.10.2026): alles untereinander in einer Spalte, Positionen zuerst. */
.akte--spalte { gap: var(--s4); }
.akte__jetzt { display: grid; gap: var(--s2); }
.akte__jetzt-titel { margin: 0; font-size: 1rem; }
.akte__plaetze--liste { margin: 0; padding-inline-start: var(--s4); color: var(--leise); }
.akte__gesperrt { margin-top: var(--s1); }
.akte__gesperrt > summary { min-height: 32px; font-weight: 500; }
.akte__position > .knopf, .akte > section > article > .knopf { justify-self: start; }
/* Übersicht: Liste links, Aktionen als Spalte rechts daneben; am Handy die Aktionen zuerst. */
.uebersicht { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem); gap: var(--s4); align-items: start; }
.uebersicht__liste { display: grid; gap: var(--s4); min-width: 0; }
.uebersicht__aktionen { display: grid; gap: var(--s2); position: sticky; top: var(--s4); }
.uebersicht__aktionen > .knopf { justify-content: flex-start; width: 100%; white-space: normal; text-align: start; }
@media (max-width: 56rem) {
  .uebersicht { grid-template-columns: minmax(0, 1fr); }
  .uebersicht__aktionen { position: static; order: -1; display: flex; flex-wrap: wrap; }
  .uebersicht__aktionen > .knopf { width: auto; }
}
.buero__inhalt .seitenkopf > .reihe { justify-content: flex-end; }
.buero__inhalt .seitenkopf > div .reihe { justify-content: flex-start; }
.akte__summe { justify-self: end; }
/* Anlegemasken öffnen sich über ihren Knopf (Anker) und bleiben nach einem Fehler offen; sonst stehen nur Listen da. */
.maske-ziel:not(:target, .offen) { display: none; }
.maske-ziel:target { scroll-margin-top: var(--s5); }
/* Aktionskacheln am Vorgang: was als Nächstes dran ist, groß und eindeutig; Erledigtes grau. */
.aktionskacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--s2); }
.aktionskachel { display: grid; gap: var(--s1); min-height: 100%; padding: var(--s3) var(--s4); border: 1px solid var(--aktion);
  border-radius: var(--r); background: var(--aktion-zart); color: var(--aktion); text-decoration: none; }
.aktionskachel:hover { background: var(--flaeche); }
.aktionskachel small { color: var(--tinte); font-size: 0.8rem; }
.aktionskachel--erledigt { border-color: var(--linie); background: var(--flaeche-2); color: var(--leise); }
.aktionskachel--erledigt small { color: var(--leise); }
/* Schritte als Kacheln: Knopf und Link sehen gleich aus; beendende Schritte rot umrandet. */
button.aktionskachel { font: inherit; font-weight: 700; text-align: start; cursor: pointer; width: 100%; }
.aktionskachel { font-weight: 700; }
.aktionskachel small { font-weight: 400; }
.aktionskachel--gefahr { border-color: var(--fehler); background: var(--fehler-zart); color: var(--fehler); }
.aktionskacheln > li > form, .aktionskacheln > li > details { margin: 0; height: 100%; }
.kachelmaske > summary { list-style: none; cursor: pointer; }
.kachelmaske > summary::-webkit-details-marker { display: none; }
.kachelmaske[open] { grid-column: 1 / -1; }
.kachelmaske[open] > form { margin-top: var(--s3); }
.kennzahl--warn b { color: var(--fehler); }
.kachelmaske > summary.aktionskachel { display: grid; }
/* Offen ist die Kachel nur noch Überschrift der Maske. Mit min-height: 100% nahm sie in der Platzliste eines Kurses die
   ganze Maske ein, und das Formular lag unter dem nächsten Abschnitt (AP-102 Befund 139, O-9 Umbuchen). */
.kachelmaske[open] > summary.aktionskachel { min-height: 0; }
/* Die Spalte des Inhalts wird nie breiter als der Bildschirm, auch wenn ein Kind breiten Inhalt hat. */
.buero__inhalt { grid-template-columns: minmax(0, 1fr); }
.buero__inhalt .seitenkopf > * { min-width: 0; }
/* Übergabe und Rücknahme: Vorgang fest und grau, Fragen mit Plaketten, Checkliste, Schaden und Zählerstand. */
.vorgangskarte { background: var(--flaeche-2); border-color: var(--linie); }
.vorgangskarte dl { margin: 0; }
.frage { display: grid; gap: var(--s2); }
.frage__titel { font-weight: 700; margin: 0; }
.chip--mangel:has(input:checked) { background: var(--fehler-zart); border-color: var(--fehler); color: var(--fehler); }
.plus { display: inline-flex; align-items: center; gap: var(--s2); }
.plus > summary { list-style: none; cursor: pointer; }
.plus > summary::-webkit-details-marker { display: none; }
.chip--plus { justify-content: center; min-width: 32px; font-weight: 700; color: var(--aktion); border-style: dashed; }
.plus[open] { display: flex; flex-wrap: wrap; gap: var(--s2); }
.plus__feld { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.plus__mangel { font-size: 0.85rem; }
.plus--zeile { display: block; }
.plus__felder { display: grid; gap: var(--s3); max-width: 36rem; margin-top: var(--s2); }
.checkliste { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--linie); border-radius: var(--r); }
.checkliste > legend { font-weight: 700; padding-inline: var(--s1); }
.checkliste__punkt { display: flex; align-items: center; gap: var(--s2); min-height: 40px; font-size: 1rem; }
.uebergabe__kacheln { display: grid; grid-template-columns: minmax(0, 3fr) minmax(12rem, 2fr); gap: var(--s3); }
.kachel-fach { display: grid; gap: var(--s3); align-content: start; padding: var(--s4); border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--flaeche); }
.kachel-fach h3 { margin: 0; }
.eingabe--gross { font-size: 1.6rem; min-height: 64px; font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .uebergabe__kacheln { grid-template-columns: minmax(0, 1fr); } }
/* Die Knöpfe einer Zeile bleiben nebeneinander; Gründe stehen als Tooltip und für Vorleser, nicht als Umbruch. */
.heute__knoepfe > form { margin: 0; }
.heute__knoepfe .knopf { white-space: nowrap; }
.heute__knoepfe:has(details[open]) { flex-wrap: wrap; }
/* Angebot in einer Spalte (Durchsicht 06.10.2026): Kern, weitere Angaben, „+ Angabe hinzufügen“. */
.mit-skript .angabe[data-zu] { display: none; }
.angebot__kern, .angebot__weitere { display: grid; gap: var(--s4); }
.hinzufuegen { display: grid; gap: var(--s3); border-top: 1px solid var(--linie); padding-top: var(--s4); }
.hinzufuegen > summary.hinzufuegen__knopf { justify-self: start; list-style: none; cursor: pointer; display: inline-flex; gap: var(--s2);
  padding: var(--s2) var(--s4); border: 1px dashed var(--aktion); border-radius: var(--r); color: var(--aktion); font-weight: 600; }
.hinzufuegen > summary.hinzufuegen__knopf::-webkit-details-marker { display: none; }
.hinzufuegen > summary.hinzufuegen__knopf::before { content: none; }
/* Kategorien untereinander, links die Kategorie, rechts fortlaufend die Angaben (N36). */
.hinzufuegen__gruppe { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--s3); align-items: start; padding-block: var(--s2); border-top: 1px solid var(--linie); }
.hinzufuegen__gruppe > b { padding-top: var(--s1); font-size: 0.875rem; }
@media (max-width: 640px) { .hinzufuegen__gruppe { grid-template-columns: 1fr; gap: var(--s2); } }
.hinzufuegen__liste { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hinzufuegen__wahl { border: 1px solid var(--linie); background: var(--flaeche); border-radius: var(--r-pille); padding: var(--s1) var(--s3);
  cursor: pointer; font: inherit; font-size: 0.875rem; }
.hinzufuegen__wahl:hover { border-color: var(--aktion); color: var(--aktion); }
.termine-neu { display: grid; gap: var(--s4); }
.termine-neu__teil { display: grid; gap: var(--s3); }
.termine-neu__titel { font-size: 1rem; }

/* Beim Einzeltermin genau eine Zeile: ohne „+ Zeile“ und ohne weitere Zeilen. */
[data-terminform="einzel"] .termine-neu__teil table.eintraege tbody tr:not(:first-child),
[data-terminform="einzel"] .termine-neu__teil .eintraege__dazu { display: none; }
/* Umschalter mit wenigen Möglichkeiten, etwa Einzeltermin, Serie, unregelmäßig. */
/* Die Möglichkeiten teilen die ganze Breite gleich auf (Wunsch Florian 06.10.2026). */
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s1); padding: var(--s1);
  border: 1px solid var(--linie); border-radius: var(--r); background: var(--grund); inline-size: 100%; }
.segment[hidden] { display: none; }
.segment > button { border: 0; background: transparent; border-radius: var(--r-s); padding: var(--s2) var(--s4); font: inherit; font-weight: 500;
  cursor: pointer; color: inherit; text-align: center; }
@media (max-width: 30rem) { .segment { grid-auto-flow: row; } }
.segment > button[aria-pressed="true"] { background: var(--flaeche); color: var(--aktion); box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 14%, transparent); }
.termine-neu__teil[hidden] { display: none; }
.termine-neu__teil > .knopf { justify-self: start; }
.buero__inhalt .segment > button { border: 0; min-block-size: 0; }
.dokumente { display: grid; gap: var(--s3); }
.dokumente__neu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s3); align-items: end; }
.dokumente__liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--r); }
.dokumente__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s4); border-top: 1px solid var(--linie); }
.dokumente__liste li:first-child { border-top: 0; }
.dokumente__text { display: grid; min-width: 0; }
.dokumente__text b { overflow-wrap: anywhere; }
.dokumente__text small { color: var(--leise); }
@media (max-width: 40rem) { .dokumente__neu { grid-template-columns: minmax(0, 1fr); } }
/* Überschrift eines Feldes und ihre Plakette (Pflicht, fehlt noch, nur für direkte Buchung) stehen nebeneinander. */
.feld__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.feld__kopf > label, .feld__kopf > .feld__titel { margin: 0; }
/* Entfernen ist rot umrandet wie eine Plakette (Wunsch Florian 06.10.2026), damit es sich vom Speichern abhebt. */
.knopf.knopf--entfernen { color: var(--fehler); background: var(--fehler-zart); border: 1px solid var(--fehler); border-radius: var(--r-pille);
  min-inline-size: 2.25rem; justify-content: center; }
.knopf.knopf--entfernen:hover { background: var(--fehler); color: var(--fehler-auf); }
.termine-liste { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--linie); border-radius: var(--r); }
.termine-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4);
  border-top: 1px solid var(--linie); }
.termine-liste li:first-child { border-top: 0; }
.termine-liste a { text-decoration: none; color: inherit; }
.termine-liste span { color: var(--leise); font-size: 0.875rem; }
.termine-liste--abgesagt a { text-decoration: line-through; color: var(--leise); }
.zuordnung { display: grid; gap: var(--s3); border-top: 1px solid var(--linie); padding-top: var(--s4); }
.zuordnung__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.zuordnung__liste li { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s1) var(--s1) var(--s3);
  border-radius: var(--r-pille); background: var(--aktion-zart); }
.zuordnung__liste a { color: var(--aktion); font-weight: 600; text-decoration: none; }
.zuordnung__liste form { margin: 0; }
.bildwahl__bild { position: relative; padding: var(--s2); border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); }
.bildwahl__bild:has(.bildwahl__wahl input:checked) { border-color: var(--aktion); }
.bildwahl__bild:not(:has(.bildwahl__wahl input:checked)) img { opacity: 0.55; }
.bildwahl__bild:has(.bildwahl__titel input[type=radio]:checked)::before { content: "Titelbild"; position: absolute; inset-block-start: var(--s3);
  inset-inline-start: var(--s3); padding: 0 var(--s2); border-radius: var(--r-pille); background: var(--aktion); color: var(--aktion-auf);
  font-size: 0.7rem; font-weight: 600; z-index: 1; }
.bildwahl__knoepfe { display: flex; gap: var(--s1); justify-content: space-between; }
.bildwahl__knoepfe[hidden] { display: none; }
.buero__inhalt .bildwahl label.bildwahl__wahl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); position: relative; }
.buero__inhalt .bildwahl__wahl > input { position: absolute; inset-block-start: var(--s2); inset-inline-end: var(--s2); z-index: 1;
  inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--aktion); }
.buero__inhalt .bildwahl__wahl > img { inline-size: 100%; }
.buero__inhalt .bildwahl__wahl > span { overflow-wrap: anywhere; }
.chip.chip--warn:has(input:checked) { border-color: var(--fehler); background: var(--fehler-zart); color: var(--fehler); }
/* Auswahl aus zwei oder drei Möglichkeiten mit echten Radioknöpfen, als geteilte Kachel. */
.segment--wahl > label { display: grid; place-items: center; padding: var(--s2) var(--s3); border-radius: var(--r-s); cursor: pointer;
  font-weight: 500; text-align: center; }
.buero__inhalt .segment--wahl > label:has(> input) { display: grid; }
.segment--wahl > label > input { position: absolute; opacity: 0; pointer-events: none; }
.segment--wahl > label:has(> input:checked) { background: var(--flaeche); color: var(--aktion);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 14%, transparent); }
.segment--wahl > label:has(> input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 1px; }
.felder--zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s3); }
form:has(input[name="wie_oft"][value="einmalig"]:checked) [data-nur="wiederkehrend"],
form:has(input[name="wie_oft"][value="wiederkehrend"]:checked) [data-nur="einmalig"] { display: none; }
.buero__inhalt form > .felder--zwei { grid-column: 1 / -1; inline-size: 100%; }
.felder--zwei > fieldset { min-inline-size: 0; inline-size: 100%; }
.segment--wahl > label { white-space: nowrap; }
.buero__inhalt .felder.felder--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .buero__inhalt .felder.felder--zwei { grid-template-columns: minmax(0, 1fr); } }
form:has(input[name="faellig_nach"][value="tage"]:checked) [data-faellig]:not([data-faellig~="tage"]),
form:has(input[name="faellig_nach"][value="zaehler"]:checked) [data-faellig]:not([data-faellig~="zaehler"]),
form:has(input[name="faellig_nach"][value="beides"]:checked) [data-faellig]:not([data-faellig~="beides"]) { display: none; }
/* Fotoablage als Knopf: das Dateifeld des Browsers bleibt unsichtbar, der gewählte Name erscheint im Knopf. */
.fotoknopf { position: relative; display: inline-flex; align-items: center; justify-self: start; gap: var(--s2); padding: var(--s2) var(--s4);
  border: 1px dashed var(--aktion); border-radius: var(--r); color: var(--aktion); font-weight: 600; cursor: pointer; }
.fotoknopf > input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fotoknopf:has(> input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.checkliste { display: grid; gap: var(--s2); }
.checkliste__punkt { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--linie); border-radius: var(--r); }
.checkliste__punkt:has(input:checked) { border-color: var(--frei); background: var(--frei-zart); }
/* Übergabe und Rücknahme nutzen die ganze Breite wie ihre Vorgangskarte (Durchsicht 06.10.2026). */
.buero__inhalt form.uebergabe { max-width: none; }
.verfuegbar { padding: var(--s3) var(--s4); border-radius: var(--r); font-weight: 600; background: var(--frei-zart); color: var(--frei); }
.verfuegbar[data-stand="knapp"] { background: var(--gehalten-zart); color: var(--gehalten); }
.verfuegbar[data-stand="belegt"] { background: var(--fehler-zart); color: var(--fehler); }
.verfuegbar[hidden] { display: none; }
/* Übergabe und Rücknahme: Checkliste und Zählerstand als Kacheln, Schaden über die ganze Breite (06.10.2026). */
.uebergabe__kacheln { grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); align-items: stretch; }
.schadenfach { display: grid; gap: var(--s3); }
.schadenzeile { display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.4fr); gap: var(--s3); align-items: start; }
.weiterer-schaden { display: grid; gap: var(--s3); }
.weiterer-schaden > summary { justify-self: start; list-style: none; }
.weiterer-schaden > summary::-webkit-details-marker { display: none; }
.weiterer-schaden[open] > summary { display: none; }
@media (max-width: 48rem) { .schadenzeile { grid-template-columns: minmax(0, 1fr); } }
.uebergabe fieldset.checkliste.kachel-fach { border: 1px solid var(--linie); border-radius: var(--r); padding: var(--s4); margin: 0; }
.uebergabe fieldset.checkliste.kachel-fach > legend { float: left; inline-size: 100%; padding: 0; margin-block-end: var(--s2); font-size: 1.05rem; font-weight: 700; }
.uebergabe fieldset.checkliste.kachel-fach > legend + * { clear: both; }
.schadenzeile { grid-template-columns: minmax(0, 1fr); }
.fotoablage { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: stretch; }
.fotoablage__bild { display: grid; gap: var(--s1); inline-size: 7rem; padding: var(--s1); border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); }
.fotoablage__bild:first-child { border-color: var(--aktion); }
.fotoablage__bild img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); }
.fotoablage__knoepfe { display: flex; justify-content: space-between; }
.fotoablage .fotoknopf { min-block-size: 6rem; inline-size: 7rem; justify-content: center; text-align: center; }
.uebergabe fieldset.verwendbarfach { border: 1px solid var(--linie); border-radius: var(--r); padding: var(--s4); margin: 0; display: grid; gap: var(--s2); }
.uebergabe fieldset.verwendbarfach > legend { float: left; inline-size: 100%; padding: 0; font-size: 1.05rem; font-weight: 700; }
.uebergabe fieldset.verwendbarfach > legend + * { clear: both; }
.vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s3); }
.buero__inhalt label.vorlage { position: relative; display: grid; gap: var(--s1); padding: var(--s3) var(--s4); border: 1px solid var(--linie);
  border-radius: var(--r); cursor: pointer; }
.buero__inhalt label.vorlage:has(input:checked) { border-color: var(--aktion); background: var(--aktion-zart); }
.buero__inhalt label.vorlage > input { position: absolute; opacity: 0; }
.vorlage small { color: var(--leise); }
/* Ein Angebotsname bricht zwischen Wörtern um, nicht mitten im Wort wie sonst im Büro. */
.vorlage > b { overflow-wrap: break-word; hyphens: auto; }
.trenner { font-size: 1rem; color: var(--leise); margin-block: var(--s4) 0; }
.uebergabe__kacheln { grid-template-columns: minmax(0, 1fr); }
.kachel-fach--zaehler .eingabe { max-inline-size: 16rem; }
/* Detailseiten (06.10.2026): Plaketten im Kopf, Aktionskacheln über die ganze Breite. */
.detailkopf__plaketten { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.aktionskacheln--breit { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
/* Eine geöffnete Kachelmaske nimmt die ganze Zeile ein und wächst mit ihrem Formular, statt die Kennzahlen darunter
   zu überdecken (gefunden in der Browserreise Vorgänge, 06.10.2026). */
.aktionskacheln > li:has(> details[open]) { grid-column: 1 / -1; }
.aktionskacheln > li > details[open] { height: auto; }

/* Wie viele Kunden ein Service gleichzeitig bedienen kann, je Standort (Personen und Plätze, das Kleinere zählt). */
.servicegrenze{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s1)}
.servicegrenze li{padding:var(--s1) var(--s2);border-radius:var(--r-s);background:var(--aktion-zart)}

/* Im Bestand zeigt die Maske je Typ nur ihre Felder; ohne Skript, nur mit :has (Florian 06.10.2026). */
form:has(input[name="typ"]) [data-nur-typ] { display: none; }
form:has(input[name="typ"][value="einheit"]:checked) [data-nur-typ~="einheit"],
form:has(input[name="typ"][value="objekt"]:checked) [data-nur-typ~="objekt"],
form:has(input[name="typ"][value="person"]:checked) [data-nur-typ~="person"],
form:has(input[name="typ"][value="raum"]:checked) [data-nur-typ~="raum"],
form:has(input[name="typ"][value="platz"]:checked) [data-nur-typ~="platz"],
form:has(input[name="typ"][value="fahrzeug"]:checked) [data-nur-typ~="fahrzeug"] { display: revert; }
form:has(input[name="typ"][value="einheit"]:checked) .feld[data-nur-typ~="einheit"],
form:has(input[name="typ"][value="objekt"]:checked) .feld[data-nur-typ~="objekt"],
form:has(input[name="typ"][value="person"]:checked) .feld[data-nur-typ~="person"],
form:has(input[name="typ"][value="raum"]:checked) .feld[data-nur-typ~="raum"],
form:has(input[name="typ"][value="platz"]:checked) .feld[data-nur-typ~="platz"],
form:has(input[name="typ"][value="fahrzeug"]:checked) .feld[data-nur-typ~="fahrzeug"] { display: grid; }
/* Eine Maske in einer Spalte: jedes Feld über die volle Breite, Segmente teilen die ganze Kachel. */
.maske__spalte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.maske__spalte .segment { inline-size: 100%; }
.ressourcen { display: grid; gap: var(--s3); }
.ressourcen h2 { margin: 0; }
.ressourcen__gruppe { display: grid; gap: var(--s2); }
.ressourcen__gruppe h3 { margin: 0; font-size: 0.875rem; display: flex; align-items: center; gap: var(--s2); }

/* Durchsicht Florian 06.10.2026: Breit nutzt das Büro die ganze freie Breite; Tabellenzeilen brechen nicht um (lieber
   seitlich schieben als eine Zeile auf drei); gleich gebaute Tabellen in mehreren Karten einer Seite stehen in einer
   Flucht, Spalte für Spalte gleich breit. */
@media (min-width: 60rem) {
  .buero__inhalt .tabelle-rahmen th, .buero__inhalt .tabelle-rahmen td { white-space: nowrap; hyphens: manual; vertical-align: middle; }
  .buero__inhalt .tabelle-rahmen td .knopf { white-space: nowrap; }
}
.bestandsgruppe .tabelle-rahmen table { table-layout: fixed; }
.bestandsgruppe .tabelle-rahmen :is(th, td) { overflow: hidden; text-overflow: ellipsis; }
/* Nachrichtenvorlagen: links die Liste, rechts der Editor (Durchsicht Florian 06.10.2026). */
.vorlagenraum { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 60rem) { .vorlagenraum { grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); } }
.buero__inhalt .vorlagenwahl { padding: var(--s2); }
.vorlagenwahl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-height: 75vh; overflow-y: auto; }
.vorlagenwahl a { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-s);
  color: var(--tinte); text-decoration: none; }
.vorlagenwahl a:hover { background: var(--flaeche-2); }
.vorlagenwahl a[aria-current="page"] { background: var(--aktion-zart); }
.vorlagenwahl__text { display: grid; min-width: 0; flex: 1; }
.vorlagenwahl__text b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vorlagenwahl__text small { color: var(--leise); }
.vorlageneditor__kopf { display: flex; justify-content: space-between; align-items: start; gap: var(--s4); }
.vorlageneditor__kopf h2 { margin: 0; }
.vorlageneditor__text { min-height: 18rem; font-family: var(--schrift); line-height: 1.6; }
.vorlageneditor__platzhalter .chip { font-family: var(--mono); font-size: 0.75rem; cursor: pointer; }
.vorlageneditor__fuss { display: flex; justify-content: flex-end; border-top: 1px solid var(--linie); padding-top: var(--s4); }

/* Modern und schlicht (Durchsicht Florian 06.10.2026): Tabellen mit leisem Kopf, viel Luft, Linien nur zwischen den
   Zeilen und Hover statt Gitter; Übersichtskacheln, eine Filterleiste und ein Schalter. */
.buero__inhalt .tabelle-rahmen, .buero__inhalt table.tabelle { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); }
.buero__inhalt .tabelle-rahmen table, .buero__inhalt table.tabelle { border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.buero__inhalt :is(.tabelle-rahmen, table.tabelle) th { background: transparent; color: var(--leise); font-family: var(--schrift); font-size: 0.78rem;
  font-weight: 500; letter-spacing: 0; text-transform: none; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linie); }
.buero__inhalt :is(.tabelle-rahmen, table.tabelle) td { padding: var(--s3) var(--s4); border-top: 1px solid var(--linie); vertical-align: middle; }
.buero__inhalt :is(.tabelle-rahmen, table.tabelle) tbody tr:first-child td { border-top: 0; }
.buero__inhalt :is(.tabelle-rahmen, table.tabelle) tbody tr:hover { background: var(--flaeche-2); }
.buero__inhalt :is(.tabelle-rahmen, table.tabelle) td a { color: var(--tinte); text-decoration: none; }
.buero__inhalt :is(.tabelle-rahmen, table.tabelle) td a:hover { color: var(--aktion); }
.buero__inhalt .karte > .tabelle-rahmen { border: 0; border-radius: 0; }

.uebersichtskacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s3); }
.uebersichtskachel { display: grid; gap: var(--s1); align-content: start; padding: var(--s4); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-l); color: var(--tinte); text-decoration: none; }
.uebersichtskachel:hover { border-color: var(--control-border); }
.uebersichtskachel--aktiv { border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); }
.uebersichtskachel__kopf { display: flex; justify-content: space-between; align-items: center; color: var(--leise); font-size: 0.85rem; }
.uebersichtskachel > b { font-family: var(--anzeige); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.uebersichtskachel small { color: var(--leise); font-size: 0.78rem; }
.uebersichtskachel--neu { border-style: dashed; place-content: center; justify-items: center; text-align: center; color: var(--aktion); }
.uebersichtskachel--neu > .ph { font-size: 1.6rem; }
.uebersichtskachel--neu > b { font-family: var(--schrift); font-size: 1rem; }

.filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.filterleiste .eingabe { inline-size: auto; min-width: 10rem; }
.filterleiste__suche { display: flex; align-items: center; gap: var(--s2); flex: 1 1 16rem; min-height: 44px; padding: 0 var(--s3);
  background: var(--flaeche); border: 1px solid var(--control-border); border-radius: var(--r-s); color: var(--leise); }
.filterleiste__suche input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--tinte); font: inherit; }
.filterleiste__suche:focus-within { outline: 2px solid var(--aktion); outline-offset: 2px; }

.schalter { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; font-weight: 500; }
.schalter > input[type="checkbox"] { appearance: none; inline-size: 40px; block-size: 24px; margin: 0; border-radius: var(--r-pille); background: var(--linie);
  position: relative; flex: none; cursor: pointer; transition: background 0.15s; }
.schalter > input[type="checkbox"]::after { content: ""; position: absolute; inset: 3px auto 3px 3px; inline-size: 18px; border-radius: var(--r-pille);
  background: var(--flaeche); transition: transform 0.15s; }
.schalter > input[type="checkbox"]:checked { background: var(--aktion); }
.schalter > input[type="checkbox"]:checked::after { transform: translateX(16px); }
/* Postfach als Liste zum Aufklappen (Durchsicht Florian 06.10.2026). */
.reiterleiste { display: flex; gap: var(--s1); border-bottom: 1px solid var(--linie); }
.reiterleiste a { padding: var(--s2) var(--s3); color: var(--leise); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; }
.reiterleiste a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--aktion); }
.buero__inhalt .postliste { padding: 0; gap: 0; }
.postzeile + .postzeile { border-top: 1px solid var(--linie); }
.buero__inhalt .postzeile > summary { display: grid; grid-template-columns: auto minmax(10rem, 16rem) minmax(0, 1fr) auto auto; align-items: center;
  gap: var(--s4); padding: var(--s3) var(--s4); cursor: pointer; list-style: none; min-height: 56px; }
.buero__inhalt .postzeile > summary::before { content: none; }
.postzeile > summary::-webkit-details-marker { display: none; }
.postzeile > summary:hover { background: var(--flaeche-2); }
.postzeile > summary > .ph { color: var(--leise); }
.postzeile__wer, .postzeile__was { display: grid; min-width: 0; }
.postzeile__wer b, .postzeile__was b, .postzeile__was small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.postzeile__wer b { font-weight: 500; }
.postzeile--neu .postzeile__wer b, .postzeile--neu .postzeile__was b { font-weight: 700; }
.postzeile small { color: var(--leise); font-size: 0.8rem; }
.postzeile__zeit { color: var(--leise); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.postzeile__inhalt { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4) var(--s8); }
.postzeile__antwort { display: grid; gap: var(--s2); }
@media (max-width: 48rem) {
  .buero__inhalt .postzeile > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .postzeile__was, .postzeile__zeit { display: none; }
  .postzeile__inhalt { padding-left: var(--s4); }
}

/* Abläufe vor Ort untereinander (Gesamtansicht 3.2, 3.3, 3.5): Angaben im Raster, schmaler Zählerstand,
   eine echte Liste zum Abhaken. */
.stapel { display: grid; gap: var(--s4); }
.angabenraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s3) var(--s5); margin: 0; }
.angabenraster > div { display: grid; gap: var(--s1); min-width: 0; }
.angabenraster dt { color: var(--leise); font-size: 0.8rem; }
.angabenraster dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.zaehlerfeld { display: flex; align-items: center; gap: var(--s2); max-width: 16rem; }
.zaehlerfeld .eingabe { font-variant-numeric: tabular-nums; }
.zaehlerfeld span { color: var(--leise); }
.abhakliste { display: grid; }
.abhakliste__punkt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s2) 0; border-top: 1px solid var(--linie); }
.abhakliste__punkt:first-child { border-top: 0; }
.abhakliste__punkt input[type="checkbox"] { inline-size: 22px; block-size: 22px; accent-color: var(--aktion); }
.abhakliste__text { flex: 1 1 12rem; }
.abhakliste__punkt--frage { align-items: flex-start; }
.buero__inhalt fieldset.karte { border: 1px solid var(--linie); }

/* Verfügbarkeit als Kacheln (Gesamtansicht 3.10, N12): Tage, Uhrzeiten oder Kurstermine mit dem, was noch frei ist.
   Ein Tag ist ein Verweis, damit die Seite auch ohne Skript mit der neuen Zeit rechnet. */
.slots { display: flex; flex-wrap: wrap; gap: var(--s2); border: 0; padding: 0; margin: 0; }
.slots > a, .slots > span, .slots > label { display: grid; gap: var(--s1); min-width: 5.5rem; padding: var(--s2) var(--s3); text-align: center;
  border: 1px solid var(--linie); border-radius: var(--r-s); background: var(--flaeche); color: var(--tinte); text-decoration: none; font-weight: 600; cursor: pointer; }
.slots small { color: var(--leise); font-weight: 500; }
.slots > a:hover, .slots > label:hover { border-color: var(--aktion); }
.slots > .an, .slots > label:has(> input:checked) { border-color: var(--aktion); background: color-mix(in srgb, var(--aktion) 10%, var(--flaeche)); color: var(--aktion); }
.slots > .voll { cursor: default; color: var(--leise); background: var(--flaeche-2); border-style: dashed; }
.slots > label > input { position: absolute; opacity: 0; pointer-events: none; }
.slots > label:has(> input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 1px; }
/* Anlegen und Bearbeiten als eigene Maske (N39): Ist eine Maske offen, tritt die Liste zurück; der Rückweg führt zu ihr. */
.maske__zurueck { display: none; }
.maske-ziel:is(:target, .offen) > .maske__zurueck { display: inline-flex; align-items: center; gap: var(--s1); justify-self: start; color: var(--leise); text-decoration: none; font-size: 0.875rem; }
.buero__inhalt:has(.maske-ziel:is(:target, .offen)) > :not(:has(.maske-ziel:is(:target, .offen)), .maske-ziel, .hinweis) { display: none; }
.buero__inhalt > :has(> .maske-ziel:is(:target, .offen)):not(.maske-ziel) > :not(.maske-ziel, .hinweis, h2) { display: none; }
.extras-wahl.chips { border: 0; padding: 0; margin: 0; }
.extras-wahl .chip small { color: var(--leise); font-weight: 500; }
.buchen__tageskopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.buchen__tageskopf h2 { margin: 0; }
.chip--fest { background: var(--aktion-zart); border-color: var(--aktion); color: var(--aktion); font-weight: 600; cursor: default; }
.feld__fehler { margin: 0; color: var(--fehler); font-size: 0.875rem; font-weight: 600; }
/* Ausstattung (Gesamtansicht 5.3, N36): je Kategorie eine Zeile, links der Name, rechts die Werte, am Ende „+ Wert“. */
/* Wie die Gesamtansicht: ein umrahmter Block, je Kategorie eine Zeile, die Plaketten unter der Überschrift. */
.kzeilen { display: grid; border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; }
.kzeilen__zeile { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--linie); }
.kzeilen__zeile:first-child { border-top: 0; }
.kzeilen__zeile > b { font-size: 0.875rem; font-weight: 600; }
.kzeilen__neu { padding: var(--s3) var(--s4); border-top: 1px solid var(--linie); }
.chip-plus { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.chip-plus > summary { list-style: none; }
.chip-plus > summary::-webkit-details-marker { display: none; }
/* Öffnungszeiten (Gesamtansicht 6.9): ein Zeitraum ist eine Plakette mit zwei schmalen Auswahlen. */
.zeitraum { gap: var(--s1); padding-block: 0; }
.zeitraum select { border: 0; background: transparent; font: inherit; color: inherit; padding: var(--s1) 0; }
.formular__zwischentitel { margin: var(--s3) 0 0; font-size: 1rem; }
.einstellungskacheln > li { display: grid; gap: var(--s1); }
.einstellungskacheln .aktionskachel span { display: inline-flex; align-items: center; gap: var(--s2); }
.einstellungskacheln__zusatz { font-size: 0.8rem; }
/* Eine Auswahlplakette hat keinen sichtbaren Kasten: Sie ist gewählt oder nicht (Florian 06.10.2026). */
label.chip { position: relative; }
label.chip > input:is([type="checkbox"], [type="radio"]) { position: absolute; opacity: 0; pointer-events: none; }
label.chip:has(> input:checked) { background: var(--aktion-zart); border-color: var(--aktion); color: var(--aktion); font-weight: 600; }
label.chip:has(> input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.schalter--wort:has(> input:checked) .schalter__aus, .schalter--wort:not(:has(> input:checked)) .schalter__an { display: none; }
.schalter--wort .schalter__aus { color: var(--leise); }
/* Angaben einer Akte (Gesamtansicht 3.15): Beschriftung links, Wert rechts, eine Zeile je Angabe. */
.angabenliste { display: grid; margin: 0; }
.angabenliste > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s3); padding-block: var(--s2); border-top: 1px solid var(--linie); }
.angabenliste > div:first-child { border-top: 0; }
.angabenliste dt { color: var(--leise); }
.angabenliste dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
/* Belegung als Dashboard (Gesamtansicht 3.8, N11). */
.belegung__steuerung { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2); }
.plan[data-spalten] .planbahn { background-size: calc(100% / var(--spalten, 7)) 100%; background-image: linear-gradient(90deg, var(--linie) 1px, transparent 1px); }
.segment--verweise { display: inline-grid; grid-auto-flow: column; gap: var(--s1); padding: var(--s1); background: var(--flaeche-2); border-radius: var(--r); }
.segment--verweise > a { padding: var(--s2) var(--s4); border-radius: var(--r-s); color: var(--leise); text-decoration: none; font-weight: 600; text-align: center; }
.segment--verweise > a[aria-current="page"] { background: var(--flaeche); color: var(--aktion); box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 14%, transparent); }
/* Auslastung je Gruppe: Name und Anzahl, daneben sieben Tage ab heute in Ampelfarben (Florian 06.10.2026). */
.auslastung { display: grid; gap: var(--s2); margin-block: var(--s4); }
.auslastung__karte { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); }
.auslastung__name { display: grid; min-width: 0; }
.auslastung__name b { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auslastung__name small { color: var(--leise); font-size: 0.75rem; }
.vorschau { display: grid; grid-template-columns: repeat(14, minmax(2rem, 1fr)); gap: var(--s1); flex: 1; max-width: 46rem; margin: 0; padding: 0; list-style: none; }
.vorschau__datum { font-size: 0.65rem; opacity: 0.8; }
@media (max-width: 760px) { .auslastung__karte { flex-direction: column; align-items: stretch; } .vorschau { grid-template-columns: repeat(7, 1fr); } }
.vorschau__tag { display: grid; justify-items: center; min-width: 0; padding: var(--s1) 0; border-radius: var(--r-s); font-size: 0.7rem; line-height: 1.2; }
.vorschau__tag b { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.vorschau__tag--gruen { background: var(--frei-zart); color: var(--frei); }
.vorschau__tag--gelb { background: var(--gehalten-zart); color: var(--gehalten); }
.vorschau__tag--rot { background: var(--fehler-zart); color: var(--fehler); }
.planzeile--kopf { min-height: 0; background: var(--flaeche-2); }
.planzeile--kopf > header { padding-block: var(--s2); background: var(--flaeche-2); font-size: 0.8rem; color: var(--leise); }
.plankopf { display: flex; }
.plankopf > span { flex: 1; padding: var(--s2); font-size: 0.8rem; font-weight: 600; color: var(--leise); border-inline-start: 1px solid var(--linie); }
.buero__inhalt .slots > label:has(> input) { display: grid; justify-items: center; gap: var(--s1); }
.buchen__dauer { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s2); }
.buchen__dauer .eingabe { inline-size: 100%; min-inline-size: 0; }
.slots > .slots__kurs { min-width: 16rem; }
/* Datum aus der Woche mit Pfeilen (Florian 06.10.2026). */
.woche { display: grid; grid-template-columns: auto repeat(7, minmax(0, 1fr)) auto; gap: var(--s1); align-items: stretch; }
.woche__tag { display: grid; justify-items: center; padding: var(--s2) 0; border: 1px solid var(--linie); border-radius: var(--r-s);
  background: var(--flaeche); color: var(--tinte); text-decoration: none; line-height: 1.2; }
.woche__tag span, .woche__tag small { color: var(--leise); font-size: 0.75rem; }
.woche__tag b { font-size: 1.05rem; }
.woche__tag:hover { border-color: var(--aktion); }
.woche__tag--an { border-color: var(--aktion); background: var(--aktion-zart); color: var(--aktion); }
.woche__tag--an span, .woche__tag--an small { color: var(--aktion); }
.woche__tag--vorbei { opacity: 0.5; }
.woche__pfeil { display: grid; place-items: center; padding: 0 var(--s2); border: 1px solid var(--linie); border-radius: var(--r-s); color: var(--tinte); text-decoration: none; }
.woche__pfeil:hover { border-color: var(--aktion); color: var(--aktion); }
/* Website-Editor (Gesamtansicht 5.16, N56): Kopfleiste, eine Leiste links mit Reitern, rechts die Kundenseite. */
.ed { display: grid; gap: var(--s3); }
.ed__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r); }
.ed__seitenwahl { display: flex; align-items: center; gap: var(--s2); }
.ed__seitenwahl label { font-weight: 600; white-space: nowrap; }
.ed__geraet { display: inline-grid; grid-auto-flow: column; }
.ed__start button { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2); width: 100%; padding: var(--s2); border: 0; border-radius: var(--r-s); background: none; font: inherit; color: var(--tinte); text-align: start; cursor: pointer; }
.ed__start button:hover { background: var(--flaeche-2); }
.ed__start button small { grid-column: 2; color: var(--leise); font-size: 0.75rem; }
.ed__seitenwahl .eingabe { min-width: 12rem; }
.ed__geraet > button { border: 0; background: transparent; padding: var(--s1) var(--s3); border-radius: var(--r-s); font: inherit; font-weight: 600; color: var(--leise); cursor: pointer; }
.ed__geraet > button[aria-pressed="true"] { background: var(--flaeche); color: var(--aktion); box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 14%, transparent); }
.ed__stand { display: inline-flex; align-items: center; gap: var(--s1); color: var(--frei); font-size: 0.875rem; font-weight: 600; }
.ed__stand[data-stand="fehler"] { color: var(--fehler); }
.ed__stand[data-stand="speichert"] { color: var(--leise); }
.ed__rechts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-inline-start: auto; }
.ed__rechts form { margin: 0; }
.ed__rumpf { display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.ed__links { display: grid; gap: var(--s3); padding: var(--s3); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
  position: sticky; top: var(--s3); max-height: calc(100vh - 6rem); overflow: auto; }
.ed__titel { margin: 0; font-size: 1rem; }
.ed__untertitel { margin: var(--s2) 0 0; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); }
.ed__baum { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.ed__baum a { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: center; padding: var(--s2); border-radius: var(--r-s);
  color: var(--tinte); text-decoration: none; }
.ed__baum a small { grid-column: 2; color: var(--leise); font-size: 0.75rem; }
.ed__baum a:hover { background: var(--flaeche-2); }
.ed__baum a[aria-current] { background: var(--aktion-zart); color: var(--aktion); font-weight: 600; }
.ed__baum a.aus { opacity: 0.55; }
.ed__baum li[data-block] { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.ed__baum li[data-block] > a { flex: 1; min-width: 0; }
.ed__baum li[data-block][aria-current] > a { background: var(--aktion-zart); color: var(--aktion); }
.ed__mehr > summary { list-style: none; }
.ed__mehr > summary::-webkit-details-marker { display: none; }
.ed__mehr[open] > summary { margin-bottom: var(--s2); }
.ed__fuss { margin: 0; font-size: 0.875rem; }
.ed__leinwand { min-width: 0; }
@media (max-width: 900px) { .ed__rumpf { grid-template-columns: 1fr; } .ed__links { position: static; max-height: none; } }
.buero__inhalt .ed__geraet > button, .buero__inhalt .ed__start button { border: 0; box-shadow: none; min-height: 0; }
.buero__inhalt .ed__geraet > button[aria-pressed="true"] { box-shadow: 0 1px 2px color-mix(in srgb, var(--tinte) 14%, transparent); }