/* ==========================================================================
   STIL · das Gestaltungssystem „Kacheln“ des Pflege Kompass (Entscheidung
   Lucas, 18.09.2026, Umzug 21.09.). Ein warmer Beige-Grund, weiße und pastellfarbene
   Kacheln, eine dunkle Kachel je Seite, Pillen für alles, was man drückt, eine
   Schrift (Manrope, selbst gehostet). Regeln: Docs/gestaltung.md.
   Eine Datei für alle Seiten. Seitenlokale Stile gehören in die Seite.
   Am Ende: die Übergangsschicht für Seiten, die noch die alten Klartext-
   Klassen tragen (siehe gestaltung.md, „Übergang“). Sie fällt weg, sobald die
   letzte Seite umgezogen ist.
   ========================================================================== */
@font-face { font-family: "Manrope"; font-weight: 300 800; font-display: swap; src: url("schrift/manrope-latin.woff2") format("woff2"); }

:root {
  --grund: #f5eee0; --weiss: #ffffff; --navy: #1c2340; --navy-2: #4a5170; --navy-3: #5f6580; --linie: #ddd3c3;
  /* Runde vier (Michael, 21.09.; Lucas: Variante A): Navy zuerst, dann Sand, der Rest leise. Kein Grün mehr.
     Die Klassennamen bleiben, die Werte nicht: „mint“ ist jetzt helles Sand (das Positive: Entlastungsbetrag,
     erledigt, schon bekannt), „himmel“ und „rose“ sind fast grau, „mint-tief“ ist dunkles Sand für Text auf hellem
     Sand (5,8:1), „gruen“ ist der goldene Punkt für „erreichbar“ (Schmuck, kein Text). */
  --mint: #f5e6c4; --himmel: #e6e8ec; --sand: #f0d190; --rose: #ebdcd5; --flieder: #e5dbc9;
  --mint-tief: #6e5316; --gruen: #d4a02f; --fehler: #b3261e;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --breit: 1180px; --k: 28px; --k-klein: 16px; --k-innen: 22px 24px;
  /* Runde fünf (Entscheidung Lucas 24.09., r5-raster, r5-zugang). Die Seitenspalte ist überall eine Breite. Schrift als
     Skala: --s wirkt auf Text, --st auf Titel und große Zahlen; Großschrift ändert nur diese zwei Faktoren (Text wächst
     mehr als Titel). Sechs Titelstufen, vier Zahlstufen, sonst keine Größe für Titel und Zahlen. */
  --seite: 450px; --s: 1; --st: 1; --zeit: .18s; --gesperrt: .45;
  --t1: clamp(38px, 5.8vw, 72px); --t2: clamp(30px, 4.2vw, 52px); --t3: clamp(26px, 3vw, 38px); --t4: clamp(24px, 2.6vw, 30px); --t5: 22px; --t6: 19px;
  --z1: clamp(56px, 9vw, 96px); --z2: clamp(40px, 4.4vw, 56px); --z3: clamp(34px, 3.4vw, 44px); --z4: clamp(26px, 2.6vw, 32px);
}
html.gross { --s: 1.18; --st: 1.06; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--navy); font: 500 calc(var(--s) * 17px)/1.55 var(--font); font-variant-numeric: tabular-nums; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
/* Zweifarbiger Ring (r5-system-07): Navy mit weißem Innenring, auf Navy weiß mit Navy-Innenring; sichtbar auf jedem Grund. */
.kachel.dunkel :focus-visible, .btn.navy:focus-visible, .leiste .btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px var(--navy); }
.btn.navy:focus-visible { outline-color: var(--navy); box-shadow: 0 0 0 3px #fff; }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: calc(var(--st) * var(--t2)); letter-spacing: -0.035em; }
h2 { font-size: calc(var(--st) * var(--t3)); }
h3 { font-size: calc(var(--st) * var(--t5)); letter-spacing: -0.02em; line-height: 1.12; }
p { margin: 0; }
p + p { margin-top: .8em; }
.rahmen { max-width: var(--breit); margin: 0 auto; padding: 0 20px; }
.schmal { max-width: 720px; }
.satz { color: var(--navy-2); font-size: calc(var(--s) * 18px); max-width: 32em; }
.klein { font-size: calc(var(--s) * 14px); color: var(--navy-2); }
.klein a, .quellen a, .satz a, label.wahl a { display: inline-block; padding: 10px 0; }
.mark { background: var(--sand); padding: 0 .12em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Chips: die Bezeichnung über einem Block ist eine kleine Pille, kein Versaltext. */
.chip { display: inline-flex; align-items: center; gap: 8px; font: 800 calc(var(--s) * 12px) var(--font); letter-spacing: .1em; text-transform: uppercase; background: rgba(28,35,64,.08); color: var(--navy); border-radius: 999px; padding: 7px 12px; }
.chip.weiss { background: #fff; }
.chip.hell { background: rgba(255,255,255,.18); color: #fff; }
.chip .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }

/* Pillen: alles, was man drückt. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 999px; border: 0; font: 800 calc(var(--s) * 16px) var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--zeit), background var(--zeit); }
.btn:active { transform: translateY(1px); }
.btn.navy { background: var(--navy); color: #fff; }
.btn.navy:hover { background: #0f1430; }
.btn.weiss { background: #fff; color: var(--navy); }
.btn.weiss:hover { background: var(--flieder); }
.btn.rand { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn.rand:hover { background: rgba(28,35,64,.06); }
.btn.hell { background: rgba(255,255,255,.14); color: #fff; border: 2px solid rgba(255,255,255,.35); }
.btn.klein { min-height: 42px; padding: 0 16px; font-size: calc(var(--s) * 14px); }
.btn.breit { width: 100%; }
.pfeil { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: calc(var(--s) * 16px); flex-shrink: 0; }
.pfeil.hell { background: rgba(255,255,255,.8); color: var(--navy); }
.weiterlink { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; font-size: calc(var(--s) * 16px); min-height: 44px; }
.weiterlink:hover .pfeil { background: var(--mint-tief); }

/* Kacheln: eine Sache je Kachel. */
.kachel { border-radius: var(--k); padding: var(--k-innen); background: #fff; }
.kachel.dunkel { background: var(--navy); color: #fff; }
.kachel.dunkel .satz, .kachel.dunkel p.klein { color: rgba(255,255,255,.75); }
.kachel.mint { background: var(--mint); } .kachel.himmel { background: var(--himmel); } .kachel.sand { background: var(--sand); } .kachel.rose { background: var(--rose); } .kachel.flieder { background: var(--flieder); }
.kachel.gross { padding: 32px 36px; }
.kachel.foto { padding: 0; overflow: hidden; position: relative; }
.kachel.foto img { width: 100%; height: 100%; object-fit: cover; }
.kachel.foto .darauf { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; color: #fff; background: linear-gradient(180deg, rgba(28,35,64,0) 0%, rgba(28,35,64,.75) 100%); }
.kachel.foto .darauf .titel { color: #fff; font-weight: 800; font-size: calc(var(--s) * 22px); letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
@media (max-width: 720px) { .kachel { border-radius: 22px; padding: 18px 18px; } .kachel.gross { padding: 24px 20px; } }

/* Raster: Kacheln mit Zwischenraum, verschieden groß. */
.raster { display: grid; gap: 14px; }
.raster > * { min-width: 0; }
.raster.zwei { grid-template-columns: 1fr 1fr; }
.raster.drei { grid-template-columns: repeat(3, 1fr); }
.raster.vier { grid-template-columns: repeat(4, 1fr); }
.raster.bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto); }
.raster.breitlinks { grid-template-columns: minmax(0, 1fr) var(--seite); }
.raster.heldenpaar { grid-template-columns: minmax(0, 1fr) var(--seite); align-items: stretch; }
/* Runde fünf (r5-raster, r5-system-05): eine Teilung für Titelpaar, Werkzeug, Rechner und Lesetext, rechts immer --seite. */
.raster.mitseite, .raster.mitseite.breit { grid-template-columns: minmax(0, 1fr) var(--seite); align-items: start; }
.mitseite aside { position: sticky; top: 90px; display: grid; gap: 14px; }
.bento .breit2 { grid-column: span 2; }
.bento .hoch2 { grid-row: span 2; }
@media (max-width: 900px) { .raster.breitlinks, .raster.heldenpaar, .raster.mitseite, .raster.mitseite.breit { grid-template-columns: 1fr; } .mitseite aside { position: static; } .raster.vier { grid-template-columns: 1fr 1fr; } .raster.drei, .raster.bento { grid-template-columns: 1fr 1fr; } .bento .breit2 { grid-column: span 2; } .bento .hoch2 { grid-row: auto; } }
@media (max-width: 600px) { .raster.zwei, .raster.drei, .raster.vier, .raster.bento { grid-template-columns: 1fr; } .bento .breit2 { grid-column: auto; } .raster { gap: 12px; } }
.abschnitt { margin-top: 44px; }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 16px; }
.abschnitt-kopf .satz { margin-top: 8px; }
@media (max-width: 720px) { .abschnitt { margin-top: 32px; } .abschnitt-kopf { display: block; } .abschnitt-kopf .btn { margin-top: 12px; } }

/* Kopf: eine weiße Pille, die schwebt. */
.kopf-rahmen { padding: 14px 0 0; position: sticky; top: 0; z-index: 30; background: linear-gradient(180deg, var(--grund) 70%, rgba(245,238,224,0)); }
.kopf { background: #fff; border-radius: 999px; padding: 10px 12px 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: 0 1px 0 rgba(28,35,64,.04); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 calc(var(--s) * 21px) var(--font); letter-spacing: -0.03em; white-space: nowrap; padding: 6px 0; }
.logo .marke { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.kachel.dunkel .logo .marke .rund { fill: rgba(255,255,255,.14); }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; font-weight: 700; font-size: calc(var(--s) * 15px); padding: 10px 12px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--grund); }
.kopf-rechts { display: flex; align-items: center; gap: 8px; }
.tel { display: inline-flex; align-items: center; gap: 8px; background: var(--grund); border-radius: 999px; padding: 10px 14px; font-weight: 800; font-size: calc(var(--s) * 15px); text-decoration: none; white-space: nowrap; }
.tel::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }
.tel .kurz { display: none; }
.menue { display: none; }
@media (max-width: 900px) { .logo { font-size: calc(var(--s) * 18px); gap: 8px; } .logo .marke { width: 28px; height: 28px; } .nav, .kopf-rechts .btn { display: none; } .menue { display: inline-block; font: 800 calc(var(--s) * 14px) var(--font); background: var(--grund); border: 0; border-radius: 999px; padding: 12px 12px; min-height: 42px; cursor: pointer; } .tel { padding: 11px 11px; font-size: calc(var(--s) * 14px); } .tel .lang { display: none; } .tel .kurz { display: inline; } .kopf { padding: 8px 8px 8px 14px; gap: 8px; } .logo { font-size: calc(var(--s) * 20px); } .kopf-rechts { gap: 6px; } }
.nav .mehr { display: none; }
@media (max-width: 1100px) { .tel .lang { display: none; } .tel .kurz { display: inline; } }
.kopf.offen .nav { display: flex; }
@media (max-width: 900px) { .kopf.offen .nav .mehr { display: block; } .kopf.offen .nav .chip.mehr { display: inline-flex; align-self: flex-start; margin: 12px 12px 4px; } .kopf.offen .nav .btn.mehr { display: inline-flex; align-self: flex-start; margin: 10px 12px 8px; } }
@media (max-width: 900px) { .kopf.offen { border-radius: 24px; flex-wrap: wrap; } .kopf.offen .nav { flex-basis: 100%; flex-direction: column; gap: 2px; padding: 8px 0 4px; border-top: 1px solid var(--linie); } .kopf.offen .nav a { padding: 12px; font-size: calc(var(--s) * 17px); } }

/* Fragebogen: die Karte mit Schiene, Frage, Antwortpillen. */
.schiene { display: flex; gap: 5px; margin-bottom: 18px; }
.schiene i { flex: 1; height: 6px; border-radius: 3px; background: var(--grund); }
.schiene i.on { background: var(--navy); }
.frage { font: 800 calc(var(--st) * clamp(24px, 3vw, 30px)) var(--font); letter-spacing: -0.025em; margin: 0 0 6px; line-height: 1.1; }
.frage-sub { margin: 0 0 16px; color: var(--navy-2); font-size: calc(var(--s) * 15px); }
.pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pille { font: 800 calc(var(--s) * 16px) var(--font); padding: 12px 18px; border-radius: 999px; border: 2px solid var(--linie); background: #fff; color: var(--navy); cursor: pointer; text-align: left; }
.pille:hover { border-color: var(--navy); }
.pille[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pille.zeile { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-height: 60px; }
.pille .nr { width: 28px; height: 28px; border-radius: 50%; background: var(--grund); color: var(--navy); font: 800 calc(var(--s) * 13px)/28px var(--font); text-align: center; flex-shrink: 0; }
.pille[aria-pressed="true"] .nr { background: var(--mint); }
.pille .sub { display: block; font-size: calc(var(--s) * 14px); font-weight: 500; color: var(--navy-2); }
.pille[aria-pressed="true"] .sub { color: rgba(255,255,255,.8); }
.grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.grade button { height: 76px; border-radius: 20px; border: 2px solid var(--linie); background: #fff; font: 800 calc(var(--s) * 30px) var(--font); color: var(--navy); cursor: pointer; }
.grade button:hover { border-color: var(--navy); }
.grade button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.zeile { display: flex; gap: 8px; }
.zeile input { flex: 1; min-width: 0; min-height: 54px; border: 2px solid var(--linie); border-radius: 999px; padding: 0 18px; font: 700 calc(var(--s) * 17px) var(--font); color: var(--navy); background: #fff; }
.zeile input:focus { outline: none; border-color: var(--navy); }
label.feld { display: block; margin-bottom: 12px; }
label.feld > span { display: block; font-size: calc(var(--s) * 14px); font-weight: 800; margin: 0 0 6px 6px; }
label.feld input { width: 100%; min-height: 54px; border: 2px solid var(--linie); border-radius: 999px; padding: 0 18px; font: 700 calc(var(--s) * 17px) var(--font); color: var(--navy); }
label.feld input:focus { outline: none; border-color: var(--navy); }
label.feld { min-width: 0; } label.feld input[type="date"] { min-width: 0; max-width: 100%; appearance: none; -webkit-appearance: none; }
.nav-unten { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.nav-unten .leise { background: none; border: 0; font: 700 calc(var(--s) * 15px) var(--font); color: var(--navy-2); cursor: pointer; padding: 12px 10px; min-height: 44px; border-radius: 999px; }

/* Balkenliste: Beträge als Pillen, deren Breite den Betrag zeigt (nach Wise). */
.balken { display: grid; gap: 8px; }
.balken .reihe { display: grid; grid-template-columns: minmax(88px, 128px) 1fr; gap: 12px; align-items: center; }
.balken .name { font-weight: 800; font-size: calc(var(--s) * 15px); line-height: 1.2; overflow-wrap: anywhere; hyphens: manual; }
.balken .name small { display: block; font-weight: 500; color: var(--navy-2); font-size: calc(var(--s) * 12px); }
.balken.breit .reihe { grid-template-columns: minmax(120px, 200px) 1fr; }
.balken .pill { height: 46px; border-radius: 999px; background: var(--grund); display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; font-weight: 800; white-space: nowrap; min-width: fit-content; width: 100%; }
.balken .pill { transition: width .45s cubic-bezier(.2,.7,.2,1), background-color .3s, clip-path .6s cubic-bezier(.2,.7,.2,1); }
/* Erstes Sichtbarwerden: die Balken wachsen von links (clip-path, weil min-width fit-content eine Breite von null verbietet). */
.balken[data-bewegt]:not(.wach) .pill { clip-path: inset(0 100% 0 0 round 999px); }
.balken.wach .pill { clip-path: inset(0 0 0 0 round 999px); }
.balken.wach .reihe:nth-child(2) .pill { transition-delay: .07s; } .balken.wach .reihe:nth-child(3) .pill { transition-delay: .14s; } .balken.wach .reihe:nth-child(4) .pill { transition-delay: .21s; } .balken.wach .reihe:nth-child(5) .pill { transition-delay: .28s; } .balken.wach .reihe:nth-child(n+6) .pill { transition-delay: .35s; }
html.ohne-bewegung .balken .pill { clip-path: none; }
.balken .reihe.neu { opacity: 0; transform: translateY(6px); }
.balken .reihe { transition: opacity .35s, transform .35s; }
.summe-zeile { font-size: calc(var(--s) * 17px); color: var(--navy-2); } .summe-zeile b { color: var(--navy); font-weight: 800; }
/* Runde vier: Navy gehört der Handlung, der gewählten Antwort und der dunklen Kachel. Balken sind Beige, der Entlastungsbetrag helles Sand. */
.balken .pill.on { background: var(--grund); color: var(--navy); }
.balken .pill.mint { background: var(--mint); color: var(--mint-tief); }
@media (max-width: 480px) { .balken .reihe { grid-template-columns: minmax(96px, 116px) 1fr; gap: 8px; } .balken .pill { padding: 0 12px; font-size: calc(var(--s) * 14px); height: 42px; } .balken .name { font-size: calc(var(--s) * 14px); } }

/* Wege: vier gleiche Kacheln, feste Ordnung: Chip, Zahl, eine Zeile, Pfeil. */
.weg { text-decoration: none; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-height: 200px; }
.weg > .chip { justify-self: start; }
.weg .zahl { font-size: calc(var(--st) * clamp(34px, 3.4vw, 44px)); white-space: nowrap; }
.weg .was { font-size: calc(var(--s) * 15px); font-weight: 700; color: var(--navy); }
.weg .unten { display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.weg:hover .pfeil { background: var(--mint-tief); }
/* Zahlkachel: eine Zahl, eine Zeile. */
.zahl { font: 800 calc(var(--st) * clamp(36px, 4.4vw, 56px))/1 var(--font); letter-spacing: -0.045em; }
.zahl small { display: block; font: 700 calc(var(--s) * 14px) var(--font); letter-spacing: 0; color: var(--navy-2); margin-top: 8px; }
.kachel.dunkel .zahl small { color: rgba(255,255,255,.7); }

/* Helfer-Zeilen (Liste der Kräfte). */
.helfer { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 10px 14px 10px 10px; }
.helfer + .helfer { margin-top: 8px; }
.helfer img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.helfer b { display: block; font-size: calc(var(--s) * 16px); }
.helfer span { font-size: calc(var(--s) * 13px); color: var(--navy-2); }
.helfer .tag { margin-left: auto; font: 800 calc(var(--s) * 12px) var(--font); background: var(--mint); color: var(--mint-tief); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.helfer.unscharf { filter: blur(3px); opacity: .7; pointer-events: none; }

/* Reiter als Pillen und Karussell (nach Headspace). */
.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.reiter button { font: 800 calc(var(--s) * 14px) var(--font); padding: 11px 14px; min-height: 42px; border-radius: 999px; border: 0; background: #fff; color: var(--navy); cursor: pointer; }
.reiter button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.karussell { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.karussell::-webkit-scrollbar { display: none; }
.karussell > * { flex: 0 0 320px; scroll-snap-align: start; }
@media (max-width: 600px) { .karussell > * { flex-basis: 78%; } }

/* Artikelkarte: Foto oben, Text darunter (nach Monzo). */
.artikel { display: block; background: #fff; border-radius: var(--k); padding: 12px 12px 18px; text-decoration: none; }
.artikel .bild { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; position: relative; }
.artikel .bild img { width: 100%; height: 100%; object-fit: cover; }
.artikel .bild .chip { position: absolute; left: 12px; top: 12px; background: #fff; }
.artikel h3 { margin: 14px 6px 6px; font-size: calc(var(--s) * 19px); overflow-wrap: anywhere; }
.raster .artikel { display: flex; flex-direction: column; }
.raster .artikel .bild { flex-shrink: 0; }
.artikel p { margin: 0 6px; font-size: calc(var(--s) * 14px); color: var(--navy-2); }

/* Zitat und Siegel. */
.zitat { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.zitat img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.zitat p { font: 700 calc(var(--s) * 18px)/1.4 var(--font); letter-spacing: -0.01em; }
.zitat cite { display: block; font-style: normal; font-size: calc(var(--s) * 13px); color: var(--navy-2); margin-top: 8px; }
.siegel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.siegel .kachel { padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.siegel b { font: 800 calc(var(--s) * 26px) var(--font); letter-spacing: -0.04em; }
.siegel span { font-size: calc(var(--s) * 13px); color: var(--navy-2); line-height: 1.3; }
@media (max-width: 900px) { .siegel { grid-template-columns: 1fr 1fr; } .siegel .kachel { min-width: 0; padding: 14px 14px; gap: 10px; } .siegel b { font-size: calc(var(--s) * 22px); } }
@media (max-width: 480px) { .siegel { grid-template-columns: 1fr; } }

/* Merken-Zeile: eine Mint-Kachel vor dem Werkzeug, die anbietet, was der Browser schon weiß. Text links, Pillen rechts. */
.kachel.merken { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 20px; }
.kachel.merken p { color: var(--mint-tief); font-size: calc(var(--s) * 16px); }
.kachel.merken .leise { background: none; border: 0; font: 700 calc(var(--s) * 15px) var(--font); color: var(--mint-tief); cursor: pointer; padding: 10px 10px; min-height: 42px; border-radius: 999px; }

/* Schwebende Leiste der Schritt-Werkzeuge: Kopie von Zurück und Weiter, unten (oder oben), wenn die echten Pillen
   aus dem Bild sind. Eine weiße Pille wie der Kopf, schwebt mit 14 px Abstand, nie über dem Kopf. */
.leiste { position: fixed; left: 50%; bottom: 14px; transform: translate(-50%, 24px); display: flex; gap: 8px; align-items: center; padding: 8px 8px 8px 12px; background: #fff; border-radius: 999px; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; box-shadow: 0 1px 0 var(--linie); max-width: calc(100vw - 28px); }
.leiste.an { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.leiste.oben { bottom: auto; top: 76px; transform: translate(-50%, -24px); }
.leiste.oben.an { transform: translate(-50%, 0); }
.leiste .btn { min-height: 46px; padding: 0 20px; font-size: calc(var(--s) * 15px); }
.leiste .leise { background: none; border: 0; font: 700 calc(var(--s) * 15px) var(--font); color: var(--navy-2); cursor: pointer; padding: 10px 10px; min-height: 44px; border-radius: 999px; }
.leiste .btn:disabled { opacity: .45; cursor: default; }
body.mit-leiste { padding-bottom: 90px; }
@media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }
@media print { .leiste { display: none !important; } }

/* Ablauf: eine Checkliste als Weg in Phasen (Antragslotse, später die MD-Checkliste). Jede Zeile eine Sache,
   Ziffer links, Kästchen zum Abhaken, erledigt wird Mint. Der Stand steht als Chip und in der Schiene oben. */
.ablauf .phase { display: grid; gap: 8px; margin-top: 18px; }
.ablauf .phase > .chip { justify-self: start; margin-bottom: 4px; }
.ablauf .posten { display: flex; align-items: flex-start; gap: 14px; background: var(--grund); border-radius: 20px; padding: 14px 18px 14px 14px; cursor: pointer; min-height: 60px; transition: background .25s; }
.ablauf .posten input { width: 24px; height: 24px; margin: 3px 0 0; accent-color: var(--mint-tief); flex-shrink: 0; cursor: pointer; }
.ablauf .posten .nr { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--navy); font: 800 calc(var(--s) * 13px)/28px var(--font); text-align: center; flex-shrink: 0; margin-top: 1px; }
.ablauf .posten .text { font-weight: 700; font-size: calc(var(--s) * 16px); line-height: 1.45; }
.ablauf .posten .text .btn { margin-top: 10px; display: flex; width: fit-content; }
.ablauf .posten .text small { display: block; font-weight: 500; color: var(--navy-2); font-size: calc(var(--s) * 14px); margin-top: 4px; line-height: 1.4; }
.ablauf .posten.erledigt .text small { color: var(--mint-tief); }
.ablauf .posten.erledigt { background: var(--mint); }
.ablauf .posten.erledigt .nr { background: var(--mint-tief); color: #fff; }
.ablauf .posten.erledigt .text { color: var(--mint-tief); }
.ablauf .schiene { margin: 0 0 6px; }
@media (max-width: 600px) { .ablauf .posten { gap: 10px; padding: 12px 14px 12px 12px; } .ablauf .posten .text { font-size: calc(var(--s) * 15px); } }
@media print { .ablauf .posten { background: none; padding: 4px 0; break-inside: avoid; } .ablauf .posten .text .btn, .ablauf .posten .btn, .ablauf .schiene { display: none; } }

/* Schritte in der dunklen Kachel. */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.schritte div { background: rgba(255,255,255,.08); border-radius: 20px; padding: 18px 18px 20px; }
.schritte b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mint); color: var(--navy); font-weight: 800; margin-bottom: 12px; }
.schritte h3 { color: #fff; margin-bottom: 6px; font-size: calc(var(--s) * 19px); }
.schritte p { color: rgba(255,255,255,.75); font-size: calc(var(--s) * 14px); }
@media (max-width: 720px) { .schritte { grid-template-columns: 1fr; } }

/* Der Brief als Kachel. */
.brief { padding: 30px 34px; }
.briefkopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--linie); margin-bottom: 22px; }
.briefkopf .absender { display: flex; gap: 10px; align-items: center; font-size: calc(var(--s) * 13px); color: var(--navy-2); line-height: 1.35; }
.briefkopf .absender b { display: block; font-size: calc(var(--s) * 16px); color: var(--navy); }
.brief h1 { font-size: calc(var(--st) * clamp(28px, 4vw, 44px)); margin-bottom: 16px; }
.brief .text { max-width: 34em; }
.brief .zahl { font-size: calc(var(--st) * clamp(56px, 9vw, 96px)); margin: 22px 0 4px; }
.brief table { width: 100%; border-collapse: collapse; margin: 18px 0 8px; font-size: calc(var(--s) * 16px); }
.brief td { padding: 12px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.brief td:last-child { text-align: right; font-weight: 800; white-space: nowrap; }
.brief td .par { display: inline-block; font: 800 calc(var(--s) * 11px) var(--font); letter-spacing: .06em; background: var(--grund); padding: 3px 7px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.brief .quellen { font-size: calc(var(--s) * 13px); color: var(--navy-3); margin-top: 18px; }
.brief details summary { padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
@media (max-width: 720px) { .brief { padding: 22px 18px; } }

/* Lesetext im Ratgeber. */
/* Die Lesekachel füllt ihre Spalte; die Zeile hält ein inneres Maß (r5-lesen-09). */
.lesen { max-width: none; }
.lesen > p, .lesen > ul, .lesen > ol, .lesen > h2, .lesen > h3 { max-width: 68ch; }
.lesen h2 { font-size: calc(var(--st) * var(--t4)); margin: 32px 0 10px; overflow-wrap: anywhere; }
.lesen p { font-size: calc(var(--s) * 18px); line-height: 1.6; }
.lesen p + p { margin-top: 1em; }
.lesen ul { padding-left: 22px; font-size: calc(var(--s) * 18px); line-height: 1.6; }
.lesen li { margin-bottom: 6px; }
.lesen ul, .lesen ol { margin: 10px 0; }
.fehlerzeile, .fehlertext { color: var(--fehler); font-size: calc(var(--s) * 14px); margin: 6px 0 0; font-weight: 700; }
label.feld input.fehler { border-color: var(--fehler); }
label.feld .fehlertext:not([hidden]) { display: block; }
.lesen > .kachel, .lesen > .raster { margin: 26px 0; }
.lesen .kachel h3 { margin-bottom: 6px; }
.lesen .kachel p { font-size: calc(var(--s) * 16px); }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

/* Fuß: Newsletter-Kachel, Regionen, die Zeile. */
.fuss { margin-top: 44px; padding-bottom: 40px; }
.abo { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.abo h2 { font-size: calc(var(--st) * var(--t4)); }
.abo form { display: flex; gap: 8px; }
.abo input { min-height: 54px; border: 2px solid var(--linie); border-radius: 999px; padding: 0 18px; font: 700 calc(var(--s) * 16px) var(--font); color: var(--navy); background: #fff; min-width: 240px; }
.abo input:focus { outline: none; border-color: var(--navy); }
.abo input.fehler { border-color: var(--fehler); }
.fuss .regionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fuss .regionen a { text-decoration: none; background: #fff; border-radius: 999px; padding: 11px 14px; font-weight: 700; font-size: calc(var(--s) * 14px); min-height: 42px; display: inline-flex; align-items: center; }
.fuss .zeile2 { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: calc(var(--s) * 13px); color: var(--navy-2); align-items: center; }
.fuss .zeile2 a { padding: 10px 0; display: inline-block; }
.fuss .zeile2 b { color: var(--navy); }
@media (max-width: 760px) { .abo { grid-template-columns: 1fr; } .abo form { flex-direction: column; } .abo input { min-width: 0; } }
.ankunft { display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex-wrap: wrap; }
.platzhalter { position: absolute; right: 12px; top: 12px; z-index: 2; font: 800 calc(var(--s) * 10px) var(--font); letter-spacing: .08em; text-transform: uppercase; background: rgba(28,35,64,.7); color: #fff; padding: 4px 8px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } .balken .pill, .balken .reihe { transition: none; clip-path: none !important; } }

/* Nachtrag 21.09.: Eingaben im Rechner, Balken auf Navy, Tabelle unter der Falz, der Brief an die Kasse, Druck. */
[hidden] { display: none !important; }
.leise { background: none; border: 0; font: 700 calc(var(--s) * 15px) var(--font); color: var(--navy-2); cursor: pointer; padding: 12px 10px; min-height: 44px; border-radius: 999px; }
label.feld select, label.feld textarea { width: 100%; border: 2px solid var(--linie); color: var(--navy); background: #fff; font: 700 calc(var(--s) * 17px) var(--font); }
label.feld select { min-height: 54px; border-radius: 999px; padding: 0 44px 0 18px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231c2340' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center / 14px; }
label.feld textarea { min-height: 110px; border-radius: 20px; padding: 14px 18px; font-weight: 500; font-size: calc(var(--s) * 16px); line-height: 1.45; resize: vertical; }
label.feld select:focus, label.feld textarea:focus { outline: none; border-color: var(--navy); }
label.feld > span small { display: block; font-weight: 500; color: var(--navy-3); font-size: calc(var(--s) * 13px); margin-top: 2px; }
label.feld > span b { font-size: calc(var(--s) * 18px); }
label.feld input[type=range] { width: 100%; min-height: 54px; margin: 0; padding: 0; border: 0; accent-color: var(--navy); cursor: pointer; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 600px) { .felder { grid-template-columns: 1fr; } }
label.wahl { display: flex; align-items: flex-start; gap: 12px; font-size: calc(var(--s) * 14px); color: var(--navy-2); margin: 12px 0; cursor: pointer; }
label.wahl input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy); flex-shrink: 0; }
.kachel.dunkel h2, .kachel.dunkel h3 { color: #fff; }
.kachel.dunkel .balken .pill { background: rgba(255,255,255,.14); color: #fff; }
.kachel.dunkel .balken .pill.on { background: #fff; color: var(--navy); }
.kachel.dunkel .balken .pill.mint { background: var(--mint); color: var(--mint-tief); }
.kachel.dunkel .balken .name small { color: rgba(255,255,255,.7); }
.kachel.dunkel .mark { color: var(--navy); }
.tabelle { width: 100%; border-collapse: collapse; font-size: calc(var(--s) * 15px); }
.tabelle th { text-align: left; font: 800 calc(var(--s) * 12px) var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-3); padding: 0 12px 10px 0; }
.tabelle td { padding: 12px 12px 12px 0; border-top: 1px solid var(--linie); vertical-align: top; }
.tabelle .z { text-align: right; font-weight: 800; white-space: nowrap; }
.tabelle .kein { color: var(--navy-3); font-weight: 500; }
.tabelle td small { display: block; font-size: calc(var(--s) * 15px); color: var(--navy-2); font-weight: 500; }
@media (max-width: 720px) { .tabelle.stapel thead { display: none; } .tabelle.stapel, .tabelle.stapel tbody, .tabelle.stapel tr { display: block; } .tabelle.stapel td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border-top: 0; padding: 6px 0; text-align: left; } .tabelle.stapel tr { border-top: 1px solid var(--linie); padding: 10px 0; } .tabelle.stapel td::before { content: attr(data-l); font: 800 calc(var(--s) * 12px) var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-3); } .tabelle.stapel td:first-child { font-weight: 800; } }
.brief .anschrift { font-size: calc(var(--s) * 15px); line-height: 1.45; color: var(--navy-2); }
.brief .empf { margin: 22px 0 8px; font-size: calc(var(--s) * 16px); line-height: 1.45; }
.brief .datum { text-align: right; font-size: calc(var(--s) * 15px); color: var(--navy-2); }
.brief .betreff { font-weight: 800; margin: 26px 0 16px; }
.brief .text p + p { margin-top: 12px; }
.brief .unterschrift { width: 260px; max-width: 100%; border-top: 1px solid var(--navy-2); padding-top: 6px; font-size: calc(var(--s) * 13px); color: var(--navy-3); margin-top: 56px; }
.lead { display: grid; grid-template-columns: 1.3fr .5fr .9fr .9fr auto; gap: 14px; align-items: center; }
.lead b { display: block; font-size: calc(var(--s) * 17px); }
.lead .sub { display: block; font-size: calc(var(--s) * 13px); color: var(--navy-2); }
.lead .aktionen { margin-top: 0; }
@media (max-width: 900px) { .lead { grid-template-columns: 1fr 1fr; } .lead .aktionen { grid-column: 1 / -1; } }
@media print { .balken .pill { clip-path: none !important; } body { background: #fff; } .kopf-rahmen, .fuss, aside, .schiene, [data-nur], .nichtdrucken, .platzhalter { display: none !important; } .raster.mitseite, .raster.mitseite.breit { grid-template-columns: 1fr; } .kachel, .brief { border-radius: 0; padding: 0; background: #fff; } .kachel.gross { padding: 0; } }

/* ==========================================================================
   ÜBERGANG · alte Klartext-Klassen in der Kachelsprache. Nur für Seiten, die
   noch nicht umgezogen sind. Jede Regel hier stirbt mit der letzten Seite,
   die ihre Klasse trägt. Liste in Docs/gestaltung.md.
   ========================================================================== */
:root { --tinte: var(--navy); --tinte-2: var(--navy-2); --tinte-3: var(--navy-3); --haar: var(--linie); --feld: var(--grund); --feld-2: var(--flieder); --gruen-dunkel: var(--mint-tief); --gruen-wash: var(--mint); --marker: var(--sand); --fehler-wash: var(--rose); --ecke: 16px; --schmal: 760px; }
main.rahmen { padding-top: 24px; }
.schmal { max-width: var(--schmal); }
.schmal p, .brief p { margin-bottom: .8em; }
.schmal p:last-child { margin-bottom: 0; }
.schmal h1, .schmal h2, .schmal h3, .index h1 { margin-bottom: .35em; }
.lead { color: var(--navy-2); font-size: calc(var(--s) * 18px); max-width: 32em; }
.ueber { display: inline-flex; align-items: center; gap: 8px; font: 800 calc(var(--s) * 12px) var(--font); letter-spacing: .1em; text-transform: uppercase; background: rgba(28,35,64,.08); color: var(--navy); border-radius: 999px; padding: 7px 12px; margin-bottom: 10px; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 32px 0; }
.trenner { border-top: 1px solid var(--linie); margin: 28px 0; }
.btn:not(.navy):not(.weiss):not(.rand):not(.hell):not(.grund) { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn.primary, .btn.koralle { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.primary:hover { background: #0f1430; }
.btn.leise, .btn.leise:hover { background: none; border-color: transparent; color: var(--navy-2); padding-left: 6px; padding-right: 6px; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn .pfeil { width: auto; height: auto; background: none; color: inherit; font-size: calc(var(--s) * 18px); }
.cta-reihe, .knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.link-mark { color: var(--navy); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--gruen); display: inline-block; padding: 6px 0; }
.tin { width: 100%; min-height: 54px; padding: 0 18px; border: 2px solid var(--linie); border-radius: 999px; background: #fff; font: 700 calc(var(--s) * 17px) var(--font); color: var(--navy); outline: none; }
.tin:focus { border-color: var(--navy); }
.tin.fehler { border-color: var(--fehler); }
.tin::placeholder { color: var(--navy-3); font-weight: 500; }
select.tin { padding-right: 44px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231c2340' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center / 14px; }
textarea.tin { min-height: 110px; border-radius: 20px; padding: 14px 18px; font-weight: 500; font-size: calc(var(--s) * 16px); line-height: 1.45; resize: vertical; }
.hinweis { font-size: calc(var(--s) * 15px); background: var(--sand); border-radius: 18px; padding: 14px 18px; margin: 14px 0; }
.fehlerzeile, .fehlertext { color: var(--fehler); font-size: calc(var(--s) * 14px); margin: 6px 0 0; font-weight: 700; }
.einw { display: flex; gap: 12px; align-items: flex-start; font-size: calc(var(--s) * 14px); color: var(--navy-2); margin: 14px 0; }
.einw input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--navy); }
.optionen { display: grid; gap: 8px; margin: 18px 0 8px; }
.option { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; min-height: 60px; padding: 14px 18px; border: 2px solid var(--linie); border-radius: 999px; background: #fff; font: 800 calc(var(--s) * 16px) var(--font); color: var(--navy); cursor: pointer; }
.option:hover { border-color: var(--navy); }
.option[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.option .nr { width: 28px; height: 28px; border-radius: 50%; background: var(--grund); color: var(--navy); font: 800 calc(var(--s) * 13px)/28px var(--font); text-align: center; flex-shrink: 0; }
.option[aria-pressed="true"] .nr { background: var(--mint); }
.option .sub { display: block; font-size: calc(var(--s) * 14px); font-weight: 500; color: var(--navy-2); }
.option[aria-pressed="true"] .sub { color: rgba(255,255,255,.8); }
.grade { margin: 18px 0 8px; }
.grade button small { display: block; font: 800 calc(var(--s) * 11px) var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-3); }
.grade button[aria-pressed="true"] small { color: rgba(255,255,255,.75); }
.grade-kein { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 2px solid var(--linie); border-radius: 999px; padding: 12px 18px; font: 700 calc(var(--s) * 16px) var(--font); background: #fff; min-height: 54px; }
.grade-kein[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.grade-kein a { font-weight: 800; white-space: nowrap; }
button.grade-kein { width: 100%; color: var(--navy); text-align: left; cursor: pointer; }
button.grade-kein:hover { border-color: var(--navy); }
.umschalter { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.umschalter button { font: 800 calc(var(--s) * 14px) var(--font); padding: 0 16px; min-height: 42px; border-radius: 999px; border: 2px solid var(--linie); background: #fff; color: var(--navy); cursor: pointer; }
.umschalter button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.schiene { margin: 22px 0 24px; }
.schritt { animation: rein .24s ease both; }
@keyframes rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .schritt { animation: none; } }
.zurueck { color: var(--navy-2); text-decoration: none; font-weight: 700; display: inline-block; padding: 10px 0; }
.brief:not(.kachel) { background: #fff; border-radius: var(--k); padding: 30px 34px; margin-top: 22px; }
@media (max-width: 720px) { .brief:not(.kachel) { padding: 22px 18px; } }
.brief .kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; font-size: calc(var(--s) * 13px); color: var(--navy-2); }
.brief .kopfzeile .pill { display: inline-flex; font: 800 calc(var(--s) * 12px) var(--font); letter-spacing: .1em; text-transform: uppercase; background: var(--sand); color: var(--navy); border-radius: 999px; padding: 7px 12px; white-space: nowrap; }
.brief .kopfzeile .pill.koralle { background: var(--rose); }
.brief th { text-align: left; font: 800 calc(var(--s) * 12px) var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-3); padding: 0 0 8px; border-bottom: 1px solid var(--linie); }
.brief th:last-child { text-align: right; }
.brief td.frei { white-space: normal; font-weight: 500; text-align: left; }
.brief td .chip, td .chip, .chip.klein { display: inline-block; font: 800 calc(var(--s) * 11px) var(--font); letter-spacing: .06em; background: var(--grund); color: var(--navy); padding: 3px 7px; border-radius: 999px; margin-left: 8px; vertical-align: middle; text-decoration: none; text-transform: none; }
.brief ol { padding-left: 22px; }
.brief li { margin-bottom: 8px; }
.brief-aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.audit { margin-top: 18px; font-size: calc(var(--s) * 14px); }
.audit summary { cursor: pointer; font-weight: 800; font-size: calc(var(--s) * 15px); padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
.audit table { font-size: calc(var(--s) * 14px); }
.schritte3 { display: grid; gap: 10px; margin: 10px 0 22px; }
.schritte3 div { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; background: var(--himmel); border-radius: 18px; padding: 14px 16px; font-weight: 700; font-size: calc(var(--s) * 15px); }
.schritte3 i { font-style: normal; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; font-weight: 800; font-size: calc(var(--s) * 13px); }
.band { background: var(--navy); color: #fff; border-radius: var(--k); padding: 32px 36px; margin: 40px 0; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.band h2, .band h3 { color: #fff; font-size: calc(var(--st) * clamp(24px, 3vw, 34px)); }
.band p { color: rgba(255,255,255,.75); margin: 8px 0 0; }
.band .btn, .band .btn.primary { background: #fff; color: var(--navy); border-color: #fff; }
@media (max-width: 720px) { .band { grid-template-columns: 1fr; padding: 24px 20px; } }
.kasten { background: var(--mint); border-radius: var(--k); padding: 22px 24px; margin: 26px 0; }
.kasten h3 { margin: 0 0 6px; }
.zeilen { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.zeilen.zwei { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .zeilen.zwei { grid-template-columns: 1fr; } }
.zeilen a { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; background: #fff; border-radius: 20px; padding: 14px 18px; min-height: 60px; color: var(--navy); text-decoration: none; font-weight: 800; }
.zeilen a::after { content: '→'; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font-size: calc(var(--s) * 16px); }
.zeilen a:hover::after { background: var(--mint-tief); }
.zeilen .sub { display: block; font-size: calc(var(--s) * 14px); color: var(--navy-2); font-weight: 500; margin-top: 2px; }
.zahlreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 20px 0; }
.zahlreihe div { background: var(--himmel); border-radius: 20px; padding: 14px 16px; }
.zahlreihe b { display: block; font: 800 calc(var(--s) * 26px) var(--font); letter-spacing: -0.04em; line-height: 1.1; }
.zahlreihe span { font-size: calc(var(--s) * 13px); color: var(--navy-2); }
.zahlreihe small { display: block; margin-top: 4px; }
.orte-liste { columns: 3; column-gap: 24px; font-size: calc(var(--s) * 15px); }
.orte-liste a { display: block; padding: 6px 0; color: var(--navy-2); text-decoration: none; }
@media (max-width: 720px) { .orte-liste { columns: 2; } }
.krumen { font-size: calc(var(--s) * 14px); color: var(--navy-3); margin: 6px 0 0; }
.krumen a { color: var(--navy-2); display: inline-block; padding: 8px 0; }
table.tab { width: 100%; border-collapse: collapse; font-size: calc(var(--s) * 15px); }
table.tab th { text-align: left; font: 800 calc(var(--s) * 12px) var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-3); padding: 0 12px 10px 0; }
table.tab td { padding: 12px 12px 12px 0; border-top: 1px solid var(--linie); vertical-align: top; }
table.tab td.zahl, table.tab th.zahl { text-align: right; font-weight: 800; white-space: nowrap; font-size: calc(var(--s) * 15px); letter-spacing: 0; }
.tabelle-scroll { overflow-x: auto; }
.regionen:not(.fuss .regionen) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.regionen:not(.fuss .regionen) a, .regionen:not(.fuss .regionen) span { text-decoration: none; background: #fff; border-radius: 999px; padding: 11px 14px; font-weight: 700; font-size: calc(var(--s) * 14px); min-height: 42px; display: inline-flex; align-items: center; }
.demo-stempel { display: inline-flex; font: 800 calc(var(--s) * 11px) var(--font); letter-spacing: .08em; text-transform: uppercase; background: var(--grund); color: var(--navy); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
/* Titelpaar: das Foto füllt die Kachel, ohne die Zeile höher zu machen; lange Titel bleiben in der Kachel. */
.heldenpaar .kachel.foto img { position: absolute; inset: 0; }
.heldenpaar h1 { font-size: calc(var(--st) * clamp(30px, 4.2vw, 52px)); overflow-wrap: anywhere; }
@media (max-width: 720px) { .tabelle.stapel td:first-child { display: block; } }
/* Werkzeugzeilen im Fuß der Startseite: je Gruppe ein Chip und Pillen. */
.fuss .werkzeuge { display: grid; gap: 14px; margin-top: 22px; }
.fuss .werkzeuge > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fuss .werkzeuge .regionen { margin-top: 0; }

/* Kartenkacheln (Betreuungsseite, Seitenspalte der Ortsseiten): weiße Kachel, die Karte füllt sie, Text darunter. */
.kachel.karte { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.kachel.karte .karte-bild { flex: 1; display: flex; align-items: center; min-height: 240px; }
.kachel.karte .karte-svg { display: block; width: 100%; height: auto; }
.kachel.karte .karte-text { padding: 18px 22px 22px; }
.kachel.karte .karte-quelle { font-size: calc(var(--s) * 12px); color: var(--navy-3); margin-top: 12px; line-height: 1.4; }
.kachel.karte.deutschland .karte-bild { min-height: 0; }
.kachel.karte.deutschland .karte-svg { max-height: 420px; }
.raster.standort { margin-bottom: 14px; align-items: stretch; }
.raster.standort .kachel.karte .karte-bild { min-height: 300px; }
.orte-zeile { font-size: calc(var(--s) * 15px); line-height: 2; }
.orte-zeile a { font-weight: 700; padding: 6px 0; }
.plz-suche .zeile { display: flex; gap: 8px; margin-top: 8px; }
.plz-suche .zeile input { flex: 1; min-width: 0; }
.plz-antwort { margin-top: 12px; font-size: calc(var(--s) * 16px); min-height: 0; }
.plz-antwort a { font-weight: 800; padding: 8px 0; display: inline-block; }
@media (max-width: 900px) { .kachel.karte.deutschland .karte-svg { max-height: 380px; } .raster.standort .kachel.karte .karte-bild { min-height: 220px; } }

/* Betreuungsseite: je Region eine Kachel, die Büros als Zeilen (Name, Adresse, Nummer als Pille). */
.bueros { display: grid; gap: 4px; }
.buero { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.buero:last-child { border-bottom: 0; }
.buero .wer { display: grid; gap: 2px; min-width: 0; }
.buero .wer b { font-size: calc(var(--s) * 18px); letter-spacing: -0.02em; }
.buero .wer a { text-decoration: none; }
.buero .btn { flex-shrink: 0; }
@media (max-width: 600px) { .buero { display: grid; grid-template-columns: 1fr; gap: 8px; } .buero .btn { justify-self: start; } }
/* Zusatzkacheln unter der Werkzeugkachel (Pflegegrad-Einschätzung, Antrag): erst sichtbar, wenn das Ergebnis steht. */
.mehr-kacheln:not([hidden]) { display: grid; gap: 14px; }
.kachel.sand .balken .pill, .balken .pill.weiss { background: #fff; color: var(--navy); }
.kachel.sand .balken .pill.mint { background: var(--mint); color: var(--mint-tief); }
/* Aufklappbares (details): die Zeile zeigt, dass sie sich öffnet. */
details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '+'; margin-left: auto; font-weight: 800; font-size: calc(var(--s) * 20px); line-height: 1; padding-left: 12px; }
details[open] > summary::after { content: '–'; }

/* Runde vier: Häufige Fragen als Kachel. Jede Frage eine beige Zeile zum Aufklappen, keine Trennlinien.
   Aufbau: <div class="kachel fragen"><span class="chip">Häufige Fragen</span><h2>…</h2><div class="liste">
   <details class="frage"><summary>Frage?</summary><p>Antwort.</p></details>…</div></div>
   Dazu je Seite das FAQPage-JSON-LD mit denselben Texten. */
.kachel.fragen { display: grid; gap: 14px; }
.kachel.fragen > .chip { justify-self: start; }
/* details.frage heißt wie die Frage der Fragebögen (.frage); hier gilt der ruhige Text, nicht die Überschrift. */
.fragen .frage { font: 500 calc(var(--s) * 17px)/1.55 var(--font); letter-spacing: normal; margin: 0; }
/* Am Schreibtisch steht die Überschrift links, die Fragen rechts: die Kachel bleibt kurz. */
@media (min-width: 901px) {
  .kachel.fragen { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 36px; align-content: start; }
  .kachel.fragen > .chip { grid-column: 1; grid-row: 1; align-self: start; }
  .kachel.fragen > h2 { grid-column: 1; grid-row: 2; align-self: start; }
  .kachel.fragen > .liste { grid-column: 2; grid-row: 1 / span 3; }
}
.kachel.fragen h2 { font-size: calc(var(--st) * clamp(26px, 3vw, 38px)); }
.fragen .liste { display: grid; gap: 8px; }
.fragen .frage { background: var(--grund); border-radius: 20px; padding: 0 22px; }
.fragen .frage > summary { font-weight: 800; font-size: calc(var(--s) * 18px); letter-spacing: -0.01em; line-height: 1.3; padding: 16px 0; min-height: 56px; cursor: pointer; display: flex; align-items: center; }
.fragen .frage > p { padding: 0 0 18px; color: var(--navy-2); max-width: 64ch; }
.fragen .frage > p + p { margin-top: -6px; }

/* Runde vier: Fotokachel in einer Seitenspalte (Werkzeuge). Das Bild ergänzt, der Satz steht auf dem Verlauf. */
.kachel.foto.seitenfoto { min-height: 300px; }
.kachel.foto.seitenfoto img { position: absolute; inset: 0; }
@media (max-width: 900px) { .kachel.foto.seitenfoto { min-height: 240px; } }
@media print { .kachel.foto.seitenfoto { display: none !important; } }

/* ==========================================================================
   RUNDE FÜNF · Politur (Entscheidungen Lucas 24.09., https://claude.ai/artifact/DiYBbmN8JYkcyriLjCH92N).
   Titel- und Zahlstufen, Farbrollen, Hover, der helle Fuß, Seitenspalte, Bereichspillen, „Ihr Stand“.
   ========================================================================== */
/* Titelstufen und Zahlstufen: jede Überschrift und jede große Zahl nimmt eine davon, keine eigene Größe. */
.t1 { font-size: calc(var(--st) * var(--t1)); letter-spacing: -0.035em; } .t2 { font-size: calc(var(--st) * var(--t2)); letter-spacing: -0.035em; }
.t3 { font-size: calc(var(--st) * var(--t3)); } .t4 { font-size: calc(var(--st) * var(--t4)); letter-spacing: -0.025em; line-height: 1.1; }
.t5 { font-size: calc(var(--st) * var(--t5)); letter-spacing: -0.02em; line-height: 1.12; } .t6 { font-size: calc(var(--st) * var(--t6)); letter-spacing: -0.02em; line-height: 1.15; }
.zahl.z1 { font-size: calc(var(--st) * var(--z1)); } .zahl.z2 { font-size: calc(var(--st) * var(--z2)); } .zahl.z3 { font-size: calc(var(--st) * var(--z3)); } .zahl.z4 { font-size: calc(var(--st) * var(--z4)); }

/* Chips brechen am Schreibtisch nie (r5-system-24); auf dem Handy dürfen lange Chips umbrechen statt überzulaufen. */
.chip { flex-shrink: 0; }
@media (min-width: 601px) { .chip { white-space: nowrap; } }
.chip.mint { background: var(--mint); color: var(--mint-tief); }

/* Farbrollen (r5-farbrollen): Titelkacheln weiß; Zahlkacheln Grund-Beige (in weißen Kacheln), der Entlastungsbetrag
   helles Sand (.mint), die eine Hauptzahl einer Seite Sand (.sand); der empfohlene Weg Sand, sonst weiß. Himmel und
   Rosé nicht mehr auf Besucherseiten, Flieder nur für Vorschau. */
.kachel.beige { background: var(--grund); }

/* Hover für alles Verlinkte (r5-system-07): Kachel-Links färben den Pfeil Sand mit Navy-Zeichen und unterstreichen den Titel. */
a.kachel, .artikel, a.weg { transition: background var(--zeit); }
a.kachel:hover .pfeil, .artikel:hover .pfeil, .weg:hover .pfeil, .weiterlink:hover .pfeil { background: var(--sand); color: var(--navy); }
a.kachel:hover :is(h2, h3, .titel), .artikel:hover h3, a.weg:hover .was { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fragen .frage > summary:hover, .regionen a:hover, .tel:hover { background: var(--flieder); }
.fragen .frage > summary:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.kachel.dunkel .btn.weiss:hover { background: rgba(255,255,255,.85); }
.btn:disabled, .btn[disabled] { opacity: var(--gesperrt); cursor: default; }

/* Eine Quellenzeile (r5-system-10): überall gleich, ohne Linie, Links unterstrichen. .quellen.klein ist die Lizenzzeile der Karten. */
.quellen { font-size: calc(var(--s) * 13px); color: var(--navy-3); line-height: 1.5; margin-top: 22px; }
.quellen a { padding: 4px 0; display: inline; text-decoration: underline; text-underline-offset: 3px; }
.quellen.klein { font-size: calc(var(--s) * 12px); margin-top: 12px; }
.lesen .quellen, .lesen p.quellen { font-size: calc(var(--s) * 13px); line-height: 1.5; }

/* Eine Hinweiszeile unter der Werkzeugkachel (r5-spalte): Datenschutz- und Gerätehinweise stehen hier, nicht in der Seitenspalte. */
.hinweiszeile { margin: 14px 0 0; padding: 0 24px; font-size: calc(var(--s) * 14px); font-weight: 700; color: var(--navy-2); }
.hinweiszeile a { padding: 9px 0; display: inline-block; }
@media (max-width: 720px) { .hinweiszeile { padding: 0 6px; } }

/* Klebende Ergebniskachel neben einer Eingabekachel (Rechner, r5-system-26); kacheln.js hält sie im Fenster. */
.raster > .klebt { position: sticky; top: 90px; align-self: start; }
@media (max-width: 900px) { .raster > .klebt { position: static; } }

/* Die Kopie der dunklen Kachel für das Handy (Leseseiten), vorher je Seite im Generator. */
.nur-handy { display: none; }
/* Nur Seiten mit Kopie (.nur-handy, Leseseiten) blenden die dunkle Kachel der Spalte aus; Werkzeuge behalten sie. */
@media (max-width: 900px) { .nur-handy { display: block; } .mitseite:has(.nur-handy) aside .kachel.dunkel { display: none; } }
@media print { .nur-handy { display: none !important; } }

/* Fotokacheln in festen Formen (r5-system-08): Seitenfoto 300, Paar- und Hubfoto 240, verlinkte Fotokachel mit Pfeil. */
.kachel.foto.paar { height: 240px; }
.kachel.foto.paar img { position: absolute; inset: 0; }
a.kachel.foto { display: block; text-decoration: none; color: #fff; }
.kachel.foto .darauf .chip { background: #fff; margin-bottom: 10px; }
.kachel.foto .darauf .pfeil { position: absolute; right: 20px; bottom: 22px; background: #fff; color: var(--navy); }
.kachel.foto .darauf:has(.pfeil) { padding-right: 70px; }

/* Seitenspalte (r5-spalte, SEITE.seitenspalte): dunkel, eine Kontextkachel, „Lieber anrufen?“ immer zuletzt und gleich hoch. */
.kachel.anrufen p { margin-top: 12px; font-weight: 700; }
.kachel.anrufen .btn { margin-top: 12px; }
.kachel.dunkel .aktionen { margin-top: 18px; }
.kachel.dunkel > .chip + h2 { margin-top: 12px; } .kachel.dunkel > h2 + .satz { margin-top: 8px; }

/* Der Fuß ist hell (r5-dunkel): PflegeUpdate als weiße Kachel mit Chip, Feld mit Rand, Navy-Pille. */
.abo > div > .chip { margin-bottom: 12px; }
.abo .satz { margin-top: 8px; }
.abo .fehlertext { flex-basis: 100%; }
.abo form { flex-wrap: wrap; align-items: flex-start; }
.abo .danke { font-weight: 700; color: var(--mint-tief); }
.fuss .zeile2 button.leise { font-size: calc(var(--s) * 13px); padding: 10px 0; min-height: 0; color: var(--navy-2); text-decoration: underline; text-underline-offset: 3px; }

/* Bereichspillen unter der Kopfpille (r5-navigation): nur am Schreibtisch; auf dem Handy führt das Menü. */
.bereiche { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.bereiche a { text-decoration: none; background: #fff; border-radius: 999px; padding: 0 16px; min-height: 42px; display: inline-flex; align-items: center; font: 700 calc(var(--s) * 14px) var(--font); color: var(--navy); }
.bereiche a:hover { background: var(--flieder); }
.bereiche a[aria-current="page"] { background: var(--navy); color: #fff; }
@media (max-width: 900px) { .bereiche { display: none; } }

/* „Ihr Stand“ (r5-stand B): eine weiße Pille im Kopf, nur wenn etwas begonnen ist; sie öffnet ein Feld mit bis zu vier Zeilen. */
.stand-pille { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--linie); background: #fff; color: var(--navy); font: 800 calc(var(--s) * 14px) var(--font); cursor: pointer; white-space: nowrap; }
.stand-pille:hover, .stand-pille[aria-expanded="true"] { border-color: var(--navy); }
.stand-pille .zahl-klein { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--sand); font-size: calc(var(--s) * 12px); padding: 0 6px; }
.kopf-rechts { position: relative; }
.stand-feld { position: absolute; right: 0; top: calc(100% + 14px); width: 380px; max-width: calc(100vw - 28px); background: #fff; border-radius: var(--k); padding: 20px; border: 2px solid var(--linie); display: grid; gap: 8px; z-index: 50; }
.stand-feld > .chip { justify-self: start; margin-bottom: 6px; }
.stand-posten { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; background: var(--grund); border-radius: 20px; padding: 12px 14px 12px 16px; text-decoration: none; color: var(--navy); min-height: 60px; }
.stand-posten:hover { background: var(--flieder); }
.stand-posten .chip { grid-column: 1; justify-self: start; padding: 4px 9px; font-size: calc(var(--s) * 11px); background: #fff; }
.stand-posten .chip.offen { background: var(--navy); color: #fff; }
.stand-posten .chip.mint { background: var(--mint); }
.stand-posten b { grid-column: 1; font-size: calc(var(--s) * 15px); line-height: 1.35; }
.stand-posten .pfeil { grid-column: 2; grid-row: 1 / span 2; }
.stand-feld .leise { justify-self: start; }
@media (max-width: 900px) { .kopf-rechts .stand-pille { display: none; } }
/* Auf dem Handy steht der Stand als Gruppe im offenen Menü, über „Außerdem“. */
.nav .stand-gruppe { display: none; }
@media (max-width: 900px) { .kopf.offen .nav .stand-gruppe { display: grid; gap: 6px; padding: 8px 12px 4px; } .kopf.offen .nav .stand-gruppe .chip { justify-self: start; } .kopf.offen .nav .stand-gruppe a.stand-posten { padding: 12px 14px; font-size: calc(var(--s) * 15px); } }

/* Weitermachen (r5-stand A): der Stand in der Einstiegskachel der Startseite und als schmale Zeile auf den Hubs. */
.stand-held { display: grid; gap: 14px; align-content: start; }
.stand-held > .chip { justify-self: start; }
.stand-held .schiene { margin: 0; }
.stand-held .zahl { margin: 0; }
.stand-held .aktionen { margin-top: 4px; }
.stand-held .stand-tel { font-weight: 700; color: var(--navy-2); }
.stand-held .stand-tel a { font-weight: 800; color: var(--navy); padding: 9px 0; display: inline-block; }
.stand-unten { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: -10px; }
.kachel.merken .merken-satz { margin-top: 10px; font-weight: 700; }
.kachel.merken .aktionen { margin: 0; }
.kachel.merken.stand-zeile { margin-bottom: 14px; }

/* Druck ohne Hintergrundgrafik (r5-lesen-36): Balken und Schrittkacheln behalten ihre Flächen, die Rechnung druckt nicht. */
@media print { .balken .pill, .kachel.himmel, .schritte3 div, .kachel.mint, .kachel.sand, .kachel.beige { -webkit-print-color-adjust: exact; print-color-adjust: exact; } details.audit { display: none; } .bereiche, .stand-feld { display: none !important; } }
@media (prefers-reduced-motion: reduce) { a.kachel, .artikel, a.weg { transition: none; } }
/* Die Kopfzeile wächst mit der Großschrift nicht mit (Zeichen, Telefon, Menü müssen bei 390 in eine Pille passen). */
html.gross .kopf { --s: 1; }
@media (max-width: 900px) { html.gross .kopf.offen .nav { --s: 1.18; } }
/* Enge Schreibtische (901 bis 1180 px): „Ihr Stand“ zeigt nur die Zahl, die Bereiche rücken zusammen, damit die Kopfpille nie bricht. */
@media (max-width: 1180px) { .stand-pille .wort { display: none; } .stand-pille { padding: 0 10px; } }
@media (max-width: 1100px) { .nav a { padding: 10px 8px; } .nav { gap: 2px; } }
@media (max-width: 1023px) and (min-width: 901px) { .nav a { font-size: calc(var(--s) * 14px); padding: 10px 6px; } .logo { font-size: 19px; gap: 8px; } .kopf { gap: 8px; } .kopf-rechts { gap: 5px; } .tel { padding: 10px 11px; } }
/* Anfragen der Lanes, Runde fünf (Bau) */
a.kachel.sand:hover .pfeil, a.weg.sand:hover .pfeil { background: #fff; color: var(--navy); }
/* Die Frage über den Pflegegrad-Feldern (PflegeCheck, Rechner, r5-werkzeuge-05). */
.grad-frage { font-weight: 800; color: var(--navy); margin: 16px 0 0 6px; }
label.feld .fehlertext:not([hidden]) { display: block; margin: 6px 0 0 6px; }
/* Grund-Pille in Pillenlisten (Orte in der Nähe, Suche-Übersicht). */
.btn.grund { background: var(--grund); color: var(--navy); }
.btn.grund:hover { background: var(--flieder); }
.heldenpaar + .mitseite, .heldenpaar + .abschnitt.raster { margin-top: 14px; }
.artikel > .chip { margin: 14px 6px 0; align-self: flex-start; }
.artikel > .chip + h3 { margin-top: 10px; }
/* Verlinkte Listenkachel (Hubs): Text oben, Pfeil unten rechts. */
.kachel.liste { text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; }
.kachel.liste > .pfeil { margin-top: 12px; align-self: flex-end; }
.schritte3 div { background: var(--grund); }
.grade + .grade-kein { margin: -2px 0 22px; }
/* Absatz einer Kontextkachel in der Seitenspalte. */
.mitseite aside .kachel > .chip + p { margin-top: 12px; font-weight: 700; }
/* Zahlkacheln: lange Bezeichnungen trennen statt überzulaufen (Großschrift, drei Spalten). */
.zahl small { hyphens: auto; overflow-wrap: break-word; }
/* Weitermachen-Zeile in der Seitenspalte: schmale Form, der Rasterabstand genügt. */
.mitseite aside .stand-zeile { margin-bottom: 0; padding: 14px 18px; }
.mitseite aside .stand-zeile .merken-satz { font-size: calc(var(--s) * 15px); margin-top: 8px; }
/* Pflegegrad-Wahl mit „Noch keiner“ (Runde fünf, r5-hubs-02, r5-zahl): ein sechstes Feld vor den fünf Graden, in derselben
   Gruppe ([data-grade-wahl], data-pg="0"), gewählt wird Navy wie jedes Feld. Gilt überall, wo ein Pflegegrad gewählt wird
   (Startseite, Leistungen, Ortsseiten, Rechner mit „Noch keiner“). */
.grade.sechs { grid-template-columns: 1.8fr repeat(5, 1fr); margin: 18px 0 22px; }
.grade.sechs [data-pg="0"] { font-size: calc(var(--s) * 17px); }
@media (max-width: 600px) { .grade.sechs { grid-template-columns: repeat(5, 1fr); } .grade.sechs [data-pg="0"] { grid-column: 1 / -1; height: 54px; } }

/* Schrittbaustein (r5-werkzeuge-10): Mehrfachwahl sieht anders aus als Einfachwahl. In einer Gruppe mit data-mehrfach wird der
   Ziffernkreis ein 24-px-Kästchen, gewählt helles Sand mit Haken; Einfachwahl behält die Ziffer und geht selbst weiter. */
[data-mehrfach] .pille .nr { border-radius: 6px; width: 24px; height: 24px; background: #fff; border: 2px solid var(--linie); color: transparent; font-size: 0; position: relative; line-height: 20px; }
[data-mehrfach] .pille[aria-pressed="true"] .nr { background: var(--mint); border-color: var(--mint); }
[data-mehrfach] .pille[aria-pressed="true"] .nr::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 calc(var(--s) * 15px)/1 var(--font); color: var(--navy); }
/* Nur im Druck (Vorlagen, Brief): Anleitung und Druckzeilen, am Bildschirm aus. */
.nur-druck { display: none; }
@media print { .nur-druck { display: block; } }
/* Lange Antwortlisten der Schritt-Werkzeuge (Wobei, Kasse) am Schreibtisch in zwei Spalten, damit Frage und Weiter auf einen Bildschirm passen. */
@media (min-width: 721px) { .pillen.zwei { display: grid; grid-template-columns: 1fr 1fr; } }
/* Anfragen der Seiten-Lanes, Paket 3 */
/* Nummerierte Liste im Lesetext (liste im Inhaltsmodell): Zeilen wie der Ablauf, ohne Kästchen. */
ol.ablauf { list-style: none; padding: 0; display: grid; gap: 8px; margin: 14px 0 22px; }
ol.ablauf .posten { cursor: default; min-height: 0; }
/* Fünf Kacheln in einer Reihe (Pflegegrade im Geld-Hub); schmal zwei Spalten, die letzte über die volle Breite. */
.raster.fuenf { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .raster.fuenf { grid-template-columns: 1fr 1fr; } .raster.fuenf > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Was auf dem Handy entfällt (etwa der Landesname in einer Pille). */
@media (max-width: 600px) { .nur-breit { display: none; } }
/* „Dazu passt“ vor der dunklen Kachel eines Hubs: Chip, dann drei weiße Pillen. */
.dazu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dazu > .chip { margin-right: 6px; }
@media (max-width: 600px) { .dazu .btn { white-space: normal; max-width: 100%; text-align: left; padding-top: 10px; padding-bottom: 10px; } }
/* Fehler an einem Kästchen (Schranke, PflegeUpdate) und der Text darunter; ein falsches Feld in einer .zeile. */
label.wahl input[aria-invalid="true"] { outline: 2px solid var(--fehler); outline-offset: 2px; }
label.wahl + .fehlertext { margin: -4px 0 8px 34px; }
.pillen + .fehlertext { margin: 6px 0 0 6px; }
.zeile input.fehler { border-color: var(--fehler); }
/* Rechtsseiten (Impressum, Datenschutz): je Abschnitt eine Kachel, davor die Sprungzeile aus weißen Pillen. */
.rechtsseite { display: grid; gap: 14px; align-content: start; }
.rechtsseite > .kachel, .rechtsseite h3[id] { margin: 0; scroll-margin-top: 90px; }
.rechtsseite h3[id] { margin-top: 22px; }
.rechtsseite h2:first-child { margin-top: 0; }
.rechtsseite > .kachel p { font-size: calc(var(--s) * 18px); }
.rechtsseite ul { margin: 10px 0; }
.sprung { display: flex; flex-wrap: wrap; gap: 8px; }
/* Der erste Inhalt einer Lesekachel steht an der Kante wie in jeder großen Kachel. */
.lesen > :first-child { margin-top: 0; }
/* Druck des Briefs (r5-lesen-36): das Zahlfeld behält Luft, drei Schritte bleiben nebeneinander, Überschriften bleiben bei ihrem Inhalt. */
@media print { .brief .raster.drei { grid-template-columns: repeat(3, 1fr); } .brief .raster.drei > .kachel { break-inside: avoid; } .brief h2, .brief .weiter-titel { break-after: avoid; page-break-after: avoid; } .brief .kachel.sand { padding: 18px 20px; } }

/* Beratung anfragen (27.09., Michael 24.09.: „immer einen Klick von der Beratung entfernt“). Die Navy-Pille im Kopf ersetzt
   die PflegeCheck-Pille und öffnet ein weißes Blatt (beratung.js): am Schreibtisch rechts unter dem Kopf, auf dem Handy über die
   ganze Breite am unteren Rand. Kein Schatten, ein Rand wie das Feld „Ihr Stand“; Großschrift wirkt im Blatt (es liegt nicht im Kopf). */
.beratung-knopf .kurz { display: none; }
@media (max-width: 1100px) { .beratung-knopf .lang { display: none; } .beratung-knopf .kurz { display: inline; } }
/* Mit „Beratung anfragen“ zeigt „Ihr Stand“ nur die Zahl (wie unter 1180 px), sonst bricht die Kopfpille bei 1180 um 20 px. */
.kopf-rechts.mit-beratung .stand-pille .wort { display: none; }
.kopf-rechts.mit-beratung .stand-pille { padding: 0 10px; }
.beratung-blatt { position: fixed; z-index: 60; top: 90px; right: max(16px, calc((100vw - var(--breit)) / 2)); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 2px solid var(--linie); border-radius: var(--k); padding: 20px 24px 24px; display: grid; gap: 12px; align-content: start; }
.beratung-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.beratung-kopf .leise { margin-right: -10px; flex-shrink: 0; }
.beratung-blatt p { margin: 0; }
.beratung-satz { color: var(--navy-2); font-size: calc(var(--s) * 15px); }
.beratung-bekannt { font-weight: 700; font-size: calc(var(--s) * 15px); }
.beratung-budget { font-weight: 700; }
.beratung-vorab { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; background: var(--grund); border-radius: 16px; }
.beratung-vorab p { font-weight: 700; font-size: calc(var(--s) * 15px); }
.beratung-vorher { color: var(--mint-tief); font-weight: 700; font-size: calc(var(--s) * 14px); }
.beratung-blatt label.feld > span small { display: inline; margin-left: 6px; }
.beratung-blatt form { display: grid; gap: 10px; margin-top: 2px; }
.beratung-blatt label.feld, .beratung-blatt label.wahl { margin: 0; }
.beratung-blatt label.wahl + .fehlertext { margin: 4px 0 0 34px; }
.beratung-einw { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font-size: calc(var(--s) * 14px); color: var(--navy-2); font-weight: 700; }
.beratung-link { background: none; border: 0; padding: 9px 0; font: 700 calc(var(--s) * 14px) var(--font); color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-block; }
.beratung-blatt .aktionen { margin: 2px 0 0; gap: 8px 18px; }
.beratung-fehler { color: var(--fehler); font-weight: 700; font-size: calc(var(--s) * 14px); }
.beratung-fehler a { display: inline-block; padding: 9px 0; color: var(--navy); font-weight: 800; }
@media (max-width: 600px) { .beratung-blatt { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: 22px; padding: 16px 18px 20px; } }
@media print { .beratung-blatt { display: none !important; } }
/* Die Budget-Kachel der Seitenspalte (kennt das Gerät einen Pflegegrad): weiß, die Pille als Rand, Navy bleibt der dunklen Kachel. */
.kachel.beratung-hinweis .aktionen { margin-top: 14px; }
/* Im offenen Menü (Handy): „Beratung anfragen“ Navy, „PflegeCheck starten“ als Rand-Pille, beide gleich groß. */
@media (max-width: 900px) { .kopf.offen .nav .btn.mehr { min-height: 48px; padding: 0 20px; font-size: calc(var(--s) * 16px); } .kopf.offen .nav .btn.mehr + .btn.mehr { margin-top: 0; } }