:root{
  --tief:#123E63;
  --blau:#1F6BA8;
  --blau-hell:#EAF2F8;
  --rot:#C8443F;
  --gelb:#E8B744;
  --papier:#FBFCFD;
  --grau:#4F667C;
  --linie:#D8E4EE;
  /* Schriften: bewusst ohne Nachladen aus dem Netz. Sie sind auf jedem
     Gerät vorhanden, erscheinen sofort und verursachen keinen Textsprung
     beim Laden. Wie sich eigene Hausschriften ergänzen lassen, steht in
     LIESMICH-schriften.md. */
  --display:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --breit:min(1180px,92vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--papier);color:var(--tief);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0}
a{color:var(--blau)}
img,svg{max-width:100%}
.wrap{width:var(--breit);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--tief);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 6px var(--gelb)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:.8rem 1.2rem;z-index:100;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

/* ---------- Kopfleiste ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(251,252,253,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.topbar .wrap{display:flex;align-items:center;gap:1.2rem;min-height:74px;width:min(1320px,94vw)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;margin-right:auto}
.brand svg{width:58px;height:42px;display:block;flex:none}
.brand b{font-family:var(--display);font-size:1.52rem;letter-spacing:.02em;display:block;line-height:1}
.brand .sub{font-size:.755rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);display:block;margin-top:.16rem}
.nav{display:flex;gap:1.05rem;flex-wrap:nowrap}
.nav a{text-decoration:none;color:var(--tief);font-weight:600;font-size:.93rem;padding-block:.3rem;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{border-bottom-color:var(--gelb)}
.tel{display:inline-flex;align-items:center;gap:.5rem;background:var(--blau);color:#fff;text-decoration:none;font-weight:600;padding:.62rem 1.1rem;border-radius:999px;font-size:.95rem;white-space:nowrap}
.tel:hover{background:var(--tief)}
@media(max-width:980px){.nav{display:none}}
@media(max-width:520px){.tel .lang{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(2.5rem,7vw,5.5rem) 0 0}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin:0 0 1.1rem}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.9rem)}
.hero h1 em{font-style:normal;color:var(--blau);display:block}
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--grau);max-width:36ch;margin:1.4rem 0 2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:600;padding:.85rem 1.5rem;border-radius:999px;font-size:1rem}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-p{background:var(--tief);color:#fff}
.btn-p:hover{background:var(--blau)}
.btn-s{border:2px solid var(--linie);color:var(--tief);background:#fff}
.btn-s:hover{border-color:var(--blau)}
.mark{max-width:545px;margin-inline:auto}
.mark svg{width:100%;height:auto;display:block;transform-origin:52% 60%;animation:atem 6.5s ease-in-out infinite}
@keyframes atem{0%,100%{transform:scale(1)}45%{transform:scale(1.022)}}
.wave{display:block;width:100%;height:auto;margin-top:-2px}
/* Am Handy steht die Spalte mit Lumi und den Aerzten unter dem Text, nicht
   darueber: Zuerst soll lesbar sein, worum es geht. Frueher stand Lumi oben
   (order:-1) - das ging, solange darunter nichts weiter kam; mit der
   Aerzteleiste haette es die Ueberschrift zu weit nach unten geschoben. */
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.mark{max-width:340px}}

/* ---------- Soforthilfe ---------- */
.quick{background:var(--tief);color:#fff;padding:clamp(2rem,4vw,2.8rem) 0}
.quick .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.qcard h3{font-size:1.05rem;margin-bottom:.45rem;color:#fff}
.qcard p{margin:0;color:#CFE0EE;font-size:.96rem}
.qcard .big{font-family:var(--mono);font-size:1.5rem;color:#fff;letter-spacing:-.01em;display:block;margin-bottom:.2rem}
.qcard a{color:#fff}
.qcard.notfall{border-left:3px solid var(--gelb);padding-left:1.2rem}
@media(max-width:800px){.quick .wrap{grid-template-columns:1fr;gap:1.4rem}}

/* ---------- Abschnitte ---------- */
section{padding:clamp(3.2rem,7vw,6rem) 0}
.kopf{max-width:54ch;margin-bottom:clamp(2rem,4vw,3rem)}
.kopf .label{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);display:block;margin-bottom:.8rem}
.kopf h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.kopf p{color:var(--grau);margin:1rem 0 0}

.schwerpunkte{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.panel{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:clamp(1.6rem,3vw,2.4rem);position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:5px}
.panel.lunge::before{background:linear-gradient(90deg,#619FCD,#184B83)}
.panel.allergie::before{background:linear-gradient(90deg,#EE7774,#AD2A35)}
.panel h3{font-size:1.5rem;margin-bottom:.8rem}
.panel > p{color:var(--grau);margin:0 0 1.4rem}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
/* min-width:0 – ohne das schrumpfen Rasterfelder nicht unter die Breite
   ihres längsten Wortes. Auf einem 320-Pixel-Gerät lief die Seite dadurch
   bei Wörtern wie "Weiterbildungsermächtigung" seitlich weg. */
.liste li{padding-left:1.7rem;position:relative;font-size:.98rem;min-width:0;overflow-wrap:break-word}
.liste li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--gelb)}
.liste li b{font-weight:600}
@media(max-width:800px){.schwerpunkte{grid-template-columns:1fr}}

.grund{background:var(--blau-hell)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.kachel{background:#fff;border-radius:16px;padding:1.5rem;border:1px solid var(--linie)}
.kachel h3{font-size:1.1rem;margin-bottom:.4rem}
.kachel p{margin:0;font-size:.95rem;color:var(--grau)}
h3.gruppe{font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin:2.6rem 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--linie)}
h3.gruppe:first-of-type{margin-top:0}

/* ---------- Selbstzahlerleistungen ---------- */
.igel{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.igel-karte{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:clamp(1.6rem,3vw,2.4rem)}
.igel-karte h3{font-size:1.45rem;margin:.2rem 0 .8rem}
.igel-karte h4{font-family:var(--body);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);margin:1.6rem 0 .8rem}
.igel-karte > p{color:var(--grau);margin:0}
.igel-karte .klein{font-size:.9rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--linie)}
.badge.gelb{background:#FFF6E0;color:#7A5A12}
@media(max-width:900px){.igel{grid-template-columns:1fr}}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.arzt{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:clamp(1.6rem,3vw,2.2rem);display:flex;gap:1.2rem;align-items:flex-start}
.arzt .initialen{flex:none;width:58px;height:58px;border-radius:50%;background:var(--blau-hell);color:var(--blau);font-family:var(--display);font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.arzt h3{font-size:1.2rem;margin-bottom:.25rem}
.arzt .rolle{font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blau);font-weight:600;margin:0 0 .7rem}
.arzt p{margin:0;color:var(--grau);font-size:.96rem}

/* ---------- Termin ---------- */
.termin{background:var(--blau-hell)}
.wege{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:1.4rem;align-items:stretch}
.weg{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column}
.weg.haupt{border:2px solid var(--blau);box-shadow:0 18px 40px -28px rgba(18,62,99,.55)}
.weg .num{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin-bottom:.7rem}
.weg h3{font-size:1.3rem;margin-bottom:.6rem}
.weg p{color:var(--grau);margin:0 0 1.2rem;font-size:.97rem}
.weg .btn{margin-top:auto;justify-content:center}
.weg ul{margin:0 0 1.2rem;padding-left:1.1rem;color:var(--grau);font-size:.94rem;display:grid;gap:.35rem}
.badge{display:inline-block;background:#EAF6EC;color:#256B37;font-size:.8rem;font-weight:600;padding:.25rem .7rem;border-radius:999px;margin-bottom:.9rem}
.wege.zwei{grid-template-columns:1fr 1fr;margin-top:1.4rem}
@media(max-width:900px){.wege,.wege.zwei{grid-template-columns:1fr}}

.rezeption{background:#fff;border:2px solid var(--blau);border-radius:24px;padding:clamp(1.6rem,3vw,2.4rem);box-shadow:0 24px 50px -34px rgba(18,62,99,.6)}
.rez-kopf{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:start;margin-bottom:1.8rem}
.rez-kopf h3{font-size:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:.6rem}
.rez-kopf p{margin:0;color:var(--grau)}
.rez-punkte{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.95rem;color:var(--grau)}
.rez-punkte li{padding-left:1.6rem;position:relative}
.rez-punkte li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--gelb)}
.rez-widget{border-top:1px solid var(--linie);padding-top:1.6rem;min-height:420px}
.rez-widget arzt-direkt-online-rezeption{display:block;width:100%}
/* Der Einstieg in den Online-Terminkalender auf der Seite „Termin buchen".
   Der Kalender lässt sich nicht einbetten – der Anbieter verbietet das –,
   deshalb steht hier ein großer Knopf statt eines Fensters. Er darf ruhig
   auffallen: Es ist das einzige Ziel dieser Seite. */
.rez-start{text-align:center;padding:.4rem 0 .2rem}
.rez-vor{margin:0 0 1.1rem;font-size:1.05rem;color:var(--grau)}
.rez-nach{margin:1.1rem auto 0;max-width:34rem;font-size:.95rem;color:var(--grau)}
.btn-gross{font-size:1.12rem;padding:1rem 1.9rem;border-radius:14px}
@media(max-width:560px){
  .rez-start .btn-gross{display:flex;width:100%;justify-content:center}
}
@media(max-width:820px){.rez-kopf{grid-template-columns:1fr;gap:1.2rem}}

/* ---------- Sprechzeiten ---------- */
/* Die Tabelle hat seit der Telefonspalte vier Spalten und braucht deshalb
   mehr Platz als die Hinweise daneben. */
.zeiten-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(1.5rem,3vw,2.6rem);align-items:start}
table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.95rem}
th,td{text-align:left;padding:.85rem .6rem;border-bottom:1px solid var(--linie)}
th{font-weight:500;color:var(--grau);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
/* Spaltenköpfe sind Inhalt, kein Beiwerk: In der Vorsorgetabelle sagt der
   Kopf, ob in der Spalte die Untersuchung oder der Zeitpunkt steht. Am
   Telefon standen sie in 12,5 Pixeln – zu klein zum Mitlesen. */
@media(max-width:640px){th{font-size:.875rem;letter-spacing:.06em}}
td:first-child{font-family:var(--body);font-weight:600}
tr.zu td{color:var(--grau)}
.hinweis{background:#fff;border:1px solid var(--linie);border-left:4px solid var(--gelb);border-radius:0 16px 16px 0;padding:1.5rem}
.hinweis h3{font-size:1.05rem;margin-bottom:.5rem}
.hinweis p{margin:0 0 .8rem;font-size:.95rem;color:var(--grau)}
.hinweis p:last-child{margin-bottom:0}
@media(max-width:800px){.zeiten-grid{grid-template-columns:1fr}}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--tief);color:#fff}
.kontakt .kopf h2{color:#fff}
.kontakt .kopf .label{color:var(--gelb)}
.kontakt .kopf p{color:#CFE0EE}
.k-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem}
.k-block h3{color:var(--gelb);margin-bottom:.6rem;font-family:var(--body);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}
.k-block p{margin:0;color:#DCE9F3;line-height:1.75}
.k-block a{color:#fff}
.karte{margin-top:2.5rem;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);min-height:340px;display:flex;align-items:center;justify-content:center}
.karte-hinweis{text-align:center;padding:2.5rem 2rem;max-width:56ch}
.karte-hinweis h3{font-size:1.15rem;color:#fff;margin-bottom:.7rem}
.karte-hinweis p{color:#CFE0EE;font-size:.95rem;margin:0 0 1.4rem}
.karte-hinweis a{color:#fff}
.karte-btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.karte .btn-s{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.karte .btn-s:hover{border-color:#fff}
.karte iframe{width:100%;height:420px;border:0;display:block}
.karte.geladen{padding:0;min-height:0}

.anfahrt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem;margin-top:2.5rem}
.anfahrt-block h3{color:var(--gelb);margin-bottom:.5rem;font-family:var(--body);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}
.anfahrt-block p{margin:0;color:#DCE9F3;font-size:.95rem;line-height:1.7}

/* ---------- Band „Neuer Patient in der Praxis" ----------
   Ein schmales Band, kein Abschnitt: Es richtet sich an die kleine Gruppe,
   die neu dazukommt, und darf denen, die längst Patienten sind, nicht den
   Weg verstellen. Deshalb eine Zeile Text und ein Knopf, nicht mehr.
   Die Farbe ist die Handlungsfarbe der Seite (Sand), damit es als Angebot
   und nicht als Warnung gelesen wird. */
/* Direkt nach dem Seitenwechsel kein Menue aufklappen.
   Der Zeiger steht nach dem Klick oft noch genau ueber dem Reiter, dessen
   Ziel gerade geladen wurde. Ohne diese Regel klappt dort sofort wieder das
   Menue auf und verdeckt den oberen Teil der neuen Seite. Das Skript nimmt
   die Klasse beim ersten Mausbewegen wieder weg; ohne Skript verhaelt sich
   alles wie zuvor. */
html.frisch .nav-punkt:hover > .unter{opacity:0;visibility:hidden}

/* ---------- Die beiden Aerzte im Seitenkopf ----------
   Unter Lumi, klein: Wer hier arbeitet, steht damit im ersten Bildschirm.
   Bewusst nur Name und Fachgebiet - der eigene Abschnitt weiter unten ist
   dafuer entfallen. Wer mehr wissen will, tippt auf den Namen.

   Die Initialen bekommen hier ihre eigene Groesse: Die Regel weiter oben
   gilt nur fuer .arzt .initialen in den grossen Teamkarten. */
/* Lumi und die Leiste stehen untereinander in derselben Spalte. Ohne
   diesen Behaelter setzt .mark-mk (display:flex) beide nebeneinander und
   quetscht die Namen in eine Spalte von wenigen Zeichen Breite. */
.kopf-spalte{display:flex;flex-direction:column;min-width:0}
.arzt-leiste{display:grid;gap:.5rem;margin-top:2.6rem}
/* Die Überschrift steht mittig unter Lumi und über den beiden Namen. Sie
   war linksbündig am Rand der Kacheln ausgerichtet; mittig gehört sie
   sichtbar zu der Figur darüber und führt die beiden Kacheln an, statt
   danebenzustehen. */
.arzt-leiste-titel{font-family:var(--body);font-size:.78rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grau);
  margin:0 0 .35rem;text-align:center}
.arzt-leiste a{display:flex;align-items:center;gap:.75rem;text-decoration:none;
  padding:.5rem .7rem;border-radius:12px;border:1px solid transparent;
  min-height:44px}
.arzt-leiste a:hover,.arzt-leiste a:focus-visible{background:#fff;
  border-color:var(--linie)}
.arzt-leiste .initialen{flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--blau-hell);color:var(--blau);font-family:var(--display);
  font-weight:800;font-size:.95rem;display:flex;align-items:center;
  justify-content:center;letter-spacing:.02em}
.arzt-leiste .arzt-kachel{flex:none;width:44px;height:44px;border-radius:50%;
  object-fit:cover;margin:0}
.arzt-leiste > a > span{display:flex;flex-direction:column;min-width:0}
.arzt-leiste b{font-size:.95rem;color:var(--tief);font-weight:600;
  line-height:1.25}
.arzt-leiste b + span{font-size:.8rem;color:var(--grau);line-height:1.35;
  overflow-wrap:anywhere}
@media(max-width:860px){
  .arzt-leiste{max-width:340px;margin-inline:auto}
}

.neuband{background:#FBF2DF;border-block:1px solid #EBD9AE}
.neu-innen{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;
  justify-content:space-between;padding:1.5rem 0}
.neu-innen > div{max-width:62ch;min-width:0}
.neu-innen h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:.2rem 0 .4rem}
.neu-innen p{margin:0;color:var(--grau);font-size:.98rem}
.neu-innen .label{color:#8A6516}
.neu-innen .btn{flex:none}
@media(max-width:719px){
  .neu-innen{flex-direction:column;align-items:stretch;gap:1rem}
  .neu-innen .btn{justify-content:center}
}

/* ---------- Lageplan und Anfahrt auf der Startseite ----------
   Der Plan ist eine eigene Zeichnung, kein Kartendienst: Er lädt sofort und
   überträgt nichts, solange niemand ihn antippt. Erst der Klick führt in
   Google Maps. */
/* Ein Kartenausschnitt ist fast quadratisch, die Spalte daneben kurz.
   Mittig statt oben ausgerichtet sieht das ausgewogen aus statt abgesackt. */
/* Die Karte bekommt die ganze Breite des Textrasters, wie bei einer
   Stationsseite: Wer den Weg sucht, will Umgebung sehen, nicht eine
   Briefmarke neben einem Knopf. Die Route rechnet man direkt in der
   Karte (Sprechblase an der Nadel), ein eigener Knopf ist entfallen. */
.finden{display:block;margin-top:1.6rem}
.lageplan{display:block;text-decoration:none;border:1px solid var(--linie);
  border-radius:16px;overflow:hidden;background:#fff}
/* Kein Zuschnitt. Bei einem echten Kartenausschnitt steht am unteren Rand
   die Zeile mit Logo und Bildrechten – ein object-fit:cover würde genau die
   abschneiden und damit die Nutzungserlaubnis kosten. */
/* Das Kartenbild trägt unten die Zeile von Google mit Logo und Rechten –
   die darf nicht weggeschnitten werden. Deshalb gibt das Bildformat die
   Höhe der Kachel vor, statt umgekehrt. */
.lageplan img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.lageplan-quelle{display:block;padding:0 1.1rem .8rem;font-size:.76rem;
  line-height:1.45;color:var(--grau)}
.lageplan-fuss{display:flex;align-items:center;gap:.45rem;
  padding:.8rem 1.1rem .5rem;font-weight:600;color:var(--blau);font-size:.95rem;
  border-top:1px solid var(--linie);min-height:44px}
.lageplan-fuss::after{content:"";width:7px;height:7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg)}
.lageplan:hover{border-color:var(--blau)}
.lageplan:hover .lageplan-fuss{background:var(--blau-hell)}
.lageplan:focus-visible{outline:3px solid var(--tief);outline-offset:2px}
/* Die Adresse ist die eine Zeile, die jemand abschreibt oder ins Navi
   tippt. Sie darf im Fließtext nicht untergehen. */
.adresse-gross{font-size:1.08em;color:var(--tief)}

/* Erreichbarkeit unter der Sprechzeitentabelle. Ersetzt das blaue Band, das
   vorher über der Tabelle stand und dieselben Angaben ein zweites Mal
   brachte – hier stehen sie einmal, dort wo die Zeiten stehen. */
.erreichbar{margin-top:1.3rem;display:flex;flex-direction:column;gap:.55rem;
  border-top:1px solid var(--linie);padding-top:1.1rem}
.erreichbar p{margin:0;font-size:.97rem}
.erreichbar b{color:var(--tief)}
.erreichbar b::after{content:" ";}
@media(max-width:860px){
}

/* ---------- Startseite: am Handy kürzer als am Rechner ----------
   Auf dem Telefon soll die Startseite nur vier Dinge leisten: zeigen, wer
   wir sind, einen Termin anbieten, die heutige Sprechzeit nennen und den
   Weg zur Praxis. Alles Weitere steht eine Ebene tiefer und ist über das
   Menü erreichbar – nichts davon geht verloren, es steht nur nicht auf
   dem ersten Bildschirm. Am Rechner bleibt die ausführliche Fassung.

   Bewusst über das Stilblatt und nicht über zwei getrennte Seiten: Es gibt
   weiterhin eine Adresse mit einem Inhalt, den Suchmaschinen vollständig
   sehen. */
.nur-schmal{display:none}
@media(max-width:719px){
  .nur-breit{display:none}
  .nur-schmal{display:block}
  .kompakt-handy table.zeiten{display:none}
  .kompakt-handy .heute-kurz{margin-bottom:0}
}
/* ---------- Aktuelles ---------- */
.aktuell{background:#FFF6E0;border-bottom:1px solid #F0DCA8}
.aktuell .wrap{display:flex;flex-wrap:wrap;gap:.9rem;align-items:baseline;padding:.85rem 0}
.aktuell-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#7A5A12;font-weight:500;flex:none}
.aktuell p{margin:0;font-size:.95rem;color:#5C4410}

/* ---------- Formulare und FAQ ---------- */
.down-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.dl-liste{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.dl-liste a{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:1rem 1.2rem;text-decoration:none;color:var(--tief)}
.dl-liste a:hover{border-color:var(--blau)}
.dl-ico{flex:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;background:var(--blau-hell);color:var(--blau);padding:.4rem .5rem;border-radius:7px}
.dl-liste b{display:block;font-weight:600;font-size:.98rem}
.dl-liste small{display:block;color:var(--grau);font-size:.86rem}
.mitbringen{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:clamp(1.4rem,3vw,2rem)}
.klein{font-size:.9rem;color:var(--grau)}
@media(max-width:820px){.down-grid{grid-template-columns:1fr}}

.faq{display:grid;gap:.7rem;max-width:75ch}
.faq details{background:#fff;border:1px solid var(--linie);border-radius:14px;overflow:hidden}
.faq summary{cursor:pointer;padding:1.1rem 1.3rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--blau);font-size:1.3rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--linie)}
.faq p{margin:0;padding:1.1rem 1.3rem;color:var(--grau);font-size:.97rem}

/* ---------- Karriere ---------- */
.karriere-box{background:var(--blau-hell);border-radius:24px;padding:clamp(1.8rem,4vw,3rem);display:grid;grid-template-columns:1.4fr .6fr;gap:2rem;align-items:center}
.karriere-box .label{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);display:block;margin-bottom:.7rem}
.karriere-box h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.8rem}
.karriere-box p{color:var(--grau);margin:0}
.karriere-cta{display:grid;gap:1rem;justify-items:start}
@media(max-width:820px){.karriere-box{grid-template-columns:1fr}}

footer{padding:2.5rem 0;font-size:.9rem;color:var(--grau)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
footer nav{display:flex;gap:1.2rem}
.platzhalter{background:#FFF6E0;color:#7A5A12;padding:.05em .45em;border-radius:4px;font-family:var(--mono);font-size:.85em}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}


/* ==================================================================
   Schriften – lokal eingebunden, damit beim Seitenaufruf keine Daten
   an Google übertragen werden. Solange die Dateien in assets/fonts/
   fehlen, greift automatisch die Systemschrift; die Seite funktioniert
   also auch ohne sie. Siehe LIESMICH.md.
   ================================================================== */

/* ---------- Kompakter Kopf für Unterseiten ---------- */
.subhero{background:var(--blau-hell);padding:clamp(2.4rem,5vw,4rem) 0 clamp(2.4rem,5vw,3.5rem);border-bottom:1px solid var(--linie)}
.subhero .wrap{max-width:min(1180px,92vw)}
.subhero h1{font-size:clamp(1.9rem,4.2vw,3.1rem);max-width:20ch}
.subhero .lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--grau);max-width:60ch;margin:1.2rem 0 0}
.subhero .cta-row{margin-top:1.8rem}

.krumen{font-size:.85rem;color:var(--grau);margin:0 0 1.2rem}
.krumen a{color:var(--grau);text-decoration:none;border-bottom:1px solid var(--linie)}
.krumen a:hover{color:var(--blau);border-bottom-color:var(--blau)}
.krumen span{margin:0 .45rem;opacity:.55}

.text{max-width:70ch}
.text h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 1rem}
.text h3{font-size:1.2rem;margin:2rem 0 .7rem}
.text p{color:var(--grau);margin:0 0 1.1rem}
.text p:last-child{margin-bottom:0}
.text ul{color:var(--grau);padding-left:1.2rem;margin:0 0 1.2rem;display:grid;gap:.5rem}
.text strong{color:var(--tief)}

.zwei-spalten{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
@media(max-width:900px){.zwei-spalten{grid-template-columns:1fr}}
.merk{background:#fff;border:1px solid var(--linie);border-left:4px solid var(--gelb);border-radius:0 16px 16px 0;padding:1.5rem}
.merk h3{font-size:1.02rem;margin:0 0 .6rem}
.merk p,.merk li{font-size:.94rem;color:var(--grau);margin:0}
.merk ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem}

.ablauf{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1rem}
.ablauf li{counter-increment:s;background:#fff;border:1px solid var(--linie);border-radius:16px;padding:1.3rem 1.5rem 1.3rem 4rem;position:relative}
.ablauf li::before{content:counter(s);position:absolute;left:1.3rem;top:1.25rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--blau-hell);color:var(--blau);font-family:var(--mono);font-size:.85rem;display:flex;align-items:center;justify-content:center}
.ablauf b{display:block;margin-bottom:.25rem}
.ablauf span{color:var(--grau);font-size:.95rem}

.cta-band{background:var(--tief);color:#fff;border-radius:24px;padding:clamp(1.8rem,4vw,2.8rem);display:grid;grid-template-columns:1.4fr .6fr;gap:2rem;align-items:center}
.cta-band h2{color:#fff;font-size:clamp(1.4rem,2.8vw,2rem);margin-bottom:.6rem}
.cta-band p{margin:0;color:#CFE0EE}
.cta-band .btn-p{background:var(--gelb);color:#3D2C05}
.cta-band .btn-p:hover{background:#fff;color:var(--tief)}
.cta-band .btn-s{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.cta-band-cta{display:grid;gap:.7rem;justify-items:start}
@media(max-width:820px){.cta-band{grid-template-columns:1fr}}

.weiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.weiter a{display:block;background:#fff;border:1px solid var(--linie);border-radius:16px;padding:1.3rem 1.5rem;text-decoration:none;color:var(--tief)}
.weiter a:hover{border-color:var(--blau)}
.weiter b{display:block;font-size:1.02rem;margin-bottom:.25rem}
.weiter span{color:var(--grau);font-size:.92rem}

.brand img{width:58px;height:42px;object-fit:contain;display:block;flex:none}
.mark img{width:100%;height:auto;display:block;transform-origin:52% 60%;animation:atem 6.5s ease-in-out infinite}

.recht{max-width:78ch}
.recht h2{font-size:1.35rem;margin:2.5rem 0 .8rem}
.recht h3{font-size:1.05rem;margin:1.6rem 0 .5rem}
.recht p,.recht li{color:var(--grau)}
.recht p{margin:0 0 1rem}
.recht ul{padding-left:1.2rem;display:grid;gap:.4rem;margin:0 0 1.2rem}
.recht address{font-style:normal;color:var(--grau);margin:0 0 1rem;line-height:1.8}
.recht .stand{font-size:.9rem;color:var(--grau);margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--linie)}

@media(min-width:901px){.merk{position:sticky;top:92px}}

/* ---------- Menü für kleine Bildschirme ---------- */
.menue{display:none;position:relative;flex:none}
.menue > summary{list-style:none;cursor:pointer;width:44px;height:44px;border:1px solid var(--linie);border-radius:12px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menue > summary::-webkit-details-marker{display:none}
.menue > summary span{display:block;width:20px;height:2px;background:var(--tief);border-radius:2px}
.menue[open] > summary{border-color:var(--blau)}
.menue nav{position:absolute;right:0;top:calc(100% + .6rem);background:#fff;border:1px solid var(--linie);border-radius:16px;box-shadow:0 24px 50px -30px rgba(18,62,99,.55);padding:.6rem;display:grid;min-width:min(21.5rem,92vw);max-width:92vw;z-index:60}
.menue nav a{padding:.75rem 1rem;text-decoration:none;color:var(--tief);font-weight:600;border-radius:10px;font-size:.98rem}
.menue nav a:hover,.menue nav a[aria-current="page"]{background:var(--blau-hell);color:var(--blau)}
@media(max-width:980px){.menue{display:block}}

@media(max-width:430px){
  .topbar .wrap{gap:.7rem}
  /* Die Größe des Schriftzugs steht weiter unten im Block „Kopfleiste auf
     dem Telefon“ – dort, wo auch der Ortsname zugeschaltet wird. Beides
     gehört zusammen und darf nicht an zwei Stellen auseinanderlaufen. */
  .tel{padding:.55rem .95rem;font-size:.9rem}
  /* Der Knopf zum Menü war hier auf 40 × 40 Pixel geschrumpft. Das ist
     kleiner als eine Fingerkuppe – gerade auf dem schmalsten Telefon,
     also dort, wo die Leiste am wenigsten Platz hat, wurde das
     wichtigste Bedienelement der Seite am schwersten zu treffen.
     Er bleibt jetzt auf 44 × 44; der Platz kommt aus dem kleineren
     Innenabstand. */
  .menue > summary{width:44px;height:44px;gap:4px}
  .menue > summary span{width:18px}
}

/* Feinschliff für mittlere und sehr schmale Fenster */
@media(max-width:1180px){.nav{gap:1rem}.nav a{font-size:.9rem}}
/* Seit die Leiste nur noch vier Reiter trägt, passt sie viel früher. Der
   Umschaltpunkt ist gemessen, nicht geschätzt: unterhalb davon stößt der
   längste Reiter an den Terminknopf. */
@media(max-width:999px){.nav{display:none}.menue{display:block}}
/* Auf sehr schmalen Telefonen war die Schrift in Tabellen auf 13,1 Pixel
   gesetzt. Der Platz muss aber nicht aus der Schrift kommen: Er kommt aus
   dem Innenabstand. Die Schrift bleibt bei 14 Pixeln – darunter wird
   Lesen am Telefon mühsam, und Sprechzeiten liest man im Stehen. */
@media(max-width:360px){
  table{font-size:.875rem}
  th,td{padding:.7rem .3rem}
  .qcard .big{font-size:1.3rem}
}

footer nav{flex-wrap:wrap}
footer .wrap > span{min-width:0}
.dl-liste a > span:last-child{min-width:0}
.dl-liste b,.dl-liste small{overflow-wrap:anywhere}
@media(max-width:600px){
  footer .wrap{flex-direction:column;align-items:flex-start;gap:.9rem}
}

h1,h2,h3{overflow-wrap:break-word;hyphens:auto}

/* ---------- Fußzeile ---------- */
footer{padding:0;color:var(--grau);font-size:.9rem;border-top:1px solid var(--linie);margin-top:0}
.fuss-oben{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding:3rem 0 2.4rem}
.fuss-block b{display:block;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--tief);margin-bottom:.9rem;letter-spacing:-.01em}
.fuss-block a{display:block;color:var(--grau);text-decoration:none;padding:.22rem 0;font-size:.92rem}
.fuss-block a:hover{color:var(--blau)}
.fuss-adresse p{margin:0 0 .8rem;font-size:.92rem;line-height:1.65}
.fuss-adresse a{display:inline;color:var(--blau)}
.fuss-unten{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;padding:1.2rem 0 2.2rem;border-top:1px solid var(--linie);font-size:.85rem}
.fuss-unten nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.fuss-unten a{color:var(--grau)}
@media(max-width:860px){.fuss-oben{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fuss-oben{grid-template-columns:1fr;gap:1.8rem;padding:2.2rem 0 1.6rem}
  .fuss-unten{flex-direction:column;align-items:flex-start;gap:.9rem}}

/* ---------- Notfallseite ---------- */
.notfall-band{background:#FCEDEC;border-bottom:1px solid #F3D6D4}
.notfall-band .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;padding:1rem 0}
.notfall-band strong{color:var(--rot)}
.notruf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.notruf{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:1.6rem;border-top:4px solid var(--rot)}
.notruf .nummer{font-family:var(--mono);font-size:1.8rem;color:var(--tief);display:block;margin:.2rem 0 .5rem;letter-spacing:-.02em}
.notruf .nummer a{color:inherit;text-decoration:none}
.notruf h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rot);font-family:var(--body);font-weight:600}
.notruf p{margin:0;font-size:.93rem;color:var(--grau)}
.notruf.ruhig{border-top-color:var(--blau)}
.notruf.ruhig h3{color:var(--blau)}

.warn{background:#FCEDEC;border-left:4px solid var(--rot);border-radius:0 16px 16px 0;padding:1.5rem}
.warn h3{font-size:1.05rem;margin-bottom:.6rem;color:var(--rot)}
.warn ul{margin:0;padding-left:1.1rem;display:grid;gap:.4rem;color:var(--grau);font-size:.95rem}

/* ---------- Stellenanzeigen ---------- */
.stelle{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:clamp(1.6rem,3vw,2.4rem);margin-bottom:1.4rem}
.stelle-kopf{display:flex;flex-wrap:wrap;gap:.8rem;align-items:baseline;justify-content:space-between;margin-bottom:1rem}
.stelle h3{font-size:1.45rem}
.stelle .art{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blau);background:var(--blau-hell);padding:.35rem .8rem;border-radius:999px}
.stelle-spalten{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:1.4rem 0}
.stelle-spalten h4{font-family:var(--body);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blau);margin:0 0 .7rem}
.stelle-spalten ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;color:var(--grau);font-size:.95rem}
@media(max-width:760px){.stelle-spalten{grid-template-columns:1fr;gap:1.4rem}}

/* ---------- Linksammlung ---------- */
.link-gruppe{margin-bottom:2.4rem}
.link-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem}
.link-liste a{display:block;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:1rem 1.2rem;text-decoration:none;color:var(--tief)}
.link-liste a:hover{border-color:var(--blau)}
.link-liste b{display:block;font-size:.98rem;margin-bottom:.15rem}
.link-liste span{color:var(--grau);font-size:.88rem}

.notruf .nummer{font-size:clamp(1.3rem,1.6vw,1.55rem);white-space:nowrap}
.notruf-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* ==================================================================
   Bedienung mit dem Finger
   Auf Touchgeräten brauchen Bedienelemente eine Mindestgröße von
   etwa 44 Pixeln. Hover-Effekte gelten nur für Geräte mit Zeiger,
   sonst bleiben sie auf iOS nach dem Antippen hängen.
   ================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary{-webkit-tap-highlight-color:rgba(31,107,168,.18)}

@media (hover:hover) and (pointer:fine){
  .nav a:hover{border-bottom-color:var(--gelb)}
  .tel:hover{background:var(--tief)}
  .btn-p:hover{background:var(--blau)}
  .btn-s:hover{border-color:var(--blau)}
  .weiter a:hover,.link-liste a:hover,.dl-liste a:hover,.kachel a:hover{border-color:var(--blau)}
  .fuss-block a:hover{color:var(--blau)}
  .menue nav a:hover{background:var(--blau-hell);color:var(--blau)}
}

@media (pointer:coarse){
  /* Brotkrumen */
  .krumen{margin-bottom:1.6rem}
  .krumen a{display:inline-block;padding:.7rem .1rem;min-height:44px;line-height:1.8}
  .krumen span{display:inline-block;padding:.7rem 0}

  /* Fußzeile */
  .fuss-block a{padding:.7rem 0;min-height:44px;display:flex;align-items:center}
  .fuss-adresse a{display:inline-block;padding:.55rem 0;min-height:44px;line-height:2}
  .fuss-unten nav a{display:inline-block;padding:.7rem 0;min-height:44px;line-height:1.9}

  /* Aufzählungen mit Links im Fließtext bekommen mehr Luft */
  .text a,.klein a,.qcard a{padding:.2rem 0}

  /* Klappfragen und Kacheln großzügiger */
  .faq summary{padding:1.25rem 1.3rem}
  .dl-liste a{padding:1.15rem 1.2rem}
  .weiter a,.link-liste a{padding:1.3rem 1.4rem}

  /* Schaltflächen */
  .btn{padding:1rem 1.6rem;min-height:48px}
  .tel{padding:.85rem 1.2rem;min-height:44px}
  .menue nav a{padding:.95rem 1rem;min-height:46px;display:flex;align-items:center}

  /* Karten-Knopf */
  .karte-btns .btn{width:100%;justify-content:center}
}

/* Tabellen mit vielen Spalten dürfen auf schmalen Geräten scrollen */
.zeiten-grid table,.text table{width:100%}
@media(max-width:600px){
  .zeiten-grid,.text{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:0}
}

@media (pointer:coarse){
  /* Markenlink in der Kopfzeile: volle Trefferfläche */
  .brand{min-height:44px;padding:.25rem 0}
  /* Kontaktlinks in Rechtstexten (Impressum, Datenschutz) */
  .recht p a[href^="tel:"],.recht p a[href^="mailto:"],
  .text p a[href^="tel:"],.text p a[href^="mailto:"],
  address a{display:inline-block;padding:.6rem 0;min-height:44px;line-height:2}
}

/* Tablets im Querformat zeigen die Desktop-Navigation, werden aber
   mit dem Finger bedient – daher auch dort größere Trefferflächen. */
@media (pointer:coarse){
  .nav a{display:inline-flex;align-items:center;min-height:44px;padding:.6rem .75rem}
  .btn-s{min-height:44px}
  /* Weiterführende Pfeillinks, die allein in einem Absatz stehen */
  p > a:only-child,h2 > a:only-child,h3 > a:only-child,h4 > a:only-child{
    display:inline-flex;align-items:center;min-height:44px;padding:.55rem 0}
  /* Notrufnummern. „112“ ist nur drei Zeichen breit – als Ziel waren das
     32 Pixel. Ausgerechnet die Nummer, die man mit zitternden Händen
     trifft, war die kleinste Fläche der Seite. Der negative Außenabstand
     gleicht den Innenabstand wieder aus, damit die Zahl bündig steht. */
  .nummer a,.big a{display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;padding:.4rem .55rem;margin-left:-.55rem}
}

/* Tablets: Überschrift der Startseite etwas ruhiger */
@media(min-width:861px) and (max-width:1220px){
  .hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem)}
  .hero .wrap{grid-template-columns:1.15fr .85fr}
}

/* Feinschliff für kleine Bildschirme */
@media(max-width:520px){
  .aktuell .wrap{gap:.35rem;padding:.65rem 0}
  .aktuell p{font-size:.88rem;line-height:1.5}
  .hero .mark{max-width:265px}
  .hero{padding-top:1.6rem}
}

/* ---------- Fotos ---------- */
.foto{margin:0;border-radius:18px;overflow:hidden;background:var(--blau-hell)}
.foto img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.foto figcaption{font-size:.86rem;color:var(--grau);padding:.7rem .2rem 0;background:var(--papier)}
.foto-breit img{aspect-ratio:21/9}
.foto-hoch img{aspect-ratio:3/4}
.bild-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.bild-text.umgekehrt .foto{order:2}
@media(max-width:800px){.bild-text{grid-template-columns:1fr}.bild-text.umgekehrt .foto{order:0}}
.foto-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:800px){.foto-reihe{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foto-reihe{grid-template-columns:1fr}}

/* =====================================================================
   Wärmere Farbgebung – Pastelltöne aus dem Logo
   Blau, Gelb/Sand und Rot/Terrakotta lösen die reine Blau-in-Blau-Wirkung
   auf. Die kräftigen Farben bleiben unverändert; ergänzt werden nur die
   hellen Abtönungen für Flächen und Kacheln.
   ===================================================================== */
:root{
  --blau-pastell:#E4EEF7;
  --sand:#FBF2DF;
  --sand-tief:#F5E6C6;
  --rose:#F8EAE6;
  --rose-tief:#F1D8D2;
  --gruen-pastell:#E7F1EC;
  --papier:#FCFBF8;          /* leicht warmes Weiß statt kühlem Blaugrau */
  --linie:#E2DED4;
}

body{background:var(--papier)}
.topbar{background:rgba(252,251,248,.94)}

/* ---- Abschnittsbänder wechseln die Temperatur ---- */
.grund{background:var(--blau-pastell)}
.schwerpunkte + *,
.igel{background:transparent}
section.sand{background:var(--sand)}
section.rose{background:var(--rose)}
.termin{background:var(--sand)}

/* =====================================================================
   Kacheln und Karten
   ---------------------------------------------------------------------
   Vorher liefen drei Farben im Dreitakt durch jedes Raster
   (nth-child(3n+1/2/3)). Das sah nur bei genau drei Spalten geordnet aus;
   sobald das Raster auf zwei Spalten umbrach, wanderten die Farben
   diagonal durchs Bild – das war die Unruhe, die man sah, aber schwer
   benennen konnte.

   Jetzt gilt: Eine Kartengruppe hat EINE Farbe, und die richtet sich
   nach dem Band, auf dem sie steht. Auf Papier stehen pastellblaue
   Karten, auf einem farbigen Band stehen weiße. Damit ist die Farbe
   unabhängig von der Spaltenzahl und wirkt in jeder Fensterbreite ruhig.

   Die einzige Ausnahme sind die Fachgruppen: Sie tragen die Farbe ihres
   Fachs (siehe unten) – blau für die Lunge, rosé für die Allergie,
   sand für die allgemeine Kinderheilkunde. Das ist dieselbe Teilung wie
   im Logo.
   ===================================================================== */
.kachel{border-color:transparent;background:var(--blau-pastell)}
.kachel h3{color:var(--tief)}
.kachel p{color:#4A5B69}
.weiter a,.link-liste a,.dl-liste a{border-color:transparent;background:var(--blau-pastell)}
.weiter a:hover,.link-liste a:hover,.dl-liste a:hover{border-color:var(--blau)}

/* Auf einem farbigen Band kehrt sich das Verhältnis um: weiße Karten. */
.grund .kachel,.grund .weiter a,.grund .link-liste a,.grund .dl-liste a,
.sand .kachel,.sand .weiter a,.abschluss .kachel,.abschluss .weiter a,
.termin .kachel,.termin .weiter a{background:#fff}

/* ---- Fachfarben: dieselbe Teilung wie im Logo ---- */
.weiter.f-lunge a{background:var(--blau-pastell)}
.weiter.f-allergie a{background:var(--rose)}
.weiter.f-allgemein a{background:var(--sand)}
.grund .weiter.f-lunge a{background:#E9F1F9}

/* ---- Schwerpunktkarten: eine kühl, eine warm ---- */
.panel.lunge{background:var(--blau-pastell);border-color:transparent}
.panel.allergie{background:var(--rose);border-color:transparent}

/* ---- Selbstzahlerkarten und Wege abwechselnd ---- */
.igel-karte:nth-child(odd){background:var(--sand);border-color:transparent}
.igel-karte:nth-child(even){background:var(--rose);border-color:transparent}
.weg:nth-child(1){background:#fff}
.weg:nth-child(2){background:var(--sand);border-color:transparent}
.weg:nth-child(3){background:var(--rose);border-color:transparent}

/* ---- Ärztekarten und Hinweise ---- */
.arzt{background:#fff;border-color:var(--linie)}
.hinweis{background:#fff;border-color:var(--linie)}
.merk,.mitbringen{background:var(--sand);border-color:transparent}
.karriere-box{background:var(--blau-pastell);border-color:transparent}
.stelle{background:#fff}

/* ---- Notrufkarten behalten ihre Signalwirkung ---- */
.notruf{background:#fff}
.notruf.ruhig{background:var(--blau-pastell);border-color:transparent}

/* ---- Bilder passen sich der Umgebung an ---- */
.foto{background:var(--sand)}
.foto figcaption{background:transparent}

/* ---- Tabellen und Feinheiten ---- */
.aktuell{background:var(--sand-tief);border-bottom-color:#EBD9AF}
.badge.gelb{background:var(--sand-tief);color:#7A5A12}

/* =====================================================================
   Raster und Rhythmus
   Die drei Farben sollen in Spalten stehen, nicht in Reihen. Dafür braucht
   das Raster eine feste Spaltenzahl – sonst verschiebt sich der Wechsel
   mit jeder Fensterbreite.
   ===================================================================== */
.kacheln,.weiter{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.kacheln,.weiter{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kacheln,.weiter{grid-template-columns:1fr}}
/* Bei zwei Spalten wechseln die Farben im Zweierrhythmus, damit auch dort
   Spalten entstehen statt Schachbrett */
@media(max-width:900px) and (min-width:561px){
  .kacheln .kachel:nth-child(2n+1),.weiter a:nth-child(2n+1){background:var(--blau-pastell)}
  .kacheln .kachel:nth-child(2n+2),.weiter a:nth-child(2n+2){background:var(--sand)}
}

/* Auf hellblauem Grund darf die erste Farbe nicht wieder Hellblau sein */
.grund .weiter a:nth-child(3n+1),.termin .weiter a:nth-child(3n+1){background:#fff}
@media(max-width:900px) and (min-width:561px){
  .grund .weiter a:nth-child(2n+1),.termin .weiter a:nth-child(2n+1){background:#fff}
}

/* Schwerpunktbereich: heller Grund, damit die blaue und die rote Karte wirken */
#schwerpunkte.grund{background:#fff;border-block:1px solid var(--linie)}

/* Terminwege: Online weiß hervorgehoben, E-Mail blau, Telefon rot */
.wege .weg{background:#fff}
.wege.zwei .weg:nth-child(1){background:var(--blau-pastell);border-color:transparent}
.wege.zwei .weg:nth-child(2){background:var(--rose);border-color:transparent}

/* =====================================================================
   Notrufkarten: Überschrift, Nummer und Text jeweils auf einer Linie
   ===================================================================== */
.notruf-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
@media(max-width:900px){.notruf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.notruf-grid{grid-template-columns:1fr}}
.notruf{
  display:grid;
  grid-template-rows:auto auto 1fr;   /* Titel · Nummer · Beschreibung */
  row-gap:.15rem;
  padding:1.5rem 1.4rem
}
.notruf h3{
  min-height:2.6em;                    /* zwei Zeilen Platz, damit alle Nummern gleich hoch sitzen */
  display:flex;align-items:flex-start;margin:0
}
.notruf .nummer{
  margin:0 0 .55rem;
  font-size:clamp(1.15rem,1.55vw,1.6rem);
  white-space:nowrap;
  overflow-wrap:normal
}
.notruf p{margin:0;align-self:start}

/* Der Kontaktbereich ist dunkelblau – die Blöcke darin bleiben transparent,
   sonst steht helle Schrift auf hellem Grund. */
.kontakt .k-block,.kontakt .anfahrt-block{background:transparent;border-color:rgba(255,255,255,.18)}
.kontakt .anfahrt-block h3{color:#fff}
.kontakt .anfahrt-block p,.kontakt .anfahrt-block li{color:#DCE9F3}
.kontakt .anfahrt-block a{color:#fff}
/* .k-block ausserhalb des dunklen Bereichs bekommt normale Farben */
section:not(.kontakt) .k-block h3{color:var(--blau)}
section:not(.kontakt) .k-block p{color:var(--grau)}
section:not(.kontakt) .k-block a{color:var(--blau)}

/* Warnband: kräftigeres Rot für ausreichenden Kontrast auf hellem Grund */
.notfall-band strong{color:#AE3630}
.warn h3{color:#AE3630}

/* Anfahrt-Überschrift im dunklen Kontaktbereich braucht Luft nach oben */
.kontakt .gruppe{margin-top:3.4rem}
.kontakt .anfahrt-grid{margin-top:1.6rem}
.kontakt .k-grid{align-items:start}

/* Kartenbild auf dunklem Grund (Kontaktseite). Der Kasten um das Bild
   bleibt hell, damit die Karte nicht in der dunklen Flaeche versinkt. */
.finden-dunkel{margin-block:1.8rem 0}
.kontakt .lageplan{border-color:rgba(255,255,255,.25);background:#fff}
.kontakt .lageplan-fuss{border-top-color:var(--linie)}
.kontakt .lageplan:hover{border-color:#fff}

/* Infektsprechstunde als abgesetzte Fußzeile der Sprechzeitentabelle */
tfoot td{border-bottom:0;padding-top:1rem;font-weight:600;color:var(--tief)}
tfoot tr{border-top:2px solid var(--gelb)}
tfoot td:first-child{font-family:var(--body)}

/* Die drei Karten im Kontaktband sind gleich gebaut – gleiche Trennlinie für alle */
.qcard{border-left:3px solid var(--gelb);padding-left:1.2rem}
.qcard h3{min-height:1.6em}
.qcard .big{display:block;margin:.35rem 0 .5rem;min-height:1.5em}
.qcard .big a{text-decoration:none;border-bottom:2px solid rgba(255,255,255,.35)}
.qcard .big a:hover{border-bottom-color:#fff}

/* ---------- Mitgliedschaften in Fachgesellschaften ---------- */
.mitglied{background:#fff;border-top:1px solid var(--linie)}
/* Vier Verbände mit sehr unterschiedlichen Seitenverhältnissen – von fast
   quadratisch bis siebenmal so breit wie hoch. Deshalb ist nicht nur die
   Höhe gedeckelt, sondern auch die Breite: Sonst würde ein breites Logo
   seine Spalte sprengen. */
.verbaende{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;
  align-items:stretch}
@media(max-width:1000px){.verbaende{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.verbaende{grid-template-columns:1fr}}
.verband{
  background:var(--papier);border:1px solid var(--linie);border-radius:16px;
  padding:1.25rem 1rem;display:grid;grid-template-rows:auto 1fr;row-gap:.8rem;
  align-items:center;justify-items:center;text-align:center
}
.verband img{max-width:100%;width:auto;height:auto;object-fit:contain;align-self:start}
.verband span{font-size:.88rem;color:var(--grau);line-height:1.5;align-self:start}

/* =====================================================================
   Fußzeile: alle vier Spalten auf eine Linie
   Die Überschriften standen unterschiedlich hoch, weil die Adressspalte
   zwei Zeilen brauchte und die Listen direkt darunter ansetzten.
   ===================================================================== */
footer .wrap.fuss-oben{align-items:start;justify-content:normal}
.fuss-block{display:grid;grid-template-rows:auto 1fr;row-gap:0}
.fuss-block b{
  min-height:2.9em;                 /* Platz für zweizeilige Überschriften */
  display:flex;align-items:flex-start;
  margin:0 0 .2rem
}
.fuss-adresse p:first-of-type{margin-top:0}
.fuss-adresse p{margin:0 0 .85rem}
.fuss-adresse p:last-child{margin-bottom:0}
.fuss-block > a:first-of-type{margin-top:0}
@media(max-width:860px){.fuss-block b{min-height:0;margin-bottom:.8rem}}

/* Stellenhinweis auf der Startseite */
section.sand{background:var(--sand)}
.karriere-cta{display:grid;grid-template-columns:1.5fr auto;gap:2rem;align-items:center}
.karriere-cta h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:.5rem 0 .8rem}
.karriere-cta p{margin:0;color:var(--grau);max-width:62ch}
.karriere-cta .label{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blau)}
.karriere-cta .btn{white-space:nowrap}
@media(max-width:800px){.karriere-cta{grid-template-columns:1fr;gap:1.4rem}.karriere-cta .btn{justify-self:start}}
section:not(.kontakt) .k-block p{margin:0 0 .8rem}
section:not(.kontakt) .k-block p:last-child{margin-bottom:0}
section:not(.kontakt) .k-block h3{font-family:var(--body);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;margin-bottom:.8rem}

/* ============================================================
   Untermenüs in der Hauptnavigation
   Öffnen beim Überfahren und beim Hineintabben – ohne Skript.
   Unterhalb von 1220 px ist die Hauptnavigation ohnehin durch das
   Klappmenü ersetzt, dort stehen die Unterpunkte flach eingerückt.
   ============================================================ */
.nav-punkt{position:relative;display:flex;align-items:center}
.nav-punkt > a{display:inline-flex;align-items:center;gap:.34rem}
.nav-punkt > a .chev{width:11px;height:8px;flex:none;transition:transform .18s ease;opacity:.65}

.unter{position:absolute;left:-1.1rem;top:100%;margin-top:1.15rem;z-index:70;
  transition:none;
  display:grid;gap:.1rem;padding:.55rem;min-width:19rem;
  background:#fff;border:1px solid var(--linie);border-radius:16px;
  box-shadow:0 28px 60px -34px rgba(18,62,99,.55);
  opacity:0;visibility:hidden;transform:translateY(-.35rem);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.unter.weit{grid-template-columns:repeat(2,minmax(17.5rem,1fr));gap:.1rem .3rem}
.unter.rechts{left:auto;right:-1.1rem}

.unter a{display:block;padding:.6rem .8rem;border-radius:11px;text-decoration:none;
  border-bottom:0;white-space:normal}
.unter a b{display:block;font-family:var(--body);font-weight:600;font-size:.94rem;
  color:var(--tief);line-height:1.3}
.unter a span{display:block;font-weight:400;font-size:.82rem;color:var(--grau);line-height:1.4;margin-top:.12rem}
.unter a:hover,.unter a:focus-visible{background:var(--blau-hell);border-bottom:0}
.unter a:hover b,.unter a:focus-visible b{color:var(--blau)}

/* unsichtbare Brücke, damit die Maus auf dem Weg nach unten nicht
   durch die Lücke zwischen Menüpunkt und Klappfeld fällt */
.nav-punkt:hover::before{content:"";position:absolute;left:0;right:0;top:100%;height:1.4rem}

/* Aufblenden ja, Ausblenden nein: Wandert die Maus von einem Reiter zum
   nächsten, lag das alte Menü noch sichtbar unter dem neuen, solange es
   ausblendete – zwei Menüs übereinander. Die Überblendung steht deshalb nur
   im geöffneten Zustand; geschlossen wird ohne Verzögerung. */
.nav-punkt:hover > .unter,.nav-punkt:focus-within > .unter{
  transition:opacity .18s ease,transform .18s ease}
.nav-punkt:focus-within > .unter{opacity:1;visibility:visible;transform:none}
.nav-punkt:focus-within > a .chev{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .nav-punkt:hover > .unter{opacity:1;visibility:visible;transform:none}
  .nav-punkt:hover > a .chev{transform:rotate(180deg)}
}
@media (prefers-reduced-motion:reduce){
  .unter{transition:none}.nav-punkt > a .chev{transition:none}
}

/* Klappmenü auf Handy und Tablet: Unterpunkte eingerückt, aber in
   derselben Schriftgröße wie die Reiter darüber. */
/* display:flex ist hier nicht Kosmetik: Ohne es bleiben die Ziele
   Inline-Elemente, an denen min-height wirkungslos ist – sie waren 38 Pixel
   hoch und damit unter dem, was sich mit dem Daumen sicher treffen lässt. */
.menue nav a.unterpunkt{display:flex;align-items:center;
  padding-block:.6rem;min-height:44px;font-size:1rem}
.menue nav a.unterpunkt:hover{background:var(--blau-hell);color:var(--blau)}

/* ============================================================
   Online-Rezeption: die vier Anliegen als Karten
   ============================================================ */
.anliegen-band{background:var(--papier)}
.anliegen{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2rem}
.anliegen-karte{padding:1.5rem 1.4rem;border-radius:18px;display:flex;flex-direction:column;
  scroll-margin-top:6rem}
.anliegen-karte:nth-child(1){background:var(--blau-pastell)}
.anliegen-karte:nth-child(2){background:var(--sand)}
.anliegen-karte:nth-child(3){background:var(--rose)}
.anliegen-karte:nth-child(4){background:var(--blau-pastell)}
.anliegen-karte h3{margin:0 0 .6rem;font-size:1.12rem;line-height:1.25;min-height:2.5em;
  display:flex;align-items:flex-start}
.anliegen-karte p{margin:0 0 .7rem;font-size:.94rem;line-height:1.55}
.anliegen-karte p.fein{font-size:.85rem;color:var(--grau)}
.anliegen-karte a:not(.btn){margin-top:auto;font-weight:600;font-size:.92rem;text-decoration:none;
  color:var(--blau);border-bottom:1px solid rgba(18,62,99,.25);align-self:flex-start;
  padding-bottom:1px}
.anliegen-karte a:not(.btn):hover{border-bottom-color:var(--blau)}
.anliegen-karte:target{outline:2px solid var(--gelb);outline-offset:3px}
@media(max-width:1080px){.anliegen{grid-template-columns:repeat(2,1fr)}
  .anliegen-karte h3{min-height:0}}
@media(max-width:620px){.anliegen{grid-template-columns:1fr}}
.termin{scroll-margin-top:5rem}
#sprechzeiten{scroll-margin-top:5rem}
.menue nav{max-height:calc(100vh - 7rem);overflow-y:auto;overscroll-behavior:contain}
@media (pointer:coarse){
  .anliegen-karte a:not(.btn){min-height:44px;display:inline-flex;align-items:center}
}

/* ============================================================
   App-Seite: Ladenlinks
   ============================================================ */
.app-laden{display:grid;grid-template-columns:1.15fr .85fr;gap:2.4rem;align-items:center}
.app-laden .app-text h2{margin:.2rem 0 .7rem}
.app-laden .app-text p{margin:0;max-width:46ch}
.app-knoepfe{display:grid;gap:.8rem;justify-items:stretch}
.app-knoepfe .btn{justify-content:center;text-align:center}
.app-knoepfe .klein{margin:.3rem 0 0}
@media(max-width:820px){
  .app-laden{grid-template-columns:1fr;gap:1.6rem}
}

/* Ab acht Navigationspunkten wird es auf schmalen Notebooks eng:
   dort verkürzt sich der Knopf auf "Termine", die Leiste rückt zusammen. */
@media(max-width:1400px){
  .tel .lang{display:none}
  .nav{gap:.8rem}
  .nav a{font-size:.88rem}
  .nav-punkt > a{gap:.26rem}
}
.app-laden .app-text.kopf{margin-bottom:0;max-width:none}

/* ============================================================
   Notfall-Knopf in der Kopfleiste
   Bewusst rot und als letzter Punkt – wer ihn sucht, findet ihn
   immer an derselben Stelle, ohne dass er den Rest überstrahlt.
   ============================================================ */
.notknopf{display:inline-flex;align-items:center;gap:.45rem;flex:none;
  background:var(--rot);color:#fff;text-decoration:none;font-weight:700;
  padding:.62rem 1.05rem;border-radius:999px;font-size:.95rem;white-space:nowrap;
  border:1px solid transparent}
.notknopf::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#fff;
  opacity:.9;flex:none}
.notknopf:hover,.notknopf:focus-visible{background:#A93733;color:#fff}
.notknopf[aria-current="page"]{background:#A93733}
@media(max-width:1400px){.notknopf{padding:.6rem .95rem;font-size:.9rem}}
@media(max-width:1220px){.notknopf{padding:.55rem .9rem;font-size:.88rem}}
@media(max-width:420px){.notknopf::before{display:none}.notknopf{padding:.55rem .8rem}}
@media (pointer:coarse){.notknopf{min-height:44px}}

/* im Klappmenü: Termin blau, Notfall rot, beide etwas abgesetzt */
.menue nav a.menue-termin{margin-top:.5rem;background:var(--blau);color:#fff;
  text-align:center;justify-content:center}
.menue nav a.menue-termin:hover{background:var(--tief);color:#fff}
.menue nav a.menue-notfall{margin-top:.25rem;background:var(--rot);color:#fff;
  text-align:center;justify-content:center;font-weight:700}
.menue nav a.menue-notfall:hover,
.menue nav a.menue-notfall[aria-current="page"]{background:#A93733;color:#fff}

/* Sehr schmale Geräte (iPhone SE und ältere Android-Handys): Der Schriftzug
   neben dem Logo weicht, damit beide Knöpfe erhalten bleiben. Das Logo selbst
   führt weiterhin zur Startseite. */
@media(max-width:430px){
  .topbar .wrap{gap:.5rem}
  .tel,.notknopf{font-size:.85rem;padding:.55rem .8rem}
  .topbar .brand img{width:50px;height:36px}
  .topbar .brand b{font-size:1.16rem}
  .topbar .brand{gap:.55rem}
}
@media(max-width:380px){
  .tel,.notknopf{font-size:.82rem;padding:.5rem .7rem}
  .topbar .brand img{width:46px;height:33px}
  .topbar .brand{gap:.45rem}
}

/* Unter 372 px reicht der Platz neben zwei Knöpfen und dem Menü nicht mehr
   für den Schriftzug. Dann führt die Bildmarke allein zur Startseite – sie
   behält dafür ihre Trefferfläche von 44 Pixeln. Die Grenze lag früher bei
   359 px; seit der Knopf „Termine" statt „Termin" heißt, ist er einen
   Buchstaben breiter. */
@media(max-width:371px){
  .topbar .brand .wortmarke{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%)}
}

/* ============================================================
   Sprechzeiten
   Jede Zeit steht in einer eigenen Pille, geschlossene Zeiten bleiben
   still. Die Infektsprechstunde nutzt dieselbe Form, nur in Rot – sie
   ist damit sofort zu finden, ohne aus der Tabelle auszubrechen.
   ============================================================ */
table.zeiten{border-collapse:separate;border-spacing:0 .35rem;font-family:var(--body)}
/* Der Tabellenkopf ist ein dunkelblaues Band mit weißer Schrift – die
   Spaltennamen Tag, Vormittag, Nachmittag und Telefon sollen auf den
   ersten Blick zu lesen sein, nicht erst beim zweiten. */
table.zeiten thead th{font-family:var(--body);font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--tief);font-weight:700;
  padding:.6rem .9rem;border-bottom:0;text-align:left}
table.zeiten thead th:first-child{border-radius:12px 0 0 12px}
table.zeiten thead th:last-child{border-radius:0 12px 12px 0}
table.zeiten tbody th{font-weight:600;color:var(--tief);font-size:1rem;text-transform:none;
  letter-spacing:0;font-family:var(--body);padding:.55rem .9rem;border-bottom:0;
  background:#fff;border-radius:12px 0 0 12px;white-space:nowrap}
table.zeiten tbody td{padding:.4rem .38rem;border-bottom:0;background:#fff;vertical-align:middle}
table.zeiten tbody td:last-child{border-radius:0 12px 12px 0;padding-right:.9rem}
/* Der Rahmen jeder Zeile sitzt auf den Zellen, nicht auf dem <tr>.
   Ein Schatten auf der Zeile selbst wird vom Tabellenkasten seitlich
   abgeschnitten – oben und unten war die Linie zu sehen, links und
   rechts fehlte sie. Innenschatten je Zelle sind unempfindlich dagegen
   und folgen zugleich den abgerundeten Ecken. Farbe und Stärke kommen
   aus zwei Eigenschaften, die die Zeile setzt. */
table.zeiten tbody tr{--ring:var(--linie);--rw:1px;box-shadow:none}
table.zeiten tbody tr > th,
table.zeiten tbody tr > td{
  box-shadow:inset 0 var(--rw) 0 var(--ring),inset 0 calc(-1 * var(--rw)) 0 var(--ring)}
table.zeiten tbody tr > *:first-child{
  box-shadow:inset 0 var(--rw) 0 var(--ring),inset 0 calc(-1 * var(--rw)) 0 var(--ring),
             inset var(--rw) 0 0 var(--ring)}
table.zeiten tbody tr > *:last-child{
  box-shadow:inset 0 var(--rw) 0 var(--ring),inset 0 calc(-1 * var(--rw)) 0 var(--ring),
             inset calc(-1 * var(--rw)) 0 0 var(--ring)}
table.zeiten .slot{display:inline-block;background:var(--blau-pastell);color:var(--tief);
  font-family:var(--mono);font-size:.86rem;font-variant-numeric:tabular-nums;
  padding:.4rem .6rem;border-radius:9px;white-space:nowrap}
table.zeiten .slot.leer{background:transparent;color:var(--grau);font-family:var(--body);
  font-size:.88rem;padding-left:.2rem}

/* Infektsprechstunde – gleiche Form, andere Farbe */
table.zeiten tr.infekt th,
table.zeiten tr.infekt td{background:var(--rose);padding-block:.7rem}
table.zeiten tbody tr.infekt{--ring:#EBD3CD}
table.zeiten tr.infekt th{color:#8E2F2A}
table.zeiten tr.infekt .zusatz{display:block;font-weight:400;font-size:.78rem;
  color:var(--grau);letter-spacing:0;margin-top:.1rem}
table.zeiten .slot.warm{background:#F2D9D3;color:#8E2F2A;font-weight:600}

/* Telefonspalte: dieselbe Pille, aber in Sand statt Blau. Die Öffnungszeit
   ist die Hauptauskunft, die Telefonzeit die Nebenauskunft – gleiche Farbe
   für beides hätte sie gleich wichtig aussehen lassen. */
table.zeiten .slot.ruf{background:var(--sand-tief);color:#6B4E12}
table.zeiten thead th:last-child,
table.zeiten tbody td.tel-spalte{text-align:left}

@media(max-width:520px){
  table.zeiten tbody th{font-size:.94rem;padding:.5rem .6rem}
  table.zeiten tbody td{padding:.35rem .3rem}
  table.zeiten .slot{font-size:.82rem;padding:.35rem .55rem}
}

/* Fußzeile: Die erste Zeile der Adressspalte lag drei Pixel höher als die
   Links daneben, weil Links eine Innenpolsterung haben und Absätze nicht.
   Gleiche Polsterung und gleiche Zeilenhöhe – dann steht alles auf einer Linie. */
.fuss-adresse p:first-of-type{padding-top:.22rem}
.fuss-adresse p{line-height:1.6}
.fuss-block a{line-height:1.6}

/* App-Seite: Erinnerungen an Vorsorgen und Impfungen */
.erinnerung{margin-top:2.4rem;background:var(--sand);border-radius:20px;
  padding:clamp(1.6rem,3.2vw,2.4rem);border:1px solid #EADBB8}
.erinnerung .label{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:#8A6A1F;display:block;margin-bottom:.6rem}
.erinnerung h3{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0 0 .7rem}
.erinnerung p{max-width:70ch;margin:0 0 1rem}
.erinnerung .liste{margin:0 0 1rem}
.erinnerung .klein{margin:0;color:var(--grau)}

/* Hinweis für überweisende Praxen – unter den Schwerpunkten auf der Startseite */
.zuweiser{margin-top:2rem;display:grid;grid-template-columns:1fr auto;gap:1.5rem;
  align-items:center;background:var(--blau-pastell);border-radius:16px;
  padding:1.3rem clamp(1.2rem,2.6vw,1.9rem)}
.zuweiser b{display:block;color:var(--tief);font-size:1.02rem;margin-bottom:.25rem}
.zuweiser p{margin:0;font-size:.94rem;color:var(--grau);max-width:64ch}
.zuweiser .btn{white-space:nowrap}
@media(max-width:760px){.zuweiser{grid-template-columns:1fr}
  .zuweiser .btn{justify-self:start}}

/* App-Seite: Aufruf mitzumachen */
.mitmachen{display:grid;grid-template-columns:1.5fr .5fr;gap:2.2rem;align-items:center}
.mitmachen .label{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blau);display:block;margin-bottom:.6rem}
.mitmachen h2{font-size:clamp(1.4rem,2.8vw,2rem);margin:0 0 .9rem;max-width:24ch}
.mitmachen p{margin:0 0 .9rem;max-width:68ch}
.mitmachen p:last-child{margin-bottom:0}
.mitmachen-cta{display:grid;gap:.7rem;align-content:center}
.mitmachen-cta .btn{justify-content:center;text-align:center}
@media(max-width:860px){.mitmachen{grid-template-columns:1fr;gap:1.5rem}}

/* Auf schmalen Geräten passen Tag, zwei Zeitpillen und die Telefonzeit
   nicht nebeneinander. Dort wird aus jeder Zeile eine kleine Karte: Tag
   oben, Zeiten darunter. Die Grenze liegt bei 800 Pixeln – genau dort
   fällt auch das zweispaltige Raster der Sprechzeiten zusammen, und
   darunter wäre die Tabelle breiter als der Bildschirm. */
@media(max-width:800px){
  table.zeiten{border-spacing:0;display:block}
  table.zeiten thead{display:none}
  table.zeiten tbody{display:grid;gap:.45rem}
  table.zeiten tbody tr{display:block;background:#fff;border-radius:12px;
    padding:.7rem .9rem;box-shadow:0 0 0 var(--rw) var(--ring)}
  table.zeiten tbody tr > th,
  table.zeiten tbody tr > td,
  table.zeiten tbody tr > *:first-child,
  table.zeiten tbody tr > *:last-child{box-shadow:none}
  table.zeiten tbody th,
  table.zeiten tbody td{display:block;background:transparent;padding:0;border-radius:0}
  table.zeiten tbody th{margin-bottom:.45rem;white-space:normal}
  table.zeiten tbody td{display:inline-block;margin-right:.35rem}
  table.zeiten tbody td:last-child{padding-right:0}
  /* In der Kartenansicht fehlt der Tabellenkopf – die Telefonzeile
     beschriftet sich deshalb selbst und steht auf einer eigenen Zeile. */
  table.zeiten tbody td.tel-spalte{display:block;margin:.5rem 0 0;
    font-size:.9rem;color:var(--grau)}
  table.zeiten tbody td.tel-spalte::before{content:"Telefon "}
  table.zeiten tbody tr.infekt{background:var(--rose)}
  table.zeiten tbody tr.infekt th,
  table.zeiten tbody tr.infekt td{padding-block:0}
  table.zeiten .slot.leer{padding-left:0}
}

/* ============================================================
   Marke in der Kopfleiste
   Der Zusatz stand in Versalien und brach über drei Zeilen um.
   Jetzt: "PVZ" groß in der Auszeichnungsschrift, darunter der
   Zusatz in der Fließschrift auf einer Zeile, durch eine feine
   Linie vom Logo getrennt.
   ============================================================ */
.topbar .brand{gap:.82rem;align-items:center}
.topbar .brand > .wortmarke{display:block}

/* "PVZ" ist ein Kürzel aus drei Versalien. Solche Kürzel brauchen etwas
   Sperrung, sonst kleben die Buchstaben und es liest sich wie ein Wort.
   Die Zeilenhöhe steht auf 1, damit der Abstand zum Zusatz darunter
   gesetzt und nicht geerbt ist. */
.topbar .brand b{font-family:var(--display);font-size:1.62rem;letter-spacing:.05em;
  line-height:1;color:var(--tief)}

/* Der Zusatz stand in gesperrten Versalien – das liest sich als Etikett,
   nicht als Name. Jetzt gemischt in der Fließschrift, klar untergeordnet. */
.topbar .brand .sub{font-family:var(--body);font-size:.805rem;font-weight:400;
  letter-spacing:.005em;text-transform:none;color:var(--grau);
  margin-top:.26rem;white-space:nowrap;line-height:1.2;display:block}
.topbar .brand img{width:64px;height:46px}

/* Der Zusatz verschwindet nicht mehr, er wird kürzer. Vorher hatte die
   Marke drei verschiedene Gestalten – mit Zusatz, ohne Zusatz, ganz ohne
   Schriftzug – je nach Fensterbreite. Genau das ließ sie unfertig wirken. */
@media(max-width:1500px){
  .topbar .brand .sub-lang{display:none}
}
@media(max-width:1360px){
  .topbar .brand img{width:58px;height:42px}
  .topbar .brand b{font-size:1.5rem}
  .topbar .brand .sub{font-size:.775rem}
}

/* ============================================================
   Die beiden Knöpfe der Kopfleiste
   Zurückhaltender als vorher: Der Termin-Knopf ist nur umrandet und
   tritt neben dem Logo zurück; der Notfall bleibt gefüllt, aber in
   einem tiefen Ziegelrot, das nicht mit dem Logorot konkurriert.
   ============================================================ */
.topbar .tel{background:transparent;color:var(--tief);border:1.5px solid #AAB9C8;
  font-weight:600}
.topbar .tel:hover,.topbar .tel:focus-visible{background:var(--tief);color:#fff;
  border-color:var(--tief)}
.topbar .notknopf{background:#8E2F2A;border-color:#8E2F2A;font-weight:600}
.topbar .notknopf::before{display:none}
.topbar .notknopf:hover,.topbar .notknopf:focus-visible{background:#732420;
  border-color:#732420;color:#fff}
.topbar .notknopf[aria-current="page"]{background:#732420;border-color:#732420}

/* Mit acht Elementen in der Kopfleiste braucht die Zeile etwas mehr Raum.
   Darunter greift eine Staffel: erst verkürzt sich der Termin-Knopf auf
   "Termin", dann verschwindet der Zusatz neben dem Logo, dann das Klappmenü. */
.topbar .wrap{width:min(1640px,96vw)}
.nav{gap:.82rem}
.nav a{font-size:.88rem}
/* Der lange Knopftext „Termine & Rezepte". Darunter bleibt „Termine"
   stehen – der Knopf führt an dieselbe Stelle. */
@media(max-width:1099px){.tel .lang{display:none}}
/* Vorletzte Stufe der Staffel: Der Reiter „Diagnosen" ist dazugekommen,
   deshalb rücken die Reiter zwischen 1360 und 1600 Pixeln enger zusammen,
   bevor das Klappmenü übernimmt. */
@media(max-width:1600px){
  .nav{gap:.58rem}
  .nav a{font-size:.845rem}
  .topbar .tel{padding:.55rem .92rem;font-size:.88rem}
}

/* Downloadseite: "Was Sie mitbringen sollten", nach Anlass sortiert */
.mitbring-gruppen{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 2.4rem}
.mitbring-gruppen h3{font-size:1rem;margin:0 0 .6rem;color:var(--tief)}
.mitbring-gruppen .liste{margin:0}
@media(max-width:700px){.mitbring-gruppen{grid-template-columns:1fr}}

/* Markenzeile über der Überschrift auf der Startseite.
   Vorher stand sie in der Schreibmaschinenschrift in Versalien und wirkte
   angeklebt. Jetzt in der Hausschrift, mit einem kurzen gelben Strich als
   Anker – dieselbe Sprache wie die Akzente im Rest der Seite. */
.eyebrow.marke{font-family:var(--display);font-size:1.02rem;letter-spacing:.02em;
  text-transform:none;color:var(--tief);display:flex;align-items:center;gap:.6rem;
  margin:0 0 1.15rem}
.eyebrow.marke::before{content:"";width:1.9rem;height:3px;border-radius:2px;
  background:var(--gelb);flex:none}
.eyebrow.marke span{font-family:var(--body);font-weight:400;font-size:.9rem;
  color:var(--grau);padding-left:.55rem;border-left:1px solid var(--linie)}
@media(max-width:560px){
  .eyebrow.marke{flex-wrap:wrap;gap:.4rem .6rem}
  .eyebrow.marke span{border-left:0;padding-left:0;flex-basis:100%}
}

/* Feedbackseite: Bewertungsangebot */
.bewertung{display:grid;grid-template-columns:1.5fr .5fr;gap:2.2rem;align-items:center}
.bewertung .label{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blau);display:block;margin-bottom:.6rem}
.bewertung h2{font-size:clamp(1.4rem,2.8vw,2rem);margin:0 0 .9rem;max-width:26ch}
.bewertung p{margin:0 0 .9rem;max-width:68ch}
.bewertung p:last-child{margin-bottom:0}
.bewertung-cta{display:grid;gap:.7rem;align-content:center}
.bewertung-cta .btn{justify-content:center;text-align:center}
@media(max-width:860px){.bewertung{grid-template-columns:1fr;gap:1.4rem}}

/* Startseite: die beiden Stellen getrennt, jede mit eigenem Knopf */
.stellen-zwei{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.stelle-karte{background:#fff;border:1px solid var(--linie);border-radius:18px;
  padding:1.7rem;display:flex;flex-direction:column}
.stelle-karte .stelle-art{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blau);display:block;margin-bottom:.6rem}
.stelle-karte h3{font-size:1.16rem;line-height:1.3;margin:0 0 .7rem;min-height:2.6em}
.stelle-karte p{margin:0 0 1.4rem;font-size:.95rem;color:var(--grau)}
.stelle-karte .btn{margin-top:auto;align-self:flex-start}
.stelle{scroll-margin-top:6rem}
@media(max-width:760px){.stellen-zwei{grid-template-columns:1fr}
  .stelle-karte h3{min-height:0}}

/* Auf Tablets sind die Menüpunkte für den Finger größer gepolstert – dadurch
   passt die Leiste im Querformat nicht mehr. Dort greift das Klappmenü früher. */
@media (pointer:coarse) and (max-width:1400px){
  .nav{display:none}
  .menue{display:block}
}

/* ============================================================
   Fußzeile: eine gemeinsame Zeilenhöhe für alle vier Spalten
   Die Links haben oben und unten eine Polsterung, Absätze nicht –
   dadurch lief die Adressspalte in einem anderen Takt. Jetzt sitzt
   jede Zeile auf demselben Raster, die Abstände zwischen den drei
   Blöcken sind genau eine Zeile hoch.
   ============================================================ */
.fuss-block{--zeile:1.912rem}
.fuss-adresse span{display:block;font-size:.92rem;line-height:1.6;
  padding:.22rem 0;color:var(--grau)}
.fuss-adresse span.luft{margin-top:var(--zeile)}
.fuss-adresse span a{color:var(--blau);text-decoration:none;display:inline}
.fuss-adresse span a:hover{text-decoration:underline}
@media (pointer:coarse){
  /* Fingergerechte Trefferflaechen, ohne das Zeilenraster zu zerreissen */
  .fuss-adresse span{padding:0;min-height:46px;display:flex;align-items:center}
  .fuss-adresse span a{display:flex;align-items:center;min-height:46px}
  .fuss-block{--zeile:2.875rem}
}

/* Hinweis auf die App über der Online-Rezeption */
.app-tipp{display:grid;grid-template-columns:1fr auto;gap:1.6rem;align-items:center;
  background:var(--blau-pastell);border-radius:18px;
  padding:1.4rem clamp(1.2rem,2.6vw,1.9rem);margin-bottom:2.6rem}
.app-tipp .tipp-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blau);display:block;margin-bottom:.45rem}
.app-tipp p{margin:0;font-size:.96rem;line-height:1.6;max-width:78ch}
.app-tipp .btn{white-space:nowrap}
@media(max-width:760px){.app-tipp{grid-template-columns:1fr}
  .app-tipp .btn{justify-self:start}}

/* ============================================================
   Sichtbare Umrisse für Bedienelemente
   Die hellen Rahmenlinien (--linie) sind als Trennlinie gedacht und
   dafür richtig. Als einziger Umriss eines Knopfes reichen sie nicht:
   Nach WCAG 1.4.11 muss der Umriss eines Bedienelements 3:1 gegen
   seine Umgebung erreichen. Dafür gibt es --rahmen.
   ============================================================ */
:root{ --rahmen:#6E8497; }

.btn-s{border-color:var(--rahmen)}
.btn-s:hover,.btn-s:focus-visible{border-color:var(--tief)}
.menue > summary{border-color:var(--rahmen)}
.topbar .tel{border-color:var(--rahmen)}
.karte .btn-s,.cta-band .btn-s{border-color:rgba(255,255,255,.55)}
.karte .btn-s:hover,.cta-band .btn-s:hover{border-color:#fff}

/* Herkunftsangabe unter medizinischen Inhalten */
.stand{background:var(--papier);border-top:1px solid var(--linie);
  padding:1.8rem 0 2.2rem;font-size:.86rem;color:var(--grau)}
.stand p{margin:0 0 .6rem;max-width:80ch;line-height:1.6}
.stand p:last-child{margin-bottom:0}
.stand b{color:var(--tief)}

/* Der heutige Tag in den Sprechzeiten – derselbe Rahmen, nur kräftiger
   und in Blau. Der Zuschnitt steht weiter oben bei table.zeiten. */
table.zeiten tbody tr.heute{--ring:var(--blau);--rw:2px}
table.zeiten tr.heute th{color:var(--blau)}
.heute-marke{display:inline-block;margin-left:.55rem;background:var(--blau);color:#fff;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.16rem .45rem;border-radius:999px;vertical-align:.1em;font-weight:500}
/* Unter der Tabelle steht, was heute gilt und wo die Telefonzeiten sind.
   Das ist kein Kleingedrucktes, sondern der Satz, den viele als einzigen
   lesen – deshalb 14,4 Pixel und nicht 13,8. */
.zeiten-fuss{margin:1rem 0 0;font-size:.9rem;color:var(--grau);line-height:1.55;max-width:52ch}
.zeiten-fuss a{color:var(--blau)}
.zeiten-wochenende{color:var(--tief)}
.zeiten-spalte{min-width:0}

/* ============================================================
   Druckansicht
   Gedruckt wird bei uns vor allem die Notfallseite, die Sprechzeiten
   und einzelne Leistungsseiten – für die Pinnwand zu Hause oder für
   die Kita. Bedienelemente haben auf Papier nichts verloren; dafür
   gehören Adresse und Telefonnummer auf jedes Blatt.
   ============================================================ */
@media print{
  @page{margin:16mm 14mm}
  *{background:transparent !important;color:#000 !important;
    box-shadow:none !important;text-shadow:none !important}
  body{font-size:11pt;line-height:1.45}
  .topbar,.menue,.aktuell,.wave,.karte,.hero .mark,.skip,
  .cta-band,.weiter,.demo-band,.demo-hinweis,.app-tipp,.zuweiser,
  .karriere-cta,.stellen-zwei,.mitmachen,.erinnerung,.bewertung,
  footer .fuss-oben nav,.fuss-block:not(.fuss-adresse),
  .btn,.tel,.notknopf,.rez-widget{display:none !important}
  main{padding:0 !important}
  section{padding:.6rem 0 !important;break-inside:auto}
  .wrap{width:100% !important;max-width:none !important}
  h1{font-size:20pt;margin-bottom:.3rem}
  h2{font-size:14pt;margin-top:1rem;break-after:avoid}
  h3{font-size:11.5pt;break-after:avoid}
  p,li{orphans:3;widows:3}
  .kachel,.panel,.merk,.warn,.notruf,.anliegen-karte,.stelle,.qcard{
    border:1px solid #999 !important;border-radius:0 !important;
    padding:.6rem .8rem !important;break-inside:avoid}
  table.zeiten tbody tr{box-shadow:none !important;border:1px solid #999}
  table.zeiten .slot{border:1px solid #ccc;padding:.15rem .3rem}
  .faq details{break-inside:avoid}
  .faq details > *{display:block !important}
  /* Aufklappfragen im Druck immer geöffnet */
  .faq details:not([open]) > p{display:block !important}
  /* Adressen hinter Links, damit ein Ausdruck ohne Bildschirm nutzbar ist */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555 !important}
  main a[href^="tel:"]::after,main a[href^="mailto:"]::after{content:""}
  .stand{border-top:1px solid #999;padding-top:.6rem}
  footer{border-top:1px solid #999}
}

/* Rechtliche Links in der Fußzeile: Mindestmaß 24 Punkt nach WCAG 2.2 */
.fuss-unten nav a{display:inline-flex;align-items:center;min-height:24px;padding-block:.15rem}

/* Weiterführende Links, die allein in einer Zeile stehen, brauchen etwas
   Höhe – WCAG 2.2 verlangt für eigenständige Ziele mindestens 24 Punkte. */
main p > a:only-child:not(.btn){display:inline-block;padding-block:.2rem}

/* Auf Berührungsgeräten gehen die Mindestmaße vor – diese Regeln stehen
   bewusst am Ende, damit sie die allgemeinen Werte überschreiben. */
@media (pointer:coarse){
  .fuss-unten nav a{min-height:44px;padding-block:.7rem}
}
/* Namen im Team sind eigenständige Ziele, nicht Teil eines Satzes */
.arzt h3 > a{display:inline-block;padding-block:.2rem}

/* ============================================================
   Maskottchen
   Die Figur steht neben dem Text, nie darin. Sie hat keine
   Bedeutung für das Verständnis – deshalb bleibt sie beim
   Drucken weg und tritt auf schmalen Geräten zurück.
   ============================================================ */
.mk{display:block;height:auto}
.mk-gross{width:100%;max-width:420px;margin-inline:auto}
.mark-mk{display:flex;align-items:center;justify-content:center}

/* Kleine Figur neben einer Überschrift */
.mk-neben{width:150px;margin:1.2rem 0 0}

/* Figur, die am rechten Rand eines Textblocks mitläuft */
.mk-rand{width:185px;float:right;margin:0 0 1rem 1.6rem;shape-outside:circle(50%)}
@media(max-width:700px){
  .mk-rand{float:none;width:120px;margin:0 0 1rem}
  .mk-neben{width:120px}
}
@media print{ .mk{display:none !important} }

/* ============================================================
   Lumi
   Das Maskottchen führt durch die Website. Sie steht immer neben
   dem Text, nie darin, und trägt nie eine Auskunft, die es nicht
   auch als Fließtext gibt – wer sie nicht sieht, verpasst nichts.
   ============================================================ */

/* --- Lumi mit Sprechblase --------------------------------------------- */
.lumi-sagt{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;
  margin:1.8rem 0}
.lumi-sagt .mk-sprech{width:118px;flex:none}
.lumi-sagt .blase{position:relative;background:var(--sand);border:1px solid #EADBB8;
  border-radius:18px;padding:1.1rem 1.3rem}
.lumi-sagt .blase b{display:block;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;color:#8A6A1F;margin-bottom:.4rem}
.lumi-sagt .blase p{margin:0;font-size:1.02rem;line-height:1.55;color:var(--tief)}
/* der kleine Zipfel, der die Blase mit Lumi verbindet */
.lumi-sagt .blase::before{content:"";position:absolute;left:-9px;top:50%;
  width:16px;height:16px;transform:translateY(-50%) rotate(45deg);
  background:var(--sand);border-left:1px solid #EADBB8;border-bottom:1px solid #EADBB8}
.lumi-rechts{grid-template-columns:1fr auto}
.lumi-rechts .mk-sprech{order:2}
.lumi-rechts .blase::before{left:auto;right:-9px;
  border-left:0;border-bottom:0;border-right:1px solid #EADBB8;border-top:1px solid #EADBB8}
@media(max-width:620px){
  .lumi-sagt,.lumi-rechts{grid-template-columns:1fr;justify-items:start;gap:.6rem}
  .lumi-sagt .mk-sprech{width:86px;order:0}
  .lumi-sagt .blase::before{left:26px;top:-9px;transform:rotate(45deg);
    border:0;border-left:1px solid #EADBB8;border-top:1px solid #EADBB8}
}

/* --- Kasten "Für Kinder erklärt" -------------------------------------- */
.kinderkasten{background:var(--blau-pastell);border-radius:20px;
  padding:clamp(1.3rem,2.6vw,1.9rem);margin:2rem 0;
  display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:start}
.kinderkasten .mk{width:130px;flex:none}
.kinderkasten h3{font-size:1.12rem;margin:0 0 .5rem;color:var(--tief)}
.kinderkasten p{margin:0 0 .6rem;font-size:1.02rem;line-height:1.6}
.kinderkasten p:last-child{margin-bottom:0}
.kinderkasten .liste{margin:.4rem 0 0}
@media(max-width:620px){
  .kinderkasten{grid-template-columns:1fr;gap:.8rem}
  .kinderkasten .mk{width:80px}
}

/* ============================================================
   Die Kinderseite
   Etwas größer gesetzt, mehr Farbe, mehr Luft – aber dieselbe
   Schrift und dieselbe Palette wie der Rest. Es soll nach
   derselben Praxis aussehen, nur eine Stufe freundlicher.
   ============================================================ */
.kinder-kopf{background:linear-gradient(180deg,var(--blau-pastell) 0%,var(--papier) 100%);
  padding:clamp(2rem,5vw,3.6rem) 0 clamp(2rem,4vw,3rem)}
.kinder-kopf .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center}
.kinder-kopf h1{font-size:clamp(2rem,5vw,3.4rem);margin:.2rem 0 .8rem}
.kinder-kopf .lead{font-size:clamp(1.05rem,1.9vw,1.25rem);max-width:46ch}
.kinder-kopf .mk-gross{max-width:300px}
@media(max-width:820px){
  .kinder-kopf .wrap{grid-template-columns:1fr}
  .kinder-kopf .mk-gross{max-width:220px}
}

.kinderseite h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin:2.6rem 0 1.2rem}
.kinderseite h2:first-child{margin-top:0}
.kinderseite p{font-size:1.06rem;line-height:1.62}

/* Die drei Schritte beim Ankommen */
.kinder-schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.k-schritt{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:1.5rem}
.k-nummer{display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;background:var(--gelb);color:#4A3608;
  font-family:var(--display);font-size:1.3rem;font-weight:800;margin-bottom:.8rem}
.k-schritt h3{font-size:1.14rem;margin:0 0 .5rem}
.k-schritt p{margin:0;font-size:1rem;color:var(--grau)}
@media(max-width:800px){.kinder-schritte{grid-template-columns:1fr}}

/* Lumi spielt eine Vorsorgeuntersuchung durch

   Acht kleine Stationen statt eines langen Textes. Jede Station hat ein
   Bild, eine Zahl und zwei Sätze – so viel, wie ein Kind am Stück hört.
   Am Monitor stehen vier nebeneinander, auf dem Telefon zwei. */
.u-lauf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1.4rem 0 0}
.u-schritt{background:#fff;border:1px solid var(--linie);border-radius:20px;
  padding:1.1rem 1.1rem 1.3rem;display:flex;flex-direction:column;min-width:0}
/* Feste Bildhöhe: Die Zeichnungen haben sehr unterschiedliche Formate.
   Ohne sie stünden die Überschriften der acht Karten auf acht
   verschiedenen Höhen. */
.u-schritt img{width:100%;max-width:170px;height:104px;object-fit:contain;
  align-self:center;margin-bottom:.7rem}
.u-schritt .k-nummer{width:2rem;height:2rem;font-size:1.05rem;margin-bottom:.5rem}
.u-schritt h3{font-size:1.08rem;margin:0 0 .4rem}
.u-schritt p{margin:0;font-size:.98rem;line-height:1.55;color:var(--grau)}
@media(max-width:1000px){.u-lauf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.u-lauf{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .u-schritt{padding:.9rem .9rem 1rem}
  .u-schritt img{max-width:118px;height:82px}
  .u-schritt h3{font-size:1rem}
  .u-schritt p{font-size:.94rem}}
@media(max-width:380px){.u-lauf{grid-template-columns:1fr}}

/* Die großen Erklärkarten */
.k-karte{display:grid;grid-template-columns:200px 1fr;gap:1.7rem;align-items:center;
  border-radius:22px;padding:clamp(1.3rem,2.6vw,2rem);margin:1.2rem 0}
.k-karte .mk{width:100%}
.k-karte h3{font-size:1.3rem;margin:0 0 .6rem}
.k-karte p{margin:0 0 .7rem}
.k-karte p:last-child{margin-bottom:0}
.k-blau{background:var(--blau-pastell)}
.k-sand{background:var(--sand)}
.k-rose{background:var(--rose)}
@media(max-width:720px){
  .k-karte{grid-template-columns:1fr;gap:.8rem;justify-items:start}
  .k-karte .mk{width:120px}
}

/* Fragen, die man stellen darf */
.k-fragen{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.k-fragen div{background:#fff;border:1px solid var(--linie);border-left:4px solid var(--gelb);
  border-radius:0 16px 16px 0;padding:1.1rem 1.3rem}
.k-fragen b{display:block;font-size:1.06rem;color:var(--tief);margin-bottom:.3rem}
.k-fragen span{color:var(--grau);font-size:.99rem;line-height:1.55}
@media(max-width:720px){.k-fragen{grid-template-columns:1fr}}

/* Ausmalbild */
.k-ausmalen{display:grid;grid-template-columns:190px 1fr;gap:1.8rem;align-items:center;
  background:#fff;border:2px dashed var(--linie);border-radius:22px;
  padding:clamp(1.4rem,3vw,2.2rem);margin:2.4rem 0}
.k-ausmalen .mk{width:100%}
.k-ausmalen h3{font-size:1.3rem;margin:0 0 .6rem}
@media(max-width:720px){
  .k-ausmalen{grid-template-columns:1fr;justify-items:start}
  .k-ausmalen .mk{width:150px}
}

.k-eltern{margin-top:2.6rem}

/* Hinweis auf Lumis Kinderseite – auf der Startseite */
.kinder-teaser{display:grid;grid-template-columns:190px 1fr;gap:1.8rem;align-items:center;
  background:var(--sand);border-radius:22px;
  padding:clamp(1.3rem,2.8vw,2rem);margin-top:2.4rem}
.kinder-teaser .mk{width:100%}
.kinder-teaser .label{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:#8A6A1F;display:block;margin-bottom:.45rem}
.kinder-teaser h3{font-size:clamp(1.15rem,2.2vw,1.45rem);margin:0 0 .6rem}
.kinder-teaser p{margin:0 0 1.2rem;max-width:70ch}
@media(max-width:720px){
  .kinder-teaser{grid-template-columns:1fr;justify-items:start;gap:1rem}
  .kinder-teaser .mk{width:120px}
}
.mk-mittel{width:120px;margin-inline:auto}

/* ---------------------------------------------------------------------------
   Falten auf schmalen Geräten

   Ein Handy zeigt etwa ein Zehntel dessen, was ein Monitor zeigt. Dieselbe
   Seite wird darauf zwangsläufig zu einer sehr langen Rolle. Deshalb klappen
   erklärende Abschnitte auf schmalen Geräten zusammen: Die Überschrift bleibt
   sichtbar, der Text kommt auf Tippen.

   Wichtig: Es gibt trotzdem nur EINE Website. Am Rechner ist die Zusammen-
   faltung unsichtbar – dort steht alles offen da wie bisher. Zwei getrennte
   Fassungen zu pflegen hieße, dass sie über kurz oder lang auseinanderlaufen.

   Ohne JavaScript stehen alle Falten offen (das "open" steht im Quelltext).
   --------------------------------------------------------------------------- */
.falt{margin:0}
.falt > summary{display:none}
.falt[open] > summary{display:none}

@media (max-width:719px){
  .falt{border-top:1px solid var(--linie);margin-top:.9rem}
  .falt > summary,
  .falt[open] > summary{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    list-style:none;cursor:pointer;
    padding:.85rem .2rem;min-height:44px;
    font-family:var(--body);font-weight:600;font-size:1rem;color:var(--tief);
  }
  .falt > summary::-webkit-details-marker{display:none}
  .falt > summary::after{
    content:"";flex:none;width:11px;height:11px;
    border-right:2.2px solid var(--blau);border-bottom:2.2px solid var(--blau);
    transform:rotate(45deg);margin-top:-5px;transition:transform .18s ease;
  }
  .falt[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
  .falt > summary:hover{color:var(--blau)}
  .falt-inhalt{padding-bottom:.4rem}
  .falt-inhalt > :first-child{margin-top:0}
  .falt-inhalt > :last-child{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .falt > summary::after{transition:none}
}

/* Auf schmalen Geräten sagt die Faltzeile schon, was folgt – die Überschrift
   darunter wäre dieselbe Zeile zweimal. Am Rechner bleibt sie stehen, dort
   ist die Faltzeile unsichtbar. */
@media (max-width:719px){
  .falt-inhalt > .falt-titel{display:none}
}

/* Die Fußzeile ist auf dem Handy die längste Strecke der ganzen Seite: vier
   Blöcke untereinander, zusammen gut zwei Bildschirme. Die drei Linklisten
   falten deshalb zusammen. Die Adresse mit Telefonnummer bleibt offen – wer
   sie sucht, sucht sie eilig. */
.fuss-falt{min-width:0}
@media (max-width:719px){
  .fuss-falt{border-top:1px solid var(--linie);margin-top:0}
  .fuss-falt > summary{
    font-family:var(--display);font-weight:800;font-size:1rem;padding:.9rem .2rem;
  }
  .fuss-falt .falt-inhalt > .fuss-block > b{display:none}
  .fuss-oben{gap:0}
  .fuss-adresse{margin-bottom:1.4rem}
}

/* ---------------------------------------------------------------------------
   Ruhe auf schmalen Geräten

   Am Monitor stehen Abschnitte nebeneinander, die Abstände dazwischen sind
   Gestaltung. Auf dem Handy stehen dieselben Abschnitte untereinander – dann
   summieren sich dieselben Abstände zu Leerlauf, und die Seite wirkt unruhig,
   weil man ständig scrollt, ohne etwas zu sehen. Deshalb hier engere Abstände
   und etwas kleinere Karten.
   --------------------------------------------------------------------------- */
@media (max-width:719px){
  section{padding:2.4rem 0}
  .kopf{margin-bottom:1.4rem}
  .kopf h2{margin-bottom:.5rem}
  /* Auf dem Telefon zählt, dass Überschrift und die beiden Schaltflächen
     möglichst früh zu sehen sind. Lumi bleibt als Begrüßung stehen, nur
     kleiner; die Abstände darunter rücken zusammen. */
  .hero{padding-top:1.1rem}
  .hero .mk-gross{max-width:168px}
  .hero h1{font-size:clamp(1.95rem,7.6vw,2.5rem)}
  .hero p.lead{margin:.9rem 0 1.3rem;font-size:1.02rem}
  .hero .wrap{gap:1rem}
  .quick .wrap{gap:1.1rem}
  .qcard p{margin-bottom:0}
  .panel{padding:1.3rem;border-radius:16px}
  .weiter{gap:.7rem}
  .weiter a{padding:1rem 1.1rem;border-radius:14px}
  .stelle-karte{padding:1.3rem;border-radius:16px}
  .arzt{padding:1.2rem;border-radius:16px}
  .zuweiser{padding:1.3rem;border-radius:16px}
  .kinder-teaser{padding:1.3rem;border-radius:16px}
}

/* Links in den Aufzählungen der Merkkästen. Ohne eigene Polsterung ist
   ihre Trefferfläche nur so hoch wie die Schriftzeile – auf dem Telefon
   deutlich unter den 24 Pixeln, die die Richtlinie verlangt. */
.merk li a,.hinweis li a{display:inline-block;padding-block:.3rem;line-height:1.5}
@media (pointer:coarse){
  .merk li a,.hinweis li a{padding-block:.55rem;min-height:44px;
    display:inline-flex;align-items:center}
  .merk li,.hinweis li{margin-block:.1rem}
}

/* ---------------------------------------------------------------------------
   Einwilligungsbanner für die Reichweitenmessung

   Beide Schaltflächen sehen absichtlich gleich aus. Eine bunte Zustimmung
   neben einem grauen „Ablehnen" ist eine Gestaltung, die zum Klicken drängt –
   und damit keine freiwillige Einwilligung im Sinne der DSGVO. Erscheint das
   Banner überhaupt nur, wenn in messung.py eine Mess-ID eingetragen ist.
   --------------------------------------------------------------------------- */
.ebanner{position:fixed;inset:auto 0 0 0;z-index:70;background:var(--papier);
  border-top:1px solid var(--linie);box-shadow:0 -12px 30px -22px rgba(18,62,99,.5)}
.ebanner[hidden]{display:none}
.eb-innen{width:var(--breit);margin-inline:auto;padding:1rem 0 1.1rem;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;
  align-items:center}
.ebanner p{margin:0;font-size:.92rem;line-height:1.55;color:var(--grau);
  max-width:78ch}
.ebanner p:first-child{margin-bottom:.3rem;color:var(--tief);font-size:.98rem}
/* Dieser Satz erklärt, was die Zustimmung bedeutet und wie man sie
   widerruft. Eine Einwilligung ist nur wirksam, wenn sie informiert
   ist – 13,8 Pixel auf einem Telefon sind dafür zu klein. */
.ebanner .eb-fein{margin-top:.4rem;font-size:.9rem}
.ebanner a{color:var(--blau)}
.eb-zwecke{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.5rem}
.eb-zwecke label{display:grid;grid-template-columns:auto 1fr;gap:.6rem;
  align-items:start;cursor:pointer;min-height:44px;align-content:center}
.eb-zwecke input{margin-top:.25rem;width:18px;height:18px;flex:none}
.eb-zwecke b{color:var(--tief);font-weight:600}
.eb-knoepfe{display:flex;gap:.7rem;flex-wrap:wrap}
/* Beide Schaltflächen sind absichtlich gleich: gleiche Größe, gleiche Farbe,
   gleiche Schrift. Ein grünes „Zustimmen" neben einem grauen „Ablehnen"
   drängt zum Klicken – und ist damit keine freiwillige Einwilligung
   (Art. 4 Nr. 11, Art. 7 DSGVO). */
.eb-knoepfe button{font:inherit;font-size:.92rem;font-weight:600;
  color:var(--tief);background:#fff;border:1.5px solid var(--linie-kraeftig,#AAB9C8);
  border-radius:999px;padding:.62rem 1.2rem;cursor:pointer;white-space:nowrap;
  min-height:44px}
.eb-knoepfe button:hover,.eb-knoepfe button:focus-visible{border-color:var(--blau);
  color:var(--blau)}
@media(max-width:760px){
  .eb-innen{grid-template-columns:1fr;padding-bottom:1.2rem}
  .eb-knoepfe button{flex:1 1 auto;justify-content:center}
}

/* ---------------------------------------------------------------------------
   Sprechzeiten auf dem Handy: heute zuerst

   Am Monitor ist die Wochentabelle mit einem Blick erfasst. Auf dem Telefon
   sind es sechs Karten untereinander – und fast alle wollen dort nur eines
   wissen: Wie ist es heute? Diese Zeile beantwortet das oben; die Woche
   steht unverändert darunter, eine Falte tiefer. Gebaut wird der Kasten von
   website.js, weil nur das Gerät weiß, welcher Tag heute ist.
   --------------------------------------------------------------------------- */
/* Der Kasten „Heute“. Er ersetzt die Wochentabelle dort, wo sie zu viel
   ist: auf dem Telefon überall, am Rechner auf der Startseite. Die
   Gestaltung gilt deshalb immer, nur das Einblenden ist an Bedingungen
   geknüpft. */
.heute-kurz{background:var(--blau-hell);border:2px solid var(--blau);
  border-radius:14px;padding:.9rem 1rem;margin-bottom:.8rem}
.heute-kurz > b{display:block;color:var(--blau);font-size:.95rem;
  letter-spacing:.01em;margin-bottom:.5rem}
.heute-kurz p{margin:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  color:var(--tief)}
/* Die Pillen sind aus der Tabelle geklont; ihre Gestaltung hängt dort
   am Selektor "table.zeiten .slot" und gilt hier nicht mehr. */
.heute-kurz .slot{display:inline-block;background:#fff;color:var(--tief);
  font-family:var(--mono);font-size:.9rem;font-variant-numeric:tabular-nums;
  padding:.4rem .7rem;border-radius:9px;white-space:nowrap}
.heute-kurz .slot.leer{background:transparent;color:var(--tief);
  font-family:var(--body);padding-left:0}
.heute-kurz .slot.warm{background:#fff;color:#8E2F2A;font-weight:600}
/* Text und Pille sollen auf einer Zeile stehen – der Elternselektor
   oben setzt display:flex, das hätte sie umbrechen lassen. */
.heute-kurz .heute-infekt{display:block;margin-top:.6rem;font-size:.92rem;
  color:var(--tief)}
.heute-kurz .heute-infekt .slot{vertical-align:middle;margin-left:.15rem}
/* Geschlossen: derselbe Kasten, aber ohne Signalfarbe – ein blauer
   Rahmen liest sich wie „offen". */
.heute-kurz.zu{background:var(--papier);border-color:var(--linie)}
.heute-kurz.zu > b{color:var(--tief)}
.heute-kurz .slot.ruf{background:#fff;color:#6B4E12}

.heute-kurz{display:none}
@media(max-width:719px){.heute-kurz{display:block}}
/* Auf der Startseite steht der Kasten auch am Rechner – dort interessiert
   heute und morgen, nicht die ganze Woche. */
.heute-morgen .heute-kurz{display:block}
.heute-morgen .heute-morgen-zeile{display:block;margin-top:.55rem;
  padding-top:.55rem;border-top:1px solid rgba(18,62,99,.16);font-size:.95rem}
.heute-morgen .heute-morgen-zeile .slot{vertical-align:middle;margin-left:.3rem}

/* Die ganze Woche liegt in einer Klappe. Anders als die übrigen Falten
   ist sie auf jedem Gerät zu und auf jedem Gerät aufklappbar. */
.woche{border-top:1px solid var(--linie);margin-top:1rem}
.woche > summary{display:flex;align-items:center;gap:.55rem;list-style:none;
  cursor:pointer;padding:.85rem .2rem;min-height:44px;font-weight:600;
  font-size:.97rem;color:var(--blau)}
.woche > summary::-webkit-details-marker{display:none}
.woche > summary::after{content:"";flex:none;width:9px;height:9px;
  border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:rotate(45deg);margin-top:-4px;transition:transform .18s ease}
.woche[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
.woche > summary:hover{color:var(--tief)}
.woche table.zeiten{margin-top:.2rem}

/* Sehr schmale Geräte (iPhone SE, 320 px): Wörter wie
   "Weiterbildungsermächtigung" passen dort in keine Spalte. Silbentrennung
   und ein Notumbruch verhindern, dass die Seite seitlich wegläuft. */
@media (max-width:400px){
  p,li,td,th,dd,dt,h1,h2,h3,h4,summary,.slot,.lead,
  .weiter a b,.weiter a span,.l-karte b,.l-karte span{
    overflow-wrap:break-word;
    -webkit-hyphens:auto;hyphens:auto;
  }
  /* „Hausstaubmilbenallergie" in der Brotkrume ist länger als ein
     320-Pixel-Bildschirm breit ist. */
  .krumen{overflow-wrap:anywhere}
}


/* Unterhalb von 1380 px steht die volle Navigation noch in einer Zeile und
   braucht jeden Millimeter; darunter kommen auf dem Handy zwei Knöpfe und
   das Menü dazu. In beiden Fällen bleibt nur Bildmarke und Kürzel. Die
   vollständige Bezeichnung steht weiterhin im Seitentitel, in der Fußzeile
   und in den Suchergebnissen – sie geht also nirgends verloren. */
@media(max-width:1380px){
  .topbar .brand .sub{display:none}
}

/* Der Ortsname im Schriftzug.
   Er fiel bisher unter 640 Pixeln weg – also bei fast jedem Telefon, und
   damit bei 83 von 100 Aufrufen. Übrig blieb „PVZ“, drei Buchstaben, die
   für sich genommen nicht sagen, wo man gelandet ist. Gemessen passt
   „PVZ-Neumünster“ aber schon ab 380 Pixeln neben Notfallknopf und Menü;
   nur darunter wird es eng. Deshalb steht die Grenze jetzt dort. */
@media(max-width:379px){
  .topbar .brand .ort{display:none}
}

/* Abschnittskopf mit Figur daneben (Feedback-Seite): Text links, Lumi rechts.
   Auf schmalen Geräten rückt die Figur unter den Text und wird kleiner. */
.kopf-mit-figur{display:grid;grid-template-columns:1fr auto;gap:2rem;
  align-items:center;max-width:none}
.kopf-mit-figur > div{max-width:54ch}
@media(max-width:640px){
  .kopf-mit-figur{grid-template-columns:1fr;gap:1rem}
  .kopf-mit-figur .mk-neben{width:110px;margin:0}
}

/* Lumi in der Ecke eines Kontakt-Blocks. Der Block ist dunkelblau und die
   Zeichnung hat dunkelblaue Arme – ohne hellen Grund wäre sie unsichtbar.
   Deshalb sitzt sie auf einer kleinen weißen Kachel. */
.k-block-figur .mk-ecke{width:116px;margin:.9rem 0 0;background:#fff;
  border-radius:14px;padding:.55rem .7rem}

/* Lumi als Band über dem Rezeptionskopf – breiter als hoch */
.mk-band{width:min(300px,70%);margin:0 0 1rem}

/* ---------------------------------------------------------------------------
   Leistungskarten mit kleiner Lumi-Zeichnung

   Dieselbe Kartenform wie .weiter a, nur mit einer schmalen Bildspalte
   links. Die Zeichnungen sind unterschiedlich breit zugeschnitten – die
   feste Spalte mit mittiger Ausrichtung fängt das ab.
   --------------------------------------------------------------------------- */
.gruppe-satz{margin:.45rem 0 1.5rem;color:var(--grau);max-width:62ch}
.weiter.mit-lumi a.l-karte{display:grid;grid-template-columns:76px minmax(0,1fr);
  gap:1.1rem;align-items:center;min-width:0}
.l-karte .mk-lk{width:100%;max-height:74px;object-fit:contain}
.lk-text{display:block}
.lk-text > b{display:block}
.lk-text > span{display:block;overflow-wrap:break-word}
@media(max-width:719px){
  .weiter.mit-lumi a.l-karte{grid-template-columns:60px minmax(0,1fr);gap:.9rem}
  .l-karte .mk-lk{max-height:58px}
}

/* Lumi im Kopf einer Seite (termin-buchen): Text links, Figur rechts */
.subhero .wrap.subhero-figur{display:grid;grid-template-columns:1fr auto;
  gap:2.5rem;align-items:center}
.mk-subhero{width:200px}
@media(max-width:760px){
  .subhero .wrap.subhero-figur{grid-template-columns:1fr;gap:1rem}
  .mk-subhero{width:130px}
}

/* Lumi über der Merkbox auf der Praxisseite */
.merk .mk-merk{width:74%;max-width:210px;margin:0 auto 1.1rem}

/* Der kleine Schnupfen-Lumi in der Infekt-Falte */
.mk-infekt{width:120px;float:right;margin:0 0 .6rem 1rem;shape-outside:circle(50%)}
@media(max-width:719px){ .mk-infekt{width:92px} }

/* ---------------------------------------------------------------------------
   Aufklappmenü mit Fachgruppen (Leistungen)

   Drei Spalten, eine je Fachgruppe, darüber "Alle Leistungen" über die
   volle Breite. Die Gruppenüberschriften sind keine Links – sie gliedern
   nur, deshalb ohne Hover-Fläche und in der Etikettenschrift.
   --------------------------------------------------------------------------- */
/* Fester Kasten, mittig unter dem Menüpunkt verankert. Ein Kasten mit
   width:max-content ragte – auch unsichtbar – rechts über den Rahmen und
   erzeugte je nach Fensterbreite einen seitlichen Überlauf der Seite.
   Zentriert über margin statt transform, weil transform schon das
   Aufklappen animiert. */
.unter.spalten{grid-template-columns:1fr;min-width:0;width:50rem;
  left:50%;margin-left:-25rem;padding:.7rem}
.u-alle{border-bottom:1px solid var(--linie);margin-bottom:.35rem;
  padding-bottom:.3rem}
.u-spalten{display:grid;grid-template-columns:repeat(3,minmax(15.5rem,1fr));
  gap:.2rem .9rem}
.u-gruppe{min-width:0}
/* Gruppentitel im großen Aufklappmenü. Vorher standen sie in winziger
   Versalschrift über deutlich größeren Zeilen – die Überschrift war
   kleiner als das Überschriebene. Jetzt dieselbe Schrift und fast
   dieselbe Größe wie die Ziele darunter, abgesetzt nur durch Gewicht
   und eine Haarlinie. */
.u-titel{display:block;font-family:var(--body);font-size:.92rem;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--tief);
  padding:.5rem .8rem .4rem;margin:0 .3rem .3rem;
  border-bottom:1px solid var(--linie)}
/* Bei zwei Spalten rutschte die dritte Gruppe unter die erste und das
   Menü stand schief. Deshalb bleiben es drei Spalten – der Kasten wird
   stattdessen schmaler. */
@media(max-width:1480px){
  .unter.spalten{width:44rem;margin-left:-22rem}
  .u-spalten{grid-template-columns:repeat(3,minmax(0,1fr));gap:.2rem .7rem}
}

/* Kleine Lumi-Zeichnung oben rechts in den Schwerpunkt-Tafeln der Startseite */
.panel .mk-panel{width:120px;float:right;margin:0 0 .6rem 1rem}
@media(max-width:719px){ .panel .mk-panel{width:92px} }

/* ---------------------------------------------------------------------------
   Ärztin/Arzt: Profilseite und Teamkachel
   --------------------------------------------------------------------------- */
.arzt-profil{display:grid;grid-template-columns:320px 1fr;gap:clamp(1.8rem,4vw,3.2rem);
  align-items:start}
.arzt-bild{position:sticky;top:92px}
.arzt-foto{margin:0}
.arzt-foto img{width:100%;height:auto;border-radius:20px;display:block;
  box-shadow:0 24px 50px -30px rgba(18,62,99,.5)}
.arzt-foto-platz{aspect-ratio:4/5;border-radius:20px;background:var(--blau-hell);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:4rem;color:var(--blau);font-weight:800}
@media(max-width:760px){
  .arzt-profil{grid-template-columns:1fr}
  .arzt-bild{position:static;max-width:280px}
}

/* Rundes Foto in der Teamkachel – ersetzt die Initialen, sobald in
   site/assets/bilder/ eine Datei team-<name>-quadrat.jpg liegt. Der
   Ausschnitt steht mittig; die Vorlage sollte quadratisch sein. */
.arzt-kachel{width:92px;height:92px;border-radius:50%;object-fit:cover;
  object-position:50% 50%;flex:none;box-shadow:0 8px 18px -10px rgba(18,62,99,.55)}

/* Abschlussband jeder Seite: sandfarben als Handlungsfarbe. Die dunkle
   Karte darin trägt den Aufruf; das warme Band setzt ihn ab. */
.abschluss{background:var(--sand)}
/* Mitgliedschaftsstreifen: dasselbe Papier wie der Fließtext, nur mit
   Haarlinie abgesetzt – reines Weiß war ein vierter Weißton. */
.mitglied{background:var(--papier);border-top:1px solid var(--linie)}

/* ---------------------------------------------------------------------------
   Fachfarbe der Seite

   Blauer und roter Lungenflügel im Logo, dieselbe Teilung auf der Website:
   Pneumologie blau, Allergologie rosé, allgemeine Kinderheilkunde sand.
   Gesetzt wird sie einmal am <html>-Element in build.py; hier greifen nur
   die Karten und Kacheln darauf zu.
   --------------------------------------------------------------------------- */
[data-fach="allergie"] .weiter a,
[data-fach="allergie"] .kachel,
[data-fach="allergie"] .link-liste a,
[data-fach="allergie"] .dl-liste a{background:var(--rose)}
[data-fach="allgemein"] .weiter a,
[data-fach="allgemein"] .kachel,
[data-fach="allgemein"] .link-liste a,
[data-fach="allgemein"] .dl-liste a{background:var(--sand)}
/* Auf einem farbigen Band bleiben die Karten weiß – sonst verschwinden sie. */
[data-fach] .grund .weiter a,[data-fach] .grund .kachel,
[data-fach] .grund .link-liste a,[data-fach] .grund .dl-liste a,
[data-fach] .abschluss .weiter a,[data-fach] .termin .weiter a{background:#fff}

/* ---------------------------------------------------------------------------
   Klappfächer im Handymenü

   Jeder Reiter mit Unterpunkten bekommt eines. Zugeklappt sieht das Menü
   aus wie vorher – acht Schlagworte; aufgeklappt zeigt es dieselben Ziele
   wie das Menü am Rechner.
   --------------------------------------------------------------------------- */
/* Ohne display:grid liefen die Unterpunkte als Fließtext ineinander –
   das äußere <nav> ist ein Raster, das Klappfach darin war es nicht. */
/* Ohne display:grid liefen die Unterpunkte als Fließtext ineinander –
   das äußere <nav> ist ein Raster, das Klappfach darin war es nicht. */
.menue nav .m-punkt{display:grid}
/* Die Trennlinie verschwindet, sobald das Fach offen ist: Sonst läge sie
   unter den ausgeklappten Zielen und sähe aus, als gehörte sie zum letzten
   Unterpunkt statt zum Reiter darüber. */
.menue nav > .m-punkt{border-bottom:1px solid var(--linie)}
.menue nav > .m-punkt[open]{
  border-bottom-color:transparent;background:var(--papier);
  border-radius:12px;margin-block:.15rem}
.menue nav > .m-punkt[open] > summary{color:var(--blau)}
.menue nav .m-punkt > summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  list-style:none;cursor:pointer;padding:.8rem .9rem;min-height:44px;
  font-size:1rem;font-weight:600;color:var(--tief);border-radius:10px;
}
.menue nav .m-punkt > summary::-webkit-details-marker{display:none}
.menue nav .m-punkt > summary::after{
  content:"";flex:none;width:9px;height:9px;margin-top:-4px;
  border-right:2.2px solid var(--blau);border-bottom:2.2px solid var(--blau);
  transform:rotate(45deg);transition:transform .18s ease;
}
.menue nav .m-punkt[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
.menue nav .m-punkt > summary:hover{background:var(--blau-hell);color:var(--blau)}
@media (prefers-reduced-motion:reduce){
  .menue nav .m-punkt > summary::after{transition:none}
}

/* Zweite Ebene: bei den Leistungen sind das die drei Fachgruppen.
   Früher standen sie als winzige Versalzeile über einer langen Liste –
   die Überschrift war kleiner als das, was sie überschrieb. Jetzt ist
   jede Gruppe selbst ein Fach in derselben Schriftgröße wie alles
   andere im Menü. Unterschieden wird nur über Strichstärke, Farbe und
   Einzug, nicht über die Größe. */
.menue nav .m-tief > summary{font-weight:500;padding-left:.9rem}
.menue nav .m-tief > summary::after{
  width:8px;height:8px;border-color:var(--grau)}
.menue nav .m-tief > summary:hover::after{border-color:var(--blau)}
.menue nav .m-tief{background:none;border-radius:0}

/* Führungslinie statt Einzug.
   Vorher war die Verschachtelung nur an einem größeren linken Abstand zu
   erkennen; auf einem Telefon von 390 Pixeln Breite sind zwei Stufen Einzug
   kaum zu unterscheiden. Eine dünne senkrechte Linie an jedem Fach zeigt,
   was wozu gehört, ohne Platz zu kosten und ohne die Schriftgröße zu
   verändern – die bleibt auf allen Ebenen gleich. */
.menue nav .m-punkt[open] > .unterpunkt,
.menue nav .m-punkt[open] > .m-tief{
  border-left:2px solid var(--linie);
  margin-left:1.15rem;border-radius:0 10px 10px 0;
}
.menue nav .m-punkt[open] > .m-tief[open]{border-left-color:var(--blau)}
.menue nav .unterpunkt{padding-left:.9rem;font-weight:500;color:var(--tief)}
.menue nav .m-tief .unterpunkt{font-weight:400;color:var(--grau)}
.menue nav .unterpunkt:hover,
.menue nav .unterpunkt:focus-visible{color:var(--blau)}

/* ============================================================
   Schmale Telefone: nichts darf seitlich hinausragen
   ------------------------------------------------------------
   83 Prozent der Aufrufe kommen vom Telefon, und ein iPhone SE ist
   320 Pixel breit. Dort ragten mehrere Kästen seitlich hinaus – nicht
   weil sie zu breit gesetzt wären, sondern weil ein einzelner Knopf
   darin nicht umbrechen durfte: „Für überweisende Praxen“ braucht in
   einer Zeile 282 Pixel, im Kasten sind aber nur 256 frei. Dazu kommt,
   dass ein Kind in einem Raster von sich aus nicht unter seine
   Inhaltsbreite geht („min-width: auto“) und den Kasten aufdrückt.

   Der Block steht bewusst am Ende des Stilblatts: Er hebt Regeln auf,
   die weiter oben mit höherer Genauigkeit gesetzt sind
   (etwa „.zuweiser .btn{white-space:nowrap}“), und das gelingt bei
   gleicher Genauigkeit nur über die Reihenfolge.
   ============================================================ */
@media(max-width:430px){
  /* Knöpfe dürfen umbrechen und mittig stehen, statt den Kasten zu
     sprengen. Der Innenabstand wird knapper – das schafft 16 Pixel. */
  .btn,.zuweiser .btn,.karriere-cta .btn,.neu-innen .btn,
  .cta-row .btn,.karriere-box .btn{
    white-space:normal;text-align:center;max-width:100%;
    padding-left:1.1rem;padding-right:1.1rem;overflow-wrap:anywhere}
  /* Rasterkinder dürfen schmaler werden als ihr Inhalt. */
  .zuweiser > *,.karriere-box > *,.karriere-cta > *,
  .subhero .wrap.subhero-figur > *,.neu-innen > *,.cta-row > *{min-width:0}
  /* Lange Fachwörter in Klappfragen: „Lungenfunktionsprüfung“ passt
     nicht in eine Zeile und schob die Frage über den Rand. Die Trennung
     nach Silben ist der schonendere Weg als ein harter Umbruch. */
  .faq summary{hyphens:auto;overflow-wrap:anywhere;gap:.7rem}
  .faq summary::after{flex:none}
}

/* ============================================================
   Kopfleiste auf dem Telefon: Name, Notfall, Menü
   ------------------------------------------------------------
   Vier Dinge nebeneinander – Schriftzug, „Termine“, „Notfall“, Menü –
   brauchten bei 390 Pixeln Bildschirmbreite 452 Pixel. Vorhanden waren
   374. Bisher wurde die Lücke geschlossen, indem der Ortsname im
   Schriftzug wegfiel; übrig blieb „PVZ“. Auf 83 von 100 Aufrufen stand
   damit nirgends im Bild, dass dies eine Praxis in Neumünster ist.

   Jetzt fällt stattdessen der Knopf „Termine“ weg. Er ist im Klappmenü
   die erste und größte Zeile, und auf jeder Seite steht ohnehin ein
   eigener Knopf zum Buchen. Der Notfallknopf bleibt: Den muss man im
   Ernstfall sehen, ohne ein Menü zu öffnen.
   ============================================================ */
@media(max-width:640px){
  .topbar .tel{display:none}
  /* „PVZ-Neumünster“ ist ein Name, kein Satz: Er darf nicht umbrechen.
     Ohne diese Zeile stand „PVZ-“ über „Neumünster“ und die Kopfleiste
     war doppelt so hoch wie nötig – auf dem Telefon der teuerste Platz
     der ganzen Seite. */
  .topbar .brand b{white-space:nowrap}
  .topbar .brand .wortmarke{min-width:0}
  /* Damit der volle Name in eine Zeile passt, rücken Bildmarke und
     Schriftzug eine Stufe zusammen. Gemessen: so bleibt die Leiste von
     320 bis 640 Pixeln überlauffrei, mit 44 statt 50 Pixeln Höhe. */
  .topbar .brand img{width:46px;height:33px}
  .topbar .brand b{font-size:1.16rem}
}

/* Der Block mit „Termine & Rezepte" und der Rufnummer oben im Klappmenü
   ist wieder heraus – gewünscht war ein Menü, das nur Seiten zeigt. Die
   Regeln bleiben stehen, falls er zurückkommen soll; ohne den Block im
   Quelltext greifen sie auf nichts. */
/* Die zwei häufigsten Wege ganz oben im Klappmenü. Sie stehen vor der
   Liste, nicht darin: Wer das Menü öffnet, will meistens genau das eine
   von beiden – und muss dafür nicht erst an sieben Reitern vorbei. */
.menue nav .m-aktion{display:grid;gap:.5rem;margin:0 0 .6rem}
.menue nav .m-aktion .btn{justify-content:center;width:100%;
  padding-top:.8rem;padding-bottom:.8rem;font-size:.98rem;min-height:48px}
/* „.menue nav a“ setzt eine Textfarbe und ist genauer als „.btn-p“ –
   der Knopf stand dadurch dunkelblau auf dunkelblau, also leer. */
.menue nav .m-aktion .btn-p{background:var(--tief);color:#fff}
/* Der Rahmen ist hier die ganze Gestalt des Knopfes – es gibt keine Fläche,
   an der man ihn sonst erkennt. In der Hausfarbe --linie stünde er mit 1,34
   zu 1 gegen Weiß; verlangt sind 3 zu 1 (WCAG 1.4.11 für Bedienelemente).
   --blau erreicht 4,4 zu 1. */
.menue nav .m-aktion .btn-s{border-color:var(--blau);color:var(--tief);
  background:#fff;font-family:var(--mono);letter-spacing:.01em}
.menue nav .m-aktion .btn-p:hover{background:var(--blau);color:#fff}
.menue nav .m-aktion .btn-s:hover{border-color:var(--blau);color:var(--blau)}
.menue nav .m-aktion + a,
.menue nav .m-aktion + details{border-top:1px solid var(--linie);
  padding-top:.5rem;margin-top:.1rem}

/* ============================================================
   Sprechzeiten als Karten: „geschlossen“ eindeutig machen
   ------------------------------------------------------------
   In der Tabelle sagt die Spalte, wofür ein Wert gilt. In der
   Kartenansicht auf dem Telefon gibt es keine Spalten mehr – dort
   standen Vormittag und Nachmittag nebeneinander, und ein geschlossener
   Nachmittag las sich als „8:00 – 11:30  geschlossen“. Man musste raten,
   ob offen oder zu ist. Der Zusatz „nachmittags“ beantwortet das in
   einem Wort. Er kann nur dort stehen, wo er stimmt: „.slot.leer“
   entsteht ausschließlich in der Nachmittagsspalte.
   ============================================================ */
@media(max-width:800px){
  table.zeiten tbody td .slot.leer::before{content:"nachmittags "}
}

/* Die Telefonzeit als eigene Karte, direkt hinter der Infektsprechstunde –
   einmal statt fünfmal. Sie trägt die Sandfarbe des Hauses, dieselbe wie
   die Zeitangabe darin und wie das Band „Neu bei uns?": So ist auf einen
   Blick zu sehen, dass hier etwas anderes steht als ein Wochentag.
   Oberhalb von 800 Pixeln gibt es die Spalte „Telefon" wieder – dann ist
   die Zeile überflüssig und verschwindet. */
table.zeiten tbody tr.telzeile{display:none}
@media(max-width:800px){
  table.zeiten tbody td.tel-spalte{display:none}
  table.zeiten tbody tr.telzeile{display:block;background:#FBF2DF}
  table.zeiten tbody tr.telzeile{--ring:#EBD9AE}
  table.zeiten tbody tr.telzeile th{color:#6B4E12;margin-bottom:.4rem}
  table.zeiten tbody tr.telzeile td{color:#6B4E12}
  table.zeiten tbody tr.telzeile .slot.ruf{background:#F3E2BB;color:#6B4E12}
}

/* ============================================================
   „hidden“ muss auch wirklich verbergen
   ------------------------------------------------------------
   Das Attribut hidden setzt display:none – aber nur über das
   Vorgabestilblatt des Browsers, und jede eigene Regel mit
   display schlägt das. Genau das passierte beim Knopf „App holen":
   Auf dem iPhone setzte das Skript den Android-Knopf auf hidden,
   „.btn{display:inline-flex}“ machte ihn aber wieder sichtbar.
   Es standen also weiter zwei Knöpfe da – das, was der eine Knopf
   gerade verhindern sollte.
   ============================================================ */
[hidden]{display:none !important}

/* Der Kasten „Heute geschlossen" ist ein Satz, keine Reihe von Zeitpillen.
   Als Flex-Zeile setzte er auch den Schlusspunkt als eigenes Element ab –
   es stand „116 117 ." mit einer Lücke davor. */
.heute-kurz.zu p{display:block}

/* Zwei Knöpfe im Band „Neu bei uns?"
   Dahinter liegen zwei verschiedene Seiten: Neugeborene zur U3 buchen
   direkt, ältere Kinder gehen über die Online-Rezeption. Der erste Knopf
   ist deshalb der gefüllte – er ist der häufigere Fall und der, bei dem
   niemand erst fragen muss. Am Telefon stehen beide untereinander und
   über die volle Breite. */
.neu-knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;flex:none}
.neu-knoepfe .btn{flex:none}
@media(max-width:760px){
  .neu-knoepfe{display:grid;grid-template-columns:1fr;width:100%}
  .neu-knoepfe .btn{justify-content:center;width:100%}
}

/* ============================================================
   Karte auf Klick
   ------------------------------------------------------------
   Vorher lag hier ein Satellitenbild, das nach Google Maps
   verlinkte – man konnte es nicht bewegen. Jetzt ist das Bild die
   Vorschau: Ein Knopf darunter tauscht es gegen die bewegliche
   Karte. Bis dahin liegt alles auf unserem eigenen Server, es geht
   nichts an Google, und die Website braucht kein
   Einwilligungsbanner.

   Der Knopf steht bewusst UNTER dem Bild und nicht darauf: Auf dem
   Bild läge er über der Praxis, und die Quellenangabe von Google
   muss sichtbar bleiben.
   ============================================================ */
.lageplan-block{display:flex;flex-direction:column;gap:.7rem;min-width:0}

.karte-zustimmung{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;
  background:var(--blau-hell);border:1px solid var(--linie);border-radius:14px;
  padding:.9rem 1.1rem}
.karte-zustimmung p{margin:0;flex:1 1 16rem;min-width:0;font-size:.9rem;
  color:var(--grau);line-height:1.5}
.karte-zustimmung .btn{flex:none;min-height:44px;background:#fff}

/* Vorschaubild und bewegliche Karte haben dasselbe Format, damit beim
   Tausch nichts springt: das Seitenverhältnis des Kartenausschnitts. */
.lageplan-block{--karte-format:1800/930}
.lageplan picture{display:block}
.lageplan img,
.karte-rahmen{aspect-ratio:var(--karte-format)}
.karte-rahmen{border:1px solid var(--linie);border-radius:16px;overflow:hidden;
  background:#e6e6e6}
.karte-rahmen:focus{outline:none}
.karte-rahmen:focus-visible{box-shadow:0 0 0 3px var(--blau)}
.karte-rahmen iframe{display:block;width:100%;height:100%;border:0}

/* Im eingebetteten Fenster rechnet das Telefon keine Route – der Weg nach
   draußen muss deshalb erhalten bleiben. */
.karte-fuss{margin:0;font-size:.92rem}
.karte-fuss a{color:var(--blau);font-weight:600}

.karte-ausweich{margin:1.2rem 0 0;font-size:.92rem;color:var(--grau)}
.karte-ausweich a{color:var(--blau)}
/* Auf der Kontaktseite steht dieser Satz im dunkelblauen Band. Grau auf
   Dunkelblau ergab 1,86 zu 1 – gefordert sind 4,5. Hier also die helle
   Fassung: 8,7 zu 1 für den Text, 11,1 für den Link. */
.kontakt .karte-ausweich{color:#D7E6F2}
.kontakt .karte-ausweich a{color:#fff}

@media(max-width:560px){
  /* Am Telefon ist ein so breiter Streifen zu flach, um sich darin zu
     orientieren: etwas höher schneiden – seitlich, nie unten. */
  .lageplan-block{--karte-format:4/3}
  .karte-zustimmung{flex-direction:column;align-items:stretch;gap:.9rem}
  /* Der Absatz trug in der Zeile ein "flex:1 1 16rem". Untereinander
     gestapelt wuchs er dadurch über den Text hinaus und riss eine Lücke
     von einem halben Bildschirm zwischen Hinweis und Knopf. */
  .karte-zustimmung p{flex:0 0 auto}
  .karte-zustimmung .btn{justify-content:center;width:100%}
}

/* ============================================================
   Abstände: eine Regel statt hundertdreißig Inline-Angaben
   ------------------------------------------------------------
   Vorher stand auf 134 Stellen ein style="margin-top:…" im Seitentext,
   mit sieben verschiedenen Werten für dieselbe Sache – der Abstand vor
   einem Folgeabsatz war mal .8, mal .9, mal 1, mal 1.2 rem, je nachdem,
   wer die Seite geschrieben hatte. Genau daran erkennt man, dass eine
   Website aus vielen Händen kommt. Jetzt gibt es je Fall eine Klasse und
   einen Wert; wer eine neue Seite baut, benutzt die Klasse und trifft
   damit automatisch das Maß aller anderen Seiten.
   ============================================================ */

/* Zwischenüberschrift mitten in einer Textspalte: Luft davor, außer
   ganz oben. */
.text > h2:not(:first-child){margin-top:2.5rem}
.merk h3:not(:first-child){margin-top:1.6rem}

/* Gruppenüberschrift (Weiter zu, Downloads, Verbände): Luft davor, außer
   als erstes Element im Kasten. */
h2.gruppe{margin:0 0 1.2rem}
h2.gruppe:not(:first-child){margin-top:2.8rem}
.gruppe-dunkel{color:var(--gelb);border-color:rgba(255,255,255,.2)}

/* Folgeabsatz – meist ein Link „Zum Profil →" unter einem Text. Die
   Genauigkeit ist absichtlich hoch, damit .merk p{margin:0} und
   .kachel p{margin:0} nicht gewinnen. */
.danach,.merk p.danach,.kachel p.danach,.text p.danach,
.arzt p.danach,.arzt-profil p.danach{margin-top:1rem}
.danach-gross{margin-top:2rem}

/* Merkkasten unter dem Fließtext statt daneben. */
.merk.unten{margin-top:2.4rem;border-radius:16px}
.merk.block-unten{margin-bottom:2.5rem}

.mitbringen{margin-top:2.8rem}
.text .dl-liste{margin-top:1.2rem}
.kleintitel{font-family:var(--body);font-weight:600;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blau);margin:0 0 .7rem}
.stelle-satz{color:var(--grau);margin:0}
.stiller-link{text-decoration:none;color:inherit}

/* ---------- Webformulare (Fragebögen) ---------- */
.fb{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr)}
.fb-abschnitt{min-width:0;background:#fff;border:1px solid var(--linie);border-radius:16px;padding:clamp(1.1rem,3vw,1.8rem);display:grid;gap:1rem}
.fb-kapitel{font-family:var(--body);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blau);background:var(--blau-hell);border-radius:8px;padding:.55rem .8rem;margin:0}
.fb-titel{font-size:1.15rem;margin:.6rem 0 0}
.fb-text{margin:0;color:var(--grau);font-size:.98rem}
.fb-reihe{display:grid;gap:.9rem}
@media(min-width:640px){.fb-n2{grid-template-columns:1fr 1fr}.fb-n3{grid-template-columns:1fr 1fr 1fr}}
.fb-feld{display:grid;gap:.3rem}
.fb-feld>span{font-size:.9rem;color:var(--grau);line-height:1.35}
.fb input[type=text],.fb input[type=date],.fb input[type=tel],.fb input[type=email],.fb textarea{
  font:inherit;font-size:16px;color:var(--tief);background:#F3F8FC;border:1px solid var(--rahmen);border-radius:10px;
  padding:.7rem .85rem;min-height:48px;width:100%;-webkit-appearance:none;appearance:none}
.fb textarea{min-height:5.5rem;resize:vertical;line-height:1.45}
.fb input:focus,.fb textarea:focus{border-color:var(--blau);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(31,107,168,.2)}
.fb-frage{border:0;margin:0;padding:0;min-width:0;width:100%;max-width:100%}
.fb-frage legend{padding:0;margin:0 0 .5rem;font-size:1rem;line-height:1.4;color:var(--tief)}
.fb-frage+.fb-frage{border-top:1px solid #E6EEF5;padding-top:.9rem}
.fb-optionen{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0}
.fb legend,.fb-feld>span,.fb-opt{overflow-wrap:anywhere;min-width:0}
.fb-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))}
.fb-raster>*{min-width:0}
.fb-opt{position:relative;display:flex;align-items:center;border:1.5px solid var(--linie);border-radius:999px;padding:.5rem .95rem .5rem 2.55rem;
  background:#fff;cursor:pointer;min-height:44px;font-size:.96rem;line-height:1.3;color:var(--tief);user-select:none}
.fb-raster .fb-opt{border-radius:12px}
.fb-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;border:0;background:transparent;-webkit-appearance:none;appearance:none}
.fb-opt span{position:relative;pointer-events:none}
.fb-opt span::before{content:"";position:absolute;left:-1.85rem;top:50%;transform:translateY(-50%);width:22px;height:22px;border:2px solid var(--rahmen);border-radius:50%;background:#fff;box-sizing:border-box}
.fb-check span::before{border-radius:6px}
.fb-opt span::after{content:"";position:absolute;left:calc(-1.85rem + 5px);top:50%;transform:translateY(-50%) scale(0);width:12px;height:12px;border-radius:50%;background:var(--blau);transition:transform .12s}
.fb-check span::after{border-radius:0;width:12px;height:7px;background:none;border:0 solid var(--blau);border-width:0 0 3px 3px;transform:translateY(-70%) rotate(-45deg) scale(0);left:calc(-1.85rem + 5px)}
.fb-opt input:checked+span::before{border-color:var(--blau)}
.fb-opt input:checked+span::after{transform:translateY(-50%) scale(1)}
.fb-check input:checked+span::after{transform:translateY(-70%) rotate(-45deg) scale(1)}
.fb-opt:hover{border-color:var(--blau)}
.fb-opt:has(input:checked){border-color:var(--blau);background:var(--blau-hell);font-weight:600}
.fb-opt:has(input:focus-visible){outline:3px solid var(--tief);outline-offset:2px;box-shadow:0 0 0 6px var(--gelb)}
.fb-kasten{background:#FFFBF0;border-left:4px solid var(--gelb);border-radius:0 12px 12px 0;padding:1rem 1.2rem;margin:0}
.fb-kasten.rot{background:#FFF4F3;border-left-color:var(--rot)}
.fb-kasten h3{font-family:var(--body);font-size:1rem;margin:0 0 .35rem}
.fb-kasten p{margin:0;color:var(--grau);font-size:.95rem}
.fb-ende{border-color:var(--blau);background:var(--blau-hell)}
.fb-ende .fb-kapitel{background:#fff}
.fb-aktionen{display:flex;flex-wrap:wrap;gap:.7rem}
.fb-aktionen .btn{font:inherit;font-weight:600;cursor:pointer;border:2px solid transparent}
.fb-aktionen .btn-s{border-color:var(--linie);background:#fff}
.fb-aktionen .btn:disabled{opacity:.55;cursor:wait}
.fb-status{margin:0;font-weight:600;min-height:1.4em}
.fb-status.fehler{color:var(--rot)}
.fb-fein{margin:0;font-size:.9rem;color:var(--grau)}
.fb-leeren{font:inherit;font-size:.9rem;background:none;border:0;padding:.7rem .2rem;min-height:44px;color:var(--blau);text-decoration:underline;cursor:pointer;display:block;margin-top:.2rem}
.fb-schritte{display:grid;gap:.9rem;margin:0;padding:0;list-style:none;counter-reset:s}
@media(min-width:720px){.fb-schritte{grid-template-columns:1fr 1fr 1fr}}
.fb-schritte li{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:1rem 1.1rem 1rem 3.2rem;position:relative;font-size:.96rem;color:var(--grau)}
.fb-schritte li b{display:block;color:var(--tief);margin-bottom:.15rem}
.fb-schritte li::before{counter-increment:s;content:counter(s);position:absolute;left:.9rem;top:.9rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--gelb);color:var(--tief);font-weight:700;display:grid;place-items:center;font-size:.9rem}
/* Downloadliste: Webformular und PDF nebeneinander */
.dl-liste li.dl-zwei{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:stretch}
.dl-liste .dl-pdf{display:grid;place-items:center;padding:0 1rem;font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--tief);background:#fff;border:1px solid var(--linie);border-radius:14px;text-decoration:none;min-width:64px}
.dl-liste .dl-pdf:hover{border-color:var(--blau);color:var(--blau)}
.kleintitel+.gruppe-satz{margin-top:.2rem}
h3.kleintitel{margin-top:2rem}
/* Bewegliche Google-Karte (JavaScript API) */
.karte-google{width:100%;height:100%;background:#e6e6e6}
.karte-info{font-family:var(--body);color:var(--tief);display:grid;gap:.25rem;padding:.2rem .1rem;max-width:16rem}
.karte-info b{font-size:.98rem}
.karte-info span{color:var(--grau);font-size:.88rem}
.karte-info a{color:var(--blau);font-weight:600;font-size:.92rem}

/* ============================================================
   Am Telefon: weniger, dafür lesbar (19. September)
   ------------------------------------------------------------
   Drei Beobachtungen aus der Praxis, in dieser Reihenfolge:

   1. Die Uhrzeiten sind die Information, wegen der die Seite am
      Telefon überhaupt geöffnet wird – sie waren kleiner gesetzt
      als der Fließtext daneben.
   2. Die Fußzeile war die längste Strecke der ganzen Seite: acht
      Adresszeilen à 46 Pixel plus drei Menügruppen, die es im
      Hauptmenü schon gibt.
   3. Was zweimal dasteht, steht am Telefon einmal zu viel da; die
      Blöcke dafür tragen "nur-breit" im Seitentext.
   ============================================================ */
@media(max-width:800px){
  /* Wochentag und Uhrzeit im Kartenlayout: beide eine Stufe größer */
  table.zeiten tbody th{font-size:1.08rem}
  table.zeiten .slot{font-size:1.04rem;padding:.5rem .75rem}
  table.zeiten .slot.leer{font-size:1rem}
  table.zeiten tbody td.tel-spalte{font-size:.98rem}
  .heute-kurz .slot{font-size:1.04rem;padding:.5rem .8rem}
}
@media(max-width:520px){
  /* Die frühere Verkleinerung auf sehr schmalen Geräten ist damit
     hinfällig – die Pillen brechen notfalls um, statt zu schrumpfen. */
  table.zeiten tbody th{font-size:1.05rem;padding:.5rem .6rem}
  table.zeiten .slot{font-size:1rem;padding:.45rem .7rem}
}
@media(max-width:719px){
  /* Der Knopf unter der Tabelle stand als enge Pille da, in der die
     Schrift am Rand klebte. Über die volle Breite hat er Luft. */
  .zeiten-spalte .danach{margin-top:1.2rem}
  .zeiten-spalte .danach .btn{display:flex;width:100%;justify-content:center;
    padding:1.05rem 1.4rem;line-height:1.35}

  /* Fußzeile: Die drei Menügruppen wiederholen das Hauptmenü. Der
     Adressblock bleibt, aber im Zeilenmaß eines Briefkopfs statt mit
     einer Fingerbreite je Zeile; angetippt werden ohnehin nur die
     beiden verlinkten Zeilen, und die behalten ihre Trefferfläche. */
  .fuss-falt{display:none}
  .fuss-oben{padding:2rem 0 1.2rem;gap:1rem}
  .fuss-adresse span{min-height:0;padding:.02rem 0;font-size:.88rem;line-height:1.45}
  .fuss-adresse span.luft{margin-top:.7rem}
  .fuss-adresse span a{min-height:44px;display:inline-flex;align-items:center}
  .fuss-unten{padding:1rem 0 1.8rem}
}

/* ============================================================
   Seitenkopf am Telefon: zwei Knöpfe nebeneinander
   ------------------------------------------------------------
   „Termin vereinbaren" und die Rufnummer gehören zusammen – das
   sind die beiden Wege zu einem Termin. Untereinander gestapelt
   und unterschiedlich breit sahen sie aus wie zwei verschiedene
   Dinge und kosteten zwei Zeilen Bildschirm. Nebeneinander, gleich
   breit und gleich hoch, liest sich das als ein Angebot.

   Nur im Seitenkopf: Im Kopf der Startseite steht ein anderes Paar
   („Termin online vereinbaren" und „App herunterladen"), das in
   zwei Spalten zu eng würde.
   ============================================================ */
@media(max-width:719px){
  .subhero .cta-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    align-items:stretch}
  .subhero .cta-row .btn{width:100%;justify-content:center;text-align:center;
    padding-left:.8rem;padding-right:.8rem;font-size:.97rem;line-height:1.25;
    white-space:normal;hyphens:auto;overflow-wrap:break-word}
  /* Das Kalendersymbol braucht bei zwei Spalten den Platz nicht. */
  .subhero .cta-row .btn svg{flex:none}
}
@media(max-width:380px){
  /* Auf sehr schmalen Geräten bleibt für das Symbol kein Raum mehr. */
  .subhero .cta-row .btn svg{display:none}
}

/* ============================================================
   Die vier Kontaktwege in fester Rangfolge
   ------------------------------------------------------------
   Dieselben Karten wie zuvor bei den Anliegen, aber mit einer
   Rangzeile und einem echten Knopf statt eines Textlinks. Die
   Rangfolge ist die Aussage der Seite: Die App steht oben, das
   Telefon unten – und das soll man sehen, ohne zu lesen.
   ============================================================ */
.anliegen-rang .anliegen-karte{padding-top:1.3rem;background:#fff;
  border:1px solid var(--linie)}
.anliegen-rang .anliegen-karte:nth-child(1){background:var(--blau-hell);border-color:transparent}
.anliegen-rang .anliegen-karte:nth-child(2),
.anliegen-rang .anliegen-karte:nth-child(3),
.anliegen-rang .anliegen-karte:nth-child(4){background:#fff}
.anliegen-rang .rang{font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blau);margin:0 0 .6rem;opacity:.75}
.anliegen-rang h3{min-height:0;margin-bottom:.5rem}
/* Der Knopf darf nicht die Linksregel der Karten erben, sonst bekommt er
   unten einen Strich und verliert seine Breite. */
.anliegen-rang .btn{margin-top:auto;align-self:stretch;justify-content:center}
/* Die Karten faerben alle Links blau ein. Der gefuellte Knopf braucht dagegen
   weisse Schrift, sonst steht Blau auf Blau. */
.anliegen-rang .btn-p,.anliegen-rang .btn-p:hover{color:#fff}
.anliegen-rang .btn-s,.anliegen-rang .btn-s:hover{color:var(--blau)}
/* Die erste Karte ist der Weg, zu dem wir hinführen – sie bekommt einen
   Rahmen, damit das Auge dort zuerst landet. */
.anliegen-rang .anliegen-karte:nth-child(1){box-shadow:inset 0 0 0 2px var(--blau)}

/* ============================================================
   Der App-Knopf in der dunkelblauen Schnellleiste
   ------------------------------------------------------------
   Die Leiste steht auf Hausblau – ein gefüllter blauer Knopf
   wäre dort unsichtbar. Er dreht sich deshalb um: weißer Grund,
   blaue Schrift. Der Abstand oben gleicht die Zeile aus, die
   die beiden Nachbarkarten als große Nummer tragen.
   ============================================================ */
.qcard-app .btn{background:#fff;border-color:#fff;color:var(--blau);
  margin:.35rem 0 .5rem;justify-content:center;width:100%}
.qcard-app .btn:hover{background:#EAF2F8;border-color:#EAF2F8;color:var(--blau)}
.qcard-app .btn svg{color:var(--blau)}
@media(min-width:721px){.qcard-app .btn{width:auto}}

/* Zwei Knöpfe unter der Wochentabelle der Startseite: nebeneinander,
   auf dem Telefon untereinander und beide über die volle Breite. */
.danach-zwei{display:flex;flex-wrap:wrap;gap:.7rem}
@media(max-width:719px){.danach-zwei{display:grid;grid-template-columns:1fr}
  .danach-zwei .btn{width:100%;justify-content:center}}

/* Der Satz unter den Terminkacheln erklärt, was nach dem Klick passiert.
   Er gehört zu allen vier Kacheln, steht also mittig und schmal. */
.termin > .wrap > .rez-nach{max-width:44rem;margin:1.4rem auto 0;text-align:center}

/* Die Kontaktwege sind zu dritt: App, Online-Rezeption, Telefon. Die
   E-Mail ist kein beworbener Weg mehr – alles, was über die Website
   hereinkommt, soll in der Praxissoftware landen. */
.anliegen-drei{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.anliegen-drei{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.anliegen-drei{grid-template-columns:1fr}}

/* Der Auffangstreifen unter den Terminkacheln: für alle, die in den vier
   Kacheln nichts Passendes gefunden haben. Er sieht bewusst anders aus als
   die Kacheln – er ist kein fünfter Termin, sondern der Ausweg. */
.auffang{display:grid;grid-template-columns:1fr auto;gap:1.4rem 2rem;align-items:center;
  margin-top:1.8rem;padding:clamp(1.4rem,3vw,2rem);border-radius:20px;
  background:#fff;border:1px solid var(--linie)}
.auffang h3{margin:0 0 .4rem;font-size:1.15rem}
.auffang p{margin:0;color:var(--grau);font-size:.96rem;max-width:56ch}
.auffang-knoepfe{display:flex;gap:.7rem;flex-wrap:wrap}
@media(max-width:860px){
  .auffang{grid-template-columns:1fr}
  .auffang-knoepfe{display:grid;grid-template-columns:1fr}
  .auffang-knoepfe .btn{width:100%;justify-content:center}
}

/* Die Seite hinter dem Fenster der Online-Rezeption. Das Widget schwebt
   über der Seite statt im Seitenfluss zu stehen – hier stand vorher ein
   leerer Kasten von 420 Punkten Höhe. Jetzt steht dort, was zu tun ist,
   falls das Fenster einmal nicht aufgeht. */
.rez-warte{max-width:44rem;margin:0 auto;text-align:center}
.rez-warte p{margin:0 0 .8rem}
.rez-warte .fein{font-size:.94rem;color:var(--grau);margin:0}

/* ============================================================
   Die Suche in der Kopfleiste
   ------------------------------------------------------------
   Sie steht links neben „Termine" und „Notfall" und ist bewusst
   schmal: Sie soll ein Angebot sein, kein Blickfang. Beim
   Hineinklicken wächst sie, damit man sieht, was man tippt.
   ============================================================ */
.suche{position:relative;flex:none;margin-right:.2rem}
.such-lupe{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  width:1.05rem;height:1.05rem;color:var(--grau);pointer-events:none}
.suche input{width:9.5rem;padding:.55rem .7rem .55rem 2.2rem;font:inherit;
  font-size:.92rem;color:var(--tief);background:#fff;
  border:1px solid #7E8E9C;border-radius:999px;
  transition:width .18s ease,border-color .18s ease}
.suche input::placeholder{color:var(--grau)}
.suche input:focus{outline:none;width:14rem;border-color:var(--blau);
  box-shadow:0 0 0 3px rgba(31,107,168,.18)}
/* Das eigene Kreuz von Safari und Chrome passt nicht zur runden Form. */
.suche input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.such-treffer{position:absolute;top:calc(100% + .5rem);right:0;width:24rem;
  max-height:min(70vh,28rem);overflow-y:auto;background:#fff;
  border:1px solid var(--linie);border-radius:16px;
  box-shadow:0 24px 50px -24px rgba(18,62,99,.45);padding:.4rem;z-index:60}
.such-eintrag{display:block;padding:.6rem .75rem;border-radius:11px;
  text-decoration:none;color:inherit}
.such-eintrag b{display:block;font-size:.95rem;color:var(--tief);
  margin-bottom:.15rem}
.such-eintrag span{display:block;font-size:.85rem;color:var(--grau);
  line-height:1.45}
.such-eintrag:hover,.such-eintrag.markiert,.such-eintrag:focus-visible{
  background:var(--blau-hell);outline:none}
.such-leer{margin:0;padding:.7rem .75rem;font-size:.9rem;color:var(--grau)}

/* Bei knapperem Platz schrumpft das Feld mit, damit die Leiste nicht
   umbricht. Unter 720 Pixeln verschwindet es ganz (Klasse "nur-breit"). */
@media(max-width:1220px){.suche input{width:7.5rem}
  .suche input:focus{width:11rem}}
@media(max-width:980px){.suche input{width:2.6rem;padding-right:.4rem}
  .suche input:focus{width:11rem}}