/* Grundzustand: unsichtbar. Sichtbar werden diese Bausteine ausschliesslich
   ueber html.wt-handover, das nur auf breiten Schirmen und nur mit Skript
   gesetzt wird. Ohne diese Regel steht auf dem Handy die grosse Raute samt
   Wortmarke ueber der Kopfzeile. */
.wt-anchor, .wt-fly { display: none; }

/* Reservierter Raum im Hero, links oben in der Textspalte, wo die grosse
   Freiflaeche liegt. Das Seitenverhaeltnis entspricht dem Logo. */
html.wt-handover .wt-anchor {
  display: block;
  width: clamp(17rem, 36vw, 28rem);
  aspect-ratio: 229 / 46;
  margin-inline: auto;
  /* Waagerecht mittig in der Textspalte, senkrecht mittig im Freiraum
     zwischen Kopfzeile und Ueberschrift. Der Raum oberhalb kommt aus dem
     Innenabstand des Hero; damit der Block dazwischen mittig steht, muss der
     Abstand nach unten ihm entsprechen, nicht kleiner sein. */
  /* Bewusst hoeher als die reine Mitte: der Abstand nach oben entfaellt, der
     nach unten waechst. Damit sitzt das Logo im oberen Drittel des
     Freiraums statt genau mittig. */
  margin-top: 0;
  margin-bottom: clamp(4.5rem, 9vw, 7.25rem);
}

html.wt-handover .wt-fly {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 120;                 /* ueber der Kopfzeile (60), dort landet es */
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
  white-space: nowrap;
}
/* Alle Masse sind die der Kopfzeile, mal --wt-lupe. Das Skript setzt die
   Lupe auf das Groessenverhaeltnis Hero zu Kopfzeile, das Logo wird also in
   voller Groesse gesetzt und der Weg skaliert nach unten. Andersherum, also
   klein aufbauen und hochziehen, wird die Schrift unscharf: hochskalierte
   Schrift wird in der kleinen Groesse gerastert. Die Sperrung steht in em und
   waechst deshalb von selbst mit. */
html.wt-handover .wt-fly { --wt-lupe: 1; gap: calc(0.7rem * var(--wt-lupe)); }
html.wt-handover .wt-fly__mark {
  flex: none;
  width: calc(var(--marke-b) * var(--wt-lupe));
  height: calc(var(--marke-h) * var(--wt-lupe));
}
html.wt-handover .wt-fly__mark svg { width: 100%; height: 100%; overflow: visible; }
html.wt-handover .wt-fly__text { display: grid; line-height: 1.1; position: relative; }
html.wt-handover .wt-fly__name {
  font-family: var(--font-body);
  font-size: calc(var(--marke-name) * var(--wt-lupe));
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
}
html.wt-handover .wt-fly__place {
  font-family: var(--font-body);
  font-size: calc(var(--marke-ort) * var(--wt-lupe));
  font-weight: 300;
  letter-spacing: 0.72em;
  text-transform: uppercase;
  color: var(--navy);
}
/* Jeder Buchstabe einzeln beweglich. Keine CSS-Transition: die Werte kommen
   pro Bild aus dem Skript, eine Transition wuerde nachlaufen und ruckeln. */
html.wt-handover .wt-b { display: inline-block; will-change: transform; }/* Solange das Logo unterwegs ist, traegt die Kopfzeile keines. Das Skript
   schreibt die Deckkraft pro Bild direkt ans Element; diese Regel verhindert
   nur das Aufblitzen vor dem ersten Frame. */
html.wt-handover .site-header .brand,
html.wt-handover .site-header .marke-arzt { opacity: 0; }
/* Erst wenn die Uebergabe durch ist, tauchen beide gemeinsam auf. */
html.wt-handover .site-header .brand,
html.wt-handover .site-header .marke-arzt { transition: opacity 0.25s var(--ease, ease); }

/* ---------- 1c Waldband ---------- */
.wt-waldband { position: relative; overflow: hidden; height: clamp(330px,44vw,480px);
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F5F8 48%, #14295C 48%, #14295C 100%); }
.wt-waldband__sun { position: absolute; right: 11%; top: 12%; width: clamp(44px,5vw,72px); height: clamp(44px,5vw,72px); border-radius: 999px; background: rgba(242,178,51,0.13); }
.wt-waldband__hill { position: absolute; bottom: 52%; border-radius: 50% 50% 0 0; }
.wt-waldband__hill--a { left: -14%; width: 64%; height: clamp(54px,8vw,104px); background: #EDF0F6; }
.wt-waldband__hill--b { right: -18%; width: 72%; height: clamp(40px,6vw,78px); background: #E4E9F2; }
.wt-waldband__row { position: absolute; bottom: 52%; display: flex; align-items: flex-end; }
.wt-waldband__row--far { left: -6%; right: -6%; justify-content: space-around; }
.wt-waldband__row--mid { left: -9%; right: -9%; justify-content: space-between; }
.wt-waldband__row--near { left: -12%; right: -12%; justify-content: space-between; }
.wt-waldband__row svg { display: block; flex: none; }
.wt-waldband__row--far svg { fill: #D3D9E6; }
.wt-waldband__row--mid svg { fill: #9AA6C0; }
.wt-waldband__row--near svg { fill: #14295C; }
.wt-waldband__fog { position: absolute; left: 0; right: 0; bottom: 52%; height: clamp(22px,3vw,38px); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.42) 70%, rgba(255,255,255,0.6) 100%); }
.wt-waldband__horizon { position: absolute; left: 0; right: 0; bottom: calc(52% - 1px); height: 2px; background: linear-gradient(90deg, rgba(242,178,51,0) 0%, rgba(242,178,51,0.85) 22%, rgba(242,178,51,0.85) 78%, rgba(242,178,51,0) 100%); }
.wt-waldband__copy { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px,4vw,44px) clamp(20px,4vw,36px); display: flex; justify-content: center; }
.wt-waldband__copy > div { max-width: 640px; display: flex; flex-direction: column; gap: 12px; text-align: center; color: #FFFFFF; }
.wt-waldband__claim { margin: 0; font-family: 'Figtree', sans-serif; font-weight: 400; font-size: clamp(22px,3vw,34px); line-height: 1.12; letter-spacing: -0.02em; }
.wt-waldband__sub { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.78); text-wrap: pretty; }
@media (max-width: 480px) { .wt-waldband__sub { font-size: 14px; } }

/* Footer schliesst fugenlos an. KEIN margin/padding dazwischen. */
.wt-waldband + footer { margin-top: 0; border-top: 0; background: #14295C; }

/* ---------- Reduced Motion ---------- */

/* ---------- Waldband: nur der Textblock entfaellt -------------------------
   Baeume, Hoehe, Huegel, Sonne und Nebel bleiben wie im Modul. app.css gibt
   jedem <section> ein grosszuegiges padding-block; das Band arbeitet mit
   absolut positionierten Ebenen und braucht davon nichts. */
.wt-waldband { padding: 0; }

/* ---------- Waldband: leeren Navy-Bereich unter den Baeumen kuerzen ------
   Ohne Textblock stand unter der Baumlinie eine viertel Bildschirmhoehe
   leeres Navy, bevor der Footer anfing. Der Himmelsteil bleibt exakt so
   hoch wie im Modul (48 % von 330-480px), darunter liegt jetzt nur noch
   ein schmaler Streifen, der in den Footer laeuft. Baeume, Huegel, Sonne
   und Nebel bleiben unveraendert - sie haengen alle an der Grundlinie. */
.wt-waldband {
  --wt-himmel: clamp(158px, 21.1vw, 230px);
  --wt-fuss: 16px;
  height: calc(var(--wt-himmel) + var(--wt-fuss));
  background:
    linear-gradient(180deg,
      #FFFFFF 0%,
      #F4F5F8 calc(100% - var(--wt-fuss)),
      #14295C calc(100% - var(--wt-fuss)),
      #14295C 100%);
}
.wt-waldband__hill, .wt-waldband__row, .wt-waldband__fog { bottom: var(--wt-fuss); }
.wt-waldband__horizon { bottom: calc(var(--wt-fuss) - 1px); }

/* Der Footer schliesst direkt unter der Baumlinie an. Sein eigenes
   grosszuegiges Oberpolster liess dort eine leere navy Flaeche stehen. */
.wt-waldband + footer { padding-top: clamp(1.5rem, 2.6vw, 2.25rem); }/* ---------- Was nach dem Auftakt an der Stelle des Logos steht -------------
   Der Auftakt laeuft nur einmal. Danach bleibt das Logo oben in der Kopfzeile
   und das Zeichen unten in der Mitte, und der Platz im Hero traegt eine
   kleine Baumgruppe auf einer gelben Grundlinie - dieselbe Bildsprache wie
   das Waldband ueber dem Footer, nur im Kleinen. Der Wald steht damit am
   Anfang und am Ende der Seite. */
.wt-slot { position: relative; }
/* Abstand der gelben Grundlinie zur Oberkante der h1-Zeile. Negativ, weil
   die Zeile oberhalb der Grossbuchstaben noch Innenraum hat; gilt fuer den
   Zustand waehrend und nach dem Auftakt gleichermassen. Wert an die
   Schriftgroesse der h1 gekoppelt (refinement.css). */
:root { --wt-wald-luft: calc(-0.09 * clamp(2.8rem, 4.6vw, 4.4rem)); }
.wt-wald { display: grid; align-content: end; }
.wt-wald svg {
  width: clamp(6.5rem, 13vw, 10rem);
  height: auto;
  /* Zweifarbig: Baeume in Navy, Grundlinie darunter in Gelb. Ganz in Gelb
     verlor die Gruppe den Halt gegen den hellen Grund. */
  color: var(--navy);
  opacity: 0.85;
}
/* Grundlinie wie im Waldband: nach aussen auslaufend, nicht als harte Kante. */
.wt-wald::after {
  content: '';
  display: block;
  margin-top: -1px;
  width: min(100%, 22rem);
  height: 2px;
  background: linear-gradient(90deg,
    rgba(242, 178, 51, 0.85) 0%,
    rgba(242, 178, 51, 0.85) 55%,
    rgba(242, 178, 51, 0) 100%);
}

/* Solange der Auftakt laeuft, liegt der Wald unsichtbar im Raum des Logos.
   Ohne JavaScript und bei reduzierter Bewegung steht er einfach da. */
html.wt-handover .wt-wald {
  position: absolute;
  inset: 0;
  /* Sitzt am unteren Rand des Logoplatzes und wird so weit heruntergezogen,
     dass die gelbe Grundlinie unmittelbar ueber dem Praxisnamen liegt. Damit
     lesen Baeume, Linie und Name als ein Block. Der Platz des Logos selbst
     bleibt dabei unveraendert. */
  align-content: end;
  /* Abstand an die Ueberschrift gekoppelt: 4.25rem ist der Abstand des
     Logoplatzes zur h1 (refinement.css), der zweite Teil waechst mit deren
     Schriftgroesse. So sitzt die Grundlinie bei jeder Fensterbreite gleich
     knapp ueber den Grossbuchstaben; vorher lief sie auf schmaleren
     Desktops nach oben weg. */
  translate: 0 calc(4.25rem - var(--wt-wald-luft));
  opacity: 0;
  transition: opacity 0.8s var(--ease, ease);
}
html.wt-handover .wt-slot[data-fertig] .wt-wald { opacity: 1; }
/* Nach dem Einklappen (scroll.js): kein reservierter Logoplatz mehr, der
   Wald steht im normalen Fluss direkt ueber der Ueberschrift. */
html.wt-eingeklappt .wt-anchor { display: none; }
html.wt-eingeklappt .wt-wald { position: static; translate: none; opacity: 1; transition: none; margin-bottom: var(--wt-wald-luft); }

/* ---------- Huegel weicher anschliessen ----------------------------------
   Die beiden Huegel waren Flaechen in Volltonfarbe mit einer harten Bogen-
   kante. Auf schmalen Schirmen, wo sie fast die ganze Breite einnehmen, sah
   man diese Kante als Bruch quer durchs Bild. Jetzt laufen sie nach oben in
   den Himmel aus, und der Nebel darueber ist hoeher und dichter, sodass der
   Uebergang zur Baumlinie traegt. */
.wt-waldband__hill--a {
  background: linear-gradient(180deg, rgba(237, 240, 246, 0) 0%, #EDF0F6 62%);
}
.wt-waldband__hill--b {
  background: linear-gradient(180deg, rgba(228, 233, 242, 0) 0%, #E4E9F2 58%);
}
.wt-waldband__fog {
  height: clamp(34px, 5vw, 58px);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 55%,
    rgba(255, 255, 255, 0.72) 100%);
}

/* Solange der Hero einspaltig ist, entfaellt der ganze Logoplatz samt Wald.
   Ohne wt-handover stuenden Wald und Linie sonst statisch im Fluss: auf dem
   Handy oberhalb der Falz, wo das Hero-Bild den Platz besser nutzt, und
   zwischen 48rem und 62rem als loses Logo zwischen Bild und Ueberschrift.
   Die Grenze ist dieselbe wie die der Zweispaltigkeit in .hero-grid und die
   der Bedingung im Kopf von index.html - alle drei muessen zusammenpassen. */
@media (max-width: 61.99rem) {
  .wt-slot { display: none; }
}

/* Der Name der Inhaberin im Auftakt. Er steht zentriert unter der Wortmarke,
   wandert mit ihr nach oben und blendet auf dem letzten Stueck aus - in der
   Kopfzeile sitzt er neben der Marke, nicht darunter, ein harter Wechsel waere
   dort ein sichtbarer Sprung. */
html.wt-handover .wt-fly__arzt {
  /* Ausserhalb des Flusses: belegte die Zeile Platz, war der Textblock hoeher
     als in der Kopfzeile. Die Raute (mittig dazu ausgerichtet) sass am Ziel
     knapp 8 px zu tief, der Schriftzug 11 px zu hoch - beim Umschalten auf
     die Kopfzeile sprang das Logo sichtbar. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: block;
  margin-top: 0.62em;
  text-align: center;
  /* Wie Wortmarke und Ort mit der Lupe rechnen, nicht relativ zur Elternschrift.
     Vorher stand hier 0.86em; das bezog sich auf die Grundschrift und blieb
     dadurch als einziger Teil des Logos ungelupt: im Hero war der Name auf
     Kopfzeilengroesse statt 1,6-fach, am Ziel dann nur zwei Drittel so gross
     wie der Name, den die Kopfzeile uebernimmt - der Wechsel sprang sichtbar,
     und die Streuung war an 9 px Schrift nicht mehr zu erkennen. */
  font-size: calc(var(--marke-arzt) * var(--wt-lupe));
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #626875;
  white-space: nowrap;
  opacity: var(--wt-arzt, 1);
  /* Die einzelnen Buchstaben tragen .wt-b und werden vom selben Streufeld
     erfasst wie die Wortmarke - der Name zerfaellt und findet sich wieder. */
}