/* ==========================================================================
   Seniorentagespflege „Zur Grafensteinerhöh", Rinteln
   styles.css  –  Hauptstylesheet
   --------------------------------------------------------------------------
   Aufbau:
   01 Design-Tokens (Farben, Typografie, Abstände, Radien, Schatten)
   02 Schriften (lokal, keine externen Fonts)
   03 Reset & Basis
   04 Layout-Hilfen (Container, Section, Grid)
   05 Typografie-Klassen
   06 Buttons & Links
   07 Header, Serviceleiste, Navigation, Mobilmenü
   08 Hero
   09 Inhaltsbausteine (Karten, Timeline, Split, Plakette, Deko)
   10 Kostenrechner
   11 Formulare
   12 Footer
   13 Utilities & Barrierefreiheit
   14 Animationen / Reveals, Google-Bewertung, Zurück nach oben
   15 Druck
   16 Barrierefreiheits-Feinheiten
   17 Hero mit Hintergrundvideo
   18 Logo
   ========================================================================== */

/* ==========================================================================
   01  DESIGN-TOKENS
   Alle Marken- und Layoutwerte zentral. Farbwerte ggf. nach Freigabe des
   finalen Logos exakt nachziehen (siehe OFFENE-INHALTE.md).
   ========================================================================== */
:root {
  /* --- Markenfarben --- */
  --c-petrol:          #087F91;   /* primäre Markenfarbe */
  --c-petrol-dark:     #0A6C7B;   /* Hover / gedrückt */
  --c-petrol-deep:     #164F59;   /* Fließtext, starke Kontraste */
  --c-petrol-ink:      #103A42;   /* dunkelste Stufe, große Headlines */
  /* Nur für die Serviceleiste: derselbe Farbton wie das Logo-Türkis
     (#11AA9E, 175°), damit die Leiste direkt über dem Logo farblich dazu
     passt. Das reine Logo-Türkis wäre mit 2,89:1 zu hell für weiße Schrift;
     diese Abstufung erreicht 4,68:1 und ist damit genauso kontraststark wie
     die bisherige Leiste (4,71:1) – sichtbar ändert sich nur der Farbton. */
  --c-topbar:          #0D8279;
  /* Violett aus dem Logo (#A6519A). Anders als das Logo-Türkis ist es direkt
     einsetzbar und trägt deshalb unverändert die Haupt-Schaltflächen.
     Geprüfte Kontraste, Grundfläche ist das Off-White #FCFAF7:
       --c-magenta       große Überschriftenakzente und Dekoration
                         (4,73:1 – erfüllt AA auch für kleinen Text)
       --c-magenta-btn   Flächen mit weißer Schrift, z. B. Haupt-Buttons
                         (4,92:1 mit Weiß)
       --c-magenta-dark  Hover-Zustand und Fokusring (6,76:1 mit Weiß,
                         6,49:1 auf hellem Grund)
       --c-magenta-text  kleiner farbiger Text auf hellem Grund (5,60:1) */
  --c-magenta:         #A6519A;
  --c-magenta-btn:     #A6519A;
  --c-magenta-dark:    #87427D;
  --c-magenta-text:    #96488C;

  /* --- Flächen --- */
  --c-surface:         #FCFAF7;   /* warmes Off-White, Seitengrund */
  --c-surface-alt:     #EDF7F7;   /* helles Türkis, abgesetzte Flächen */
  --c-surface-soft:    #F6F1EA;   /* warmer Sandton, abgesetzte Flächen */
  --c-white:           #FFFFFF;   /* Karten, ruhige Inhaltsflächen */

  /* --- Text --- */
  --c-text:            #274A50;   /* Fließtext, 9,24:1 auf Off-White */
  --c-text-strong:     var(--c-petrol-deep);
  --c-text-muted:      #5C6B6E;   /* Nebentexte, 5,33:1 auf Off-White */
  --c-text-on-dark:    #F2FBFB;

  /* --- Linien & Zustände --- */
  --c-border:          #DCE7E7;
  --c-border-strong:   #C2D6D8;
  --c-focus:           #87427D;   /* Logo-Violett, dunkle Stufe, 6,49:1 */
  --c-error:           #B3261E;
  --c-success:         #1E6B4F;
  --c-note-bg:         #FFF6E6;   /* Platzhalter-/Hinweisfelder */
  --c-note-border:     #E2B96B;
  --c-note-text:       #6B4A08;

  /* --- Typografie --- */
  --ff-serif:  "Cormorant Garamond", "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --ff-sans:   "Nunito Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ff-script: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  /* Fluid type scale – Basis 18px Desktop, min. 17px Mobil */
  --fs-100: clamp(0.94rem, 0.90rem + 0.18vw, 1.00rem);   /* Kleintext  15–16px */
  --fs-200: clamp(1.00rem, 0.96rem + 0.20vw, 1.06rem);   /* UI/Label   16–17px */
  --fs-300: clamp(1.06rem, 1.00rem + 0.30vw, 1.15rem);   /* Fließtext  17–18.5px */
  --fs-400: clamp(1.15rem, 1.06rem + 0.42vw, 1.30rem);   /* Lead       18.5–21px */
  --fs-500: clamp(1.30rem, 1.16rem + 0.65vw, 1.60rem);   /* H4/H3 klein */
  --fs-600: clamp(1.55rem, 1.30rem + 1.15vw, 2.20rem);   /* H3 / H2 klein */
  --fs-700: clamp(1.95rem, 1.50rem + 2.05vw, 3.05rem);   /* H2 */
  --fs-800: clamp(2.35rem, 1.65rem + 3.10vw, 4.15rem);   /* H1 */

  --lh-tight: 1.14;
  --lh-head:  1.20;
  --lh-body:  1.68;

  /* --- Abstände (8px-Raster) --- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6.5rem;
  --section-y: clamp(3.25rem, 2rem + 5vw, 6.5rem);

  /* --- Maße --- */
  --wrap:      78rem;   /* 1248px */
  --wrap-wide: 88rem;
  --wrap-text: 42rem;   /* begrenzte Lesebreite */

  /* --- Radien --- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --r-pill: 999px;

  /* --- Schatten (ruhig, weich) --- */
  --sh-xs: 0 1px 2px rgba(22,79,89,.06);
  --sh-sm: 0 2px 8px rgba(22,79,89,.07);
  --sh-md: 0 8px 24px rgba(22,79,89,.09);
  --sh-lg: 0 18px 48px rgba(22,79,89,.12);
  --sh-focus: 0 0 0 3px var(--c-surface), 0 0 0 6px var(--c-focus);

  /* --- Bewegung --- */
  --t-fast: 140ms cubic-bezier(.4,0,.2,1);
  --t-base: 240ms cubic-bezier(.4,0,.2,1);
  --t-slow: 520ms cubic-bezier(.22,.61,.36,1);

  --header-h: 118px;
}

@media (max-width: 62rem) { :root { --header-h: 104px; } }

/* ==========================================================================
   02  SCHRIFTEN – ausschließlich lokal, kein Google-Fonts-Aufruf
   Die WOFF2-Dateien liegen in assets/fonts/. Fehlen sie, greifen die
   System-Fallbacks aus --ff-serif / --ff-sans; das Layout bleibt stabil.
   Lizenzprüfung: siehe OFFENE-INHALTE.md
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url("../fonts/cormorant-garamond-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700;
  font-display: swap; src: url("../fonts/cormorant-garamond-italic-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 300 800;
  font-display: swap; src: url("../fonts/nunito-sans-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Caveat"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("../fonts/caveat-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

/* ==========================================================================
   03  RESET & BASIS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ==========================================================================
   04  LAYOUT
   ========================================================================== */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2.5rem, var(--wrap-wide)); }
.wrap--text { width: min(100% - 2.5rem, var(--wrap-text)); }
@media (max-width: 30rem) { .wrap, .wrap--wide { width: calc(100% - 2rem); } }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--alt  { background: var(--c-surface-alt); }
.section--soft { background: var(--c-surface-soft); }
.section--white{ background: var(--c-white); }
.section--petrol {
  /* Beginn eine Stufe dunkler als --c-petrol: sonst erreicht heller Text
     am hellsten Punkt des Verlaufs nur 4,48:1 statt 5,80:1. */
  background: linear-gradient(135deg, var(--c-petrol-dark) 0%, #0B6E80 55%, var(--c-petrol-deep) 100%);
  color: var(--c-text-on-dark);
}
.section--petrol h1, .section--petrol h2, .section--petrol h3 { color: #fff; }
/* Fließtext ebenfalls hell. Vorher trugen die betroffenen Absätze das als
   style="…" direkt im HTML – wer eine neue Petrol-Sektion anlegte und das
   vergaß, bekam dunkle Schrift auf dunklem Grund (1,63:1 auf der
   Fahrdienstseite). Als Regel kann das nicht mehr passieren. */
.section--petrol p, .section--petrol li,
.section--petrol .lead, .section--petrol .muted { color: var(--c-text-on-dark); }
.section--petrol a:not(.btn) { color: #CFF0F3; }

.section__head { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: var(--sp-8); }
.section__head--left { margin-inline: 0; text-align: left; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }

.split { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1.08fr; }
  .split--media-first > :first-child { order: 2; }
  .split--narrow-media { grid-template-columns: 1.15fr .85fr; }
}

/* ==========================================================================
   05  TYPOGRAFIE
   ========================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--ff-serif);
  font-weight: 500;
  line-height: var(--lh-head);
  color: var(--c-petrol-deep);
  letter-spacing: -0.005em;
}
h1, .h1 { font-size: var(--fs-800); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-700); }
h3, .h3 { font-size: var(--fs-600); }
h4, .h4 { font-size: var(--fs-500); }

.eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Eine Stufe dunkler als --c-petrol: 15–16 px fett brauchen 4,5:1, und
     --c-petrol erreicht auf hellen Flächen nur 4,32:1. */
  color: var(--c-petrol-dark);
  margin-bottom: var(--sp-3);
  display: block;
}
.section--petrol .eyebrow { color: #BDEAEF; }   /* 4,70:1 am hellsten Punkt */

.accent { color: var(--c-magenta); }              /* nur in großen Headlines */
.accent-text { color: var(--c-magenta-text); }    /* kontraststarke Textvariante */

.lead { font-size: var(--fs-400); color: var(--c-text); line-height: 1.6; }
.muted { color: var(--c-text-muted); }
.small { font-size: var(--fs-100); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--c-petrol-dark); }

.script {
  font-family: var(--ff-script);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
  color: var(--c-magenta-text);
  line-height: 1.25;
  font-weight: 600;
}

/* Aufzählung mit Häkchen – Information nicht nur über Farbe */
.ticks { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.ticks li { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--sp-3); align-items: start; }
.ticks li::before {
  content: ""; inline-size: 1.35rem; block-size: 1.35rem; margin-top: .18em;
  background: var(--c-surface-alt); border-radius: var(--r-pill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087F91' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: .85rem; background-repeat: no-repeat; background-position: center;
}

/* ==========================================================================
   06  BUTTONS & LINKS
   Touch-Ziele mind. 48px, deutliche Fokusringe.
   ========================================================================== */
a { color: var(--c-petrol-dark); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { color: var(--c-magenta-text); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.btn {
  --btn-bg: var(--c-magenta-btn);
  --btn-fg: #fff;
  --btn-bd: var(--c-magenta-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .78em 1.6em;
  font-family: var(--ff-sans); font-size: var(--fs-200); font-weight: 700;
  line-height: 1.25; text-align: center; text-decoration: none;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 2px solid var(--btn-bd); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base),
              box-shadow var(--t-base), transform var(--t-fast);
  box-shadow: var(--sh-sm);
}
/* WICHTIG: `color: var(--btn-fg)` – nicht `color: #fff`.
   Zwei Fallen stecken hier drin, beide am 15.09.2026 gemessen:
   1. Ein fester Wert (#fff) überschreibt jede Variante. Bei .btn--on-dark und
      .btn--ghost wird der Grund beim Überfahren hell – das ergab weiße
      Schrift auf weißem Grund (1,09:1 bzw. 1,00:1).
   2. Die Zeile darf aber auch nicht ganz entfallen: `a:hover` (Spezifität
      0,1,1) schlägt sonst die Grundregel `.btn` (0,1,0), und die Beschriftung
      wird magenta. `.btn:hover` (0,2,0) gewinnt gegen beides. */
.btn:hover { --btn-bg: var(--c-magenta-dark); --btn-bd: var(--c-magenta-dark); --btn-fg: #fff;
             color: var(--btn-fg); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(1px); }

.btn--secondary { --btn-bg: transparent; --btn-fg: var(--c-petrol-dark); --btn-bd: var(--c-petrol); box-shadow: none; }
.btn--secondary:hover { --btn-bg: var(--c-petrol); --btn-fg: #fff; --btn-bd: var(--c-petrol); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-petrol-deep); --btn-bd: var(--c-border-strong); box-shadow: none; }
.btn--ghost:hover { --btn-bg: var(--c-white); --btn-fg: var(--c-petrol-deep); --btn-bd: var(--c-petrol); }

.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--c-petrol-deep); --btn-bd: #fff; }
.btn--on-dark:hover { --btn-bg: var(--c-surface-alt); --btn-fg: var(--c-petrol-ink); --btn-bd: var(--c-surface-alt); }

.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.75); box-shadow: none; }
/* Beim Überfahren wird abgedunkelt statt aufgehellt: Eine weiße Auflage
   hebt den Grund an und drückt weiße Schrift auf 4,40:1. Abdunkeln bringt
   sie auf 7,8:1, der Rand übernimmt die Signalwirkung. */
.btn--outline-light:hover { --btn-bg: rgba(6,32,38,.28); --btn-fg: #fff; --btn-bd: #fff; }

.btn--lg { min-height: 3.5rem; font-size: var(--fs-300); padding: .85em 2em; }
.btn--block { width: 100%; }
.btn .ico { inline-size: 1.1em; block-size: 1.1em; flex: none; transition: transform var(--t-base); }
.btn:hover .ico--arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.btn-row--center { justify-content: center; }

/* Textlink mit Pfeil */
.linkarrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 700; font-size: var(--fs-200);
  color: var(--c-petrol-dark); text-decoration: none;
  border-bottom: 2px solid transparent; padding-block: .25em;
}
.linkarrow::after {
  content: ""; inline-size: .95em; block-size: .95em; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--t-base);
}
.linkarrow:hover { color: var(--c-magenta-text); border-bottom-color: currentColor; }
.linkarrow:hover::after { transform: translateX(4px); }

/* ==========================================================================
   07  HEADER / NAVIGATION
   ========================================================================== */
.skiplink {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  transform: translateY(-160%); z-index: 200;
  background: var(--c-white); color: var(--c-petrol-deep);
  padding: .8em 1.3em; border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none; box-shadow: var(--sh-md);
  transition: transform var(--t-base);
}
.skiplink:focus { transform: translateY(0); }

.topbar {
  background: var(--c-topbar);
  /* Reines Weiß statt --c-text-on-dark: der leicht getönte Ton erreicht auf
     dieser Fläche nur 4,48:1, Weiß dagegen 4,71:1. */
  color: #fff;
  font-size: var(--fs-100);
}
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6);
  min-height: 2.75rem; padding-block: .4rem;
}
.topbar__item { display: inline-flex; align-items: center; gap: .5em; }
.topbar a { color: #fff; text-decoration: none; font-weight: 700; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar .ico { inline-size: 1.05em; block-size: 1.05em; opacity: .9; flex: none; }
.topbar__item--last { margin-left: auto; }
@media (max-width: 48rem) {
  .topbar__item--last { margin-left: 0; }
  .topbar__item--hide-sm { display: none; }
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-base), border-color var(--t-base), background var(--t-base);
}
.site-header.is-stuck { box-shadow: var(--sh-sm); border-bottom-color: var(--c-border); background: rgba(252,250,247,.96); backdrop-filter: blur(8px); }
.site-header__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: 4.6rem; padding-block: .65rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand__mark { inline-size: clamp(11rem, 9rem + 6vw, 14.5rem); block-size: auto; }
/* Wortmarke: seit dem Vorliegen des Logos eine Bilddatei (.brand__mark).
   Die folgenden Regeln bilden die Wortmarke ersatzweise in HTML/CSS nach und
   werden aktuell nicht verwendet – sie bleiben als Rückfall erhalten, falls
   das Logo einmal fehlt. */
.brand__fallback { display: grid; gap: 3px; }
.brand__name, .brand__sub {
  font-family: var(--ff-sans); font-weight: 800; letter-spacing: .055em;
  text-transform: uppercase; line-height: 1.05; color: #fff;
  padding: .34em .6em; border-radius: 4px; text-align: center;
}
.brand__name { font-size: clamp(.72rem, .6rem + .42vw, .92rem); background: var(--c-petrol); }
.brand__sub  { font-size: clamp(.66rem, .55rem + .38vw, .84rem); background: var(--c-magenta); }
.footer__brand .brand__name { background: rgba(255,255,255,.14); }
.footer__brand .brand__sub  { background: var(--c-magenta); color: #fff; }
.mobilenav__bar .brand__name { font-size: .78rem; }
.mobilenav__bar .brand__sub  { font-size: .72rem; }

.nav { margin-left: auto; }
.nav__list { list-style: none; display: flex; align-items: center; gap: clamp(.4rem, .2rem + .9vw, 1.35rem); margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .7rem .3rem; font-size: var(--fs-200); font-weight: 600;
  color: var(--c-petrol-deep); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav__link:hover { color: var(--c-magenta-text); border-bottom-color: currentColor; }
.nav__link[aria-current="page"], .nav__item--active > .nav__link {
  color: var(--c-magenta-text); border-bottom-color: var(--c-magenta);
}
.nav__caret { inline-size: .7em; block-size: .7em; transition: transform var(--t-fast); flex: none; }

.nav__item--has-sub { position: relative; }
.nav__sub {
  position: absolute; top: calc(100% + .35rem); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-inline-size: 15rem; list-style: none; margin: 0; padding: .5rem;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub,
.nav__sub[data-open="true"] { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__item--has-sub:hover .nav__caret, .nav__item--has-sub:focus-within .nav__caret { transform: rotate(180deg); }
.nav__sub a {
  display: block; padding: .68rem .85rem; border-radius: var(--r-sm);
  font-size: var(--fs-200); font-weight: 600; color: var(--c-petrol-deep); text-decoration: none;
}
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--c-surface-alt); color: var(--c-magenta-text); }
.nav__sub a[aria-current="page"] { background: var(--c-surface-alt); color: var(--c-magenta-text); }

.header__cta { flex: none; }
.nav-toggle { display: none; }

/* Gemessen: Wortmarke + Navigation + Schaltfläche brauchen rund 1135 px.
   Erst ab etwa 1184 px ist dafür Platz – darunter das Menü einklappen. */
@media (max-width: 75rem) {
  .nav, .header__cta { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .55em; margin-left: auto;
    min-height: 3rem; padding: .55em 1.05em;
    background: var(--c-white); color: var(--c-petrol-deep);
    border: 2px solid var(--c-petrol); border-radius: var(--r-pill);
    font-weight: 700; font-size: var(--fs-200); cursor: pointer;
  }
  .nav-toggle__bars { inline-size: 1.3rem; block-size: .95rem; position: relative; flex: none; }
  .nav-toggle__bars span,
  .nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ""; position: absolute; left: 0; right: 0; block-size: 2.5px;
    background: currentColor; border-radius: 2px; transition: transform var(--t-base), opacity var(--t-fast);
  }
  .nav-toggle__bars::before { top: 0; }
  .nav-toggle__bars span { top: 50%; margin-top: -1.25px; }
  .nav-toggle__bars::after { bottom: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(.44rem) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-.44rem) rotate(-45deg); }
}

/* --- Mobilmenü --- */
.mobilenav {
  position: fixed; inset: 0; z-index: 150;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--c-surface);
  visibility: hidden; opacity: 0;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.mobilenav[data-open="true"] { visibility: visible; opacity: 1; }
.mobilenav__bar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border); }
.mobilenav__close {
  margin-left: auto; min-inline-size: 3rem; min-block-size: 3rem;
  display: inline-grid; place-items: center;
  background: var(--c-white); border: 2px solid var(--c-border-strong);
  border-radius: var(--r-pill); cursor: pointer; color: var(--c-petrol-deep);
}
.mobilenav__close svg { inline-size: 1.35rem; block-size: 1.35rem; }
.mobilenav__body { overflow-y: auto; padding: var(--sp-5) var(--sp-5) var(--sp-9); -webkit-overflow-scrolling: touch; }
.mobilenav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.mobilenav__list a {
  display: block; padding: .95rem .6rem; font-size: var(--fs-400); font-weight: 600;
  color: var(--c-petrol-deep); text-decoration: none; border-bottom: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}
.mobilenav__list a:hover, .mobilenav__list a:focus-visible { background: var(--c-surface-alt); color: var(--c-magenta-text); }
.mobilenav__list a[aria-current="page"] { color: var(--c-magenta-text); font-weight: 700; }
.mobilenav__sublist { list-style: none; margin: 0 0 .25rem; padding-left: var(--sp-5); display: grid; gap: .1rem; }
.mobilenav__sublist a { font-size: var(--fs-300); font-weight: 500; padding-block: .8rem; }
.mobilenav__foot { margin-top: var(--sp-7); display: grid; gap: var(--sp-4); }
.mobilenav__contact { display: grid; gap: .35rem; font-size: var(--fs-200); }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   08  HERO
   ========================================================================== */
.hero { position: relative; background: var(--c-surface); overflow: clip; }
.hero__inner { display: grid; gap: clamp(1.75rem, 3vw, 3rem); align-items: center;
  padding-block: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem); }
@media (min-width: 60rem) { .hero__inner { grid-template-columns: .92fr 1.08fr; } }

.hero__content { max-width: 34rem; position: relative; z-index: 2; }
.hero__title { margin-bottom: var(--sp-5); }
.hero__lead { font-size: var(--fs-400); color: var(--c-text); margin-bottom: var(--sp-7); max-width: 26rem; }
.hero__ctas { display: grid; gap: var(--sp-4); justify-items: start; }
@media (min-width: 30rem) { .hero__ctas { grid-auto-flow: row; } }

.hero__media { position: relative; }
.hero__figure { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); margin: 0; }
.hero__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 60rem) { .hero__figure img { aspect-ratio: 16 / 11; } }

/* Vertrauens-Plakette */
.badge-round {
  position: absolute; z-index: 3;
  inset-block-start: clamp(-1rem, -2vw, .5rem); inset-inline-end: clamp(-.5rem, 1vw, 1.5rem);
  inline-size: clamp(9rem, 6.5rem + 8vw, 13rem); aspect-ratio: 1;
  display: grid; place-content: center; text-align: center; gap: .35rem;
  /* Innenabstand großzügig, damit die Zeilen nicht am Rand kleben */
  padding: clamp(1.1rem, .7rem + 1.4vw, 1.9rem);
  background: var(--c-petrol); color: #fff;
  border: 4px solid var(--c-surface); border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
}
.badge-round__num {
  font-family: var(--ff-serif); font-weight: 500;
  /* mit der Kreisgröße mitgewachsen: 43 px auf dem Handy, 74 px am Desktop */
  font-size: clamp(2.5rem, 1.7rem + 3.5vw, 4.6rem); line-height: .92;
  font-variant-numeric: lining-nums;
}
.badge-round__txt {
  font-size: clamp(.8rem, .7rem + .4vw, 1.05rem); line-height: 1.3; font-weight: 600;
  max-inline-size: 16ch; margin-inline: auto; text-wrap: balance;
}
.badge-round__heart { inline-size: .95rem; block-size: .95rem; margin-inline: auto; opacity: .85; }

/* ==========================================================================
   09  INHALTSBAUSTEINE
   ========================================================================== */

/* --- Bild-Rahmen --- */
.figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); background: var(--c-surface-alt); }
.figure img { inline-size: 100%; object-fit: cover; }
.figure--4x3 img { aspect-ratio: 4 / 3; }
.figure--3x2 img { aspect-ratio: 3 / 2; }
.figure--16x9 img { aspect-ratio: 16 / 9; }
.figure--1x1 img { aspect-ratio: 1; }
.figure__caption { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-100); color: var(--c-text-muted); background: var(--c-white); }
.figure--round { border-radius: var(--r-pill); box-shadow: var(--sh-lg); border: 6px solid var(--c-white); }

/* --- Kleine Vorteile (Icon + Label) ---------------------------------------
   Mit Trennlinien nur dann, wenn die drei Labels nebeneinander in eine Zeile
   passen. Sonst stimmen die Abstände nicht: Ein umgebrochenes Label macht die
   Box breiter als den Text, wodurch links von der Linie mehr Luft entsteht
   als rechts davon. Deshalb in der geteilten Variante:
     * `white-space: nowrap` -> die Box umschließt den Text exakt
     * gleich große Innenabstände links und rechts jeder Linie
   Damit ist der Abstand Text–Linie auf beiden Seiten immer identisch.
   Unterhalb von 72rem gibt es keine Linien, sondern schlicht Abstände.      */
.perks { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); margin-top: var(--sp-6); align-items: start; }
.perk { display: grid; align-content: start; gap: .55rem; max-inline-size: 9.5rem; }
.perk__icon { inline-size: 2.5rem; block-size: 2.5rem; color: var(--c-petrol); }
.perk__label { font-size: var(--fs-100); font-weight: 700; color: var(--c-petrol-deep); line-height: 1.35; }

/* Breit genug für eine Zeile: mit Trennlinien, Text exakt mittig dazwischen */
@media (min-width: 76rem) {
  .perks--divided { gap: 0; }
  .perks--divided .perk {
    max-inline-size: none;
    padding-inline: var(--sp-5);
  }
  .perks--divided .perk:first-child { padding-inline-start: 0; }
  .perks--divided .perk:last-child  { padding-inline-end: 0; }
  .perks--divided .perk + .perk { border-inline-start: 1px solid var(--c-border-strong); }
  .perks--divided .perk__label { white-space: nowrap; }
}

/* Schmaler: keine Linien, dafür ein festes Raster. Gleich breite Spalten
   sorgen für einen ruhigen Rhythmus – anders als beim freien Umbruch, bei
   dem eine Kachel allein in der zweiten Zeile landet. */
@media (max-width: 76rem) {
  .perks--divided {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    max-inline-size: 33rem;
  }
  .perks--divided .perk { max-inline-size: none; }
}
@media (max-width: 23rem) {
  .perks--divided { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Karten --- */
.card {
  display: flex; flex-direction: column;
  background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover { box-shadow: var(--sh-md); border-color: var(--c-border-strong); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .card:hover { transform: translateY(-3px); } }
.card__media img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__title { font-size: var(--fs-500); margin: 0; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__text { font-size: var(--fs-200); color: var(--c-text-muted); margin: 0; flex: 1; }
.card--link { position: relative; }
.card--link:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.card--link .card__title a:focus-visible { outline: none; }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }

.card--plain { background: var(--c-white); padding: var(--sp-6); border-radius: var(--r-lg); border: 1px solid var(--c-border); }
.card--icon { display: grid; gap: var(--sp-4); }
.card--icon .icon-badge { inline-size: 3.25rem; block-size: 3.25rem; }

.icon-badge {
  display: grid; place-items: center; inline-size: 3rem; block-size: 3rem;
  border-radius: var(--r-pill); background: var(--c-surface-alt); color: var(--c-petrol); flex: none;
}
.icon-badge svg { inline-size: 1.5rem; block-size: 1.5rem; }
.icon-badge--magenta { background: #F6EBF4; color: var(--c-magenta-text); }

/* --- Timeline (Tageslinie) --- */
.dayline { position: relative; }
.dayline__media { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin-bottom: var(--sp-6); }
.dayline__media img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--sh-sm); }

.dayline__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); position: relative; }
.dayline__step {
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-4);
  align-items: start; position: relative;
  /* WICHTIG: Ohne align-content werden die Zeilen dieser Kachel gestreckt,
     sobald eine Nachbarkachel höher ist – der freie Platz verteilt sich dann
     auf Icon- UND Textzeile, und der Text sitzt tiefer als beim Nachbarn.
     `start` packt beide Zeilen nach oben, alle Kacheln beginnen auf einer Linie. */
  align-content: start;
}
.dayline__dot {
  inline-size: 3rem; block-size: 3rem; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--c-magenta-btn); color: #fff; box-shadow: var(--sh-sm); z-index: 2;
}
.dayline__dot svg { inline-size: 1.4rem; block-size: 1.4rem; }
.dayline__title { font-family: var(--ff-sans); font-size: var(--fs-200); font-weight: 800; color: var(--c-petrol-deep); margin-bottom: .2rem; }
.dayline__text { font-size: var(--fs-200); color: var(--c-text-muted); margin: 0; }
.dayline__time { display: inline-block; font-size: var(--fs-100); font-weight: 700; color: var(--c-magenta-text); margin-bottom: .15rem; }
/* Vertikale Verbindungslinie mobil */
.dayline__step:not(:last-child)::before {
  content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: calc(-1 * var(--sp-6));
  border-left: 2px dashed var(--c-border-strong);
}
@media (min-width: 60rem) {
  .dayline__steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); padding-top: var(--sp-7); }
  .dayline__steps::before {
    content: ""; position: absolute; top: calc(var(--sp-7) + 1.5rem); left: 12.5%; right: 12.5%;
    border-top: 2px dashed var(--c-magenta); opacity: .5;
  }
  .dayline__step { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .dayline__step::before { display: none !important; }
  .dayline__body { max-inline-size: 15rem; }
  /* Grundlösung: zwei Zeilen Platz für jede Überschrift reservieren
     (Zeilenhöhe 1,2). Damit beginnen Überschriften und Fließtexte in allen
     vier Spalten auf derselben Höhe. */
  .dayline__title { min-block-size: 2.4em; }
}

/* Saubere Lösung, wo der Browser sie kann: Mit `subgrid` teilen sich alle vier
   Kacheln dieselben Zeilen. Icon, Überschrift und Text liegen dann garantiert
   auf einer Linie – auch wenn eine Überschrift drei Zeilen braucht, was bei
   schmalen Spalten um 960 px vorkommt. Ohne subgrid greift die Regel oben. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 60rem) {
    .dayline__steps { grid-template-rows: auto auto auto; row-gap: 0; }
    .dayline__step  { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .dayline__body  { display: contents; }
    .dayline__title { min-block-size: 0; margin-block-start: var(--sp-4); max-inline-size: 15rem; }
    .dayline__text  { max-inline-size: 15rem; }
  }
}

/* --- Ausführliche Timeline (Tagesablauf-Seite) --- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); position: relative; }
.timeline__item {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--sp-5);
  align-content: start;
  position: relative; padding-bottom: var(--sp-5);
}
.timeline__item:not(:last-child)::before {
  content: ""; position: absolute; left: 1.6rem; top: 3.4rem; bottom: 0;
  border-left: 2px dashed var(--c-border-strong);
}
.timeline__marker {
  inline-size: 3.25rem; block-size: 3.25rem; display: grid; place-items: center; z-index: 2;
  background: var(--c-white); border: 2px solid var(--c-petrol); color: var(--c-petrol);
  border-radius: var(--r-pill); box-shadow: var(--sh-xs);
}
.timeline__marker svg { inline-size: 1.5rem; block-size: 1.5rem; }
.timeline__card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--sh-xs); }
.timeline__time { display: inline-block; font-size: var(--fs-100); font-weight: 800; letter-spacing: .06em;
  color: var(--c-magenta-text); background: #F6EBF4; padding: .28em .8em; border-radius: var(--r-pill); margin-bottom: var(--sp-3); }
.timeline__head { font-size: var(--fs-500); margin-bottom: var(--sp-2); }

/* --- Statement / Zitatblock --- */
.statement {
  background: var(--c-white); border-left: 5px solid var(--c-magenta);
  border-radius: var(--r-md); padding: var(--sp-6); box-shadow: var(--sh-xs);
  font-size: var(--fs-400); color: var(--c-petrol-deep); font-family: var(--ff-serif);
}

/* --- Hinweisboxen --- */
.note {
  background: var(--c-note-bg); border: 1px solid var(--c-note-border);
  border-radius: var(--r-md); padding: var(--sp-5);
  color: var(--c-note-text); font-size: var(--fs-200);
  display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--sp-4); align-items: start;
}
.note svg { inline-size: 1.5rem; block-size: 1.5rem; margin-top: .1em; flex: none; }
.note strong { display: block; margin-bottom: .3rem; }
.note--info { background: var(--c-surface-alt); border-color: var(--c-border-strong); color: var(--c-petrol-deep); }
.note--todo { border-style: dashed; border-width: 2px; }
.note a { color: inherit; }

/* Platzhalter-Auszeichnung im Fließtext */
.placeholder {
  background: var(--c-note-bg); border-bottom: 2px dotted var(--c-note-border);
  padding: .05em .35em; border-radius: 3px; font-weight: 700; color: var(--c-note-text);
}

/* --- Dekorative florale Linien --- */
.deco { position: absolute; z-index: 0; pointer-events: none; color: var(--c-petrol); opacity: .22; }
.deco--tl { top: 4%;  left: 0;     inline-size: clamp(5rem, 9vw, 9rem); }
.deco--bl { bottom: 6%; left: 1%;  inline-size: clamp(4.5rem, 8vw, 8rem); }
.deco--tr { top: 8%;  right: 1%;  inline-size: clamp(4.5rem, 8vw, 8rem); transform: scaleX(-1); }
.deco--br { bottom: 5%; right: 0;     inline-size: clamp(5rem, 9vw, 9rem); transform: scaleX(-1); }
.deco--magenta { color: var(--c-magenta); opacity: .3; }
@media (max-width: 48rem) { .deco { display: none; } }
.section > .wrap { position: relative; z-index: 1; }

/* --- Teamraster --- */
.team-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.member { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); display: flex; flex-direction: column; }
.member__media { background: var(--c-surface-alt); }
.member__media img { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.member__ph {
  aspect-ratio: 3 / 4; display: grid; place-items: center; gap: .5rem;
  background: repeating-linear-gradient(135deg, var(--c-surface-alt) 0 12px, #E4F1F1 12px 24px);
  /* Eine Stufe dunkler als --c-petrol: auf dem hellen Streifen #E4F1F1
     erreicht dieser nur 4,07:1, --c-petrol-dark dagegen 5,27:1. */
  color: var(--c-petrol-dark); text-align: center; padding: var(--sp-4);
}
.member__ph svg { inline-size: 3rem; block-size: 3rem; opacity: .6; }
/* Echtes Portrait – gleiches Format wie die Platzhalterfläche, damit die
   Karten in der Reihe auf gleicher Höhe bleiben. */
.member__foto { aspect-ratio: 3 / 4; inline-size: 100%; block-size: auto;
  object-fit: cover; object-position: 50% 22%; display: block; }
.member__ph span { font-size: var(--fs-100); font-weight: 700; }
.member__body { padding: var(--sp-5); display: grid; gap: .4rem; flex: 1; }
.member__name { font-size: var(--fs-500); margin: 0; }
.member__role { font-size: var(--fs-200); font-weight: 700; color: var(--c-magenta-text); }
.member__quals { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.member__quals li { font-size: var(--fs-100); font-weight: 600; color: var(--c-petrol-deep);
  background: var(--c-surface-alt); border-radius: var(--r-pill); padding: .2em .7em; }
.member__text { font-size: var(--fs-200); color: var(--c-text-muted); margin-top: .35rem; }

/* --- Galerie --- */
.gallery { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.gallery figure { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--c-white); box-shadow: var(--sh-xs); border: 1px solid var(--c-border); }
.gallery img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-100); color: var(--c-text-muted); }

/* --- Tabellen --- */
.table-scroll { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-white); }
table.data { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-200); min-inline-size: 30rem; }
table.data caption { text-align: left; padding: var(--sp-4) var(--sp-5); font-weight: 700; color: var(--c-petrol-deep); font-size: var(--fs-200); }
table.data th, table.data td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--c-border); }
table.data thead th { background: var(--c-surface-alt); color: var(--c-petrol-deep); font-weight: 800; font-size: var(--fs-100);
  text-transform: uppercase; letter-spacing: .05em; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:nth-child(even) { background: #FBFDFD; }

/* --- FAQ / Accordion --- */
.faq { display: grid; gap: var(--sp-3); }
.faq__item { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.faq__item[open] { border-color: var(--c-border-strong); box-shadow: var(--sh-xs); }
.faq__q {
  list-style: none; cursor: pointer; padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4); min-height: 3.5rem;
  font-family: var(--ff-sans); font-size: var(--fs-300); font-weight: 700; color: var(--c-petrol-deep);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; margin-left: auto; flex: none; inline-size: 1.1rem; block-size: 1.1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--t-base);
}
.faq__item[open] .faq__q::after { transform: rotate(180deg); }
.faq__q:hover { background: var(--c-surface-alt); }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-200); color: var(--c-text); }
.faq__a > * + * { margin-top: var(--sp-3); }

/* --- Breadcrumbs --- */
.crumbs { padding-block: var(--sp-4); font-size: var(--fs-100); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-text-muted); }
.crumbs li + li::before { content: "›"; color: var(--c-border-strong); }
.crumbs a { color: var(--c-petrol-dark); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { font-weight: 700; color: var(--c-text); }

/* --- Seitenkopf Unterseiten --- */
.pagehead { background: var(--c-surface-alt); position: relative; overflow: clip; }
.pagehead__inner { padding-block: clamp(2rem, 1.25rem + 3.5vw, 4rem); max-inline-size: 46rem; }
.pagehead__lead { font-size: var(--fs-400); color: var(--c-text); margin-top: var(--sp-4); }
.pagehead--media .pagehead__inner { max-inline-size: none; }
.pagehead__grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
@media (min-width: 58rem) { .pagehead__grid { grid-template-columns: 1.05fr .95fr; } }

/* --- Kontaktblöcke --- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.contact-list li { display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--sp-4); align-items: start; }
.contact-list .icon-badge { inline-size: 2.6rem; block-size: 2.6rem; }
.contact-list dt, .contact-list .lbl { font-size: var(--fs-100); font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.contact-list a { font-weight: 700; }

/* --- Karten-Vorschau (kein Google Maps ohne Einwilligung) --- */
.mapbox { border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; background: var(--c-white); }
.mapbox__preview { position: relative; display: grid; place-items: center; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-5); text-align: center;
  background: var(--c-surface-alt) center/cover no-repeat; min-block-size: 18rem; }
.mapbox__preview p { max-inline-size: 30rem; font-size: var(--fs-200); color: var(--c-petrol-deep); }
.mapbox__frame { display: none; }
.mapbox.is-loaded .mapbox__preview { display: none; }
.mapbox.is-loaded .mapbox__frame { display: block; }
.mapbox__frame iframe { inline-size: 100%; block-size: 26rem; border: 0; display: block; }

/* ==========================================================================
   10  KOSTENRECHNER
   ========================================================================== */
.calc { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 64rem) { .calc { grid-template-columns: 1.05fr .95fr; gap: var(--sp-7); } }

.calc__panel { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: clamp(1.25rem, .8rem + 1.6vw, 2rem); box-shadow: var(--sh-sm); }
.calc__panel--result { background: var(--c-surface-alt); border-color: var(--c-border-strong); position: sticky; top: calc(var(--header-h) + 1rem); }
@media (max-width: 64rem) { .calc__panel--result { position: static; } }

.calc__group { border: 0; padding: 0; margin: 0 0 var(--sp-6); }
.calc__group:last-of-type { margin-bottom: 0; }
.calc__legend { font-family: var(--ff-sans); font-size: var(--fs-200); font-weight: 800; color: var(--c-petrol-deep);
  padding: 0 0 var(--sp-3); display: flex; align-items: center; gap: .5rem; }
.calc__legend .step-no { inline-size: 1.7rem; block-size: 1.7rem; display: grid; place-items: center;
  background: var(--c-petrol); color: #fff; border-radius: var(--r-pill); font-size: .82rem; flex: none; }

.calc__result-big { text-align: center; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-border-strong); margin-bottom: var(--sp-5); }
.calc__result-label { font-size: var(--fs-200); font-weight: 700; color: var(--c-text-muted); }
.calc__result-value { font-family: var(--ff-serif); font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4rem); line-height: 1.05;
  color: var(--c-petrol-deep); font-variant-numeric: tabular-nums; margin-block: .15em; }
.calc__result-sub { font-size: var(--fs-200); color: var(--c-text-muted); }

.calc__bars { display: grid; gap: var(--sp-4); margin-block: var(--sp-5); }
.calc__bar-row { display: grid; gap: .4rem; }
.calc__bar-head { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-100); font-weight: 700; }
.calc__bar-track { block-size: 1.1rem; background: #DCEAEA; border-radius: var(--r-pill); overflow: hidden; }
.calc__bar-fill { block-size: 100%; border-radius: var(--r-pill); transition: inline-size var(--t-slow); inline-size: 0; }
.calc__bar-fill--kasse { background: var(--c-petrol); }
.calc__bar-fill--eigen { background: var(--c-magenta); }

.calc__breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; font-size: var(--fs-200); }
.calc__breakdown li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: .55rem 0; border-bottom: 1px solid var(--c-border); }
.calc__breakdown li:last-child { border-bottom: 0; }
.calc__breakdown .val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.calc__breakdown li.is-total { border-top: 2px solid var(--c-border-strong); margin-top: .35rem; padding-top: .8rem; font-weight: 800; color: var(--c-petrol-deep); }
.calc__breakdown li.is-credit .val { color: var(--c-success); }

.calc__assumptions { font-size: var(--fs-100); color: var(--c-text-muted); }
.calc__assumptions dt { font-weight: 700; color: var(--c-text); }
.calc__assumptions dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem var(--sp-4); margin: 0; }
.calc__assumptions dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.calc__disclaimer { font-size: var(--fs-100); color: var(--c-text); background: var(--c-white);
  border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); }

.calc__nojs { border: 2px dashed var(--c-note-border); background: var(--c-note-bg); color: var(--c-note-text);
  border-radius: var(--r-md); padding: var(--sp-5); }
.js .calc__nojs { display: none; }
html:not(.js) .calc__form-wrap { display: none; }

.demo-toggle { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--c-note-bg); border: 2px dashed var(--c-note-border); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); color: var(--c-note-text); font-size: var(--fs-200); }
.demo-badge { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-100); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; background: var(--c-note-border); color: #3D2A00;
  padding: .25em .8em; border-radius: var(--r-pill); }

/* Mini-Rechner auf der Startseite */
.minicalc { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: clamp(1.25rem, .9rem + 1.4vw, 2rem); box-shadow: var(--sh-sm); display: grid; gap: var(--sp-5); }
.minicalc__row { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .minicalc__row { grid-template-columns: 1fr 1fr; } }
.minicalc__out { background: var(--c-surface-alt); border-radius: var(--r-md); padding: var(--sp-5); display: grid; gap: .4rem; }
.minicalc__num { font-family: var(--ff-serif); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1.1; color: var(--c-petrol-deep); font-variant-numeric: tabular-nums; }

/* Pflegegrad-Übersicht */
.grade-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.grade { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; display: grid; gap: .25rem; }
.grade__label { font-size: var(--fs-100); font-weight: 700; color: var(--c-text-muted); }
.grade__value { font-family: var(--ff-serif); font-size: var(--fs-500); color: var(--c-petrol-deep); font-variant-numeric: tabular-nums; }
.grade__note { font-size: .8rem; color: var(--c-text-muted); line-height: 1.35; }

/* ==========================================================================
   11  FORMULARE
   ========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 40rem) { .form__grid--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .45rem; }
.field__label { font-size: var(--fs-200); font-weight: 700; color: var(--c-petrol-deep); }
.field__hint { font-size: var(--fs-100); color: var(--c-text-muted); }
.field__opt { font-weight: 500; color: var(--c-text-muted); font-size: var(--fs-100); }
.req { color: var(--c-magenta-text); font-weight: 800; }

.input, .select, .textarea {
  inline-size: 100%; min-height: 3.1rem; padding: .7rem .95rem;
  font-size: var(--fs-300); color: var(--c-text);
  background: var(--c-white); border: 2px solid var(--c-border-strong); border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.select {
  appearance: none; padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23164F59' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-petrol); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-petrol); box-shadow: 0 0 0 3px rgba(8,127,145,.18); outline: none; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-error); }

.field__error { display: none; font-size: var(--fs-100); font-weight: 700; color: var(--c-error);
  align-items: center; gap: .4em; }
.field__error::before { content: "⚠"; font-size: 1.05em; }
.field.has-error .field__error { display: flex; }

.choices { display: grid; gap: var(--sp-3); }
.choices--inline { grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 34rem) { .choices--inline { grid-auto-flow: row; } }
.choice {
  display: flex; align-items: flex-start; gap: .75rem; min-height: 3rem;
  padding: .8rem 1rem; background: var(--c-white);
  border: 2px solid var(--c-border-strong); border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-200); transition: border-color var(--t-fast), background var(--t-fast);
}
.choice:hover { border-color: var(--c-petrol); background: #FAFDFD; }
.choice input { inline-size: 1.3rem; block-size: 1.3rem; accent-color: var(--c-petrol); flex: none; margin-top: .1rem; }
.choice:has(input:checked) { border-color: var(--c-petrol); background: var(--c-surface-alt); }
.choice:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.consent { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--fs-200); }
.consent input { inline-size: 1.4rem; block-size: 1.4rem; accent-color: var(--c-petrol); flex: none; margin-top: .15rem; }

.form__errors { display: none; border: 2px solid var(--c-error); background: #FDF2F1; border-radius: var(--r-md); padding: var(--sp-5); }
.form__errors[data-visible="true"] { display: block; }
.form__errors h3 { color: var(--c-error); font-family: var(--ff-sans); font-size: var(--fs-300); margin-bottom: var(--sp-3); }
.form__errors ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-200); }
.form__errors a { color: var(--c-error); font-weight: 700; }

.form__status { border-radius: var(--r-md); padding: var(--sp-5); font-size: var(--fs-200); }
.form__status[data-state="pending"] { background: var(--c-note-bg); border: 1px solid var(--c-note-border); color: var(--c-note-text); }
.form__status[data-state="ok"] { background: #EAF6F0; border: 1px solid #9CCBB6; color: #14563E; }
.form__status[data-state="error"] { background: #FDF2F1; border: 1px solid #E2A9A4; color: #8A1E17; }
.form__status:not([data-state]) { display: none; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   12  FOOTER
   ========================================================================== */
.site-footer { background: var(--c-petrol-deep); color: #D8ECEE; font-size: var(--fs-200); }
.site-footer a { color: #D8ECEE; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__main { display: grid; gap: var(--sp-7); padding-block: var(--sp-9) var(--sp-7); }
@media (min-width: 52rem) { .footer__main { grid-template-columns: 1.25fr 1fr 1fr 1fr; } }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__sub { color: #E7C6E2; }
.footer__logo { inline-size: 13rem; margin-bottom: var(--sp-4); }
.footer h2, .footer__title {
  font-family: var(--ff-sans); font-size: var(--fs-100); font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #8FD3DA; margin-bottom: var(--sp-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__addr { font-style: normal; display: grid; gap: .3rem; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.18); padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center;
  font-size: var(--fs-100); color: #B7D8DB;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); list-style: none; margin: 0; padding: 0; }
.footer__copy { margin-left: auto; }
@media (max-width: 52rem) { .footer__copy { margin-left: 0; } }
.social { display: flex; gap: var(--sp-3); }
.social a { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-pill); }
.social a:hover { background: rgba(255,255,255,.12); }
.social svg { inline-size: 1.25rem; block-size: 1.25rem; }

/* ==========================================================================
   13  UTILITIES & BARRIEREFREIHEIT
   ========================================================================== */
.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.mt-0{margin-top:0}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}.mt-8{margin-top:var(--sp-8)}
.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   14  ANIMATIONEN
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow), transform var(--t-slow); will-change: opacity, transform; }
[data-reveal].is-visible { opacity: 1; transform: none; }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 48rem) {
  [data-reveal] { transform: translateY(10px); }
}

/* --------------------------------------------------------------------------
   Einzugsgebiet – Ortslisten
   Mehrspaltig, damit 19 Ortsnamen nicht als endlose Spalte untereinander
   stehen. Die Spaltenzahl richtet sich nach der Breite, nicht nach einer
   festen Zahl – so bleiben die Namen auf jedem Gerät gut lesbar.
   -------------------------------------------------------------------------- */
.orte-gruppe + .orte-gruppe { margin-block-start: var(--sp-6); }
.orte-gruppe h3 { font-family: var(--ff-sans); font-size: var(--fs-200); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-petrol-dark);
  margin-block-end: var(--sp-3); }
.orte {
  list-style: none; margin: 0; padding: 0;
  columns: 3 11rem; column-gap: var(--sp-6);
}
.orte li {
  break-inside: avoid;
  padding-block: .32rem;
  padding-inline-start: 1.15rem;
  position: relative;
}
.orte li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .95em;
  inline-size: .4rem; block-size: .4rem; border-radius: 50%;
  background: var(--c-petrol); opacity: .55;
}

/* --------------------------------------------------------------------------
   Google-Bewertung – kompakter Vertrauensbaustein

   Bewusst zurückhaltend: Er soll die Aussage der Sektion stützen, nicht mit
   der Schaltfläche um Aufmerksamkeit konkurrieren. Deshalb kein Kasten in
   Markenfarbe, sondern nur eine feine Linie links.

   Der Sternbalken ist rein dekorativ (aria-hidden) – der Wert steht direkt
   daneben als Text. Er entsteht aus zwei deckungsgleichen Reihen: unten die
   blassen Sterne, darüber dieselben in Gold, auf den Anteil beschnitten. So
   sind auch Zwischenwerte wie 4,4 exakt darstellbar, ohne halbe Sternbilder.
   -------------------------------------------------------------------------- */
.bewertung {
  border-inline-start: 3px solid var(--c-border-strong);
  padding-inline-start: var(--sp-5);
  display: grid; gap: var(--sp-3);
  max-inline-size: 30rem;
}
.bewertung__kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem;
  margin: 0; font-size: var(--fs-100);
}
.bewertung__wert { color: var(--c-text); }
.bewertung__wert strong { font-size: var(--fs-300); }
.bewertung__kopf a { color: var(--c-petrol-dark); }

.sterne { position: relative; display: inline-block; line-height: 0; flex: none; }
.sterne__spur { color: #DCD3C0; }            /* blasse Spur, nur Kontur der Reihe */
.sterne__voll {
  color: #A97B10;                            /* gedecktes Gold, 3,65:1 – sichtbar,
                                                aber nicht greller als die Marke */
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  overflow: hidden; white-space: nowrap;
}
.sterne svg { display: inline-block; }

.bewertung__zitat { margin: 0; }
.bewertung__zitat blockquote {
  margin: 0; font-style: italic; color: var(--c-text);
  font-size: var(--fs-200); line-height: 1.5;
}
.bewertung__zitat figcaption {
  margin-block-start: .3rem; font-size: var(--fs-100); color: var(--c-text-muted);
}
.bewertung__stand { margin: 0; font-size: var(--fs-100); color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   Zurück nach oben – zwei Ausprägungen für denselben Zweck

   Eine frei schwebende Schaltfläche deckt zwangsläufig das ab, worüber sie
   liegt. Gemessen wurde das: Unterhalb von etwa 1424 px verdeckt sie an
   zahlreichen Scrollpositionen Fließtext und an einigen sogar Schaltflächen
   und Formularfelder – auf schmalen Geräten reicht die Seitenbreite bis in
   die Ecke hinein. Deshalb:

     .totop        schwebt nur dort, wo neben der Inhaltsspalte (max. 78rem)
                   genug freier Rand bleibt, also ab 89rem Fensterbreite.
                   Dort wurde keine einzige Überdeckung mehr gemessen.
     .totop-fuss   ein gewöhnlicher Verweis am Ende der Fußzeile. Er steht im
                   Textfluss, verdeckt also nie etwas und funktioniert ohne
                   JavaScript.

   Der Fußverweis ist die Grundausstattung: auf jeder Seite, in jeder
   Fensterbreite, ohne JavaScript. Er tritt nur dort zurück, wo die
   schwebende Schaltfläche auf dieser Seite tatsächlich erscheinen kann –
   dafür setzt main.js die Klasse „schwebe-moeglich“ am <html>-Element
   (breites Fenster UND lange Seite). Auf kurzen Seiten wie der Fehlerseite
   bleibt deshalb der Fußverweis stehen, auch auf großen Bildschirmen.
   -------------------------------------------------------------------------- */
.totop-fuss {
  display: inline-flex; align-items: center; gap: .45em;
  color: inherit; text-decoration: none; font-weight: 700;
  padding: .5em .2em; min-block-size: 2.75rem;
}
.totop-fuss:hover { color: #fff; text-decoration: underline; }
.totop-fuss svg { inline-size: 1.05em; block-size: 1.05em; }
/* Die Fußzeile ordnet mit margin-left:auto; damit der Verweis rechts neben
   der Zeile steht und nicht die Urheberzeile verdrängt, bekommt er auf
   schmalen Geräten eine eigene Zeile. */
@media (max-width: 52rem) { .totop-fuss { margin-left: 0; } }

.totop {
  /* Standardmäßig aus – erst ab 89rem eingeblendet, siehe unten. */
  display: none;
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 90;
  place-items: center;
  /* 3rem = 48px: erfüllt die Mindestgröße für Bedienelemente mit Reserve */
  inline-size: 3rem; block-size: 3rem;
  border-radius: var(--r-pill);
  /* Weiße Füllung statt einer Markenfarbe: Der Fußbereich hat selbst
     --c-petrol-deep als Hintergrund, dort wäre eine petrolfarbene Schaltfläche
     unsichtbar. Weiß hebt sich vom dunklen Fuß ab (9,15:1), auf hellen
     Abschnitten übernimmt der Rand die Abgrenzung (4,52:1). */
  background: var(--c-white); color: var(--c-petrol-deep);
  border: 2px solid var(--c-petrol);
  box-shadow: var(--sh-md);
  text-decoration: none;
  /* im Ruhezustand nicht bedienbar und für Hilfsmittel nicht vorhanden */
  opacity: 0; visibility: hidden; transform: translateY(.5rem);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), background var(--t-fast);
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--c-petrol-deep); color: #fff; border-color: var(--c-petrol-deep); }
.totop:focus-visible { box-shadow: var(--sh-focus); }
.totop svg { inline-size: 1.35rem; block-size: 1.35rem; }
/* Solange ein Dialog oder das Menü offen ist, tritt die Schaltfläche zurück */
body.is-locked .totop { visibility: hidden; opacity: 0; }
/* Ab hier ist der Rand neben der Inhaltsspalte breit genug für die
   schwebende Schaltfläche: 89rem = 1424 px, Inhaltsspalte höchstens 1248 px,
   also mindestens 88 px Rand je Seite – die Schaltfläche braucht 48 px plus
   24 px Abstand. */
@media (min-width: 89rem) {
  .totop { display: grid; }
}
.schwebe-moeglich .totop-fuss { display: none; }

/* ==========================================================================
   15  DRUCK
   ========================================================================== */
@media print {
  .topbar, .site-header, .mobilenav, .site-footer, .btn, .nav-toggle, .deco, .skiplink,
  .totop { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: .8rem; }
  .calc { grid-template-columns: 1fr; }
  .calc__panel { border: 1px solid #999; box-shadow: none; page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ==========================================================================
   16  KORREKTUREN NACH DEM ERSTEN SICHTTEST
   ========================================================================== */

/* Inline-Icons ohne eigene Größenangabe sollen sich am Text orientieren
   und nicht auf die volle Spaltenbreite wachsen. */
.ico { inline-size: 1.15em; block-size: 1.15em; flex: none; vertical-align: -0.16em; }
.icon-badge .ico, .dayline__dot .ico, .timeline__marker .ico, .note .ico { inline-size: 100%; block-size: 100%; }
.perk__icon .ico { inline-size: 2.5rem; block-size: 2.5rem; vertical-align: baseline; }
.script .ico { inline-size: 1em; block-size: 1em; color: var(--c-magenta); }
p .ico, li .ico, span .ico, a .ico { display: inline-block; }

/* Note-Boxen: Icongröße fixieren */
.note > svg, .note > .ico { inline-size: 1.5rem; block-size: 1.5rem; }

/* Tagesbilder auf Desktop vierspaltig statt Umbruch */
@media (min-width: 60rem) {
  .dayline__media { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
}
@media (max-width: 60rem) {
  .dayline__media { grid-template-columns: repeat(2, 1fr); }
}

/* Footer: Abstand vor der Social-Media-Gruppe */
.footer__social { margin-top: var(--sp-6); }
.footer__main .social { margin-top: var(--sp-3); }

/* Telefonnummer in dunklen Abschnitten sauber ausrichten */
.section--petrol a .ico { color: inherit; }

/* Vermeidet zu lange Zeilen in schmalen Karten */
.card__text, .field__hint { max-inline-size: 46ch; }

/* hidden muss auch bei Grid-/Flex-Elementen greifen */
[hidden] { display: none !important; }

/* Ergebnisblock des Rechners: Label, Zahl und Zusatz jeweils eigene Zeile */
.calc__result-label, .calc__result-value, .calc__result-sub { display: block; }

/* Zahlen in Serifenschrift auf Versalziffern stellen – Mediävalziffern
   (die „springenden" Zahlen von Cormorant) lesen sich bei Geldbeträgen
   und in Tabellen schlechter. */
.calc__result-value, .minicalc__num, .grade__value, .badge-round__num,
table.data .num, .calc__breakdown .val {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Lange Platzhaltertexte dürfen umbrechen (sonst waagerechtes Scrollen
   auf sehr schmalen Geräten). */
.placeholder { white-space: normal; }

/* ==========================================================================
   17  HERO MIT HINTERGRUNDVIDEO
   --------------------------------------------------------------------------
   Der Hero füllt die sichtbare Bildschirmhöhe abzüglich der Kopfleiste.
   Hinter Text und Schaltflächen liegt ein petrolfarbener Verlauf („Scrim"),
   dessen Deckkraft so gewählt ist, dass weiße Schrift auch über einem
   strahlend hellen Videobild lesbar bleibt. Gemessen über reinem Weiß –
   dem ungünstigsten Fall:
     Deckkraft 88 % (linker Rand):  Weiß 8,59:1 | Akzent #E7C6E2 5,55:1
     Deckkraft 80 % (Textbereich):  Weiß 6,70:1 | Akzent #E7C6E2 4,33:1
   ========================================================================== */
.hero--video {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: center;
  /* Die Bilder laufen in voller Breite – seitlich wird nichts
     abgeschnitten. Dafür folgt die Höhe dem Seitenverhältnis der
     Aufnahmen (6667 × 2755 = 2,42). Nach unten begrenzt die sichtbare
     Fensterhöhe, nach oben bleibt genug Platz für Überschrift,
     Schaltflächen und Plakette. */
  min-block-size: 26rem;                                            /* Rückfall */
  min-block-size: clamp(26rem, calc(100vw / 2.42), calc(100vh - var(--header-h)));
  min-block-size: clamp(26rem, calc(100vw / 2.42), calc(100svh - var(--header-h)));
  padding-block: var(--sp-8) var(--sp-10);
  background: var(--c-petrol-ink);                  /* Grund, bevor das Video da ist */
}
/* Auf sehr flachen Fenstern (Querformat-Handy) nicht zusammenquetschen */
@media (max-height: 34rem) {
  .hero--video { min-block-size: 32rem; }
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture { display: contents; }

/* Abdunkelung: kräftig hinter dem Text, zurückhaltend zur Bildseite hin */
.hero__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__scrim::before {
  content: ""; position: absolute; inset: 0;
  /* Kräftig links, wo der Text steht; nach rechts hin durchlässig, damit
     das Gebäude sichtbar bleibt. Im Textbereich liegt die Deckkraft bei
     mindestens 80 %; selbst über einem strahlend weißen Himmel erreicht
     weiße Schrift dort noch 6,70:1, links am Rand 8,59:1. */
  background:
    linear-gradient(100deg,
      rgba(14,58,67,.88) 0%,
      rgba(14,58,67,.80) 30%,
      rgba(14,58,67,.44) 58%,
      rgba(14,58,67,.20) 100%);
}
.hero__scrim::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,58,67,.26) 0%, rgba(14,58,67,0) 20%),
    linear-gradient(to top,    rgba(14,58,67,.42) 0%, rgba(14,58,67,0) 28%);
}

.hero--video .hero__inner { position: relative; z-index: 1; padding-block: 0; }
@media (min-width: 60rem) {
  .hero--video .hero__inner { grid-template-columns: minmax(0, 36rem) 1fr; }
}

.hero--video .hero__content { max-inline-size: 36rem; }
.hero--video .hero__title,
.hero--video .hero__lead { color: #fff; }
.hero--video .hero__title { text-shadow: 0 2px 18px rgba(6,32,38,.45); }
.hero--video .hero__lead { color: #EAF6F7; max-inline-size: 30rem; }
.hero--video .accent { color: #E7C6E2; }   /* heller Logo-Violett-Ton, 4,33:1 auf dem Scrim */

/* Über dem Video hat die Plakette keine Bildkante mehr, an der sie sitzen
   könnte. Sie bekommt deshalb einen eigenen hellen Ring als Abgrenzung und
   wird oben im rechten Feld verankert – auf Höhe der ersten Überschriftzeile. */
.hero--video .badge-round {
  position: static;
  margin-inline-start: auto;
  border-color: rgba(255,255,255,.55);
  /* dunklere Markenstufe, damit weiße Schrift auch über einem hellen
     Videobild sicher lesbar bleibt (7,56:1 statt 4,18:1) */
  background: rgba(22,79,89,.93);
  backdrop-filter: blur(3px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 22px 46px rgba(6,32,38,.40);
}
.hero--video .hero__aside {
  display: flex; justify-content: flex-end; align-items: flex-start;
  align-self: stretch;
}
/* Etwas größer als im Fließtext und auf Höhe der ersten Überschriftzeile
   verankert – so wirkt die Plakette wie ein Siegel und nicht wie ein
   freischwebender Kreis. Der negative Abstand wird nach oben begrenzt,
   damit sie auf niedrigen Fenstern nicht unter die Kopfleiste rutscht. */
.hero--video .badge-round {
  inline-size: clamp(10rem, 7rem + 9vw, 15rem);
  margin-block-start: clamp(-1.75rem, -1.2vh, 0rem);
}
@media (max-width: 60rem) {
  /* Schmale Bildschirme: mittig unter den Schaltflächen statt rechts
     angehängt – zentriert wirkt es gesetzt, rechtsbündig wie übrig geblieben. */
  .hero--video .hero__aside {
    justify-content: center; margin-top: var(--sp-7);
  }
  .hero--video .badge-round {
    /* etwas größer als der Grundwert, damit die gewachsene Schrift auch bei
       320 px Bildschirmbreite genügend Abstand zum Ring behält */
    inline-size: clamp(9.75rem, 6.5rem + 14vw, 12rem);
    margin-block-start: 0; margin-inline-start: 0;
  }
}

/* ---------------------------------------------- Hero auf schmalen Geräten
   Ein Panorama über die volle Handybreite wäre nur ein schmaler Streifen,
   ein formatfüllendes Bild dagegen so stark angeschnitten, dass vom Haus
   kaum etwas übrig bleibt (gemessen: 38 % der Bildbreite). Deshalb steht
   die Aufnahme hier als Band über dem Text – in voller Breite und
   unbeschnitten – und der Text darunter auf petrolfarbenem Grund. Weiße
   Schrift steht dort auf #103A42 und erreicht 12,6:1.                     */
@media (max-width: 60rem) {
  .hero--video {
    display: block;
    min-block-size: 0;
    padding-block: 0 var(--sp-8);
    background: var(--c-petrol-ink);
  }
  .hero--video .hero__bg {
    position: relative; inset: auto;
    aspect-ratio: 4 / 3;
  }
  .hero--video .hero__inner { padding-block: var(--sp-7) 0; }
  .hero__dia { object-position: 50% 50%; }
  /* Unterkante des Bildes weich in den petrolfarbenen Grund überführen */
  .hero__scrim::before {
    background: linear-gradient(to top,
      rgba(16,58,66,.96) 0%, rgba(16,58,66,.55) 14%, rgba(16,58,66,0) 42%);
  }
  .hero__scrim::after { background: none; }
}

/* Zwischenbreiten: Überschrift, Fließtext und zwei untereinander stehende
   Schaltflächen brauchen mehr Höhe, als das Bildformat vorgibt – dann würde
   das Bild seitlich angeschnitten. Weniger Innenabstand holt einen Teil
   davon zurück. */
@media (min-width: 60.0625rem) and (max-width: 85rem) {
  .hero--video { padding-block: var(--sp-6) var(--sp-8); }
}

/* Steuerung: Bewegung anhalten – Anforderung aus WCAG 2.2.2 */
.hero__motion {
  position: absolute; inset-block-end: var(--sp-5); inset-inline-end: var(--sp-5); z-index: 2;
  display: inline-flex; align-items: center; gap: .5em;
  min-block-size: 2.75rem; padding: .5em 1em;
  font-size: var(--fs-100); font-weight: 700; color: #fff;
  background: rgba(14,58,67,.78); border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--r-pill); cursor: pointer; backdrop-filter: blur(4px);
  transition: background var(--t-fast);
}
.hero__motion:hover { background: rgba(14,58,67,.92); }
@media (max-width: 60rem) {
  /* Im gestapelten Aufbau sitzt die Schaltfläche an der Unterkante des
     Bildbandes – dort liegt sie auf der abgedunkelten Zone und verdeckt
     weder Dachlinie noch Text. Das Band ist 75 vw hoch (4:3). */
  .hero__motion {
    inset-block-start: calc(75vw - 3.5rem); inset-block-end: auto;
    inset-inline: auto var(--sp-4); transform: none;
  }
}
.hero__motion svg { inline-size: 1rem; block-size: 1rem; }
.hero__motion[hidden] { display: none !important; }

/* Sanfter Hinweis zum Weiterscrollen */
.hero__scroll {
  position: absolute; inset-block-end: var(--sp-5); inset-inline-start: 50%;
  transform: translateX(-50%); z-index: 2;
  display: inline-grid; place-items: center; gap: .35rem;
  color: #fff; text-decoration: none; font-size: var(--fs-100); font-weight: 600;
  padding: .5rem .9rem; border-radius: var(--r-md);
}
.hero__scroll svg { inline-size: 1.5rem; block-size: 1.5rem; animation: heroBob 2.6s ease-in-out infinite; }
.hero__scroll:hover { color: #fff; }
.hero__scroll:hover svg { animation-play-state: paused; }
@keyframes heroBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } }
@media (max-width: 48rem) { .hero__scroll { display: none; } }

/* --------------------------------------------------------- Bilder-Slider
   Alle Aufnahmen liegen deckungsgleich übereinander. Sichtbar ist die mit
   .is-an. Beim Wechsel wird die neue Aufnahme mit z-index 1 über die alte
   gelegt und eingeblendet – die alte bleibt so lange voll deckend liegen.
   Dadurch entsteht eine echte Kreuzblende ohne dunkle Delle in der Mitte.
   Bewegung gibt es sonst keine: kein Zoom, kein Schwenk.                  */
.hero__dia {
  position: absolute; inset: 0; z-index: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
  opacity: 0;
  transition: opacity 1800ms ease-in-out;
}
.hero__dia.is-an { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__dia { transition: none; }
}

/* Zwischenbreite ~1200–1310 px: Navigation, Wortmarke und Kopf-Schaltfläche
   passen dort nur knapp nebeneinander – etwas enger setzen, damit die Zeile
   nicht über den rechten Rand hinausläuft. */
@media (min-width: 75rem) and (max-width: 82rem) {
  .nav__list { gap: .5rem; }
  .nav__link { font-size: var(--fs-100); padding-inline: .2rem; }
  .header__cta { font-size: var(--fs-100); padding-inline: 1.15em; }
  .brand__name, .brand__sub { letter-spacing: .03em; }
}



/* ==========================================================================
   18  LOGO
   Seitenverhältnis 4,9:1. Die Höhe ergibt sich automatisch aus der Breite,
   deshalb steht am Bild width/height – das verhindert Layoutsprünge.
   ========================================================================== */
.brand__mark { inline-size: clamp(11rem, 9rem + 6vw, 15rem); block-size: auto; }
.footer__brand-logo .brand__mark { inline-size: 13rem; }
.mobilenav__bar .brand__mark { inline-size: clamp(9.5rem, 7rem + 12vw, 12rem); }
@media (max-width: 22rem) {
  .mobilenav__bar .brand__mark, .site-header .brand__mark { inline-size: 9rem; }
}