/* ==========================================================================
   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;

  --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; }

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); }

/* ------------------------------------------------------------------ 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); }

/* ------------------------------------------------------------------ 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); }

/* ----------------------------------------------------------------- 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; }
  /* 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; }
}

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

@media print {
  .pillen-menue, .pillen-aktionen, .fab, .zum-inhalt { 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; }
}