/* ═══════════════════════════════════════════════════════════════════
   GBW & PARTNER · Stil
   Kein Framework. Alle Werte kommen aus tokens.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Schriften, selbst gehostet ───────────────────────────────────
   Kein Google Fonts: eine Fremdverbindung weniger, ein Datenschutz-
   hinweis weniger, und das LCP-Element wartet nicht auf einen Dritten. */
@font-face{
  font-family:'Playfair Display'; src:url('schrift/playfair-variabel.woff2') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Playfair Display'; src:url('schrift/playfair-variabel-italic.woff2') format('woff2-variations');
  font-weight:400 700; font-style:italic; font-display:swap;
}
@font-face{ font-family:'Lato'; src:url('schrift/lato-300.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face{ font-family:'Lato'; src:url('schrift/lato-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Lato'; src:url('schrift/lato-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

/* ── Grundgerüst ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px; }
body{
  background:var(--grund); color:var(--text);
  font-family:var(--sans); font-size:var(--body); line-height:var(--zeile);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }

/* Der Fokusring ist Grafik, nicht Schrift: 3,3:1 reicht dafür, und Kupfer
   ist auf beiden Gründen als Ring erkennbar. */
:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--kupfer); outline-offset:3px; border-radius:2px;
}
.buehne :where(a,button,input):focus-visible,
#baum   :where(a,button,input):focus-visible{ outline-color:var(--kupfer-hell); }

.hgr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.bahn{ max-width:var(--seite); margin-inline:auto; padding-inline:var(--rand); }
.eng > *{ max-width:var(--spalte); }

h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:var(--zeile-eng); color:var(--gruen); }
h1{ font-size:var(--h-riesig); letter-spacing:-.018em; }
h2{ font-size:var(--h1);       letter-spacing:-.014em; }
h3{ font-size:var(--h3); font-family:var(--sans); font-weight:700; letter-spacing:var(--sperr); }
p{ max-width:var(--spalte); }
p + p{ margin-top:var(--r2); }

/* Das Wort steht grün, der Strich davor ist kupfern. Vorher war beides
   rostbraun, weil 12-px-Versalien in echtem Kupfer nicht lesbar sind.
   Die Trennung löst das, ohne die Farbe zu verbiegen. */
.marke{
  font-family:var(--sans); font-size:var(--winzig); font-weight:700;
  letter-spacing:var(--sperr-weit); text-transform:uppercase;
  color:var(--gruen); margin-bottom:var(--r3);
  display:flex; align-items:center; gap:.7rem;
}
/* Der kurze Kupferstrich vor dem Eyebrow. Er zieht sich beim Erscheinen
   auf und ist das einzige Ornament, das die Seite kennt. */
.marke::before{
  content:''; width:26px; height:1px; background:var(--kupfer); flex:none;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--szene) var(--aus) 120ms;
}
.js .marke.da::before{ transform:scaleX(1); }
html:not(.js) .marke::before{ transform:none; }

.leise{ color:var(--text-leise); }
.gross{ font-size:var(--body-gr); }
.vorspann-eng{ margin-top:var(--r2); max-width:52ch; }

section{ padding-block:var(--sektion-y); position:relative; }

/* ── Einflug ──────────────────────────────────────────────────────
   Nur transform und opacity, damit kein Layout-Shift entstehen kann.
   Ohne JavaScript bleibt alles sichtbar, siehe html:not(.js). */
.flug{ opacity:0; transform:translateY(20px); }
.flug-l{ opacity:0; transform:translateX(-24px); }
.flug-r{ opacity:0; transform:translateX(24px); }
.js .flug, .js .flug-l, .js .flug-r{
  transition:opacity var(--ruhig) var(--sanft), transform var(--ruhig) var(--sanft);
  transition-delay:var(--verzug,0ms); will-change:opacity, transform;
}
.js .da{ opacity:1 !important; transform:none !important; will-change:auto; }
html:not(.js) .flug, html:not(.js) .flug-l, html:not(.js) .flug-r{ opacity:1; transform:none; }

/* ── Fortschrittsstrich ─────────────────────────────────────────── */
.fortschritt{ position:fixed; inset:0 0 auto 0; height:2px; z-index:95; pointer-events:none; }
.fortschritt span{
  display:block; height:100%; width:100%; background:var(--kupfer);
  transform:scaleX(var(--weit,0)); transform-origin:0 50%;
}

/* ═══ KOPF ═══════════════════════════════════════════════════════ */
/* Der Kopf ist ein durchgehender heller Streifen, nicht mehr durchsichtig.
   Die Kupferlinie darunter setzt ihn hart gegen die dunkle Buehne ab und
   gibt dem Logo eine eigene Flaeche, statt es auf dem Baum schwimmen zu
   lassen. Damit entfaellt auch der ganze Hell-Dunkel-Umschalter: der Kopf
   hat immer denselben Grund, also immer dieselbe Schriftfarbe. */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:90; height:96px;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--rand);
  background:var(--grund);
  border-bottom:2px solid var(--kupfer);
  transition:height var(--normal) var(--weich), box-shadow var(--normal);
}
.kopf.gescrollt{ height:76px; box-shadow:0 6px 24px rgba(18,60,31,.09); }

/* Baum und Wortmarke schrumpfen seit dem 16.08.2026 als ein Stück, nicht
   mehr einzeln. Vorher hatten beide eine eigene width-Transition mit
   unterschiedlichem Verhältnis (Baum 52→42px = 81 %, Wortmarke 200→168px
   = 84 %): zwei Layout-Eigenschaften in Bewegung, und die Marke lief beim
   Schrumpfen minimal auseinander, weil Icon und Schriftzug nicht im
   selben Takt kleiner wurden. Jetzt trägt .kopf-logo selbst die
   Verkleinerung als transform, in einem festen Verhältnis: eine echte
   Marke schrumpft als Ganzes, nicht in ihren Teilen einzeln. */
.kopf-logo{
  display:flex; align-items:center; gap:.85rem; text-decoration:none;
  transform-origin:left center;
  transition:transform var(--normal) var(--weich);
}
.kopf.gescrollt .kopf-logo{ transform:scale(.83); }
.kopf-logo .baum{ width:52px; height:52px; flex:none; transition:transform var(--normal) var(--aus); }
.kopf-logo:hover .baum{ transform:rotate(-4deg) scale(1.07); }
.wortmarke{ width:200px; height:auto; }
.wortmarke path{ fill:var(--gruen); }

.kopf-nav{ display:flex; align-items:center; gap:2.3rem; }
.kopf-nav a:not(.knopf){ font-size:1rem; letter-spacing:var(--sperr); text-decoration:none;
  color:var(--text); transition:color var(--schnell); position:relative; }
.kopf-nav a:not(.knopf)::after{ content:''; position:absolute; left:0; right:100%; bottom:-5px; height:1px;
  background:var(--kupfer); transition:right var(--normal) var(--aus); }
.kopf-nav a:not(.knopf):hover::after{ right:0; }

/* ── Knöpfe ────────────────────────────────────────────────────────
   Die Füllung fährt beim Hover von unten ein, statt hart umzuspringen. */
.knopf{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:44px;   /* Tapziel, gilt auch für die kleine Variante */
  padding:.9rem 1.65rem; border-radius:var(--radius);
  font-size:var(--klein); font-weight:700; letter-spacing:.06em;
  text-decoration:none; white-space:nowrap;
  transition:color var(--normal) var(--weich), transform var(--schnell), box-shadow var(--normal);
}
.knopf::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%); transition:transform var(--normal) var(--aus);
}
.knopf:hover::before{ transform:none; }
.knopf:active{ transform:translateY(1px); }

/* Die Füllung fährt in echtem Kupfer ein, und die Schrift wird dabei dunkel:
   Creme auf Kupfer wären 2,9:1, --gruen-tief darauf sind 5,4:1. */
.knopf-voll{ background:var(--gruen); color:var(--grund); }
.knopf-voll::before{ background:var(--kupfer); }
.knopf-voll:hover{ color:var(--gruen-tief); box-shadow:0 6px 18px rgba(18,60,31,.16); }

.knopf-hell{ background:var(--grund); color:var(--gruen); }
.knopf-hell::before{ background:var(--kupfer-hell); }
.knopf-hell:hover{ color:var(--gruen-tief); box-shadow:0 6px 22px rgba(0,0,0,.28); }

.knopf-linie{ border:1px solid var(--kupfer); color:var(--gruen); }
.knopf-linie::before{ background:var(--kupfer); }
.knopf-linie:hover{ color:var(--gruen-tief); }

.knopf-klein{ padding:.7rem 1.35rem; font-size:var(--klein); }

.menu-knopf{ display:none; width:44px; height:44px; flex-direction:column;
  justify-content:center; align-items:center; gap:5px; }
.menu-knopf span{ width:24px; height:1.5px; background:var(--gruen); display:block;
  transition:transform var(--normal) var(--aus), opacity var(--schnell), background var(--normal); }
.menu-knopf[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-knopf[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-knopf[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ═══ 1 · BÜHNE ═════════════════════════════════════════════════
   Die einzige Fläche der Seite, die ein Bild sein darf. Dunkel, damit
   der Text darauf steht statt darin zu verschwinden. */
.buehne{
  min-height:100svh; display:flex; align-items:center;
  padding-block:8rem 3rem; position:relative; overflow:hidden;
  background:var(--tinte); color:var(--auf-dunkel);
}
.buehne h1{ color:var(--auf-dunkel); max-width:16ch; }

.buehne-film{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* Der Baum sitzt jetzt höher und kleiner. Vorher lag sein Schwerpunkt
   unter der Falz: sichtbar war fast nur Blattwerk, Stamm und Wurzeln
   standen unter dem Bildrand. Jetzt steht der ganze Baum im ersten Bild. */
/* Das Foto füllt die ganze Bühne, nicht mehr nur die rechte Hälfte. Die
   Bewegung ist dieselbe wie vorher beim Vektor: ein sehr langsames Atmen.
   26 s und 4 % sind bewusst wenig — schneller sieht es nach Effekt aus. */
/* Etwas höher und tiefer als die Bühne, damit die Parallaxe im Skript das
   Foto verschieben kann, ohne oben eine Kante freizulegen. */
.buehne-baum{
  position:absolute; top:-8%; left:0; right:0; height:116%; display:block;
}
/* Gespiegelt seit dem 16.08.2026: der Baum stand vorher links, mit der
   Sonne dahinter, genau dort, wo der Fragenstapel liest. Der Gegenlichtsaum
   lag unter "Und wenn der Rücken nicht mehr mitmacht?" und senkte den
   Kontrast an der Stelle, die am meisten Lesearbeit verlangt. Gespiegelt
   steht der Baum rechts, die freie Wiese und der dunklere Himmel links,
   und der Schleier (siehe unten) muss darüber nichts mehr ausgleichen, was
   das Foto selbst schon lösen kann.

   scaleX(-1) statt eines zweiten Bildzuschnitts: dieselbe Datei, keine
   zusätzliche Ausgabe, kein neuer Bezug in bauen.py. Die Atmen-Animation
   ist deshalb als eigene, bereits gespiegelte Keyframe-Regel geschrieben,
   weil eine Animation die Basis-Transform ersetzt statt sie zu ergänzen. */
.buehne-baum img{
  width:100%; height:100%; object-fit:cover; object-position:50% 62%;
  animation:atmen-gespiegelt 26s ease-in-out infinite; will-change:transform;
}
/* Der Schleier macht aus dem Foto einen Grund, auf dem Schrift stehen kann.
   Links dunkel, weil dort die Headline sitzt; unten in --tinte auslaufend,
   damit die Bühne ohne Kante in den nächsten Abschnitt übergeht. Ein
   Grünschleier über allem bindet das warme Foto an die Marke. */
.buehne-film .schleier{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(7,26,13,.88) 0%, rgba(7,26,13,.72) 30%, rgba(7,26,13,.30) 62%, rgba(7,26,13,.04) 100%),
    linear-gradient(to bottom, rgba(7,26,13,.45) 0%, rgba(7,26,13,0) 22% 60%, var(--tinte) 100%),
    linear-gradient(rgba(18,60,31,.14), rgba(18,60,31,.14));
}
@keyframes atmen-gespiegelt{
  0%,100%{ transform:scaleX(-1) scale(1); }
  50%    { transform:scaleX(-1) scale(1.04); }
}
@media (prefers-reduced-motion: reduce){ .buehne-baum img{ animation:none; } }

.buehne-inhalt{ position:relative; z-index:1; width:100%; }
.buehne .marke{ color:var(--kupfer-hell); }
/* Der Gegenstrich rechts, nur im Buehnen-Eyebrow: spiegelt den linken
   Strich aus .marke::before und zieht sich beim Erscheinen von rechts
   auf (transform-origin gespiegelt). Die uebrigen Eyebrows der Seite
   behalten bewusst nur den linken Strich, sie leiten einen Abschnitt
   ein; hier oben rahmt das Paar die Marke wie ein Siegel. */
.buehne .marke::after{
  content:''; width:26px; height:1px; background:var(--kupfer); flex:none;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform var(--szene) var(--aus) 120ms;
}
.js .buehne .marke.da::after{ transform:scaleX(1); }
html:not(.js) .buehne .marke::after{ transform:none; }
/* Die Subline hatte nie eine eigene Regel. Bei einem Satz ging das; seit sie
   auch benennt, was wir tun, braucht sie ein Maß. */
.buehne-sub{
  margin-top:var(--r2); max-width:64ch;
  font-size:var(--body-gr); line-height:1.5; color:var(--auf-dunkel-leise);
}
.buehne h1 .zeile{ display:block; overflow:hidden; padding-bottom:.06em; }
.buehne h1 .zeile span{ display:block; transform:translateY(105%); }
.js .buehne h1 .zeile span{ transition:transform 1.05s var(--sanft); transition-delay:var(--verzug,0ms); }
.js .buehne.gestartet h1 .zeile span{ transform:none; }
html:not(.js) .buehne h1 .zeile span{ transform:none; }

/* ── Der Stapel ────────────────────────────────────────────────────
   Die Überforderung wird nicht behauptet, sie wird vorgeführt. Die
   Fragen sammeln sich, dann treten sie zurück. Zurücktreten heißt
   gedämpft, nicht unlesbar: vorher fielen sie auf 30 % Deckkraft und
   waren damit weg. Jetzt bleiben sie lesbar und verlieren nur das
   Gewicht. */
/* margin-top r4 statt r2 seit dem 16.08.2026: der Schleier (::before)
   reicht 1,4rem ueber den Stapel hinaus, bei r2 (1rem) Abstand klebte
   seine Oberkante damit direkt an "Die Gedanken, die immer wieder
   kommen:". Mit r4 (2,5rem) bleiben gut 1,1rem Luft zwischen Satz und
   Kastenkante. */
.stapel{ position:relative; margin-top:var(--r4); display:grid; gap:.28rem; max-width:44ch; }
/* Gemessen am 15.08.2026: Am hellsten Punkt hinter dem Stapel kam die
   zurückgetretene Frage auf 2,83:1. Der Schleier wird nach rechts hin
   dünner, genau dort enden aber die längsten Zeilen. Statt das ganze Foto
   abzudunkeln bekommt nur der Stapel einen eigenen, weich auslaufenden
   Grund. Nachgemessen: 4,8:1. */
.stapel::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-1.4rem -3.5rem -1.4rem -2.5rem;
  background:radial-gradient(120% 165% at 38% 50%,
    rgba(7,26,13,.42) 0%, rgba(7,26,13,.30) 52%, rgba(7,26,13,0) 100%);
}
.stapel li{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(.98rem,1.45vw,1.12rem); line-height:1.34;
  color:var(--auf-dunkel-leise);
  opacity:0; transform:translateY(10px);
}
.js .stapel li{ transition:opacity 420ms var(--aus), transform 420ms var(--aus), color 800ms var(--weich); }
.js .stapel.laeuft li{ opacity:1; transform:none; }
html:not(.js) .stapel li{ opacity:1; transform:none; }
/* Jede Frage etwas weiter eingerückt: der Stapel wächst sichtbar schief. */
.stapel li:nth-child(2){ margin-left:.9rem }
.stapel li:nth-child(3){ margin-left:.3rem }
.stapel li:nth-child(4){ margin-left:1.6rem }
.stapel li:nth-child(5){ margin-left:.7rem }
.stapel li:nth-child(6){ margin-left:2.1rem }
.stapel li:nth-child(7){ margin-left:1.2rem }
/* Zurücktreten heißt leiser, nicht unlesbar. Vorher fielen die Fragen auf
   .58 und rissen damit auf dem Foto die AA-Schwelle. */
.js .stapel.laeuft.zurueck li{
  color:var(--auf-dunkel-leise);
  transition:color 900ms var(--weich) !important; transition-delay:0ms !important;
}

/* Die Wendung: die Fragen treten zurück, ein Satz bleibt stehen. */
.wendung{ margin-top:var(--r2); max-width:46ch; opacity:0; transform:translateY(14px); }
.js .wendung{ transition:opacity 700ms var(--sanft), transform 700ms var(--sanft); }
.js .wendung.da{ opacity:1; transform:none; }
html:not(.js) .wendung{ opacity:1; transform:none; }
/* Getauscht am 16.08.2026. Vorher trug .wendung-los die grosse Schrift
   und .wendung-satz die kleine, also stand der Preis über der Entlastung.
   Jetzt ist es umgekehrt: erst der Satz, der den Besucher entlastet,
   dann der Nachsatz, der erklaert, dass es nichts extra kostet.

   Der Nachsatz steht auf einem kurzen Kupferstrich statt in Kupferschrift.
   Kupfer als Schrift gaebe es hier zwar, weil der Grund dunkel ist, aber
   der Satz soll nicht mit der H1 um Aufmerksamkeit streiten. */
.wendung-satz{
  font-family:var(--serif); font-size:clamp(1.3rem,2.3vw,1.85rem);
  line-height:1.24; color:var(--auf-dunkel); letter-spacing:-.014em;
}
.wendung-satz + .wendung-satz{ margin-top:.35rem; }
.wendung-los{
  margin-top:var(--r3); padding-top:var(--r2);
  font-size:var(--body); line-height:1.45;
  color:var(--auf-dunkel-leise); max-width:40ch;
  border-top:1px solid var(--kupfer);
  display:inline-block;
}

/* ═══ 2 · HALTUNG ═══════════════════════════════════════════════
   Drei Spalten statt drei Absätzen. Der Buchstabe trägt, der Satz
   darunter passt in eine Zeile. Vorher standen hier 165 Wörter für
   eine Aussage, die in 30 gesagt ist. */
.gbw{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:var(--r4); border-top:1px solid var(--linie); padding-top:var(--r4);
}
/* subgrid seit dem 16.08.2026: die drei Kacheln teilen sich vier
   Zeilen des Eltern-Rasters (Buchstabe, Titel, Text, Frage). Damit
   beginnen die drei Fragen IMMER auf derselben Hoehe, egal wie lang
   die Texte darueber sind: die Textzeile aller drei Spalten ist so
   hoch wie der laengste Text. Marvins Punkt, die Fragen standen auf
   drei verschiedenen Hoehen. Browser ohne subgrid (vor 2023) ignorieren
   nur die grid-template-rows-Zeile und zeigen den Stand von vorher. */
.gbw-block{ display:grid; gap:var(--r2); align-content:start;
  grid-row:span 4; grid-template-rows:subgrid; }
/* Die einzige Stelle, an der Kupfer auf hellem Grund Schrift sein darf:
   Anzeigegröße ab 3 rem, damit gilt die 3:1-Schwelle, gemessen 3,3:1.
   Echtes #ba9055, keine abgedunkelte Variante. Siehe STYLEGUIDE.md 0. */
.gbw-buchstabe{
  font-family:var(--serif); font-size:clamp(3.6rem,7vw,5.8rem); line-height:.8;
  color:var(--kupfer); font-weight:400;
}
.gbw-block h3{ font-family:var(--serif); font-size:var(--h2); font-weight:500;
  color:var(--gruen); letter-spacing:-.01em; }
.gbw-block p{ font-size:var(--klein); max-width:26ch; }

/* ═══ 3 · DER BAUM ═══════════════════════════════════════════════
   Auf Tiefgrund seit dem 15.08.2026. Kupfer auf Creme kann rechnerisch
   nicht besser werden: der ruhende Teil kam auf 1,13:1, der leuchtende
   auf 2,59:1. Das zentrale Markensymbol war damit die schwächste Grafik
   der Seite. Nicht die Farbe war schuld, der Grund war es.
   Auf --gruen-tief nachgerechnet: ruhend 1,62:1, leuchtend 5,37:1.
   Der Abstand zwischen "aus" und "an" ist damit mehr als verdreifacht. */
#baum{ background:var(--gruen-tief); color:var(--auf-dunkel); }
#baum h2, #baum h3{ color:var(--auf-dunkel); }
#baum .marke{ color:var(--auf-dunkel); }
#baum .marke::before{ background:var(--kupfer-hell); }
#baum .leise{ color:var(--auf-dunkel-leise); }

.baum-raum{
  margin-top:var(--r4);
  display:grid; grid-template-columns:minmax(240px,34%) 1fr; gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.baum-saeule{ position:sticky; top:calc(64px + var(--r3)); }
.baum-bild{ position:relative; }
.baum-svg{ width:100%; height:auto; }
/* Der Baum wächst einmal, von unten nach oben. inset(100% 0 0 0) heißt:
   nichts sichtbar, der Rand kommt von oben. Läuft er auf 0, gibt er die
   Zeichnung von der Wurzel her frei. */
.js .baum-svg{ clip-path:inset(100% 0 0 0); transition:clip-path var(--film) var(--sanft); }
.js .baum-bild.gewachsen .baum-svg{ clip-path:inset(0 0 0 0); }

/* Ein Pfad, drei Bänder. Die Grenzen sind an der Zeichnung gemessen,
   nicht geschätzt: bis 65,5 % Blattwerk, 65,5 bis 80 % nur Stamm
   (Breite 40 bis 58 % der Zeichnung), ab 80 % die Wurzeln. Vorher lagen
   die Bänder bei 55/52-78/76 %, dadurch leuchteten beim Wort "Stamm"
   die untersten Blätter mit und bei "Wurzeln" das Stammende. */
/* Kupfer ist hier Fläche, nicht Schrift: der leuchtende Teil steht im
   Markenwert der Zeichnung (#ba9055), der ruhende nur schwächer. Die
   dunkle Schriftvariante hatte den Baum bräunlich und schwer gemacht. */
.baum-svg .teil{ color:var(--kupfer); opacity:.30;
  transition:opacity var(--ruhig) var(--weich); }
/* An der Zeichnung abgetastet, nicht geschaetzt. Die mittige Saeule laeuft
   von 50 % Hoehe abwaerts und liegt dabei zwischen 42 % und 59 % Breite; ab
   etwa 82 % spreizen sich die Wurzeln ueber die volle Breite. Der Stamm ist
   deshalb seitlich beschnitten: ohne das faerbte das Band auf gleicher Hoehe
   die Blaetter links und rechts mit ein. Die Grenze nach unten liegt bei
   80 %, also genau auf der gezeichneten Erdlinie. */
.baum-svg .krone { clip-path:inset(0 0 50% 0); }
.baum-svg .stamm { clip-path:inset(50% 41% 20% 41%); }
.baum-svg .wurzel{ clip-path:inset(80% 0 0 0); }
.baum-svg .teil.an{ opacity:1; }

/* Die Erdlinie sagt in einem Strich, wo oben und unten ist. */
.baum-erde{
  position:absolute; left:-4%; right:-4%; top:80%; height:0;
  border-top:1px solid rgba(245,241,232,.32);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform var(--szene) var(--aus) 500ms;
}
.js .baum-bild.gewachsen .baum-erde{ transform:scaleX(1); }
html:not(.js) .baum-erde{ transform:none; }
/* Die Beschriftung steht über der Linie, nicht darunter: unterhalb läuft
   sie in die Wurzeln hinein, oberhalb ist an dieser Höhe nur Stamm. */
.baum-erde span{
  position:absolute; right:0; bottom:.35rem;
  font-size:var(--winzig); letter-spacing:var(--sperr-weit); text-transform:uppercase;
  color:var(--auf-dunkel-schwach);
}

/* Hier stand bis zum 15.08.2026 .baum-alter mit Eingabefeld und .baum-zeit.
   Das Feld ist beim Umbau durch den Baum-Check ersetzt worden, die Regeln
   blieben stehen. Toter Code, entfernt. */

.baum-texte{ display:grid; gap:clamp(2.2rem,5vw,3.6rem); }
.baum-text{
  padding-left:var(--r3); border-left:2px solid rgba(245,241,232,.16);
  transition:border-color var(--normal), transform var(--normal) var(--aus);
}
.baum-text.an{ border-color:var(--kupfer); transform:translateX(4px); }
.baum-rolle{
  font-size:var(--winzig); font-weight:700; letter-spacing:var(--sperr-weit);
  text-transform:uppercase; color:var(--kupfer-hell); margin-bottom:.45rem;
}
.baum-text h3{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.2rem,2vw,1.55rem);
  color:var(--auf-dunkel); letter-spacing:-.012em; margin-bottom:var(--r1);
}
.baum-text em{ font-style:italic; color:var(--kupfer-hell); }

/* ═══ 3 · DIE WURZELN, IN DER PRAXIS ═══════════════════════════════
   Das kombinierte "wie wir arbeiten" + "wenn die Versicherung nicht
   zahlt", siehe die vollstaendige Begruendung in vorlage/start.html. */
/* ═══ 5 · ABSCHLUSS ═════════════════════════════════════════════
   Stand 16.08.2026, dritte Korrektur: einspaltig statt zweispaltig,
   seit das "Deine Nachricht landet bei einem Menschen"-Feld mit Janeks
   Foto entfallen ist. .abschluss-wer* stand hier, komplett dead code
   jetzt, nirgends sonst verwendet. */
.abschluss{ background:var(--grund-warm); border-top:1px solid var(--linie); }
.abschluss .bahn + .bahn{ display:block; }
.abschluss-schluss{
  margin-top:var(--r6); padding-top:var(--r4); border-top:1px solid var(--linie);
  font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,2.2vw,1.7rem);
  line-height:1.32; color:var(--gruen); max-width:34ch;
}

/* ═══ FUSS ══════════════════════════════════════════════════════ */
.fuss{ background:var(--gruen); color:var(--auf-dunkel-leise); padding-block:var(--r5) var(--r4); }
.fuss a{ color:inherit; text-decoration:none; transition:color var(--schnell); }
.fuss a:hover{ color:var(--kupfer-hell); }
.fuss-oben{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--r4); }
.fuss h4{ font-size:var(--winzig); letter-spacing:var(--sperr-weit); text-transform:uppercase;
  color:var(--kupfer-hell); margin-bottom:var(--r2); font-weight:700; }
.fuss li{ margin-bottom:.45rem; font-size:var(--klein); }
.fuss .wortmarke path{ fill:var(--auf-dunkel); }
.fuss-unten{ margin-top:var(--r5); padding-top:var(--r3); border-top:1px solid rgba(245,241,232,.16);
  display:flex; justify-content:space-between; gap:var(--r2); flex-wrap:wrap; font-size:var(--winzig); }
.fuss-hinweis{ margin-top:var(--r3); font-size:var(--winzig); color:rgba(245,241,232,.66); max-width:70ch; }

/* ═══ INHALTSSEITEN ═════════════════════════════════════════════
   Wissensseiten und Unterseiten. Ein Text muss auch dann etwas wert
   sein, wenn der Leser danach nie Kontakt aufnimmt. */
.seitenkopf{ padding-block:9rem var(--r5); border-bottom:1px solid var(--linie);
  background:var(--grund-warm); }
.seitenkopf h1{ font-size:var(--h1); max-width:20ch; }
.seitenkopf .vorspann{ margin-top:var(--r3); max-width:58ch; font-size:var(--body-gr); color:var(--text-leise); }
.brotkrume{ font-size:var(--winzig); letter-spacing:.06em; color:var(--text-leise); margin-bottom:var(--r2); }
.brotkrume a{ color:var(--gruen); text-decoration:none; }
.brotkrume a:hover{ text-decoration:underline; }

.artikel{ padding-block:var(--r5); }
.artikel h2{ font-size:var(--h2); margin-top:var(--r5); margin-bottom:var(--r2); }
.artikel h2:first-child{ margin-top:0; }
.artikel h3{ font-family:var(--serif); font-weight:500; font-size:1.2rem; color:var(--gruen);
  margin-top:var(--r4); margin-bottom:var(--r1); letter-spacing:-.005em; }
.artikel p{ color:var(--text-leise); }
.artikel p strong{ color:var(--gruen); }
.artikel ul.punkte{ margin:var(--r2) 0; display:grid; gap:.55rem; max-width:var(--spalte); }
.artikel ul.punkte li{ position:relative; padding-left:1.5rem; color:var(--text-leise); }
.artikel ul.punkte li::before{ content:''; position:absolute; left:0; top:.72em; width:9px; height:1px; background:var(--kupfer); }

/* Der zitierfähige Antwortblock: 40 bis 60 Wörter, in sich verständlich,
   damit ein Sprachmodell ihn wörtlich übernehmen kann, ohne den Kontext
   zu verlieren. Steht sichtbar auf der Seite, nicht versteckt im Markup.
   Ohne Fläche, nur eine Haarlinie und Luft. */
.antwort{ margin:var(--r5) 0; padding:0 0 0 var(--r3); border-left:2px solid var(--kupfer); }
.antwort .frage{
  font-family:var(--serif); font-size:clamp(1.2rem,2.1vw,1.55rem);
  color:var(--gruen); margin-bottom:var(--r2); line-height:1.24; letter-spacing:-.012em;
}
.antwort p{ color:var(--text); max-width:58ch; }

.hinweis-quelle{ font-size:var(--klein); color:var(--text-leise); margin-top:var(--r2); }
.hinweis-quelle a{ color:var(--gruen); }

.schluss-ruf{ background:var(--grund-warm); border-top:1px solid var(--linie); }
.schluss-ruf .bahn{ text-align:center; }
.schluss-ruf h2{ max-width:22ch; margin-inline:auto; }
.schluss-ruf p{ max-width:52ch; margin:var(--r2) auto var(--r4); color:var(--text-leise); }

/* Grundfall ist der helle Hintergrund, dort gilt die dunkle Kupfervariante.
   --kupfer-hell kam auf Offwhite nur auf 2,2 bis 2,4:1. */
.weiterlesen{
  display:inline-block; margin-top:var(--r3);
  font-size:var(--klein); letter-spacing:.04em;
  color:var(--gruen); text-decoration:none;
  border-bottom:1px solid var(--kupfer); padding-bottom:2px;
  transition:border-color var(--schnell), color var(--schnell);
}
.weiterlesen:hover{ color:var(--gruen); border-color:var(--gruen); }

/* Die Namensliste. Echte Portraits ersetzen die Fotos nach und nach;
   bis dahin steht an ihrer Stelle ein Platzhalter mit Initialen, damit
   sofort klar ist, dass hier ein Mensch steht, kein Icon. */
.namen{ margin-top:var(--r4); border-top:1px solid var(--linie); }
.namen li{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--r3); padding:var(--r2) 0;
  border-bottom:1px solid var(--linie);
  transition:background var(--normal);
}
/* Der Name rueckt beim Ueberfahren ein. Bis zum 16.08.2026 lief das ueber
   padding-left, also ueber eine Layout-Eigenschaft: der Browser rechnet
   dann bei jedem Frame der Bewegung die Zeile neu. transform laeuft auf
   der Grafikkarte und kostet nichts.

   Verschoben wird nur das erste Kind, nicht die ganze Zeile. Sonst
   wanderten Rahmen und Flaeche mit, und die Registernummer rechts, die
   vorher stehen blieb, ruckte mit nach rechts. */
.namen li > :first-child{ transition:transform var(--normal) var(--aus); }
.namen li:hover{ background:var(--grund-warm); }
.namen li:hover > :first-child{ transform:translateX(var(--r2)); }
/* Hier stand .namen .wer. Die Klasse kommt seit dem Umbau der Partnerliste
   in keiner erzeugten Seite mehr vor. Toter Code, entfernt. */
/* Hier standen .portraet, .leute-zwei, .leute-karte und .leute-wachsen:
   die "Die Menschen"-Sektion der Startseite, entfallen zum 16.08.2026.
   Marvins Feedback: die Banderole oben zeigt die Gesichter schon, und
   die Registernummern stehen vollstaendig auf partner.html. Toter Code,
   entfernt. */
.namen .name{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.18;
  color:var(--gruen); letter-spacing:-.012em;
}
.namen .ort{ color:var(--text-leise); font-size:var(--klein); margin-left:.6rem;
  font-family:var(--sans); letter-spacing:0; }
.namen .nr{
  font-size:var(--winzig); letter-spacing:.05em; white-space:nowrap;
  color:var(--gruen); font-variant-numeric:tabular-nums;
  opacity:0; transform:translateY(5px);
}
.js .namen li.da .nr{
  opacity:1; transform:none;
  transition:opacity var(--normal) var(--aus) 420ms, transform var(--normal) var(--aus) 420ms;
}
html:not(.js) .namen .nr{ opacity:1; transform:none; }
.namen .nr.offen{ color:var(--text-leise); font-style:italic; letter-spacing:0; }

/* Wissenshub: gesetzte Liste statt Kartenraster */
.lesestuecke{ margin-top:var(--r4); border-top:1px solid var(--linie); }
.lesestuecke a{
  display:grid; grid-template-columns:1fr auto; gap:var(--r3); align-items:baseline;
  padding:var(--r3) 0; border-bottom:1px solid var(--linie); text-decoration:none;
  transition:background var(--normal);
}
/* Gleiche Umstellung wie bei .namen li: transform statt padding-left,
   und nur das erste Kind, damit der Pfeil rechts stehen bleibt. */
.lesestuecke a > :first-child{ transition:transform var(--normal) var(--aus); }
.lesestuecke a:hover{ background:var(--grund-warm); }
.lesestuecke a:hover > :first-child{ transform:translateX(var(--r2)); }
.lesestuecke h3{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.2rem,2vw,1.55rem);
  color:var(--gruen); margin:0 0 .3rem; letter-spacing:-.012em;
}
.lesestuecke p{ margin:0; color:var(--text-leise); font-size:var(--klein); max-width:56ch; }
.lesestuecke .pfeil{ color:var(--gruen); font-size:1.15rem;
  transition:transform var(--normal) var(--aus); }
.lesestuecke a:hover .pfeil{ transform:translateX(5px); }

/* Zahlen auf den Inhaltsseiten: Haarlinien statt Kästen */
.zahlreihe{ margin:var(--r4) 0; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--linie); }
.zahlreihe div{ padding:var(--r3) var(--r3) var(--r3) 0; border-bottom:1px solid var(--linie); }
.zahlreihe div + div{ border-left:1px solid var(--linie); padding-left:var(--r3); }
.zahlreihe b{ display:block; font-family:var(--sans); font-weight:300;
  font-size:clamp(2.1rem,4vw,3rem); line-height:1; color:var(--gruen);
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.03em; }
.zahlreihe span{ display:block; font-size:var(--klein); color:var(--text-leise); margin-top:.5rem; }

/* ═══ PLATZHALTER UND VERZEICHNIS ═══════════════════════════════
   Ein Platzhalter muss als Platzhalter erkennbar sein. Eine erfundene
   Registernummer wäre eine Aussage über eine Zulassung, die es noch
   nicht gibt, und genau das darf auf einer Maklerseite nicht passieren. */
.platzhalter{
  font-style:italic; letter-spacing:0; color:var(--text-leise);
  background:repeating-linear-gradient(-45deg,
    rgba(186,144,85,.14) 0 6px, transparent 6px 12px);
  padding:.1em .45em; border-radius:2px;
}
.namen .nr.platzhalter{ color:var(--text-leise); }

.register-huelle{ overflow-x:auto; margin-top:var(--r2); }
.register{ width:100%; border-collapse:collapse; font-size:var(--klein); min-width:640px; }
.register th{
  text-align:left; font-weight:700; font-size:var(--winzig);
  letter-spacing:var(--sperr-weit); text-transform:uppercase;
  color:var(--gruen); padding:0 var(--r2) var(--r1) 0;
  border-bottom:1px solid var(--linie-stark);
}
.register td{
  padding:var(--r2) var(--r2) var(--r2) 0;
  border-bottom:1px solid var(--linie); color:var(--text-leise);
  vertical-align:top;
}
.register tbody tr{ transition:background var(--schnell); }
.register tbody tr:hover{ background:var(--grund-warm); }
.register td:first-child{ color:var(--gruen); font-family:var(--serif); font-size:1.05rem; }

/* Die Studienangabe steht direkt neben der Zahl. Eine Zahl ohne sichtbare
   Quelle gehört nicht vor den Kunden. */
.quelle-klein{
  display:block; margin-top:.35rem;
  font-size:var(--winzig); color:var(--text-leise); letter-spacing:.02em;
}

/* ═══ MOBIL ═════════════════════════════════════════════════════ */
@media (max-width:900px){
  .abschluss .bahn{ grid-template-columns:1fr; }
  .fuss-oben{ grid-template-columns:1fr 1fr; }
  .baum-raum{ grid-template-columns:1fr; gap:var(--r4); }
  /* Ohne zweite Spalte gibt es nichts, woran der Baum kleben könnte. */
  .baum-saeule{ position:static; max-width:300px; margin-inline:auto; }
  .gbw{ grid-template-columns:1fr; gap:var(--r4); }
  /* Einspaltig gibt es nichts mehr auszurichten: subgrid und der
     4-Zeilen-Spann aus der Desktop-Regel werden zurueckgenommen, sonst
     zerlegt der Spann die Buchstabe-daneben-Text-Anordnung. */
  .gbw-block{ grid-template-columns:auto 1fr; align-items:baseline;
    column-gap:var(--r3); grid-row:auto; grid-template-rows:none; }
  .gbw-buchstabe{ grid-row:span 2; }
  .gbw-block p{ max-width:52ch; }
}
@media (max-width:768px){
  .menu-knopf{ display:flex; }
  /* Neben dem Hamburger bleibt bei 375 px zu wenig Platz fuer die volle
     Marke. Kleiner, aber immer noch deutlich groesser als vorher. */
  .kopf{ height:80px; }
  .kopf.gescrollt{ height:68px; }
  .kopf-logo .baum, .kopf.gescrollt .kopf-logo .baum{ width:42px; height:42px; }
  .wortmarke, .kopf.gescrollt .wortmarke{ width:150px; }
  /* Auf dem Handy bleibt die Marke immer gleich groß, siehe Kommentar
     oben am Menü-Knopf: nur die Kopfhöhe schrumpft, nicht das Logo. Der
     Scale-Schritt von .kopf.gescrollt .kopf-logo gilt nur größeren
     Schirmen, hier ausdrücklich zurückgesetzt. */
  .kopf.gescrollt .kopf-logo{ transform:none; }
  /* backdrop-filter auf dem Kopf würde ihn zum umschließenden Block für
     position:fixed machen. Das Overlay wäre dann 78 px hoch. */
  .kopf{ backdrop-filter:none !important; }
  .kopf.gescrollt{ background:var(--grund); }
  .kopf-nav{
    /* Der Streifen ist auf dem Handy 80 px hoch und schrumpft beim Scrollen
       auf 68. Das Overlay muss genau darunter beginnen, sonst deckt es den
       unteren Rand des Kopfes zu. */
    position:fixed; inset:80px 0 0 0; background:var(--grund);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:var(--r2) var(--rand) var(--r5); overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity var(--normal), transform var(--normal) var(--aus), visibility var(--normal);
  }
  .kopf.menu-offen .kopf-nav{ opacity:1; visibility:visible; transform:none; }
  .kopf.gescrollt .kopf-nav{ top:68px; }
  .kopf.dunkel .kopf-nav a:not(.knopf){ color:var(--text); }
  .kopf.dunkel:not(.gescrollt) .knopf-voll{ background:var(--gruen); color:var(--grund); }
  .kopf-nav a:not(.knopf){ padding-block:1.05rem; font-size:1.05rem; border-bottom:1px solid var(--linie); }
  .kopf-nav a::after{ display:none; }
  .kopf-nav .knopf{ margin-top:var(--r3); justify-content:center; border-bottom:0; }
  body.menu-offen{ overflow:hidden; }

  .buehne{ padding-block:8.5rem 5rem; }
  /* Hochkant liegt das Foto hinter der ganzen Spalte, nicht seitlich daneben.
     Der Schleier läuft deshalb von oben nach unten statt von links. */
  .buehne-baum img{ object-position:50% 50%; }
  .buehne-film .schleier{
    background:
      linear-gradient(to bottom, rgba(7,26,13,.86) 0%, rgba(7,26,13,.62) 45%, var(--tinte) 100%),
      linear-gradient(rgba(18,60,31,.30), rgba(18,60,31,.30));
  }
  .stapel li{ margin-left:0 !important; }
  .gbw-buchstabe{ font-size:3rem; }
  .zahlreihe{ grid-template-columns:1fr; }
  .zahlreihe div + div{ border-left:0; padding-left:0; }
  .namen li{ flex-direction:column; align-items:flex-start; gap:.35rem; }
  .lesestuecke a{ grid-template-columns:1fr; }
  .lesestuecke .pfeil{ display:none; }
  .fuss-oben{ grid-template-columns:1fr; }
  .seitenkopf{ padding-block:7rem var(--r4); }
}

/* ═══ PARTNERSEITE ══════════════════════════════════════════════
   Der Text bleibt der des Partners. Angewendet ist nur der Stil und
   Weniger ist mehr: Was auf der Hauptseite steht, steht hier als Link. */
.person-kopf{ display:grid; grid-template-columns:auto 1fr; gap:var(--r4); align-items:start; }
.person-portraet{
  width:150px; height:188px; object-fit:cover; object-position:center top;
  border-radius:var(--radius-karte); border:1px solid var(--linie);
}
.person-zulassung{
  margin-top:var(--r3); font-size:var(--klein); color:var(--text-leise);
  max-width:60ch; line-height:1.7;
}
.person-zulassung a{ color:var(--gruen); }

.person-zitat{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.35rem,2.6vw,1.95rem); line-height:1.3;
  color:var(--gruen); max-width:26ch;
  padding-left:var(--r3); border-left:2px solid var(--kupfer);
  margin-bottom:var(--r5);
}
.person-pointe{
  font-family:var(--serif); font-size:clamp(1.4rem,2.8vw,2rem); line-height:1.2;
  color:var(--gruen); letter-spacing:-.01em; max-width:22ch;
  margin-block:var(--r4) !important;
}
.artikel .weiterlesen{ margin-top:var(--r1); }

@media (max-width:768px){
  .person-kopf{ grid-template-columns:1fr; gap:var(--r3); }
  .person-portraet{ width:120px; height:150px; }
}

/* ═══ DER BAUM-ABSCHLUSS ═══════════════════════════════════════════
   Bis zum 16.08.2026 stand hier der Baum-Check: drei Knöpfe, eine
   Antwort, kein eigener Ausgang. Marvins Feedback war eindeutig: das
   Rätselspiel fliegt raus, an seine Stelle tritt die direkte Einladung
   mit dem Hebel gleich daneben. Der grosse Erdschnitt (Marvins Wort
   dafür: "Lieblingsmoment") ist mit der Ernstfall-Sektion mitgegangen,
   siehe die neue, kleine Wurzel-Ikone im Praxis-Abschnitt weiter unten,
   die dasselbe Bild trägt, nur kompakt statt dramatisch. */
.baum-abschluss{
  margin-top:var(--r5); padding-top:var(--r4);
  border-top:1px solid rgba(245,241,232,.16);
}

/* ═══ DER VERTRIEBSHEBEL ════════════════════════════════════════════
   Ein Satz, ein Feld, ein Knopf. Steht an genau drei Stellen: nach dem
   Baum-Check, nach dem Haken, im Abschluss. Immer dort, wo der Besucher
   gerade selbst etwas festgestellt hat, und sonst nirgends.

   Das Feld ist vorbelegt, damit der Weg einen Klick kostet und nicht
   einen Aufsatz. Es ist ein echtes <form method="get"> auf wa.me: kein
   Formularserver, keine Daten bei uns, und es funktioniert auch dann,
   wenn das Skript nicht laedt.

   Erzeugt wird das Markup an genau einer Stelle: hebel() in bauen.py. */
.hebel{ margin-top:var(--r4); }
/* Im Baum-Abschluss steht der Satz neben dem Feld statt darüber: Marvins
   Feedback zur zweiten Fassung, der Satz stand vorher doppelt da (siehe
   .baum-abschluss weiter oben) und kostete dadurch unnötig Höhe. Jetzt
   eine Zeile, Satz links mit fester Breite, Feld und Knopf rechts
   daneben, und erst die Kleingedruckte-Zeile darunter über die volle
   Breite. */
.baum-abschluss .hebel{
  margin-top:0;
  display:flex; flex-wrap:wrap; align-items:flex-end;
  column-gap:var(--r4); row-gap:var(--r2);
}
.baum-abschluss .hebel-satz{ flex:0 1 20ch; margin-bottom:0; }
.baum-abschluss .wa{ flex:1 1 300px; }
.baum-abschluss .hebel-dazu{ flex-basis:100%; }
.hebel-satz{
  font-family:var(--serif); font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.24; letter-spacing:-.015em; color:var(--gruen);
  max-width:24ch; margin-bottom:var(--r3);
}
.wa{ display:flex; flex-wrap:wrap; gap:.6rem; max-width:46ch; }
.wa input{
  flex:1 1 18ch; min-width:0; min-height:48px; padding:.7rem .95rem;
  font-family:var(--sans); font-size:var(--klein); line-height:1.4;
  color:var(--text); background:var(--grund);
  border:1px solid var(--linie-stark); border-radius:var(--radius);
  transition:border-color var(--schnell), box-shadow var(--schnell);
}
.wa input::placeholder{ color:var(--text-leise); }
.wa input:focus{
  outline:none; border-color:var(--kupfer); box-shadow:0 0 0 3px rgba(186,144,85,.28);
}
.wa .knopf{ flex:0 0 auto; }
/* Die Sprechblase macht aus dem Knopf ein Ziel, das man erkennt, bevor man
   ihn liest. Keine fremde Wortmarke, nur die Form. */
.wa .knopf svg{ width:16px; height:16px; flex:none; fill:currentColor; }
.hebel-zweitweg{
  display:inline-block; margin-top:var(--r2); font-size:var(--klein);
  color:var(--gruen); text-underline-offset:3px;
}
.hebel-dazu{
  margin-top:var(--r2); font-size:var(--winzig); letter-spacing:.03em;
  color:var(--text-leise); max-width:44ch;
}
.hebel-dazu b{ color:var(--gruen); font-weight:400; }

/* Auf den dunklen Flaechen dreht sich alles um: helles Feld, heller Knopf. */
.hebel-dunkel .hebel-satz{ color:var(--auf-dunkel); }
.hebel-dunkel .wa input{
  color:var(--auf-dunkel); background:rgba(245,241,232,.07);
  border-color:rgba(245,241,232,.30);
}
.hebel-dunkel .wa input::placeholder{ color:var(--auf-dunkel-schwach); }
.hebel-dunkel .wa input:focus{ border-color:var(--kupfer-hell); }
.hebel-dunkel .hebel-zweitweg{ color:var(--kupfer-hell); }
.hebel-dunkel .hebel-dazu{ color:var(--auf-dunkel-schwach); }
.hebel-dunkel .hebel-dazu b{ color:var(--auf-dunkel); }

/* Der Abschluss traegt denselben Hebel, nur eine Stufe groesser. */
.hebel-gross .wa{ max-width:58ch; }
.hebel-gross .wa input{ flex-basis:24ch; min-height:54px; font-size:var(--body); }
.hebel-gross .wa .knopf{ padding-inline:1.9rem; }

@media (max-width:560px){
  .wa{ max-width:none; }
  .wa input{ flex:1 1 100%; }
  .wa .knopf{ width:100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   STARTSEITE · Stand 16.08.2026, zweite Fassung

   Nach Marvins ausführlichem Feedback zur ersten Fassung: die eigene
   "Wer wir sind"-Fläche ist in G·B·W aufgegangen, die Fläche steht jetzt
   hell statt dunkel. Ordner-Digitalisierung und Rechtsschutz sind zu
   einem kompakten, zweispaltigen Praxis-Abschnitt verschmolzen. Der
   Baum-Check ist einer direkten Einladung gewichen. Neu dazu: die
   bewegte Reihe der Gesichter unter G·B·W.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 2 · WER WIR SIND, UND WARUM WIR SO ARBEITEN ───────────────────
   Beide vorherigen Flächen in einer, hell statt dunkel: die drei
   Buchstaben dürfen als echtes Kupfer auf Creme stehen, weil ihre
   Anzeigegröße die 3-rem-Ausnahme aus STYLEGUIDE.md, 0, erfüllt (3,3:1
   gemessen). Eine eigene dunkle Fläche dafür war nie nötig, sie kam nur
   aus der alten Fassung mit, die G·B·W noch nicht als Herzstück der
   Sektion behandelte. */
.wer-wir-sind{ background:var(--grund); }
.wer-wir-sind .marke{ margin-bottom:var(--r2); }

/* Die Fortsetzung der Überschrift, nicht ihre Erklärung: gleiche Schrift
   wie die H2, eine Stufe leichter, damit klar bleibt, was Zeile eins und
   was Zeile zwei ist. Der Punkt zwischen "Finanzberater." und
   "Lebensarchitekten." ist Absicht, kein Fehler: zwei kurze Aussagen,
   keine verbundene. */
.wws-tagline{
  margin-top:var(--r3);
  font-family:var(--serif); font-size:var(--h2); font-weight:500;
  color:var(--gruen); letter-spacing:-.012em; line-height:1.22;
}
.wws-intro{ margin-top:var(--r3); max-width:56ch; }

.gbw-block{ opacity:.28; filter:grayscale(1); }
.js .gbw-block{
  transition:opacity 620ms var(--sanft), filter 620ms var(--sanft),
             transform 620ms var(--sanft);
  transform:translateY(10px);
}
.gbw-block.leuchtet{ opacity:1; filter:none; transform:none; }
/* Ohne JS steht alles hell da. Eine Seite, die ohne Skript ihren
   Hauptinhalt ausgraut, ist kaputt, nicht dezent. */
html:not(.js) .gbw-block{ opacity:1; filter:none; }

/* Der Netzwerk-Satz am Ende der G-Kachel. Ein Fließtext-Anhang, keine
   eigene Fläche: er soll wie ein letzter Gedanke wirken, nicht wie ein
   neuer Baustein. */
.gbw-frage{
  margin-top:var(--r2); font-style:italic; color:var(--text-leise);
}

/* ── Der Fragemoment ───────────────────────────────────────────────
   Frage stellen, dann die Klappe halten, wie im Termin. Eine Website
   kann nicht schweigen, aber sie kann Fläche lassen: eine Frage, ein
   Kupferstrich, und darunter nichts. Wer hier einen Knopf hinstellt,
   beantwortet die Frage für den Besucher, und dann arbeitet sie nicht
   mehr.

   .fragemoment-kurz ist die einzige Ausnahme: dort folgt der Ausgang
   sofort, weil der Besucher den Vergleich gerade selbst gezogen hat und
   die volle Stille nicht mehr braucht. */
.fragemoment{
  margin-top:clamp(3.5rem,7vw,6rem);
  padding-top:var(--r4);
  display:grid; justify-items:start;
}
.fragemoment::before{
  content:''; width:64px; height:1px; background:var(--kupfer);
  margin-bottom:var(--r3);
}
/* Aufrecht statt kursiv seit dem 16.08.2026, und eine Stufe kleiner:
   Marvins Punkt, die grosse Kursive war schwer lesbar. Die kursive
   Playfair traegt bei den kleinen Kachel-Fragen (.gbw-frage), aber in
   dieser Groesse kippen ihre Schwuenge von elegant zu anstrengend.
   Aufrecht bleibt sie dieselbe Familie wie die Ueberschriften, nur als
   Frage gesetzt. */
.fragemoment-frage{
  font-family:var(--serif); font-weight:500; color:var(--gruen);
  font-size:clamp(1.2rem,2.1vw,1.6rem); line-height:1.35;
  letter-spacing:-.01em; max-width:30ch; text-wrap:balance;
}
/* Die Stille selbst. Ohne diese Höhe steht die Frage direkt am nächsten
   Absatz, und dann liest man weiter, statt nachzudenken. */
.fragemoment::after{ content:''; display:block; height:clamp(2.5rem,6vw,5rem); }
.fragemoment-kurz::after{ height:var(--r3); }

/* ── 3 · DER SCHLUSS VON G·B·W, UND DIE BANDEROLE DANEBEN ───────────
   .wws-schluss trägt beides in einer Zeile: das Fragemoment behält seine
   eigene, lesbare Breite, die Banderole füllt den Rest. Ohne Partner mit
   Foto und echtem Standort liefert banderole() in bauen.py "" zurück,
   dann steht das Fragemoment allein, flex-wrap fängt das auf.

   Erste Fassung stand die Banderole als eigene Fläche mit eigenem Rand
   und eigenem Sektionsabstand darunter: bei nur einer Karte blieb dort
   viel Leerfläche rechts und obendrein Luft oben und unten. Jetzt ohne
   eigene Fläche, eigenen Rand oder eigenen Abstand, sie ist Teil dieser
   einen Zeile. */
.wws-schluss{
  margin-top:clamp(3.5rem,7vw,6rem);
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:clamp(2rem,5vw,4rem);
}
/* padding-top:0 zusaetzlich zu margin-top:0: .wws-schluss traegt den
   Sektionsabstand bereits selbst, das Fragemoment haette sonst nochmal
   seinen eigenen draufgesetzt.

   Die Kupferlinie (::before) ist hier zusaetzlich ausgeblendet: Sie ist
   Teil der Box, align-items:flex-start richtet also Kupferlinie und
   Bildoberkante aneinander aus, nicht Fragetext und Bildoberkante. Genau
   das sah Marvin auf dem Screenshot: die Linie fluchtete, der eigentliche
   Text stand sichtbar tiefer als das Foto. Ohne Linie beginnt die Box
   direkt mit dem Zitat, und das Foto daneben liefert ohnehin schon den
   optischen Anker, den die Linie sonst setzt. */
.wws-schluss .fragemoment{ margin-top:0; padding-top:0; flex:1 1 26ch; }
.wws-schluss .fragemoment::before{ display:none; }

/* ── Die Banderole ────────────────────────────────────────────────
   Nur Foto, Name, Standort. Kein Fließtext, keine Registernummer, das
   steht bereits bei "Die Menschen" weiter unten. Wer weder Foto noch
   echten Standort hat, taucht hier nicht auf, siehe banderole() in
   bauen.py: dieselbe Ehrlichkeitsregel wie beim Rest der Seite.

   Läuft von selbst, moderat, und lässt sich jederzeit mit den Pfeilen
   überstimmen. site.js blendet die Pfeile aus und stoppt den Automatik-
   lauf, wenn ohnehin alles ins Fenster passt: mit ein oder zwei Karten
   ist ein Karussell nur eine Behauptung. */
/* .banderole ist der vertikale Rahmen: oben die Pfeil-Schiene-Zeile
   (.banderole-rahmen), darunter der dezente Verzeichnis-Link. Der Link
   stand bis zum 16.08.2026 unten bei "Die Menschen" als eigener Absatz,
   Marvins Feedback: dezent hier hoch, direkt bei den Gesichtern. */
/* min-width:0 an zwei Stellen, nicht nur an der Schiene: Ein Flex-Kind
   ohne eigenes min-width bleibt sonst mindestens so breit wie sein
   Inhalt, selbst wenn ein Enkel (.banderole-schiene) sein Overflow
   laengst selbst regelt. Ohne das hier sprengt eine lange Kartenliste
   .banderole und damit die ganze .wws-schluss-Zeile, das Fragemoment
   faellt dann in eine eigene Zeile darueber statt daneben zu stehen. */
.banderole{ flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:.6rem; }
.banderole-rahmen{ display:flex; align-items:center; gap:var(--r3); min-width:0; }
.banderole-alle{ text-align:right; font-size:var(--winzig); }
.banderole-alle a{
  color:var(--text-leise); text-decoration:none;
  border-bottom:1px solid var(--linie-stark); padding-bottom:1px;
  transition:color var(--schnell), border-color var(--schnell);
}
.banderole-alle a:hover{ color:var(--gruen); border-color:var(--kupfer); }
/* Kein scroll-snap-type hier: Es stand vorher auf "x proximity", fuer
   das manuelle Wischen gedacht. Der Automatiklauf in site.js bewegt
   dieselbe Schiene aber ueber viele kleine scrollLeft-Schritte pro
   Frame, und mindestens Safari behandelt jeden davon als eigene
   Scroll-Geste und zieht die Position danach zum naechsten Snap-Punkt
   zurueck. Ergebnis: die Banderole bewegt sich sichtbar nicht, obwohl
   der Automatiklauf technisch laeuft. Ohne Snap konkurriert nichts
   mehr mit den Frame-Schritten. */
.banderole-schiene{
  flex:1; min-width:0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.banderole-schiene::-webkit-scrollbar{ display:none; }
/* inline-flex, nicht flex: ohne das füllt die Liste als Block-Box immer
   die volle Breite ihrer Schiene, egal wie wenige Karten sie enthält,
   und dann berichtet scrollWidth die Breite der Box statt die Breite
   des Inhalts. Die Schleifen-Erkennung in site.js braucht den echten
   Inhaltswert, sonst haelt sie eine einzelne Karte faelschlich fuer
   ueberlaufend. */
.banderole-liste{ display:inline-flex; gap:var(--r3); }
.banderole-karte{ flex:0 0 auto; width:150px; text-align:center; }
.banderole-karte img{
  width:100%; height:184px; object-fit:cover; object-position:center top;
  border-radius:var(--radius-karte); filter:grayscale(.25);
  transition:filter var(--normal);
}
.banderole-karte:hover img{ filter:none; }
/* Nur im Vorschau-Modus (GBW_BANDEROLE_VORSCHAU=1): Initialen auf
   demselben Streifenmuster wie .portraet.platzhalter-bild, nur eckig
   statt rund, damit sie in die Kartenform passt. */
.banderole-platzhalter-bild{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:184px; border-radius:var(--radius-karte);
  font-family:var(--serif); font-size:1.4rem; color:var(--gruen);
  border:1px solid rgba(186,144,85,.35);
  background:repeating-linear-gradient(-45deg,
    rgba(186,144,85,.16) 0 6px, rgba(186,144,85,.05) 6px 12px);
}
.banderole-name{ margin-top:.6rem; font-family:var(--serif); font-size:1rem; color:var(--gruen); }
.banderole-ort{ font-size:var(--klein); color:var(--text-leise); }

.banderole-pfeil{
  flex:none; width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--linie-stark); border-radius:50%; background:var(--grund);
  color:var(--gruen);
  transition:border-color var(--schnell), background var(--schnell);
}
.banderole-pfeil:hover{ border-color:var(--kupfer); background:var(--grund-warm); }
.banderole-pfeil svg{
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.banderole-pfeil[hidden]{ display:none; }

/* ── DIE BAUMTEILE AN DEN KANTEN ────────────────────────────────────
   Marvins Baum-Dramaturgie vom 16.08.2026: die Seite selbst wird zum
   Baum. Die Krone haengt an der Kante zu "Wer wir sind", die Wurzeln
   an der Kante zur Praxis.

   Fuenfte Fassung: der Stamm an der Kante zum Konzept ist entfallen,
   Marvins Punkt "Stamm plus der [illustrierte] Baum auf einer Seite
   gefaellt mir nicht" - die Konzept-Sektion zeigt weiter unten schon
   den echten Baum, ein zweiter Stamm direkt darueber war zu viel.
   Krone und Wurzeln bleiben Scheiben derselben Zeichnung im selben
   Massstab (560px Vollbreite, siehe die einzelnen Regeln), jetzt aber
   kleiner und blasser: "die Krone ist zu heftig" war Marvins zweiter
   Punkt.

   Bauplan: im Fluss, per negativem margin-top an die Sektionsgrenze
   gezogen (kann dadurch nichts verdecken), Scheibe ueber aspect-ratio
   plus translateY, waechst einmal beim Scrollen von der Linie weg. */
.baum-kante{
  overflow:hidden; pointer-events:none;
  width:min(360px,52vw); opacity:.55;
  margin:calc(-1 * var(--sektion-y)) auto var(--r3);
}
.baum-kante svg{ width:100%; height:auto; color:var(--kupfer); }
/* Die Wachstums-Klappe liegt auf der ZEICHNUNG, nicht auf dem Kasten,
   und das ist kein Stilgeschmack: ein per clip-path komplett
   zugeklappter Kasten hat null sichtbare Flaeche, und der
   IntersectionObserver meldet fuer ein Element ohne sichtbare Flaeche
   dauerhaft "nicht im Bild". Das Wachsen wuerde also nie ausgeloest,
   weil das Element erst durchs Wachsen sichtbar wuerde. Genau dieser
   Fehler stand hier am 16.08.2026 einen Abend lang: Krone und Stamm
   blieben unsichtbar. */
.js .baum-kante svg{ clip-path:inset(0 0 100% 0); transition:clip-path var(--film) var(--sanft); }
.js .baum-kante.gewachsen svg{ clip-path:inset(0 0 0 0); }
html:not(.js) .baum-kante svg{ clip-path:none; }

/* Krone: obere Haelfte. Das Blattwerk laeuft laut Messung bis 65,5 %,
   der Schnitt bei 50 % geht mitten durchs Laub, die Maske macht aus der
   harten Saegekante ein weiches Auslaufen. 325.3/169.95 zeigt bei
   svg-Hoehe 1,045 x Breite genau die oberen 50 %. */
.kante-krone{
  aspect-ratio:325.3 / 169.95;
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent);
  mask-image:linear-gradient(to bottom, #000 78%, transparent);
}

/* Wurzeln: die unteren 26,5 % (90 Einheiten), Stammfuss und Wurzelwerk.
   Keine Maske: die Wurzeln haben als einziger Teil ein natuerliches
   Ende in der Zeichnung. */
.kante-wurzel{ aspect-ratio:325.3 / 90; }
.kante-wurzel svg{ transform:translateY(-73.5%); }

/* Der Reiter: bei den Sektionen mit Baumkante sitzt das Eyebrow oben
   links an der Kante statt unter der Grafik, wie ein Griffregister:
   man sieht sofort, auf welchem Teil der Seite man ist, ohne dass die
   Grafik dafuer nach unten ruecken muss. left spiegelt die
   .bahn-Geometrie (zentrierte Spalte, sonst Seitenrand). #baum ist seit
   dem Wegfall des Stamms hier raus, das Eyebrow steht dort wieder im
   normalen Fluss ueber der Ueberschrift. */
#wer-wir-sind .bahn > .marke, .praxis .bahn > .marke{
  position:absolute; top:var(--r3);
  left:max(var(--rand), calc((100% - var(--seite))/2 + var(--rand)));
  margin-bottom:0;
}

/* ── 4 · DIE WURZELN, IN DER PRAXIS ─────────────────────────────────
   Ordner-Digitalisierung und Rechtsschutz waren zwei volle Bildschirme,
   jetzt sind sie eine Fläche in zwei Spalten. */
.praxis{ background:var(--grund); border-top:1px solid var(--linie); overflow:visible; }

/* Die grosse Wurzel an der Kante ist seit der dritten Kanten-Fassung
   Teil des gemeinsamen .baum-kante-Systems (siehe DIE BAUMTEILE AN DEN
   KANTEN weiter oben, Variante .kante-wurzel): eine Zeichnung, ein
   Massstab, drei Scheiben. Die frueheren Sonderregeln
   .praxis-wurzel-gross sind darin aufgegangen. */

/* Der Versprechen-Satz direkt unter jeder Ueberschrift: Stand 16.08.2026,
   dritte Korrektur. Vorher stand "kostenfrei" nur beilaeufig in der
   ersten Kachel, nie als eigene Aussage. Jetzt beantwortet dieser eine
   Satz sofort "was ist das, und was kostet es", bevor die Kacheln ins
   Detail gehen. */
.praxis-versprechen{ margin-top:var(--r2); color:var(--gruen); }

/* Zeilenabstand 0, Spaltenabstand wie gehabt: der senkrechte Rhythmus
   zwischen Kacheln, Trennlinie und unterer Zeile gehoert den Elementen
   selbst (margin am Trenner, padding an den unteren Spalten), nicht dem
   Grid. Mit einem Grid-Gap kaeme er dreifach zusammen: Gap ueber der
   Linie, Gap unter der Linie, Polster obendrauf. Genau das war Marvins
   "hier ist zu viel Luft", gemessen rund 240px, jetzt 65. */
.praxis-spalten{
  display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.praxis-spalte h2{ font-size:var(--h2); }

/* Die durchgehende Linie zwischen den Kacheln und dem Beleg/Ausgang
   darunter. Ein eigenes Grid-Element ueber die volle Breite, damit sie
   fuer beide Spalten auf derselben Hoehe steht, auch wenn die Kacheln
   links und rechts unterschiedlich lang sind: die Grid-Zeile richtet
   sich nach dem hoeheren Nachbarn, die Linie selbst bleibt eine
   gerade Zeile. */
.praxis-trenner{
  grid-column:1 / -1; height:1px; background:var(--linie);
  margin-top:var(--r4);
}
.praxis-spalte-unten{ padding-top:var(--r3); }
/* Sonst doppelter Abstand: .praxis-spalte-unten traegt den schon ueber
   padding-top, der Hebel braeuchte seinen eigenen margin-top hier nicht. */
.praxis-spalte-unten .hebel{ margin-top:0; }

/* Numerierte Kacheln, hell statt dunkel, senkrecht statt im Raster: die
   Spalte ist schmal, drei Kacheln nebeneinander wären hier eng. Kommen
   einzeln beim Scrollen, wie vorher die Karten. */
.kacheln{ margin-top:var(--r3); display:grid; gap:var(--r3); counter-reset:kachel; }
.kachel{ position:relative; padding-left:2.75rem; opacity:.3; filter:grayscale(1); }
.js .kachel{ transition:opacity 500ms var(--sanft), filter 500ms var(--sanft); }
.kachel.leuchtet{ opacity:1; filter:none; }
html:not(.js) .kachel{ opacity:1; filter:none; }
.kachel::before{
  counter-increment:kachel; content:counter(kachel);
  position:absolute; left:0; top:0; width:1.9rem; height:1.9rem;
  display:grid; place-items:center; border:1px solid var(--kupfer); border-radius:50%;
  font-family:var(--sans); font-size:.78rem; color:var(--gruen);
}
.kachel-titel{
  font-family:var(--serif); font-size:1.05rem; color:var(--gruen);
  letter-spacing:-.01em; margin-bottom:.3rem;
}
.kachel-text{ font-size:var(--klein); color:var(--text-leise); line-height:1.5; max-width:38ch; }

/* Der Beleg, kompakt: eine kleinere Zahl als vorher, weil sie hier neben
   drei Kacheln steht statt allein auf einer Fläche. */
/* Kein eigener margin-top/border-top mehr: .praxis-spalte-unten und
   .praxis-trenner uebernehmen das jetzt gemeinsam fuer beide Spalten. */
.praxis-beleg{}
.praxis-beleg .zahl{
  font-family:var(--sans); font-weight:300; line-height:.9;
  font-size:clamp(2.1rem,4vw,2.8rem); color:var(--gruen);
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.03em;
  display:flex; align-items:baseline; gap:.5rem;
}
.praxis-beleg .zahl small{
  font-size:var(--klein); font-weight:400; color:var(--text-leise);
  text-transform:uppercase; letter-spacing:var(--sperr);
}
.praxis-beleg figcaption{ margin-top:.6rem; font-size:var(--klein); color:var(--text-leise);
  max-width:40ch; line-height:1.5; }
.praxis-beleg .neben{ display:block; margin-top:.5rem; }
.praxis-beleg .quelle{ display:block; margin-top:.5rem; font-size:var(--winzig); opacity:.75; }

@media (max-width:900px){
  /* Einspaltig, aber nicht in Dokumentreihenfolge: die Reihenfolge im
     Markup ist [Rechtsschutz-Kacheln, App-Kacheln, Linie, Beleg,
     Ausgang], gedacht fuer die durchgehende Linie im Zweispalter. Ohne
     Umsortierung landeten Beleg und Ausgang beide erst ganz unten,
     losgeloest von ihrem Thema. order gruppiert stattdessen nach Thema:
     Rechtsschutz mit seinem Beleg, dann App mit ihrem Ausgang. Die
     durchgehende Linie ergibt zwischen zwei gestapelten Themen keinen
     Sinn mehr und wird ausgeblendet; stattdessen bekommt die zweite
     Gruppe eine eigene, schmalere Trennung. */
  .praxis-spalten{ grid-template-columns:1fr; gap:var(--r5) 0; }
  .praxis-trenner{ display:none; }
  .praxis-spalten > .praxis-spalte:nth-child(1){ order:1; }
  .praxis-spalten > .praxis-spalte-unten:nth-child(4){ order:2; padding-top:var(--r3); }
  .praxis-spalten > .praxis-spalte:nth-child(2){
    order:3; margin-top:var(--r5); padding-top:var(--r5); border-top:1px solid var(--linie);
  }
  .praxis-spalten > .praxis-spalte-unten:nth-child(5){ order:4; padding-top:var(--r3); }
  /* Kein eigener Wurzel-Override mehr noetig: als Flusselement mit
     aspect-ratio skaliert sie ueber die 80vw-Breite von selbst, und
     kollidieren kann sie im Fluss mit nichts. */
}
@media (max-width:560px){
  .fragemoment-frage{ max-width:none; }
  .banderole-karte{ width:128px; }
  .banderole-karte img, .banderole-platzhalter-bild{ height:158px; }
}