/* Kundenportal Kreis Systems: Designsystem nach der abgenommenen Neuzeichnung
   (mockups/kundenportal-2026-10-18). Vorgaben und Klassen: docs/oberflaeche.md.
   Kein Inline-Stil, keine Bibliothek von außen, Schriften lokal (SIL OFL 1.1).
   Aufbau: 1 Schriften · 2 Token · 3 Grund · 4 Bausteine · 5 Formulare · 6 Listen,
   Tabellen, Daten · 7 Gerüst · 8 Seiten · 9 Support · 10 Telefon · 11 Bewegung.
   Alte Klassen der Vorlagen (btn, fld, panel, …) stehen in den Selektorlisten
   neben den neuen Namen, bis Phase B alle Vorlagen umgestellt hat. */

/* ---------- 1 Schriften ---------- */
@font-face { font-family: "Fraunces Buehne"; src: url("schrift/fraunces-aufrecht.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Buehne"; src: url("schrift/fraunces-kursiv.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Chivo"; src: url("schrift/chivo-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- 2 Token ---------- */
:root {
  --nacht: oklch(0.240 0.130 268);
  --nacht-dunkel: oklch(0.160 0.070 275);
  --blau: oklch(0.420 0.200 268);
  --koralle: oklch(0.720 0.170 40);
  --creme: oklch(0.965 0.030 95);
  --gelb: oklch(0.915 0.170 98);
  --gruen: oklch(0.75 0.17 150);
  --rot: oklch(0.62 0.2 25);

  --dauer-raus: 150ms;
  --dauer-rein: 200ms;
  --kurve-ein: cubic-bezier(0.05, 0.7, 0.1, 1);   /* rein: ease-out */
  --kurve-aus: cubic-bezier(0.3, 0, 0.8, 0.15);   /* raus: ease-in */
  --kurve-zustand: cubic-bezier(0.2, 0, 0, 1);

  --serif: "Fraunces Buehne", "Iowan Old Style", Georgia, serif;
  --grotesk: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --knopf-h: 48px;
  --r-klein: 8px;
  --r-feld: 12px;
  --r-kachel: 14px;
  --r-karte: 18px;
  --leiste-b: 272px;
}

/* Dunkel ist die Grundfassung; hell über Attribut oder Gerät */
:root, :root[data-thema="dunkel"] {
  --grund: var(--nacht-dunkel);
  --grund-2: color-mix(in oklab, var(--nacht-dunkel) 86%, var(--nacht));
  --schrift: var(--creme);
  --leise: color-mix(in oklab, var(--creme) 74%, var(--nacht));
  --signal: var(--koralle);
  --signal-text: var(--nacht-dunkel);
  --signal-hover: color-mix(in oklab, var(--koralle) 66%, var(--creme));
  --fokus: var(--koralle);
  --akzent: var(--gelb);
  --gefahr: oklch(0.70 0.19 28);
  --erfolg: oklch(0.80 0.15 150);
  --bm-bahn: var(--creme); --bm-planet: var(--gelb); --bm-mond-gross: var(--koralle); --bm-mond-klein: oklch(0.840 0.100 345);
  --text-gewicht: 360;
  --haar: color-mix(in oklab, var(--schrift) 16%, transparent);
  --haar-stark: color-mix(in oklab, var(--schrift) 32%, transparent);
  --flaeche: color-mix(in oklab, var(--creme) 5%, transparent);
  --schatten: oklch(0.05 0.05 275 / 0.8);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-thema]) {
    --grund: var(--creme); --grund-2: color-mix(in oklab, var(--creme) 92%, var(--gelb));
    --schrift: var(--nacht); --leise: color-mix(in oklab, var(--nacht) 76%, var(--creme));
    --fokus: var(--blau); --akzent: var(--blau);
    --gefahr: oklch(0.52 0.2 28); --erfolg: oklch(0.48 0.13 150);
    --bm-bahn: var(--blau); --bm-planet: var(--koralle); --bm-mond-gross: var(--nacht); --bm-mond-klein: var(--koralle);
    --text-gewicht: 400;
    --haar: color-mix(in oklab, var(--schrift) 16%, transparent); --haar-stark: color-mix(in oklab, var(--schrift) 32%, transparent);
    --flaeche: color-mix(in oklab, var(--nacht) 4%, transparent);
    --schatten: oklch(0.1 0.05 275 / 0.45);
    color-scheme: light;
  }
}
:root[data-thema="hell"] {
  --grund: var(--creme); --grund-2: color-mix(in oklab, var(--creme) 92%, var(--gelb));
  --schrift: var(--nacht); --leise: color-mix(in oklab, var(--nacht) 76%, var(--creme));
  --fokus: var(--blau); --akzent: var(--blau);
  --gefahr: oklch(0.52 0.2 28); --erfolg: oklch(0.48 0.13 150);
  --bm-bahn: var(--blau); --bm-planet: var(--koralle); --bm-mond-gross: var(--nacht); --bm-mond-klein: var(--koralle);
  --text-gewicht: 400;
  --haar: color-mix(in oklab, var(--schrift) 16%, transparent); --haar-stark: color-mix(in oklab, var(--schrift) 32%, transparent);
  --flaeche: color-mix(in oklab, var(--nacht) 4%, transparent);
  --schatten: oklch(0.1 0.05 275 / 0.45);
  color-scheme: light;
}

/* ---------- 3 Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--grund); color: var(--schrift); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; font-family: var(--grotesk); font-size: 1.0625rem; font-weight: var(--text-gewicht, 400); line-height: 1.55;
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--grund); color: var(--schrift); overflow-x: clip;
}
img, video, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
p, dd, li { text-wrap: pretty; }
p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
b, strong { font-weight: 650; }
[hidden] { display: none !important; }
.nur-vorlesen { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; border-radius: 4px; }
.sprung { position: absolute; left: 20px; top: 12px; z-index: 60; padding: 10px 16px; border-radius: 999px; background: var(--signal); color: var(--signal-text); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.sprung:focus-visible { transform: none; }
code { font-family: var(--mono); font-size: 0.875em; padding: 1px 6px; border-radius: 4px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haar); }

/* Überschriften der Ansichten: Fraunces 300 als Akzent */
.haupt h1, .anmelden h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 3.9vw, 60px); line-height: 1.04; letter-spacing: -0.02em; }
.anmelden h1 em { font-style: italic; }
.haupt h2 { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; line-height: 1.15; margin-bottom: 16px; }
.haupt h3 { font-weight: 650; font-size: 1rem; margin: 18px 0 8px; }
.haupt h1:focus, .anmelden h1:focus { outline: none; }

/* ---------- 4 Bausteine ---------- */
.bildmarke { width: 34px; height: 34px; overflow: visible; flex: 0 0 auto; }
.bm-bahn { fill: none; stroke: var(--bm-bahn); stroke-width: 3.6; }
.bm-planet { fill: var(--bm-planet); }
.bm-mond-gross { fill: var(--bm-mond-gross); }
.bm-mond-klein { fill: var(--bm-mond-klein); }

.label { display: block; font-weight: 600; font-size: 0.8125rem; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.06em; color: var(--leise); margin: 0 0 8px; }
.leise { color: var(--leise); }
.satz { color: var(--leise); }
.satz { margin-top: 12px; max-width: 46em; }
.fussnote { margin-top: 14px; font-size: 0.875rem; color: var(--leise); }
.pfeil { display: inline-block; flex: 0 0 auto; width: 0.82em; height: 0.82em; margin-left: 0.32em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Textlink */
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.32em; text-decoration-color: var(--haar-stark); }
.textlink:hover { text-decoration-color: currentColor; }
.linkknopf { border: 0; padding: 0; background: none; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--haar-stark); }
.linkknopf--gefahr { color: var(--gefahr); text-decoration-color: currentColor; }
.textlink--im-satz { display: inline; min-height: 0; }

/* Knöpfe (alt, noch in vorlagen/inhalte: btn, btn alt, btn sm) */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--knopf-h); padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--signal); color: var(--signal-text); font-family: var(--grotesk); font-weight: 650; font-size: 1rem; letter-spacing: 0.002em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.knopf:hover { background: var(--signal-hover); }
.knopf:active { transform: scale(0.97); }
.knopf:focus-visible { outline-offset: 5px; }
.knopf--still { background: transparent; color: var(--schrift); box-shadow: inset 0 0 0 1.5px var(--haar-stark); }
.knopf--still:hover { background: color-mix(in oklab, var(--schrift) 8%, transparent); box-shadow: inset 0 0 0 1.5px var(--schrift); }
.knopf--klein { height: 40px; padding: 0 16px; font-size: 0.9375rem; font-weight: 600; }
.knopf--gross { height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.knopf--breit { width: 100%; }
.knopf--gefahr { background: var(--rot); color: #fff; box-shadow: none; }
.knopf--gefahr:hover { background: oklch(0.55 0.2 25); }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }
label.knopf { cursor: pointer; }
.rund { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--haar-stark); }
.rund svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Farbschema-Umschalter (ohne JS unsichtbar, dann gilt das Gerät) */
.thema { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; margin: 0 0 0 -10px; border: 0; border-radius: 999px; background: transparent; color: var(--leise); cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.thema:hover { color: var(--schrift); }
.thema svg { width: 20px; height: 20px; color: var(--schrift); }
.thema__ring { fill: none; stroke: currentColor; stroke-width: 1.5; }
.thema__haelfte { fill: currentColor; }
[data-thema-wahl="hell"] .thema__haelfte { transform: rotate(180deg); transform-origin: 12px 12px; }
[data-thema-wahl="geraet"] .thema__haelfte { opacity: 0.4; }
html:not(.js) .thema { display: none; }
/* Nur das Zeichen wie in der Neuzeichnung; die Wahl steht im Namen des Knopfs */
.thema [data-thema-text] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Marken, Zähler, Etiketten (alt: chip, chip an; c für die Zahl je Inhaltsart) */
.etikett, .marke-neu { display: inline-block; padding: 2px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--haar-stark); color: var(--leise); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.5; white-space: nowrap; }
.etikett--an { color: var(--erfolg); box-shadow: inset 0 0 0 1px currentColor; }
.etikett--entwurf { color: var(--akzent); box-shadow: inset 0 0 0 1px currentColor; }
.zahl { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--leise); }
.punkt, .c { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--koralle); color: var(--nacht-dunkel); font-size: 0.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ampel { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--gruen); vertical-align: 1px; }
.ampel--aus { background: var(--haar-stark); }

/* Hinweise und Meldungen (alt: meldung ok, meldung fehler) */
.hinweis { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; margin: 0 0 24px; border-radius: var(--r-kachel); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haar-stark); font-weight: 600; font-size: 0.9375rem; max-width: 52em; }
.hinweis::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 0.5em; border-radius: 50%; background: var(--leise); }
.hinweis--ok { box-shadow: inset 0 0 0 1.5px var(--erfolg); }
.hinweis--ok::before { background: var(--gruen); }
.hinweis--fehler { box-shadow: inset 0 0 0 1.5px var(--gefahr); }
.hinweis--fehler::before { background: var(--gefahr); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 40; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 14px 20px; border-radius: var(--r-kachel); background: var(--schrift); color: var(--grund); font-weight: 600; font-size: 0.9375rem; box-shadow: 0 20px 40px -20px var(--schatten); }

/* Leerer Zustand */
.leerzustand { display: grid; justify-items: center; gap: 12px; padding: 36px 24px; margin: 0 0 24px; border-radius: var(--r-karte); border: 1.5px dashed var(--haar-stark); color: var(--leise); text-align: center; }

/* Flächen (alt: panel) */
.kasten { padding: 24px; border-radius: var(--r-karte); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haar); min-width: 0; }
.fehlerseite { max-width: 640px; }
.fehlerseite > * + * { margin-top: 14px; }

/* Kopfzeile einer Ansicht (alt: bar) */
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 40px; }
.zurueck { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: -8px 0 8px -4px; font-size: 0.9375rem; font-weight: 600; color: var(--leise); text-decoration: none; }
.zurueck:hover { color: var(--schrift); }
.zurueck svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Abschnitte */
.block { margin-top: 48px; }
.block:first-of-type { margin-top: 0; }
.block--abstand, .block--abstand:first-of-type { margin-top: 48px; }
.block__titel, .haupt h2.block__titel { font-family: var(--grotesk); font-weight: 600; font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); margin-bottom: 16px; }
.zwei { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.zwei { margin-top: 48px; }
.zwei .block { margin-top: 0; }
.zwei .block + .block { margin-top: 40px; }
.zwei--oben { margin-top: 0; }
.mit-rand { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 300px); gap: 56px; align-items: start; }
.randnotiz { position: sticky; top: 32px; padding: 22px; border-radius: var(--r-karte); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haar); }

/* Karten (Start) */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.karte { display: grid; align-content: start; gap: 6px; padding: 22px 22px 18px; border-radius: var(--r-karte); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haar); min-width: 0; }
.karte .label { margin: 0 0 4px; }
.karte__zahl { font-family: var(--serif); font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.karte__zahl span { font-size: 22px; letter-spacing: 0; color: var(--leise); }
.karte__name { font-family: var(--serif); font-weight: 300; font-size: 1.75rem; line-height: 1.1; overflow-wrap: anywhere; }
.karte__neben { font-size: 0.875rem; color: var(--leise); }
.karte__wege { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-top: 14px; }
.karte--support { padding-top: 18px; }
a.karte--link { text-decoration: none; }
a.karte--link:hover { box-shadow: inset 0 0 0 1px var(--haar-stark); }
.karte__zitat { font-family: var(--serif); font-weight: 300; font-size: 1.4rem; line-height: 1.25; overflow-wrap: anywhere; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* Reiter und Segmente */
.segmente { display: inline-flex; gap: 4px; padding: 4px; margin: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--haar-stark); }
.segmente { margin-bottom: 28px; }
.segmente a, .segmente button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.segmente [aria-current="page"], .segmente [aria-selected="true"] { background: var(--schrift); color: var(--grund); }
.segmente [aria-pressed="true"] { background: var(--schrift); color: var(--grund); }
.segmente--klein, .segmente--wahl { margin-bottom: 0; }
.segmente--klein button { min-height: 34px; padding: 0 12px; font-size: 0.8125rem; color: var(--leise); }
.segmente--klein [aria-pressed="true"] { color: var(--grund); }
.reiter { display: flex; gap: 4px; margin-bottom: 28px; border-bottom: 1px solid var(--haar); }
.reiter [role="tab"], .reiter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--leise); font-weight: 600; text-decoration: none; cursor: pointer; }
.reiter [aria-selected="true"], .reiter [aria-current="page"] { color: var(--schrift); border-bottom-color: var(--signal); }

/* Aufklappen */
.aufklapp { border-top: 1px solid var(--haar); }
.aufklapp summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; list-style: none; font-weight: 600; }
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--leise); }
.aufklapp[open] summary::after { content: "\2212"; }
.aufklapp > :not(summary) { margin-bottom: 18px; }

/* Rückfrage inline: <div class="aktionen"><span class="frage">Wirklich löschen?</span> … */
.aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aktionen form { margin: 0; }
.frage { font-weight: 600; font-size: 0.9375rem; margin-right: 4px; }
.rueckfrage { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 10px 12px 10px 16px; border-radius: var(--r-feld); box-shadow: inset 0 0 0 1.5px var(--gefahr); }

/* ---------- 5 Formulare (alt, noch in vorlagen/inhalte: form, fld, lbl, hint, feldfehler, actions, check) ---------- */
.formular { display: grid; gap: 22px; margin: 0; min-width: 0; }
.formular { max-width: 640px; }
.formular--eng { gap: 16px; }
fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 16px; min-width: 0; }
fieldset + fieldset { margin-top: 12px; }
legend { padding: 0; margin-bottom: 14px; font-family: var(--serif); font-weight: 300; font-size: 1.6rem; }
.feld { display: grid; gap: 7px; min-width: 0; align-content: start; }
.feld label, .feld__label { font-weight: 600; font-size: 0.9375rem; }
.pflicht { color: var(--koralle); }
input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="range"], [type="color"]), select, textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 0; border-radius: var(--r-feld);
  background: var(--flaeche); box-shadow: inset 0 0 0 1.5px var(--haar-stark); font-size: 1rem; color: var(--schrift);
}
select { padding-right: 36px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--grund); color: var(--schrift); }
textarea { resize: vertical; line-height: 1.5; min-height: 110px; }
textarea.gross { min-height: 320px; font-family: var(--mono); font-size: 0.9375rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fokus); }
[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--gefahr) !important; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--koralle); }
input::placeholder, textarea::placeholder { color: var(--leise); opacity: 0.8; }
.feld__hilfe { display: block; font-size: 0.875rem; color: var(--leise); font-weight: var(--text-gewicht, 400); }
.feld__fehler { display: block; font-size: 0.875rem; font-weight: 600; color: var(--gefahr); }
.reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.reihe--plz { grid-template-columns: 9rem minmax(0, 1fr); }
.feld--kurz { max-width: 9rem; }
.formular__fuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 6px; }
.schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; cursor: pointer; font-size: 0.9375rem; font-weight: 600; }

/* Öffnungszeiten je Tag */
.zeiten { display: grid; gap: 6px; }
.tag { display: grid; grid-template-columns: 2.5rem 9rem minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.tag__name { font-weight: 600; }
.tag__name abbr { text-decoration: none; }
.tag__fenster { display: grid; gap: 6px; min-width: 0; }
.tag__zeit { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.tag__bis { color: var(--leise); font-size: 0.9375rem; }
.tag__mehr summary { min-height: 32px; display: inline-flex; align-items: center; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--leise); }
.tag__mehr[open] summary { margin-bottom: 6px; }
.tag__fehler { grid-column: 2 / -1; }
.zeiten input[type="time"] { min-height: 42px; padding: 8px 10px; }
.zeiten input[type="time"]:disabled { opacity: 0.35; }
.tag--zu .tag__mehr { display: none; }
.orte li { display: grid; gap: 0; padding: 10px 0; border-top: 1px solid var(--haar); font-size: 0.9375rem; }
.orte b { font-weight: 600; }
.orte span { color: var(--leise); }
.uebernommen { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-kachel); box-shadow: inset 0 0 0 1px var(--haar); }
.uebernommen .label { margin-bottom: 2px; }
.uebernommen .textlink { min-height: 32px; justify-self: start; }
/* Datenschutz als Abschnitte */
.abschnitte { display: grid; gap: 0; }
.abschnitt { display: grid; gap: 14px; padding: 20px 0; border-top: 1px solid var(--haar); }
.abschnitt:last-child { border-bottom: 1px solid var(--haar); }
.abschnitt__titel { font-weight: 600; }

/* ---------- 6 Listen, Tabellen, Daten ---------- */
/* Zeilenliste (alt: rows, row, rt, ra) */
.liste { border-top: 1px solid var(--haar); }
.liste__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 14px 0; border-bottom: 1px solid var(--haar); }
.liste__zeile--bild { grid-template-columns: 96px minmax(0, 1fr) auto; }
.liste__bild { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-klein); background: var(--flaeche); }
.liste__text { display: grid; gap: 2px; min-width: 0; }
.liste__text b { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }
.liste__text span { color: var(--leise); font-size: 0.9375rem; }
.liste--schlicht { display: grid; gap: 0; border-top: 1px solid var(--haar); }
.liste--schlicht > li { padding: 10px 0; border-bottom: 1px solid var(--haar); font-size: 0.9375rem; }
.liste--schlicht .leise { display: inline; }

/* Kacheln mit Bild */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.kachel { border-radius: var(--r-kachel); overflow: hidden; box-shadow: inset 0 0 0 1px var(--haar); background: var(--flaeche); }
.kachel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kachel__fuss { display: grid; gap: 10px; padding: 14px; }

/* Übersicht mit Pfeilen (Telefon: Website-Bereiche) */
.hub { border-top: 1px solid var(--haar); }
.hub a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 2px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--haar); text-decoration: none; }
.hub b { font-family: var(--serif); font-weight: 300; font-size: 1.75rem; line-height: 1.1; }
.hub span { grid-column: 1; color: var(--leise); font-size: 0.9375rem; }

/* Tabelle */
.tabelle-huelle { overflow-x: auto; border-radius: var(--r-kachel); box-shadow: inset 0 0 0 1px var(--haar); }
table.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tabelle th, .tabelle td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--haar); vertical-align: top; overflow-wrap: anywhere; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle th { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Daten (dl mit div-Zeilen) */
.daten > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--haar); }
.daten > div:last-child { border-bottom: 1px solid var(--haar); }
.daten dt { font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--leise); padding-top: 0.15em; }
.daten dd { font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.daten dd a { font-weight: 600; }
.daten dd:has(> .ampel) { display: flex; align-items: center; }
.daten dd > .ampel { flex: none; }
.daten--eng > div { grid-template-columns: 8rem minmax(0, 1fr); padding: 9px 0; font-size: 0.9375rem; }

/* Einmal gezeigte Links, Rechtstext-Vorschau */
.einmal { word-break: break-all; font-family: var(--mono); font-size: 0.875rem; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haar-stark); padding: 12px 14px; border-radius: var(--r-feld); user-select: all; }
.vorschau-text { white-space: normal; overflow-wrap: anywhere; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haar); padding: 14px 16px; border-radius: var(--r-feld); max-height: 480px; overflow-y: auto; font-size: 0.9375rem; }
.vorschau-text > * + * { margin-top: 0.8em; }
.vorschau-text h2, .vorschau-text h3 { font-weight: 650; font-size: 1rem; }
.vorschau-text ul, .vorschau-text ol { padding-left: 1.2em; }
.vorschau-text ul { list-style: disc; }
.vorschau-text ol { list-style: decimal; }

/* ---------- 7 Gerüst ---------- */
.app { display: grid; grid-template-columns: var(--leiste-b) minmax(0, 1fr); min-height: 100dvh; }
.leiste { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 24px 18px 20px; background: var(--grund-2); border-right: 1px solid var(--haar); }
.marke { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 8px; text-decoration: none; font-weight: 650; }
.leiste .bildmarke { width: 30px; height: 30px; }
.website-karte { display: grid; gap: 2px; padding: 14px 14px 10px; border-radius: var(--r-kachel); box-shadow: inset 0 0 0 1px var(--haar); }
.website-karte .label { margin: 0 0 4px; font-size: 0.6875rem; }
.website-karte b { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; line-height: 1.1; overflow-wrap: anywhere; }
.website-karte a { display: flex; gap: 4px; min-width: 0; align-items: center; min-height: 36px; font-size: 0.9375rem; color: var(--leise); text-decoration: none; }
.website-karte__domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.website-karte a:hover { color: var(--schrift); }
.website-wahl { margin: 2px 0 4px; }
.website-wahl select { min-height: 42px; padding: 8px 34px 8px 12px; font-family: var(--serif); font-weight: 300; font-size: 1.25rem; }
.wege { flex: 1; }
.wege__gruppe { margin: 18px 8px 6px; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }
.wege__gruppe:first-child { margin-top: 0; }
.wege a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 10px; text-decoration: none; font-size: 0.9688rem; font-weight: 500; }
.wege a:hover { background: var(--flaeche); }
.wege a[aria-current="page"] { background: var(--schrift); color: var(--grund); font-weight: 650; }
/* Zahl je Inhaltsart: Markup alt (span.c direkt im Link), Gestalt wie .zahl */
.wege a > .c { display: inline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--leise); font-size: 0.8125rem; font-weight: 400; }
.wege a[aria-current="page"] .zahl, .wege a[aria-current="page"] > .c { color: inherit; opacity: 0.75; }
.wege a[aria-current="page"] .marke-neu, .wege a[aria-current="page"] .etikett { color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.leiste__fuss { display: grid; gap: 10px; padding: 14px 8px 0; border-top: 1px solid var(--haar); }
.leiste__fuss form { margin: 0; }
.konto-link { display: grid; gap: 0; padding: 6px 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.konto-link .label { margin: 0; font-size: 0.6875rem; }
.konto-link:hover, .konto-link[aria-current="page"] { background: var(--flaeche); }
.leiste__knoepfe { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.abmelden { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 0.9375rem; font-weight: 600; color: var(--leise); text-decoration: none; }
.abmelden:hover { color: var(--schrift); }
.sprachwahl { align-self: start; }
.kopf-mobil, .unten, .segmente--mobil { display: none; }

.haupt { padding: 48px clamp(28px, 4.4vw, 72px) 120px; max-width: 1180px; width: 100%; min-width: 0; }
.haupt:focus { outline: none; }

/* Anmeldung und Seiten ohne Konto */
.anmelden-seite { display: grid; place-items: center; min-height: 100dvh; padding: 40px 20px; }
.anmelden { width: min(420px, 100%); }
.bildmarke--gross { width: 72px; height: 72px; margin-bottom: 24px; }
.anmelden .satz { margin-top: 10px; }
.anmelden > .formular { margin-top: 32px; }
.anmelden > p { margin-top: 14px; }
.anmelden .hinweis { margin: 0 0 24px; }
.anmelden__fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--haar); }

/* ---------- 8 Seiten ---------- */
.begruessung { margin-bottom: 48px; }
.protokoll li { display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; }
/* E-Mail-Zugänge */
.postfaecher { display: grid; gap: 16px; max-width: 820px; }
.postfach { padding: 20px 22px 8px; border-radius: var(--r-karte); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haar); }
.postfach__kopf { display: grid; gap: 2px; margin-bottom: 8px; }
.postfach__adresse { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; line-height: 1.15; overflow-wrap: anywhere; }
.postfach .aufklapp:last-child { margin-bottom: 0; }
.geraete { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.geraete b { display: block; margin-bottom: 6px; }
.geraete ol { list-style: decimal; margin: 0; padding-left: 1.2em; color: var(--leise); font-size: 0.9375rem; display: grid; gap: 4px; }
/* Analytics leer */
.leerstand { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; align-items: center; max-width: 820px; padding: 0 0 36px; }
.leerstand__planet { width: 160px; height: 160px; overflow: visible; }
.leerstand__planet ellipse { fill: none; stroke: var(--haar-stark); stroke-width: 1.2; stroke-dasharray: 3 3; }
.leerstand__planet circle { fill: none; stroke: var(--haar-stark); stroke-width: 1.2; }
.leerstand__titel, .haupt h2.leerstand__titel { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.08; margin-bottom: 10px; }
.leerstand__titel em { font-style: italic; }
.leerstand p { color: var(--leise); max-width: 44em; }
.leerstand p + p { margin-top: 8px; }
.leerstand__weg { margin-top: 18px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kpi { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--r-kachel); box-shadow: inset 0 0 0 1px var(--haar); }
.kpi .label { margin: 0; }
.kpi b { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1; color: var(--leise); }
.diagramm-leer { position: relative; height: 240px; margin-top: 16px; border-radius: var(--r-kachel); box-shadow: inset 0 0 0 1px var(--haar); background: repeating-linear-gradient(to bottom, transparent 0 59px, var(--haar) 59px 60px); }
.diagramm-leer span { position: absolute; left: 18px; top: 14px; font-size: 0.8125rem; font-weight: 600; color: var(--leise); }
/* Randnotiz, Ansprechpartner, Vorschau */
.randnotiz__titel { margin-top: 24px; }
.person { display: grid; gap: 2px; margin-bottom: 14px; }
.person b { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; }
.vorschau { margin-top: 40px; max-width: 640px; }

/* ---------- 9 Support ---------- */
.chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: min(68dvh, 640px); border-radius: var(--r-karte); box-shadow: inset 0 0 0 1px var(--haar); overflow: hidden; }
.verlauf { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; padding: 0; overflow-y: auto; }
.chat .verlauf { margin: 0; padding: 22px; max-height: 60dvh; }
.verlauf__leer { margin: auto; padding: 24px; color: var(--leise); text-align: center; }
.mit-rand--chat { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.verlauf__tag { align-self: center; margin: 8px 0 2px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leise); }
.nachricht { align-self: flex-start; max-width: 78%; padding: 12px 16px 10px; border-radius: 16px 16px 16px 4px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haar); }
.nachricht--kunde { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--schrift); color: var(--grund); box-shadow: none; }
.nachricht--eigen { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--schrift); color: var(--grund); box-shadow: none; }
.nachricht p { margin: 0; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.nachricht__zeit { display: block; margin-top: 4px; font-size: 0.75rem; color: inherit; opacity: 0.7; }
.schreiben { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 12px; border-top: 1px solid var(--haar); margin: 0; }
.schreiben textarea { min-height: 48px; resize: none; line-height: 1.4; }
.schreiben--voll { grid-template-columns: minmax(0, 1fr); }
.schreiben__fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.schreiben__fuss > :only-child { margin-left: auto; }

/* Support-Fenster: wächst aus dem Knopf (einzige Bewegung im Portal) */
.fenster-knopf { position: fixed; right: 28px; bottom: 28px; z-index: 30; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 16px; border: 0; border-radius: 999px; background: var(--schrift); color: var(--grund); font-weight: 650; text-decoration: none; cursor: pointer; box-shadow: 0 18px 40px -18px var(--schatten); }
.fenster-knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.fenster-knopf:active { transform: scale(0.97); }
.fenster-knopf[aria-expanded="true"] .punkt { display: none; }
.fenster { position: fixed; right: 28px; bottom: 92px; z-index: 31; width: 380px; max-width: calc(100vw - 56px); max-height: min(600px, calc(100dvh - 120px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; border-radius: 20px; background: var(--grund); box-shadow: 0 0 0 1px var(--haar-stark), 0 40px 80px -30px var(--schatten); overflow: hidden;
  transform-origin: calc(100% - 50px) calc(100% + 40px); animation: fenster-rein var(--dauer-rein) var(--kurve-ein); }
.fenster.geht { animation: fenster-raus var(--dauer-raus) var(--kurve-aus) forwards; }
@keyframes fenster-rein { from { opacity: 0; transform: scale(0.92); } }
@keyframes fenster-raus { to { opacity: 0; transform: scale(0.95); } }
.fenster__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 18px 14px 22px; border-bottom: 1px solid var(--haar); }
.fenster__kopf h2 { font-family: var(--serif); font-weight: 300; font-size: 1.6rem; line-height: 1.1; margin: 0; }
.fenster__kopf p { font-size: 0.875rem; color: var(--leise); }
.verlauf--fenster { margin: 0; padding: 16px; min-height: 160px; }
.verlauf--fenster .nachricht { max-width: 88%; font-size: 0.9375rem; }
.verlauf--fenster .verlauf__leer { padding: 0; font-size: 0.9375rem; }
.fenster__fehler { padding: 0 16px 10px; font-size: 0.875rem; font-weight: 600; color: var(--gefahr); }
.fenster__ganz { display: block; padding: 4px 0 14px; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--leise); }
.fenster__ganz:hover { color: var(--schrift); }

/* ---------- 10 Telefon: eigene Gestalt, Leiste unten wie eine App ---------- */
@media (max-width: 899.98px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
  .app--website .leiste { display: none; }
  .kopf-mobil { display: flex; align-items: center; justify-content: space-between; gap: 4px; position: sticky; top: 0; z-index: 20; height: 60px; padding: 0 6px 0 8px; background: var(--grund); border-bottom: 1px solid var(--haar); }
  .kopf-mobil .marke { min-width: 0; }
  .kopf-mobil .marke span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kopf-mobil .bildmarke { width: 28px; height: 28px; }
  .kopf-mobil__knoepfe { display: flex; align-items: center; }
  .kopf-mobil .thema { margin: 0; padding: 0 12px; }
  .kopf-mobil__konto { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: inherit; }
  .kopf-mobil__konto svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
  .haupt { padding: 28px 18px 48px; }
  .app--website .haupt { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  /* ohne Website (Websites, Konto, Betrieb): Leiste oben als Block */
  .app--ohne-website .leiste { position: static; height: auto; overflow: visible; gap: 14px; padding: 14px 16px 16px; border-right: 0; border-bottom: 1px solid var(--haar); }
  .app--ohne-website .wege { display: flex; flex-wrap: wrap; gap: 6px; }
  .app--ohne-website .wege__gruppe { flex-basis: 100%; margin: 8px 4px 0; }
  .app--ohne-website .wege a { min-height: 40px; box-shadow: inset 0 0 0 1px var(--haar); border-radius: 999px; }
  .app--ohne-website .leiste__fuss { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .unten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; inset: auto 0 0 0; z-index: 25; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--grund-2); border-top: 1px solid var(--haar); }
  .unten a { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 56px; padding-top: 7px; border-radius: 12px; text-decoration: none; font-size: 0.75rem; font-weight: 600; color: var(--leise); }
  .unten a[aria-current="page"] { color: var(--schrift); }
  .unten a[aria-current="page"] svg { background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haar-stark); }
  .unten svg { width: 44px; height: 28px; padding: 3px 11px; border-radius: 999px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
  .unten [data-ungelesen] { display: contents; }
  .unten .c, .unten .punkt { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; font-size: 0.6875rem; }
  .segmente--mobil { display: flex; width: 100%; overflow-x: auto; margin-bottom: 22px; scrollbar-width: none; }
  .segmente--mobil a { flex: 1 0 auto; }
  .fenster-knopf, .fenster { display: none; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .kopfzeile { margin-bottom: 28px; }
  .kopfzeile .knopf { width: 100%; }
  .kopfzeile > div { width: 100%; }
  .begruessung { margin-bottom: 32px; }
  .karten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .karte--inhalt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  .karte--inhalt .label, .karte--inhalt .karte__neben { grid-column: 1 / -1; }
  .karte--inhalt .karte__neben { grid-row: 3; }
  .karte--inhalt .karte__zahl { font-size: 44px; grid-column: 1; grid-row: 2; }
  .karte--inhalt .karte__wege { margin-top: 0; justify-content: flex-end; grid-column: 2; grid-row: 2; }
  .karte--inhalt .karte__wege .textlink { display: none; }
  .zwei { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; }
  .daten > div { grid-template-columns: 6.75rem minmax(0, 1fr); gap: 10px; }
  .daten dt { font-size: 0.6875rem; }
  .daten dd { font-size: 0.9375rem; }
  .raster { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .liste__zeile--bild { grid-template-columns: 72px minmax(0, 1fr); gap: 8px 14px; }
  .liste__bild { width: 72px; }
  .liste__zeile--bild .aktionen { grid-column: 1 / -1; }
  .aktionen .frage { flex-basis: 100%; }
  .reihe { grid-template-columns: minmax(0, 1fr); }
  .reihe--plz { grid-template-columns: 7rem minmax(0, 1fr); }
  .mit-rand { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .randnotiz { position: static; }
  .kasten { padding: 18px; }
  .nachricht { max-width: 86%; }
  .liste__zeile { grid-template-columns: minmax(0, 1fr); }
  .liste__zeile .aktionen { justify-content: flex-start; }
  .mit-rand--chat { grid-template-columns: minmax(0, 1fr); }
  /* Öffnungszeiten: Tag, Schalter; darunter die Zeiten; geschlossen ohne Zeiten */
  .tag { grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: 4px; padding: 8px 0; border-top: 1px solid var(--haar); }
  .tag__fenster, .tag__fehler { grid-column: 2; }
  .tag__zeit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tag__bis { display: none; }
  .tag--zu .tag__fenster { display: none; }
  .geraete { grid-template-columns: minmax(0, 1fr); }
  .postfach { padding: 16px 16px 4px; }
  .postfach__adresse { font-size: 1.3rem; }
  .leerstand { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 8px; }
  .leerstand__planet { width: 120px; height: 120px; }
  .kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kpi { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .kpi b { font-size: 32px; }
  .diagramm-leer { height: 180px; }
  /* Support: Verlauf ohne Rahmen, Schreibfeld klebt über der Leiste */
  .chat { display: block; min-height: 0; overflow: visible; border-radius: 0; box-shadow: none; margin: 0 -18px; }
  .chat .verlauf { max-height: none; padding: 8px 18px 18px; }
  .schreiben--voll textarea { height: 56px; min-height: 56px; }
  .schreiben--voll { position: sticky; bottom: 0; background: var(--grund); padding: 10px 18px; }
  .app--website .schreiben--voll { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .anmelden-seite { padding-bottom: 40px; }
}

/* ---------- 11 Bewegung ---------- */
/* Nur das Support-Fenster bewegt sich. Bei „weniger Bewegung“ gar nichts. */
.ruhig .fenster, .ruhig .fenster.geht { animation: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .knopf:active, .fenster-knopf:active { transform: none; }
}