erst nach dem Laden — ohne diese Regel
rutscht der gesamte Inhalt beim Einsetzen nach unten (gemessen: CLS 0,091 mobil,
sichtbar geworden, nachdem die Seite durch das Vorladen frueher rendert).
+1px fuer den unteren Rahmen der .site-header. */
[data-component="site-header"]:empty { display: block; min-height: calc(var(--hoehe-header) + 1px); }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 44px; width: auto; }
.nav-toggle { display: none; background: none; border: 1px solid var(--farbe-rand); border-radius: var(--radius-s); padding: .45rem .65rem; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--farbe-navy); }
.main-nav ul { list-style: none; display: flex; gap: .15rem; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav a { display: block; padding: var(--raum-2) var(--raum-3); border-radius: var(--radius-s); text-decoration: none; color: var(--farbe-navy); font-weight: var(--staerke-halbfett); font-size: .97rem; }
.main-nav a:hover { background: var(--farbe-bg-leise); color: var(--farbe-primaer); }
.main-nav a[aria-current="page"] { color: var(--farbe-primaer); box-shadow: inset 0 -3px 0 var(--farbe-primaer); border-radius: 0; }
/* --- Hero (Startseite) --- */
.hero { position: relative; color: var(--farbe-text-invers); padding: var(--abschnitt-y) 0; background: var(--farbe-navy); overflow: hidden; }
/* Hero-Hintergrund: WebP mit JPEG-Rueckfall.
Die ERSTE background-Deklaration ist der Rueckfall — Browser ohne image-set()
(sehr alte Geraete) ignorieren die zweite Zeile komplett und behalten das JPEG.
Alle aktuellen Browser nehmen die zweite und laden das WebP (139 statt 270 KB). */
.hero::before {
content: ""; position: absolute; inset: 0;
background: var(--hero-schleier), url("../bilder/hero-hausarzt-albstadt.jpg") center/cover no-repeat;
background: var(--hero-schleier), image-set(url("../bilder/hero-hausarzt-albstadt.webp") type("image/webp"), url("../bilder/hero-hausarzt-albstadt.jpg") type("image/jpeg")) center/cover no-repeat;
z-index: 0;
}
.hero .container { position: relative; z-index: 1; text-align: center; }
.hero h1 { color: var(--farbe-text-invers); }
.hero p { font-size: var(--groesse-lead); margin: 0 auto var(--raum-5); max-width: 42rem; color: var(--farbe-text-invers-leise); }
.hero-aktionen { display: flex; gap: var(--raum-3); flex-wrap: wrap; justify-content: center; }
/* Seiten-Kopf fuer Unterseiten: Petrol-Verlauf UEBER dem Hero-Bild (Struktur
statt Vollton) und FESTE, einheitliche Hoehe auf allen Seiten (Inhalt wird
vertikal zentriert — 1- und 3-zeilige Einleitungen ergeben dieselbe Hoehe). */
/* Unterseiten-Kopf — gleiche WebP/JPEG-Staffelung wie .hero::before (s. dort). */
.page-hero { position: relative; color: var(--farbe-text-invers); display: flex; align-items: center; min-height: var(--hoehe-page-hero); padding: var(--raum-5) 0; background: var(--page-hero-schleier), url("../bilder/hero-hausarzt-albstadt.jpg") center/cover no-repeat; }
.page-hero { background: var(--page-hero-schleier), image-set(url("../bilder/hero-hausarzt-albstadt.webp") type("image/webp"), url("../bilder/hero-hausarzt-albstadt.jpg") type("image/jpeg")) center/cover no-repeat; }
/* Handy: kleinere Hero-Datei (1000 statt 2000 px, 44 statt 139 KB). Deckt auch
Displays mit doppelter Pixeldichte bis 500 CSS-px Breite ab.
ACHTUNG — diese Media Query MUSS direkt hinter ihren Basis-Regeln stehen.
Media Queries erhoehen die Spezifitaet nicht; weiter unten stehende Basis-Regeln
wuerden sie ueberschreiben (dieser Fehler ist am 2026-07-30 schon einmal
aufgetreten, s. Plan DESIGN). */
@media (max-width: 560px) {
.hero::before { background: var(--hero-schleier), url("../bilder/hero-hausarzt-albstadt.jpg") center/cover no-repeat; }
.hero::before { background: var(--hero-schleier), image-set(url("../bilder/hero-hausarzt-albstadt-mobil.webp") type("image/webp"), url("../bilder/hero-hausarzt-albstadt.jpg") type("image/jpeg")) center/cover no-repeat; }
.page-hero { background: var(--page-hero-schleier), url("../bilder/hero-hausarzt-albstadt.jpg") center/cover no-repeat; }
.page-hero { background: var(--page-hero-schleier), image-set(url("../bilder/hero-hausarzt-albstadt-mobil.webp") type("image/webp"), url("../bilder/hero-hausarzt-albstadt.jpg") type("image/jpeg")) center/cover no-repeat; }
}
.page-hero .container { text-align: center; width: 100%; }
.page-hero h1 { color: var(--farbe-text-invers); }
.page-hero p { color: var(--farbe-text-invers-leise); font-size: var(--groesse-lead); margin: 0 auto; max-width: 46rem; }
/* Leichter weisser Glow auf den Hero-Ueberschriften */
.hero h1, .page-hero h1 { text-shadow: 0 0 1px rgba(255,255,255,.35), 0 0 24px rgba(255,255,255,.30); }
/* --- Buttons --- */
.btn { display: inline-block; background: var(--farbe-akzent); color: #08312a; padding: .8rem 1.4rem; border-radius: var(--radius-s); text-decoration: none; font-family: var(--font-headline); font-weight: var(--staerke-halbfett); border: 2px solid var(--farbe-akzent); transition: transform .08s ease, background .15s ease; }
.btn:hover { background: var(--farbe-akzent-dunkel); border-color: var(--farbe-akzent-dunkel); color: #06281f; transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--farbe-text-invers); border-color: rgba(255,255,255,.7); }
.btn-outline:hover { background: rgba(255,255,255,.14); color: var(--farbe-text-invers); transform: translateY(-1px); }
/* --- Abschnitte: EINHEITLICHER Innenabstand oben/unten --- */
section { padding: var(--abschnitt-y) 0; }
.section-leise { background: var(--farbe-bg-leise); }
/* Sprungziele (#stellen, #bewerben ...) nicht unter den klebenden Header rutschen */
section[id] { scroll-margin-top: 90px; }
/* Zentrierter Abschnitts-Kopf (Ueberschrift + Einleitung ueber Kachelrastern) */
.section-kopf { text-align: center; max-width: 52rem; margin: 0 auto var(--raum-6); }
.section-kopf p { color: var(--farbe-text-leise); }
/* Lese-Inhalte: angenehme Lesebreite, linksbuendig */
.inhalt > p, .inhalt > ul, .inhalt > ol { max-width: var(--breite-text); }
/* Zentrierter Einzel-Absatz (z.B. Notfall-Hinweis auf der Startseite) */
.text-zentriert { text-align: center; margin-inline: auto; }
/* --- Split-Layout: Text neben Bild (abwechselbar) --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-6); align-items: center; }
.split > * { min-width: 0; }
/* Zwei Text-Spalten (z.B. Aufgaben / Anforderungen): oben ausrichten */
.split--oben { align-items: start; }
.split h2:first-child, .split h3:first-child, .inhalt .split h3 { margin-top: 0; }
.split .spalten { columns: 1; }
.split img { border-radius: var(--radius); box-shadow: var(--schatten); width: 100%; }
/* Dezente Hover-Animation: Bild/Platzhalter wachsen leicht (nur nicht uebertreiben).
Transitions werden bei prefers-reduced-motion global deaktiviert. */
.split img, .split .bild-platzhalter { transition: transform .25s ease, box-shadow .25s ease; }
.split img:hover, .split .bild-platzhalter:hover { transform: scale(1.03); box-shadow: var(--schatten-stark); }
/* Bild links statt rechts (nur ab Tablet — mobil bleibt Text zuerst) */
@media (min-width: 761px) {
/* Zweite Zeile wegen des -Wrappers: Das Raster-Kind ist durch
display:contents das ![]()
, im DOM steht als letztes Kind aber das .
`order` auf dem bliebe wirkungslos (erzeugt keine Box), das Bild
stuende dann immer rechts und die Abwechslung waere weg. */
.split--bild-links > :last-child,
.split--bild-links > picture:last-child > img { order: -1; }
}
@media (max-width: 760px) {
.split { grid-template-columns: 1fr; gap: var(--raum-5); }
}
/* ACHTUNG bei weiteren Mobil-Regeln: Media Queries erhoehen die Spezifitaet
NICHT. Steht die Basis-Regel spaeter in dieser Datei, gewinnt sie — auch auf
dem Handy. Mobil-Regeln deshalb IMMER hinter die zugehoerige Basis-Regel
setzen, nicht in diesen Block hier oben. (.schritte und .news-item--bild
standen hier und waren dadurch monatelang wirkungslos.) */
/* --- Bild-Platzhalter (bis echte Fotos vorliegen) ---
Tauschen: das
ersetzen durch
— Styles (.split img / .karte-foto)
greifen automatisch. Der sichtbare -Text sagt, welches Motiv fehlt. */
.bild-platzhalter {
width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.75' d='M9 3 7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E"),
linear-gradient(150deg, var(--farbe-primaer-hell), var(--farbe-primaer-dunkel));
background-repeat: no-repeat;
background-position: center 42%, center;
background-size: 64px 64px, cover;
display: flex; align-items: flex-end; justify-content: center;
box-shadow: var(--schatten);
}
.bild-platzhalter span { color: var(--farbe-text-invers-leise); font-size: var(--groesse-klein); padding: var(--raum-3); text-align: center; }
.bild-platzhalter--breit { aspect-ratio: 21 / 9; border-radius: var(--radius-s); background-size: 48px 48px, cover; }
/* Foto oben in Standort-Karten (Praxen-Seite) */
.karte-foto { margin-bottom: var(--raum-4); }
img.karte-foto { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-s); }
.hinweis { border-left: 4px solid var(--farbe-akzent); background: var(--farbe-bg-leise); padding: var(--raum-4) var(--raum-5); border-radius: 0 var(--radius-s) var(--radius-s) 0; margin: 0 0 var(--block-abstand); }
/* Hinweis an den Stellen, die auf die Online-Rezeption verweisen: sichtbar nur,
solange die Einwilligung dafuer fehlt (consent.js setzt die Klasse auf ).
Ohne die Klasse — auch ohne JavaScript — bleibt er ausgeblendet. */
.med321-hinweis { display: none; }
.consent-med321-aus .med321-hinweis { display: block; }
/* --- Karten-Raster --- */
.karten { display: grid; gap: var(--raum-5); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.karte { border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: var(--raum-5); background: var(--farbe-bg); box-shadow: var(--schatten); transition: transform .12s ease, box-shadow .12s ease; }
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-stark); }
.karte h3 { margin-top: 0; color: var(--farbe-primaer-dunkel); }
/* Karten nur so hoch wie ihr Inhalt (statt auf Zeilenhoehe gestreckt). Noetig,
sobald eine Karte in der Reihe deutlich mehr Text hat — sonst klafft in den
kurzen Karten eine grosse Leerflaeche ueber dem Button (s. .stelle-karte). */
.karten--oben { align-items: start; }
/* Ausrichtung: Teaser-/Navigationskacheln sind zentriert (kurz, symmetrisch);
Daten-/Listenkarten bleiben linksbuendig (siehe .kontakt-liste/.zeiten). */
.karten--teaser .karte { text-align: center; }
/* Personen-Karten (Team) mit Foto oben — zentriert */
.karte--person { text-align: center; }
.karte--person p { color: var(--farbe-text-leise); }
.person-foto { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto var(--raum-4); overflow: hidden; background: var(--farbe-bg-leise); }
.person-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Foto-Platzhalter: Marken-Silhouette, bis die echten Fotos da sind.
Zum Tauschen: 
*/
.person-foto--platzhalter {
display: grid; place-items: center;
background: linear-gradient(150deg, var(--farbe-primaer-hell), var(--farbe-primaer-dunkel));
background-image: linear-gradient(150deg, var(--farbe-primaer-hell), var(--farbe-primaer-dunkel)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.82' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center, center 58%;
background-size: cover, 58px 58px;
}
/* --- Portraet-Kacheln (Praxisteam) ---
Die Teamfotos sind als Serie im Hochformat 3:4 entstanden (sitzend am
Arbeitsplatz). Ein runder Ausschnitt wie bei den Aerzten wuerde die Koepfe zu
klein machen, deshalb fuellt das Foto hier die Kachelbreite und Name/Funktion
stehen darunter. Karte, Rundung, Schatten und Hover bleiben identisch zu
.karte — die Seite bleibt EIN System. */
.karten--portraet { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.karte--portraet { padding: 0; overflow: hidden; text-align: center; }
.karte--portraet img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.karte--portraet .karte-text { padding: var(--raum-4); }
.karte--portraet h3 { margin: 0 0 var(--raum-1); }
.karte--portraet p { margin: 0; color: var(--farbe-text-leise); font-size: var(--groesse-klein); }
/* Beginnt eine neue Rasterzeile (site.js: neueZeile). Trennt Gruppen ab, ohne
das Raster zu verlassen — die Kachel behaelt exakt die Breite der uebrigen.
Der zusaetzliche Abstand macht sichtbar, dass der Umbruch gewollt ist. */
.karte--neue-zeile { grid-column-start: 1; margin-top: var(--raum-4); }
/* Platzhalter, solange ein Foto fehlt — gleiche Silhouette wie .person-foto */
.portraet-platzhalter {
width: 100%; aspect-ratio: 3 / 4;
background-image: linear-gradient(150deg, var(--farbe-primaer-hell), var(--farbe-primaer-dunkel)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.82' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center, center 55%;
background-size: cover, 64px 64px;
}
/* Auf dem Handy immer zwei Spalten — eine einzige waere pro Person fast
bildschirmhoch und die Seite endlos lang. */
@media (max-width: 560px) {
.karten--portraet { grid-template-columns: repeat(2, 1fr); gap: var(--raum-4); }
.karte--portraet .karte-text { padding: var(--raum-3); }
}
/* --- Bilderband: lockere Schnappschuss-Reihe (Stellenangebote) ---
Drei Fotos nebeneinander im gleichen 4:3-Ausschnitt, ohne Kartenrahmen und
ohne eigene Ueberschrift — die Reihe soll beilaeufig wirken, nicht wie eine
Galerie. Der Ausschnitt entsteht ueber object-fit: cover, die Dateien
behalten ihr Originalformat; einzelne Bilder koennen ihn per
style="object-position: ..." verschieben (Hoch- und Querformat gemischt). */
.bilderband { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-4); margin-top: var(--block-abstand); }
.bilderband img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
border-radius: var(--radius); box-shadow: var(--schatten);
transition: transform .25s ease, box-shadow .25s ease;
}
.bilderband img:hover { transform: scale(1.03); box-shadow: var(--schatten-stark); }
.bilderband-text { color: var(--farbe-text-leise); font-size: var(--groesse-klein); font-style: italic; margin: var(--raum-3) 0 0; }
/* Handy: zwei Spalten. Bleibt das letzte Bild allein uebrig, laeuft es ueber
die volle Breite — dann aber flacher, damit es die Seite nicht sprengt. */
@media (max-width: 700px) {
.bilderband { grid-template-columns: 1fr 1fr; gap: var(--raum-3); }
/* Zaehlt die -Wrapper, nicht die ![]()
: seit der WebP-Umstellung steckt
jedes Bild in einem eigenen , dadurch waere jedes ![]()
"erstes und
letztes Kind" und die Regel wuerde auf ALLE zutreffen. */
.bilderband picture:last-child:nth-child(odd) img { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
/* --- Gruppenbild (Team-Seite) ---
Bewusst in der Breite begrenzt: das Bild ist fast 4:3 und wuerde ueber die
volle Containerbreite den halben Bildschirm fuellen. */
.gruppenbild { margin: 0 auto; max-width: 820px; }
.gruppenbild img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--schatten); }
.gruppenbild figcaption { margin-top: var(--raum-3); text-align: center; color: var(--farbe-text-leise); font-size: var(--groesse-klein); }
/* News-/Aktuelles-Eintraege */
.news-item { border: 1px solid var(--farbe-rand); border-left: 4px solid var(--farbe-akzent); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--farbe-bg); padding: var(--raum-5) var(--raum-5); margin: 0 0 var(--block-abstand); box-shadow: var(--schatten); }
.news-item h2 { margin: var(--raum-1) 0 var(--raum-2); }
/* Beitrag mit Bild: Bild links in fester Spalte, Text rechts. Die Spalte ist
bewusst schmal, damit hochformatige Social-Grafiken (4:5) die Kachel nicht
sprengen. */
.news-item--bild { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: var(--raum-5); align-items: start; }
.news-item--bild > * { min-width: 0; }
.news-item--bild img { width: 100%; height: auto; display: block; border-radius: var(--radius-s); }
.news-datum { color: var(--farbe-text-leise); font-size: var(--groesse-klein); margin: 0 0 var(--raum-1); text-transform: uppercase; letter-spacing: .03em; }
/* Handy: Bild ueber den Text statt daneben, in der Breite begrenzt statt
bildschirmfuellend. Muss HINTER den Basis-Regeln stehen, sonst wirkungslos. */
@media (max-width: 760px) {
.news-item--bild { grid-template-columns: 1fr; gap: var(--raum-4); }
.news-item--bild img { max-width: 320px; }
}
/* Platzhalter-Markierung (nur waehrend des Aufbaus) */
.platzhalter { color: var(--farbe-text-leise); font-style: italic; }
/* Kontakt-Zeilen in Standort-Karten (linksbuendig, Datencharakter) */
.kontakt-liste { list-style: none; margin: var(--raum-2) 0 0; padding: 0; }
.kontakt-liste li { margin: var(--raum-1) 0; }
.kontakt-liste .label { color: var(--farbe-text-leise); display: inline-block; min-width: 3.2rem; }
/* Oeffnungszeiten-Tabelle */
.zeiten { width: 100%; border-collapse: collapse; margin: var(--raum-2) 0 0; }
.zeiten th, .zeiten td { text-align: left; padding: .35rem var(--raum-2); border-bottom: 1px solid var(--farbe-rand); vertical-align: top; }
.zeiten th { width: 3rem; color: var(--farbe-primaer-dunkel); font-family: var(--font-headline); }
.zeiten .zu { color: var(--farbe-text-leise); }
/* Mehrspaltige Leistungs-Listen */
.spalten { columns: 2; column-gap: 2.5rem; }
.spalten li { break-inside: avoid; margin: .2rem 0; }
@media (max-width: 620px) { .spalten { columns: 1; } }
/* Badge fuer Status-Hinweise (z.B. "aktuell nur Terminsprechstunde") */
.badge { display: inline-block; background: var(--farbe-bg-leise); color: var(--farbe-primaer-dunkel); border: 1px solid var(--farbe-rand); border-radius: var(--radius-pill); padding: .15rem .7rem; font-size: var(--groesse-klein); font-weight: var(--staerke-halbfett); }
/* Listen/Unter-Ueberschriften in Lese-Abschnitten */
.inhalt ul { padding-left: 1.2rem; }
.inhalt li { margin: var(--raum-1) 0; }
.inhalt h3 { margin-top: var(--raum-6); color: var(--farbe-primaer-dunkel); }
.inhalt h4 { margin: var(--raum-4) 0 var(--raum-1); color: var(--farbe-navy); }
/* --- Karriere-Seite (Stellenangebote) --- */
/* Bewerbungsablauf: nummerierte Schritte */
/* .inhalt > ol deckelt sonst auf Lesetext-Breite (hoehere Spezifitaet) — hier aufheben. */
.inhalt > .schritte { max-width: none; }
.schritte { list-style: none; counter-reset: schritt; display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: var(--raum-5); padding: 0; margin: 0; }
.schritte li { counter-increment: schritt; background: var(--farbe-bg); border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: var(--raum-5); box-shadow: var(--schatten); text-align: center; }
.schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--farbe-akzent); color: #08312a; font-family: var(--font-headline); font-weight: var(--staerke-fett); font-size: var(--groesse-h3); margin: 0 auto var(--raum-3); }
.schritte h3 { margin: 0 0 var(--raum-2); }
.schritte p { margin: 0; color: var(--farbe-text-leise); }
/* Abschluss-Schritt: eigene, volle Zeile — prominenter als die drei davor. */
.schritte .schritt-final { grid-column: 1 / -1; background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: var(--farbe-text-invers); padding: var(--raum-6) var(--raum-5); box-shadow: var(--schatten-stark); }
.schritte .schritt-final h3 { color: var(--farbe-text-invers); font-size: var(--groesse-h2); }
.schritte .schritt-final p { color: var(--farbe-text-invers-leise); }
/* Handy: die drei Schritte untereinander. Drei Spalten a mind. 260px ergeben
sonst ueber 800px Breite und schieben die ganze Seite seitlich raus.
Muss HINTER den Basis-Regeln stehen, sonst wirkungslos. */
@media (max-width: 760px) {
.schritte { grid-template-columns: 1fr; }
}
/* Stellen-Karten: Job-Titel + Eckdaten + CTA */
.stelle-karte { display: flex; flex-direction: column; }
.stelle-karte .btn { margin-top: auto; align-self: flex-start; }
.stelle-karte p { color: var(--farbe-text-leise); }
/* Optionale Vorteils-Liste in einer Stellenkarte (z.B. Weiterbildungsstelle).
Kleiner gesetzt als der Fliesstext, damit der Stellentitel fuehrend bleibt;
der Button rutscht durch margin-top:auto weiterhin an den Kartenfuss, die
uebrigen Karten bleiben dadurch buendig. */
.stelle-karte ul { margin: 0 0 var(--raum-5); padding-left: 1.1rem; color: var(--farbe-text-leise); font-size: var(--groesse-klein); }
.stelle-karte li { margin: var(--raum-1) 0; }
/* --- Fusszeile --- */
.site-footer { background: var(--farbe-navy); color: #b9c6cf; margin-top: 0; padding: var(--raum-7) 0 var(--raum-5); }
.site-footer a { color: var(--farbe-text-invers); }
.footer-grid { display: grid; gap: var(--raum-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer h3 { color: var(--farbe-text-invers); font-size: 1.05rem; margin: 0 0 var(--raum-3); }
.footer-social { display: flex; gap: var(--raum-2); margin-top: var(--raum-4); }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: rgba(255,255,255,.10); transition: background .15s ease; }
.footer-social a:hover, .footer-social a:focus-visible { background: rgba(255,255,255,.22); }
.footer-bottom { margin-top: var(--raum-6); padding-top: var(--raum-4); border-top: 1px solid rgba(255,255,255,.14); font-size: var(--groesse-klein); display: flex; gap: var(--raum-4); flex-wrap: wrap; justify-content: space-between; align-items: center; }
.footer-bottom nav a { margin-right: var(--raum-4); }
/* --- Mobil --- */
@media (max-width: 880px) {
.nav-toggle { display: block; }
.main-nav { display: none; position: absolute; left: 0; right: 0; top: 74px; background: #fff; border-bottom: 1px solid var(--farbe-rand); padding: var(--raum-2) var(--container-x) var(--raum-4); box-shadow: var(--schatten); }
.main-nav.open { display: block; }
.main-nav ul { flex-direction: column; gap: 0; }
.main-nav a { padding: .85rem var(--raum-2); border-bottom: 1px solid var(--farbe-rand); border-radius: 0; }
.main-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--farbe-primaer); }
}
/* =============================================================================
WIDGETS (Plan WIDGETS): Cookie-Consent, Google-Maps-Zwei-Klick,
Eingabehilfen, To-Top. Erzeugt von js/consent.js, js/eingabehilfen.js
und js/render.js — hier nur die Optik.
========================================================================== */
/* --- Cookie-Button (links unten, wie Altseite) --- */
.cookie-button { position: fixed; left: var(--raum-4); bottom: var(--raum-4); z-index: 900; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--farbe-navy); color: var(--farbe-text-invers); display: grid; place-items: center; cursor: pointer; box-shadow: var(--schatten-stark); }
.cookie-button:hover { background: var(--farbe-primaer); }
/* --- Consent-Dialog --- */
.consent-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(13, 23, 36, .55); display: grid; place-items: center; padding: var(--container-x); }
.consent-overlay[hidden] { display: none; } /* display:grid wuerde sonst das hidden-Attribut aushebeln */
.consent-dialog { background: var(--farbe-bg); color: var(--farbe-text); max-width: 34rem; width: 100%; max-height: 90vh; overflow: auto; border-radius: var(--radius); padding: var(--raum-5) var(--raum-6); box-shadow: var(--schatten-stark); }
.consent-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--raum-4); }
.consent-kopf h2 { margin: 0; font-size: var(--groesse-h3); }
.consent-schliessen { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: var(--farbe-text-leise); padding: var(--raum-2); }
.consent-schliessen:hover { color: var(--farbe-text); }
.consent-dialog h3 { margin: var(--raum-4) 0 var(--raum-1); font-size: var(--groesse-h4); }
.consent-text { color: var(--farbe-text-leise); font-size: var(--groesse-klein); }
.consent-schalter { display: flex; gap: var(--raum-3); align-items: flex-start; font-size: var(--groesse-klein); }
.consent-schalter input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--farbe-primaer); flex-shrink: 0; }
.consent-aktionen { display: flex; gap: var(--raum-3); flex-wrap: wrap; margin-top: var(--raum-5); }
/* Leiser Zweit-Button (im Consent-Dialog) */
.btn-leise { background: var(--farbe-bg-leise); border-color: var(--farbe-rand); color: var(--farbe-navy); }
.btn-leise:hover { background: var(--farbe-rand); border-color: var(--farbe-rand); color: var(--farbe-navy); }
/* --- Google-Maps-Zwei-Klick-Platzhalter (Karten auf Service & Kontakt) --- */
.maps-embed { margin-top: var(--raum-4); border: 1px solid var(--farbe-rand); border-radius: var(--radius-s); background: var(--farbe-bg-leise); padding: var(--raum-5); text-align: center; }
.maps-embed p { font-size: var(--groesse-klein); color: var(--farbe-text-leise); margin: 0 0 var(--raum-4); }
.maps-embed.geladen { padding: 0; overflow: hidden; background: none; }
.maps-embed iframe { display: block; width: 100%; height: 320px; border: 0; }
/* --- To-Top-Button (rechts unten, OBERHALB des 321-MED-Widgets) --- */
.to-top { position: fixed; right: var(--raum-4); bottom: 120px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--farbe-rand); background: var(--farbe-bg); color: var(--farbe-primaer); display: grid; place-items: center; cursor: pointer; box-shadow: var(--schatten); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.to-top.sichtbar { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--farbe-bg-leise); }
/* --- Eingabehilfen: Button rechts oben (unterhalb des sticky Headers) --- */
.eh-knopf { position: fixed; right: var(--raum-4); top: 96px; z-index: 950; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--farbe-primaer); color: var(--farbe-text-invers); display: grid; place-items: center; cursor: pointer; box-shadow: var(--schatten-stark); }
.eh-knopf:hover { background: var(--farbe-primaer-dunkel); }
/* --- Eingabehilfen: Panel (dunkel, wie Altseite) --- */
.eh-panel { position: fixed; right: var(--raum-4); top: 160px; z-index: 950; width: 360px; max-width: calc(100vw - 2 * var(--raum-4)); max-height: calc(100vh - 180px); overflow: auto; background: var(--farbe-navy); color: var(--farbe-text-invers); border-radius: var(--radius); padding: var(--raum-5); box-shadow: var(--schatten-stark); }
.eh-kopf { display: flex; align-items: center; gap: var(--raum-2); }
.eh-kopf h2 { flex: 1; margin: 0; color: var(--farbe-text-invers); font-size: var(--groesse-h3); }
.eh-reset, .eh-zu { background: none; border: 1px solid rgba(255, 255, 255, .35); color: inherit; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 1rem; line-height: 1; }
.eh-reset:hover, .eh-zu:hover { background: rgba(255, 255, 255, .15); }
.eh-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-2); margin: var(--raum-4) 0; }
.eh-schalter { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: var(--farbe-text-invers); border-radius: var(--radius-s); padding: var(--raum-3) var(--raum-2); cursor: pointer; font-size: var(--groesse-klein); min-height: 3.2rem; font-family: var(--font-text); }
.eh-schalter:hover { background: rgba(255, 255, 255, .18); }
.eh-schalter.aktiv { background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: #08312a; font-weight: var(--staerke-halbfett); }
.eh-regler { display: flex; align-items: center; flex-wrap: wrap; gap: var(--raum-2); margin: var(--raum-3) 0; }
.eh-regler-name { flex: 1 0 100%; font-size: var(--groesse-klein); }
.eh-regler input[type="range"] { flex: 1; min-width: 0; accent-color: var(--farbe-akzent); }
.eh-regler button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; flex-shrink: 0; }
.eh-regler button:hover { background: rgba(255, 255, 255, .15); }
.eh-regler output { min-width: 3.2em; text-align: right; font-size: var(--groesse-klein); }
/* --- Eingabehilfen: Wirkung der Schalter (Klassen auf ) --- */
/* Links / Ueberschriften hervorheben */
html.eh-links a:not(.eh-panel a) { background: var(--eh-marker-bg); color: var(--eh-marker-text); text-decoration: underline; }
html.eh-titel :is(h1, h2, h3, h4, h5, h6):not(.eh-panel *):not(.consent-dialog *) { background: var(--eh-marker-bg); color: var(--eh-marker-text); padding-inline: .15em; }
/* Vorlesen: anklickbare Absaetze markieren, aktueller Absatz umrandet */
html.eh-vorlesen :is(p, h1, h2, h3, h4, h5, h6, li, td, th, figcaption, blockquote) { cursor: pointer; }
.eh-liest { outline: 3px solid var(--farbe-akzent); outline-offset: 2px; }
/* Lesemodus: Deko raus, eine Spalte, Lesebreite */
html.eh-lesen .hero::before { background: var(--farbe-navy); }
html.eh-lesen main img, html.eh-lesen .person-foto,
html.eh-lesen .portraet-platzhalter, html.eh-lesen .gruppenbild,
html.eh-lesen .bilderband, html.eh-lesen .bilderband-text { display: none; }
html.eh-lesen .karten { grid-template-columns: 1fr; }
/* Portraet-Kacheln verlieren im Lesemodus ihr Bild — Text braucht dann wieder
die normale Kachel-Polsterung. */
html.eh-lesen .karte--portraet .karte-text { padding: var(--raum-5); }
html.eh-lesen .karte, html.eh-lesen .news-item { box-shadow: none; }
/* Im Lesemodus sind Bilder ausgeblendet — die Bildspalte muss dann weg,
sonst bleibt eine leere Spalte neben dem Text stehen. */
html.eh-lesen .news-item--bild { grid-template-columns: 1fr; }
html.eh-lesen .karte:hover { transform: none; }
html.eh-lesen .container { max-width: var(--breite-text); }
html.eh-lesen .spalten { columns: 1; }
html.eh-lesen .hero h1, html.eh-lesen .page-hero h1 { text-shadow: none; }
/* Dunkler Kontrast: Stellen nachziehen, die feste Hell-Werte bzw. Navy nutzen
(--farbe-navy bleibt im Dunkel-Schema unveraendert, s. tokens.css) */
html.eh-dunkel .site-header { background: rgba(13, 23, 36, .96); }
html.eh-dunkel .main-nav { background: var(--farbe-bg); }
html.eh-dunkel :is(h1, h2, h3, h4):not(.hero *):not(.page-hero *):not(.site-footer *) { color: var(--farbe-text); }
html.eh-dunkel .main-nav a, html.eh-dunkel .nav-toggle { color: var(--farbe-text); }
/* --- Widgets mobil --- */
@media (max-width: 620px) {
.eh-knopf { top: 84px; right: var(--raum-2); }
.eh-panel { top: 90px; right: var(--raum-2); left: var(--raum-2); width: auto; max-height: calc(100vh - 110px); }
.cookie-button { left: var(--raum-2); bottom: var(--raum-2); width: 48px; height: 48px; }
.to-top { right: var(--raum-2); }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; transition: none !important; }
}
— Styles (.split img / .karte-foto)
greifen automatisch. Der sichtbare -Text sagt, welches Motiv fehlt. */
.bild-platzhalter {
width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.75' d='M9 3 7.2 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.2L15 3H9zm3 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E"),
linear-gradient(150deg, var(--farbe-primaer-hell), var(--farbe-primaer-dunkel));
background-repeat: no-repeat;
background-position: center 42%, center;
background-size: 64px 64px, cover;
display: flex; align-items: flex-end; justify-content: center;
box-shadow: var(--schatten);
}
.bild-platzhalter span { color: var(--farbe-text-invers-leise); font-size: var(--groesse-klein); padding: var(--raum-3); text-align: center; }
.bild-platzhalter--breit { aspect-ratio: 21 / 9; border-radius: var(--radius-s); background-size: 48px 48px, cover; }
/* Foto oben in Standort-Karten (Praxen-Seite) */
.karte-foto { margin-bottom: var(--raum-4); }
img.karte-foto { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-s); }
.hinweis { border-left: 4px solid var(--farbe-akzent); background: var(--farbe-bg-leise); padding: var(--raum-4) var(--raum-5); border-radius: 0 var(--radius-s) var(--radius-s) 0; margin: 0 0 var(--block-abstand); }
/* Hinweis an den Stellen, die auf die Online-Rezeption verweisen: sichtbar nur,
solange die Einwilligung dafuer fehlt (consent.js setzt die Klasse auf ).
Ohne die Klasse — auch ohne JavaScript — bleibt er ausgeblendet. */
.med321-hinweis { display: none; }
.consent-med321-aus .med321-hinweis { display: block; }
/* --- Karten-Raster --- */
.karten { display: grid; gap: var(--raum-5); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.karte { border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: var(--raum-5); background: var(--farbe-bg); box-shadow: var(--schatten); transition: transform .12s ease, box-shadow .12s ease; }
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-stark); }
.karte h3 { margin-top: 0; color: var(--farbe-primaer-dunkel); }
/* Karten nur so hoch wie ihr Inhalt (statt auf Zeilenhoehe gestreckt). Noetig,
sobald eine Karte in der Reihe deutlich mehr Text hat — sonst klafft in den
kurzen Karten eine grosse Leerflaeche ueber dem Button (s. .stelle-karte). */
.karten--oben { align-items: start; }
/* Ausrichtung: Teaser-/Navigationskacheln sind zentriert (kurz, symmetrisch);
Daten-/Listenkarten bleiben linksbuendig (siehe .kontakt-liste/.zeiten). */
.karten--teaser .karte { text-align: center; }
/* Personen-Karten (Team) mit Foto oben — zentriert */
.karte--person { text-align: center; }
.karte--person p { color: var(--farbe-text-leise); }
.person-foto { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto var(--raum-4); overflow: hidden; background: var(--farbe-bg-leise); }
.person-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Foto-Platzhalter: Marken-Silhouette, bis die echten Fotos da sind.
Zum Tauschen: …
ersetzen durch