/* Starter „Tierarztpraxis Thamsen“ · Rezept tierarztpraxis · Stand 05.11.2026
   Leitidee „Die Karteikarte“: Jedes Tier hat bei uns eine eigene Karte. Die Seite ist ein Karteikasten,
   jede Seite eine Karte mit Reiter an eigener Stelle, jedes Kapitel eine Karte dahinter.
   Alle Werte aus tokens.css (Rezept) und dem markierten Block darunter. Bewegung nach der Partitur:
   150 ms Farbe, 300 ms öffnen und Seitenwechsel, 200 ms schließen, eine Kurve (--ease), nichts beim Scrollen. */

/* ------------------------------------------------------------------ Grund */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
:root { interpolate-size: allow-keywords; color-scheme: light; }
html { font-variant-numeric: lining-nums; background: var(--farbe-grund); color: var(--farbe-text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font: 400 1.0625rem/var(--zeilenhoehe-text) var(--schrift-text); min-height: 100svh; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
p, li, dd, td { text-wrap: pretty; hyphens: auto; }
.kapitel-reiter, .seitenreiter, .kasten-reiter, .themen, .wahl { hyphens: none; }
h1, h2, h3, h4 { text-wrap: balance; hyphens: manual; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-thickness var(--dauer-klein) var(--ease); }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); border-radius: 4px; }
main:focus { outline: none; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tab { font-variant-numeric: lining-nums tabular-nums; }
.nowrap { white-space: nowrap; }
.leise { color: var(--farbe-leise); font-size: .9375rem; }
.label { font: 600 .9375rem/1.3 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase; }
.rahmen { width: 100%; max-width: var(--raster-max); margin-inline: auto; padding-inline: var(--raster-rand); }
.ph { hyphens: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: color-mix(in srgb, currentColor 9%, transparent); border-bottom: 1.5px dotted currentColor; padding: 0 .2em; border-radius: 3px; font-variant-numeric: lining-nums tabular-nums; }
.ic { width: 20px; height: 20px; flex: none; }
.pfeil { width: 24px; height: 14px; flex: none; }

h1 { font: 400 var(--h1-seite)/1.05 var(--schrift-headline); letter-spacing: -.015em; }
h2 { font: 400 var(--h2)/1.1 var(--schrift-headline); letter-spacing: -.01em; }
h2 em, h1 em { font-style: normal; color: var(--farbe-leise); }
h3 { font: 600 var(--h3)/1.25 var(--schrift-text); letter-spacing: -.005em; }
h4 { font-size: 1rem; }
.lead { font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; max-width: 46ch; }

/* ------------------------------------------------------------------ Sprunglinks, Hinweisleiste */
.sprung a { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--farbe-text); color: var(--farbe-grund); padding: 10px 16px; border-radius: var(--radius-klein); font-weight: 600; }
.sprung a:focus { top: 12px; }
.hinweisleiste { background: var(--farbe-dunkel); color: var(--farbe-tanne-hell); text-align: center; padding: 10px var(--raster-rand); font-weight: 500; }
.hinweisleiste a { color: #fff; }

/* ------------------------------------------------------------------ Kopf */
.kopf { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--farbe-grund) 94%, transparent); backdrop-filter: blur(8px); view-transition-name: kopf; }
.kopf-innen { display: flex; align-items: center; gap: 12px 20px; min-height: 72px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; color: var(--farbe-dunkel); }
.marke-zeichen { width: 36px; height: 32px; }
.marke-text { display: grid; line-height: 1.05; }
.marke-name { font: 400 1.625rem/1 var(--schrift-headline); letter-spacing: -.01em; color: var(--farbe-text); }
.marke-zusatz { font-size: .875rem; color: var(--farbe-leise); margin-top: 3px; }
.hauptnav ul { list-style: none; padding: 0; display: flex; gap: 0; }
.hauptnav li { hyphens: none; }
.nav-link { display: block; padding: 10px 9px; white-space: nowrap; hyphens: none; text-decoration: none; font-weight: 500; border-radius: var(--radius-klein); }
.nav-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav-link:hover { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 8px; }
.kopf-notfall { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: var(--radius-klein); background: var(--farbe-dunkel); color: #fff; font-weight: 600; text-decoration: none; }
.kopf-notfall:hover { background: #1A332E; }
.erreichbar { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.erreichbar-text { display: grid; line-height: 1.2; font-size: .875rem; color: var(--farbe-leise); }
.erreichbar-text b { white-space: nowrap; font-size: 1rem; color: var(--farbe-text); font-weight: 600; }
.erreichbar:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--farbe-leise); flex: none; }
[data-offen="ja"] .punkt, .punkt[data-offen="ja"] { background: #2F7A4F; box-shadow: none; }
[data-offen="bald"] .punkt { background: var(--farbe-signal); box-shadow: none; }
.kopf-menue { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--farbe-leise); border-radius: var(--radius-klein); background: transparent; font-weight: 600; cursor: pointer; }
@media (max-width: 1320px) { .erreichbar-text span { display: none; } }
@media (max-width: 1060px) { .erreichbar { display: none; } }
@media (max-width: 959px) {
  .hauptnav { display: none; }
  .kopf-menue { display: inline-flex; }
  .kopf-innen { min-height: 64px; gap: 10px; }
}
@media (max-width: 599px) {
  .kopf .kopf-termin { display: none; }
  .marke-zusatz { font-size: .8125rem; }
  .marke-zeichen { width: 30px; height: 27px; }
  .marke-name { font-size: 1.375rem; }
}
@media (max-width: 359px) { .kopf-notfall span, .kopf-menue span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .kopf-notfall, .kopf-menue { padding: 10px; } }

/* ------------------------------------------------------------------ Knöpfe (fuellung-vom-eintrittspunkt basis, pfeil-icon-button linie) */
.knopf { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--radius-button); background: var(--button-farbe); color: #fff; font: 600 1rem/1.2 var(--schrift-text); text-decoration: none; cursor: pointer; transition: scale var(--dauer-klein) var(--ease); }
.knopf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--farbe-signal-dunkel); clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path var(--dauer-hover-aus) var(--ease-aus); }
.knopf-zweit { background: transparent; color: var(--farbe-text); box-shadow: inset 0 0 0 1px var(--farbe-leise); }
.knopf-zweit::before { background: var(--farbe-flaeche); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover::before { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); transition: clip-path var(--dauer-fuellung) var(--ease-karte); }
}
.knopf:focus-visible::before { clip-path: circle(150% at 50% 50%); transition: none; }
.knopf:active { scale: .97; }
.knopf[disabled] { background: #CFC9BE; color: #4A4F4B; cursor: not-allowed; }
.knopf[disabled]::before { display: none; }
.knopf[aria-busy="true"] .knopf-text::after { content: ' …'; }
.textlink { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; min-height: 44px; }
.textlink span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; transition: text-decoration-thickness var(--dauer-klein) var(--ease); }
.textlink .pfeil { transition: translate var(--dauer-hover-aus) var(--ease-aus); }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover span { text-decoration-thickness: 2.5px; }
  .textlink:hover .pfeil { translate: 4px 0; transition: translate var(--dauer-hover-ein) var(--ease-ein); }
}
.link-knopf { background: none; border: 0; padding: 6px 0; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-weight: 500; }
.link-knopf[aria-pressed="true"] { font-weight: 700; }
.knopf-hafer { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 22px 10px 18px; border-radius: var(--radius-klein); background: var(--farbe-grund); color: var(--farbe-text); font-weight: 600; text-decoration: none; transition: background-color var(--dauer-klein) var(--ease); }
.knopf-hafer:hover { background: #fff; }
.knopf-hafer .ic { width: 22px; height: 22px; color: var(--farbe-signal); }
.knopf-hafer > span { display: grid; line-height: 1.25; }
.knopf-hafer small { font-weight: 500; font-size: .9375rem; color: var(--farbe-leise); }

/* ------------------------------------------------------------------ Karteikarte und Reiter (Leitidee) */
/* Stelle eines Reiters: über die Breite des Rahmens in neun Schritten verteilt */
.karte, .kapitel { --reiter-links: calc(max(0px, (100% - var(--raster-max)) / 2) + var(--raster-rand) + var(--pos, 0) * (min(100%, var(--raster-max)) - 2 * var(--raster-rand) - var(--reiter-breite)) / 9); }
.karte { position: relative; background: var(--farbe-karte); margin-top: calc(var(--reiter-hoehe) + 14px); border-radius: var(--radius-gross) var(--radius-gross) 0 0; }
.seitenreiter, .kapitel-reiter { position: absolute; bottom: 100%; left: var(--reiter-links); width: var(--reiter-breite); height: var(--reiter-hoehe); display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--farbe-karte); border-radius: 12px 12px 0 0; white-space: nowrap; overflow: hidden; }
/* weiche Übergänge an den Fußpunkten des Reiters */
.seitenreiter::before, .seitenreiter::after, .kapitel-reiter::before, .kapitel-reiter::after { content: none; }
.seitenreiter { view-transition-name: reiter; font-weight: 600; z-index: 2; }
.reiter-nr { font: 700 .9375rem/1 var(--schrift-text); color: var(--farbe-signal-text); }
.reiter-wort { overflow: hidden; text-overflow: ellipsis; font-size: .9375rem; }
.kapitel { position: relative; background: var(--kbg, var(--farbe-grund)); margin-top: calc(-1 * var(--radius-gross)); border-radius: var(--radius-gross) var(--radius-gross) 0 0; padding-block: calc(var(--raum-sektion) * .62 + var(--radius-gross)) var(--raum-sektion); }
.kapitel + .kapitel, .karte + .kapitel { margin-top: calc(var(--reiter-hoehe) - var(--radius-gross)); }
.kapitel-reiter { width: auto; min-width: var(--reiter-breite); max-width: calc(100% - var(--reiter-links) - 8px); background: var(--kbg, var(--farbe-grund)); font: 600 .9375rem/1 var(--schrift-text); letter-spacing: .04em; color: var(--farbe-text); }
.kapitel-reiter span { overflow: hidden; text-overflow: ellipsis; }
.kapitel-reiter b { font: 400 1.25rem/1 var(--schrift-headline); color: var(--farbe-signal-text); }
.kapitel-salbei { --kbg: var(--farbe-flaeche); }
.kapitel-karte { --kbg: var(--farbe-karte); }
.kapitel-grund { --kbg: var(--farbe-grund); }
/* Kopflinie der Karte: doppelte Linie in Tanne, wie auf einer Karteikarte */
.seitenkopf-raster, .held-raster { position: relative; }
.seitenkopf { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.seitenkopf-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: 32px; align-items: start; }
.seitenkopf-text { grid-column: 1 / 8; }
.seitenkopf-text h1 { margin-top: 18px; max-width: 18ch; }
.seitenkopf-text .lead { margin-top: 20px; }
.seitenkopf .karteifeld, .seitenkopf .kopf-not { grid-column: 8 / 13; }
.seitenkopf-bild .seitenkopf-text { grid-column: 1 / 8; }
.seitenkopf-bild .kopfbild { grid-column: 8 / 13; grid-row: 1 / 3; }
@media (max-width: 959px) {
  .seitenkopf-text, .seitenkopf .karteifeld, .seitenkopf .kopf-not, .seitenkopf-bild .kopfbild { grid-column: 1 / -1; grid-row: auto; }
}
.krumen ol { list-style: none; padding: 0 0 14px; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .9375rem; color: var(--farbe-leise); border-bottom: 3px double var(--farbe-dunkel); }
.krumen li + li::before { content: '/'; margin: 0 10px; opacity: .6; }
.krumen a { text-decoration: none; }
.krumen a:hover { text-decoration: underline; }
.krumen a[aria-current] { color: var(--farbe-text); font-weight: 500; }

/* Karteifeld: kleine Tabelle mit Linien */
.karteifeld { background: var(--farbe-grund); border-radius: var(--radius-gross); padding: 22px 24px 18px; align-self: stretch; }
.karte .karteifeld { background: #fff; box-shadow: inset 0 0 0 1px var(--farbe-karte-linie); }
.feld-titel .tab { font: 600 1.0625rem var(--schrift-text); }
.feld-titel { font: 400 1.375rem/1.2 var(--schrift-headline); padding-bottom: 10px; border-bottom: 3px double var(--farbe-dunkel); }
.karteifeld dl > div { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--farbe-karte-linie); }
.karteifeld dt { color: var(--farbe-leise); font-size: .9375rem; }
.karteifeld dd { font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.feld-weg { margin-top: 16px; }

/* ------------------------------------------------------------------ Hero der Startseite */
.held { padding-block: clamp(20px, 3vw, 36px) clamp(40px, 5vw, 72px); overflow-x: clip; }
.seitenkopf-bild { overflow-x: clip; }
.held-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); }
.held-text { grid-column: 1 / 7; grid-row: 1; padding-bottom: 28px; }
.held-bild { grid-column: 7 / 13; grid-row: 1 / 3; }
.held-not { grid-column: 1 / 7; grid-row: 2; align-self: end; position: relative; z-index: 1; margin-bottom: 0; margin-right: 0; }
.stempel { display: inline-block; padding: 6px 12px; border: 1.5px solid var(--farbe-dunkel); border-radius: 6px; color: var(--farbe-dunkel); font-weight: 600; font-size: .9375rem; rotate: -1.5deg; font-variant-numeric: lining-nums tabular-nums; }
.zeilen { margin-top: 22px; }
.zeile { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.zeile > span { display: block; }
.held .lead { margin-top: 20px; }
.held-wege { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.tel-gross { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 48px; }
.tel-gross > span { display: grid; line-height: 1.15; }
.tel-gross small { font-size: .875rem; color: var(--farbe-leise); }
.tel-gross b { font-size: 1.25rem; font-weight: 600; }
.tel-gross .ic { color: var(--farbe-signal); width: 24px; height: 24px; }
.tel-gross:hover b { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 4px; }
.held-bild .bildkarte { height: 100%; }
.held-bild .bildkarte img { flex: 1 1 auto; height: 0; min-height: 600px; }
.held-raster { align-items: stretch; }
@media (max-width: 959px) {
  .held-text, .held-bild, .held-not { grid-column: 1 / -1; grid-row: auto; margin: 0; }
  .held-not { margin-bottom: 20px; }
  .held-bild { order: 3; }
  .held-bild .bildkarte img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

/* Bildkarte: Foto mit Kartenzeile */
.bildkarte { background: #fff; border-radius: var(--radius-gross); padding: 10px 10px 0; box-shadow: inset 0 0 0 1px var(--farbe-karte-linie); display: flex; flex-direction: column; }
.bildkarte img, .bildkarte .platzhalter-bild { width: 100%; border-radius: 12px; object-fit: cover; background: var(--farbe-flaeche); }
.bildkarte figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 6px 14px; font-size: .9375rem; color: var(--farbe-leise); }
.bildkarte-nr { font: 600 .9375rem/1 var(--schrift-text); color: var(--farbe-text); }
.bildkarte-nr:empty { display: none; }
.bildbeispiel { margin-left: auto; font-size: .875rem; padding: 2px 8px; border-radius: 4px; background: var(--farbe-grund); color: var(--farbe-text); }
.platzhalter-bild { display: block; }

/* ------------------------------------------------------------------ Notdienst-Karte (notdienst-plan tierarzt): steht still */
.notkarte { background: var(--farbe-dunkel); color: #fff; border-radius: var(--radius-gross); padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 12px; }
.notkarte a:not(.knopf-hafer) { color: #fff; }
.notkarte :focus-visible { outline-color: var(--farbe-grund); }
.nk-titel { font: 600 1rem/1.2 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase; color: var(--farbe-tanne-hell); }
.nk-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: .9375rem; font-weight: 600; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px #fff; }
[data-zustand="jetzt"] .chip:not(.chip-feiertag) { background: var(--farbe-grund); color: var(--farbe-dunkel); box-shadow: none; }
[data-zustand="jetzt"] .chip:not(.chip-feiertag) i { background: #2F7A4F; box-shadow: none; }
.chip-feiertag { background: transparent; box-shadow: inset 0 0 0 1px #E6C9A8; }
.nk-uhr { font-size: .9375rem; color: var(--farbe-tanne-leise); }
.nk-kopf { font: 400 clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem)/1.12 var(--schrift-headline); text-wrap: balance; }
.nk-text { margin-top: 8px; color: var(--farbe-tanne-hell); max-width: 52ch; font-variant-numeric: lining-nums tabular-nums; }
.nk-text b { color: #fff; font-weight: 600; }
.nk-wege { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.link-hell { color: #fff; font-weight: 500; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.nk-kosten { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 12px; font-size: 1rem; line-height: 1.5; color: var(--farbe-tanne-hell); font-variant-numeric: lining-nums tabular-nums; }
.nk-kosten b { color: #fff; font-weight: 600; }
.nk-kosten small { display: block; color: var(--farbe-tanne-leise); font-size: .9375rem; }
.seitenkopf .kopf-not { align-self: start; }

/* ------------------------------------------------------------------ Kapitel-Köpfe */
.kapitel-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: 14px; align-items: end; margin-bottom: clamp(28px, 4vw, 52px); }
.kapitel-kopf h2 { grid-column: 1 / 8; }
.kapitel-kopf > p, .kapitel-kopf > .status { grid-column: 8 / 13; max-width: 44ch; color: var(--farbe-text); }
@media (max-width: 959px) { .kapitel-kopf h2, .kapitel-kopf > p, .kapitel-kopf > .status { grid-column: 1 / -1; } }
.mehr { margin-top: 28px; }

/* ------------------------------------------------------------------ Tierarten (tabs-pfeiltasten-focusgroup auto): Reiter wie im Kasten */
.ta-reiter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; }
.ta-reiter [role="tab"] { flex: none; min-height: 48px; padding: 10px 20px; border: 0; border-radius: 12px 12px 0 0; background: #C9D5C6; font-weight: 600; cursor: pointer; transition: background-color var(--dauer-klein) var(--ease), translate var(--dauer-hover-aus) var(--ease-aus); }
.ta-reiter [role="tab"][aria-selected="true"] { background: var(--farbe-karte); }
@media (hover: hover) and (pointer: fine) { .ta-reiter [role="tab"][aria-selected="false"]:hover { translate: 0 -4px; transition: background-color var(--dauer-klein) var(--ease), translate var(--dauer-hover-ein) var(--ease-ein); } }
.ta-panel { background: var(--farbe-karte); border-radius: 0 var(--radius-gross) var(--radius-gross) var(--radius-gross); padding: clamp(22px, 3.2vw, 44px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 28px clamp(28px, 4vw, 56px); align-items: start; }
.js .ta-panel + .ta-panel { margin-top: 0; }
.ta-panel + .ta-panel { margin-top: 16px; }
.ta-panel h3 { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--schrift-headline); }
.ta-text > p { margin-top: 12px; max-width: 58ch; }
.ta-text h4 { margin-top: 24px; margin-bottom: 8px; }
.haken { list-style: none; padding: 0; display: grid; gap: 6px; }
.haken li { padding-left: 28px; position: relative; }
.haken li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--farbe-dunkel); border-bottom: 2px solid var(--farbe-dunkel); rotate: -45deg; }
.nicht-feld { margin-top: 24px; padding: 16px 18px; border-radius: var(--radius-klein); background: var(--farbe-grund); box-shadow: inset 4px 0 0 var(--farbe-dunkel); }
.nicht-feld h4 { margin: 0 0 6px; }
.ta-ohne { align-self: stretch; display: grid; place-items: center; min-height: 220px; background: var(--farbe-grund); border-radius: var(--radius-gross); }
.karte-leer { position: relative; width: 160px; height: 110px; }
.karte-leer i { position: absolute; inset: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--farbe-dunkel); }
.karte-leer i:nth-child(1) { translate: -18px -14px; opacity: .5; }
.karte-leer i:nth-child(2) { translate: -9px -7px; opacity: .75; }
.karte-leer i:nth-child(3)::after { content: ''; position: absolute; left: 16px; right: 16px; top: 30px; height: 30px; background: repeating-linear-gradient(to bottom, var(--farbe-karte-linie) 0 1.5px, transparent 1.5px 14px); }
@media (max-width: 767px) { .ta-panel { grid-template-columns: minmax(0, 1fr); border-radius: 0 0 var(--radius-gross) var(--radius-gross); } .ta-ohne { display: none; } }

/* ------------------------------------------------------------------ Klickbare Karten: der Reiter hebt sich (Hover der Leitidee) */
.klickbar { position: relative; }
.karte-link { text-decoration: none; }
.karte-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.karte-link:focus-visible { outline: none; }
.klickbar:has(.karte-link:focus-visible) { outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); }
.karte-pfeil { display: inline-flex; transition: translate var(--dauer-hover-aus) var(--ease-aus); }
.mini-reiter { transition: translate var(--dauer-hover-aus) var(--ease-aus); }
@media (hover: hover) and (pointer: fine) {
  .klickbar:hover .karte-pfeil { translate: 4px 0; transition: translate var(--dauer-hover-ein) var(--ease-ein); }
  .klickbar:hover .mini-reiter { translate: 0 -4px; transition: translate var(--dauer-hover-ein) var(--ease-ein); }
  .klickbar:hover .karte-link { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: .2em; }
}
.klickbar:active { scale: .985; }

/* Leistungen auf der Startseite */
.lk-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.klickbar-bild { display: block; text-decoration: none; position: relative; }
.lk-bild-text { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 1.125rem; }
.lk-bild-text b { font-weight: 600; }
.lk-bild-text .pfeil, .ak-bild .pfeil { transition: translate var(--dauer-hover-aus) var(--ease-aus); }
@media (hover: hover) and (pointer: fine) { .klickbar-bild:hover .lk-bild-text .pfeil { translate: 4px 0; transition: translate var(--dauer-hover-ein) var(--ease-ein); } .klickbar-bild:hover b { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: .2em; } }
.leistungs-zeilen { list-style: none; padding: 0; columns: 2 280px; column-gap: clamp(24px, 3vw, 44px); counter-reset: lz; }
.lz { break-inside: avoid; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; grid-template-areas: 'nr name pfeil' 'nr dauer pfeil'; column-gap: 12px; padding: 16px 0; border-top: 1px solid var(--farbe-karte-linie); counter-increment: lz; border-radius: 6px; }
.lz::before { content: counter(lz, decimal-leading-zero); grid-area: nr; font: 400 1.0625rem/1.5 var(--schrift-headline); color: var(--farbe-signal-text); }
.lz-name { grid-area: name; font-weight: 600; font-size: 1.125rem; }
.lz .karte-link { grid-area: name; }
.lz-dauer { grid-area: dauer; color: var(--farbe-leise); font-size: .9375rem; }
.lz .karte-pfeil { grid-area: pfeil; align-self: center; }
@media (max-width: 767px) { .lk-raster { grid-template-columns: minmax(0, 1fr); } .lk-bild .bildkarte img { aspect-ratio: 4 / 3; } }

/* Sprechzeiten und Weg */
.status .punkt { align-self: flex-start; margin-top: .5em; }
.status { display: flex; align-items: center; gap: 10px; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.status-gross { font: 400 clamp(1.25rem, 1rem + .9vw, 1.625rem)/1.3 var(--schrift-headline); }
.status-gross .punkt { width: 14px; height: 14px; }
.zw-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.zeiten-tabelle { width: 100%; border-collapse: collapse; font-weight: 500; }
.zeiten-tabelle th, .zeiten-tabelle td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--farbe-linie); vertical-align: top; }
.zeiten-tabelle th { font-weight: 500; width: 42%; }
.zeiten-tabelle tr.heute th, .zeiten-tabelle tr.heute td { font-weight: 700; }
.zeiten-tabelle tr.heute th::after { content: 'heute'; margin-left: 10px; padding: 2px 8px; border-radius: 4px; background: var(--farbe-dunkel); color: #fff; font-size: .8125rem; font-weight: 600; vertical-align: .1em; }
.zeiten-tabelle + .leise { margin-top: 14px; }
.zw-weg > * + * { margin-top: 14px; }
.zw-adresse { font-style: normal; font-weight: 600; }
.wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.skizze { width: 100%; height: auto; border-radius: var(--radius-gross); }
.sk-grund { fill: var(--farbe-karte); }
.kapitel-karte .sk-grund { fill: #fff; }
.sk-strasse { stroke: var(--farbe-linie); stroke-width: 34; fill: none; }
.sk-haus { fill: var(--farbe-flaeche); stroke: var(--farbe-dunkel); stroke-width: 2; }
.sk-eingang { fill: none; stroke: var(--farbe-signal); stroke-width: 4; stroke-linecap: round; }
.sk-park rect { fill: none; stroke: var(--farbe-dunkel); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sk-gruen { fill: none; stroke: #7FA08A; stroke-width: 10; stroke-linecap: round; }
.sk-bus { fill: var(--farbe-dunkel); }
.sk-text { font: 500 15px var(--schrift-text); fill: var(--farbe-text); }
.sk-gross { font: 400 22px var(--schrift-headline); }
.sk-hell { fill: #fff; font-weight: 700; font-size: 12px; }
@media (max-width: 959px) { .zw-raster { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Akkordeon (akkordeon-hoehe-auto): öffnen 300 ms, schließen 200 ms */
.akkordeon { border-top: 1px solid var(--farbe-linie); }
.ak { border-bottom: 1px solid var(--farbe-linie); }
.ak summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 18px 4px; cursor: pointer; min-height: 56px; }
.ak summary::-webkit-details-marker { display: none; }
.ak-nr { font: 400 1.0625rem/1 var(--schrift-headline); color: var(--farbe-signal-text); min-width: 2rem; }
.ak-nr:empty { display: none; }
.ak-titel { flex: 1; min-width: 0; font-weight: 600; font-size: 1.1875rem; }
.ak-zeichen { flex: none; }
.ak summary:hover .ak-titel { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: .2em; }
.ak-dauer { color: var(--farbe-leise); font-size: .9375rem; text-align: right; }
.ak-zeichen { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--farbe-dunkel); position: relative; }
.ak-zeichen::before, .ak-zeichen::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 1.8px; background: var(--farbe-dunkel); transition: rotate var(--dauer-schliessen) var(--ease-aus); }
.ak-zeichen::after { rotate: 90deg; }
.ak[open] .ak-zeichen::after { rotate: 0deg; transition: rotate var(--dauer-mittel) var(--ease-ein); }
.ak::details-content { block-size: 0; overflow: clip; transition: block-size var(--dauer-schliessen) var(--ease-aus), content-visibility var(--dauer-schliessen) allow-discrete; }
.ak[open]::details-content { block-size: auto; transition: block-size var(--dauer-mittel) var(--ease-ein), content-visibility var(--dauer-mittel) allow-discrete; }
.ak-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(24px, 3vw, 48px); padding: 0 4px 24px; }
.ak-text { max-width: 64ch; }
.ak-text > * + * { margin-top: 12px; }
.antwort { font-size: 1.125rem; font-weight: 500; }
.ak-bild { width: min(260px, 32vw); }
.ak-bild .bildkarte img { aspect-ratio: 4 / 5; }
@media (max-width: 599px) {
  .ak summary { flex-wrap: wrap; row-gap: 2px; }
  .ak-dauer { order: 3; flex-basis: 100%; text-align: left; padding-left: calc(2rem + 16px); }
  .ak-inhalt { grid-template-columns: minmax(0, 1fr); }
  .ak-bild { width: 100%; }
  .ak-bild .bildkarte img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------------ Notdienst-Seite: Wochenband */
.seitenkopf-not .seitenkopf-text { grid-column: 1 / 7; }
.seitenkopf-not .kopf-not { grid-column: 7 / 13; }
@media (max-width: 959px) { .seitenkopf-not .seitenkopf-text, .seitenkopf-not .kopf-not { grid-column: 1 / -1; } }
.plan-raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px clamp(28px, 4vw, 56px); }
.plan-raster h3 { font: 400 1.5rem/1.2 var(--schrift-headline); }
.woche { list-style: none; padding: 0; display: grid; gap: 8px; }
.woche li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; align-items: center; }
.woche li.woche-leer { display: block; color: var(--farbe-leise); }
.woche-tag { font-size: .9375rem; font-weight: 500; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.woche-tag small { display: block; font-size: .875rem; color: var(--farbe-leise); }
.woche li.heute .woche-tag { font-weight: 700; }
.woche-spur { position: relative; height: 30px; border-radius: 8px; background: var(--farbe-karte); overflow: hidden; }
.woche-spur > span { position: absolute; top: 0; bottom: 0; }
.seg-nd { background: repeating-linear-gradient(135deg, rgba(35, 64, 58, .26) 0 2px, transparent 2px 7px); }
.seg-sp { background: #B9CBB6; top: 7px !important; bottom: 7px !important; border-radius: 4px; }
.seg-wir { background: var(--farbe-dunkel); top: 5px !important; bottom: 5px !important; border-radius: 5px; }
.seg-jetzt { width: 3px; margin-left: -1.5px; background: var(--farbe-signal); }
.woche-achse { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; margin-top: 4px; }
.woche-achse div { position: relative; height: 18px; font-size: .875rem; color: var(--farbe-leise); font-variant-numeric: lining-nums tabular-nums; }
.woche-achse div span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
.woche-achse div span:first-child { translate: 0 0; }
.woche-achse div span:last-child { translate: -100% 0; }
@media (max-width: 599px) { .achse-uhr { display: none; } }
.legende { list-style: none; padding: 0; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9375rem; }
.legende li { display: inline-flex; align-items: center; gap: 8px; }
.legende i { width: 22px; height: 12px; border-radius: 3px; }
.l-sp { background: #B9CBB6; }
.l-nd { background: repeating-linear-gradient(135deg, rgba(35, 64, 58, .4) 0 2px, var(--farbe-karte) 2px 6px); box-shadow: inset 0 0 0 1px rgba(35, 64, 58, .3); }
.l-wir { background: var(--farbe-dunkel); }
.l-jetzt { width: 3px !important; background: var(--farbe-signal); border-radius: 0 !important; }
.dienste { list-style: none; padding: 0; margin-top: 14px; }
.dienste li { padding: 12px 0; border-top: 1px solid #B9C5B6; display: grid; gap: 2px; font-variant-numeric: lining-nums tabular-nums; }
.dienste li:last-child { border-bottom: 1px solid #B9C5B6; }
.dienste b { font-weight: 600; }
.dienste small { color: var(--farbe-leise); font-size: .9375rem; }
.dienste li.ist-jetzt b::after { content: 'läuft'; margin-left: 8px; padding: 1px 8px; border-radius: 4px; background: var(--farbe-dunkel); color: #fff; font-size: .8125rem; font-weight: 600; vertical-align: .1em; }
.dienste + .leise { margin-top: 12px; }
@media (max-width: 959px) { .plan-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .woche li, .woche-achse { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 8px; } }
.hinweis-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raster-spalt); }
.hinweis { background: #fff; border-radius: var(--radius-gross); padding: clamp(20px, 2.4vw, 30px); box-shadow: inset 0 0 0 1px var(--farbe-karte-linie), inset 0 4px 0 var(--farbe-dunkel); }
.hinweis p { margin-top: 8px; }
.pflicht { margin-top: 28px; font-size: .9375rem; color: var(--farbe-leise); max-width: 80ch; }
@media (max-width: 767px) { .hinweis-raster { grid-template-columns: minmax(0, 1fr); } }

/* Leistungsseite */
.kopfbild .bildkarte img { aspect-ratio: 4 / 5; }
@media (max-width: 959px) { .kopfbild .bildkarte img { aspect-ratio: 4 / 3; } }
.antwortfelder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--raster-spalt); }
.antwortfelder > div { background: var(--farbe-karte); border-radius: var(--radius-gross); padding: 22px 22px 24px; }
.antwortfelder dt { font: 400 1.375rem/1.2 var(--schrift-headline); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 3px double var(--farbe-dunkel); }
@media (max-width: 1059px) { .antwortfelder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .antwortfelder { grid-template-columns: minmax(0, 1fr); } }
.zahn-unten { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px clamp(28px, 4vw, 56px); align-items: start; }
.zahn-unten h2 { margin-bottom: 20px; }
.ansprech { background: var(--farbe-karte); border-radius: var(--radius-gross); padding: 24px; display: grid; gap: 6px; }
.ansprech .tk-foto { margin-bottom: 10px; }
.ansprech-name { font: 400 1.5rem/1.2 var(--schrift-headline); }
.ansprech .karte-pfeil { position: absolute; right: 22px; top: 24px; }
.naechste { display: grid; gap: 6px; margin-top: clamp(40px, 6vw, 72px); padding-top: 22px; border-top: 3px double var(--farbe-dunkel); text-decoration: none; }
.naechste-name { display: inline-flex; align-items: center; gap: 14px; font: 400 var(--h2)/1.1 var(--schrift-headline); }
.naechste-name .pfeil { width: 36px; height: 20px; transition: translate var(--dauer-hover-aus) var(--ease-aus); }
@media (hover: hover) and (pointer: fine) { .naechste:hover .pfeil { translate: 4px 0; transition: translate var(--dauer-hover-ein) var(--ease-ein); } }
@media (max-width: 959px) { .zahn-unten { grid-template-columns: minmax(0, 1fr); } }

/* Kosten-Tabelle */
.tabelle-rahmen { overflow-x: auto; }
.preise { width: 100%; border-collapse: collapse; min-width: 520px; }
.preise th, .preise td { text-align: left; padding: 14px 10px 14px 0; border-bottom: 1px solid var(--farbe-linie); }
.preise thead th { font-size: .9375rem; color: var(--farbe-leise); font-weight: 600; }
.preise tbody th { font-weight: 500; }
.tabelle-rahmen + .leise { margin-top: 14px; }
.preise td { font-weight: 500; }
@media (max-width: 599px) {
  .tabelle-rahmen { overflow: visible; }
  .preise { min-width: 0; }
  .preise thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .preise tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--farbe-linie); }
  .preise th, .preise td { border: 0; padding: 0; }
  .preise tbody th { grid-column: 1 / -1; margin-bottom: 6px; }
  .preise td::before { content: attr(data-satz); display: block; font-size: .875rem; font-weight: 400; color: var(--farbe-leise); }
}

/* Praxis */
.raeume .grundriss { width: 100%; height: auto; max-width: 900px; }
.gr-aussen { fill: #fff; stroke: var(--farbe-dunkel); stroke-width: 3; }
.gr-wand { stroke: var(--farbe-dunkel); stroke-width: 2; fill: none; }
.gr-raum text { font: 500 17px var(--schrift-text); fill: var(--farbe-text); text-anchor: middle; }
.gr-tuer { fill: none; stroke: var(--farbe-signal); stroke-width: 5; stroke-linecap: round; }
.gr-klein { font: 500 15px var(--schrift-text); fill: var(--farbe-leise); text-anchor: middle; }
.gr-punkt { fill: var(--farbe-dunkel); }
.raeume .leise { margin-top: 12px; }

/* Person */
.person-not { margin-top: 0; padding-block: 14px; background: var(--farbe-dunkel); color: #fff; max-width: none; padding-inline: max(var(--raster-rand), calc((100% - var(--raster-max)) / 2 + var(--raster-rand))); }
.person-not a { color: #fff; }
.person-not + .kapitel { margin-top: var(--reiter-hoehe); }
.person-feld .tk-foto { margin-bottom: 18px; }
.sprechtage { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.sprechtage li { display: grid; place-items: center; min-height: 44px; border-radius: 8px; background: var(--farbe-flaeche); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.sprechtage li.frei { background: transparent; color: var(--farbe-leise); box-shadow: inset 0 0 0 1px var(--farbe-linie); font-weight: 400; }
.sprechtage li.heute { background: var(--farbe-dunkel); color: #fff; }
.sprechtage li.frei.heute { background: transparent; color: var(--farbe-text); box-shadow: inset 0 0 0 2px var(--farbe-dunkel); }
.sprechtage + .leise { margin-top: 12px; }
.schwerpunkte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raster-spalt); }
.schwerpunkte li { background: var(--farbe-karte); border-radius: var(--radius-gross); padding: 24px; }
.schwerpunkte p { margin-top: 8px; }
.fachwort { margin-top: 14px; font-size: .9375rem; }
.fachwort summary { cursor: pointer; color: var(--farbe-leise); text-decoration: underline dotted; text-underline-offset: .25em; min-height: 32px; }
.fachwort p { margin-top: 6px; }
@media (max-width: 959px) { .schwerpunkte { grid-template-columns: minmax(0, 1fr); } }
.zwei-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 5vw, 80px); }
.zwei-spalten h2 + * { margin-top: 18px; }
.zwei-spalten h2:not(:first-child) { margin-top: 40px; }
.werdegang, .sprachen { list-style: none; padding: 0; }
.werdegang li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--farbe-karte-linie); }
.sprachen li { padding: 10px 0; border-top: 1px solid var(--farbe-karte-linie); font-weight: 500; }
@media (max-width: 767px) { .zwei-spalten { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Fragen (faq-seite-suche) */
.such-zeile { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.such-zeile input { flex: 1; min-width: 0; min-height: 52px; padding: 12px 16px; border-radius: var(--radius-klein); border: 1px solid var(--farbe-leise); background: #fff; font-size: 1.0625rem; }
.such-zahl { margin-top: 12px; color: var(--farbe-leise); font-variant-numeric: lining-nums tabular-nums; }
.such-zahl b { color: var(--farbe-text); }
.themen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.themen button { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--farbe-grund); box-shadow: inset 0 0 0 1px var(--farbe-linie); font-weight: 600; cursor: pointer; transition: background-color var(--dauer-klein) var(--ease); }
.themen button[aria-pressed="true"] { background: var(--farbe-dunkel); color: #fff; box-shadow: none; }
.themen button[disabled] { opacity: .5; cursor: not-allowed; }
.themen .n { font-weight: 400; margin-left: 4px; opacity: .8; }
.thema + .thema { margin-top: 44px; }
.thema h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 16px; }
::highlight(treffer) { background-color: #F3D9A8; color: var(--farbe-text); }
.frage-fuss { font-size: .9375rem; }
.leer { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: center; padding: 24px; border-radius: var(--radius-gross); background: var(--farbe-grund); }
.leer h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.leer p { margin-top: 12px; }
.leer [data-vorschlaege] button { margin-right: 12px; }
@media (max-width: 599px) { .leer { grid-template-columns: minmax(0, 1fr); } .leer .figur { width: 160px; } }

/* ------------------------------------------------------------------ Kontakt: Termin, Formular */
.tel-monument { display: block; margin: 14px 0 10px; font: 500 clamp(1.875rem, 1.3rem + 2vw, 2.75rem)/1 var(--schrift-text); letter-spacing: -.02em; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.tel-monument:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tel-feld .leise { margin-top: 8px; }
.termin-raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px clamp(28px, 4vw, 56px); align-items: start; }
.termin-wahl fieldset, .formular fieldset { border: 0; padding: 0; min-width: 0; }
.wahlen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.wahl { position: relative; display: inline-flex; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl span { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px 10px 14px; border-radius: var(--radius-klein); background: #fff; box-shadow: inset 0 0 0 1px var(--farbe-leise); font-weight: 500; transition: background-color var(--dauer-klein) var(--ease), box-shadow var(--dauer-klein) var(--ease); }
.wahl span::before { content: ''; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--farbe-leise); flex: none; transition: box-shadow var(--dauer-mittel) var(--ease-ein); }
.wahl input:checked + span { background: var(--farbe-flaeche); box-shadow: inset 0 0 0 2px var(--farbe-dunkel); }
.wahl input:checked + span::before { box-shadow: inset 0 0 0 5.5px var(--farbe-dunkel); }
.wahl input:focus-visible + span { outline: var(--fokus-ring); outline-offset: var(--fokus-abstand); }
@media (hover: hover) and (pointer: fine) { .wahl:hover span { box-shadow: inset 0 0 0 1.5px var(--farbe-text); } }
.termin-hinweis { margin-top: 18px; min-height: 3.2em; font-weight: 500; }
.termin-bei { margin-top: 4px; font-weight: 600; color: var(--farbe-dunkel); }
.kalender-platz { margin-top: 16px; padding: 22px; border-radius: var(--radius-gross); background: var(--farbe-grund); box-shadow: inset 0 0 0 1.5px var(--farbe-linie); display: grid; gap: 14px; justify-items: start; }
.kalender-platz.geladen { box-shadow: inset 0 0 0 2px var(--farbe-dunkel); }
.termin-tel { background: var(--farbe-flaeche); border-radius: var(--radius-gross); padding: 24px; display: grid; gap: 10px; }
.tel-mittel { font: 500 1.75rem/1.1 var(--schrift-text); letter-spacing: -.01em; }
.tel-mittel a { text-decoration: none; }
@media (max-width: 959px) { .termin-raster { grid-template-columns: minmax(0, 1fr); } }

.rr-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(28px, 4vw, 72px); align-items: start; }
.formular { background: var(--farbe-karte); border-radius: var(--radius-gross); padding: clamp(20px, 3vw, 40px); display: grid; gap: 4px; }
.formular-not { padding: 12px 16px; border-radius: var(--radius-klein); background: var(--farbe-dunkel); color: #fff; margin-bottom: 14px; }
.formular-not a { color: #fff; }
.feld { display: grid; gap: 6px; }
.feld label, .feld legend { font-weight: 600; }
.optional { font-weight: 400; color: var(--farbe-leise); font-size: .9375rem; margin-left: 6px; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--radius-klein); border: 1px solid var(--farbe-leise); background: #fff; font-size: 1.0625rem; }
.feld textarea { min-height: 96px; resize: vertical; }
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.feld input:autofill { box-shadow: inset 0 0 0 40px #FFF6D9; }
.feld-hilfe { font-size: .9375rem; color: var(--farbe-leise); }
.feld-fehler { min-height: 1lh; font-size: .9375rem; color: var(--farbe-fehler); font-weight: 600; line-height: 1.5; }
.feld.hat-fehler input, .feld.hat-fehler select { border-color: var(--farbe-fehler); box-shadow: inset 0 0 0 1px var(--farbe-fehler); }
.feld.ok input, .feld.ok select { border-color: var(--farbe-dunkel); }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.absenden { margin-top: 14px; }
.fehlerliste { padding: 16px 18px; border-radius: var(--radius-klein); background: #fff; box-shadow: inset 4px 0 0 var(--farbe-fehler), inset 0 0 0 1px #E6C4C1; margin-bottom: 14px; }
.fehlerliste h3 { font-size: 1.0625rem; color: var(--farbe-fehler); }
.fehlerliste ul { margin-top: 6px; padding-left: 20px; }
.fehlerliste a { font-weight: 600; }
.nicht-verbunden { margin-top: 14px; padding: 16px 18px; border-radius: var(--radius-klein); background: #fff; box-shadow: inset 4px 0 0 var(--farbe-dunkel), inset 0 0 0 1px var(--farbe-karte-linie); }
.nicht-verbunden p + p { margin-top: 6px; }
.rr-figur { position: sticky; top: 110px; display: grid; justify-items: center; gap: 10px; }
.rr-figur .figur { width: min(100%, 300px); }
.figur-zeile { font-weight: 500; color: var(--farbe-dunkel); text-align: center; min-height: 1.6em; }
@media (max-width: 959px) { .rr-raster { grid-template-columns: minmax(0, 1fr); } .rr-figur { position: static; order: -1; grid-template-columns: 96px minmax(0, 1fr); justify-items: start; align-items: center; } .rr-figur .figur { width: 96px; } .figur-zeile { text-align: left; } }
@media (max-width: 479px) { .feld-paar { grid-template-columns: minmax(0, 1fr); } }
.karte-zwei { position: relative; }
.karte-zwei iframe { width: 100%; aspect-ratio: 520 / 340; border: 0; border-radius: var(--radius-gross); display: block; }
.osm-frage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }

/* ------------------------------------------------------------------ Die Figur (Signatur maskottchen-zustaende) */
.figur svg { width: 100%; height: auto; overflow: visible; }
.f-schatten { fill: var(--farbe-dunkel); opacity: .12; }
.f-fell { fill: var(--farbe-dunkel); }
.f-brust, .f-schnauze { fill: var(--farbe-flaeche); }
.f-pfote { fill: #2F5A51; }
.f-halsband, .f-ohr { fill: var(--farbe-signal); }
.f-marke { fill: var(--farbe-grund); }
.f-nase { fill: var(--farbe-text); }
.f-mund, .f-lachaugen path, .f-brauen path { fill: none; stroke: var(--farbe-text); stroke-width: 3.2; stroke-linecap: round; }
.f-lachaugen path { stroke: var(--farbe-grund); stroke-width: 3.6; }
.f-brauen path { stroke: var(--farbe-grund); stroke-width: 3; }
.f-auge > circle:first-child { fill: var(--farbe-grund); }
.f-pupille { fill: var(--farbe-text); translate: var(--bx, 0) var(--by, 0); }
.f-schwanz path { stroke: var(--farbe-dunkel); }
.f-kopf, .f-ohr, .f-schwanz, .f-koerper, .f-augen, .f-lachaugen, .f-brauen, .f-mund, .f-pupille { transition: rotate var(--dauer-rezept-2) var(--ease), translate var(--dauer-rezept-2) var(--ease), opacity var(--dauer-rezept-2) var(--ease), scale var(--dauer-rezept-2) var(--ease); }
.f-kopf { transform-box: view-box; transform-origin: 100px 96px; rotate: var(--kopf, 0deg); }
.f-ohr-l { transform-box: view-box; transform-origin: 70px 50px; }
.f-ohr-r { transform-box: view-box; transform-origin: 130px 50px; }
.f-schwanz { transform-box: view-box; transform-origin: 136px 152px; }
.f-koerper { transform-box: view-box; transform-origin: 100px 172px; }
.f-lachaugen, .f-brauen, .f-mund-traurig { opacity: 0; }
/* schaut: Kopf neigt sich zum aktiven Feld (JS setzt --kopf, --bx, --by) */
.figur[data-zustand="freut"] .f-augen { opacity: 0; }
.figur[data-zustand="freut"] .f-lachaugen { opacity: 1; }
.figur[data-zustand="freut"] .f-ohr-l { rotate: 14deg; }
.figur[data-zustand="freut"] .f-ohr-r { rotate: -14deg; }
.figur[data-zustand="freut"] .f-schwanz { rotate: -16deg; }
.figur[data-zustand="freut"] .f-kopf { translate: 0 -4px; }
.figur[data-zustand="traurig"] .f-ohr-l { rotate: -10deg; }
.figur[data-zustand="traurig"] .f-ohr-r { rotate: 10deg; }
.figur[data-zustand="traurig"] .f-brauen { opacity: 1; }
.figur[data-zustand="traurig"] .f-mund-froh { opacity: 0; }
.figur[data-zustand="traurig"] .f-mund-traurig { opacity: 1; }
.figur[data-zustand="traurig"] .f-kopf { rotate: 5deg; translate: 0 3px; }
.figur[data-zustand="traurig"] .f-schwanz { rotate: 28deg; }
.figur[data-zustand="traurig"] { --by: 2px; }
/* Atmen: nur im Formular und auf der Fehlerseite, zwei Zyklen à 2400 ms, dann Ruhe */
@keyframes atmen { 50% { scale: 1.012 1.03; } }
html:not(.ruhig):not(.ruhig-system) .figur[data-atmen] .f-koerper { animation: atmen var(--dauer-rezept-4) cubic-bezier(0.37, 0, 0.63, 1) 2; }
.figur-404 { position: absolute; left: 47%; bottom: 0; width: 34%; }
.figur-danke { width: 200px; }

/* ------------------------------------------------------------------ Danke */
.vorschau-hinweis { padding-block: 12px; background: var(--farbe-flaeche); max-width: none; padding-inline: max(var(--raster-rand), calc((100% - var(--raster-max)) / 2 + var(--raster-rand))); font-weight: 500; }
.vorschau-hinweis + .kapitel { margin-top: var(--reiter-hoehe); }
.danke-karte dd { font-weight: 600; }
.danke-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(28px, 4vw, 72px); }
.zeitleiste { list-style: none; padding: 0; margin-top: 24px; position: relative; }
.zeitleiste li { position: relative; padding: 0 0 26px 40px; }
.zeitleiste li::before { content: ''; position: absolute; left: 7px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--farbe-flaeche); box-shadow: inset 0 0 0 2px var(--farbe-dunkel); }
.zeitleiste li.erledigt::before { background: var(--farbe-dunkel); }
.zeitleiste li::after { content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; border-left: 1.5px dashed var(--farbe-dunkel); opacity: .5; }
.zeitleiste li:last-child::after { content: none; }
.zl-wann { font-weight: 600; color: var(--farbe-signal-text); font-variant-numeric: lining-nums tabular-nums; }
.zeitleiste p { margin-top: 4px; }
.danke-seite { display: grid; gap: 24px; justify-items: start; align-content: start; }
.danke-not { background: var(--farbe-dunkel); color: #fff; border-radius: var(--radius-gross); padding: 22px; }
.danke-not a { color: #fff; }
.danke-not p { margin-top: 6px; color: var(--farbe-tanne-hell); }
@media (max-width: 959px) { .danke-raster { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Rechtsseiten (rechtstext-layout) */
.rt-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 32px clamp(28px, 5vw, 80px); align-items: start; }
.rechtstext:not(.mit-inhalt) .rt-raster { grid-template-columns: minmax(0, 1fr); }
.rechtstext:not(.mit-inhalt) .rt-text { max-width: 72ch; }
.rt-inhalt { position: sticky; top: 100px; }
.rt-inhalt ol { list-style: none; padding: 0; margin-top: 12px; counter-reset: rt; }
.rt-inhalt li { counter-increment: rt; }
.rt-inhalt a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding: 8px 0; text-decoration: none; border-bottom: 1px solid var(--farbe-karte-linie); }
.rt-inhalt a::before { content: counter(rt, decimal-leading-zero); font-family: var(--schrift-headline); color: var(--farbe-signal-text); }
.rt-inhalt a[aria-current="true"] { font-weight: 700; }
.rt-text { max-width: 68ch; counter-reset: abs; }
.rt-abschnitt { scroll-margin-top: 100px; padding-bottom: 28px; }
.rt-abschnitt + .rt-abschnitt { border-top: 1px solid var(--farbe-karte-linie); padding-top: 28px; }
.rt-abschnitt h2 { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); }
.rt-abschnitt h2 .anker { margin-left: 6px; vertical-align: middle; }
.rt-abschnitt > * + * { margin-top: 12px; }
.rt-abschnitt ul { padding-left: 20px; }
.anker { border: 0; background: none; color: var(--farbe-leise); cursor: pointer; font: 500 1rem var(--schrift-text); min-width: 32px; min-height: 32px; opacity: .7; }
.anker:hover, .anker:focus-visible { opacity: 1; }
.rt-liste > div { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--farbe-karte-linie); }
.rt-liste dt { color: var(--farbe-leise); }
.rt-stand { font: 400 2rem/1.1 var(--schrift-headline); margin-top: 10px; }
.nachweis { padding-left: 20px; }
@media (max-width: 959px) { .rt-raster { grid-template-columns: minmax(0, 1fr); } .rt-inhalt { position: static; } }
@media (max-width: 599px) { .rt-liste > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
@media print { .kopf, .fuss, .unten, .sprung, .seitenreiter, .kapitel-reiter, .rt-inhalt, .anker, .karteifeld { display: none !important; } .karte, .kapitel { background: none; margin: 0; padding-block: 12px; } }

/* ------------------------------------------------------------------ 404 */
.fehler-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: 32px; align-items: center; }
.fehler .seitenkopf-text { grid-column: 1 / 7; }
.fehler h1 { margin-top: 0; }
.fehler-kasten { grid-column: 7 / 13; position: relative; }
.kasten { width: 100%; }
.ka-karte { fill: #fff; stroke: var(--farbe-dunkel); stroke-width: 2; }
.ka-luecke { fill: none; stroke: var(--farbe-signal); stroke-width: 2; stroke-dasharray: 6 6; }
.ka-front { fill: var(--farbe-dunkel); }
.fehler-wege { list-style: none; padding: 0; margin-top: 28px; border-top: 1px solid var(--farbe-karte-linie); }
.klickbar-zeile { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--farbe-karte-linie); text-decoration: none; }
.klickbar-zeile b { font: 400 1.375rem/1.2 var(--schrift-headline); }
.klickbar-zeile span { color: var(--farbe-leise); }
.klickbar-zeile .pfeil { transition: translate var(--dauer-hover-aus) var(--ease-aus); }
@media (hover: hover) and (pointer: fine) { .klickbar-zeile:hover .pfeil { translate: 4px 0; transition: translate var(--dauer-hover-ein) var(--ease-ein); } .klickbar-zeile:hover b { text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: .2em; } }
.fehler-suche { margin-top: 28px; }
.fehler-suche label { font-weight: 600; }
@media (max-width: 959px) { .fehler .seitenkopf-text, .fehler-kasten { grid-column: 1 / -1; } .fehler-kasten { max-width: 480px; } }
@media (max-width: 479px) { .klickbar-zeile { grid-template-columns: minmax(0, 1fr) auto; } .klickbar-zeile span { grid-column: 1; grid-row: 2; } .klickbar-zeile .pfeil { grid-column: 2; grid-row: 1 / 3; } }

/* ------------------------------------------------------------------ Fuß: die Front des Karteikastens, oben alle Reiter */
.fuss { position: relative; background: var(--farbe-dunkel); color: var(--farbe-tanne-hell); margin-top: calc(var(--reiter-hoehe) + 8px); padding-block: clamp(48px, 6vw, 80px) 56px; }
.fuss a { color: #fff; }
.fuss :focus-visible { outline-color: var(--farbe-grund); }
.kasten-reiter ol { list-style: none; position: absolute; left: 0; right: 0; bottom: 100%; max-width: var(--raster-max); margin-inline: auto; padding: 0 var(--raster-rand); display: flex; gap: 4px; align-items: flex-end; }
.kasten-reiter li { flex: 0 1 auto; min-width: 0; }
.kasten-reiter a { display: flex; align-items: center; gap: 8px; height: var(--reiter-hoehe); padding: 0 14px; border-radius: 12px 12px 0 0; background: #2C4E47; color: var(--farbe-tanne-hell); text-decoration: none; font-weight: 500; font-size: .9375rem; white-space: nowrap; overflow: hidden; translate: 0 8px; transition: translate var(--dauer-hover-aus) var(--ease-aus), background-color var(--dauer-klein) var(--ease); }
.kasten-reiter a .tab { font-weight: 700; color: #E6C9A8; }
.kasten-reiter a[aria-current="page"] { background: var(--farbe-dunkel); color: #fff; translate: 0 0; }
@media (hover: hover) and (pointer: fine) { .kasten-reiter a:hover { translate: 0 0; background: var(--farbe-dunkel); transition: translate var(--dauer-hover-ein) var(--ease-ein), background-color var(--dauer-klein) var(--ease); } }
.kasten-reiter a:focus-visible { translate: 0 0; outline-offset: -3px; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2.4fr); gap: 36px var(--raster-spalt); }
.fuss .label { color: #fff; margin-bottom: 10px; }
.fuss-tel { display: block; font: 500 clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem)/1 var(--schrift-text); letter-spacing: -.02em; text-decoration: none; letter-spacing: -.01em; margin-bottom: 14px; white-space: nowrap; }
.fuss-tel:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.fuss .status .punkt { box-shadow: inset 0 0 0 2px var(--farbe-tanne-hell); }
.fuss [data-offen="ja"] .punkt { background: #7FD3A0; box-shadow: none; }
.fuss-spalte p + p { margin-top: 10px; }
.fuss .leise { color: var(--farbe-tanne-leise); }
.fuss address { font-style: normal; }
.fuss-zeiten { border-collapse: collapse; }
.fuss-zeiten th { text-align: left; font-weight: 500; padding: 3px 16px 3px 0; color: #fff; white-space: nowrap; }
.fuss-zeiten td { white-space: nowrap; }
.fuss-zeiten td { padding: 3px 0; }
.fuss-unten { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 22px; display: grid; gap: 12px; font-size: .9375rem; }
.fuss-unten ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.fuss-unten li > a { display: inline-flex; min-height: 44px; align-items: center; }
.fuss-unten .link-knopf { color: #fff; }
.beispiel { color: var(--farbe-tanne-leise); }
@media (max-width: 1059px) { .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .kasten-reiter ol { position: static; padding: 0; height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 36px; }
  .kasten-reiter li { position: static; width: auto; }
  .kasten-reiter a { translate: none; border-radius: 10px; min-height: 44px; height: auto; }
  .fuss { margin-top: 0; padding-top: 44px; }
}
@media (max-width: 599px) { .fuss-raster { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Mobile Leiste (mobile-bottom-navigation kontakt) */
.unten { display: none; }
@media (max-width: 959px) {
  .unten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--farbe-grund) 96%, transparent); box-shadow: 0 -1px 0 var(--farbe-linie); view-transition-name: unten; }
  .unten a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: var(--radius-klein); text-decoration: none; font-weight: 600; font-size: .9375rem; }
  .unten-notdienst { background: var(--farbe-dunkel); color: #fff; }
  .unten-signal { background: var(--farbe-signal); color: #fff; }
  .unten a[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--farbe-text); }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------ Dialoge */
dialog { border: 0; padding: 0; color: inherit; }
dialog::backdrop { background: rgba(31, 36, 33, .45); }
.blatt { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: none; width: min(420px, 100%); background: var(--farbe-karte); padding: 20px var(--raster-rand) 28px; display: none; flex-direction: column; gap: 24px; }
.blatt[open] { display: flex; animation: blatt-auf var(--dauer-mittel) var(--ease-ein); }
@keyframes blatt-auf { from { translate: 24px 0; opacity: 0; } }
.blatt-kopf { display: flex; justify-content: space-between; align-items: center; }
.blatt nav ul { list-style: none; padding: 0; }
.blatt nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--farbe-karte-linie); font: 400 1.5rem/1.2 var(--schrift-headline); text-decoration: none; }
.blatt nav a[aria-current="page"] { color: var(--farbe-signal-text); }
.blatt-fuss { margin-top: auto; display: grid; gap: 12px; justify-items: start; }
.rund { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--farbe-leise); background: transparent; display: grid; place-items: center; cursor: pointer; }
.rund svg { width: 16px; height: 16px; }
.dialog { margin: auto; width: min(520px, calc(100% - 32px)); background: var(--farbe-karte); border-radius: var(--radius-gross); padding: 28px; }
.dialog[open] { animation: dialog-auf var(--dauer-mittel) var(--ease-ein); }
@keyframes dialog-auf { from { translate: 0 8px; opacity: 0; } }
.dialog h2 { font-size: 1.75rem; }
.dialog form > * + * { margin-top: 16px; }
.schalter { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.schalter input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--farbe-dunkel); }
.schalter small { display: block; color: var(--farbe-leise); font-size: .9375rem; }
.dialog-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* ================================================================== Nachbesserung 05.11.2026 (Jury 6/10)
   Die Karteikarte ordnet jetzt den Inhalt: Register auf der Startkarte, leere Karte (erster Besuch),
   Kartenstapel (Leistungen), Verlauf auf der Karte (Zähne), Musterkarte (Kosten), Teamkarten mit Unterschrift.
   Dazu eine große Zahl je Seite, große Bilder und die Signatur „Karte ziehen“ (--ease-karte). */

/* Beispiel-Marke: einmal je Block mit Beispieldaten */
.bsp-marke { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 4px; box-shadow: inset 0 0 0 1px currentColor; font: 600 .8125rem/1.5 var(--schrift-text); letter-spacing: .04em; text-transform: uppercase; vertical-align: .12em; white-space: nowrap; }

/* ------------------------------------------------------------------ Große Bilder */
.bildkarte-gross { background: none; box-shadow: none; padding: 0; }
.bildkarte-gross img { border-radius: var(--radius-gross); }
.bildkarte-gross figcaption { padding-inline: 2px; }
@media (min-width: 960px) {
  .held-bild, .seitenkopf-bild .kopfbild { margin-right: calc(-1 * (max(0px, (100vw - var(--raster-max)) / 2) + var(--raster-rand))); }
  .held-bild .bildkarte-gross img, .kopfbild .bildkarte-gross img { border-radius: var(--radius-gross) 0 0 var(--radius-gross); }
  .held-bild .bildkarte-gross figcaption, .kopfbild .bildkarte-gross figcaption { padding-right: calc(max(0px, (100vw - var(--raster-max)) / 2) + var(--raster-rand)); }
  .held-bild { grid-column: 7 / 13; }
  .seitenkopf-bild .seitenkopf-text { grid-column: 1 / 7; }
  .seitenkopf-bild .kopfbild { grid-column: 7 / 13; }
  .kopfbild .bildkarte-gross img { aspect-ratio: 1 / 1; }
}
@media (max-width: 959px) {
  .held-bild .bildkarte-gross, .kopfbild .bildkarte-gross { margin-inline: calc(-1 * var(--raster-rand)); }
  .held-bild .bildkarte-gross img, .kopfbild .bildkarte-gross img { border-radius: 0; aspect-ratio: 4 / 3.4; }
  .bildkarte-gross figcaption { padding-inline: var(--raster-rand); }
}
.ta-bild .bildkarte img { aspect-ratio: 5 / 4; }
.band { margin-top: clamp(44px, 6vw, 88px); }
.band img { width: 100%; height: auto; aspect-ratio: 2 / 1; max-height: 82vh; object-fit: cover; }
.band-katze img { aspect-ratio: 21 / 9; object-position: 70% 50%; }
.band figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 12px; font-size: .9375rem; color: var(--farbe-leise); }
@media (max-width: 767px) { .band img, .band-katze img { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------------ Register: die anderen Karten schauen hinter der Startkarte hervor */
.register { position: absolute; bottom: 100%; left: calc(var(--reiter-links) + var(--reiter-breite) + 6px); right: calc(max(0px, (100% - var(--raster-max)) / 2) + var(--raster-rand)); height: var(--reiter-hoehe); overflow: clip; }
.register ol { list-style: none; padding: 0; display: flex; gap: 4px; height: 100%; align-items: flex-end; }
.register li { flex: 0 1 auto; min-width: 0; }
.register a { display: flex; align-items: center; gap: 8px; height: calc(var(--reiter-hoehe) - 6px); padding: 0 14px; border-radius: 12px 12px 0 0; background: #E8E1D3; text-decoration: none; font-weight: 500; font-size: .9375rem; white-space: nowrap; overflow: hidden; translate: 0 2px; transition: translate var(--dauer-hover-aus) var(--ease-aus), background-color var(--dauer-klein) var(--ease); }
.register a .tab { font-weight: 700; color: var(--farbe-signal-text); }
@media (hover: hover) and (pointer: fine) { .register a:hover { translate: 0 -4px; background: var(--farbe-karte); transition: translate var(--dauer-hover-ein) var(--ease-karte), background-color var(--dauer-klein) var(--ease); } }
.register a:focus-visible { outline-offset: -3px; }
@media (max-width: 1100px) { .register a { padding: 0 10px; font-size: .875rem; } }
@media (max-width: 959px) { .register { display: none; } }

/* ------------------------------------------------------------------ Erster Besuch: die leere Karte */
.neu-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.neu-text h2 { max-width: 14ch; }
.neu-text p { margin-top: 18px; max-width: 44ch; }
.neu-text .wege { margin-top: 28px; }
.leerkarte-stapel { position: relative; padding: 0 14px 14px 0; margin-top: var(--reiter-hoehe); }
.leerkarte-stapel::before { content: ''; position: absolute; inset: 14px 0 0 14px; border-radius: 6px 6px var(--radius-gross) 6px; background: var(--farbe-flaeche); }
.leerkarte, .stellenkarte { position: relative; background: #fff; border-radius: 6px var(--radius-gross) 6px 6px; padding: clamp(22px, 2.6vw, 34px); }
.leerkarte { rotate: -.6deg; }
.lk-reiter { position: absolute; bottom: 100%; left: 22px; padding: 8px 18px 6px; border-radius: 12px 12px 0 0; background: inherit; font: 400 1.0625rem/1 var(--schrift-headline); color: var(--farbe-signal-text); }
.lk-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-bottom: 12px; border-bottom: 3px double var(--farbe-dunkel); font: 400 1.25rem/1.25 var(--schrift-headline); }
.lk-nr { font: 500 .9375rem/1.6 var(--schrift-text); color: var(--farbe-leise); }
.lk-nr i { font-style: normal; display: inline-block; min-width: 9rem; border-bottom: 1px dashed var(--farbe-leise); }
.lk-felder > div { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 4px 18px; padding: 13px 0; border-bottom: 1px solid #D9E2E6; }
.lk-felder dt { font: 600 .8125rem/1.7 var(--schrift-text); letter-spacing: .07em; text-transform: uppercase; color: var(--farbe-signal-text); }
.lk-felder dd { line-height: 1.5; }
.lk-stempel { position: absolute; right: clamp(16px, 2.4vw, 30px); bottom: 18px; padding: 4px 12px; border: 2px solid var(--farbe-dunkel); border-radius: 6px; color: var(--farbe-dunkel); font: 700 .8125rem/1.3 var(--schrift-text); letter-spacing: .1em; text-transform: uppercase; rotate: -7deg; opacity: .85; }
@media (max-width: 959px) { .neu-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .lk-felder > div { grid-template-columns: minmax(0, 1fr); } .lk-stempel { position: static; display: inline-block; margin-top: 14px; } .leerkarte { rotate: none; } }

/* ------------------------------------------------------------------ Kosten-Verweis mit großer Zahl (Startseite) */
.kv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
.kv-text p { margin-top: 18px; max-width: 46ch; }
.kv-zahl { display: grid; gap: 8px; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-gross); background: var(--farbe-karte); text-decoration: none; transition: translate var(--dauer-hover-aus) var(--ease-aus); }
.kv-label { font: 400 1.25rem/1.25 var(--schrift-headline); padding-bottom: 12px; border-bottom: 3px double var(--farbe-dunkel); }
.kv-betrag { font: 500 var(--monument-zahl)/1 var(--schrift-text); letter-spacing: -.04em; color: var(--farbe-dunkel); padding-block: 10px 4px; white-space: nowrap; }
.kv-fuss { color: var(--farbe-leise); font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) { .kv-zahl:hover { translate: 0 -6px; transition: translate var(--dauer-hover-ein) var(--ease-karte); } .kv-zahl:hover .kv-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; } }
@media (max-width: 959px) { .kv { grid-template-columns: minmax(0, 1fr); } }
.team-verweis { margin-top: 22px; padding-top: 16px; border-top: 3px double var(--farbe-dunkel); }
.team-verweis .textlink { display: flex; width: max-content; }

/* ------------------------------------------------------------------ Kartenstapel (Leistungen) */
.stapel-reiter { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; scroll-padding-inline: 24px; }
.stapel-reiter::-webkit-scrollbar { display: none; }
.stapel-reiter [role="tab"] { flex: none; min-height: 48px; padding: 10px 15px; font-size: .9375rem; white-space: nowrap; border: 0; border-radius: 12px 12px 0 0; background: #EAE3D5; font-weight: 600; cursor: pointer; translate: 0 6px; transition: translate var(--dauer-hover-aus) var(--ease-aus), background-color var(--dauer-klein) var(--ease); }
.stapel-reiter [role="tab"]:nth-child(even) { background: #E3DBCB; }
.stapel-reiter [role="tab"][aria-selected="true"] { background: #fff; translate: 0 0; color: var(--farbe-text); }
@media (hover: hover) and (pointer: fine) { .stapel-reiter [role="tab"][aria-selected="false"]:hover { translate: 0 -2px; background: #F3EEE4; transition: translate var(--dauer-hover-ein) var(--ease-karte), background-color var(--dauer-klein) var(--ease); } }
.stapel-reiter [role="tab"]:focus-visible { outline-offset: -3px; }
.stapel-karten { position: relative; padding-bottom: 22px; }
.stapel-karten::before, .stapel-karten::after { content: ''; position: absolute; bottom: 0; height: 40px; border-radius: 0 0 var(--radius-gross) var(--radius-gross); }
.stapel-karten::before { left: 12px; right: 12px; bottom: 11px; background: #EFE9DD; }
.stapel-karten::after { left: 26px; right: 26px; background: #E4DCCC; z-index: -0; }
.stapel-karte { position: relative; z-index: 1; background: #fff; border-radius: 0 var(--radius-gross) var(--radius-gross) var(--radius-gross); padding: clamp(24px, 3.4vw, 52px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(28px, 4vw, 56px); align-items: start; }
.stapel-karte.mit-bild { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
.stapel-karte h3 { font: 400 clamp(2rem, 1.3rem + 2.2vw, 3.25rem)/1.05 var(--schrift-headline); letter-spacing: -.012em; }
.stapel-karte .antwort { margin-top: 16px; max-width: 52ch; line-height: 1.55; }
.stapel-karte h4 { margin-top: 24px; }
.sk-ablauf { list-style: none; padding: 0; margin-top: 8px; }
.sk-ablauf li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--farbe-karte-linie); }
.sk-ablauf li .tab { font: 600 1rem/1.6 var(--schrift-text); color: var(--farbe-signal-text); }
.sk-weiter { margin-top: 6px; }
.sk-felder { border-top: 3px double var(--farbe-dunkel); }
.sk-felder > div { padding: 14px 0; border-bottom: 1px solid var(--farbe-karte-linie); }
.sk-felder dt { font: 600 .8125rem/1.6 var(--schrift-text); letter-spacing: .07em; text-transform: uppercase; color: var(--farbe-leise); }
.sk-felder dd { margin-top: 4px; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.sk-felder div:first-child dd { font: 400 1.5rem/1.2 var(--schrift-headline); }
.sk-bild .bildkarte img { aspect-ratio: 4 / 5; }
@media (max-width: 1059px) { .stapel-karte.mit-bild { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .stapel-karte.mit-bild .sk-bild { grid-column: 2; grid-row: 1 / 3; } }
@media (max-width: 767px) {
  .stapel-reiter { mask-image: linear-gradient(to right, #000 82%, transparent); margin-right: calc(-1 * var(--raster-rand)); padding-right: 40px; }
  .stapel-karte, .stapel-karte.mit-bild { grid-template-columns: minmax(0, 1fr); border-radius: 0 0 var(--radius-gross) var(--radius-gross); }
  .stapel-karte.mit-bild .sk-bild { grid-column: auto; grid-row: auto; }
  .sk-bild .bildkarte img { aspect-ratio: 4 / 3; }
}
/* Signatur „Karte ziehen“: die neue Karte steigt aus dem Stapel, hebt sich kurz und setzt sich (480 ms) */
@keyframes karte-zug { 0% { translate: 0 34px; opacity: 0; } 30% { opacity: 1; } 100% { translate: 0 0; } }
html:not(.ruhig):not(.ruhig-system) .stapel-karte.zieht, html:not(.ruhig):not(.ruhig-system) .ta-panel.zieht { animation: karte-zug var(--dauer-karte-zug) var(--ease-karte) both; }
.kapitel-kurz { padding-block: calc(var(--raum-sektion) * .4 + var(--radius-gross)) calc(var(--raum-sektion) * .6); }
.kapitel-kurz .naechste { margin-top: 0; }

/* ------------------------------------------------------------------ Verlauf auf der Karte (Zahnbehandlung) */
.verlauf-karte { position: relative; background: #fff; border-radius: 6px var(--radius-gross) var(--radius-gross) var(--radius-gross); padding: clamp(22px, 3vw, 40px); --rand-linie: clamp(7.5rem, 5rem + 6vw, 10.5rem); }
.vl-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-bottom: 12px; border-bottom: 3px double var(--farbe-dunkel); font: 400 clamp(1.25rem, 1rem + .8vw, 1.625rem)/1.2 var(--schrift-headline); }
.vl-kopf span:last-child { font: 600 .875rem/2 var(--schrift-text); letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-leise); }
.verlauf { list-style: none; padding: 0; background: linear-gradient(to right, transparent calc(var(--rand-linie) - 12px), #E6B8A2 calc(var(--rand-linie) - 12px), #E6B8A2 calc(var(--rand-linie) - 10.5px), transparent calc(var(--rand-linie) - 10.5px)); }
.verlauf li { display: grid; grid-template-columns: calc(var(--rand-linie) - 24px) minmax(0, 1fr) 3rem; gap: 0 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #D9E2E6; }
.vl-wann { font-weight: 600; color: var(--farbe-dunkel); }
.vl-eintrag { font-size: 1.0625rem; max-width: 62ch; }
.vl-eintrag b { font-weight: 600; }
.vl-kuerzel { justify-self: end; font: 400 1.25rem/1 var(--schrift-headline); color: var(--farbe-signal-text); rotate: -6deg; }
.vl-fuss { margin-top: 14px; }
@media (max-width: 599px) {
  .verlauf { background: none; }
  .verlauf li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .vl-wann { grid-column: 1; }
  .vl-kuerzel { grid-column: 2; grid-row: 1; }
  .vl-eintrag { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ Kosten: Skala, Musterkarte */
.got-skala { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
.skala-achse { grid-column: 1 / -1; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
.skala-achse li { display: grid; gap: 2px; padding: 0 12px 12px 14px; border-left: 2px solid var(--farbe-dunkel); }
.sk-faktor { font: 500 clamp(1.5rem, .9rem + 2.6vw, 3.5rem)/1 var(--schrift-text); letter-spacing: -.03em; }
.sk-betrag { font-size: .9375rem; color: var(--farbe-leise); font-weight: 500; }
.skala-spur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 14px 18px; border-radius: 12px; }
.skala-name { font-weight: 700; }
.sp-sprechstunde { grid-column: 1 / 4; background: var(--farbe-karte); }
.sp-notdienst { grid-column: 2 / 5; background: var(--farbe-dunkel); color: #fff; }
.sp-notdienst .skala-text { color: var(--farbe-tanne-hell); }
.skala-fuss { margin-top: 24px; max-width: 64ch; }
@media (max-width: 599px) { .skala-achse li { padding: 0 4px 10px 8px; } .sk-betrag { font-size: .8125rem; } .skala-spur { padding: 12px 12px; } }
.muster-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.musterkarte { position: relative; background: #fff; border-radius: 6px var(--radius-gross) var(--radius-gross) var(--radius-gross); padding: clamp(22px, 3vw, 40px); box-shadow: inset 0 0 0 1px var(--farbe-karte-linie); }
.mk-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding-bottom: 12px; border-bottom: 3px double var(--farbe-dunkel); font: 400 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.2 var(--schrift-headline); }
.mk-nr { font: 600 1rem/1 var(--schrift-text); color: var(--farbe-signal-text); }
.mk-tier { margin-left: auto; font: 500 .9375rem/1.4 var(--schrift-text); color: var(--farbe-leise); }
.mk-posten { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: lining-nums tabular-nums; }
.mk-posten th, .mk-posten td { padding: 11px 10px 11px 0; border-bottom: 1px solid #D9E2E6; text-align: left; vertical-align: baseline; }
.mk-posten td { text-align: right; white-space: nowrap; font-weight: 500; }
.mk-posten td:last-child { padding-right: 0; }
.mk-posten thead th { font-size: .875rem; font-weight: 600; color: var(--farbe-leise); }
.mk-posten thead th:not(:first-child) { text-align: right; }
.mk-posten tbody th { font-weight: 400; }
.mk-zwischen th, .mk-zwischen td { border-top: 1.5px solid var(--farbe-dunkel); font-weight: 600 !important; }
.mk-summe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; margin-top: 6px; padding-top: 12px; border-top: 3px double var(--farbe-dunkel); }
.mk-summe-label { font: 400 1.5rem/1 var(--schrift-headline); }
.mk-summe-zahl { font: 500 var(--monument-zahl)/1 var(--schrift-text); letter-spacing: -.04em; color: var(--farbe-dunkel); white-space: nowrap; }
.mk-unterschrift { display: grid; gap: 4px; margin-top: 18px; }
.unterschrift-schrift { justify-self: start; font: oblique 10deg 400 1.75rem/1.1 var(--schrift-headline); color: var(--farbe-dunkel); rotate: -3deg; padding: 0 18px 4px 2px; border-bottom: 1px solid var(--farbe-text); }
.mk-bild .bildkarte { rotate: 1.4deg; }
.mk-bild .bildkarte img { aspect-ratio: 4 / 5; }
.mk-erklaer { margin-top: 22px; font: 400 1.25rem/1.4 var(--schrift-headline); }
@media (max-width: 959px) { .muster-raster { grid-template-columns: minmax(0, 1fr); } .mk-bild { max-width: 420px; } }
@media (max-width: 599px) {
  .mk-posten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mk-posten tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding: 10px 0; border-bottom: 1px solid #D9E2E6; }
  .mk-posten th, .mk-posten td { border: 0; padding: 0; font-size: .9375rem; }
  .mk-posten tbody th { grid-column: 1 / -1; }
  .mk-posten td:nth-of-type(1) { color: var(--farbe-leise); text-align: left; }
  .mk-posten td:nth-of-type(2) { display: none; }
  .mk-posten td:last-child { grid-column: 2; }
  .mk-posten tr:has(th[colspan]) { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-posten tr:has(th[colspan]) th { grid-column: 1; }
  .mk-posten tr:has(th[colspan]) td { grid-column: 2; color: inherit; text-align: right; }
  .mk-zwischen { border-top: 1.5px solid var(--farbe-dunkel) !important; }
  .mk-zwischen th, .mk-zwischen td { border-top: 0; }
}

/* ------------------------------------------------------------------ Team: Karteikarten mit Fotoecken und Unterschrift */
.team-raster { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 44px var(--raster-spalt); }
@media (min-width: 1140px) { .team-raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.teamkarte { position: relative; background: #fff; border-radius: 4px var(--radius-gross) var(--radius-gross) var(--radius-gross); padding: 14px 14px 18px; display: flex; flex-direction: column; transition: translate var(--dauer-hover-aus) var(--ease-aus); }
.mini-reiter { position: absolute; bottom: 100%; left: 0; padding: 6px 14px 4px; border-radius: 10px 10px 0 0; background: inherit; font: 400 1rem/1 var(--schrift-headline); color: var(--farbe-signal-text); }
.tk-foto { position: relative; display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
  background: linear-gradient(135deg, var(--farbe-dunkel) 0 13px, transparent 13px) top left / 30px 30px no-repeat,
              linear-gradient(225deg, var(--farbe-dunkel) 0 13px, transparent 13px) top right / 30px 30px no-repeat,
              linear-gradient(45deg, var(--farbe-dunkel) 0 13px, transparent 13px) bottom left / 30px 30px no-repeat,
              linear-gradient(315deg, var(--farbe-dunkel) 0 13px, transparent 13px) bottom right / 30px 30px no-repeat, #D3DDD0; }
.tk-foto svg { position: absolute; inset: 12% 10% 0; width: 80%; height: 88%; }
.pt-kopf { fill: #2F5A51; }
.pt-koerper { fill: #fff; }
.pt-kragen { fill: none; stroke: var(--farbe-dunkel); stroke-width: 3; stroke-linejoin: round; }
.pt-schild { fill: var(--farbe-signal); }
.tk-kurz { display: none; }
.tk-folgt { position: absolute; left: 12px; bottom: 10px; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .86); font: 500 .8125rem/1.4 var(--schrift-text); color: var(--farbe-dunkel); rotate: -2deg; }
.tk-klein { width: 72px; } .tk-klein .tk-folgt { display: none; }
.tk-gross { width: 140px; }
.teamkarte h3 { margin-top: 14px; font-size: 1.1875rem; }
.rolle { color: var(--farbe-leise); font-size: .9375rem; margin-top: 2px; }
.teamkarte .karte-pfeil { position: absolute; right: 22px; top: 22px; color: var(--farbe-dunkel); z-index: 1; }
.mini-feld { margin-top: 12px; display: grid; gap: 0; }
.teamkarte .mini-feld > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.mini-feld > div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--farbe-karte-linie); font-size: .9375rem; }
.mini-feld dt { color: var(--farbe-leise); }
.unterschrift { margin-top: auto; padding-top: 18px; }
.unterschrift span { display: block; padding: 0 0 2px 2px; border-bottom: 1px solid var(--farbe-text); font: oblique 10deg 400 clamp(1.0625rem, .8rem + .5vw, 1.25rem)/1.15 var(--schrift-headline); letter-spacing: -.01em; color: var(--farbe-dunkel); rotate: -2.5deg; white-space: nowrap; }
.unterschrift::after { content: 'Unterschrift'; display: block; margin-top: 4px; font-size: .8125rem; color: var(--farbe-leise); }
@media (hover: hover) and (pointer: fine) { .teamkarte.klickbar:hover { translate: 0 -6px; transition: translate var(--dauer-hover-ein) var(--ease-karte); } }
@media (max-width: 599px) {
  .team-raster { gap: 8px; }
  .teamkarte { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 10px; border-radius: 12px; }
  .teamkarte .tk-foto { grid-row: 1; width: 68px; }
  .teamkarte .tk-folgt, .teamkarte .mini-reiter, .teamkarte .unterschrift, .teamkarte .mini-feld .mf-schwer, .teamkarte .mini-feld .mf-sprache { display: none; }
  .teamkarte h3 { margin-top: 0; font-size: 1.0625rem; }
  .teamkarte .rolle { font-size: .875rem; }
  .teamkarte .mini-feld { margin-top: 4px; }
  .teamkarte .mini-feld > div { display: flex; gap: 6px; padding: 0; border: 0; font-size: .875rem; }
  .teamkarte .karte-pfeil { top: 50%; translate: 0 -50%; right: 14px; }
}

/* ------------------------------------------------------------------ Praxis: Räume, Stellen */
.raeume { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(28px, 4vw, 64px); align-items: start; }
.raeume .grundriss { width: 100%; height: auto; max-width: none; }
.gr-aussen { fill: #fff; stroke: var(--farbe-dunkel); stroke-width: 3; }
.gr-r-hell { fill: var(--farbe-karte); } .gr-r-op { fill: var(--farbe-dunkel); } .gr-r-katze { fill: #C9D5C6; } .gr-r-empfang { fill: #F1E2C8; } .gr-r-hund { fill: var(--farbe-flaeche); }
.gr-tresen { fill: var(--farbe-signal); opacity: .9; }
.gr-weg { fill: none; stroke: var(--farbe-signal); stroke-width: 3.5; stroke-dasharray: 8 7; stroke-linecap: round; }
.gr-nr circle { fill: var(--farbe-dunkel); }
.gr-nr-t text { font: 700 15px var(--schrift-text); fill: #fff; text-anchor: middle; }
.gr-raum text { font: 400 20px var(--schrift-headline); fill: var(--farbe-text); text-anchor: middle; }
.gr-raum .gr-hell { fill: #fff; }
.gr-tuer { fill: var(--farbe-signal); }
.gr-klein { font: 500 14px var(--schrift-text); fill: var(--farbe-text); }
.raum-liste { list-style: none; padding: 0; counter-reset: none; }
.raum-liste li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--farbe-karte-linie); }
.rm-nr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--farbe-dunkel); color: #fff; font-weight: 700; font-size: .9375rem; margin-top: 1px; }
.raum-liste h3 { font-size: 1.0625rem; }
.raum-liste p { margin-top: 2px; font-size: .9375rem; }
@media (max-width: 959px) { .raeume { grid-template-columns: minmax(0, 1fr); } }
.stellen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px var(--raster-spalt); margin-top: var(--reiter-hoehe); }
.stellenkarte h3 { font: 400 clamp(1.375rem, 1.1rem + .9vw, 1.875rem)/1.15 var(--schrift-headline); padding-bottom: 12px; border-bottom: 3px double var(--farbe-dunkel); }
.stellenkarte .lk-felder > div { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); }
.bewerben { margin-top: 32px; display: grid; gap: 8px; max-width: 70ch; font-size: 1.0625rem; }
@media (max-width: 767px) { .stellen { grid-template-columns: minmax(0, 1fr); } .stellenkarte .lk-felder > div { grid-template-columns: minmax(0, 1fr); } }
.verweis-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 1.125rem; }

/* ------------------------------------------------------------------ Notdienst: Nummer als Monument */
.nd-monument { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px clamp(28px, 4vw, 56px); align-items: end; padding: clamp(22px, 3vw, 40px); margin-bottom: var(--raster-spalt); border-radius: var(--radius-gross); background: var(--farbe-flaeche); }
.monument { display: block; margin: 10px 0 12px; font: 500 var(--monument-tel)/1 var(--schrift-text); letter-spacing: -.035em; color: var(--farbe-dunkel); text-decoration: none; white-space: nowrap; }
.monument:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
.nd-gebuehr { display: grid; gap: 8px; padding-left: 20px; border-left: 3px double var(--farbe-dunkel); }
.monument-zahl { font: 500 var(--monument-zahl)/1 var(--schrift-text); letter-spacing: -.04em; color: var(--farbe-dunkel); white-space: nowrap; }
@media (max-width: 959px) { .nd-monument { grid-template-columns: minmax(0, 1fr); } .nd-gebuehr { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 3px double var(--farbe-dunkel); } }

/* ------------------------------------------------------------------ Karten heben sich (Hover der Leitidee: Karte ziehen) */
.lz { transition: background-color var(--dauer-klein) var(--ease); padding-inline: 8px; margin-inline: -8px; }
@media (hover: hover) and (pointer: fine) {
  .lz:hover { background: var(--farbe-grund); }
  .klickbar-bild .bildkarte { transition: translate var(--dauer-hover-aus) var(--ease-aus); }
  .klickbar-bild:hover .bildkarte { translate: 0 -6px; transition: translate var(--dauer-hover-ein) var(--ease-karte); }
  .stellenkarte, .ansprech { transition: translate var(--dauer-hover-aus) var(--ease-aus); }
  .ansprech:hover { translate: 0 -6px; transition: translate var(--dauer-hover-ein) var(--ease-karte); }
}

/* ------------------------------------------------------------------ Fuß am Telefon kürzer */
@media (max-width: 599px) {
  .fuss { padding-block: 32px 40px; }
  .kasten-reiter ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-bottom: 24px; }
  .kasten-reiter a { min-height: 44px; padding: 0 10px; font-size: .875rem; }
  .fuss-raster { gap: 22px; }
  .fuss-raster > .fuss-spalte:nth-child(3) { display: none; }
  .fuss-spalte .leise { display: none; }
  .fuss-unten { padding-top: 16px; }
}
.kasten-reiter a.ist-oben { background: #2F5A51; }

/* ------------------------------------------------------------------ Auftritt der Startseite (intro-ohne-wartezeit)
   Kopf, Notdienst-Karte, Foto und Knöpfe stehen ab dem ersten Bild. Der Kasten zeigt sich: die Reiter der anderen
   Karten fächern nacheinander hinter der Startkarte auf (480 ms, 70 ms versetzt, --ease-karte), die H1-Zeilen
   steigen aus Masken (300 ms, 40 ms versetzt), das Tagesdatum wird gestempelt. Ende nach etwa 1000 ms, abbrechbar. */
@keyframes zeile-auf { from { translate: 0 105%; } }
@keyframes stempeln { from { opacity: 0; scale: 1.14; } }
@keyframes register-auf { from { translate: 0 100%; } }
html.mit-intro .held .zeile > span { animation: zeile-auf var(--dauer-gross) var(--ease) both; animation-delay: calc(40ms + var(--i) * var(--stagger)); }
html.mit-intro .held .stempel { animation: stempeln var(--dauer-gross) var(--ease) 200ms both; }
html.mit-intro .register li { animation: register-auf var(--dauer-karte-zug) var(--ease-karte) both; animation-delay: calc(120ms + var(--i) * 70ms); }
html.mit-intro .held > .seitenreiter { animation: register-auf var(--dauer-karte-zug) var(--ease-karte) both; }

/* ------------------------------------------------------------------ Seitenwechsel: Karte aus dem Kasten ziehen (vt-cross-document-mpa)
   Der Kopf steht (kopf), die mobile Leiste steht (unten). Der Reiter wandert zur Stelle der Zielseite (reiter).
   Die neue Karte wird mit Gewicht von unten über die alte gezogen (gerundete Oberkante, Schatten), die alte sinkt
   ein wenig zurück in den Kasten. 620 ms (zurück 580 ms), --ease-karte (Abweichung von der Partitur, siehe LIESMICH), nie zwei Textebenen.
   Zurück (Browser-Zurück): die obere Karte sinkt nach unten weg und gibt die frühere frei. */
::view-transition-group(*) { animation-duration: var(--dauer-karte); animation-timing-function: var(--ease-karte); }
::view-transition-old(root) { animation: karte-sinkt var(--dauer-karte) var(--ease-karte) both; transform-origin: 50% 0; }
::view-transition-new(root) { animation: karte-ziehen var(--dauer-karte) var(--ease-karte) both; }
@keyframes karte-ziehen { from { translate: 0 100%; border-radius: 28px 28px 0 0; box-shadow: 0 -18px 48px rgba(31, 36, 33, .22); } to { translate: 0 0; border-radius: 0; box-shadow: 0 0 0 rgba(31, 36, 33, 0); } }
@keyframes karte-sinkt { to { scale: .965; filter: brightness(.86); } }
html:active-view-transition-type(zurueck)::view-transition-group(*) { animation-duration: var(--dauer-karte-zurueck); animation-timing-function: var(--ease-karte-zurueck); }
html:active-view-transition-type(zurueck)::view-transition-new(root) { animation: karte-hebt var(--dauer-karte-zurueck) var(--ease-karte-zurueck) both; transform-origin: 50% 0; }
html:active-view-transition-type(zurueck)::view-transition-old(root) { z-index: 1; animation: karte-zurueck var(--dauer-karte-zurueck) var(--ease-karte-zurueck) both; }
@keyframes karte-zurueck { from { translate: 0 0; border-radius: 0; box-shadow: 0 0 0 rgba(31, 36, 33, 0); } to { translate: 0 100%; border-radius: 28px 28px 0 0; box-shadow: 0 -18px 48px rgba(31, 36, 33, .22); } }
@keyframes karte-hebt { from { scale: .965; filter: brightness(.86); } }
::view-transition-group(reiter) { z-index: 3; }
/* Bild → Bild: dasselbe Foto im selben Format, darum wandert nur das alte Bild und wird am Ende ersetzt (kein Blassbild, falls das neue noch dekodiert) */
::view-transition-old(bild-zahn), ::view-transition-old(person-thamsen) { animation: none; opacity: 1; }
::view-transition-new(bild-zahn), ::view-transition-new(person-thamsen) { animation: none; opacity: 0; }
::view-transition-group(bild-zahn), ::view-transition-group(person-thamsen) { z-index: 2; }
::view-transition-group(kopf), ::view-transition-group(unten) { z-index: 4; }
::view-transition-old(reiter) { animation: reiter-weg var(--dauer-schliessen) linear both; }
::view-transition-new(reiter) { animation: reiter-her var(--dauer-karte) linear both; }
@keyframes reiter-weg { to { opacity: 0; } }
@keyframes reiter-her { 0%, 33% { opacity: 0; } }

/* ------------------------------------------------------------------ Reduzierte Bewegung (System oder Schalter im Fuß) */
html.ruhig, html.ruhig-system { --dauer-karte: 150ms; --dauer-karte-zurueck: 150ms; --dauer-karte-zug: 0ms; --dauer-fuellung: 150ms; --dauer-klein: 150ms; --dauer-mittel: 150ms; --dauer-gross: 150ms; --dauer-seitenwechsel: 150ms; --dauer-schliessen: 100ms; --dauer-hover-ein: 150ms; --dauer-hover-aus: 100ms; --dauer-rezept-2: 0ms; --stagger: 0ms; }
html.ruhig .seitenreiter, html.ruhig-system .seitenreiter { view-transition-name: none; }
html.ruhig *, html.ruhig *::before, html.ruhig *::after { animation-duration: 0ms !important; animation-delay: 0ms !important; }
html.ruhig .knopf::before, html.ruhig-system .knopf::before { transition: none; }
html.ruhig .knopf:hover::before, html.ruhig-system .knopf:hover::before { clip-path: circle(150% at 50% 50%); transition: none; }
html.ruhig .klickbar:hover .karte-pfeil, html.ruhig .klickbar:hover .mini-reiter, html.ruhig .textlink:hover .pfeil, html.ruhig .kasten-reiter a, html.ruhig .ta-reiter [role="tab"]:hover,
html.ruhig-system .klickbar:hover .karte-pfeil, html.ruhig-system .klickbar:hover .mini-reiter, html.ruhig-system .textlink:hover .pfeil, html.ruhig-system .ta-reiter [role="tab"]:hover { translate: none; }
html.ruhig .teamkarte, html.ruhig .kv-zahl, html.ruhig .klickbar-bild .bildkarte, html.ruhig .ansprech, html.ruhig .register a, html.ruhig .stapel-reiter [role="tab"], html.ruhig-system .teamkarte, html.ruhig-system .kv-zahl, html.ruhig-system .klickbar-bild .bildkarte, html.ruhig-system .ansprech, html.ruhig-system .register a, html.ruhig-system .stapel-reiter [role="tab"] { translate: none !important; }
html.ruhig .klickbar:active, html.ruhig .knopf:active, html.ruhig-system .klickbar:active, html.ruhig-system .knopf:active { scale: none; }
html.ruhig .f-kopf, html.ruhig .f-ohr, html.ruhig .f-schwanz, html.ruhig .f-pupille, html.ruhig-system .f-kopf, html.ruhig-system .f-ohr, html.ruhig-system .f-schwanz, html.ruhig-system .f-pupille { transition: none; rotate: none !important; translate: none !important; }
html.ruhig .stempel, html.ruhig-system .stempel { rotate: -1.5deg; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0ms !important; }
  ::view-transition-old(root) { animation: vt-aus 100ms linear both !important; }
  ::view-transition-new(root) { animation: vt-ein 150ms linear both !important; }
  .ak::details-content, .ak[open]::details-content { transition-duration: 0ms; }
  .blatt[open], .dialog[open] { animation: vt-ein 150ms linear; }
}
html:active-view-transition-type(ruhig)::view-transition-group(*) { animation-duration: 0ms; }
html:active-view-transition-type(ruhig)::view-transition-old(root) { animation: vt-aus 100ms linear both; }
html:active-view-transition-type(ruhig)::view-transition-new(root) { animation: vt-ein 150ms linear both; }
@keyframes vt-aus { to { opacity: 0; } }
@keyframes vt-ein { from { opacity: 0; } }
html.ruhig .ak::details-content, html.ruhig .ak[open]::details-content { transition-duration: 0ms; }
html.ruhig .blatt[open], html.ruhig .dialog[open] { animation: vt-ein 150ms linear !important; }

/* ------------------------------------------------------------------ Kontrastmodus (kontrastmodus-forced-colors) */
@media (forced-colors: active) {
  .karte, .kapitel, .karteifeld, .notkarte, .bildkarte, .teamkarte, .kosten-feld, .formular, .hinweis, .ta-panel, .seitenreiter, .kapitel-reiter { border: 1px solid CanvasText; }
  .knopf, .knopf-hafer, .kopf-notfall, .wahl span, .themen button, .ta-reiter [role="tab"] { border: 1px solid ButtonText; }
  .ta-reiter [role="tab"][aria-selected="true"], .themen button[aria-pressed="true"] { outline: 2px solid Highlight; }
  .punkt { border: 1px solid CanvasText; }
  ::highlight(treffer) { background-color: Highlight; color: HighlightText; }
  .ph { border-bottom-color: CanvasText; }
}
.leise .ph, .feld-hilfe .ph { color: var(--farbe-text); }

.fuss .leise .ph { color: #fff; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .seitenreiter { width: max-content; min-width: var(--reiter-breite); max-width: calc(100% - var(--reiter-links) - 6px); padding: 0 12px; gap: 6px; }
  .reiter-wort { font-size: .875rem; }
  .karteifeld dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ------------------------------------------------------------------ Empfangshund auf der Karte „Tierarten“ (Signatur früh und groß)
   Die Figur sitzt mit den Pfoten auf der Oberkante der Tierarten-Karte, die Sprechkarte links daneben antwortet auf den Reiter.
   Kein Scroll-Auftritt (Partitur), Bewegung nur bei Auswahl: Zustandswechsel 200 ms, Hüpfer 420 ms. */
.ta-buehne { margin-bottom: 0; }
.ta-buehne > p { margin-bottom: clamp(20px, 3vw, 40px); }
.empfang { display: flex; align-items: flex-start; justify-content: flex-end; gap: 4px; pointer-events: none; }
.empfang-satz { position: relative; align-self: flex-start; margin-top: 8px; max-width: 19ch; hyphens: manual; padding: 16px 20px 18px; border-radius: 20px 20px 4px 20px; background: var(--farbe-karte); box-shadow: 0 1px 0 rgba(35, 64, 58, .08), 0 14px 30px -18px rgba(35, 64, 58, .45); font: 400 clamp(1.125rem, .8rem + 1vw, 1.75rem)/1.2 var(--schrift-headline); color: var(--farbe-dunkel); text-wrap: balance; }
.empfang-satz::after { content: ""; position: absolute; right: -9px; bottom: 14px; width: 18px; height: 14px; background: inherit; clip-path: polygon(0 0, 100% 60%, 0 100%); }
.figur-empfang { flex: none; width: clamp(200px, 14vw + 100px, 320px); }
@media (min-width: 960px) {
  .ta-buehne h2 { grid-column: 1 / 7; grid-row: 1; }
  .ta-buehne > p { grid-column: 1 / 7; grid-row: 2; }
  .ta-buehne .empfang { grid-column: 7 / 13; grid-row: 1 / 3; align-self: end; position: relative; z-index: 2; margin-bottom: calc(-54px - .056 * clamp(200px, 14vw + 100px, 320px)); }
}
@media (max-width: 959px) {
  .ta-buehne .empfang { grid-column: 1 / -1; justify-content: flex-start; flex-direction: row-reverse; justify-content: flex-end; margin-bottom: 8px; }
  .figur-empfang { width: 132px; }
  .empfang-satz { margin-top: 18px; border-radius: 20px 20px 20px 4px; }
  .empfang-satz::after { right: auto; left: -9px; clip-path: polygon(100% 0, 0 60%, 100% 100%); }
}
@keyframes hopst { 0% { translate: 0 0; } 38% { translate: 0 -14px; } 70% { translate: 0 2px; } 100% { translate: 0 0; } }
@keyframes satz-neu { 0% { opacity: .2; translate: 0 8px; } 100% { opacity: 1; translate: 0 0; } }
html:not(.ruhig):not(.ruhig-system) .figur-empfang.hopst svg { animation: hopst 420ms var(--ease) both; }
html:not(.ruhig):not(.ruhig-system) .empfang-satz.hopst { animation: satz-neu var(--dauer-karte-zug) var(--ease-karte) both; }
/* Formular: am Telefon größer und vor dem ersten Feld */
@media (max-width: 959px) { .rr-figur { grid-template-columns: 136px minmax(0, 1fr); } .rr-figur .figur { width: 136px; } .figur-zeile { font: 400 1.25rem/1.25 var(--schrift-headline); } }

/* ==================================================================== Feinschliff 05.11.2026 (Jury 2: 7/10)
   Bildwelt, Kopf, Telefon, tote Flächen, Seitenwechsel, Satz. Bewusst als ein Block am Ende, damit die Änderungen
   gegenüber der Fassung der Jury nachvollziehbar bleiben. */

/* ------------------------------------------------------------------ Satz: Eigennamen, Prüfvermerke */
.name { hyphens: manual; -webkit-hyphens: manual; }
.pv { display: none; }
html.pruefmodus .pv { display: inline; padding: 0 .25em; border-radius: 3px; background: #FFF1C2; color: var(--farbe-text); border-bottom: 1.5px dotted currentColor; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pruefliste { margin-top: 8px; padding-left: 20px; display: grid; gap: 4px; }

/* ------------------------------------------------------------------ Kopf: eine Navigationsebene, Zusatz einzeilig, Status einzeilig */
.marke-zeichen { flex: none; }
.marke-zusatz, .erreichbar-text span { white-space: nowrap; }
@media (min-width: 960px) { .kopf-start .hauptnav { display: none; } }
/* Register auf der Startseite ist die Navigation: höhere Reiter, größere Schrift */
@media (min-width: 960px) {
  .held { --reiter-hoehe: 54px; }
  .held > .seitenreiter .reiter-wort, .held > .seitenreiter .reiter-nr { font-size: 1.0625rem; }
  .register a { font-size: 1.0625rem; padding: 0 20px; gap: 10px; }
}
@media (min-width: 960px) and (max-width: 1100px) { .register a { padding: 0 12px; font-size: .9375rem; } }
/* Intro: der Kasten fächert sichtbar auf (größer, etwas gekippt, 90 ms versetzt) */
@keyframes register-faecher { from { translate: 0 108%; rotate: -4deg; } 62% { rotate: .6deg; } }
html.mit-intro .register li { transform-origin: 0 100%; animation: register-faecher 560ms var(--ease-karte) both; animation-delay: calc(140ms + var(--i) * 90ms); }

/* ------------------------------------------------------------------ Seitenwechsel: sofort quittieren, Ladelinie, kurze Fassung zum Notdienst */
.kopf::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--farbe-signal); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
html.wechselt .kopf::after { opacity: 1; animation: ladelinie 1400ms cubic-bezier(.16, .84, .3, 1) both; }
@keyframes ladelinie { from { transform: scaleX(.04); } to { transform: scaleX(.88); } }
html.ruhig.wechselt .kopf::after, html.ruhig-system.wechselt .kopf::after { animation: none; transform: scaleX(1); }
.register a.gedrueckt, .kasten-reiter a.gedrueckt { translate: 0 -6px; background: var(--farbe-karte); color: var(--farbe-text); transition: none; }
.nav-link.gedrueckt { background: var(--farbe-flaeche); text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 8px; }
.unten a.gedrueckt, .kopf-notfall.gedrueckt { scale: .95; }
.knopf.gedrueckt { scale: .97; }
.knopf.gedrueckt::before { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); transition: none; }
.klickbar-bild.gedrueckt .bildkarte, .klickbar:has(.karte-link.gedrueckt), .kv-zahl.gedrueckt, .lk-alle.gedrueckt { translate: 0 -8px; transition: translate 140ms var(--ease-ein); }
.textlink.gedrueckt .pfeil, .naechste.gedrueckt .pfeil, .lk-alle.gedrueckt .pfeil { translate: 8px 0; transition: translate 140ms var(--ease-ein); }
.lz:has(.gedrueckt) { background: var(--farbe-grund); }
html.ruhig .gedrueckt, html.ruhig-system .gedrueckt, html.ruhig .gedrueckt .pfeil, html.ruhig-system .gedrueckt .pfeil, html.ruhig .klickbar:has(.gedrueckt), html.ruhig-system .klickbar:has(.gedrueckt) { translate: none !important; scale: none !important; }
html:active-view-transition-type(kurz)::view-transition-group(*), html:active-view-transition-type(kurz)::view-transition-old(root), html:active-view-transition-type(kurz)::view-transition-new(root), html:active-view-transition-type(kurz)::view-transition-new(reiter) { animation-duration: 360ms; }
html:active-view-transition-type(kurz)::view-transition-old(reiter) { animation-duration: 120ms; }
/* geteiltes Bild hin und zurück: im Format der Zielkarte beschneiden statt verzerren */
::view-transition-old(bild-zahn), ::view-transition-new(bild-zahn) { height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ Bildwelt: Zeichnungen im Strich des Empfangshunds */
.t-fell { fill: var(--farbe-dunkel); }
.t-dunkel { fill: #2F5A51; }
.t-hell { fill: var(--farbe-flaeche); }
.t-akzent { fill: var(--farbe-signal); }
.t-grund { fill: var(--farbe-grund); }
.t-text { fill: var(--farbe-text); }
.t-strich, .t-strich-d, .t-strich-a, .t-strich-k, .t-fuge { fill: none; stroke-linecap: round; }
.t-strich { stroke: var(--farbe-grund); stroke-width: 1.6; }
.t-strich-d { stroke: var(--farbe-text); stroke-width: 2.4; }
.t-strich-a { stroke: #2F5A51; stroke-width: 2.2; }
.t-strich-k { stroke: var(--farbe-signal); stroke-width: 2.2; }
.t-fuge { stroke: var(--farbe-dunkel); stroke-width: 3; }
.zeichnungskarte .pferd { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 12px; }
/* Porträtfeld: Monogramm mit Gewicht und das Tier der Person, statt „Foto folgt“ */
.tk-foto.pk { container-type: inline-size; background: var(--farbe-flaeche); }
.pk-mono { position: absolute; left: 8%; top: 5%; font: 400 40cqw/1 var(--schrift-headline); letter-spacing: -.04em; color: var(--farbe-dunkel); }
.tk-foto.pk .pk-tier { position: absolute; inset: auto -3% 0 auto; width: 74%; height: auto; }
.pk-unter { margin-top: auto; padding-top: 14px; font-size: .875rem; color: var(--farbe-leise); }
.tk-gross { width: min(100%, 300px); }
.person-feld .tk-gross { width: 100%; max-width: 340px; }
@media (max-width: 599px) { .teamkarte .pk-unter { display: none; } }

/* ------------------------------------------------------------------ Kosten: Stempel statt gesetzter Unterschrift */
.mk-stempel { justify-self: start; display: inline-grid; gap: 2px; padding: 8px 16px 9px; border: 2.5px solid var(--farbe-signal-text); border-radius: 8px; color: var(--farbe-signal-text); rotate: -4deg; font: 700 .8125rem/1.2 var(--schrift-text); letter-spacing: .1em; text-transform: uppercase; opacity: .9; margin-bottom: 6px; }
.mk-stempel b { font-size: 1.125rem; letter-spacing: .18em; }

/* ------------------------------------------------------------------ Tote Flächen */
/* Start, „Was wir machen“: Bild und Liste enden gemeinsam, die Ecke unten rechts trägt den Weg zu allen Karten */
.lk-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.lk-bild { display: flex; flex-direction: column; }
.lk-bild .bildkarte { flex: 1 1 auto; min-height: 0; }
.lk-bild .bildkarte img { flex: 1 1 auto; height: 0; min-height: 340px; }
.lk-liste { display: flex; flex-direction: column; }
.lk-liste .leistungs-zeilen { columns: auto; }
.lk-alle { margin-top: auto; display: grid; gap: 6px; padding: 18px 22px 20px; border-radius: var(--radius-gross); background: var(--farbe-flaeche); text-decoration: none; transition: translate var(--dauer-hover-aus) var(--ease-aus); }
.lk-alle .label { color: var(--farbe-signal-text); font-size: .8125rem; }
.lk-alle-text { display: flex; align-items: center; gap: 14px; font: 400 clamp(1.25rem, 1rem + .6vw, 1.5rem)/1.2 var(--schrift-headline); }
.lk-alle .pfeil { transition: translate var(--dauer-hover-aus) var(--ease-aus); }
@media (hover: hover) and (pointer: fine) { .lk-alle:hover { translate: 0 -4px; transition: translate var(--dauer-hover-ein) var(--ease-karte); } .lk-alle:hover .pfeil { translate: 4px 0; transition: translate var(--dauer-hover-ein) var(--ease-ein); } }
@media (max-width: 767px) { .lk-bild .bildkarte img { flex: none; height: auto; min-height: 0; aspect-ratio: 4 / 3; } .lk-alle { margin-top: 18px; } }
/* Erster Besuch: Text oben bündig mit der Karte und beim Lesen mitgeführt */
@media (min-width: 960px) { .neu-raster { align-items: start; } .neu-text { padding-top: calc(var(--reiter-hoehe) + 8px); position: sticky; top: 110px; } }
/* Sprechblase des Empfangshunds: höchstens zwei Zeilen */
.empfang-satz { flex: 0 1 auto; min-width: 0; width: clamp(250px, 20vw + 40px, 340px); max-width: none; font-size: clamp(1.125rem, .85rem + .6vw, 1.4375rem); text-wrap: balance; }
@media (min-width: 960px) {
  .figur-empfang { width: clamp(180px, 8vw + 110px, 240px); }
  .ta-buehne .empfang { margin-bottom: calc(-54px - .056 * clamp(180px, 8vw + 110px, 240px)); }
}
@media (max-width: 959px) { .empfang-satz { width: auto; max-width: 30ch; } }
/* Rückruf: Formular breit, rechts Hund und Rückruf-Karte */
.rr-seite { position: sticky; top: 110px; display: grid; gap: 22px; align-content: start; }
.rr-seite .rr-figur { position: static; }
.rr-figur .figur { width: min(100%, 230px); }
.rr-karte { background: var(--farbe-karte); }
.rr-karte dl > div { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); }
@media (max-width: 959px) { .rr-seite { position: static; order: -1; } .rr-karte { display: none; } }

/* ------------------------------------------------------------------ Telefon */
.unten-anruf { background: var(--farbe-dunkel); color: #fff; }
@media (max-width: 959px) { html { scroll-padding-block: 84px 88px; } }
.zeiten-tabelle th { padding-right: 12px; }
@media (max-width: 420px) { .zeiten-tabelle tr.heute th::after { display: table; margin: 6px 0 0; } }
/* Lageskizze und Grundriss: eigene Fassung fürs Telefon, Beschriftung mindestens 12 px */
.nur-schmal { display: none; }
@media (max-width: 767px) { svg.nur-breit { display: none; } svg.nur-schmal { display: block; } }
.sk-m { font: 500 16px var(--schrift-text); fill: var(--farbe-text); }
.sk-m-gross { font: 400 24px var(--schrift-headline); }
.sk-m.sk-hell { fill: #fff; font-size: 16px; font-weight: 700; }
.gr-nr-m text { font: 700 15px var(--schrift-text); fill: #fff; text-anchor: middle; }
.gr-raum-m text { font: 600 14.5px var(--schrift-text); fill: var(--farbe-text); text-anchor: middle; }
.gr-raum-m .gr-hell { fill: #fff; }
.gr-klein-m { font: 500 14px var(--schrift-text); fill: var(--farbe-text); }
.grundriss-schmal { width: 100%; height: auto; }
/* Reiter der Personenseite nie abgeschnitten */
.seitenkopf-person > .seitenreiter { width: max-content; min-width: var(--reiter-breite); max-width: none; }
.seitenkopf-person > .seitenreiter .reiter-wort { overflow: visible; }
@media (max-width: 599px) { .seitenkopf-person { --pos: 2 !important; } }
/* Menü: Unterkarten eingerückt unter ihrer Hauptkarte */
.blatt nav .blatt-unter a { padding: 8px 0 10px 22px; font-size: 1.1875rem; color: var(--farbe-leise); }
.blatt nav .blatt-unter a[aria-current="page"] { color: var(--farbe-signal-text); }
.feld-paar { align-items: start; }
.feld { align-content: start; }
.rr-karte dd { hyphens: manual; }
.band-warten img { aspect-ratio: 21 / 9; object-position: 42% 45%; }
@media (max-width: 767px) { .band-warten img { aspect-ratio: 4 / 3; } }
.pk-mono { font-size: 34cqw; }
.tk-foto.pk .pk-tier { width: 84%; right: -4%; }
.tk-foto.pk.pk-vogel .pk-tier { width: 92%; }
/* Kurze Telefone (bis 700 px Höhe): erster Bildschirm zeigt die Telefonnummer über der unteren Leiste */
@media (max-width: 599px) and (max-height: 700px) {
  .held { padding-top: 14px; }
  .held .stempel { font-size: .8125rem; padding: 4px 10px; }
  .held .zeilen { margin-top: 12px; }
  .held h1, .seitenkopf-text h1 { font-size: 2rem; }
  .held .lead, .seitenkopf-text .lead { font-size: 1rem; line-height: 1.45; margin-top: 12px; }
  .held-wege { margin-top: 16px; gap: 8px 20px; }
  .seitenkopf { padding-top: 18px; }
  .seitenkopf-text h1 { margin-top: 12px; }
  .krumen ol { padding-bottom: 8px; }
  .seitenkopf-raster { row-gap: 20px; }
}
/* Telefon: Zusatz bleibt einzeilig, dafür trägt der Menü-Knopf nur das Symbol (Name bleibt für Screenreader) */
@media (max-width: 479px) {
  .marke { gap: 8px; }
  .marke-zusatz { font-size: .75rem; }
  .kopf-menue span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kopf-menue { padding: 10px; }
}
@media (max-width: 767px) { .lk-raster { grid-template-columns: minmax(0, 1fr); } }
/* Ladelinie vom ersten Bild an sichtbar; geteiltes Bild: im letzten Drittel weich ins Zielformat überblenden statt umspringen */
@keyframes ladelinie { from { transform: scaleX(.2); } to { transform: scaleX(.9); } }
@keyframes bild-alt-weg { 0%, 68% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bild-neu-her { 0%, 68% { opacity: 0; } 100% { opacity: 1; } }
::view-transition-old(bild-zahn), ::view-transition-old(person-thamsen) { animation: bild-alt-weg var(--dauer-karte) linear both; }
::view-transition-new(bild-zahn), ::view-transition-new(person-thamsen) { animation: bild-neu-her var(--dauer-karte) linear both; }
html:active-view-transition-type(zurueck)::view-transition-old(bild-zahn), html:active-view-transition-type(zurueck)::view-transition-old(person-thamsen) { animation-duration: var(--dauer-karte-zurueck); }
html:active-view-transition-type(zurueck)::view-transition-new(bild-zahn), html:active-view-transition-type(zurueck)::view-transition-new(person-thamsen) { animation-duration: var(--dauer-karte-zurueck); }
/* Sprunglinks nebeneinander statt übereinander (Kontrastmodus: keine Überdeckung) */
.sprung a:nth-child(2) { left: 152px; }
.sprung a:nth-child(3) { left: 322px; }