/* MEDICENT Baden — ein Stylesheet für alle Breiten.
   Mobil zuerst, Desktop ab 900 px. Farben und Maße aus dem Prototyp. */

/* ---------- Schrift ----------
   Figtree liegt auf unserem eigenen Server, nicht bei Google. Dadurch geht
   beim Seitenaufruf keine IP-Adresse der Besucher:innen an einen Dritten.
   Eine variable Schrift deckt alle Strichstärken von 400 bis 800 ab —
   zwei Dateien, rund 30 KB, statt fünf einzelner Schnitte.
   Lizenz: SIL Open Font License 1.1, siehe assets/fonts/OFL.txt */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --grund: #FFFFFF;
  --text: #1B1A18;
  --text2: #332F2B;
  --grau: #4A453F;
  --grau2: #6E6862;
  --linie: #E3DFDA;
  --linie2: #EFECE8;
  --flaeche: #F6F4F1;
  --pille: #F1EEEA;
  --akzent: #C8791A;
  --akzent-dunkel: #8A3F07;
  --akzent-hell: #FDF0E4;
  --akzent-rand: #F0DFCB;
  --breite: 1180px;
}

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

/* Muss vor allen display-Regeln stehen und sie schlagen: sonst macht
   .person-zeile { display: flex } das hidden-Attribut wirkungslos und der
   Filter blendet nichts aus. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Ohne das landen Sprungziele wie #frei oder #preise unter der
     klebenden Kopfzeile und der Besucher sieht die Ueberschrift nicht. */
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Sprungziele nicht unter den Kopf rutschen lassen */
[id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent-dunkel); }
a:hover { color: #5E2B05; }

img { max-width: 100%; height: auto; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

.kopf {
  /* Bleibt beim Scrollen oben stehen.
     z-index 30 liegt ueber der Fussleiste (20), aber unter Dialogen —
     die oeffnen ueber showModal() und liegen ohnehin im Top-Layer. */
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--linie); background: var(--grund);
}
.kopf-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }

.marke { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; text-decoration: none; color: var(--text); }
/* Die Bildmarke bringt den orangen Kreis selbst mit — kein Hintergrund dahinter. */
.marke-zeichen { width: 28px; height: 28px; flex: 0 0 28px; display: block; }
.marke-text { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; white-space: nowrap; }

.haupt-nav { display: none; }
.kopf-aktionen { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Mobil tragen Telefon und Rückruf die feste Leiste unten.
   Im Kopf bleibt nur der Menüschalter, sonst läuft die Zeile über. */
.kopf-aktionen .knopf-rund,
.kopf-aktionen .knopf-symbol { display: none; }

.knopf-rund {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 22px;
  background: var(--akzent); color: #FFFFFF; text-decoration: none;
  font-family: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.knopf-rund-hell {
  background: var(--grund); color: var(--text); border: 1px solid var(--akzent);
}
/* Zweitrangige Aktion neben einem knopf-rund */
.knopf-rand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 1px solid #D8D3CD; border-radius: 22px;
  background: transparent; color: var(--text); text-decoration: none;
  font-family: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopfreihe > * { flex: 0 0 auto; }

/* Sprungmarken innerhalb einer langen Seite */
.sprungnav {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 16px 0 2px; margin-bottom: 4px;
}
.sprungnav a {
  padding: 7px 14px; border: 1px solid var(--linie); border-radius: 18px;
  font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--grund);
}
.sprungnav a:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }
.knopf-symbol {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid #D8D3CD; border-radius: 22px;
  background: var(--grund); color: var(--akzent); text-decoration: none;
}
.nav-schalter {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: transparent; color: var(--text); cursor: pointer;
}

/* Menü mobil: nach dem Umschalten sichtbar.
   Die Kopfzeile ist eine flex-Zeile aus Logo und Schalter. Ohne volle
   Breite setzt sich das geoeffnete Menue als drittes Element DAZWISCHEN —
   eine schmale Spalte neben dem Logo. flex-basis 100% und order 3 schieben
   es unter die Zeile, wo es hingehoert. */
.haupt-nav[data-offen="true"] {
  display: flex; flex-direction: column;
  flex: 0 0 100%; order: 3;
  padding: 6px 0 14px; border-top: 1px solid var(--linie2);
}
.haupt-nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--linie2);
  color: var(--text); text-decoration: none; font-size: 17px; font-weight: 600;
}
.haupt-nav a[aria-current="page"] { color: var(--akzent-dunkel); }

/* Zeigt an, worauf der Zeiger steht. Die Liste erscheint nicht nur auf
   Handys, sondern auf allem unter 1140 px — also auch auf Laptops mit
   Maus, wo eine Rueckmeldung beim Darueberfahren erwartet wird.
   Nur Farbe und Flaeche aendern sich, nichts bewegt sich: in einer Liste
   mit Trennlinien faellt jedes Verrutschen sofort auf. */
.haupt-nav a:hover,
.haupt-nav a:focus-visible {
  color: var(--akzent-dunkel);
  background: var(--flaeche);
}

/* ---------- Hero ---------- */

.hero { background: var(--akzent-hell); border-bottom: 1px solid var(--akzent-rand); padding: 22px 0 20px; }
.hero h1 { margin: 0 0 8px; font-size: 25px; line-height: 1.18; font-weight: 800; letter-spacing: -0.02em; }
.hero-lead { margin: 0 0 16px; font-size: 15px; line-height: 1.45; color: var(--grau); max-width: 42em; }

/* Startseite: das Haus selbst als Hintergrund hinter Überschrift und Suche.
   Der Verlauf darüber hält den Text auch auf hellen Bildstellen lesbar. */
.hero-foto {
  position: relative; isolation: isolate; overflow: hidden;
  background: #241F1B; border-bottom: 0; color: #fff;
  padding: 30px 0 26px;
}
.hero-grund {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}

/* Langsamer Zoom im Kopfbild: 6 % über 20 Sekunden, dann Ruhe. Bewusst einmalig
   statt endlos — eine Dauerbewegung am Bildrand ermüdet.
   Haengt nicht an JavaScript: reines CSS, nur von der Bewegungs-Einstellung
   des Systems abhaengig. Faellt die Animation aus, steht das Bild still da. */
@keyframes heroNaeher { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-foto .hero-grund { animation: heroNaeher 20s ease-out both; }
}
.hero-foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(28,24,20,.62) 0%, rgba(28,24,20,.42) 42%, rgba(28,24,20,.66) 100%);
}
/* Nur hinter der Schrift etwas mehr Tiefe, damit das Bild hell bleiben darf. */
.hero-foto h1, .hero-foto .hero-lead { text-shadow: 0 1px 14px rgba(20,16,12,.55); }
/* Liegt der Text auf einer hellen Bildstelle, zieht diese Fassung die
   Abdunklung von links herüber — rechts bleibt das Motiv offen. */
.hero-foto.hero-links::after {
  background:
    linear-gradient(100deg, rgba(20,16,12,.88) 0%, rgba(20,16,12,.60) 48%, rgba(20,16,12,.20) 78%),
    linear-gradient(180deg, rgba(28,24,20,.34) 0%, rgba(28,24,20,.16) 45%, rgba(28,24,20,.52) 100%);
}
.hero-foto h1 { color: #fff; }
.hero-foto .hero-lead { color: rgba(255,255,255,.86); }
.hero-foto .suchfeld { border-color: transparent; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
/* Die Karten bleiben weiß, der Text darin muss die weiße Hero-Schriftfarbe
   wieder verlieren — sonst steht Weiß auf Weiß. */
.hero-foto .kennzahl { color: var(--text); box-shadow: 0 6px 20px rgba(0,0,0,.18); }

.suchfeld {
  display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 14px; border: 1px solid #D8D3CD; border-radius: 12px; background: var(--grund);
  max-width: 560px;
}
.suchfeld input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none;
  font-family: inherit; font-size: 16px; color: var(--text); background: transparent;
}

.hero-seite { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

/* ---------- Hausbilder auf „Über uns" ----------
   Bewusst kein Band aus drei gleichen Kacheln: ein breites Bild oben,
   darunter ein Mosaik aus einem großen und zwei kleinen. */

.bildband { margin: 20px 0 8px; border-radius: 16px; overflow: hidden; background: var(--linie2); }
.bildband img { display: block; width: 100%; object-fit: cover; aspect-ratio: 16 / 9; }

/* Zahlen auf dem Bild: das Haus liegt dahinter, die Werte stehen darauf.
   Der Verlauf von unten haelt die weiße Schrift lesbar. */
.bildband-zahlen { position: relative; }
.bildband-zahlen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,12,0) 35%, rgba(20,16,12,.78) 100%);
}
.bildband-zahlen img { aspect-ratio: 16 / 10; }
.bildband-zahlen .kennzahlen {
  position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px;
  margin: 0; gap: 10px; flex-wrap: wrap;
}
.bildband-zahlen .kennzahl {
  background: transparent; padding: 0; text-align: left; color: #FFFFFF;
  flex: 1 1 110px;
}
.bildband-zahlen .kennzahl b { font-size: 21px; }
.bildband-zahlen .kennzahl span { color: rgba(255,255,255,.82); font-size: 12px; }

.mosaik { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0 30px; }
.mosaik figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--linie2); }
.mosaik img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.mosaik figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 6px 13px; border-radius: 16px;
  background: rgba(20,16,12,.74); color: #FFFFFF; font-size: 13px; font-weight: 600;
}

/* ---------- Bildergalerie der Flaechen ---------- */

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.galerie figure { margin: 0; }
.galerie-knopf {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--linie2); border-radius: 12px; overflow: hidden;
}
.galerie-knopf img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerie-knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.galerie figcaption { padding: 7px 2px 0; font-size: 13px; line-height: 1.4; color: var(--grau2); }

/* Grossansicht */
.lupe {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: rgba(16,13,11,.94); color: #FFFFFF;
}
.lupe::backdrop { background: rgba(16,13,11,.94); }
.lupe-innen {
  margin: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 56px 16px 64px;
}
.lupe-innen img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lupe-innen figcaption { font-size: 15px; line-height: 1.5; color: #E6E1DB; text-align: center; max-width: 46em; }
.lupe-zu, .lupe-pfeil {
  position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #FFFFFF; font-size: 26px; line-height: 1;
  font-family: inherit;
}
.lupe-zu { top: 14px; right: 14px; font-size: 30px; }
.lupe-pfeil { top: 50%; transform: translateY(-50%); }
.lupe-vor { left: 14px; }
.lupe-zurueck { right: 14px; }
.lupe-zu:hover, .lupe-pfeil:hover { background: var(--akzent); }
.lupe-zaehler {
  position: absolute; left: 0; right: 0; bottom: 18px; margin: 0;
  text-align: center; font-size: 13px; color: #9A948C;
}

/* Zwei gleichwertige Bilder nebeneinander, Beschriftung im Bild */
.bildpaar { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 16px 0 34px; }
.bildpaar figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--linie2); }
.bildpaar img { display: block; width: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.bildpaar figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 6px 13px; border-radius: 16px;
  background: rgba(20,16,12,.74); color: #FFFFFF; font-size: 13px; font-weight: 600;
}

/* ---------- 360-Grad-Ansicht ----------
   Vorschaubild liegt drunter und bleibt stehen, wenn WebGL fehlt. */

.pano { position: relative; }
.pano-start {
  position: absolute; z-index: 2; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px; border: 0; border-radius: 19px;
  background: rgba(20,16,12,.80); color: #FFFFFF;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pano-start:hover { background: var(--akzent); }
.pano-flaeche {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: none; outline: none;
}
.pano-zieht .pano-flaeche { cursor: grabbing; }
.pano-flaeche:focus-visible { outline: 3px solid var(--akzent); outline-offset: -3px; }
.pano-laeuft img { visibility: hidden; }
.pano-laeuft figcaption { z-index: 2; }
.pano-hinweis {
  position: absolute; z-index: 2; left: 12px; bottom: 12px;
  padding: 6px 13px; border-radius: 16px;
  background: rgba(20,16,12,.74); color: #FFFFFF; font-size: 13px; font-weight: 600;
  pointer-events: none;
}
.pano-laedt::before {
  content: 'Panorama wird geladen …';
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,16,12,.55); color: #FFFFFF; font-size: 14px; font-weight: 600;
}
.pano-laeuft.pano-laedt::before { content: none; }

/* Hausleitung: echte Gesichter statt Initialen.
   Quadratisch mit weichen Ecken und über die volle Kartenbreite — so sieht man
   die Personen deutlich besser als in einem kleinen Kreis. */
.leitung { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; margin-bottom: 30px; }
.leitung figure { margin: 0; padding: 14px; border: 1px solid var(--linie); border-radius: 16px; }
.leitung img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px;
  object-fit: cover; object-position: center 22%;
  display: block; margin: 0 0 12px; background: var(--pille);
}
.leitung figcaption { padding: 0 4px 4px; }
.leitung strong { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.leitung span { display: block; margin-top: 3px; font-size: 14px; color: var(--grau2); }

.kennzahlen { display: flex; gap: 8px; margin-top: 14px; }
.kennzahl { flex: 1 1 0; min-width: 0; padding: 9px 10px; background: var(--grund); border-radius: 10px; text-align: center; }
.kennzahl b { display: block; font-size: 19px; font-weight: 700; line-height: 1.1; }
.kennzahl span { display: block; font-size: 11px; color: var(--grau2); line-height: 1.3; }

/* Anklickbare Kennzahl: sieht aus wie die anderen, verhaelt sich wie ein Link */
a.kennzahl-link { text-decoration: none; color: inherit; }
a.kennzahl-link span { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--linie); }
a.kennzahl-link:hover b,
a.kennzahl-link:focus-visible b { color: var(--akzent-dunkel); }
a.kennzahl-link:hover span,
a.kennzahl-link:focus-visible span { color: var(--akzent-dunkel); text-decoration-color: currentColor; }

/* Schmales Band statt hoher weißer Karten — für Kennzahlen auf einem Foto.
   Steht bewusst nach den .hero-foto-Regeln, damit die Schrift weiß bleibt. */
.kennzahlen-band {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: 18px;
  border-radius: 14px; overflow: hidden;
  background: rgba(20,16,12,.58);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kennzahlen-band .kennzahl {
  flex: 1 1 128px; min-width: 0; padding: 10px 14px;
  text-align: left; border-radius: 0; box-shadow: none;
  background: transparent; color: #FFFFFF;
  border-left: 1px solid rgba(255,255,255,.16);
}
.kennzahlen-band .kennzahl:first-child { border-left: 0; }
.kennzahlen-band .kennzahl b { font-size: 20px; }
.kennzahlen-band .kennzahl span { font-size: 12px; color: rgba(255,255,255,.80); }

/* ---------- Umschalter mobil ---------- */

.reiter { display: flex; padding-top: 12px; }
.reiter button {
  flex: 1 1 0; height: 42px; border: 0; border-bottom: 2px solid var(--linie);
  background: transparent; font-family: inherit; font-size: 15px; font-weight: 500;
  color: var(--grau2); cursor: pointer;
}
.reiter button[aria-selected="true"] { border-bottom-color: var(--akzent); font-weight: 700; color: var(--text); }
.reiter .zahl { color: var(--grau2); font-weight: 500; }

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

.fach-zeile {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 16px; margin: 0 -16px;
  border-bottom: 1px solid var(--linie2);
  text-decoration: none; color: var(--text);
}
.fach-abzeichen {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--akzent-hell);
  display: flex; align-items: center; justify-content: center;
}
.fach-name {
  flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zahl-pille {
  flex: 0 0 auto; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--pille); color: var(--grau); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}

.person-zeile {
  display: flex; align-items: center; gap: 12px;
  min-height: 68px; padding: 10px 16px; margin: 0 -16px;
  border-bottom: 1px solid var(--linie2);
  text-decoration: none; color: var(--text);
}
.initialen {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--pille); color: var(--grau); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.initialen img, .profil-bild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center top; display: block; }
.initialen { overflow: hidden; }
.profil-bild { overflow: hidden; }
/* Fehlt ein Foto, steht die Hausmarke an seiner Stelle. Sie bringt ihren
   eigenen Kreis mit und darf nicht wie ein Portrait oben beschnitten werden. */
.platzhalter { background: transparent; }
.platzhalter img { object-fit: contain; object-position: center; }
.person-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.person-name { font-size: 15px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-job { font-size: 13px; line-height: 1.3; color: var(--grau2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marken { display: flex; gap: 5px; flex-wrap: wrap; }
.marke-klein {
  height: 19px; padding: 0 8px; border-radius: 10px; background: var(--pille);
  color: var(--grau); font-size: 11px; font-weight: 600; display: flex; align-items: center;
}

.leer-hinweis { padding: 28px 0; font-size: 15px; line-height: 1.5; color: var(--grau2); }

/* ---------- Formulare ---------- */

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-size: 14px; font-weight: 600; }
.feld input, .feld select, .feld textarea {
  height: 48px; padding: 0 14px; border: 1px solid #D8D3CD; border-radius: 10px;
  font-family: inherit; font-size: 16px; color: var(--text); background: var(--grund);
}
.feld textarea { height: auto; padding: 12px 14px; resize: vertical; }
.feld .pflicht { color: var(--akzent-dunkel); }
.formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.formular .breit { grid-column: 1 / -1; }
.haken { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.haken input { width: 20px; height: 20px; flex: 0 0 20px; margin: 2px 0 0; }

/* ---------- Newsletter ----------
   Ein Baustein für alle drei Stellen: Beitragsseite, Neuigkeiten und
   Arztprofil. Dunkel, damit er sich vom Fließtext löst, ohne zu schreien. */

.newsletter {
  margin: 28px 0; padding: 26px 24px; border-radius: 16px;
  color: #FFFFFF;
  background-color: var(--text);
  background-image: radial-gradient(420px 260px at 100% 0%, rgba(200,121,26,.38), rgba(200,121,26,0) 70%);
}
.newsletter-marke {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: #E9A86A;
}
.newsletter h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.newsletter p { margin: 0; font-size: 15px; line-height: 1.55; color: #CFC9C2; max-width: 40em; }
.newsletter-fein { margin-top: 12px; font-size: 13px; color: #8E8880; }
.newsletter-fein a { color: #CFC9C2; }

.nl-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.nl-form input {
  flex: 999 1 190px; min-width: 0; height: 48px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 24px;
  font-family: inherit; font-size: 16px;
  color: #FFFFFF; background: rgba(255,255,255,.07);
}
.nl-form input::placeholder { color: #9A948C; }
.nl-form input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }
.nl-form button { flex: 0 0 auto; height: 48px; }

/* Nebenspalte im Arztprofil: schmaler, Feld und Knopf untereinander */
.newsletter-schmal { padding: 22px 20px; }
.newsletter-schmal h2 { font-size: 19px; }
.newsletter-schmal p { font-size: 14px; }
.newsletter-schmal .nl-form { flex-direction: column; gap: 8px; }
.newsletter-schmal .nl-form input,
.newsletter-schmal .nl-form button { width: 100%; flex: 0 0 auto; }
.newsletter-schmal .nl-form button { justify-content: center; }

/* ---------- Karten für Beiträge und Flächen ---------- */

.beitrag-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 18px 0 30px; }
.beitrag-karte {
  display: flex; flex-direction: column;
  border: 1px solid var(--linie); border-radius: 14px; overflow: hidden;
  background: var(--grund); text-decoration: none; color: var(--text);
}
.beitrag-bild { display: block; aspect-ratio: 16 / 9; background: var(--linie2); overflow: hidden; }
.beitrag-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beitrag-bild-leer { display: flex; align-items: center; justify-content: center; }
.beitrag-text { display: flex; flex-direction: column; gap: 7px; padding: 15px 17px 17px; }
.beitrag-meta { font-size: 12px; color: var(--grau2); }
.beitrag-titel { font-size: 17px; font-weight: 700; line-height: 1.32; }
.beitrag-auszug { font-size: 14px; line-height: 1.55; color: var(--grau); }

/* ---------- Detailseiten ---------- */

.krumen { padding: 14px 0 0; font-size: 14px; color: var(--grau2); }
.krumen a { color: var(--grau2); }
.krumen span { padding: 0 6px; }

.profil-kopf { padding: 18px 0; border-bottom: 1px solid var(--linie2); }
.profil-zeile { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.profil-bild {
  flex: 0 0 68px; width: 68px; height: 68px; border-radius: 50%;
  background: var(--pille); color: var(--grau); font-size: 21px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.profil-kopf h1 { margin: 0 0 3px; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; }
.profil-job { margin: 0; font-size: 15px; color: var(--grau); }

.merkmale { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.merkmale li {
  height: 27px; padding: 0 11px; border-radius: 14px; background: var(--pille);
  color: var(--grau); font-size: 13px; font-weight: 600; display: flex; align-items: center;
}
.merkmale li.betont { background: var(--akzent-hell); color: var(--akzent-dunkel); }

.block { padding: 16px 0; border-bottom: 1px solid var(--linie2); }
.block h2 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.block p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: var(--text2); }
.block p:last-child { margin-bottom: 0; }
.block ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.75; color: var(--text2); }

.zeiten { margin: 0; }
.zeiten div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--linie2); }
.zeiten div:last-child { border-bottom: 0; }
.zeiten dt { font-size: 15px; font-weight: 600; }
.zeiten dd { margin: 0; font-size: 15px; color: var(--text2); }

details.falte { border: 1px solid var(--linie); border-radius: 10px; margin-bottom: 10px; }
details.falte > summary { padding: 14px 16px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
details.falte > summary::-webkit-details-marker { display: none; }
details.falte > summary::after { content: "+"; float: right; color: var(--akzent-dunkel); font-weight: 700; }
details.falte[open] > summary::after { content: "–"; }
details.falte > *:not(summary) { padding: 0 16px 15px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--grau); }
details.falte > ul:not(summary) { padding-left: 36px; padding-bottom: 15px; }

/* ---------- Feste Leiste unten, nur mobil ---------- */

.fussleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.97); border-top: 1px solid var(--linie);
}
.fussleiste > a { flex: 1 1 0; padding: 0 12px; }
/* Der Anrufknopf bleibt schmal, damit die beiden beschrifteten Knoepfe auch
   auf einem 320 px breiten Geraet ihren Text behalten. Farbe und Form sind
   dieselben wie bei den anderen beiden — das Symbol erbt das Weiss ueber
   currentColor. */
.fussleiste > a.leiste-symbol { flex: 0 0 48px; width: 48px; padding: 0; }
body { padding-bottom: 76px; }

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

.fuss { border-top: 1px solid var(--linie); background: var(--grund); margin-top: 32px; }
.fuss-innen {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  padding: 22px 16px; font-size: 14px; color: var(--grau2);
}
.fuss-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ================= Desktop ab 900 px ================= */

/* ---------- Haltepunkt der Kopfzeile ----------
   Die ausgeschriebene Menuezeile braucht mehr Platz als der Rest des
   900er-Layouts. Mit sechs Punkten passt sie bei 1024 px nicht mehr neben
   "Rueckruf anfordern" — gemessen: 38 px zu wenig. Schon mit fuenf Punkten
   blieben dort nur 20 px Reserve, die Zeile war also immer knapp.

   Enger stellen waere nur eine Verschiebung desselben Problems, darum
   erscheint die volle Zeile erst ab 1140 px. Darunter uebernimmt der
   Menueschalter, der ohnehin fuer schmale Schirme da ist. Bei 1100 px
   blieben nur 21 px Reserve — zu wenig, falls die Schrift beim Besucher
   etwas breiter laedt als hier gemessen.

   Wer hier einen Menuepunkt ergaenzt, prueft diese Breite erneut. */
@media (min-width: 1140px) {
  /* Die Punkte duerfen nicht umbrechen — zweizeilige Menuepunkte neben
     einzeiligen lesen sich schlecht. Der Abstand gibt stattdessen nach. */
  .kopf-innen { flex-wrap: nowrap; }
  .haupt-nav,
  .haupt-nav[data-offen="true"] {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
    gap: clamp(12px, 1.5vw, 24px);
    padding: 0; border: 0; min-width: 0; flex: 0 1 auto; order: 0;
  }
  .haupt-nav a {
    position: relative;
    min-height: 0; padding: 0; border: 0; white-space: nowrap; line-height: 1.2;
    font-size: 14px; font-weight: 400; color: var(--grau2);
    background: none;
  }
  .haupt-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

  /* Der Strich unter dem Punkt, auf dem der Zeiger steht.
     Er waechst von links, statt einfach da zu sein — das fuehrt das Auge
     mit und verraet, welcher Punkt gemeint ist, auch wenn zwei eng
     nebeneinander liegen.

     Bewusst nur Farbe und Strich: eine Aenderung der Schriftstaerke
     wuerde den Punkt breiter machen und die ganze Zeile verschieben,
     weil sie nicht umbrechen darf. */
  .haupt-nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 2px; border-radius: 2px; background: var(--akzent);
    transform: scaleX(0); transform-origin: left center;
  }
  .haupt-nav a:hover,
  .haupt-nav a:focus-visible { color: var(--text); }
  .haupt-nav a:hover::after,
  .haupt-nav a:focus-visible::after { transform: scaleX(1); }

  /* Die aktuelle Seite traegt den Strich dauerhaft, in der dunklen
     Akzentfarbe — damit bleibt unterscheidbar, wo man ist und worauf
     man zeigt. */
  .haupt-nav a[aria-current="page"]::after {
    background: var(--akzent-dunkel); transform: scaleX(1);
  }

  @media (prefers-reduced-motion: no-preference) {
    .haupt-nav a { transition: color .18s ease; }
    .haupt-nav a::after { transition: transform .2s ease; }
  }
  .nav-schalter { display: none; }
}

@media (min-width: 900px) {
  .huelle { padding: 0 32px; }

  .kopf-aktionen .knopf-rund,
  .kopf-aktionen .knopf-symbol { display: flex; }
  .kopf-innen { min-height: 68px; }
  .marke-zeichen { width: 30px; height: 30px; flex-basis: 30px; }
  .marke-text { font-size: 15px; }

  .hero { padding: 48px 0 40px; }
  .hero-foto { padding: 76px 0 64px; }
  .hero-raster { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
  .hero-haupt { flex: 999 1 440px; min-width: 0; }
  .hero-seite { flex: 1 1 330px; min-width: 0; margin-top: 0; }
  .kennzahlen { margin-top: 0; }
  .profil-bild { flex-basis: 140px; width: 140px; height: 140px; font-size: 38px; }
  .hero h1 { font-size: 42px; max-width: 15em; }
  .hero-lead { font-size: 17px; margin-bottom: 22px; }
  .suchfeld { height: 56px; padding: 0 18px; }
  .suchfeld input { font-size: 17px; }

  .kennzahlen {
    flex: 1 1 260px; min-width: 0; flex-direction: column; gap: 2px; margin-top: 0;
    background: var(--akzent-rand); border: 1px solid var(--akzent-rand); border-radius: 14px; overflow: hidden;
  }
  .bildband img { aspect-ratio: 21 / 9; }
  .bildband-zahlen img { aspect-ratio: 21 / 9; }
  /* Die Desktop-Regeln fuer .kennzahlen bauen eine helle Karte — auf dem Bild
     muss der Block wieder flach und waagrecht werden. */
  .bildband-zahlen .kennzahlen {
    left: 30px; right: 30px; bottom: 26px; gap: 34px;
    flex-direction: row; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .bildband-zahlen .kennzahl { flex: 0 1 auto; padding: 0; background: transparent; box-shadow: none; }
  .bildband-zahlen .kennzahl b { font-size: 34px; }
  .bildband-zahlen .kennzahl span { font-size: 13px; }
  /* Feste Gesamthöhe: nur so bekommen die Zeilen ein definiertes Maß und das
     große Bild links kann sich über beide strecken. */
  .mosaik { grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 16 / 7.6; }
  .mosaik figure { height: 100%; }
  .mosaik img { aspect-ratio: auto; }
  .mosaik-gross { grid-row: 1 / 3; }

  .newsletter { padding: 32px 30px; }
  .newsletter h2 { font-size: 25px; }
  .newsletter-breit { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: space-between; }
  .newsletter-breit > div { flex: 999 1 380px; min-width: 0; }
  .newsletter-breit .nl-form { flex: 1 1 320px; margin-top: 0; }
  .newsletter-schmal { padding: 22px 20px; }
  .newsletter-schmal h2 { font-size: 19px; }

  .hero-foto .kennzahlen { border-color: transparent; box-shadow: 0 16px 40px rgba(0,0,0,.30); }
  .hero-foto .kennzahl { box-shadow: none; }
  .kennzahl { border-radius: 0; padding: 18px 22px; text-align: left; }

  /* Das Band bleibt waagrecht und schmal — die Spaltenregeln oben gelten nicht. */
  .kennzahlen-band {
    flex-direction: row; max-width: 820px; margin-top: 26px;
    background: rgba(20,16,12,.55); border-color: rgba(255,255,255,.18);
    border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.26);
  }
  .kennzahlen-band .kennzahl { padding: 13px 22px; }
  .kennzahlen-band .kennzahl b { font-size: 26px; }
  .kennzahlen-band .kennzahl span { font-size: 12px; }
  .kennzahl b { font-size: 30px; letter-spacing: -0.02em; }
  .kennzahl span { font-size: 13px; }

  /* Zwei Spalten statt Umschalter */
  .reiter { display: none; }
  .arbeitsflaeche { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; padding: 40px 0 8px; }
  .spalte-fach {
    flex: 1 1 300px; min-width: 0;
    border: 1px solid var(--linie); border-radius: 14px; overflow: hidden;
  }
  .spalte-fach-kopf {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 14px 18px; background: var(--flaeche); border-bottom: 1px solid var(--linie);
    font-size: 15px; font-weight: 700;
  }
  .spalte-fach-kopf span { font-size: 12px; font-weight: 400; color: var(--grau2); }
  .spalte-fach-liste { max-height: 620px; overflow-y: auto; }
  .fach-zeile { margin: 0; padding: 0 18px; height: 46px; }

  .spalte-personen { flex: 999 1 620px; min-width: 0; }
  .personen-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-bottom: 16px;
  }
  .personen-kopf h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }

  /* Karten statt Zeilen */
  .personen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .person-zeile {
    margin: 0; padding: 16px; min-height: 0; align-items: flex-start;
    border: 1px solid var(--linie); border-radius: 12px; background: var(--grund);
  }
  .initialen { flex-basis: 46px; width: 46px; height: 46px; font-size: 15px; }

  .fussleiste { display: none; }
  body { padding-bottom: 0; }

  .krumen { padding: 18px 0 0; }
  .profil-kopf { padding: 26px 0 24px; }
  .profil-kopf h1 { font-size: 34px; }
  .profil-job { font-size: 18px; }

  .detail-raster { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; padding-top: 28px; }
  .detail-haupt { flex: 999 1 560px; min-width: 0; max-width: 44em; }
  .detail-seite { flex: 1 1 320px; min-width: 0; }
  .detail-seite .block {
    border: 1px solid var(--linie); border-radius: 14px; padding: 0; margin-bottom: 18px; overflow: hidden;
  }
  .detail-seite .block h2 {
    margin: 0; padding: 14px 18px; background: var(--flaeche);
    border-bottom: 1px solid var(--linie); font-size: 15px;
  }
  .detail-seite .block > *:not(h2) { padding-left: 18px; padding-right: 18px; }
  .detail-seite .block > *:last-child { padding-bottom: 16px; }
  .block h2 { font-size: 21px; }
  .block p { font-size: 16px; }
  .detail-seite .block p { font-size: 15px; }

  .fuss-innen { padding: 26px 32px; }
}

/* ================= Bewegung =================
   Alles hier haengt an der Klasse "bewegt" auf <html>. Die setzt ein kurzes
   Skript im <head> — aber nur, wenn IntersectionObserver vorhanden ist UND
   das Betriebssystem keine reduzierte Bewegung verlangt. Ohne JavaScript
   greift nichts davon, und die Seite steht vollstaendig da.
   Zusaetzlich schaltet die Medienabfrage am Ende alles ab. */

@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes aufziehen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lupeAuf { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes menueAuf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- 1. Einblenden beim Scrollen --- */
.bewegt .person-zeile,
.bewegt .beitrag-karte,
.bewegt .block,
.bewegt .kennzahl,
.bewegt .fach-zeile {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}
.bewegt .da { opacity: 1; transform: none; }

/* --- 2. Weiche Zustandswechsel --- */

/* Filter: nur die sichtbar gebliebenen Zeilen blenden kurz auf. Die
   hidden-Logik bleibt unberuehrt — sonst bricht der Filter. */
.bewegt .personen-liste.wechselt .person-zeile:not([hidden]),
.bewegt .fach-liste.wechselt .fach-zeile:not([hidden]) {
  animation: einblenden .22s ease both;
}

/* Nachgeladene Galeriekacheln */
.bewegt .galerie figure[data-mehr]:not([hidden]) { animation: aufziehen .35s ease both; }

/* Grossansicht */
.bewegt .lupe[open] { animation: lupeAuf .16s ease both; }

/* Mobiles Menue */
.bewegt .haupt-nav[data-offen="true"] { animation: menueAuf .2s ease both; }

/* --- 3. Mikro-Interaktionen --- */
/* Langschreibweise statt Kurzform: die Kurzform wuerde die oben gesetzte
   Deckkraft-Ueberblendung mit herauswerfen, und das Einblenden bliebe aus. */
.person-zeile, .beitrag-karte {
  transition-property: transform, border-color, box-shadow, opacity;
  transition-duration: .18s, .18s, .18s, .45s;
  transition-timing-function: ease;
}
.galerie-knopf img { transition: transform .35s ease; }
.knopf-rund, .knopf-rand, .knopf-symbol, .galerie-knopf { transition: transform .12s ease, background-color .18s ease, border-color .18s ease; }
.knopf-rund:active, .knopf-rand:active, .knopf-symbol:active { transform: scale(.98); }

@media (hover: hover) {
  .beitrag-karte:hover { transform: translateY(-2px); border-color: var(--akzent); box-shadow: 0 8px 22px rgba(27,26,24,.10); }
  .person-zeile:hover { border-color: var(--akzent); }
  .galerie-knopf:hover img { transform: scale(1.05); }
}

/* --- 4. Seiteninhalt beim Laden --- */
.bewegt main { animation: einblenden .12s ease both; }

/* --- Abschalter --- */
@media (prefers-reduced-motion: reduce) {
  .bewegt .person-zeile,
  .bewegt .beitrag-karte,
  .bewegt .galerie figure,
  .bewegt .leitung figure,
  .bewegt .bildpaar figure,
  .bewegt .mosaik figure,
  .bewegt .block,
  .bewegt .kennzahl,
  .bewegt .fach-zeile { opacity: 1; transform: none; transition: none; }
  .bewegt main,
  .bewegt .lupe[open],
  .bewegt .haupt-nav[data-offen="true"],
  .bewegt .galerie figure[data-mehr]:not([hidden]),
  .bewegt .personen-liste.wechselt .person-zeile:not([hidden]),
  .bewegt .fach-liste.wechselt .fach-zeile:not([hidden]) { animation: none; }
  .person-zeile, .beitrag-karte, .galerie-knopf img,
  .knopf-rund, .knopf-rand, .knopf-symbol { transition: none; }
  .beitrag-karte:hover, .knopf-rund:active, .knopf-rand:active, .knopf-symbol:active { transform: none; }
}

/* ---------- Konditionen-Popup der OP-Seite ---------- */

.op-detail { height: 38px; padding: 0 16px; font-size: 14px; }

.op-dialog {
  width: min(680px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0; border: 0; border-radius: 16px;
  background: var(--grund); color: var(--text);
  box-shadow: 0 24px 60px rgba(20,16,12,.32);
}
.op-dialog::backdrop { background: rgba(20,16,12,.62); }
.op-inhalt { padding: 28px 26px 26px; overflow-y: auto; max-height: calc(100dvh - 48px); }
.op-zu {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: var(--pille); color: var(--grau); font-size: 24px; line-height: 1;
  font-family: inherit; cursor: pointer;
}
.op-zu:hover { background: var(--akzent); color: #FFFFFF; }

.op-marke {
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--akzent-dunkel);
}
.op-dialog h2 { margin: 0 0 14px; font-size: 23px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; padding-right: 40px; }
.op-dialog h3 { margin: 0 0 8px; font-size: 15px; }
.op-dialog ul { margin: 0; padding-left: 19px; line-height: 1.65; color: var(--text2); font-size: 15px; }
.op-hinweis { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--grau); }

.op-tabelle { border: 1px solid var(--linie); border-radius: 12px; overflow-x: auto; margin-bottom: 12px; }
.op-tabelle table { min-width: 300px; }
.op-tabelle table { width: 100%; border-collapse: collapse; font-size: 15px; }
.op-tabelle th {
  padding: 10px 14px; background: var(--flaeche); border-bottom: 1px solid var(--linie);
  text-align: left; font-size: 13px; font-weight: 700;
}
.op-tabelle td { padding: 10px 14px; border-bottom: 1px solid var(--linie2); }
.op-tabelle tr:last-child td { border-bottom: 0; }
.op-tabelle .zahl { text-align: right; white-space: nowrap; }
.op-tabelle td.zahl { font-variant-numeric: tabular-nums; font-weight: 600; }
.op-fussnote { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--grau2); }

.op-spalten { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--linie); }
.op-kontakt { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--grau2); }

@media (min-width: 620px) {
  .op-spalten { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (prefers-reduced-motion: no-preference) {
  .op-dialog[open] { animation: lupeAuf .16s ease both; }
}

.op-einheit { margin: -6px 0 14px; font-size: 13px; color: var(--grau2); }
/* Auf schmalen Geräten enger setzen, damit die drei Spalten nebeneinander passen */
@media (max-width: 460px) {
  .op-tabelle table { font-size: 14px; min-width: 0; }
  .op-tabelle th, .op-tabelle td { padding: 9px 8px; }
  .op-inhalt { padding: 24px 16px 22px; }
}
/* ---------- Rueckmeldung der Formulare ---------- */
.form-meldung {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 10px;
  font-size: 15px; line-height: 1.5;
}
.form-meldung-warten { background: var(--pille); color: var(--grau); }
.form-meldung-danke   { background: #E8F3EC; color: #1F5133; border: 1px solid #BFDDCB; font-weight: 600; }
.form-meldung-fehler  { background: #FBEAE6; color: #8A2B14; border: 1px solid #F0C8BD; }
.nl-form .form-meldung { flex: 1 1 100%; background: rgba(255,255,255,.14); color: #FFFFFF; border: 0; }
.nl-form .form-meldung-danke { background: rgba(255,255,255,.18); color: #FFFFFF; }


/* ---------- Karte auf der Anfahrtsseite ----------
   Ein Bild, kein eingebettetes Kartenfenster. Das Bild liegt auf unserem
   Server; beim Aufruf der Seite wird nichts an Dritte uebertragen. Der
   Klick darauf oeffnet den Routenplaner — erst dann. */
.karte-bild {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--linie); border-radius: 16px;
  line-height: 0; background: var(--pille);
}
.karte-bild img { width: 100%; height: auto; display: block; }
/* Der Knopf liegt auf dem Bild. Er sagt, was der Klick tut — ohne ihn
   sieht eine Karte aus wie eine Karte, die man schieben kann. */
.karte-bild-knopf {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center;
  padding: 8px 15px; border-radius: 999px;
  background: var(--akzent-dunkel); color: #FFFFFF;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 2px 10px rgba(20, 16, 12, .3);
}
.karte-bild:hover .karte-bild-knopf,
.karte-bild:focus-visible .karte-bild-knopf { background: var(--akzent); }
@media (prefers-reduced-motion: no-preference) {
  .karte-bild-knopf { transition: background .18s ease; }
}
.karte-wege { margin: 0; font-size: 13px; color: var(--grau2); line-height: 1.5; }
.karte-wege a { color: var(--grau); }