/*
Theme Name:  Kinderarzt Alkhoury
Theme URI:   https://kinderarzt-alkhoury.de/
Description: Child-Theme fuer die Praxis Mazen Alkhoury, Andernach. Server-gerendertes
             Template, keine Hook-Elemente. Schriften und Icons ausschliesslich lokal.
Author:      3task
Template:    generatepress
Version:     1.0.0
Text Domain: alkhoury
*/
@font-face{font-family:"Epi";src:url("assets/fonts/epilogue.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Rethink";src:url("assets/fonts/rethinksans.woff2") format("woff2");font-weight:400 800;font-display:swap}

:root{
  /* BASIS — konservativ und seriös, aus dem Logo */
  --marine:#0d5b62;      /* Logofarbe */
  --marine-d:#0b4f55;
  --marine-h:#12787f;
  --marine-t:#e9f4f4;
  --text:#1c2b2e;
  --grau:#52676a;
  --papier:#f2f8f8;
  --weiss:#ffffff;
  --linie:#d8e5e6;
  /* AKZENT — empathisch und farbig */
  --tuerkis:#24a8a8;     /* Logofarbe */
  --label-hell:#8ed6da;--tuerkis-t:#0a6b70;
  --tuerkis-h:#e7f5f5;
  --warm:#f09c60;
  --warm-t:#a44d22;
  --warm-h:#fdf2e9;
  /* Rot fuer befristete Hinweise (Telefon, Doctolib) -- Kundenwunsch 01.09.2026.
     ZWEI Toene, weil dieselben Hinweise auf hellem UND auf marinem Grund stehen:
     #b3261e auf Karte 6,09:1 · #ffc2b8 auf --marine 5,08:1. Ein Ton allein waere
     auf einem der beiden Untergruende unlesbar. Gedeckt, kein Signalrot -- auf
     einer Arztseite liest sich #d32f2f wie eine Fehlermeldung. */
  --warnrot:#b3261e;
  --warnrot-hell:#ffc2b8;
  --r:8px; --rand:clamp(1rem,3.4vw,2.8rem); --spur:1220px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--text);
  font-family:"Rethink",system-ui,sans-serif;font-size:1.0625rem;line-height:1.6;font-synthesis-weight:none}
::selection{background:var(--warm-h);color:var(--marine)}
:focus-visible{outline:2px solid var(--warm-t);outline-offset:3px;border-radius:3px}
html{scrollbar-color:var(--marine) var(--marine-t)}
h1,h2,h3{margin:0;font-family:"Epi",system-ui,sans-serif;font-weight:700;
  letter-spacing:-.024em;line-height:1.15;color:var(--marine)}
p{margin:0}img{max-width:100%;display:block}
.spur{max-width:var(--spur);margin-inline:auto;padding-inline:var(--rand)}

/* ── KOPF ─────────────────────────────────────────────── */
.kopf{background:var(--weiss);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--linie)}
/* Der Kopf klebt (100 px hoch). Ohne scroll-margin landet ein Sprung auf #notdienst
   so, dass die Ueberschrift GENAU dahinter verschwindet — der Klick sieht dann aus,
   als sei nichts passiert. Gemessen 27.08.2026: Ziel liegt bei 1114 px, der Kopf
   verdeckt die obersten 100 px davon. */
:target{scroll-margin-top:116px}
#notdienst{scroll-margin-top:116px}
.kopf-in{display:flex;align-items:center;gap:1.2rem;min-height:100px}
.marke{display:flex;align-items:center;gap:.95rem;text-decoration:none;color:var(--marine);
  margin-right:auto;flex:0 0 auto;white-space:nowrap}
/* Zeichen und Wortmarke getrennt bemessen. Ein gemeinsames `.marke img` zoege
   beide auf dieselbe Hoehe — die Wortmarke soll aber kleiner sein als das Zeichen.
   Die Wortmarke traegt die Buchstaben aus dem Originallogo (Kundenwunsch 27.08.2026:
   "Alkhoury" oben, "Kinderarzt" unten, neben dem Zeichen statt darunter). */
.marke .zeichen{height:82px;width:auto}
.marke .wortmarke{height:58px;width:auto}
/* ⚠ GEMESSEN 27.08.2026, an elf Breiten: ab 1431 px bleiben rechts nur 13 px Luft.
   Marke 282 px + Navi 861 px fuellen den Traeger fast aus. ▶ Ein weiterer Menuepunkt
   oder ein laengeres Wort passt NICHT mehr — dann zuerst die Wortmarke kleiner setzen
   (jede 10 px Hoehe sind rund 30 px Breite), nicht die Klappmenue-Schwelle anheben.
   Unter 1431 px greift die Verkleinerung, dort sind es wieder 44 px. */
.navi{display:flex;align-items:center;gap:0}
.navi a{color:var(--text);text-decoration:none;font-weight:600;font-size:1rem;padding:.7rem 1rem;
  border-radius:6px;transition:.15s;white-space:nowrap}
.navi a:hover{color:var(--marine);background:var(--marine-t)}
.burger{display:none;width:46px;height:46px;border:2px solid var(--marine);border-radius:var(--r);
  background:var(--weiss);cursor:pointer;align-items:center;justify-content:center;color:var(--marine)}
.burger svg{width:23px;height:23px}

/* ── AUFTAKT: Marine-Fläche, gewichtig ────────────────── */
.auftakt{background:var(--marine);color:#fff;position:relative;overflow:hidden}
.auftakt-in{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.auftakt-text{padding:clamp(1.8rem,3.4vw,3rem) clamp(1rem,1.8vw,1.7rem) clamp(1.8rem,3.4vw,3rem) 0}
.spur.auftakt-in{padding-right:0}
.eroeffnung{display:flex;align-items:center;gap:.55rem;margin-top:1rem;color:#fff;font-size:1.06rem}
.eroeffnung svg{width:20px;height:20px;color:var(--warm);flex:0 0 auto}
.eroeffnung b{font-weight:700}
.auftakt h1{color:#fff;font-size:clamp(1.9rem,3.6vw,3rem);max-width:14.5em}
.auftakt h1 em{font-style:normal;color:#5cd3d9}
.auftakt .lauf{color:#d2e2ef;margin-top:.9rem;font-size:1.04rem;max-width:32rem}
.auftakt .knoepfe{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.knopf{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:600;
  font-size:1rem;padding:.82rem 1.4rem;border-radius:var(--r);transition:.15s}
.knopf.voll{background:var(--warm);color:#33190a}
.knopf.voll:hover{background:#f2a670}
.knopf.linie{border:1px solid rgba(255,255,255,.45);color:#fff}
.knopf.linie:hover{background:rgba(255,255,255,.12)}
.knopf svg{width:18px;height:18px}
.auftakt-bild{position:relative;min-height:330px}
.auftakt-bild img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* ── FAKTENBAND ───────────────────────────────────────── */
.fakten{background:var(--marine-d);color:#fff}
.fakten-in{display:grid;grid-template-columns:repeat(5,1fr)}
.faktum{padding:.95rem 1.1rem;border-right:1px solid rgba(255,255,255,.14)}
.faktum:last-child{border-right:0}
.faktum .bez{display:block;font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--label-hell);margin-bottom:.2rem}
.faktum b{display:block;font-family:"Epi",sans-serif;font-size:1.06rem;font-weight:700;color:#fff;line-height:1.2}
/* Telefonnummer als Link im dunklen Faktenband (30.09.2026): erbt Weiß, Unterstreichung erst
   beim Zeigen. Ohne diese Regel erschiene sie in Marine auf Marine, also praktisch unsichtbar. */
.faktum b a{color:inherit;text-decoration:none}
.faktum b a:hover,.faktum b a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.faktum span{display:block;font-size:.86rem;color:#bcd2e3;margin-top:.12rem}
.faktum.wartet b{color:var(--warnrot-hell)}  /* Kundenwunsch 01.09.2026: rot statt warm.
   Auf --marine-d 6,03:1 (das bisherige #f5b183 lag bei 5,08:1) -- die Umstellung verbessert
   die Lesbarkeit, sie kostet sie nicht. Heller Ton, weil das Band dunkel ist. */

/* ── ABSCHNITTE ───────────────────────────────────────── */
.teil{padding-block:clamp(2.1rem,4vw,3rem)}
.teilkopf{margin-bottom:1.3rem}
h2{font-size:clamp(1.55rem,2.8vw,2.15rem);padding-bottom:.6rem;border-bottom:1px solid var(--linie);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
h2 .neben{font-family:"Rethink",sans-serif;font-size:.95rem;font-weight:500;color:var(--grau);
  letter-spacing:0}

/* Leistungen als Verzeichnis — sachlicher als Karten */
.verzeichnis{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem}
.eintrag{display:grid;grid-template-columns:42px 1fr;gap:.85rem;align-items:start;
  padding:.85rem 0;border-bottom:1px solid var(--linie)}
.eintrag .ic{width:42px;height:42px;border-radius:var(--r);background:var(--marine-t);
  color:var(--marine);display:grid;place-items:center}
.eintrag .ic svg{width:22px;height:22px}
.eintrag:nth-child(3) .ic{background:var(--warm-h);color:var(--warm-t)}
.eintrag:nth-child(4) .ic{background:var(--tuerkis-h);color:var(--tuerkis-t)}
.eintrag h3{font-size:1.1rem;margin-bottom:.15rem}
.eintrag p{font-size:.95rem;color:var(--grau);line-height:1.5}
.nachsatz{margin-top:1.1rem;background:var(--warm-h);border-radius:var(--r);padding:.95rem 1.15rem;
  font-size:.95rem;color:#6b4526;display:flex;gap:.7rem;align-items:flex-start}
.nachsatz svg{width:20px;height:20px;color:var(--warm-t);flex:0 0 auto;margin-top:.15rem}

/* Reihe + Bild */
.reihe-block{display:grid;grid-template-columns:1.3fr 1fr;gap:1.2rem;margin-top:1.2rem;align-items:stretch}
.reihe{background:var(--tuerkis-h);border-radius:var(--r);padding:1.3rem 1.4rem}
.reihe h3{font-size:1.15rem;margin-bottom:.3rem}
.reihe .lauf{color:#3f6265;font-size:.95rem;margin-bottom:.9rem}
.stufen{display:flex;flex-wrap:wrap;gap:.35rem}
.stufen span{background:var(--weiss);color:var(--tuerkis-t);border:1px solid #c3e2e4;font-weight:700;
  font-size:.88rem;padding:.3rem .62rem;border-radius:5px}
.stufen span.j{background:var(--tuerkis-t);color:#fff;border-color:var(--tuerkis-t)}
.nebenbild{margin:0;border-radius:var(--r);overflow:hidden;position:relative;min-height:200px}
.nebenbild img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* Sätze über volle Breite, Marine */
.stimme{background:var(--marine);color:#fff}
.stimme h2{color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.stimme h2 .neben{color:#bcd2e3}
.saetze{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:1.2rem}
.satz{padding:0 1.5rem;border-left:1px solid rgba(255,255,255,.22)}
.satz:first-child{padding-left:0;border-left:0}
.satz .nummer{display:block;font-family:"Epi",sans-serif;font-size:.8rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#f8c4a0;margin-bottom:.55rem}
.satz p{font-family:"Epi",sans-serif;font-size:1.16rem;font-weight:600;line-height:1.32;color:#fff}
.satz small{display:block;font-family:"Rethink",sans-serif;font-size:.86rem;color:#bcd2e3;margin-top:.5rem}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.1rem;margin-top:1.1rem}
.k-feld{border:1px solid var(--linie);border-radius:var(--r);padding:1.2rem 1.3rem}
.k-feld h3{font-size:1.05rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem}
.k-feld h3 svg{width:19px;height:19px;color:var(--tuerkis-t)}
.k-feld p{font-size:.96rem;color:var(--grau)}
.k-feld a{color:var(--marine);font-weight:600}
.k-feld.hervor{background:var(--marine);border-color:var(--marine);color:#fff}
.k-feld.hervor h3{color:#fff}
.k-feld.hervor h3 svg{color:var(--warm)}
.k-feld.hervor p{color:#d2e2ef}
.k-feld.hervor a{color:#fff}

/* Fuß */
.fuss{background:var(--marine-d);color:#bcd2e3;margin-top:2rem}
.fuss-in{padding-block:1.7rem 2rem;display:flex;justify-content:space-between;gap:1.3rem;
  flex-wrap:wrap;align-items:center;font-size:.92rem}
.fuss img{height:64px;width:auto}
.fuss nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.fuss a{color:#fff;text-decoration:none;text-underline-offset:3px}
.fuss a:hover{text-decoration:underline;text-decoration-color:var(--warm);text-decoration-thickness:2px}

@media (max-width:1000px){
  .auftakt-in{grid-template-columns:1fr}
  .spur.auftakt-in{padding-right:var(--rand)}
  .auftakt-text{padding-right:0}
  .auftakt-bild{min-height:250px;order:-1;margin-inline:calc(var(--rand)*-1)}
  .fakten-in{grid-template-columns:repeat(2,1fr)}
  .faktum{border-bottom:1px solid rgba(255,255,255,.14)}
  .faktum:nth-child(2n){border-right:0}
  .verzeichnis{grid-template-columns:1fr}
  .reihe-block,.kontakt,.saetze{grid-template-columns:1fr}
  .satz{padding:1.1rem 0;border-left:0;border-top:1px solid rgba(255,255,255,.22)}
  .satz:first-child{padding-top:0;border-top:0}
}
/* Zwischenstufe: waagerechtes Menue, aber enger gesetzt. Ohne diesen Block
   ueberlappte die Wortmarke bei 1024 px den ersten Menuepunkt — gemessen am
   Screenshot, nicht geschaetzt. */
/* Zwischenstufe: waagerechtes Menue, enger gesetzt. Der Bereich reicht bis
   1430 px, weil die Menuepunkte seit dem 26.08. nicht mehr umbrechen duerfen
   ("Die Praxis" stand sonst zweizeilig) und dadurch mehr Breite brauchen.
   Am Screenshot gemessen, nicht geschaetzt: unterhalb von 1281 px passt das
   waagerechte Menue nicht mehr — dort greift das Klappmenue. Ein blosses
   Verkleinern reichte nicht, der Termin-Knopf lief weiter aus dem Bild.
   ⚠ Der Knopf ist seit 27.08.2026 weg, die Schwelle ist seitdem NICHT neu
   bestimmt worden — sie ist womoeglich zu frueh. Vor einer Aenderung messen. */
@media (max-width:1430px) and (min-width:1281px){
  .marke .zeichen{height:56px}
  .marke .wortmarke{height:46px}
  /* ⛔ Hier standen bis 27.08.2026 zwei Navi-Regeln (font-size .86rem, padding-inline .6rem,
     letter-spacing .04em). Sie haben NIE gewirkt: die Regel `.navi a` im Block
     "Navigation, zweiter Anlauf" weiter unten hat dieselbe Spezifitaet und steht spaeter in
     der Datei — spaeter gewinnt. Gemessen am 27.08. ueber getComputedStyle: padding-left
     18.4px (= 1.15rem von unten), nicht 9.6px. ▶ Das ist die Ursache dafuer, dass die
     Klappmenue-Schwelle am 26.08. dreimal angehoben werden musste (660 -> 1050 -> 1280):
     jede "Verkleinerung" hier blieb wirkungslos, also half nur Ausweichen. */
  .kopf-in{gap:.7rem;min-height:88px}
}

@media (max-width:1280px){
  .fakten-in{grid-template-columns:repeat(2,1fr)}
  .marke .zeichen{height:60px}
  .marke .wortmarke{height:50px}
  .navi{position:fixed;inset:auto 0 0;background:var(--weiss);flex-direction:column;
    align-items:stretch;padding:.7rem var(--rand) 1.3rem;gap:.2rem;display:none;
    border-top:1px solid var(--linie);box-shadow:0 -12px 26px -18px rgba(7,54,106,.45)}
  .navi.auf{display:flex}
  .navi a{font-size:1.08rem;padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--linie);
    white-space:normal}
  .burger{display:inline-flex}
}

@media (max-width:660px){
  .fakten-in{grid-template-columns:1fr}
  .faktum{border-right:0}
  .marke .zeichen{height:56px}
  .marke .wortmarke{height:42px}
  .navi{position:fixed;inset:auto 0 0;background:var(--weiss);flex-direction:column;
    align-items:stretch;padding:.7rem var(--rand) 1.3rem;gap:.2rem;display:none;
    border-top:1px solid var(--linie);box-shadow:0 -12px 26px -18px rgba(7,54,106,.45)}
  .navi.auf{display:flex}
  .navi a{font-size:1.08rem;padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--linie);
    white-space:normal}
  .burger{display:inline-flex}
}

/* ══ Aktuelles ═══════════════════════════════════════════════════════
   Der im Angebot zugesagte Bereich, den Herr Alkhoury selbst pflegt:
   Urlaub, Praxis geschlossen, neue Regelungen, geänderte Zeiten.
   EINE Stelle, bewusst: ein zusätzliches Band oben wäre dieselbe Aussage
   an zwei Orten (Frank, 25.08.2026 — „für sowas ist dann das news fenster").
   Ein Eintrag kann als `wichtig` hervorgehoben werden, das reicht.
   Ist nichts eingetragen, entfallen nur die Karten. Der Abschnitt selbst bleibt stehen,
   weil er seit 28.09.2026 auch die Sprechzeiten trägt. */
.neues{background:var(--papier);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.neues .teilkopf{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;
  margin-bottom:1.1rem}
.neues h2{margin:0}
.neues .selbst{font-size:.92rem;color:var(--grau)}
.neuliste{display:grid;gap:.75rem}
@media(min-width:56rem){.neuliste{grid-template-columns:1fr 1fr}}
.neu{background:#fff;border:1px solid var(--linie);border-left:4px solid var(--tuerkis);
  border-radius:0 10px 10px 0;padding:.95rem 1.1rem}
.neu.wichtig{border-left-color:var(--warm);background:#fffaf5}
.neu .kopfzeile{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.3rem}
.neu .marke-neu{font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tuerkis-t)}
.neu.wichtig .marke-neu{color:#b4531f}
.neu time{margin-left:auto;font-size:.88rem;color:var(--grau);white-space:nowrap}
.neu h3{margin:0 0 .25rem;font-size:1.06rem;line-height:1.3}
.neu p{margin:0;color:var(--grau);font-size:.97rem;line-height:1.55}

/* Sprechzeiten (28.09.2026, Kundenwunsch): unter „Aktuelles" auf der Startseite und oben
   auf /kontakt/. Weißer Kasten wie die Meldungen, aber mit Marine-Kante: Er ist keine
   Meldung, sondern die feste Angabe, nach der Eltern zuerst suchen.
   Ab 720 px fünf Tage nebeneinander, darunter ein Tag je Zeile mit den Zeiten rechts. */
.sprechzeiten{background:#fff;border:1px solid var(--linie);border-left:4px solid var(--marine);
  border-radius:0 10px 10px 0;padding:1rem 1.2rem 1.1rem;margin-bottom:.75rem}
.sz-kopf{display:flex;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap;margin-bottom:.8rem}
.sprechzeiten .sz-kopf h2,.sprechzeiten .sz-kopf h3{margin:0;padding:0;border:0;
  font-size:1.18rem;line-height:1.25;color:var(--marine)}
.sz-hinweis{font-size:.92rem;color:var(--grau)}
.sz-woche{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0}
.sz-tag{padding:.1rem .9rem;border-left:1px solid var(--linie)}
.sz-tag:first-child{padding-left:0;border-left:0}
.sz-tag dt{font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tuerkis-t);margin-bottom:.3rem}
.sz-tag dd{margin:0;font-family:"Epi",sans-serif;font-weight:700;font-size:1.04rem;
  color:var(--text);line-height:1.45;font-variant-numeric:tabular-nums;white-space:nowrap}
.sz-tag dd.zu{font-family:"Rethink",sans-serif;font-weight:500;font-size:.88rem;color:var(--grau);
  white-space:normal}
@media (max-width:1000px) and (min-width:720px){
  .sz-tag{padding-inline:.6rem}
  .sz-tag dd{font-size:.96rem}
}
@media (max-width:719px){
  .sz-woche{grid-template-columns:1fr}
  .sz-tag{display:grid;grid-template-columns:6.2rem 1fr;column-gap:.8rem;align-items:baseline;
    padding:.5rem 0;border-left:0;border-top:1px solid var(--linie)}
  .sz-tag:first-child{border-top:0;padding-top:0}
  .sz-tag dt{grid-row:span 2;margin:0}
  .sz-tag dd{grid-column:2}
}

/* Kurzform in der Seitenspalte der Unterseiten. */
.karte .sz-kurz{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:.35rem 0 0}
.karte .sz-kurz dt{font-weight:700;color:var(--marine);font-size:.93rem}
.karte .sz-kurz dt abbr[title]{text-decoration:none}
.karte .sz-kurz dd{margin:0;color:var(--text);font-size:.93rem;font-variant-numeric:tabular-nums}

/* Logo im Fuß: der Grund ist dunkel, das Logo lebt aber von Türkis und
   Apricot. Ohne helle Fläche stünde dort eine weiße Silhouette, in der
   der Kunde sein Logo nicht wiedererkennt (Frank, 25.08.2026). */
.fuss img{background:#fff;border-radius:12px;padding:.45rem .55rem}

/* ⚠ Bis 26.08.2026 stand hier `.neues .mehr` — an den Container gebunden.
   Derselbe Knopf im dunklen Praxis-Abschnitt fiel dadurch auf den
   Browser-Standard zurück: blau und unterstrichen auf Petrol.
   Verwandt: Memory `css-modifier-nie-wie-container-benennen-2026-08`. */
.mehr{margin-left:auto;font-weight:700;text-decoration:none;color:var(--tuerkis-t);white-space:nowrap}
.mehr:hover,.mehr:focus-visible{text-decoration:underline}
/* Zeile unter den beiden Notruf-Karten auf der Startseite, fuehrt auf /notdienst/. */
.mehr-zeile{margin:1.5rem 0 0}
.mehr svg{width:1.05em;height:1.05em;vertical-align:-.18em;margin-left:.35rem}
.stimme .mehr{color:#8ed6da}

/* ── Navigation: ruhig, aber nicht leblos ────────────────────────────
   Frank, 25.08.2026: „seriös bleiben, sieht aber sehr langweilig aus."
   Zwei Mittel, beide zurückhaltend:
   1. eine Linie, die beim Zeigen von der Mitte aus wächst
   2. der Abschnitt, in dem man gerade steht, bleibt markiert
   Der Termin-Knopf ist am 27.08.2026 auf Kundenwunsch entfallen; seine Regeln sind
   mit entfernt worden, damit keine tote Klasse zurueckbleibt.
   Kein Farbwechsel, kein Rahmen, keine Bewegung, die vom Lesen ablenkt. */
.navi a{position:relative;padding:.55rem .1rem;margin:0 .95rem;font-weight:600;
  color:var(--text);text-decoration:none;transition:color .18s}
.navi a::after{content:"";position:absolute;left:50%;right:50%;bottom:.15rem;height:2px;
  background:var(--tuerkis-t);border-radius:2px;transition:left .22s ease,right .22s ease}
.navi a:hover{color:var(--tuerkis-t);background:none}
.navi a:hover::after{left:0;right:0}
/* ⚠ Zwei Quellen setzen dieses Merkmal, und sie schreiben VERSCHIEDENE Werte:
   functions.php schreibt aria-current="page" (welche SEITE), js/seite.js schreibt
   aria-current="true" (welcher ABSCHNITT, Scrollspy). Ein Selektor auf einen der
   beiden Werte laesst die andere Haelfte still wirkungslos — genau das war bis zum
   27.08.2026 der Fall. Deshalb auf das blosse Vorhandensein pruefen. */
.navi a[aria-current]{color:var(--tuerkis-t)}
.navi a[aria-current]::after{left:0;right:0;background:var(--warm)}
.navi a:focus-visible{outline:2px solid var(--tuerkis-t);outline-offset:4px;border-radius:3px}


/* Der Kopf bekommt beim Scrollen einen feinen Schatten statt einer harten Kante */
.kopf{transition:box-shadow .2s,border-color .2s}
.kopf.gescrollt{box-shadow:0 2px 14px rgba(12,63,95,.10);border-bottom-color:transparent}
@media (prefers-reduced-motion:reduce){
  .navi a::after,.kopf{transition:none}
}

/* ── Navigation, zweiter Anlauf ──────────────────────────────────────
   Frank, 25.08.2026: „wollten wir nicht die navi schicker machen?"
   Der erste Versuch wirkte nur in Bewegung (Hover, Scrollspy) — im
   Standbild hatte sich nichts geändert. Jetzt sichtbar in Ruhe:
   · Versalien, gesperrt, etwas kleiner — die Anmutung einer Beschilderung
   · feine Trennstriche zwischen den Punkten statt Leerraum
   · Akzentlinie unter dem Kopf statt einer grauen Kante
   · der Termin-Knopf trägt eine zweite Zeile mit dem Datum
   Kein zusätzlicher Farbton, keine Bewegung, die vom Lesen ablenkt. */
.navi a{font-size:.86rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  margin:0;padding:.55rem .95rem;color:var(--text)}
/* Polster 1.15rem -> .95rem am 27.08.2026: die Wortmarke aus dem Originallogo macht die
   Marke rund 67 px breiter als der frueher gesetzte Schriftzug. Gemessen war danach
   32 px zu wenig. Fuenf Menuepunkte x 2 x 3.2 px Polster ergeben genau diese 32 px
   zurueck, ohne die Wortmarke schrumpfen zu muessen. */
.navi a + a{border-left:1px solid var(--linie)}
.navi a::after{bottom:-.05rem;height:2.5px}
.kopf{border-bottom:2px solid var(--tuerkis)}
.kopf.gescrollt{border-bottom-color:var(--tuerkis)}


/* ── UNTERSEITEN ──────────────────────────────────────── */
.seitenkopf{background:var(--marine);color:var(--weiss);padding:clamp(2.4rem,6vw,4.2rem) 0}
.seitenkopf h1{color:var(--weiss);font-size:clamp(2rem,5.2vw,3.2rem);max-width:20ch}
.seitenkopf .lauf{color:var(--marine-t);margin-top:1rem;max-width:620px;font-size:1.14rem}
.seiteninhalt{max-width:760px}
.seiteninhalt h2{font-size:clamp(1.42rem,3vw,1.85rem);margin:2.6rem 0 .85rem;
  padding-top:1.6rem;border-top:1px solid var(--linie)}
.seiteninhalt h2:first-child{margin-top:0;padding-top:0;border-top:0}
.seiteninhalt h3{font-size:1.12rem;margin:1.7rem 0 .4rem;color:var(--tuerkis-t)}
.seiteninhalt p{margin:0 0 1.05rem}
.seiteninhalt ul{margin:0 0 1.2rem;padding-left:1.15rem}
.seiteninhalt li{margin-bottom:.42rem}
.seiteninhalt a{color:var(--marine);text-decoration:underline;text-underline-offset:3px}
.seiteninhalt a:hover{color:var(--tuerkis-t)}
.seiteninhalt strong{color:var(--marine)}

/* Antwortabsatz — die kurze Antwort ganz oben */
.kapsel{background:var(--tuerkis-h);border-radius:var(--r);padding:1.15rem 1.35rem;
  margin:0 0 1.8rem;font-size:1.08rem;line-height:1.55;color:var(--text)}
.kapsel b,.kapsel strong{color:var(--marine)}

/* Hinweiszeile im Fliesstext */
.merke{background:var(--warm-h);border-radius:var(--r);padding:1rem 1.25rem;margin:1.4rem 0;
  font-size:1rem}
.merke b{color:var(--warm-t)}

/* Tabelle der Untersuchungen */
.tafel{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:1rem}
.tafel th,.tafel td{text-align:left;padding:.62rem .7rem;border-bottom:1px solid var(--linie);
  vertical-align:top}
.tafel th{background:var(--papier);color:var(--marine);font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase}
.tafel td:first-child{white-space:nowrap;font-weight:700;color:var(--marine)}
.tafel tr:last-child td{border-bottom:0}
.tafelrahmen{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r);
  margin:0 0 1.6rem}
.tafelrahmen .tafel{margin:0}

@media (max-width:640px){
  .seiteninhalt h2{margin-top:2rem}
  .tafel th,.tafel td{padding:.55rem .5rem;font-size:.94rem}
}

/* Neuigkeiten-Uebersicht und Einzelmeldung */
.neuliste .neu h2{font-size:1.18rem;margin:.15rem 0 .45rem;padding:0;border:0}
.neuliste .neu h2 a{color:var(--marine);text-decoration:none}
.neuliste .neu h2 a:hover{color:var(--tuerkis-t);text-decoration:underline;text-underline-offset:3px}
.ruecklink{margin:0 0 .9rem}
.ruecklink a{color:var(--marine-t);text-decoration:none;font-weight:600;font-size:.96rem}
.ruecklink a:hover{color:var(--weiss);text-decoration:underline;text-underline-offset:3px}
.seitenkopf .lauf.gross time{color:var(--marine-t)}
.pagination{margin-top:2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.pagination .page-numbers{display:inline-block;padding:.5rem .85rem;border:1px solid var(--linie);
  border-radius:var(--r);color:var(--marine);text-decoration:none;font-weight:600}
.pagination .page-numbers.current{background:var(--marine);color:var(--weiss);border-color:var(--marine)}
.pagination .page-numbers:hover:not(.current){background:var(--marine-t)}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── UNTERSEITEN: Raster mit Seitenspalte ─────────────── */
/* Vorher lief der Text in einer 760-px-Spalte auf einer 1220-px-Spur —
   415 px rechts blieben leer. Die Spalte fuellt sie mit dem, was Eltern
   auf jeder Seite suchen. */
.seitenraster{display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem;align-items:start}
/* Ohne Seitenspalte: Lesebreite halten, aber MITTIG — symmetrischer Weissraum
   liest sich als Absicht, rechtsbuendiger als Loch.
   ⚠ `width:100%` ist Pflicht, nicht Zierde: Ohne sie zieht die Tabelle auf
   /vorsorge/ die Rasterspalte auf ihre eigene Mindestbreite auf — bei 390 px
   gemessen 481 px Inhalt in einer 343-px-Spur, der Text wurde rechts
   abgeschnitten. `min-width:0` allein aendert daran NICHTS (am 26.08.2026
   im Browser durchprobiert). */
.seiteninhalt,.inhaltspalte{width:100%;max-width:44rem;min-width:0;margin-inline:auto}

@media (min-width:1080px){
  .seitenraster{grid-template-columns:minmax(0,1fr) 330px;gap:3.2rem}
  .seiteninhalt,.inhaltspalte{max-width:44rem;margin-inline:0}
}

.spalte{display:flex;flex-direction:column;gap:1.1rem}
@media (min-width:1080px){ .spalte{position:sticky;top:120px} }

.karte{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);
  padding:1.35rem 1.4rem}
.karte h2{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tuerkis-t);
  margin:0 0 1rem;padding:0;border:0}
.karte .zeile{padding:.7rem 0;border-bottom:1px solid var(--linie)}
.karte .zeile:first-of-type{padding-top:0}
.karte .zeile .bez{display:block;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--grau);margin-bottom:.2rem}
.karte .zeile b{display:block;color:var(--marine);font-size:1.02rem;line-height:1.35}
.karte .zeile span:not(.bez){display:block;color:var(--grau);font-size:.93rem}
.karte .zeile a{color:var(--marine);font-weight:600;word-break:break-word;font-size:.96rem}
/* Tippziel der Kontaktzeilen auf mind. 44 px bringen — Telefon und E-Mail sind auf dem
   Handy die wichtigsten Ziele der Seite. Negativer Rand haelt den Textfluss unveraendert. */
.karte .zeile a[href^="tel:"],.karte .zeile a[href^="mailto:"]{
  display:inline-block;padding-block:.62rem;margin-block:-.5rem}
.karte .knopf{margin-top:1.15rem;width:100%;justify-content:center;text-align:center}
.karte.weiter{display:flex;flex-direction:column}
.karte.weiter a{display:block;padding:.62rem 0;border-bottom:1px solid var(--linie);
  color:var(--marine);text-decoration:none;font-weight:600}
.karte.weiter a:last-child{border-bottom:0;padding-bottom:0}
.karte.weiter a:hover{color:var(--tuerkis-t);text-decoration:underline;text-underline-offset:3px}

/* Seitenkopf mit Bild */
.kopfraster{display:grid;grid-template-columns:minmax(0,1fr);gap:1.8rem;align-items:center}
@media (min-width:900px){
  .seitenkopf.mitbild .kopfraster{grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:3rem}
}
/* ── Eckdaten im Seitenkopf ──────────────────────────────────────────────
   Fuellen den Platz neben dem Kopfbild, der sonst leer bleibt: der Vorspann
   ist mit 12–24 Woertern kuerzer als das Bild hoch (gemessen 27.08.2026:
   117–206 px Text gegen 316 px Bild). Bewusst KOMPAKTER als .faktum auf der
   Startseite — dort sind es Bloecke mit eigener Polsterung, hier eine Zeile.
   ⛔ Inhalt je Seite verschieden: Anschrift, Sprachen und Telefon stehen
   bereits in der Sidebar-Praxiskarte, die auf ALLEN Unterseiten laeuft.
   Dieselben Felder hier waeren eine Dublette im selben Sichtfeld. */
.kopffakten{display:flex;flex-wrap:wrap;margin-top:1.5rem;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.18)}
.kopffakten>div{padding-right:1.4rem;margin-right:1.4rem;
  border-right:1px solid rgba(255,255,255,.16)}
.kopffakten>div:last-child{border-right:0;margin-right:0;padding-right:0}
.kopffakten .bez{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label-hell);margin-bottom:.18rem}
.kopffakten b{display:block;font-family:"Epi",sans-serif;font-size:.98rem;
  font-weight:700;color:#fff;line-height:1.25}
@media (max-width:900px){
  .kopffakten>div{border-right:0;margin-right:0;padding-right:0;
    flex:0 0 100%;margin-bottom:.65rem}
  .kopffakten>div:last-child{margin-bottom:0}
}

.kopfbild{border-radius:var(--r);overflow:hidden;line-height:0;
  box-shadow:0 18px 40px rgba(0,0,0,.18)}
.kopfbild img{width:100%;height:auto;display:block}

/* ── KONTAKTFORMULAR ──────────────────────────────────── */
.kformular{max-width:34rem}
.kformular .falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kfeld{margin:0 0 1.15rem}
.kfeld label,.kfeld legend{display:block;font-weight:700;color:var(--marine);margin-bottom:.35rem;
  font-size:.98rem}
.kfeld .pflicht{color:var(--warm-t)}
.kfeld .wahl{font-weight:400;color:var(--grau);font-size:.86rem}
.kfeld input[type=text],.kfeld input[type=email],.kfeld input[type=tel],
.kfeld input[type=date],.kfeld textarea{
  width:100%;border:1px solid var(--linie);border-radius:var(--r);padding:.7rem .8rem;
  font:inherit;font-size:1rem;color:var(--text);background:var(--weiss)}
.kfeld input:focus-visible,.kfeld textarea:focus-visible{border-color:var(--tuerkis-t)}
.kfeld fieldset{border:0;padding:0;margin:0}
.wahlfeld{display:flex;gap:.6rem;align-items:flex-start;padding:.42rem 0;
  font-weight:400;color:var(--text);cursor:pointer;font-size:1rem;margin-bottom:0}
.wahlfeld input{margin-top:.28rem;flex:0 0 auto;width:18px;height:18px;accent-color:var(--marine)}
.wahlfeld.zustimmung{margin:.6rem 0 1.3rem;font-size:.95rem;color:var(--grau)}
.wahlfeld.zustimmung a{color:var(--marine)}
.kfeld .hinweis{margin:.55rem 0 0;font-size:.9rem;color:var(--warm-t);
  background:var(--warm-h);border-radius:var(--r);padding:.7rem .85rem;font-weight:400}
.kfeld .hinweis b{color:var(--warm-t)}
/* Neutraler Hilfstext: KEIN Warnkasten. Der warme Kasten oben bedeutet
   „Vorsicht" (Gesundheitsdaten) — eine Einplanungshilfe darf nicht so aussehen. */
.kfeld .hinweis.leise{background:none;padding:.1rem 0 0;color:var(--grau)}
.kmeldung{margin:.9rem 0 0;font-weight:600}
.kmeldung.gut{color:var(--tuerkis-t)}
.kmeldung.schlecht{color:var(--warm-t)}
.kformular button[disabled]{opacity:.6;cursor:default}

/* ── KATEGORIEN-LEISTE ────────────────────────────────── */
.kategorien{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.8rem}
.kategorien a{display:inline-flex;align-items:center;gap:.4rem;padding:.48rem .85rem;
  border:1px solid var(--linie);border-radius:999px;background:var(--weiss);
  color:var(--marine);text-decoration:none;font-weight:600;font-size:.94rem;line-height:1.2}
.kategorien a:hover{background:var(--marine-t);border-color:var(--marine-t)}
.kategorien a[aria-current]{background:var(--marine);border-color:var(--marine);color:var(--weiss)}
.kategorien .zahl{font-size:.8rem;font-weight:700;color:var(--grau)}
.kategorien a[aria-current] .zahl{color:var(--marine-t)}
.weiterlesen{margin:.7rem 0 0}
.weiterlesen a{color:var(--tuerkis-t);text-decoration:none;font-weight:700;font-size:.94rem}
.weiterlesen a:hover{text-decoration:underline;text-underline-offset:3px}
.seitenkopf .kennzeichen{display:inline-block;background:rgba(255,255,255,.14);
  border-radius:999px;padding:.3rem .8rem;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--weiss);text-decoration:none;margin-right:.5rem}
.seitenkopf .kennzeichen:hover{background:rgba(255,255,255,.26)}

/* Karte auf der Anfahrtsseite — lokal, kein Kartenfenster */
.karte-figur{margin:0 0 1.6rem;border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.karte-figur img{width:100%;height:auto;display:block}
.karte-figur figcaption{padding:.65rem .9rem;font-size:.86rem;color:var(--grau);
  background:var(--papier);border-top:1px solid var(--linie)}

/* ── MOBIL: Tippflaechen und Mindestgroessen ──────────── */
/* Gemessen 26.08.2026: mehrere Tippflaechen unter 44 px und Beschriftungen
   bis herunter auf 11,5 px. Fliesstext-Links bleiben, wie sie sind — die zaehlen
   nach WCAG als Inline-Ausnahme; angefasst wird, was als Bedienelement dient. */
@media (max-width:768px){
  /* Absenden geht ueber die volle Breite — auf dem Handy ist ein schmaler Knopf ein Zielproblem */
  .kformular button[type=submit]{width:100%;justify-content:center;padding:.95rem 1rem}

  /* Fussnavigation: aus 24 px Zeilenhoehe werden 44 px Tippflaeche */
  .fuss nav a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem .1rem}

  /* Themenleiste der Neuigkeiten */
  .kategorien a{min-height:44px;padding:.6rem 1rem}

  /* Auswahlfelder im Formular */
  .wahlfeld{min-height:44px;align-items:center;padding:.5rem 0}
  .wahlfeld input{width:22px;height:22px;margin-top:0}
  .wahlfeld.zustimmung{align-items:flex-start}
  .wahlfeld.zustimmung input{margin-top:.2rem}

  /* Kleinste Beschriftungen anheben — 11,5 px sind auf dem Handy zu wenig */
  .karte .zeile .bez{font-size:.8rem}
    .marke-neu{font-size:.78rem}
  .kfeld .wahl,.karte-figur figcaption{font-size:.9rem}
}

/* ── TABELLE AUF DEM HANDY: gestapelt statt seitlich scrollend ──
   Eine Tabelle mit 14 Zeilen und 4 Spalten laesst sich bei 390 px nicht
   sinnvoll scrollen — gerade auf der Seite, deren Kern sie ist. Jede Zeile
   wird deshalb zu einem Block, jede Zelle traegt ihre Beschriftung selbst. */
@media (max-width:719px){
  .tafelrahmen{border:0;overflow:visible}
  .tafel,.tafel tbody,.tafel tr,.tafel td{display:block;width:100%}
  /* ⚠ Nicht per clip verstecken: die <th> behalten dann display:table-cell,
     legen sich in voller Breite aus und erzeugen 66 px waagerechten Ueberlauf
     (26.08.2026 gemessen). Die Beschriftung steht ohnehin sichtbar in jedem
     td::before, es geht also keine Information verloren. */
  .tafel thead{display:none}
  .tafel tr{border:1px solid var(--linie);border-radius:var(--r);margin-bottom:.75rem;
    padding:.55rem .85rem;background:var(--weiss)}
  .tafel td{border:0;padding:.3rem 0;display:flex;gap:.9rem;align-items:baseline;
    justify-content:space-between}
  .tafel td::before{content:attr(data-spalte);flex:0 0 auto;font-size:.76rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--grau);font-weight:700}
  .tafel td:first-child{white-space:normal;border-bottom:1px solid var(--linie);
    padding-bottom:.45rem;margin-bottom:.3rem}
  .tafel td:first-child::before{content:attr(data-spalte)}
  .tafel td:empty,.tafel td:has(> :empty){display:none}
}

/* ⛔ `.knopf.linie` ist fuer den dunklen Auftakt gebaut: weisse Schrift auf
   halbdurchsichtigem Weiss. Im hellen Seiteninhalt ergibt das Weiss auf Weiss —
   Kontrast 1,00, der Knopf war auf /anfahrt/ unsichtbar (26.08.2026 gemessen).
   Auf hellem Grund bekommt er deshalb die dunkle Fassung. */
.seiteninhalt .knopf.linie,.inhaltspalte .knopf.linie{
  border:1px solid var(--marine);color:var(--marine);background:var(--weiss)}
.seiteninhalt .knopf.linie:hover,.inhaltspalte .knopf.linie:hover{
  background:var(--marine-t)}

/* ⚠ Wer width/height ins HTML schreibt (gegen Springen beim Laden), MUSS in jeder
   CSS-Regel, die nur eine Dimension setzt, die andere auf `auto` stellen. Sonst
   bleibt die Attributbreite stehen und das Bild wird verzerrt — am 26.08.2026 im
   Fuss passiert, nachdem die Maßangaben nachgerüstet wurden. */
.fuss img,.marke img,.karte-figur img,.kopfbild img{max-width:100%}

/* Sachlicher Teil unter den drei Saetzen im Abschnitt „Die Praxis" */
.praxisfakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1.4rem 2.2rem;margin-top:2.6rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.18)}
.praxisfakten .bez{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--label-hell);margin-bottom:.4rem;font-weight:700}
.praxisfakten p{color:var(--marine-t);font-size:1rem;line-height:1.6;margin:0}
.praxisfakten strong{color:var(--weiss)}
@media (max-width:640px){
  .praxisfakten{margin-top:2rem;padding-top:1.6rem;gap:1.3rem}
  .praxisfakten .bez{font-size:.8rem}
}

/* Restliche Bedienelemente auf Tippgroesse — gemessen 26.08.2026 bei 390 px */
@media (max-width:768px){
  .karte.weiter a{min-height:44px;display:flex;align-items:center}
  .mehr,.weiterlesen a{display:inline-flex;align-items:center;min-height:44px}
}

/* Zwei Routenziele nebeneinander — der Besucher waehlt seinen Kartendienst.
   Beide sind reine Links: Daten fliessen erst beim Klick, nicht beim Seitenaufruf. */
.routen{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.6rem}
@media (max-width:520px){ .routen .knopf{width:100%;justify-content:center} }

/* Knoepfe im Seiteninhalt sind keine Fliesstext-Links — die Unterstreichung
   aus `.seiteninhalt a` gehoert dort nicht hin. */
.seiteninhalt .knopf,.inhaltspalte .knopf{text-decoration:none}
.seiteninhalt .knopf:hover,.inhaltspalte .knopf:hover{text-decoration:none}


/* ── Notdienst auf der Startseite (26.08.2026) ────────────────────────────
   Ersetzt den Leistungsblock. Die zwei Nummern stehen offen da, alles
   Weitere klappt auf — <details> statt Skript, damit es ohne JS funktioniert
   und auch im Ausdruck aufgeht. */
.notruf{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.notruf-karte{display:block;text-decoration:none;border-radius:var(--r);
  padding:1.15rem 1.3rem;background:var(--marine-t);border:1px solid var(--linie);
  transition:background .15s,border-color .15s}
.notruf-karte:hover,.notruf-karte:focus-visible{background:var(--tuerkis-h);border-color:var(--tuerkis)}
.notruf-karte .bez{display:block;font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tuerkis-t);margin-bottom:.3rem}
.notruf-karte b{display:block;font-family:"Epi",sans-serif;font-size:2.1rem;font-weight:700;
  line-height:1.05;color:var(--marine);letter-spacing:-.02em}
.notruf-karte>span:last-child{display:block;font-size:.92rem;color:var(--grau);margin-top:.3rem;line-height:1.45}
.notruf-karte.dringend{background:var(--warm-h);border-color:#f3d3b4}
.notruf-karte.dringend:hover,.notruf-karte.dringend:focus-visible{background:#fbe6d4;border-color:var(--warm)}
.notruf-karte.dringend .bez{color:var(--warm-t)}
.notruf-karte.dringend b{color:var(--warm-t)}
/* ⛔ ZWEI Fallen, beide am 27.08.2026 auf /kontakt/ zugeschlagen, als die Karten zum
   ersten Mal in einem Seitentext standen statt in einer Vorlage:
   1. `wpautop` macht aus jedem Zeilenumbruch INNERHALB eines <a> ein <br />. Im Grid
      zaehlt so ein <br> als eigene Zelle — die zweite Karte rutschte dadurch in die
      naechste Zeile. ▶ Markup im post_content EINZEILIG schreiben (inhalte/kontakt.html).
      Tabellen und Listen sind unbetroffen, die kennt wpautop als Block-Elemente.
   2. `.seiteninhalt a` (Spezifitaet 0,1,1) schlaegt `.notruf-karte` (0,1,0) — die Karten
      wurden dadurch marineblau unterstrichen. ▶ Deshalb hier mit zwei Klassen dagegen. */
.seiteninhalt .notruf-karte{text-decoration:none;color:var(--text)}
.seiteninhalt .notruf-karte:hover{text-decoration:none}
.seiteninhalt .notruf-karte b,.seiteninhalt .notruf-karte .bez,
.seiteninhalt .notruf-karte>span:last-child{text-decoration:none}

.klapp{margin-top:1.2rem;border:1px solid var(--linie);border-radius:var(--r);background:var(--weiss)}
.klapp>summary{cursor:pointer;list-style:none;padding:.95rem 1.25rem;font-weight:600;
  color:var(--marine);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.klapp>summary::-webkit-details-marker{display:none}
.klapp>summary svg{width:20px;height:20px;flex:0 0 auto;transition:transform .18s}
.klapp[open]>summary svg{transform:rotate(180deg)}
.klapp>summary:hover{background:var(--papier)}
.klapp-in{padding:.25rem 1.25rem 1.35rem;border-top:1px solid var(--linie)}
.klapp-in h3{font-size:1.05rem;margin:1.25rem 0 .35rem;color:var(--marine)}
.klapp-in h3:first-child{margin-top:1rem}
.klapp-in p{font-size:.97rem;line-height:1.6}
.liste{margin:.5rem 0 .2rem;padding-left:1.15rem}
.liste li{font-size:.97rem;line-height:1.55;margin-bottom:.3rem}
.stand{margin-top:1.2rem;font-size:.84rem;color:var(--grau)}

@media (max-width:700px){
  .notruf{grid-template-columns:1fr}
  .notruf-karte b{font-size:1.85rem}
}

/* Hinweis unter dem Termin-Knopf. Kundenwunsch 01.09.2026: "Doctolib in kurzem
   verfuegbar" neben dem Online-Termin. Gedaempft gesetzt, damit er nicht wie ein
   zweiter Knopf wirkt -- der Kunde hatte am 25.08. bemaengelt, zwei Optionen seien
   "zu viel". */
/* Hinweis unter dem Termin-Knopf. Kundenwunsch 01.09.2026: in Rot -- dahinter steckte ein
   echter Defekt. Die frueheren Regeln zielten auf .seitenspalte/.praxis-spalte, und diese
   Klassen kommen im Markup NICHT vor (am gerenderten DOM gemessen). Es griff deshalb immer
   nur der helle Grundwert #e9f4f4 -- auf heller Karte 1,05:1, also unsichtbar.
   Grundfall ist jetzt der HELLE Untergrund; der dunkle Kasten korrigiert selbst nach.
   ⛔ Ein dunkles Rot auf #0d5b62 laege bei 1,19:1 -- der Fehler waere nur verschoben. */
.knopf-hinweis{display:block;margin-top:.5rem;font-size:.86rem;line-height:1.4;
  color:var(--warnrot);opacity:1;font-weight:600}          /* auf heller Karte: 6,09:1 */
.auftakt .knopf-hinweis{color:var(--warnrot-hell)}         /* auf marine #0d5b62: 5,08:1 */

/* Telefonzeile im Praxis-Kasten -- selber Kundenwunsch, dieselben zwei Untergruende.
   .karte .zeile b setzt sonst --marine, deshalb muss diese Regel danach stehen. */
.zeile.wartet b,.karte .zeile.wartet b{color:var(--warnrot)}
.auftakt .zeile.wartet b{color:var(--warnrot-hell)}


/* Rechtszeile im Fuss -- Hausstandard, uebernommen von kfz-gutachter-bandel.de (01.09.2026).
   Der Agentur-Hinweis bekommt bewusst KEINE eigene Regel: gleiche Farbe, gleiche Groesse
   wie Impressum und Datenschutz. Gleichrangig wirkt wie Seitenbestandteil; abgesetzt und
   gedaempft wirkt wie angeklebt -- und ein farblich zurueckgenommener Link liest sich
   ausserdem als Versteckversuch. */
.fuss-schluss{padding-block:.85rem 1.5rem;margin-top:.2rem;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.7rem 1.6rem;
  font-size:.86rem;color:#bcd2e3}
.fuss-recht{display:flex;flex-wrap:wrap;gap:1.5rem}
.fuss-recht a{color:#bcd2e3;text-decoration:none}
.fuss-recht a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--warm);
  text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:700px){.fuss-schluss{flex-direction:column;align-items:flex-start;gap:.9rem}}