/* ============================================================
   BIRCH — Zahnarztpraxis Dr. med. dent. Mathias Birch
   Ein Stylesheet, elf Abschnitte. Kein Build, kein Sass.
   ============================================================ */

/* ============ 01 FONTS ============ */
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
/* Instrument Sans ist ein Variable Font — eine Datei deckt 400, 500 und 600 ab.
   Dateiname bleibt instrument-sans-400.woff2, damit der Preload in enqueue.php greift. */
@font-face{
  font-family:"Instrument Sans";
  src:url("../fonts/instrument-sans-400.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}

/* ============ 02 TOKENS ============ */
:root{
  /* --- Farben --- */
  --c-ink:            #182241;
  --c-brand:          #243159;
  --c-brand-deep:     #1A2444;
  --c-paper:          #F7F4EF;
  --c-sand:           #EDE8DE;
  --c-sand-soft:      #F5F1E8;
  --c-line:           #D9D3C4;
  --c-muted:          #6B6659;
  --c-steel:          #8494AB;  /* Kursiv-Akzent im Hero, Hover auf dunklen Buttons */

  --c-ink-72:  rgba(24,34,65,.72);
  --c-ink-58:  rgba(24,34,65,.58);
  --c-ink-50:  rgba(24,34,65,.50);
  --c-ink-25:  rgba(24,34,65,.25);
  --c-ink-12:  rgba(24,34,65,.12);
  --c-paper-75: rgba(247,244,239,.75);
  --c-paper-45: rgba(247,244,239,.45);
  --c-paper-16: rgba(247,244,239,.16);

  /* --- Schrift --- */
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-sans:  "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-hero:      clamp(40px, min(7vw, 9vh), 112px);
  --fs-h1:        clamp(32px, 3.5vw, 58px);
  --fs-h2:        clamp(34px, 4.4vw, 72px);
  --fs-h2-sm:     clamp(32px, 3.6vw, 60px);
  --fs-h3:        30px;
  --fs-quote:     clamp(22px, 2.2vw, 34px);
  --fs-body-lg:   17px;
  --fs-body:      16.5px;
  --fs-body-sm:   15.5px;
  --fs-ui:        14px;
  --fs-nav:       12.5px;
  --fs-label:     11px;
  --fs-num:       11.5px;

  --lh-tight:  .98;
  --lh-head:   1.06;
  --lh-body:   1.72;

  --ls-label:  .28em;
  --ls-nav:    .10em;
  --ls-hero:   .30em;
  --ls-head:   -.02em;

  /* --- Abstände --- */
  --sp-1: 6px;   --sp-2: 12px;  --sp-3: 18px;  --sp-4: 22px;
  --sp-5: 30px;  --sp-6: 44px;  --sp-7: 64px;  --sp-8: 88px;
  --sp-9: 120px;

  --sec-py:  clamp(88px, 8vw, 128px);
  --sec-px:  clamp(22px, 3vw, 48px);
  --wrap:      1500px;
  --wrap-text: 900px;

  /* --- Form --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-pill: 999px;
  --shadow-card: 0 20px 60px -20px rgba(24,34,65,.18);
  --shadow-pop:  0 18px 40px -24px rgba(24,34,65,.6), 0 0 0 1px rgba(24,34,65,.08);

  /* --- Bewegung --- */
  --ease:      cubic-bezier(.2,.7,.2,1);
  --t-fast:    .28s;
  --t-mid:     .45s;
  --t-slow:    .6s;
  --t-reveal:  .9s;
  --t-shrink:  .55s;

  /* --- Breakpoints (nur Dokumentation, Media Queries brauchen Literale) --- */
  --bp-nav: 880px;
  --bp-sm:  760px;
  --bp-xs:  560px;

  /* --- Höhen --- */
  --header-h:        88px;
  --header-h-small:  72px;
  --anchor-offset:  104px;
}

/* ============ 03 RESET ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--f-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:var(--c-brand); text-decoration:none; }
a:hover{ color:var(--c-ink); }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; }
h1,h2,h3,h4,p,blockquote,figure{ margin:0; }
::selection{ background:var(--c-brand); color:var(--c-paper); }

:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--c-brand);
  outline-offset:3px;
  border-radius:3px;
}
.is-dark :focus-visible,
.is-dark:focus-visible{ outline-color:var(--c-paper); }

:target,
[id]{ scroll-margin-top:var(--anchor-offset); }

/* ============ 04 TYPOGRAFIE ============ */
.t-hero{ font-family:var(--f-serif); font-weight:400; font-size:var(--fs-hero);
         line-height:var(--lh-tight); letter-spacing:var(--ls-head); text-wrap:balance; }
.t-h1{   font-family:var(--f-serif); font-weight:400; font-size:var(--fs-h1);
         line-height:var(--lh-head); letter-spacing:-.015em; text-wrap:pretty; }
.t-h2{   font-family:var(--f-serif); font-weight:400; font-size:var(--fs-h2);
         line-height:1.04; letter-spacing:var(--ls-head); text-wrap:pretty; }
.t-h3{   font-family:var(--f-serif); font-weight:400; font-size:var(--fs-h3); line-height:1.15; }
.t-quote{font-family:var(--f-serif); font-weight:400; font-style:italic;
         font-size:var(--fs-quote); line-height:1.35; }
.t-lead{ font-size:var(--fs-body-lg); line-height:1.75; color:var(--c-ink-72); max-width:52ch; }
.t-label{font-family:var(--f-sans); font-size:var(--fs-label); font-weight:500;
         letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--c-ink-58); }
.t-num{  font-family:var(--f-mono); font-size:var(--fs-num); letter-spacing:.14em; }

.is-dark .t-label{ color:var(--c-paper-45); }
.is-dark .t-lead{ color:var(--c-paper-75); }

/* ============ 05 LAYOUT / CONTAINER ============ */
.section{ padding:var(--sec-py) var(--sec-px); }
.section--dark{ background:var(--c-brand); color:var(--c-paper); }
.section--ink{ background:var(--c-ink); color:var(--c-paper); }
.section--sand{ background:var(--c-sand); }
.section--flush{ padding-left:0; padding-right:0; }
.wrap{ max-width:var(--wrap); margin-inline:auto; }
.wrap--text{ max-width:var(--wrap-text); margin-inline:auto; }

/* Sicherheitsnetz: Sollte WordPress den Zusatz-Container einer core/group doch
   wieder einhängen (siehe inc/setup.php), macht ihn diese Regel für das Raster
   durchsichtig, statt das Layout zerfallen zu lassen. */
.birch-main .wp-block-group__inner-container{ display:contents; }

/* Zweispalter mit Sticky-Kapitel-Label links — Kernraster des Designs */
.split{ display:grid; grid-template-columns:minmax(200px,1fr) minmax(0,2.1fr);
        gap:80px; max-width:var(--wrap); margin-inline:auto; }
.split__aside{ position:sticky; top:140px; align-self:start;
               display:flex; flex-direction:column; gap:14px; }
.split__rule{ width:44px; height:1px; background:var(--c-ink-25); }
.split__body{ display:flex; flex-direction:column; gap:var(--sp-6); }

.is-dark .split__rule{ background:var(--c-paper-16); }

@media (max-width:880px){
  .split{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .split__aside{ position:static; top:auto; }
}

/* Buttons — Maße aus den Design-Dateien:
   Pillenform, 13px, 52px hoch. Gefüllte Buttons stehen in 500, die
   umrandeten (Telefonnummer) in 400 — das ist der schmalere Schnitt,
   den 01-TOKENS-UND-CSS.md so nicht vorsah. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px;
  font-size:13px; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--r-pill);
  transition:background var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease);
}
.btn--primary,
.btn--on-dark{ font-weight:500; }
.btn--primary{ background:var(--c-brand); color:var(--c-paper); }
.btn--primary:hover{ background:var(--c-brand-deep); color:var(--c-paper); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--c-ink); box-shadow:inset 0 0 0 1px var(--c-ink-25); }
.btn--ghost:hover{ background:var(--c-sand); color:var(--c-ink); transform:translateY(-1px); }
.btn--on-dark{ background:var(--c-paper); color:var(--c-brand); }
.btn--on-dark:hover{ background:var(--c-sand); color:var(--c-brand-deep); }
.btn--outline-light{ background:transparent; color:var(--c-paper); box-shadow:inset 0 0 0 1px var(--c-paper-45); }
.btn--outline-light:hover{ background:var(--c-paper-16); color:var(--c-paper); transform:translateY(-1px); }
.btn__icon{ flex:none; transition:transform var(--t-mid) var(--ease); }
/* Nur ein nachgestelltes Icon wandert beim Hover — ein vorangestelltes würde
   sonst in die Beschriftung laufen. */
.btn:hover .btn__icon--end{ transform:translateX(3px); }

/* Textlink mit Pfeil — im Design durchgehend als „Mehr erfahren" */
.birch-arrowlink{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-ink-58);
  transition:color var(--t-mid) ease, gap var(--t-mid) var(--ease);
}
.birch-arrowlink:hover{ color:var(--c-ink); gap:16px; }
.is-dark .birch-arrowlink{ color:var(--c-paper-45); }
.is-dark .birch-arrowlink:hover{ color:var(--c-paper); }

/* ============ 06 HEADER + NAVIGATION ============ */
.birch-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:var(--c-paper);
  box-shadow:0 1px 0 var(--c-ink-12);
  transition:padding var(--t-shrink) var(--ease),
             box-shadow var(--t-shrink) ease;
  padding-block:22px;
}
.birch-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-inline:var(--sec-px);
}
.birch-header__logo{ flex:none; line-height:0; }
.birch-header__logo img{
  height:44px; width:auto;
  transition:height var(--t-shrink) var(--ease);
}

.birch-header.is-scrolled{ padding-block:14px; box-shadow:0 6px 24px -18px rgba(24,34,65,.5); }
.birch-header.is-scrolled .birch-header__logo img{ height:36px; }

.birch-nav{ display:flex; align-items:center; gap:clamp(14px,1.9vw,34px); min-width:0; }
.birch-nav__list{
  display:flex; align-items:center; gap:clamp(14px,1.9vw,34px);
  list-style:none;
}
.birch-nav__item{ position:relative; flex:none; }

.birch-nav__link{
  position:relative;
  display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap;
  font-size:var(--fs-nav); font-weight:500;
  letter-spacing:var(--ls-nav); text-transform:uppercase;
  color:var(--c-ink-72);
  transition:color var(--t-mid) ease;
}
.birch-nav__link:hover,
.birch-nav__link:focus-visible,
.is-current > .birch-nav__link{ color:var(--c-ink); }

.birch-nav__link--depth-0::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid) var(--ease);
}
.birch-nav__link--depth-0:hover::after,
.birch-nav__link--depth-0:focus-visible::after,
.is-current > .birch-nav__link--depth-0::after{ transform:scaleX(1); }

.birch-nav__chevron{ transition:transform var(--t-fast) var(--ease); }
.birch-nav__item.is-open > .birch-nav__link .birch-nav__chevron{ transform:rotate(180deg); }

/* Termin-Button im Kopf ist im Design etwas kleiner als die Buttons im Inhalt */
.birch-nav__cta{ min-height:46px; padding:0 24px; font-size:12.5px; }

/* Telefonnummer als eigener Punkt links vom Termin-Button */
.birch-nav__tel{
  display:inline-flex; align-items:center; gap:8px;
  flex:none; white-space:nowrap;
  font-size:var(--fs-nav); font-weight:500;
  letter-spacing:var(--ls-nav);
  color:var(--c-ink-72);
  transition:color var(--t-mid) ease;
}
.birch-nav__tel:hover,
.birch-nav__tel:focus-visible{ color:var(--c-ink); }
.birch-nav__tel .btn__icon{ color:var(--c-brand); }
/* Unter 980px wird es im Kopf zu eng — dort übernimmt die mobile Aktionsleiste. */
@media (max-width:980px){
  .birch-nav__tel{ display:none; }
}

/* --- Panel (Desktop) --- */
.birch-nav__sub{
  position:absolute; top:calc(100% + 14px); left:-18px;
  min-width:270px;
  display:flex; flex-direction:column;
  padding-block:10px;
  list-style:none;
  background:var(--c-paper);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-pop);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-fast) ease,
             transform var(--t-fast) ease,
             visibility var(--t-fast);
}
/* Unsichtbare Brücke: verhindert, dass das Panel im 14px-Spalt zuklappt */
.birch-nav__item--has-sub::before{
  content:""; position:absolute; top:100%; left:0; right:0; height:16px;
}
.birch-nav__item.is-open > .birch-nav__sub{
  opacity:1; visibility:visible; transform:translateY(0);
}
.birch-nav__sub .birch-nav__link{
  display:flex; width:100%;
  padding:10px 18px;
  font-size:var(--fs-ui); font-weight:400;
  letter-spacing:0; text-transform:none;
  color:var(--c-ink-72);
}
.birch-nav__sub .birch-nav__link:hover,
.birch-nav__sub .birch-nav__link:focus-visible{
  background:var(--c-sand); color:var(--c-ink);
}

/* Dritte Ebene: Desktop als eigene Spalte rechts am Panel */
.birch-nav__sub--level-2{
  position:absolute; top:-10px; left:100%;
  margin-left:2px;
  min-width:220px;
}
.birch-nav__item--depth-1{ position:relative; }
.birch-nav__item--depth-1.is-open > .birch-nav__sub--level-2{
  opacity:1; visibility:visible; transform:translateY(0);
}
.birch-nav__item--depth-1 > .birch-nav__link .birch-nav__chevron{
  transform:rotate(-90deg); margin-left:auto;
}
.birch-nav__item--depth-1.is-open > .birch-nav__link .birch-nav__chevron{
  transform:rotate(-90deg);
}

/* Mobiler Aufklapp-Schalter — im Desktop verborgen */
.birch-nav__toggle{ display:none; }
.birch-nav__back{ display:none; }

/* --- Burger --- */
.birch-burger{
  display:none;
  position:relative;
  width:48px; height:48px; flex:none;
  border-radius:var(--r-sm);
}
.birch-burger__bar{
  position:absolute; left:13px; right:13px; height:1.5px;
  background:var(--c-ink);
  transition:transform var(--t-mid) var(--ease), opacity var(--t-fast) ease;
}
.birch-burger__bar:nth-child(2){ transform:translateY(-4px); }
.birch-burger__bar:nth-child(3){ transform:translateY(4px); }
.birch-burger[aria-expanded="true"] .birch-burger__bar:nth-child(2){ transform:rotate(45deg); }
.birch-burger[aria-expanded="true"] .birch-burger__bar:nth-child(3){ transform:rotate(-45deg); }

.birch-nav-scrim{
  position:fixed; inset:0; z-index:55;
  background:rgba(24,34,65,.42);
  opacity:0; transition:opacity var(--t-mid) ease;
}
.birch-nav-scrim.is-visible{ opacity:1; }

body.has-nav-open{ overflow:hidden; }

/* Inhalt beginnt unter dem fixierten Header — außer beim Vollbild-Hero */
.birch-main{ padding-top:var(--header-h); }
body.is-front .birch-main{ padding-top:0; }

/* ============================================================
   MOBIL — unter 880px. Panel fährt von rechts ein.
   ============================================================ */
@media (max-width:880px){

  /* z-index über dem Panel: sonst liegt das Panel über dem Burger und
     das Menü lässt sich nicht mehr über das X schließen. */
  .birch-burger{ display:block; z-index:59; }

  .birch-nav{
    position:fixed; top:0; right:0; bottom:0; z-index:58;
    width:min(420px, 88vw);
    display:flex; flex-direction:column; align-items:stretch;
    gap:0;
    padding:calc(var(--header-h) + 24px) 0 40px;
    background:var(--c-paper);
    box-shadow:-24px 0 60px -30px rgba(24,34,65,.5);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    transform:translateX(100%);
    visibility:hidden;
    transition:transform var(--t-mid) var(--ease), visibility var(--t-mid);
  }
  .birch-nav.is-open{ transform:translateX(0); visibility:visible; }

  .birch-nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .birch-nav__item{ border-bottom:1px solid var(--c-ink-12); }

  /* Link + Plus-Schalter in einer Zeile */
  .birch-nav__item--has-sub{
    display:grid; grid-template-columns:1fr 56px; align-items:center;
  }
  .birch-nav__item--has-sub > .birch-nav__sub{ grid-column:1 / -1; }

  .birch-nav__link--depth-0{
    padding:18px 24px;
    font-size:15px; letter-spacing:.04em; text-transform:none;
    color:var(--c-ink);
  }
  .birch-nav__link--depth-0::after{ display:none; }
  .birch-nav__chevron{ display:none; }

  /* --- Plus / Minus --- */
  .birch-nav__toggle{
    display:grid; place-items:center;
    width:56px; height:56px;
    justify-self:end;
    position:relative;
  }
  .birch-nav__toggle-icon,
  .birch-nav__toggle-icon::before{
    content:""; position:absolute;
    background:var(--c-ink);
    transition:transform var(--t-fast) var(--ease), opacity var(--t-fast) ease;
  }
  .birch-nav__toggle-icon{ width:15px; height:1.5px; }
  .birch-nav__toggle-icon::before{ inset:0; transform:rotate(90deg); }
  .birch-nav__toggle[aria-expanded="true"] .birch-nav__toggle-icon::before{
    transform:rotate(90deg) scaleX(0);
  }

  /* --- Untermenü als Akkordeon --- */
  .birch-nav__sub{
    position:static; left:auto; top:auto;
    min-width:0;
    padding:0;
    background:var(--c-sand-soft);
    border-radius:0;
    box-shadow:none;
    opacity:1; visibility:visible; transform:none;
    display:block;
    max-height:0; overflow:hidden;
    transition:max-height var(--t-mid) var(--ease);
  }
  .birch-nav__item.is-open > .birch-nav__sub{ max-height:var(--sub-height, 1200px); }

  .birch-nav__sub .birch-nav__link{
    padding:15px 24px 15px 36px;
    font-size:15px;
  }
  .birch-nav__sub--level-2{
    position:static; margin-left:0;
    background:var(--c-sand);
  }
  .birch-nav__sub--level-2 .birch-nav__link{ padding-left:52px; }

  /* --- Zurück-Zeile --- */
  .birch-nav__back{
    display:none;
    order:-1;                 /* steht im Markup unter der Liste, gehört aber darüber */
    align-items:center; gap:12px;
    width:100%; padding:14px 24px;
    font-size:13px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--c-ink-58);
    border-bottom:1px solid var(--c-ink-12);
    text-align:left;
  }
  .birch-nav.has-open-sub .birch-nav__back{ display:flex; }
  .birch-nav__back-icon{
    width:8px; height:8px; flex:none;
    border-left:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);
  }

  .birch-nav__cta{ margin:24px; }
}

/* ============ 07 ANIMATIONS-LAYER ============ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* --- Reveal --- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--t-reveal) var(--ease),
             transform var(--t-reveal) var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
}
.js [data-reveal="left"]{  transform:translateX(-24px); }
.js [data-reveal="right"]{ transform:translateX(24px); }
.js [data-reveal="scale"]{ transform:scale(.97); }
.js [data-reveal="fade"]{  transform:none; }
.js [data-reveal].is-revealed{
  opacity:1;
  transform:none;
}

/* --- Hover-Zustände --- */
.birch-card{
  transition:transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.birch-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
}

@media (prefers-reduced-motion:reduce){
  .birch-card:hover,
  .birch-services__card:hover .birch-services__arrow,
  .birch-shots__figure:hover img{ transform:none; }
}

/* ============ 08 ABSCHNITTE (BEM, alphabetisch) ============ */

/* --- Mobile Aktionsleiste --- */
.birch-actionbar{ display:none; }

@media (max-width:880px){
  .birch-actionbar{
    position:fixed; inset:auto 0 0 0; z-index:56;
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--c-ink-12);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -10px 30px -20px rgba(24,34,65,.6);
  }
  .birch-actionbar__item{
    display:grid; place-items:center;
    min-height:56px;
    background:var(--c-paper); color:var(--c-ink);
    font-size:12.5px; font-weight:500;
    letter-spacing:var(--ls-nav); text-transform:uppercase;
    transition:background var(--t-fast) ease;
  }
  .birch-actionbar__item--accent{ background:var(--c-brand); color:var(--c-paper); }
  .birch-actionbar__item--accent:active{ background:var(--c-brand-deep); }

  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom)); }
  .birch-nav{ padding-bottom:calc(56px + 40px + env(safe-area-inset-bottom)); }
}

/* --- Terminband (cta-termin) --- */
.birch-cta{
  background:var(--c-brand);
  color:var(--c-paper);
  border-radius:var(--r-sm);
  padding:5rem var(--sec-px);
  margin-inline:var(--sec-px);
  display:grid; gap:var(--sp-5); justify-items:start;
}
.birch-cta--after-dark{ padding-top:5rem; }
.birch-cta__inner{
  max-width:var(--wrap); margin-inline:auto; width:100%;
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-6);
}
.birch-cta__text{ display:flex; flex-direction:column; gap:var(--sp-4); max-width:36ch; }
.birch-cta__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }

/* --- Parallax-CTA („Überzeugt?") --- */
.birch-cta--parallax{
  position:relative;
  overflow:hidden;
  background:var(--c-ink);
  color:var(--c-paper);
  display:grid; place-items:center;
  min-height:60svh;
  text-align:center;
  border-radius:0;
  margin-inline:0;
  padding:0;
}
.birch-cta__media{
  position:absolute; inset:-15% 0;
  will-change:transform;
}
.birch-cta__media img{
  width:100%; height:100%; object-fit:cover;
}
.birch-cta__media::after{
  content:""; position:absolute; inset:0;
  background:rgba(12,18,36,.6);
}
.birch-cta__body{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-5);
  padding:var(--sec-py) var(--sec-px);
}

@media (prefers-reduced-motion:reduce){
  .birch-cta__media{ inset:0; transform:none !important; }
}

/* --- FAQ --- */
/* Im Design zweispaltig: Kapitel und Überschrift links, die Fragen rechts. */
.birch-faq__inner{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:80px; align-items:start;
}
.birch-faq__head{ display:flex; flex-direction:column; gap:var(--sp-3); }
.birch-faq__head .t-h2{ font-size:clamp(28px,2.8vw,44px); line-height:1.12; }

.birch-faq__list{
  display:flex; flex-direction:column;
  border-top:1px solid var(--c-ink-12);
}

@media (max-width:880px){
  .birch-faq__inner{ grid-template-columns:minmax(0,1fr); gap:34px; }
}
.birch-faq__item{ border-bottom:1px solid var(--c-ink-12); }
.birch-faq__heading{ margin:0; font:inherit; }

.birch-faq__question{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  width:100%; min-height:64px;
  padding:24px 0;
  text-align:left;
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(19px,2vw,26px); line-height:1.3;
  color:var(--c-ink);
  transition:color var(--t-fast) ease;
}
.birch-faq__question:hover{ color:var(--c-brand); }

.birch-faq__icon{
  position:relative; flex:none;
  width:18px; height:18px;
}
.birch-faq__icon::before,
.birch-faq__icon::after{
  content:""; position:absolute; top:50%; left:0; right:0;
  height:1.5px; background:currentColor;
  transition:transform var(--t-fast) var(--ease), opacity var(--t-fast) ease;
}
.birch-faq__icon::after{ transform:rotate(90deg); }
.birch-faq__question[aria-expanded="true"] .birch-faq__icon::after{
  transform:rotate(90deg) scaleX(0);
}

.birch-faq__panel{
  overflow:hidden;
  max-height:0;
  transition:max-height var(--t-mid) var(--ease);
}
.birch-faq__panel.is-open{ max-height:var(--panel-height, 1000px); }
.birch-faq__answer{
  padding:0 0 30px;
  max-width:62ch;
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--c-ink-72);
}
.birch-faq__answer p + p{ margin-top:1em; }

/* Fallback: ohne JS ist alles offen */
.birch-faq__list:not([data-faq-ready]) .birch-faq__panel{ max-height:none; }

/* --- Fähnchen --- */
.birch-flags{
  position:fixed; right:0; top:calc(50% + 44px);
  transform:translateY(-50%);
  z-index:57;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
}
.birch-flags__item{
  display:flex; align-items:center;
  writing-mode:vertical-rl;
  padding:16px 12px;
  /* Das Fähnchen ragt immer 6px über den rechten Rand hinaus (dort abgeschnitten).
     Beim Hover fährt es genau diese 6px heraus — so bleibt es am Rand angewachsen,
     statt eine Lücke aufzureißen. */
  padding-right:18px;
  margin-right:-6px;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  background:var(--c-paper);
  color:var(--c-ink);
  font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  box-shadow:-6px 0 20px -14px rgba(24,34,65,.5);
  transition:transform var(--t-mid) var(--ease),
             background var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease);
}
.birch-flags__item:hover,
.birch-flags__item:focus-visible{
  transform:translateX(-6px);
  background:var(--c-sand);
  color:var(--c-ink);
}
/* writing-mode dreht die Schrift, ein SVG aber nicht — das Icon muss mit.
   Ohne die Drehung stünde der Hörer quer zur Nummer. */
.birch-flags__icon{
  flex:none;
  transform:rotate(90deg);
  margin-bottom:8px;
}
.birch-flags__item--accent{
  /* Länger, nicht dicker: bei writing-mode:vertical-rl läuft die Schrift senkrecht,
     die Länge steckt also in padding-top/-bottom. padding-block wäre die Dicke. */
  padding-top:24px;
  padding-bottom:24px;
  background:var(--c-brand);
  color:var(--c-paper);
}
.birch-flags__item--accent:hover,
.birch-flags__item--accent:focus-visible{
  background:var(--c-brand-deep);
  color:var(--c-paper);
}

@media (max-width:880px){ .birch-flags{ display:none; } }
@media (max-height:560px){ .birch-flags{ display:none; } }

/* --- Formular --- */
.birch-form{ display:flex; flex-direction:column; gap:var(--sp-5); max-width:640px; }
.birch-form__note{ font-size:13px; color:var(--c-muted); }
.birch-form__row{ display:flex; flex-direction:column; gap:8px; }
.birch-form__row--hidden{
  position:absolute; left:-9999px;
  width:1px; height:1px; overflow:hidden;
}
.birch-form__label{
  font-size:var(--fs-label); font-weight:500;
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--c-ink-58);
}
.birch-form__label abbr{ text-decoration:none; color:var(--c-brand); }

.birch-form__input,
.birch-form__select,
.birch-form__textarea{
  width:100%;
  min-height:52px;
  padding:14px 16px;
  font:inherit; font-size:var(--fs-ui);
  color:var(--c-ink);
  background:var(--c-paper);
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  transition:border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.birch-form__textarea{ min-height:150px; resize:vertical; line-height:1.6; }
.birch-form__input:focus,
.birch-form__select:focus,
.birch-form__textarea:focus{
  outline:none;
  border-color:var(--c-brand);
  box-shadow:0 0 0 3px rgba(36,49,89,.14);
}
.birch-form__select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23182241' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:44px;
}

.birch-form__consent{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-4);
  background:var(--c-sand-soft);
  border-radius:var(--r-sm);
}
.birch-form__consent-text{ font-size:14px; line-height:1.6; color:var(--c-ink-72); }
.birch-form__privacy{ font-size:13px; line-height:1.6; color:var(--c-muted); }

.wpcf7-not-valid-tip{ font-size:13px; color:#A6321F; }
.wpcf7-response-output{
  margin:0;
  padding:var(--sp-4);
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  font-size:14px;
}
.wpcf7 form.sent .wpcf7-response-output{ border-color:var(--c-brand); background:var(--c-sand-soft); }
.wpcf7-spinner{ margin-left:12px; }

.birch-search{ display:flex; gap:var(--sp-2); align-items:flex-start; }

/* --- Galerie --- */
/* Im Design steht die Impressionen-Sektion auf Papier, nicht auf Marine —
   03-INTERAKTIVE-BLOECKE.md gibt Marine vor, maßgeblich ist das Design. */
.birch-gallery{
  position:relative;
  background:var(--c-paper);
  color:var(--c-ink);
  height:var(--gallery-height, 100svh);
}
.birch-gallery__stage{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column; justify-content:center; gap:var(--sp-6);
  padding:var(--sec-py) 0;
  overflow:hidden;
}
.birch-gallery__head{
  padding-inline:var(--sec-px);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.birch-gallery__head .t-label{ color:var(--c-ink-58); }

.birch-gallery__viewport{ overflow:hidden; }

.birch-gallery__track{
  display:flex; gap:var(--sp-5);
  padding-inline:var(--sec-px);
  list-style:none;
  will-change:transform;
}
.birch-gallery__item{ flex:none; width:min(46vw, 620px); }
.birch-gallery__figure{ margin:0; display:flex; flex-direction:column; gap:14px; }
.birch-gallery__figure img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-sm);
  cursor:zoom-in;
  transition:transform var(--t-slow) var(--ease);
}
.birch-gallery__figure:hover img{ transform:scale(1.03); }
.birch-gallery__caption{
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--c-ink-58);
}
.birch-gallery__hint{
  padding-inline:var(--sec-px);
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--c-ink-50);
  transition:opacity var(--t-mid) ease;
}
.birch-gallery.is-complete .birch-gallery__hint{ opacity:0; }

.birch-gallery.is-simple{ height:auto; }
.birch-gallery.is-simple .birch-gallery__stage{
  position:static; height:auto; overflow:visible;
  padding:var(--sec-py) 0;
}
.birch-gallery.is-simple .birch-gallery__viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.birch-gallery.is-simple .birch-gallery__viewport::-webkit-scrollbar{ height:0; }
.birch-gallery.is-simple .birch-gallery__track{
  transform:none !important;
  will-change:auto;
}
.birch-gallery.is-simple .birch-gallery__item{
  width:min(78vw, 480px);
  scroll-snap-align:center;
}
.birch-gallery.is-simple .birch-gallery__hint{ display:none; }

@media (prefers-reduced-motion:reduce){
  .birch-gallery__figure:hover img{ transform:none; }
}

/* --- Hero (Startseite) --- */
@keyframes birch-hero-zoom{
  from{ transform:scale(1.02); }
  to  { transform:scale(1.16); }
}

.birch-hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--c-ink);
  color:var(--c-paper);
}
.birch-hero__media{ position:absolute; inset:0; overflow:hidden; }
.birch-hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  animation:birch-hero-zoom 28s ease-out forwards;
}
/* Zwei Verläufe wie im Design: flächig abdunkeln, unten zusätzlich für die Lesbarkeit. */
.birch-hero__media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(12,18,36,.82) 0%, rgba(12,18,36,.5) 46%, rgba(12,18,36,.5) 100%);
}
.birch-hero__media::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:62%; z-index:1;
  background:linear-gradient(to top, rgba(12,18,36,.8) 0%, rgba(12,18,36,.55) 45%, rgba(12,18,36,0) 100%);
}
.birch-hero__copy{
  position:relative; z-index:2;
  width:100%;
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-7);
  padding:116px var(--sec-px) 104px;
}
.birch-hero__main{ display:flex; flex-direction:column; gap:var(--sp-5); max-width:62ch; }
.birch-hero__kicker{
  font-size:var(--fs-label); font-weight:500;
  letter-spacing:var(--ls-hero); text-transform:uppercase;
  color:var(--c-paper-75);
}
/* Die Hero-Zeile ist bewusst KEINE Überschrift — das H1 trägt die Aussage mit
   Ortsbezug im Abschnitt darunter. Als <span> braucht sie display:block. */
.birch-hero__title{ display:block; }
.birch-hero__title em{ font-style:italic; color:var(--c-steel); }
.birch-hero__side{ display:flex; flex-direction:column; gap:var(--sp-5); max-width:42ch; }
.birch-hero__lead{ font-size:var(--fs-body-lg); line-height:1.75; color:var(--c-paper-75); }
.birch-hero__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); }

/* --- Google-Bewertung im Hero ---
   Bewusst OHNE AggregateRating-Markup: Google wertet Bewertungen über die eigene
   Einrichtung auf der eigenen Seite als self-serving und sperrt die Seite dann für
   Sterne-Rich-Results. Das Element wirkt nur auf der Seite, nicht in der Suche. */
.birch-rating{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:16px;
  padding:14px 22px;
  border-radius:var(--r-sm);
  background:rgba(247,244,239,.12);
  box-shadow:inset 0 0 0 1px var(--c-paper-16);
  color:var(--c-paper);
  transition:background var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.birch-rating:hover,
.birch-rating:focus-visible{
  background:rgba(247,244,239,.2);
  color:var(--c-paper);
  transform:translateY(-1px);
}
.birch-rating__score{
  font-family:var(--f-serif); font-weight:400;
  font-size:38px; line-height:1;
}
.birch-rating__body{ display:flex; flex-direction:column; gap:4px; }
.birch-rating__stars{ font-size:13px; letter-spacing:.16em; color:var(--c-sand); }
.birch-rating__source{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-paper-75);
}
.birch-hero__foot{
  position:absolute; z-index:2; left:var(--sec-px); right:var(--sec-px); bottom:36px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--c-paper-45);
}

@keyframes birch-scan{
  0%  { transform:translateY(-6vh); opacity:0; }
  12% { opacity:.9; }
  88% { opacity:.5; }
  100%{ transform:translateY(106vh); opacity:0; }
}
.birch-hero__scan{
  position:absolute; inset:0 0 auto 0; z-index:3;
  height:1px;
  background:linear-gradient(to right, transparent, var(--c-sand) 20%, var(--c-sand) 80%, transparent);
  animation:birch-scan 2.2s var(--ease) forwards;
  pointer-events:none;
}

@keyframes birch-hint{
  0%,100%{ transform:translateY(0);   opacity:.9; }
  50%    { transform:translateY(9px); opacity:.45; }
}
.birch-hero__hint{
  display:inline-flex; align-items:center; gap:12px;
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--c-paper-75);
  animation:birch-hint 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
  .birch-hero__media img{ animation:none; transform:scale(1.02); }
  .birch-hero__scan{ display:none; }
  .birch-hero__hint{ animation:none; }
}

@media (max-width:880px){
  .birch-hero__copy{ flex-direction:column; align-items:flex-start; padding:132px var(--sec-px) 120px; gap:var(--sp-6); }
  .birch-hero__foot{ display:none; }
}

/* --- Seitenkopf der Unterseiten --- */
.birch-hero-page{
  background:var(--c-sand);
  padding-top:calc(var(--sec-py) + 20px);
}
.birch-hero-page__inner{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.birch-hero-page__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-3); }

/* --- Seitenkopf der Unterseiten (Design-Variante mit Bild) --- */
.birch-pagehero{
  position:relative;
  display:flex; align-items:flex-end;
  min-height:min(58svh, 560px);
  padding:calc(var(--header-h) + var(--sp-8)) var(--sec-px) var(--sp-8);
  /* Im Design steht der Seitenkopf auf allen Unterseiten auf Tinte. */
  background:var(--c-ink);
  color:var(--c-paper);
  overflow:hidden;
}
.birch-pagehero__media{ position:absolute; inset:0; }
.birch-pagehero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.birch-pagehero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,18,36,.86) 0%, rgba(12,18,36,.55) 55%, rgba(12,18,36,.4) 100%);
}
.birch-pagehero__inner{
  position:relative; z-index:2;
  width:100%;
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.birch-pagehero__crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--c-paper-45);
}
.birch-pagehero__crumb + .birch-pagehero__crumb::before{
  content:"/"; margin-right:10px; opacity:.6;
}
.birch-pagehero__title{ max-width:22ch; }
.birch-pagehero__title{ color:var(--c-paper); }
.birch-pagehero__sub{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(18px,1.6vw,22px); line-height:1.4;
  color:var(--c-paper-75); max-width:44ch;
}

/* --- Behandlungsablauf --- */
.birch-ablauf__intro{
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--c-ink-72); max-width:56ch; margin-top:var(--sp-3);
}
/* Im Design sind das keine Karten, sondern zwei Spalten schlanker Zeilen
   mit Haarlinie darunter — Nummer in Stahl, Text in 16px. */
.birch-ablauf__list{
  list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 48px;
}
.birch-ablauf__step{
  display:flex; align-items:flex-start; gap:18px;
  padding:26px 0;
  border-bottom:1px solid var(--c-ink-12);
}
.birch-ablauf__num{ flex:none; color:var(--c-ink-50); }
.birch-ablauf__body{ display:flex; flex-direction:column; gap:8px; }
.birch-ablauf__title{ font-family:var(--f-sans); font-size:16px; line-height:1.6; color:var(--c-ink-72); }
.birch-ablauf__text{ font-size:var(--fs-body-sm); line-height:1.65; color:var(--c-ink-58); }

.is-dark .birch-ablauf__step{ border-bottom-color:var(--c-paper-16); }
.is-dark .birch-ablauf__num{ color:var(--c-steel); }
.is-dark .birch-ablauf__title{ color:rgba(247,244,239,.86); }
.is-dark .birch-ablauf__text{ color:var(--c-paper-75); }

/* --- Leistungsliste, zwei Varianten wie im Design --- */

/* A · Karten auf Sand — für Punkte mit Kurztext */
.birch-liste{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
}
.birch-liste__item{
  display:flex; flex-direction:column; gap:16px;
  padding:36px 34px 34px;
  background:var(--c-sand);
  color:var(--c-ink);
  border-radius:var(--r-sm);
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
a.birch-liste__item:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 50px -34px rgba(12,18,36,.5);
  color:var(--c-ink);
}
.birch-liste__num{ flex:none; color:var(--c-ink-50); }
.birch-liste__title{ font-size:26px; line-height:1.2; }
.birch-liste__text{ font-size:var(--fs-body-sm); line-height:1.72; color:rgba(24,34,65,.7); flex:1; }
.birch-liste__item .birch-services__arrow{
  margin-top:auto; color:var(--c-ink-50);
}
a.birch-liste__item:hover .birch-services__arrow{ transform:translateX(6px); color:var(--c-ink); }

/* B · Schlanke Zeilen — für Punkte ohne Kurztext, wie beim Ablauf */
.birch-liste--rows{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 48px;
}
.birch-liste__row{
  display:flex; align-items:flex-start; gap:18px;
  padding:26px 0;
  border-bottom:1px solid var(--c-ink-12);
  color:var(--c-ink);
}
.birch-liste__rowtext{ font-size:16px; line-height:1.6; color:var(--c-ink-72); }
.is-dark .birch-liste__row{ border-bottom-color:var(--c-paper-16); color:var(--c-paper); }
.is-dark .birch-liste__num{ color:var(--c-steel); }
.is-dark .birch-liste__rowtext{ color:rgba(247,244,239,.86); }

/* --- Weitere Leistungen --- */
.birch-weitere{ padding-top:120px; }
.birch-weitere__inner{ display:flex; flex-direction:column; gap:var(--sp-5); }
.birch-weitere__links{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;
}
.birch-weitere__link{
  display:flex; align-items:center;
  min-height:96px; padding:24px 28px;
  background:var(--c-paper); color:var(--c-ink);
  box-shadow:0 0 0 1px var(--c-line);
  font-family:var(--f-serif); font-size:22px; line-height:1.25;
  transition:background var(--t-mid) var(--ease);
}
.birch-weitere__link:hover{ background:var(--c-sand); color:var(--c-ink); }

/* --- Terminband am Seitenende --- */
.birch-cta-section{ padding-inline:0; }
.birch-textsplit__figure{ margin:0; }
.birch-textsplit__figure img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-sm);
}

/* Karten und Linien in dunklen Abschnitten */
.is-dark .birch-liste__item{ background:var(--c-brand-deep); color:var(--c-paper); }
.is-dark .birch-liste__title{ color:var(--c-paper); }
.is-dark .birch-liste__text{ color:var(--c-paper-75); }
.is-dark .birch-weitere__link{ background:var(--c-brand-deep); color:var(--c-paper); box-shadow:0 0 0 1px var(--c-paper-16); }
.is-dark .birch-kontakt__group{ border-top-color:var(--c-paper-16); }
.is-dark .birch-kontakt__label{ color:var(--c-paper-45); }
.is-dark .birch-kontakt__value{ color:var(--c-paper-75); }
.is-dark .birch-intro__text,
.is-dark .birch-portrait__text{ color:var(--c-paper-75); }
.is-dark .birch-intro__sub{ color:var(--c-paper-45); }
.is-dark .split__rule{ background:var(--c-paper-16); }
.is-dark .birch-faq__item,
.is-dark .birch-faq__list{ border-color:var(--c-paper-16); }
.is-dark .birch-faq__question{ color:var(--c-paper); }
.is-dark .birch-faq__answer{ color:var(--c-paper-75); }

/* --- Kontakt und Sprechzeiten --- */
.birch-kontakt__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-6);
}
.birch-kontakt__group{
  display:flex; flex-direction:column; gap:10px;
  padding-top:18px;
  border-top:1px solid var(--c-ink-25);
}
.birch-kontakt__label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-58);
}
.birch-kontakt__value{ font-size:var(--fs-body-sm); line-height:1.7; color:var(--c-ink-72); }

@media (max-width:760px){
  .birch-weitere{ padding-top:64px; }
  .birch-ablauf__step,
  .birch-liste__item{ padding:30px 24px; }
}

/* --- Rechtstexte --- */
.birch-legal{ max-width:70ch; margin-inline:auto; }
.birch-legal h2{ font-family:var(--f-serif); font-weight:400; font-size:30px;
                 line-height:1.2; margin-top:var(--sp-7); }
.birch-legal h3{ font-size:19px; font-weight:600; margin-top:var(--sp-5); }
.birch-legal p{ font-size:var(--fs-body); line-height:var(--lh-body);
                color:var(--c-ink-72); }
.birch-legal p + p{ margin-top:1em; }
.birch-legal ul{ padding-left:1.2em; list-style:disc; color:var(--c-ink-72); }
.birch-legal a{ text-decoration:underline; text-underline-offset:3px; }

/* --- Lightbox --- */
/* Pflicht: display:grid würde sonst das hidden-Attribut aushebeln und die
   unsichtbare Hülle läge über der ganzen Seite — kein Klick käme mehr durch. */
.birch-lightbox[hidden]{ display:none; }
.birch-lightbox{
  position:fixed; inset:0; z-index:90;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(8px,2vw,28px);
  padding:clamp(16px,4vw,56px);
  background:rgba(24,34,65,.94);
  opacity:0; transition:opacity var(--t-fast) ease;
}
.birch-lightbox.is-open{ opacity:1; }
.birch-lightbox__figure{ margin:0; display:flex; flex-direction:column; gap:16px; min-width:0; }
.birch-lightbox__img{
  max-width:100%; max-height:78svh;
  margin-inline:auto;
  object-fit:contain; border-radius:var(--r-sm);
  transition:opacity var(--t-fast) ease;
}
.birch-lightbox.is-swapping .birch-lightbox__img{ opacity:0; }
.birch-lightbox__caption{
  text-align:center;
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--c-paper-45);
}
.birch-lightbox__nav,
.birch-lightbox__close{
  position:relative;
  width:48px; height:48px; flex:none;
  border-radius:var(--r-pill);
  color:var(--c-paper);
  transition:background var(--t-fast) ease;
}
.birch-lightbox__nav:hover,
.birch-lightbox__close:hover{ background:var(--c-paper-16); }
.birch-lightbox__nav::before{
  content:""; position:absolute; top:50%; left:50%;
  width:11px; height:11px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
}
.birch-lightbox__nav--next::before{ transform:translate(-60%,-50%) rotate(45deg); }
.birch-lightbox__nav--prev::before{ transform:translate(-40%,-50%) rotate(-135deg); }
.birch-lightbox__close{ position:absolute; top:20px; right:20px; }
.birch-lightbox__close::before,
.birch-lightbox__close::after{
  content:""; position:absolute; top:50%; left:14px; right:14px;
  height:1.5px; background:currentColor;
}
.birch-lightbox__close::before{ transform:rotate(45deg); }
.birch-lightbox__close::after{ transform:rotate(-45deg); }

@media (max-width:760px){
  .birch-lightbox{ grid-template-columns:1fr; }
  .birch-lightbox__nav{ position:absolute; bottom:24px; }
  .birch-lightbox__nav--prev{ left:24px; }
  .birch-lightbox__nav--next{ right:24px; }
}

/* --- Karte --- */
.birch-map{ display:flex; flex-direction:column; gap:var(--sp-3); }
.birch-map__frame{
  position:relative;
  height:600px;
  overflow:hidden;
  border-radius:var(--r-sm);
  background:var(--c-sand);
}
.birch-map__iframe{ display:block; width:100%; height:100%; border:0; }
.birch-map__fallback{ font-size:13px; color:var(--c-muted); }
.birch-map__fallback a{ text-decoration:underline; text-underline-offset:3px; }

.BorlabsCookie .birch-map__frame .brlbs-content-blocker{
  display:grid; place-items:center; height:100%;
  padding:var(--sp-6);
  text-align:center;
  background:var(--c-sand);
}
.BorlabsCookie ._brlbs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 26px;
  background:var(--c-brand); color:var(--c-paper);
  font-size:var(--fs-nav); font-weight:500;
  letter-spacing:var(--ls-nav); text-transform:uppercase;
  border-radius:var(--r-sm);
}
.BorlabsCookie ._brlbs-btn:hover{ background:var(--c-brand-deep); color:var(--c-paper); }

@media (max-width:760px){
  .birch-map__frame{ height:420px; }
}

/* --- Leistungen (Raster auf Marine) --- */
.birch-services__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-5);
  margin-bottom:var(--sp-8);
}
.birch-services__heading{ display:flex; flex-direction:column; gap:var(--sp-4); }
.birch-services__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--c-paper-16);
}
.birch-services__card{
  display:flex; flex-direction:column; gap:var(--sp-3);
  min-height:300px;
  padding:44px 38px 40px;
  background:var(--c-brand);
  transition:background var(--t-slow) var(--ease);
}
.birch-services__card:hover{ background:var(--c-brand-deep); }
.birch-services__num{ color:var(--c-paper-45); }
.birch-services__card .t-h3{ color:var(--c-paper); }
.birch-services__text{ font-size:var(--fs-body-sm); line-height:1.7; color:var(--c-paper-75); }
.birch-services__arrow{
  margin-top:auto;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-paper-45);
  transition:transform var(--t-slow) var(--ease), color var(--t-slow) ease;
}
.birch-services__card:hover .birch-services__arrow{
  transform:translateX(6px); color:var(--c-paper);
}
@media (max-width:880px){
  .birch-services__grid{ grid-template-columns:minmax(0,1fr); }
}

/* --- Highlights (drei Gründe + Sprechzeiten-Karte) --- */
.birch-highlights__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:80px;
  max-width:var(--wrap); margin-inline:auto;
}
.birch-highlights__col{ display:flex; flex-direction:column; gap:52px; }
.birch-highlights__head{ display:flex; flex-direction:column; gap:var(--sp-3); }
.birch-highlights__head .t-h2{ font-size:var(--fs-h2-sm); line-height:1.1; max-width:18ch; }
.birch-highlights__list{ display:flex; flex-direction:column; }
.birch-highlights__item{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:baseline;
  padding:30px 0;
  border-top:1px solid rgba(24,34,65,.16);
}
.birch-highlights__item:last-child{ border-bottom:1px solid rgba(24,34,65,.16); }
.birch-highlights__num{ color:var(--c-ink-50); }
.birch-highlights__title{ font-size:28px; line-height:1.2; }
.birch-highlights__text{ font-size:var(--fs-body-sm); line-height:1.6; color:rgba(24,34,65,.66); max-width:46ch; }
.birch-highlights__body{ display:flex; flex-direction:column; gap:10px; }

.birch-hours{
  align-self:start;
  display:flex; flex-direction:column; gap:var(--sp-5);
  padding:52px 44px 46px;
  background:var(--c-brand); color:var(--c-paper);
  border-radius:var(--r-sm);
}
.birch-hours__list{ margin:0; display:flex; flex-direction:column; }
.birch-hours__row{
  display:flex; justify-content:space-between; gap:20px;
  padding:15px 0;
  font-size:var(--fs-body-sm);
  border-bottom:1px solid var(--c-paper-16);
}
.birch-hours__row:last-child{ border-bottom:0; }
.birch-hours__row dt,
.birch-hours__row dd{ margin:0; }
.birch-hours__row dd{ color:var(--c-paper-75); }
/* Heutiger Tag — JS setzt .is-today (siehe assets/js/blocks.js) */
.birch-hours__row.is-today{
  color:var(--c-paper); font-weight:500;
  border-left:2px solid var(--c-steel);
  padding-left:12px;
  margin-left:-14px;
}
.birch-hours__row.is-today dd{ color:var(--c-paper); }
.birch-hours__note{ font-size:14px; line-height:1.6; color:var(--c-paper-75); }
.birch-hours__actions{ display:flex; flex-direction:column; gap:var(--sp-2); }

@media (max-width:760px){
  .birch-highlights__grid{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .birch-hours{ padding:38px 26px 34px; }
}

/* --- Intro (Kapitel-Label links, Text rechts, Kennzahlen) --- */
.birch-intro__title{ max-width:19ch; }
.birch-intro__title em{ font-style:italic; color:var(--c-brand); }
.birch-intro__sub{
  font-family:var(--f-sans); font-size:13px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--c-ink-50);
}
.birch-intro__cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--sp-6); max-width:900px;
}
.birch-intro__text{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--c-ink-72); }

.birch-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:40px;
  padding-top:16px;
  border-top:1px solid var(--c-ink-12);
}
.birch-stats__item{ display:flex; flex-direction:column; gap:var(--sp-1); }
.birch-stats__value{ font-family:var(--f-serif); font-weight:400; font-size:46px; line-height:1; }
.birch-stats__label{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-ink-50);
}

/* --- Termin-Split (Bild links, Marine-Fläche rechts) --- */
.birch-appointment-split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  align-items:stretch;
  margin-top:var(--sp-8);
  min-height:420px;
  background:var(--c-brand); color:var(--c-paper);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.birch-appointment-split__media{ position:relative; min-height:300px; background:var(--c-ink); }
.birch-appointment-split__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.birch-appointment-split__body{
  display:flex; flex-direction:column; justify-content:center; gap:var(--sp-5);
  padding:64px 56px;
}
.birch-appointment-split__head{ display:flex; flex-direction:column; gap:var(--sp-2); max-width:24ch; }
.birch-appointment-split__title{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(26px,2.6vw,40px); line-height:1.12; text-wrap:pretty;
}
.birch-appointment-split__text{ font-size:var(--fs-body-sm); line-height:1.65; color:var(--c-paper-75); max-width:34ch; }
.birch-appointment-split__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

@media (max-width:880px){
  .birch-appointment-split{ grid-template-columns:minmax(0,1fr); margin-top:56px; min-height:0; }
  .birch-appointment-split__media{ min-height:220px; }
  .birch-appointment-split__body{ padding:36px 24px 40px; }
}

/* --- Praxis-Porträt (Bild sticky links, Text rechts) --- */
.birch-portrait{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:90px;
  max-width:var(--wrap); margin-inline:auto;
}
.birch-portrait__media{ position:sticky; top:120px; align-self:start; }
.birch-portrait__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-sm);
}
.birch-portrait__body{ display:flex; flex-direction:column; gap:40px; padding-top:30px; }
.birch-portrait__title{ font-size:var(--fs-h2-sm); line-height:1.08; max-width:20ch; }
.birch-portrait__text{ font-size:17px; line-height:1.75; color:rgba(24,34,65,.74); max-width:52ch; }
.birch-portrait__quote{
  padding:34px 0 34px 34px;
  border-left:1px solid rgba(36,49,89,.3);
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(22px,2.2vw,32px); line-height:1.32;
  color:var(--c-brand);
  /* Das Design misst 32ch OHNE das linke Padding (content-box). Unser Reset
     stellt border-box, deshalb muss das Padding aufgeschlagen werden — sonst
     ist die Zeile 34px zu schmal und bricht um. Ein zusätzliches ch als
     Reserve: bei exakt 32ch trifft der Satz die Grenze auf den Pixel genau
     und kippt durch Rundung doch in die zweite Zeile. */
  max-width:calc(33ch + 34px);
}
.birch-portrait__facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 36px; padding-top:8px;
}
.birch-portrait__fact{
  display:flex; flex-direction:column; gap:8px;
  padding-top:18px;
  border-top:1px solid rgba(24,34,65,.14);
}
.birch-portrait__fact-label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-58);
}
.birch-portrait__fact-value{ font-size:var(--fs-body-sm); line-height:1.5; color:rgba(24,34,65,.75); }

@media (max-width:880px){
  .birch-portrait{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .birch-portrait__media{ position:static; }
  .birch-portrait__body{ padding-top:0; }
  .birch-portrait__facts{ grid-template-columns:minmax(0,1fr); }
}

/* --- Bewertungen --- */
.birch-reviews__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:36px; margin-bottom:60px;
}
.birch-reviews__heading{ display:flex; flex-direction:column; gap:var(--sp-3); }
.birch-reviews__heading .t-h2{ font-size:var(--fs-h2-sm); line-height:1.1; max-width:20ch; }
/* Im Design steht „4,9 ★★★★★ Google-Bewertungen" in einer Zeile und
   „Mehr Bewertungen lesen" DARUNTER — nicht alles nebeneinander. */
.birch-reviews__rating{ display:flex; align-items:baseline; gap:14px; }
.birch-reviews__meta{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.birch-reviews__stars-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; }
.birch-reviews__score{ font-family:var(--f-serif); font-weight:400; font-size:54px; line-height:1; }
.birch-reviews__stars{ letter-spacing:.16em; color:var(--c-brand); font-size:14px; }
.birch-reviews__source{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-50); }
.birch-reviews__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px;
}
.birch-reviews__card{
  margin:0;
  display:flex; flex-direction:column; gap:22px;
  padding:38px 34px;
  background:var(--c-sand);
  border-radius:var(--r-sm);
}
.birch-reviews__card .birch-reviews__stars{ font-size:13px; }
.birch-reviews__quote{ font-family:var(--f-serif); font-weight:400; font-size:22px; line-height:1.4; }
.birch-reviews__source-note{
  margin-top:auto;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-ink-50);
}

/* --- Team --- */
.birch-team__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:36px; margin-bottom:64px;
}
.birch-team__heading{ display:flex; flex-direction:column; gap:var(--sp-3); }
.birch-team__heading .t-h2{ font-size:clamp(30px,3.2vw,52px); line-height:1.1; max-width:20ch; }
/* Feste Dreierreihe statt auto-fit: bei sechs Personen ergäbe auto-fit auf breiten
   Bildschirmen 4 + 2 statt zwei sauberer Reihen à 3.
   Die Breite ist gedeckelt, damit die Porträts nicht überbreit werden — und
   margin-inline:0, weil .wrap sonst zentriert und das Raster gegen die
   Überschrift verrutscht. */
.birch-team__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
  max-width:1140px;
  margin-inline:0;
}
.birch-team__card{ margin:0; display:flex; flex-direction:column; gap:20px; }
.birch-team__card img{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 20%;
  border-radius:var(--r-sm);
}

@media (max-width:880px){
  .birch-team__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
}
@media (max-width:560px){
  .birch-team__grid{ grid-template-columns:minmax(0,1fr); }
}
.birch-team__caption{
  display:flex; flex-direction:column; gap:7px;
  padding-top:16px;
  border-top:1px solid rgba(24,34,65,.16);
}
.birch-team__name{ font-family:var(--f-serif); font-weight:400; font-size:27px; line-height:1.15; }
.birch-team__role{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-ink-50); }
.birch-team__vita{
  align-self:flex-start;
  margin-top:8px;
  min-height:46px; padding:0 22px;
  font-size:12px; letter-spacing:var(--ls-nav);
}

/* --- Abschnittskopf, überall gleich --- */
.birch-sectionhead{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:40px;
  max-width:var(--wrap); margin-inline:auto;
  margin-bottom:var(--sp-8);
}
.birch-sectionhead__group{ display:flex; flex-direction:column; gap:var(--sp-4); }
.birch-sectionhead__note{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-ink-50); white-space:nowrap;
}

/* --- Impressionen (statisches Raster) --- */
.birch-shots__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--sp-5);
}
.birch-shots__figure{ margin:0; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.birch-shots__figure img{
  aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-sm);
  transition:transform var(--t-slow) ease-out;
}
.birch-shots__figure:hover img{ transform:scale(1.06); }
.birch-shots__caption{
  font-size:var(--fs-label); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--c-ink-58);
}

/* ============ 09 FOOTER ============ */
.birch-footer{
  background:var(--c-ink);
  color:var(--c-paper);
  padding:96px var(--sec-px) 40px;
}
.birch-footer__brand{ margin-bottom:56px; }
.birch-footer__logo{ height:46px; width:auto; }

.birch-footer__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:56px; align-items:start;
}
.birch-footer__col{ display:flex; flex-direction:column; gap:var(--sp-3); }
.birch-footer__title{
  font-family:var(--f-sans);
  font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--c-paper-45);
}
.birch-footer__text{ font-size:15px; line-height:1.9; color:rgba(247,244,239,.74); }
/* :not(.btn) ist Pflicht — sonst überschreibt diese Regel die Schriftfarbe des
   hellen Buttons und der Text steht papierfarben auf papierfarbenem Grund. */
.birch-footer a:not(.btn){ color:rgba(247,244,239,.78); }
.birch-footer a:not(.btn):hover{ color:var(--c-paper); }
.birch-footer .btn--on-dark{ color:var(--c-brand); }
.birch-footer .btn--on-dark:hover{ color:var(--c-brand-deep); }
.birch-footer__tel{
  font-size:15px; letter-spacing:.04em;
  border-bottom:1px solid var(--c-paper-45);
  padding-bottom:3px;
}
.birch-footer__cta{ align-self:flex-start; min-height:50px; padding:0 24px; }

.birch-footer__list{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.birch-footer__list a{ font-size:15px; color:rgba(247,244,239,.78); }
.birch-footer__list a:hover{ color:var(--c-paper); }

.birch-footer__hours{
  margin:0;
  display:grid; grid-template-columns:auto 1fr; gap:6px 28px;
  font-size:15px; line-height:1.8;
}
.birch-footer__hours-row{ display:contents; }
.birch-footer__hours dt{ margin:0; color:rgba(247,244,239,.74); }
.birch-footer__hours dd{ margin:0; color:rgba(247,244,239,.74); text-align:right; }
.birch-footer__note{ font-size:12.5px; line-height:1.6; color:var(--c-paper-45); }

.birch-footer__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-4);
  margin-top:70px;
  padding-top:26px;
  border-top:1px solid rgba(247,244,239,.14);
}
.birch-footer__copy{ font-size:12.5px; color:rgba(247,244,239,.5); }
.birch-footer__legal{
  list-style:none; display:flex; gap:24px;
  font-size:12.5px;
}
.birch-footer__legal a{ color:rgba(247,244,239,.5); }
.birch-footer__legal a:hover{ color:var(--c-paper); }

@media (max-width:880px){
  .birch-footer{ padding-bottom:calc(var(--sp-6) + 56px + env(safe-area-inset-bottom)); }
}

/* ============ 10 UTILITIES (nur a11y) ============ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:16px; top:-64px; z-index:200;
  padding:14px 22px; background:var(--c-brand); color:var(--c-paper);
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--r-pill); transition:top var(--t-fast) ease;
}
.skip-link:focus{ top:14px; color:var(--c-paper); }

/* ============ 11 PRINT ============ */
@media print{
  .birch-header,
  .birch-flags,
  .birch-actionbar,
  .birch-nav-scrim,
  .birch-lightbox,
  .birch-cta,
  .skip-link{ display:none; }
  body{ background:#fff; color:#000; padding:0; }
  .js [data-reveal]{ opacity:1; transform:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; }
}