/* Zahnarztpraxis im Landambulatorium – eine CSS-Datei für alle Seiten.
   Mobile first: Grundregeln gelten fürs Handy, ab 768 px / 1024 px wird erweitert. */

/* ---------- Schrift (lokal, Open Sans, SIL OFL – wie auf der bisherigen Website) ---------- */
@font-face {
  font-family: "Open Sans";
  src: url("schriften/open-sans-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("schriften/open-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("schriften/open-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ---------- Farben und Maße ----------
   Warm: Sand und Creme aus Sandstein und gelber Wand der Fotos, Espresso statt Anthrazit,
   Honig/Ocker als kleiner Akzent (Linien, Symbole). Kontraste auf --grund gemessen. */
:root {
  --weiss: #fff;
  --grund: #fcf9f4;         /* Seitenhintergrund, warmes Weiß */
  --flaeche: #f5ede2;       /* Sand: farbige Abschnitte (.band) */
  --linie: #e6d9c8;
  --text: #2a221d;          /* 14.9:1 auf --grund */
  --text-2: #5e5148;        /* 7.3:1 auf --grund, 6.6:1 auf Sand */
  --dunkel: #3b2e26;        /* Espresso: Telefon-Taste (Weiß darauf 13:1) */
  --dunkel-hover: #241b16;
  --akzent: #8c5a2e;        /* gedämpftes Ocker: 5.5:1 auf --grund, 5:1 auf Sand */
  --akzent-hell: #f3e7d6;   /* Hintergrund für Symbole und Hinweise */
  --nacht: #2f2520;         /* Fuß */
  --offen: #17663a;         /* 6.7:1 auf --grund */
  --zu: #a3261b;            /* 7:1 auf --grund */
  --gelb: #fbeac2;          /* Hinweisbanner */
  --gelb-rand: #c4892a;
  --fokus: #1a5fb4;
  --schatten: 0 1px 2px rgb(59 46 38 / .06), 0 10px 30px -12px rgb(59 46 38 / .18);

  --abstand: 1rem;
  --abschnitt: 2.5rem;      /* Abstand am Anfang und Ende jedes Abschnitts, ab 1024 px größer */
  --rund: 16px;
  --rund-gross: 24px;
  --breite: 72rem;
}

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

html {
  font-size: 112.5%; /* 18 px Grundschrift, wächst mit der Browser-Einstellung */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--kopf-hoehe, 8rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; text-wrap: balance; }
h1, h2 { font-weight: 300; letter-spacing: -.015em; } /* große Überschriften dünn, wie auf der bisherigen Website */
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; font-weight: 600; }
p, ul { margin: 0 0 1em; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a { color: var(--text); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--dunkel-hover); text-decoration-thickness: 3px; }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 4px;
}

.icon {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.springen {
  position: absolute; left: var(--abstand); top: -10rem;
  background: var(--dunkel); color: var(--weiss); padding: .75rem 1rem; z-index: 10;
}
.springen:focus { top: var(--abstand); }

.innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--abstand);
}

/* ---------- Kopfbereich ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;  /* bleibt beim Scrollen oben stehen */
  background: rgb(252 249 244 / .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf .innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-top: .75rem;
  padding-bottom: .5rem;
}
.logo img { width: 100px; }
.kopf-tel {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; text-decoration: none; white-space: nowrap;
  min-height: 48px; padding: 0 .6rem;
}
.hauptnav { width: 100%; }

/* Telefon und Öffnungsstatus rechts oben */
.kopf-kontakt { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.kopf-status {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 48px; padding: 0 .6rem; margin-top: -.6rem; /* Pillen überlappen nur mit dem durchsichtigen Rand */
  font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.kopf-status .punkt { width: .65rem; height: .65rem; border-radius: 50%; background: currentColor; flex: none; }
.kopf-status[data-offen="ja"] { color: var(--offen); }
.kopf-status[data-offen="nein"] { color: var(--zu); }
/* Einzeln stehende Links im Kopf: beim Überfahren eine Pille wie im Menü (statt Unterstreichung) */
.kopf-tel, .kopf-status {
  border: .3rem solid transparent; border-radius: 999px; background-clip: padding-box; /* gleich hoch wie die Menü-Pillen */
  transition: background-color .2s ease-out;
}
.kopf-tel:hover, .kopf-status:hover { background-color: rgb(140 90 46 / .07); }

/* Mit JavaScript liegt der Kopf fest über der Seite (body bekommt seine volle Höhe als Abstand),
   so springt der Inhalt nicht, wenn der Kopf beim Scrollen kleiner wird. */
.kopf-js .kopf { position: fixed; left: 0; right: 0; }
.kopf-js body { padding-top: var(--kopf-voll, 0px); }
.kopf .innen, .logo img { transition: padding .15s ease-out, width .15s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .kopf .innen, .logo img { transition: none; }
}
.kopf-klein .kopf .innen { flex-wrap: nowrap; padding-top: .25rem; padding-bottom: .25rem; }
.kopf-klein .kopf { box-shadow: 0 2px 12px rgb(59 46 38 / .1); }
.kopf-klein .kopf-kontakt { flex-direction: row-reverse; align-items: center; gap: .5rem; }
.kopf-klein .kopf-status { margin-top: 0; }
.kopf-klein .kopf-kontakt { padding-left: .75rem; }
@media (max-width: 767px) {
  /* Handy, eine Zeile: Menü + Telefon-Symbol */
  .kopf-klein .logo { display: none; }
  .kopf-klein .hauptnav { flex: 1; }
  .kopf-klein .hauptnav ul { gap: 0; }
  .kopf-klein .hauptnav a { --nav-x: .2rem; font-size: .9rem; white-space: nowrap; border-width: .15rem; }
  .kopf-klein .kopf-tel { width: 48px; justify-content: center; border-width: .15rem; } /* wie die Menüpunkte daneben */
  .kopf-klein .kopf-tel .icon { width: 1.5em; height: 1.5em; }
  .kopf-klein .kopf-tel-text, .kopf-klein .kopf-status-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* nur der farbige Punkt, als kleines Abzeichen oben rechts am Telefon-Symbol */
  .kopf-klein .kopf-status { position: absolute; top: 4px; right: 2px; min-height: 0; padding: 0; border: 0; pointer-events: none; }
  .kopf-klein .kopf-status .punkt { width: .8rem; height: .8rem; box-shadow: 0 0 0 2px var(--grund); }
}
.hauptnav ul {
  display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0;
}
.hauptnav a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--nav-x, .5rem);
  text-decoration: none; flex: 1; white-space: nowrap; /* Menüpunkte nie umbrechen */
  /* Pille: der durchsichtige Rand hält die Fläche schmaler als die 48 px hohe Tippfläche */
  border: .3rem solid transparent; border-radius: 999px; background-clip: padding-box;
  transition: background-color .2s ease-out;
}
.hauptnav li { flex: 1; display: flex; }
.hauptnav a:hover { background-color: rgb(140 90 46 / .07); }
.hauptnav a[aria-current="page"] {
  font-weight: 600; color: var(--dunkel);
  background-color: var(--akzent-hell); box-shadow: inset 0 0 0 1px rgb(140 90 46 / .25);
  view-transition-name: nav-aktiv;
}
/* Beim Seitenwechsel gleitet die Pille vom alten zum neuen Menüpunkt (View Transitions;
   Browser ohne Unterstützung wechseln einfach die Seite). Die Wörter haben eigene Namen,
   damit sie an ihrem Platz bleiben und nur die Fläche wandert. */
.hauptnav li:nth-child(1) span { view-transition-name: nav-1; }
.hauptnav li:nth-child(2) span { view-transition-name: nav-2; }
.hauptnav li:nth-child(3) span { view-transition-name: nav-3; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(nav-aktiv) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .hauptnav a, .kopf-tel, .kopf-status, .fuss a, .fuss .einstellungen-oeffnen { transition: none; }
}

/* ---------- Hinweisbanner (Urlaub / Vertretung) ---------- */
/* Durchgehende Leiste über die ganze Breite direkt unter dem Kopf; mehrere Hinweise stehen untereinander */
.banner { background: var(--gelb); border-bottom: 1px solid #ecd49a; }
.banner .innen { display: flex; align-items: flex-start; gap: .75rem; padding-top: .85rem; padding-bottom: .85rem; }
.banner .icon { margin-top: .2em; color: #8a5a0b; } /* 5:1 auf dem Gelb */
.banner p { margin: 0; line-height: 1.5; }
.banner .zeitraum { font-weight: 600; }

/* ---------- Einstieg ---------- */
/* Handy/Tablet: Foto randlos, der Text liegt als Karte darunter und ragt etwas ins Foto.
   Computer: Text rechts über dem Foto, ein weicher Verlauf in Creme sorgt für Lesbarkeit. */
.einstieg { padding-bottom: calc(var(--abschnitt) - .5rem); } /* zusammen mit dem Abstand über den Karten */
.einstieg-bild img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 20%; /* Gesicht bleibt im Bild */
}
.einstieg-text {
  position: relative;
  margin-top: -3rem;
  padding: 1.5rem 1.25rem .25rem;
  background: var(--grund);
  border-radius: var(--rund-gross) var(--rund-gross) 0 0;
  box-shadow: 0 -14px 24px -20px rgb(59 46 38 / .35);
}
.slogan { display: block; font-size: .6em; font-weight: 400; color: var(--akzent); margin-top: .35em; }
.zitat { margin: 0 0 1.25rem; } /* Versicherung: normaler Text, kein Hervorhebungskasten */
.zitat p { margin: 0; }
.einstieg .zitat { margin-bottom: 0; }

/* Telefon-Taste: Nummer groß als Blickfang, Zweck klein darüber, Symbol in hellem Kreis */
.taste-tel {
  display: flex; align-items: center; gap: .75rem;
  width: 100%;
  padding: .5rem 1rem .5rem .5rem;
  background: var(--dunkel);
  color: var(--weiss);
  border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgb(59 46 38 / .7);
  text-decoration: none;
  line-height: 1.25;
  text-align: left;
  transition: background-color .2s, transform .15s;
}
.taste-tel:hover { background: var(--dunkel-hover); color: var(--weiss); }
.taste-tel:active { transform: scale(.98); }
/* Kreis hinter dem Symbol per Schatten statt Innenabstand: Innenabstand auf <svg> schneidet das Symbol ab */
.taste-tel .icon {
  width: 1.55rem; height: 1.55rem; margin: .85rem; border-radius: 50%;
  background: var(--akzent-hell); box-shadow: 0 0 0 .85rem var(--akzent-hell); color: var(--dunkel);
  transition: transform .2s ease-out;
}
.taste-tel:hover .icon { transform: rotate(-12deg); }
@media (prefers-reduced-motion: reduce) { .taste-tel .icon { transition: none; } }
.tel-zweck { display: block; font-size: .8rem; letter-spacing: .02em; color: #eadfd1; } /* 11:1 auf Espresso */
.tel-nummer { display: block; font-size: 1.35rem; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.einstieg .taste-tel { margin-bottom: 1.25rem; }

/* ---------- Kästen ---------- */
.kaesten {
  display: grid;
  gap: var(--abstand);
  padding-top: .5rem; padding-bottom: var(--abschnitt); /* nur oben/unten, der Seitenrand kommt von .innen */
}
/* Karten: weiß auf Creme, weicher Schatten, Symbol in einem Honig-Kreis */
.kasten {
  position: relative;
  background: var(--weiss);
  border: 1px solid rgb(230 217 200 / .7);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten);
  padding: 1.5rem;
}
.kasten h2 { display: flex; align-items: center; gap: .75rem; font-size: 1.3rem; font-weight: 600; letter-spacing: 0; margin-bottom: 1rem; }
.kasten h2 .icon {
  width: 1.3rem; height: 1.3rem; margin: .6rem; border-radius: 50%;
  background: var(--akzent-hell); box-shadow: 0 0 0 .6rem var(--akzent-hell); color: var(--akzent);
}
.kasten > :last-child { margin-bottom: 0; }
.kasten h3, .abschnitt .kasten h3 { margin-top: 0; }

/* Öffnungszeiten */
.status {
  display: flex; align-items: flex-start; gap: .5rem;
  font-weight: 600; margin-bottom: 1rem;
}
.status::before {
  content: ""; width: .8em; height: .8em; border-radius: 50%; background: currentColor; flex: none; margin-top: .4em;
}
.status[data-offen="ja"] { color: var(--offen); }
.status[data-offen="nein"] { color: var(--zu); }
.status:empty { display: none; }

.zeiten { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { text-align: left; vertical-align: top; padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 0; }
.zeiten th { font-weight: 400; padding-right: 1rem; } /* darf umbrechen („Dienstag (heute)“ in schmalen Spalten) */
.zeiten tr.heute th, .zeiten tr.heute td { font-weight: 600; background: var(--akzent-hell); }
/* Hervorhebung ragt per Schatten seitlich über die Zelle hinaus, der Text bleibt bündig mit den anderen Tagen */
.zeiten tr.heute th { border-radius: 8px 0 0 8px; box-shadow: -.5rem 0 0 var(--akzent-hell); }
.zeiten tr.heute td { border-radius: 0 8px 8px 0; box-shadow: .5rem 0 0 var(--akzent-hell); }
/* Feste Spalten in em (unabhängig von der Schriftstärke): Strich unter Strich, „Uhr“ unter „Uhr“ */
.zeiten .zeit { display: grid; grid-template-columns: 2.75em 1em 2.75em auto; }
.zeiten .zeit > :nth-child(-n+3) { text-align: right; }
.zeiten .zeit > :nth-child(2) { text-align: center; }
.zeiten .zeit > :last-child { padding-left: .3em; }

/* Anfahrt kurz */
.adresse { font-style: normal; margin-bottom: 1rem; }
.taste {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .5rem 1rem;
  border: 2px solid var(--dunkel); border-radius: 999px;
  background: var(--weiss); color: var(--text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.taste { transition: background-color .15s, color .15s; }
.taste:hover { background: var(--dunkel); color: var(--weiss); }

/* Facebook-Beiträge (von unserem Server, siehe facebook.php): untereinander, getrennt durch feine Linien */
.beitraege { margin-bottom: 1.25rem; }
.beitrag { display: flex; flex-direction: column; gap: .5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linie); }
.beitrag + .beitrag { padding-top: 1.25rem; }
.beitrag-bild img { display: block; width: 100%; height: auto; max-height: 16rem; object-fit: cover; border-radius: var(--rund); }
.beitrag-datum { font-size: .9rem; font-weight: 600; color: var(--akzent); }
.beitrag-text {
  margin: 0; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.beitrag-link { align-self: flex-start; }

/* Einwilligung für Karte und Facebook: Leiste unten, beide Tasten gleichwertig */
.einwilligung {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--weiss); border-top: 1px solid var(--linie);
  border-radius: var(--rund-gross) var(--rund-gross) 0 0;
  box-shadow: 0 -10px 30px -12px rgb(59 46 38 / .3);
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
}
.einwilligung .innen { display: grid; gap: .75rem; }
.einwilligung h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin-bottom: .35rem; }
.einwilligung p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--text-2); }
.einwilligung-tasten { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.einwilligung-tasten .taste { justify-content: center; }
/* „Cookie-Einstellungen“ im Fuß: Knopf, der wie die Links daneben aussieht */
.einstellungen-oeffnen {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* Bereitschaftsdienst */
.dienste { list-style: none; padding: 0; margin: .5rem 0 1rem; }
.dienste li { display: flex; gap: .5rem; align-items: center; padding: .25rem 0; font-weight: 600; }

/* ---------- Anfahrt ausführlich ---------- */
.abschnitt { padding: var(--abschnitt) 0; }
.band { background: var(--flaeche); }  /* jeder zweite Abschnitt auf Sand, statt Trennlinien */
/* kleine Honig-Linie über jeder Abschnittsüberschrift */
.abschnitt h2::before {
  content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 2px;
  background: var(--akzent); margin-bottom: .9rem;
}
/* Abstand nach unten regelt der Abschnitt selbst, nicht das letzte Element darin */
.abschnitt .innen > :last-child, #keine-stellen,
.nachbarn li:last-child, .rechtstext > :last-child { margin-bottom: 0; }
.anfahrt-wege { max-width: 42rem; }
.weg { list-style: none; padding: 0; margin: 0; }
.weg li { display: flex; gap: .75rem; margin-bottom: 1.25rem; }
.weg .icon {
  width: 1.3rem; height: 1.3rem; margin: .1rem .6rem 0; border-radius: 50%; /* mittig zur ersten Zeile der Überschrift */
  background: var(--weiss); box-shadow: 0 0 0 .6rem var(--weiss); color: var(--akzent);
}
.weg h3, .abschnitt .weg h3 { margin-top: 0; margin-bottom: .25em; }
.weg p { margin: 0; }

.karte {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .75rem;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.25rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  padding: 1.25rem;
}
.karte p { margin: 0; color: var(--text-2); }
.karte iframe { width: 100%; height: 100%; border: 0; border-radius: var(--rund-gross); }
.karte.geladen { padding: 0; }

/* ---------- Fuß ---------- */
.fuss {
  background: var(--nacht);
  color: #f5ede2;           /* 12.9:1 auf --nacht */
  padding: var(--abschnitt) 0;
}
.fuss a { color: #f5ede2; }
/* Links im Fuß ohne Unterstreichung, beim Überfahren eine helle Pille; Text bleibt bündig mit den Überschriften */
.fuss a, .fuss .einstellungen-oeffnen {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: 0 .75rem; margin-left: -.75rem; border-radius: 999px;
  text-decoration: none; overflow-wrap: break-word; transition: background-color .2s ease-out;
}
.fuss a:hover, .fuss .einstellungen-oeffnen:hover { color: var(--weiss); background-color: rgb(255 255 255 / .1); }
.fuss :focus-visible { outline-color: #dcbc94; }
.fuss .innen { display: grid; gap: 1.5rem; }
.fuss h2 { font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #dcbc94; } /* 8.3:1 */
.fuss p { margin: 0 0 .5rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; }

/* Slideshow im Abschnitt „Willkommen“ */
/* Slideshow und Außenfoto: randlos über die ganze Breite, jeweils am Ende ihres Abschnitts */
.slideshow { margin-top: 2rem; }
.abschnitt-bild { display: block; margin-block: 2.5rem; }
.abschnitt-bild img { width: 100%; }
.slides {
  list-style: none; margin: 0; padding: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.js .slides { scrollbar-width: none; }               /* mit Tasten zum Blättern ist die Leiste unnötig */
.js .slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
.slide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; }
.slide-tiefer img { object-position: center 50%; } /* Prophylaxe-Zimmer: Ausschnitt etwas tiefer, mehr vom Raum */
/* Bildtext und Steuerung bündig mit dem Seitenrand der Texte */
.slide-text, .slide-steuerung { padding-inline: max(var(--abstand), (100% - var(--breite)) / 2 + var(--abstand)); }
.slide-text { margin: .5rem 0 0; font-weight: 600; }
.slide-steuerung { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
/* Fortschrittsleiste: ein Abschnitt je Bild, der aktuelle füllt sich während der Anzeigedauer */
.slide-fortschritt { flex: 1; display: flex; gap: 6px; }
.segment {
  flex: 1; display: flex; align-items: center;
  height: 28px; padding: 0; border: 0; background: none; cursor: pointer; /* große Tippfläche, schmale Linie */
}
.spur { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--linie); overflow: hidden; }
.fuellung { display: block; height: 100%; background: var(--dunkel); transform: scaleX(0); transform-origin: left; }
.segment.fertig .fuellung { transform: scaleX(1); }
.segment.aktiv .fuellung { animation: fuellen 6s linear forwards; }
.slideshow.pausiert .segment.aktiv .fuellung { animation-play-state: paused; }
.segment:hover .spur { background: #cdb9a2; }
@keyframes fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.slide-pause {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--linie); background: var(--weiss); color: var(--text-2);
}
.slide-pause:hover { color: var(--text); border-color: var(--text-2); }
.slide-pause .icon { width: 1.1em; height: 1.1em; }
.slide-pause .icon-abspielen, .slideshow.angehalten .slide-pause .icon-pause { display: none; }
.slideshow.angehalten .slide-pause .icon-abspielen { display: block; }

/* Nachbarn im Landambulatorium */
.nachbarn-titel, .abschnitt .nachbarn-titel { margin-top: 0; }
.nachbarn { list-style: none; padding: 0; }
.nachbarn li { margin-bottom: 1rem; }
.pillen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }

/* Platzhalter für noch fehlende Inhalte – gut sichtbar, damit nichts vergessen wird */
.platzhalter {
  background: repeating-linear-gradient(-45deg, #fff8d6, #fff8d6 10px, #fff1b0 10px, #fff1b0 20px);
  border: 2px dashed var(--gelb-rand);
  padding: .5rem .75rem;
  border-radius: 6px;
}

/* ---------- Handy: Telefon-Taste und Google-Karte ---------- */
@media (max-width: 767px) {
  /* Telefon-Taste im Einstieg etwas breiter als die Textspalte, damit der Zweck in eine Zeile passt */
  .einstieg .taste-tel { width: calc(100% + 1.2rem); margin-inline: -.6rem; }
  .taste-tel .icon { width: 1.5rem; height: 1.5rem; margin: .75rem; box-shadow: 0 0 0 .75rem var(--akzent-hell); }
  .karte { margin-inline: calc(-1 * var(--abstand)); }
  .karte, .karte iframe { border-radius: 0; }
  .karte { border-inline: 0; padding-inline: var(--abstand); } /* Hinweistext vor dem Laden bleibt am Seitenrand */
  .karte.geladen { padding: 0; }
}

/* ---------- Sehr schmale Handys (unter 360 px) ---------- */
@media (max-width: 359px) {
  .logo img { width: 72px; }
  .hauptnav a { --nav-x: .25rem; font-size: .9rem; }
}

/* ---------- Tablet ab 768 px ---------- */
@media (min-width: 768px) {
  :root { --abstand: 1.5rem; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.9rem; }
  .logo img { width: 140px; }
  .kopf-klein .logo img { width: 90px; }
  .hauptnav { width: auto; order: 2; }
  .hauptnav li { flex: none; }
  .hauptnav a { --nav-x: 1rem; }
  .kopf-kontakt { order: 3; }
  .taste-tel { width: auto; display: inline-flex; gap: 1rem; padding: .6rem 2.25rem .6rem .6rem; }
  .einwilligung .innen { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
  .einwilligung-tasten { grid-template-columns: auto auto; }
  .tel-zweck { font-size: .85rem; }
  .tel-nummer { font-size: 1.45rem; }
  .kaesten { grid-template-columns: 1fr 1fr; }
  /* breite Bildschirme: flacher Ausschnitt statt riesiger Höhe */
  .slide img, .abschnitt-bild img { aspect-ratio: auto; height: clamp(22rem, 62vh, 38rem); object-fit: cover; }
  .abschnitt-bild img { height: clamp(28rem, 80vh, 50rem); object-position: center 40%; } /* Vorderansicht: höher, Ausschnitt weiter oben */
  .slide img { height: clamp(28rem, 80vh, 50rem); } /* Slideshow am Computer höher, Bilder besser zu sehen */
  .karte { aspect-ratio: 16 / 7; }
  .fuss .innen { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Computer ab 1024 px ---------- */
@media (min-width: 1024px) {
  /* Computer: Kopf immer einzeilig wie beim Scrollen (kleines Logo, Status neben dem Telefon) */
  .kopf .innen { flex-wrap: nowrap; padding-top: .25rem; padding-bottom: .25rem; }
  .logo img, .kopf-klein .logo img { width: 90px; }
  .kopf-kontakt { flex-direction: row-reverse; align-items: center; gap: .5rem; padding-left: .75rem; }
  .kopf-status { margin-top: 0; }
  h1 { font-size: 3rem; }
  /* Einstieg: Text rechts über dem Foto */
  .einstieg { display: grid; padding: 0; }
  .einstieg > * { grid-area: 1 / 1; min-width: 0; }
  .einstieg-bild { position: relative; }
  .einstieg-bild::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgb(252 249 244 / .88) 55%, rgb(252 249 244 / .97) 70%);
  }
  .einstieg-bild img { aspect-ratio: auto; height: clamp(34rem, 80vh, 46rem); object-position: 20% 25%; }
  .einstieg > .innen { width: 100%; display: flex; align-items: center; justify-content: flex-end; position: relative; padding-bottom: 4rem; }
  .einstieg-text { width: 31rem; margin: 0; padding: 0; background: none; box-shadow: none; }
  /* Karten ragen in das Foto hinein */
  .kaesten { grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); /* Öffnungszeiten etwas breiter, damit die Tabelle passt */ position: relative; margin-top: -4rem; }
  /* links Öffnungszeiten, Mitte Anfahrt über Bereitschaftsdienst, rechts Facebook */
  .kaesten { grid-template-areas: "zeiten anfahrt facebook" "zeiten notdienst facebook"; grid-template-rows: auto 1fr; }
  .kasten-zeiten { grid-area: zeiten; }
  .kasten-anfahrt { grid-area: anfahrt; }
  .kasten-notdienst { grid-area: notdienst; }
  .kasten-facebook { grid-area: facebook; }
  /* Beiträge kompakt: kleines Vorschaubild links, damit die Spalte nicht höher wird als die anderen */
  .beitrag { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .4rem 1rem; align-content: start; }
  .beitrag > * { grid-column: 2; }
  .beitrag .beitrag-bild { grid-column: 1; grid-row: 1 / span 3; }
  .beitrag-bild img { aspect-ratio: 1; max-height: none; border-radius: 10px; }
  .beitrag-text { -webkit-line-clamp: 4; line-clamp: 4; }
  /* Anfahrt: Bus und Auto links, Hinweis zum ersten Stock rechts daneben */
  .anfahrt-wege { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  .anfahrt-wege .hinweis-box { margin: 0; }
  .seite-held img { aspect-ratio: auto; height: clamp(20rem, 55vh, 32rem); object-position: center 15%; } /* Köpfe bleiben im Bild */
  .seite-held h1 { font-size: 3.4rem; }
  .seite-held .innen { padding-bottom: 2rem; }
  :root { --abschnitt: 3.5rem; }
  .fuss .innen { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Unterseiten ---------- */
/* Seitenkopf: Foto randlos, Überschrift unten links darauf */
.seite-held { display: grid; }
.seite-held > * { grid-area: 1 / 1; min-width: 0; }
.seite-held picture { position: relative; }
.seite-held picture::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(36 27 22 / .72), rgb(36 27 22 / .15) 50%, transparent 70%);
}
.seite-held img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 35%; }
.seite-held .innen { align-self: end; width: 100%; position: relative; padding-bottom: 1.25rem; }
.seite-held h1 { color: var(--weiss); margin: 0; font-size: 2.4rem; text-shadow: 0 1px 16px rgb(0 0 0 / .35); }

.seite-kopf { padding-top: 1.25rem; }
.sprungmarken { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Seitenanfang mit Foto: Handy darunter, Computer rechts daneben */
/* Links als Pillen: Sprunglinks auf den Unterseiten und einzeln stehende Links */
.sprungmarken a, .pille {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1.1rem; line-height: 1.3;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 22px; /* einzeilig rund, zweizeilig sauber abgerundet */
  text-decoration: none; font-size: .95rem; transition: border-color .15s, background-color .15s;
}
.sprungmarken a:hover, .pille:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.abschnitt-oben { padding: 1.5rem 0 var(--abschnitt); }
.abschnitt-oben .lesebreite > :last-child { margin-bottom: 0; } /* Abstand nach unten regelt der Abschnitt */
.lesebreite { max-width: 42rem; }
.hilfe-text { color: var(--text-2); }
.hinweis-box {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--akzent-hell); border-radius: var(--rund); padding: 1rem 1.25rem;
}
.hinweis-box .icon { margin-top: .15em; color: var(--akzent); }
.band .hinweis-box { background: var(--weiss); }
.abschnitt h3 { margin-top: 1.5rem; }

/* Team */
.team {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.5rem 2rem;
}
/* Handy: Foto und Name nebeneinander, Vorstellung darunter über die ganze Breite.
   Ab Tablet: Vorstellung rechts neben dem Foto. */
.team li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem 1rem; align-items: start; }
.team li > div:not(.team-foto) { align-self: center; }
.team-foto { aspect-ratio: 4 / 5; border-radius: var(--rund-gross); overflow: hidden; background: var(--akzent-hell); box-shadow: var(--schatten); }
.team-foto img { width: 100%; height: 100%; object-fit: cover; }
.team-foto .initialen {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 2rem; font-weight: 300; color: var(--akzent);
}
.team-name { font-weight: 600; margin: 0; line-height: 1.3; }
.team-bereich { color: var(--text-2); margin: 0; }
.team-text { margin: 0; grid-column: 1 / -1; white-space: pre-line; } /* Absätze aus dem Admin-Formular erhalten */

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.galerie figure { margin: 0; }
.galerie a { display: block; border-radius: var(--rund); overflow: hidden; box-shadow: var(--schatten); }
.galerie img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform .3s ease-out; }
.galerie a:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .galerie img { transition: none; } }
.galerie figcaption { margin-top: .35rem; line-height: 1.3; }

/* Stellenanzeigen */
.stellen { display: grid; gap: 1rem; }
.stelle {
  background: var(--weiss); border: 1px solid rgb(230 217 200 / .7); border-radius: var(--rund-gross);
  box-shadow: var(--schatten); padding: 1.5rem; max-width: 46rem;
}
.stelle h3 { margin-top: 0; }
.stelle h4 { font-size: 1.05rem; margin: 1.25rem 0 .25rem; }
.stelle-text, .stelle-kontakt { white-space: pre-line; margin: 0; }
.eckdaten { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.eckdaten dt { color: var(--text-2); }
.eckdaten dd { margin: 0; font-weight: 600; }

@media (min-width: 768px) {
  .team li { grid-template-columns: 8rem 1fr; grid-template-rows: auto 1fr; column-gap: 1.5rem; }
  .team-foto { grid-row: span 2; }
  .team li > div:not(.team-foto) { align-self: start; }
  .team-text { grid-column: 2; }
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .galerie:has(> figure:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } /* nur zwei Bilder: volle Breite */
}
@media (min-width: 1024px) {
  .team { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
}

/* Leistungen */
/* Leistungen als ruhiges Verzeichnis: feine Linie oben statt Kasten */
.leistungen {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.75rem 3rem;
}
.leistung { border-top: 1px solid var(--linie); padding-top: 1.1rem; }
.leistung h3 { margin: 0 0 .35rem; }
.leistung p { margin: 0 0 .75rem; color: var(--text-2); }
.leistung .kurz { color: var(--akzent); font-weight: 600; } /* Kurzangabe unter der Überschrift */
.leistung > :last-child { margin-bottom: 0; }
.haken-liste { padding-left: 1.25rem; }
.haken-liste li { margin-bottom: .35rem; }
.haken-liste li:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .leistungen { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .leistungen { grid-template-columns: repeat(3, 1fr); }
}

/* Impressum und Datenschutz */
.rechtstext {
  max-width: 46rem; padding-top: 1.5rem; padding-bottom: var(--abschnitt);
  margin-left: max(0px, (100% - var(--breite)) / 2); /* linksbündig mit dem Kopfbereich */
}
.rechtstext h2 { font-size: 1.2rem; margin-top: 2rem; font-weight: 600; letter-spacing: 0; }
.rechtstext a { overflow-wrap: anywhere; }
.rechtstext .platzhalter { display: inline; padding: .1rem .4rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rechtstext p.platzhalter { display: block; padding: .5rem .75rem; }
.stand { color: var(--text-2); margin-top: 2rem; }
@media (min-width: 1024px) {
  .seite-held-team img { height: clamp(24rem, 72vh, 42rem); object-position: center 15%; } /* Teamfoto höher, damit Köpfe und Beine im Bild sind */
  .seite-held-behandlung img { height: clamp(24rem, 72vh, 42rem); object-position: center 90%; } /* Leistungen: Hände mit Prothese und Gipsmodell im Bild */
}