/* Klingelfrei · Webseite
   Aufbau: Grundlayout ohne Bewegung (alles sichtbar, auch ohne JavaScript und bei reduzierter Bewegung), darauf die
   Tagesreise mit angehefteten Stationen nur bei „prefers-reduced-motion: no-preference“ und aktivem JavaScript
   (Abschnitt „Bewegung“). Farben, Abstände, Ecken und Schriften kommen aus marke.css (Designsystem).
   Schriften: Schibsted Grotesk (Überschriften, Wortmarke) und Atkinson Hyperlegible Next (Text), beide SIL Open Font
   License 1.1, Lizenztexte in fonts/OFL-*.txt, auf Latin beschnitten (tools: pyftsubset). */

/* ── Schriften ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("/fonts/schibsted-grotesk-700-800-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-400-700-latin.woff2") format("woff2");
}
/* Ersatz mit angeglichenen Maßen (Arial), damit beim Nachladen der Schriften nichts springt */
@font-face {
  font-family: "Schibsted Ersatz"; font-weight: 700 800; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 103%; ascent-override: 94.8%; descent-override: 25%; line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Ersatz"; font-weight: 400; src: local("Arial"), local("ArialMT");
  size-adjust: 99.2%; ascent-override: 99.2%; descent-override: 31.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Ersatz"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 99.2%; ascent-override: 99.2%; descent-override: 31.8%; line-gap-override: 0%;
}

/* ── Werte der Webseite ────────────────────────────────────────────────────── */
:root {
  --kopf-hoehe: 64px;
  --leiste-hoehe: 48px;
  --rand: 16px;
  --station-weg: 115svh;          /* Scrollweg je Station der Tagesreise */
  --schrift-held: clamp(2.75rem, 1.5rem + 5vw, 5.75rem);
  --schrift-titel-1: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  --schrift-titel-2: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
  --schrift-gross: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --zeichen: var(--marke-tinte);
  --knopf-hover: #223044;
  --linie-kraeftig: #D6CFBF;
  --kurve: cubic-bezier(0.65, 0, 0.35, 1);
  --p-lena: #2F747E;              /* Mitarbeiterfarben wie im Team-Kalender: Petrol, Braun, Oliv */
  --p-tom: #965F47;
  --p-mirko: #8E9246;
  interpolate-size: allow-keywords;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
}
[data-thema="dunkel"] { --zeichen: var(--marke-messing); --knopf-hover: var(--marke-messing-hell); --linie-kraeftig: #34445A; }
[data-thema="hell"] { --zeichen: var(--marke-tinte); --knopf-hover: #223044; --linie-kraeftig: #D6CFBF; }
@media (min-width: 700px) { :root { --rand: 32px; } }
@media (min-width: 1000px) {
  :root { --kopf-hoehe: 72px; --rand: 48px; --station-weg: 150svh; }
}

/* ── Grundlagen ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: var(--font-text); font-size: 1.125rem; line-height: 1.5556;
  -webkit-font-smoothing: antialiased; font-kerning: normal;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--akzent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
b, strong { font-weight: 700; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
section[data-thema], footer[data-thema], article[data-thema] { background: var(--grund); color: var(--text); }
/* Nichts darf die Seite seitlich verbreitern (auch nicht Karten, die gerade hereinfliegen); clip statt hidden, damit
   position: sticky der Tagesreise weiter am Fenster klebt */
main { overflow-x: clip; }

.breite { width: min(100% - 2 * var(--rand), 1200px); margin-inline: auto; }
.breite--schmal { width: min(100% - 2 * var(--rand), 820px); }
.abschnitt { padding-block: var(--abstand-8); }
@media (min-width: 1000px) { .abschnitt { padding-block: var(--abstand-9); } }

.nur-vorlesen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprunglink {
  position: absolute; left: var(--abstand-4); top: -120px; z-index: 300; padding: 12px 18px;
  background: var(--marke-tinte); color: var(--marke-leinen); border-radius: var(--radius-m); font-weight: 700;
}
.sprunglink:focus { top: 12px; }
.symbol { width: 22px; height: 22px; flex: none; }
.zeichen { color: var(--zeichen); overflow: visible; }

/* ── Schrift ───────────────────────────────────────────────────────────────── */
.dachzeile {
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent);
  margin-bottom: var(--abstand-3);
}
.titel-1, .titel-2, .titel-3, .held-titel { font-family: var(--font-anzeige); font-weight: 700; text-wrap: balance; }
.titel-1 { font-size: var(--schrift-titel-1); line-height: 1.08; letter-spacing: -0.02em; max-width: 22ch; }
.titel-2 { font-size: var(--schrift-titel-2); line-height: 1.15; letter-spacing: -0.015em; }
.titel-3 { font-size: 1.375rem; line-height: 1.27; }
.einleitung { font-size: var(--schrift-gross); line-height: 1.5; color: var(--text-2); max-width: 38em; margin-top: var(--abstand-4); }

/* ── Knöpfe und Links ──────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  padding: 10px 22px; border: 1.5px solid transparent; border-radius: var(--radius-m);
  font: 600 1.0625rem/1.25 var(--font-text); text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .18s, border-color .18s, color .18s, transform .12s;
}
.knopf:active { transform: translateY(1px); }
.knopf--haupt { background: var(--knopf); color: var(--knopf-text); }
.knopf--haupt:hover { background: var(--knopf-hover); }
.knopf--zweit { background: var(--flaeche); color: var(--text); border-color: var(--text-2); }
.knopf--zweit:hover { border-color: var(--text); }
.knopf--gross { min-height: 56px; padding: 12px 26px; font-size: 1.125rem; }
.textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--akzent); font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
}
.textlink .symbol { width: 20px; height: 20px; }
.rufnummer { white-space: nowrap; }
/* Lange Wörter wie „Auftragsverarbeitungsvertrag“ auf schmalen Handys trennen statt überstehen lassen */
.umfang-liste li, .paket-liste li, .held-fakten li, .vertrauen-liste h3, .karte-titel { hyphens: auto; -webkit-hyphens: auto; }

/* ── Kopf ──────────────────────────────────────────────────────────────────── */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--kopf-hoehe);
  background: var(--grund); color: var(--text); border-bottom: 1px solid var(--linie);
  transition: background-color .25s, border-color .25s, color .25s;
}
.kopf.oben { background: transparent; border-bottom-color: transparent; }
.kopf-innen { display: flex; align-items: center; gap: var(--abstand-3); height: 100%; }
.marke { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: inherit; text-decoration: none; }
.marke .zeichen { width: 30px; height: 30px; }
.wortmarke { font-family: var(--font-anzeige); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; }
.hauptnav { margin-left: auto; }
.hauptnav ul { list-style: none; display: flex; align-items: center; gap: 2px; }
.hauptnav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--radius-s);
  color: inherit; font-weight: 600; font-size: 1rem; text-decoration: none;
}
.hauptnav a:hover { text-decoration: underline; }
.hauptnav-anmelden { margin-left: var(--abstand-2); padding-left: var(--abstand-2); border-left: 1px solid var(--linie-kraeftig); }
.kopf-anruf { min-height: 44px; padding: 8px 16px; font-size: 1rem; }
.kopf[data-thema="dunkel"] .kopf-anruf { background: transparent; color: var(--text); border-color: var(--linie-kraeftig); }
.kopf[data-thema="dunkel"] .kopf-anruf:hover { border-color: var(--text); }
.menue-knopf {
  display: none; align-items: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 12px;
  border: 1.5px solid var(--linie-kraeftig); border-radius: var(--radius-m); background: transparent; cursor: pointer;
  font-weight: 600; font-size: 1rem;
}
.menue-knopf .symbol--schliessen { display: none; }
.menue-knopf[aria-expanded="true"] .symbol--menue { display: none; }
.menue-knopf[aria-expanded="true"] .symbol--schliessen { display: block; }

@media (max-width: 999.98px) {
  .menue-knopf { display: inline-flex; }
  .kopf-anruf { margin-left: auto; min-width: 48px; min-height: 48px; padding: 0 12px; }
  .hauptnav {
    position: fixed; inset: var(--kopf-hoehe) 0 auto; margin: 0; padding: var(--abstand-2) var(--rand) var(--abstand-5);
    background: var(--grund); border-bottom: 1px solid var(--linie); box-shadow: var(--schatten-hoch);
  }
  .hauptnav:not(.offen) { display: none; }
  .hauptnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hauptnav li { border-bottom: 1px solid var(--linie); }
  .hauptnav a { width: 100%; min-height: 56px; font-size: 1.25rem; padding: 0 4px; }
  .hauptnav-anmelden { margin: 0; padding: 0; border-left: 0; }
}
@media (max-width: 639.98px) {
  .kopf-anruf span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .wortmarke { font-size: 1.375rem; }
}
@media (max-width: 359.98px) {                     /* kleine Handys (320 px): Zeichen, Anruf und Menü passen nebeneinander */
  .kopf-innen { gap: var(--abstand-2); }
  .marke { gap: 8px; }
  .wortmarke { font-size: 1.25rem; }
  .menue-knopf span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ── 1 · Kopf der Seite ────────────────────────────────────────────────────── */
.held-rahmen {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding: calc(var(--kopf-hoehe) + var(--abstand-4)) 0 var(--abstand-7);
}
.held-inhalt { display: grid; gap: var(--abstand-5); align-items: center; }
.held-titel { font-size: var(--schrift-held); font-weight: 800; line-height: 1.0; letter-spacing: -0.025em; margin: 0 0 var(--abstand-5); }
.held-titel .zeile-neu { display: block; color: var(--marke-messing); }
.held-satz { font-size: var(--schrift-gross); line-height: 1.5; color: var(--text-2); max-width: 32em; }
.held-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-3) var(--abstand-5); margin-top: var(--abstand-6); }
.held-aktionen .textlink { color: var(--text); }
.held-hinweis { margin-top: var(--abstand-3); font-size: 0.9375rem; color: var(--text-2); }
.held-fakten { list-style: none; display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-5); margin-top: var(--abstand-6); font-size: 0.9375rem; color: var(--text-2); }
.held-fakten li { display: inline-flex; align-items: center; gap: 10px; }
.held-fakten li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--marke-messing); }
.held-bild { display: flex; order: -1; justify-content: flex-start; height: 104px; }
@media (min-width: 700px) { .held-bild { height: 168px; } }
.held-zeichen { height: 100%; width: auto; aspect-ratio: 1; color: var(--marke-messing); overflow: visible; }
@media (min-width: 1000px) {
  .held-inhalt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--abstand-7); }
  .held-bild { order: 0; justify-content: center; align-items: center; height: clamp(300px, 30vw, 420px); }
  .held-zeichen { height: 82%; }
}

/* ── 2 · Tagesreise (Grundlayout ohne Bewegung) ────────────────────────────── */
.reise { background: var(--grund); }
.reise-kopf { padding: var(--abstand-8) 0 var(--abstand-6); }
@media (min-width: 1000px) { .reise-kopf { padding-top: var(--abstand-9); } }
.tagesleiste {
  position: sticky; top: var(--kopf-hoehe); z-index: 40; height: var(--leiste-hoehe);
  background: var(--grund); border-block: 1px solid var(--linie); transition: background-color .25s, color .25s;
}
.tagesleiste ol { list-style: none; display: flex; justify-content: space-between; height: 100%; }
.tagesleiste li { display: flex; }
.tagesleiste a {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--text-2);
  text-decoration: none; font-weight: 600; font-size: 0.9375rem;
}
.tagesleiste time { font-family: var(--font-anzeige); font-weight: 700; font-size: 1.0625rem; }
.tagesleiste a[aria-current="step"] { color: var(--text); }
.tagesleiste a[aria-current="step"]::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--akzent);
}
.tagesleiste span { display: none; }
@media (min-width: 700px) { .tagesleiste span { display: inline; } }

.station { position: relative; scroll-margin-top: calc(var(--kopf-hoehe) + var(--leiste-hoehe)); }
.station--dunkel { background: var(--marke-tinte); }
.station-rahmen { display: grid; gap: var(--abstand-6); padding-block: var(--abstand-8); }
.station-zeit { display: flex; align-items: baseline; gap: 12px; color: var(--akzent); font-weight: 700; font-size: 1rem; margin-bottom: var(--abstand-3); }
.station-zeit time {
  font-family: var(--font-anzeige); font-weight: 800; font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.75rem); line-height: 1;
  letter-spacing: -0.02em;
}
.station-text .titel-2 { margin-bottom: var(--abstand-4); max-width: 18ch; }
.station-text p { max-width: 32em; }
.station-text p + p { margin-top: var(--abstand-3); }
.station-mehr { color: var(--text-2); }
/* Schritte mit Haken: --f von 0 (offen) bis 1 (erledigt), in der Bewegung von der Tagesreise gesetzt */
.schritte { list-style: none; display: grid; gap: 10px; margin-top: var(--abstand-5); }
.schritte li { --f: 1; position: relative; display: flex; align-items: center; min-height: 28px; padding-left: 38px; font-weight: 600; font-size: 1rem; }
.schritte li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 26px; translate: 0 -50%; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--erledigt-text) calc(var(--f) * 100%), var(--text-2));
  background: color-mix(in srgb, var(--erledigt) calc(var(--f) * 100%), transparent);
}
.schritte li::after {
  content: ""; position: absolute; left: 8px; top: calc(50% - 5px); width: 10px; height: 5px; opacity: var(--f);
  border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(-45deg) scale(calc(0.6 + 0.4 * var(--f)));
}

/* Bühne: Bilder und nachgebaute Oberflächen */
.buehne { position: relative; display: grid; gap: var(--abstand-4); align-content: start; }
.illu {
  width: 100%; height: auto; color: var(--text); fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.illu * { vector-effect: non-scaling-stroke; }
.illu .w { fill: var(--flaeche); }
.illu .m { fill: var(--marke-messing); }
.illu .mh { fill: var(--marke-messing-hell); }
.illu .ms { stroke: var(--marke-messing-dunkel); stroke-width: 2.5; }
.illu .fein { stroke-width: 1.25; opacity: .5; }
.illu .bildschirm { fill: var(--marke-messing-hell); }
.illu .bildschirm-aus { fill: var(--marke-tinte-tief); }
.illu .tropfen { fill: var(--flaeche); }
[data-thema="dunkel"] .illu .ms { stroke: var(--marke-messing); }

.mitschrift-karte, .fenster {
  background: var(--flaeche); color: var(--text); border-radius: var(--radius-l); box-shadow: var(--schatten-karte);
}
.mitschrift-karte { padding: 0 var(--abstand-4) var(--abstand-4); overflow: hidden; }
.karten-kopf {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0 calc(-1 * var(--abstand-4)) var(--abstand-2);
  padding: var(--abstand-3) var(--abstand-4) var(--abstand-2); background: var(--flaeche); font-size: 0.875rem; font-weight: 700; color: var(--text-2);
}
.spricht { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.spricht i { display: block; width: 3px; height: 8px; border-radius: 2px; background: var(--akzent); }
.spricht i:nth-child(2) { height: 14px; }
.mitschrift { list-style: none; display: grid; gap: var(--abstand-3); }
.zeile { padding-left: 12px; border-left: 3px solid var(--linie-kraeftig); }
.zeile[data-sprecher="merle"] { border-left-color: var(--marke-messing); }
.zeile .sprecher { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-2); }
.zeile[data-sprecher="merle"] .sprecher { color: var(--akzent); }
.zeile .satz { display: block; font-size: 1rem; line-height: 1.45; }

.anliegenkarte {
  display: flex; flex-direction: column; gap: var(--abstand-3); padding: var(--abstand-4);
  background: var(--flaeche); color: var(--text); border-radius: var(--radius-l); box-shadow: var(--schatten-karte);
}
@media (min-width: 1000px) { .anliegenkarte { padding: var(--abstand-5); } }
.karte-kopf { display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; }
.karte-zeit { font-size: 0.875rem; color: var(--text-2); margin-right: auto; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-rund);
  background: var(--flaeche-2); font-size: 0.8125rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
.chip .punkt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip--notdienst { color: var(--notfall-text); }
.chip--termin { color: var(--kat-termin); }
.chip--angebot { color: var(--kat-angebot); }
.chip--rechnung { color: var(--kat-rechnung); }
.chip--sonstiges { color: var(--kat-sonstiges); }
.dringend {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-rund);
  background: var(--notfall); color: #FFFFFF; font-size: 0.8125rem; font-weight: 600; line-height: 1;
}
.dringend .symbol { width: 14px; height: 14px; }
.karte-titel { font-family: var(--font-anzeige); font-weight: 700; font-size: 1.375rem; line-height: 1.27; }
.karte-meta { font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.karte-knopf { align-self: flex-start; font-size: 1rem; cursor: default; }
.karte-knopf .symbol { width: 18px; height: 18px; }

.handy { width: 100%; }
.handy-schirm { position: relative; }
.handy-schirm::before {
  content: ""; display: none; position: absolute; top: 10px; left: 50%; width: 64px; height: 18px; translate: -50% 0;
  border-radius: var(--radius-rund); background: var(--marke-tinte);
}
.handy-uhr { display: none; text-align: center; font-family: var(--font-anzeige); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.02em; margin: 18px 0 22px; color: var(--marke-tinte); }
.mitteilung {
  display: flex; gap: var(--abstand-3); align-items: center; padding: 10px 12px; border-radius: 20px;
  background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-karte); text-align: left;
}
.mitteilung-symbol {
  flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: var(--radius-symbol); background: var(--marke-tinte);
}
.mitteilung-symbol .zeichen { width: 26px; height: 26px; color: var(--marke-messing); }
.mitteilung-inhalt { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; line-height: 1.3; }
.mitteilung-oben { display: flex; justify-content: space-between; gap: var(--abstand-2); font-size: 0.75rem; color: var(--text-2); }
.mitteilung-titel { font-weight: 700; font-size: 0.9375rem; }
.mitteilung-text { font-size: 0.875rem; }

.fenster { overflow: hidden; }
.fenster-kopf {
  display: flex; align-items: center; gap: 8px; padding: 12px var(--abstand-4); border-bottom: 1px solid var(--linie);
  font-weight: 700; font-size: 1rem;
}
.fenster-kopf .symbol { width: 20px; height: 20px; color: var(--text-2); }
.fenster-zusatz { margin-left: auto; font-weight: 400; font-size: 0.875rem; color: var(--text-2); }
.eingang-liste { list-style: none; }
.eingang-liste li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 12px var(--abstand-4); border-bottom: 1px solid var(--linie); font-size: 0.9375rem;
}
.eingang-liste li:last-child { border-bottom: 0; }
.eingang-neu { background: color-mix(in srgb, var(--marke-messing-hell) 24%, var(--flaeche)); }
.eingang-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eingang-zeit { font-size: 0.8125rem; color: var(--text-2); }

.mails { list-style: none; }
.mail {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding: 10px var(--abstand-4); border-bottom: 1px solid var(--linie); background: var(--flaeche);
}
.mail:last-child { border-bottom: 0; }
.mail-von { font-weight: 700; font-size: 0.9375rem; }
.mail-betreff { grid-column: 1; font-size: 0.9375rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-ordner {
  grid-row: 1 / span 2; grid-column: 2; font-size: 0.8125rem; font-weight: 600; color: var(--text-2);
  background: var(--flaeche-2); border-radius: var(--radius-rund); padding: 4px 10px;
}
.erechnung {
  grid-column: 1 / -1; justify-self: start; margin-top: 6px; padding: 4px 10px; border-radius: var(--radius-rund);
  background: color-mix(in srgb, var(--marke-messing-hell) 40%, var(--flaeche)); color: var(--marke-messing-dunkel);
  font-size: 0.8125rem; font-weight: 700;
}
.postfach-leer { display: none; align-items: center; gap: 10px; padding: 14px var(--abstand-4); color: var(--erledigt-text); font-weight: 700; }
.ordner { list-style: none; display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.ordner li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius-m); font-weight: 600; font-size: 0.9375rem;
}
.ordner .symbol { width: 18px; height: 18px; color: var(--text-2); }
.ordner-zahl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px;
  border-radius: var(--radius-rund); background: var(--flaeche-2); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.weitergeleitet {
  display: flex; align-items: center; gap: 10px; padding: 12px var(--abstand-4); border-radius: var(--radius-m);
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--erledigt-text); font-weight: 700; font-size: 0.9375rem;
  box-shadow: var(--schatten-karte);
}

.kalender { --std: 30px; --kal-kopf: 34px; }
.kal { display: grid; grid-template-columns: 28px repeat(3, minmax(0, 1fr)); column-gap: 8px; padding: 10px 12px 14px; }
.kal-zeiten { position: relative; height: calc(var(--kal-kopf) + 9 * var(--std)); font-size: 0.75rem; color: var(--text-2); }
.kal-zeiten span { position: absolute; right: 0; translate: 0 -50%; font-variant-numeric: tabular-nums; }
.kal-zeiten span:nth-child(1) { top: var(--kal-kopf); }
.kal-zeiten span:nth-child(2) { top: calc(var(--kal-kopf) + 2 * var(--std)); }
.kal-zeiten span:nth-child(3) { top: calc(var(--kal-kopf) + 4 * var(--std)); }
.kal-zeiten span:nth-child(4) { top: calc(var(--kal-kopf) + 6 * var(--std)); }
.kal-zeiten span:nth-child(5) { top: calc(var(--kal-kopf) + 8 * var(--std)); }
.kal-spalte {
  position: relative; height: calc(var(--kal-kopf) + 9 * var(--std)); border-left: 1px solid var(--linie);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(2 * var(--std) - 1px), var(--linie) calc(2 * var(--std) - 1px) calc(2 * var(--std)));
  background-position: 0 var(--kal-kopf); background-repeat: no-repeat; background-size: 100% calc(100% - var(--kal-kopf));
}
.kal-spalte--lena { --p: var(--p-lena); }
.kal-spalte--tom { --p: var(--p-tom); }
.kal-spalte--mirko { --p: var(--p-mirko); }
.kal-name { display: flex; align-items: center; gap: 6px; height: var(--kal-kopf); padding-left: 8px; font-weight: 700; font-size: 0.875rem; }
.kal-name .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--p); }
.termin {
  position: absolute; left: 4px; right: 2px; padding: 4px 6px; border-left: 3px solid var(--p); border-radius: 6px;
  background: color-mix(in srgb, var(--p) 15%, var(--flaeche)); font-size: 0.75rem; font-weight: 600; line-height: 1.25; overflow: hidden;
}
.termin--neu { background: color-mix(in srgb, var(--p) 26%, var(--flaeche)); box-shadow: 0 0 0 2px var(--p); }
.von-0800 { top: var(--kal-kopf); }
.von-0900 { top: calc(var(--kal-kopf) + 1 * var(--std)); }
.von-1000 { top: calc(var(--kal-kopf) + 2 * var(--std)); }
.von-1330 { top: calc(var(--kal-kopf) + 5.5 * var(--std)); }
.von-1500 { top: calc(var(--kal-kopf) + 7 * var(--std)); }
.dauer-1 { height: calc(1 * var(--std) - 3px); }
.dauer-1-5 { height: calc(1.5 * var(--std) - 3px); }
.dauer-3 { height: calc(3 * var(--std) - 3px); }
.dauer-3-5 { height: calc(3.5 * var(--std) - 3px); }
.dauer-4 { height: calc(4 * var(--std) - 3px); }
.anliegenkarte--klein { gap: var(--abstand-2); }
.anliegenkarte--klein .karte-titel { font-size: 1.1875rem; }
.anliegenkarte--klein .karte-knopf { margin-top: 4px; }
.bestaetigung {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 10px 18px 10px 12px;
  border-radius: var(--radius-rund); background: var(--marke-tinte); color: var(--marke-leinen); font-weight: 700;
  font-size: 0.9375rem; box-shadow: var(--schatten-hoch);
}
.bestaetigung .zeichen { width: 26px; height: 26px; color: var(--marke-messing); }

.heute-karte { padding: var(--abstand-5); background: var(--flaeche); color: var(--text); border-radius: var(--radius-l); box-shadow: var(--schatten-hoch); }
.heute-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--abstand-2); }
.heute-titel { font-family: var(--font-anzeige); font-weight: 700; font-size: 1.875rem; line-height: 1.2; }
.heute-zeit { font-weight: 600; font-size: 0.9375rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.heute-liste { list-style: none; }
.heute-liste li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 1.0625rem; }
.heute-liste .symbol { color: var(--text-2); }
.heute-liste li:nth-child(2) .symbol { color: var(--notfall-text); }
.heute-liste .zahl { display: inline-block; min-width: 1.4em; font-family: var(--font-anzeige); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.heute-offen { margin-top: var(--abstand-3); font-size: 0.9375rem; color: var(--text-2); }
.erledigt { display: flex; align-items: center; gap: var(--abstand-4); }
.erledigt .zeichen { width: 72px; height: 72px; color: var(--marke-messing); }
.erledigt p { font-family: var(--font-anzeige); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; }

@media (min-width: 1000px) {
  .station-rahmen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--abstand-8); align-items: start; }
}

/* ── Bewegung: angeheftete Stationen (nur mit JavaScript und ohne Wunsch nach wenig Bewegung) ──── */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html { scroll-behavior: smooth; }
  /* Das Zeichen im Kopf erscheint mit seiner Bewegung; fehlt das Skript, nach 2,5 s ohne */
  .held-zeichen[data-zeichen] { opacity: 0; animation: zeichen-zeigen 0.4s 2.5s forwards; }
  @keyframes zeichen-zeigen { to { opacity: 1; } }

  .station { height: calc(100svh + var(--station-weg)); }
  .station-rahmen {
    position: sticky; top: calc(var(--kopf-hoehe) + var(--leiste-hoehe));
    height: calc(100svh - var(--kopf-hoehe) - var(--leiste-hoehe)); padding-block: var(--abstand-4);
    display: flex; flex-direction: column; gap: var(--abstand-4);
  }
  .station-text .station-mehr, .station-text .schritte {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .station-text .titel-2 { margin-bottom: var(--abstand-2); }
  .station-zeit { margin-bottom: 4px; }
  .station-zeit time { font-size: 2.25rem; }
  .buehne { display: block; flex: 1; min-height: 0; max-height: 640px; width: 100%; max-width: 560px; margin-inline: auto; }
  .buehne > * { position: absolute; }
  .buehne--postfach .postfach, .buehne--kalender .kalender { overflow: visible; }
  .buehne--postfach .mails { display: grid; gap: 6px; padding: 8px; }
  .buehne--postfach .mail { border: 1px solid var(--linie); border-radius: var(--radius-s); }
  .postfach-leer {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--abstand-2);
    position: absolute; left: 0; right: 0; top: 49px; bottom: 0; font-size: 1.25rem;
  }
  .postfach-leer .symbol { width: 40px; height: 40px; }
  .mail-ordner { display: none; }
  .spricht i { animation: sprechen 0.9s ease-in-out infinite alternate; transform-origin: center; }
  .spricht i:nth-child(2) { animation-delay: -0.3s; }
  .spricht i:nth-child(3) { animation-delay: -0.6s; }
  @keyframes sprechen { from { transform: scaleY(0.45); } to { transform: scaleY(1.15); } }

  /* Handy (schmal): Text knapp, Bühne mit übereinanderliegenden Karten */
  .buehne--notdienst .illu, .buehne--angebot .illu, .buehne--feierabend .illu { top: 0; left: 0; width: 100%; }
  .buehne .mitschrift-karte { top: 0; left: 0; right: 0; max-height: 72%; }
  .buehne--notdienst .anliegenkarte, .buehne--angebot .anliegenkarte { left: 0; right: 0; bottom: 0; }
  .buehne--notdienst .handy { top: 0; left: 0; right: 0; width: auto; aspect-ratio: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .buehne--notdienst .handy-schirm { padding: 0; background: none; height: auto; border-radius: 0; overflow: visible; }
  .buehne--notdienst .handy-schirm::before, .buehne--notdienst .handy-uhr { display: none; }
  .buehne--notdienst .mitteilung { box-shadow: var(--schatten-hoch); }
  .buehne--angebot .eingang { left: 0; right: 0; bottom: 0; }
  .buehne--postfach .postfach { top: 0; left: 0; right: 0; }
  .buehne--postfach .ordner { left: 0; right: 0; bottom: 60px; padding-top: var(--abstand-2); background: var(--grund); }
  .buehne--postfach .ordner li { padding: 6px 10px; font-size: 0.875rem; }
  .buehne--postfach .mail { padding: 8px 12px; }
  .buehne--postfach .mail-von, .buehne--postfach .mail-betreff { font-size: 0.875rem; }
  .buehne--postfach .weitergeleitet { left: 0; right: 0; bottom: 0; }
  .buehne--kalender .kalender { top: 0; left: 0; right: 0; }
  .buehne--kalender .anliegenkarte--klein { left: 0; right: 0; bottom: 58px; }
  .buehne--kalender .bestaetigung { left: 0; bottom: 0; }
  .buehne--feierabend .heute-karte { top: 0; left: 0; right: 0; }
  .buehne--feierabend .erledigt { left: 0; bottom: 0; }
  .buehne--feierabend .erledigt .zeichen { width: 56px; height: 56px; }

  @media (max-height: 700px) and (max-width: 999.98px) {
    .station-text p { display: none; }
    .kalender { --std: 24px; }
  }

  @media (min-width: 1000px) {
    .station-rahmen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding-block: var(--abstand-5); }
    .station-text .station-mehr, .station-text .schritte { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
    .station-text .schritte { display: grid; }
    .station-zeit time { font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.75rem); }
    .station-text .titel-2 { margin-bottom: var(--abstand-4); }
    .buehne { height: min(100%, 600px); max-height: none; max-width: none; flex: none; }
    .buehne .mitschrift-karte { right: auto; width: 60%; max-height: 64%; }
    .buehne--notdienst .illu { top: auto; bottom: 0; }
    .buehne--notdienst .anliegenkarte { left: 3%; right: auto; bottom: 2%; width: 58%; }
    .buehne--notdienst .handy {
      left: auto; right: 0; top: 10%; width: 40%; max-width: 280px; aspect-ratio: 9 / 16; padding: 10px;
      border: 2px solid var(--text); border-radius: 36px; background: var(--flaeche); box-shadow: var(--schatten-hoch);
    }
    .buehne--notdienst .handy-schirm { height: 100%; padding: 34px 10px 10px; border-radius: 26px; background: var(--marke-leinen-tief); overflow: hidden; }
    .buehne--notdienst .handy-schirm::before, .buehne--notdienst .handy-uhr { display: block; }
    .buehne--angebot .illu { top: auto; bottom: 0; }
    .buehne--angebot .anliegenkarte { left: auto; right: 0; bottom: auto; top: 26%; width: 56%; }
    .buehne--angebot .eingang { left: auto; right: 0; bottom: 4%; width: 64%; }
    .buehne--postfach .postfach { right: auto; width: 68%; }
    .buehne--postfach .ordner { left: auto; right: 0; bottom: auto; top: 0; width: 28%; flex-direction: column; }
    .buehne--postfach .ordner { padding-top: 0; background: none; }
    .buehne--postfach .ordner li { padding: 10px 12px; font-size: 0.9375rem; }
    .buehne--postfach .mail { padding: 10px var(--abstand-4); }
    .buehne--postfach .mail-von, .buehne--postfach .mail-betreff { font-size: 0.9375rem; }
    .buehne--postfach .weitergeleitet { right: auto; bottom: 4%; width: 68%; }
    .buehne--kalender .kalender { right: auto; width: 70%; }
    .buehne--kalender .anliegenkarte--klein { left: auto; bottom: auto; top: 30%; width: 44%; }
    .buehne--kalender .bestaetigung { left: 0; bottom: 3%; }
    .buehne--feierabend .illu { top: auto; bottom: 0; }
    .buehne--feierabend .heute-karte { right: auto; left: 4%; width: 58%; }
    .buehne--feierabend .erledigt { left: auto; right: 4%; bottom: 40%; }
    .buehne--feierabend .erledigt .zeichen { width: 88px; height: 88px; }
    .kalender { --std: 34px; }
  }
}

/* ── 3 · Hörproben ─────────────────────────────────────────────────────────── */
.spieler { margin-top: var(--abstand-6); display: grid; gap: var(--abstand-5); }
.spieler > *, .gespraech > *, .gespraech-raster > * { min-width: 0; }
.spieler.bereit { padding: var(--abstand-4); border: 1px solid var(--linie); border-radius: var(--radius-xl); background: var(--flaeche); }
@media (min-width: 700px) { .spieler.bereit { padding: var(--abstand-5); } }
.reiter { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.reiter button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; cursor: pointer;
  border: 1.5px solid var(--linie-kraeftig); border-radius: var(--radius-rund); background: transparent; color: var(--text);
  font-weight: 600; font-size: 1rem;
}
.reiter button:hover { border-color: var(--text-2); }
.reiter button[aria-selected="true"] { background: var(--marke-messing); border-color: var(--marke-messing); color: var(--marke-tinte); }
.reiter-dauer { font-weight: 400; font-variant-numeric: tabular-nums; }
.gespraech { display: grid; gap: var(--abstand-4); }
.spieler:not(.bereit) .gespraech { padding: var(--abstand-5); border: 1px solid var(--linie); border-radius: var(--radius-xl); background: var(--flaeche); }
.spieler.bereit .gespraech-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.abspieler { display: flex; align-items: center; gap: var(--abstand-4); flex-wrap: wrap; }
.spieler.bereit .abspieler { flex-wrap: nowrap; padding: 10px 14px 10px 10px; border-radius: var(--radius-l); background: var(--flaeche-2); }
.abspieler audio { width: 100%; max-width: 420px; }
.spieler.bereit .abspieler audio { display: none; }
.abspielen {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: var(--knopf); color: var(--knopf-text); cursor: pointer;
}
.abspielen:hover { background: var(--knopf-hover); }
.abspielen .symbol { width: 26px; height: 26px; }
.abspielen .symbol--anhalten, .abspielen.spielt .symbol--abspielen { display: none; }
.abspielen.spielt .symbol--anhalten { display: block; }
.pegel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; height: 44px; }
.pegel i { flex: 1; min-width: 0; border-radius: 2px; background: var(--linie-kraeftig); transition: background-color .15s; }
.pegel i.gespielt { background: var(--marke-messing); }
.abspiel-zeit { flex: none; min-width: 5.5em; text-align: right; font-weight: 600; font-size: 0.9375rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.gespraech-raster { display: grid; gap: var(--abstand-5); align-items: start; }
.gespraech .mitschrift { gap: var(--abstand-3); }
.gespraech .zeile { padding: 6px 0 6px 12px; border-radius: 0 var(--radius-s) var(--radius-s) 0; transition: background-color .2s, border-color .2s; }
.gespraech .zeile .satz { font-size: 1.0625rem; }
.gespraech .zeile.jetzt { background: rgba(201, 151, 63, 0.14); border-left-color: var(--marke-messing); }
.gespraech .zeile.kommt .satz { color: var(--text-2); }
.gespraech .anliegenkarte [data-zeile] { transition: opacity .25s, translate .25s; }
.gespraech .anliegenkarte.fuellt [data-zeile].wartet { opacity: 0; translate: 0 4px; }
@media (min-width: 1000px) { .gespraech-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--abstand-7); } }

.stimmen { margin-top: var(--abstand-7); display: grid; gap: var(--abstand-4); }
.stimmen-text p { margin-top: var(--abstand-2); color: var(--text-2); max-width: 34em; }
.stimmen-wahl { list-style: none; display: grid; gap: var(--abstand-2); }
.stimme button {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px;
  padding: 10px 16px; text-align: left; cursor: pointer; border: 1.5px solid var(--linie-kraeftig); border-radius: var(--radius-l);
  background: var(--flaeche); color: var(--text);
}
.stimme button:hover { border-color: var(--text-2); }
.stimme button[aria-pressed="true"] { border-color: var(--marke-messing); background: rgba(201, 151, 63, 0.14); }
.stimme button .symbol { grid-row: 1 / span 2; color: var(--marke-messing); }
.stimme-name { font-family: var(--font-anzeige); font-weight: 700; font-size: 1.1875rem; }
.stimme-art { grid-column: 2; font-size: 0.9375rem; color: var(--text-2); }
.stimme-ohne-js { font-weight: 600; margin-bottom: 6px; }
.stimmen.bereit .stimme-ohne-js, .stimmen.bereit audio { display: none; }
.stimme-satz { padding: var(--abstand-4) var(--abstand-5); border-left: 3px solid var(--marke-messing); background: var(--flaeche); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.stimme-satz-name { color: var(--marke-messing); font-weight: 700; }
@media (min-width: 1000px) {
  .stimmen { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--abstand-7); align-items: start; }
  .stimmen-wahl { grid-template-columns: repeat(3, 1fr); }
  .stimme-satz { grid-column: 2; }
}

/* ── 4 · Was Klingelfrei kann ──────────────────────────────────────────────── */
.bento { list-style: none; display: grid; gap: var(--abstand-4); margin-top: var(--abstand-6); }
.kachel {
  display: flex; flex-direction: column; gap: var(--abstand-3); padding: var(--abstand-4); overflow: hidden;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-xl);
}
.kachel > p { color: var(--text-2); }
.kachel-bild {
  position: relative; display: grid; place-items: center; height: 170px; margin-bottom: var(--abstand-2);
  border-radius: var(--radius-l); background: var(--marke-leinen-tief); overflow: hidden;
}
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel { padding: var(--abstand-5); }
  .kachel--telefon, .kachel--support { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kachel--telefon { grid-column: span 4; }
  .kachel--post, .kachel--kalender, .kachel--app, .kachel--kategorien { grid-column: span 2; }
  .kachel--support { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--abstand-6); align-items: center; }
  .kachel--support .kachel-bild { grid-row: 1 / span 2; margin: 0; }
  .kachel--support h3 { align-self: end; }
  .kachel--support p { align-self: start; }
}
.mini-anruf { width: min(88%, 380px); display: grid; gap: 8px; }
.mini-status { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 6px 12px; border-radius: var(--radius-rund); background: var(--marke-tinte); color: var(--marke-leinen); font-size: 0.875rem; font-weight: 700; }
.mini-status .spricht i { background: var(--marke-messing); }
.mini-blase { max-width: 80%; padding: 8px 12px; border-radius: var(--radius-m); background: var(--flaeche); font-size: 0.9375rem; box-shadow: var(--schatten-karte); }
.mini-blase--merle { justify-self: end; border-left: 3px solid var(--marke-messing); }
.mini-post { position: relative; display: flex; align-items: center; gap: 10px; }
.mini-brief { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-m); background: var(--flaeche); box-shadow: var(--schatten-karte); color: var(--text-2); }
.mini-ordner { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 10px 14px; border-radius: var(--radius-m); background: var(--flaeche); border: 1.5px solid var(--text-2); font-weight: 700; font-size: 0.9375rem; }
.mini-kal { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 26px); gap: 6px; }
.mini-kal span { border-radius: 6px; border-left: 3px solid var(--p-lena); background: color-mix(in srgb, var(--p-lena) 18%, var(--flaeche)); }
.mini-kal span:nth-child(1) { grid-row: 1 / span 2; }
.mini-kal span:nth-child(2) { --p-lena: var(--p-tom); grid-column: 2; grid-row: 1; }
.mini-kal span:nth-child(3) { --p-lena: var(--p-mirko); grid-column: 3; grid-row: 1 / span 3; }
.mini-kal span:nth-child(4) { --p-lena: var(--p-tom); grid-column: 2; grid-row: 2 / span 2; }
.mini-kal span:nth-child(5) { grid-column: 1; grid-row: 3; box-shadow: 0 0 0 2px var(--p-lena); }
.mitteilung--mini { width: min(86%, 300px); }
.mini-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 12px; }
.mini-chips .chip { background: var(--flaeche); }
.mini-support { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius-l); background: var(--flaeche); box-shadow: var(--schatten-karte); font-size: 0.9375rem; line-height: 1.4; }
.mini-support-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--marke-tinte); color: var(--marke-messing); }

@media (prefers-reduced-motion: no-preference) {
  .kachel.sichtbar .mini-blase { animation: auftauchen .35s var(--kurve) both; }
  .kachel.sichtbar .mini-blase--anrufer { animation-delay: .2s; }
  .kachel.sichtbar .mini-blase--merle { animation-delay: .9s; }
  .kachel.sichtbar .mini-brief { animation: einsortieren .55s var(--kurve) both; }
  .kachel.sichtbar .mini-brief:nth-child(2) { animation-delay: .15s; }
  .kachel.sichtbar .mini-brief:nth-child(3) { animation-delay: .3s; }
  .kachel.sichtbar .mini-kal span { animation: fallen .4s var(--kurve) both; }
  .kachel.sichtbar .mini-kal span:nth-child(2) { animation-delay: .1s; }
  .kachel.sichtbar .mini-kal span:nth-child(3) { animation-delay: .2s; }
  .kachel.sichtbar .mini-kal span:nth-child(4) { animation-delay: .3s; }
  .kachel.sichtbar .mini-kal span:nth-child(5) { animation-delay: .7s; }
  .kachel.sichtbar .mitteilung--mini { animation: herab .45s var(--kurve) .2s both; }
  .kachel.sichtbar .chip--neu { animation: auftauchen .35s var(--kurve) .5s both; }
  .kachel.sichtbar .mini-support { animation: auftauchen .4s var(--kurve) .1s both; }
  @keyframes auftauchen { from { opacity: 0; transform: translateY(8px) scale(.97); } }
  @keyframes einsortieren { from { opacity: 0; transform: translateX(-26px); } }
  @keyframes fallen { from { opacity: 0; transform: translateY(-14px); } }
  @keyframes herab { from { opacity: 0; transform: translateY(-24px); } }
}

/* ── 5 · Vertrauen ─────────────────────────────────────────────────────────── */
.vertrauen[data-thema] { background: var(--marke-tinte); }
.vertrauen-raster { display: grid; gap: var(--abstand-7); }
.vertrauen-liste { list-style: none; display: grid; gap: var(--abstand-5); margin-top: var(--abstand-6); }
.vertrauen-liste li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--abstand-3); }
.vertrauen-liste .symbol { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--marke-messing); margin-top: 2px; }
.vertrauen-liste h3 { font-family: var(--font-anzeige); font-weight: 700; font-size: 1.25rem; line-height: 1.3; margin-bottom: 4px; }
.vertrauen-liste p { color: var(--text-2); max-width: 36em; }
.ansprechpartner { overflow: hidden; border-radius: var(--radius-xl); background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-hoch); align-self: start; }
/* Monogramm, bis ein Foto da ist (Austausch beschreibt deploy/README.md); gleiche Fläche wie das spätere Foto, 6:5 */
.monogramm { display: grid; place-items: center; aspect-ratio: 6 / 5; background: var(--marke-leinen-tief); border-bottom: 1px solid var(--linie); }
.monogramm span {
  display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: var(--radius-symbol);
  background: var(--marke-tinte); color: var(--marke-messing); box-shadow: var(--schatten-karte);
  font-family: var(--font-anzeige); font-weight: 800; font-size: clamp(3rem, 1.8rem + 3.4vw, 5rem); letter-spacing: -0.04em; line-height: 1;
}
.ansprechpartner-foto { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; }
.ansprechpartner-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--abstand-3); padding: var(--abstand-5); }
.ansprechpartner-text .dachzeile { margin: 0; }
.ansprechpartner-firma { margin-top: -8px; color: var(--text-2); }
@media (min-width: 1000px) {
  .vertrauen-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--abstand-8); }
  .ansprechpartner { position: sticky; top: calc(var(--kopf-hoehe) + var(--abstand-5)); }
}

/* ── 6 · Preise: drei Pakete, die sich nur in Preis, Betriebsgröße und SMS unterscheiden ──────────────── */
.pakete { list-style: none; display: grid; gap: var(--abstand-4); margin-top: var(--abstand-6); }
.paket {
  display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-5); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius-xl);
}
.paket--mitte { border: 2px solid var(--marke-tinte); box-shadow: var(--schatten-karte); }
.paket-fuer { color: var(--text-2); }
.preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: var(--abstand-2) 0; }
.preis-betrag { font-family: var(--font-anzeige); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.preis-zeit { color: var(--text-2); }
.paket-liste, .umfang-liste { list-style: none; display: grid; gap: var(--abstand-3); }
.paket-liste { padding-top: var(--abstand-3); border-top: 1px solid var(--linie); }
.paket-liste li, .umfang-liste li { position: relative; padding-left: 32px; }
.paket-liste li::before, .umfang-liste li::before {
  content: ""; position: absolute; left: 3px; top: 0.42em; width: 14px; height: 7px;
  border-left: 2px solid var(--erledigt-text); border-bottom: 2px solid var(--erledigt-text); transform: rotate(-45deg);
}
.preise-alle {
  margin-top: var(--abstand-4); padding: var(--abstand-5); background: var(--flaeche); border: 1px solid var(--linie);
  border-top: 4px solid var(--marke-messing); border-radius: var(--radius-xl);
}
.preise-alle .umfang-liste { margin-top: var(--abstand-4); }
.preise-fuss { display: grid; gap: var(--abstand-3); margin-top: var(--abstand-6); max-width: 60em; color: var(--text-2); }
.preise-fuss strong { color: var(--text); }
.b2b { font-size: 1rem; color: var(--text-2); }
.preise-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-3); margin-top: var(--abstand-3); }
@media (max-width: 699.98px) { .preise-aktionen .knopf { width: 100%; } }
@media (max-width: 359.98px) { .paket, .preise-alle { padding: var(--abstand-4); } }
@media (min-width: 700px) { .preise-alle .umfang-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--abstand-6); } }
@media (min-width: 1000px) {
  .pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preise-alle { padding: var(--abstand-6); }
  .preise-alle .umfang-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 7 · Häufige Fragen ────────────────────────────────────────────────────── */
.fragen[aria-labelledby] { background: var(--marke-leinen-tief); }
.akkordeon { margin-top: var(--abstand-6); border-top: 1px solid var(--linie-kraeftig); }
.akkordeon details { border-bottom: 1px solid var(--linie-kraeftig); }
.akkordeon summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4); min-height: 64px;
  padding: var(--abstand-4) 4px; cursor: pointer; list-style: none;
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary h3 { font-family: var(--font-anzeige); font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.akkordeon summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin: 0 6px 6px 0; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--kurve);
}
.akkordeon details[open] summary::after { transform: translateY(5px) rotate(-135deg); }
.akkordeon summary:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.antwort { padding: 0 4px var(--abstand-5); }
.antwort p { max-width: 62ch; }
.antwort p + p { margin-top: var(--abstand-3); }
@media (prefers-reduced-motion: no-preference) {
  .akkordeon details::details-content { height: 0; overflow: clip; transition: height .25s var(--kurve), content-visibility .25s allow-discrete; }
  .akkordeon details[open]::details-content { height: auto; }
}

/* ── 8 · Abschluss und Fuß ─────────────────────────────────────────────────── */
.schluss-innen { display: grid; justify-items: center; text-align: center; gap: var(--abstand-4); }
.schluss-innen .titel-1 { max-width: 18ch; }
.schluss-innen .einleitung { margin-top: 0; }
.schluss-zeichen { width: 72px; height: 72px; }
.schluss-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--abstand-4); margin-top: var(--abstand-4); }
.fuss { padding: var(--abstand-7) 0 var(--abstand-6); border-top: 1px solid var(--linie); }
.fuss-raster { display: grid; gap: var(--abstand-5); }
.fuss-marke p { margin-top: var(--abstand-3); color: var(--text-2); max-width: 30em; }
.fuss-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--abstand-5); }
.fuss-nav a { display: inline-flex; align-items: center; min-height: 48px; color: var(--text); }
.fuss-b2b, .fuss-klein { color: var(--text-2); font-size: 0.9375rem; }
@media (min-width: 1000px) {
  .fuss-raster { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .fuss-nav { max-width: 38rem; }                      /* sieben Verweise: in zwei Zeilen, die Marke behält Platz */
  .fuss-nav ul { justify-content: flex-end; }
  .fuss-b2b, .fuss-klein { grid-column: 1 / -1; }
}

/* ── Rechtstexte (Impressum, Datenschutz, Hilfe) und Fehlerseite ──────────── */
.rechtstext { padding: calc(var(--kopf-hoehe) + var(--abstand-7)) 0 var(--abstand-9); }
.rechtstext h1 { margin-bottom: var(--abstand-5); }
.rechtstext h2 { font-family: var(--font-anzeige); font-weight: 700; font-size: 1.5rem; line-height: 1.25; margin: var(--abstand-7) 0 var(--abstand-3); }
.rechtstext h3 { font-family: var(--font-anzeige); font-weight: 700; font-size: 1.1875rem; margin: var(--abstand-5) 0 var(--abstand-2); }
.rechtstext p, .rechtstext ul, .rechtstext ol, .rechtstext address { max-width: 70ch; }
.rechtstext p + p, .rechtstext p + ul, .rechtstext ul + p, .rechtstext p + ol, .rechtstext ol + p, .rechtstext address + p { margin-top: var(--abstand-3); }
.rechtstext ul { padding-left: 1.25em; }
.rechtstext ol { padding-left: 1.5em; }
.rechtstext li + li { margin-top: 6px; }
.rechtstext address { font-style: normal; }
.rechtstext .stand { color: var(--text-2); }
.hervorgehoben { margin-top: var(--abstand-4); padding: var(--abstand-4) var(--abstand-5); border-left: 3px solid var(--akzent); background: var(--flaeche); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.fehler-aktionen { margin-top: var(--abstand-6); }

@media print {
  .kopf, .tagesleiste { display: none !important; }
  .held-rahmen, .station-rahmen { position: static !important; height: auto !important; }
}