/* ==========================================================================
   Integrative Osteopathie Lahr - Designsystem "Nachtblau & Gold"
   Marineblau, Creme, Logo-Gold und Glas.

   Farben exakt aus dem Praxis-Logo gemessen. Bewegung nach den Regeln von
   Emil Kowalski (EmilDesign): eigene Kurven, kurze Bedienwege, nur
   transform und opacity, Rueckmeldung beim Druecken, ruhige Darstellung
   wird respektiert.
   ========================================================================== */

:root {
  /* --- Markenfarben (Logo) --- */
  --navy:        #112947;
  --navy-deep:   #0B1B2F;
  --navy-abyss:  #071322;
  --navy-raise:  #17334F;
  --gold:        #ED9C28;
  --gold-light:  #F5B655;
  --gold-deep:   #C87F16;
  --cream:       #F6EFDD;

  /* --- Schriften --- */
  --font-text:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  /* --- Bewegung (EmilDesign) ---
     ease-out fuer alles, was erscheint oder auf eine Handlung antwortet,
     ease-in-out fuer Bewegung auf dem Bildschirm, die Schubladenkurve fuer
     Felder, die hereinfahren. Nie ease-in: das fuehlt sich traege an. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease:        var(--ease-out);

  --t-press:   140ms;   /* Rueckmeldung beim Druecken */
  --t-ui:      200ms;   /* Farbe, Hover, kleine Zustaende */
  --t-panel:   420ms;   /* Felder, Schubladen */
  --t-reveal:  850ms;   /* Einblenden beim Scrollen (erzaehlend, darf laenger) */

  /* --- Raster & Rhythmus --- */
  --shell: 1280px;
  --shell-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4.75rem, 9.5vw, 10rem);
  --header-h: 88px;

  /* --- Schriftskala (Text) --- */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);

  /* ======================================================================
     Farbrollen: Grund, Flaechen, Schrift, Akzent
     ====================================================================== */
  --bg:              var(--navy-deep);
  --bg-tief:         var(--navy-abyss);
  --flaeche:         rgba(23, 51, 79, 0.55);
  --flaeche-fest:    #132F4C;
  --ink:             var(--cream);
  --ink-soft:        rgba(246, 239, 221, 0.8);
  --ink-mute:        rgba(246, 239, 221, 0.64);
  --ink-faint:       rgba(246, 239, 221, 0.52);
  --hairline:        rgba(246, 239, 221, 0.12);
  --hairline-strong: rgba(246, 239, 221, 0.24);
  --akzent:          var(--gold);
  --akzent-schrift:  var(--gold);
  --btn-bg:          var(--gold);
  --btn-fg:          var(--navy-deep);
  --btn-bg-hover:    var(--gold-light);
  --btn-icon-bg:     rgba(11, 27, 47, 0.14);
  --auswahl-bg:      var(--gold);
  --auswahl-fg:      var(--navy-deep);

  --font-display:     var(--font-serif);
  --display-weight:   500;
  --display-tracking: -0.012em;
  --h3-weight:        600;
  --num-font:         var(--font-serif);

  --step-2:  clamp(1.55rem, 1.36rem + 0.8vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.55vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.75rem + 2.6vw, 3.95rem);
  --step-5:  clamp(2.8rem, 1.85rem + 4.4vw, 5.8rem);
  --step-6:  clamp(3.2rem, 1.9rem + 5.6vw, 7rem);

  --r-karte: 16px;
  --r-bild:  18px;
  --r-klein: 8px;

  --schatten:      0 18px 46px -22px rgba(0, 0, 0, 0.72);
  --schatten-tief: 0 32px 70px -30px rgba(0, 0, 0, 0.85);
  --korn: 0.26;

  color-scheme: dark;
}

/* ==========================================================================
   Kontrastabschnitt: der eine bewusste Wechsel je Seite - ein
   cremefarbener Abschnitt im Dunkel. Er tauscht nur die Werte, die
   Bausteine darin bleiben dieselben.
   ========================================================================== */
.section--kontrast {
  --bg:              var(--cream);
  --flaeche:         rgba(255, 253, 248, 0.62);
  --flaeche-fest:    #FDFAF3;
  --ink:             var(--navy);
  --ink-soft:        rgba(17, 41, 71, 0.8);
  --ink-mute:        rgba(17, 41, 71, 0.68);
  --ink-faint:       rgba(17, 41, 71, 0.64);
  --hairline:        rgba(17, 41, 71, 0.13);
  --hairline-strong: rgba(17, 41, 71, 0.24);
  --akzent-schrift:  var(--navy);
  --btn-bg:          var(--navy);
  --btn-fg:          var(--cream);
  --btn-bg-hover:    #1D3D62;
  --btn-icon-bg:     rgba(246, 239, 221, 0.14);
  --schatten:        0 18px 46px -26px rgba(17, 41, 71, 0.4);
  background: var(--bg);
  color: var(--ink);
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.04;
  letter-spacing: var(--display-tracking);
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }

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

::selection { background: var(--auswahl-bg); color: var(--auswahl-fg); }

/* Feines Filmkorn - gibt dunklen Flaechen Tiefe statt flachem Blau.
   Fest und ohne Zeigerereignisse: kostet beim Scrollen nichts. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--korn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Layout-Primitive
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.25rem, 6.5vw, 6.5rem); }

/* Frueher als eigener Ton gedacht - jetzt traegt jeder Abschnitt denselben
   Grundton, die Tiefe entsteht ueber die Kaesten darauf. */
.section--panel { background: transparent; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--akzent);
  color: var(--navy-deep);
  padding: 0.85rem 1.4rem;
  font-weight: 600;
  border-radius: 0 0 var(--r-klein) 0;
}
.skip-link:focus { left: 0; }

.split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left  { grid-template-columns: 1.12fr 0.88fr; }
  .split--wide-right { grid-template-columns: 0.88fr 1.12fr; }
  .split--top { align-items: start; }
}

.split > * { min-width: 0; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* Zwei Spalten heisst zwei Spalten: auto-fit wuerde bei voller Breite eine
   dritte oeffnen und aus vier Karten drei plus eine verwaiste machen. */
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

/* ==========================================================================
   Typografie-Bausteine
   ========================================================================== */

/* Kleine Kennzeile ueber einer Ueberschrift. Sparsam: hoechstens eine auf
   drei Abschnitte, sonst wird sie zum Muster statt zum Hinweis. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
  margin-bottom: 1.6rem;
}

.eyebrow::before {
  content: "";
  width: clamp(24px, 3.5vw, 42px);
  height: 1px;
  background: var(--akzent);
}

.section--kontrast .eyebrow { color: var(--ink-mute); }

.display   { font-size: var(--step-6); }
.headline  { font-size: var(--step-5); }
.title     { font-size: var(--step-4); }
.subtitle  { font-size: var(--step-3); }
.heading-s { font-size: var(--step-2); }

h3 { font-weight: var(--h3-weight); }

.lede {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 60ch;
}

.prose p { color: var(--ink-soft); max-width: 66ch; }
.prose p + p { margin-top: 1.15em; }
.prose strong { color: var(--ink); }

/* Links im Fliesstext: erkennbar an der Unterstreichung, nicht allein an
   der Farbe (WCAG 1.4.1). Die Akzentfarbe wandert in die Linie. */
.prose a,
.note a,
.faq__body a:not(.link-arrow) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-ui) ease;
}

.gold { color: var(--akzent-schrift); }

/* Hervorhebung in der Ueberschrift: Kursive derselben Schrift, nie eine
   fremde Familie, in Gold. */
.accent {
  font-style: italic;
  color: var(--akzent-schrift);
}

.section-head { max-width: 46rem; margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.section-head .lede { margin-top: 1.5rem; }
.section-head--kompakt { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }

/* ==========================================================================
   Buttons
   Pille mit eingesetztem Symbolkreis. Beim Druecken gibt die ganze Flaeche
   nach (scale 0.97, 140 ms) - die Oberflaeche bestaetigt, dass sie gehoert
   hat. Schweben nur dort, wo es einen echten Zeiger gibt.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-height: 3.1rem;
  padding: 0.55rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-ui) ease,
              border-color var(--t-ui) ease,
              color var(--t-ui) ease,
              box-shadow var(--t-panel) var(--ease-out);
}

.btn:active { transform: scale(0.97); }

/* Symbolkreis rechts im Knopf: sitzt buendig am Innenrand und bewegt sich
   beim Schweben ein Stueck nach oben rechts - innere Spannung statt
   blossem Farbwechsel. */
.btn--mit-icon { padding-right: 0.45rem; }

.btn__icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--btn-icon-bg);
  transition: transform var(--t-panel) var(--ease-out);
}

.btn__icon svg { width: 15px; height: 15px; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-icon-bg: var(--hairline);
  border-color: var(--hairline-strong);
  box-shadow: none;
}

/* Leise Variante: nur Text mit Linie, fuer die zweite Handlung im
   Kopfbereich. Nie zwei gleich laute Knoepfe nebeneinander. */
.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0.4rem;
  text-decoration: underline;
  text-decoration-color: var(--akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    box-shadow: 0 16px 34px -16px rgba(237, 156, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.36);
  }

  .btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.05); }

  .btn--ghost:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg);
    box-shadow: none;
  }
  .btn--ghost:hover .btn__icon { background: rgba(127, 127, 127, 0.18); }

  .btn--quiet:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration-color: var(--ink);
  }

  .prose a:hover, .note a:hover, .faq__body a:not(.link-arrow):hover {
    text-decoration-color: var(--ink);
  }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.2rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
  padding-bottom: 0.3rem;
  position: relative;
}

.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--akzent);
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform var(--t-panel) var(--ease-out);
}

.link-arrow svg { transition: transform var(--t-panel) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover::after { transform: scaleX(1); }
  .link-arrow:hover svg { transform: translateX(4px); }
}

/* ==========================================================================
   Kopfbereich
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height var(--t-panel) var(--ease-out);
}

.header.is-stuck { height: 72px; }

/* Das Material liegt auf einer eigenen Ebene und laeuft nach unten aus -
   die Leiste loest sich in den Inhalt auf, statt ihn zu durchtrennen. Die
   Ebene reicht bewusst unter die Leiste, damit das Logo ganz auf
   geschlossenem Grund steht. */
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 -34px 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-panel) ease;
  background: linear-gradient(to bottom,
    rgba(16, 37, 60, 0.42) 0%, rgba(15, 35, 57, 0.34) 48%,
    rgba(13, 31, 51, 0.2) 74%, rgba(11, 27, 47, 0) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0.55) 82%, transparent 100%);
}

.header.is-stuck::before { opacity: 1; }

/* Ueber dem cremefarbenen Kontrastabschnitt verdichtet sich das dunkle
   Material. Gemessen im Vorgaenger: 78 Prozent
   Toenung genuegen fuer 5,1:1 bei den Navigationspunkten. */
.header.is-ueber-kontrast::before {
  opacity: 1;
  background: linear-gradient(to bottom,
    rgba(16, 37, 60, 0.8) 0%, rgba(15, 35, 57, 0.72) 48%,
    rgba(13, 31, 51, 0.44) 74%, rgba(11, 27, 47, 0) 100%);
}

.header__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Wortmarke: das echte Praxislogo, in zwei Fassungen im Dokument.
   -hell (Creme) fuer dunklen Grund, das Original (Navy/Orange) fuer
   hellen. Welche sichtbar ist, entscheidet der Untergrund. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
  transition: opacity var(--t-ui) ease;
}

.brand__logo { display: flex; align-items: center; gap: 0.8rem; }
.brand__logo--farbig { display: none; }

.brand__symbol {
  height: 54px;
  width: auto;
  flex-shrink: 0;
  transition: height var(--t-panel) var(--ease-out);
}

.brand__wordmark {
  height: 38px;
  width: auto;
  transition: height var(--t-panel) var(--ease-out);
}

.header.is-stuck .brand__symbol { height: 42px; }
.header.is-stuck .brand__wordmark { height: 30px; }

@media (hover: hover) and (pointer: fine) {
  .brand:hover { opacity: 0.78; }
}

@media (max-width: 560px) {
  .brand__symbol { height: 44px; }
  .brand__wordmark { height: 30px; }
  .brand, .brand__logo { gap: 0.55rem; }
}

@media (max-width: 480px) {
  .brand__symbol { height: 40px; }
  .brand__wordmark { height: 26px; }
}

@media (max-width: 400px) {
  .brand__wordmark { display: none; }
}

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

.nav__link {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  position: relative;
  padding-block: 0.45rem;
  white-space: nowrap;
  transition: color var(--t-ui) ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-panel) var(--ease-out);
}

.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--ink); }
  .nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* Ueber dem Kontrastabschnitt die Schrift des Kopfbereichs umstellen */
.header.is-ueber-kontrast { --ink: var(--cream); --ink-soft: var(--cream); }

/* Akuttermin: goldener Punkt als echtes Signal - der einzige Punkt der
   Seite, er traegt eine Bedeutung (kurzfristig moeglich). */
.nav__link--akut { padding-left: 0.85rem; }

.nav__link--akut::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 0 0 rgba(237, 156, 40, 0.6);
  animation: akutPuls 2.8s ease-in-out infinite;
}

@keyframes akutPuls {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(237, 156, 40, 0.5); }
  35%           { box-shadow: 0 0 0 5px rgba(237, 156, 40, 0); }
}

.header__cta { display: flex; align-items: center; gap: 1rem; }
.header .btn { min-height: 2.75rem; padding: 0.4rem 0.4rem 0.4rem 1.3rem; font-size: 0.74rem; }

.header .btn__icon { width: 1.95rem; height: 1.95rem; }

/* Menueschalter */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: border-color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}

.burger:active { transform: scale(0.94); }

.burger span {
  position: absolute;
  left: 50%;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--t-panel) var(--ease-in-out), opacity var(--t-ui) ease;
}

.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 23.5px; }
.burger span:nth-child(3) { top: 29px; }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-5.5px) rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
  .burger:hover { border-color: var(--akzent); }
}

/* Mobiles Menue: Glasflaeche ueber der Seite. Die Punkte laufen gestaffelt
   ein (40 ms Abstand) - beim Schliessen schneller als beim Oeffnen. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  opacity: 0;
  visibility: hidden;
  background: rgba(11, 27, 47, 0.84);
  backdrop-filter: blur(32px) saturate(170%);
  -webkit-backdrop-filter: blur(32px) saturate(170%);
  transition: opacity 240ms ease, visibility 0s linear 240ms;
  overflow-y: auto;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-panel) var(--ease-out), visibility 0s;
}

/* Kopfleiste ueber dem geoeffneten Menue: ohne eigenes Material */
body.is-locked .header::before { opacity: 0; }

.drawer__nav { display: flex; flex-direction: column; }

.drawer__link {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  letter-spacing: var(--display-tracking);
  line-height: 1.2;
  color: var(--ink);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 180ms ease, transform 180ms ease, color var(--t-ui) ease;
}

.drawer.is-open .drawer__link {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out), color var(--t-ui) ease;
}

.drawer.is-open .drawer__link:nth-child(2) { transition-delay: 40ms; }
.drawer.is-open .drawer__link:nth-child(3) { transition-delay: 80ms; }
.drawer.is-open .drawer__link:nth-child(4) { transition-delay: 120ms; }
.drawer.is-open .drawer__link:nth-child(5) { transition-delay: 160ms; }

.drawer__link[aria-current="page"] { color: var(--akzent-schrift); }

.drawer__link span {
  font-family: var(--font-text);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}

.drawer__link--akut::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--akzent);
  margin-left: auto;
  align-self: center;
}

.drawer__foot { display: flex; flex-direction: column; gap: 0.4rem; }
.drawer__foot a { color: var(--ink-soft); font-size: 0.95rem; padding-block: 0.4rem; }

body.is-locked { overflow: hidden; }

@media (max-width: 1080px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: block; }
}

/* ==========================================================================
   Kopfbereich der Startseite (Hero) mit Film

   Film bildschirmfuellend, Schrift unten links wie ein Filmtitel.

   Das Standbild liegt immer darunter und ist das, was zuerst erscheint.
   Der Film blendet erst ein, wenn er wirklich laeuft (siehe main.js) -
   ohne JavaScript, bei ruhiger Darstellung oder im Datensparmodus bleibt
   es beim Standbild.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(100svh, 980px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(7rem, 15vh, 10rem);
  background: var(--navy-abyss);
}

.hero__inner { position: static; }
.hero__inner > :not(.hero__media):not(.film-schalter) { position: relative; z-index: 2; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--navy-abyss);
}

.hero__media picture,
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media picture { display: block; }

.film { opacity: 0; transition: opacity 1400ms var(--ease-out); }
.film.is-playing { opacity: 1; }

/* Verlauf fuer die Lesbarkeit: links und unten dicht, oben und rechts
   offen fuer das Bild. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Ein weicher Schatten liegt gezielt hinter der Ueberschrift - so bleibt
     das Morgenlicht oben rechts stehen und die erste Zeile trotzdem lesbar
     (gemessen: mindestens 3:1 an jedem Buchstabenpixel). */
  background:
    radial-gradient(58% 34% at 36% 44%, rgba(7, 19, 34, 0.44) 0%, rgba(7, 19, 34, 0.28) 55%, rgba(7, 19, 34, 0) 100%),
    linear-gradient(95deg, rgba(7, 19, 34, 0.86) 0%, rgba(7, 19, 34, 0.62) 34%, rgba(7, 19, 34, 0.18) 64%, rgba(7, 19, 34, 0.06) 100%),
    linear-gradient(to top, rgba(7, 19, 34, 0.94) 0%, rgba(7, 19, 34, 0.5) 30%, rgba(7, 19, 34, 0) 58%),
    linear-gradient(to bottom, rgba(7, 19, 34, 0.55) 0%, rgba(7, 19, 34, 0) 22%);
}

.hero__eyebrow { margin-bottom: 1.4rem; }

.hero__title {
  font-size: var(--step-6);
  line-height: 0.98;
  max-width: 21ch;
  margin-bottom: 1.8rem;
}

.hero__title .accent { display: inline-block; padding-bottom: 0.08em; }

.hero__lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
}

.hero .btn-row { margin-top: 2.2rem; }

/* Anhalten der Filme (WCAG 2.2.2): bewegte Inhalte, die laenger als fuenf
   Sekunden laufen, brauchen einen Schalter. Er wirkt auf alle Filme der
   Seite und merkt sich die Wahl fuer weitere Seiten. */
.film-schalter {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: clamp(7rem, 15vh, 10rem);
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: rgba(11, 27, 47, 0.34);
  color: var(--ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease;
}

.hat-film .film-schalter { display: grid; }
.film-schalter:active { transform: scale(0.94); }
.film-schalter svg { width: 14px; height: 14px; }
.film-schalter .symbol-play { display: none; }
.film-schalter[aria-pressed="true"] .symbol-play { display: block; }
.film-schalter[aria-pressed="true"] .symbol-pause { display: none; }

@media (hover: hover) and (pointer: fine) {
  .film-schalter:hover { background: rgba(11, 27, 47, 0.6); }
}

/* ==========================================================================
   Eckdaten unter dem Kopfbereich
   Glasleiste, die in den Film hineinragt.
   ========================================================================== */

.fakten {
  position: relative;
  z-index: 3;
  margin-top: clamp(-5.5rem, -9vh, -4rem);
}

.js .fakten__liste { animation: faktenEin 900ms var(--ease-out) 650ms both; }

@keyframes faktenEin {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.fakten__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: fit-content;
  max-width: 100%;
  padding: clamp(1.2rem, 2.6vw, 1.7rem) clamp(0.5rem, 1.5vw, 1rem);
  border-radius: var(--r-karte);
}

.fakt {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-inline: clamp(1rem, 3vw, 2.4rem);
  min-width: 0;
}

.fakt + .fakt { border-left: 1px solid var(--hairline-strong); }

.fakt__wert {
  font-family: var(--num-font);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

.fakt__label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.35;
  hyphens: manual;
}

/* ==========================================================================
   Seitenkopf der Unterseiten
   ========================================================================== */

.pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(4rem, 10vw, 8rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

/* Der Waldfilm der Startseite als leiser Grund - verbindet die Unterseiten
   mit ihr. Drei Ebenen: unten das Standbild (erstes Filmbild, sofort da),
   darueber der Film (blendet ein, sobald er laeuft), obenauf der Schleier
   fuer die Schrift. Hochkant beide im Hochformat-Zuschnitt, derselbe wie
   der Film ihn nimmt - sonst spraenge das Bild beim Einblenden. */
.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: image-set(url("../video/a-start-quer-1280.webp") type("image/webp"), url("../video/a-start-quer-1280.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 70% 40%;
}

.pagehead__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pagehead__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
}

.pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(95deg, rgba(11, 27, 47, 0.97) 0%, rgba(11, 27, 47, 0.82) 45%, rgba(11, 27, 47, 0.58) 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(11, 27, 47, 0) 45%);
}

@media (max-aspect-ratio: 4/5) {
  .pagehead::before {
    background-image: image-set(url("../video/a-start-hoch.webp") type("image/webp"), url("../video/a-start-hoch.jpg") type("image/jpeg"));
    background-position: 50% 40%;
  }
  .pagehead__media video { object-position: 50% 40%; }
}

/* Schalter unten rechts im Kopf - am Handy links neben der Randspalte */
.pagehead .film-schalter { bottom: 1.25rem; }
@media (max-width: 900px) {
  .pagehead .film-schalter { right: calc(var(--gutter) + 64px); }
}

.pagehead__inner { position: relative; z-index: 1; }
.pagehead__title { font-size: var(--step-5); max-width: 17ch; margin-bottom: 1.8rem; }

/* Brotkrumen */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.8rem;
  list-style: none;
  padding: 0;
}

.crumbs a { color: var(--ink-soft); transition: color var(--t-ui) ease; }
.crumbs li { display: flex; align-items: center; gap: 0.6rem; }
.crumbs li + li::before { content: "/"; color: var(--ink-faint); }

/* Ueber dem laufenden Waldfilm reicht das gedimmte Creme am Handy nicht in
   jedem Moment (gemessen 4,45:1 bei Sekunde 2) - einen Hauch heller. */
.pagehead .crumbs { color: rgba(246, 239, 221, 0.74); }

@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover { color: var(--ink); }
}

/* ==========================================================================
   Karten
   ========================================================================== */

.card {
  position: relative;
  padding: clamp(1.8rem, 3.2vw, 2.7rem);
  background: var(--flaeche);
  border: 1px solid var(--hairline);
  border-radius: var(--r-karte);
  box-shadow: var(--schatten);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-width: 0;
  transition: transform var(--t-panel) var(--ease-out), border-color var(--t-ui) ease, box-shadow var(--t-panel) var(--ease-out);
}

.card__num {
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
}

.card__title { font-size: var(--step-2); }
.card__text { color: var(--ink-soft); font-size: 0.98rem; }
.card__link { margin-top: auto; padding-top: 0.6rem; }

.card ul { color: var(--ink-soft); }
.card li strong { color: var(--ink); }

a.card { color: inherit; }

@media (hover: hover) and (pointer: fine) {
  a.card:hover { transform: translateY(-3px); border-color: var(--hairline-strong); box-shadow: var(--schatten-tief); }
}

/* Anwendungsgebiete im Beistellkasten */
.liste-ruhig { list-style: none; padding: 0; margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.8rem; }
.liste-ruhig li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); line-height: 1.5; }
.liste-ruhig li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.7rem;
  height: 1px;
  background: var(--akzent);
}

/* ==========================================================================
   Verfahren auf der Startseite
   Asymmetrisches Raster mit Praxisfotos (acht Inhalte, acht Zellen).
   ========================================================================== */

.verfahren {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(0.85rem, 1.5vw, 1.2rem);
}

.verfahren__item { min-width: 0; }

.verfahren__link {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 19rem;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  border-radius: var(--r-karte);
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--hairline);
  box-shadow: var(--schatten);
  transition: border-color var(--t-ui) ease, box-shadow var(--t-panel) var(--ease-out), transform var(--t-press) var(--ease-out);
}

.verfahren__link:active { transform: scale(0.99); }

.verfahren__bild {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.verfahren__bild picture { display: block; width: 100%; height: 100%; }
.verfahren__bild img { width: 100%; height: 100%; object-fit: cover; }

.verfahren__bild img {
  transform: scale(1.02);
  transition: transform 900ms var(--ease-out);
}

/* Schleier von unten, damit die Schrift auf jeder Bildstelle traegt */
.verfahren__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(7, 19, 34, 0.97) 0%, rgba(7, 19, 34, 0.93) 40%, rgba(7, 19, 34, 0.8) 62%, rgba(7, 19, 34, 0.34) 86%, rgba(7, 19, 34, 0.06) 100%);
}

.verfahren__bild--leer { display: none; }

.verfahren__text { display: flex; flex-direction: column; gap: 0.7rem; max-width: 44ch; }

.verfahren__marke {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
}

.verfahren__titel {
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  color: var(--ink);
}

.verfahren__kurz { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; }

.verfahren__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
}

.verfahren__mehr svg { transition: transform var(--t-panel) var(--ease-out); }

.verfahren__item--spezial .verfahren__link { border-color: rgba(237, 156, 40, 0.45); }

/* Bildkacheln am Handy hoeher, damit oberhalb der Schrift noch Bild bleibt */
.verfahren__item:not(.verfahren__item--text) .verfahren__link { min-height: 25rem; }
@media (min-width: 1000px) {
  .verfahren__item:not(.verfahren__item--text) .verfahren__link { min-height: 22rem; }
}

/* Bildausschnitt je Foto: der interessante Teil liegt selten in der Mitte.
   Liegt er tiefer, setzt die Kachel ihren eigenen Wert als --ausschnitt. */
.verfahren__bild img { object-position: 50% var(--ausschnitt, 30%); }

@media (hover: hover) and (pointer: fine) {
  .verfahren__link:hover { border-color: var(--hairline-strong); box-shadow: var(--schatten-tief); }
  .verfahren__link:hover .verfahren__bild img { transform: scale(1.06); }
  .verfahren__link:hover .verfahren__mehr svg { transform: translateX(4px); }
}

@media (min-width: 640px) {
  .verfahren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verfahren__item:first-child { grid-column: 1 / -1; }
  .verfahren__item:first-child .verfahren__link { min-height: 26rem; }
}

@media (min-width: 1000px) {
  .verfahren {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(17.5rem, auto);
  }
  .verfahren__item:nth-child(1) { grid-column: 1 / 8; grid-row: span 2; }
  .verfahren__item:nth-child(2) { grid-column: 8 / 13; }
  .verfahren__item:nth-child(3) { grid-column: 8 / 13; }
  .verfahren__item:nth-child(4) { grid-column: 1 / 5; }
  .verfahren__item:nth-child(5) { grid-column: 5 / 9; }
  .verfahren__item:nth-child(6) { grid-column: 9 / 13; }
  .verfahren__item:nth-child(7) { grid-column: 1 / 7; }
  .verfahren__item:nth-child(8) { grid-column: 7 / 13; }
  .verfahren__item:first-child .verfahren__link { min-height: 100%; }
  .verfahren__item:first-child .verfahren__titel { font-size: var(--step-4); }
}

/* A: Die Marke steht auf dem Foto. Kleine Versalien in Gold braeuchten dort
   fast schwarzen Grund - das Gold wandert in die Linie davor. */
.verfahren__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
}
.verfahren__marke::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--akzent);
}

/* ==========================================================================
   Bilder in Rahmen
   Beim Einblenden oeffnet sich der Rahmen wie ein Fenster (clip-path) und
   das Bild setzt sich dabei - nur transform und clip, keine Layoutarbeit.
   ========================================================================== */

.frame {
  position: relative;
  border-radius: var(--r-bild);
  overflow: hidden;
  background: var(--flaeche-fest);
  aspect-ratio: 4 / 5;
}

.frame picture { display: block; width: 100%; height: 100%; }

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1400ms var(--ease-out);
}

.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--hairline-strong);
  pointer-events: none;
}

.frame--wide { aspect-ratio: 3 / 2; }

.frame--placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}

.frame--placeholder p {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: 22ch;
  line-height: 1.9;
}

/* Marineblauer Schleier bindet die Fotos an die Marke */
.frame--tint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(170deg, rgba(17, 41, 71, 0.14) 0%, rgba(7, 19, 34, 0.38) 100%);
  mix-blend-mode: multiply;
}

.section--kontrast .frame--tint::before {
  background: linear-gradient(to top, rgba(17, 41, 71, 0.08) 0%, transparent 32%);
  mix-blend-mode: normal;
}

.js [data-reveal] .frame,
.js .frame[data-reveal] {
  clip-path: inset(6% 6% 6% 6% round var(--r-bild));
  transition: clip-path 1200ms var(--ease-out);
}

.js [data-reveal].is-in .frame,
.js .frame[data-reveal].is-in { clip-path: inset(0 0 0 0 round var(--r-bild)); }

[data-reveal].is-in .frame img,
.frame.is-in img { transform: scale(1); }

.figure-caption {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink-mute);
}

/* Grosses Logo als ruhiges Schlusszeichen */
.logo-mark {
  display: block;
  margin: 0 auto;
  width: min(220px, 56vw);
  height: auto;
  opacity: 0.92;
}

.logo-outro { text-align: center; }
.logo-outro .logo-mark { margin-bottom: 2.4rem; }

.frame + .card { margin-top: clamp(1rem, 2vw, 1.5rem); }

/* ==========================================================================
   Kennworte (Beschwerdebilder)
   ========================================================================== */

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}

.tag {
  padding: 0.5rem 1rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* ==========================================================================
   Leitsatz mit Film
   Film ueber die volle Breite, der Satz liegt mittig darauf.
   ========================================================================== */

.statement {
  position: relative;
  text-align: center;
  padding-block: clamp(4.5rem, 10vw, 9rem);
}

.statement__quote {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-4);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: var(--display-tracking);
  max-width: 22ch;
  margin-inline: auto;
  quotes: none;
}

.statement__quote .accent { font-style: italic; }

.statement__by {
  margin-top: 2.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
}

/* Auf dem Film in A: kleine Versalien in Gold braeuchten fast schwarzen Grund */
.statement--film .statement__by { color: var(--ink-soft); }

.statement--film {
  isolation: isolate;
  overflow: hidden;
  min-height: min(82vh, 760px);
  display: flex;
  align-items: center;
  background: var(--navy-abyss);
}

.statement--film .statement__inner { position: static; }
.statement--film .statement__inner > :not(.statement__media):not(.film-schalter) { position: relative; z-index: 2; }

.statement__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--navy-abyss);
}

.statement__media picture,
.statement__media img,
.statement__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.statement__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(7, 19, 34, 0.8) 0%, rgba(7, 19, 34, 0.46) 100%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(11, 27, 47, 0) 18%, rgba(11, 27, 47, 0) 82%, var(--bg) 100%);
}

.statement--film .film-schalter { bottom: 1.5rem; }

/* ==========================================================================
   Werdegang
   ========================================================================== */

.timeline { list-style: none; padding: 0; margin: 0; }

.timeline li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}

.timeline li:last-child { border-bottom: 1px solid var(--hairline); }

.timeline__year {
  font-family: var(--num-font);
  font-size: var(--step-2);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  color: var(--akzent-schrift);
  line-height: 1.2;
}

.timeline__what { font-weight: 600; margin-bottom: 0.3rem; color: var(--ink); }
.timeline__where { color: var(--ink-mute); font-size: 0.95rem; }

@media (max-width: 560px) {
  .timeline li { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ==========================================================================
   Ablauf in Schritten
   Senkrecht mit Linie; auf der Startseite (steps--quer) am Rechner als
   Zeitleiste nebeneinander.
   ========================================================================== */

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }

.steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.3rem);
  border-top: 1px solid var(--hairline);
}

.steps li:last-child { border-bottom: 1px solid var(--hairline); }

.step__num {
  font-family: var(--num-font);
  font-size: var(--step-3);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--akzent-schrift);
  min-width: 2.2ch;
}

.step__title { font-size: var(--step-2); margin-bottom: 0.6rem; }
.step__text { color: var(--ink-soft); max-width: 60ch; }

@media (min-width: 900px) {
  .steps--quer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    border-top: 1px solid var(--hairline-strong);
  }

  .steps--quer li {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    border: 0;
    padding: 2.4rem 0 0;
  }

  .steps--quer li:last-child { border: 0; }

  /* Markierung auf der Linie */
  .steps--quer li::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--akzent);
    box-shadow: 0 0 0 5px var(--bg);
  }
}

/* ==========================================================================
   Fragen und Antworten
   ========================================================================== */

.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: var(--display-tracking);
  transition: color var(--t-ui) ease;
}

.faq summary::-webkit-details-marker { display: none; }

.faq__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  position: relative;
  margin-top: 0.3rem;
}

.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--akzent);
  transform: translate(-50%, -50%);
  transition: transform var(--t-panel) var(--ease-in-out), opacity var(--t-ui) ease;
}

.faq__icon::before { width: 14px; height: 1.5px; }
.faq__icon::after  { width: 1.5px; height: 14px; }

.faq details[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__body { padding-bottom: 1.8rem; padding-right: clamp(0rem, 5vw, 3.5rem); }
.faq__body p { color: var(--ink-soft); max-width: 66ch; }
.faq__body p + p { margin-top: 1em; }
.faq__body strong { color: var(--ink); }

/* Antwort erscheint kurz und von oben - schnell genug, dass Nachschlagen
   nicht zur Geduldsprobe wird. */
.faq details[open] .faq__body { animation: faqAuf 260ms var(--ease-out); }

@keyframes faqAuf {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { color: var(--akzent-schrift); }
}

/* ==========================================================================
   Abschlussband
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
  border-top: 1px solid var(--hairline);
}

.cta-band::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1100px, 120vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(237, 156, 40, 0.15) 0%, rgba(237, 156, 40, 0.06) 45%, transparent 100%);
  pointer-events: none;
}

.cta-band__inner { position: relative; z-index: 1; }
.cta-band__title { font-size: var(--step-5); max-width: 18ch; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; margin-top: 1.5rem; text-align: center; }
.cta-band .btn-row { justify-content: center; }

/* ==========================================================================
   Kontaktkacheln
   ========================================================================== */

.contact-grid { display: grid; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }

@media (min-width: 720px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }

.contact-tile {
  background: var(--bg);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: background-color var(--t-ui) ease;
}

.contact-tile__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
}

.contact-tile__value {
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: var(--display-tracking);
  font-variant-numeric: lining-nums;
}

.contact-tile__note { font-size: 0.92rem; color: var(--ink-mute); }

@media (hover: hover) and (pointer: fine) {
  a.contact-tile:hover { background: var(--flaeche-fest); }
}

/* ==========================================================================
   Fussbereich - die tiefste, dunkelste Zone
   ========================================================================== */

.footer {
  --ink: var(--cream);
  --ink-soft: rgba(246, 239, 221, 0.8);
  --ink-mute: rgba(246, 239, 221, 0.64);
  --ink-faint: rgba(246, 239, 221, 0.52);
  --hairline: rgba(246, 239, 221, 0.12);
  --akzent-schrift: var(--gold);
  background: var(--bg-tief);
  color: var(--ink);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.95rem;
}

/* Am Handy stehen rechts Schnellwahl und Reiter; der Fussbereich braucht
   darunter Platz, samt Home-Leiste neuerer iPhones. */
@media (max-width: 900px) {
  .footer { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
}

.footer__top {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 860px) { .footer__top { grid-template-columns: 1.5fr 1fr 1fr; } }

.footer__claim {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: var(--display-tracking);
  max-width: 20ch;
  margin-top: 1.5rem;
}

.footer__col h3 {
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
  margin-bottom: 1.4rem;
}

.footer__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.footer__list a, .footer__list span { color: var(--ink-soft); transition: color var(--t-ui) ease; }

.footer__bottom {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  font-size: 0.86rem;
  color: var(--ink-faint);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__legal a { color: var(--ink-mute); transition: color var(--t-ui) ease; }

.footer__consent {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color var(--t-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer__list a:hover, .footer__legal a:hover, .footer__consent:hover { color: var(--gold); }
}

address { font-style: normal; }

/* ==========================================================================
   Hinweise, Rechtstexte, Hilfsklassen
   ========================================================================== */

.u-center { text-align: center; }
.u-mt-s { margin-top: 1rem; }
.u-mt { margin-top: 2rem; }
.u-mt-l { margin-top: clamp(2.5rem, 5vw, 4rem); }
.u-mb { margin-bottom: 2rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.note {
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  border-left: 2px solid var(--akzent);
  background: rgba(237, 156, 40, 0.07);
  border-radius: 0 var(--r-klein) var(--r-klein) 0;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.note strong { color: var(--ink); }

/* Rechtstexte */
.legal h2 { font-size: var(--step-3); margin-top: 2.8rem; margin-bottom: 0.9rem; }
.legal h3 { font-size: var(--step-1); font-family: var(--font-text); font-weight: 600; letter-spacing: 0; margin-top: 1.8rem; margin-bottom: 0.6rem; }
.legal p, .legal li { color: var(--ink-soft); font-size: 0.98rem; }
.legal p + p { margin-top: 0.9em; }
.legal ul { padding-left: 1.3rem; margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 3px; }
.legal address p { margin: 0; }
.legal strong { color: var(--ink); }

/* Sprechzeiten-Tabelle auf der Kontaktseite */
.zeiten { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.zeiten th { text-align: left; font-weight: 600; padding: 0.35rem 0; color: var(--ink); }
.zeiten td { text-align: right; padding: 0.35rem 0; color: var(--ink-soft); }
.zeiten td.zu { color: var(--ink-mute); }

/* ==========================================================================
   Preise
   ========================================================================== */

.pricing { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hairline); }

.pricing li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: baseline;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--hairline);
}

.pricing__dur {
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: var(--display-tracking);
}

.pricing__note {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin-top: -0.4rem;
  max-width: 52ch;
}

.pricing__amount {
  font-family: var(--num-font);
  font-size: var(--step-3);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--akzent-schrift);
  white-space: nowrap;
}

/* Hansefit-Hinweis */
.pricing-highlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.4rem;
  margin-top: 2rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid rgba(237, 156, 40, 0.42);
  border-radius: 999px;
  background: rgba(237, 156, 40, 0.07);
}

.pricing-highlight__badge {
  font-family: var(--num-font);
  font-size: var(--step-2);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  color: var(--akzent-schrift);
  line-height: 1;
}

.pricing-highlight__text { font-size: 0.97rem; color: var(--ink-soft); }

@media (max-width: 520px) { .pricing-highlight { border-radius: var(--r-karte); } }

/* Eckpunkt: wichtigster Preis und Abrechnungsart */
.keyfact {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-karte);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

@media (min-width: 720px) { .keyfact { grid-template-columns: auto 1fr; } }

.keyfact__price {
  font-family: var(--num-font);
  font-size: clamp(3rem, 7vw, 4.8rem);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--akzent-schrift);
  white-space: nowrap;
}

.keyfact__unit {
  display: block;
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.8rem;
}

.keyfact__body p { font-size: var(--step-0); color: var(--ink-soft); max-width: 58ch; }
.keyfact__body p + p { margin-top: 0.8em; }
.keyfact__body strong { color: var(--ink); }

@media (min-width: 720px) {
  .keyfact__price { padding-right: clamp(1.25rem, 3vw, 2.5rem); border-right: 1px solid var(--hairline-strong); }
}

/* ==========================================================================
   Warnhinweis - sparsam eingesetztes, warmes Rot
   ========================================================================== */

:root {
  --alert: #E07A5F;
  --alert-deep: #A8432A;
}

.alert {
  --alert-schrift: var(--alert);
  position: relative;
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
  border: 1px solid rgba(217, 107, 79, 0.45);
  border-radius: var(--r-karte);
  background: rgba(217, 107, 79, 0.07);
  min-width: 0;
}

.alert__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alert-schrift);
}

.alert__head svg { flex-shrink: 0; }
.alert p { color: var(--ink-soft); }
.alert strong { color: var(--ink); }
.alert__nachsatz { margin-top: 1.3rem; font-size: 0.95rem; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }

.checklist li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.75rem;
  height: 1px;
  background: var(--akzent);
}

.checklist--alert li::before { background: var(--alert-schrift, var(--alert)); height: 2px; }
.checklist li strong { color: var(--ink); }

@media (min-width: 680px) {
  .checklist--zwei { grid-template-columns: 1fr 1fr; gap: 0.9rem 2rem; }
}

.emergency-call {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid rgba(217, 107, 79, 0.5);
  border-radius: 999px;
  background: rgba(217, 107, 79, 0.1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: background-color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}

.emergency-call:active { transform: scale(0.97); }

.emergency-call strong {
  font-family: var(--num-font);
  font-size: var(--step-2);
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--alert-schrift, var(--alert));
}

@media (hover: hover) and (pointer: fine) {
  .emergency-call:hover { background: rgba(217, 107, 79, 0.18); }
}

/* ==========================================================================
   Aufklaerungsboegen: Zeilen zum Herunterladen
   ========================================================================== */

.doc-item {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-klein);
  background: rgba(11, 27, 47, 0.4);
  min-width: 0;
  transition: transform var(--t-press) var(--ease-out), border-color var(--t-ui) ease, background-color var(--t-ui) ease;
}

.doc-item:active { transform: scale(0.98); }

.doc-item__type {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(237, 156, 40, 0.16);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.doc-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-item__name { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 0.15rem; color: var(--ink); }
.doc-item__meta { display: block; font-size: 0.86rem; color: var(--ink-mute); line-height: 1.45; }

@media (hover: hover) and (pointer: fine) {
  .doc-item:hover { border-color: rgba(237, 156, 40, 0.5); background: rgba(23, 51, 79, 0.65); }
}

/* ==========================================================================
   Aufklaerungsboegen als Reiter am Bildschirmrand
   Bleibt beim Scrollen stehen. Faehrt am Rechner beim Darueberfahren aus,
   am Handy beim Antippen. Das X schiebt ihn nur zurueck an den Rand -
   der Griff bleibt immer erreichbar.
   ========================================================================== */

.docktab {
  position: fixed;
  top: calc(50% + var(--dock-tiefer, 0px));   /* tiefer: siehe Schnellwahl unten */
  right: 0;
  z-index: 94;
  /* Der Behaelter ist so breit wie Griff plus Feld. Ohne diese Zeile
     faengt seine unsichtbare Flaeche die Beruehrungen ab, und die Knoepfe
     darueber reagieren nicht. Die Kinder holen sich die Bedienbarkeit
     zurueck. */
  pointer-events: none;
  display: flex;
  align-items: stretch;
  transform: translateY(-50%) translateX(calc(100% - var(--griff, 54px)));
  transition: transform 460ms var(--ease-drawer);
}

.docktab.is-open { transform: translateY(-50%) translateX(0); }

.docktab__handle {
  pointer-events: auto;
  flex-shrink: 0;
  align-self: center;
  transform: translateY(var(--griff-versatz, 0px));
  width: var(--griff, 54px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.6rem 0;
  background: var(--gold);
  color: var(--navy-deep);
  border: none;
  border-radius: var(--r-karte) 0 0 var(--r-karte);
  cursor: pointer;
  box-shadow: -6px 0 28px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: background-color var(--t-ui) ease;
}

.docktab__handle span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.docktab__handle svg { flex-shrink: 0; }

@media (hover: hover) and (pointer: fine) {
  .docktab__handle:hover { background: var(--gold-light); }
}

.docktab__panel {
  pointer-events: auto;
  width: min(400px, calc(100vw - 54px - 1rem));
  max-height: min(78vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: rgba(20, 45, 73, 0.74);
  backdrop-filter: blur(30px) saturate(175%);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
  border: 1px solid rgba(246, 239, 221, 0.2);
  border-right: none;
  box-shadow: -18px 0 50px -20px rgba(0, 0, 0, 0.7);
  position: relative;
}

.docktab__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color var(--t-ui) ease, border-color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}

.docktab__close:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .docktab__close:hover { color: var(--ink); border-color: var(--ink); }
}

.docktab__title {
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: var(--display-tracking);
  margin-bottom: 0.5rem;
  padding-right: 2.5rem;
}

.docktab__intro { font-size: 0.93rem; color: var(--ink-mute); margin-bottom: 1.3rem; line-height: 1.55; }

/* Die Mailadresse muss als Link zu erkennen sein: volle Schriftfarbe plus
   Unterstreichung in der Akzentfarbe (Gold kam auf dem Glas nur auf 3,1:1). */
.docktab__intro a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--akzent);
}

.docktab__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.docktab__foot {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.86rem;
  color: var(--ink-mute);
  line-height: 1.55;
}

.docktab .doc-item { padding: 0.85rem 0.95rem; gap: 0.8rem; }
.docktab .doc-item__type { width: 34px; height: 34px; }   /* Schrift wie oben: 12 px, nicht kleiner */
.docktab .doc-item__name { font-size: 0.94rem; }
.docktab .doc-item__meta { font-size: 0.8rem; }

@media (max-width: 720px) {
  .docktab {
    --griff: 46px;
    top: auto;
    bottom: calc(76px - var(--dock-tiefer, 0px) + env(safe-area-inset-bottom));
    transform: translateY(0) translateX(calc(100% - var(--griff)));
  }
  .docktab.is-open { transform: translateY(0) translateX(0); }
  .docktab__handle { padding: 1.2rem 0; gap: 0.6rem; }
  .docktab__handle span { font-size: 0.75rem; letter-spacing: 0.1em; }
  .docktab__panel { max-height: 62vh; }
}

@media print { .docktab, .schnellwahl { display: none; } }

/* ==========================================================================
   Schnellwahl am rechten Bildschirmrand
   Drei Knoepfe, gestapelt direkt ueber dem Griff des Reiters und in genau
   dessen Breite - immer als Spalte am Rand. Die Hoehe des Griffs haengt an der Laenge seines
   Schriftzugs - main.js misst sie und legt sie als --griff-oben ab. Der
   Rueckfallwert ist nachgerechnet, nicht geraten: der Reiter haengt 76px
   ueber dem Rand, sein Feld ist 62vh hoch, der Griff sitzt mittig und ist
   rund 220px hoch - macht 76 + 31vh + 110.
   ========================================================================== */

.schnellwahl {
  position: fixed;
  right: 0;
  bottom: calc(var(--griff-oben, calc(186px + 31vh)) + 10px);
  z-index: 93;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.schnellwahl__knopf {
  width: var(--griff-breite, 46px);
  height: var(--griff-breite, 46px);
  display: grid;
  place-items: center;
  border-radius: 14px 0 0 14px;
  box-shadow: -6px 0 28px -10px rgba(0, 0, 0, 0.55);
  transition: filter var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}

.schnellwahl__knopf:active { transform: translateX(2px) scale(0.97); }

.schnellwahl__knopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Anrufen und Mail tragen dieselbe Farbe wie der Griff darunter - eine
   Spalte, ein Gedanke. WhatsApp bleibt in seinem Gruen, weil es daran
   erkannt wird. */
.schnellwahl__knopf--anruf,
.schnellwahl__knopf--mail  { background: var(--gold); color: var(--navy-deep); }
.schnellwahl__knopf--wa    { background: #25D366; color: #FFFFFF; }

@media (hover: hover) and (pointer: fine) {
  .schnellwahl__knopf:hover { filter: brightness(1.08); }
}

/* Wenig Hoehe (kleine Handys, Browserleisten, Handy quer): Die Spalte
   bleibt am Rand. main.js schafft Platz in dieser Reihenfolge und nur so
   weit wie noetig:
     1. Griff rueckt im Reiter nach unten       (--griff-versatz)
     2. Reiter rueckt naeher an den Rand        (--dock-tiefer)
     3. Knoepfe enger und etwas flacher         (.schnellwahl--knapp)
     4. Griff nur mit Symbol, Schriftzug bleibt fuer Vorleseprogramme
                                                (.docktab--kurz) */
.schnellwahl--knapp { gap: 6px; }
.schnellwahl--knapp .schnellwahl__knopf { height: var(--knopf-hoehe, 40px); }

.docktab--kurz .docktab__handle { padding-block: 0.95rem; gap: 0; }
.docktab--kurz .docktab__handle span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 900px) { .schnellwahl { display: flex; } }

@media (min-width: 721px) {
  .schnellwahl { --griff-breite: 54px; bottom: calc(var(--griff-oben, calc(50vh + 125px)) + 10px); }
}

/* Ausweichen beim Scrollen (nur Handy und kleines Tablet): Waehrend die
   Seite bewegt wird, fahren Schnellwahl und Reiter nach rechts aus dem
   Bild; steht sie still, gleiten sie an genau dieselbe Stelle zurueck.
   Hinaus schneller als herein. */
@media (max-width: 900px) {
  .schnellwahl { transition: transform 460ms var(--ease-drawer); will-change: transform; }
  html.randleiste-weg .schnellwahl { transform: translateX(100%); transition-duration: 240ms; }
  html.randleiste-weg .docktab:not(.is-open) { transform: translateY(-50%) translateX(100%); transition-duration: 240ms; }
}

@media (max-width: 720px) {
  html.randleiste-weg .docktab:not(.is-open) { transform: translateY(0) translateX(100%); }
}

/* Bei ruhiger Darstellung wird das Ausweichen in main.js gar nicht erst
   eingeschaltet. Hier den transform aufzuheben waere falsch: derselbe Wert
   haelt den Reiter in seiner Ruhelage am Rand. */
@media (prefers-reduced-motion: reduce) {
  .schnellwahl, .docktab { transition: none; }
}

/* Ist der Reiter ausgefahren, verschwinden die Knoepfe - sie schimmerten
   sonst durch sein Glasfeld. */
.docktab.is-open ~ .schnellwahl { opacity: 0; pointer-events: none; transition: opacity var(--t-ui) ease; }

/* Fremdes Abzeichen des Hosters, unten rechts (siehe main.js). Bleibt
   lesbar und anklickbar, tritt aber zurueck. */
.iol-abzeichen { opacity: 0.28; filter: saturate(0.55); transition: opacity 450ms ease, filter 450ms ease; }
.iol-abzeichen:hover, .iol-abzeichen:focus-within { opacity: 0.95; filter: none; }

/* ==========================================================================
   Einwilligungsfenster
   Erscheint beim ersten Besuch. Hinein 500 ms, hinaus 250 ms - wer
   entschieden hat, will nicht warten.
   ========================================================================== */

.consent {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 200;
  width: min(880px, calc(100vw - 2rem));
  transform: translateX(-50%) translateY(24px);
  opacity: 0;
  visibility: hidden;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: rgba(17, 40, 66, 0.8);
  backdrop-filter: blur(36px) saturate(185%);
  -webkit-backdrop-filter: blur(36px) saturate(185%);
  border: 1px solid rgba(246, 239, 221, 0.2);
  border-radius: var(--r-karte);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  transition: transform 250ms ease, opacity 250ms ease, visibility 0s linear 250ms;
}

.consent.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 520ms var(--ease-out), opacity 420ms var(--ease-out), visibility 0s;
}

/* Handy: Der Dialog liegt beim ersten Besuch ueber der halben Seite, und
   jede Unschaerfe dahinter wird beim Scrollen neu gerechnet (pruefe_tempo.js:
   rund 12 Bilder/s bei 36px). Leichtere Unschaerfe, dichterer Grund. */
@media (max-width: 720px) {
  .consent {
    background: rgba(17, 40, 66, 0.92);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }
}

.consent__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.consent__head svg { flex-shrink: 0; color: var(--akzent); }

.consent__title {
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: var(--display-tracking);
}

.consent__text { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.6; max-width: 64ch; }
.consent__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 3px; }

.consent__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; align-items: center; }
.consent .btn { min-height: 2.9rem; padding-inline: 1.5rem; }

.consent__link {
  background: none;
  border: none;
  padding: 0.6rem 0.2rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--t-ui) ease;
  margin-left: auto;
}

.consent__details { display: none; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }
.consent.is-detailed .consent__details { display: block; }

.consent__option { display: flex; align-items: flex-start; gap: 1rem; padding: 0.9rem 0; }
.consent__option + .consent__option { border-top: 1px solid var(--hairline); }
.consent__option-text { flex: 1; min-width: 0; }
.consent__option-name { display: block; font-weight: 600; font-size: 0.97rem; margin-bottom: 0.2rem; }
.consent__option-desc { display: block; font-size: 0.88rem; color: var(--ink-mute); line-height: 1.5; }

.consent__switch { flex-shrink: 0; position: relative; width: 46px; height: 26px; margin-top: 0.15rem; }

.consent__switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.consent__switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--hairline);
  border: 1px solid var(--hairline-strong);
  transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease;
  pointer-events: none;
}

.consent__switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink-mute);
  transition: transform var(--t-ui) var(--ease-out), background-color var(--t-ui) ease;
}

.consent__switch input:checked + span { background: rgba(237, 156, 40, 0.3); border-color: var(--gold); }
.consent__switch input:checked + span::after { transform: translateX(20px); background: var(--gold); }
.consent__switch input:disabled + span { opacity: 0.55; }
.consent__switch input:disabled { cursor: not-allowed; }
.consent__switch input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .consent__link:hover { color: var(--ink); }
}

@media (max-width: 620px) {
  .consent__actions { flex-direction: column; align-items: stretch; }
  .consent .btn { width: 100%; }
  .consent__link { margin-left: 0; text-align: center; }
}

/* ==========================================================================
   Rechtliches am Seitenende - sichtbar, aber ruhig
   ========================================================================== */

.legal-cards { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 720px) { .legal-cards { grid-template-columns: 1fr 1fr; } }

.legal-card {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.4rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-karte);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  min-width: 0;
  transition: transform var(--t-panel) var(--ease-out), border-color var(--t-ui) ease;
}

.legal-card:active { transform: scale(0.99); }

.legal-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--akzent-schrift);
}

.legal-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.legal-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: var(--display-tracking);
  margin-bottom: 0.35rem;
}

.legal-card__text { display: block; font-size: 0.93rem; color: var(--ink-mute); line-height: 1.55; }

.legal-card__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
}

.legal-card__more svg { transition: transform var(--t-panel) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .legal-card:hover { transform: translateY(-3px); border-color: var(--hairline-strong); }
  .legal-card:hover .legal-card__more svg { transform: translateX(4px); }
}

/* Instagram-Zeile */
.social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.3rem, 2.5vw, 1.8rem);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease;
}

.social-row__icon { flex-shrink: 0; color: var(--akzent-schrift); display: grid; place-items: center; }
.social-row__text { flex: 1; min-width: 200px; font-size: 0.96rem; color: var(--ink-soft); line-height: 1.5; }
.social-row__text strong { color: var(--ink); }
.social-row__handle { color: var(--akzent-schrift); font-weight: 600; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .social-row:hover { border-color: var(--hairline-strong); background: var(--flaeche); }
}

@media (max-width: 560px) { .social-row { border-radius: var(--r-karte); } }

/* ==========================================================================
   Google-Bewertung und Patientenstimmen
   ========================================================================== */

.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-karte);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  transition: border-color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}

.rating:active { transform: scale(0.99); }

.rating__score {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
  border-right: 1px solid var(--hairline-strong);
}

.rating__value {
  font-family: var(--num-font);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--akzent-schrift);
}

.rating__stars { display: flex; gap: 0.2rem; color: var(--gold); }

.rating__body { flex: 1; min-width: 220px; display: flex; flex-direction: column; }

.rating__label {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: var(--display-tracking);
  margin-bottom: 0.4rem;
}

.rating__note { display: block; font-size: 0.93rem; color: var(--ink-mute); line-height: 1.55; }

@media (hover: hover) and (pointer: fine) {
  .rating:hover { border-color: var(--akzent); }
}

@media (max-width: 560px) {
  .rating__score { border-right: none; border-bottom: 1px solid var(--hairline-strong); padding-right: 0; padding-bottom: 1.1rem; width: 100%; }
}

/* Stimmen. Ohne Skript eine Leiste zum Wischen; main.js setzt
   .voices--karussell und macht daraus das Karussell darunter. */
.voices { margin-top: clamp(1.5rem, 3vw, 2.2rem); }

.voices__buehne {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 24rem);
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
}

.voices__buehne > .voice { scroll-snap-align: start; }

.voice {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-karte);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  min-width: 0;
}

.voice__stars { display: flex; gap: 0.15rem; color: var(--gold); margin-bottom: 0.9rem; }

.voice__text { font-size: 1rem; line-height: 1.62; color: var(--ink-soft); flex: 1; quotes: none; }

.voice__author {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
}

/* --- Karussell ---
   Alle Karten liegen in derselben Rasterzelle; die hoechste bestimmt die
   Hoehe der Buehne, damit beim Wechsel nichts darunter springt. main.js
   setzt je Karte data-lage: 0 Mitte, -1 und 1 wartend links und rechts,
   -2 und 2 unsichtbar dahinter. Die neue kommt von rechts. Die Seitenkarten
   ragen ueber den Satzspiegel hinaus; der Abschnitt schneidet am Rand ab. */
.section--stimmen { overflow: hidden; }
@supports (overflow: clip) {
  .section--stimmen { overflow: visible; overflow-x: clip; }
}

.voices--karussell .voices__buehne {
  --karte: 86%;
  --luft: 0.75rem;
  --zeilen: 12;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  overflow: visible;
  scroll-snap-type: none;
  padding-block: 0.5rem 0;
  touch-action: pan-y;
}

@media (min-width: 640px) {
  .voices--karussell .voices__buehne { --karte: min(31rem, 70%); --luft: 1rem; --zeilen: 9; }
}
@media (min-width: 1000px) {
  .voices--karussell .voices__buehne { --karte: min(35rem, 46%); --luft: 1.5rem; --zeilen: 8; }
}

.voices--karussell .voice {
  grid-area: 1 / 1;
  justify-self: center;
  width: var(--karte);
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(2 * (94% + var(--luft)))) scale(0.8);
  transition:
    transform 1200ms var(--ease-in-out),
    opacity 1200ms var(--ease-in-out),
    border-color 1200ms ease,
    filter var(--t-ui) ease,
    visibility 0s linear 1200ms;
}

/* Lange Rezensionen stehen gekuerzt da (main.js zeigt dann "Ganz lesen"):
   Sonst gaebe die laengste allen Karten ihre Hoehe. */
.voices--karussell .voice__text {
  flex: 0 1 auto;
  font-size: var(--step-0);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--zeilen);
  overflow: hidden;
}
.voices--karussell .voice.ist-offen .voice__text { display: block; -webkit-line-clamp: none; overflow: visible; }

.voice__mehr {
  display: none;
  align-self: flex-start;
  margin-top: 0.6rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
  cursor: pointer;
}
.voices--karussell .voice.hat-mehr .voice__mehr,
.voices--karussell .voice.ist-offen .voice__mehr { display: inline-block; }

.voices--karussell .voice[data-lage="-2"] { transform: translateX(calc(-2 * (94% + var(--luft)))) scale(0.8); }

/* Wartende Karten: kleiner, ohne Goldrand, entsaettigt - aber lesbar.
   Bei 0,4 Deckkraft lag ihr Text bei 2,5:1 und axe/Lighthouse werteten das
   als Kontrastfehler; ab 0,85 erreichen Text und Autorzeile 4,5:1. */
.voices--karussell .voice[data-lage="-1"],
.voices--karussell .voice[data-lage="1"] {
  opacity: 0.85;
  filter: saturate(0.55);
  visibility: visible;
  cursor: pointer;
  transition-delay: 0s;
}
.voices--karussell .voice[data-lage="-1"] { transform: translateX(calc(-94% - var(--luft))) scale(0.88); }
.voices--karussell .voice[data-lage="1"] { transform: translateX(calc(94% + var(--luft))) scale(0.88); }

.voices--karussell .voice[data-lage="0"] {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: none;
  border-color: rgba(237, 156, 40, 0.32);
  transition-delay: 0s;
}

/* Sprung ueber mehr als einen Platz (Ringschluss): ohne Weg, sonst zoege
   die Karte quer ueber die Buehne. */
.voices--karussell .voice.voice--ohne-weg { transition: none; }

/* Bedienung: zurueck, Pause mit Uhr-Ring, weiter, Zaehler */
.voices__steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: clamp(1.4rem, 2.6vw, 1.9rem);
}

.voices__steuerung[hidden] { display: none; }

.voices__knopf {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: rgba(11, 27, 47, 0.34);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease, border-color var(--t-ui) ease;
}

.voices__knopf[hidden] { display: none; }
.voices__knopf:active { transform: scale(0.94); }
.voices__knopf svg { width: 14px; height: 14px; }
.voices__knopf--zurueck svg { transform: scaleX(-1); }
.voices__knopf--pause { border-color: var(--hairline); }
.voices__knopf .symbol-play { display: none; }
.voices__knopf[aria-pressed="true"] .symbol-play { display: block; }
.voices__knopf[aria-pressed="true"] .symbol-pause { display: none; }

/* Der Ring liegt auf dem Rand des Pause-Knopfs; main.js fuellt ihn */
.voices__knopf .voices__uhr {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.voices__uhr circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-dasharray: 144.52;
  stroke-dashoffset: 144.52;
}

.voices__zaehler {
  min-width: 4.6em;
  margin-left: 0.35rem;
  font-family: var(--num-font);
  font-size: 1.1rem;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

@media (hover: hover) and (pointer: fine) {
  .voices__knopf:hover { background: rgba(11, 27, 47, 0.6); border-color: var(--akzent); }
  .voices--karussell .voice[data-lage="-1"]:hover,
  .voices--karussell .voice[data-lage="1"]:hover { filter: saturate(0.55) brightness(1.15); }
}

/* Ruhige Darstellung: kein Gleiten, nur ein weicher Wechsel der Deckkraft.
   Von selbst weiter geht es nur, wenn man es mit dem Knopf startet. */
@media (prefers-reduced-motion: reduce) {
  .voices--karussell .voice { transition: opacity 300ms ease, visibility 0s linear 300ms; }
  .voices--karussell .voice[data-lage="-1"],
  .voices--karussell .voice[data-lage="0"],
  .voices--karussell .voice[data-lage="1"] { transition-delay: 0s; }
  .voices__knopf:active { transform: none; }
}

.voices__hinweis { margin-top: 2.2rem; font-size: 0.88rem; color: var(--ink-mute); max-width: 80ch; }

/* ==========================================================================
   Instagram-Beitraege mit Einwilligungssperre
   ========================================================================== */

.ig-block { position: relative; }

.ig-gate {
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-karte);
  background: var(--flaeche);
}

.ig-gate__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 1.3rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--akzent-schrift);
}

.ig-gate__title {
  font-family: var(--font-display);
  font-weight: var(--h3-weight);
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: var(--display-tracking);
  margin-bottom: 0.7rem;
}

.ig-gate__text { font-size: 0.96rem; color: var(--ink-mute); line-height: 1.6; max-width: 54ch; margin-inline: auto; }
.ig-gate__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 3px; }
.ig-gate .btn { margin-top: 1.6rem; }

.ig-posts { display: none; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 860px) { .ig-posts { grid-template-columns: repeat(3, 1fr); } }

html[data-einwilligung="extern"] .ig-gate { display: none; }
html[data-einwilligung="extern"] .ig-posts { display: grid; }

/* Instagram setzt dem iframe eine Mindestbreite von 326 Pixeln - auf einem
   320-Pixel-Handy stehen nur rund 280 zur Verfuegung. */
.ig-posts blockquote.instagram-media,
.ig-posts iframe.instagram-media {
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  border-radius: var(--r-klein) !important;
}

.ig-hinweis { margin-top: 1.2rem; font-size: 0.88rem; color: var(--ink-mute); text-align: center; }
.ig-hinweis a { color: var(--akzent-schrift); font-weight: 600; }

.ig-hinweis button {
  background: none;
  border: none;
  padding: 0.5rem 0.2rem;
  font: inherit;
  color: var(--ink-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ig-block--leer .ig-gate__title,
.ig-block--leer .ig-gate .btn { display: none; }

/* ==========================================================================
   Glas-System
   Angelehnt an Apples Liquid Glass - eine Annaeherung, kein Apple-Baustein:
   durchscheinende Ebene, helle Lichtkante oben links, Schatten nach unten.
   ========================================================================== */

:root {
  --glas-fill: rgba(28, 58, 89, 0.42);
  --glas-kante: rgba(246, 239, 221, 0.22);
  --glas-kante-hell: rgba(255, 255, 255, 0.42);
}

.glas {
  position: relative;
  background: var(--glas-fill);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid var(--glas-kante);
  box-shadow: var(--schatten);
  isolation: isolate;
}

/* Lichtkante: nur die Kante, nicht die Flaeche */
.glas::after,
.card::after,
.verfahren__link::after,
.consent::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  padding: 1px;
  background: linear-gradient(145deg, var(--glas-kante-hell) 0%, rgba(255, 255, 255, 0.08) 18%, transparent 42%, transparent 72%, rgba(255, 255, 255, 0.06) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

.card,
.verfahren__item--text .verfahren__link {
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.section--kontrast .card::after { background: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 18%, transparent 42%); }

@supports not (backdrop-filter: blur(1px)) {
  .glas, .card { background: rgba(19, 44, 72, 0.94); }
}

.glas-filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* Echte Lichtbrechung nur dort, wo der Browser den SVG-Filter auf
   backdrop-filter anwendet - und nur auf wenigen grossen Flaechen.
   Dazu nur am grossen Bildschirm mit Maus: Auf dem Handy kostet der Filter
   beim Scrollen messbar Bildrate (pruefe_tempo.js: rund 8 Bilder/s), dort
   bleibt es bei Unschaerfe und Saettigung. */
@supports (backdrop-filter: url(#liquid-brechung)) {
  @media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .header::before { backdrop-filter: blur(20px) saturate(180%) url(#liquid-brechung); }
    .consent { backdrop-filter: blur(30px) saturate(185%) url(#liquid-brechung); }
  }
}

/* Eckdaten in A als schwebende Glasleiste */
.fakten__liste.glas::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(130% 90% at 12% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 55%),
    radial-gradient(100% 80% at 90% 100%, rgba(237, 156, 40, 0.08) 0%, transparent 60%);
}

.fakten__liste.glas > * { position: relative; z-index: 3; }

/* ==========================================================================
   Einblenden beim Scrollen
   Nur versteckt, wenn JavaScript wirklich laeuft (Marke "js" aus dem
   Seitenkopf). Ohne sie steht der Text sofort da. Kurze Staffelung
   (70 ms) - lange Verzoegerungen lassen die Seite traege wirken.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal-delay="1"] { transition-delay: 70ms; }
[data-reveal-delay="2"] { transition-delay: 140ms; }
[data-reveal-delay="3"] { transition-delay: 210ms; }
[data-reveal-delay="4"] { transition-delay: 280ms; }

/* Zeilenweiser Einlauf der grossen Ueberschrift */
.reveal-line { display: block; }
.js .reveal-line { overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.js .reveal-line > span {
  display: block;
  transform: translateY(108%);
  transition: transform 1000ms var(--ease-out);
}
.is-in .reveal-line > span,
.reveal-line.is-in > span { transform: none; }
.reveal-line:nth-child(2) > span { transition-delay: 90ms; }
.reveal-line:nth-child(3) > span { transition-delay: 180ms; }

/* Ruhige Darstellung: weniger und sanftere Bewegung, nicht gar keine.
   Deckkraft darf weich wechseln, Lagebewegungen entfallen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js [data-reveal] { transform: none; transition: opacity 300ms ease; }
  .js .reveal-line > span { transform: none; transition: none; }
  .js [data-reveal] .frame,
  .js .frame[data-reveal] { clip-path: none; transition: none; }
  .frame img, .verfahren__bild img { transform: none !important; transition: none; }

  .nav__link--akut::before { animation: none; }
  .faq details[open] .faq__body { animation: none; }
  .drawer__link { transform: none !important; }
  .btn:active, .btn__icon, .verfahren__link:active { transform: none !important; }
  .film { transition: none; }
}

/* ==========================================================================
   Handy-Feinschliff
   ========================================================================== */

/* Lange Adressen in Rechtstexten umbrechen - "anywhere" senkt als einziger
   Wert auch die rechnerische Mindestbreite. */
.legal a, .legal p, .legal li, .docktab__panel a, .consent__text a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

img, svg, video, table, pre { max-width: 100%; }

/* Groessere Antippflaechen bei frei stehenden Links */
@media (max-width: 900px) {
  .footer__list a, .footer__legal a, .footer__consent, .crumbs a {
    display: inline-block;
    padding-block: 0.45rem;
  }
  .link-arrow { padding-block: 0.5rem; }
}

@media (max-width: 560px) {
  .legal table, .zeiten { font-size: 0.93rem; }
}

/* Silbentrennung fuer lange deutsche Woerter. Tragend sind min-width: 0 und
   overflow-wrap - hyphens braucht ein Trennwoerterbuch im Browser. */
h1, h2, h3, h4, p, li, blockquote, td, th, dd, dt, summary, figcaption,
.card__title, .step__title, .legal-card__title, .legal-card__text,
.doc-item__name, .doc-item__meta, .voice__text, .rating__note,
.contact-tile__value, .contact-tile__note, .social-row__text,
.consent__option-desc, .ig-gate__text, .timeline__where,
.verfahren__titel, .verfahren__kurz {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

@media (min-width: 900px) {
  .display, .headline, .title, .hero__title, .pagehead__title, .cta-band__title { hyphens: manual; }
}

.legal-card, .legal-card__body, .card, .keyfact, .voice, .doc-item,
.contact-tile, .social-row, .verfahren__link { min-width: 0; }

/* --- Kopfbereich am Handy --- */
@media (max-width: 720px) {
  .hero {
    min-height: min(100svh, 860px);
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: 7.5rem;
  }

  .hero__media::after {
    background:
      linear-gradient(to bottom,
        rgba(7, 19, 34, 0.58) 0%, rgba(7, 19, 34, 0.55) 20%,
        rgba(7, 19, 34, 0.55) 42%, rgba(7, 19, 34, 0.8) 64%,
        rgba(7, 19, 34, 0.96) 100%);
  }

  .hero__eyebrow { margin-bottom: 1rem; font-size: 0.75rem; letter-spacing: 0.1em; gap: 0.6rem; }
  .hero__eyebrow::before { width: 18px; }
  .hero__title { margin-bottom: 1.3rem; }
  .hero__lede { font-size: 1.1rem; line-height: 1.52; }
  .hero .btn-row { margin-top: 1.6rem; }

  /* Unten rechts wie am grossen Bildschirm, knapp ueber der Zahlenleiste */
  .film-schalter { bottom: 5.4rem; }
  .statement--film .film-schalter { top: 1rem; bottom: auto; }

  .fakten { margin-top: -4.5rem; }
  .fakten__liste { width: 100%; padding-inline: 0.25rem; }
  .fakt { padding-inline: 0.7rem; }
  .fakt__label { font-size: 0.75rem; letter-spacing: 0.04em; }
  .fakt__wert { font-size: 1.6rem; }
}

/* Schmale Handys: die Zierlinie vor der Kennzeile gibt ihren Platz ab,
   damit die Zeile bei lesbaren 12px einzeilig bleibt */
@media (max-width: 400px) {
  .hero__eyebrow::before { display: none; }
}

/* Flache Bildschirme: Knopf fuer den Termin ohne Wischen erreichbar */
@media (max-width: 720px) and (max-height: 800px) {
  .hero { padding-top: calc(var(--header-h) + 1rem); }
  .hero__title { font-size: clamp(2.5rem, 11vw, 3.2rem); margin-bottom: 1rem; }
  .hero__lede { font-size: 1.02rem; line-height: 1.42; }
  .hero .btn-row { margin-top: 1.1rem; }
}

/* Schrift steht am Handy direkt auf dem Film. Ein weicher dunkler Schein
   traegt sie ueber helle Stellen, ohne das Bild zuzudunkeln. */
@media (max-width: 720px) {
  .hero__eyebrow,
.hero__title,
.hero__lede {
    text-shadow: 0 2px 22px rgba(7, 19, 34, 0.55);
  }
  .hero__eyebrow { color: var(--cream); }
}

/* ==========================================================================
   Ergaenzungen fuer die Unterseiten
   ========================================================================== */

/* Foto links, Text rechts - nur am Rechner. Im Quelltext steht der Text
   zuerst, damit er am Handy oben steht und vorgelesen zuerst kommt. */
@media (min-width: 900px) {
  .split--gespiegelt > :first-child { order: 2; }
}

.split--eng { gap: clamp(1.5rem, 3vw, 2.5rem); }

.card__title--klein { font-size: var(--step-1); }

.card__title--klein + .checklist { margin-top: 0.4rem; }

.anschrift { font-size: var(--step-1); line-height: 1.6; margin-top: 0.4rem; }

.karten-trenner {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.karten-trenner .card__num { margin-bottom: 0.8rem; }