/* =====================================================================
   MORGENLICHT – Designsystem
   Ruhig, hell, luftig. Feine Linien, viel Raum, warmes Licht als Akzent.
   ===================================================================== */

/* Die Webfonts Karla/Jost stellen das hochgestellte ª (U+00AA) als normales
   a dar. Für genau dieses eine Zeichen wird daher die Systemschrift genutzt –
   alle anderen Buchstaben bleiben unberührt. */
@font-face {
  font-family: "HochgestelltesA";
  src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Helvetica"), local("Arial");
  unicode-range: U+00AA;
}

/* Jost und Karla werden lokal ausgeliefert (Dateien im Ordner "fonts/" auf
   dem eigenen Webspace, neben "bilder/") statt dynamisch von Google-Servern
   geladen. Das vermeidet die datenschutzrechtlich unklare Übermittlung der
   Besucher-IP-Adresse an Google bei jedem Seitenaufruf. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/jost-300.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-400.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/karla-400.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/karla-500.woff2") format("woff2");
}

/* Schreibschrift für einzelne hervorgehobene Wörter (~~Wort~~) – ebenfalls
   lokal ausgeliefert statt dynamisch von Google geladen, aus denselben
   datenschutzrechtlichen Gründen wie Jost/Karla. */
@font-face {
  font-family: "Alex Brush";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/alexbrush-400.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper: var(--paper-hell, #FCFDFE);  /* Seitenhintergrund (hell, im Admintool wählbar) */
  --mist: #EFF5F8;           /* helle Flächen */
  --mist-deep: #D7E4EC;      /* Bildplatzhalter, sanfte Flächen */
  --ink-basis: var(--ink-basis-hell, #2E4756);        /* Grundton der Schrift */
  --ink-soft-basis: var(--ink-soft-basis-hell, #5D7280);
  --linien-basis: #2E4756;   /* feste Basis für Linien/Flächen – unabhängig von der Schriftstärke */
  --text-staerke: var(--text-staerke-hell, 100%);     /* Schriftstärke (Admintool) */
  --ink: #2E4756;            /* Tiefes Schieferblau – Text & Linienführung */
  --ink-soft: #5D7280;       /* Sekundärtext */
  --hairline: #E2EAF0;       /* Feine Linien */
  --dawn: #9F6932;           /* Morgengold – sparsamer, warmer Akzent (kontraststark für hellen Hintergrund) */
  --dawn-soft: #F3E9DC;
  --feld: #FFFFFF;           /* Eingabefelder – heller als die Seite */

  --font-display: "HochgestelltesA", "Jost", "Segoe UI", system-ui, sans-serif;
  /* wird unten überschrieben, sobald der Browser color-mix beherrscht */
  --font-body: "HochgestelltesA", "Karla", "Segoe UI", system-ui, sans-serif;

  --size-hero: clamp(2.1rem, 1.2rem + 3.6vw, 3.4rem);
  --size-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --size-body: 1.0625rem;

  --wrap: 1080px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --section-gap: clamp(2.625rem, 7vw, 5.125rem);
}

/* Dunkelmodus „Abendlicht": tiefes Schieferblau, heller Text, Goldakzent.
   Die Nebentöne entstehen weiter automatisch aus --ink und --paper. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: var(--paper-dunkel, #1B252D);
  --mist: #242F38;
  --mist-deep: #3A4650;
  --ink-basis: var(--ink-basis-dunkel, #E9EFF3);
  --ink-soft-basis: var(--ink-soft-basis-dunkel, #9DAEBA);
  --linien-basis: #E9EFF3;
  --text-staerke: var(--text-staerke-dunkel, 100%);
  --ink: #E9EFF3;
  --ink-soft: #9DAEBA;
  --hairline: #313D46;
  --dawn: #D3A76F;
  --dawn-soft: #3C3527;
  --feld: #141C22;           /* Eingabefelder – dunkler als die Seite */
}

/* Alle Nebentöne leiten sich aus der Hintergrundfarbe (--paper) ab.
   Ändert der Betreiber die Hintergrundfarbe (hell oder dunkel),
   harmoniert die Seite weiterhin. Die festen Werte oben dienen nur
   als Fallback für sehr alte Browser ohne color-mix. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root,
  :root[data-theme="dark"] {
    /* Schrift: Stärke mischt den Grundton Richtung Hintergrund (100% = voll) */
    --ink: color-mix(in srgb, var(--ink-basis) var(--text-staerke), var(--paper));
    --ink-soft: color-mix(in srgb, var(--ink-soft-basis) var(--text-staerke), var(--paper));
    /* Linien und Flächen hängen an einer festen Basis – sie bleiben bei
       jeder Schriftstärke unverändert stabil */
    --mist: color-mix(in srgb, var(--linien-basis) 6%, var(--paper));
    --mist-deep: color-mix(in srgb, var(--linien-basis) 19%, var(--paper));
    --hairline: color-mix(in srgb, var(--linien-basis) 11%, var(--paper));
    --dawn-soft: color-mix(in srgb, var(--dawn) 22%, var(--paper));
  }
  :root {
    --feld: color-mix(in srgb, #FFFFFF 78%, var(--paper));
  }
  :root[data-theme="dark"] {
    --feld: color-mix(in srgb, #05090C 30%, var(--paper));
  }
}

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

html {
  scroll-padding-top: 5.5rem;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Der Hauptinhalt wächst, die Fußzeile bleibt bei kurzen Seiten (z. B.
   Impressum, Datenschutz) unten am Fensterrand statt mittig zu "schweben". */
body > main {
  flex: 1 0 auto;
}

/* Hell/Dunkel-Wechsel: Die View Transitions API (theme.js) überblendet die
   komplette Seite als Schnappschuss – hier nur Dauer und Kurve des Übergangs. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); }

::selection { background: var(--mist-deep); }

:focus-visible {
  outline: 2px solid var(--linien-basis);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--linien-basis);
  color: var(--paper);
  padding: 0.5rem 1rem;
  z-index: 100;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ------------------------------------------------------------------ */
/* Kopfbereich / Navigation                                           */
/* ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  transition: transform 0.55s ease-out;
  overflow-anchor: none;
}

/* Im Burgermenü-Bereich bleibt die Kopfzeile durchgehend "fixed" (nicht nur
   kurz während eines Sprungs) – ein Platzhalter (siehe JS) hält dafür die
   Höhe im Textfluss frei. So gibt es keinen Moment mehr, in dem zwischen
   "sticky" und "fixed" umgeschaltet werden müsste; genau dieser Wechsel
   verursachte den kleinen Ruckler am Ende einer Bewegung. */
@media (max-width: 920px) {
  .site-header.site-header--mobil {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .site-header.site-header--versteckt {
    transform: translateY(-100%);
  }
}

/* Erscheint die Kopfzeile, weil die Seite tatsächlich ganz oben angekommen
   ist (nur beim manuellen Scrollen relevant), geschieht das mit einer sehr
   kurzen, sanften Gleitbewegung statt eines harten Umschaltens – dennoch
   knapp genug, um nicht wie eine Verzögerung zu wirken. */
.site-header.site-header--sofort { transition: transform 0.2s ease-out; }

/* Zurück-nach-oben-Pfeil: erscheint, sobald die Kopfzeile sich versteckt hat.
   Gleiche ruhige Formsprache wie die Diashow-Pfeile – nur als schwebender
   Kreis statt in der Diashow selbst. */
.scroll-oben {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--ink);
  display: none;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transform: translateY(0.6rem);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s ease;
}
.scroll-oben:hover { background: var(--paper); }
@media (max-width: 920px) {
  .scroll-oben { display: flex; }
  .scroll-oben.sichtbar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-oben { transition: opacity 0.35s ease; transform: none !important; }
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
  padding-block: 0.65rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
}
.brand-text small {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
}
.brand-logo {
  width: var(--logo-groesse, 2.35rem);
  height: auto;
  max-height: calc(var(--logo-groesse, 2.35rem) * 1.25);
  flex: none;
  object-fit: contain;
}
@media (max-width: 480px) {
  .brand-logo { width: calc(var(--logo-groesse, 2.35rem) * 0.82); }
}

/* Getrennte Logos für Hell-/Dunkelmodus: Beide werden eingebettet, hier wird
   je nach aktuellem Theme genau eines davon gezeigt. "display: contents"
   macht den Wrapper für das Layout unsichtbar, damit das jeweils sichtbare
   Logo sich genauso wie ein einzelnes .brand-logo verhält (auch bei der
   Umordnung im Burgermenü-Bereich weiter unten). */
.brand-logo-wrap--hell { display: contents; }
.brand-logo-wrap--dunkel { display: none; }
:root[data-theme="dark"] .brand-logo-wrap--hell { display: none; }
:root[data-theme="dark"] .brand-logo-wrap--dunkel { display: contents; }

/* Ab dem Burgermenü-Bereich: Logo (falls vorhanden) wandert oberhalb und
   mittig über den Praxisnamen, statt daneben zu stehen. Die Logo-Grafik
   steht im Markup nach dem Namen, "column-reverse" bringt sie optisch
   trotzdem nach oben, ohne die Reihenfolge im Code ändern zu müssen. */
@media (max-width: 920px) {
  .brand {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    white-space: normal;
  }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.main-nav a:not(.btn) {
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.main-nav a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--dawn); }

.btn {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
  white-space: nowrap;
  text-decoration: none;
  padding: 0.65rem 1.5rem;
  border: 1px solid var(--linien-basis);
  color: var(--ink);
  background: transparent;
  border-radius: 999px;
  transition: background 0.25s, color 0.25s;
  display: inline-block;
  cursor: pointer;
}
.btn:hover { background: var(--linien-basis); color: var(--paper); }

.btn--solid { background: var(--linien-basis); color: var(--paper); }
.btn--solid:hover {
  background: color-mix(in srgb, var(--linien-basis) 86%, var(--paper));
  border-color: color-mix(in srgb, var(--linien-basis) 86%, var(--paper));
  color: var(--paper);
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.5vw, 1.1rem);
}

.theme-toggle {
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  flex: none;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-soft); }
.theme-toggle .icon-sonne { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sonne { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-mond { display: none; }

/* Fotos im Dunkelmodus leicht abdunkeln, damit sie nicht blenden */
:root[data-theme="dark"] .slideshow .frame img { filter: brightness(0.85); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { display: block; }

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem var(--pad-x) 1.25rem;
    display: none;
  }
  .main-nav.offen { display: flex; }
  .main-nav a:not(.btn) { padding: 0.75rem 0; border-bottom: 1px solid var(--hairline); }
  .main-nav .btn { margin-top: 1rem; text-align: center; }
}

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

.hero {
  /* Der Morgenhimmel: ein kaum merklicher Verlauf von Dämmerblau zu Weiß */
  background: linear-gradient(180deg, #F2F7FA 0%, var(--paper) 70%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mist-deep) 28%, var(--paper)) 0%, var(--paper) 70%);
  text-align: center;
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

.hero .eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}
@media (max-width: 780px) {
  .hero .eyebrow--mobil-ausgeblendet { display: none; }
}
.hero .bereichstrenner { margin-block: 0 1.25rem; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-hero);
  line-height: 1.32;
  letter-spacing: 0.01em;
  margin: 0 auto 1.25rem;
  max-width: 18ch;
  text-wrap: balance;
}

.hero p.lead {
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 auto 2rem;
}

/* Ohne CTA-Zeile (beide Buchungs-Buttons ausgeblendet) übernimmt der
   Lead-Text deren unteren Abstand zur Diashow. */
.hero .wrap > p.lead:last-child,
.hero-text > p.lead:last-child {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.hero .cta-row {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Die unteren Abstände oben schaffen Platz zur Diashow. Folgt gar keine
   Diashow, sind sie überflüssig und addieren sich sichtbar zum Abstand des
   nächsten Bereichs – dann entfallen sie. (Beherrscht ein sehr alter Browser
   ":has" nicht, wird diese Regel schlicht ignoriert und es bleibt beim
   bisherigen Verhalten.) */
.hero:not(:has(.slideshow)) .wrap > p.lead:last-child,
.hero:not(:has(.slideshow)) .cta-row,
.hero:not(:has(.slideshow)) .hero-mit-bild {
  margin-bottom: 0;
}

/* Startbereich mit seitlichem Bild: Text und Bild nebeneinander statt der
   sonst zentrierten Anordnung. Die Diashow (falls vorhanden) bleibt davon
   unberührt und erscheint weiterhin unverändert unterhalb des ganzen
   Startbereichs. */

/* Kleine Zeile + Trennzeichen liegen in einer eigenen, über die volle Breite
   reichenden Grid-Zeile – eine "mittig"-Einstellung bezieht sich dadurch
   weiterhin auf die ganze Seitenbreite, nicht nur auf die Textspalte. Die
   Ausrichtung folgt der im Admintool gewählten Trennzeichen-Position. */
.hero-kopf { grid-column: 1 / -1; grid-row: 1; }
.hero-kopf--links { text-align: left; }
.hero-kopf--mitte { text-align: center; }
.hero-kopf--rechts { text-align: right; }

/* Das Bild spannt bewusst über BEIDE Zeilen (Trennzeichen-Zeile + Textzeile)
   und wird über diese gesamte, kombinierte Höhe zentriert (align-self:
   center) – nicht nur gegenüber der Textspalte allein. So wirkt es auch
   optisch mittig im gesamten zur Verfügung stehenden Bereich. */
.hero-mit-bild {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Auf dem Handy stehen die drei Blöcke (Trennzeichen-Zeile, Text, Bild)
   gestapelt untereinander. Dabei addieren sich jeweils zwei Abstände: der
   Zeilenabstand des Rasters PLUS der eigene untere Abstand des vorherigen
   Elements (Trennzeichen bzw. Einleitungstext). Dadurch entstanden sehr
   ungleiche Lücken (18 / 56 / 20 / 76 px). Hier übernimmt daher allein der
   Zeilenabstand des Rasters die Steuerung; die doppelt wirkenden eigenen
   Abstände werden auf 0 gesetzt.
   Bewusst zweifach eingegrenzt – auf ".hero-mit-bild" (gilt also nur bei
   seitlichem Bild, nicht im Startbereich ohne Bild) und auf die Handy-
   Breite. Die Desktop-Darstellung bleibt dadurch vollständig unberührt. */
@media (max-width: 780px) {
  /* Zeilenabstand entspricht dem Abstand ÜBER dem Trennzeichen (der kommt
     aus ".hero .eyebrow { margin-bottom: 1.1rem }"), damit das Trennzeichen
     oben und unten gleich viel Luft hat. */
  .hero-mit-bild { row-gap: 1.1rem; }
  .hero-mit-bild .bereichstrenner { margin-block: 0; }
  .hero-mit-bild .hero-text > p.lead:last-child,
  .hero-mit-bild .hero-text > .cta-row:last-child { margin-bottom: 0; }
  /* Zwischen Text und Bild bewusst mehr Luft als zwischen den Textzeilen –
     der Wechsel von Text zu Bild braucht optisch eine deutlichere Zäsur.
     Liegt das Bild oben (Einstellung "links"), gilt derselbe Abstand
     spiegelbildlich nach unten. */
  .hero-mit-bild .hero-bild { margin-top: 1.15rem; }
  .hero-mit-bild.hero-mit-bild--bild-links .hero-bild {
    margin-top: 0;
    margin-bottom: 1.15rem;
  }
}

/* Reihenfolge auf dem Handy (gestapelt): folgt der gewählten Bildposition,
   genau wie zuvor bei der DOM-Reihenfolge. Bild rechts -> Text zuerst;
   Bild links -> Bild zuerst. */
.hero-mit-bild .hero-text { grid-column: 1; grid-row: 2; }
.hero-mit-bild .hero-bild { grid-column: 1; grid-row: 3; }
.hero-mit-bild.hero-mit-bild--bild-links .hero-bild { grid-row: 2; }
.hero-mit-bild.hero-mit-bild--bild-links .hero-text { grid-row: 3; }

/* Überschrift, Einleitungstext und Buchungs-Knöpfe innerhalb der (schmaleren)
   Text-Spalte: mittig (Standard) oder linksbündig, im Admintool wählbar. */
.hero-text--mittig { text-align: center; }
.hero-text--mittig h1,
.hero-text--mittig p.lead { margin-inline: auto; }
.hero-text--mittig .cta-row { justify-content: center; }

.hero-text--linksbuendig { text-align: left; }
.hero-text--linksbuendig h1,
.hero-text--linksbuendig p.lead {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.hero-text--linksbuendig .cta-row { justify-content: flex-start; }

.hero-bild {
  overflow: hidden;
  background: var(--mist-deep);
}
.hero-bild img,
.hero-bild picture { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-bild--rechteckig { border-radius: 8px; aspect-ratio: 3 / 4; }
.hero-bild--kreisrund {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: min(100%, 300px);
  margin-inline: auto;
}

@media (min-width: 781px) {
  .hero-mit-bild {
    grid-template-columns: 1fr min(300px, 36%);
    grid-template-rows: auto 1fr;
    column-gap: 3.5rem;
    row-gap: 0;
    align-items: start;
  }
  .hero-mit-bild .hero-kopf { grid-column: 1 / -1; grid-row: 1; }
  .hero-mit-bild .hero-text { grid-column: 1; grid-row: 2; align-self: start; }
  .hero-mit-bild .hero-bild {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 100%;
  }
  .hero-mit-bild .hero-bild.hero-bild--kreisrund { margin-inline: 0; }

  /* Bild links: Spalten spiegeln, damit das Bild trotzdem in der zweiten
     (rechten) Grid-Spalte bleibt und weiterhin über beide Zeilen spannt –
     nur die sichtbare Reihenfolge dreht sich per DOM-Reihenfolge um. */
  .hero-mit-bild.hero-mit-bild--bild-links {
    grid-template-columns: min(300px, 36%) 1fr;
  }
  .hero-mit-bild.hero-mit-bild--bild-links .hero-bild { grid-column: 1; grid-row: 1 / 3; }
  .hero-mit-bild.hero-mit-bild--bild-links .hero-text { grid-column: 2; grid-row: 2; }
}

.link-quiet {
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--dawn);
  padding-bottom: 2px;
  transition: color 0.2s;
}
.link-quiet:hover { color: var(--ink); }

/* Diashow */

/* Einblend-Effekt beim Scrollen: Die Diashow startet unsichtbar und leicht
   nach unten versetzt. Sobald der IntersectionObserver (site.js) sie im
   sichtbaren Bereich erkennt, setzt er ".slideshow--sichtbar" und die
   Transition gleitet sie sanft ein. Nutzer:innen mit aktivierter
   "Animationen reduzieren"-Einstellung erhalten den Endzustand sofort. */
.slideshow--wartet {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.slideshow--sichtbar {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .slideshow--wartet { opacity: 1; transform: none; transition: none; }
}

.slideshow {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}

/* Diashow separat im Handy- bzw. Desktop-Modus ausblendbar (Admintool).
   Reagiert live auf die tatsächliche Fensterbreite, nicht nur beim Laden
   der Seite – derselbe Umbruchpunkt (700px) wie beim Diashow-Bildformat. */
@media (max-width: 700px) {
  .slideshow.slideshow--ohne-handy { display: none; }
}
@media (min-width: 701px) {
  .slideshow.slideshow--ohne-desktop { display: none; }
}

.slideshow .frame {
  position: relative;
  aspect-ratio: 16 / 7.5;
  min-height: 240px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--mist-deep);
}

/* Auf schmalen Bildschirmen: Hochformat statt breitem Panorama */
@media (max-width: 700px) {
  .slideshow .frame {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
}

.slideshow .frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(1);
  transition: opacity 1.6s ease, filter 0.7s ease;
}
.slideshow .frame img.aktiv { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .slideshow .frame img.aktiv {
    animation: sanfterZoom 9s ease-out forwards;
  }
  @keyframes sanfterZoom {
    from { transform: scale(1); }
    to { transform: scale(1.035); }
  }
}

.slideshow .pfeil {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s;
}
.slideshow .pfeil:hover { background: var(--paper); }
.slideshow .pfeil--zurueck { left: calc(var(--pad-x) + 0.9rem); }
.slideshow .pfeil--vor { right: calc(var(--pad-x) + 0.9rem); }

.slideshow .punkte {
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  padding: 1rem 0 0;
}
.slideshow .punkte button {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: none;
  background: var(--mist-deep);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.slideshow .punkte button.aktiv {
  background: var(--linien-basis);
  transform: scale(1.15);
}

/* ------------------------------------------------------------------ */
/* Bereiche                                                            */
/* ------------------------------------------------------------------ */

.section { padding-top: var(--section-gap); }

.section-kopf { max-width: 40rem; }
.section-kopf.zentriert { margin-inline: auto; text-align: center; }

.section h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-h2);
  line-height: 1.4;
  margin: 0 0 0.9rem;
  text-wrap: balance;
}
/* Ohne Einleitung ist h2 das letzte Element im section-kopf – der untere
   Abstand (gedacht als Lücke zur Einleitung) entfällt dann. */
.section-kopf > h2:last-child { margin-bottom: 0; }
.section .bereichstrenner { margin-block: 0 1.1rem; }

.section .intro { color: var(--ink-soft); margin: 0; }

/* Bereichs-Trennzeichen: Standard ist eine kurze goldene Linie; im
   Admintool lässt sich stattdessen ein eigenes Bild (z. B. ein kleines
   Logo) wählen, mit eigener Position (links/mitte/rechts) und optional
   getrennten Hell-/Dunkel-Varianten – nach demselben Muster wie das Logo
   neben dem Praxisnamen und das Standortzeichen auf der Karte. */
.bereichstrenner { display: block; width: fit-content; max-width: 100%; }
.bereichstrenner--links { margin-inline: 0 auto; }
.bereichstrenner--mitte { margin-inline: auto; }
.bereichstrenner--rechts { margin-inline: auto 0; }

.bereichstrenner--linie {
  width: var(--trennstrich-laenge, 2.5rem);
  height: 2px;
  background: var(--dawn);
}

.bereichstrenner img { display: block; height: var(--trennzeichen-bild-groesse, 2rem); width: auto; }
.bereichstrenner-bild-wrap { display: contents; }
.bereichstrenner-bild-wrap--dunkel { display: none; }
:root[data-theme="dark"] .bereichstrenner-bild-wrap--hell { display: none; }
:root[data-theme="dark"] .bereichstrenner-bild-wrap--dunkel { display: contents; }

/* Optionales Bild in einem Bereich (Angebot, Ablauf, Text, Zitat) – Position
   im Admintool wählbar. Auf dem Handy immer schlicht untereinander in der
   Reihenfolge, die schon im Markup steht (siehe bereichMitBild in site.js);
   erst ab genügend Breite stellt sich "links"/"rechts" nebeneinander. */
.bereich-layout {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.bereich-bild {
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  background: var(--mist-deep);
  aspect-ratio: 16 / 8;
  /* Bilder haben keinen optischen Puffer am unteren Rand (kein Zeilenabstand
     wie Text) – dadurch wirkt die Lücke zum nächsten Trennzeichen kürzer als
     nach einem Textblock. Kleiner Ausgleich, der den fehlenden Puffer annähert. */
  margin-bottom: 0.4rem;
}
@media (max-width: 700px) {
  .bereich-bild { aspect-ratio: 4 / 5; }
}
.bereich-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bereich-inhalt { min-width: 0; }

/* "Anschluss"-Bereiche (Text/Bild ohne Überschrift): deutlich kleinerer
   Abstand nach oben statt des üblichen großen Bereichs-Zwischenraums, damit
   sie sich wie eine Fortsetzung des vorherigen Bereichs anfühlen. Da sie
   keine Überschrift haben, wird für sie in site.js auch kein Trennzeichen
   eingefügt. */
.section.section--anschluss { padding-top: 1.75rem; }

/* Breite "schmal": schmalere, zentrierte Spalte statt der vollen Bereichs-
   breite – dasselbe Maß, das auch Zitate verwenden (siehe .zitat .innen). */
.textblock.textblock--schmal,
.bereich-bild.bereich-bild--schmal {
  max-width: 38rem;
  margin-inline: auto;
}

/* Schriftgröße (nur beim Anschluss-Textbereich wählbar) */
.textblock.textblock--klein { font-size: 0.9rem; }
.textblock.textblock--gross { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); }

/* Ausrichtung: verschiebt bewusst nicht nur den Text innerhalb der Box,
   sondern bei "Maximale Breite" auch die Box selbst – sonst würde z. B.
   "Mittig" den Text nur innerhalb einer weiterhin linksbündigen, schmaleren
   Box zentrieren, was optisch nicht wirklich mittig aussieht. Bei "Schmal"
   ist die Box durch .textblock--schmal bereits zentriert (siehe oben);
   margin-inline hier schadet in dem Fall nicht, es bestätigt nur denselben
   Wert nochmal. */
.textblock.textblock--mitte { text-align: center; margin-inline: auto; }
.textblock.textblock--rechts { text-align: right; margin-inline: auto 0; }

@media (min-width: 781px) {
  .bereich-layout--seite {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }
  .bereich-layout--seite .bereich-bild {
    width: 38%;
    aspect-ratio: 4 / 5;
  }
  .bereich-layout--seite .bereich-inhalt {
    flex: 1 1 0;
  }
  .bereich-layout--seite .bereich-inhalt .section-kopf { max-width: none; }
}

/* Position "Bild im Bereich der Überschrift": Bild als Aufmacher, mit der
   Überschrift (bzw. beim Zitat: dem Zitat selbst) direkt im Bild platziert. */
.bereich-bild-banner {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 8;
  margin-bottom: 2.25rem;
  background: var(--mist-deep);
}
.bereich-bild-banner picture,
.bereich-bild-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .bereich-bild-banner { aspect-ratio: 4 / 5; }
}
.bereich-bild-banner::after {
  /* Dezenter Verdunklungs-Schleier oben/unten, damit der helle Text auf
     jedem Foto lesbar bleibt – unabhängig davon, wie hell das Bild selbst ist. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.02) 32%, rgba(0, 0, 0, 0.02) 68%, rgba(0, 0, 0, 0.24));
}
.bereich-bild-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  padding: 1.75rem;
  color: #fff;
}
.bereich-bild-text h2,
.bereich-bild-text blockquote {
  margin: 0;
  max-width: 34rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 0, 0, 0.3);
}
.bereich-bild-text h2::before { background: #fff; }
.bereich-bild-text blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-h2);
  line-height: 1.35;
  font-style: normal;
}
.bereich-bild-text--oben-links { align-items: flex-start; justify-content: flex-start; text-align: left; }
.bereich-bild-text--oben-mitte { align-items: flex-start; justify-content: center; text-align: center; }
.bereich-bild-text--oben-rechts { align-items: flex-start; justify-content: flex-end; text-align: right; }
.bereich-bild-text--mitte-links { align-items: center; justify-content: flex-start; text-align: left; }
.bereich-bild-text--mitte-mitte { align-items: center; justify-content: center; text-align: center; }
.bereich-bild-text--mitte-rechts { align-items: center; justify-content: flex-end; text-align: right; }
.bereich-bild-text--unten-links { align-items: flex-end; justify-content: flex-start; text-align: left; }
.bereich-bild-text--unten-mitte { align-items: flex-end; justify-content: center; text-align: center; }
.bereich-bild-text--unten-rechts { align-items: flex-end; justify-content: flex-end; text-align: right; }

/* Leistungen & Ablauf: Spalten mit feinen Trennlinien */
.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 2.75rem;
  border-top: 1px solid var(--hairline);
}
/* Ohne Einleitung folgen die Spalten direkt auf die Überschrift – der große
   obere Abstand (gedacht als Lücke zur Einleitung) entfällt dann. */
.section-kopf > h2:last-child + .spalten,
.section-kopf:not(:has(.intro)) + .spalten,
.section-kopf:empty + .spalten { margin-top: 0; }
/* Ohne eigene Überschrift/Einleitung hätte diese obere Trennlinie nichts,
   wovon sie trennen könnte – sie entfällt daher in diesem Fall. */
.spalten.spalten--ohne-linie { border-top: none; }

/* Feste Spaltenzahl (statt der automatischen Berechnung oben) – damit die
   Verteilung der Punkte immer vorhersehbar bleibt, unabhängig von der
   verfügbaren Breite (z. B. neben einem seitlichen Bild). Unterhalb 780px
   gilt trotzdem immer eine einzelne Spalte, wie im übrigen responsiven
   Verhalten der Website auch. */
.spalten.spalten--fest-1 { grid-template-columns: 1fr; }
.spalten.spalten--fest-2 { grid-template-columns: repeat(2, 1fr); }
.spalten.spalten--fest-3 { grid-template-columns: repeat(3, 1fr); }
.spalten.spalten--fest-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 780px) {
  .spalten.spalten--fest-2,
  .spalten.spalten--fest-3,
  .spalten.spalten--fest-4 {
    grid-template-columns: 1fr;
  }
}

.spalten article {
  padding: 1.75rem 1.75rem 0.5rem;
  border-left: 1px solid var(--hairline);
}
.spalten article:first-child { border-left: none; padding-left: 0; }

@media (max-width: 780px) {
  .spalten article { border-left: none; padding-inline: 0; border-top: 1px solid var(--hairline); }
  .spalten article:first-child { border-top: none; }
}

/* Sonderfall "Immer 1 Spalte pro Reihe": Punkte stehen dabei so oder so
   immer übereinander statt nebeneinander, unabhängig von der Bildschirm-
   breite – die senkrechte Trennlinie samt Einrückung (gedacht für
   nebeneinanderstehende Spalten) entfällt daher hier grundsätzlich, nicht
   erst unterhalb von 780px. Damit stehen alle Punkte gleich weit links. */
.spalten.spalten--fest-1 article {
  border-left: none;
  padding-inline: 0;
  border-top: 1px solid var(--hairline);
}
.spalten.spalten--fest-1 article:first-child { border-top: none; }

.spalten article a.punkt-link {
  text-decoration-color: var(--dawn);
  text-underline-offset: 3px;
}
.spalten article a.punkt-link:hover { text-decoration-color: var(--ink); }

.spalten .nummer {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--dawn);
  display: block;
  margin-bottom: 0.6rem;
}

.spalten h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}

.spalten p { color: var(--ink-soft); font-size: 0.98rem; margin: 0 0 1rem; }

/* Textbereich (z. B. Über mich) */
.textblock { max-width: 42rem; }
.textblock p { color: var(--ink); }
/* Der untere Abstand des letzten Absatzes addierte sich zum Abstand des
   nächsten Bereichs – dadurch war die Lücke vor dem nächsten Trennzeichen
   je nach vorherigem Bereichstyp unterschiedlich groß. */
.textblock > p:last-child { margin-bottom: 0; }

/* Goldene Hervorhebung einzelner Wörter (==Text== in einem Textfeld). Nutzt
   dieselbe Variable wie alle anderen goldenen Akzente der Website – passt
   sich dadurch automatisch an Hell-/Dunkelmodus an, ganz ohne eigene Regel
   pro Modus. Reine Farbänderung, unabhängig von der Schriftart. */
.hervorhebung { color: var(--dawn); }

/* Schreibschrift für einzelne Wörter (~~Text~~ in einem Textfeld). Unabhängig
   von der Farbe – lässt sich mit ==...== kombinieren (in beliebiger
   Reihenfolge verschachtelt, z. B. ==~~Wort~~== oder ~~==Wort==~~), muss
   aber nicht. Etwas größer dargestellt, damit die Schreibschrift trotz
   ihrer schmaleren Formen ähnlich viel visuelles Gewicht hat wie der
   umgebende Text. */
.schreibschrift {
  font-family: "Alex Brush", cursive;
  font-size: 1.3em;
}

/* Popup-Formular (Terminanfrage) ------------------------------------ */

.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(46, 71, 86, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: popup-overlay-ein 0.2s ease;
}
.popup-overlay[hidden] { display: none; }
@keyframes popup-overlay-ein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Gemeinsame Modal-Basis ── */
.popup-modal {
  background: var(--paper);
  width: 100%;
  max-width: 520px;
  position: relative;
  /* Kein overflow-y:auto hier – verhindert abgeschnittene Ecken und
     den hässlichen Browser-Scrollbalken. Stattdessen scrollt das Overlay. */
}

/* Damit das Overlay selbst scrollt wenn das Modal höher als der Viewport ist */
.popup-overlay {
  overflow-y: auto;
  align-items: flex-start;
  padding-block: max(1rem, 5vh);
}
/* Auf großen Bildschirmen zentrieren */
@media (min-height: 700px) {
  .popup-overlay { align-items: center; padding-block: 1rem; }
}

/* ── Variante 3: Seitlich von rechts ── */
.popup-overlay--v3 {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0;
  /* Hintergrund muss die gesamte Scrollhöhe abdecken, nicht nur den Viewport.
     min-height stellt sicher, dass der dunkle Schleier auch beim Scrollen
     lückenlos hinter dem Panel erscheint. */
  min-height: 100%;
}
.popup-overlay--v3 .popup-modal {
  max-width: 420px;
  min-height: 100vh;
  border-radius: 0;
  border: none;
  border-left: var(--popup-v3-rand, 3px solid var(--dawn));
  padding: 2.5rem 1.75rem 1.5rem;
  animation: popup-v3-ein 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes popup-v3-ein {
  from { opacity: 0; transform: translateX(3rem); }
  to   { opacity: 1; transform: none; }
}
.popup-v3-akzent {
  display: flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(159, 105, 50, 0.12);
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  color: var(--dawn);
}
.popup-overlay--v3 .popup-schliessen { top: 0.8rem; right: 0.8rem; }

/* ── Schließen-Knopf ── */
.popup-schliessen {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.popup-schliessen:hover { background: var(--mist); color: var(--ink); }

/* ── Popup-Titel und Untertitel ── */
.popup-titel {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  color: var(--ink);
  margin: 0 0 0.3rem;
}
.popup-sub {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hairline);
}

/* Formular im Popup: kein eigener oberer Abstand */
.popup-modal .formular { margin-top: 0; max-width: none; }

/* Öffnen-Link in der Kontaktkarte */
.popup-formular-oeffnen {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--dawn);
  white-space: nowrap;
}
.popup-formular-oeffnen:hover { text-decoration-color: color-mix(in srgb, var(--dawn) 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .popup-overlay, .popup-modal { animation: none; }
}

/* Aufklappbarer Bereich -------------------------------------------- */

/* Zusammenfassung: goldene Linie + Kreis-Pfeil, kein Browser-Dreieck */
.aufklapp { border: none; }
.aufklapp-zeile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
  list-style: none;
  padding: 0.25rem 0;
  user-select: none;
}
.aufklapp-zeile::-webkit-details-marker { display: none; }

.aufklapp-titel {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.2rem);
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.aufklapp-linie {
  flex: 1;
  height: 1px;
  background: var(--dawn);
  opacity: 0.4;
}

.aufklapp-kreis {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--dawn);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--dawn);
  transition: transform 0.35s ease;
}
.aufklapp[open] .aufklapp-kreis { transform: rotate(180deg); }

/* Aufklapp-Animation über max-height */
.aufklapp-koerper {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s ease;
}
.aufklapp[open] .aufklapp-koerper {
  /* Großzügiger Wert – reicht für sehr langen Text, klappt aber trotzdem
     flüssig, weil der Browser die tatsächliche Höhe interpoliert. */
  max-height: 2000px;
  transition: max-height 0.55s ease;
}
.aufklapp-koerper > .textblock { padding-top: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .aufklapp-koerper,
  .aufklapp[open] .aufklapp-koerper { transition: none; }
  .aufklapp-kreis { transition: none; }
}

/* Zitat */
.zitat {
  text-align: center;
  /* Kein eigener unterer Abstand: Der Abstand zum nächsten Bereich kommt
     – wie bei allen anderen Bereichen auch – allein aus dessen oberem
     Bereichsabstand. "padding-block" hätte zudem den oberen Bereichsabstand
     (.section) überschrieben, da diese Regel weiter unten im Stylesheet
     steht – das Trennzeichen klebte dadurch fast ohne Abstand am
     vorherigen Bereich. */
}
.zitat .innen {
  max-width: 38rem;
  margin-inline: auto;
  padding-block: 2.75rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.zitat blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.7rem);
  line-height: 1.5;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.zitat cite {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Kontakt – große Karte als Fläche, zwei schwebende Karten in den Ecken */
.kontakt-flaeche {
  position: relative;
  margin-top: 2.5rem;
}

.kontakt-daten-schwebe dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.25rem;
}
.kontakt-daten-schwebe dt {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.2rem;
}
.kontakt-daten-schwebe dd { margin: 0; white-space: pre-line; font-size: 0.95rem; }
.kontakt-daten-schwebe a { text-decoration-color: var(--dawn); text-underline-offset: 3px; }

.kontakt-karte-gross {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  aspect-ratio: 15 / 8;
  text-decoration: none;
  background: var(--mist);
}
@media (max-width: 740px) {
  .kontakt-karte-gross { aspect-ratio: 3 / 4; }
}

.kontakt-karte-bild {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  filter: grayscale(0.15) contrast(1.02);
}
.kontakt-karte-bild--breit { display: block; }
.kontakt-karte-bild--hoch { display: none; }
@media (max-width: 740px) {
  .kontakt-karte-bild--breit { display: none; }
  .kontakt-karte-bild--hoch { display: block; }
}
.kontakt-karte-kachel {
  position: absolute;
  display: block;
  max-width: none;
}
.kontakt-karte-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--standort-groesse, 1.9rem);
  height: auto;
  transform: translate(-50%, -92%);
  filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.3));
}
/* Runde Logo-Markierung: keine Tropfen-Spitze, daher reine Zentrierung
   statt des Versatzes für die Pin-Spitze. */
.kontakt-karte-pin.kontakt-karte-pin--rund {
  width: var(--standort-groesse, 2.1rem);
  transform: translate(-50%, -50%);
}
.kontakt-karte-pin.kontakt-karte-pin--ohne-rahmen {
  width: var(--standort-groesse, 2.4rem);
}
/* Getrennte Logos für Hell-/Dunkelmodus im Kartenpin: nur eines der beiden
   eingebetteten Logos ist je nach aktuellem Theme sichtbar. */
.kontakt-karte-pin-logo--dunkel { display: none; }
:root[data-theme="dark"] .kontakt-karte-pin-logo--hell { display: none; }
:root[data-theme="dark"] .kontakt-karte-pin-logo--dunkel { display: inline; }
:root[data-theme="dark"] .kontakt-karte-kachel { filter: grayscale(0.4) invert(0.92) contrast(0.92) hue-rotate(180deg); }
:root[data-theme="dark"] .kontakt-karte-pin { filter: drop-shadow(0 1.5px 2.5px rgba(0, 0, 0, 0.5)); }
.kontakt-karte-copyright {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 1;
  font-size: 0.68rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.kontakt-karte-label {
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.8rem;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: background 0.2s, color 0.2s;
}
.kontakt-karte-gross:hover .kontakt-karte-label,
.kontakt-karte-gross:focus-visible .kontakt-karte-label {
  background: var(--linien-basis);
  color: var(--paper);
}

/* Die beiden schwebenden Karten: grau, abgerundet, in den Ecken der großen
   Karte. Ihr Abstand vom Eck wächst sanft, je schmäler das Fenster wird –
   dadurch rücken sie optisch zur Mitte, bevor sie unter 700px vollständig
   untereinander stehen (siehe Media Query weiter unten). */
.kontakt-daten-schwebe,
.termin-karte-schwebe {
  position: absolute;
  z-index: 2;
  width: min(300px, 34%);
  background: var(--mist);
  border-radius: 10px;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
}
.kontakt-daten-schwebe {
  left: max(1.25rem, calc(1.25rem + (820px - 100vw) * 0.3));
  top: 1.25rem;
}
.termin-karte-schwebe {
  right: max(1.25rem, calc(1.25rem + (820px - 100vw) * 0.3));
  bottom: 1.25rem;
}

.termin-karte-schwebe h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0 0 0.55rem;
}
.termin-karte-schwebe p { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 1.25rem; }
.termin-karte-schwebe .hinweis {
  font-size: 0.8rem;
  margin: 1rem 0 0;
  color: var(--ink-soft);
}

/* Unter 700px: beide Karten verlassen die Überlagerung und stellen sich
   in normalem Textfluss oben (Kontakt) bzw. unten (Buchung) an – die große
   Karte (jetzt hochformatig) bleibt dazwischen sichtbar. */
@media (max-width: 740px) {
  .kontakt-daten-schwebe,
  .termin-karte-schwebe {
    position: static;
    width: auto;
    box-shadow: none;
    left: auto; right: auto; top: auto; bottom: auto;
  }
  .kontakt-daten-schwebe { margin-bottom: 1.25rem; }
  .termin-karte-schwebe { margin-top: 1.25rem; }
}

/* Rückfall ohne Kartenausschnitt: einfaches Nebeneinander wie zuvor */
.kontakt-flaeche--ohne-karte {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.kontakt-flaeche--ohne-karte .kontakt-daten-schwebe,
.kontakt-flaeche--ohne-karte .termin-karte-schwebe {
  position: static;
  width: auto;
  box-shadow: none;
}
@media (max-width: 780px) {
  .kontakt-flaeche--ohne-karte { grid-template-columns: 1fr; }
}

/* Kontaktformular */
.formular { margin-top: 2.5rem; max-width: 46rem; }

.form-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem 1.25rem;
}
.form-feld--voll { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-raster { grid-template-columns: 1fr; } }

.form-feld label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.formular input,
.formular select,
.formular textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: var(--feld);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  transition: border-color 0.2s;
}
.formular input:focus,
.formular select:focus,
.formular textarea:focus { border-color: var(--ink-soft); }
.formular textarea { resize: vertical; min-height: 7rem; }

/* Vom Browser automatisch ausgefüllte Felder (Autofill) erzwingen sonst
   eine eigene helle Hintergrundfarbe. Der innenliegende Schatten legt
   unsere Feldfarbe darüber, ohne die Funktion zu beeinträchtigen. */
.formular input:-webkit-autofill,
.formular input:-webkit-autofill:hover,
.formular input:-webkit-autofill:focus,
.formular select:-webkit-autofill,
.formular textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--feld) inset;
  box-shadow: 0 0 0 1000px var(--feld) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 999999s ease-out 0s;
}
.formular input:autofill {
  box-shadow: 0 0 0 1000px var(--feld) inset;
}

.form-einwilligung {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 1.5rem 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  cursor: pointer;
}
.form-einwilligung input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  accent-color: var(--linien-basis);
  flex: none;
  cursor: pointer;
}
.form-einwilligung a {
  color: var(--ink);
  text-decoration-color: var(--dawn);
  text-underline-offset: 3px;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--solid:disabled:hover { background: var(--linien-basis); border-color: var(--linien-basis); color: var(--paper); }

.form-hinweis {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--mist);
  border-left: 2px solid var(--dawn);
  border-radius: 6px;
  font-size: 0.93rem;
}
.form-pflicht { font-size: 0.8rem; color: var(--ink-soft); margin-top: 1rem; }

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

.site-footer {
  flex-shrink: 0;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--hairline);
  padding-block: 2.25rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer nav { display: flex; gap: 1.5rem; }
.site-footer a { color: var(--ink-soft); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--ink); }

/* Unterseiten (Impressum / Datenschutz) */
.unterseite { padding-top: clamp(3rem, 7vw, 5rem); }
.unterseite .textblock { white-space: pre-line; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}