/* ============================================================
   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;
}
/* Echte Kursive, in zwei Teilmengen wie bei Google — sonst stellt der Browser
   die Aufrechte schraeg und die Betonung „Zeit nimmt" sieht billig aus. */
@font-face{
  font-family:"Instrument Sans";
  src:url("../fonts/instrument-sans-400-italic.woff2") format("woff2");
  font-weight:400 600; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("../fonts/instrument-sans-400-italic-ext.woff2") format("woff2");
  font-weight:400 600; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============ 02 TOKENS ============ */
:root{
  /* --- Farben --- */
  --c-ink:            #182241;
  --c-brand:          #243159;
  --c-brand-deep:     #1A2444;
  --c-paper:          #FAF7F1;
  --c-sand:           #F1ECE2;
  --c-sand-soft:      #F8F5EE;
  --c-line:           #D9D3C4;
  --c-muted:          #6B6659;
  --c-steel:          #8494AB;  /* Kursiv-Akzent im Hero, Hover auf dunklen Buttons */
  /* Derselbe Ton, so weit aufgehellt, dass 12-px-Ziffern auf Marine 4,5:1 erreichen.
     --c-steel bleibt unangetastet: es traegt den Hero-Akzent in grosser Schrift. */
  --c-steel-text:     #9DAEC4;

  --c-ink-72:  rgba(24,34,65,.72);
  --c-ink-70:  rgba(24,34,65,.70);
  --c-ink-66:  rgba(24,34,65,.66);
  --c-ink-25:  rgba(24,34,65,.25);
  --c-ink-12:  rgba(24,34,65,.12);
  --c-paper-75: rgba(250,247,241,.75);
  --c-paper-60: rgba(250,247,241,.60);
  --c-paper-16: rgba(250,247,241,.16);

  /* --- Schrift --- */
  /* Anzeigeschrift. Auf --f-serif zurueckstellen, wenn die Serife zurueck soll. */
  --f-display: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --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;

  /* Anzeige — fluid, damit die Skala auf jedem Bildschirm stimmt */
  --fs-hero:      clamp(38px, min(5.6vw, 7.4vh), 84px);
  --fs-h1:        clamp(30px, 3.2vw, 48px);
  --fs-h2:        clamp(32px, 3.6vw, 52px);
  --fs-h2-sm:     clamp(28px, 2.8vw, 44px);
  --fs-h3:        clamp(20px, 2vw, 26px);
  --fs-quote:     clamp(22px, 2.2vw, 32px);
  /* Fluid: bei 480 und 720px Sichtfeld war die Spalte 191px schmal, „07–20 Uhr"
     braucht bei 46px aber 216px und brach um. Bei 34px sind es 160px. */
  --fs-display:   clamp(34px, 3.4vw, 46px);

  /* Fliesstext — zwei Stufen. --fs-body-lg (17px) ist am 05.09.2026
     entfallen: 0,5px Unterschied zu --fs-body sind keine Stufe, sondern
     Rauschen. Lead-Absaetze unterscheiden sich ueber Zeilenhoehe und Farbe. */
  --fs-body:      16.5px;
  --fs-body-sm:   15.5px;

  /* Klein — zwei Stufen mit klarer Rolle, vorher waren es sieben.
     --fs-small (14px) ist am 05.09.2026 entfallen: seit --fs-ui auf 15px
     steht, lag es einen Pixel darunter und trug keine eigene Rolle mehr. */
  /* 05.09.2026 von 13 auf 15px. Der Entwurf setzte die Navigation auf 12,5px
     in VERSALIEN (Buchstabenhöhe ~9px). Seit --tt-label:none sind es
     Kleinbuchstaben, deren x-Höhe in Instrument Sans nur ~0,53em misst — bei
     13px also 6,9px. Die Schrift war nominell größer und wirkte kleiner.
     Wer --tt-label zurück auf uppercase stellt, muss diesen Wert mitdrehen. */
  --fs-ui:        15px;              /* Navigation, Buttons, Hinweise */
  --fs-meta:      12px;              /* Labels, Ordnungszahlen, Rollen */

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

  /* Ein Token entscheidet ueber alle Versalien. Auf `uppercase` stellen = zurueck. */
  --tt-label:  none;

  --ls-label:  .06em;
  --ls-nav:    .03em;
  --ls-hero:   .01em;
  --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-focus: 3px;   /* nur der Fokusrahmen — siehe Radien-Prufung */
  --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); }
/* Ein Link im Fliesstext auf dunklem Grund erbt sonst die Markenfarbe und steht
   marine auf marine — gemessen 1,20:1. Nur Absaetze, damit die Regel nicht die
   Anker trifft, die eine ganze Kachel umschliessen. :not(.btn) wie im Footer. */
.is-dark p a:not(.btn),
.section--dark p a:not(.btn),
.section--ink p a:not(.btn),
.birch-hero__panel p a:not(.btn),
.is-dark .birch-ablauf__title a,
.is-dark .birch-ablauf__intro a,
.is-dark .birch-nachtext__p a{
  color:var(--c-paper);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.is-dark p a:not(.btn):hover,
.section--dark p a:not(.btn):hover,
.section--ink p a:not(.btn):hover,
.birch-hero__panel p a:not(.btn):hover,
.is-dark .birch-ablauf__title a:hover{ text-decoration-thickness:2px; }
/* Die Hero-Fläche („Panel") ist marine, trägt aber kein .is-dark — am 13.10.2026
   standen dort zwei Links unsichtbar (rgb 36,49,89 auf rgb 36,49,89). */
/* Textlinks auf hellem Grund: seit dem 14.09.2026 gibt es interne Verweise im
   Fliesstext (Absaetze, FAQ-Antworten, Ablauf-Titel). Ohne Unterstreichung
   waeren sie nur an der Farbe zu erkennen — Tinte-72 gegen Marine. */
.birch-intro__text a, .birch-portrait__text a, .birch-faq__answer a:not(.btn),
.birch-ablauf__title a, .birch-ablauf__intro a, .birch-nachtext__p a, .birch-cta__text a{
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
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:var(--r-focus);
}
.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-display); font-weight:500; font-size:var(--fs-hero);
         line-height:var(--lh-tight); letter-spacing:var(--ls-head); text-wrap:balance; }
.t-h1{   font-family:var(--f-display); font-weight:500; font-size:var(--fs-h1);
         line-height:var(--lh-head); letter-spacing:-.015em; text-wrap:pretty; }
.t-h2{   font-family:var(--f-display); font-weight:500; font-size:var(--fs-h2);
         line-height:1.12; letter-spacing:var(--ls-head); text-wrap:pretty; }
.t-h3{   font-family:var(--f-display); font-weight:500; font-size:var(--fs-h3); line-height:1.15; }
.t-quote{font-family:var(--f-display); font-weight:500; font-style:italic;
         font-size:var(--fs-quote); line-height:1.35; }
.t-lead{ font-size:var(--fs-body); line-height:1.75; color:var(--c-ink-72); max-width:52ch; }
.t-label{font-family:var(--f-sans); font-size:var(--fs-meta); font-weight:500;
         letter-spacing:var(--ls-label); text-transform:var(--tt-label); color:var(--c-ink-70); }
.t-num{  font-family:var(--f-mono); font-size:var(--fs-meta); letter-spacing:.10em; }

.is-dark .t-label{ color:var(--c-paper-60); }
.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(min(200px,100%),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:var(--fs-ui); font-weight:400;
  letter-spacing:.02em; text-transform:var(--tt-label);
  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-60); }
.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;
  min-height:44px;
  font-size:var(--fs-meta); font-weight:500;
  letter-spacing:.03em; text-transform:var(--tt-label);
  color:var(--c-ink-70);
  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-60); }
.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-ui); font-weight:500;
  letter-spacing:var(--ls-nav); text-transform:var(--tt-label);
  color:var(--c-ink-72);
  min-height:44px;
  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:var(--fs-ui); }

/* Logo im mobilen Panel — auf dem Desktop steht es im Header. */
.birch-nav__logo{ display:none; }

/* Telefonnummer als eigener Punkt links vom Termin-Button */
.birch-nav__tel{
  display:inline-flex; align-items:center; gap:8px;
  flex:none; white-space:nowrap;
  min-height:44px;
  font-size:var(--fs-ui); 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;
}
/* :focus-within haelt das Panel auch ohne JS offen, sobald der Fokus hineinwandert. */
.birch-nav__item.is-open > .birch-nav__sub,
.birch-nav__item:focus-within > .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; }
/* Seiten mit eigenem Seitenkopf reservieren die Kopfzeilenhöhe selbst (padding-top
   am .birch-pagehero) — darum hier keinen zweiten Abstand setzen, sonst steht ein
   heller Streifen zwischen fixierter Kopfzeile und dunklem Seitenkopf. */
body.has-pagehero .birch-main{ padding-top:0; }

/* ============================================================
   MOBIL — unter 880px. Panel fährt von rechts ein.
   ============================================================ */
/* Umschaltpunkt der Kopfzeile: 05.09.2026 von 880 auf 1200px angehoben.
   Mit --fs-ui 15px braucht die Menüleiste 627px statt 543px; zwischen 881
   und 1200px lief sie unter den Termin-Button (bei 900px gemessen: -1px
   Abstand, „Termine" verdeckt). Erst ab 1280px liegen wieder 25px dazwischen.
   Die vier Regeln dieses Satzes — Burger/Panel, Aktionsleiste, Flaggen und
   die Aktionen im Seitenkopf — gehören zusammen und müssen gemeinsam
   verschoben werden. */
@media (max-width:1200px){

  /* 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:62; }

  .birch-nav{
    /* Ueber die Kopfleiste (60): sonst zeichnet deren Logo ueber das Logo im
       Panel und man sieht es zweimal nebeneinander. Der Burger liegt mit 62
       darueber und bleibt als Schliesser erreichbar. */
    position:fixed; top:0; right:0; bottom:0; z-index:61;
    /* Volle Breite: bei 88vw blieb rechts ein 30px-Streifen des Kopfes stehen,
       und darin stand das Logo ein zweites Mal neben dem Logo im Panel. */
    width:100%;
    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 8px 56px; align-items:center;
  }
  .birch-nav__item--has-sub > .birch-nav__toggle{ grid-column:3; }
  .birch-nav__item--has-sub > .birch-nav__sub{ grid-column:1 / -1; }

  .birch-nav__link--depth-0{
    padding:18px 24px;
    font-size:var(--fs-body-sm); 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:var(--fs-body-sm);
  }
  .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:var(--fs-ui); letter-spacing:.03em; text-transform:var(--tt-label);
    color:var(--c-ink-70);
    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);
  }

  /* Das Panel deckt den Header ab (88vw). Logo und Telefonnummer gehören
     deshalb hier hinein, sonst fehlen sie im offenen Menü ganz. */
  .birch-nav{ padding-top:0; }

  .birch-nav__logo{
    order:-2;
    display:flex; align-items:center;
    min-height:var(--header-h);
    padding-inline:var(--sec-px);
    /* Platz für das X, das rechts im Header darüber liegt */
    padding-right:72px;
    border-bottom:1px solid var(--c-ink-12);
    line-height:0;
  }
  .birch-nav__logo img{ height:36px; width:auto; }

  .birch-nav__tel{
    display:flex; justify-content:flex-start; gap:12px;
    padding:22px var(--sec-px);
    font-size:var(--fs-body);
    border-bottom:1px solid var(--c-ink-12);
    color:var(--c-ink);
  }
  .birch-nav__tel .btn__icon{ width:17px; height:17px; }

  .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:1200px){
  .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:flex; align-items:center; justify-content:center; gap:9px;
    min-height:56px;
    background:var(--c-paper); color:var(--c-ink);
    font-size:var(--fs-ui); font-weight:500;
    letter-spacing:var(--ls-nav); text-transform:var(--tt-label);
    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; }
/* Seit 13.10.2026 tragen die Termin-Überschriften Leistung + Ort („Ästhetische
   Zahnheilkunde in Eidelstedt: Termine und Beratung“). In der schmalen Spalte
   liefen sie mit --fs-h2 über fünf Zeilen; die kleinere Stufe wie beim FAQ-Kopf. */
.birch-cta__text .t-h2{ font-size:var(--fs-h2-sm); line-height:1.12; }
.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(min(300px,100%),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:var(--fs-h2-sm); line-height:1.12; }
/* Kurztext links neben den Fragen. Steht nicht im Design — auf Kundenwunsch. */
.birch-faq__intro{
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--c-ink-72); max-width:38ch;
}
.is-dark .birch-faq__intro{ color:var(--c-paper-75); }

.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-display); font-weight:500;
  font-size:var(--fs-h3); 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:47ch;
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--c-ink-72);
}
.birch-faq__answer p + p{ margin-top:1em; }
/* Schaltfläche unter einer Antwort (Attribut „Als Schaltfläche" am FAQ-Eintrag).
   Der Pfeil-Link sitzt im Textfluss; ein Button braucht Luft nach oben. */
.birch-faq__btn{ margin-top:var(--sp-4); }

/* 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:var(--fs-meta); font-weight:500;
  letter-spacing:.04em; text-transform:var(--tt-label);
  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:1200px){ .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:var(--fs-ui); 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-meta); font-weight:500;
  letter-spacing:var(--ls-label); text-transform:var(--tt-label);
  color:var(--c-ink-70);
}
.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:var(--fs-ui); line-height:1.6; color:var(--c-ink-72); }
.birch-form__privacy{ font-size:var(--fs-ui); line-height:1.6; color:var(--c-muted); }

.wpcf7-not-valid-tip{ font-size:var(--fs-ui); color:#A6321F; }
.wpcf7-response-output{
  margin:0;
  padding:var(--sp-4);
  border:1px solid var(--c-line);
  border-radius:var(--r-sm);
  font-size:var(--fs-ui);
}
.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-70); }

.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-meta); letter-spacing:var(--ls-label);
  text-transform:var(--tt-label); color:var(--c-ink-70);
}
.birch-gallery__hint{
  padding-inline:var(--sec-px);
  font-size:var(--fs-meta); letter-spacing:var(--ls-label);
  text-transform:var(--tt-label); color:var(--c-ink-66);
  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; }

/* === Bildband — ein Foto über die volle Breite als Trenner ===============
   Für textlastige Leistungsseiten: eine Atempause zwischen zwei Abschnitten.
   Der Bildcontainer ragt oben und unten 10 % über den Abschnitt hinaus, damit
   die Parallaxe (data-parallax in animate.js) keine Kante freilegt — dieselbe
   Bauweise wie bei .birch-cta__media. */
.birch-bildband{
  position:relative; overflow:hidden;
  background:var(--c-ink);
}
/* Am 09.09.2026 deutlich erhöht — der Trenner soll ein Bild sein, das trägt,
   keine Zierleiste. „Mittel“ liegt auf einem 900px hohen Fenster bei rund
   740px, „hoch“ bei rund 830px. */
.birch-bildband--klein{  height:clamp(360px, 52vh, 520px); }
.birch-bildband--mittel{ height:clamp(560px, 82vh, 800px); }
.birch-bildband--gross{  height:clamp(680px, 94vh, 920px); }
.birch-bildband__media{
  position:absolute; inset:-10% 0;
  will-change:transform;
}
.birch-bildband__media img{
  width:100%; height:100%; object-fit:cover;
}
/* Platzhalter im Editor, solange kein Bild gewählt ist. */
.birch-bildband__leer{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-paper-60); font-size:var(--fs-ui);
  letter-spacing:var(--ls-label); text-transform:var(--tt-label);
}
@media (prefers-reduced-motion:reduce){
  .birch-bildband__media{ inset:0; transform:none !important; }
}

/* === Galerie als versetztes Raster =======================================
   Vorbild: die Einblicke-Galerie auf xu.finke-praxismarketing.org. Drei
   Spalten, die mittlere startet tiefer, und beim Scrollen laufen sie
   unterschiedlich schnell (data-parallax in animate.js). Kein Pin-Scroll,
   kein Karussell — der Abschnitt ist so hoch wie sein Inhalt.

   Das Seitenverhaeltnis je Bild kommt als CSS-Variable aus dem Blockattribut,
   nicht als inline aspect-ratio: sonst koennte der Haltepunkt unten es nur
   mit !important zurueckholen. */
.birch-gallery--raster{ height:auto; background:var(--c-paper); }
.birch-gallery--raster .birch-gallery__stage{
  position:static; height:auto; overflow:visible;
  padding:var(--sec-py) 0;
  gap:var(--sp-7);
}
.birch-gallery__raster{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-4);
  align-items:start;
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--sec-px);
}
.birch-gallery__spalte{
  list-style:none;
  display:flex; flex-direction:column; gap:var(--sp-4);
  will-change:transform;
}
/* Der statische Versatz der Mittelspalte — das ist Layout, kein Effekt.
   Ohne ihn stehen die drei Spalten auf einer Linie und das Raster wirkt
   wie eine Tabelle. */
.birch-gallery__spalte--2{ margin-top:var(--sp-7); }

.birch-gallery--raster .birch-gallery__item{ width:auto; }
.birch-gallery--raster .birch-gallery__figure{ gap:10px; }
.birch-gallery--raster .birch-gallery__figure img{
  aspect-ratio:var(--birch-bildformat, 3/4);
  border-radius:var(--r-sm);
}

@media (max-width:900px){
  /* Zwei Spalten, dritte weg — und ein einheitliches Format, damit die
     verbleibenden beiden Spalten nicht auseinanderlaufen. */
  .birch-gallery__raster{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .birch-gallery__spalte--3{ display:none; }
  .birch-gallery__spalte--2{ margin-top:var(--sp-5); }
  .birch-gallery--raster .birch-gallery__figure img{ aspect-ratio:4/5; }
}
@media (max-width:560px){
  .birch-gallery__raster{ grid-template-columns:minmax(0,1fr); gap:var(--sp-3); }
  .birch-gallery__spalte--2,
  .birch-gallery__spalte--3{ margin-top:0; display:flex; }
  .birch-gallery--raster .birch-gallery__figure img{ aspect-ratio:4/3; }
}
@media (prefers-reduced-motion:reduce){
  .birch-gallery__spalte{ transform:none !important; }
}

@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-meta); font-weight:500;
  letter-spacing:var(--ls-hero); text-transform:var(--tt-label);
  /* Volles Papier: bei .75 stand die Zeile ueber einem hellen Bildpunkt bei 2,50:1. */
  color:var(--c-paper);
}
/* 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); 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(250,247,241,.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(250,247,241,.2);
  color:var(--c-paper);
  transform:translateY(-1px);
}
.birch-rating__score{
  font-family:var(--f-display); font-weight:500;
  font-size:var(--fs-display); line-height:1;
}
.birch-rating__body{ display:flex; flex-direction:column; gap:4px; }
.birch-rating__stars{ font-size:var(--fs-ui); letter-spacing:.04em; color:var(--c-sand); }
.birch-rating__source{
  font-size:var(--fs-meta); letter-spacing:.03em; text-transform:var(--tt-label);
  color:var(--c-paper-75);
}
/* --- Hero, Fassung „Panel" ---
   Der Text steht auf eigener Flaeche statt auf dem Foto. Damit ist der Kontrast ein
   fester Wert (gemessen 7,4:1) statt einer Wette auf den Bildausschnitt — und das
   Bild braucht keinen Schleier mehr, es darf wirken. Der alte Aufbau bleibt
   vollstaendig erhalten; Rueckweg ist das leere layout-Attribut am Block. */
.birch-hero--panel{
  display:grid;
  grid-template-columns:minmax(0,47fr) minmax(0,53fr);
  align-items:stretch;
  min-height:min(100svh, 780px);
}
.birch-hero--panel .birch-hero__panel{
  background:var(--c-brand);
  display:flex; align-items:center;
  padding:var(--sp-8) clamp(28px,3.4vw,60px) var(--sp-8) var(--sec-px);
}
.birch-hero--panel .birch-hero__panel-inner{
  display:flex; flex-direction:column; gap:var(--sp-5);
  width:100%; max-width:47ch;
}
/* In der schmaleren Spalte waeren 84px zu gross — die H2-Stufe passt hier. */
.birch-hero--panel .birch-hero__title{ font-size:var(--fs-h2); }
/* Die Rasterzeile darf ihre Hoehe NICHT vom Bild bekommen — ein Hochformat
   zoege den Hero sonst auf seine eigene Proportion (gemessen: 1101px statt 780).
   Der Container spannt die Zeile, das Bild liegt absolut darin. */
.birch-hero--panel .birch-hero__media{ position:relative; inset:auto; overflow:hidden; }
.birch-hero--panel .birch-hero__media img{
  position:absolute; inset:-5% 0; width:100%; height:110%; object-fit:cover;
  /* Der Ueberstand von 5 % oben und unten gibt dem Parallax Weg: bei 780px Hoehe
     verschiebt animate.js hoechstens 23px, verdeckt sind 39px je Seite.
     Die Zoomfahrt des alten Heros faellt hier weg — Parallax schreibt transform
     als Inline-Stil, beides gleichzeitig ginge nicht. */
  animation:none;
}
/* Nur ein Hauch Tiefe an der Naht zur Flaeche, kein Abdunkeln des Motivs. */
.birch-hero--panel .birch-hero__media::before{
  background:linear-gradient(to right, rgba(36,49,89,.34) 0%, rgba(36,49,89,0) 22%);
}
.birch-hero--panel .birch-hero__media::after{ content:none; }
.birch-hero--panel .birch-hero__scan{ display:none; }
.birch-hero--panel .birch-hero__actions{ flex-direction:row; flex-wrap:wrap; gap:var(--sp-2); }
.birch-hero--panel .birch-hero__adresse{
  position:absolute; right:var(--sec-px); bottom:20px; z-index:2;
  font-size:var(--fs-meta); color:var(--c-paper);
  text-shadow:0 1px 10px rgba(12,18,36,.75);
}
@media (max-width:880px){
  .birch-hero--panel{ grid-template-columns:1fr; min-height:0; }
  /* Die Kopfleiste ist fest und deckt 92px ab. Ohne dieses Polster liegt das obere
     Drittel des Bildstreifens darunter — und genau dort sitzt bei einem Portraet
     das Gesicht (gemessen: Hautton-Dichte bei 20–30 % der Bildhoehe). */
  .birch-hero--panel{ padding-top:var(--header-h); background:var(--c-brand); }
  .birch-hero--panel .birch-hero__media{ order:-1; height:320px; }
  .birch-hero--panel .birch-hero__media img{ object-position:50% 20%; }
  /* Die feste Aktionsleiste am unteren Rand traegt Telefon und Termin dauerhaft.
     Zwei weitere Buttons im Hero waeren dieselbe Handlung doppelt. */
  .birch-hero--panel .birch-hero__actions{ display:none; }
  /* Enger gesetzt, damit die Bewertung im ersten Bildschirm ueber der festen
     Aktionsleiste bleibt — sie lag zuvor 56px darunter. */
  .birch-hero--panel .birch-hero__panel{ padding:32px var(--sec-px) var(--sp-6); }
  .birch-hero--panel .birch-hero__panel-inner{ gap:18px; }
  .birch-hero--panel .birch-hero__adresse{
    position:static; display:block;
    padding:0 var(--sec-px) var(--sp-5); text-shadow:none;
    color:var(--c-paper-60); background:var(--c-brand);
  }
}

.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-meta); letter-spacing:var(--ls-label);
  text-transform:var(--tt-label); color:var(--c-paper-60);
}

@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; }
  /* Untergrenze .68 statt .45: bei .45 fiel „Scrollen" im Umkehrpunkt auf 2,91:1.
     Die Bewegung traegt den Hinweis weiterhin, das Pulsieren bleibt sichtbar. */
  50%    { transform:translateY(9px); opacity:.68; }
}
.birch-hero__hint{
  display:inline-flex; align-items:center; gap:12px;
  font-size:var(--fs-meta); letter-spacing:var(--ls-label);
  text-transform:var(--tt-label); 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;
  /* 09-ABSCHNITTE-JE-SEITE.md, A1 gab 560px vor. Am 09.09.2026 auf 660px
     erhoeht: Bei 560px und voller Fensterbreite ist das Anzeigefenster
     2,5:1 bis 3:1 — darin wurde jedes Gesicht oben oder unten gekappt,
     egal wie das Foto zugeschnitten war. Mit 660px sind es 2,1:1 bis 2,5:1. */
  min-height:min(660px, 86svh);
  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;
}
/* Werte aus 09-ABSCHNITTE-JE-SEITE.md, A1: Bild mit 8 % Überstand für den
   Parallax, auf .62 gedimmt über Tinte; der Verlauf liegt nur über den unteren
   78 % und bleibt beim Scrollen stehen, weil er am Rahmen hängt, nicht am Bild. */
/* Ausnahme fuer einzelne Seiten (Attribut „Hoehe" am Block): Wo das Motiv
   die ganze Person zeigen soll — /karriere/ —, braucht der Kopf mehr Hoehe,
   sonst bleibt vom Foto ein Streifen. Bei 1400px Fensterbreite sind das
   1,7:1 statt 2,1:1. */
.birch-pagehero--hoch{ min-height:min(820px, 92svh); }
.birch-pagehero__media{ position:absolute; inset:0; overflow:hidden; }
.birch-pagehero__media img{
  position:absolute; inset:-8% 0;
  width:100%; height:116%;
  object-fit:cover; object-position:50% 40%;
  /* 07.09.2026 von .62 auf .66 — zusammen mit den beiden schwächeren Verläufen
     unten zeigt der Seitenkopf das Foto so hell wie möglich. Grenze ist die
     Bewertungszeile (12px, braucht 4,5:1); mit 20 % Reserve gerechnet gegen die
     hellsten der 21 Kopfbilder. */
  opacity:.66;
}
/* Zwei Schleier über dem Foto. Die Werte sind am 07.09.2026 neu gerechnet,
   nachdem der Krümelpfad aus dem Kopf genommen wurde: Er war mit 12px die
   strengste Anforderung (4,5:1) und lag weit oben im Bild — dafür musste das
   ganze Foto dunkel bleiben. Jetzt bestimmt die Bewertungszeile unten rechts
   die Untergrenze. Abdunklung oben 62 % → 47 %, unten 81 % → 59 %.
   Wer hier dreht: gegen die HELLSTEN Kopfbilder rechnen (karriere, invisalign),
   nicht gegen den Durchschnitt. */
.birch-pagehero__media::before{
  content:""; position:absolute; left:0; right:0; top:0; height:58%;
  background:linear-gradient(to bottom, rgba(12,18,36,.35) 0%, rgba(12,18,36,0) 100%);
}
.birch-pagehero__media::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:78%;
  background:linear-gradient(to top, rgba(12,18,36,.65) 0%, rgba(12,18,36,.24) 45%, rgba(12,18,36,0) 100%);
}
/* Zwei Spalten wie im Hero der Startseite: Text links, Bewertung rechts,
   beide unten bündig. */
.birch-pagehero__inner{
  position:relative; z-index:2;
  width:100%;
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-5) var(--sp-7);
}
.birch-pagehero__main{
  display:flex; flex-direction:column; gap:var(--sp-4);
  min-width:0;
}
.birch-pagehero__side{ flex:none; }
/* Am rechten Rand klebt die fixierte Fähnchen-Leiste (43 px breit, ab 880 px
   sichtbar). Ohne diesen Abstand liefe die Bewertungskarte darunter — der
   Seitenkopf nutzt die volle Breite, anders als der Hero der Startseite. */
@media (min-width:1201px){
  .birch-pagehero__side{ padding-right:56px; }
}
.birch-pagehero__crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:var(--fs-meta); letter-spacing:var(--ls-label);
  text-transform:var(--tt-label); color:var(--c-paper);
}
.birch-pagehero__crumb + .birch-pagehero__crumb::before{
  content:"/"; margin-right:10px; opacity:1;
}
.birch-pagehero__actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4); }
@media (max-width:1200px){
  /* Die feste Aktionsleiste traegt Telefon und Termin dauerhaft — hier waeren
     es dieselben Handlungen doppelt. Wie im Hero der Startseite. */
  .birch-pagehero__actions{ display:none; }
}
.birch-pagehero__title{ max-width:22ch; }
.birch-pagehero__title{ color:var(--c-paper); }
.birch-pagehero__sub{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:var(--fs-h3); line-height:1.4;
  /* Voll deckend statt --c-paper-75. Auf einer Marine-Fläche wären 75 %
     unbedenklich, hier steht der Satz auf einem Foto: auf dem hellsten
     Kopfbild (karriere) kam er damit auf 2,76:1 und fiel durch. Voll deckend
     trägt er — und das Foto darf hell bleiben, statt für ihn abgedunkelt
     zu werden. Gemessen am 07.09.2026. */
  color:var(--c-paper); max-width:44ch;
}
/* Google-Bewertung im Seitenkopf — dieselbe Karte wie im Hero der Startseite.
   Der Seitenkopf steht immer auf Tinte, die hellen Farben passen unveraendert. */
@media (max-width:980px){
  /* Wie der Hero: unter 980 px untereinander, die Bewertung rutscht nach links. */
  .birch-pagehero__inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
  .birch-pagehero__side .birch-rating{ padding:11px 16px; gap:12px; }
  .birch-pagehero__side .birch-rating__score{ font-size:var(--fs-h2-sm); }
}

/* --- 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. */
/* Flex statt Raster: Jeder Schritt traegt eine Unterlinie. Im Raster brach die
   Linie in einer halbleeren letzten Zeile mittendrin ab und daneben stand eine
   leere Flaeche — bei 5, 6 und 7 Schritten in vier Spalten. Mit flex-wrap und
   `flex:1 1` dehnt sich die letzte Zeile auf die volle Breite, die Linien laufen
   durch. Gemessen am 26.08.2026 auf /leistungen/prophylaxe/ (6 und 7 Schritte). */
.birch-ablauf__list{
  list-style:none;
  display:flex; flex-wrap:wrap;
  gap:0 48px;
}
.birch-ablauf__step{
  /* Hoechstens drei je Zeile: bei vier Spalten ergaben 6 Punkte 4+2, bei drei
     ergeben sie 3+3. Die 48px Abstand zweimal abgezogen. Gemessen 26.08.2026. */
  flex:1 1 280px;
  min-width:calc(33.333% - 32px);
  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-66); }
.birch-ablauf__body{ display:flex; flex-direction:column; gap:8px; }
.birch-ablauf__title{ font-family:var(--f-sans); font-size:var(--fs-body); 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-70); }

/* Der Einleitungsabsatz stand als Tinte auf Marine — blau auf blau. */
/* Text unter einer Liste (Attribut `outro`, seit 07.09.2026). Eine Regel für
   alle Abschnittsblöcke — ablauf, liste, faq. Gleiche Schrift wie die
   Einleitung, nur mit Abstand nach oben; `.wrap` bringt die Randbreite mit.
   Gegenstücke im PHP: birch_absaetze() und birch_nachtext() in inc/blocks.php. */
.birch-nachtext{ margin-top:var(--sp-6); }
.birch-nachtext__p{
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--c-ink-72); max-width:56ch;
}
.birch-nachtext__p + .birch-nachtext__p{ margin-top:var(--sp-3); }
.is-dark .birch-nachtext__p{ color:var(--c-paper-75); }

/* Einleitung über dem Kachelraster — dieselbe Optik wie beim Ablauf. */
.birch-liste__intro{
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--c-ink-72); max-width:56ch; margin-top:var(--sp-3);
}
.is-dark .birch-liste__intro{ color:var(--c-paper-75); }

/* Im FAQ steht der Nachtext bewusst AUSSERHALB von .birch-faq__inner (siehe
   blocks/faq/render.php): dieser Container ist ein auto-fit-Raster, in dem der
   Absatz sonst eine eigene schmale Spalte neben den Fragen bekaeme — gemessen
   am 07.09.2026: 367px statt 1316. `grid-column:1/-1` half nicht, weil der
   Browser bei auto-fit die letzte Spalte nicht kennt. */
.birch-faq .birch-nachtext{ margin-top:var(--sp-5); }

.is-dark .birch-ablauf__intro{ color:var(--c-paper-75); }
.is-dark .birch-ablauf__step{ border-bottom-color:var(--c-paper-16); }
.is-dark .birch-ablauf__num{ color:var(--c-steel-text); }
.is-dark .birch-ablauf__title{ color:rgba(250,247,241,.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(min(300px,100%),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-66); }
.birch-liste__title{ font-size:var(--fs-h3); 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-66);
}
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(min(280px,100%),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:var(--fs-body); 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-text); }
.is-dark .birch-liste__rowtext{ color:rgba(250,247,241,.86); }

/* --- Weitere Leistungen ---
   Querverweise als Kacheln, Optik wie die Liste auf /leistungen/ (auf
   Kundenwunsch; das Design zeigt hier schlichte Textkacheln). Das Raster
   kommt aus .birch-liste, hier steht nur noch der Rahmen des Abschnitts. */
.birch-weitere{ padding-top:120px; }
.birch-weitere__inner{ display:flex; flex-direction:column; gap:var(--sp-5); }

/* --- 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);
}
/* Hochformat, etwa das Behandlerportraet. Die Breite ist begrenzt, damit das Bild
   nicht ueber seine eigene Aufloesung hinaus skaliert wird — die Spalte ist bei
   1400px rund 830px breit, die Quelle nur 450px. */
.birch-textsplit__figure--hoch img{ aspect-ratio:3/4; max-width:420px; }

/* 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-kontakt__group{ border-top-color:var(--c-paper-16); }
.is-dark .birch-kontakt__label{ color:var(--c-paper-60); }
.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-60); }
.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(min(260px,100%),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:var(--fs-meta); letter-spacing:.04em; text-transform:var(--tt-label); color:var(--c-ink-70);
}
.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:47ch; margin-inline:auto; }
/* Die Datenschutzerklaerung enthaelt lange Google-URLs. Ohne Umbruch schoben sie
   die Seite bei 375px um 83px nach rechts. Nur Links, nicht der Fliesstext. */
.birch-legal a{ overflow-wrap:anywhere; }
.birch-legal h2{ font-family:var(--f-display); font-weight:500; font-size:var(--fs-h3);
                 line-height:1.2; margin-top:var(--sp-7); }
.birch-legal h3{ font-size:var(--fs-body); 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-meta); letter-spacing:var(--ls-label);
  text-transform:var(--tt-label); color:var(--c-paper-60);
}
.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:var(--fs-ui); color:var(--c-muted); }
.birch-map__fallback a{
  display:inline-flex; align-items:center; min-height:44px;
  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-ui); font-weight:500;
  letter-spacing:var(--ls-nav); text-transform:var(--tt-label);
  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-60); }
.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:var(--fs-meta); letter-spacing:.03em; text-transform:var(--tt-label);
  color:var(--c-paper-60);
  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(min(320px,100%),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-66); }
.birch-highlights__title{ font-size:var(--fs-h3); 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; }

/* Verlinktes Highlight: sieht aus wie die anderen, führt aber weiter.
   Rückmeldung wie bei .birch-liste__item — Pfeil wandert, Titel nimmt die
   Markenfarbe an; die Fläche bleibt, damit der Abschnitt ruhig bleibt.
   `color:inherit` nimmt die globale a-Regel (Zeile 158) zurück, sonst stünde
   der ganze Eintrag in Markenblau statt in Tinte. */
a.birch-highlights__item--link{ color:inherit; }
a.birch-highlights__item--link:hover{ color:inherit; }
a.birch-highlights__item--link:hover .birch-highlights__title{ color:var(--c-brand); }
.birch-highlights__arrow{
  margin-top:4px;
  font-family:var(--f-sans); font-size:var(--fs-meta); font-weight:500;
  letter-spacing:.03em; text-transform:var(--tt-label);
  color:var(--c-ink-66);
  transition:transform var(--t-slow) var(--ease), color var(--t-slow) ease;
}
a.birch-highlights__item--link:hover .birch-highlights__arrow{
  transform:translateX(6px); color:var(--c-brand);
}

.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:var(--fs-ui); 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:var(--fs-ui); font-weight:500;
  letter-spacing:.05em; text-transform:var(--tt-label); color:var(--c-ink-66);
}
.birch-intro__cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:var(--sp-6); max-width:900px;
}
/* VORSICHT bei ch: In Instrument Sans ist die Null 10,99px breit, ein
   durchschnittliches Prosazeichen aber nur 7,87px — 1ch entspricht also rund
   1,4 gelesenen Zeichen. 47ch ergeben etwa 66 Zeichen je Zeile, den oberen Rand
   des Lesebereichs von 45–75. Wer hier 70ch einträgt, bekommt 95. */
.birch-intro__text{
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--c-ink-72);
  max-width:47ch;
}

.birch-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),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-display); font-weight:500; font-size:var(--fs-display); line-height:1; }
/* Verlinkte Kennzahl: die ganze Kachel ist das Ziel. */
.birch-stats__item--link{ text-decoration:none; color:inherit; transition:color var(--t-mid) ease; }
.birch-stats__item--link:hover .birch-stats__value{ color:var(--c-brand); }
.birch-stats__item--link:hover .birch-stats__label{ color:var(--c-ink); }
.birch-stats__label{
  font-size:var(--fs-meta); letter-spacing:.04em; text-transform:var(--tt-label); color:var(--c-ink-66);
}

/* --- 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-display); font-weight:500;
  font-size:var(--fs-h2-sm); 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(min(340px,100%),1fr));
  gap:90px;
  max-width:var(--wrap); margin-inline:auto;
}
.birch-portrait__media{ position:sticky; top:120px; align-self:start; }
/* Bild rechts statt links. `order` statt einer zweiten Rasterdefinition —
   so bleibt der Aufbau im Quelltext gleich (Bild zuerst, dann Text), was fuer
   Vorlesegeraete die richtige Reihenfolge ist. Unter 900px steht ohnehin
   alles untereinander; dort wird die Umstellung zurueckgenommen, sonst
   staende das Bild unter dem Text und der Abschnitt begaenne mit Fliesstext. */
.birch-portrait--bild-rechts .birch-portrait__media{ order:2; }
.birch-portrait--bild-rechts .birch-portrait__body{ order:1; }
.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:var(--fs-body); 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-display); font-style:italic; font-weight:400;
  font-size:var(--fs-quote); 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. */
  /* min(...,100%): unter 320px Sichtfeld war die feste Breite 28px zu gross
     und schob die ganze Seite nach rechts. */
  max-width:min(calc(33ch + 34px), 100%);
}
/* Deutsche Komposita sprengen schmale Spalten: „Behandlungsalternativen" misst
   bei 22px ganze 254px, der Textbereich bei 320px Sichtfeld nur 226px.
   Silbentrennung statt hartem Umbruch — das Dokument ist als de-DE ausgezeichnet,
   also trennt der Browser an echten Silbengrenzen mit sichtbarem Trennstrich. */
@media (max-width:560px){
  .birch-portrait__quote,
  .birch-intro__text,
  .birch-liste__text,
  .birch-legal p,
  .birch-legal li{ hyphens:auto; }
}
.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:var(--fs-meta); letter-spacing:.04em; text-transform:var(--tt-label); color:var(--c-ink-70);
}
.birch-portrait__fact-value{ font-size:var(--fs-body-sm); line-height:1.5; color:rgba(24,34,65,.75); }
/* Dieselbe Luecke wie beim Ablauf-Intro: die Faktenliste stand als Tinte
   auf Marine (z. B. Parken & OePNV auf /anfahrt/). */
.is-dark .birch-portrait__fact{ border-top-color:var(--c-paper-16); }
.is-dark .birch-portrait__fact-label{ color:var(--c-paper-60); }
.is-dark .birch-portrait__fact-value{ color:var(--c-paper-75); }
/* Vorsorglich: der kursive Teil einer Ueberschrift steht sonst in Markenblau. */
.is-dark .birch-intro__title em{ color:var(--c-steel); }

@media (max-width:880px){
  .birch-portrait{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .birch-portrait__media{ position:static; }
  .birch-portrait--bild-rechts .birch-portrait__media,
  .birch-portrait--bild-rechts .birch-portrait__body{ order:0; }
  .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-display); font-weight:500; font-size:var(--fs-display); line-height:1; }
.birch-reviews__stars{ letter-spacing:.04em; color:var(--c-brand); font-size:var(--fs-ui); }
.birch-reviews__source{ font-size:var(--fs-meta); letter-spacing:.03em; text-transform:var(--tt-label); color:var(--c-ink-66); }
/* min(290px,100%) statt 290px: unter 320px Sichtfeld passte die Mindestbreite
   nicht mehr in den Innenabstand und die Karte schob die Seite um 7px nach rechts. */
/* Schliessen-Knopf am selbst gezeigten Dr.-Flex-Fenster. Nur dort noetig:
   auf dem Telefon gibt es keine Escape-Taste. */
.birch-drflex__close{
  position:fixed; top:12px; right:12px; z-index:1;
  min-height:44px; padding:0 18px;
  font-family:var(--f-sans); font-size:var(--fs-ui); font-weight:500;
  color:var(--c-brand); background:var(--c-paper);
  border:0; border-radius:var(--r-pill); cursor:pointer;
  box-shadow:0 2px 10px rgba(24,34,65,.25);
}
.birch-drflex__close:focus-visible{ outline:2px solid var(--c-brand); outline-offset:2px; }

/* Trustindex-Widget statt Kartenraster: volle Breite, gleicher Abstand nach oben.
   Die Kappung ist eine Absicherung: Blockiert ein Inhaltsblocker beim Besucher
   cdn.trustindex.io/loader.js, bleibt das Widget in seiner Vierspalten-Fassung
   stehen und schiebt die Seite auf dem Telefon um rund 80 px zur Seite.
   `clip` statt `hidden`: erzeugt keinen Scrollcontainer und laesst
   position:sticky in Ruhe. Gemessen am 26.08.2026 bei 375 px. */
.birch-reviews__widget{ display:block; margin-top:var(--sp-1); overflow-x:clip; }
.birch-reviews__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),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:var(--fs-ui); }
.birch-reviews__quote{ font-family:var(--f-display); font-weight:500; font-size:var(--fs-h3); line-height:1.4; }
.birch-reviews__source-note{
  margin-top:auto;
  font-size:var(--fs-meta); letter-spacing:.03em; text-transform:var(--tt-label); color:var(--c-ink-66);
}

/* --- 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:var(--fs-h2-sm); 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{
  /* 5:7 statt 3:4 seit dem 14.09.2026: Die retuschierten Porträts der zweiten
     Lieferung (wetransfer_drbirch_2026-09-13) sind alle 5:7 und sollen
     unbeschnitten stehen. Kundenansage. object-position bleibt für den Fall,
     dass doch einmal ein anderes Format hineinkommt. */
  width:100%; aspect-ratio:5/7; 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; }
}
/* Mobil zwei Spalten statt einer: sechs Personen untereinander ergaben 3.225px —
   vier Bildschirme. Zu zweit sind es 1.043px. Die Portraets werden kleiner
   (147x196), Namen laufen ueber zwei Zeilen; das ist der Preis und er lohnt sich. */
@media (max-width:560px){
  .birch-team__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}
.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-display); font-weight:500; font-size:var(--fs-h3); line-height:1.15; }
.birch-team__role{ font-size:var(--fs-meta); letter-spacing:.04em; text-transform:var(--tt-label); color:var(--c-ink-66); }
.birch-team__vita{
  align-self:flex-start;
  margin-top:8px;
  min-height:46px; padding:0 22px;
  font-size:var(--fs-meta); 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:var(--fs-meta); letter-spacing:.04em;
  text-transform:var(--tt-label); color:var(--c-ink-66); white-space:nowrap;
}

/* --- Impressionen (statisches Raster) --- */
.birch-shots__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),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-meta); letter-spacing:var(--ls-label);
  text-transform:var(--tt-label); color:var(--c-ink-70);
}

/* ============ 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; }

/* Feste Stufen statt auto-fit: minmax(min(230px,100%),1fr) ergab zwischen 880 und 1180px
   genau DREI Spalten — die vierte rutschte allein in eine zweite Zeile, 297px
   tiefer. Vier Spalten sind entweder 4 nebeneinander oder 2x2, nie 3+1. */
.birch-footer__grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:56px; align-items:start;
}
@media (max-width:1180px){
  .birch-footer__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:44px 56px; }
}
@media (max-width:560px){
  .birch-footer__grid{ grid-template-columns:minmax(0,1fr); }
}
.birch-footer__col{ display:flex; flex-direction:column; gap:var(--sp-3); }
.birch-footer__title{
  font-family:var(--f-sans);
  font-size:var(--fs-meta); font-weight:500;
  letter-spacing:.06em; text-transform:var(--tt-label);
  color:var(--c-paper-60);
}
.birch-footer__text{ font-size:var(--fs-body-sm); line-height:1.9; color:rgba(250,247,241,.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(250,247,241,.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{
  display:inline-flex; align-items:center;
  min-height:44px;
  font-size:var(--fs-body-sm); letter-spacing:.04em;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.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{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--fs-body-sm); color:rgba(250,247,241,.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:var(--fs-body-sm); line-height:1.8;
}
.birch-footer__hours-row{ display:contents; }
.birch-footer__hours dt{ margin:0; color:rgba(250,247,241,.74); }
.birch-footer__hours dd{ margin:0; color:rgba(250,247,241,.74); text-align:right; }
.birch-footer__note{ font-size:var(--fs-ui); line-height:1.6; color:var(--c-paper-60); }

.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(250,247,241,.14);
}
.birch-footer__copy{ font-size:var(--fs-ui); color:rgba(250,247,241,.5); }
.birch-footer__copy a{ display:inline-flex; align-items:center; min-height:44px; }
.birch-footer__legal{
  list-style:none; display:flex; gap:24px;
  font-size:var(--fs-ui);
}
.birch-footer__legal a{
  display:inline-flex; align-items:center; min-height:44px;
  color:rgba(250,247,241,.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:var(--fs-ui); letter-spacing:.02em; text-transform:var(--tt-label);
  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:var(--fs-meta); }
}

/* ============ 28 URLAUBSMELDUNG ============
   Baustein: Schnellzugriff/bausteine/urlaubsmeldung.md (Teil B), 13.10.2026 */

.birch-urlaub{
  width:min(560px, calc(100vw - 2 * var(--sec-px)));
  max-height:min(80vh, 640px);
  padding:0; border:0;
  border-radius:var(--r-md);
  background:var(--c-paper);
  color:var(--c-ink);
  box-shadow:var(--shadow-card);
  overflow:auto; overscroll-behavior:contain;
}
.birch-urlaub::backdrop{ background:var(--c-ink-72); }

.birch-urlaub__innen{ padding:var(--sp-6); }
@media (max-width:600px){
  .birch-urlaub__innen{ padding:var(--sp-5) var(--sp-4); }
}

.birch-urlaub__titel{
  margin:0 0 var(--sp-3);
  color:var(--c-ink);
  font-family:var(--f-display);
  font-size:var(--fs-h3);
  font-weight:400;
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
}

.birch-urlaub__text > *:first-child{ margin-top:0; }
.birch-urlaub__text > *:last-child{ margin-bottom:0; }

/* Aufzaehlungen zurueckholen — der Listen-Reset des Themes frisst sie sonst. */
.birch-urlaub__text ul,
.birch-urlaub__text ol{
  margin:var(--sp-3) 0 0; padding-left:1.35em; list-style:revert;
}
.birch-urlaub__text ul{ list-style-type:square; }
.birch-urlaub__text li{ margin-top:var(--sp-1); }
.birch-urlaub__text li::marker{ color:var(--c-brand); }

/* Unterstrichen, damit Links sich nicht nur durch die Farbe unterscheiden. */
.birch-urlaub__text a{
  color:var(--c-brand);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}

.birch-urlaub__schliessen{ margin-top:var(--sp-5); }

@media (prefers-reduced-motion: no-preference){
  .birch-urlaub[open]{ animation:birch-urlaub-auf var(--t-fast) var(--ease); }
  @keyframes birch-urlaub-auf{
    from{ opacity:0; transform:translateY(12px); }
  }
}

/* Urlaubsmeldung mit Bild — zweispaltig, unter 720px rueckt das Bild nach oben. */
.birch-urlaub--bild{
  width:min(880px, calc(100vw - 2 * var(--sec-px)));
}
.birch-urlaub--bild .birch-urlaub__innen{
  display:grid; grid-template-columns:1fr minmax(0, 300px);
  gap:var(--sp-5); align-items:start; padding:0;
}
.birch-urlaub--bild .birch-urlaub__inhalt{ padding:var(--sp-6) 0 var(--sp-6) var(--sp-6); }

/* Das Bild fuellt seine Spalte bis an drei Kanten — sonst schwimmt es in
   einem hellen Rahmen und sieht aus wie hineingerutscht. */
.birch-urlaub--bild .birch-urlaub__figur{
  align-self:stretch; min-height:100%; overflow:hidden;
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.birch-urlaub__bild{
  display:block; width:100%; height:100%; min-height:260px; object-fit:cover;
}

@media (max-width:720px){
  .birch-urlaub--bild .birch-urlaub__innen{ grid-template-columns:1fr; gap:0; }
  .birch-urlaub--bild .birch-urlaub__inhalt{ order:2; padding:var(--sp-5) var(--sp-4); }
  .birch-urlaub--bild .birch-urlaub__figur{
    order:1; border-radius:var(--r-md) var(--r-md) 0 0;
  }
  .birch-urlaub__bild{ min-height:0; aspect-ratio:3 / 2; }
}

/* Borlabs: die letzten Reste der Plugin-Grundfarbe auf das Corporate Design.
   Fokusring, Kästchen und Radioknöpfe stehen in Borlabs' eigenem Bündel, nicht
   in der Konfiguration — deshalb hier. Gemessen 14.10.2026. */
.brlbs-cmpnt-container,
.brlbs-cmpnt-container *{ --brlbs-tw-ring-color: var(--c-brand); }
.brlbs-cmpnt-container [type="checkbox"],
.brlbs-cmpnt-container [type="radio"]{ color: var(--c-brand); }
.brlbs-cmpnt-container [type="checkbox"]:focus,
.brlbs-cmpnt-container [type="radio"]:focus,
.brlbs-cmpnt-container input:focus,
.brlbs-cmpnt-container textarea:focus{ border-color: var(--c-brand); }