/* Gastgeber-Dashboard – eigenes CSS, keine Bibliothek. Regeln: docs/gestaltung.md.
   Reihenfolge: Tokens · Grundlagen · Grundgerüst und Navigation · Seitenkopf und Raster · Abschnitte und Listen ·
   Etiketten und Angaben · Bedienelemente (Knöpfe, Auswahl, Felder) · Zustände · Heute · Monatskopf ·
   Buchungen · Häuser · Menü · Nachrichten · Bewegung · Druck. Bereiche ergänzen in bereiche/<bereich>.css.
   Abstände im 4er-Raster (4, 8, 12, 16, 24, 32, 48 px); Rundungen nur --r, --r-klein und 999px (Pillen). */

/* ---------- Tokens ---------- */

/* Farben (Regel 1): neutrale Flächen, eine Textfarbe und eine gedämpfte, Blau nur als Akzent (Links, Hauptknopf,
   Auswahl). Grün/Gelb/Rot nur für Zustände. Kontrast AA hell und dunkel (gemessen, docs/gestaltung.md). */
:root {
  color-scheme: light;
  --hg: #f3f5f8;
  --flaeche: #ffffff;
  --flaeche-2: #edf0f4;
  --text: #18202b;
  --text-2: #586272;
  --linie: #dde2e9;
  --feldrand: #8a94a3;
  --akzent: #1f5fbf;
  --akzent-text: #ffffff;
  --akzent-weich: #e7effb;
  --fokus: #0b4f9c;
  --warn: #b45309;
  --warn-hg: #fdf3dc;
  --warn-linie: #e0a93b;
  --fehler: #a3231a;
  --fehler-hg: #fdecea;
  --fehler-linie: #e06b5f;
  /* Etiketten (Pillen) mit Achtung- bzw. Fehler-Ton: Fläche, Text, Symbol. Dunkel als kräftig gefüllte Pille mit
     dunkler Schrift – dunkles Gelb und dunkles Rot wirken auf dunklem Grund braun. */
  --warn-etikett: #fdf3dc;
  --warn-etikett-text: #18202b;
  --warn-etikett-symbol: #b45309;
  --fehler-etikett: #fdecea;
  --fehler-etikett-text: #a3231a;
  --gut: #1d6b3a;
  --gut-hg: #e2f3e7;
  --gut-linie: #7cc095;
  --info-hg: #eaf1fb;
  --info-linie: #9bb8e3;
  --frei: #ffffff;
  --haus-1: #0e7490;
  --haus-1-weich: #d4eef4;
  --haus-2: #c2410c;
  --haus-2-weich: #fbe3d6;
  --haus-3: #6a4c9c;
  --haus-3-weich: #e7def3;
  --haus-4: #3b7a3a;
  --haus-4-weich: #dcefdb;
  --haus-5: #8b3a62;
  --haus-5-weich: #f3dbe7;
  --schatten: none;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: var(--schrift);
  /* Schriftstufen (Regel 2), rem, damit vergrößerte Schrift (Textzoom 200 %) überall greift:
     14/15 klein · 16 Nebentext · 17 Text · 20 Abschnitt · 22 Zweitzahl · 28 Titel · 40 Hauptzahl */
  --t-klein: 0.875rem;
  --t-basis: 1rem;
  --t-text: 1.0625rem;
  --t-abschnitt: 1.25rem;
  --t-gross: 1.375rem;
  --t-titel: 1.75rem;
  --t-zahl: 2.5rem;
  /* Gewichte (Regel 3): 400 Text, 500 Namen/Etiketten/Knöpfe, 600 nur Überschriften und Hauptzahlen */
  --g-mittel: 500;
  --g-titel: 600;
  --r: 10px;
  --r-klein: 8px;
  --seitenrand: 16px;
  --nav-hoehe: 68px;
  /* Fokusrahmen (Tastatur): überall dieselbe Breite und derselbe Abstand; wo außen kein Platz ist (seitlich
     scrollende Flächen), liegt er mit negativem Abstand innen. */
  --fokus-breite: 3px;
  --fokus-abstand: 2px;
}
/* Am PC ist Kleinschrift etwas größer (15 px statt 14 px). */
@media (min-width: 1024px) { :root { --t-klein: 0.9375rem; } }
@media (max-width: 380px) { :root { --seitenrand: 12px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    color-scheme: dark;
    --hg: #0f1319;
    --flaeche: #171c24;
    --flaeche-2: #212834;
    --text: #e7ecf2;
    --text-2: #a7b1bf;
    --linie: #2d3542;
    --feldrand: #6b7686;
    --akzent: #8ab4ff;
    --akzent-text: #0a1630;
    --akzent-weich: #1a2a45;
    --fokus: #9cc7ff;
    --warn: #ffd58a;
    --warn-hg: #33270f;
    --warn-linie: #c9a03a;
    --fehler: #ffb4a9;
    --fehler-hg: #3a1714;
    --fehler-linie: #e5534b;
    --warn-etikett: #f2c94c;
    --warn-etikett-text: #0f1319;
    --warn-etikett-symbol: #0f1319;
    --fehler-etikett: #f47067;
    --fehler-etikett-text: #0f1319;
    --gut: #9fdcaf;
    --gut-hg: #15301f;
    --gut-linie: #3f7d52;
    --info-hg: #172338;
    --info-linie: #4f74a8;
    --frei: #171c24;
    --haus-1: #67c6dc;
    --haus-1-weich: #123540;
    --haus-2: #ffa07a;
    --haus-2-weich: #3d2216;
    --haus-3: #c4aaf0;
    --haus-3-weich: #2f2443;
    --haus-4: #9fd69c;
    --haus-4-weich: #1d3a1c;
    --haus-5: #eda4c6;
    --haus-5-weich: #40202f;
    --schatten: none;
  }
}

:root[data-theme="dunkel"] {
  color-scheme: dark;
  --hg: #0f1319;
  --flaeche: #171c24;
  --flaeche-2: #212834;
  --text: #e7ecf2;
  --text-2: #a7b1bf;
  --linie: #2d3542;
  --feldrand: #6b7686;
  --akzent: #8ab4ff;
  --akzent-text: #0a1630;
  --akzent-weich: #1a2a45;
  --fokus: #9cc7ff;
  --warn: #ffd58a;
  --warn-hg: #33270f;
  --warn-linie: #c9a03a;
  --fehler: #ffb4a9;
  --fehler-hg: #3a1714;
  --fehler-linie: #e5534b;
  --warn-etikett: #f2c94c;
  --warn-etikett-text: #0f1319;
  --warn-etikett-symbol: #0f1319;
  --fehler-etikett: #f47067;
  --fehler-etikett-text: #0f1319;
  --gut: #9fdcaf;
  --gut-hg: #15301f;
  --gut-linie: #3f7d52;
  --info-hg: #172338;
  --info-linie: #4f74a8;
  --frei: #171c24;
  --haus-1: #67c6dc;
  --haus-1-weich: #123540;
  --haus-2: #ffa07a;
  --haus-2-weich: #3d2216;
  --haus-3: #c4aaf0;
  --haus-3-weich: #2f2443;
  --haus-4: #9fd69c;
  --haus-4-weich: #1d3a1c;
  --haus-5: #eda4c6;
  --haus-5-weich: #40202f;
  --schatten: none;
}

/* ---------- Grundlagen ---------- */

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

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

body {
  margin: 0;
  background: var(--hg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--t-text);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 8px; overflow-wrap: anywhere; }
h1 { font-family: var(--schrift-titel); font-size: var(--t-titel); font-weight: var(--g-titel); letter-spacing: -0.01em; }
h2 { font-size: var(--t-abschnitt); font-weight: var(--g-titel); }
h3 { font-size: var(--t-text); font-weight: var(--g-titel); }
p { margin: 0 0 8px; }
ul, ol { margin: 0; padding: 0; }
dl { margin: 0; }
a { color: var(--akzent); }
strong, b { font-weight: var(--g-mittel); }

.klein { font-size: var(--t-klein); }
.gedaempft { color: var(--text-2); }
.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.ohne-umbruch { white-space: nowrap; }
/* Datum als Einheit: rückt als Ganzes in die nächste Zeile, bricht nur in sehr schmalen Spalten (320 px, 200 % Text). */
.datum-einheit { display: inline-block; }
.aufzaehlung { display: inline; }
/* Wischen nur erwähnen, wo es Berührung gibt. */
@media (hover: hover) and (pointer: fine) { .nur-beruehrung { display: none; } }

:focus-visible { outline: var(--fokus-breite) solid var(--fokus); outline-offset: var(--fokus-abstand); border-radius: 6px; }
main:focus { outline: none; }

.sprung {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  background: var(--flaeche); color: var(--text); padding: 12px 16px; border-radius: var(--r-klein);
  min-height: 44px;
}
.sprung:focus { top: 12px; }

.symbol { width: 24px; height: 24px; flex: none; }

/* ---------- Grundgerüst und Navigation ---------- */

main {
  display: block;
  padding: 16px var(--seitenrand) calc(var(--nav-hoehe) + 32px + env(safe-area-inset-bottom));
  max-width: 1180px;
  margin: 0 auto;
}
body.schlicht main { padding-bottom: 32px; max-width: 560px; }

.marke {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--schrift-titel); font-size: var(--t-text); font-weight: var(--g-titel);
}
.marke-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r);
  background: var(--akzent); color: var(--akzent-text); font-family: var(--schrift);
}

/* Sprünge und Fokus (z. B. Antwortfeld nach einem Fehler) landen am Handy nicht hinter der unteren Leiste. */
html { scroll-padding-bottom: calc(var(--nav-hoehe) + 32px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { html { scroll-padding-bottom: 0; } }

/* Navigation: Handy unten eine Reihe, PC links in Gruppen mit dem Konto unten */
.hauptnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--flaeche); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.hauptnav .marke { display: none; }
/* Handy: Gruppen und Listen lösen sich auf, alle sichtbaren Einträge bilden eine Reihe. */
.nav-bereiche { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 0 4px; }
.nav-gruppe, .nav-bereiche .nav-liste, .konto-text { display: contents; }
.nav-liste { list-style: none; }
.nav-gruppe-titel, .konto-kreis, .konto-name { display: none; }
.nav-liste .nur-pc { display: none; }
.nav-liste a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--nav-hoehe); padding: 4px 0; color: var(--text-2); text-decoration: none; overflow: hidden;
  font-size: var(--t-klein); font-weight: var(--g-mittel);
}
.nav-wort { font-size: var(--t-klein); hyphens: manual; text-align: center; line-height: 1.15; }
.nav-liste .aktiv-handy a { color: var(--akzent); }
.nav-liste .aktiv-handy a .symbol { stroke-width: 2.6; }
.nav-liste .aktiv-handy a .nav-wort { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

@media (min-width: 1024px) {
  body.mit-nav { padding-left: 264px; }
  .hauptnav {
    top: 0; right: auto; width: 264px; border-top: 0; border-right: 1px solid var(--linie);
    padding: 16px 12px; display: flex; flex-direction: column; overflow-y: auto;
  }
  .hauptnav .marke { display: flex; margin: 4px 8px 24px; }
  .hauptnav .marke span:last-child { white-space: nowrap; font-size: var(--t-basis); }
  .nav-bereiche { display: flex; flex-direction: column; gap: 16px; flex: 1 0 auto; padding: 0; }
  .nav-gruppe { display: flex; flex-direction: column; }
  .nav-bereiche .nav-liste { display: flex; flex-direction: column; gap: 8px; padding: 0; }
  .nav-gruppe-titel { display: block; margin: 0 12px 4px; color: var(--text-2); font-weight: var(--g-mittel); }
  .nav-liste .nur-pc { display: block; }
  .nav-liste .nur-handy { display: none; }
  .nav-liste a {
    flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px;
    padding: 12px; border-radius: var(--r-klein); font-size: var(--t-basis);
  }
  .nav-wort { font-size: var(--t-basis); }
  .nav-liste .aktiv-handy a { color: var(--text-2); }
  .nav-liste .aktiv-handy a .nav-wort { text-decoration: none; }
  .nav-liste .aktiv-handy a .symbol { stroke-width: 2; }
  .nav-liste .aktiv-pc a, .nav-liste .aktiv-pc.aktiv-handy a { background: var(--akzent-weich); color: var(--text); }
  .nav-liste .aktiv-pc a .symbol { color: var(--akzent); stroke-width: 2.6; }
  /* Unten links: die eigene Person; ein Klick führt zu „Konto & Hilfe“. */
  .nav-unten { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linie); }
  .nav-unten .symbol { display: none; }
  .nav-unten a { min-height: 56px; padding: 8px 12px; }
  .konto-kreis {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--akzent-weich); color: var(--text); font-size: var(--t-basis); font-weight: var(--g-mittel);
  }
  .konto-text { display: flex; flex-direction: column; min-width: 0; }
  .konto-name {
    display: block; color: var(--text); font-weight: var(--g-mittel); font-size: var(--t-basis);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-unten .nav-wort { font-size: var(--t-klein); font-weight: 400; text-align: left; }
  main { padding: 32px 40px 48px; }
}

.offline-hinweis {
  position: sticky; top: 0; z-index: 30; display: flex; gap: 12px; align-items: center;
  padding: 12px 16px; background: var(--warn-hg); color: var(--text); border-bottom: 2px solid var(--warn-linie);
  font-size: var(--t-basis); font-weight: var(--g-mittel);
}
.offline-hinweis[hidden] { display: none; }

/* ---------- Seitenkopf und Raster ---------- */

/* Ein Seitenkopf für alle Seiten: Titel, Unterzeile, Stand. Am PC steht „Stand“ rechts in der Titelzeile. */
.seitenkopf { margin-bottom: 16px; }
@media (min-width: 1024px) { .seitenkopf { margin-bottom: 24px; } }
.unterzeile { color: var(--text-2); margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.unterzeile:has(> .haus-punkt) { display: block; }
.unterzeile > .haus-punkt { margin-right: 8px; }
.stand { color: var(--text-2); margin: 4px 0 0; }
@media (min-width: 1024px) {
  .seitenkopf:not(.kopf-heute):has(> .stand) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline;
  }
  .seitenkopf:not(.kopf-heute) > :not(.stand) { grid-column: 1; }
  /* Ein langer Stand bricht rechts um, statt der Überschrift die Breite zu nehmen. */
  .seitenkopf:not(.kopf-heute) > .stand { grid-column: 2; grid-row: 1 / span 2; margin: 0; text-align: right; max-width: 40ch; }
  .seitenkopf.kopf-heute > .stand { flex-basis: auto; margin: 0 0 0 auto; }
}

/* Seitenaufbau (Regel 6): oben die Hauptsache, dann eine Kachelreihe gleicher Höhe, dann Details.
   Kachelreihe: nebeneinanderstehende Kacheln beginnen oben gleich und sind gleich hoch (align-items: stretch). */
.kachelreihe { display: grid; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.kachelreihe > .karte { margin-block: 0; }
/* Vier Kennzahlen: am Handy zwei je Reihe als kleine Kacheln mit Abstand zum Rand. */
.kachelreihe.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 599px) {
  .kachelreihe.vier > .karte { margin-inline: 0; border-radius: var(--r); border-inline: 1px solid var(--linie); padding: 12px; }
}
@media (min-width: 1024px) {
  .kachelreihe { gap: 24px; margin-bottom: 24px; }
  .kachelreihe.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachelreihe.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kachelreihe.vier { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 24px; }
  .kachelreihe.breit-schmal { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* Titel über einer Reihe (gleich wie Abschnittstitel, aber ohne Kachel). */
.reihe-titel { font-size: var(--t-abschnitt); margin: 0 0 12px; }

/* Zwei Spalten: am PC bilden die Spalten Zeilen. Der n-te Block links und rechts beginnt auf gleicher Höhe und
   ist gleich hoch; nichts verrutscht, wenn eine Spalte mehr Text hat. */
.raster-zwei { display: grid; gap: 16px; margin-bottom: 16px; }
.spalte { display: grid; gap: 16px; align-content: start; }
.raster-zwei .karte { margin-block: 0; }
@media (min-width: 1024px) {
  .raster-zwei {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch;
    grid-auto-flow: row dense; margin-bottom: 24px;
  }
  .raster-zwei > .spalte { display: contents; }
  .raster-zwei > .spalte:first-child > * { grid-column: 1; }
  .raster-zwei > .spalte:nth-child(2) > * { grid-column: 2; }
  .raster-zwei > .spalte > :not(.karte) { align-self: start; }
}

/* ---------- Abschnitte und Listen ---------- */

/* Abschnitte sind Kacheln (Regel 5): weiße Fläche auf grauem Grund mit Haarlinie, ohne Schatten. Getrennt wird
   immer gleich; keine Kachel in einer Kachel. Am Handy reichen Kacheln bis an den Rand (Bänder). */
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
  padding: 16px; margin: 0 0 16px; min-width: 0;
}
.karte .karte:not(a) { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
@media (max-width: 599px) {
  .karte:not(a) { margin-inline: calc(-1 * var(--seitenrand)); border-radius: 0; border-inline: 0; }
  .karte .karte:not(a) { margin-inline: 0; }
}
@media (min-width: 1024px) { .karte { padding: 24px; margin-bottom: 24px; } }
.karte > h2 { font-size: var(--t-abschnitt); text-transform: none; color: var(--text); margin-bottom: 12px; }
.karte > :last-child { margin-bottom: 0; }
/* Die eine hervorgehobene Kachel je Seite (z. B. nächste Anreise): hebt sich durch Größe der Zahl ab, nicht durch
   eine andere Fläche. */
.karte.betont { border-color: var(--linie); }

/* Kennzahl-Kachel (Regel 7): Beschriftung klein und gedämpft, Zahl groß, Erklärung klein darunter. */
.kennzahl-kachel { display: grid; align-content: start; gap: 4px; }
.kennzahl-kachel > .kennzahl-titel, .kennzahl-kachel dt { margin: 0; color: var(--text-2); font-size: var(--t-basis); font-weight: 400; }
.kennzahl-kachel dd { margin: 0; }
.kennzahl-wert {
  margin: 0; font-size: var(--t-titel); font-weight: var(--g-titel); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.kennzahl-kachel .basis, .kennzahl-unter { margin: 0; color: var(--text-2); font-size: var(--t-basis); }

/* Listen gleichartiger Einträge: randlos, Zeilen durch Haarlinien getrennt. Zwischen tippbaren Zeilen bleiben
   mindestens 8 px (4 px oben und unten in jeder Zeile). */
.karten { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.karte > .karten { border-top: 0; }
.karten > li { border-bottom: 1px solid var(--linie); padding-block: 4px; }
a.karte {
  display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; min-height: 44px;
  padding: 12px 4px; border: 0; border-radius: 0; background: transparent; margin: 0;
}
a.karte:hover { background: var(--flaeche-2); }
.karte-inhalt { display: grid; gap: 4px; flex: 1; min-width: 0; }
.karte-zeile { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.karte-titel { font-weight: var(--g-mittel); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Nur der Titel einer Zeile ist hervorgehoben; Haus und Portal stehen in normaler Schrift. */
.karte-zeile strong { font-weight: 400; }
.karte-pfeil { color: var(--text-2); display: flex; }

/* Hausfarbe: Punkt neben dem Namen, nie als Seitenstreifen. */
.haus-marke, .haus-punkt {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none;
  background: var(--hausfarbe, var(--akzent));
}
.haus-marke { align-self: flex-start; margin-top: 8px; }
.haus-1 { --hausfarbe: var(--haus-1); --hausweich: var(--haus-1-weich); }
.haus-2 { --hausfarbe: var(--haus-2); --hausweich: var(--haus-2-weich); }
.haus-3 { --hausfarbe: var(--haus-3); --hausweich: var(--haus-3-weich); }
.haus-4 { --hausfarbe: var(--haus-4); --hausweich: var(--haus-4-weich); }
.haus-5 { --hausfarbe: var(--haus-5); --hausweich: var(--haus-5-weich); }

/* ---------- Etiketten und Angaben ---------- */

/* Eine Etikett-Form; die Ton-Klasse trägt die Bedeutung (Regel 11). */
.etikett {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-basis); font-weight: var(--g-mittel); line-height: 1.4;
  padding: 2px 8px; border-radius: 999px; background: var(--flaeche-2); color: var(--text); max-width: 100%;
}
.etikett .symbol { width: 16px; height: 16px; }
.etikett-storno { background: var(--flaeche-2); color: var(--text-2); }
.etikett-fehler { background: var(--fehler-etikett); color: var(--fehler-etikett-text); }
/* Achtung-Töne: Die Fläche (und ein Symbol) tragen den Zustand, die Schrift bleibt dunkel bzw. in Textfarbe – Gelb als
   Schrift wirkt braun. */
.etikett-wechsel { background: var(--warn-etikett); color: var(--warn-etikett-text); }
/* Symbole im Etikett in dessen Ton, auch in Zeilen, die Symbole sonst blau färben (.karte-zeile .symbol). */
.etikett.etikett-wechsel .symbol { width: 16px; height: 16px; color: var(--warn-etikett-symbol); }
.etikett.etikett-fehler .symbol { width: 16px; height: 16px; color: inherit; }
.etikett-neu { background: var(--akzent); color: var(--akzent-text); }

.angaben { display: grid; gap: 8px; margin-bottom: 12px; }
.angaben div { display: grid; grid-template-columns: minmax(7.5em, 38%) 1fr; gap: 8px; }
.angaben dt { color: var(--text-2); }
.angaben dd { margin: 0; font-weight: 400; font-variant-numeric: tabular-nums; }
.angaben-kurz div { grid-template-columns: 1fr; gap: 0; }
@media (max-width: 380px) { .angaben div { grid-template-columns: 1fr; gap: 0; } }

.zahl-gross { font-size: var(--t-titel); font-weight: var(--g-titel); font-variant-numeric: tabular-nums; }
.zahl-mittel { font-size: var(--t-gross); font-weight: var(--g-titel); }

/* ---------- Bedienelemente ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 16px; border-radius: var(--r-klein); border: 1px solid var(--akzent);
  background: var(--akzent); color: var(--akzent-text); font: inherit; font-size: var(--t-basis); font-weight: var(--g-mittel);
  text-decoration: none; cursor: pointer;
}
.knopf-zweit { background: var(--flaeche); color: var(--akzent); }
/* Bestätigen in einer Rückfrage vor einem riskanten Schritt: zweitrangig im Fehlerton, „Abbrechen“ ist der Hauptknopf. */
.knopf-zweit.knopf-heikel { color: var(--fehler); border-color: var(--fehler); }
.knopf-breit { width: 100%; }
.knopf:disabled { opacity: 0.55; cursor: not-allowed; }
/* Offline: Links zu Formularen (data-braucht-netz) sind wie gesperrte Knöpfe erkennbar inaktiv. */
a[data-braucht-netz][aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; text-decoration: none; }
.knopf-rund {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 50%; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
}

.zurueck {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-bottom: 4px;
  color: var(--akzent); font-weight: var(--g-mittel); text-decoration: none;
}
.textlink { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: var(--g-mittel); text-decoration: none; }
.textlink .symbol { width: 20px; height: 20px; }

/* Auswahl (Regel 15): Umschalter und Reiter (Ansichten), Pillen (Filter, Häuser), Optionsfelder (fieldset.wahl)
   teilen eine Optik. Nicht gewählt: Fläche mit feiner Linie. Gewählt: 2 px Akzentrand und --akzent-weich
   (der zweite Pixel als Schatten nach innen, damit nichts springt). Fokus: der Ring der ganzen Auswahl. */
.umschalter, .reiter, .pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
:is(.umschalter, .reiter, .pillen) a, .wahl-option, .wahl-pille {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--flaeche); color: var(--text);
  text-decoration: none; font-size: var(--t-basis); font-weight: var(--g-mittel); cursor: pointer;
}
.pillen a, .wahl-pille { border-radius: 999px; }
:is(.umschalter, .reiter, .pillen) a:hover, .wahl-option:hover, .wahl-pille:hover { background: var(--flaeche-2); }
:is(.umschalter, .reiter, .pillen) a[aria-current="page"],
.wahl-option:has(input:checked), .wahl-pille:has(input:checked) {
  border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); background: var(--akzent-weich);
}
.reiter a { flex: 1; justify-content: center; }
.pillen { margin-bottom: 16px; }
/* Viele Filter (Aufgaben): am Handy eine Zeile zum Wischen statt drei Zeilen Pillen (Regel 14). Der Innenabstand oben
   und unten hält Platz für den Fokusring frei. */
@media (max-width: 1023px) {
  .pillen.quer {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--seitenrand)); padding: 4px var(--seitenrand); scroll-padding-inline: var(--seitenrand);
  }
  .pillen.quer::-webkit-scrollbar { display: none; }
  .pillen.quer a { flex: none; white-space: nowrap; }
}

/* Bedienzeile (Buchungen): am Handy untereinander, am PC Reiter und Häuser in einer Zeile. Den Umschalter
   Kalender/Liste braucht der PC nicht, die Leiste hat beide Ziele. */
.bedienzeile .pillen { margin-bottom: 12px; }
/* Am Handy steht der Umschalter rechts in der Titelzeile und zeigt nur den Weg zur anderen Ansicht (Regel 14:
   vor dem Inhalt höchstens eine Zeile Reiter/Filter und eine Suche). */
@media (max-width: 1023px) {
  .seitenkopf:has(> .umschalter) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  }
  .seitenkopf > .umschalter { grid-column: 2; grid-row: 1; margin: 0; }
  .seitenkopf > .umschalter a[aria-current="page"] { display: none; }
  .seitenkopf:has(> .umschalter) > h1 { grid-column: 1; grid-row: 1; margin: 0; }
  .seitenkopf:has(> .umschalter) > :not(.umschalter, h1) { grid-column: 1 / -1; }
}
/* Suche am Handy: das Feld trägt seinen Namen als Platzhalter, die Beschriftung bleibt für Vorleser. */
@media (max-width: 1023px) {
  .suche > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Trefferliste der Buchungen als Kachel; die Zahl der Treffer steht klein oben in der Kachel. */
.trefferkarte > .treffer-zahl { margin: 0 0 4px; }
.trefferkarte > .karten { border-top: 0; }
@media (min-width: 1024px) {
  .umschalter { display: none; }
  .bedienzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
  .bedienzeile .reiter { margin: 0; }
  .bedienzeile .reiter a { flex: none; }
  .bedienzeile .pillen { margin: 0; }
}

/* Optionsfelder: der Punkt zeigt die Wahl zusätzlich zur Fläche. */
.wahl { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.wahl legend { font-weight: var(--g-mittel); margin-bottom: 4px; padding: 0; }
.wahl-option { display: flex; gap: 12px; min-height: 48px; font-size: var(--t-text); font-weight: 400; }
.wahl-option input, .wahl-pille input {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: none;
  border: 2px solid var(--text-2); border-radius: 50%; display: grid; place-content: center;
}
.wahl-pille input { width: 20px; height: 20px; }
:is(.wahl-option, .wahl-pille) input:checked { border-color: var(--akzent); }
:is(.wahl-option, .wahl-pille) input:checked::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--akzent);
}
.wahl-pille input:checked::before { width: 10px; height: 10px; }
:is(.wahl-option, .wahl-pille) input:focus-visible { outline: none; }
:is(.wahl-option, .wahl-pille):has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 4px; }
/* Kästchen (gemeinsamer Baustein): eckig mit Haken, nie rund wie ein Optionsfeld und nie ein gefülltes Quadrat. Gilt
   für Kästchen in Auswahl-Zeilen (.wahl-option: Häuser im Anfrage-Formular, Portale einer Anleitung), „Weiß ich
   nicht“ im Fragebogen und „Weg stimmt so“ in der Klick-Anleitung. */
:is(.wahl-option, .wahl-pille, .weiss-nicht-feld, .weg-stimmt) input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: none;
  border: 2px solid var(--text-2); border-radius: 4px; display: grid; place-content: center; background: var(--flaeche);
}
:is(.wahl-option, .wahl-pille, .weiss-nicht-feld, .weg-stimmt) input[type="checkbox"]:checked { border-color: var(--akzent); background: var(--akzent); }
:is(.wahl-option, .wahl-pille, .weiss-nicht-feld, .weg-stimmt) input[type="checkbox"]:checked::before {
  content: ""; width: 6px; height: 12px; border-radius: 0; background: none;
  border: solid var(--akzent-text); border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg);
}
input[type="radio"], input[type="checkbox"] { font: inherit; }

/* Felder */
.suche { margin-bottom: 12px; }
.suche label { display: block; font-weight: var(--g-mittel); margin-bottom: 4px; font-size: var(--t-basis); }
.suche-zeile { display: flex; gap: 8px; }
@media (min-width: 1024px) { .suche { max-width: 36rem; } }
input[type="search"], input[type="text"] {
  flex: 1; min-width: 0; min-height: 48px; padding: 8px 12px; font: inherit; font-size: var(--t-text);
  color: var(--text); background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein);
  appearance: none; -webkit-appearance: none;
}
input[type="search"]:focus { border-color: var(--akzent); }
.feld-hilfe { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-2); }
.feld-hilfe .symbol { width: 18px; height: 18px; flex: none; }
/* Konto, Darstellung: mit Skript wechselt sie beim Wählen, „Speichern“ gibt es dann nicht; der Stand steht darunter. */
[data-darstellung-sofort] .knopf[hidden] { display: none; }
.darstellung-stand.ist-fehler { color: var(--fehler); }
.feld-fehler { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--fehler); font-weight: var(--g-mittel); }
.feld-fehler .symbol { flex: none; }

details.erklaerung { margin-top: 8px; }
details.erklaerung summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--akzent); font-weight: var(--g-mittel);
  font-size: var(--t-basis);
}
details.erklaerung p { color: var(--text-2); }
/* Aufklapp-Erklärung direkt vor einem Link: 8 px Abstand zwischen den Tippzielen (iCal-Anreise auf Heute, M8). */
details.erklaerung + .textlink { margin-top: 8px; }

/* ---------- Zustände ---------- */

.hinweis {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r);
  border: 1px solid var(--info-linie); background: var(--info-hg); margin-bottom: 16px;
}
.hinweis p:last-child { margin-bottom: 0; }
.hinweis-titel { font-weight: var(--g-titel); }
.hinweis.warnung { border-color: var(--warn-linie); background: var(--warn-hg); color: var(--text); }
.hinweis.fehler { border-color: var(--fehler-linie); background: var(--fehler-hg); color: var(--text); }
/* Nur Titel und Symbol tragen den Zustand; der Text bleibt in Textfarbe (eine Textfarbe, Regel 1). */
.hinweis.warnung > .symbol { color: var(--warn); }
.hinweis.fehler .hinweis-titel, .hinweis.fehler > .symbol, .hinweis.fehler a { color: var(--fehler); }
.hinweis.erfolg { border-color: var(--gut-linie); background: var(--gut-hg); color: var(--text); }
.hinweis.erfolg .symbol { color: var(--gut); }
.hinweis.warnung a, .hinweis.fehler a { font-weight: var(--g-mittel); }
/* Knapper Hinweis (Heute): die nächste Anreise bleibt im ersten Bildschirm. */
.hinweis.kompakt { padding: 8px 12px; }
.hinweis.kompakt p { margin-bottom: 0; }
.hinweis.kompakt p, .hinweis.kompakt .textlink { font-size: var(--t-basis); }
.spalte > .hinweis { margin-bottom: 0; }
.verweise { list-style: none; display: grid; gap: 8px; }
.verweise a { display: inline-flex; align-items: center; min-height: 44px; }

.leer { text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; justify-items: start; align-items: center; }
.leer > * { grid-column: 1 / -1; margin: 0; }
/* Symbol in der Zeile der Überschrift, wie bei allen Leerzuständen (auch „Gibt es ab dem Paket S3“). */
.leer > .symbol { grid-column: 1; color: var(--akzent); width: 24px; height: 24px; }
.leer > .symbol + .leer-titel { grid-column: 2; }
.leer-titel { font-weight: var(--g-titel); font-size: var(--t-text); }
/* Ein Leerzustand anstelle des ganzen Seiteninhalts steht in einer Kachel wie jeder Abschnitt (Regel 5). */
/* In der Kundenansicht steht der Inhalt in einem gesperrten fieldset direkt unter main. */
:is(main, main > fieldset.nur-lesen) > .leer {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 16px; margin: 0 0 16px;
}
@media (max-width: 599px) {
  :is(main, main > fieldset.nur-lesen) > .leer { margin-inline: calc(-1 * var(--seitenrand)); border-radius: 0; border-inline: 0; }
}
@media (min-width: 1024px) { :is(main, main > fieldset.nur-lesen) > .leer { padding: 24px; margin-bottom: 24px; } }
.haken-liste { padding-left: 1.2em; }

.laedt { display: none; gap: 8px; padding: 8px 0; }
.htmx-request .laedt, .htmx-request.laedt { display: grid; }
.laedt p { font-size: var(--t-basis); font-weight: var(--g-mittel); margin: 0; }
.laedt-balken { display: block; height: 16px; border-radius: var(--r-klein); background: var(--flaeche-2); width: 100%; }
.laedt-balken.kurz { width: 60%; }
.htmx-request > :not(.laedt) { opacity: 0.45; }

/* ---------- Heute ---------- */

/* Überschrift und Datum in einer Zeile – die nächste Anreise bleibt am Handy im ersten Bildschirm. */
.kopf-heute { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; margin-bottom: 12px; }
.kopf-heute h1 { margin: 0; }
.kopf-heute .stand { flex-basis: 100%; }
/* Titel, die am Handy nur Vorleser hören (Platz über der nächsten Anreise) und am PC sichtbar sind. */
@media (max-width: 1023px) {
  .titel-pc {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Aufbau: „Zu erledigen“ als schmale Leiste über den Kacheln (am Handy Zeilen vor der Anreise), darunter die
   nächste Anreise (breit) neben „Heute und morgen“, dann „Nächste 7 Tage“ neben der Belegung – je gleich hoch. */
.heute-oben { margin-bottom: 12px; gap: 12px; }
@media (min-width: 1024px) { .heute-oben { margin-bottom: 24px; gap: 24px; } }
/* Weg unten in der Kachel, damit sie neben einer längeren Nachbarin nicht halb leer wirkt. */
.heute-morgen { display: flex; flex-direction: column; }
.heute-morgen > .weg-unten { margin-top: auto; align-self: flex-start; }
.hinweis-wege { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* „Zu erledigen“: Einträge bündig untereinander, je mit der Zahl vorne. Ohne Einträge steht die Überschrift
   neben „0 offen“. 8 px zwischen den Tippzielen. */
.erledigen { display: grid; row-gap: 8px; align-content: start; }
.karte.erledigen { padding-block: 8px; margin-bottom: 12px; }
@media (min-width: 1024px) { .karte.erledigen { padding-block: 16px; margin-bottom: 24px; } }
.erledigen:not(:has(.erledigen-weg)) { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
.erledigen > h2, .erledigen-zahl { margin: 0; }
.erledigen > .gedaempft { grid-column: 1 / -1; margin: 0 0 4px; font-size: var(--t-basis); }
.erledigen-weg {
  display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0;
  color: var(--text); text-decoration: none; border-radius: var(--r-klein);
}
.erledigen-weg:hover .erledigen-text > strong { color: var(--akzent); }
.erledigen-text { display: grid; line-height: 1.3; min-width: 0; }
.erledigen-alter { color: var(--text-2); }
.erledigen-weg .karte-pfeil { margin-left: auto; }

/* Nächste Anreise: die eine hervorgehobene Kachel. Das Datum ist die größte Zahl der Seite. */
.anreise-karte > h2 { margin-bottom: 8px; }
.anreise-haus { display: flex; align-items: center; gap: 8px; font-weight: var(--g-mittel); margin-bottom: 0; }
.anreise-wann { margin-bottom: 0; }
.anreise-wann .zahl-gross { line-height: 1.2; }
@media (min-width: 1024px) { .anreise-wann .zahl-gross { font-size: var(--t-zahl); } }
.anreise-zeit { font-weight: var(--g-mittel); margin-bottom: 8px; }
.anreise-wechsel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; }
.anreise-karte .angaben { margin-bottom: 0; gap: 4px; }
/* PC: Personen, Portal und Gast nebeneinander (Beschriftung über dem Wert). „Zu erledigen“ ist eine Leiste: die
   Einträge nebeneinander, getrennt durch eine Haarlinie; die Überschrift hören Vorleser (die Einträge sagen es). */
@media (min-width: 1024px) {
  .anreise-karte .angaben { display: flex; flex-wrap: wrap; gap: 8px 32px; max-width: none; margin-bottom: 8px; }
  .anreise-karte .angaben div { grid-template-columns: 1fr; gap: 0; min-width: 0; overflow-wrap: anywhere; }
  .karte.erledigen:has(.erledigen-weg) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 24px; }
  .karte.erledigen:has(.erledigen-weg) > h2 {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .karte.erledigen .erledigen-weg { flex: 1 1 280px; min-height: 56px; }
  .karte.erledigen .erledigen-weg + .erledigen-weg { border-left: 1px solid var(--linie); padding-left: 24px; border-radius: 0; }
  .karte.erledigen > .gedaempft { flex: 1 0 100%; }
}

.tag-titel { font-size: var(--t-basis); color: var(--text-2); margin: 12px 0 4px; }
.ereignisse { list-style: none; display: grid; gap: 8px; }
.ereignis { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.ereignis-art {
  display: inline-flex; align-items: center; gap: 4px; font-weight: var(--g-mittel); font-size: var(--t-basis);
  padding: 2px 12px 2px 8px; border-radius: 999px; background: var(--flaeche-2);
}
.ereignis-art .symbol { width: 18px; height: 18px; }
.ereignis.wechsel .ereignis-art { background: var(--warn-etikett); color: var(--warn-etikett-text); }

/* Farbpunkt bleibt neben langen Hausnamen. */
.wochenliste { list-style: none; display: grid; gap: 8px; }
.wochenliste li { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 4px 8px; }
.wochenliste .gedaempft { grid-column: 2; font-size: var(--t-basis); }

.belegung-zahl { margin: 0; }
.balken { display: block; width: 100%; height: 12px; margin: 8px 0; }
.balken-hg { fill: var(--flaeche-2); }
.balken-wert { fill: var(--akzent); }

/* ---------- Monatskopf und Zustände (auch Zahlen, Portale); der Kalender steht in bereiche/kalender.css ---------- */

.monatskopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.monatskopf h2 { margin: 0; text-align: center; flex: 1; }
/* Die Pfeile bleiben 48 px groß, auch wenn der Monat bei großer Schrift Platz braucht (Tippziele). */
.monatskopf > .knopf-rund { flex: none; }
.zustand { display: flex; align-items: center; gap: 8px; font-weight: var(--g-mittel); margin-bottom: 4px; }
.zustand .symbol { width: 20px; height: 20px; }
.zustand-frei { color: var(--haus-4); }
.zustand-belegt { color: var(--text); }
.zustand-doppel { color: var(--fehler); }
.zustand-unklar { color: var(--warn); }
.zustand-gesperrt { color: var(--text-2); }

/* ---------- Buchungen ---------- */

.treffer-zahl { color: var(--text-2); font-size: var(--t-basis); }
.buchung-karte.storniert .karte-titel span:first-child { text-decoration: line-through; }

/* Beträge rechtsbündig mit gleich breiten Ziffern (Regel 12). */
.angaben.betraege { max-width: 28rem; }
.angaben.betraege dd { text-align: right; }
/* Tabellen am PC aus demselben Markup (Regel 13): Spaltenköpfe nur für Sehende, jede Zeile trägt ihre Angaben. */
.tabellenkopf { display: none; }
@media (min-width: 1200px) {
  #trefferliste .tabellenkopf, #trefferliste .buchung-karte > .karte-inhalt {
    display: grid; grid-template-columns: minmax(9rem, 1.1fr) minmax(11rem, 1.1fr) minmax(15rem, 1.3fr) minmax(10rem, 0.9fr);
    column-gap: 16px; align-items: center;
  }
  #trefferliste .tabellenkopf { padding: 0 40px 8px 28px; color: var(--text-2); font-weight: var(--g-mittel); }
  #trefferliste .buchung-karte .karte-zeile { display: block; font-variant-numeric: tabular-nums; }
  #trefferliste .buchung-karte .karte-titel { display: flex; }
  #trefferliste .buchung-karte .etikett { white-space: nowrap; }
  #trefferliste .buchung-karte > .haus-marke { align-self: center; margin-top: 0; }
}

/* ---------- Häuser ---------- */

/* Je Haus eine Karte: oben das neueste geschickte Foto oder die Hausfarbe mit Haus-Symbol, darunter Name, Belegung,
   nächste Anreise und die Portale. Am Handy untereinander, ab dem Tablet nebeneinander, gleich hoch. */
/* Einzug der Angaben unter dem Namen: Kartenrand 16 px, Hauspunkt 12 px, Abstand 12 px. „Online auf“ und der Stand
   der Portale unter der Karte stehen bündig damit. */
.haus-raster { --haus-einzug: 40px; list-style: none; display: grid; gap: 16px; }
@media (min-width: 768px) { .haus-raster { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
@media (min-width: 1024px) { .haus-raster { gap: 24px; } }
.haus-raster > .haus-kachel { margin-block: 0; padding: 0 0 12px; overflow: hidden; }
a.karte.haus-karte { flex-wrap: wrap; align-items: flex-start; padding: 0 16px 4px; }
.haus-karte > .haus-punkt { margin-top: 8px; }
.haus-karte > .karte-pfeil { margin-top: 4px; }
.haus-bild {
  display: block; flex: 0 0 calc(100% + 32px); width: calc(100% + 32px); height: auto; margin: 0 -16px 8px; aspect-ratio: 21 / 9;
  object-fit: cover; object-position: 50% 100%; background: var(--flaeche-2);
}
@media (min-width: 768px) { .haus-bild { aspect-ratio: 16 / 9; } }
/* Ohne Foto eine neutrale Fläche mit Haus-Symbol: Hausfarben stehen nur als Punkt neben dem Namen (Regel 1). */
.haus-bild-leer { display: grid; place-items: center; background: var(--flaeche-2); color: var(--text-2); }
.haus-bild-leer > .symbol { width: 40px; height: 40px; }
/* Bei großer Schrift rutscht der Pfeil unter den Inhalt, statt die Zeile zu sprengen. */
.haus-karte .karte-inhalt { flex: 1 1 10em; }
.haus-karte .angaben { margin: 4px 0 0; gap: 4px; }
.haus-karte .angaben dd { font-variant-numeric: tabular-nums; }
.haus-karte .angabe-zusatz { display: block; color: var(--text-2); }

/* Haus-Detail: Wege unter dem Kopf, zwei Kennzahl-Kacheln (Anreise breit), dann Buchungen neben Fotos (gleich
   hoch), dann „Ihre Portale“. */
.karten > li:last-child { border-bottom: 0; }
.haus-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0 0 16px; }
/* Weg einer Kennzahl-Kachel (Portale, Kalender des Hauses) unten in der Kachel. */
.haus-kennzahlen > .karte { display: flex; flex-direction: column; }
.haus-kennzahlen .kachel-weg { margin-top: auto; padding-top: 4px; }
@media (min-width: 1024px) { .haus-wege { margin-bottom: 24px; } }
/* Am Handy untereinander (volle Breite, ohne Umbruch in den Unterzeilen), am Tablet nebeneinander. */
@media (min-width: 600px) and (max-width: 1023px) {
  .haus-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .haus-kennzahlen .kennzahl-wert { font-size: var(--t-gross); }
}
@media (min-width: 1024px) { .haus-kennzahlen .betont .kennzahl-wert { font-size: var(--t-zahl); } }
/* Fotos: Text oben, der Knopf unten in der Kachel – neben „Nächste Buchungen“ gleich hoch, ohne leeren Rest. Allein
   (ohne Buchungsdaten) ist der Knopf so breit wie sein Text; am Handy über die ganze Breite. */
.haus-fotos { display: flex; flex-direction: column; gap: 8px; }
.haus-fotos > p { margin: 0; }
.foto-tipps { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; color: var(--text-2); }
.foto-tipps li { position: relative; padding-left: 1.6em; }
.foto-tipps li::before { content: "✓"; content: "✓" / ""; position: absolute; left: 0; color: var(--text-2); }
.haus-fotos > .knopf { margin-top: auto; align-self: flex-start; }
.kachelreihe > .haus-fotos > .knopf { align-self: stretch; }
@media (max-width: 599px) { .haus-fotos > .knopf { align-self: stretch; } }
/* Vorschau der zuletzt geschickten Fotos: am Handy vier in einer Reihe, am PC in der schmalen Spalte zwei je Reihe. */
.foto-vorschau { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 32rem; }
.foto-vorschau img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-klein); background: var(--flaeche-2);
}
@media (min-width: 1024px) { .kachelreihe > .haus-fotos .foto-vorschau { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Menü (Mehr) ---------- */

.menue { list-style: none; display: grid; border-top: 1px solid var(--linie); }
.menue > li { border-bottom: 1px solid var(--linie); padding-block: 4px; }
.menue-eintrag > .symbol { color: var(--text-2); }
/* Konto oben und die Bereiche darunter je als Kachel; die Zeilen bringen ihren eigenen Innenabstand mit. */
.profil-karte, .menue-karte { padding-block: 4px; }
@media (min-width: 1024px) { .profil-karte, .menue-karte { padding-block: 8px; } }
.menue-karte > .menue { border-top: 0; }
.menue-karte > .menue > li:last-child { border-bottom: 0; }
.profil-kreis {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--akzent-weich); color: var(--text); font-weight: var(--g-mittel);
}

.anmeldekarte, .fehlerkarte { margin-top: 10vh; display: grid; gap: 12px; }
.anmeldekarte h1, .fehlerkarte h1 { margin-top: 8px; }

/* ---------- Nachrichten ---------- */

.faeden { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.faeden > li { border-bottom: 1px solid var(--linie); padding-block: 4px; }
.faden-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: center;
  padding: 12px 4px; min-height: 44px; color: inherit; text-decoration: none;
}
.faden-link:hover { background: var(--flaeche-2); }
.faden-link > span:not(.karte-pfeil) { grid-column: 1; }
.faden-link > .karte-pfeil { grid-column: 2; grid-row: 1 / span 3; }
.faden-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.faden-gast { font-weight: var(--g-mittel); }
.faden-alter, .faden-haus { color: var(--text-2); }
.faden-haus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.faden-auszug { color: var(--text-2); overflow-wrap: anywhere; }
.faden.ungelesen .faden-gast, .faden.ungelesen .faden-auszug { color: var(--text); }
.faden.ungelesen .faden-alter { color: var(--text); font-weight: var(--g-mittel); }
/* Gesprächsstand: Wartendes in Textfarbe und mittlerer Stärke, Erledigtes und Gespeichertes gedämpft. */
.faden-wartet { grid-column: 1; font-size: var(--t-basis); font-weight: var(--g-mittel); color: var(--text); }
.faden.erledigt .faden-wartet, .faden.beantwortet .faden-wartet { color: var(--text-2); font-weight: 400; }
.faden-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 4px; }
.faden-stand p { margin: 0; }
.faden-stand p .symbol { width: 20px; height: 20px; vertical-align: -4px; margin-right: 8px; }
.faden-stand .knopfzeile { margin: 0; }

.verlauf { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.blase { max-width: 92%; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--linie); }
.blase p { margin: 0; }
.vom-gast { background: var(--flaeche-2); justify-self: start; border-bottom-left-radius: 4px; }
.an-gast { background: var(--akzent-weich); justify-self: end; border-bottom-right-radius: 4px; border-style: dashed; border-color: var(--akzent); }
/* Gestrichelt heißt „Probelauf – nicht gesendet“; gesendete Antworten haben einen durchgezogenen Rand. */
.an-gast.gesendet { border-style: solid; }
.blase-wer { color: var(--text-2); overflow-wrap: anywhere; }
.blase-text { white-space: pre-line; overflow-wrap: anywhere; margin-top: 4px; }
.blase-stand { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: var(--g-mittel); color: var(--text-2); }
.blase-stand .symbol { width: 18px; height: 18px; flex: none; }

.antwort { display: grid; gap: 8px; }
.antwort label { font-weight: var(--g-mittel); }
.antwort textarea {
  width: 100%; min-height: 8em; padding: 8px 12px; font: inherit; font-size: var(--t-text); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein); resize: vertical;
}
.antwort textarea:focus { border-color: var(--akzent); }
.antwort textarea[aria-invalid="true"] { border-color: var(--fehler-linie); }
.antwort .knopf { justify-self: start; }
.buchungskopf .textlink { margin-top: -4px; }

/* ---------- Bewegung: nur ohne „reduzierte Bewegung“ ---------- */

@media (prefers-reduced-motion: no-preference) {
  a.karte, .knopf, :is(.umschalter, .reiter, .pillen) a, .wahl-option, .wahl-pille {
    transition: border-color 120ms ease, background-color 120ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- Druck ---------- */

@media print {
  .hauptnav, .sprung, .offline-hinweis, .knopf, .pillen, .umschalter, .reiter, .suche { display: none !important; }
  body.mit-nav { padding-left: 0; }
  main { padding: 0; max-width: none; }
  .karte { box-shadow: none; break-inside: avoid; }
}
/* ---------- Freigaben (M5) ---------- */
.etikett-wartet { background: var(--akzent); color: var(--akzent-text); }
.etikett-ok { background: var(--akzent-weich); color: var(--text); }
.freigabe-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 0; }
.freigabe-eintrag .freigabe-stand { margin: 4px 0 0; }

.freigaben-erledigt > h3 { font-size: var(--t-basis); color: var(--text-2); margin: 12px 0 4px; }

.freigabe-art { margin: 0 0 4px; }
.freigabe-inhalt { display: grid; gap: 12px; margin-bottom: 16px; }
.freigabe-inhalt h3 { margin: 0; }
.freigabe-meta { margin: 0; }
.freigabe-entwurf p, .freigabe-vorher { margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
.vorher-nachher { display: grid; gap: 12px 24px; }
/* Inhalt breiter als Verlauf und Entscheidung (3 : 2), damit „Bisher“ und „Neu“ nebeneinander Platz haben. */
@media (min-width: 1024px) { .freigabe-raster { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
@media (min-width: 720px) { .vorher-nachher { grid-template-columns: 1fr 1fr; } }
.freigabe-vorher { color: var(--text-2); }
.freigabe-grund { margin: 0; }
.freigabe-entscheiden { display: grid; gap: 16px; margin-bottom: 16px; }
.freigabe-entscheiden > h2 { margin: 0; }
.freigabe-entscheiden .knopfzeile { margin: 0; }
.rueckmeldung { display: grid; gap: 8px; }
.rueckmeldung label { font-weight: var(--g-mittel); }
.rueckmeldung textarea, .freigabe-formular textarea {
  width: 100%; min-height: 5em; padding: 8px 12px; font: inherit; font-size: var(--t-text); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein); resize: vertical;
}
.rueckmeldung textarea:focus { border-color: var(--akzent); }
.rueckmeldung textarea[aria-invalid="true"] { border-color: var(--fehler-linie); }
.rueckmeldung .knopfzeile { display: flex; flex-wrap: wrap; gap: 8px; }
.freigabe-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.freigabe-schritte p { margin: 0; }
.freigabe-kommentar { white-space: pre-line; overflow-wrap: anywhere; }
.zaehler {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; padding: 0 8px;
  border-radius: 999px; background: var(--akzent); color: var(--akzent-text); font-size: var(--t-basis); font-weight: var(--g-titel);
}
.vorschau > h2 { font-size: var(--t-basis); color: var(--text-2); margin-bottom: 8px; }
.vorschau .freigabe-stand { margin-bottom: 12px; }
.freigabe-anlass blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--linie); color: var(--text-2); }
.freigabe-anlass blockquote p { margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
.freigaben-aufgaben { margin: 0 0 12px; }
.freigabe-entscheiden .freigeben { display: grid; gap: 8px; margin-bottom: 8px; }
.freigabe-entscheiden .freigeben .feld-hilfe { margin: 0; }
.freigeben .nur-offline { display: none; }
.freigeben .knopf:disabled ~ .nur-online { display: none; }
.freigeben .knopf:disabled ~ .nur-offline { display: block; color: var(--warn); }
.freigabe-frist { margin: 4px 0 0; }
details.ablehnen > summary { list-style: none; cursor: pointer; }
details.ablehnen > summary::-webkit-details-marker { display: none; }
details.ablehnen[open] > summary { display: none; }
/* Offline: der Aufklapper wirkt wie die gesperrten Knöpfe (app.js sperrt den Knopf darin). */
details.ablehnen:has(button:disabled) > summary { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.ablehnen-frage { display: grid; gap: 8px; }
.ablehnen-frage p { margin: 0; }
.freigabe-formular input[type="date"], .freigabe-formular input[type="text"] {
  width: 100%; min-height: 48px; padding: 8px 12px; font: inherit; font-size: var(--t-text); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein);
}
.freigabe-formular input:focus { border-color: var(--akzent); }
.freigabe-formular, .rueckmeldung { grid-template-columns: minmax(0, 1fr); }
.freigabe-formular input { min-width: 0; max-width: 100%; }
.freigabe-formular .knopf { justify-self: stretch; }
/* Live-Vorschau im Betreuer-Formular: am Handy zwischen Feldern und Speichern-Knopf (zuklappbar), am PC daneben und
   mitlaufend; zugeklappt bekommt das Formular die volle Breite. Ohne Skript gibt es sie nicht; dann folgt der Knopf
   direkt den Feldern, und die Seite zeigt nach dem Speichern „So sieht der Kunde es“. */
.formular-mit-vorschau { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.formular-knopf { margin: 0; }
.live-vorschau { min-width: 0; border-top: 1px solid var(--linie); padding-top: 4px; }
.live-vorschau-klappe > summary {
  display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; list-style: none;
}
.live-vorschau-klappe > summary::-webkit-details-marker { display: none; }
.live-vorschau-klappe > summary::after {
  content: ""; width: 9px; height: 9px; margin: 0 8px 4px auto; flex: none;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg);
}
.live-vorschau-klappe[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.live-vorschau-klappe > summary h2 { margin: 0; font-size: var(--t-abschnitt); }
.live-vorschau-klappe > .feld-hilfe { margin: 0 0 16px; }
.live-vorschau-leer { margin: 0; }
.live-vorschau-hinweis > .hinweis { margin: 0 0 16px; }
.live-vorschau-kopf { margin-bottom: 4px; }
.live-vorschau-titel {
  margin: 0; font-family: var(--schrift-titel); font-size: var(--t-titel); font-weight: var(--g-titel); line-height: 1.25;
  overflow-wrap: anywhere; text-wrap: balance;
}
.live-vorschau-titel.gedaempft { font-family: inherit; font-size: var(--t-text); font-weight: 400; }
.live-vorschau .freigabe-stand { margin-bottom: 12px; }
@media (scripting: none) { .live-vorschau { display: none; } }
@media (min-width: 1024px) and (scripting: enabled) {
  .formular-mit-vorschau {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "formular vorschau" "knopf vorschau";
    grid-template-rows: auto 1fr; align-items: start; column-gap: 32px; row-gap: 16px;
  }
  .formular-mit-vorschau > form { grid-area: formular; }
  .formular-mit-vorschau > .formular-knopf { grid-area: knopf; }
  .formular-mit-vorschau > .live-vorschau {
    grid-area: vorschau; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
    border-top: 0; padding-top: 0;
  }
  .formular-mit-vorschau:has(.live-vorschau-klappe:not([open])) {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "formular" "vorschau" "knopf"; grid-template-rows: none;
  }
  .formular-mit-vorschau:has(.live-vorschau-klappe:not([open])) > .live-vorschau {
    position: static; max-height: none; border-top: 1px solid var(--linie); padding-top: 4px;
  }
}
/* Zähler in der PC-Leiste: ruhige Zahl rechts neben „Freigaben“, am Handy aus (dort zeigt „Mehr“ die Zahl). */
.nav-zaehler { display: none; }
@media (min-width: 1024px) {
  .nav-zaehler { display: inline-block; }
  .nav-zaehler:not(:empty) {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto; min-width: 1.6em;
    padding: 0 8px; border-radius: 999px; background: var(--akzent-weich); color: var(--text);
    font-size: var(--t-basis); font-weight: var(--g-mittel); font-variant-numeric: tabular-nums;
  }
}
/* Sprunglink „Zur Entscheidung“ nur am Handy; am PC steht die Entscheidung daneben. */
@media (min-width: 1024px) { .zur-entscheidung { display: none; } }
#t-entscheiden { scroll-margin-top: 16px; }
/* ---------- Zahlen / Monatsbericht (M4) ---------- */
.bericht-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
/* Monatswahl als eine Gruppe: Pfeile direkt am Monat, linksbündig. */
.bericht-leiste .monatskopf { flex: 0 1 auto; min-width: 0; justify-content: flex-start; gap: 8px; margin-bottom: 0; }
/* Feste Breite, damit die Pfeile beim Blättern nicht springen; bei großer Schrift darf der Monat umbrechen. */
.bericht-leiste .monatskopf h2 { flex: 0 1 9em; min-width: 0; }
.knopf-platz { display: inline-block; width: 48px; height: 48px; flex: none; }
.drucken[hidden] { display: none; }
.nur-druck { display: none; }
.reihe-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 12px; }
.reihe-kopf .reihe-titel, .reihe-kopf p { margin: 0; }
.zeitraum { color: var(--text-2); margin-bottom: 4px; }
.laufend { font-size: var(--t-basis); }
/* Vier gleich hohe Kacheln; die erste (Umsatz) trägt die Hauptzahl. Am Handy zwei je Reihe, Umsatz über die
   ganze Breite. */

.kennzahl dt { color: var(--text-2); font-weight: 400; font-size: var(--t-basis); }
.kennzahl dd { margin: 0; }
.kennzahl .zahl-gross { font-size: var(--t-zahl); line-height: 1.15; }
.kennzahl .zahl-mittel { font-size: var(--t-titel); line-height: 1.15; font-variant-numeric: tabular-nums; margin: 0; }
.kennzahl .basis { color: var(--text-2); font-size: var(--t-basis); }
.kennzahl .vergleich { color: var(--text); font-size: var(--t-basis); }
.vergleich-hinweis { color: var(--text-2); font-size: var(--t-basis); margin: 4px 0 0; }
.kennzahl .zahl-gross.unbekannt { font-size: var(--t-titel); }

#kennzahlen { margin-bottom: 16px; }
@media (min-width: 1024px) { #kennzahlen { margin-bottom: 24px; } }
.bericht-fuss { margin-top: 24px; }
#einnahmen > li:last-child, .nachweise > li:last-child, .haus-zahlen:last-of-type { border-bottom: 0; }
.kanalbalken { list-style: none; display: grid; gap: 12px; margin-top: 8px; }
.kanal-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.kanal-name { font-weight: var(--g-mittel); }
.kanal-wert { font-variant-numeric: tabular-nums; }
.kanalbalken .balken { margin: 8px 0 4px; }
.kanal-unter { color: var(--text-2); font-size: var(--t-basis); margin: 0; }
.einnahme-betrag { display: grid; justify-items: end; text-align: right; flex: none; max-width: 40%; }
.einnahme-wert { font-weight: var(--g-mittel); font-variant-numeric: tabular-nums; }
/* Handy: Betrag als eigene Zeile unter den Angaben, damit lange Namen nicht zerbrechen. */
@media (max-width: 599px) {
  a.karte.einnahme { display: grid; grid-template-columns: 12px minmax(0, 1fr) 24px; column-gap: 12px; row-gap: 4px; }
  .einnahme .haus-marke { grid-column: 1; grid-row: 1; }
  .einnahme .karte-inhalt { grid-column: 2; grid-row: 1; }
  .einnahme .einnahme-betrag {
    grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
    justify-items: start; text-align: left; max-width: none;
  }
  .einnahme .karte-pfeil { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
.haus-zahlen { border-bottom: 1px solid var(--linie); padding-block: 4px; }
.haus-zahlen summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 52px; padding: 4px;
  cursor: pointer; list-style: none;
}
.haus-zahlen summary::-webkit-details-marker { display: none; }
.haus-zahlen summary::after {
  content: ""; width: 9px; height: 9px; margin: 0 8px 4px auto; flex: none;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg);
}
.haus-zahlen[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.haus-zahlen-name { font-weight: var(--g-mittel); }
.haus-zahlen-kurz { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: var(--t-basis); }
.haus-zahlen .angaben { padding: 4px 4px 12px; }
/* Belegungsbalken in einer eigenen Zeile unter Name und Kurzangabe (der Pfeil bleibt in der ersten Zeile). */
.haus-zahlen summary > .haus-balken { order: 3; flex: 1 0 100%; margin: 0 0 4px; }
@media print { .haus-zahlen summary > .haus-balken { display: none; } }
.nachweise { list-style: none; display: grid; }
.nachweise li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.nachweis-datum { color: var(--text-2); min-width: 7.5em; font-variant-numeric: tabular-nums; }
.nachweis-text { flex: 1 1 14em; min-width: 0; }
.nachweis-haus { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--t-basis); }
@page bericht { size: A4; margin: 12mm 14mm 14mm; }
@media print {
  :root, :root:not([data-theme="hell"]), :root[data-theme="dunkel"] {
    color-scheme: light; --hg: #ffffff; --flaeche: #ffffff; --flaeche-2: #edf0f4; --text: #18202b; --text-2: #586272;
    --linie: #c3cad5; --akzent: #1f5fbf; --akzent-weich: #e7effb; --fehler: #a3231a; --warn: #7a4600;
    --haus-1: #0e7490; --haus-2: #c2410c; --haus-3: #6a4c9c; --haus-4: #3b7a3a; --haus-5: #8b3a62;
  }
  :root:has(.bericht-leiste) { font-size: 10pt; }
  body:has(.bericht-leiste) { page: bericht; line-height: 1.35; background: #fff; }
  .bericht .karte, .bericht-leer { break-inside: auto; }
  body:has(.bericht-leiste) main { padding: 0; }
  .bericht-leiste .knopf-rund, .knopf-platz, .bericht-fuss, .karte-pfeil { display: none !important; }
  .bericht-leiste .monatskopf { justify-content: flex-start; max-width: none; }
  .bericht-leiste .monatskopf h2 { text-align: left; }
  .nur-druck { display: block; color: var(--text-2); }
  .bericht .kachelreihe { display: block; margin: 0; }
  .bericht .karte { padding: 8px 0 2px; border: 0; border-radius: 0; margin: 0; }
  .bericht .kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .bericht .kennzahl { padding: 6px 0; border-top: 1px solid var(--linie); }
  .bericht .kennzahl.haupt { grid-column: auto; }
  .kennzahl .zahl-gross { font-size: 20pt; }
  .zahl-mittel { font-size: 14pt; }
  .karten a.karte, .einnahme { padding-block: 4px; min-height: 0; }
  .karten > li { padding-block: 0; break-inside: avoid; }
  .haus-zahlen summary { min-height: 0; padding: 4px 0; }
  .haus-zahlen summary::after { display: none; }
  .haus-zahlen::details-content { content-visibility: visible; display: contents; }
  .haus-zahlen { break-inside: avoid; }
  .haus-zahlen .angaben { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 0 0 6px; margin: 0; }
  .haus-zahlen .angaben div { display: flex; gap: 4px; }
  .haus-zahlen .angaben dt::after { content: ":"; }
  details.erklaerung::details-content { content-visibility: visible; display: contents; }
  details.erklaerung summary { min-height: 0; color: var(--text); }
  .kanalbalken { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px 18px; }
  .kanalbalken:has(li:nth-child(4)) { grid-template-columns: 1fr 1fr; }
  body:has(.bericht-leiste) { line-height: 1.28; }
  .bericht p, .seitenkopf { margin-bottom: 4px; }
  .karte-inhalt { gap: 0; }
  .nachweise li { padding: 4px 0; }
  .gebuehren li { padding: 3px 0; }
  .kanalbalken li, .nachweise li, .gebuehren li { break-inside: avoid; }
  .balken-wert { fill: var(--akzent); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .balken-hg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
  h2, h3 { break-after: avoid; }
}
@media (max-width: 599px) {
  .kennzahl .zahl-gross { font-size: var(--t-titel); }
  .kennzahl .zahl-mittel { font-size: var(--t-gross); }
}
/* Kurze Zeile in der Kennzahl-Kachel; die vollständige Rechenbasis steht sichtbar unter der Reihe. */
.kennzahl .kurz { color: var(--text-2); font-size: var(--t-basis); }
.rechenweg > .laufend { margin: 0 0 4px; }
.rechenbasis { color: var(--text-2); font-size: var(--t-basis); margin: 0; }
.rechenbasis > dl { margin: 8px 0 0; }
.kennzahlen.kachelreihe { margin-bottom: 12px; }
.rechenbasis dl { display: grid; gap: 4px; }
.rechenbasis dl > div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.rechenbasis dt { color: var(--text); }
.rechenbasis dd { margin: 0; flex: 1 1 20em; min-width: 0; }
.rechenbasis .vergleich-hinweis { margin-top: 8px; }
/* Der Satz „… läuft noch“ steht unter den Kennzahlen: Hauptsache oben, für Vorleser in derselben Reihenfolge. */
.kennzahlen + .rechenweg { margin-top: 0; }
/* ---------- M6 Wünsche & Fotos ---------- */
/* PC: „Wünsche & Fotos“ unter der Leiste, aussehend wie ein Eintrag (Handy: unter „Mehr“).
   Das Symbol kommt aus CSS (Maske), weil die Leiste genau ein SVG je Listeneintrag hat. */
.nav-aktion { display: none; }
@media (min-width: 1024px) {
  .nav-aktion {
    display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 8px; padding: 12px;
    border-radius: var(--r-klein); color: var(--text-2); font-size: var(--t-basis); font-weight: var(--g-mittel); text-decoration: none;
  }
  .nav-aktion::before {
    content: ""; width: 24px; height: 24px; flex: none; background: currentColor;
    -webkit-mask: var(--symbol-kamera) center / 24px 24px no-repeat; mask: var(--symbol-kamera) center / 24px 24px no-repeat;
  }
  .nav-aktion[aria-current="page"] { background: var(--akzent-weich); color: var(--text); }
  .nav-aktion[aria-current="page"]::before { background: var(--akzent); }
}
:root { --symbol-kamera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E"); }
.nav-aktion:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Formulare */
.formular, .hochladen { display: grid; gap: 8px; }
.formular .knopf, .hochladen .knopf { justify-self: start; }
.feld-titel { font-weight: var(--g-mittel); margin-top: 4px; }
.formular textarea {
  width: 100%; min-height: 8em; padding: 8px 12px; font: inherit; font-size: var(--t-text); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein); resize: vertical;
}
.formular textarea:focus, .hochladen input[type="text"]:focus, .antwort input[type="text"]:focus { border-color: var(--akzent); }
.formular textarea[aria-invalid="true"] { border-color: var(--fehler-linie); }
.antwort input[type="text"] { width: 100%; }
.wahl-text { display: grid; gap: 0; line-height: 1.35; }
.wahl-text .gedaempft { font-size: var(--t-basis); }

/* Hausauswahl als Pillen (Optik der Auswahl in app.css): in einer Zeile mit Umbruch, 8 px Abstand. */
.wahl.wahl-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl-pillen legend { width: 100%; }

/* Gestalteter Knopf zum Hochladen: die Dateiauswahl liegt unsichtbar im Knopf. Am Handy „Fotos vom Handy
   hochladen“, am PC (ab 1024 px) „Fotos hochladen“; der jeweils andere Text ist ganz ausgeblendet. */
.knopf-datei { position: relative; margin-top: 8px; min-height: 52px; padding-inline: 24px; }
.knopf-datei .knopf-text-pc { display: none; }
@media (min-width: 1024px) {
  .knopf-datei .knopf-text-handy { display: none; }
  .knopf-datei .knopf-text-pc { display: inline; }
}
.knopf-datei .symbol { width: 22px; height: 22px; }
.datei-eingabe {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; font: inherit; font-size: var(--t-basis);
}
.knopf-datei:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; }
.knopf-datei:has(.datei-eingabe:disabled) { opacity: 0.55; cursor: not-allowed; }

/* Fortschritt je Foto */
.fortschritt { list-style: none; display: grid; gap: 8px; margin: 4px 0 0; padding: 0; }
.fortschritt[hidden], .fortschritt-ergebnis[hidden] { display: none; }
.fortschritt li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.fortschritt-name { min-width: 0; display: grid; }
.fortschritt-datei { color: var(--text-2); overflow-wrap: anywhere; }
.fortschritt-wert { color: var(--text-2); font-variant-numeric: tabular-nums; }
.fortschritt progress {
  grid-column: 1 / -1; width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--flaeche-2); appearance: none; -webkit-appearance: none; accent-color: var(--akzent);
}
.fortschritt progress::-webkit-progress-bar { background: var(--flaeche-2); border-radius: 999px; }
.fortschritt progress::-webkit-progress-value { background: var(--akzent); border-radius: 999px; }
.fortschritt progress::-moz-progress-bar { background: var(--akzent); border-radius: 999px; }
.fortschritt .fertig .fortschritt-wert { color: var(--akzent); font-weight: var(--g-mittel); }
.fortschritt .fehlgeschlagen .fortschritt-wert { color: var(--fehler); font-weight: var(--g-mittel); }
.fortschritt .fehlgeschlagen progress::-webkit-progress-value { background: var(--fehler-linie); }
.fortschritt .fehlgeschlagen progress::-moz-progress-bar { background: var(--fehler-linie); }
.fortschritt-meldung { grid-column: 1 / -1; margin: 0; color: var(--fehler); font-weight: 400; }
.fortschritt-ergebnis {
  margin: 4px 0 0; padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--akzent);
  background: var(--akzent-weich); font-weight: var(--g-mittel);
}
.fortschritt-ergebnis.fehler { border-color: var(--fehler-linie); background: var(--fehler-hg); color: var(--fehler); }
.fortschritt-ergebnis a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--g-mittel); }

/* Fotoraster: quadratische Kacheln, 8 px Abstand. */
.foto-raster {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
  margin: 0 0 12px; padding: 0;
}
.foto-raster li { display: grid; gap: 8px; min-width: 0; }
.foto-link { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-klein); overflow: hidden; background: var(--flaeche-2); }
.foto-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-link:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.foto-ersatz {
  display: grid; place-content: center; justify-items: center; gap: 4px; padding: 8px; text-align: center;
  color: var(--text); text-decoration: none; font-size: var(--t-basis); font-weight: var(--g-mittel);
}
.foto-ersatz .gedaempft { font-weight: 400; line-height: 1.3; }
.foto-ersatz .symbol { color: var(--akzent); }

/* Stand eines Wunsches: immer Wort plus Farbe. */
.stand-neu { background: var(--info-hg); color: var(--text); }
.stand-arbeit { background: var(--akzent-weich); color: var(--text); }
.stand-rueckfrage { background: var(--warn-etikett); color: var(--warn-etikett-text); }
.stand-erledigt { background: var(--flaeche-2); color: var(--text-2); }
.wunsch-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nachweis { display: flex; gap: 8px; align-items: flex-start; font-weight: var(--g-mittel); }
.nachweis .symbol { flex: none; color: var(--akzent); margin-top: 2px; }
/* Gutachter G/H (M6): Verlauf ohne Probelauf-Muster, Hinweiszeilen bündig, Ergebnis über der Leiste. */
.verlauf .wunsch-eigene { background: var(--akzent-weich); justify-self: end; border-bottom-right-radius: 4px; }
.blase-stand.stand-wechsel { color: var(--text-2); font-weight: var(--g-mittel); flex-wrap: wrap; }
.hochladen .feld-hilfe, .formular .feld-hilfe, .antwort .feld-hilfe { align-items: flex-start; }
.hochladen .feld-hilfe .symbol, .formular .feld-hilfe .symbol, .antwort .feld-hilfe .symbol { margin-top: 3px; }
.formular { max-width: 42rem; }
.fortschritt-ergebnis { scroll-margin-top: 16px; scroll-margin-bottom: calc(var(--nav-hoehe) + 16px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .fortschritt-ergebnis { scroll-margin-bottom: 16px; } }
.foto-raster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.foto-raster .textlink { overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* Wunsch schreiben in der Kachel „Fotos schicken“: durch eine Linie abgesetzt. */
.wunsch-schreiben { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie); }
.wunsch-schreiben > h3 { margin: 0 0 4px; }
/* ---------- Portal-Manager (Betreuer: Portale; Gastgeber: „Ihre Portale“ am Haus) ----------
   Gemeinsam gebündelt mit allen Seiten: allgemeine Klassen (.feld, .erklaerung, .feld-titel, #fehler-liste)
   behalten hier ihre Werte, weil andere Seiten sie mitbenutzen. */

/* Betreuer-Übersicht: Kopf, Sprungmarken, Abschnitte „Wünsche“, „Zu prüfen“, „Pflege und Kalender“ */
.kopfzahl { font-size: var(--t-gross); font-weight: var(--g-titel); margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.kopfzahl-zusatz { margin: 4px 0 0; color: var(--text-2); font-weight: var(--g-mittel); }
.sprungmarken { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 0; }
.sprungmarken a { display: inline-flex; align-items: center; min-height: 44px; }
.portal-wuensche .karte-zeile, .portal-pruefen .karte-zeile, .portal-pflege .karte-zeile { font-size: var(--t-basis); }
.portal-wuensche .pruef-zeile > .symbol, .portal-pruefen .pruef-zeile > .symbol, .portal-pflege .pruef-zeile > .symbol {
  align-self: flex-start; margin-top: 2px;
}
.portal-wuensche .pruef-zeile > .symbol { color: var(--akzent); }
.portal-pruefen .pruef-zeile > .symbol, .portal-pflege .pruef-zeile > .symbol { color: var(--warn); }
/* Dringend zeigt das rote Symbol, kein farbiger Seitenstreifen (gestaltung.md, Regel 4). */
.portal-pruefen .pruef-dringend > .symbol, .portal-pflege .pruef-dringend > .symbol { color: var(--fehler); }
/* Offline bleiben die Zeilen lesbar (app.js sperrt Links zu anderen Seiten); die Pfeile aller drei Listen
   verblassen gleich, solange der Offline-Hinweis steht. */
.portal-wuensche a.karte[aria-disabled="true"], .portal-pflege a.karte[aria-disabled="true"] { opacity: 1; }
body:has(#offline:not([hidden])) :is(.portal-wuensche, .portal-pruefen, .portal-pflege) .karte-pfeil { opacity: 0.3; }

/* Filter */
.portal-filter { display: grid; gap: 4px; margin-bottom: 4px; }
.portal-filter .pillen { margin-bottom: 8px; }
.portal-filter[open] > summary { display: none; }
.filter-titel { font-size: var(--t-basis); font-weight: var(--g-mittel); color: var(--text-2); margin: 0 0 8px; }
.filter-zusammenfassung { font-weight: var(--g-mittel); }
.filter-aendern { color: var(--akzent); font-weight: var(--g-mittel); text-decoration: underline; text-underline-offset: 3px; }
.filter-aufheben { margin: 8px 0 4px; }

/* Kunden und Häuser; Häuser zuklappbar (unauffällige zeigen nur eine Kurzzeile) */
.portal-kunde > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-gross); }
.portal-haeuser { display: grid; gap: 24px; }
.portal-haus { min-width: 0; scroll-margin-top: 16px; }
.portal-haus > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; }
.portal-haus > h3 .haus-ort { font-weight: 400; font-size: var(--t-basis); }
.portal-haus > .textlink { margin-top: 4px; }
.haus-eintraege > summary, .portal-filter > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; cursor: pointer; list-style: none;
}
.haus-eintraege > summary::-webkit-details-marker, .portal-filter > summary::-webkit-details-marker { display: none; }
/* Zugeklappter Inhalt hat keine Fläche (sonst zählen versteckte Tippziele mit). */
.haus-eintraege:not([open]) > :not(summary), .portal-filter:not([open]) > :not(summary) { display: none; }
.haus-eintraege > .inserat-neu { margin-top: 8px; }
.haus-kurz { color: var(--text-2); font-size: var(--t-basis); }
.haus-pfeil { display: inline-flex; color: var(--akzent); }
.haus-pfeil .symbol { width: 20px; height: 20px; transition: transform 0.15s; }
.haus-eintraege[open] .haus-pfeil .symbol { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .haus-pfeil .symbol { transition: none; } }

/* Einträge: ruhige Liste, Ausnahmen fallen auf; am PC zwei Spalten je Haus */
.inserate { list-style: none; border-top: 0; }
@media (min-width: 1024px) {
  .inserate { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 40px; }
}
.inserat { padding: 12px 0 8px; border-top: 1px solid var(--linie); scroll-margin-top: 16px; }
.inserat p { margin: 0 0 4px; }
.inserat-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.inserat-portal { font-weight: var(--g-mittel); }
.inserat-bearbeiten { margin-left: auto; color: var(--text-2); font-weight: var(--g-mittel); text-decoration: underline; text-underline-offset: 3px; }
.inserat-angaben, .inserat-notiz, .inserat-pflege { color: var(--text-2); font-size: var(--t-basis); }
.inserat-buchung { font-size: var(--t-basis); }
.inserat-vertrag { color: var(--text); font-variant-numeric: tabular-nums; }
.inserat-hinweis { display: flex; align-items: flex-start; gap: 8px; color: var(--warn); font-weight: var(--g-mittel); font-size: var(--t-basis); }
.inserat-hinweis .symbol { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.inserat-hinweis.dringend { color: var(--fehler); }
.inserat-hinweis.ruhig { color: var(--text-2); font-weight: 400; }
.inserat-wunsch { font-size: var(--t-basis); background: var(--info-hg); border-radius: var(--r-klein); padding: 8px 12px; }
.inserat-wunsch-weiter { font-size: var(--t-basis); color: var(--text-2); margin: 8px 0 0; }
.zugang-fehlt { color: var(--warn); font-weight: var(--g-mittel); }
.inserat-aktionen { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.inserat-aktionen .textlink, .inserat-neu { color: var(--text-2); font-weight: var(--g-mittel); text-decoration: underline; text-underline-offset: 3px; }
.textlink.extern span { text-decoration: none; }
.inserat-aktionen .textlink.extern span { text-decoration: underline; }
.textlink.extern .symbol { width: 18px; height: 18px; margin-left: 4px; }
/* Status als Etikett (.etikett) mit Ton: Live neutral (Normalfall), Einrichtung/gewünscht Info, pausiert Achtung. */
.status-live { background: var(--flaeche-2); color: var(--text); }
.status-live .symbol { color: var(--akzent); }
.status-einrichtung, .status-gewuenscht { background: var(--info-hg); color: var(--text); }
.status-pausiert { background: var(--warn-etikett); color: var(--warn-etikett-text); }
.status-beendet { background: var(--flaeche-2); color: var(--text-2); }

/* Matrix (Häuser × Portale) nur am PC; am Handy bleibt die Liste. */
.portal-matrix, .matrix-legende { display: none; }
@media (min-width: 1024px) {
  .portal-matrix { display: block; margin: 4px 0 24px; }
  .matrix-legende { display: block; font-size: var(--t-basis); color: var(--text-2); margin: 8px 0 0; }
  .portal-matrix table {
    width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 8px; margin: 0 -8px;
    font-variant-numeric: tabular-nums;
  }
  .portal-matrix th, .portal-matrix td { text-align: left; vertical-align: middle; hyphens: manual; font-size: var(--t-basis); }
  /* Kopfzeile in der kleinen Stufe (wie .tabellenkopf), damit lange Portalnamen ungetrennt in die Spalte passen. */
  .portal-matrix thead th { font-weight: var(--g-mittel); color: var(--text-2); font-size: inherit; }
  .portal-matrix thead th:first-child { width: 7em; }
  /* Lange Hausnamen mit Trennstrich statt mitten im Wort. */
  .portal-matrix tbody th { font-weight: var(--g-mittel); hyphens: auto; }
  .portal-matrix td.leer { display: table-cell; color: var(--text-2); text-align: center; }
  .matrix-zelle {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 8px;
    border: 1px solid var(--linie); border-radius: var(--r-klein); color: var(--text); text-decoration: none; font-weight: var(--g-mittel);
  }
  .matrix-zelle:hover { border-color: var(--akzent); }
  .matrix-zelle.status-live { background: var(--akzent-weich); }
  .matrix-zelle.status-einrichtung, .matrix-zelle.status-gewuenscht { background: var(--info-hg); }
  .matrix-zelle.status-pausiert { background: var(--warn-hg); }
  /* Wünsche mit Sprechblase (ruhig), Störungen und Aufgaben mit Warnzeichen. */
  .matrix-wunsch, .matrix-hinweis { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--g-mittel); overflow-wrap: normal; }
  .matrix-wunsch { color: var(--text); }
  /* Auf getönter Zelle Text in Textfarbe, das Warnzeichen trägt den Zustand. */
  .matrix-hinweis { color: var(--text); }
  .matrix-hinweis .symbol { color: var(--warn); }
  .matrix-wunsch .symbol, .matrix-hinweis .symbol { width: 16px; height: 16px; }
  /* Offline bleibt die Zelle lesbar (app.js sperrt nur den Link). */
  a.matrix-zelle[data-braucht-netz][aria-disabled="true"] { opacity: 1; }
}

/* Formular (Inserat bearbeiten, Wünsche des Gastgebers) */
.portal-formular { display: grid; gap: 24px; max-width: 720px; margin-top: 8px; }
.portal-formular .wahl { margin: 0; }
.portal-formular .wahl, .portal-formular .feld { min-inline-size: 0; min-width: 0; }
.wahl-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13em), 1fr)); }
.wahl-raster > legend, .wahl-raster > .feld-fehler { grid-column: 1 / -1; }
.wahl-zusatz { display: block; font-size: var(--t-basis); font-weight: 400; color: var(--text-2); margin-top: 4px; }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: var(--g-mittel); }
.feld input[type="text"], .feld input[type="url"], .feld input[type="date"], .portal-formular textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: var(--t-text); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein); appearance: none; -webkit-appearance: none;
}
.feld input[type="date"] { max-width: 100%; min-width: 0; }
.portal-formular textarea { resize: vertical; min-height: 6em; }
.portal-formular textarea.link-feld { min-height: 48px; resize: none; overflow-wrap: anywhere; }
.feld input:focus, .portal-formular textarea:focus { border-color: var(--akzent); }
.feld input[aria-invalid="true"], .portal-formular textarea[aria-invalid="true"] { border-color: var(--fehler-linie); }
.portal-formular .feld-fehler { align-items: flex-start; }
.portal-formular .feld-fehler .symbol { margin-top: 2px; }
.portal-formular .knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0; }
@media (max-width: 599px) { .knopf-speichern { width: 100%; } }
#fehler-liste { max-width: 720px; }
#fehler-liste .verweise a { color: inherit; font-weight: var(--g-mittel); }
.feld-titel { font-weight: var(--g-mittel); margin: 0; }
.portal-fest-wert { font-size: var(--t-text); font-weight: var(--g-mittel); margin: 0; }
.erklaerung { font-size: var(--t-basis); margin: 4px 0 0; }
/* Name nur bei „Sonstiges“, Laufzeitende und Gebühr nur mit Laufzeit (ohne Skript über :has; ohne :has bleiben
   die Felder sichtbar). */
.portal-formular:has(input[name="portal"]:checked:not([value="sonstiges"])) .nur-sonstiges { display: none; }
.portal-formular:has(input[name="laufzeit"][value="ohne"]:checked) .nur-laufzeit { display: none; }
.nur-laufzeit { display: grid; gap: 24px; }
.schneller-hinweis { display: flex; align-items: flex-start; gap: 8px; margin: -8px 0 0; color: var(--text-2); font-size: var(--t-basis); }
.schneller-hinweis .symbol { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* Inserat bearbeiten: Kalender-Änderungen, Pflege, Wünsche, Kündigung */
.kalender-titel { font-size: var(--t-basis); margin: 12px 0 4px; }
.kalender-aenderungen { margin: 0 0 12px; padding-left: 20px; font-size: var(--t-basis); }
.kalender-aenderungen > li { padding: 4px 0; }
#pflege .kalender-aenderungen + form { margin-bottom: 16px; }
#pflege form + form { margin-top: 12px; }
.pflege-liste { list-style: none; margin: 8px 0 16px; }
.pflege-liste > li { padding: 8px 0; border-top: 1px solid var(--linie); font-size: var(--t-basis); }
.pflege-liste > li p { margin: 0 0 8px; }
.pflege-von { font-weight: var(--g-mittel); }
.anliegen-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 12px; }
#kuendigung form { margin-top: 8px; }

/* Rückfragen „Wirklich beenden?“ und „Wirklich kündigen?“: am Handy Hauptknopf über die ganze Breite. */
.beenden-frage .knopfzeile, .kuendigen-frage .knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
@media (max-width: 767px) {
  .beenden-frage .knopfzeile .knopf, .kuendigen-frage .knopfzeile .knopf { flex: 1 1 100%; justify-content: center; }
}

/* Gastgeber: „Online auf …“ unter der Hauskarte */
.online-auf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; }
.haus-raster .online-auf { padding-inline: var(--haus-einzug) 16px; margin-top: 8px; }
.online-titel { margin: 0; color: var(--text-2); font-size: var(--t-basis); }
.online-quelle { flex-basis: 100%; margin: 0; color: var(--text-2); }
.portal-stand-kurz { margin: 0 0 8px; padding-inline: 16px; color: var(--text-2); font-size: var(--t-basis); }
.haus-raster .portal-stand-kurz { padding-inline: var(--haus-einzug) 16px; }
/* Portale als Textlinks (keine Pillen) */
.portal-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.portal-link, .portal-ohne-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 0; font-size: var(--t-basis); font-weight: var(--g-mittel);
}
.portal-link { color: var(--akzent); text-decoration: none; }
.portal-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.portal-link .symbol { width: 16px; height: 16px; }
/* In der Häuser-Liste sind die Portale Nebenwege: Textfarbe, normales Gewicht (das Haus selbst ist der Hauptlink). */
.haus-raster .portal-link { color: var(--text); font-weight: 400; }
.haus-raster .portal-link .symbol { color: var(--text-2); }
.portal-ohne-link { color: var(--text); }

/* Gastgeber: „Ihre Portale“ am Haus mit Zustand, Laufzeit, Zahlung und Kündigung */
.portale-sprung { display: inline-flex; align-items: center; min-height: 44px; }
.portal-stand .stand-portal .portal-link, .portal-stand .stand-portal .portal-ohne-link { font-size: var(--t-text); }
.portal-stand .online-quelle { margin-top: 8px; }
.stand-liste { list-style: none; margin: 8px 0 16px; }
/* Am PC zwei Einträge je Zeile; die Zeilen beginnen links und rechts auf gleicher Höhe. */
@media (min-width: 1024px) {
  .stand-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
.stand-eintrag { padding: 12px 0; border-top: 1px solid var(--linie); }
.stand-eintrag p { margin: 0 0 4px; }
.stand-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.stand-portal { font-weight: var(--g-mittel); }
.zustand-live { background: var(--akzent-weich); }
.zustand-offen { background: var(--info-hg); }
.zustand-ende { background: var(--flaeche-2); color: var(--text-2); }
.stand-anliegen { font-size: var(--t-basis); }
.stand-vertrag { font-size: var(--t-text); font-variant-numeric: tabular-nums; }
.stand-aktionen { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 0; }
.stand-aktionen .textlink { display: inline-flex; align-items: center; min-height: 44px; }
/* „Ein Portal kündigen“ einmal unten im Abschnitt, ruhig: Beschriftung gedämpft, je Portal ein Textlink. */
.portal-kuendigen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.portal-kuendigen-titel { color: var(--text-2); }
.portal-kuendigen .trenner { color: var(--text-2); }
/* Am Handy steht die Beschriftung über den Portalen, sonst wirkt der Umbruch wie eine neue Zeile. */
@media (max-width: 599px) { .portal-kuendigen-titel { flex-basis: 100%; } }
.portal-kuendigen .textlink { display: inline-flex; align-items: center; min-height: 44px; }
/* ---------- M7: Leistungen, Empfehlungen, Buchen ---------- */
/* Haken-Listen (Paketinhalt, Lieferumfang): Haken statt Punkt, Text bündig. */
.haken-liste.enthalten, .haken-liste.lieferumfang { list-style: none; padding-left: 0; display: grid; gap: 6px; margin: 0 0 12px; }
.haken-liste.enthalten li, .haken-liste.lieferumfang li { position: relative; padding-left: 1.6em; }
.haken-liste.enthalten li::before, .haken-liste.lieferumfang li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--text-2); font-weight: var(--g-titel);
}
.paket h3, .rechtlich-offen h3 { font-size: var(--t-basis); margin: 12px 0 8px; }
/* Gebuchte Zusatzleistungen: Zeilen mit Haarlinie, wie andere Listen. */
.gebucht-liste { list-style: none; padding: 0; margin: 0; display: grid; }
.gebucht-liste > li:first-child { padding-top: 0; }
.gebucht-liste > li { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.gebucht-liste p { margin: 0; overflow-wrap: anywhere; }
.karte-zeile .symbol { width: 18px; height: 18px; color: var(--akzent); }
/* Empfehlung: ein ruhiger Hinweis mit Akzentlinie, keine Fläche. */
.empfehlung p { margin: 0 0 10px; overflow-wrap: anywhere; }
.empfehlung-befund { font-weight: var(--g-mittel); }
.empfehlung-antwort { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.empfehlung-antwort .knopf { flex: 1 1 10em; }
/* Leistungsdetail */
.leistung-preis { margin: 8px 0 0; }
.rechtlich-offen { margin-top: 12px; padding: 12px 16px; background: var(--warn-hg); border: 1px solid var(--warn-linie); border-radius: var(--r-klein); }
.rechtlich-offen p { margin: 0 0 8px; }
.rechtlich-offen p:last-child { margin-bottom: 0; }
.buchen h2 { margin-bottom: 10px; }
.buchen-formular { display: grid; gap: 10px; }
.buchen-formular p { margin: 0; }
.buchen-stand { display: flex; gap: 8px; align-items: center; font-weight: var(--g-mittel); margin: 0 0 8px; }
.buchen-stand .symbol { color: var(--akzent); width: 20px; height: 20px; flex: none; }
.abbruch-wege { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* Betreuer-Katalog */
.liste-titel { font-size: var(--t-basis); font-weight: var(--g-titel); margin: 24px 0 8px; }
.katalog-formular { display: grid; gap: 12px; }
.katalog-formular #k-beschreibung { min-height: 10em; }
.katalog-formular #k-name { min-height: 0; }
.empfehlung-schalter { margin: 0 0 12px; }
/* Nachbau der Kasse (nur Prüfstand) */
.testkasse .knopf-zweit { justify-self: start; }
.kunden-bestellungen { margin-bottom: 12px; }
/* M7 Gutachten Runde 1 */
.empfehlung { border-left: 4px solid var(--akzent); padding-left: 16px; }
.karte .empfehlung { margin-top: 4px; }
.empfehlung > h3 { font-size: var(--t-basis); margin: 0 0 8px; }
.empfehlung-basis { color: var(--text-2); }
.empfehlung-rueckgaengig { margin-top: 8px; }
.leistung-preis.gedaempft { font-size: var(--t-text); }
.fehler-sammlung { align-items: flex-start; margin-bottom: 4px; }
.fehler-sammlung p, .fehler-sammlung ul { margin: 0; }
.fehler-sammlung ul { padding-left: 1.2em; font-weight: 400; }
.katalog-formular { max-width: 44rem; }
.katalog-formular #k-name { resize: none; field-sizing: content; min-height: 48px; }
.katalog-formular .ungueltig .wahl-option { border-color: var(--fehler-linie); }
@media (min-width: 768px) {
  .wahl.wahl-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .wahl.wahl-zwei > legend, .wahl.wahl-zwei > .feld-fehler { grid-column: 1 / -1; }
}
blockquote.kundensicht { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--linie); color: var(--text-2); }
blockquote.kundensicht p { margin: 0; }
/* M7 Gutachten Runde 2 */
.katalog-formular input[aria-invalid="true"] { border-color: var(--fehler-linie); }
/* Mögliche Leistungen mit Nutzen und Preis, weitergegebene Kosten, Kündigen, Leistungs-Website */
.moegliche-leistungen .nutzen { color: var(--text-2); overflow-wrap: anywhere; }
.moegliche-leistungen .preis { font-weight: var(--g-mittel); }
.weitergabe { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-start; color: var(--text-2); overflow-wrap: anywhere; }
.weitergabe .symbol { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--akzent); }
p.weitergabe { margin: 8px 0 0; }
.kuendigen { display: grid; gap: 8px; margin-top: 8px; justify-items: start; }
.kuendigen p { margin: 0; }
.abo-stand { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.leistungs-website p { margin: 0 0 8px; }
/* Seite „Leistungen“: links das Paket mit den gebuchten Zusatzleistungen, rechts die möglichen Zusatzleistungen
   (Kachelreihe, gleich hoch), darunter Empfehlung und Leistungs-Website über die ganze Breite. */
.leistungen-rest { display: grid; gap: 16px; align-content: start; margin-bottom: 16px; }
.leistungen-raster .karte, .leistungen-rest .karte { margin-block: 0; }
.paket-zusatz > h3 { margin: 24px 0 4px; }
@media (min-width: 1024px) {
  /* Paketinhalt in zwei Spalten, die möglichen Leistungen daneben in einer. */
  .leistungen-raster .haken-liste.enthalten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .leistungen-rest { gap: 24px; margin-bottom: 24px; }
  .leistungs-website p { max-width: 60ch; }
  .nur-handy { display: none; }
}
.hinweis-weg { display: block; margin-top: 8px; }
/* Die Abschnittslinie schließt die Liste ab; keine zweite Linie unter dem letzten Eintrag. */
.gebucht-liste > li:last-child, .moegliche-leistungen > li:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  .wahl.wahl-zwei > .feld-hilfe { grid-column: 1 / -1; }
}
/* ---------- Smoobu-Abgleich (Betreuer: Stand und Wohnungen zuordnen) ---------- */
.abgleich-wohnungen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.abgleich-wohnung {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 0; border-bottom: 1px solid var(--linie);
}
.abgleich-wohnung:last-child { border-bottom: 0; padding-bottom: 0; }
.abgleich-wohnung p { margin: 0 0 4px; }
.abgleich-spalte { flex: 1 1 16em; min-width: 0; }
.abgleich-wohnung-name { font-weight: var(--g-mittel); }
.abgleich-zugeordnet .abgleich-spalte.gedaempft { font-variant-numeric: tabular-nums; }
.abgleich-formular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.abgleich-formular .knopf { justify-self: start; }
.abgleich-formular .wahl { margin: 0; }
.abgleich-loesen { flex: 1 1 100%; }
.abgleich-loesen summary { list-style: none; }
/* „Zuordnung lösen“ als ruhiger Textlink je Zeile (Tippziel 44 px), nicht als Knopfreihe. */
.abgleich-loesen-link {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  color: var(--akzent); font-size: var(--t-basis); font-weight: var(--g-mittel);
}
.abgleich-loesen-link:hover { text-decoration: underline; }
.abgleich-loesen:not([open]) > form { display: none; }
.abgleich-loesen summary::-webkit-details-marker { display: none; }
.abgleich-loesen summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.abgleich-loesen .abgleich-formular { max-width: 720px; }
.abgleich-hinweis { margin-bottom: 16px; }
.tabellenkopf.abgleich-kopf { display: none; }
@media (min-width: 1024px) { .abgleich-nur-handy { display: none; } }

/* Am PC: „Zugeordnet“ als Tabelle mit Kopfzeile (Spuren nur aus Mindestbreiten und fr, damit alles bündig ist) */
@media (min-width: 1200px) {
  .tabellenkopf.abgleich-kopf,
  .abgleich-zugeordnet .abgleich-wohnung {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(9rem, 1fr) minmax(13rem, 1fr);
    column-gap: 16px; align-items: start;
  }
  .tabellenkopf.abgleich-kopf { padding: 0 0 8px; }
  .abgleich-zugeordnet .abgleich-wohnung p { margin: 0; }
  .abgleich-zugeordnet .abgleich-spalte p + p { margin-top: 4px; }
  .abgleich-nr-wort { display: none; }
}
/* ---------- Kalender (Strang „kalender“) ----------
   Handy: Monatsraster ohne Kacheln – je Woche eine Haarlinie, Tage nur als Zahl, Belegung als Balken über die Tage.
   PC ab 1024 px: dasselbe Markup als Zeitleiste, eine Zeile je Haus, die Tage nebeneinander (seitlich scrollbar).
   Jeder Tag hat je Haus eine Spur aus zwei Hälften (Nacht davor | Nacht danach); die Hälften reichen bis in die
   Mitte der Lücke zum Nachbartag, so stoßen sie zu einem durchgehenden Balken zusammen. Halbe Tage bei An- und
   Abreise entstehen von selbst, beim Wechsel bleibt ein kleiner Einschnitt. */

.raster-kalender { display: grid; gap: 16px; }
.kalender-blatt { min-width: 0; }
.heute-sprung { margin: 0 0 8px; }
.heute-sprung a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--g-mittel); text-decoration: none; }

.monat {
  --spalt: 8px; --spur-h: 12px; --spur-abstand: 4px;
  /* Etwas breiter als der Inhalt, damit die Tage Platz haben; 8 px Abstand zum Bildschirmrand bleiben. */
  touch-action: pan-y; margin-inline: -8px;
}
.monat:not(.einzeln) { --spur-h: 6px; --spur-abstand: 4px; }
.zl-namen, .zl-gast { display: none; }

.wochentage, .tage {
  list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--spalt);
}
.wochentage { margin-bottom: 4px; }
.wochentage li { text-align: center; color: var(--text-2); font-weight: var(--g-mittel); }
.tage li { position: relative; min-width: 0; padding-top: 8px; }
/* Haarlinie über jeder Woche, über die Lücken hinweg. */
.tage li::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--linie);
  left: calc(var(--spalt) / -2); right: calc(var(--spalt) / -2);
}
.tage li.mo::before { left: 0; }
.tage li.so::before, .tage li.letzter::before { right: 0; }

.tag {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 52px; min-width: 0;
  padding: 4px 0 8px; border: 0; border-radius: var(--r-klein); background: transparent;
  color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums;
}
.tag-kopf { display: flex; align-items: center; justify-content: center; gap: 0; min-height: 26px; }
.tag-wt { display: none; color: var(--text-2); font-weight: var(--g-mittel); }
/* Wochentag und Gastname sind Zierde (die Beschreibung des Tages nennt beides); daher als erzeugter Text. */
.tag-wt::before { content: attr(data-wt); }
.zl-gast::before { content: attr(data-name); }
.tag-zahl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  border-radius: 999px; font-size: var(--t-basis); font-weight: var(--g-mittel);
}
.tag.heute .tag-zahl { background: var(--text); color: var(--hg); }
.tag.keine-daten .tag-zahl, .tag.unbestaetigt .tag-zahl { color: var(--text-2); }
.tag-zeichen { display: inline-flex; }
.tag-zeichen .symbol { width: 14px; height: 14px; }
.zeichen-doppel { color: var(--fehler); }
.zeichen-unbekannt, .zeichen-wechsel { color: var(--text-2); }
/* Gewählter Tag: weiche Akzentfläche und ein schmaler Ring etwas innen. Der Fokusrahmen der Tastatur liegt davon getrennt
   ganz außen in der Kachel (--fokus-breite), so sind Auswahl und Fokus auch zusammen unterscheidbar. */
.tag[aria-current="date"] {
  background: var(--akzent-weich);
  box-shadow: inset 0 0 0 calc(var(--fokus-breite) + 2px) var(--akzent-weich), inset 0 0 0 calc(var(--fokus-breite) + 4px) var(--akzent);
}
@media (hover: hover) and (pointer: fine) { .tag:hover { background: var(--flaeche-2); } }

/* Spuren: eine je Haus in fester Reihenfolge. */
.tag-balken { display: grid; gap: var(--spur-abstand); margin-top: auto; }
.spur { position: relative; display: block; height: var(--spur-h); }
.halb { position: absolute; top: 0; bottom: 0; display: none; }
.halb.links { left: calc(var(--spalt) / -2); right: 50%; }
.halb.rechts { left: 50%; right: calc(var(--spalt) / -2); }
li.mo .halb.links, li.erster .halb.links { left: 0; }
li.so .halb.rechts, li.letzter .halb.rechts { right: 0; }
/* Endet links eine Belegung und beginnt rechts eine (oder nur eins davon): runde Enden, kleiner Einschnitt. */
.spur:not(.durch) .halb.links { right: calc(50% + 2px); border-radius: 0 999px 999px 0; }
.spur:not(.durch) .halb.rechts { left: calc(50% + 2px); border-radius: 999px 0 0 999px; }
/* „Keine Daten“ und „nicht bestätigt“ sind keine Belegungen: ein durchgehendes Band ohne Einschnitt. */
.spur .halb.links:is(.unbekannt, .unklar) { right: 50%; border-radius: 0; }
.spur .halb.rechts:is(.unbekannt, .unklar) { left: 50%; border-radius: 0; }
.halb.gast { display: block; background: var(--hausfarbe, var(--akzent)); }
/* Sperrzeit (Gestaltung: Nebenfläche, gedämpfte Linie): ruhige Fläche mit Kante oben und unten – keine Belegung (keine volle
   Hausfarbe), nicht „frei“ (Fläche) und nicht „keine Daten“ (dort gestrichelt ohne Fläche). Am Handy in „Alle“ tragen Kante
   und Fläche die Hausfarbe (weiter unten), weil die schmale Spur das Haus sonst nicht nennt. */
.halb.sperre, .legende-feld.gesperrt {
  display: block; background: var(--flaeche-2); border-block: 2px solid var(--text-2);
}
/* Doppelbuchung mit Schrägstreifen: Kein Balken in Hausfarbe (auch keine aufgehellte Abreise-Hälfte) sieht so aus. */
.halb.doppel, .legende-feld.doppel {
  display: block;
  background: repeating-linear-gradient(135deg, var(--fehler-linie) 0 4px, var(--fehler) 4px 7px);
}
/* Abreisetag: Die Hälfte der abreisenden Gäste ist ein schmalerer Balken in voller Hausfarbe (der Tag ist ab Mittag wieder
   frei). Volle Farbe hält den Kontrast und bleibt von der Doppelbuchung (Korallrot) unterscheidbar. */
.spur:not(.durch) .halb.links.gast { top: 25%; bottom: 25%; }
/* Keine Daten: gestrichelter Rahmen statt Fläche – nie wie „frei“ und nie wie „belegt“. */
.halb.unbekannt { display: block; border-block: 1.5px dashed var(--text-2); }
/* Frei laut letztem Stand, nicht bestätigt: gepunktete Linie in Bernstein. */
.halb.unklar { display: block; top: auto; height: 0; border-bottom: 2px dotted var(--warn-linie); }

.legende {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 4px; font-size: var(--t-basis);
}
.legende li { display: inline-flex; align-items: center; gap: 8px; }
.legende .symbol { width: 18px; height: 18px; }
.legende-doppel .symbol { color: var(--fehler); margin-left: -4px; }
.legende-unbekannt .symbol { color: var(--text-2); margin-left: -4px; }
.legende-wechsel .symbol { color: var(--text-2); }
.legende-feld { display: inline-block; flex: none; width: 28px; height: 10px; border-radius: 999px; }
.legende-feld.belegt { background: var(--hausfarbe, var(--akzent)); }
/* Links die schmale Abreise-Hälfte, rechts die volle Anreise-Hälfte (wie im Raster). */
.legende-feld.halbtag {
  border-radius: 0;
  background:
    linear-gradient(90deg, var(--hausfarbe, var(--akzent)) 0 45%, transparent 45%) left center / 100% 50% no-repeat,
    linear-gradient(90deg, transparent 0 55%, var(--hausfarbe, var(--akzent)) 55%);
}
.legende-feld.frei { height: 1px; background: var(--linie); border-radius: 0; }
.legende-feld.gesperrt { border-radius: 0; }
.legende-feld.keine-daten { border-block: 1.5px dashed var(--text-2); border-radius: 0; }
.legende-feld.unklar { height: 0; border-bottom: 2px dotted var(--warn-linie); border-radius: 0; }
.zl-haelften { display: none; }

/* Gewählter Zeitraum (Monat eines Hauses): weiche Fläche, Anfang und Abreisetag mit Ring um die Zahl. */
.tag.im-zeitraum { background: var(--akzent-weich); }
.tag.zeitraum-start .tag-zahl, .tag.zeitraum-ende .tag-zahl { box-shadow: 0 0 0 2px var(--akzent); }
/* Ist ein Zeitraum gewählt, ist sein erster Tag zugleich der gewählte; er sieht dann aus wie der Abreisetag (Fläche und
   Ring um die Zahl). Nach dem ersten Tipp (noch kein Ende) bleibt der Ring des gewählten Tages. */
.tage:has(.zeitraum-ende) .tag.zeitraum-start[aria-current="date"] { box-shadow: none; }

/* Zeitraum blocken (Tagesdetail): Aufklapper und Formular. */
.sperr-aufklapper { margin-top: 8px; }
.sperr-aufklapper summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  color: var(--akzent); font-weight: var(--g-mittel); font-size: var(--t-basis);
}
.sperr-aufklapper summary .symbol { width: 20px; height: 20px; }
.sperr-formular { display: grid; gap: 8px; margin-top: 8px; }
.sperr-formular .knopf { justify-self: start; }
.sperr-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 8px 12px; }
.sperr-daten > div { display: grid; gap: 4px; min-width: 0; }
.feld-titel { font-weight: var(--g-mittel); font-size: var(--t-basis); }
.sperr-formular input[type="date"], .sperr-formular input[type="text"] {
  width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px; font: inherit; font-size: var(--t-text);
  color: var(--text); background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein);
}
.sperr-formular input:focus { border-color: var(--akzent); }
.sperr-formular + .textlink { margin-top: 8px; }
/* Rückfrage „Sperrzeit aufheben“: „Nicht aufheben“ (Hauptknopf) und Bestätigen nebeneinander. */
.sperr-formular.knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.konflikte { list-style: none; display: grid; gap: 4px; margin: 4px 0 8px; }
.konflikte a { display: inline-flex; align-items: center; min-height: 44px; }
.doppel-tun { margin: 4px 0 0; }
/* Hausname nie mitten im Namen umbrechen (Zeitraum-Zeile „Villa A · …“). */
.tagesdetail-haus strong { flex: none; }
#tagesdetail:focus { outline: none; }
/* Beim Hineinrollen bleibt das Tagesdetail frei von der unteren Leiste. */
#tagesdetail { scroll-margin-top: 16px; scroll-margin-bottom: calc(var(--nav-hoehe) + 16px + env(safe-area-inset-bottom)); }
#tagesdetail > .gedaempft { color: var(--text); }
/* Beim Nachladen nur den Lade-Hinweis zeigen, nicht den alten Text daneben. */
#tagesdetail.htmx-request > :not(.laedt) { display: none; }
.tag-unbekannt { display: flex; gap: 8px; align-items: flex-start; color: var(--text); }
.tag-unbekannt .symbol { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--text-2); }
.tagesdetail-titel { font-size: var(--t-gross); }
.tagesdetail-liste { list-style: none; display: grid; gap: 16px; }
.tagesdetail-haus { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tagesdetail-liste a { text-decoration: none; font-weight: var(--g-mittel); }
.naechste-belegung { font-weight: var(--g-mittel); }
.wechsel-zeile { display: flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.wechsel-zeile .symbol { width: 20px; height: 20px; flex: none; color: var(--text-2); }
.mindest-hinweis {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; margin-bottom: 8px;
  border-radius: var(--r-klein); border: 1px solid var(--info-linie); background: var(--info-hg);
  font-size: var(--t-basis);
}
/* Symbol 20 px in einem 24 px hohen Feld: steht mittig zur ersten Zeile, ohne Versatz außerhalb des Rasters. */
.mindest-hinweis > .symbol { width: 20px; height: 24px; flex: none; }
.mindest-hinweis p { margin: 0; }
.monatsliste { margin-top: 16px; margin-bottom: 0; }
.monatsliste h2 { font-size: var(--t-abschnitt); }
.sperr-zeile .karte-titel { color: var(--text-2); }

@media (max-width: 380px) {
  .monat { --spalt: 4px; margin-inline: -4px; }
}

/* Handy, alle Häuser: Die schmale Spur nennt das Haus nur über ihre Lage. Eine Sperrzeit trägt deshalb die
   Hausfarbe als Kante und die weiche Hausfarbe als Fläche – weiter keine volle Belegung. */
@media (max-width: 1023px) {
  .monat:not(.einzeln) .halb.sperre, .legende-feld.gesperrt.in-alle {
    background: var(--hausweich, var(--flaeche-2)); border-block-color: var(--hausfarbe, var(--text-2));
  }
  /* Abreisetag in der schmalen Spur (6 px): ein Strich von 4 px, sichtbar schmaler als die volle Belegung. */
  .monat:not(.einzeln) .spur:not(.durch) .halb.links.gast { top: 1px; bottom: 1px; }
}
@media (min-width: 1024px) { .legende-zusatz { display: none; } }

/* Fokusrahmen der Tage innen: Am Rand der Zeitleiste (oben, Namensspalte) und im engen Raster bleibt er ganz sichtbar. */
.tag:focus-visible { outline-offset: calc(var(--fokus-breite) * -1); }

@media (min-width: 1024px) {
  #tagesdetail { scroll-margin-bottom: 16px; }
  /* Ein Haus: Monatsraster links, Tagesdetail und Monatsliste rechts. */
  .raster-kalender { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; }
  .raster-kalender > .monatsliste, .raster-kalender > #tagesdetail { margin: 0; }
  .raster-kalender > .kalender-blatt { grid-row: 1 / span 2; }
}

/* ---------- PC, alle Häuser: Zeitleiste Häuser × Tage ---------- */
@media (min-width: 1024px) {
  .mit-zeitleiste.raster-kalender { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mit-zeitleiste > .kalender-blatt { grid-column: 1 / -1; grid-row: auto; }
  .mit-zeitleiste > #tagesdetail, .mit-zeitleiste > .monatsliste { align-self: stretch; }

  .kalender-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-bottom: 8px; }
  .kalender-wege .heute-sprung { margin: 0; }
  .zl-haelften { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .zl-sichtbar { font-size: var(--t-basis); margin-left: 8px; font-variant-numeric: tabular-nums; }
  .zl-haelften a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); text-decoration: none;
    font-size: var(--t-basis); font-weight: var(--g-mittel); font-variant-numeric: tabular-nums;
  }
  .zl-haelften a[aria-current="true"] { border: 2px solid var(--akzent); background: var(--akzent-weich); }

  .monat:not(.einzeln) {
    --spur-h: 28px; --spur-abstand: 8px; --zl-tag: 44px; --zl-namen: 10rem;
    display: flex; margin-inline: 0; padding-top: 4px; padding-bottom: 8px; overflow-x: auto;
    scroll-padding-left: calc(var(--zl-namen) + 8px);
  }
  /* Sichtbare Bildlaufleiste: Man sieht, dass es rechts weitergeht. */
  .monat:not(.einzeln)::-webkit-scrollbar { height: 12px; }
  .monat:not(.einzeln)::-webkit-scrollbar-track { background: var(--flaeche-2); border-radius: 999px; }
  .monat:not(.einzeln)::-webkit-scrollbar-thumb { background: var(--text-2); border-radius: 999px; }
  .monat:not(.einzeln) .wochentage { display: none; }
  .monat:not(.einzeln) .zl-namen {
    list-style: none; display: flex; flex-direction: column; gap: var(--spur-abstand); flex: none;
    width: var(--zl-namen); padding: 4px 8px 8px 0; position: sticky; left: 0; z-index: 3; background: var(--hg);
  }
  .zl-kopf { height: 48px; flex: none; }
  .zl-name {
    position: relative; display: flex; align-items: center; gap: 8px; height: var(--spur-h); flex: none;
    font-weight: var(--g-mittel); white-space: nowrap;
  }
  .zl-name .symbol { width: 18px; height: 18px; color: var(--fehler); }
  /* Zeilenlinie je Haus, läuft unter den Tagen weiter. */
  .zl-name::after, .monat:not(.einzeln) .spur::after {
    content: ""; position: absolute; bottom: calc(var(--spur-abstand) / -2); height: 1px; background: var(--linie);
  }
  .zl-name::after { left: 0; right: -8px; }
  .monat:not(.einzeln) .spur::after { left: calc(var(--spalt) / -2); right: calc(var(--spalt) / -2); }
  .monat:not(.einzeln) li.erster .spur::after { left: 0; }

  .monat:not(.einzeln) .tage {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--zl-tag); flex: none;
  }
  /* Sprung über „1.–15.“ ohne Skript: Der Tag landet nicht an der Fensterkante; die Knöpfe darüber bleiben im Bild. */
  .monat:not(.einzeln) .tage li { padding-top: 0; scroll-margin-top: 64px; }
  .monat:not(.einzeln) .tage li::before, .monat:not(.einzeln) .tage li.leerzelle { display: none; }
  /* In der Zeitleiste laufen die Balken über das Wochenende weiter; nur Monatsanfang und -ende sind Ränder. */
  .monat:not(.einzeln) li.mo .halb.links { left: calc(var(--spalt) / -2); }
  .monat:not(.einzeln) li.so .halb.rechts { right: calc(var(--spalt) / -2); }
  .monat:not(.einzeln) li.erster .halb.links { left: 0; }
  .monat:not(.einzeln) li.letzter .halb.rechts { right: 0; }

  .monat:not(.einzeln) .tag { gap: 8px; min-height: 0; padding: 4px 0 8px; }
  .monat:not(.einzeln) .tag.heute { background: var(--akzent-weich); }
  .monat:not(.einzeln) .tag-kopf { flex-direction: column; gap: 0; height: 48px; min-height: 48px; }
  .monat:not(.einzeln) .tag-wt { display: block; line-height: 20px; }
  .monat:not(.einzeln) .tag-zeichen { position: absolute; top: 4px; right: -4px; }
  .monat:not(.einzeln) .tag-zeichen .symbol { width: 12px; height: 12px; }
  .monat:not(.einzeln) .tag-balken { margin-top: 0; }

  /* Name im Balken: nur wenn er hineinpasst (der Server prüft die Länge), nie abgeschnitten. */
  .monat:not(.einzeln) .zl-gast {
    display: block; position: absolute; top: 0; left: calc(50% + 8px); z-index: 2; height: var(--spur-h);
    line-height: var(--spur-h); white-space: nowrap; font-weight: var(--g-mittel); color: var(--hg); pointer-events: none;
  }
  .monat:not(.einzeln) .zl-gast.vom-rand { left: 8px; }
  .monat:not(.einzeln) .zl-gast.sperre { color: var(--text); }
  /* Zeitleiste: Ein Name im Balken kann bis in die Abreise-Hälfte reichen. Dort bleibt sie darum voll hoch und ist nur
     leicht aufgehellt (Kontrast zur Fläche mindestens 3 : 1); die Legende zeigt es ebenso. */
  .monat:not(.einzeln) .spur:not(.durch) .halb.links.gast {
    top: 0; bottom: 0; background: color-mix(in srgb, var(--hausfarbe, var(--akzent)) 75%, var(--hg));
  }
  .mit-zeitleiste .legende-feld.halbtag {
    background: linear-gradient(90deg, color-mix(in srgb, var(--hausfarbe, var(--akzent)) 75%, var(--hg)) 0 45%,
      transparent 45% 55%, var(--hausfarbe, var(--akzent)) 55%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tag { transition: background-color 120ms ease; }
}
/* ---------- Ihre Website (M9) ---------- */

/* PC-Leiste: Eintrag unter „Überblick“ wie „Wünsche & Fotos“ (am Handy unter „Mehr“). */
.nav-website { display: none; }
@media (min-width: 1024px) {
  .nav-website {
    display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 8px; padding: 12px;
    border-radius: var(--r-klein); color: var(--text-2); font-size: var(--t-basis); font-weight: var(--g-mittel); text-decoration: none;
  }
  .nav-website::before {
    content: ""; width: 24px; height: 24px; flex: none; background: currentColor;
    -webkit-mask: var(--symbol-website) center / 24px 24px no-repeat; mask: var(--symbol-website) center / 24px 24px no-repeat;
  }
  .nav-website[aria-current="page"] { background: var(--akzent-weich); color: var(--text); }
  .nav-website[aria-current="page"]::before { background: var(--akzent); }
}
:root { --symbol-website: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M6.5 6.5h.01M9.5 6.5h.01M8 14h8M8 17h5'/%3E%3C/svg%3E"); }
.nav-website:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
/* In niedrigen PC-Fenstern (1280 × 800) passt die Leiste samt Konto unten ganz: Abstände enger, Einträge 44 px hoch
   mit 8 px Abstand – bei allen Kunden gleich, mit und ohne „Meine Website“. */
@media (min-width: 1024px) and (max-height: 900px) {
  .hauptnav .marke { margin-bottom: 12px; }
  .hauptnav .nav-bereiche { gap: 12px; }
  .hauptnav .nav-liste:not(.nav-unten) a, .hauptnav .nav-website, .hauptnav .nav-aktion { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .hauptnav .nav-unten { padding-top: 8px; }
}

/* Adresse und Stand */
.website-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 16px; }
.website-link { min-width: 0; gap: 8px; }
.website-host { overflow-wrap: anywhere; }
.etikett-info { background: var(--info-hg); color: var(--text); }

/* Besucher: die eine hervorgehobene Fläche */
.website-zahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 4px 0 0; }
.website-zahl .zahl-gross { font-size: var(--t-zahl); line-height: 1.15; }
.website-zahl-wort { font-size: var(--t-text); font-weight: var(--g-mittel); }
.website-neben { margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.website-vergleich { margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.website-kurz { margin: 0 0 4px; }

.diagramm-rahmen { margin: 12px 0 0; }
.diagramm { display: block; width: 100%; height: 112px; }
.diagramm .tag { fill: var(--akzent); }
.diagramm .tag.heute { fill: var(--akzent); fill-opacity: 0.45; }
.diagramm .grundlinie { fill: var(--linie); }
.diagramm-achse { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; color: var(--text-2); }
/* Jahr: eine gleich breite Spalte je Monat, genau unter ihrem Balken */
.diagramm-achse-monate { gap: 0; }
.diagramm-achse-monate span { flex: 1 1 0; min-width: 0; text-align: center; }

/* Listen: randlos mit Haarlinie, Zahl rechts */
.website-seiten, .website-liste { list-style: none; padding: 0; margin: 0 0 8px; border-top: 1px solid var(--linie); }
.website-seiten li, .website-liste li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}
.website-seite { overflow-wrap: anywhere; }
.website-seite-zahl { font-variant-numeric: tabular-nums; }
.website-liste li > span:first-child { flex: 1 1 16em; overflow-wrap: anywhere; }

.website-aktion .knopf { margin: 4px 0 8px; }

/* Betreuer: Einbauzeile */
.einbau-zeile {
  margin: 8px 0 12px; padding: 12px; border: 1px solid var(--linie); border-radius: var(--r-klein);
  background: var(--flaeche); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-basis);
}

/* Anfragen: Beschriftung links, Zahl rechts – auch in der halben Spalte am PC */
/* Die Beschriftung behält mindestens 9em; ein langer Wert („8 Buchungen, zusammen …“) bricht in seiner Spalte um. */
.website-angaben div { grid-template-columns: minmax(min(9em, 55%), 1fr) auto; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.website-angaben dd { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .website-angaben div { grid-template-columns: minmax(min(9em, 55%), 1fr) auto; gap: 12px; } }

/* Monatsbericht: eine Zeile „Ihre Website im …“; im Druck ohne Link */
#website-bericht p { margin: 0 0 4px; font-variant-numeric: tabular-nums; }
@media print { .website-bericht-link { display: none; } #website-bericht { break-inside: avoid; } }

/* „Ihre Website“ im Monatsbericht: die letzten Monate als kleine Tabelle, Zahlen rechtsbündig. */
.monatsverlauf { width: 100%; border-collapse: collapse; margin: 8px 0; font-variant-numeric: tabular-nums; font-size: var(--t-basis); }
.monatsverlauf th, .monatsverlauf td { padding: 8px 0; border-bottom: 1px solid var(--linie); text-align: right; }
.monatsverlauf :is(th, td):first-child { text-align: left; }
.monatsverlauf thead th { color: var(--text-2); font-weight: 400; }
.monatsverlauf tbody th { font-weight: 400; }
/* Letzte Zeile einer Liste oder Tabelle in der Kachel ohne Linie (Regel 5); Seitennamen in normaler Schrift. */
.website-seiten li:last-child, .website-liste li:last-child { border-bottom: 0; }
.monatsverlauf tbody tr:last-child > * { border-bottom: 0; }
.karte > :is(.website-seiten, .website-liste) { border-top: 0; }
/* Anfragen über die Website: Etikett der Gesprächsart (Ton Info), Angaben der Anfrage, Buchung desselben Gasts. */
.etikett-anfrage { background: var(--info-hg); color: var(--text); }
.anfrage-email { overflow-wrap: anywhere; }
.anfrage-buchung { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie); }
.anfrage-buchung h3 { font-size: var(--t-text); font-weight: var(--g-titel); margin: 0 0 8px; }
.anfrage-buchung p { margin: 0 0 8px; }
.anfrage-gebucht { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.anfrage-gebucht li { display: flex; align-items: center; gap: 8px; }
.anfrage-gebucht .symbol { width: 20px; height: 20px; flex: none; color: var(--akzent); }
.anfrage-gebucht .textlink { font-variant-numeric: tabular-nums; }
.anfrage-quelle { color: var(--text-2); font-weight: 400; }
.blase .anfrage-anhang, .blase .anfrage-absender { margin-top: 4px; overflow-wrap: anywhere; }
.anfrage-verweis {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 8px 12px;
  border: 1px solid var(--info-linie); border-radius: var(--r-klein); background: var(--info-hg);
}
.anfrage-verweis .symbol { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.anfrage-verweis > div { display: grid; gap: 4px; }
.anfrage-verweis p { margin: 0; }
.faden-art { display: block; }
.faden-haus .anfrage-zeit { margin-left: -4px; }

/* Gespräch: am Handy Verlauf → Angaben → Antwort (Reihenfolge im Dokument); am PC die Angaben rechts daneben. */
@media (min-width: 1024px) {
  .raster-zwei.anfrage-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "verlauf angaben" "antworten angaben";
  }
  .anfrage-verlauf { grid-area: verlauf; }
  .anfrage-angaben { grid-area: angaben; }
  .anfrage-antworten { grid-area: antworten; }
}
.anfrage-gebucht .textlink .symbol { width: 20px; height: 20px; color: inherit; }
.anfrage-pruefzeit, .anfrage-eingetragen { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.anfrage-pruefzeit { color: var(--text-2); }
.anfrage-pruefzeit .symbol, .anfrage-eingetragen .symbol { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.anfrage-eingetragen .symbol { color: var(--akzent); }
.angaben-eingetragen { margin: 0 0 4px; font-variant-numeric: tabular-nums; }

/* Als Buchung eintragen */
.buchung-zeitraum, .buchung-personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: 12px; align-items: start; }
.buchung-kalender { padding: 12px; border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--flaeche); }
.buchung-kalender p { margin: 0; }
.buchung-frei, .buchung-belegt { display: flex; align-items: flex-start; gap: 8px; }
.buchung-frei .symbol, .buchung-belegt .symbol { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.buchung-frei .symbol { color: var(--akzent); }
.buchung-belegt { color: var(--fehler); }
.buchung-belegt-liste { margin: 8px 0; padding-left: 28px; }
.buchung-eintragen .feld-hilfe, .faden-raster .feld-hilfe { align-items: flex-start; }
.buchung-eintragen .feld-hilfe .symbol, .faden-raster .feld-hilfe .symbol { margin-top: 3px; }
.buchung-eintragen .wahl-option .haus-punkt, .wahl-haken .haus-punkt { flex: none; }

/* Betreuer: Formular-Einstellungen */
/* Kästchen mit Haken: gemeinsamer Baustein in app.css. */
.wahl-haken .wahl-text { display: grid; gap: 2px; }
/* Einbau-Code: genau 15 ganze Zeilen sichtbar (2 × 1 px Rand + 12 px Innenabstand oben), keine halb abgeschnittene; der
   Code ist ein eigener Block, damit jede Zeile genau eine Zeilenhöhe hat. Ohne lh-Einheit gilt 24em. */
.einbau-code { max-height: 24em; max-height: calc(15lh + 14px); overflow: auto; }
.einbau-code code { display: block; }
.schluessel { overflow-wrap: anywhere; }
.schluessel-frage .knopfzeile { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Rückfrage zum Schlüssel: Abbrechen ist der Hauptknopf (Links im Hinweis erben sonst die Warnfarbe), Bestätigen im
   Fehlerton. */
.schluessel-frage .knopf:not(.knopf-zweit) { color: var(--akzent-text); }
.feld-wochentag { font-variant-numeric: tabular-nums; }
.anfrage-gebucht li .textlink { display: inline-flex; align-items: center; gap: 4px; }
@media (min-width: 1024px) {
  .seitenkopf:not(.kopf-heute) > .unterzeile.anfrage-etiketten { grid-column: 1 / -1; }
}
/* ---------- M10 Onboarding: Fragebogen, Einrichtung, Hinweis auf „Heute“ ---------- */

/* Fortschritt: schmaler Balken unter dem Kopf, Bedeutung steht im Text. */
.onboarding-balken { display: block; width: 100%; max-width: 480px; height: 8px; margin: 4px 0 16px; }
.onboarding-stand { margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.onboarding-einleitung { margin: 0 0 16px; }
.onboarding-spaeter { margin-top: 24px; }

/* Hinweis auf „Heute“: oben ohne kommende Anreise als die eine betonte Fläche mit Knopf, sonst schlicht. */
.onboarding-heute { display: grid; gap: 8px; justify-items: start; }
.onboarding-heute > p { margin: 0; }
.onboarding-heute .knopf { margin-top: 4px; }
#onboarding-heute.oben {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 16px;
}
/* Solange der Fragebogen oben steht, ist die leere „Nächste Anreise“ keine zweite betonte Fläche. */
main:has(#onboarding-heute.oben) .karte.anreise-karte:has(.leer) {
  background: none; border: 0; border-radius: 0; padding: 20px 0 4px;
}
.onboarding-heute .einrichtung-punkte { width: 100%; }

/* Abschnitte in der Übersicht: ganze Zeile tippbar. */
.abschnitte { margin: 8px 0 16px; padding: 0; }
.abschnitt-zeile { display: flex; align-items: center; gap: 12px; min-height: 48px; color: inherit; text-decoration: none; }

/* Formular: Fragen untereinander mit 24 px Abstand, Häuser als eigene Abschnitte. */
.fragebogen { display: grid; gap: 24px; max-width: 720px; }
.frage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.frage .wahl { margin: 0; min-width: 0; }
.frage textarea {
  width: 100%; min-height: 6em; padding: 10px 14px; font: inherit; font-size: var(--t-text); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein); resize: vertical;
}
.frage input[type="text"] { width: 100%; border-radius: var(--r-klein); }
.frage input.feld-kurz { width: 10em; max-width: 100%; }
.frage input:focus, .frage textarea:focus { border-color: var(--akzent); }
.frage input[aria-invalid="true"], .frage textarea[aria-invalid="true"] { border-color: var(--fehler-linie); }
/* „Weiß ich nicht“: bei Auswahlen die letzte Option, bei Freitext ein Kästchen in derselben Zeilen-Optik. */
.wahl-option.weiss-nicht { color: var(--text-2); }
.weiss-nicht-feld {
  display: flex; align-items: center; gap: 12px; min-height: 48px; width: fit-content; max-width: 100%;
  padding: 8px 16px; border: 1px solid var(--linie); border-radius: var(--r-klein); color: var(--text-2); cursor: pointer;
}
/* Das Kästchen selbst: gemeinsamer Baustein in app.css. */
.weiss-nicht-feld:has(input:checked) { border: 2px solid var(--akzent); background: var(--akzent-weich); color: var(--text); }
.weiss-nicht-feld input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.haus-block { display: grid; gap: 24px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--linie); }
.haus-block > h2 { font-size: var(--t-abschnitt); margin: 0; }
.haus-dazu { justify-self: start; }
.abschicken-hilfe { margin: 0; align-items: flex-start; }
.abschicken-hilfe .symbol, .neuer-kunde-formular .feld-hilfe .symbol { margin-top: 3px; }
.neuer-kunde-formular .feld-hilfe { align-items: flex-start; }
/* Knöpfe am Handy untereinander und gleich breit, ab Tablet nebeneinander. */
.fragebogen-knoepfe { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; }
@media (min-width: 768px) { .fragebogen-knoepfe { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } }
.onboarding-fotos { margin-bottom: 16px; }
/* Hochladen ist hier ein Nebenweg: Umrissknopf, damit „Abschicken“ der eine Hauptknopf bleibt. */
.onboarding-fotos .knopf-datei { background: transparent; color: var(--akzent); border: 2px solid var(--akzent); }

/* Lese-Ansicht */
.haus-titel { font-size: var(--t-abschnitt); margin: 16px 0 8px; }
.onboarding-angaben div { padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.onboarding-angaben dt { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.onboarding-angaben dd { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 599px) { .onboarding-angaben div { grid-template-columns: 1fr; gap: 0; } }
.weiss-nicht-wert { color: var(--warn); font-weight: var(--g-mittel); }
.onboarding-ergaenzt { margin: 8px 0; }
.onboarding-ergaenzt p { margin: 0; }
.lese-knoepfe { margin-top: 16px; }

/* Einrichtungs-Liste: Haken nur bei erledigten Aufgaben, offene mit leerem Kreis. */
.einrichtung-liste { list-style: none; display: grid; gap: 0; margin: 8px 0; padding: 0; border-top: 1px solid var(--linie); }
.einrichtung-liste > li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.einrichtung-liste > li:last-child { border-bottom: 0; }
.einrichtung-zeichen {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; margin-top: 2px;
  border: 2px solid var(--text-2); border-radius: 999px; color: var(--akzent-text);
}
.einrichtung-zeichen .symbol { width: 16px; height: 16px; }
.einrichtung-liste > li.erledigt .einrichtung-zeichen { background: var(--akzent); border-color: var(--akzent); }
.einrichtung-text { display: grid; gap: 4px; min-width: 0; }
.einrichtung-titel { font-weight: var(--g-mittel); overflow-wrap: anywhere; }
.einrichtung-liste > li.erledigt .einrichtung-titel { font-weight: 400; }

/* Betreuer */
.neuer-kunde { margin-bottom: 16px; }
/* Liste endet ohne eigene Linie; der nächste Abschnitt bringt seine Trennlinie mit. */
.onboarding-liste > li:last-child { border-bottom: 0; }
.onboarding-verlauf { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.onboarding-verlauf li { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.erledigen-aufklappen summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--akzent); font-weight: var(--g-mittel); }
.erledigen-aufklappen .formular { margin-top: 8px; }
/* Zugeklappt nimmt das Formular keinen Platz ein (auch nicht für Hilfsmittel, die Rechtecke messen). */
.erledigen-aufklappen:not([open]) > :not(summary) { display: none; }
.erledigen-aufklappen input[type="text"] { width: 100%; }

@media (min-width: 1024px) {
  .onboarding-heute.oben { max-width: 640px; }
}

/* Teil 2: „Später weitermachen“ ist ein Nebenweg unter „Abschicken“ und „Zwischenspeichern“, gestaltet wie
   `.textlink` (44 px, Stärke 600, Pfeil, nicht unterstrichen). */
.fragebogen .knopf-text {
  justify-self: start; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-top: -12px;
  padding: 0; background: none; border: 0; color: var(--akzent); font: inherit; font-size: var(--t-text);
  font-weight: var(--g-mittel); cursor: pointer;
}
.fragebogen .knopf-text .symbol { width: 20px; height: 20px; }
.fragebogen .knopf-text:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
/* Ein Weg unter dem Satz eines Hinweises steht in einer eigenen Zeile. */
.textlink.unter-satz { display: flex; width: fit-content; }
/* Betreuer: Anmelde-Adresse und geplante Häuser unter dem Seitenkopf. */
.kunde-anmeldung { margin: -8px 0 16px; color: var(--text-2); }
/* Lange Anmelde-Adressen dürfen überall umbrechen (320 px, 200 % Schrift). */
.kunde-anmeldung .adresse, .onboarding-liste .adresse { overflow-wrap: anywhere; }
/* Fragebogen, Übersicht, Lese-Ansicht, Einrichtung und Betreuer-Kundenseite: alles in einer Spalte von
   Formularbreite (keine Kästen, die am PC breiter laufen als die Felder). */
main:has(> form.fragebogen, .abschnitte, .onboarding-angaben, .einrichtung-seite, > .kunde-anmeldung) > * {
  max-width: 720px;
}
.onboarding-balken { max-width: 100%; }
/* Betreuer: „Kunden anlegen“ am Handy wie die Fragebogen-Knöpfe in voller Breite. */
@media (max-width: 767px) {
  .portal-formular.neuer-kunde-formular .knopfzeile { flex-direction: column; align-items: stretch; }
}
/* „Ihre Schritte“: am PC ab 1280 px rechts neben der Spalte (außerhalb des Flusses, die Spalte bleibt gleich),
   darunter ausgeblendet. */
.schritte-leiste { display: none; }
@media (min-width: 1280px) {
  main:has(> .schritte-leiste) { position: relative; }
  .schritte-leiste {
    display: block; position: absolute; top: 20px; right: 16px; width: calc(100% - 800px); max-width: 280px;
  }
}
.schritte-titel { margin: 0 0 8px; font-weight: var(--g-titel); }
.schritte-leiste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.schritte-leiste a {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding-left: 12px; color: var(--text);
  text-decoration: none; border-left: 3px solid var(--linie);
}
.schritte-leiste a[aria-current="step"] { border-left-color: var(--akzent); color: var(--akzent); font-weight: var(--g-mittel); }
.schritte-leiste .symbol { width: 20px; height: 20px; flex: none; color: var(--akzent); }
.schritt-punkt { width: 12px; height: 12px; margin: 0 4px; flex: none; border: 2px solid var(--linie); border-radius: 999px; }
/* ---------- M8 Betreuer-Arbeitsplatz: Handlungsbedarf, Aufgaben, „Als Kunde ansehen“ ---------- */

/* Kunden (Handlungsbedarf und A–Z): Name, darunter die Signale (dringendstes zuerst), dann die Angaben. */
.datenstand { margin: -8px 0 16px; }
.bedarf-kopf, .aufgaben-kopf { display: none; }
.bedarf-wer { display: grid; gap: 4px; min-width: 0; }
.bedarf-name { font-weight: var(--g-mittel); font-size: var(--t-text); overflow-wrap: anywhere; }
.signale { display: grid; gap: 4px; }
.signal { display: flex; align-items: flex-start; gap: 8px; font-weight: var(--g-mittel); font-size: var(--t-basis); }
.signal .symbol { width: 16px; height: 16px; flex: none; margin-top: 4px; }
.signal-dringend { color: var(--fehler); }
/* Gelb nur am Symbol (Regel 1), der Text bleibt in der Textfarbe. */
.signal-wichtig { color: var(--text); }
.signal-wichtig .symbol { color: var(--warn); }
.signal-hinweis { color: var(--text-2); font-weight: 400; }
.bedarf-angaben { display: block; color: var(--text-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.bedarf-angaben > span:empty { display: none; }
.bedarf-angaben > span + span::before { content: " · "; }
/* Ausgelöste Empfehlung am Handy als eigene Zeile, der Befund darunter. */
.bedarf-angaben > .bedarf-empfehlung { display: block; margin-top: 4px; }
.bedarf-angaben > .bedarf-empfehlung::before { content: none; }
.bedarf-empfehlung :is(.befund, .kunden-antwort) { display: block; }
/* In der Liste A–Z nur ein Verweis auf den Handlungsbedarf statt aller Signale. */
.signal-verweis { color: var(--text-2); }

/* Aufgaben: Art mit Stand, Kunde, worum es geht, seit wann, wer den nächsten Schritt macht. */
.aufgabe-art { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: var(--g-mittel); }
.aufgabe-kunde { color: var(--text); }
.aufgabe-worum, .aufgabe-alter, .aufgabe-schritt { color: var(--text-2); overflow-wrap: anywhere; }
.aufgabe-alter { font-variant-numeric: tabular-nums; }
.aufgabe-paar { display: block; color: var(--text-2); }
.aufgabe-paar > * + *::before { content: " · "; color: var(--text-2); }
.aufgabe-paar > .aufgabe-kunde, .aufgabe-paar > .aufgabe-worum, .aufgabe-paar > .aufgabe-alter { display: inline; }
.aufgabe-wer { display: inline-flex; }
/* Im inline-flex fällt der Leerraum des Trenners weg: Abstand über den Rand. */
.aufgabe-paar > .aufgabe-wer::before { content: "·"; margin: 0 6px 0 5px; }
/* Wer den nächsten Schritt macht: Text mit Symbol (Etiketten zeigen nur den Stand). */
.wer { display: inline-flex; align-items: flex-start; gap: 4px; color: var(--text-2); }
.wer .symbol { width: 16px; height: 16px; flex: none; margin-top: 4px; }
.wer-agent { color: var(--text); }

/* Listen in einer Karte: keine doppelte Linie unter der Überschrift und vor der nächsten Karte. */
.karte > .karten.bedarf-liste, .karte > .karten.aufgaben { border-top: 0; }
.karte > .karten.bedarf-liste > li:last-child, .karte > .karten.aufgaben > li:last-child { border-bottom: 0; }
/* Link unter einer Kartenliste: mindestens 8 px Abstand zur letzten Karte (Tippziele). */
.karte > .karten + p { margin-top: 8px; }

@media (min-width: 1200px) {
  /* PC: Listen als Tabelle aus demselben Markup; Spalten senkrecht vergleichbar. */
  .bedarf-kopf, .bedarf-karte > .karte-inhalt {
    display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.8fr) minmax(0, 0.7fr) minmax(0, 1.3fr) minmax(0, 1.6fr);
    column-gap: 16px; align-items: start;
  }
  .bedarf-kopf.ohne-empfehlungsspalte, .ohne-empfehlungsspalte .bedarf-karte > .karte-inhalt {
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.8fr) minmax(0, 0.7fr) minmax(0, 1.3fr);
  }
  .bedarf-kopf, .aufgaben-kopf {
    padding: 0 40px 8px 4px; color: var(--text-2); font-weight: var(--g-mittel); border-bottom: 1px solid var(--linie);
  }
  .bedarf-angaben { display: contents; }
  .bedarf-angaben > span:empty { display: block; }
  .bedarf-angaben > span + span::before { content: none; }
  .bedarf-angaben > span { color: var(--text-2); padding-top: 4px; }
  .aufgaben-kopf, .aufgabe-karte > .karte-inhalt {
    display: grid; grid-template-columns: minmax(13.5rem, 1.6fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.3fr);
    column-gap: 16px; align-items: start;
  }
  .aufgabe-schritt { grid-column: 1 / -1; }
  .aufgabe-paar { display: contents; }
  .aufgabe-paar > * + *::before, .aufgabe-paar > .aufgabe-wer::before { content: none; }
  .aufgabe-paar > .aufgabe-kunde, .aufgabe-paar > .aufgabe-worum, .aufgabe-paar > .aufgabe-alter { display: block; }
  /* Etiketten einzeilig; die Spalte „Art“ ist breit genug für das längste (Regel 11). */
  .aufgabe-art .etikett { white-space: nowrap; }
}

/* „Als Kunde ansehen“: deutlich sichtbarer Streifen oben, knapp gehalten, bleibt beim Scrollen stehen. */
.ansicht-banner {
  position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; background: var(--akzent); color: var(--akzent-text);
}
.ansicht-banner > .symbol { width: 24px; height: 24px; flex: none; }
.ansicht-text { flex: 1 1 auto; min-width: 0; }
.ansicht-text p { margin: 0; }
.ansicht-titel { font-weight: var(--g-mittel); font-size: var(--t-basis); overflow-wrap: anywhere; }
.ansicht-ende { margin: 0; flex: none; }
.ansicht-banner .knopf { background: var(--akzent-text); color: var(--akzent); border-color: var(--akzent-text); }
.ansicht-banner .knopf:focus-visible { outline-color: var(--akzent-text); }
/* Handy: höchstens zwei Zeilen – oben Symbol und Name der Kundin, darunter der Zusatz und der Knopf. */
@media (max-width: 599px) {
  .ansicht-banner {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "sym titel titel" "text text knopf";
    align-items: center; column-gap: 8px; row-gap: 4px; padding: 8px 12px;
  }
  .ansicht-banner > .symbol { grid-area: sym; }
  .ansicht-text { display: contents; }
  .ansicht-titel { grid-area: titel; }
  .ansicht-text > .klein { grid-area: text; }
  .ansicht-ende { grid-area: knopf; }
}
/* Der Inhalt steht in einem gesperrten fieldset: ohne eigenen Rahmen, ohne Mindestbreite (kein Querscrollen). */
fieldset.nur-lesen { border: 0; margin: 0; padding: 0; min-width: 0; min-inline-size: 0; }
.nur-lesen :is(button, input, textarea, select):disabled { cursor: not-allowed; }
.nur-lesen :is(input, textarea, select):disabled { background: var(--flaeche-2); border-style: dashed; }
.nur-lesen label:has(> input:disabled) { cursor: not-allowed; border-style: dashed; }
/* Jedes gesperrte Formular nennt den Grund – nie die Meldung „offline“, die Sperre kommt von der Ansicht. */
.nur-lesen .freigeben .knopf:disabled ~ .nur-offline { display: none; }
.nur-lesen form:has(:is(button, textarea):disabled)::before {
  content: "In der Kundenansicht gesperrt – nur lesend."; display: block; margin-bottom: 8px;
  color: var(--text-2); font-size: var(--t-basis);
}

/* Kundenseite: Knopf, Bestätigung nach dem Beenden und Protokoll. */
.kundenansicht form { margin: 4px 0 12px; }
.kundenansicht h3 { margin-top: 8px; }
.ansicht-beendet { display: flex; align-items: center; gap: 8px; font-weight: var(--g-mittel); color: var(--text); }
.ansicht-beendet .symbol { width: 20px; height: 20px; flex: none; color: var(--akzent); }
.ansicht-protokoll { list-style: none; display: grid; gap: 8px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Doppelbuchung auf der Kundenseite des Betreuers (Strang kalender3): beide Buchungen untereinander. */
.doppelt-buchungen { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 4px; }

/* Kundenliste: „Alle Kunden“ zugeklappt (am PC öffnet app.js sie), die Wege der Aufgaben-Kachel nebeneinander. */
.alle-kunden > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none;
}
.alle-kunden > summary::-webkit-details-marker { display: none; }
/* Zugeklappt nimmt die Liste keinen Platz ein und hat keine Tippziele. */
.alle-kunden:not([open]) > :not(summary) { display: none; }
.alle-kunden { margin-bottom: 8px; }
.alle-kunden > summary h2 { margin: 0; }
.alle-kunden > summary::after {
  content: "anzeigen"; content: "anzeigen" / ""; margin-left: auto; color: var(--akzent); font-weight: var(--g-mittel); font-size: var(--t-basis);
}
.alle-kunden[open] > summary { margin-bottom: 12px; }
.alle-kunden[open] > summary::after { content: "zuklappen"; content: "zuklappen" / ""; }
.alle-kunden > summary:focus-visible {
  outline: var(--fokus-breite) solid var(--fokus); outline-offset: var(--fokus-abstand);
}
.kachel-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 8px; }

/* Kundenseite: oben die Kennzahlen (Aufgaben, Freigaben, Anreise, Belegung), der Weg unten in der Kachel. */
.kunde-kennzahlen > .karte { display: flex; flex-direction: column; }
.kunde-kennzahlen > .karte > .textlink { margin-top: auto; padding-top: 4px; }
/* ---------- Inserat-Pflege: Stand, Klick-Anleitungen, Einrichtung (Betreuer) ---------- */

/* Formulare: Felder untereinander, volle Breite; kurze Felder für Beträge, Zahlen und Daten. */
:is(.stand-formular, .anleitung-neu, .checkpunkt-form, .pfad-korrektur form, .abschluss-form, .abrechnung-form) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
}
:is(.stand-formular, .anleitung-neu, .pfad-korrektur form, .abschluss-form, .abrechnung-form) > label { font-weight: var(--g-mittel); margin-top: 8px; }
:is(.stand-formular, .anleitung-neu, .pfad-korrektur form, .abschluss-form) :is(input[type="text"], textarea) { width: 100%; }
:is(.stand-formular, .anleitung-neu, .checkpunkt-form, .pfad-korrektur, .abschluss-form) textarea,
.checkpunkt-form input[type="date"] {
  min-height: 48px; padding: 8px 12px; font: inherit; font-size: var(--t-text); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein); resize: vertical;
}
:is(.stand-formular, .anleitung-neu, .checkpunkt-form, .pfad-korrektur, .abschluss-form, .abrechnung-form) :is(input, textarea):focus { border-color: var(--akzent); }
:is(.stand-formular, .anleitung-neu) :is(input, textarea)[aria-invalid="true"] { border-color: var(--fehler-linie); }
:is(.stand-formular, .anleitung-neu, .checkpunkt-form, .abschluss-form, .abrechnung-form) input.feld-kurz { width: 10em; max-width: 100%; min-width: 0; flex: none; }
:is(.stand-formular, .anleitung-neu, .abschluss-form, .abrechnung-form) .knopf, .pfad-korrektur .knopf { justify-self: start; }
:is(.abschluss-form, .abrechnung-form) :is(p, fieldset) { margin: 0; }
.stand-geprueft { margin: 16px 0; }
/* Gruppen ohne eingebauten Rahmen des Browsers: Legende wie eine Feldbeschriftung. */
.anleitung-neu fieldset#fotos { margin: 8px 0 0; padding: 0; border: 0; min-width: 0; }
.anleitung-neu fieldset#fotos > legend { font-weight: var(--g-mittel); padding: 0; margin-bottom: 4px; }
/* Gebühren wie die übrigen Felder: ohne eigenen Rahmen, Bezeichnung in mittlerer Stärke. */
.stand-formular fieldset.gebuehr { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; border: 0; min-width: 0; }
.stand-formular fieldset.gebuehr legend { font-weight: var(--g-mittel); padding: 0; margin-bottom: 4px; }
.stand-formular fieldset.gebuehr label { margin-top: 0; font-weight: 400; }
/* Ankreuzfelder (Portale): eckig mit Haken über den gemeinsamen Baustein in app.css. */
/* Leiser Knopf (Haken entfernen, Wieder öffnen): Nebenweg wie ein gedämpfter Textlink (Regel 16), 44 px hoch. */
.knopf-leise {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; font-size: var(--t-basis); font-weight: var(--g-mittel); color: var(--text-2); text-decoration: none;
  cursor: pointer;
}
.knopf-leise:hover { color: var(--akzent); }
.knopf-leise:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.wahl-reihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Listen mit ganzer Zeile als Weg (Regel 3). */
.zeile-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0;
  color: var(--text); text-decoration: none;
}
.zeile-text { display: flex; flex-direction: column; min-width: 0; }
.zeile-link > .symbol { flex: none; color: var(--text-2); }
.zeile-link:hover .zeile-titel { color: var(--akzent); }
.zeile-titel { font-weight: var(--g-mittel); }
.zeile-link .gedaempft { font-size: var(--t-basis); font-variant-numeric: tabular-nums; }
.wege { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }

/* Angaben mit mehrzeiligen Texten (Beschreibung, Hausregeln). */
.mehrzeilig { white-space: pre-line; overflow-wrap: anywhere; }
.stand-angaben div { padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.stand-angaben div:last-child { border-bottom: 0; }
/* Am Handy Bezeichnung über dem Wert, damit lange Wörter nicht mitten im Wort brechen. */
@media (max-width: 599px) { .stand-angaben div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (min-width: 1024px) { .stand-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }

/* Fotos in Reihenfolge 1 … n mit Vorschau. */
.foto-reihe, .foto-wahl { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 8px 0; }
.foto-reihe li, .foto-wahl li { display: grid; gap: 4px; justify-items: start; position: relative; }
.foto-reihe img, .foto-wahl img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--r-klein); border: 1px solid var(--linie); }
.foto-nr {
  position: absolute; top: 4px; left: 4px; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-weight: var(--g-mittel);
  background: var(--akzent); color: var(--akzent-text); font-variant-numeric: tabular-nums;
}
.foto-wahl label { font-weight: 400; margin-top: 0; font-size: var(--t-basis); }

/* Klick-Anleitung: nummerierte Schritte je Portal. */
.anleitung-ziel { font-size: var(--t-text); margin: 0 0 4px; }
.anleitung-portale { display: grid; gap: 16px; }
@media (min-width: 1024px) { .anleitung-portale { gap: 24px; } }
/* Formular „Stand eintragen“ zugeklappt, solange ein Stand da ist. */
.stand-aendern > summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--akzent); font-weight: var(--g-mittel);
}
.stand-aendern:not([open]) > :not(summary) { display: none; }
.stand-aendern > form { margin-top: 8px; }
.anleitung-neu { margin-top: 16px; }
.ohne-fotos { margin: 16px 0 0; }
@media (min-width: 1200px) { .anleitung-portale { grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); align-items: stretch; } }
.anleitung-portal h2 .klein { font-weight: 400; }
.schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.schritt { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.schritt:last-child { border-bottom: 0; padding-bottom: 0; }
.anleitung-sprung { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 16px; }
.anleitung-sprung .gedaempft { font-weight: 400; }
.anleitung-sprung .textlink { gap: 6px; }
.schritt-nr {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--akzent); color: var(--akzent); font-weight: var(--g-mittel); font-variant-numeric: tabular-nums;
}
.schritt.erledigt .schritt-nr { background: var(--akzent); color: var(--akzent-text); }
.schritt.erledigt .schritt-text { color: var(--text-2); font-weight: 400; }
.schritt.erledigt .schritt-nr .symbol { width: 18px; height: 18px; }
.schritt-inhalt { display: grid; gap: 8px; min-width: 0; }
.schritt-inhalt p { margin: 0; }
.schritt-text { font-weight: var(--g-mittel); }
.schritt-pfad { overflow-wrap: anywhere; }
/* Einzutragender Wert in normaler Schrift auf grauer Fläche (kein Eingabefeld), zum Kopieren. */
.wert-kopie {
  margin: 0; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 16em; overflow: auto;
  border: 0; border-radius: var(--r-klein); background: var(--flaeche-2); font-size: var(--t-text);
}
.haken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* „Weg stimmte so“: ganze Zeile tippbar, eckiges Kästchen wie bei der Portalwahl. */
.weg-stimmt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 400; cursor: pointer; }
/* Das Kästchen selbst (eckig, Haken, Rand ≥ 3 : 1) kommt aus dem gemeinsamen Baustein in app.css. */
.weg-stimmt input:focus-visible { outline: none; }
.weg-stimmt:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 4px; }
/* Fotos im Schritt klein: zum Herunterladen als Liste, zum Anordnen nur Miniaturen. */
.fotos-laden .foto-reihe { flex-direction: column; gap: 4px; }
.fotos-laden .foto-reihe li { grid-template-columns: 64px auto; align-items: center; column-gap: 12px; }
.fotos-laden .foto-reihe img { width: 64px; height: 48px; }
.fotos-mini .foto-reihe { gap: 8px; }
.fotos-mini .foto-reihe img { width: 56px; height: 42px; }
:is(.fotos-laden, .fotos-mini) .foto-nr {
  top: 2px; left: 2px; min-width: 24px; height: 24px; padding: 0 6px; font-size: var(--t-basis);
}
/* Fertige Portale zugeklappt, damit die Anleitung am Handy kurz bleibt. */
.schritte-fertig > summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--akzent); font-weight: var(--g-mittel);
}
.schritte-fertig:not([open]) > :not(summary) { display: none; }
.pfad-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.pfad-aktionen > form { margin: 0; }
.pfad-korrektur { margin-top: 0; flex: 1 1 16rem; min-width: 0; }
.pfad-korrektur:not([open]) > :not(summary) { display: none; }
.pfad-korrektur form { margin-top: 8px; }
.pfad-liste .schritt-pfad { margin: 4px 0 8px; }
.pfad-liste li { padding: 12px 0; }
.pfad-liste .zeile-titel { margin: 0; }
.pfad-gruppe { border-top: 1px solid var(--linie); padding: 4px 0; }
.pfad-gruppe > summary {
  display: flex; align-items: center; min-height: 48px; cursor: pointer; font-weight: var(--g-mittel); font-size: var(--t-text);
}
.pfad-gruppe > summary .gedaempft { font-weight: 400; }
.pfad-gruppe:not([open]) > :not(summary) { display: none; }
/* Pfeil an aufklappbaren Gruppen (wie bei der Live-Vorschau). */
:is(.pfad-gruppe, .schritte-fertig) > summary { list-style: none; gap: 8px; }
:is(.pfad-gruppe, .schritte-fertig) > summary::-webkit-details-marker { display: none; }
:is(.pfad-gruppe, .schritte-fertig) > summary::after {
  content: ""; width: 9px; height: 9px; margin: 0 8px 4px auto; flex: none;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg);
}
:is(.pfad-gruppe, .schritte-fertig)[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }

/* Etikett „gut“ (Mint, Regel 11) für erledigte Schritte und bestätigte Pfade. */
.etikett-gut { background: var(--gut-hg); color: var(--text); }
.etikett-gut .symbol { color: var(--gut); }

/* Wunsch als Zitat über dem Formular. */
.wunsch-zitat { margin: 0; padding: 8px 0 8px 16px; border-left: 2px solid var(--linie); white-space: pre-line; color: var(--text); }

/* Abschluss: vorher/nachher. */
.vergleich-angaben dd p { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.vergleich-angaben div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.vergleich-angaben dt { font-weight: var(--g-mittel); color: var(--text); }
@media (min-width: 1024px) {
  .vergleich-angaben dd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .vergleich-angaben dd .foto-reihe { grid-column: 1 / -1; }
}
.abschluss-form input#minuten { width: 10em; }

/* Einrichtungs-Checkliste. */
.checkliste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.checkliste > .checkpunkt:first-child { padding-top: 0; }
.checkpunkt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.checkpunkt:last-child { border-bottom: 0; padding-bottom: 0; }
/* Erledigte Punkte kurz: Titel, Datum, „Wieder öffnen“. */
.checkpunkt.erledigt > p { display: none; }
.anderes-datum { margin-top: 0; }
.anderes-datum:not([open]) > :not(summary) { display: none; }
.anderes-datum form { margin-top: 8px; }
.checkpunkt-titel { overflow-wrap: anywhere; }
.checkpunkt-form input[type="date"] { width: 100%; max-width: 12em; min-width: 0; }
.checkpunkt p { margin: 0; }
.checkpunkt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.checkpunkt-titel { font-size: var(--t-text); font-weight: var(--g-titel); margin: 0; }
.checkpunkt-form label { font-weight: var(--g-mittel); }
.checkpunkt-form .knopfzeile { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
@media (min-width: 1024px) { form.checkpunkt-form { grid-template-columns: auto auto 1fr; align-items: center; justify-content: start; } }
/* Navigation nach Paket. Ohne Buchungsdaten (Paket S1/S2) hat „Freigaben“ am Handy einen eigenen Reiter; die Zahl
   wartender Freigaben steht dann als Kreis am Symbol. Bei S3/S4 ist der Eintrag am Handy ausgeblendet (nur-pc). */
.nav-liste li:not(.nur-pc) a[href="/freigaben"] { position: relative; }
/* Auch leer (noch nicht geladen) liegt die Zahl über dem Symbol, damit das Wort nicht verrutscht. */
.nav-liste li:not(.nur-pc) a[href="/freigaben"] .nav-zaehler {
  display: inline-block; position: absolute; top: 4px; left: calc(50% + 4px);
}
.nav-liste li:not(.nur-pc) a[href="/freigaben"] .nav-zaehler:not(:empty) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px;
  background: var(--akzent); color: var(--akzent-text);
  font-size: var(--t-basis); font-weight: var(--g-mittel); font-variant-numeric: tabular-nums; line-height: 1;
}
@media (min-width: 1024px) {
  /* Am PC wie bisher: Zahl rechts in der Zeile (bereiche/freigaben.css). */
  /* Nur ausgeklappt; eingeklappt bestimmt bereiche/leiste.css Lage und Kreis für alle Pakete gleich. */
  :root:not(.leiste-zu) .nav-liste li:not(.nur-pc) a[href="/freigaben"] { position: static; }
  :root:not(.leiste-zu) .nav-liste li:not(.nur-pc) a[href="/freigaben"] .nav-zaehler { position: static; }
  :root:not(.leiste-zu) .nav-liste li:not(.nur-pc) a[href="/freigaben"] .nav-zaehler:not(:empty) {
    position: static; min-width: 1.6em; height: auto; padding: 0 8px;
    background: var(--akzent-weich); color: var(--text); line-height: inherit;
  }
}

/* Leerzustand ohne Buchungsdaten: Symbol in der Zeile der Überschrift, Wege untereinander, 8 px zwischen den
   Tippzielen. */
.paket-leer .leer-titel { display: flex; align-items: center; gap: 8px; }
.paket-leer .leer-titel .symbol { color: var(--akzent); width: 24px; height: 24px; flex: none; }
.paket-wege { display: grid; gap: 8px; justify-items: start; margin-top: 8px; }

/* „Heute“ ohne Buchungsdaten: „Zu erledigen“ hat schon eine Linie unten; der nächste Abschnitt braucht keine zweite. */
.heute-ohne-buchungen .karte.erledigen + .karte { border-top: 0; padding-top: 12px; }
/* ---------- Smoobu-Zugänge (Betreuer: Agenturkonto und eigene Konten der Kunden) ---------- */
.zugang-liste { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--linie); }
.zugang-eintrag {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 0; border-bottom: 1px solid var(--linie);
}
.zugang-eintrag:last-child { border-bottom: 0; }
.zugang-eintrag p { margin: 0 0 4px; }
.zugang-spalte { flex: 1 1 16em; min-width: 0; }
.zugang-name { font-weight: var(--g-mittel); overflow-wrap: anywhere; }
.zugang-zustand { margin: 0; }
.etikett.zugang-gueltig { background: var(--akzent-weich); color: var(--akzent); }
.zugang-formular { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; max-width: 720px; }
.zugang-formular .knopf { justify-self: start; }
.zugang-formular .wahl { margin: 0; }
.feld input[type="password"] {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: var(--t-text); color: var(--text);
  background: var(--flaeche); border: 2px solid var(--linie); border-radius: 12px; appearance: none; -webkit-appearance: none;
}
.zugang-knoepfe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 8px 0 0; }
.zugang-knoepfe form { margin: 0; }

/* Aufklappen ohne Skript: Rückfragen und das Formular „Schlüssel ersetzen“. */
.zugang-klappe { flex: 1 1 100%; }
.zugang-klappe summary { list-style: none; }
.zugang-klappe summary::-webkit-details-marker { display: none; }
.zugang-klappe summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.zugang-klappe:not([open]) > form { display: none; }
.zugang-eintrag .zugang-klappe { flex: 0 1 auto; }
.zugang-eintrag .zugang-klappe[open] { flex: 1 1 100%; }

/* Rückfrage vor folgenreichen Schritten: Warnrahmen, roter Bestätigen-Knopf, Abbrechen. */
.zugang-rueckfrage {
  display: grid; gap: 12px; max-width: 720px; margin-top: 12px; padding: 16px;
  border: 2px solid var(--warn-linie); border-radius: 12px; background: var(--warn-hg); color: var(--warn);
}
.zugang-rueckfrage p { margin: 0; }
.zugang-rueckfrage-titel { font-weight: var(--g-titel); font-size: var(--t-text); margin: 0; }
.zugang-rueckfrage-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

/* Einmal sichtbare Webhook-Adresse: eigene Zeile, mit einem Tipp ganz markiert. */
code.zugang-adresse {
  display: block; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--flaeche);
  color: var(--text); font-size: var(--t-basis); overflow-wrap: anywhere; word-break: break-all; user-select: all;
}
.zugang-klappe[open] > .zugang-formular { margin-top: 16px; }
/* ---------- Benachrichtigungen (Strang hinweise, Probelauf) ---------- */

/* Einstellungen: je Anlass eine Zeile, ganze Zeile tippbar, Schalter rechts. */
.schalter-liste { list-style: none; margin: 0; padding: 0; }
.schalter-liste > li { border-bottom: 1px solid var(--linie); padding-block: 4px; }
.schalter-liste > li:last-child { border-bottom: 0; }
.schalter {
  display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 12px 0; cursor: pointer;
}
div.schalter { cursor: default; }
.schalter-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.schalter-titel { font-weight: var(--g-mittel); }
.schalter .etikett { flex: none; }
/* Schalter mit sichtbarem Stand darunter („An“/„Aus“), nicht nur über die Farbe. */
.schalter-griff { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 52px; }
.schalter-stand::after { content: "Aus"; color: var(--text); }
.schalter input[type="checkbox"]:checked + .schalter-stand::after { content: "An"; color: var(--text); font-weight: var(--g-mittel); }
.schalter input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 32px; margin: 0;
  border: 2px solid var(--text-2); border-radius: 999px; background: var(--flaeche); cursor: pointer;
}
.schalter input[type="checkbox"]::before {
  content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-2); transition: transform 0.15s ease;
}
.schalter input[type="checkbox"]:checked { border-color: var(--akzent); background: var(--akzent); }
.schalter input[type="checkbox"]:checked::before { transform: translateX(20px); background: var(--akzent-text); }
.schalter input[type="checkbox"]:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.schalter:hover { background: var(--flaeche-2); }
div.schalter:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .schalter input[type="checkbox"]::before { transition: none; }
}
.hinweis-formular { max-width: 46rem; }
.hinweis-formular .knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 24px; }
.hinweis-formular .karte > p { margin: 0 0 12px; }

/* Abbestellen ohne Anmeldung */
.abbestellen form { margin: 4px 0; }

/* Ausgang: „Jetzt prüfen“ für sich, darunter die Filter als eine Bedienzeile. */
.ausgang-pruefen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; }
.ausgang-filter { margin: 0 0 12px; }
.ausgang-filter .wahl-pille { min-height: 44px; }
.ausgang-an { display: flex; flex-wrap: wrap; gap: 0 8px; overflow-wrap: anywhere; }
.ausgang-anlass { overflow-wrap: anywhere; }
.ausgang-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ausgang-grund { flex-basis: 100%; color: var(--text-2); }
.unterzeile .ausgang-grund { display: block; }

/* Ab 1200 px als Tabelle aus demselben Markup: Betreff mit Anlass darunter, Empfänger, Stand. */
@media (min-width: 1200px) {
  .ausgang-kopf, .ausgang-liste .ausgang-zeile > .karte-inhalt {
    display: grid; grid-template-columns: minmax(16rem, 1.6fr) minmax(14rem, 1.1fr) minmax(16rem, 1.2fr);
    column-gap: 24px; align-items: start;
  }
  .ausgang-liste .ausgang-zeile > .karte-inhalt {
    grid-template-areas: "titel an stand" "anlass an stand"; grid-template-rows: auto 1fr; row-gap: 4px;
  }
  .ausgang-liste .karte-titel { grid-area: titel; }
  .ausgang-liste .ausgang-an { grid-area: an; }
  .ausgang-liste .ausgang-stand { grid-area: stand; }
  .ausgang-liste .ausgang-anlass { grid-area: anlass; }
  .ausgang-kopf { padding: 0 40px 8px 4px; color: var(--text-2); font-weight: var(--g-mittel); }
  .ausgang-liste .karte-zeile { font-variant-numeric: tabular-nums; }
}

/* Vorschau einer Mail: die eine hervorgehobene Fläche der Seite, wie ein Brief im Postfach. */
.mail-vorschau {
  --mail-grund: #f3f5f8; --mail-text: #18202b; --mail-akzent: #1f5fbf; --mail-leise: #586272; --mail-linie: #dde2e9;
  background: var(--mail-grund); color: var(--mail-text); border: 1px solid var(--mail-linie); border-radius: var(--r);
  padding: 16px 16px 4px; overflow-wrap: anywhere; color-scheme: light;
}
.mail-vorschau p { margin: 0 0 12px; }
.mail-marke { color: var(--mail-akzent); font-weight: 600; }
.mail-ueberschrift { font-family: var(--schrift-titel); font-size: var(--t-abschnitt); font-weight: 600; }
.mail-zeilen { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; }
.mail-scheinlink { color: var(--mail-akzent); font-weight: 600; text-decoration: underline; }
.mail-scheinknopf {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: var(--r);
  background: var(--mail-akzent); color: #ffffff; font-weight: 600;
}
.mail-fuss { border-top: 1px solid var(--mail-linie); padding-top: 12px; margin-top: 16px; color: var(--mail-leise); }
.mail-fuss .mail-scheinlink { display: inline-block; padding-block: 6px; color: var(--mail-leise); font-weight: 400; }
.mail-kopf div { grid-template-columns: minmax(7.5em, 38%) minmax(0, 1fr); }
.mail-kopf dd { overflow-wrap: break-word; }
.mail-technik dd { overflow-wrap: anywhere; }
.ausgang-vorschau details.erklaerung { margin-top: 8px; }
.mail-quelle {
  margin: 0 0 12px; padding: 12px; border: 1px solid var(--linie); border-radius: var(--r-klein);
  background: var(--flaeche-2); color: var(--text); font-size: var(--t-basis); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%;
}
/* ---------- Bewertungen (Strang bewertungen, Gestaltung 30.10.2026) ---------- */
/* Je Haus ein Titel über der Reihe (h2.reihe-titel), darunter je Bewertung eine Kachel (Regel 5), damit jede Kachel
   höchstens einen Hauptknopf hat (Regel 17): „Antwort kopieren“ (der erste Schritt). „Erledigt“ ist ein Zweitknopf,
   damit niemand ihn vor dem Antworten beim Portal tippt. */
.bewertungen-warum { margin: 0 0 4px; max-width: 70ch; }
.bewertungen-ablauf { margin: 0 0 24px; font-size: var(--t-basis); color: var(--text-2); max-width: 70ch; }
.bewertungen-haus { margin-bottom: 8px; }
.bewertungen-haus > h2 { display: flex; align-items: center; gap: 8px; }
.karte.bewertung { display: grid; gap: 12px; }
/* Am PC nur so breit wie der Inhalt, damit rechts kein leeres Weiß steht. */
@media (min-width: 600px) { .karte.bewertung, .karte.bewertungen-schon { max-width: calc(70ch + 50px); } }
.bewertung-kopf { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; row-gap: 4px; }
/* Sterne sind ein Symbol: Textfarbe, bei Kritik das Achtung-Gelb (nur als Symbol, Regel 1). */
.bewertung-sterne { color: var(--text-2); font-size: var(--t-text); letter-spacing: 1px; white-space: nowrap; }
.bewertung-sterne.kritisch { color: var(--warn); }
.bewertung-titel { margin: 0; font-size: var(--t-text); }
.bewertung-datum {
  grid-column: 1 / -1; margin: 0; font-size: var(--t-basis); color: var(--text-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
}
.bewertung-text { margin: 0; padding-left: 12px; border-left: 3px solid var(--linie); }
.bewertung-text p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
p.bewertung-text { padding-left: 0; border-left: 0; color: var(--text-2); }
.bewertung-antwort { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.bewertung-antwort > label { font-weight: var(--g-mittel); }
.bewertung-antwort .feld-hilfe { margin: 0; color: var(--text-2); font-size: var(--t-basis); }
.bewertung-antwort textarea {
  width: 100%; min-height: 9em; padding: 8px 12px; font: inherit; font-size: var(--t-text); color: var(--text);
  background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r-klein); resize: vertical;
  /* Wo der Browser es kann, passt das Feld sich dem ganzen Vorschlag an; sonst gilt die Zeilenzahl aus dem Server. */
  field-sizing: content;
}
.bewertung-antwort textarea:focus { border-color: var(--akzent); outline: 2px solid var(--akzent); outline-offset: 0; }
.bewertung-antwort textarea[aria-invalid="true"] { border-color: var(--fehler-linie); }
.bewertung-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bewertung-wege .knopf[hidden], .bewertung-kopiert[hidden] { display: none; }
.bewertung-wege .knopf .symbol { width: 18px; height: 18px; }
.bewertung-kopiert { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--text-2); }
.bewertung-kopiert .symbol { width: 18px; height: 18px; color: var(--gut); }
.bewertung-antwort > .knopf[type="submit"] { justify-self: start; margin-top: 4px; }
.bewertungen-bestaetigung { margin-bottom: 16px; }
.bewertungen-liste { list-style: none; margin: 0; padding: 0; }
.bewertung-erledigt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; padding: 8px 0;
  font-size: var(--t-basis);
}
.bewertung-erledigt + .bewertung-erledigt { border-top: 1px solid var(--linie); }
.bewertung-erledigt:first-child { padding-top: 0; }
.bewertung-erledigt:last-child { padding-bottom: 0; }
.bewertung-erledigt .bewertung-sterne { font-size: var(--t-basis); }
.bewertung-zurueck { margin: 0; flex-basis: 100%; }
/* „Heute“: eine schlichte Kachel mit einem Weg, unter der Hauptsache. */
.karte.bewertungen-heute { padding-block: 8px; }
@media (min-width: 1024px) { .karte.bewertungen-heute { padding-block: 16px; } }
.bewertungen-heute .erledigen-weg > .symbol { color: var(--text-2); flex: none; }
.bewertungen-stoerung { margin-bottom: 12px; }
.bewertungen-betreuer-weg { margin: 0 0 12px; }
.bewertungen-abruf { margin: 0 0 8px; }
@media (max-width: 599px) {
  .bewertung-antwort > .knopf[type="submit"] { justify-self: stretch; }
  .bewertung-wege .knopf { flex: 1 1 100%; }
}
/* ---------- Nachrichten als Chat (Strang chat): Liste links, Gespräch rechts; am Handy eins nach dem anderen ----------
   Ob ein Gespräch offen ist, liest das CSS an der rechten Spalte ab (#gespraech ohne .ohne-gespraech), damit htmx
   beim Wechsel nur diese Spalte tauscht. Kopf und Eingabe sind sticky: Prüfwerkzeuge zählen sie nicht als
   Überlappung mit dem darunter scrollenden Verlauf. Farben nur über die Tokens aus app.css. */

main:has(> .chat), main:has(> .nur-lesen > .chat) { padding: 0; max-width: none; }

.chat-liste { background: var(--flaeche); }
.chat-liste-kopf { padding: 16px var(--seitenrand) 0; margin-bottom: 12px; }
/* Stand unter dem Titel (die schmale Spalte hat keinen Platz für ihn rechts daneben). */
.chat .chat-liste-kopf.seitenkopf, .chat .chat-liste-kopf.seitenkopf:has(> .stand) { display: block; }
.chat .chat-liste-kopf > .stand { margin: 4px 0 0; text-align: left; }
.chat-liste-kopf .hinweis { margin: 12px 0 0; }
.chat-liste > .leer { margin-inline: var(--seitenrand); }

/* Liste: Kreis mit Kürzel, daneben Gast und Zeit, Haus, letzte Nachricht. */
.chat .faeden { border-top: 1px solid var(--linie); }
.chat .faden-link { padding: 12px var(--seitenrand); }
.chat .faden-link:has(> .faden-bild) { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; }
.chat .faden-link > .faden-bild { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
.chat .faden-link:has(> .faden-bild) > span:not(.faden-bild, .etikett-neu) { grid-column: 2; }
.chat .faden-link > .etikett-neu { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.chat .faden-link[aria-current="page"] { background: var(--akzent-weich); }
/* Haus und Zeitraum als ein umbrechender Text: Der Punkt bleibt vor dem ersten Wort. */
.chat .faden-link > .faden-haus { display: block; }
.chat .faden-link > .faden-haus > .haus-punkt { margin-right: 6px; }
.chat .faden-auszug {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.faden-bild {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--flaeche-2); color: var(--text); font-size: var(--t-basis); font-weight: var(--g-mittel);
}
.faden.ungelesen .faden-bild { background: var(--akzent-weich); }

/* Gespräch: Kopf, Verlauf (scrollt, beginnt unten), Eingabe. */
.gespraech { display: flex; flex-direction: column; min-width: 0; background: var(--hg); }
.gespraech-kopf {
  position: sticky; top: 0; z-index: 3; flex: none;
  padding: 8px var(--seitenrand); background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.gespraech-zeile { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.gespraech-zeile > .faden-bild { width: 40px; height: 40px; }
.gespraech-zurueck {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; margin-left: -8px; border-radius: 50%; color: var(--text);
}
.gespraech-zurueck:hover { background: var(--flaeche-2); }
.gespraech-titel { flex: 1 1 0; min-width: 0; }
.gespraech-titel h1 { font-size: var(--t-abschnitt); margin: 0; }
.gespraech-titel h1:focus { outline: none; }
.gespraech-titel .buchungskopf { color: var(--text-2); margin: 0; }
.gespraech-titel .buchungskopf .haus-punkt { margin-right: 4px; }
.gespraech-titel .stand { margin: 0; }
.kopf-kurz { display: none; }
.gespraech-buchung { display: inline-block; line-height: 44px; min-height: 44px; white-space: nowrap; flex: none; }
.gespraech-kopf .hinweis { margin: 4px 0; padding: 4px 12px; gap: 8px; align-items: center; }
.gespraech-kopf .hinweis > .symbol { width: 20px; height: 20px; }
/* Titel und Satz in einer Zeile, damit der Verlauf Platz behält. */
.gespraech-kopf .hinweis p { display: inline; margin: 0; }
.gespraech-kopf .hinweis-titel::after { content: ". "; }
/* Volle Tippfläche, ohne die Zeile höher zu machen. */
.gespraech-kopf .hinweis .textlink { margin-block: -10px; vertical-align: middle; }

/* Probelauf als eine ruhige Zeile über der Eingabe. */
.probelauf-zeile { flex: none; background: var(--flaeche); border-top: 1px solid var(--linie); padding: 4px var(--seitenrand) 0; }
.probelauf-zeile .hinweis {
  margin: 0; padding: 4px 0; gap: 8px; align-items: center; border: 0; background: none; color: var(--text-2);
  font-size: var(--t-klein);
}
.probelauf-zeile .hinweis > .symbol { width: 18px; height: 18px; }
.probelauf-zeile .hinweis p { display: inline; margin: 0; }
.probelauf-zeile .hinweis-titel { color: var(--text); }
.probelauf-zeile .hinweis-titel::after { content: ": "; }
.chat .probelauf-zeile + .antwort { border-top: 0; padding-top: 4px; }
/* In der Liste dieselbe ruhige Zeile, ohne eigene Fläche (der Kopf hat schon Rand und Abstand). */
.chat-liste-kopf .liste-probelauf { background: none; border-top: 0; padding: 0; margin-top: 8px; }
/* Mehrzeilig: Zeichen an der ersten Zeile statt mittig. */
.chat-liste-kopf .liste-probelauf .hinweis { align-items: start; }
.chat-liste-kopf .liste-probelauf .hinweis > .symbol { margin-top: 1px; }
/* Wie der Sprunglink: außerhalb des Bildschirms, bis die Tastatur ihn erreicht. */
.nur-fokus:not(:focus) { position: absolute; left: -9999px; }
.nur-fokus:focus { display: inline-block; min-height: 44px; line-height: 44px; }

.verlauf-flaeche {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  /* Umgekehrte Spalte: Der Verlauf steht beim Öffnen am Ende, auch ohne Skript. */
  display: flex; flex-direction: column-reverse;
}
.verlauf-flaeche:focus-visible { outline-offset: -3px; }
.verlauf-innen { padding: 12px var(--seitenrand) 16px; }
.verlauf-leer { color: var(--text-2); text-align: center; margin: 24px 0; }

.chat .verlauf { gap: 4px; }
.tag-trenner { justify-self: center; margin: 12px 0 8px; }
.tag-trenner h3 {
  margin: 0; padding: 4px 12px; border-radius: 999px;
  background: var(--flaeche); color: var(--text-2); font-size: var(--t-basis); font-weight: var(--g-mittel);
}
.chat .blase {
  max-width: min(85%, 36rem); padding: 6px 12px 4px; border-radius: var(--r); border: 1px solid transparent;
}
.chat .vom-gast { background: var(--flaeche); border-color: var(--linie); border-top-left-radius: 4px; border-bottom-left-radius: var(--r); }
.chat .an-gast { background: var(--akzent-weich); border-top-right-radius: 4px; border-bottom-right-radius: var(--r); }
/* Gestrichelt heißt weiter „Probelauf – nicht gesendet“. */
.chat .an-gast:not(.gesendet) { border: 1px dashed var(--akzent); }
/* Sprecherwechsel: etwas mehr Luft, sonst dicht wie im Chat. */
.chat .blase.vom-gast + .blase.an-gast, .chat .blase.an-gast + .blase.vom-gast { margin-top: 8px; }
.chat .blase-text { margin-top: 0; }
.blase-fuss {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 8px;
  margin-top: 2px; color: var(--text-2); line-height: 1.3;
}
.blase-fuss time { font-variant-numeric: tabular-nums; }
.chat .blase-stand { margin: 0; gap: 4px; font-weight: 400; }
.chat .blase-stand .symbol { width: 16px; height: 16px; }

.blase-anhang { margin: 2px -6px 8px; display: grid; gap: 8px; }
.blase-bild { display: block; border-radius: var(--r-klein); overflow: hidden; line-height: 0; }
.blase-bild { justify-self: start; }
/* Ganzes Bild, nichts abgeschnitten; Hochformat nicht höher als ein halber Bildschirm. */
.blase-bild img { display: block; width: auto; max-width: min(100%, 320px); height: auto; max-height: 50dvh; background: var(--flaeche-2); }
.blase-video {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px;
  border-radius: var(--r-klein); background: var(--flaeche); color: var(--text); text-decoration: none;
}
.blase-video-vorschau {
  position: relative; display: grid; place-items: center; flex: none; width: 96px; height: 64px;
  border-radius: var(--r-klein); overflow: hidden; background: var(--flaeche-2);
}
.blase-video-vorschau video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dauer unten rechts auf der Vorschau (wie im Messenger); dunkle Fläche, damit sie auf jedem Bild lesbar bleibt. */
.blase-video-dauer {
  position: absolute; right: 4px; bottom: 4px; padding: 0 6px; border-radius: 6px;
  background: rgb(0 0 0 / 0.72); color: #fff; font-size: var(--t-klein); line-height: 1.5; font-variant-numeric: tabular-nums;
}
.blase-video-vorschau .symbol {
  position: relative; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--akzent); color: var(--akzent-text);
}
/* Mit Dauer: Vorschau etwas höher, Abspiel-Zeichen nach oben, damit die Plakette es nicht überdeckt. */
.blase-video-vorschau.mit-dauer { height: 80px; }
.blase-video-vorschau.mit-dauer .symbol { width: 36px; height: 36px; padding: 8px; translate: 0 -12px; }
.blase-video-text { display: grid; min-width: 0; }
.blase-video-titel { font-weight: var(--g-mittel); }
.blase-video:hover .blase-video-titel { text-decoration: underline; }
.blase-link { margin: 0; padding-inline: 6px; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }

.chat .faden-stand { justify-content: center; text-align: center; margin-top: 16px; }

/* Eingabe unten: Büroklammer, Feld (wächst mit), Senden. */
.chat .antwort {
  position: sticky; bottom: 0; z-index: 3; flex: none; gap: 4px;
  padding: 8px var(--seitenrand) calc(8px + env(safe-area-inset-bottom));
  background: var(--flaeche); border-top: 1px solid var(--linie);
}
.eingabe-zeile { display: flex; align-items: flex-end; gap: 8px; }
.chat .antwort textarea {
  flex: 1 1 auto; min-width: 0; min-height: 48px; max-height: 10lh; padding: 11px 16px;
  border-radius: 24px; resize: none; line-height: 1.4; field-sizing: content;
}
.senden-knopf, .anhang-knopf {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
}
.senden-knopf { border: 0; background: var(--akzent); color: var(--akzent-text); }
.senden-knopf:disabled { opacity: 0.5; cursor: default; }
.anhang-knopf { color: var(--text-2); list-style: none; }
.anhang-knopf::-webkit-details-marker { display: none; }
.anhang-knopf:hover, .anhang-menue[open] > .anhang-knopf { background: var(--flaeche-2); color: var(--text); }
.chat .antwort .feld-hilfe, .hochladen-stand { margin: 0; color: var(--text-2); }
.chat .antwort .feld-fehler { margin: 0; }

/* Büroklammer unten links in der Eingabezeile; ihr Menü steht darüber im Fluss: Der Verlauf wird kürzer, nichts wird
   verdeckt. */
.chat .antwort { --eingabe-rand: var(--seitenrand); }
.antwort:has(> .anhang-menue) > .eingabe-zeile { padding-left: 56px; }
.anhang-knopf { position: absolute; left: var(--eingabe-rand); bottom: calc(8px + env(safe-area-inset-bottom)); }
.anhang-feld {
  display: grid; gap: 12px; max-width: 30rem; max-height: min(60dvh, 34rem); overflow-y: auto; padding: 16px;
  margin-bottom: 4px; background: var(--flaeche); border: 1px solid var(--feldrand); border-radius: var(--r);
}
.anhang-feld p { margin: 0; }
.anhang-feld-titel { font-weight: var(--g-mittel); }
.anhang-feld .datei-wahl { justify-self: start; position: relative; gap: 8px; }
.datei-wahl .symbol { width: 22px; height: 22px; }
.datei-wahl:focus-within { outline: 3px solid var(--fokus); outline-offset: 2px; }
.datei-wahl:has(.datei-eingabe:disabled) { opacity: 0.55; cursor: not-allowed; }
.anhang-merken, .anhang-gemerkt-zeile > label {
  display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer;
}
.anhang-feld input[type="checkbox"] {
  width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--akzent);
}
.anhang-feld label[for="anhang-titel"] { margin-bottom: -8px; }
.anhang-feld input[type="text"] {
  min-height: 44px; padding: 8px 12px; font: inherit; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--feldrand); border-radius: var(--r-klein);
}
.anhang-gemerkt { border: 0; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--linie); display: grid; gap: 8px; min-inline-size: 0; }
.anhang-gemerkt legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-weight: var(--g-mittel); }
.anhang-gemerkt-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

.anhang-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.anhang-chips[hidden] { display: none; }
.anhang-chip {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  border-radius: var(--r-klein); background: var(--flaeche-2); overflow: hidden;
}
.anhang-chip:has(> .symbol) { padding-left: 12px; }
.chip-entfernen:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: -3px; }
/* Abgewählt geht der Anhang nicht mit: Kachel weg. */
.anhang-chip:has(input:not(:checked)) { display: none; }
.chip-entfernen {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  color: var(--text-2); cursor: pointer; border-radius: var(--r-klein);
}
.chip-entfernen .symbol { width: 20px; height: 20px; }
.anhang-chip .chip-entfernen .symbol { color: inherit; }
.chip-entfernen:hover { color: var(--text); background: var(--flaeche); }
.anhang-chip img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-klein); }
.anhang-chip .symbol { color: var(--akzent); }

.gespraech-platzhalter {
  display: grid; place-items: center; align-content: center; gap: 12px; height: 100%; color: var(--text-2);
}
.gespraech-platzhalter .symbol { width: 48px; height: 48px; }

/* Handy und Tablet: eine Spalte. Mit offenem Gespräch nur das Gespräch, ohne untere Leiste (Zurück-Pfeil oben). */
@media (max-width: 1023px) {
  .chat .ohne-gespraech { display: none; }
  .chat:has(> .gespraech:not(.ohne-gespraech)) > .chat-liste { display: none; }
  body:has(.chat > .gespraech:not(.ohne-gespraech)) .hauptnav { display: none; }
  .chat > .gespraech:not(.ohne-gespraech) { height: 100dvh; }
  main:has(> .chat) { padding-bottom: 0; }
  main:has(> .chat > .ohne-gespraech) { padding-bottom: calc(var(--nav-hoehe) + 16px + env(safe-area-inset-bottom)); }
  html:has(.chat > .gespraech:not(.ohne-gespraech)) { scroll-padding-bottom: 0; }
}
@media (max-width: 599px) {
  .gespraech-zeile > .faden-bild { display: none; }
  .gespraech-zeile { gap: 8px; }
  .kopf-mehr, .kopf-lang, .gespraech-titel .stand { display: none; }
  .kopf-kurz { display: inline; }
  .kopf-zusatz { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* PC: zwei Spalten in voller Höhe, jede scrollt für sich. */
@media (min-width: 1024px) {
  .chat { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); height: 100dvh; }
  .chat-liste { overflow-y: auto; border-right: 1px solid var(--linie); position: sticky; top: 0; }
  .chat-liste-kopf { padding: 24px 24px 0; }
  .chat .chat-liste .faden-link { padding-inline: 24px; }
  .chat-liste > .leer { margin-inline: 24px; }
  .chat > .gespraech { height: 100dvh; }
  .gespraech-zurueck { display: none; }
  .gespraech-kopf, .chat .antwort, .probelauf-zeile { padding-inline: 24px; }
  .chat .antwort { --eingabe-rand: 24px; }
  .verlauf-innen { padding: 16px 32px 24px; }
  .chat .blase { max-width: min(70%, 40rem); }
}

/* Öffentliche Seite für den Gast: nur die Datei. */
.gast-datei main { display: grid; gap: 16px; padding-top: 24px; }
.gast-datei h1 { font-size: var(--t-abschnitt); margin: 0; }
.gast-medium { display: block; width: 100%; max-height: 80dvh; object-fit: contain; border-radius: var(--r); background: var(--flaeche-2); }
/* Chromium zeigt beim Laden eines Videos mit Bedienleiste gut eine halbe Sekunde einen Lade-Kreisel über dem ersten
   Bild, auch wenn es sofort bereit ist. Die Leiste erscheint deshalb erst nach 1,2 s (der Kreisel ist dann durch);
   sie bleibt dabei bedienbar. Ohne Unterstützung des Pseudo-Elements steht sie wie bisher sofort da. */
@keyframes gast-steuerung { from { opacity: 0; } to { opacity: 1; } }
video.gast-medium::-webkit-media-controls { animation: gast-steuerung 200ms 1200ms both; }
.gast-datei p { margin: 0; }
.hochladen-stand.fehler { color: var(--text); font-weight: var(--g-mittel); }
.blase-link .textlink { font-size: var(--t-klein); }
/* Zugeklappt wirklich weg (auch für Prüfwerkzeuge, die sonst die Lage des Inhalts messen). */
.anhang-menue:not([open]) > .anhang-feld { display: none; }
/* Der Sprunglink bleibt oben im Bild, wenn der Verlauf in sich scrollt. */
body:has(.chat) .sprung { position: fixed; }
/* Name zum Merken nur, wenn „merken“ angehakt ist. */
.anhang-titel { display: grid; gap: 4px; }
.anhang-feld:not(:has(input[name="merken"]:checked)) .anhang-titel { display: none; }
.gemerkt-text { display: grid; }
/* Fehler beim Hochladen: Fläche und Linie tragen den Zustand, der Text bleibt in Textfarbe. */
.hochladen-stand.fehler {
  padding: 8px 12px; border-radius: var(--r-klein); border-left: 4px solid var(--fehler-linie); background: var(--fehler-hg);
}
/* Blasen mit Bild so breit wie das Bild (Text bricht darunter um), wie im Messenger. */
.chat .blase.mit-anhang { width: min(85%, 346px); }
/* Anfrage im Gespräch: Angaben als ruhige Karte oben im Verlauf, „Als Buchung eintragen“ als Link darin. */
.anfrage-karte {
  display: grid; gap: 8px; width: min(100%, 30rem); margin: 4px auto 12px; padding: 12px 16px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
}
.anfrage-karte p { margin: 0; }
.anfrage-karte-titel { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.anfrage-karte-titel .symbol, .anfrage-karte .textlink .symbol { width: 20px; height: 20px; flex: none; }
.anfrage-karte .angaben { margin: 0; gap: 4px; }
.anfrage-karte .textlink { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; justify-self: start; }
.anfrage-karte .anfrage-pruefzeit, .anfrage-karte .anfrage-eingetragen { margin: 0; }
.chat .faden-wartet .etikett { margin-right: 4px; }
.chat .faden-stand-text { display: inline-block; }
/* In der gewählten Zeile hat das Etikett dieselbe Farbe wie der Hintergrund: Rand statt Fläche. */
.chat .faden-link[aria-current="page"] .faden-wartet .etikett { box-shadow: inset 0 0 0 1px var(--text-2); }
.gespraech-titel .buchungskopf .etikett { vertical-align: 1px; }
/* Anhang, dessen Datei nach Ablauf der Links gelöscht ist: nur noch die Angabe. */
.blase-entfernt { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--r-klein); background: var(--flaeche-2); color: var(--text-2); }
.blase-entfernt .symbol { width: 20px; height: 20px; flex: none; }
/* ---------- Seitenleiste am PC (Strang nav, Teil 2) ----------
   Eigene Regeln nur mit den vorhandenen Farb-Variablen, damit der Gestaltungs-Strang sie übernehmen kann.
   - Gruppen durch Trennstriche statt Überschriften.
   - „Konto & Hilfe“ unten links ins Eck gepinnt, auch wenn die Leiste scrollt.
   - Ein- und ausklappbar: `leiste.js` setzt `html.leiste-js` (Knopf sichtbar) und gemerkt `html.leiste-zu`.
     Ohne Skript bleibt die Leiste ausgeklappt und der Knopf unsichtbar. Am Handy bleibt die Reihe unten. */
.leiste-knopf { display: none; }

@media (min-width: 1024px) {
  .hauptnav { padding-bottom: 0; }
  .hauptnav .marke-wort { flex: 1 1 auto; min-width: 0; white-space: nowrap; font-size: var(--t-basis); }
  .leiste-js .leiste-knopf {
    display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative;
    width: 44px; height: 44px; margin: -4px -4px -4px auto; padding: 0;
    border: 0; border-radius: var(--r-klein); background: transparent; color: var(--text-2); cursor: pointer;
  }
  .leiste-knopf:hover { background: var(--akzent-weich); color: var(--text); }
  .leiste-knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
  /* Ausgeklappt sagt der Tooltip unter dem Knopf, was er tut (eingeklappt steht er rechts wie bei allen Symbolen). */
  :root:not(.leiste-zu) .leiste-knopf:hover::after, :root:not(.leiste-zu) .leiste-knopf:focus-visible::after {
    content: attr(data-tipp); position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
    padding: 4px 12px; border-radius: var(--r-klein); pointer-events: none;
    background: var(--text); color: var(--flaeche); font-size: var(--t-basis); font-weight: var(--g-mittel); white-space: nowrap;
  }

  /* Trennstriche statt Gruppen-Überschriften. */
  .nav-gruppe + .nav-gruppe { border-top: 1px solid var(--linie); padding-top: 16px; }

  /* Konto ganz unten links: klebt am unteren Rand, auch wenn die Einträge darüber scrollen. */
  .hauptnav .nav-bereiche .nav-unten {
    position: sticky; bottom: 0; margin: auto -12px 0; padding: 8px 12px;
    background: var(--flaeche);
  }

  /* ---- Eingeklappt: nur Symbole, das Wort als Tooltip (data-tipp) und weiter als Name für Vorleser ---- */
  .leiste-zu body.mit-nav { padding-left: 72px; }
  .leiste-zu .hauptnav { width: 72px; }
  .leiste-zu .hauptnav .marke { justify-content: center; margin: 0 0 12px; }
  /* Enger gestapelt, damit alle Symbole samt Konto auch in 720 px hohen Fenstern ohne Scrollen passen. */
  .leiste-zu .nav-bereiche { gap: 8px; }
  .leiste-zu .nav-bereiche .nav-liste { gap: 4px; }
  .leiste-zu .nav-gruppe + .nav-gruppe { padding-top: 8px; }
  .leiste-zu .nav-website, .leiste-zu .nav-aktion { margin-top: 4px; }
  .leiste-zu .marke-zeichen, .leiste-zu .marke-wort { display: none; }
  .leiste-zu .leiste-knopf { margin: 0; }
  /* Alle Einträge samt Konto: mittig, 44 px hoch; overflow sichtbar, sonst schneidet der Eintrag seinen Tooltip ab. */
  :root.leiste-zu .hauptnav .nav-liste li a,
  :root.leiste-zu .hauptnav .nav-website,
  :root.leiste-zu .hauptnav .nav-aktion {
    position: relative; justify-content: center; gap: 0; min-height: 44px; padding: 10px 0; overflow: visible;
    /* Fast so breit wie die Leiste: Platz für den Zahlenkreis neben dem Symbol. */
    margin-inline: -10px;
  }
  .leiste-zu .hauptnav .nav-wort, .leiste-zu .hauptnav .nav-text, .leiste-zu .hauptnav .konto-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  /* Zahlen (wartende Freigaben, offene Bewertungen) als Kreis am Symbol, bei allen Paketen gleich (stärker als die
     Handy-Regel in bereiche/navigation.css, die bei S1/S2 auch am PC greift). */
  :root.leiste-zu .hauptnav .nav-liste li a .nav-zaehler:not(:empty) {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 0; left: calc(50% + 10px); right: auto; margin: 0; min-width: 24px; height: 24px; padding: 0 4px;
    border-radius: 999px; background: var(--akzent); color: var(--akzent-text); line-height: 1;
    /* Neben dem Symbol oben rechts, mit einem Ring in Leistenfarbe: verdeckt höchstens die Ecke. */
    box-shadow: 0 0 0 2px var(--flaeche);
  }
  .leiste-zu .hauptnav [data-tipp]:hover::after,
  .leiste-zu .hauptnav [data-tipp]:focus-visible::after {
    content: attr(data-tipp); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    z-index: 30; padding: 4px 12px; border-radius: var(--r-klein); pointer-events: none;
    background: var(--text); color: var(--flaeche); font-size: var(--t-basis); font-weight: var(--g-mittel); white-space: nowrap;
  }
}
/* Tooltips brauchen Platz rechts neben der Leiste; scrollen muss die schmale Leiste nur in sehr niedrigen Fenstern. */
@media (min-width: 1024px) and (min-height: 720px) {
  .leiste-zu .hauptnav { overflow: visible; }
}

/* Handy: Ab 360 px Breite bekommt jeder Reiter mindestens die Breite seines Worts, den Rest teilen sich alle
   gleich; so passt „Nachrichten“ bei 390 px in eine Zeile, und der Abstand von 8 px zwischen den Tippzielen bleibt.
   In schmaleren Fenstern darf das Wort wie bisher umbrechen. */
@media (min-width: 360px) and (max-width: 1023px) {
  .hauptnav .nav-bereiche { grid-auto-columns: minmax(max-content, 1fr); }
}