/* Urologische Praxis Eppendorf: Stylesheet
   Farben, Schriften und Aufbau wie die WordPress-Seite der Grafikerin (Stand 15.10.2026).
   Grundsatz: wenige Elemente, eine Abstandsskala, leichte Schriftschnitte, viel Luft. */

:root {
  --blau: #1E4051;
  --stahl: #618094;
  --salbei: #D8DDD8;
  --hell: #EBEEEB;            /* Fläche hinter der Terminanfrage */
  --rot: #BF6464;
  --rot-flaeche: #B45A5A;     /* gefüllte Knöpfe mit weißer Schrift: minimal dunkler, Kontrast 4,6:1 */
  --rot-text: #A64E4E;        /* rote Schrift auf Weiß oder Salbei, Kontrast über 4,5:1 */
  --stahl-text: #4F6B7E;      /* Stahlblau als Schriftfarbe (Links, Hinweise) */
  --weiss: #FFFFFF;
  --text: #2B3A42;            /* Fließtext auf hell */
  --text-hell: #FFFFFF;       /* Fließtext auf Blau */
  --linie-hell: rgba(216, 221, 216, .35);
  --linie-dunkel: rgba(30, 64, 81, .16);

  --serif: 'Waluxe', Georgia, serif;
  --sans: 'Source Sans 3', 'Source Sans Pro', Helvetica, Arial, sans-serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 120px;
  --abschnitt: var(--s6);
  --spalte: 1180px;
  --lesespalte: 720px;
  --rand: 32px;
  --kopf: 112px;

  /* Schriftstil Menü und Zwischentitel (Varianten in entwuerfe/schriften.html) */
  --menue-schrift: var(--sans); --menue-groesse: 15px; --menue-gewicht: 500; --menue-laufweite: .12em; --menue-versal: uppercase; --menue-farbe: var(--blau);
  --zwischen-schrift: var(--serif); --zwischen-groesse: 22px; --zwischen-gewicht: 400; --zwischen-laufweite: .04em; --zwischen-versal: uppercase;
  --dt-gewicht: 600;
  --name-schrift: var(--sans); --name-groesse: 20px; --name-gewicht: 500; --name-laufweite: .01em; --name-versal: none; --name-farbe: var(--weiss);
  --leiste-schrift: var(--sans); --leiste-groesse: 12px; --leiste-gewicht: 500; --leiste-laufweite: .12em; --leiste-versal: uppercase;
}

*, *::before, *::after { box-sizing: border-box; }
body.gesperrt { position: fixed; left: 0; right: 0; overflow: hidden; }   /* Scroll-Sperre bei Schublade und Doctolib-Fenster, Position bleibt erhalten */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 46px); }   /* Sprungziele landen unter der klebenden Kopfzeile samt Leiste */
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: .05em;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--stahl-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { margin: 0 0 var(--s2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s2); padding-left: 1.2em; }
li { margin-bottom: 6px; }
strong { font-weight: 600; }
em, .kursiv { font-style: italic; }
address { font-style: normal; }
dl { margin: 0; }

/* Typografie */
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--blau); text-wrap: balance; }
h1 { font-family: var(--serif); font-size: 50px; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; }
h2 { font-family: var(--serif); font-size: 30px; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; }
h3 { font-family: var(--zwischen-schrift); font-size: var(--zwischen-groesse); line-height: 1.3; font-weight: var(--zwischen-gewicht); letter-spacing: var(--zwischen-laufweite); text-transform: var(--zwischen-versal); }
h4 { font-family: var(--sans); font-size: 17px; line-height: 1.4; font-weight: 600; }
.gross { font-size: 20px; line-height: 1.5; }
.linie::after { content: ""; display: block; width: 100px; height: 1px; background: currentColor; margin-top: var(--s2); }
.mitte { text-align: center; }
.mitte .linie::after { margin-left: auto; margin-right: auto; }
h2 + p, h2 + .gross, h2 + .lese { margin-top: var(--s4); }
h3 + p, h3 + ul, h3 + dl, h3 + .kontaktzeilen { margin-top: var(--s2); }
.block { margin-top: var(--s5); }
.wie-h3 { font-family: var(--zwischen-schrift); font-size: var(--zwischen-groesse); line-height: 1.3; font-weight: var(--zwischen-gewicht); letter-spacing: var(--zwischen-laufweite); text-transform: var(--zwischen-versal); }   /* h2 in h3-Optik (Impressum) */
.wie-h3 + p { margin-top: var(--s2); }
.frage { font-family: var(--sans); font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; }   /* Fragen im FAQ */
.nach-titel { margin-top: var(--s3); }
/* Textblöcke auf den Unterseiten: Abstand zwischen Blöcken, zwischen Titel und erstem Block, vor einem Zwischentitel */
.block-klein + .block-klein, h2 + .block-klein, .lese p + h3, .lese ul + h3 { margin-top: var(--s4); }
.lese .block-klein + h2 { margin-top: var(--s5); }
.infos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); margin-top: var(--s4); }
.infos .block-klein { margin-top: 0; }
:focus-visible { outline: 2px solid var(--rot-text); outline-offset: 3px; }
.auf-blau :focus-visible, .auf-stahl :focus-visible, .nav :focus-visible, .band-blau :focus-visible, .handy-leiste :focus-visible { outline-color: var(--salbei); }

/* Flächen */
.auf-blau { background: var(--blau); color: var(--text-hell); }
.auf-stahl { background: var(--stahl); color: var(--text-hell); }
.auf-blau h1, .auf-blau h2, .auf-blau h3, .auf-blau h4,
.auf-stahl h1, .auf-stahl h2, .auf-stahl h3, .auf-stahl h4 { color: var(--salbei); }
.auf-blau a, .auf-stahl a { color: var(--salbei); }
.auf-salbei { background: var(--salbei); }
.auf-hell { background: var(--hell); }
.auf-weiss { background: var(--weiss); }

/* Layout */
.spalte { max-width: var(--spalte); margin: 0 auto; padding: 0 var(--rand); }
.lese { max-width: var(--lesespalte); }
.abschnitt { padding: var(--abschnitt) 0; }
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; }
.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.raster-bild { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s5); align-items: stretch; }
.raster-bild img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.breitbild { width: 100%; margin-top: var(--s4); }
.bilderreihe { display: flex; gap: var(--s2); margin-top: var(--s5); }
.bilderreihe img { height: 400px; width: auto; min-width: 0; object-fit: cover; flex: 0 1 auto; }

/* Knöpfe: schmaler Rahmen, kleine Versalien, wie im Original */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px;
  border: 1px solid var(--rot); border-radius: 0;
  font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: .02em;
  color: var(--rot-text); background: transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.knopf:hover { background: var(--rot-flaeche); border-color: var(--rot-flaeche); color: var(--weiss); text-decoration: none; }
.auf-stahl .knopf, .auf-blau .knopf { background: var(--salbei); border-color: var(--salbei); color: var(--blau); }
.auf-stahl .knopf:hover, .auf-blau .knopf:hover { background: var(--rot-flaeche); border-color: var(--rot-flaeche); color: var(--weiss); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* Logo-Intro beim ersten Aufruf (Anordnung B vom 17.10.): Logo und Name blenden gemeinsam ein, dann alles weg */
.intro { position: fixed; inset: 0; z-index: 200; background: var(--blau); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 1; transition: opacity .7s ease; cursor: pointer; }
.intro.weg { opacity: 0; pointer-events: none; }
.intro.aus { display: none; }
.intro-innen { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s ease; }
.intro-innen.sichtbar { opacity: 1; transform: none; }
.intro img { width: min(60vw, 320px); height: auto; }
.intro-strich { width: 80px; height: 1px; background: rgba(216, 221, 216, .5); }
.intro-text { color: var(--salbei); font-family: var(--serif); font-size: clamp(20px, 2.6vw, 28px); letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.intro-text span { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .24em; color: rgba(216, 221, 216, .75); margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* Doctolib-Knopf (K2 in Rot): rund, gefüllt, weiße Wortmarke rechts */
.knopf-doctolib { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 20px 0 22px; border-radius: 999px; background: var(--rot-flaeche); color: var(--weiss); font-size: 15px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; margin-left: var(--s3); }
.knopf-doctolib:hover { background: #A85454; text-decoration: none; }
.knopf-doctolib img { height: 13px; width: auto; border-left: 1px solid rgba(255,255,255,.45); padding-left: 12px; }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--weiss); border-bottom: 1px solid var(--linie-dunkel); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: var(--kopf); }
.logo { flex: none; }
.logo img { width: 128px; height: auto; }
.nav { display: flex; align-items: center; margin-left: auto; }   /* Doctolib-Knopf steht rechts daneben, außerhalb der Schublade */
.nav > ul { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
.nav li { margin: 0; }
.nav a.nav-link { display: inline-block; font-family: var(--menue-schrift); font-size: var(--menue-groesse); font-weight: var(--menue-gewicht); letter-spacing: var(--menue-laufweite); text-transform: var(--menue-versal); color: var(--menue-farbe); padding: 10px 0; }
.nav a.nav-link:hover, .nav a.nav-link.aktiv { text-decoration: none; color: var(--rot-text); }
.hat-unter { position: relative; }   /* Untermenü öffnet direkt unter dem Wort */
.unter-auf { border: 0; background: none; color: var(--menue-farbe); font-size: 12px; line-height: 1; padding: 12px 6px; margin-left: 2px; cursor: pointer; vertical-align: middle; }   /* Pfeil als Knopf: öffnet das Untermenü auch per Tipp und Tastatur */
.hat-unter.offen .unter-auf { color: var(--rot-text); }
.untermenue {
  position: absolute; top: calc(100% + 10px); left: -20px; min-width: 280px; z-index: 20;
  background: var(--weiss); border: 1px solid var(--linie-dunkel);
  padding: 8px 0; box-shadow: 0 14px 32px rgba(30,64,81,.10);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: .15s;
}
.untermenue::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }   /* unsichtbare Brücke über den kleinen Spalt zum Wort */
.hat-unter:hover .untermenue, .hat-unter:focus-within .untermenue, .hat-unter.offen .untermenue { opacity: 1; visibility: visible; transform: none; }
.untermenue a { display: block; padding: 10px 20px; font-size: 16px; color: var(--blau); }
.untermenue a:hover { background: var(--salbei); text-decoration: none; }
.menue-zu, .nav-schleier, .nav-fuss { display: none; }
.menue-knopf { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; margin-right: -8px; }
.menue-knopf span { display: block; width: 28px; height: 3px; background: var(--blau); margin: 6px auto; transition: .2s; }
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Kopfleiste: Adresse links, Öffnungsstatus rechts (aufklappbar) */
.kopfleiste { border-top: 1px solid var(--linie-dunkel); font-family: var(--leiste-schrift); font-size: var(--leiste-groesse); font-weight: var(--leiste-gewicht); letter-spacing: var(--leiste-laufweite); text-transform: var(--leiste-versal); color: var(--blau); }
.kopfleiste .spalte { display: flex; justify-content: space-between; align-items: center; min-height: 44px; gap: var(--s3); }
.kopfleiste .adresse { color: var(--blau); }
.kopfleiste .adresse:hover { color: var(--rot); text-decoration: none; }
.status { position: relative; }
.status-knopf { border: 0; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--blau); cursor: pointer; padding: 10px 0; }
.status.zu .status-knopf { color: var(--rot-text); }
.status-knopf .pfeil { font-size: 11px; margin-left: 4px; }
.status-liste { display: none; font-family: var(--sans); font-weight: 400; letter-spacing: .02em; text-transform: none; font-size: 14px; position: absolute; right: 0; top: 100%; z-index: 5; min-width: 340px; background: var(--weiss); border: 1px solid rgba(30, 64, 81, .28); border-radius: 6px; box-shadow: 0 12px 32px rgba(30,64,81,.14); padding: var(--s2) var(--s3); }
.status-liste.offen { display: block; }
.status-liste .zeile { display: grid; grid-template-columns: 84px 1fr 1fr; gap: 0 var(--s2); padding: 6px 0; border-top: 1px solid var(--linie-dunkel); line-height: 1.4; }
.status-liste .zeile span { font-variant-numeric: tabular-nums; }
.status-liste .zeile span:nth-child(2), .status-liste .zeile span:nth-child(3) { text-align: center; }   /* Titel und Zeiten mittig in der Spalte */
.status-liste .zeile.heute span { font-weight: 600; }   /* heutiger Tag samt Zeiten fett */
.status-liste .kopf-zeile { border-top: 0; padding-top: 0; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--stahl-text); }
.status-liste .kopf-zeile span:first-child { font-weight: 400; }
.status-notfall { margin: var(--s2) 0 0; font-size: 13px; font-style: italic; color: var(--stahl-text); }

/* Schleier hinter der aufgeklappten Wochenliste: aus (Felix, 17.10.), Varianten in entwuerfe/wochenliste.html */
.status-schleier { display: none; }

/* Hero der Startseite: Eingangsfoto mit blauem Schleier */
.hero { position: relative; background: var(--blau) url("bilder/eingang-quer.jpg") center 30% / cover no-repeat; background-image: image-set(url("bilder/eingang-quer.webp") type("image/webp"), url("bilder/eingang-quer.jpg") type("image/jpeg")); min-height: 640px; display: flex; align-items: flex-end; padding: 96px 0 72px; color: var(--text-hell); }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 64, 81, .96) 0%, rgba(30, 64, 81, .55) 60%, rgba(30, 64, 81, .25) 100%); mix-blend-mode: multiply; }
.hero .spalte { position: relative; width: 100%; }
.hero h1 { color: var(--salbei); max-width: 11em; }
.hero .gross { margin-top: var(--s3); max-width: 28em; }
.hero-ort { margin-top: var(--s3); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--salbei); line-height: 1.8; }   /* Ortszeile unter der Überschrift (Felix' Wahl 18.10., Variante 7) */
.hero-ort .teil { white-space: nowrap; }
.hero-ort .trenn { margin: 0 6px; opacity: .6; }

/* Blaues Band unter dem Hero */
.band-blau { background: var(--blau); color: var(--text-hell); padding: var(--s4) 0; }
.band-blau a { color: var(--salbei); }
/* Titel im Band (Felix' Wahl 18.10., Variante 6): kleine Sans-Versalien in Salbei mit Linie, Zeiten leicht und etwas größer, Tage weiß halbfett. Als h2 ausgezeichnet, damit die Überschriftenfolge stimmt */
.band-blau h2 { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--salbei); padding-bottom: 12px; border-bottom: 1px solid rgba(216,221,216,.35); margin-bottom: 16px; }
.band-blau h2 + dl, .band-blau h2 + .kontaktzeilen { margin-top: 0; }
.band-blau .zeiten, .band-blau .kontaktzeilen { font-size: 18px; font-weight: 300; }
.band-blau .zeiten { row-gap: 6px; }
.band-blau .kontaktzeilen { gap: 6px; }
.band-blau .zeiten dt, .band-blau .kontaktzeilen b { font-weight: 600; color: var(--weiss); }
.band-blau .kontaktzeilen a { color: var(--weiss); }   /* Telefon und E-Mail in Weiß wie die Uhrzeiten, sonst wirken sie kleiner (Felix, 18.10.) */
.band-blau .kontaktzeilen a:hover { color: var(--salbei); text-decoration: none; }
.zeiten { display: grid; grid-template-columns: auto 1fr; row-gap: 4px; column-gap: var(--s3); }
.zeiten dt { font-weight: var(--dt-gewicht); }
.zeiten dd { margin: 0; }
.nobr { white-space: nowrap; }
.kontaktzeilen { display: grid; gap: 4px; }
.kontaktzeilen b { display: inline-block; width: 1.4em; font-weight: 600; }
.notfall { margin-top: var(--s2); font-size: 15px; font-style: italic; color: var(--salbei); }


/* Seitenkopf der Unterseiten */
.seitenkopf { background: var(--stahl); color: var(--text-hell); padding: 88px 0 72px; }
.seitenkopf h1 { color: var(--salbei); }
.seitenkopf .gross { margin-top: var(--s3); max-width: 34em; }
.seitenkopf + .auf-stahl { padding-top: var(--s4); }   /* gleiche Fläche, kein Bruch */
/* Kompakter Kopf (Praxis-Seite, Felix' Wahl 18.10., Variante 3): enger, der folgende Abschnitt schließt direkt an */
.seitenkopf.kompakt { padding: 56px 0 0; }
.seitenkopf.kompakt .gross { margin-top: var(--s2); font-size: 18px; }
.zwischen { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--linie-hell); }   /* kleine Versalienzeile mit Linie, wie die Titel im Band */
.auf-stahl .zwischen, .auf-blau .zwischen { color: var(--salbei); }
.zwischen + .aerzte { margin-top: var(--s4); }

/* Namen unter dem Ärztefoto (Startseite) */
.namen { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.namen li { margin: 0; }
.namen strong { display: block; }
.namen em { display: block; color: var(--blau); }

/* Ärzte (Praxis-Seite) */
.aerzte { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-top: var(--s5); }
.aerztin img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; margin-bottom: var(--s3); }   /* Porträts im Zuschnitt der Grafikerin (2:3, viel Luft über dem Kopf) */
.aerztin h3 { font-family: var(--name-schrift); font-size: var(--name-groesse); font-weight: var(--name-gewicht); letter-spacing: var(--name-laufweite); text-transform: var(--name-versal); color: var(--name-farbe); line-height: 1.3; }
.aerztin .rolle { font-style: italic; color: rgba(255,255,255,.88); margin: 4px 0 var(--s2); }
.aerztin p { font-size: 15px; }

/* Leistungen (Startseite): Pfeilliste mit Linien, Titel und Erklärzeile */
.leistungen { list-style: none; margin: var(--s4) 0 0; padding: 0; max-width: 640px; }
.leistungen li { margin: 0; border-bottom: 1px solid var(--linie-hell); }
.leistungen li:first-child { border-top: 1px solid var(--linie-hell); }
.leistungen a { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--s2); align-items: start; padding: 18px 0; color: var(--text-hell); }
.leistungen a::before { content: ""; width: 20px; height: 20px; margin-top: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8DDD8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.leistungen strong { display: block; font-size: 18px; font-weight: 500; color: var(--salbei); }
.leistungen span { display: block; grid-column: 2; font-size: 16px; margin-top: 2px; color: rgba(255,255,255,.82); }
.leistungen a:hover { text-decoration: none; }
.leistungen a:hover strong { color: var(--weiss); }

/* Vasektomie (Startseite) */
.vasektomie .raster-bild img { min-height: 320px; }

/* Terminanfrage */
.termin-raster { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s5); margin-top: var(--s4); align-items: start; }
.termin-raster > * { min-width: 0; }
.termin-text img { margin-top: var(--s4); }
.formular { background: var(--salbei); color: var(--text); padding: var(--s4); }
.formular a { color: var(--blau); text-decoration: underline; text-underline-offset: 3px; }
.formular fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); }
.formular legend, .zustimmung-titel { font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--blau); margin-bottom: 10px; }
.formular label { display: block; font-size: 14px; letter-spacing: .04em; margin-bottom: 6px; color: var(--blau); }
.feld { margin-bottom: var(--s3); }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.formular input[type="text"], .formular input[type="tel"], .formular input[type="email"], .formular input[type="date"],
.formular select, .formular textarea {
  width: 100%; font: inherit; color: var(--text);
  border: 1px solid transparent; border-radius: 0; background: var(--weiss);
  padding: 10px 14px; min-height: 46px;
}
.formular textarea { min-height: 120px; resize: vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--stahl); outline-offset: 1px; }
.wahl { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.wahl label, .zustimmung label { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; color: var(--text); font-size: 16px; letter-spacing: 0; }
.wahl input, .zustimmung input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--blau); flex: none; }
.zustimmung { font-size: 15px; margin-bottom: var(--s3); }
.zustimmung .hinweis { margin-bottom: var(--s2); }
.pflicht { color: var(--rot-text); }
.falle { position: absolute; left: -9999px; }
.meldung { margin-top: var(--s2); font-size: 15px; min-height: 1.5em; }   /* bleibt im Baum, damit Vorlesesoftware die Live-Region kennt */
.meldung.fehler { color: var(--rot-text); font-weight: 500; }
.meldung.erfolg { color: #3F6B3F; }
.fehlerfeld { outline: 2px solid var(--rot-text) !important; }

/* Doctolib, Weg 2: Kalender im Abschnitt hinter einem Vorhang */
.termin-einleitung { margin-top: var(--s3); max-width: 32em; }
.termin-einleitung a { color: var(--blau); font-weight: 500; }
.vorhang { position: relative; background: var(--weiss); min-height: 520px; margin-top: var(--s4); overflow: hidden; }
.vorhang.geladen { min-height: 0; }
.vorhang .attrappe { position: absolute; inset: 0; padding: 32px; filter: blur(3px); opacity: .35; }
.attrappe .zeile-a { height: 14px; background: var(--salbei); margin: 14px 0; width: 60%; }
.attrappe .zeile-b { height: 14px; background: var(--salbei); margin: 14px 0; width: 40%; }
.attrappe .raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 24px; }
.attrappe .raster span { height: 36px; background: var(--hell); }
.vorhang .mitte { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 520px; text-align: center; padding: 32px; gap: 14px; }
.vorhang .mitte p { max-width: 30em; font-size: 15px; color: var(--stahl-text); }
.vorhang .knopf-doctolib { margin: 10px 0 0; }
.dl-eingebettet { min-height: 560px; }
.dl-eingebettet .dl-widget { height: 560px; }
.formular-klappe { margin-top: var(--s4); border-top: 1px solid var(--linie-dunkel); padding-top: var(--s3); }
.formular-klappe summary { cursor: pointer; color: var(--blau); font-weight: 500; }
.formular-klappe[open] summary { margin-bottom: var(--s3); }
.formular-klappe .termin-raster { margin-top: 0; }

/* Doctolib, Weg 1: Fenster über der Seite, als natives Dialogfeld (Fokus, Escape und Sperre der Seite macht der Browser) */
.fenster { position: fixed; inset: 0; z-index: 150; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; background: transparent; display: none; align-items: center; justify-content: center; padding: 24px; }
.fenster[open] { display: flex; }
.fenster::backdrop { background: rgba(30,64,81,.6); }
.fenster-inhalt { background: var(--weiss); width: min(100%, 760px); height: min(92vh, 680px); position: relative; overflow: hidden; }
.fenster-inhalt .dl-ziel, .fenster-inhalt .dl-widget, .dl-iframe { height: 100%; }
.dl-iframe { width: 100%; border: 0; display: block; }
.dl-zu { position: absolute; top: 8px; right: 8px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 24px; line-height: 40px; cursor: pointer; color: #333; }
@media (max-width: 768px) { .fenster { padding: 0; } .fenster-inhalt { width: 100%; height: 100%; } }

/* Nachbau des Doctolib-Kalenders (nur bis die echte Adresse da ist; Optik an Doctolib angelehnt) */
.dl-widget { font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #26272b; display: flex; flex-direction: column; letter-spacing: 0; text-transform: none; text-align: left; }
.dl-hinweis { background: #fff8e6; color: #7a5a00; font-size: 12px; padding: 8px 48px 8px 12px; text-align: center; }
.dl-kopf { background: #107ACA; color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
.dl-kopf .avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.dl-kopf .avatar img { width: 30px; }
.dl-kopf b { display: block; font-size: 15px; font-weight: 600; }
.dl-kopf span { font-size: 13px; opacity: .9; }
.dl-body { padding: 20px; overflow-y: auto; flex: 1; }
.dl-body h4 { font-size: 16px; font-weight: 600; margin: 0 0 12px; color: #26272b; }
.dl-leise { font-size: 14px; color: #6b6f78; margin: 0 0 8px; }
.dl-liste { border: 1px solid #e6e8ec; border-radius: 8px; overflow: hidden; }
.dl-liste button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 14px 16px; background: #fff; border: 0; border-top: 1px solid #e6e8ec; font: inherit; font-size: 15px; color: #26272b; cursor: pointer; text-align: left; }
.dl-liste button:first-child { border-top: 0; }
.dl-liste button:hover { background: #f3f7fb; }
.dl-liste button::after { content: '›'; color: #107ACA; font-size: 22px; line-height: 1; }
.dl-zurueck { background: none; border: 0; color: #107ACA; font: inherit; font-size: 14px; cursor: pointer; padding: 0; margin-bottom: 12px; }
.dl-woche { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.dl-tag { text-align: center; }
.dl-tag .t { font-size: 13px; color: #6b6f78; }
.dl-tag .d { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.dl-slot { display: block; width: 100%; margin: 6px 0; padding: 8px 0; border: 1px solid #107ACA; border-radius: 6px; background: #eaf3fb; color: #107ACA; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.dl-slot:hover { background: #107ACA; color: #fff; }
.dl-leer { display: block; margin: 6px 0; padding: 8px 0; color: #c0c4cc; }
.dl-fuss { border-top: 1px solid #e6e8ec; padding: 12px 20px; font-size: 12px; color: #6b6f78; display: flex; justify-content: space-between; align-items: center; }
.dl-fuss img { height: 14px; filter: invert(.4); }
.dl-fertig { text-align: center; padding: 40px 20px; }
.dl-fertig .haken { width: 56px; height: 56px; border-radius: 50%; background: #e3f5ea; color: #1a8f4b; display: grid; place-items: center; font-size: 28px; margin: 0 auto 16px; }
.dl-fertig p { font-size: 15px; color: #6b6f78; margin-top: 8px; }
@media (max-width: 600px) { .dl-woche { grid-template-columns: repeat(5, 1fr); gap: 4px; } .dl-slot { font-size: 12px; } }

/* Kontakt (blau, mit Eingangsfoto) */
.kontakt address { margin-top: var(--s4); }
.kontakt .kontaktzeilen { margin-top: var(--s3); }
.kontakt .anfahrt-titel { margin-top: var(--s4); }
.kontakt .knopf { margin-top: var(--s2); }

/* Fußzeile */
.fuss-leiste { background: var(--salbei); font-size: 14px; color: var(--blau); }
.fuss-leiste .spalte { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s3); min-height: 56px; align-items: center; }
.fuss-leiste ul { display: flex; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.fuss-leiste li { margin: 0; }
.fuss-leiste a { color: var(--blau); }

/* Feste Leiste am Handy-Rand */
.handy-leiste { display: none; }

/* Tablet (auch das schmale Vorschaufenster) */
@media (max-width: 1024px) {
  :root { --abschnitt: 88px; --rand: 28px; }
  h1 { font-size: 42px; }
  h2 { font-size: 28px; }
  .menue-knopf { display: block; }
  /* Handy-Menü: blaue Schublade von rechts (Variante C vom 17.10.) */
  .nav { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 70;
         width: 86%; max-width: 360px; background: var(--blau); color: var(--salbei); padding: 24px 28px 32px; overflow-y: auto;
         transform: translateX(100%); visibility: hidden; transition: transform .25s, visibility 0s .25s; }
  .nav.offen { transform: none; visibility: visible; transition: transform .25s; }
  .nav-schleier { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(30, 64, 81, .5); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
  .nav-schleier.offen { opacity: 1; visibility: visible; transition: opacity .25s; }
  html.menue-offen .handy-leiste { display: none; }   /* schwebende Knöpfe weichen der Schublade */
  .menue-zu { display: block; position: absolute; top: 18px; right: 12px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 30px; line-height: 44px; color: var(--salbei); }
  .nav > ul { flex-direction: column; gap: 0; margin-top: 56px; }
  .nav { margin-left: 0; align-items: stretch; }   /* Liste über die volle Breite der Schublade, auch zugeklappt */
  .nav a.nav-link { display: block; padding: 16px 0; font-size: 17px; color: var(--weiss); border-bottom: 1px solid rgba(216, 221, 216, .3); }   /* Hauptpunkte groß und weiß, Unterpunkte kleiner in Salbei */
  .nav a.nav-link.aktiv { color: var(--salbei); }
  .unter-auf { display: none; }
  /* Praxis und Leistungen klappen per Tipp auf (Felix' Wahl 22.10., Variante 2), Pfeil rechts */
  .hat-unter > a.nav-link { display: flex; justify-content: space-between; align-items: center; }
  .hat-unter > a.nav-link::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--salbei); border-bottom: 2px solid var(--salbei); transform: rotate(45deg); margin: -6px 4px 0 0; transition: transform .2s; }
  .hat-unter.offen > a.nav-link::after { transform: rotate(-135deg); margin-top: 4px; }
  .hat-unter.offen > a.nav-link { border-bottom: 0; padding-bottom: 6px; }
  .untermenue { display: none; position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: transparent; padding: 0 0 12px 16px; min-width: 0; border-bottom: 1px solid rgba(216, 221, 216, .3); }
  .hat-unter.offen .untermenue { display: block; }
  /* Fuß der Schublade: Telefon, Adresse, Sprechzeiten; zeigt zugleich, wo das Menü endet */
  .nav-fuss { display: grid; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 14px; line-height: 1.45; color: var(--salbei); letter-spacing: .02em; }
  .nav > ul { margin-bottom: var(--s4); }
  .nav-fuss .tel { color: var(--weiss); font-size: 17px; font-weight: 600; letter-spacing: .02em; }
  .nav-fuss .tel:hover { text-decoration: none; }
  .nav-fuss .zeit { font-size: 13px; opacity: .85; }
  .untermenue::before { display: none; }
  .untermenue a { padding: 9px 0; font-size: 16px; color: var(--salbei); }
  .untermenue a:hover { background: transparent; }
  .kopf-innen > .knopf-doctolib { margin-left: auto; margin-right: var(--s2); }   /* Tablet: Doctolib-Knopf neben dem Menü-Symbol */
  .band-blau .und { display: none; }
  .band-blau .nobr { display: block; }
  .hero { min-height: 560px; padding: 80px 0 64px; }
  .seitenkopf { padding: 64px 0 56px; }
  .raster-3 { grid-template-columns: 1fr 1fr; }
  .band-blau .raster-3 { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  .namen, .aerzte { grid-template-columns: 1fr 1fr; }
  .bilderreihe img { height: 280px; }
  .termin-raster { grid-template-columns: 1fr; }
  .termin-text img { width: 100%; max-width: 360px; }
}

/* Handy */
@media (min-width: 900px) and (max-width: 1024px) {
  .namen, .aerzte { grid-template-columns: repeat(4, 1fr); }
  .aerztin p { font-size: 14px; }
}

@media (max-width: 768px) {
  :root { --abschnitt: 64px; --rand: 20px; --s5: 48px; --kopf: 80px; }
  body { padding-bottom: 96px; font-size: 16px; }
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  .gross { font-size: 18px; }
  .logo img { width: 110px; }
  .kopf-innen > .knopf-doctolib { display: none; }   /* Handy: Termin über die Kapsel unten */
  .nicht-handy { display: none; }   /* z. B. „Route in Google Maps“, wenn die Kapsel „Anfahrt“ unten steht */
  h1, h2, h3 { hyphens: manual; overflow-wrap: break-word; }   /* Trennung nur an gesetzten Stellen (­), sonst zerreißt es Wörter wie Facharztpraxis */
  .hero { background-image: image-set(url("bilder/eingang-quer-900.webp") type("image/webp"), url("bilder/eingang-quer-900.jpg") type("image/jpeg")); }
  .hero-ort { font-size: 12px; letter-spacing: .14em; }
  .hero-ort .trenn { margin: 0 3px; }
  .infos { grid-template-columns: 1fr; gap: var(--s4); }
  .kopfleiste .adresse { display: none; }
  .kopfleiste .spalte { justify-content: flex-end; }
  .status-liste { min-width: 0; width: calc(100vw - 2 * var(--rand)); max-width: 420px; }
  .band-blau { display: none; }   /* Sprechzeiten stehen im Status oben, Telefon auf dem Anruf-Knopf */
  .hero { min-height: 520px; padding: 56px 0 48px; }
  .seitenkopf { padding: 44px 0 40px; }
  .seitenkopf.kompakt { padding: 36px 0 0; }
  .raster-2, .raster-3, .namen, .aerzte, .raster-bild { grid-template-columns: 1fr; }
  .raster-bild img { min-height: 0; height: auto; }
  .vasektomie .raster-bild img { min-height: 0; }
  .namen { gap: var(--s2); }
  .aerztin img { max-width: 260px; }
  .bilderreihe { flex-direction: column; }
  .bilderreihe img { height: auto; width: 100%; }
  .formular { padding: var(--s3); }
  .feld-reihe { grid-template-columns: 1fr; }
  .handy-leiste {
    display: flex; justify-content: center; gap: 10px;   /* zwei gleich breite Hälften über die ganze Breite (Felix' Wahl 19.10., Variante 2) */
    position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60;
    padding: 0 16px; pointer-events: none;
  }
  .handy-leiste a {
    pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 9px;
    flex: 1 1 0; min-width: 0; height: 52px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
    font-size: 15px; font-weight: 600; letter-spacing: 0; word-spacing: 0; line-height: 1; color: var(--weiss);
    box-shadow: 0 6px 20px rgba(30, 64, 81, .28);
  }
  .handy-leiste a span { white-space: nowrap; }
  .handy-leiste a:hover { text-decoration: none; }
  .handy-leiste .anrufen { background: var(--blau); }          /* zwei Kapseln: Anrufen in Blau, Termin in Rot */
  .handy-leiste .anrufen img { width: 22px; height: 22px; }
  .handy-leiste .termin { background: var(--rot-flaeche); flex-direction: column; gap: 5px; }   /* halbe Breite: Doctolib-Zeichen über „Termin buchen“ */
  .handy-leiste .anfahrt { background: var(--rot-flaeche); }   /* Fassung ohne Doctolib: rechts Anfahrt statt Termin */
  .handy-leiste .anfahrt img { width: 22px; height: 22px; }
  .handy-leiste .dl-marke { width: auto; height: 10px; }
}
@media (max-width: 400px) {
  h1 { font-size: 31px; }
  h2 { font-size: 24px; }
}
@media (max-width: 360px) {   /* sehr schmale Handys: Kapseln etwas enger, damit „Termin buchen“ einzeilig bleibt */
  .handy-leiste { padding: 0 10px; gap: 8px; }
  .handy-leiste a { height: 48px; padding: 0 8px; font-size: 13.5px; gap: 7px; }
  .handy-leiste .termin { gap: 4px; }
  .handy-leiste .anrufen img { width: 20px; height: 20px; }
  .handy-leiste .dl-marke { height: 9px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nav, .nav-schleier, .untermenue, .knopf, .menue-knopf span, .intro, .intro-innen { transition: none; } }