@font-face {
    font-family: 'Ro Olive';
    src: url('RoOlive.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }

  :root {
    /* Alle Farbwerte sind aus Fotos der Praxis Heiligenberger Straße 5 entnommen. */

    /* Lasurwände und Kiefernschatten */
    --stone: #33251A;
    --stone-mid: #56412F;
    --paper: #FFFEF7;
    --paper-warm: #FFF2B8;
    --white: #FFFFFF;
    --ink: #2A1C13;
    --ink-mid: #56412F;
    --ink-light: #7A6250;
    --line: #E7C94A;

    /* Linoleumboden — Leitfarbe des Hauses */
    --terracotta: #C1531F;
    --terracotta-deep: #8C3512;
    --terracotta-light: #E5A583;
    --terracotta-pale: #FAE3D5;

    /* Sitzkissen grün, Jahreszeitentisch */
    --moss: #4E7A57;
    --moss-deep: #3A5E42;
    --moss-light: #8FB396;
    --moss-pale: #E5EFE4;

    /* Klares Mangogelb statt Beige — freundlich, sonnig, gut lesbar */
    --kiefer: #F2B705;
    --kiefer-deep: #6F4D00;
    --kiefer-pale: #FFF4B8;

    /* Sitzkissen karminrot, rote Wand im Sprechzimmer */
    --karmin: #AE2140;
    --karmin-pale: #F9DEE1;

    /* Wandbilder und Untersuchungsliege — Lasurton für die Palette,
       der tiefe Ton nur als Fläche unter weißer Schrift */
    --lasurblau: #4A63A8;
    --lasurblau-deep: #2B3F79;
    --lasurblau-light: #A9B7DE;
    --lasurblau-pale: #E4E8F3;

    /* Praxisschild und Hausfassade — echtes Goldgelb, Wunsch der Praxis */
    --sonne: #F6C600;
    --sonne-pale: #FFF4B8;

    /* Senfgelb, satter als Sonne — als Section-Hintergrund */
    --senf: #F3A712;
    --senf-pale: #FFE7A3;

    /* Namen aus der Vorgängerversion, auf die neue Palette gelegt */
    --sage: var(--moss);
    --sage-light: var(--moss-light);
    --sage-pale: var(--moss-pale);
    --honey: var(--kiefer);
    --honey-pale: var(--kiefer-pale);
    --honey-text: var(--kiefer-deep);
    --slate: var(--stone);

    --font-display: 'Ro Olive', 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Jost', Arial, sans-serif;
  }

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

  html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

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

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
  }

  /* ── NOISE TEXTURE OVERLAY ── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.4;
  }

  a { color: inherit; }

  /* Fokusring in Praxisfarben statt Browser-Blau. Auf dunklen Flächen und auf
     der gefüllten Terminkarte wechselt er auf Sonnengelb. */
  :focus-visible {
    outline: 3px solid var(--terracotta);
    outline-offset: 2px;
  }
  .section-anfahrt :focus-visible,
  .site-footer :focus-visible,
  .card-moss:focus-visible,
  .leistung-feature:focus-visible {
    outline-color: var(--sonne);
  }

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

  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--stone);
    color: var(--white);
    padding: 0.75rem 1.25rem;
    z-index: 1000;
    font-family: var(--font-body);
    text-decoration: none;
  }
  .skip-link:focus { left: 0; }

  /* ── NAVIGATION ── */
  .site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 4rem;
    transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
  }

  /* Von Anfang an leicht deckend, damit die Links über dem Foto lesbar
     bleiben; beim Scrollen wird die Leiste dann geschlossen. */
  .site-nav {
    background: rgba(255, 253, 251, 0.78);
    backdrop-filter: blur(14px) saturate(1.1);
  }

  .site-nav.scrolled {
    background: rgba(255, 253, 251, 0.97);
    box-shadow: 0 2px 16px rgba(51, 37, 26, 0.1);
    padding: 0.9rem 4rem;
  }

  /* Farbleiste: der Sitzkissen-Satz der Praxis als Signatur der Navigation */
  .site-nav::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(to right,
      var(--terracotta) 0 16.66%,
      var(--sonne) 16.66% 33.33%,
      var(--kiefer) 33.33% 50%,
      var(--moss) 50% 66.66%,
      var(--lasurblau) 66.66% 83.33%,
      var(--karmin) 83.33% 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .site-nav.scrolled::after { opacity: 1; }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--stone);
    letter-spacing: 0.01em;
    text-decoration: none;
    line-height: 1.2;
  }
  .nav-logo-signet { flex-shrink: 0; }
  .nav-logo .nav-logo-sub {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-top: 0.2rem;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    list-style: none;
  }

  .nav-links a {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-mid);
    transition: color 0.25s ease;
    position: relative;
    padding-bottom: 0.3rem;
  }

  .nav-links a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transition: right 0.3s ease;
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
    color: var(--stone);
  }
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after { right: 0; }

  .nav-links a.nav-link-terracotta:hover { color: var(--terracotta-deep); }
  .nav-links a.nav-link-moss:hover { color: var(--moss-deep); }

  .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    gap: 0.6rem;
    color: var(--stone);
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .nav-toggle-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
  }
  .nav-toggle-lines span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: var(--stone);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .site-nav.menu-open .nav-toggle-lines span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .site-nav.menu-open .nav-toggle-lines span:nth-child(2) { opacity: 0; }
  .site-nav.menu-open .nav-toggle-lines span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* ── HERO ── */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 9rem 4rem 5rem;
    gap: 3rem;
    overflow: hidden;
  }

  /* Lasurwand: die getönte Wandfläche, vor der der Slider hängt.
     Weicher Verlauf statt harter Kante, damit keine Naht entsteht. */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 90% at 88% 42%, var(--sonne-pale) 0%, rgba(255, 244, 184, 0) 62%),
      linear-gradient(100deg, var(--paper) 0%, var(--paper) 34%, var(--paper-warm) 66%, var(--sonne-pale) 100%);
    z-index: 0;
  }

  /* Gezeichnetes Praxishaus als leises Wasserzeichen im Hintergrund. Die Maske
     blendet den Bildrand ringsum aus, damit keine Kanten sichtbar werden, und
     hält das Haus zugleich von der Überschrift links fern. */
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("../img/haus.webp") no-repeat 70% 78% / 1300px auto;
    opacity: 0.22;
    mix-blend-mode: multiply;
    mask-image:
      radial-gradient(ellipse 46% 42% at 62% 76%, #000 0%, #000 38%, transparent 82%),
      linear-gradient(to right, transparent 0%, #000 42%);
    mask-composite: intersect;
    -webkit-mask-image:
      radial-gradient(ellipse 46% 42% at 62% 76%, #000 0%, #000 38%, transparent 82%),
      linear-gradient(to right, transparent 0%, #000 42%);
    -webkit-mask-composite: source-in;
    z-index: 0;
    pointer-events: none;
  }

  /* Ohne eigenen Stapelkontext verschwinden diese Blöcke hinter .hero::before
     (deckender Farbverlauf, z-index 0) - der malt über statischen Inhalt. */
  .hero-left, .hero-right, .hero-post-preview { position: relative; z-index: 1; }

  .hero-left {
    flex: 1 1 44%;
    max-width: 560px;
    container-type: inline-size;
  }

  .hero-eyebrow {
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-light);
    font-weight: 500;
    margin-bottom: 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }
  .hero-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--terracotta);
  }

  .hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 5.8vw, 5rem);
    line-height: 1;
    color: var(--stone);
    letter-spacing: -0.04em;
    text-wrap: balance;
  }
  .hero-title-lead {
    display: block;
    font-family: var(--font-display);
    font-size: min(1em, 8.5cqw);
    font-weight: 400;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    max-width: 100%;
  }
  .hero-title .hero-values {
    display: block;
    margin-top: 0.32em;
    font-family: var(--font-body);
    font-size: 0.39em;
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: -0.025em;
  }
  .hero-value-line { display: block; }
  .hero-value-line-indent { padding-left: 1.6em; }
  .hero-title .accent-terracotta {
    color: var(--terracotta-deep);
    font-weight: 500;
  }
  .hero-title .accent-moss {
    position: relative;
    color: var(--moss-deep);
    font-weight: 500;
  }
  .hero-title .accent-moss::after {
    content: '';
    position: absolute;
    right: -0.08em;
    bottom: -0.12em;
    left: -0.04em;
    height: 2px;
    border-radius: 50%;
    background: var(--moss-light);
    transform: rotate(-1.2deg);
    opacity: 0.8;
  }

  .hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--ink-mid);
    margin-top: 1.8rem;
    max-width: 46ch;
  }

  .hero-actions {
    margin-top: 2.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .hero-card {
    flex: 1 1 220px;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--white);
    padding: 1.4rem 1.6rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .hero-card:hover, .hero-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(74, 70, 64, 0.14);
  }
  .hero-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
  }

  .hero-card .hero-card-label {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-light);
  }

  .hero-card-floor {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--line);
    color: var(--ink-mid);
    white-space: nowrap;
  }
  .card-terracotta .hero-card-floor { border-color: var(--terracotta-light); color: var(--terracotta-deep); }
  .card-moss .hero-card-floor { border-color: var(--moss-light); color: var(--moss-deep); }
  .hero-card .hero-card-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: var(--stone);
  }
  .hero-card .hero-card-meta {
    font-size: 0.92rem;
    color: var(--ink-mid);
  }
  /* Eine gefüllte Hauptaktion, eine ruhige Nebenaktion */
  .hero-card.card-moss {
    background: var(--moss-deep);
    border-color: var(--moss-deep);
  }
  .hero-card.card-moss .hero-card-label { color: #C9DCCC; }
  .hero-card.card-moss .hero-card-title { color: var(--white); }
  .hero-card.card-moss .hero-card-meta { color: #E8F1E9; }
  .hero-card.card-moss .hero-card-arrow { color: var(--white); }
  .hero-card.card-moss:hover { background: #2E4B34; }

  .hero-card.card-terracotta {
    border-color: var(--terracotta);
    border-bottom-width: 4px;
  }
  .hero-card.card-terracotta .hero-card-label { color: var(--terracotta-deep); }
  .hero-card.card-terracotta .hero-card-arrow { color: var(--terracotta-deep); }
  .hero-card.card-terracotta:hover { background: var(--terracotta-pale); }

  .hero-card-arrow {
    margin-top: auto;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-mid);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .hero-card-arrow svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
  .hero-card:hover .hero-card-arrow svg { transform: translateX(4px); }

  /* ── HERO-VORSCHAU: PRAXISPOST ──
     Vier Hochkantkarten in der freien Flaeche rechts neben dem Hero-Text:
     Bild oben, darunter Datum, Titel und Anriss. */
  .hero-post-preview {
    flex: 1 1 460px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    align-self: flex-start;
    /* Rueckt die Karten auf Hoehe von "Eine Praxis." - gleicht exakt die
       Boxhoehe von .hero-eyebrow aus (Zeilenhoehe 0.82rem * 1.8 + Abstand). */
    margin-top: calc(0.82rem * 1.8 + 1.6rem);
    min-width: 0;
  }
  .hero-post-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .hero-post-label {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-light);
  }
  .hero-post-alle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--terracotta-deep);
    text-decoration: none;
    white-space: nowrap;
  }
  .hero-post-alle svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
  .hero-post-alle:hover svg, .hero-post-alle:focus-visible svg { transform: translateX(4px); }

  .hero-post-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: stretch;
  }
  .hero-post-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .hero-post-card:hover, .hero-post-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(74,70,64,0.13);
    border-color: var(--terracotta-light);
  }
  .hero-post-card-img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-warm);
  }
  .hero-post-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
  }
  .hero-post-card:hover .hero-post-card-img img { transform: scale(1.05); }
  .hero-post-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.9rem 1rem;
    flex: 1;
  }
  .hero-post-card-date {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-light);
  }
  .hero-post-card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--stone);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-post-card-teaser {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ink-mid);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── PRAXIS-SLIDER ──
     Volle Seitenbreite, randlos, mit klarer Kante statt Ausblassen. */
  /* Randlos: hebt genau das Seitenpolster des Hero auf, statt über 100vw zu
     rechnen — sonst schiebt eine sichtbare Scrollleiste das Bild aus der Mitte. */
  .hero-right {
    flex: 1 1 100%;
    order: -1;
    margin-inline: -4rem;
    margin-top: -9rem;
    position: relative;
  }

  .praxis-slider { width: 100%; position: relative; }

  .slider-frame {
    position: relative;
    overflow: hidden;
  }

  .slider-track {
    position: relative;
    list-style: none;
    height: 56vh;
    max-height: 56vh;
    min-height: 376px;
    overflow: hidden;
    background: var(--terracotta-pale);
  }

  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
  }
  .slide.is-active { opacity: 1; }
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 6s ease-out;
  }
  .slide.is-active img { transform: scale(1); will-change: transform; }

  .slider-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.4rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.8rem 1.2rem;
    padding-inline: 4rem;
  }

  .slider-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .slider-step {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--kiefer);
    border-radius: 50%;
    background: var(--white);
    color: var(--stone);
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease;
  }
  .slider-step svg { width: 20px; height: 20px; }
  .slider-step:hover { background: var(--kiefer); color: var(--white); }
  .slider-pause .icon-play { display: none; }
  .slider-pause[data-paused='true'] .icon-pause { display: none; }
  .slider-pause[data-paused='true'] .icon-play { display: block; }

  /* Die Punktreihe ist zugleich die Farblegende des Hauses */
  .slider-dots {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-inline: 0.35rem;
    list-style: none;
  }
  .slider-dot {
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .slider-dot::before {
    content: '';
    display: block;
    width: 11px;
    height: 11px;
    margin: 0 auto;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.65), 0 1px 4px rgba(41,34,25,0.35);
    opacity: 0.4;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }
  .slider-dot.is-active::before { opacity: 1; transform: scale(1.55); }
  .slider-dot:hover::before { opacity: 0.8; }

  .raum-sonne { color: var(--sonne); }
  .raum-linol { color: var(--terracotta); }
  .raum-karmin { color: var(--karmin); }
  .raum-kiefer { color: var(--kiefer); }
  .raum-lasurblau { color: var(--lasurblau); }
  .raum-moos { color: var(--moss); }

  @media (prefers-reduced-motion: reduce) {
    .slide { transition: opacity 0.01ms; }
    .slide img, .slide.is-active img { transform: none; transition: none; }
  }

  /* ── KITE ORNAMENT ── */
  .kite-parallax {
    position: absolute;
    top: 3%;
    right: 5%;
    z-index: 2;
    pointer-events: none;
  }
  .kite-ornament {
    display: block;
    width: clamp(120px, 15vw, 220px);
    height: auto;
    overflow: visible;
    animation: kite-drift 24s ease-in-out infinite;
    will-change: transform;
  }
  .kite-tail { will-change: transform; }
  @keyframes kite-drift {
    0%   { transform: translate(0, 0) rotate(-4deg); }
    25%  { transform: translate(-16px, 12px) rotate(-1deg); }
    50%  { transform: translate(6px, 24px) rotate(-7deg); }
    75%  { transform: translate(-10px, 10px) rotate(-2deg); }
    100% { transform: translate(0, 0) rotate(-4deg); }
  }
  @media (max-width: 900px) {
    .kite-parallax { top: 1.5%; right: 3%; }
    .kite-ornament { width: clamp(90px, 22vw, 150px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .kite-ornament { animation: none; }
    .kite-tail { filter: none; }
  }

  /* ── ORGANIC DIVIDER (hand-drawn branch) ──
     Führt die Lasurwand-Verlauf aus dem Hero (.hero::before) fort, damit der
     Übergang zur Team-Sektion nicht hart abreißt. */
  .hedge-divider {
    height: clamp(112px, 11vw, 158px);
    background-image:
      url("../img/trenner-zweig-freigestellt.png"),
      linear-gradient(to bottom, var(--paper-warm) 0%, rgba(255,242,184,0.72) 22%, var(--moss-pale) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: min(1600px, calc(100% - 8rem)) auto, 100% 100%;
  }

  /* ── SECTION SCAFFOLDING ── */
  .section-label {
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-light);
    margin-bottom: 1rem;
  }

  h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 3rem;
    line-height: 1.12;
    color: var(--stone);
  }
  .on-dark h2 { color: var(--white); }
  h2 em.italic { font-style: normal; color: var(--ink); }
  .on-dark h2 em.italic { color: var(--paper-warm); }
  h2 em.accent-terracotta { font-style: normal; color: var(--terracotta-deep); }
  h2 em.accent-moss { font-style: normal; color: var(--moss-deep); }
  .on-dark h2 em.accent-terracotta,
  .section-anfahrt h2 em.accent-terracotta { color: var(--terracotta-light); }
  .on-dark h2 em.accent-moss,
  .section-anfahrt h2 em.accent-moss { color: var(--moss-light); }

  p { color: var(--ink-mid); }
  .on-dark p { color: rgba(255,255,255,0.72); }

  /* ── FADE UP ──
     Sichtbar als Grundzustand. Erst wenn JavaScript läuft, wird
     ausgeblendet und eingeblendet — sonst bleibt der Inhalt ohne
     JavaScript, im Druck und in Crawlern unsichtbar. */
  .js-reveal .fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .js-reveal .fade-up.is-visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .js-reveal .fade-up { opacity: 1; transform: none; transition: none; }
  }

  /* ── SECTION: TEAM ── */
  .section-team { position: relative; padding: 6.5rem 4rem; background: var(--moss-pale); }
  .section-team::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("../img/team-baum.webp");
    background-repeat: no-repeat;
    background-position: top -1.5rem right -4rem;
    background-size: min(88vw, 1180px) auto;
    filter: saturate(1.35) contrast(1.1);
    opacity: 0.55;
    z-index: 0;
    pointer-events: none;
  }
  .section-team > * { position: relative; z-index: 1; }
  .team-intro { max-width: 62ch; }
  .team-intro p { margin-bottom: 1.3rem; }
  .team-intro p:last-of-type { margin-bottom: 0; }

  .haus-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 3.5rem;
  }
  .tag {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.45rem 1.05rem;
    background: var(--white);
    border: 1.5px solid var(--raum, var(--kiefer));
    border-radius: 999px;
    color: var(--raum-tief, var(--kiefer-deep));
  }
  .haus-tags .tag:nth-child(1) { --raum: var(--moss); --raum-tief: var(--moss-deep); }
  .haus-tags .tag:nth-child(2) { --raum: var(--terracotta); --raum-tief: var(--terracotta-deep); }
  .haus-tags .tag:nth-child(3) { --raum: var(--lasurblau); --raum-tief: var(--lasurblau); }
  .haus-tags .tag:nth-child(4) { --raum: var(--karmin); --raum-tief: var(--karmin); }

  /* ── PRACTICE SECTIONS ── */
  .practice-section { padding: 6.5rem 4rem; }
  .practice-section.bg-warm { background: var(--paper-warm); }

  .practice-header {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    margin-bottom: 4rem;
  }

  .practice-header .section-label-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1rem;
  }
  .section-label-accent.terracotta { color: var(--terracotta-deep); }
  .section-label-accent.moss { color: var(--moss-deep); }
  .section-label-accent::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
  }
  .section-label-accent.terracotta::before { background: var(--terracotta); }
  .section-label-accent.moss::before { background: var(--moss); }

  .practice-intro { max-width: 56ch; }
  .practice-intro .lede {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-style: normal;
    color: var(--ink);
    line-height: 1.6;
    margin-bottom: 1.2rem;
  }

  /* Team */
  .team-group { margin-top: 3.5rem; }
  .team-group + .team-group { margin-top: 4.5rem; }
  .team-group-heading {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--moss-deep);
    text-align: center;
  }
  .team-grid {
    display: grid;
    gap: 3rem 2.4rem;
    margin-top: 1.6rem;
  }
  .team-grid-aerztinnen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-grid-fachangestellte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .team-member { text-align: center; }
  .team-member h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--stone);
    margin-bottom: 0.35rem;
  }
  .team-role {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--moss-deep);
    margin-bottom: 0.8rem;
  }
  .team-member p {
    font-size: 0.96rem;
    line-height: 1.7;
    max-width: 32ch;
    margin-inline: auto;
  }

  /* Portrait frame — soft hand-drawn arch, echoes the house windows on the map.
     Jedes Teammitglied bekommt eine Farbe aus dem Sitzkissen-Satz der Praxis. */
  .team-member:nth-child(1) { --raum: var(--terracotta); --raum-tief: var(--terracotta-deep); --raum-blass: var(--terracotta-pale); }
  .team-member:nth-child(2) { --raum: var(--moss); --raum-tief: var(--moss-deep); --raum-blass: var(--moss-pale); }
  .team-member:nth-child(3) { --raum: var(--lasurblau); --raum-tief: var(--lasurblau); --raum-blass: var(--lasurblau-pale); }
  .team-member:nth-child(4) { --raum: var(--karmin); --raum-tief: var(--karmin); --raum-blass: var(--karmin-pale); }

  .team-portrait {
    position: relative;
    width: 100%;
    max-width: 240px;
    margin: 0 auto 1.4rem;
    aspect-ratio: 4 / 5;
    border-radius: 50% 50% 10px 10px / 32% 32% 10px 10px;
    overflow: hidden;
    background: var(--raum-blass);
  }
  .team-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Sketched outline sitting slightly off-register, like a pencil line drawn over the shape */
  .team-portrait::after {
    content: '';
    position: absolute;
    inset: -3px -4px -2px -3px;
    border: 2px solid var(--raum);
    border-radius: inherit;
    opacity: 0.75;
    pointer-events: none;
  }

  /* Placeholder state — shown until a portrait file is dropped into img/ */
  .team-portrait.is-placeholder {
    display: grid;
    place-content: center;
    gap: 0.5rem;
    background:
      repeating-linear-gradient(
        -45deg,
        transparent 0 11px,
        color-mix(in srgb, var(--raum) 22%, transparent) 11px 13px
      ),
      var(--raum-blass);
  }
  .team-portrait-initials {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    font-weight: 500;
    color: var(--raum-tief);
  }
  .team-portrait-hint {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--raum-tief);
  }
  .team-role { color: var(--raum-tief); }

  /* Vorsorge — die eine Leistung mit eigener Seite, deshalb breiter */
  .leistung-feature {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
    margin-top: 4rem;
    background: var(--lasurblau-deep);
    color: var(--paper);
    text-decoration: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 22px 48px rgba(20, 26, 48, 0.22);
  }
  .leistung-feature-bild { overflow: hidden; }
  .leistung-feature-bild img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .leistung-feature:hover .leistung-feature-bild img,
  .leistung-feature:focus-visible .leistung-feature-bild img { transform: scale(1.04); }

  .leistung-feature-text {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 2.8rem 3rem;
  }
  .leistung-feature-label {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #F2C46A;
  }
  .leistung-feature-titel {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    line-height: 1.15;
    color: var(--white);
  }
  .leistung-feature-p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: #E6E9F4;
    max-width: 48ch;
  }
  .leistung-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1.2rem;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lasurblau-light);
  }
  .leistung-feature-cta svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
  .leistung-feature:hover .leistung-feature-cta,
  .leistung-feature:focus-visible .leistung-feature-cta { color: var(--sonne); }
  .leistung-feature:hover .leistung-feature-cta svg { transform: translateX(5px); }

  /* Leistungen grid */
  .leistungen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
    margin-top: 1.2rem;
  }
  .leistung-item {
    position: relative;
    background: var(--white);
    padding: 2.4rem 1.9rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    border-top: 4px solid var(--raum, var(--line));
    border-radius: 1rem;
    box-shadow: 0 8px 22px rgba(51, 37, 26, 0.07);
  }
  .raumfarbe-moos { --raum: var(--moss); --raum-blass: var(--moss-pale); }
  .raumfarbe-karmin { --raum: var(--karmin); --raum-blass: var(--karmin-pale); }
  .raumfarbe-kiefer { --raum: var(--kiefer); --raum-blass: var(--kiefer-pale); }
  .raumfarbe-linol { --raum: var(--terracotta); --raum-blass: var(--terracotta-pale); }
  .raumfarbe-sonne { --raum: var(--sonne); --raum-blass: var(--sonne-pale); }

  .leistung-icon-frame {
    display: grid;
    place-items: center;
    width: clamp(96px, 9vw, 128px);
    height: clamp(96px, 9vw, 128px);
    background: var(--raum-blass, var(--paper-warm));
    border-radius: 50%;
    animation: icon-float 7s ease-in-out infinite;
  }
  .leistung-item:nth-child(2) .leistung-icon-frame { animation-delay: -1.1s; }
  .leistung-item:nth-child(3) .leistung-icon-frame { animation-delay: -2.3s; }
  .leistung-item:nth-child(4) .leistung-icon-frame { animation-delay: -3.6s; }
  .leistung-item:nth-child(5) .leistung-icon-frame { animation-delay: -4.8s; }
  @keyframes icon-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(1.5deg); }
  }
  .leistung-icon {
    display: block;
    width: 74%;
    height: 74%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .leistung-item:hover .leistung-icon { transform: scale(1.08) rotate(-3deg); }
  .leistung-item h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.35rem;
    color: var(--stone);
  }
  .leistung-item p { font-size: 0.92rem; line-height: 1.7; }

  /* Sprechzeiten + Kontakt row */
  .praxis-meta {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.2rem;
    margin-top: 4rem;
  }
  .praxis-meta > div {
    background: var(--white);
    padding: 2.4rem 2.6rem;
    border-top: 4px solid var(--kiefer);
    border-radius: 1rem;
    box-shadow: 0 8px 22px rgba(51, 37, 26, 0.07);
  }
  .praxis-meta > div:last-child { border-top-color: var(--terracotta); }
  .practice-section.bg-warm .praxis-meta > div { background: var(--white); }

  .praxis-meta h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--stone);
    margin-bottom: 1.2rem;
  }
  .zeiten-heading {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
  }
  .zeiten-heading h3 { margin-bottom: 0; }
  .zeiten-heading img { flex-shrink: 0; }

  .zeiten-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
  .zeiten-table td { padding: 0.7rem 0.9rem; color: var(--ink-mid); }
  .zeiten-table tr:nth-child(odd) td { background: var(--kiefer-pale); }
  .zeiten-table td:first-child { font-weight: 500; color: var(--ink); width: 38%; }
  .zeiten-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
  .zeiten-note {
    margin-top: 1.2rem;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--ink-light);
  }

  .kontakt-list { display: flex; flex-direction: column; gap: 1.1rem; }
  .kontakt-row { display: flex; gap: 0.9rem; align-items: flex-start; }
  .kontakt-row svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.2rem; color: var(--ink-light); }
  .accent-terracotta .kontakt-row svg { color: var(--terracotta); }
  .accent-moss .kontakt-row svg { color: var(--moss); }
  .kontakt-row strong { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--ink-light); margin-bottom: 0.2rem; }
  .kontakt-row a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); transition: border-color 0.2s ease, color 0.2s ease; }
  .accent-terracotta .kontakt-row a:hover { color: var(--terracotta-deep); border-color: var(--terracotta); }
  .accent-moss .kontakt-row a:hover { color: var(--moss-deep); border-color: var(--moss); }

  .praxis-cta {
    margin-top: 1.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.6rem;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--stone);
    border-radius: 999px;
    color: var(--stone);
    transition: background 0.25s ease, color 0.25s ease;
  }
  .praxis-cta:hover {
    background: var(--stone);
    color: var(--white);
  }
  .accent-terracotta .praxis-cta { border-color: var(--terracotta); color: var(--terracotta-deep); }
  .accent-terracotta .praxis-cta:hover { background: var(--terracotta); color: var(--white); }
  .accent-moss .praxis-cta { border-color: var(--moss); color: var(--moss-deep); }
  .accent-moss .praxis-cta:hover { background: var(--moss); color: var(--white); }

  /* ── TERMIN-, REZEPT- UND KONTAKTFORMULARE ── */
  .section-termin {
    padding: 6.5rem 4rem 7rem;
    background: var(--lasurblau-pale);
  }
  .section-rezept {
    padding: 6.5rem 4rem 7rem;
    background: var(--senf-pale);
  }
  .termin-header,
  .rezept-header {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: end;
    margin-bottom: 2.5rem;
  }
  .termin-header p,
  .rezept-header p {
    max-width: 56ch;
    font-size: 1.05rem;
    line-height: 1.75;
  }
  .termin-hinweis,
  .rezept-hinweis {
    margin-bottom: 2.5rem;
    padding: 1.15rem 1.35rem;
    border-left: 3px solid var(--terracotta);
    border-radius: 0.75rem;
    background: var(--terracotta-pale);
    color: var(--ink-mid);
    line-height: 1.6;
  }
  .termin-hinweis strong,
  .rezept-hinweis strong {
    display: block;
    color: var(--terracotta-deep);
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .termin-hinweis {
    border-left-color: var(--moss);
    background: var(--moss-pale);
  }
  .termin-hinweis strong { color: var(--moss-deep); }
  .termin-form,
  .rezept-form,
  .kontakt-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.82rem 1.2rem;
  }
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
  }
  .form-group[hidden] { display: none; }
  .form-group.full { grid-column: 1 / -1; }
  .form-group > label,
  .field-label {
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .form-group input,
  .form-group textarea {
    width: 100%;
    min-height: 42px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.72rem;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    line-height: 1.35;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }
  .form-group select {
    width: 100%;
    min-height: 42px;
    padding: 0.6rem 2.35rem 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.72rem;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    line-height: 1.35;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }
  .appointment-picker {
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(252,250,244,0.74);
  }
  .appointment-picker-header {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    margin-bottom: 1.2rem;
  }
  .picker-step {
    display: inline-grid;
    place-items: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    background: var(--moss-deep);
    border-radius: 50%;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
  }
  .appointment-picker-header strong {
    display: block;
    color: var(--stone);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
  }
  .appointment-picker-header p {
    margin-top: 0.15rem;
    color: var(--ink-mid);
    font-size: 0.9rem;
  }
  .picker-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .recommended-dot {
    color: var(--moss-deep);
    font-weight: 600;
  }
  .notice {
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--terracotta);
    border-radius: 0.75rem;
    background: var(--terracotta-pale);
    color: var(--ink-mid);
  }
  .form-group textarea {
    min-height: 92px;
    resize: vertical;
  }
  .form-group input:focus,
  .form-group textarea:focus,
  .form-group select:focus {
    outline: none;
    border-color: var(--moss-deep);
    box-shadow: 0 0 0 3px rgba(110,138,92,0.12);
  }
  .honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .radio-group {
    display: flex;
    gap: 0.45rem;
  }
  .radio-option {
    position: relative;
    flex: 1;
  }
  .radio-option input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
  }
  .radio-option label {
    display: block;
    height: 100%;
    padding: 0.58rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: var(--white);
    color: var(--ink-mid);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
  }
  .radio-option input:focus-visible + label {
    outline: 2px solid var(--moss);
    outline-offset: 2px;
  }
  .radio-option input:checked + label {
    border-color: var(--moss-deep);
    background: var(--moss-deep);
    color: var(--white);
  }
  .field-hint {
    color: var(--ink-light);
    font-size: 0.88rem;
  }
  .form-checkbox {
    position: relative;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    color: var(--ink-mid);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.55;
    text-transform: none;
  }
  .form-checkbox input {
    flex: 0 0 auto;
    width: 1.1rem;
    min-height: 1.1rem;
    margin-top: 0.2rem;
    accent-color: var(--moss-deep);
  }
  .form-submit {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
  }
  .form-submit button {
    padding: 0.78rem 1.35rem;
    border: 1px solid var(--moss-deep);
    border-radius: 999px;
    background: var(--moss-deep);
    color: var(--white);
    cursor: pointer;
    font: 500 0.78rem/1 var(--font-body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .form-submit button:hover { background: var(--stone); }
  .form-submit button:active { transform: translateY(1px); }
  .form-submit button:disabled { cursor: wait; opacity: 0.58; }
  .form-status {
    min-height: 1.4rem;
    color: var(--ink-mid);
    font-size: 0.9rem;
  }
  .form-status.success {
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--moss);
    border-radius: 0.75rem;
    background: var(--moss-pale);
    color: var(--moss-deep);
  }
  .form-status.error { color: #8f3427; }

  /* ── ANFAHRT ──
     Das Lasurblau der Wandbilder als geschlossene Fläche. */
  .section-anfahrt {
    background: var(--lasurblau-deep);
    color: var(--white);
    padding: 6rem 4rem;
  }
  .section-anfahrt h2 em.italic { color: var(--sonne); }
  .section-anfahrt .section-label {
    color: rgba(255,255,255,0.76);
  }
  .section-anfahrt h2,
  .section-anfahrt h2 em.italic,
  .section-anfahrt h3 {
    color: var(--white);
  }
  .section-anfahrt p {
    color: rgba(255,255,255,0.86);
  }
  .anfahrt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 3rem;
    align-items: start;
  }
  .anfahrt-cards { display: flex; flex-direction: column; gap: 1.2rem; }
  .anfahrt-card {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 1rem;
    padding: 1.6rem 1.8rem;
  }
  .anfahrt-card.card-terracotta { border-left: 3px solid var(--terracotta); }
  .anfahrt-card.card-moss { border-left: 3px solid var(--moss); }
  .anfahrt-card .anfahrt-card-label {
    font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
    color: rgba(255,255,255,0.74); margin-bottom: 0.4rem;
  }
  .anfahrt-card h3 {
    font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin-bottom: 0.5rem;
  }
  .anfahrt-card a { text-decoration: none; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.25); }
  .anfahrt-card.card-terracotta a:hover { color: var(--terracotta-light); border-color: var(--terracotta-light); }
  .anfahrt-card.card-moss a:hover { color: var(--moss-light); border-color: var(--moss-light); }
  .anfahrt-card p { font-size: 0.92rem; margin-top: 0.4rem; }

  .lageplan {
    background: var(--white);
    padding: 0.9rem 0.9rem 1.1rem;
    border-radius: 1rem;
    box-shadow: 0 26px 56px rgba(20, 26, 48, 0.4);
  }
  .lageplan img { width: 100%; height: auto; border-radius: 0.6rem; }
  .lageplan figcaption {
    margin-top: 0.8rem;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-light);
    text-align: center;
  }
  .lageplan-route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    margin-top: 0.9rem;
    padding: 0.7rem 1.2rem;
    background: var(--terracotta);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0 !important;
    border-radius: 999px;
    transition: background 0.25s ease;
  }
  .lageplan-route svg { width: 17px; height: 17px; }
  .lageplan-route:hover,
  .lageplan-route:focus-visible { background: var(--terracotta-deep); }

  .anfahrt-note {
    margin-top: 1.8rem;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.82);
    max-width: 60ch;
  }
  .kontakt-form-panel {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 4rem;
    margin-top: 5rem;
    padding-top: 4.5rem;
    border-top: 1px solid rgba(255,255,255,0.16);
  }
  .kontakt-form-intro p {
    max-width: 42ch;
    margin-top: 1rem;
  }
  .kontakt-form .form-group > label,
  .kontakt-form .form-checkbox {
    color: rgba(255,255,255,0.84);
  }
  .kontakt-form .form-group input,
  .kontakt-form .form-group textarea {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.07);
    color: var(--white);
  }
  .kontakt-form .form-group input:focus,
  .kontakt-form .form-group textarea:focus {
    border-color: var(--moss-light);
    background: rgba(255,255,255,0.1);
  }
  .kontakt-form .form-submit button {
    border-color: var(--moss-light);
    background: var(--moss-light);
    color: var(--stone);
  }
  .kontakt-form .form-status { color: rgba(255,255,255,0.82); }
  .kontakt-form .form-status.success {
    border-color: var(--moss-light);
    background: rgba(199,212,186,0.14);
    color: var(--white);
  }
  .kontakt-form .form-status.error { color: #ffd1c7; }

  /* ── FOOTER ── */
  .site-footer {
    background: #1F2E5A;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 2.4rem 4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
  }
  .footer-links { display: flex; gap: 1.8rem; flex-wrap: wrap; }
  .footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; border-bottom: 1px solid transparent; }
  .footer-links a:hover { border-bottom-color: rgba(255,255,255,0.4); }
  .footer-links .footer-group { display: flex; flex-direction: column; gap: 0.3rem; }
  .footer-links .footer-group-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 0.2rem; }

  /* ── RESPONSIVE ── */
  @media (max-width: 1080px) {
    .site-nav { padding: 1.2rem 2rem; }
    .site-nav.scrolled { padding: 0.8rem 2rem; }
    /* align-items: stretch, sonst richtet sich die Textspalte nach ihrer
       Inhaltsbreite und läuft aus dem Viewport heraus. */
    .hero { padding: 8rem 2rem 4rem; flex-direction: column; align-items: stretch; }
    .hero-left { max-width: 100%; }
    .hero-post-preview { max-width: 100%; }
    .hero::after {
      background-position: center 82%;
      background-size: 720px auto;
      mask-image: radial-gradient(ellipse 62% 34% at 50% 82%, #000 0%, #000 40%, transparent 84%);
      -webkit-mask-image: radial-gradient(ellipse 62% 34% at 50% 82%, #000 0%, #000 40%, transparent 84%);
      -webkit-mask-composite: source-over;
      mask-composite: add;
      opacity: 0.12;
    }
    .hero-right { margin-top: -8rem; margin-inline: -2rem; }
    .slider-bar { padding-inline: 2rem; }
    .leistung-feature { grid-template-columns: 1fr; }
    .practice-header, .termin-header, .rezept-header, .anfahrt-grid, .kontakt-form-panel {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .section-team, .practice-section, .section-termin, .section-rezept, .section-anfahrt, .site-footer { padding: 4.5rem 2rem; }
    .section-team::before {
      background-position: top -1rem right -10rem;
      background-size: min(112vw, 1040px) auto;
      opacity: 0.34;
    }
    .team-grid-aerztinnen,
    .team-grid-fachangestellte {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .leistungen-grid { grid-template-columns: repeat(2, 1fr); }
    .praxis-meta { grid-template-columns: 1fr; }
    .praxis-meta > div { padding: 2rem; }
    h2 { font-size: 2.4rem; }
  }

  @media (max-width: 760px) {
    .site-nav { padding: 1rem 1.4rem; }
    .nav-toggle { display: flex; }
    .hero {
      min-height: 0;
      gap: 2rem;
      padding-bottom: 2.5rem;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        'slider'
        'copy'
        'posts';
      align-items: start;
    }
    .hero-left { grid-area: copy; }
    .hero-right { grid-area: slider; }
    .hero-post-preview { grid-area: posts; }
    .hero-post-preview { margin-top: 0; }
    .hero-post-grid { grid-template-columns: repeat(2, 1fr); }
    .nav-links {
      position: absolute;
      top: 100%; left: 0; right: 0;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.4rem;
      background: var(--white);
      padding: 2rem 1.6rem;
      box-shadow: 0 18px 40px rgba(74,70,64,0.12);
      transform: translateY(-8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .site-nav.menu-open .nav-links {
      opacity: 1; transform: translateY(0); pointer-events: auto;
    }
    .hero-title { font-size: clamp(2.75rem, 13vw, 3.7rem); }
    .hero-title .hero-values {
      font-size: 0.43em;
    }
    .hero-value-line-indent { padding-left: 0.8em; }
    .hero-actions { flex-direction: column; }
    /* Mobil bleibt nur die ruhige Farbpunkteleiste sichtbar. Die Bilder
       lassen sich weiterhin direkt per Punkt und per Tastatur auswählen. */
    .slider-bar {
      bottom: 0.8rem;
      padding-inline: 1rem;
    }
    .slider-controls {
      width: 100%;
      justify-content: center;
    }
    .slider-step { display: none !important; }
    .slider-dots {
      justify-content: center;
      gap: 0;
      margin-inline: 0;
    }
    .slider-dot {
      width: 24px;
      height: 36px;
    }
    .slider-dot::before {
      width: 8px;
      height: 8px;
    }
    .slider-dot.is-active::before { transform: scale(1.4); }
    .termin-form,
    .rezept-form,
    .kontakt-form { grid-template-columns: 1fr; }
    .picker-fields { grid-template-columns: 1fr; }
    .form-group.full { grid-column: auto; }
    .radio-group { flex-direction: column; }
    .radio-option label {
      border-right: 1px solid var(--line);
      border-bottom: 0;
    }
    .radio-option:last-child label { border-bottom: 1px solid var(--line); }
    .hedge-divider {
      height: 92px;
      background-size: calc(100% - 2rem) auto, 100% 100%;
    }
    .section-team::before {
      background-position: top 1rem right -15rem;
      background-size: 190vw auto;
      opacity: 0.28;
    }
    .leistungen-grid { grid-template-columns: 1fr; }
    .site-footer { flex-direction: column; align-items: flex-start; }
  }

  /* Meldungen aus der Praxis (Banner unter der fixen Navigation) */
  .praxis-meldungen {
    position: relative;
    z-index: 10;
    margin-top: 78px;
  }
  .praxis-meldung {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.85rem clamp(1.25rem, 5vw, 4rem);
    border-left: 3px solid var(--sage);
    background: var(--sage-pale);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink);
  }
  .praxis-meldung + .praxis-meldung {
    border-top: 1px solid var(--sage-light);
  }
  .praxis-meldung-icon {
    flex: none;
    display: inline-flex;
    align-self: flex-start;
    margin-top: 0.2em;
    color: var(--sage);
  }
  .praxis-meldung-icon svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  .praxis-meldung-titel {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
    margin-right: 0.6rem;
  }
  .praxis-meldung-text {
    color: var(--ink-mid);
  }
  .praxis-meldung-warnung {
    border-left-color: var(--honey);
    background: var(--honey-pale);
  }
  .praxis-meldung-warnung .praxis-meldung-icon {
    color: var(--honey-text);
  }
  .praxis-meldung-wichtig {
    border-left-color: var(--slate);
    background: var(--white);
  }
  .praxis-meldung-wichtig .praxis-meldung-icon {
    color: var(--slate);
  }
  .zeiten-table td.geschlossen {
    color: var(--ink-light);
    font-style: italic;
  }