/* ==========================================================================
   Herz & Darm — Gestaltungssystem
   Abgeleitet aus dem Entwurf „Startseite Herz & Darm v2" (Claude Design).
   Farben und Schriften nach CI-Handbuch der Praxis.
   Schriften liegen lokal unter assets/schriften/ — kein Google-CDN (DSGVO).
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('schriften/Manrope.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('schriften/Nunito-Sans.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* CI-Farben */
  --blau:        #132B43;   /* Grundfarbe, Flächen, Schrift */
  --blau-tief:   #0E2234;   /* Fußzeile */
  --blau-licht:  #1E3E5C;   /* Verlaufsende im Hero */
  --gold:        #96694B;   /* Akzent, Auszeichnung */
  --gold-hell:   #C89B78;   /* Akzent auf dunklem Grund */
  --gold-dunkel: #82573B;   /* Überfahren */
  --weiss:       #FFFFFF;

  /* Abgeleitete Töne aus dem Entwurf */
  --text:        #46586B;
  --text-leise:  #56687A;
  --auf-dunkel:  #B9C6D2;
  --auf-dunkel-leise: #8FA1B2;
  --linie:       #E3E8EE;
  --linie-zart:  #EDF1F4;
  --flaeche:     #FAFBFC;
  --flaeche-2:   #F1F4F7;
  --flaeche-3:   #E9EDF1;
  --fehler:      #B4432F;   /* Fehlermeldungen in Formularen */

  --radius:      6px;
  --radius-pille: 999px;
  --schatten:      0 1px 3px rgba(19, 43, 67, .05);
  --schatten-hoch: 0 14px 30px rgba(19, 43, 67, .12);
  --schatten-pille:0 4px 16px rgba(19, 43, 67, .10);

  --kopf:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lauf:  'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Raster ----------------------------------------------------------
     --bahn-breit gilt fuer JEDEN Inhaltsrahmen der Seite, auch fuer den
     Seitenkopf. Nur so beginnen Ueberschrift und Text an derselben Kante.
     --mass-* begrenzt die Lesebreite innerhalb dieses Rahmens; die Rahmen
     selbst bleiben gleich breit. */
  --bahn-breit: 1280px;
  --rand: 24px;
  --mass-schmal: 900px;
  --mass-eng: 820px;
}

/* Grosse Bildschirme duerfen den Platz nutzen. Die Lesebreite waechst dabei
   absichtlich nicht mit - lange Zeilen liest niemand gern. */
@media (min-width: 1660px) {
  :root { --bahn-breit: 1440px; --rand: 40px; }
}
@media (min-width: 2100px) {
  :root { --bahn-breit: 1560px; }
}

/* ---------------------------------------------------------------- Grundlage */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--lauf);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* [hidden] des Browsers ist schwaecher als jeder Klassenselektor mit display.
   Der Live-Editor blendet optionale Abschnitte und Eintraege ueber genau
   dieses Attribut aus — ohne diese Regel wuerde ein .raster { display:grid }
   das Ausblenden aushebeln. Dieselbe Falle ist im Blog schon zugeschnappt. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--kopf);
  color: var(--blau);
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: 800; font-size: clamp(30px, 3.6vw, 48px); }
h2 { font-weight: 800; font-size: clamp(24px, 2.6vw, 30px); }
h3 { font-weight: 700; font-size: 18px; }
p  { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold); }
a:hover { color: var(--gold-dunkel); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Auswahlfelder groesser als der Browserstandard von 13px. Bewusst ueber
   min-* statt width/height, weil einzelne Seiten den Feldern width:auto oder
   width:100% mitgeben - min-* setzt sich in beiden Faellen durch. */
input[type="radio"],
input[type="checkbox"] {
  min-width: 20px;
  min-height: 20px;
  accent-color: var(--gold);
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sprungmarke zum Inhalt — Tastaturbedienung */
.zum-inhalt {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--blau); color: var(--weiss);
  font-family: var(--kopf); font-weight: 700; font-size: 14px;
  padding: 12px 18px; border-radius: var(--radius-pille);
  text-decoration: none; transition: top .2s;
}
.zum-inhalt:focus { top: 12px; color: var(--weiss); }

/* ------------------------------------------------------------------- Bahnen */

.bahn {
  max-width: var(--bahn-breit);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 90px) var(--rand);
}

/* Schmale Varianten behalten die AUSSENbreite des Rasters. Begrenzt wird nur
   die Lesebreite der Kinder, und zwar linksbuendig - dadurch steht der Text
   unter der Ueberschrift des Seitenkopfs statt daneben. */
.bahn--schmal > *,
.bahn--eng > *    { max-width: var(--mass-schmal); }
.bahn--eng > *    { max-width: var(--mass-eng); }

/* Mittig gesetzte Abschnitte zentrieren ihre Kinder wie bisher. */
.bahn--mitte      { text-align: center; }
.bahn--mitte > *  { margin-left: auto; margin-right: auto; }
.bahn--flach  { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }

.feld--hell {
  background: var(--flaeche);
  border-top: 1px solid var(--linie-zart);
  border-bottom: 1px solid var(--linie-zart);
}
.feld--dunkel { background: var(--blau); }
.feld--dunkel h1, .feld--dunkel h2, .feld--dunkel h3 { color: var(--weiss); }
.feld--dunkel p  { color: var(--auf-dunkel); }
.feld--dunkel .augenbraue { color: var(--gold-hell); }

/* --------------------------------------------------------- Auszeichnungen */

.augenbraue {
  font-family: var(--kopf);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.goldlinie {
  width: 38px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 16px;
}
.bahn--mitte .goldlinie { margin-left: auto; margin-right: auto; }

.vorspann {
  font-size: clamp(16px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--text);
}
.feld--dunkel .vorspann { color: var(--auf-dunkel); }

/* Fließtext bekommt auf schmalen Screens wieder eine feste linke Kante.

   In einer zentrierten Bahn (.bahn--mitte) erbt auch der Vorspann die
   Zentrierung. Auf dem Desktop sind das zwei bis drei Zeilen und es wirkt
   ruhig; auf dem iPhone bricht derselbe Absatz in acht Zeilen, und ohne
   gemeinsame linke Kante muss das Auge jeden Zeilenanfang neu suchen — das
   kostet messbar Lesegeschwindigkeit (Befund 07 aus Serdars Prüfung,
   09.09.2026). Zentriert bleiben Überschrift und Augenbrauenzeile, die
   dafür kurz genug sind. */
@media (max-width: 860px) {
  .bahn--mitte .vorspann { text-align: left; }
}

/* ------------------------------------------------------------------ Knöpfe */

.knopf {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--kopf); font-weight: 700; font-size: 14px;
  letter-spacing: .02em;
  padding: 12px 22px;
  border-radius: var(--radius-pille);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.knopf--gold { background: var(--gold); color: var(--weiss); }
.knopf--gold:hover { background: var(--gold-dunkel); color: var(--weiss); }
.knopf--rand { border-color: var(--gold); color: var(--gold); background: transparent; }
.knopf--rand:hover { background: var(--gold); color: var(--weiss); }
.knopf--hell { border-color: rgba(255,255,255,.45); color: var(--weiss); background: transparent; }
.knopf--hell:hover { background: var(--weiss); color: var(--blau); }

.textlink {
  font-family: var(--kopf); font-weight: 700; font-size: 14.5px;
  text-decoration: none; color: var(--gold);
  display: inline-block;
}
.textlink:hover { color: var(--gold-dunkel); }

/* Schriftgröße aus den Editoren (Blog und Live-Editor): zwei feste Stufen,
   relativ zum Umfeld — in einer Karte fällt „groß" kleiner aus als im
   Fließtext und bricht nie aus dem Raster. Mehr Stufen gibt es bewusst nicht;
   was größer sein soll als das, ist eine Überschrift. */
.text-gross { font-size: 1.18em; }
.text-klein { font-size: .88em; }

/* ------------------------------------------------------------------ Kopfzeile */

.pillen-menue, .pillen-aktionen {
  position: fixed; top: 18px; z-index: 50;
  display: flex; align-items: center;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border: 1px solid var(--linie);
  border-radius: var(--radius-pille);
  box-shadow: var(--schatten-pille);
}
.pillen-menue    { left: 18px;  gap: 4px; padding: 6px 10px; }
.pillen-aktionen { right: 18px; gap: 8px; padding: 6px; }

.pillen-menue a {
  font-family: var(--kopf); font-weight: 600; font-size: 13px;
  color: var(--blau); text-decoration: none;
  padding: 9px 12px; border-radius: var(--radius-pille);
  white-space: nowrap; transition: color .2s, background .2s;
}
.pillen-menue a:hover { color: var(--gold); }
.pillen-menue a[aria-current="page"] { color: var(--gold); background: var(--flaeche-2); }

.pillen-aktionen a {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--kopf); font-weight: 700; font-size: 13px;
  color: var(--blau); text-decoration: none;
  padding: 9px 14px; border-radius: var(--radius-pille);
  white-space: nowrap; transition: all .2s;
}
.pillen-aktionen a:hover { color: var(--gold); }
.pillen-aktionen .rand { border: 1.5px solid #D7DEE5; }
.pillen-aktionen .rand:hover { border-color: var(--gold); }
.pillen-aktionen .voll { background: var(--gold); color: var(--weiss); padding: 9px 16px; }
.pillen-aktionen .voll:hover { background: var(--gold-dunkel); color: var(--weiss); }

/* ------------------------------------------------------------ Seitenkopf */
/* Kompakte Kopfzone für Unterseiten — bewusst anders als der Hero der
   Startseite, damit Unterseiten eigenständig wirken. */

.seitenkopf {
  position: relative;
  background: linear-gradient(165deg, var(--blau), var(--blau-licht));
  color: var(--weiss);
  padding: clamp(120px, 14vw, 168px) var(--rand) clamp(52px, 6vw, 76px);
  overflow: hidden;
}
.seitenkopf::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 70% 40%, rgba(255,255,255,.06), rgba(14,34,52,.45));
  pointer-events: none;
}
.seitenkopf > * { position: relative; z-index: 1; }
/* Bewusst um den Aussenabstand verkleinert: Bei .bahn liegt der Abstand INNEN,
   hier liegt er am Elternelement. Ohne diese Rechnung stehen Kopf und Inhalt
   um 2x --rand versetzt. */
.seitenkopf-inhalt { max-width: calc(var(--bahn-breit) - var(--rand) * 2); margin: 0 auto; }
.seitenkopf h1 { color: var(--weiss); margin-bottom: 14px; }
.seitenkopf .augenbraue { color: var(--gold-hell); }
.seitenkopf p { color: var(--auf-dunkel); max-width: 60ch; font-size: 17px; margin: 0; }

.brotkrumen {
  font-size: 12.5px; color: var(--auf-dunkel-leise);
  margin-bottom: 18px;
}
.brotkrumen a { color: var(--auf-dunkel-leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--gold-hell); }
.brotkrumen span { padding: 0 7px; opacity: .6; }

/* -------------------------------------------------------------------- Raster */

.raster { display: grid; gap: 18px; }
.raster--2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--paar { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* -------------------------------------------------------------------- Karten */

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--schatten);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
a.karte { text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.karte--klickbar:hover, a.karte:hover {
  transform: translateY(-6px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--gold);
}
.karte h3 { font-size: 16.5px; margin-bottom: 2px; }
.karte p  { font-size: 13.5px; line-height: 1.55; color: var(--text-leise); }
.karte .mehr { margin-top: auto; color: var(--gold); font-family: var(--kopf); font-weight: 700; font-size: 13.5px; }

.karte--dunkel {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(150,105,75,.55);
  box-shadow: none;
}
.karte--dunkel:hover { background: rgba(255,255,255,.09); }
.karte--dunkel h3 { color: var(--weiss); }
.karte--dunkel p  { color: var(--auf-dunkel); }

/* Platzhalter für noch fehlende Bilder und Videos */
.platzhalter {
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: repeating-linear-gradient(45deg, var(--flaeche-2), var(--flaeche-2) 10px, var(--flaeche-3) 10px, var(--flaeche-3) 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--auf-dunkel-leise);
}
.platzhalter--breit { aspect-ratio: 4 / 3; }
.platzhalter--hoch  { aspect-ratio: 4 / 5; }

/* -------------------------------------------------------------- Kartenfeld */
/* Zwei-Klick-Loesung: Vor dem Klick wird KEINE Verbindung zu Google aufgebaut.
   Erst der Knopf setzt den iframe ein. Ohne das wuerde beim Seitenaufruf die
   IP jedes Besuchers an Google uebertragen - bei einer Arztpraxis heikel. */

.kartenfeld {
  position: relative;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche-2);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* max() statt 100%: Einspaltig hat das Elternelement keine feste Hoehe, dann
   loest 100% zu null auf und das Feld faellt auf wenige Pixel zusammen. */
.kartenfeld--hoch { min-height: max(320px, 100%); }

.kartenfeld-vorschau {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 32px 26px; text-align: center;
  background:
    linear-gradient(rgba(250,251,252,.86), rgba(250,251,252,.86)),
    repeating-linear-gradient(0deg, var(--flaeche-3) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, var(--flaeche-3) 0 1px, transparent 1px 46px),
    var(--flaeche-2);
}
.kartenfeld-nadel { color: var(--gold); }
.kartenfeld-vorschau p {
  margin: 0; max-width: 46ch;
  font-size: 14.5px; line-height: 1.6; color: var(--text-leise);
}
.kartenfeld-vorschau .ort {
  font-family: var(--kopf); font-weight: 700; font-size: 16.5px; color: var(--blau);
}
/* position:absolute statt Prozenthoehe im Flex-Item — sonst haelt sich das
   iframe an seine min-height und der Rahmen zeigt oben/unten graue Streifen
   (var(--flaeche-2)) durch, weil align-items:center es nicht streckt. */
.kartenfeld iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------- Listen */

.hakenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hakenliste li {
  position: relative; padding-left: 30px;
  font-size: 15.5px; line-height: 1.6;
}
.hakenliste li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 14px; height: 7px;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.feld--dunkel .hakenliste li { color: var(--auf-dunkel); }
.feld--dunkel .hakenliste li::before { border-color: var(--gold-hell); }

/* Nummerierte Ablauf-Liste */
.schrittliste { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; gap: 22px; }
.schrittliste li { counter-increment: schritt; display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; }
.schrittliste li::before {
  content: counter(schritt);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--gold);
  font-family: var(--kopf); font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.schrittliste h3 { margin-bottom: 4px; }
.schrittliste p  { font-size: 15px; color: var(--text-leise); }

/* Beschriftete Angaben (Definitionsliste) */
.angaben { display: grid; gap: 0; margin: 0; }
.angaben > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--linie);
}
.angaben > div:last-child { border-bottom: 0; }
.angaben dt { font-family: var(--kopf); font-weight: 700; font-size: 14px; color: var(--blau); margin: 0; }
.angaben dd { margin: 0; font-size: 15.5px; color: var(--text); }

/* -------------------------------------------------------------- Hinweisfeld */

.hinweis {
  border-left: 3px solid var(--gold);
  background: var(--flaeche);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  font-size: 15.5px;
}
.hinweis strong { color: var(--blau); font-family: var(--kopf); }

/* Warnbox: Icon-Kreis + Titel + Text, für wichtige Hinweise in Formularen.
   --hell ist die Variante für helle Formularkarten (weiß, blauer Kreis). */
.warnbox { display: flex; gap: 14px; align-items: flex-start; background: var(--blau); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px; }
.warnbox .kreis { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(200,155,120,.18); border: 1.5px solid var(--gold-hell); color: var(--gold-hell); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.warnbox p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #D9E2EA; }
.warnbox strong { color: var(--weiss); }
.warnbox .titel { font-family: var(--kopf); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 5px; }
.warnbox--hell { background: var(--weiss); border: 1px solid var(--linie); }
.warnbox--hell .kreis { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.warnbox--hell p { color: var(--text); }
.warnbox--hell .titel { color: var(--blau); }
.warnbox--hell strong { color: var(--blau); }
/* Handy: Symbol ueber den Text, sonst bleibt neben dem Kreis eine Spalte von
   kaum 150 px und der Text bricht nach fast jedem Wort um. */
@media (max-width: 560px) {
  .warnbox { flex-direction: column; gap: 10px; padding: 16px; }
}

/* ----------------------------------------------------------------- Fußzeile */

.fusszeile { background: var(--blau-tief); color: var(--auf-dunkel-leise); }
.fusszeile .bahn { padding-top: 64px; padding-bottom: 34px; }
.fusszeile h4 {
  color: var(--weiss); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px;
}
.fusszeile a { color: var(--auf-dunkel); text-decoration: none; font-size: 14.5px; }
.fusszeile a:hover { color: var(--gold-hell); }
.fusszeile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fusszeile-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; }
.fusszeile-marke { font-family: var(--kopf); font-weight: 800; font-size: clamp(24px, 2.6vw, 30px); color: var(--weiss); }
.fusszeile-marke small {
  display: block; font-family: var(--lauf); font-weight: 400;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-hell); margin-top: 5px;
}
.fusszeile-schluss {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 40px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 13px;
}

/* ------------------------------------------------------ Schnellzugriff mobil */

.fab { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: none; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab-aktionen { display: none; flex-direction: column; align-items: flex-end; gap: 8px; }
.fab-aktionen.offen { display: flex; }
.fab-aktionen a {
  display: flex; align-items: center; gap: 8px;
  background: var(--weiss); border: 1px solid var(--linie); color: var(--blau);
  font-family: var(--kopf); font-weight: 700; font-size: 13.5px;
  padding: 11px 16px; border-radius: var(--radius-pille);
  text-decoration: none; box-shadow: 0 6px 18px rgba(19,43,67,.18);
}
.fab-aktionen a.betont { background: var(--blau); color: var(--weiss); border-color: var(--blau); }
.fab-knopf {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gold); border: none; color: var(--weiss);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 24px rgba(19,43,67,.3);
}

/* ------------------------------------------------------------- Einblenden */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-reveal][data-slide="links"]  { transform: translateX(-24px); }
[data-reveal][data-slide="rechts"] { transform: translateX(24px); }
[data-reveal].sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ Schmal */

@media (max-width: 1080px) {
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .fusszeile-raster { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Unterhalb von 1080px reicht die Zeile nicht mehr fuer Menue UND Aktionen:
   Die Aktionspillen liefen bis zu 150px in die Menuepunkte hinein. Sie weichen
   hier dem Schnellzugriff unten rechts, der dieselben Wege anbietet.
   Die Grenze liegt bewusst bei 1080 und nicht bei 1011 - dort waere der Abstand
   rechnerisch genau 0 und damit beim kleinsten Textzuwachs wieder eine
   Ueberlappung. */
@media (max-width: 1080px) {
  .pillen-aktionen { display: none; }
  .fab { display: flex; }
}

/* Ab hier wird aus dem Pillenmenue ein Seitenpanel (Sandwich-Knopf oeffnet es).
   Knopf und Schleier werden von seite.js eingefuegt, nicht im HTML jeder
   Seite - deshalb hier per Klasse und nicht per Media-Query-Sichtbarkeit
   allein gesteuert. */
.menu-knopf { display: none; }
.menu-schleier { display: none; }

@media (max-width: 860px) {
  .menu-knopf {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 18px; right: 18px; z-index: 56;
    width: 42px; height: 42px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    border: 1px solid var(--linie);
    border-radius: 50%;
    box-shadow: var(--schatten-pille);
    color: var(--blau);
    cursor: pointer;
  }

  .menu-schleier {
    display: block;
    position: fixed; inset: 0; z-index: 45;
    background: rgba(14, 34, 52, .35);
    opacity: 0; pointer-events: none;
    transition: opacity .4s ease;
  }
  .menu-schleier.offen { opacity: 1; pointer-events: auto; }

  /* Zwei Drittel Breite (Wunsch), auf sehr schmalen Screens gedeckelt. */
  .pillen-menue {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(68vw, 320px);
    flex-direction: column; align-items: stretch;
    gap: 2px;
    padding: 84px 18px 28px;
    border-radius: 0;
    border-width: 0 0 0 1px;
    background: rgba(19, 43, 67, .86);
    backdrop-filter: blur(10px);
    box-shadow: -8px 0 32px rgba(0,0,0,.25);
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.65,0,.35,1);
    overflow-y: auto;
  }
  .pillen-menue.offen { transform: translateX(0); }
  .pillen-menue a { color: var(--weiss); padding: 13px 12px; border-radius: var(--radius); font-size: 15.5px; }
  .pillen-menue a:hover { background: rgba(255,255,255,.06); color: var(--weiss); }
  .pillen-menue a[aria-current="page"] { background: rgba(255,255,255,.1); color: var(--gold-hell); }

  body.menu-offen { overflow: hidden; }

  /* Auf schmalen Schirmen keine seitliche Einblendbewegung: translateX schiebt
     den Inhalt sonst über den Rand und erzeugt waagrechtes Scrollen. */
  [data-reveal][data-slide="links"],
  [data-reveal][data-slide="rechts"] { transform: translateY(18px); }

  .seitenkopf { padding-top: clamp(56px, 12vw, 88px); }
  .raster--2, .raster--paar { grid-template-columns: 1fr; gap: 20px; }
  /* Dreierraster geht auf Tablets zunaechst nur auf zwei Spalten zurueck -
     eine einzelne Kartenspalte laesst auf 768px zu viel Flaeche ungenutzt. */
  .raster--3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .angaben > div { grid-template-columns: 1fr; gap: 4px; }
  .schrittliste li { grid-template-columns: 36px 1fr; gap: 14px; }
  .schrittliste li::before { width: 36px; height: 36px; font-size: 14px; }

  /* Wiederverwendbar: einzelne Abschnitte nur auf dem Handy ausblenden. */
  .nur-desktop { display: none !important; }

  /* Abschnitte stehen auf dem Handy zu weit auseinander - die grosse
     Bahn-Ruhe von Desktop wirkt hier nur wie Leerlauf beim Scrollen. */
  .bahn { padding-top: clamp(26px, 6vw, 40px); padding-bottom: clamp(26px, 6vw, 40px); }
  .bahn--flach { padding-top: clamp(18px, 4vw, 28px); padding-bottom: clamp(18px, 4vw, 28px); }
}

@media (max-width: 619px) {
  .raster--3 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* Ueber die Variable, damit Seitenkopf, Bahnen und Goldband denselben
     Aussenabstand behalten und nicht auseinanderlaufen. */
  :root { --rand: 18px; }
  .raster--4 { grid-template-columns: 1fr; }
  /* Porträts bleiben auch hier zweispaltig.

     Einspaltig wurde jedes Arztbild 355 × 533 px groß — ein einzelnes Porträt
     füllte mehr als einen halben Bildschirm, die vier Karten zusammen rund
     2 650 px. Sie waren damit der größte Einzelposten an den 10 500 px, die
     die Startseite auf dem iPhone lang war (Befund 06 aus Serdars Prüfung,
     09.09.2026). Zweispaltig sind es rund 540 px.

     Nur für Bildkacheln: Die anderen .raster--4 tragen Fließtext und bleiben
     einspaltig, weil zwei Textspalten auf 390 px zu eng würden. */
  .raster--portraets { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Marke und Sprechzeiten bleiben volle Breite, Praxis und Besuch ruecken
     nebeneinander - spart Hoehe und die zwei kurzen Listen wirken nicht
     verloren untereinander. */
  .fusszeile-raster { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .fusszeile-raster > div:first-child,
  .fusszeile-raster > div:last-child { grid-column: 1 / -1; }
  .fusszeile-raster > div:nth-child(3) { border-left: 1px solid rgba(255,255,255,.14); padding-left: 20px; }
}

/* ------------------------------------------------- Navigation ohne Skript */

/* Erscheint nur im <noscript>-Zweig (siehe bausteine/menue.html). Bewusst im
   Textfluss statt fixiert: Ohne Skript gibt es keinen Öffnen-Knopf, also muss
   die Liste von sich aus sichtbar und erreichbar sein. Auf dem Desktop steht
   das Pillen-Menü ohnehin, dort wäre sie doppelt — deshalb erst unter 860 px,
   derselben Schwelle, ab der das Panel nach außen rutscht. */
.menue-ohne-js { display: none; }

@media (max-width: 860px) {
  .menue-ohne-js {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 10px 14px;
    background: var(--flaeche-2);
    border-bottom: 1px solid var(--linie);
  }
  .menue-ohne-js a {
    font-family: var(--kopf); font-weight: 600; font-size: 13.5px;
    color: var(--blau); text-decoration: none;
    padding: 8px 12px; border-radius: var(--radius-pille);
    background: var(--weiss); border: 1px solid var(--linie);
  }
}

/* ---------------------------------------- Foto, das neben dem Text mitläuft */

/* Links ein Foto, rechts ein Text, der deutlich länger ist als das Foto. Beim
   Scrollen gleitet das Foto in seiner Spalte weich mit nach unten, bis es am
   Ende des Textes ankommt — es bleibt also neben dem Text, den man gerade liest,
   statt oben zurückzubleiben und eine leere Fläche zu hinterlassen. Vorbild ist
   die Karriereseite von Dr. Beetke und Kollegen; dort gemessen: Das Foto läuft
   mit gut halber Scrollgeschwindigkeit und zieht weich nach.

   Die Bewegung macht seite.js (Abschnitt „Foto, das mitläuft"). Ohne
   JavaScript, bei „Bewegung reduzieren" und auf schmalen Bildschirmen bleibt
   das Foto einfach oben stehen — der Inhalt ist in jedem Fall vollständig.

   Die Bildspalte streckt sich auf die Höhe des Textes (align-items: stretch);
   genau dieser Überstand ist der Weg, den das Foto gleiten kann. Ist der Text
   kürzer als das Foto, bewegt sich nichts — dann gibt es nichts zu begleiten. */

.mitlauf {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: stretch;
}
.mitlauf-spalte { position: relative; }
.mitlauf-bild   { will-change: transform; }

.mitlauf-rahmen {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.mitlauf-rahmen img {
  display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
}

/* Der Halbkreis an der Bildkante, die zum Text zeigt: Er hat die Farbe des
   Hintergrunds und „stanzt" die Kante damit aus — der Text wirkt wie ans Foto
   angehängt. Er sitzt IM Bild und wandert deshalb von selbst mit. Die Farbe
   kommt aus --mitlauf-grund, damit der Baustein auch auf farbigen Flächen
   funktioniert. */
.mitlauf-kreis {
  position: absolute; right: -1px; top: 28%;
  width: 28px; height: 120px;
  background: var(--mitlauf-grund, var(--weiss));
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  pointer-events: none;
}

.mitlauf-text > :first-child { margin-top: 0; }

@media (max-width: 860px) {
  .mitlauf { grid-template-columns: 1fr; gap: 26px; }
  /* Übereinander zeigt der Kreis ins Leere statt zum Text. */
  .mitlauf-kreis { display: none; }
}

/* ------------------------------------------------- Zwei Fassungen je Breite */

/* Manche Texte brauchen auf dem Handy eine eigene Fassung — eine Überschrift,
   die auf dem Desktop in einer Zeile steht und mobil in vier bricht, ein
   Absatz, der unterwegs kürzer sein soll. Der Live-Editor legt dafür ein
   zweites Element mit demselben Inhalt an; welches davon zu sehen ist,
   entscheidet allein diese Regel.

   Warum im HTML und nicht per JavaScript: Beide Fassungen stehen fertig in der
   Datei, es gibt kein Nachladen, kein Umbauen und kein Flackern beim Öffnen —
   dasselbe Prinzip wie beim <noscript>-Menü. Der Preis ist, dass beide Texte
   im Quelltext stehen; das ist eine bewusste Entscheidung (siehe CLAUDE.md).

   Die Grenze ist 860 px, dieselbe wie beim Menü-Panel und beim Fließtext.
   `!important`, weil die Fassungen an Elementen mit eigenen Layout-Regeln
   hängen (`display:flex` an einer Karte schlägt sonst das display:none) —
   dieselbe Falle, die im Blog schon einmal zugeschnappt ist. */

.nur-handy { display: none !important; }

@media (max-width: 860px) {
  .nur-desktop { display: none !important; }
  .nur-handy   { display: revert !important; }
}

/* Gedruckt wird die Desktop-Fassung: Papier ist breit. */
@media print {
  .nur-handy   { display: none !important; }
  .nur-desktop { display: revert !important; }
}

/* --------------------------------------------------------- Formularversand */

/* Honigtopf gegen Formular-Bots: für Menschen unsichtbar, für Bildschirmleser
   ausgeblendet (aria-hidden), per Tab nicht erreichbar. Bewusst nicht
   display:none — manche Bots füllen nur Felder aus, die „zu sehen" sind. */
.hp-feld { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rückmeldung nach dem Senden (api/formular.php, assets/formular.js).
   Ohne JavaScript leitet der Endpunkt auf `seite.html#<art>-gesendet` zurück
   und `:target` macht den passenden Absatz sichtbar — eine Meldung ganz ohne
   Skript. Mit JavaScript setzt formular.js die Klasse `ist-sichtbar`.
   Nicht über [hidden]: Das steht oben auf display:none !important und ließe
   sich von :target nicht mehr aufheben.
   Eigene helle Fläche, damit die Meldung auf hellen wie auf dunklen
   Formularkarten (Rezept) gleich gut lesbar ist. */
.formular-meldung {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--flaeche-2);
  color: var(--blau);
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 600;
  /* Beim Anspringen über #…-gesendet nicht unter dem schwebenden Menü. */
  scroll-margin-top: 120px;
}
.formular-meldung--fehler { border-left-color: var(--fehler); }
.formular-meldung:target,
.formular-meldung.ist-sichtbar { display: block; }
.versand-aktiv .formular-meldung:not(.ist-sichtbar) { display: none; }

/* Während des Sendens: Knopf sichtbar gesperrt. */
form[aria-busy="true"] [type="submit"] { opacity: .65; cursor: progress; }

/* -------------------------------------------------------------------- Druck */

@media print {
  .pillen-menue, .pillen-aktionen, .fab, .zum-inhalt, .menue-ohne-js { display: none !important; }
  body { color: #000; }
  .seitenkopf { background: none; color: #000; padding-top: 0; }
  .seitenkopf h1, .seitenkopf p { color: #000; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ===== VORBEREITUNGS-PLANER AUSGEBLENDET (Bernd, 28.10.2026) ==================
   Die Zeiten im Planer sind ärztlich noch nicht freigegeben. Bis dahin
   verschwindet jeder Verweis darauf — Menü, Fußzeile, Knöpfe, Karten —, ohne
   dass Markup oder Live-Editor-Inhalte angefasst werden. Dazu gehören die
   302-Umleitung in der .htaccess (5b2), der auskommentierte Sitemap-Eintrag
   und das noindex in vorbereitung.html.
   FREIGEBEN: diesen Block löschen und die drei anderen Stellen zurücknehmen. */
a[href$="vorbereitung.html"],
li:has(> a[href$="vorbereitung.html"]),
p:has(> a[href$="vorbereitung.html"]:only-child),
.planer-verweis { display: none !important; }
/* Kontakt: ohne die Planerspalte nimmt das Formular die volle Breite. */
.terminraster:has(> .planer-verweis) { grid-template-columns: minmax(0, 1fr); }