/* =========================================================================
   Kieferorthopädie Waldtrudering — Design System
   Umsetzung des Markenpakets (Stand Juli 2026) und der Referenz-Vorlage
   „Website Draft" in der Designrichtung 02 „Rund & Freundlich".
   Ein Stylesheet für alle Seiten (bisher: 18x inline dupliziert).
   ========================================================================= */

@layer reset, tokens, base, layout, components, utilities;

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

/* ======================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  ul { list-style: none; padding: 0; }
  :target { scroll-margin-top: 7rem; }
}

/* ======================================================================== */
@layer tokens {
  :root {
    /* --- Markenfarben (Markenpaket, Abschnitt 3) ---------------------- */
    --navy: #14295C;
    --navy-800: #1B3570;
    --navy-700: #24448A;
    --yellow: #F2B233;
    --yellow-soft: #FBE6BC;
    --yellow-ink: #C98F16;   /* Markenwert; nur für Flächen und Icons */
    /* Akzent-Schrift in Navy statt Gold (Entscheidung 26.09.2026): Gelb ist
       als kleine Schrift auf Weiß nicht lesbar (1,7:1), das dunkle Gold
       #94660F wirkte neben dem Logo-Gelb fremd. Gelb bleibt Linien, Flächen
       und Icons vorbehalten. */
    --yellow-text: var(--navy);
    --white: #FFFFFF;
    --grey-50: #F4F5F8;
    --grey-100: #E8EAF0;
    --text: #4E525E;
    --muted: #626875;        /* war #6B7180: auf Grau-50 nur 4,48:1 */
    --line: #E4E7EF;

    /* --- Typografie ---------------------------------------------------- */
    --font-display: 'Figtree', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --h1: clamp(2.375rem, 1.55rem + 3.7vw, 4.25rem);   /* 38 → 68 px */
    --h2: clamp(1.875rem, 1.44rem + 1.95vw, 2.875rem); /* 30 → 46 px */
    --h3: clamp(1.5rem, 1.34rem + 0.73vw, 1.875rem);   /* 24 → 30 px */
    --body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);  /* 16 → 17 px */

    /* --- Raum & Form ---------------------------------------------------- */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --wrap: 80rem;          /* 1280 px */
    --wrap-narrow: 46rem;
    --section-y: clamp(4rem, 9vw, 6.875rem);  /* 64 → 110 px */

    --r-lg: 2.5rem;   /* 40 px – Bilder und große Karten */
    --r-md: 1.75rem;  /* 28 px – kleine Karten und Bilder */
    --r-full: 999rem;

    --shadow-float: 0 18px 40px rgba(20, 41, 92, 0.14);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring: linear(0, .32 6%, .69 13%, .95 19%, 1.07 25%, 1.1 30%, 1.06 39%, 1 51%, .99 62%, 1);

    --header-h: 4.75rem;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ======================================================================== */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1.5rem);
  }

  body {
    font-family: var(--font-body);
    font-size: var(--body);
    font-weight: 400;
    line-height: 1.68;
    color: var(--text);
    background: var(--white);
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.028em;
    line-height: 1.08;
    text-wrap: balance;
    color: var(--navy);
  }
  h1 { font-size: var(--h1); }
  h2 { font-size: var(--h2); }
  h3 { font-size: var(--h3); line-height: 1.18; }
  h4 {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--navy);
  }
  p { text-wrap: pretty; }

  a { color: var(--navy); text-decoration: none; }
  a:hover { color: var(--yellow-text); }

  /* Fokus gelb – laut Markenpaket 3 px */
  /* Markenpaket fordert 3 px Gelb. Gelb allein hat auf Weiß nur 1,88:1 und
     wäre als Fokusanzeige nicht erkennbar (WCAG 2.4.11 verlangt 3:1).
     Deshalb Gelb plus dunkler Außenring – bleibt sichtbar gelb, ist aber
     auf jedem Untergrund erkennbar. */
  :focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(20, 41, 92, 0.55);
    border-radius: 6px;
  }
  .site-footer :focus-visible, .cta :focus-visible {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6);
  }

  ::selection { background: var(--yellow); color: var(--navy); }

  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: vt-out 0.2s var(--ease) both; }
    ::view-transition-new(root) { animation: vt-in 0.3s var(--ease) both; }
  }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

  @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
  @keyframes floatySmall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
}

/* ======================================================================== */
@layer layout {
  .wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
  .wrap-narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); margin-inline: auto; }

  section { padding-block: var(--section-y); }
  .band { background: var(--grey-50); }

  .grid-2 {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    align-items: center;
  }
}

/* ======================================================================== */
@layer components {

  /* ---------- Skip-Link & Fortschritt ---------------------------------- */
  .skip-link {
    position: fixed;
    left: -9999px;
    top: 0.75rem;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--navy);
    color: var(--white);
    border-radius: var(--r-full);
    font-size: 0.85rem;
  }
  /* :focus statt :focus-visible – der Link ist ohnehin nur per Tastatur
     erreichbar, und programmatischer Fokus soll ihn ebenfalls zeigen. */
  .skip-link:is(:focus, [data-visible]) { left: 1rem; color: var(--white); }

  .scroll-progress {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 80;
    height: 3px;
    width: 100%;
    background: var(--yellow);
    transform-origin: 0 50%;
    scale: 0 1;
  }
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      animation: progress linear both;
      animation-timeline: scroll(root block);
    }
  }
  @keyframes progress { to { scale: 1 1; } }

  /* ---------- Header ---------------------------------------------------- */
  /* Der Name der Inhaberin steht neben der Wortmarke, nicht darin: dort haetten
     drei Zeilen der Marke den Fokus genommen. In der Kopfzeile klebt er mit und
     ist deshalb auf jeder Seite dauerhaft sichtbar - eine Leiste oberhalb waere
     nach dem ersten Scrollen verschwunden. Unter 62rem uebernimmt das
     Burger-Menue die Breite; dort traegt ihn der Hero und der Fussbereich. */
  .marke-arzt {
    display: none;
    align-items: center;
    gap: 0.85rem;
    margin-right: auto;
    font-size: var(--marke-arzt);
    color: var(--muted);
    white-space: nowrap;
  }
  .marke-arzt span {
    width: 1px;
    height: 1.6rem;
    background: var(--line);
  }
  .marke-arzt strong { font-weight: 500; color: var(--navy); }
  /* Erst ab 1200 px ist neben Wortmarke und Navigation wirklich Platz: bei
     1024 braucht der Name 157 px, die Kopfzeile hatte sie nicht und das
     Dokument bekam Querscrollen. */
  @media (min-width: 75rem) { .marke-arzt { display: flex; } }
  /* Auf schmalen Schirmen ist neben der Wortmarke kein Platz. Statt den Namen
     ganz fallen zu lassen, rueckt er unter die Kopfzeile in eine eigene, ebenso
     klebende Zeile - so bleibt er auch dort dauerhaft sichtbar. */
  @media (max-width: 74.99rem) {
    .marke-arzt {
      display: flex;
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      margin: 0;
      padding: 0.4rem clamp(1.15rem, 5vw, 2rem);
      gap: 0;
      font-size: 0.76rem;
      background: var(--grey-50);
      border-bottom: 1px solid var(--line);
    }
    .marke-arzt span { display: none; }
    .site-header { position: sticky; }
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ease);
  }
  .site-header[data-scrolled] { border-bottom-color: var(--line); }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-h);
  }

  /* Wortmarke: Signet als SVG, Schriftzug als echter Text in Jost.
     Der Name der Behandlerin steht laut Markenregel nicht im Logo. */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    min-height: 44px;   /* Touch-Ziel */
  }
  /* Masse der Marke an einer Stelle. Das wandernde Logo im Hero rechnet mit
     genau diesen Werten, damit es punktgenau in der Kopfzeile landet - wird
     hier etwas geaendert, zieht es dort automatisch mit. */
  :root {
    --marke-b: 3.15rem;
    --marke-h: 3.48rem;
    --marke-name: 1.2rem;
    --marke-ort: 0.72rem;
    /* Der Name der Inhaberin gehoert nicht zur Wortmarke, wandert im Auftakt
       aber mit ihr und muss deshalb aus derselben Quelle kommen: sonst haengt
       er als einziger Baustein nicht an der Lupe des wandernden Logos. */
    --marke-arzt: 0.82rem;
  }
  .brand-mark { width: var(--marke-b); height: var(--marke-h); color: var(--navy); }
  /* Bei 320 px passten Wortmarke und Burger nicht nebeneinander. Statt die
     Zeile aufzureissen, schrumpfen dort Marke und Innenabstand. Die
     Handover-Rechnung liest dieselben Variablen und zieht automatisch mit. */
  @media (max-width: 22.5rem) {
    :root {
      --marke-b: 2.5rem;
      --marke-h: 2.76rem;
      --marke-name: 0.95rem;
      --marke-ort: 0.6rem;
      --marke-arzt: 0.72rem;
    }
    .brand-place { letter-spacing: 0.42em; }
    .header-inner { gap: 0.5rem; }
  }
  /* Oben bleibt die Marke zweifarbig. Die wandernde Marke aus dem Hero ist
     navy und gelb; eine einfarbige Kopfzeilenmarke haette beim Überblenden
     einen Farbsprung ergeben. Klassen greifen nicht in den Schattenbaum von
     <use>, benutzerdefinierte Eigenschaften schon. */
  .site-header .brand-mark { --sig-b: var(--yellow); }
  .brand-mark svg { width: 100%; height: 100%; }
  .brand-text { display: grid; line-height: 1.1; }
  .brand-name {
    font-size: var(--marke-name);
    font-weight: 400;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--navy);
  }
  .brand-place {
    font-size: var(--marke-ort);
    font-weight: 300;
    letter-spacing: 0.72em;
    text-transform: uppercase;
    color: var(--navy);
  }

  .nav { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
  .nav-cta { margin-left: 0.75rem; }
  .nav > a, .nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--r-full);
    font-size: 0.97rem;
    font-weight: 400;
    color: var(--navy);
    background: none;
    border: 0;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
  }
  .nav > a:hover, .nav-trigger:hover { background: var(--grey-50); color: var(--navy); }
  .nav a[aria-current='page'] { background: var(--grey-50); font-weight: 500; }
  .nav-trigger svg { width: 0.7rem; transition: rotate 0.25s var(--ease); }
  .nav-trigger[aria-expanded='true'] svg { rotate: 180deg; }

  .nav-menu { position: relative; }
  /* Unsichtbare Bruecke ueber den Abstand zwischen Schaltflaeche und Aufklapp-
     teil. Ohne sie verlaesst der Zeiger beim senkrechten Weg nach unten den
     Bereich, und das Menue klappt zu - man musste seitlich zur Schrift
     ausweichen. Die Bruecke ist so breit wie der Aufklappteil, damit auch ein
     schraeger Weg funktioniert. */
  .nav-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 15rem;
    min-width: 100%;
    height: 0.6rem;
  }
  .nav-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 70;
    display: grid;
    gap: 0.2rem;
    min-width: 15rem;
    padding: 0.5rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-float);
    opacity: 0;
    translate: 0 -6px;
    pointer-events: none;
    transition: opacity 0.22s var(--ease), translate 0.22s var(--ease);
  }
  .nav-menu:is(:hover, :focus-within) .nav-panel,
  .nav-panel[data-open] { opacity: 1; translate: 0; pointer-events: auto; }
  .nav-panel a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 1.1rem;
    font-size: 0.95rem;
  }
  .nav-panel a:hover { background: var(--grey-50); color: var(--navy); }
  .nav-panel .dot {
    width: 0.55rem; height: 0.55rem;
    border-radius: 50%;
    background: var(--yellow);
    flex-shrink: 0;
  }

  .header-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: 0.75rem; }
  .burger, .nav-close { display: none; }


  /* ---------- Icon-Kacheln ------------------------------------------------
     Gelbe Fläche mit Navy-Zeichen: 8,7:1 Kontrast, bleibt einfarbig und
     damit innerhalb der Markenregel. */
  .icon-tile {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: var(--r-full);
    background: var(--yellow-soft);
    color: var(--navy);
    flex-shrink: 0;
  }
  .icon-tile svg { width: 1.35rem; height: 1.35rem; }
  .icon-tile.is-solid { background: var(--yellow); }

  /* ---------- Buttons --------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: var(--navy);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: transform 0.25s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
  }
  .btn:hover { background: var(--navy-800); color: var(--white); transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }

  /* Gelber CTA – im Header und in dunklen Blöcken */
  .btn-accent { background: var(--yellow); color: var(--navy); }
  .btn-accent:hover { background: #E8A521; color: var(--navy); }

  .btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
  .btn-outline:hover { background: var(--navy); color: var(--white); }

  .btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
  .btn .arrow { transition: translate 0.3s var(--ease-spring); }
  .btn:hover .arrow { translate: 4px 0; }

  /* ---------- Abschnittsköpfe ------------------------------------------- */
  /* <use>-Symbole haben keine eigene Größe – der Wrapper gibt sie vor. */
  .mark svg, .trees svg, .brand-mark svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .kicker .mark { width: 1.1rem; height: 1.2rem; color: var(--navy); --sig-b: var(--yellow); flex-shrink: 0; }

  .section-head {
    display: grid;
    gap: 1.25rem 3rem;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
  }
  @media (min-width: 56rem) {
    .section-head.split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  }
  .section-head h2 { margin-top: 0.9rem; }
  .section-head p { color: var(--muted); font-size: 1.0625rem; max-width: 34rem; }
  .section-head.center { justify-items: center; text-align: center; }

  /* Rechte Spalte des Teamkopfs: Text oben, Pfeile darunter */
  .team-head-right { display: grid; gap: 1.5rem; justify-items: start; }
  @media (min-width: 56rem) { .team-head-right { justify-items: end; text-align: right; } }
  .section-head.center p { margin-inline: auto; }

  /* ---------- Hero ------------------------------------------------------- */
  .hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); }
  .hero-grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: center;
  }
  @media (min-width: 62rem) {
    .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  }
  /* Auf Wunsch das Logo-Gelb. Hinweis fuer spaeter: #F2B233 kommt auf Weiss
     nur auf 1,88:1 und reisst damit auch die Schwelle fuer grosse Schrift
     (3:1). Die naechstliegende Variante, die sie haelt, waere #BC8724. */
  /* Auf Wunsch das reine Logo-Gelb. Hinweis fuer spaeter: auf Weiss sind das
     1,88:1, die Schwelle fuer grosse Schrift liegt bei 3:1. Bewusste
     Entscheidung zugunsten der Markenfarbe. */
  .hero h1 span { color: var(--yellow); }
  /* Name der Inhaberin im Hero, zwischen Logo und Ueberschrift. Bewusst in
     der Auszeichnungsschrift und nicht als Versalzeile: er soll gelesen und
     wiedererkannt werden, nicht als Ruberik danebenstehen. */
  .hero-praxis {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0;
    margin-bottom: clamp(0.75rem, 1.6vw, 1.1rem);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    font-weight: 400;
    color: var(--navy);
  }
  .hero-praxis .mark { flex: none; width: 1.1rem; height: 1.2rem; color: var(--navy); --sig-b: var(--yellow); }
  .hero-praxis .mark svg { width: 100%; height: 100%; }

  .hero-lede {
    margin-top: 1.5rem;
    font-size: 1.125rem;
    color: var(--muted);
    max-width: 33rem;
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }

  /* Kennzahlen frei stehend, ohne Kästen */
  .hero-stats { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 3rem; }
  .hero-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.028em;
    color: var(--navy);
    line-height: 1.1;
  }
  .hero-stat span { font-size: 0.9rem; color: var(--muted); }
  .hero-stat .star { color: var(--yellow); }

  .hero-media { position: relative; }
  .hero-photo {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--grey-50);
  }
  @media (min-width: 62rem) { .hero-photo { aspect-ratio: 1 / 1.12; } }
  /* Zwischen Handy und Desktop stehen Bild und Text uebereinander. Bliebe es
     bei 4:5, waere das Foto bei 960 px Breite rund 1200 px hoch und die
     Ueberschrift laege komplett unter der Falz. Ein Deckel ueber max-height
     hilft nicht: mit aspect-ratio schrumpft dann auch die Breite und das Bild
     steht als schmale Karte in einer breiten Spalte. Deshalb hier ein
     breiteres Format – volle Breite, ruhige Hoehe. Auf dem Handy bleibt 4:5. */
  @media (min-width: 34rem) and (max-width: 61.99rem) {
    .hero-photo { aspect-ratio: 16 / 10; }
  }
  .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
  /* Ohne feste Spalte sizet die implizite Spur auf die Eigenbreite des
     Bildes, und das width:100% der Bilder laeuft ins Leere: auf dem Handy
     rendert der Stapel 646 px breit in einem 350 px Rahmen, sichtbar ist
     nur der linke Ausschnitt. minmax(0,1fr) deckelt die Spur. */
  .crossfade { display: grid; grid-template-columns: minmax(0, 1fr); block-size: 100%; }
  .crossfade > * {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 1.1s var(--ease);
  }
  .crossfade > [data-active] { opacity: 1; }

  /* Rundes gelbes Signet-Abzeichen oben rechts */
  /* Schwebende Adresskarte unten */
  .address-card {
    position: absolute;
    left: -0.75rem;
    bottom: -1.5rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.35rem;
    border-radius: var(--r-full);
    background: var(--white);
    box-shadow: var(--shadow-float);
    animation: floatySmall 7s ease-in-out 1.2s infinite;
    max-width: calc(100% + 1.5rem);
  }
  .address-card .mark { width: 1.5rem; height: 1.65rem; color: var(--navy); --sig-b: var(--yellow); flex-shrink: 0; }
  .address-card small { display: block; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .address-card strong { font-size: 0.95rem; font-weight: 400; color: var(--navy); }

  /* ---------- Leistungskarten ------------------------------------------- */
  .service-cards {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  }
  .service-card {
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: box-shadow 0.4s var(--ease), border-color 0.4s;
  }
  @media (prefers-reduced-motion: no-preference) {
    .service-card { animation: floaty 8s ease-in-out infinite; }
    .service-card:nth-child(2) { animation-delay: 1.4s; }
  }
  .service-card:hover { box-shadow: var(--shadow-float); border-color: transparent; }
  .service-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--grey-50); }
  .service-photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); }
  .service-card:hover .service-photo img { scale: 1.05; }
  .service-body { display: grid; align-content: start; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
  .service-body h3 { font-size: 1.625rem; }
  /* Leistungen untereinander, mit Trennlinie – wie im Bestand. Nebeneinander
     als Pillen ging die Aufzählung optisch unter. */
  .service-list { display: grid; }
  .service-list li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    align-items: center;
    gap: 0.85rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    color: var(--text);
    transition: translate 0.35s var(--ease-spring), color 0.3s var(--ease);
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  .service-list li:last-child { border-bottom: 0; }
  .service-list .mark-dot {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--grey-100);
    transition: color 0.35s var(--ease), scale 0.35s var(--ease-spring);
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  .service-list .mark-dot svg { width: 100%; height: 100%; overflow: visible; }
  .service-card:hover .service-list li { translate: 3px 0; color: var(--navy); }
  .service-card:hover .service-list .mark-dot { color: var(--yellow); scale: 1.12; }

  /* Die zwei Rauten im Aufzählungszeichen gehen kurz auseinander und wieder
     zusammen – dieselbe Bewegung wie beim Opener, nur klein und einmalig. */
  .service-list .mark-dot .raute { transform-box: view-box; transform-origin: 52% 92%; }
  /* Ausgelöst pro Zeile, nicht für die ganze Karte: nur das Zeichen der Zeile,
     über der der Zeiger steht, geht auf und wieder zu. */
  @media (prefers-reduced-motion: no-preference) {
    .service-list li:hover .raute-l { animation: biss-l 0.75s var(--ease); }
    .service-list li:hover .raute-r { animation: biss-r 0.75s var(--ease); }
  }
  /* Die überfahrene Zeile hebt sich zusätzlich etwas deutlicher hervor. */
  .service-list li:hover { translate: 6px 0; }
  .service-list li:hover .mark-dot { color: var(--yellow); scale: 1.2; }
  @keyframes biss-l {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    45% { translate: -22% 0; rotate: -12deg; }
  }
  @keyframes biss-r {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    45% { translate: 22% 0; rotate: 12deg; }
  }
  .more {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.97rem;
    color: var(--navy);
  }
  .service-card:hover .more { color: var(--yellow-text); }
  .more .arrow { transition: translate 0.3s var(--ease-spring); }
  .service-card:hover .more .arrow { translate: 4px 0; }


  /* ---------- Aufdeckeffekt auf Leistungskarten ---------------------------
     Beim Überfahren blendet ein zweites Motiv ein, die Schlagworte heben sich
     gestaffelt an und der Link füllt sich. Reine CSS-Übergänge, damit die
     Reduzierte-Bewegung-Regel sie automatisch abschaltet. */
  .photo-swap { position: relative; }
  .photo-swap img { transition: opacity 0.5s var(--ease), scale 0.7s var(--ease); }
  .photo-swap .swap-in {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .service-card:hover .photo-swap .swap-in,
  .treat-card:hover .photo-swap .swap-in { opacity: 1; }
  .service-card:hover .photo-swap .swap-base,
  .treat-card:hover .photo-swap .swap-base { opacity: 0; }
  .service-card:hover .photo-swap img,
  .treat-card:hover .photo-swap img { scale: 1.05; }


  /* Link füllt sich */
  .more {
    justify-self: start;   /* sonst dehnt das Grid die Pille auf volle Breite */
    padding: 0.5rem 1.1rem;
    margin-left: -1.1rem;
    border-radius: var(--r-full);
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
                margin-left 0.3s var(--ease);
  }
  .service-card:hover .more,
  .treat-card:hover .more {
    background: var(--yellow);
    color: var(--navy);
    margin-left: 0;
  }

  /* ---------- Über uns ---------------------------------------------------- */
  .about-media { position: relative; }
  .about-photo {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--grey-50);
  }
  .about-photo img { width: 100%; height: 100%; object-fit: cover; }
  .about-badge {
    position: absolute;
    right: -1rem;
    bottom: -1.5rem;
    display: grid;
    place-items: center;
    gap: 0.1rem;
    padding: 1.15rem 1.5rem;
    border-radius: var(--r-md);
    background: var(--yellow);
    color: var(--navy);
    box-shadow: var(--shadow-float);
    animation: floatySmall 7s ease-in-out infinite;
    text-align: center;
  }
  .about-badge strong {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.028em;
    line-height: 1;
  }
  .about-badge span { font-size: 0.76rem; }

  /* Merkmale als Liste mit Trennlinien, ohne Icons */
  .facts { margin-top: 2.25rem; }
  .facts > div {
    display: grid;
    grid-template-columns: 2.9rem 1fr;
    gap: 1.15rem;
    align-items: start;
    padding-block: 1.25rem;
    border-top: 1px solid var(--line);
  }
  .facts > div:last-child { border-bottom: 1px solid var(--line); }
  .facts :is(h3, h4) {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 0.3rem;
  }
  .facts p { font-size: 0.97rem; color: var(--muted); }

  /* ---------- Team -------------------------------------------------------- */
  /* Team als horizontale Rail: zeigt drei bis vier Personen, der Rest wird
     durchgescrollt. Ruhiger als acht Karten gleichzeitig. */


  .person { display: grid; align-content: start; gap: 1rem; }
  .person-photo {
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--grey-50);
  }
  .person-photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); }

  /* ---------- Teamband ----------------------------------------------------
     Eine Reihe, die dauerhaft langsam laeuft. Die Liste steht zweimal im
     Markup; bei -50 % ist genau ein Durchlauf erreicht, der Umlauf setzt
     also fugenlos an. Damit das aufgeht, tragen die Elemente ihren Abstand
     als margin-right - ein flex-gap zwischen den Elementen wuerde die
     Rechnung um einen halben Abstand verschieben und bei jedem Umlauf
     sichtbar springen. */
  /* Die Inhaberin steht fest, der Rest laeuft daneben vorbei. Bewusst
     zurueckhaltend: gleiche Kartengroesse, gleiche Gestaltung, kein Abzeichen.
     Der einzige Unterschied ist, dass sie nicht mitlaeuft. */
  .team-reihe {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
    align-items: start;
  }
  .team-fest { flex: none; }
  @media (max-width: 48rem) {
    /* Schmal untereinander: nebeneinander bliebe fuer das Band zu wenig. */
    .team-reihe { grid-template-columns: 1fr; }
    .team-fest { justify-self: center; }
  }

  /* ---------- Die drei Behandelnden -----------------------------------------
     Stehen fest ueber dem Laufband. Auf breiten Schirmen nebeneinander, auf
     dem Handy als kompakte Zeilen mit Bild links und Text rechts: drei grosse
     Hochformate untereinander waeren dort eine halbe Bildschirmhoehe je
     Person. */
  .team-aerzte {
    display: grid;
    gap: clamp(1rem, 2vw, 1.75rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  }
  .team-aerzte .tb-card { width: 100%; align-content: start; }

  @media (max-width: 48rem) {
    .team-aerzte { grid-template-columns: 1fr; gap: 1rem; }
    .team-aerzte .tb-card {
      grid-template-columns: 6.25rem minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      column-gap: 1rem;
      row-gap: 0.2rem;
      align-content: center;
    }
    .team-aerzte .tb-photo { grid-row: 1 / 4; align-self: start; }
    .team-aerzte .tb-name { align-self: end; }
    .team-aerzte .tb-role { align-self: start; }
  }

  .team-band {
    --tb-luecke: clamp(1.5rem, 2.8vw, 2.5rem);
    overflow: hidden;
  }
  /* Am linken Rand weich ausblenden, damit die Karten hinter der festen
     hervorkommen statt an einer Kante abzureissen. */
  .team-band {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(1.5rem, 4vw, 3.5rem));
    mask-image: linear-gradient(90deg, transparent 0, #000 clamp(1.5rem, 4vw, 3.5rem));
  }
  .team-band__track {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tb-item { flex: none; margin-right: var(--tb-luecke); }
  /* Zwischen den Personen eine Haarlinie statt eines Motivs. Sie gibt dem Band
     einen Takt und verlaengert zusammen mit der groesseren Luecke einen Satz auf
     ueber die Bandbreite hinaus – sonst stand auf breiten Schirmen dieselbe
     Person zweimal im Bild. */
  .tb-teiler {
    align-self: start;
    width: 1px;
    height: clamp(13.125rem, 18.75vw, 16.875rem);
    background: var(--line);
    pointer-events: none;
  }
  /* Auf schmalen Schirmen schmalere Karten: bei 168px passten nur zwei ins
     Bild und der dritte Name wurde mittig angeschnitten. Mit 9rem sind es
     zweieinhalb, der Anschnitt liest sich als Fortsetzung. */
  @media (max-width: 34rem) {
    .team-band { --tb-luecke: 0.75rem; }
    .team-band .tb-card { width: 9rem; }
    .tb-teiler { height: 11.25rem; }
    .team-band .tb-name { font-size: 0.92rem; }
    .team-band .tb-role { font-size: 0.75rem; }
    .team-band .tb-bio { font-size: 0.75rem; }
  }
  /* Der Lauf kommt aus dem Skript, nicht aus einer CSS-Animation. Eine
     Animation zusammen mit einem von Hand scrollbaren Container verschiebt
     sich gegeneinander: der Umlaufpunkt passt dann nicht mehr zur Ansicht und
     das Band springt sichtbar. Im Skript ist der Versatz modulo einer
     Listenbreite, damit ist der Umlauf immer fugenlos, und Wischen oder
     Mausrad zaehlen einfach auf denselben Versatz auf. */
  .team-band__track { will-change: transform; }
  .team-band[data-belt] { cursor: grab; }
  .team-band[data-belt]:active { cursor: grabbing; }
  /* Ohne Skript und bei reduzierter Bewegung eine normal scrollbare Reihe. */
  .team-band:not([data-belt]) { overflow-x: auto; }
  @media (prefers-reduced-motion: reduce) {
    .tb-item--kopie { display: none; }
  }

  .tb-card {
    display: grid;
    gap: 0.7rem;
    width: clamp(10.5rem, 15vw, 13.5rem);
    text-decoration: none;
  }
  .tb-photo {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--grey-50);
  }
  .tb-photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); }
  .tb-card:hover .tb-photo img { scale: 1.04; }
  .tb-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.25;
  }
  .tb-role { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
  .tb-bio { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }
  /* Auf Wunsch das Logo-Gelb. Hinweis fuer spaeter: auf dem hellen Kartengrund
     sind das 1,72:1, die Schwelle fuer kleine Schrift liegt bei 4,5:1. Etwas
     mehr Schriftstaerke gleicht das optisch aus, den Messwert nicht. */
  /* 13 px brauchen 4,5:1; das Logo-Gelb lag bei 1,72. --yellow-text ist der
     Token, den die Seite fuer gelbe Schrift bereits vorhaelt (5,04:1). */
  .tb-inhaberin { color: var(--yellow-text); font-weight: 600; }

  /* Kachel für die zwei Personen ohne verwendbares Porträt. Bewusst als
     ruhige Fläche mit Initialen: kein fremdes Foto, kein erzeugtes Gesicht. */
  .person-photo--leer {
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #F7F8FB 0%, var(--grey-100) 100%);
  }
  .person-photo--leer > * { grid-area: 1 / 1; }
  .person-initialen {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--navy);
    opacity: 0.72;
  }
  .person-signet {
    align-self: end;
    justify-self: end;
    margin: 0.85rem;
    width: 1.15rem; height: 1.25rem;
    color: var(--navy);
    --sig-b: var(--yellow);
  }
  .person-signet svg { width: 100%; height: 100%; }
  .person:hover .person-photo img { scale: 1.04; }
  .person h3 { font-size: 1.25rem; }
  .person .role { font-size: 0.9rem; color: var(--yellow-text); margin-top: 0.15rem; }
  .person .bio { font-size: 0.93rem; color: var(--muted); margin-top: 0.5rem; }


  /* ---------- Einblicke (Bildraster) -------------------------------------- */
  /* Mosaik für sieben Bilder: 4 Spalten x 3 Reihen gehen exakt auf –
     ein großes Motiv 2x2, vier kleine, zwei breite unten. Kein Rest. */
  .gallery {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(7.5rem, 13vw, 12.5rem);
  }
  .gallery figure {
    margin: 0;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--grey-50);
  }
  .gallery figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); }

  /* Jede Kachel traegt zwei Motive und blendet zwischen ihnen um. Die Kacheln
     wechseln nacheinander, nicht gleichzeitig, sonst zuckt die ganze Flaeche
     auf einmal. Ohne Bewegungswunsch bleibt jeweils das erste Motiv stehen. */
  .gallery figure img { position: absolute; inset: 0; }
  .gallery figure img:not([data-active]) { opacity: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .gallery figure img { transition: opacity 1.1s var(--ease), scale 0.6s var(--ease); }
  }
  @media (prefers-reduced-motion: reduce) {
    .gallery figure img:not([data-active]) { display: none; }
  }
  .gallery figure:hover img { scale: 1.05; }

  @media (max-width: 48rem) {
    /* Auf zwei Spalten gehen sechs gleich große Kacheln glatt auf. */
    .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(6rem, 24vw, 9.5rem); }
    .gallery figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
    /* Nach dem großen Auftakt bleiben fünf Kacheln, die letzte stand allein in
       ihrer Reihe und ließ die Hälfte der Breite leer. Sie schließt das Raster
       jetzt in voller Breite ab – oben und unten je ein großes Motiv. */
    .gallery figure:last-child { grid-column: span 2; grid-row: span 2; }
  }



  .note {
    margin-top: 1.5rem;
    padding: 1rem 1.35rem;
    border-radius: var(--r-md);
    background: var(--yellow-soft);
    color: var(--navy);
    font-size: 0.88rem;
  }


  /* ---------- Signet auf jedem Foto --------------------------------------
     Als ::after auf den Bildcontainern statt als Extra-Element im Markup:
     gilt damit automatisch auf allen Seiten und für jedes neue Bild.
     Echtes SVG, also gestochen scharf und exakt die Markengeometrie. */
  .hero-photo,
  .service-photo,
  .treat-photo,
  .svc-hero-photo,
  .split-media .media,
  .about-photo,
  .contact-photo,
  .person-photo,
  .bio-photo,
  .tb-photo,
  .gallery figure {
    position: relative;
  }
  .hero-photo::after,
  .service-photo::after,
  .treat-photo::after,
  .svc-hero-photo::after,
  .split-media .media::after,
  .about-photo::after,
  .contact-photo::after,
  .person-photo::after,
  .bio-photo::after,
  .tb-photo::after,
  .gallery figure::after {
    content: '';
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    z-index: 2;
    width: 2.1rem;
    height: 2.31rem;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20104%20112%22%3E%3Cg%20transform%3D%22translate%284%2C0%29%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.6%22%3E%3Cpath%20d%3D%22M40.2%2015%20L55.8%2033%20Q62%2040%2055.8%2054.1%20L40.2%2089.9%20Q34%20104%2027.8%2089.9%20L12.2%2054.1%20Q6%2040%2012.2%2033%20L27.8%2015%20Q34%208%2040.2%2015%20Z%22%20transform%3D%22rotate%28-11%2034%2046%29%22%2F%3E%3Cpath%20d%3D%22M40.2%2015%20L55.8%2033%20Q62%2040%2055.8%2054.1%20L40.2%2089.9%20Q34%20104%2027.8%2089.9%20L12.2%2054.1%20Q6%2040%2012.2%2033%20L27.8%2015%20Q34%208%2040.2%2015%20Z%22%20transform%3D%22translate%2828%2C0%29%20rotate%2811%2034%2046%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
    opacity: 0.78;
    filter: drop-shadow(0 1px 3px rgba(20, 41, 92, 0.5));
    pointer-events: none;
  }
  /* Auf kleinen Bildern etwas kleiner, sonst erschlägt es das Motiv */
  .person-photo::after,
  .tb-photo::after { right: 0.7rem; bottom: 0.7rem; width: 1.6rem; height: 1.76rem; }

  /* Teamporträts stehen auf hellem Grund, dort ist das weiße Signet nicht zu
     sehen. Deshalb hier die Raute in Navy und Gelb, ohne Schattenwurf. */
  .person-photo::after,
  .tb-photo::after,
  .bio-photo::after {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20104%20112%22%3E%3Cg%20transform%3D%22translate%284%2C0%29%22%20fill%3D%22none%22%20stroke-width%3D%223.6%22%3E%3Cpath%20d%3D%22M40.2%2015%20L55.8%2033%20Q62%2040%2055.8%2054.1%20L40.2%2089.9%20Q34%20104%2027.8%2089.9%20L12.2%2054.1%20Q6%2040%2012.2%2033%20L27.8%2015%20Q34%208%2040.2%2015%20Z%22%20transform%3D%22rotate%28-11%2034%2046%29%22%20stroke%3D%22%2314295C%22%2F%3E%3Cpath%20d%3D%22M40.2%2015%20L55.8%2033%20Q62%2040%2055.8%2054.1%20L40.2%2089.9%20Q34%20104%2027.8%2089.9%20L12.2%2054.1%20Q6%2040%2012.2%2033%20L27.8%2015%20Q34%208%2040.2%2015%20Z%22%20transform%3D%22translate%2828%2C0%29%20rotate%2811%2034%2046%29%22%20stroke%3D%22%23F2B233%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
    opacity: 0.9;
    filter: none;
  }
  /* Startbild und Leistungs-Hero haben unten rechts eine grosse Rundung
     (bis 5rem); mit 0.9rem Abstand klebte das Signet an der Kurve. */
  .hero-photo::after,
  .svc-hero-photo::after { right: 2rem; bottom: 2rem; }
  /* Seit 26.09.2026 tragen alle Personen ein Polo mit eingesticktem Logo.
     Ein zweites Signet in der Bildecke waere doppelt, deshalb auf allen
     Fotos mit Menschen aus. Auf den Produkt- und Steinbildern bleibt es. */
  .hero-photo::after,
  .about-photo::after,
  .contact-photo::after,
  .person-photo::after,
  .bio-photo::after,
  .tb-photo::after { content: none; }
  /* Unten rechts sitzt hier das 10+-Abzeichen – Signet weicht nach links aus. */
  .about-photo::after { right: auto; left: 0.9rem; }  /* Das Zeichen bringt keine eigene Einblendung mehr mit: es wird von der
     Raute uebergeben, die aus dem Hero herunterlaeuft. Die frueheren Regeln
     setzten die Rauten auf Deckkraft 0 und machten sie erst mit data-shown
     sichtbar. Da das Zeichen dafuer keine reveal-Klasse mehr traegt, kam
     data-shown nie, und die Rauten blieben unsichtbar. */

  /* ---------- Bewertungen -------------------------------------------------- */
  .reviews {
    display: grid;
    gap: clamp(1.25rem, 3vw, 1.75rem);
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  }
  .review {
    display: grid;
    align-content: start;
    gap: 1.1rem;
    padding: clamp(1.75rem, 3vw, 2.25rem);
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--line);
  }
  .review .stars { color: var(--yellow); letter-spacing: 0.1em; }
  .review blockquote { font-size: 1rem; color: var(--text); }
  .review figcaption { display: flex; align-items: center; gap: 0.85rem; }
  .avatar {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    font-size: 0.85rem;
  }
  .review figcaption strong { display: block; font-weight: 400; color: var(--navy); }
  /* Nur die Zeile unter dem Namen, nicht das Kuerzel im Kreis: das ist selbst
     ein span und wurde von dieser Regel auf Grau gezogen. Grau auf Navy kommt
     auf 2,5:1, das ist unlesbar. */
  .review figcaption > span > span { font-size: 0.83rem; color: var(--muted); }
  .review figcaption .avatar { color: var(--white); }

  /* ---------- CTA-Block ---------------------------------------------------- */
  /* Handlungsfeld statt Textkasten: links die Ansprache, rechts die zwei
     konkreten Wege. Der Baumsaum sitzt als Horizont auf der Unterkante statt
     als einzelnes Zeichen ueber der Ueberschrift zu schweben. */
  .cta {
    position: relative;
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: 1fr;
    align-items: center;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
    border-radius: var(--r-lg);
    background: var(--navy);
    overflow: hidden;
  }
  @media (min-width: 52rem) {
    .cta { grid-template-columns: 1.15fr 1fr; }
  }
  .cta h2, .cta p { color: var(--white); }
  .cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; }
  .cta p { margin-top: 0.85rem; color: rgba(255, 255, 255, 0.82); max-width: 34rem; }
  .cta__text, .cta__wege { position: relative; z-index: 1; }
  .cta__wege { display: grid; gap: 0.85rem; }
  .cta-weg {
    display: grid;
    gap: 0.15rem;
    padding: 1rem 1.35rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--white);
    text-decoration: none;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
  }
  .cta-weg span { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; }
  /* 0,7 ergab auf Navy 4,31:1, kleine Schrift braucht 4,5:1. */
  .cta-weg small { font-size: 0.86rem; color: rgba(255, 255, 255, 0.78); }
  .cta-weg:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
  .cta-weg--haupt {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--navy);
  }
  /* Auf dem gelben Feld waren 0,72 nur 4,31:1; kleine Schrift braucht 4,5:1. */
  .cta-weg--haupt small { color: rgba(20, 41, 92, 0.88); }
  .cta-weg--haupt:hover { background: #E5A526; border-color: #E5A526; }
  /* Kein Baumsaum im CTA: direkt darunter folgt das Waldband, zwei Waldstreifen
     uebereinander waren zu viel. Stattdessen das Zeichen als Wasserzeichen,
     angeschnitten in der unteren Ecke. */
  .cta__marke {
    position: absolute;
    right: -1.5rem;
    bottom: -2.5rem;
    z-index: 0;
    width: clamp(9rem, 18vw, 15rem);
    color: rgba(255, 255, 255, 0.07);
    rotate: -8deg;
    pointer-events: none;
  }
  .cta__marke svg { width: 100%; height: auto; display: block; fill: none; stroke: currentColor; stroke-width: 3.2; }
  @media (max-width: 47.99rem) {
    .cta__marke { right: -2.5rem; bottom: -3rem; width: 9rem; }
  }

  /* ---------- Kontakt ------------------------------------------------------ */
  .contact-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    align-items: start;
  }
  .contact-list { display: grid; gap: 1.35rem; margin-top: 1.75rem; }
  .contact-list > div {
    display: grid;
    grid-template-columns: 2.9rem 1fr;
    gap: 1.15rem;
    align-items: start;
  }
  .contact-list dt, .contact-list :is(h3, h4) { color: var(--navy); margin-bottom: 0.15rem; }
  .contact-list a, .contact-list p { color: var(--text); }
  .contact-list a {
    display: inline-block;
    padding-block: 0.55rem;   /* 23px Zeile -> 44px Trefferfläche */
    margin-block: -0.55rem;
  }
  .contact-list a:hover { color: var(--yellow-text); }

  .hours-card {
    padding: clamp(1.75rem, 3vw, 2.25rem);
    border-radius: var(--r-md);
    background: var(--grey-50);
  }
  .hours { display: grid; margin-top: 1.25rem; }
  .hours div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--grey-100);
    font-size: 0.95rem;
  }
  .hours div:last-child { border-bottom: 0; }
  .hours span:first-child { color: var(--navy); }
  /* Auf schmalen Schirmen blieben der Zeitangabe nur 167px, sie brach
     zweizeilig um und liess "Uhr" allein stehen. Untereinander hat sie die
     volle Kartenbreite. */
  @media (max-width: 34rem) {
    .hours div {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.15rem;
      padding-block: 0.6rem;
    }
    .hours span:first-child { font-size: 0.86rem; letter-spacing: 0.04em; }
  }
  .hours [data-today] { font-weight: 500; }
  .hours [data-today] span:first-child::after {
    content: 'heute';
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    border-radius: var(--r-full);
    background: var(--yellow);
    color: var(--navy);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .contact-photo {
    margin-top: 1.5rem;
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--grey-50);
  }
  .contact-photo img { width: 100%; height: 100%; object-fit: cover; }

  .map-embed {
    aspect-ratio: 16 / 10;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--grey-50);
  }
  .map-embed iframe { width: 100%; height: 100%; border: 0; }
  .map-consent {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    height: 100%;
    padding: 2rem;
    text-align: center;
  }
  .map-consent p { font-size: 0.9rem; color: var(--muted); max-width: 26rem; }


  /* ---------- Leistungsseiten ---------------------------------------------
     Struktur wie im Bestand: Hero mit Bild und Abzeichen, Zeitstrahl,
     Behandlungskarten mit Bild, Retention mit Bild. */
  .svc-hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem); }
  .svc-hero-grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: center;
  }
  @media (min-width: 62rem) {
    .svc-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
  }
  .svc-hero h1 { margin-block: 1rem 1.25rem; }
  .svc-hero .lede { max-width: 34rem; }
  .svc-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
  .svc-hero-actions .quiet {
    display: inline-block;
    padding-block: 0.6rem;   /* 26px Zeile -> 44px Trefferfläche */
    font-size: 0.97rem;
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
  .svc-hero-actions .quiet:hover { color: var(--yellow-text); }

  .svc-hero-media { position: relative; }
  .svc-hero-photo {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3.4;
    background: var(--grey-50);
  }
  .svc-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
  /* Das Zeichen in der Plakette nimmt die Farbe des Kastens an - einfarbig,
     wie alle anderen Marken der Seite. */
  .svc-badge .icon-tile { color: var(--navy); }
  .svc-badge {
    position: absolute;
    left: -0.75rem;
    bottom: -1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.35rem;
    border-radius: var(--r-full);
    background: var(--white);
    box-shadow: var(--shadow-float);
    color: var(--navy);
    animation: floatySmall 7s ease-in-out infinite;
  }

  /* Zeitstrahl */
  /* Ohne Skript und bei reduzierter Bewegung steht die Linie sofort ganz da;
     das Skript zaehlt den Wert beim Scrollen von 0 hoch. */
  .timeline { position: relative; max-width: 56rem; margin-inline: auto; --tl-lauf: 1; }
  .timeline::before,
  .timeline::after {
    content: '';
    position: absolute;
    left: 1.4rem;
    top: 0.5rem;
    width: 3px;
    border-radius: 2px;
    /* Ohne Angabe malt die Linie als letztes Kind ueber die Ziffern. */
    z-index: 0;
  }
  /* blasse Spur ueber die volle Hoehe */
  .timeline::before { bottom: 0.5rem; background: var(--grey-100); }
  /* der gefuellte Teil waechst mit dem Fortschritt */
  .timeline::after {
    height: calc(var(--tl-lauf) * (100% - 1rem));
    background: linear-gradient(to bottom, var(--yellow), var(--navy));
  }
  @media (min-width: 52rem) {
    .timeline::before,
    .timeline::after { left: 50%; translate: -50% 0; }
  }
  .tl-item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    padding-left: 4.25rem;
    margin-bottom: 2.5rem;
  }
  .tl-item:last-child { margin-bottom: 0; }
  .tl-dot {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0.35rem;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    box-shadow: 0 0 0 6px var(--white);
  }
  /* Mit Skript beginnen die Stationen blass und schalten sich an, sobald die
     Linie sie erreicht. Ohne Skript bleibt es beim Zustand oben. */
  .js .timeline[data-lauf] .tl-dot {
    background: var(--grey-100);
    color: var(--muted);
    scale: 0.86;
    transition: background 0.45s var(--ease), color 0.45s var(--ease),
                scale 0.45s var(--ease), box-shadow 0.45s var(--ease);
  }
  /* Auch die Karte faerbt sich mit, sobald ihre Station erreicht ist: der
     Rahmen zieht an, ein Hauch Flaeche kommt dazu. Bewusst zurueckhaltend,
     die eine dunkle Karte bleibt der Blickfang. */
  .js .timeline[data-lauf] .tl-card {
    transition: border-color 0.55s var(--ease), background 0.55s var(--ease),
                box-shadow 0.55s var(--ease);
  }
  .js .timeline[data-lauf] .tl-item[data-erreicht] .tl-card {
    border-color: rgba(20, 41, 92, 0.22);
    background: rgba(20, 41, 92, 0.025);
    box-shadow: 0 10px 26px rgba(20, 41, 92, 0.07);
  }
  /* Mit Skript wandert die dunkle Karte mit. Die feste Hervorhebung aus dem
     Markup wird zurueckgenommen, sonst waeren zwei Karten gleichzeitig dunkel;
     ohne Skript bleibt sie als sinnvoller Ausgangszustand bestehen. */
  .js .timeline[data-lauf] .tl-card.is-highlight {
    border-color: var(--line);
    background: var(--white);
  }
  .js .timeline[data-lauf] .tl-card.is-highlight h3 { color: var(--navy); }
  .js .timeline[data-lauf] .tl-card.is-highlight p { color: var(--muted); }
  .js .timeline[data-lauf] .tl-card.is-highlight .tl-age { color: var(--yellow-text); }

  .js .timeline[data-lauf] .tl-item[data-aktiv] .tl-card {
    border-color: transparent;
    background: var(--navy);
    box-shadow: 0 14px 34px rgba(20, 41, 92, 0.18);
  }
  .js .timeline[data-lauf] .tl-item[data-aktiv] .tl-card h3 { color: var(--white); }
  .js .timeline[data-lauf] .tl-item[data-aktiv] .tl-card p { color: rgba(255, 255, 255, 0.85); }
  .js .timeline[data-lauf] .tl-item[data-aktiv] .tl-card .tl-age { color: var(--yellow); }
  .js .timeline[data-lauf] .tl-item[data-erreicht] .tl-dot {
    background: var(--yellow);
    color: var(--navy);
    scale: 1;
    box-shadow: 0 0 0 6px var(--white), 0 6px 18px rgba(242, 178, 51, 0.4);
  }
  .tl-card {
    padding: clamp(1.35rem, 3vw, 1.85rem);
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--line);
  }
  .tl-card.is-highlight { border-color: transparent; background: var(--navy); }
  .tl-card.is-highlight :is(h3, p) { color: var(--white); }
  .tl-card.is-highlight .tl-age { color: var(--yellow); }
  .tl-age { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow-text); }
  .tl-card h3 { margin-block: 0.35rem 0.5rem; font-size: 1.375rem; }
  .tl-card p { font-size: 0.97rem; color: var(--muted); }
  .tl-card.is-highlight p { color: rgba(255,255,255,0.85); }

  @media (min-width: 52rem) {
    .tl-item { padding-left: 0; grid-template-columns: 1fr 1fr; gap: 5rem; }
    .tl-item .tl-card { grid-column: 1; }
    .tl-item:nth-child(even) .tl-card { grid-column: 2; }
    .tl-dot { left: 50%; translate: -50% 0; }
    /* Jede Karte kommt von ihrer eigenen Seite herein. Der Weg ist kurz
       gehalten, sonst wirkt die Achse wie ein Karussell. */
    .js .tl-item.reveal:not([data-shown]) .tl-card { translate: -3.5rem 0; opacity: 0; }
    .js .tl-item.reveal:nth-child(even):not([data-shown]) .tl-card { translate: 3.5rem 0; }
    .js .tl-item .tl-card { transition: translate 0.75s var(--ease), opacity 0.6s var(--ease); }
  }
  @media (prefers-reduced-motion: reduce) {
    .js .tl-item .tl-card { translate: none !important; transition: none; }
  }

  /* Behandlungskarten mit Bild */
  .treat-cards {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  }
  .treat-card {
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: box-shadow 0.4s var(--ease), border-color 0.4s;
  }
  .treat-card:hover { box-shadow: var(--shadow-float); border-color: transparent; }
  .treat-photo { aspect-ratio: 16 / 11; overflow: hidden; background: var(--grey-50); }
  .treat-photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s var(--ease); }
  .treat-card:hover .treat-photo img { scale: 1.05; }
  .treat-body { display: grid; align-content: start; gap: 0.85rem; padding: clamp(1.5rem, 3vw, 2rem); }
  .treat-body .card-kicker { margin-bottom: -0.35rem; }
  .treat-body p { color: var(--muted); font-size: 0.97rem; }
  .treat-body ul { display: grid; gap: 0.5rem; }
  .treat-body li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.95rem;
    color: var(--muted);
  }
  .treat-body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.45rem; height: 0.45rem;
    border-radius: 50%;
    background: var(--yellow);
  }

  /* Retention: Bild plus nummerierte Schritte */
  .split-media {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }
  @media (min-width: 56rem) {
    .split-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    /* Gespiegelt: Text links, Bild rechts. Die Reihenfolge im Markup bleibt
       gleich, damit auf schmalen Geraeten ueberall zuerst das Bild steht. */
    .split-media--gedreht { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .split-media--gedreht .media { order: 2; }
  }
  .split-media .media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--grey-50); }
  .split-media .media img { width: 100%; height: 100%; object-fit: cover; }
  .num-steps { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
  .num-step { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1.15rem; align-items: start; }
  .num-step .n {
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 500;
  }
  .num-step p { font-size: 0.97rem; color: var(--muted); margin-top: 0.2rem; }

  /* ---------- Unterseiten --------------------------------------------------- */
  .page-hero { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem); }
  .page-hero h1 { margin-block: 1rem 1.15rem; }
  .page-hero p { font-size: 1.125rem; color: var(--muted); max-width: 46rem; }

  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
    padding: 0;
    font-size: 0.85rem;
    color: var(--muted);
  }
  /* Die Krume trennt mit einem Schraegstrich vor jedem Eintrag ausser dem
     ersten. Der Eintrag ist eine Flex-Zeile, damit der Strich mittig zum Text
     steht: die Links tragen wegen der Tippflaeche mehr Hoehe als das letzte,
     nicht verlinkte Element, und ohne Ausrichtung wandern die Striche. */
  .breadcrumb li { display: flex; align-items: center; }
  .breadcrumb li + li::before { content: '/'; margin-right: 0.45rem; color: var(--grey-100); }
  /* Groessere Tippflaeche auf Geraeten, die getippt statt geklickt werden.
     Das letzte Element ist kein Link und bekommt dieselbe Hoehe, sonst
     springt die Zeile. */
  @media (max-width: 64rem), (pointer: coarse) {
    .breadcrumb a,
    .breadcrumb li > span,
    .breadcrumb li[aria-current] { display: inline-block; padding-block: 0.5rem; }
  }

  .cards {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  }

  /* Mitarbeiterblock der Teamseite. Fünf Karten ergaben im Raster mit 17rem
     Mindestbreite vier Spalten und eine einzelne Karte links darunter.
     Deshalb hier eine umbrechende Reihe: auf breiten Schirmen passen alle
     fünf nebeneinander, danach bricht sie um, und eine unvollständige Reihe
     steht mittig statt am linken Rand. */
  .cards-team {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cards-team > .card {
    flex: 1 1 12rem;
    max-width: 16rem;
  }
  /* ---------- Karten des Praxisteams --------------------------------------
     Vorher eine flache Reihe aus Kasten, Foto, Text. Jetzt sitzt das Portraet
     randlos oben in der Karte, die Rolle steht als Versalzeile darunter, und
     beim Ueberfahren hebt sich die Karte mit einem gelben Strich am Bildfuss. */
  .card.person-card {
    padding: 0;
    overflow: hidden;
    gap: 0;
  }
  .person-card .person-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0;
    background: var(--grey-50);
  }
  .person-card .person-photo::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 3px;
    background: var(--yellow);
    scale: 0 1;
    transform-origin: left center;
  }
  /* .card :is(h2, h3) steht weiter unten und gewinnt bei gleicher
     Spezifitaet ueber die Reihenfolge. Deshalb hier zweifach geklasst. */
  .card.person-card h3 { margin: 1.15rem 1.25rem 0; font-size: 1.05rem; }
  .person-card .card-kicker {
    margin: 0.4rem 1.25rem 0;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yellow-text);
  }
  .person-card > p:last-child { margin: 0.7rem 1.25rem 1.4rem; }
  /* Auf dem Handy griff die Obergrenze von 16rem: die Karten standen einzeln
     und 256 px breit in einer 350 px breiten Spalte, links und rechts blieben
     je 47 px leer und die Liste war 2700 px hoch. Zu zweit nebeneinander ist
     sie ein Drittel so lang und der Rand stimmt wieder. */
  @media (max-width: 34rem) {
    .cards-team { justify-content: flex-start; }
    .cards-team > .card { flex: 0 1 calc(50% - 0.5rem); max-width: none; }
    .card.person-card h3 { margin: 0.85rem 0.85rem 0; font-size: 0.95rem; }
    .person-card .card-kicker { margin: 0.3rem 0.85rem 0; font-size: 0.65rem; letter-spacing: 0.1em; }
    .person-card > p:last-child { margin: 0.5rem 0.85rem 1.1rem; font-size: 0.85rem; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .person-card { transition: translate 0.4s var(--ease), box-shadow 0.4s var(--ease); }
    .person-card .person-photo img { transition: scale 0.7s var(--ease); }
    .person-card .person-photo::before { transition: scale 0.5s var(--ease); }
    /* Das Signet in der Bildecke wird kraeftiger und waechst, wie bei den
       Biografien. Es fehlte hier, deshalb passierte damit beim Ueberfahren
       nichts. */
    .person-card .person-photo::after {
      transition: opacity 0.4s var(--ease), scale 0.4s var(--ease-spring);
    }
    .person-card:hover { translate: 0 -4px; }
    .person-card:hover .person-photo img { scale: 1.05; }
    .person-card:hover .person-photo::before { scale: 1 1; }
    .person-card:hover .person-photo::after { opacity: 1; scale: 1.18; }
  }
  .card {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--line);
    transition: box-shadow 0.35s var(--ease), border-color 0.35s;
  }
  .card:hover { box-shadow: var(--shadow-float); border-color: transparent; }
  .band .card { background: var(--white); }
  .card :is(h2, h3) { font-size: var(--h3); }
  .card p { color: var(--muted); font-size: 0.97rem; }
  .card ul { display: grid; gap: 0.5rem; margin-top: 0.25rem; }
  /* Kein Grid auf dem li: sonst wird jedes Wort nach einem <strong> zu einer
     eigenen Grid-Zelle und die Zeile bricht wortweise um. */
  .card li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.95rem;
    color: var(--muted);
  }
  .card li a {
    display: inline-block;
    padding-block: 0.5rem;   /* 26px Zeile -> 44px Trefferfläche */
    margin-block: -0.35rem;
  }
  .card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.45rem; height: 0.45rem;
    border-radius: 50%;
    background: var(--yellow);
  }
  .card-kicker {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yellow-text);
  }

  /* Habits-Karten: Kachel hinter dem Icon nach Vorgabe. Die Strichfarbe
     kommt über color am Container, das Icon selbst nutzt currentColor. */
  /* Ziffer statt Piktogramm. Sie ordnet, ohne etwas darstellen zu muessen -
     fuer Daumenlutschen, Mundatmung und Schluckmuster gibt es kein Zeichen,
     das ohne Bildunterschrift funktioniert. */
  .habit-nr {
    margin-bottom: 0.9rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    color: var(--yellow-text);
  }

  /* Habits-Karten: der Pfeil traegt die Farbe, der Text bleibt Lesetext.
     Bewusst nur hier, die Behandlungskarten behalten ihren Kicker. */
  .cards-habits .card-kicker { color: var(--text); }
  .cards-habits .kicker-pfeil { color: var(--yellow); }
  /* Auf dem Handy laeuft der gesperrte Versaltext ueber zwei bis drei Zeilen.
     Als reiner Fliesstext beginnen die Folgezeilen unter dem Pfeil; mit Flex
     und einem nicht schrumpfenden Pfeil stehen sie sauber unter dem Text. */
  @media (max-width: 34rem) {
    .cards-habits .card-kicker { display: flex; gap: 0.5rem; align-items: flex-start; letter-spacing: 0.1em; }
    .cards-habits .kicker-pfeil { flex: none; }
  }

  /* Schrittfolge: Ziffernkreise sitzen auf der Kartenkante und sind durch eine
     gestrichelte Linie verbunden – liest sich als Weg, nicht als drei Kacheln. */
  /* ---------- Bewegtes Signet im Kicker ------------------------------------
     Wie die Icons der Erwachsenenseite: die beiden Rauten fahren auseinander
     und wieder zusammen. Laeuft einmal beim Hereinscrollen und danach bei
     jedem Ueberfahren der Zeile. */
  .mark-bewegt svg { width: 100%; height: 100%; overflow: visible; }
  .mark-bewegt .raute { transform-box: view-box; transform-origin: 52% 92%; }
  @media (prefers-reduced-motion: no-preference) {
    .section-head[data-shown] .mark-bewegt .raute-l,
    .kicker:hover .mark-bewegt .raute-l { animation: kicker-l 0.85s var(--ease) both; }
    .section-head[data-shown] .mark-bewegt .raute-r,
    .kicker:hover .mark-bewegt .raute-r { animation: kicker-r 0.85s var(--ease) 0.08s both; }
  }
  @keyframes kicker-l { 0%, 100% { translate: 0 0; rotate: 0deg } 45% { translate: -20% 0; rotate: -13deg } }
  @keyframes kicker-r { 0%, 100% { translate: 0 0; rotate: 0deg } 45% { translate: 20% 0; rotate: 13deg } }

  /* ---------- Icon-Karten (Erwachsene) -------------------------------------
     Fuer komplexe Faelle und die Retention. Vorher standen dort Bild links und
     Text rechts, was stumpf wirkte. Jetzt fuehrt je Punkt ein eigenes Icon,
     das beim Ueberfahren seine Bewegung zeigt. */
  /* Leitbild eines Schritts: ein breiter, flacher Streifen ueber dem Raster.
     Bewusst flach, damit er den Abschnitt anfuehrt und nicht dominiert. */
  .schritt-bild {
    margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--grey-50);
  }
  .schritt-bild img {
    display: block;
    width: 100%;
    /* Ohne height:auto bleibt die feste Hoehe aus dem height-Attribut stehen –
       bei zwei festen Massen ignoriert der Browser aspect-ratio. */
    height: auto;
    aspect-ratio: 21 / 8;
    object-fit: cover;
  }
  @media (max-width: 34rem) {
    .schritt-bild img { aspect-ratio: 16 / 9; }
  }

  /* Schrittmarke. Als schmale Kickerzeile ging die Nummer beim Scrollen unter;
     als gefuellte Pille mit grosser Ziffer ist im Vorbeiscrollen sofort klar,
     an welcher Stelle der Dreierfolge man steht. */
  /* Selektor mit .section-head davor: die Marke ist ein <p> im Abschnittskopf,
     und .section-head p setzt dort Grau. Ohne diese Stufe erbte das Wort
     'Schritt' Grau auf Navy und lag bei 2,5:1. */
  .section-head .schritt-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 auto 1rem;
    padding: 0.4rem 1.15rem 0.4rem 1rem;
    border-radius: var(--r-full);
    background: var(--navy);
    color: var(--white);
    line-height: 1;
  }
  .section-head .schritt-marke span {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
  }
  .section-head .schritt-marke strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--yellow);
  }


  /* Fragen und Antworten in zwei Spalten. Bewusst offen, ohne Aufklappen:
     Eltern ueberfliegen die Fragen und bleiben an der haengen, die sie
     umtreibt – hinter einem Akkordeon wuerde genau das nicht passieren. */
  .fragen {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
  }
  .fragen-titel {
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .frage { padding-block: 1.35rem; border-top: 1px solid var(--line); }
  .fragen-titel--folge { margin-top: 2rem; }
  .frage h3 { font-size: 1.02rem; line-height: 1.3; margin-bottom: 0.45rem; }
  .frage p { color: var(--muted); font-size: 0.97rem; }
  /* Leuchtpunkt im Bild. Er zeigt beim Ueberfahren einer Karte, welches Objekt
     im Foto gemeint ist. Ohne Hover ist er unsichtbar, damit das Bild ruhig
     bleibt. Bei reduzierter Bewegung pulst er nicht, bleibt aber sichtbar. */
  .bild-punkte { position: relative; }
  .bild-punkt {
    position: absolute;
    translate: -50% -50%;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    /* Navy-Kern mit gelbem Ring: beide Hausfarben, und der dunkle Kern setzt
       sich auf dem hellen Stein besser ab als reines Gelb. */
    background: var(--navy);
    border: 4px solid var(--yellow);
    box-shadow: 0 0 0 0 rgba(242, 178, 51, 0.8), 0 2px 10px rgba(20, 41, 92, 0.35);
    /* Dauerhaft sichtbar, im Ruhezustand aber zurueckgenommen: der Punkt lockt,
       ohne das Bild zu stoeren. Anfassbar, damit er selbst die zugehoerige
       Karte hervorheben kann. */
    opacity: 0.8;
    scale: 0.86;
    cursor: pointer;
    transition: opacity 0.35s var(--ease), scale 0.35s var(--ease);
    pointer-events: auto;
  }
  .wrap:has(.icon-karte:nth-of-type(1):hover) .bild-punkt--1,
  .wrap:has(.icon-karte:nth-of-type(2):hover) .bild-punkt--2,
  .bild-punkt:hover {
    opacity: 1;
    scale: 1;
    animation: bild-puls 1.5s ease-out infinite;
  }
  /* Umgekehrte Richtung: der Punkt hebt seine Karte hervor, als laege die Maus
     auf ihr. Dieselben Werte wie .icon-karte:hover, damit es sich gleich
     anfuehlt. */
  .wrap:has(.bild-punkt--1:hover) .icon-karte:nth-of-type(1),
  .wrap:has(.bild-punkt--2:hover) .icon-karte:nth-of-type(2) {
    translate: 0 -3px;
    box-shadow: var(--shadow-float);
    border-color: transparent;
  }
  /* Kraeftigeres Schimmern: zwei nachlaufende Ringe und ein leichtes Atmen. */
  @keyframes bild-puls {
    0% {
      scale: 1;
      box-shadow: 0 0 0 0 rgba(242, 178, 51, 0.85), 0 0 0 0 rgba(242, 178, 51, 0.5),
                  0 2px 10px rgba(20, 41, 92, 0.35);
    }
    55% {
      scale: 1.1;
      box-shadow: 0 0 0 1.35rem rgba(242, 178, 51, 0), 0 0 0 0.75rem rgba(242, 178, 51, 0.28),
                  0 2px 10px rgba(20, 41, 92, 0.35);
    }
    100% {
      scale: 1;
      box-shadow: 0 0 0 2.4rem rgba(242, 178, 51, 0), 0 0 0 2rem rgba(242, 178, 51, 0),
                  0 2px 10px rgba(20, 41, 92, 0.35);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .bild-punkt { animation: none !important; }
  }

  /* Fuellt den Rest der kuerzeren Spalte. */
  .fragen-spalte { display: flex; flex-direction: column; }
  .fragen-bild {
    margin-top: auto;
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .fragen-bild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-md);
  }

  /* Vertiefung: ein Nebenaspekt, der zum Abschnitt gehoert, aber nicht auf
     gleicher Ebene steht. Gelb hinterlegt und gerahmt hebt ihn heraus, ohne
     einen eigenen Abschnitt zu oeffnen. */
  .vertiefung {
    margin-top: clamp(3rem, 5vw, 4.5rem);
    padding: clamp(1.75rem, 3.5vw, 3rem);
    border-radius: var(--r-lg);
    background: rgba(242, 178, 51, 0.09);
    border: 1px solid rgba(242, 178, 51, 0.45);
  }
  .vertiefung .teil-head { margin-top: 0; }
  .vertiefung .teil-head .kicker {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--yellow-text);
  }
  /* Auf dem gelben Grund braucht die Karte Weiss, sonst verschwimmt sie. */
  .vertiefung .icon-karte { background: var(--white); border-color: transparent; }

  /* Zwischenueberschrift innerhalb eines Abschnitts. Setzt den Nebenaspekt
     sichtbar unter die Hauptaussage, ohne einen eigenen Abschnitt zu oeffnen. */
  .teil-head {
    max-width: 42rem;
    margin: clamp(3rem, 5vw, 4.5rem) auto clamp(1.5rem, 2.5vw, 2rem);
    text-align: center;
  }
  .teil-head h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; }
  .teil-head p { margin-top: 0.6rem; color: var(--muted); }

  .icon-karten {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
  }
  @media (min-width: 46rem) {
    .icon-karten { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
  }
  .icon-karte {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--line);
  }
  .band .icon-karte { background: var(--white); }
  .icon-karte__bild {
    display: block;
    width: 100%;
    max-width: 11rem;
    aspect-ratio: 200 / 112;
  }
  .icon-karte h3 { font-size: 1.08rem; line-height: 1.25; margin-bottom: 0.5rem; }
  .icon-karte p { color: var(--muted); font-size: 0.95rem; }
  @media (prefers-reduced-motion: no-preference) {
    .icon-karte { transition: translate 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
    .icon-karte:hover { translate: 0 -3px; box-shadow: var(--shadow-float); border-color: transparent; }
  }

  /* ---------- Drei Stufen (Erwachsene) -------------------------------------
     Karte mit gelber Raute, Ueberschrift, Text und einer grossen, blassen
     Ziffer im Hintergrund. Die Raute ist ein gedrehtes Quadrat mit runden
     Ecken; das Icon darin wird gegengedreht, damit es aufrecht steht. */
  .stufen {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  }
  /* Die Stufen sind jetzt Sprungmarken auf ihren Abschnitt. Als Link braucht
     die Karte die Textfarbe des Umfelds zurueck. */
  a.stufe { text-decoration: none; color: inherit; }
  .stufe {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 0.85rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--r-lg);
    background: var(--grey-50);
  }
  .stufe > * { position: relative; z-index: 1; }
  .stufe__zeichen {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 0.9rem;
    border-radius: 1.25rem;
    /* Navy statt Gelb: Blau auf Gelb liegt bei 3,9:1 und wirkt stumpf. Weiss
       auf Navy sind 14:1, das Gelb bleibt der Raute als Rahmen erhalten. */
    background: var(--navy);
    box-shadow: 0 0 0 3px rgba(242, 178, 51, 0.35);
    rotate: 45deg;
  }
  .stufe__zeichen svg { width: 1.8rem; height: 1.8rem; color: var(--white); rotate: -45deg; }
  .stufe h3 { font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.2; }
  .stufe p { color: var(--muted); font-size: 0.97rem; }
  .stufe__nr {
    position: absolute;
    z-index: 0;
    right: -0.4rem;
    bottom: -1.6rem;
    font-family: var(--font-display);
    font-size: clamp(5rem, 9vw, 8rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--grey-100);
    pointer-events: none;
  }
  /* Auf breiten Schirmen laeuft die Ziffer bewusst ueber die Kartenkante
     hinaus. Bei 350 px Kartenbreite war davon nur noch eine angeschnittene
     Haelfte zu sehen – das liest sich als Fehler, nicht als Akzent. */
  @media (max-width: 34rem) {
    .stufe__nr { right: 1rem; bottom: 0.5rem; font-size: 4.25rem; }
  }

  /* Beim Ueberfahren hebt sich die Karte leicht, die Raute dreht sich weiter
     auf und die Ziffer wandert ein Stueck heraus. Alles ueber transform und
     Deckkraft, damit nichts umbricht. Ohne Bewegungswunsch passiert nichts. */
  @media (prefers-reduced-motion: no-preference) {
    .stufe {
      transition: translate 0.45s var(--ease), box-shadow 0.45s var(--ease),
                  background 0.45s var(--ease);
    }
    .stufe__zeichen {
      transition: rotate 0.55s var(--ease-spring), scale 0.55s var(--ease-spring),
                  box-shadow 0.45s var(--ease);
    }
    .stufe__zeichen svg { transition: rotate 0.55s var(--ease-spring); }
    .stufe__nr { transition: translate 0.55s var(--ease), color 0.45s var(--ease); }
    .stufe h3 { transition: color 0.35s var(--ease); }

    .stufe:hover { translate: 0 -4px; background: var(--white); box-shadow: var(--shadow-float); }
    /* Vorher drehte die Raute um 90 Grad und wirkte dabei zappelig.
     15 Grad reichen als Reaktion. */
  .stufe:hover .stufe__zeichen { rotate: 60deg; scale: 1.05; box-shadow: 0 0 0 3px var(--yellow), 0 10px 22px rgba(20, 41, 92, 0.28); }
    .stufe:hover .stufe__zeichen svg { rotate: -135deg; }
    .stufe:hover .stufe__nr { translate: -0.4rem -0.4rem; color: var(--line); }
  }

  .steps .card h3 { margin-bottom: 0.15rem; }

  .age-cards {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  }
  .age-card {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--r-md);
    background: var(--white);
    border: 1px solid var(--line);
  }
  .age-badge {
    justify-self: start;
    display: grid; place-items: center;
    min-width: 3.25rem; height: 3.25rem;
    padding-inline: 0.7rem;
    border-radius: var(--r-full);
    background: var(--yellow);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
  }
  .age-card small { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .age-card p { font-size: 0.95rem; color: var(--muted); }

  .area-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
  .area-links a {
    display: inline-block;
    padding: 0.55rem 1.15rem;
    border-radius: var(--r-full);
    background: var(--white);
    border: 1px solid var(--line);
    font-size: 0.92rem;
    transition: border-color 0.25s, transform 0.25s var(--ease-spring);
  }
  .area-links a:hover { border-color: var(--yellow); transform: translateY(-2px); }

  /* Personen-Leiste am Kopf der Teamseite (wie im Bestand) */

  /* Team-Detailseite */
  /* ---------- Lebenslaeufe auf der Teamseite --------------------------------
     Vorher standen alle Portraets gleich gross links und der Text rechts, drei
     Mal untereinander. Das las sich wie eine Liste. Jetzt wechseln die Seiten,
     das Portraet steht im Hochformat und bleibt beim Lesen stehen, und ein
     gelber Strich fuehrt durch den Lebenslauf. */
  .bio {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
    scroll-margin-top: 7rem;
  }
  @media (min-width: 52rem) {
    .bio { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
    /* Jede zweite Person spiegelverkehrt: das bricht die Listenwirkung. */
    .bio:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
    .bio:nth-of-type(even) .bio-media { order: 2; }
  }
  .bio-photo {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--grey-50);
  }
  .bio-photo img { width: 100%; height: 100%; object-fit: cover; }
  /* Beim Ueberfahren zieht das Bild leicht an und ein gelber Strich faehrt
     unten ein. Das Signet in der Ecke wird dabei kraeftiger. Alles nur ueber
     transform und Deckkraft, damit nichts umbricht. */
  .bio-photo::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 3px;
    background: var(--yellow);
    scale: 0 1;
    transform-origin: left center;
  }
  @media (prefers-reduced-motion: no-preference) {
    .bio-photo img { transition: scale 0.7s var(--ease); }
    .bio-photo::before { transition: scale 0.5s var(--ease); }
    .bio-photo::after { transition: opacity 0.4s var(--ease), scale 0.4s var(--ease-spring); }
    .bio-photo:hover img { scale: 1.045; }
    .bio-photo:hover::before { scale: 1 1; }
    .bio-photo:hover::after { opacity: 1; scale: 1.15; }
  }
  .bio h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.15; }
  .bio .role {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--yellow-text);
  }
  /* Lebenslauf auf der Teamseite. Bewusst .cv und nicht .timeline – der Name
     kollidierte mit dem Zeitstrahl der Kinderseite. */
  .cv {
    margin-top: 2rem;
    position: relative;
    padding-left: 1.6rem;
  }
  /* Gelber Faden durch den Lebenslauf, mit einem Punkt je Station. */
  .cv::before {
    content: '';
    position: absolute;
    left: 0.32rem;
    top: 1rem;
    bottom: 1rem;
    width: 2px;
    background: linear-gradient(180deg, var(--yellow), rgba(242, 178, 51, 0.15));
  }
  .cv div {
    position: relative;
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 1.25rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }
  .cv div::before {
    content: '';
    position: absolute;
    left: -1.45rem;
    top: 1.45rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--yellow);
  }
  @media (max-width: 40rem) {
    .cv div { grid-template-columns: 1fr; gap: 0.2rem; }
  }
  .cv div:last-child { border-bottom: 0; }
  .cv span:first-child { color: var(--navy); font-size: 0.92rem; }
  .cv span:last-child { color: var(--muted); font-size: 0.95rem; }
  @media (max-width: 34rem) { .cv div { grid-template-columns: 1fr; gap: 0.15rem; } }

  /* Rechtstexte */
  .legal { max-width: 48rem; }
  .legal h2 { font-size: var(--h3); margin-top: 2.5rem; margin-bottom: 0.75rem; }
  /* ---------- Anfahrtskarte (gezeichnet, ohne Google-Einbettung) ----------
     Fertig geliefertes Stueck: alle Positionen stecken inline im Markup, weil
     die Beschriftungen auf die -4-Grad-Drehung der Karte eingemessen sind.
     Hier nur die vier Regeln, die von aussen kommen muessen. Die Abschnitts-
     polsterung wird genullt, das Stueck bringt seine eigene mit. */
  .kfo-anfahrt { padding-block: 0; }
  .kfo-anfahrt a { color: #14295C; }
  .kfo-anfahrt a:hover { color: #C98F16; }
  .kfo-maps-btn:hover { background: #14295C !important; color: #FFFFFF !important; }
  .kfo-mob { display: none !important; }
  @media (max-width: 760px) {
    .kfo-desk { display: none !important; }
    .kfo-mob { display: flex !important; }
    .kfo-mapbox { display: none !important; }
  }

  .legal h3 { font-size: 1.15rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }
  .legal p, .legal li { color: var(--muted); font-size: 0.99rem; }
  .legal p { margin-bottom: 0.9rem; }
  .legal ul { margin: 0 0 1rem 1.25rem; list-style: disc; }
  .legal li { margin-bottom: 0.35rem; }
  .legal strong { color: var(--navy); }

  /* ---------- Footer --------------------------------------------------------- */
  .site-footer { padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; background: var(--navy); color: rgba(255, 255, 255, 0.78); }
  .site-footer a { color: rgba(255, 255, 255, 0.78); font-size: 0.93rem; }
  .site-footer a:hover { color: var(--yellow); }
  .site-footer :is(h3, h4) { color: var(--white); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1rem; }
  .site-footer .brand-name, .site-footer .brand-place, .site-footer .brand-mark { color: var(--white); }
  /* Feste Spaltenzahl statt auto-fit. Der Fuss hat genau vier Bloecke; auto-fit
     richtete sich nach der Breite und lieferte je nach Fenster 2, 3, 4 oder 5
     Spalten. Bei drei brach der vierte Block in eine zweite Zeile unter die
     Marke, bei fuenf blieb rechts eine Spalte leer stehen. Zwei oder vier gehen
     bei vier Bloecken immer auf. */
  .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 62rem) {
    .footer-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .footer-brand { max-width: 20rem; }
  .footer-brand address { font-style: normal; font-size: 0.93rem; margin-top: 1.25rem; line-height: 1.8; }
  .footer-grid ul { display: grid; gap: 0.45rem; }
  /* Grundhoehe: 22 px liegen unter den 24 px, die WCAG 2.2 auch fuer Maus
     verlangt. Listenlinks sind keine Fliesstextlinks, die Ausnahme greift
     hier also nicht. */
  .footer-grid ul a,
  .footer-brand address a,
  .breadcrumb a { display: inline-block; padding-block: 0.3rem; }
  /* Die Links waren 22 px hoch und damit per Finger kaum sicher zu treffen.
     Nicht nur nach Breite schalten: ein iPad ist 768 bis 1024 px breit und
     wird trotzdem getippt. Deshalb zusaetzlich ueber die Eingabeart. */
  @media (max-width: 64rem), (pointer: coarse) {
    .footer-grid ul { gap: 0; }
    .footer-grid ul a,
    .footer-brand address a,
    .site-footer .footer-meta a {
      display: inline-block;
      padding-block: 0.55rem;
    }
    /* Dieselben 0.55rem wie in der Grundregel: 23px Zeile plus zweimal 11px
       ergibt 44px Trefferflaeche. Hier stand 0.4rem, damit war die Flaeche auf
       dem Handy mit knapp 40px kleiner als auf dem Schreibtisch - genau
       andersherum als gewollt. */
    .contact-list a,
    .contact-grid a[href^="tel:"],
    .contact-grid a[href^="mailto:"] { display: inline-block; padding-block: 0.55rem; }
  }
  .footer-areas ul { grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1rem; }
  /* Auf dem Handy standen alle vier Spalten untereinander, der Fuß war damit
     über 1000 Pixel hoch. Navigation und Rechtliches sind kurz genug, um
     nebeneinander zu stehen; Marke und Einzugsgebiete bleiben voll breit. */
  @media (max-width: 34rem) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.25rem; }
    .footer-brand, .footer-areas { grid-column: 1 / -1; }
  }
  .socials { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
  .socials a {
    display: grid; place-items: center;
    /* 44px, dasselbe Touch-Ziel wie die Wortmarke in der Kopfzeile. */
    width: 2.75rem; height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    transition: background-color 0.25s, border-color 0.25s, transform 0.25s var(--ease-spring);
  }
  .socials a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); transform: translateY(-2px); }
  .socials svg { width: 1.05rem; }
  .footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.85rem;
  }

  /* ---------- Sticky-CTA (mobil) ---------------------------------------------- */
  .action-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 55;
    display: none;
    gap: 0.6rem;
    padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    translate: 0 110%;
    transition: translate 0.4s var(--ease);
  }
  .action-bar[data-visible] { translate: 0 0; }
  .action-bar .btn { flex: 1; padding-inline: 0.75rem; }

  /* ---------- Scroll-Reveal ---------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal { opacity: 0; translate: 0 26px; }
    .js .reveal[data-shown] {
      opacity: 1;
      translate: 0;
      transition: opacity 0.9s var(--ease), translate 0.9s var(--ease);
      transition-delay: var(--delay, 0s);
    }
  }
}

/* ======================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .center { text-align: center; }
  .mt-1 { margin-top: 0.5rem; }
  .mt-2 { margin-top: 1rem; }
  .mt-3 { margin-top: 1.5rem; }
  .mt-4 { margin-top: 2rem; }
  .muted { color: var(--muted); }
  .lede { font-size: 1.125rem; color: var(--muted); }
  [hidden] { display: none !important; }
}

/* ======================================================================== */
/* Mobile Navigation: Vollbild-Overlay mit Fokusfalle (JS)                   */
@media (max-width: 61.99rem) {
  .burger {
    /* Flex-Spalte statt Grid: bei display:grid sind die drei Zeilen auto und
       werden auf die volle Buttonhoehe gestreckt (place-items setzt nur
       align-items, nicht align-content). Die Striche standen dadurch 14,6 px
       auseinander statt der vorgesehenen 4. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--white);
    cursor: pointer;
  }
  .burger span { display: block; width: 1.15rem; height: 1.5px; background: var(--navy); }

  .nav {
    /* Die Kopfzeile hat backdrop-filter und ist damit Bezugsrahmen fuer fest
       positionierte Kinder. inset: 0 ergab deshalb nur die Kopfzeilenhoehe
       (390x128), der Inhalt schien durch. Breite und Hoehe daher ausdruecklich
       am Sichtfenster. */
    position: fixed;
    inset: 0 auto auto 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 100;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.35rem;
    padding: 5rem var(--gutter) 3rem;
    background: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
  }
  .nav[data-open] { opacity: 1; visibility: visible; }
  .nav > a, .nav-trigger { font-size: 1.5rem; padding-block: 0.75rem; justify-content: flex-start; }
  .nav-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 1.15rem; right: var(--gutter);
    width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--white);
    cursor: pointer;
  }
  .nav-close svg { width: 1.1rem; color: var(--navy); }
  .nav-menu { position: static; }
  /* Die Schaltflaeche entfaellt, das Menue ist hier schon aufgeklappt. An
     ihrer Stelle steht eine reine Beschriftung, sonst haengen die beiden
     Unterpunkte ohne Bezug in der Liste. */
  .nav-trigger { display: none; }
  .nav-menu::before {
    content: 'Leistungen';
    display: block;
    margin: 1.1rem 0 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .nav-panel {
    position: static;
    opacity: 1;
    translate: 0;
    pointer-events: auto;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    min-width: 0;
  }
  .nav-panel a { font-size: 1.25rem; padding-block: 0.6rem; }

  /* .nav > a setzt background: none und ist spezifischer als .btn-accent,
     deshalb stand die Schaltflaeche im Menue ohne Flaeche da. */
  .nav > a.nav-cta {
    margin-left: 0;
    margin-top: 1.5rem;
    justify-content: center;
    padding: 0.95rem 1.4rem;
    background: var(--yellow);
    color: var(--navy);
    font-size: 1.15rem;
  }
  .action-bar { display: flex; }
  body { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
}

/* Schwebende Elemente auf schmalen Geräten in den Rand zurückholen –
   sonst kleben sie an der Viewportkante. */
@media (max-width: 48rem) {
  .address-card { left: 0; right: 0; bottom: -1.25rem; }
  .about-badge { right: 0; bottom: -1.25rem; }
}


@media (max-width: 26rem) {
  .brand { gap: 0.6rem; }
  :root {
    --marke-b: 2.6rem;
    --marke-h: 2.87rem;
    --marke-name: 0.98rem;
    --marke-ort: 0.6rem;
  }
  .brand-name { letter-spacing: 0.1em; }
  .brand-place { letter-spacing: 0.5em; }
}

/* ---------- Mobil: Hero straffen -----------------------------------------
   Der Hero war 1271px hoch bei 844px Bildschirm, das Foto begann erst bei
   862px. Die beiden Schaltflaechen stehen jetzt gleich breit untereinander,
   und das Bild rueckt vor die Kennzahlen. */
@media (max-width: 47.99rem) {
  .hero-actions { display: grid; gap: 0.75rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { margin-top: 1.5rem; }
}

/* Solange der Hero einspaltig ist, gehoert das Bild nach oben. Die zweite
   Spalte kommt erst bei 62rem, die Umsortierung stand aber bei 47.99rem.
   Zwischen beiden Grenzen - also auf dem Tablet im Hochformat und auf
   kleinen Notebooks - hing das Foto allein unter den Kennzahlen, mit einer
   grossen leeren Flaeche darueber. Die Grenze muss die der Zweispaltigkeit
   sein, nicht die des Handy-Layouts. */
@media (max-width: 61.99rem) {
  .hero-media { order: -1; }
}

/* ---------- Spaltenzahl an die Zahl der Kacheln binden --------------------
   Die Kachelraster stehen auf repeat(auto-fit, minmax(...)). auto-fit legt so
   viele Spalten an, wie in die Breite passen - ohne Ruecksicht darauf, wie
   viele Kacheln es gibt. Wo genau drei Kacheln stehen, waren das ab 1280px
   vier Spalten: die drei Kacheln rueckten nach links zusammen und rechts
   blieb ein leeres Viertel stehen.

   Der Zugriff geht ueber :has() und trifft nur Behaelter, deren drittes Kind
   zugleich das letzte ist. Raster mit vier oder mehr Kacheln bleiben damit
   unberuehrt und duerfen weiter frei umbrechen. */
@media (min-width: 62rem) {
  .cards:has(> :nth-child(3):last-child),
  .icon-karten:has(> :nth-child(3):last-child),
  .stufen:has(> :nth-child(3):last-child),
  .treat-cards:has(> :nth-child(3):last-child),
  .kfo-desk:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
  .cards:has(> :nth-child(2):last-child),
  .icon-karten:has(> :nth-child(2):last-child),
  .stufen:has(> :nth-child(2):last-child),
  .treat-cards:has(> :nth-child(2):last-child),
  .kfo-desk:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media print {
  .site-header, .action-bar, .scroll-progress, .cta { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Anfahrt-Vorteile im Einzugsgebiet-Block der Leistungsseiten (Text 1:1 wie bisherige Website). */
.einzug-vorteile { display: grid; gap: 0.2rem; margin: 0; }
.einzug-vorteile dt { font-weight: 500; color: var(--navy); margin-top: 0.6rem; }
.einzug-vorteile dt:first-child { margin-top: 0; }
.einzug-vorteile dd { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }