/* Landesverbund Nord der Kehlkopfoperierten – öffentliche Website
   Farben und Schriften aus dem bisherigen Auftritt, Schrift größer und kontrastreicher. */

@font-face { font-family: "Dosis"; font-weight: 500; font-display: swap; src: url("../fonts/dosis-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Dosis"; font-weight: 600; font-display: swap; src: url("../fonts/dosis-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Dosis"; font-weight: 700; font-display: swap; src: url("../fonts/dosis-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
    --blau: #2a4194;
    --blau-dunkel: #1d2f6f;
    --blau-hell: #eef1fa;
    --gruen: #4e8a2a;        /* etwas dunkler als bisher (#619429) für bessere Lesbarkeit */
    --gruen-dunkel: #3d6d20;
    --rot: #b42318;
    --text: #1a1a1a;
    --text-leise: #4a4a4a;
    --linie: #d6dbe8;
    --weiss: #ffffff;
    --radius: 10px;
    --breite: 1320px;
    --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --titel: "Dosis", "Trebuchet MS", sans-serif;
    font-size: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
    background: var(--weiss);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); text-underline-offset: .15em; }
a:hover { color: var(--blau-dunkel); }
:focus-visible { outline: 3px solid #f2a900; outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, .h3 { font-family: var(--titel); font-weight: 600; line-height: 1.15; color: var(--blau); margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
h3, .h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; }
.gross { font-size: 1.5rem; font-weight: 700; }
.optional { font-weight: 400; color: var(--text-leise); }

.container { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--blau); color: #fff; padding: 12px 20px; z-index: 100; }
.skip-link:focus { left: 10px; top: 10px; }

/* ---------- Kopfzeile */
.site-header { background: #fff; border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 88px; }
.logo img { width: 220px; height: auto; }
.main-nav { flex: 1; }
.main-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 0 clamp(14px, 1.8vw, 26px); justify-content: flex-end; align-items: center; }
.main-nav a { display: block; padding: 10px 0; font-weight: 700; font-size: .9rem; color: var(--text); text-decoration: none; white-space: nowrap; }
.main-nav .nav-kontakt a { background: var(--blau); color: #fff; padding: 10px 20px; border-radius: 30px; }
.main-nav .nav-kontakt a:hover, .main-nav .nav-kontakt a[aria-current] { background: var(--blau-dunkel); color: #fff; text-decoration: none; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--blau); text-decoration: underline; text-decoration-thickness: 3px; }
.main-nav .has-sub { position: relative; }
.main-nav .has-sub > a::after { content: " ▾"; color: var(--blau); }
.main-nav .sub { list-style: none; margin: 0; padding: 8px 0; position: absolute; left: -16px; top: 100%; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.12); min-width: 230px; display: none; }
.main-nav .sub a { padding: 10px 18px; font-weight: 500; }
.main-nav .has-sub:hover .sub, .main-nav .has-sub:focus-within .sub { display: block; }
.nav-toggle { display: none; }

@media (max-width: 1080px) {
    .header-inner { min-height: 76px; flex-wrap: wrap; }
    .main-nav .nav-kontakt a { display: inline-block; margin: 8px 0; }
    .logo img { width: 180px; }
    .nav-toggle { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font: 700 1rem var(--schrift); background: var(--blau); color: #fff; border: 0; border-radius: 8px; padding: 12px 18px; cursor: pointer; min-height: 48px; }
    .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 22px; height: 3px; background: #fff; border-radius: 2px; position: relative; }
    .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
    .nav-toggle-icon::before { top: -7px; }
    .nav-toggle-icon::after { top: 7px; }
    .main-nav { display: none; flex-basis: 100%; order: 3; padding-bottom: 12px; }
    .main-nav.offen { display: block; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .main-nav > ul { flex-direction: column; gap: 0; align-items: stretch; }
    .main-nav > ul > li { border-top: 1px solid var(--linie); }
    .main-nav a { padding: 14px 4px; font-size: 1.05rem; }
    .main-nav .sub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 8px 16px; }
    .main-nav .sub a { padding: 10px 4px; }
}

/* ---------- Titelbild mit Schnellmenü */
.hero {
    position: relative;
    background: #ddd url("../img/header.webp") center 30% / cover no-repeat;
    color: #fff;
    min-height: min(78vh, 720px);
    display: flex;
    align-items: flex-end;
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,20,60,.55) 0%, rgba(10,20,60,.25) 50%, rgba(10,20,60,0) 80%), linear-gradient(0deg, rgba(10,20,60,.35) 0%, rgba(10,20,60,0) 45%); }
.hero-inner { position: relative; padding-top: 120px; padding-bottom: 64px; }
.hero-text { max-width: min(900px, 62vw); }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.05; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.hero-text p { font-size: 1.1rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); margin-bottom: .3em; }

/* Schnellmenü: kommt wie bisher aus dem rechten Bildschirmrand */
.schnellmenue { position: absolute; right: 0; bottom: 56px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.schnellmenue a {
    display: flex; align-items: center; gap: 20px;
    width: clamp(300px, 22vw, 380px);
    background: var(--blau); color: #fff; text-decoration: none;
    font-family: var(--titel); font-weight: 600; font-size: 1.5rem;
    min-height: 54px; padding: 0 24px 0 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transform: translateX(28px);
    transition: transform .2s ease, background .2s ease;
}
.schnellmenue a img { width: 54px; height: 54px; border-radius: 50%; flex: none; margin-left: -27px; }
.schnellmenue a:hover, .schnellmenue a:focus-visible { background: var(--blau-dunkel); color: #fff; transform: translateX(0); }
.schnellmenue a span { padding-left: 4px; }
@media (max-width: 1100px) {
    .hero-inner { padding-bottom: 300px; }
}
@media (max-width: 860px) {
    .hero { min-height: 0; }
    .hero-inner { padding-top: 140px; padding-bottom: 48px; }
    .hero-text { max-width: none; }
    .schnellmenue { display: none; }
}

/* ---------- Abschnitte */
.section { padding: 96px 0; }
.section-hell { background: var(--blau-hell); }
.section-blau { background: var(--blau); color: #fff; }
.section-blau h2, .section-blau h3, .section-blau a:not(.btn) { color: #fff; }
.welle { height: 22px; background: var(--blau) url("../img/welle-weiss.webp") center / 1400px 12px repeat-x; }
.seitenkopf { background: var(--blau); color: #fff; padding: 48px 0 40px; }
.seitenkopf h1 { color: #fff; margin-bottom: .2em; font-size: clamp(1.9rem, 4.4vw, 3rem); }
.seitenkopf p { margin: 0; font-size: 1.1rem; }
.brotkrumen { font-size: .9rem !important; margin-bottom: .6em !important; }
.brotkrumen a { color: #fff; }

/* Text breiter als Bild (etwa 60/40), viel Luft dazwischen */
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split-umgekehrt { grid-template-columns: 1fr 1.55fr; }
.split-umgekehrt > :first-child { order: 2; }
.split-termin { align-items: start; grid-template-columns: 1.6fr 1fr; }
@media (max-width: 860px) {
    .split, .split-umgekehrt, .split-termin { grid-template-columns: 1fr; gap: 32px; }
    .split-umgekehrt > :first-child { order: 0; }
    .section { padding: 56px 0; }
}

.prose { max-width: 72ch; }
.split > .prose, .zwei-spalten .prose { max-width: 860px; }
.prose-schmal { max-width: 780px; }
.prose h2 { margin-top: 1.2em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }

.bild-rund img { border-radius: 0 0 0 300px; object-fit: cover; width: 100%; max-height: 540px; }
.bild-rund-links img { border-radius: 0 0 300px 0; }

/* ---------- Knöpfe */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--blau); color: #fff; text-decoration: none; font-weight: 700;
    border: 2px solid transparent; border-radius: 40px; padding: 12px 26px; min-height: 50px;
    font-size: 1rem; font-family: var(--schrift); cursor: pointer; margin: 4px 8px 4px 0;
}
.btn:hover { background: var(--blau-dunkel); color: #fff; }
.btn-gruen { background: var(--gruen); }
.btn-gruen:hover { background: var(--gruen-dunkel); }
.btn-weiss { background: #fff; color: var(--blau) !important; }
.btn-weiss:hover { background: var(--blau-hell); }
.btn-gross { font-size: 1.15rem; padding: 16px 36px; min-height: 60px; }

.kreis { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; background: var(--blau); color: #fff; font-weight: 700; flex: none; font-size: .9em; }
.link-icon { display: inline-flex; align-items: center; gap: 12px; font-family: var(--titel); font-weight: 600; font-size: 1.3rem; text-decoration: none; color: var(--text); }
.link-icon .kreis { font-family: Georgia, serif; font-size: 1.1rem; }
.link-pfeil { font-weight: 700; }
.link-pfeil::after { content: " →"; }
.link-klein { font-size: .9rem; }

/* ---------- Regionen-Icons */
.regionen-icons { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.regionen-icons a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titel); font-weight: 600; font-size: 1.2rem; padding: 14px; border-radius: var(--radius); }
.regionen-icons a:hover { background: rgba(255,255,255,.1); }
.regionen-icons img { width: 120px; height: 120px; object-fit: contain; }
.section:not(.section-blau) .regionen-icons a { color: var(--blau); }
.section:not(.section-blau) .regionen-icons a:hover { background: var(--blau-hell); }

/* ---------- Karten */
.karten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.karten-raster-breit { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
@media (max-width: 420px) { .karten-raster, .karten-raster-breit { grid-template-columns: 1fr; } }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px; box-shadow: 0 4px 16px rgba(42,65,148,.06); }
.section-hell .karte { border-color: transparent; }
.karte h2 a, .karte h3 a { text-decoration: none; }
.karte h2 a:hover, .karte h3 a:hover { text-decoration: underline; }
.klinik-stadt { color: var(--text-leise); margin-top: -.3em; }
.gruppe-rhythmus { font-size: 1.1rem; color: var(--blau); }
.gruppe-naechste-titel { font-weight: 700; margin-bottom: .2em; }
.gruppe-naechste { margin: 0 0 .6em; padding-left: 1.2em; }
.gruppe-naechste .faellt-aus { text-decoration: line-through; color: var(--rot); }
.gruppe-ort { background: var(--blau-hell); border-radius: 8px; padding: 14px 18px; margin: 14px 0; }
.gruppe-ort-titel { font-weight: 700; color: var(--blau); margin-bottom: .2em; }
.gruppe-ort p:last-child { margin-bottom: 0; }
.anfahrt { margin: 12px 0; }
.anfahrt summary { cursor: pointer; font-weight: 700; color: var(--blau); padding: 8px 0; }

.personen { display: grid; gap: 14px; margin-top: 16px; }
.person { border-left: 4px solid var(--blau); padding: 4px 0 4px 16px; }
.person-name { font-family: var(--titel); font-weight: 600; font-size: 1.25rem; margin: 0; color: var(--text); }
.person-rolle { margin: 0 0 6px; color: var(--text-leise); font-size: .95rem; }
.person-kontakt { display: flex; align-items: center; gap: 10px; padding: 5px 0; text-decoration: none; word-break: break-word; font-weight: 500; }
.person-kontakt:hover { text-decoration: underline; }
.person-kontakt .kreis { width: 1.8em; height: 1.8em; }

.sprungliste { background: var(--blau-hell); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 28px; }
.sprungliste p { font-weight: 700; margin-bottom: .4em; }
.sprungliste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }

.badge { display: inline-block; background: var(--gruen); color: #fff; font-weight: 700; font-size: .85rem; border-radius: 30px; padding: 4px 14px; margin: 0 0 10px; }
.badge a { color: #fff; }
.badge-grau { background: #5b6170; }
.badge-rot { background: var(--rot); }

/* ---------- Termine */
.termin-liste { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.termin-item { display: flex; gap: 20px; background: #fff; border-radius: var(--radius); padding: 18px 22px; border: 1px solid var(--linie); align-items: flex-start; }
.termin-datum { flex: none; width: 76px; text-align: center; background: var(--blau); color: #fff; border-radius: 8px; padding: 8px 4px; font-family: var(--titel); line-height: 1.05; }
.termin-gruppe .termin-datum { background: var(--gruen); }
.termin-faellt-aus .termin-datum { background: #888; }
.termin-datum .tag { display: block; font-size: 2rem; font-weight: 700; }
.termin-datum .monat { display: block; font-size: 1rem; font-weight: 600; text-transform: uppercase; }
.termin-info h3 { margin-bottom: .2em; font-size: 1.3rem; }
.termin-info h3 a { text-decoration: none; }
.termin-info h3 a:hover { text-decoration: underline; }
.termin-meta { color: var(--text-leise); margin-bottom: .4em; }
.termin-box { position: sticky; top: 120px; }
.kalender-abo { color: var(--text-leise); }
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter a { border: 2px solid var(--blau); border-radius: 30px; padding: 8px 18px; text-decoration: none; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.filter a[aria-current] { background: var(--blau); color: #fff; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 20px 0; }
.galerie img { border-radius: 8px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.bericht-karte img { border-radius: 6px; aspect-ratio: 16/10; object-fit: cover; width: 100%; margin-bottom: 14px; }

/* ---------- Formulare */
.formular { display: grid; gap: 18px; max-width: 640px; }
.feld label { display: block; font-weight: 700; margin-bottom: 6px; }
.feld input:not([type="checkbox"]), .feld select, .feld textarea {
    width: 100%; font: inherit; padding: 13px 15px; border: 2px solid #8a93a8; border-radius: 8px; background: #fff; min-height: 52px;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--blau); outline: 3px solid rgba(42,65,148,.25); }
.feld-kurz input { max-width: 160px; }
.feld-check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.feld-check input { width: 28px; height: 28px; margin: 2px 0 0; accent-color: var(--blau); }
.feld-check label { font-weight: 500; }
.feld-check .feld-fehler { grid-column: 1 / -1; }
.hat-fehler input:not([type="checkbox"]), .hat-fehler select, .hat-fehler textarea { border-color: var(--rot); }
.feld-fehler { color: var(--rot); font-weight: 700; margin: 6px 0 0; }
.feld-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hinweis { border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; font-weight: 600; font-size: 1.05rem; }
.hinweis-erfolg { background: #e5f4dc; color: #234d10; border: 2px solid var(--gruen); }
.hinweis-fehler { background: #fde8e6; color: #7a1a12; border: 2px solid var(--rot); }

/* ---------- Kontakt-Band, Sponsor, Fußzeile */
.kontakt-band { background: #fff; padding: 48px 0 8px; }
.kontakt-band h2 { margin-bottom: .3em; }
.kontakt-wege { display: flex; flex-wrap: wrap; gap: 14px 120px; margin-top: 18px; }
.kontakt-weg { display: inline-flex; align-items: center; gap: 14px; font-size: 1.1rem; min-height: 48px; color: var(--text); text-decoration: underline; }
.kontakt-weg .icon-kreis { width: 40px; height: 40px; }
.kontakt-weg .icon-kreis svg { width: 20px; height: 20px; }
.welle-leuchtturm { overflow: hidden; margin-top: 24px; }
.welle-leuchtturm img { display: block; width: 100%; min-width: 900px; height: auto; margin-left: auto; position: relative; left: 50%; transform: translateX(-50%); }
.sponsor .sponsor-logo img { max-width: 260px; margin: 0 auto; }
.spenden { margin: 28px 0; }

.site-footer { background: #fff; padding-top: 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding-bottom: 36px; }
.footer-title { font-family: var(--titel); font-size: 1.2rem; color: var(--text); margin-bottom: .6em; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links a { display: inline-block; padding: 5px 0; color: var(--text); text-decoration: none; }
.footer-links a:hover { color: var(--blau); text-decoration: underline; }
.footer-bottom { background: #f3f3f3; padding: 18px 0; font-size: .85rem; color: var(--text-leise); }
.footer-bottom a { color: var(--text-leise); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    .site-header, .kontakt-band, .site-footer, .schnellmenue, .btn { display: none !important; }
    .section-blau, .seitenkopf { background: none; color: #000; }
}

/* ---------- Seitenkopf mit Titelbild (wie bisher) */
.seitenkopf-bild { position: relative; min-height: 420px; display: flex; align-items: flex-end; padding: 120px 0 48px; overflow: hidden; background: var(--blau-dunkel); }
.seitenkopf-hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seitenkopf-bild::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,60,.05) 30%, rgba(10,20,60,.7) 100%); z-index: 1; }
.seitenkopf-inhalt { position: relative; z-index: 2; }
.seitenkopf-bild h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.seitenkopf-text { font-size: 1.15rem !important; text-shadow: 0 1px 6px rgba(0,0,0,.5); max-width: 720px; }
@media (max-width: 700px) { .seitenkopf-bild { min-height: 300px; padding-top: 90px; } }

/* ---------- Runde Fotos bis an den Bildschirmrand (wie bisher) */
.split-oben { align-items: start; }
.blase { margin: 0; align-self: start; }
.blase img { width: 100%; height: auto; display: block; }
.blase-rechts { justify-self: end; margin-right: calc(-1 * ((100vw - min(100vw, var(--breite))) / 2 + 20px)); }
.blase-links { justify-self: start; margin-left: calc(-1 * ((100vw - min(100vw, var(--breite))) / 2 + 20px)); }
.blase-rechts img { clip-path: circle(60% at 42% 48%); max-width: 640px; margin-left: auto; }
.blase-links img { clip-path: circle(60% at 58% 48%); max-width: 640px; }
/* Schon rund freigestellte Fotos (wie auf der bisherigen Website) nicht noch einmal beschneiden */
.blase-fertig img { clip-path: none; }
@media (min-width: 861px) {
    .section-mit-blase { padding-top: 0; padding-bottom: 0; }
    .section-mit-blase .prose { padding-top: 96px; padding-bottom: 72px; }
    .section-mit-blase .split-umgekehrt .prose, .section-mit-blase .split:not(.split-oben) .prose { padding-top: 72px; }
    .section-mit-blase .blase { margin-top: 0; }
}
@media (max-width: 860px) {
    /* Auf dem Handy: alle Fotos als sauberer Kreis, mittig */
    .blase, .blase-links, .blase-rechts { justify-self: center; margin: 8px auto 0; width: min(86vw, 420px); max-width: none; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
    .blase-links { order: 2; }
    .blase img, .blase-rechts img, .blase-links img { clip-path: none; width: 100%; height: 100%; object-fit: cover; max-width: none; margin: 0; }
    /* Schon rund freigestellte Fotos etwas vergrößern, damit ihre Ränder im Kreis verschwinden */
    .blase-fertig img { transform: scale(1.12); transform-origin: 50% 30%; object-position: 50% 20%; }
    .section-mit-blase { padding-bottom: 56px; }
}
.bild-rund { display: none; }

/* ---------- Landkarten */
.landkarte { width: 100%; max-width: 640px; margin: 0 auto; }
.landkarte-gross { max-width: 760px; margin: 24px auto 36px; }
.karte-svg { width: 100%; height: auto; display: block; }
.karte-land { fill: var(--blau); stroke: #fff; stroke-linejoin: round; }
.karte-nachbar { fill: #e3e7f2; stroke: #fff; stroke-linejoin: round; }
.karte-beschriftung { font-family: var(--titel); font-weight: 600; fill: var(--blau); }
.karte-trenner { stroke: var(--linie); }
.karte-land-hervor { fill: var(--gruen); stroke: #fff; stroke-linejoin: round; }
.karte-punkt circle { fill: var(--gruen); stroke: #fff; transition: fill .15s; }
.karte-punkt path { fill: #fff; pointer-events: none; }
.karte-punkt-pausiert circle { fill: #8a93a8; }
.karte-punkt:hover circle, .karte-punkt:focus circle { fill: var(--gruen-dunkel); }
.karte-punkt:focus { outline: none; }
.karte-punkt:focus-visible circle { stroke: #f2a900; }

/* ---------- Kliniken */
.karte-klinik { display: flex; flex-direction: column; }
.klinik-foto { width: 130px; height: 130px; object-fit: cover; border-radius: 50%; margin: -4px 0 14px; background: var(--blau-hell); }
.zertifikat { display: flex; align-items: center; gap: 16px; background: var(--blau-hell); border-radius: var(--radius); padding: 12px 16px; }
.zertifikat img { width: 96px; height: auto; flex: none; }
.adresse { display: flex; gap: 14px; align-items: flex-start; }
.personen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.person-kontakt { overflow-wrap: anywhere; }
.person-gross { background: #fff; border-left: 0; border-radius: var(--radius); padding: 26px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.person-gross .person-kontakt { justify-content: center; }
.person-foto { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; background: var(--blau-hell); }
.person-foto-leer { display: inline-flex; align-items: center; justify-content: center; font-family: var(--titel); font-weight: 700; font-size: 2.6rem; color: var(--blau); }

/* ---------- Symbole */
.icon-kreis { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blau); color: #fff; flex: none; }
.icon-kreis svg { width: 26px; height: 26px; }

/* ---------- „So finden Sie uns!" */
.finden { position: relative; color: #fff; padding: 64px 0; overflow: hidden; background: var(--blau-dunkel); }
.finden-hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finden::before { content: ""; position: absolute; inset: 0; background: rgba(29,47,111,.86); z-index: 1; }
.finden-inhalt { position: relative; z-index: 2; text-align: center; }
.finden h2 { color: #fff; }
.finden a { color: #fff; }
.finden-spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 28px 0; }
.finden-spalte { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.finden-spalte p { margin: 0; }
.finden .icon-kreis { background: #fff; color: var(--blau); width: 64px; height: 64px; }
.finden .icon-kreis svg { width: 32px; height: 32px; }
.finden-foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; background: #fff; }
.finden-anfahrt { max-width: 820px; margin: 0 auto 1em; }
.finden-ausfall { display: inline-block; background: #fff; color: var(--rot); font-weight: 700; border-radius: 8px; padding: 8px 16px; }
@media (max-width: 860px) { .finden-spalten { grid-template-columns: 1fr; } }

/* ---------- Gruppen als Liste (wie bisher in Niedersachsen) */
.gruppen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gruppe-zeile { display: grid; grid-template-columns: minmax(180px, 1fr) 2.2fr; gap: 10px 28px; background: var(--blau); color: #fff; border-radius: 14px; padding: 18px 24px; scroll-margin-top: 110px; }
.gruppe-zeile:target { outline: 4px solid var(--gruen); }
.gruppe-zeile a { color: #fff; }
.gruppe-zeile-ort strong { display: block; font-family: var(--titel); font-size: 1.35rem; font-weight: 600; }
.gruppe-zeile-status { display: block; font-size: .92rem; opacity: .92; }
.gruppe-zeile-blass { background: #5b6787; }
.gruppe-zeile-personen { display: grid; gap: 8px; }
.gruppe-zeile-person { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; }
@media (max-width: 700px) { .gruppe-zeile { grid-template-columns: 1fr; } }

.spenden-qr { float: right; width: 120px; height: auto; margin: 0 0 12px 16px; }

/* ---------- Broschüren */
.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.download { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); padding: 22px; }
.download > a:first-child { display: flex; align-items: center; justify-content: center; height: 220px; background: var(--blau-hell); border-radius: 8px; margin-bottom: 18px; padding: 14px; }
.download img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.download > div { display: flex; flex-direction: column; flex: 1; }
.download h3 { font-size: 1.25rem; }
.download .btn { margin-top: auto; align-self: flex-start; }
.download-groesse { font-size: .85rem; color: var(--text-leise); }

/* ---------- Seiten aus Bausteinen */
.seitenkopf-gross { min-height: 560px; padding-bottom: 56px; }
.seitenkopf-gross::before { background: linear-gradient(180deg, rgba(10,20,60,0) 35%, rgba(10,20,60,.55) 100%); }
.seitenkopf-gross h1, .seitenkopf-gross h2 { color: #fff; font-size: clamp(2.2rem, 5.2vw, 3.9rem); text-shadow: 0 2px 14px rgba(0,0,0,.35); max-width: 1000px; }
@media (max-width: 700px) { .seitenkopf-gross { min-height: 340px; } }
.seitenkopf-schlicht { padding: 64px 0 8px; }
.seitenkopf-schlicht h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: .25em; }
.seitenkopf-schlicht-text { font-size: 1.1rem; max-width: 1000px; margin: 0; }
.seitenkopf-schlicht + .baustein:not(.section-hell):not(.section-blau) { padding-top: 40px; }
.abschnitt-titel { text-align: center; margin-bottom: 1.2em; }
.prose-breit { max-width: 1000px; }
.prose h3 { font-size: 1.25rem; margin: 1.6em 0 .3em; }
.baustein-knopf { margin-top: 1.2em; }
.baustein-bilder { margin: 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-end; }
.baustein-bilder img { width: auto; max-width: min(440px, 100%); height: auto; display: block; }
.baustein-text_bild .split:not(.split-oben) { align-items: start; }
.baustein-text_bild .abschnitt-titel + .split { align-items: center; }
.split-umgekehrt .baustein-bilder { align-items: flex-start; }
.baustein + .baustein:not(.section-hell):not(.section-blau):not(.section-mit-blase) { padding-top: 0; }
.section-hell + .baustein, .section-blau + .baustein { padding-top: 96px !important; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.zwei-spalten .prose { max-width: none; }
.spalte-bild { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; margin-top: 8px; }
.spalte-bild figure { margin: 0; }
.spalte-bild figcaption { font-family: var(--titel); font-weight: 600; line-height: 1.2; margin-bottom: 8px; max-width: 150px; }
.spalte-bild img { width: 140px; height: auto; display: block; }
.spalte-bild p { margin: 0 0 .25em; }
@media (max-width: 860px) { .zwei-spalten { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 480px) { .spalte-bild { grid-template-columns: 1fr; } }

.video { position: relative; aspect-ratio: 16 / 9; max-width: 1000px; margin: 0 auto; background: var(--blau-dunkel); border-radius: var(--radius); overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-start { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--blau) 0%, var(--blau-dunkel) 100%); color: #fff; border: 0; cursor: pointer; font: 600 1.4rem var(--titel); padding: 20px; }
.video-start small { font: .95rem var(--schrift); opacity: .85; max-width: 420px; }
.video-symbol { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; color: var(--blau); font-size: 2rem; padding-left: 6px; transition: transform .15s; }
.video-start:hover .video-symbol, .video-start:focus-visible .video-symbol { transform: scale(1.08); }
.video-text { margin: 24px auto 0; }

.downloads-liste { display: flex; flex-direction: column; gap: 56px; }
.download-zeile { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; }
.download-bild img { width: 100%; height: auto; display: block; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.download-zeile h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .3em; }
.download-zeile .download-groesse { display: inline-block; margin-left: 6px; color: var(--text-leise); font-size: .9rem; }
@media (max-width: 600px) { .download-zeile { grid-template-columns: 110px 1fr; gap: 20px; } }

.kontaktformular { max-width: none; }
.formular-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.formular-abschluss { display: flex; justify-content: flex-end; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.formular-abschluss .feld-rechnen { display: flex; align-items: center; gap: 10px; margin: 0; }
.formular-abschluss .feld-rechnen label { margin: 0; font-weight: 400; }
.formular-abschluss .feld-rechnen input { width: 80px; }
.formular-abschluss .btn { margin: 0; }
@media (max-width: 600px) { .formular-reihe { grid-template-columns: 1fr; } }

/* Bildausschnitt beim Seitenkopf (Foto wird auf Breitformat zugeschnitten) */
.seitenkopf-hintergrund.ausschnitt-oben { object-position: 50% 15%; }
.seitenkopf-hintergrund.ausschnitt-mitte { object-position: 50% 50%; }
.seitenkopf-hintergrund.ausschnitt-unten { object-position: 50% 85%; }

/* ---------- Kliniken einer Region: aufklappbare Liste + Karte */
.klinik-einleitung { margin-bottom: 40px; }
.klinik-finder { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.klinik-finder-ohne-karte { grid-template-columns: 1fr; }
.klinik-karte { position: sticky; top: 110px; }
.klinik-karte .landkarte { max-width: none; }
.klinik-karte-hinweis { color: var(--text-leise); font-size: .95rem; text-align: center; margin-top: 10px; }
.klinik-liste { display: flex; flex-direction: column; gap: 12px; }
.klinik-eintrag { background: #fff; border: 2px solid var(--linie); border-radius: 14px; transition: border-color .15s, box-shadow .15s; scroll-margin-top: 110px; }
.klinik-eintrag:hover { border-color: var(--blau); }
.klinik-eintrag[open] { border-color: var(--blau); box-shadow: 0 10px 30px rgba(29,47,111,.12); }
.klinik-eintrag > summary { display: flex; align-items: center; gap: 18px; padding: 14px 20px; cursor: pointer; list-style: none; }
.klinik-eintrag > summary::-webkit-details-marker { display: none; }
.klinik-mini { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--blau-hell); }
.klinik-mini-leer { display: inline-flex; align-items: center; justify-content: center; color: var(--blau); }
.klinik-kopf { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.klinik-name { font-family: var(--titel); font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--blau); }
.klinik-info { color: var(--text-leise); font-size: .95rem; }
.klinik-pfeil { width: 36px; height: 36px; border-radius: 50%; background: var(--blau-hell); flex: none; position: relative; transition: transform .2s, background .2s; }
.klinik-pfeil::after { content: ""; position: absolute; left: 50%; top: 45%; width: 10px; height: 10px; border-right: 3px solid var(--blau); border-bottom: 3px solid var(--blau); transform: translate(-50%, -50%) rotate(45deg); }
.klinik-eintrag[open] .klinik-pfeil { transform: rotate(180deg); background: var(--blau); }
.klinik-eintrag[open] .klinik-pfeil::after { border-color: #fff; }
.klinik-inhalt { padding: 4px 20px 22px 102px; }
.klinik-adresse { display: flex; gap: 12px; align-items: flex-start; color: var(--text-leise); }
.klinik-adresse .icon-kreis { width: 32px; height: 32px; background: var(--blau-hell); color: var(--blau); }
.klinik-adresse .icon-kreis svg { width: 18px; height: 18px; }
.klinik-zusatz { font-size: .95rem; }
.klinik-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px 28px; margin: 6px 0 18px; }
.klinik-mehr { margin: 0; }
.klinik-suche { margin-bottom: 8px; }
.klinik-suche label { display: block; font-weight: 700; margin-bottom: 6px; }
.klinik-suche input { width: 100%; font: inherit; padding: 12px 16px; border: 2px solid var(--linie); border-radius: 10px; }
.klinik-suche input:focus { border-color: var(--blau); outline: 3px solid rgba(42,65,148,.25); }
.karte-punkt.aktiv circle { fill: var(--blau-dunkel); stroke: #fff; }
.karte-punkt.aktiv { filter: drop-shadow(0 0 6px rgba(29,47,111,.55)); }
@media (max-width: 860px) {
    .klinik-finder { grid-template-columns: 1fr; }
    .klinik-karte { position: static; order: -1; }
    .klinik-karte .landkarte { max-width: 420px; margin: 0 auto; }
    .klinik-inhalt { padding-left: 20px; }
}
.klinik-finder > *, .klinik-eintrag, .klinik-kopf, .klinik-personen > * { min-width: 0; }
.klinik-personen .person-kontakt { overflow-wrap: anywhere; }

/* Kein Scroll-Sperren des Body: auf iPhones springt die (sticky) Kopfleiste sonst an den Seitenanfang. Das Menü scrollt selbst. */

.naechste-gruppen { list-style: none; padding: 0; }
.naechste-gruppen li { margin-bottom: .5em; }
.naechste-gruppen a { font-weight: 700; }

/* Testseite (Staging) */
.testseite-band { background: #ffd84d; color: #3d2f00; text-align: center; padding: 8px 16px; font-size: 1rem; }
.testseite-band a { color: inherit; font-weight: 700; }

/* Mehrere Gruppen in einer Region: Karten statt großer Bildblöcke */
.gruppen-unterueberschrift { margin: 40px 0 18px; }
.gruppen-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.gruppe-karte { background: var(--blau-hell); border-radius: 18px; padding: 26px 26px 20px; scroll-margin-top: 110px; }
.gruppe-karte h3 { margin: 0 0 16px; color: var(--blau); }
.gruppe-karte-zeile { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.gruppe-karte-zeile p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.gruppe-karte .icon-kreis { width: 38px; height: 38px; }
.gruppe-karte .icon-kreis svg { width: 19px; height: 19px; }
.gruppe-karte-leise { color: #4a5470; font-size: .95em; }
.gruppe-karte-ausfall { background: #fff; color: var(--rot); font-weight: 700; border-radius: 8px; padding: 6px 12px; margin: 0 0 14px; }
.gruppe-karte:target { outline: 4px solid var(--gruen); }

/* Serientermine */
.termin-serie { list-style: none; padding: 0; margin: 0 0 1em; }
.termin-serie li { margin: 4px 0; }

/* Handy: Klinik-Liste kompakter, lange Namen sauber trennen */
.klinik-name { hyphens: auto; overflow-wrap: break-word; }
.klinik-eintrag > summary, .klinik-eintrag > summary * { text-decoration: none; }
@media (max-width: 600px) {
    .klinik-eintrag > summary { gap: 12px; padding: 12px 14px; }
    .klinik-mini { width: 46px; height: 46px; }
    .klinik-mini-leer svg { width: 22px; height: 22px; }
    .klinik-name { font-size: 1.12rem; line-height: 1.25; }
    .klinik-info { font-size: .88rem; }
    .klinik-pfeil { width: 30px; height: 30px; }
    .klinik-pfeil::after { width: 8px; height: 8px; }
}

/* Formulare: Einwilligung und Rechenaufgabe kompakt */
.feld-check { gap: 10px; align-items: center; }
.feld-check input { width: 22px; height: 22px; margin: 0; }
.feld-check label { font-weight: 400; font-size: .95rem; line-height: 1.45; margin: 0; }
.formular-abschluss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.formular-abschluss .feld-rechnen { flex-wrap: nowrap; }
.formular-abschluss .feld-rechnen label { font-size: .95rem; white-space: nowrap; }
.formular-abschluss .feld-rechnen input { width: 64px; min-height: 44px; padding: 8px 10px; text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }