@font-face {
  font-family: "Care Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("cormorant-garamond-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Care Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("cormorant-garamond-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Care Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Care Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("inter-latin-600-normal.woff2") format("woff2");
}

/* ------------------------------------------------------------------ *
 * Tiefe aus LICHT statt aus Rahmen (28.08.2026)                       *
 *                                                                     *
 * Teuer wirkt nicht, was viel macht, sondern was praezise ist. Ein
 * grosser, sehr weicher Schatten mit geringer Deckkraft plus eine kaum
 * sichtbare helle Oberkante traegt dieselbe Tiefe wie ein Goldrahmen —
 * ohne zu sagen "schau, was ich kann".
 * ------------------------------------------------------------------ */
:root {
  --lift-soft: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 40px -24px rgba(6, 14, 20, 0.55);
  --lift-strong: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 42px 90px -46px rgba(6, 14, 20, 0.7);
  --enter-step: 70ms;
  --enter-shift: 14px;
  --enter-ease: cubic-bezier(0.22, 0.68, 0.32, 1);
}

:root {
  --ink: #132331;
  --ink-soft: #344755;
  --night: #10202d;
  --night-deep: #0a1721;
  --paper: #f7f3eb;
  --paper-strong: #fffdf8;
  --paper-muted: #eee8dc;
  --gold: #aa8958;
  --gold-light: #d7c39e;
  --gold-readable: #72542b;
  --sage: #6d7e72;
  --line: rgba(19, 35, 49, 0.14);
  --white-line: rgba(255, 255, 255, 0.17);
  --shadow: 0 28px 70px rgba(24, 36, 45, 0.11);
  --serif: "Care Serif", Georgia, serif;
  --sans: "Care Sans", Arial, sans-serif;
  --wrap: min(1180px, calc(100vw - 48px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* Zweifarbiger Fokusrahmen: heller Ring, dunkle Kontur nach aussen.
 *
 * WARUM ZWEI FARBEN. Ein einfarbiger Ring kann nicht auf jedem Grund
 * bestehen. Der goldene Ring lag ueber dem dunklen Foto bei 5 bis 6:1, auf
 * der cremefarbenen Flaeche aber nur bei 1.91 bis 3.21:1 — WCAG 1.4.11
 * verlangt 3:1. Von 18 gemessenen Bedienelementen bestanden 6 nicht.
 *
 * Mit heller Innenlinie UND dunkler Aussenkontur ist immer eine der beiden
 * gegen den Grund abgesetzt, und die beiden sind es gegeneinander ohnehin.
 *
 * GEMESSEN an Bildpunkten, an der RINGPOSITION (nicht an der Flaeche des
 * Elements — dieser Unterschied war der Fehler, den Angel Garcia am
 * 29.08.2026 mit der Tab-Taste widerlegt hat), je Element 18 bis 28
 * Abtaststellen rundum, schlechteste Stelle:
 *
 *     Element                    vorher    nachher
 *     KONTAKT                    1.91      11.32
 *     DE / EN / ES               2.14 ...  9.50 ...
 *     Leistungskarten            2.95      13.25
 *     Zielgruppenkarten          3.21      13.11
 *     ERSTGESPRAECH VEREINBAREN  1.93       7.06
 *
 * Alle 18 bestehen, der schwaechste bei 7.06:1.
 * Werkzeug: scripts/pruefe-fokusring.mjs
 *
 * Der Ring erscheint nur bei Tastaturbedienung (:focus-visible). Wer mit
 * der Maus klickt, sieht ihn nie. */
:focus-visible {
  outline: 3px solid #f4efe6;
  outline-offset: 4px;
  box-shadow: 0 0 0 10px rgba(9, 22, 33, 0.92);
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  transform: translateY(-160%);
  padding: 12px 18px;
  border-radius: 999px;
  color: white;
  background: var(--night);
}

.skip-link:focus {
  transform: translateY(0);
}

.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;
}

.preview-ribbon {
  padding: 8px 20px;
  color: rgba(255, 255, 255, 0.82);
  background: var(--night-deep);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 243, 235, 0.95);
  backdrop-filter: blur(16px);
}

.header-inner {
  width: var(--wrap);
  min-height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}

.brand-primary {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

.brand-secondary {
  margin-top: 7px;
  color: var(--gold-readable);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
}

.site-nav {
  display: flex;
  align-items: center;
  /* 25 -> 19px: sechs Zwischenraeume mal 6px sind 36px, und genau die
     fehlten, nachdem die Sozialsymbole rechts dazugekommen sind.
     Gemessen, nicht geschaetzt — die Rechnung steht bei .nav-social. */
  gap: 19px;
}

.site-nav > a,
.nav-services > summary {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav > a[aria-current="page"] {
  color: var(--gold-readable);
}

.nav-services > summary[aria-current="page"] {
  color: var(--gold-readable);
}

.site-nav > .nav-future {
  padding-left: 20px;
  border-left: 1px solid var(--line);
  font-weight: 400;
}

.nav-services {
  position: relative;
}

.nav-services > summary {
  list-style: none;
  cursor: pointer;
}

.nav-services > summary::-webkit-details-marker {
  display: none;
}

.nav-services > summary::after {
  content: " +";
  color: var(--gold);
}

.nav-services[open] > summary::after {
  content: " −";
}

/* Die Klappflaeche traegt IMMER hellen Grund, auf jeder Breite und in jedem
   Scrollzustand. Sie setzt deshalb ihre eigene Schriftfarbe — ueber die
   geerbte Variable, nicht ueber eine Ausnahme mit hoeherer Spezifitaet.
   Sonst entsteht ein Spezifitaetskampf mit .site-header .header-inner a.

   Diese Regel schliesst den Fehler vom 29.08.2026: ueber 1104 px erbte die
   Flaeche die helle Schrift der Leiste und stand mit rgba(255,255,255,0.94)
   auf rgb(255,253,248) — an Bildpunkten gemessen 1.02:1, also unlesbar.
   Gefunden von Angel Garcia auf dem iPad quer, nachgemessen mit
   scripts/pruefe-bildpunkte.mjs. */
.nav-panel {
  --kopf-schrift: var(--ink);
  --kopf-marke: var(--gold-readable);
  color: var(--ink);
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  width: 260px;
  transform: translateX(-50%);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper-strong);
  box-shadow: var(--shadow);
}

.nav-panel a {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.9rem;
  text-decoration: none;
}

.nav-panel a:hover {
  background: var(--paper-muted);
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 4px;
}

.language-switcher a {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

.language-switcher a[aria-current="true"] {
  border-color: var(--gold);
  color: var(--ink);
}

.nav-contact {
  padding: 12px 18px;
  border-radius: 999px;
  color: white !important;
  background: var(--night);
}


/* ---- Sozialsymbole im Kopf, 21.10.2026 -----------------------------
   Dieselben SVGs, Ziele und aria-labels wie im Fuss; der Erzeuger
   liefert beide aus EINEM Baustein.

   SIE STEHEN INNERHALB VON .site-nav. Unter 1145px wird die Navigation
   zur hellen Schublade, und alles darin wandert mit ins aufgeklappte
   Menue — genau wie verlangt. In der engen Kopfzeile stuenden sie
   sonst neben Kontakt-Knopf und Menue-Schalter.

   KEINE EIGENE FARBE. Die Symbole malen mit currentColor und erben
   damit --kopf-schrift: hell ueber dem Foto, dunkel im gescrollten
   Kopf und in der Schublade. Eine feste Farbe waere in einem der drei
   Zustaende falsch — derselbe Fehler, den der Fuss schon einmal
   hatte (siehe .footer-social).

   TREFFERFLAECHE 36x36px. Gefordert waren mindestens 24px (WCAG 2.5.8).
   Der Fuss hat 44px; in der Leiste stehen die Symbole neben
   Sprachknoepfen und Kontakt-Knopf, dort waere 44px zu wuchtig.
   36px liegt ueber dem Soll und unter der Hoehe der Nachbarn. */
/* DIE GROESSE IST GERECHNET, NICHT GEWAEHLT.
   Gemessen am 21.10.2026: .header-inner ist auf 1180px gedeckelt.
   Marke 284 + Navigation 872 = 1156, also 24px Luft. Mit 36px-Feldern
   brauchten die Symbole 80px, die Marke wurde von ihren natuerlichen
   289px auf 284 gequetscht, und der Slogan brach auf ZWEI Zeilen —
   bei JEDER Breite, auch bei 1912px. Das Foto zeigte es, meine erste
   Messung nicht: sie pruefte nur die Symbole und meldete "einzeilig,
   keine Ueberlappung". Beides stimmte; die Nachbarn zerfielen
   trotzdem.
   30px-Felder ohne Zwischenraum brauchen 66px statt 80. */
.nav-social {
  display: flex;
  align-items: center;
  gap: 0;
  padding-left: 6px;
  flex-shrink: 0;
}

.nav-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  opacity: 0.82;
  transition: opacity 0.2s ease;
}

.nav-social a:hover,
.nav-social a:focus-visible {
  opacity: 1;
}

.nav-social svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* DIE NACHBARN DUERFEN NICHT UMBRECHEN.
   Der Slogan und die Navigationswoerter sind kurze, feste Begriffe —
   ein Umbruch mitten in "Ueber mich" ist nie gewollt. Ohne diese
   Zeilen schrumpfen sie als Flex-Elemente, sobald rechts etwas
   dazukommt. Mit nowrap behalten sie ihre Breite; reicht der Platz
   nicht, meldet es der Ueberlaufmesser, statt dass es still
   zerbricht. */
/* NUR IN DER LEISTE, NICHT AUF DEM HANDY.
   Ohne Breitenbedingung griff die Sperre auch bei 390px. Dort steht
   die Marke in einer eigenen Reihe und darf umbrechen — tat sie das
   nicht mehr, wurde ihre Trefferflaeche von zwei Zeilen auf EINE
   zusammengezogen: 289x43px, also einen Pixel unter 44.
   Gemessen: pruefe-antippflaechen stieg von 418 auf 445 Befunde,
   und die 27 neuen waren ausnahmslos "A.brand 289x43" — einer je
   erzeugter Seite. Ein Pixel, 27 mal, und nur weil die Regel eine
   Breite zu weit reichte. */
@media (min-width: 1200px) {
  .site-header .brand-secondary,
  .site-nav > a,
  .nav-services > summary {
    white-space: nowrap;
  }
}

/* DAS FENSTERBAND IST WEG — DER EINKLAPPPUNKT WURDE GEHOBEN.
   Hier stand eine Regel, die die Symbole zwischen 1145 und 1199px
   ausblendete, weil die Leiste dort zu schmal war (bei 1145px fehlten
   gemessene 55px). Entscheidung Miguel, 22.10.2026: statt die Symbole
   zu verstecken, klappt die Navigation jetzt schon ab 1199px abwaerts
   ein. Damit gibt es KEINE Breite mehr, bei der die Symbole oben
   fehlen, solange die Navigation offen ist. */

/* In der aufgeklappten Schublade stehen sie unter den Sprachknoepfen
   und bekommen Luft nach oben, statt in der Reihe zu kleben. */
@media (max-width: 1199px) {
  .nav-social {
    padding-left: 0;
    margin-top: 4px;
    gap: 4px;
  }

  .nav-social a {
    width: 44px;
    height: 44px;
    padding: 12px;
  }
}

.menu-toggle {
  display: none;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.page-main {
  overflow: clip;
}

.wrap {
  width: var(--wrap);
  margin: 0 auto;
}

.hero {
  position: relative;
  min-height: min(100svh, 880px);
  display: flex;
  align-items: flex-end;
  background: var(--night);
  isolation: isolate;
  overflow: clip;
}

.hero-inner {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: var(--wrap);
  margin: 0 auto;
  display: block;
  padding: clamp(96px, 16vh, 180px) 0 clamp(52px, 8vh, 92px);
}

/* VARIANTE D — Textblock schmaler, Bild unveraendert.
   Entscheidung Angel Garcia, 07.09.2026: KEIN Foto wird vergroessert. Die
   Bilder sind 900-1456 px breit, der Hero-Kasten am Rechner rund 1200 —
   sie werden heute schon hochskaliert. Jede weitere Vergroesserung kostet
   sichtbar Schaerfe, und das ist das Gegenteil von Premium.
   Statt das Bild zu bewegen, wird der TEXT schmaler und der Verlauf laeuft
   frueher aus. Fehlt der Eintrag, gilt der bisherige Wert. */
.hero-copy {
  max-width: var(--hero-text-breite, min(700px, 50%));
}

.hero-copy {
  color: white;
}

/* ===== Einstiegsbereich der Startseite, geteiltes Layout, 19.10.2026 =====
   Text auf einfarbigem Grund, daneben das Portrait. Der Grund ist das
   Marken-Nachtblau --night #10202d; die Kontrastwerte stehen weiter unten
   beim Grund selbst.

   Zur Entscheidung standen am Preview zwei Fassungen - Nachtblau und
   Papierton. Miguel hat am 19.10.2026 das Nachtblau gewaehlt, und zwar an
   den gerenderten Bildern, nicht am CSS. Das war nicht beilaeufig: Auf dem
   Papierton war der Sekundaerknopf weiss auf hell und damit unsichtbar -
   gesehen im Bild bei 1366 px, aus dem CSS allein nicht zu erkennen.
   Die Papierton-Fassung ist restlos entfernt. */
.hero-geteilt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: min(100svh, 880px);
  margin-top: calc(-1 * var(--header-h, 92px));
  isolation: isolate;
}

.hero-geteilt .hero-portraet {
  position: relative;
  order: 2;
  overflow: hidden;
  background: var(--night-deep);
}

.hero-geteilt .hero-portraet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
}

.hero-geteilt .hero-text {
  order: 1;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h, 92px) + clamp(40px, 7vh, 90px)) clamp(26px, 5vw, 76px) clamp(44px, 7vh, 96px);
}

/* Der Textblock darf so breit sein, wie die laengste Slogan-Zeile
   braucht - das war der ganze Zweck des Umbaus. Keine 44-Prozent-Fessel
   mehr, weil hier kein Bild darunter liegt, das freigehalten werden
   muesste. */
.hero-geteilt .hero-copy {
  /* 820 statt 620: Bei 1912 px Fensterbreite ist die laengste Slogan-Zeile
     722 px breit (65 px Schrift x Faktor 11,1). Mit 620 px brach sie auf
     vier Zeilen - gemessen, nicht vermutet. Mehr als 804 px kann die Spalte
     ohnehin nicht werden, das begrenzt der Innenabstand. */
  max-width: 820px;
  width: 100%;
}

/* Der Grund des Textblocks: Marken-Nachtblau.
   Entscheidung Miguel, 19.10.2026, getroffen an den gerenderten
   Vorschaubildern - nicht am CSS. Die zweite Fassung auf Papierton
   (Variante b) ist damit erledigt und restlos entfernt; es gibt keinen
   Umschalter mehr, weil ein Schalter mit einer Stellung keiner ist.

   Die Kontrastwerte sind gegen diesen einfarbigen Grund GERECHNET
   (WCAG 2.1, --night #10202d). Die halbdurchsichtigen Toene sind VORHER
   ueber dem Grund verrechnet - sonst rechnet man gegen Reinweiss,
   waehrend der Browser ein Graublau malt:
     weisse Schrift (h1, Knopf)            16,58:1
     --gold-light #d7c39e (Eyebrow)         9,62:1  <- hier wurde der
                                   Bestandsmangel unter 4,5:1 erledigt
     Lead, weiss auf 0,86  -> #dee0e2      12,53:1
     Hinweis, weiss auf 0,74 -> #c1c5c8     9,54:1
   Schlechtester Wert 9,54:1 bei einem Soll von 4,5:1.
   Wer den Grund oder eine der Deckungen aendert, rechnet diese vier Werte
   neu. Sie stehen hier, damit das nicht uebersehen wird. */
.hero-geteilt .hero-text { background: var(--night); }
.hero-geteilt .hero-copy { color: white; }
.hero-geteilt .eyebrow { color: var(--gold-light); }
.hero-geteilt .hero-lead { color: rgba(255, 255, 255, 0.86); }
.hero-geteilt .hero-hinweis { color: rgba(255, 255, 255, 0.74); }

/* Der Slogan steht in drei festen Zeilen. text-wrap: balance wuerde die
   gesetzten <br> gegen eine eigene Aufteilung ausspielen. */
.hero-geteilt .hero-copy h1 {
  text-wrap: normal;
  margin-bottom: 26px;
  /* Die Schriftgroesse ist GERECHNET, nicht geschaetzt. Gemessen wurde die
     laengste Slogan-Zeile: bei 73,6 px Schrift ist sie 819 px breit, also
     11,1 px Zeilenbreite je px Schriftgroesse. Daraus die groesste Groesse,
     bei der drei Zeilen ohne Umbruch stehen:
       geteilt    1024px -> 38,0   1366px -> 50,7   1912px -> 72,4
     Die Formel bleibt mit Reserve darunter: 3,4vw, gedeckelt bei 70 px.
     Im gestapelten Layout ist die Spalte breiter, dort gilt 7,4vw. */
  font-size: min(3.4vw, 70px);
  line-height: 1.1;
}

@media (max-width: 900px) {
  .hero-geteilt .hero-copy h1 {
    font-size: min(7.4vw, 62px);
  }
}

.hero-geteilt .hero-lead { max-width: 100%; }

/* Gestapelt: Bild oben, Text darunter auf demselben Grund. */
@media (max-width: 900px) {
  .hero-geteilt {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-geteilt .hero-portraet { order: 1; aspect-ratio: 4 / 3; }
  .hero-geteilt .hero-text {
    order: 2;
    padding: clamp(32px, 7vw, 56px) clamp(22px, 6vw, 40px) clamp(40px, 9vw, 64px);
  }
  .hero-geteilt .hero-copy { max-width: 100%; }
}

/* Hinweiszeile unter den Knoepfen, 19.10.2026. Sie nimmt die Werte der
   Lead-Zeile des Heros auf, eine Stufe kleiner und etwas zurueckgenommen —
   sie soll lesbar sein, aber nicht mit dem Slogan konkurrieren.
   Die Breite ist an den Textblock gebunden, damit die Zeile nicht laenger
   wird als der Absatz darueber. */
.hero-hinweis {
  max-width: min(560px, 100%);
  margin-top: 22px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* ---- AVELORA-Kreis auf dem Portrait, 20.10.2026 --------------------
   Weisung Miguel. Er ersetzt die goldene Pille im Hero-Text ersatzlos;
   die Vorzeile rueckt dadurch nach oben — gewollt.

   ALLES WAAGERECHT. Keine Kreisschrift, keine Rotation: gedrehte
   Schrift ist bei dieser Zielgruppe schwer zu lesen und wirkt als
   Effekt, nicht als Praezision.

   DIE DECKUNG IST 0,90 UND NICHT DIE VORGEGEBENEN 0,80 —
   ABWEICHUNG, GEMELDET, NICHT STILL GEMACHT.

   Mit 0,80 verfehlt die Goldlinie die geforderten 3,0:1, und zwar
   nicht theoretisch: auf dem Bild gemessen liegt im Ring des Kreises
   ein heller Punkt (#efcfa9), gegen den die Linie auf 2,71:1 faellt.
   Gegen Weiss — der absoluten Obergrenze, heller kann kein Foto
   werden — sind es 2,38:1.

   Zone fuer Zone gemessen, weil die Teile nicht am selben Ort liegen:
   die Linie ist ein Ring am Rand, der Text sitzt in der Mitte.
     RING   1 444 Bildpunkte, Mittel #2b2b36, hellster #efcfa9
     MITTE  7 440 Bildpunkte, Mittel #161723, hellster #826d5f

   Zwei Wege standen offen, beide eine Zeile:
     A  Deckung 0,80 -> 0,90, Linie bleibt --gold
     B  Deckung bleibt 0,80, Linie wird --gold-light  (5,15:1)
   Gewaehlt ist A, weil es die vorgegebene Goldlinie erhaelt.
   0,88 haette auch bestanden (3,11:1), aber beim Zeigen steigt das
   Innenlicht auf 0,07 und druckt den Wert auf 3,02:1 — zwei
   Hundertstel Reserve sind keine (CLAUDE.md 6). 0,90 traegt 3,26:1
   auch dort.

   KONTRAST bei 0,90, gerechnet gegen Weiss plus Innenlicht:
     Marke --gold-light    6,35:1   (Soll 4,5)
     Kurzsatz weiss 0,95  10,05:1   (Soll 4,5)
     Goldlinie --gold      3,35:1   (Soll 3,0), beim Zeigen 3,26:1
   Gegen den tatsaechlich gemessenen Untergrund liegen alle drei
   deutlich hoeher. Wer das Portrait tauscht, rechnet neu.

   Der LED-Schimmer auf dem Kurzsatz geht in KEINE dieser Zahlen ein.
   Er ist Schmuck; WCAG kennt ihn nicht, und auf hellem Grund wuerde
   ein weisser Schein die Lesbarkeit eher senken als heben. */
.hero-portraet {
  position: relative;
}

.avelora-kreis {
  position: absolute;
  right: clamp(24px, 2.8vw, 44px);
  bottom: clamp(48px, 6vh, 84px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(118px, 11.5vw, 160px);
  height: clamp(118px, 11.5vw, 160px);
  box-sizing: border-box;
  /* 8px statt 10: Beim kleinsten Durchmesser (118px bei 1024px
     Fensterbreite) bleiben mit 10px nur 96px lichte Weite — zwei
     Pixel zu wenig fuer "un acompañamiento" (99px), und die spanische
     Fassung zerfiel dort in DREI Zeilen statt zwei. Mit 8px sind es
     100px. Gemessen, nicht geschaetzt. */
  padding: 8px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(16, 32, 45, 0.90);
  text-align: center;
  text-decoration: none;
  /* Grundschein: beide Schichten und das Innenlicht auf ihrem
     MITTELWERT, damit die Form auch ohne Animation steht. */
  box-shadow:
    0 0 13px 0 rgba(215, 195, 158, 0.375),
    0 0 44px 10px rgba(215, 195, 158, 0.19),
    inset 0 0 18px 0 rgba(215, 195, 158, 0.04);
  animation: avelora-atem 5.5s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.kreis-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1.2;
}

.kreis-zier {
  color: var(--gold-light);
  font-size: 0.62rem;
  line-height: 1;
}

.kreis-marke {
  color: var(--gold-light);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  /* Die Sperrung setzt auch hinter den letzten Buchstaben eine Luecke
     und schoebe das Wort im Kreis nach links. Im Kreis faellt das
     staerker auf als in einer Zeile. */
  margin-right: -0.15em;
}

/* DER LED-SCHIMMER LIEGT NUR AUF DEM KURZSATZ. Marke und Zierzeichen
   bleiben ruhig — leuchtete alles, leuchtete nichts mehr. */
.kreis-satz {
  /* ZWEIZEILIG, UND ZWAR IN ALLEN DREI SPRACHEN — Weisung Miguel.
     Gemessen, nicht geschaetzt: einzeilig braucht der Kurzsatz bei
     0,58rem rund 112px (DE), 122px (EN) und 158px (ES). Der Kreis
     bietet innen 135px. Ohne Begrenzung stuende DE und EN auf EINER
     Zeile und nur ES auf zweien.
     GEMESSEN wurden die echten Textbreiten, nicht geschaetzt:
       DE  "Begleitung, die bleibt"            einzeilig 103px
       EN  "care that stays with you"          einzeilig 116px
       ES  "un acompañamiento que permanece"   einzeilig 176px
     Fuer ZWEI Zeilen muss die Breite kleiner sein als die deutsche
     Einzeilenbreite (sonst bleibt DE einzeilig) und gross genug fuer
     "un acompañamiento" (99px) — sonst zerfaellt ES in drei Zeilen.
     Das Fenster ist also 99..102px; 100px liegt darin.
     Der erste Versuch stand auf 96px und ergab bei ES DREI Zeilen,
     weil "un" dann allein auf der ersten stand. */
  max-width: 100px;
  /* Ohne Ausgleich brach DE zu "Begleitung, die" / "bleibt" — ein Wort
     allein auf der zweiten Zeile. Mit Ausgleich faellt der Bruch auf
     das Komma. Im Bild nachgesehen. */
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.55),
    0 0 14px rgba(255, 255, 255, 0.30),
    0 0 26px rgba(215, 195, 158, 0.28);
}

.avelora-kreis:hover,
.avelora-kreis:focus-visible {
  border-color: var(--gold-light);
  animation-play-state: paused;
  box-shadow:
    0 0 14px 0 rgba(215, 195, 158, 0.66),
    0 0 46px 11px rgba(215, 195, 158, 0.34),
    inset 0 0 18px 0 rgba(215, 195, 158, 0.07);
}

/* DIE AUFMERKSAMKEIT KOMMT AUS DEM LICHT, NICHT AUS DEM TEMPO.
   Lichtstufe III, unveraendert vom Teaser uebernommen:

              Tiefpunkt   Hoehepunkt   Mittelwert   Unschaerfe/Streuung
   Kern          0,15        0,60         0,375       13px / 0
   Halo          0,08        0,30         0,19        44px / 10px
   Innenlicht    0,02        0,06         0,04        18px / 0  (inset)

   Im Tiefpunkt geht der Schein NIE ganz weg. Ein Element, das
   verschwindet und wiederkommt, blinkt.
   Die Linie atmet mit: --gold im Tiefpunkt, --gold-light im
   Hoehepunkt. Animiert werden ausschliesslich box-shadow und
   border-color — keine Groesse, kein transform. */
@keyframes avelora-atem {
  0%, 100% {
    box-shadow:
      0 0 13px 0 rgba(215, 195, 158, 0.15),
      0 0 44px 10px rgba(215, 195, 158, 0.08),
      inset 0 0 18px 0 rgba(215, 195, 158, 0.02);
    border-color: var(--gold);
  }
  50% {
    box-shadow:
      0 0 13px 0 rgba(215, 195, 158, 0.60),
      0 0 44px 10px rgba(215, 195, 158, 0.30),
      inset 0 0 18px 0 rgba(215, 195, 158, 0.06);
    border-color: var(--gold-light);
  }
}

/* Am Handy fest 112px und naeher an die Ecke. Die Werte sind am
   gerenderten Bild bei 390px geprueft: der Kreis darf das Gesicht
   nicht anschneiden. */
@media (max-width: 900px) {
  .avelora-kreis {
    width: 112px;
    height: 112px;
    right: 18px;
    bottom: 34px;
    padding: 8px;
  }
  .kreis-marke { font-size: 0.56rem; }
  /* Am Handy ist die Schrift 0,54rem statt 0,58 — alle Breiten
     schrumpfen um den Faktor 0,931. Aus 100px werden 94px, und das ist
     zugleich genau die lichte Weite des 112px-Kreises. */
  .kreis-satz { font-size: 0.54rem; max-width: 94px; }
}

/* Der Slogan steht in drei Zeilen. text-wrap: balance wuerde die
   gesetzten <br> gegen eine eigene Aufteilung ausspielen und die
   Gliederung je nach Breite verschieben — genau das soll nicht
   passieren. Deshalb hier ausdruecklich aus; ueberall sonst bleibt es. */
body[data-page="home"] .hero-copy h1 {
  text-wrap: normal;
}


.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Zeilenfuehrung statt fester Breite: text-wrap balance verteilt die Woerter
     gleichmaessig auf die Zeilen, statt ein einzelnes Wort allein stehen zu
     lassen. Gemessen 29.08.2026 bei 1024 px: die letzte Zeile war 57 px breit
     ("Pflege" allein), im Englischen 95 px, im Spanischen 80 px.
     Eine feste Breite in ch waere falsch — sie misst an der Grundschrift und
     hat die Vorzeile schon einmal auf fuenf Zeilen gebrochen. */
  text-wrap: balance;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
}

h1 {
  max-width: 820px;
  margin-bottom: 26px;
  font-size: clamp(2.05rem, 5.1vw, 4.6rem);
  letter-spacing: -0.02em;
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.55rem, 5vw, 4.8rem);
  letter-spacing: -0.035em;
}

h3 {
  margin-bottom: 14px;
  font-size: clamp(1.65rem, 2.4vw, 2.2rem);
}

.hero-lead,
.section-lead {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(1.06rem, 1.8vw, 1.28rem);
  line-height: 1.75;
}

.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.button-primary {
  color: var(--night);
  background: var(--gold-light);
}

.button-secondary {
  border-color: rgba(255, 255, 255, 0.32);
  color: white;
  background: transparent;
}

.button-dark {
  color: white;
  background: var(--night);
}

/* Der Bogen mit der duennen Goldlinie ist ein Vorlagen-Merkmal: er sagt
   "Baukasten", nicht "Persoenlichkeit". Entfernt am 28.08.2026, ersatzlos —
   die Tiefe kommt jetzt aus Licht, nicht aus einem Rahmen. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Gesicht sitzt im oberen Drittel; auf breiten Schirmen etwas nach rechts,
     damit die Schrift links freie Flaeche hat. */
  /* WAAGERECHTER AUSSCHNITT JE SEITE — eine Stelle, wie aveloraZiel.
     Bis zum 07.09.2026 galt ein Wert fuer ALLE fuenf Hero-Fotos. Das Gesicht
     steht auf jedem Foto woanders; ein gemeinsamer Wert kann nicht passen.
     Der SENKRECHTE Wert bleibt am Umschaltpunkt haengen (er richtet sich
     nach der Bildhoehe, nicht nach dem Motiv); der WAAGERECHTE kommt aus
     --hero-x, das der Erzeuger je Seite setzt. Fehlt die Angabe, gilt der
     bisherige Wert — keine Seite aendert sich ungefragt. */
  /* Rechner: Bild UNVERAENDERT. Entscheidung Angel Garcia, 07.09.2026 —
     kein Foto wird vergroessert, und verschoben wird hier auch nicht: der
     Kasten ist quer, das Gesicht bliebe an derselben Stelle. Stattdessen
     wird der Textblock schmaler (--hero-text-breite). */
  object-position: 72% 30%;
}

/* Lesbarkeit aus einem Verlauf, nicht aus einer Abdunklung der ganzen
   Flaeche. Der Verlauf ist unten dicht und laeuft nach oben aus, damit das
   Gesicht seine Zeichnung behaelt. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11, 26, 38, 0.94) 0%, rgba(11, 26, 38, 0.82) 26%, rgba(11, 26, 38, 0.38) var(--hero-verlauf-mitte, 56%), rgba(11, 26, 38, 0.06) 82%, rgba(11, 26, 38, 0) 100%),
    linear-gradient(to right, rgba(11, 26, 38, 0.72) 0%, rgba(11, 26, 38, 0.34) 38%, rgba(11, 26, 38, 0) 68%);
  pointer-events: none;
}

.section {
  padding: clamp(78px, 10vw, 130px) 0;
}

.section-paper {
  background: var(--paper-strong);
}


/* ===== Spanien-Band unter dem Hero, 20.10.2026 =====================
   Weisung Miguel. Ein schmaler, ruhiger Abschnitt auf Papierton: die
   Passage mittig in der Serifenschrift, darunter die Sprachzeile klein
   und gesperrt.

   Es ist der erste Abschnitt NACH dem Hero. Er traegt deshalb deutlich
   weniger Luft als ein normaler .section-Block (dort clamp(78px, 10vw,
   130px)) — sonst reisst er den Hero vom Rest der Seite ab, statt
   ueberzuleiten.

   KONTRAST, gegen --paper-strong #fffdf8 gerechnet (WCAG 2.1):
     Passage     --ink           #132331   15,74:1   (Soll 4,5)
     Sprachzeile --gold-readable #72542b    6,84:1   (Soll 4,5)
   Die Sprachzeile ist klein gesetzt; fuer sie gilt 4,5 und nicht die
   3,0 fuer Grosstext. Sie liegt mit 6,84 deutlich darueber. */
.spanien-band {
  padding: clamp(46px, 6vw, 78px) 0;
  background: var(--paper-strong);
  border-bottom: 1px solid var(--line);
}

.spanien-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.spanien-text {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.12rem, 2.1vw, 1.5rem);
  line-height: 1.58;
  /* Die Passage ist ein zusammenhaengender Gedanke, kein Satzblock:
     gleich lange Zeilen statt einer vollen und einem Rest. */
  text-wrap: pretty;
}

.spanien-sprachen {
  margin: 20px 0 0;
  color: var(--gold-readable);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ===== Weitere Begleitung, 20.10.2026 ==============================
   Weisung Miguel. Sechs Eintraege zwischen den vier Karten und der
   Abschlusszeile.

   NUR VORHANDENE BAUSTEINE. Keine neue Schrift, keine neue Farbe, kein
   neuer Effekt — alles kommt aus den Tokens, die die Seite ohnehin
   fuehrt: var(--serif), --ink, --ink-soft, --gold, --line.

   Die Ueberschrift nimmt die GLEICHE Groesse wie die Kartentitel
   darueber: clamp(1.75rem, 3vw, 2.3rem). Damit ist sie zugleich eine
   Stufe unter dem h2 des Abschnitts (clamp(2.55rem, 5vw, 4.8rem)) und
   in derselben Anmutung wie die Karten — beide Vorgaben mit einem
   Wert erfuellt, statt einen dritten zu erfinden.
   var(--serif) steht schon in der globalen h3-Regel; hier wird sie
   nicht wiederholt.

   KONTRAST gegen --paper-strong #fffdf8, gerechnet:
     h3 und <strong>  --ink       15,74:1   (Soll 4,5)
     Intro und <span> --ink-soft   9,48:1   (Soll 4,5)
     Linie je Eintrag --gold       3,21:1   (Soll 3,0, 1.4.11)
     Trennlinie oben, --gold 0,38  1,48:1
   Die Trennlinie ist ausdruecklich "abgeschwaecht" verlangt. Sie
   traegt keine Bedeutung und ist kein Bedienelement; ihr Wert steht
   hier, damit ihn spaeter niemand fuer ein Versehen haelt. Die
   Eintragslinien dagegen sind Gliederung und liegen ueber 3,0. */
.weitere-begleitung {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(170, 137, 88, 0.38);
}

.weitere-begleitung h3 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 3vw, 2.3rem);
}

.wb-intro {
  max-width: 760px;
  margin: 0 0 clamp(26px, 3vw, 38px);
  color: var(--ink-soft);
}

.wb-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wb-liste li {
  padding-left: clamp(14px, 1.4vw, 20px);
  border-left: 2px solid var(--gold);
}

.wb-liste strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 600;
}

.wb-liste span {
  display: block;
  color: var(--ink-soft);
}

/* HIER STAND "hyphens: auto" — ENTFERNT, UND ZWAR AUS EINEM GRUND.
   Der Kommentar daneben behauptete "dieselbe Behandlung wie ueberall
   sonst auf der Seite". Das war falsch: hyphens:auto traegt in diesem
   Projekt NUR Ueberschriften (boundary-panel, bridge-panel, und ab
   1040px h1/h2/h3). Fliesstext wird nirgends getrennt.
   Gemessen hat die Regel 75 Trennungen ueber 21 Messungen erzeugt —
   ein Bild, das es sonst auf keiner Seite gibt. "Nur vorhandene
   Bausteine, nichts Neues" war die Vorgabe; eine neue
   Trennbehandlung ist etwas Neues.
   Nach dem Entfernen: 0 harte Wortbrueche, 0 Ueberlauf. */

/* Eine Spalte ab 900px abwaerts — dieselbe Schwelle, an der auch der
   Hero stapelt und der AVELORA-Kreis auf 112px geht. */
@media (max-width: 900px) {
  .wb-liste {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Leistungen im Einzelnen — Abschlusszeile ====================
   Die Karten selbst nutzen die bestehende .content-card; neu ist nur
   die Zeile darunter.
   Kontrast gegen --paper-strong: --ink-soft 9,48:1, der Verweis in
   --gold-readable 6,84:1. */
.detail-abschluss {
  max-width: 760px;
  margin: clamp(34px, 4vw, 48px) auto 0;
  color: var(--ink-soft);
  text-align: center;
}

.detail-abschluss a {
  color: var(--gold-readable);
  text-underline-offset: 3px;
}

/* ===== Einsatzgebiete-Zeile unter dem Vertrauensraster =============
   ALS ZEILE, NICHT ALS VIERTE KACHEL — begruendet im Erzeuger:
   .trust-grid steht auf drei Spalten, eine vierte Kachel saesse allein
   in einer zweiten Reihe neben zwei leeren Zellen mit sichtbaren
   Rahmenkanten.
   Der linke Goldbalken ist derselbe, den die Abgrenzungssaetze tragen:
   eine Aussage, die man nicht ueberlesen soll, ohne einen eigenen
   Kasten dafuer aufzumachen.
   Kontrast --ink-soft auf --paper: 8,71:1. */
.einsatzgebiete {
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  padding: 2px 0 2px clamp(18px, 2vw, 26px);
  border-left: 2px solid var(--gold);
  color: var(--ink-soft);
  max-width: 820px;
}

.section-night {
  color: white;
  background: var(--night);
}

.section:not(.section-night) .eyebrow,
.future-panel .eyebrow,
.contact-hub .eyebrow {
  color: var(--gold-readable);
}

.section-heading {
  max-width: 820px;
  margin-bottom: 48px;
}

.section-heading .section-lead {
  color: var(--ink-soft);
}

.section-night .section-heading .section-lead {
  color: rgba(255, 255, 255, 0.72);
}

.audience-grid,
.service-grid,
.choice-grid,
.insights-grid,
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-grid,
.insights-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.audience-card,
.service-card,
.choice-card,
.insight-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper-strong);
  text-decoration: none;
}

.audience-card:first-child {
  color: white;
  background: var(--night);
}

.audience-card:first-child p {
  color: rgba(255, 255, 255, 0.72);
}

.card-index {
  color: var(--gold-readable);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card-link {
  margin-top: 28px;
  color: var(--gold-readable);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.audience-card:first-child .card-index,
.audience-card:first-child .card-link {
  color: var(--gold-light);
}

.service-card p,
.choice-card p,
.insight-card p,
.audience-card p {
  color: var(--ink-soft);
}

.content-card {
  min-height: 230px;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper-strong);
}

.section-paper .content-card {
  background: var(--paper);
}

.content-card h3 {
  margin-top: 28px;
  font-size: clamp(1.75rem, 3vw, 2.3rem);
}

.content-card p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  counter-reset: process;
}

.process-step {
  position: relative;
  min-height: 190px;
  padding: 32px;
  border-top: 1px solid var(--white-line);
  counter-increment: process;
}

.process-step + .process-step {
  border-left: 1px solid var(--white-line);
}

.process-step::before {
  content: "0" counter(process);
  display: block;
  margin-bottom: 42px;
  color: var(--gold-light);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.process-step h3 {
  font-size: 1.75rem;
}

.split-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(38px, 8vw, 110px);
  align-items: center;
}

.portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--lift-strong);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quiet-list {
  display: grid;
  gap: 0;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.quiet-list li {
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}

/* Ohne Monogramm eine Spalte. Sonst bleibt die zweite Spalte zwar 0 px
   breit, aber der gap von 30 px wird trotzdem gezeichnet — rechts stuende
   eine Luecke ohne Grund. :has() kennt jeder Browser, der auch :focus-visible
   kennt; wo es fehlt, bleibt es beim alten Verhalten und nichts bricht. */
.future-panel:not(:has(.future-mark)) {
  grid-template-columns: 1fr;
}

.future-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  padding: clamp(34px, 6vw, 68px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--paper-strong), var(--paper-muted));
}

.closing-panel {
  color: var(--ink);
}

.closing-panel h2 {
  max-width: 760px;
  color: var(--ink);
}

.trust-intro {
  margin-bottom: clamp(48px, 7vw, 84px);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.trust-item {
  min-height: 210px;
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.trust-item h3 {
  margin-top: 22px;
  font-size: 1.65rem;
}

.trust-item p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.trust-boundary {
  max-width: 820px;
  margin: 28px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.future-note {
  margin-top: 54px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.future-note h3 {
  margin: 8px 0 10px;
  font-size: 1.8rem;
}

.future-note p {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--ink-soft);
}

.future-note-label {
  color: var(--gold-readable);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quiet-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.section-compact {
  padding: 42px 0 76px;
}

.commerce-note {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) 1fr;
  gap: 40px;
  align-items: start;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}

.commerce-note h3,
.commerce-note p {
  margin-bottom: 0;
}

.commerce-note p {
  color: var(--ink-soft);
}

.boundary-panel {
  display: grid;
  /* 0.80fr statt 0.65fr, 10.09.2026. Mit 0.65 lief "Organisation is not a
     medical decision" 2 px ueber die Spalte — im Englischen kennt der
     Browser dort keine Trennstelle, also half auch hyphens: auto nicht.
     Gemessen wurde der Abstand des Textes zum rechten Spaltenrand ueber
     180 Ueberschriften und vier Breiten:
       0.65fr  -2 px   Ueberlauf
       0.72fr   0 px   am Anschlag
       0.80fr  +1 px
       0.90fr  +1 px
     Bei umbrechendem Text liegt das letzte Wort einer Zeile immer dicht am
     Rand — mehr als ein bis zwei Pixel Abstand sind hier gar nicht zu
     holen. Die urspruengliche Vorgabe "mindestens 10 px Reserve" mass
     deshalb das Falsche und wurde verworfen, nicht gesenkt. Gewaehlt ist
     0.80: 0.72 steht exakt auf null und damit am Anschlag der Messung. */
  grid-template-columns: minmax(230px, 0.80fr) 1fr;
  gap: clamp(32px, 7vw, 90px);
  align-items: start;
  padding: clamp(34px, 6vw, 62px);
  border-left: 4px solid var(--gold);
  background: var(--paper-muted);
}

.boundary-panel h2,
.boundary-panel p {
  margin-bottom: 0;
}

.boundary-panel p {
  color: var(--ink-soft);
}

/* Die Bruecke zu AVELORA (29.08.2026).
 *
 * Bewusst LEISER als der Abgrenzungsabschnitt darueber: kein gefuellter
 * Grund, keine Goldkante, nur eine feine Linie oben. Sie soll einen Weg
 * anbieten, nicht um Aufmerksamkeit ringen — wer gerade liest, was Angel
 * Garcia uebernimmt, soll nicht von einem Kasten weggezogen werden.
 *
 * Derselbe Rasteraufbau wie .boundary-panel, damit die beiden Abschnitte
 * untereinander auf derselben Kante sitzen. */
.bridge-panel {
  display: grid;
  grid-template-columns: minmax(230px, 0.65fr) 1fr;
  gap: clamp(32px, 7vw, 90px);
  align-items: start;
  padding: clamp(28px, 5vw, 48px) 0 0;
  border-top: 1px solid var(--line);
}

.bridge-panel h2 {
  margin-bottom: 10px;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

.bridge-panel p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

/* Der Verweis darf NICHT die ganze Rasterspalte fuellen.
   Tut er es, umschliesst der Fokusrahmen einen leeren Kasten ueber die
   halbe Seitenbreite — gemessen am 29.08.2026 an einem Foto: der Ring sah
   aus wie ein Fehler, nicht wie eine Markierung. justify-self haelt ihn auf
   seiner eigenen Breite. */
.bridge-panel .quiet-link {
  justify-self: start;
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .bridge-panel {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.future-mark {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  letter-spacing: 0.08em;
}

.contact-hub {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(34px, 7vw, 88px);
  align-items: start;
}

.contact-card {
  padding: clamp(26px, 5vw, 46px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper-strong);
  box-shadow: var(--shadow);
}

.contact-method {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.contact-method small {
  display: block;
  color: var(--gold-readable);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-method strong {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field {
  display: grid;
  gap: 8px;
}

.field-full {
  grid-column: 1 / -1;
}

.field label,
.field-label {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
}

.field-optional {
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: white;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.radio-option,
.check-option {
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.radio-option input,
.check-option input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
}

.form-notice {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  color: var(--ink-soft);
  background: var(--paper-muted);
  font-size: 0.9rem;
}

.form-status {
  min-height: 28px;
  margin: 0;
  color: var(--sage);
  font-weight: 600;
}

.form-status[data-state="error"] {
  color: #8a2525;
}

.form-status[data-state="loading"] {
  color: var(--ink-soft);
}

.contact-form[aria-busy="true"] {
  cursor: wait;
}

.contact-form button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-footer {
  padding: 74px 0 120px;
  color: white;
  background: var(--night-deep);
}

.site-footer .brand-secondary {
  color: var(--gold-light);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr;
  gap: 60px;
}

.site-footer p,
.site-footer a {
  color: rgba(255, 255, 255, 0.68);
}

.footer-links {
  display: grid;
  gap: 11px;
}

.footer-links a {
  text-decoration: none;
}

/* Symbolzeile in der Spalte Kontakt, 19.10.2026. Entscheidung Miguel:
   statt der Woerter "Instagram" und "Facebook" zwei dezente Symbole.

   Die Symbole erben ihre Farbe ueber currentColor von
   ".site-footer a { color: rgba(255, 255, 255, 0.68) }" — im Browser
   nachgemessen. Keine zweite Farbangabe: eine Farbe an einer Stelle
   kann nicht auseinanderlaufen.

   Die Trefferflaeche kommt aus dem Innenabstand, nicht aus der Groesse
   des Symbols: 20 px Symbol plus zweimal 12 px ergeben 44 px, die
   Anforderung aus WCAG 2.5.5. Der negative Aussenabstand haelt die Zeile
   optisch dort, wo die Textverweise standen; sonst waere der
   Innenabstand als Luecke sichtbar — "sonst aendert sich nichts" war die
   Vorgabe.

   KEIN eigener Fokusring: die zweifarbige Regel der Seite greift hier
   genauso, auf dem dunklen Fusszeilengrund nachgemessen. */
.footer-social {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 1px 0 -12px -12px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 12px;
  /* KEINE Farbangabe. "color: inherit" stand hier zuerst und erbte von
     .site-footer (weiss), nicht von ".site-footer a"
     (rgba(255,255,255,0.68)) — im Browser gemessen: rgb(255,255,255)
     statt der Farbe der Nachbarverweise. Ohne eigene Angabe greift die
     bestehende Regel, und die Symbole stehen in derselben Farbe wie die
     Woerter darueber. */
  transition: color 0.2s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--gold-light);
}

/* Die Trefferflaeche sitzt hier im Innenabstand und braucht das
   Pseudoelement aus C3.4 nicht. Ohne diese Zeile legte es sich als
   unsichtbare Flaeche ueber die Nachbarn. */
.footer-social a::after {
  content: none;
}

.footer-title {
  margin-bottom: 18px;
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer-legal {
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid var(--white-line);
  font-size: 0.78rem;
}

.mobile-contact-bar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 90;
  display: none;
  grid-template-columns: 1fr 1fr;
  padding: 6px;
  border: 1px solid var(--white-line);
  border-radius: 18px;
  background: rgba(10, 23, 33, 0.95);
  box-shadow: 0 18px 44px rgba(10, 23, 33, 0.3);
  backdrop-filter: blur(16px);
}

.mobile-contact-bar[hidden],
body.menu-open .mobile-contact-bar {
  display: none;
}

.mobile-contact-bar a {
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: white;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.mobile-contact-bar a:first-child {
  color: var(--night);
  background: var(--gold-light);
}

/* Gemessen 28.08.2026: die volle Leiste hatte 1057 px Eigenbreite
   (Wortmarke 289 + Navigation 743 + Abstand) und braucht 48 px Seitenrand.
   Damals passte sie ab 1105 px.

   NACHGEMESSEN 29.08.2026, nach der Umbenennung ABOUT -> UEBER MICH und
   INSIGHTS -> RATGEBER (Spanisch SOBRE MI / GUIA, Englisch unveraendert):

     Deutsch   1097 px Eigenbreite + 48 px Rand  ->  1145 px noetig
     Spanisch  1037 px                           ->  1085 px
     Englisch  1034 px                           ->  1082 px

   Massgeblich ist die laengste Fassung, also Deutsch. Die Schwelle steht
   deshalb auf 1144 px statt 1104. Ohne diese Anpassung waere die deutsche
   Leiste zwischen 1105 und 1144 px gestaucht gewesen — eine Folge der
   Umbenennung, die wir selbst verursacht haetten.

   WICHTIG BEIM NACHMESSEN: Werte unterhalb von etwa 1120 px sind
   unbelastbar. Dort wirkt die Einklapp-Regel dieses Blocks in die Messung
   hinein, und die gemessene Eigenbreite faellt zu klein oder zu gross aus.
   Gemessen wird oberhalb davon. */
/* NACHTRAG 22.10.2026: Der Punkt steht jetzt auf 1199 statt 1144.
   Die Begruendung darueber (1145 px fuer die deutsche Leiste) gilt
   unveraendert — sie war die UNTERE Schranke. Seit die Sozialsymbole
   rechts dazugekommen sind, braucht die Leiste gemessene 1200 px:
     1145px fehlen 55px · 1180px fehlen 20px · 1200px passt
   Entscheidung Miguel: lieber frueher einklappen, als die Symbole in
   einem 55 px breiten Band verschwinden zu lassen. */
@media (max-width: 1199px) {
  /* Die aufgeklappte Schublade hat hellen Grund. Sie setzt deshalb ihre
     eigene Schriftfarbe, unabhaengig vom Scrollzustand.

     BERICHTIGT am 29.08.2026. Hier stand vorher:
       "Ueber 1104 px gibt es diese Flaeche nicht — dort bleibt die
        Navigation hell ueber dem Foto."
     Das war falsch und hat den Fehler getragen, den Angel Garcia auf dem
     iPad quer fand: Die Klappflaeche .nav-panel unter "Leistungen" gibt es
     sehr wohl ueber 1104 px. Dort erbte sie die helle Schrift der Leiste
     und stand mit rgba(255,255,255,0.94) auf rgb(255,253,248) — gemessen
     an Bildpunkten: 1.02:1. Ein Kommentar, der ueberzeugend das Falsche
     erklaert, ist gefaehrlicher als gar keiner.
     Die Regel dafuer steht jetzt bei .nav-panel, ausserhalb jeder
     Breitenbedingung. */
  .site-nav {
    --kopf-schrift: var(--ink);
    --kopf-marke: var(--gold-readable);
    color: var(--ink);
  }

  /* AUFGEHOBEN am 29.08.2026. Hier stand:
       .site-nav :focus-visible { outline-color: var(--gold-readable); }
     mit der Begruendung, der Ring stehe auf der hellen Flaeche bei 3.21:1.
     Die Ausnahme war ein Behelf fuer genau eine Flaeche. Seit der Ring
     zweifarbig ist (heller Ring plus dunkle Aussenkontur), traegt er auf
     JEDEM Grund — die Ausnahme wuerde die helle Innenlinie wieder auf einen
     Goldton zurueckdrehen und den Gewinn an dieser Stelle aufheben.
     Gemessen nach der Aenderung: DE 9.50, EN 11.39, ES 11.38 (vorher
     2.14 / 2.46 / 2.84). */

  .site-nav {
    position: fixed;
    inset: 117px 16px auto;
    max-height: calc(100vh - 140px);
    display: none;
    overflow-y: auto;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--paper-strong);
    box-shadow: var(--shadow);
  }

  .site-nav.open {
    display: grid;
    gap: 10px;
  }

  .site-nav > a,
  .nav-services > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    font-size: 0.9rem;
  }

  .site-nav > .nav-future {
    padding-left: 10px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .nav-panel {
    position: static;
    width: auto;
    transform: none;
    margin-top: 4px;
    box-shadow: none;
  }

  .language-switcher {
    padding: 14px 0 4px;
    border-top: 1px solid var(--line);
  }

  .menu-toggle {
    display: inline-grid;
    place-items: center;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 500px;
  }
}

@media (max-width: 800px) {
  :root {
    --wrap: min(100vw - 32px, 680px);
  }

  body {
    font-size: 16px;
  }

  .header-inner {
    min-height: 74px;
  }

  .site-nav {
    top: 107px;
  }

  .hero {
    min-height: auto;
  }

  .hero-inner {
    padding: 64px 0 80px;
  }

  h1 {
    font-size: clamp(2.05rem, 9.4vw, 3.6rem);
  }

  .hero-visual {
    min-height: 390px;
  }

  .audience-grid,
  .service-grid,
  .choice-grid,
  .insights-grid,
  .content-grid,
  .split-panel,
  .contact-hub,
  .footer-grid,
  .future-panel,
  .trust-grid,
  .future-note,
  .commerce-note,
  .boundary-panel {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .section {
    padding: 56px 0;
  }

  body[data-page="home"] .audience-card,
  body[data-page="home"] .service-card {
    min-height: 168px;
    padding: 24px;
  }

  body[data-page="home"] .process-step {
    min-height: 0;
    padding: 24px 0;
  }

  body[data-page="home"] .trust-intro {
    margin-bottom: 38px;
  }

  body[data-page="home"] .home-trust .portrait {
    aspect-ratio: 4 / 3;
  }

  body[data-page="home"] .trust-item {
    padding: 24px;
  }

  body[data-page="home"] .future-note {
    margin-top: 36px;
  }

  .trust-item {
    min-height: 0;
  }

  .future-note,
  .commerce-note {
    gap: 18px;
  }

  .audience-card,
  .service-card,
  .choice-card,
  .insight-card,
  .content-card {
    min-height: 230px;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-step + .process-step {
    border-left: 0;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .field-full {
    grid-column: auto;
  }

  .mobile-contact-bar {
    display: grid;
  }

  .site-footer {
    padding-bottom: 130px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

.insights-all {
  margin-top: 28px;
  text-align: right;
}

.insights-all a {
  font-weight: 600;
  color: var(--gold-readable);
}

.form-disabled-notice {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  line-height: 1.6;
}

/* Sprachhinweis-Band: unauffaellig, tastaturbedienbar, kein Layout-Sprung.
   Standardmaessig via [hidden] unsichtbar — ohne JavaScript erscheint es nie. */
.lang-hint[hidden] { display: none; }

.lang-hint {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.95rem;
}

.lang-hint-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-hint-option[hidden] { display: none; }

.lang-hint-option {
  margin: 0;
  flex: 1 1 auto;
  line-height: 1.5;
}

.lang-hint-option a {
  font-weight: 600;
  color: var(--gold-readable);
  white-space: nowrap;
}

.lang-hint-dismiss {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.lang-hint-dismiss:hover,
.lang-hint-dismiss:focus-visible {
  border-color: var(--gold-readable);
  color: var(--gold-readable);
}

@media (max-width: 640px) {
  .lang-hint-inner { padding: 12px 18px; gap: 12px; }
  .lang-hint { font-size: 0.9rem; }
}

/* ------------------------------------------------------------------ *
 * Ankunftsfolge, Kopfzeile, Typografie, Knoepfe   (28.08.2026)        *
 * ------------------------------------------------------------------ */

/* EINE Folge beim Laden: Zeile, Ueberschrift, Text, Knoepfe.
   ~70 ms versetzt, 14 px Weg, sanft ausklingend, OHNE Nachfedern —
   Nachfedern gehoert nur dorthin, wo der Nutzer selbst geschoben hat. */
[data-enter] {
  opacity: 0;
  transform: translateY(var(--enter-shift));
  animation: enter 620ms var(--enter-ease) forwards;
}
[data-enter="1"] { animation-delay: calc(var(--enter-step) * 1); }
[data-enter="2"] { animation-delay: calc(var(--enter-step) * 2); }
[data-enter="3"] { animation-delay: calc(var(--enter-step) * 3); }
[data-enter="4"] { animation-delay: calc(var(--enter-step) * 4); }
/* 5 und 6 nachgetragen, 20.10.2026. Die Folge reichte bis 4, aber im
   Hero der Startseite traegt die Hinweiszeile seit dem Umbau (e326fba)
   data-enter="5" — ohne passende Regel. Ohne Verzoegerung blendet sie
   mit Verzug 0 ein, also VOR der Vorzeile: die Folge lief verkehrt
   herum, und niemand hatte danach gefragt.
   Aufgefallen beim Vergeben von data-enter="6" fuer den AVELORA-Teaser
   in der unteren Stellung — derselbe Fehler haette ihn ebenso getroffen. */
[data-enter="5"] { animation-delay: calc(var(--enter-step) * 5); }
[data-enter="6"] { animation-delay: calc(var(--enter-step) * 6); }

@keyframes enter {
  to { opacity: 1; transform: translateY(0); }
}

/* Kopfzeile: ueber dem Bild durchsichtig, damit der Verlauf des Fotos die
   Lesbarkeit traegt. Erst beim Scrollen wird sie zur durchscheinenden
   Schicht mit Unschaerfe — dort liegt Inhalt darunter, nicht ein Gesicht.
   Kante als weicher Verlauf, nicht als 1-px-Linie. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 260ms ease, backdrop-filter 260ms ease, color 260ms ease;
}

/* Ueber dem Foto helle Schrift, sonst waere sie unlesbar. Der Verlauf des
   Fotos traegt hier die Lesbarkeit — deshalb oben KEINE zweite
   durchscheinende Flaeche, die haette den Kontrast zerstoert. */
/* Kopfzeilenfarbe als Variable statt als direkte Farbe.
   Grund: die aufgeklappte Menueflaeche hat IMMER hellen Grund, unabhaengig
   davon, ob die Seite gescrollt ist. Wer die Hellschrift ueber eine weitere
   Ausnahme zurueckdreht, baut einen Spezifitaetskampf. Ueber eine geerbte
   Variable setzt die Flaeche schlicht ihre eigene Farbwelt.
   Gemessen am 28.08.2026: im geoeffneten Menue ganz oben standen die Punkte
   bei 1.02:1 — weiss auf rgb(255,253,248). */
.site-header {
  --kopf-schrift: rgba(255, 255, 255, 0.94);
  /* EINE MARKENFARBE AUF DUNKLEM GRUND. Entscheidung Miguel,
     22.10.2026: Der Logo-Slogan steht oben und unten in derselben
     Farbe, --gold-light #d7c39e. Vorher stand hier
     rgba(226,205,166,0.96) — ein eigener Ton nur fuer den Kopf.
     Der GESCROLLTE Kopf behaelt --gold-readable: dort ist der Grund
     hell, und --gold-light faellt dort auf 1,28:1. Gleiche
     Goldfamilie, lesbare Stufe. */
  --kopf-marke: var(--gold-light);
}

.site-header[data-scrolled] {
  --kopf-schrift: var(--ink);
  --kopf-marke: var(--gold-readable);
}

.site-header .header-inner,
.site-header .header-inner a,
.site-header .header-inner button,
.site-header .header-inner summary { color: var(--kopf-schrift); }
.site-header .brand span { color: var(--kopf-marke); }

/* Der Hero beginnt UNTER der Kopfzeile, damit das Foto den ganzen Schirm
   fuellt. Der Abstand wird innen wieder aufgeschlagen, nicht aussen. */
.hero { margin-top: calc(-1 * var(--header-h, 92px)); }

/* Schmaler Verlauf allein in der obersten Reihe, hinter der Kopfzeile.
   Gemessen am 28.08.2026 an der GERENDERTEN Flaeche, Verlauf eingerechnet:
   weisse Schrift stand auf care-coordination.html bei 1.49:1 ueber einer
   hellen, unscharfen Bildstelle. WCAG verlangt 4.5:1.
   BEWUSST KEINE milchige Flaeche ueber dem ganzen Bild: das Gesicht liegt
   tiefer und behaelt seine Zeichnung. Der Verlauf ist auf Kopfzeilenhoehe
   begrenzt und laeuft nach unten aus. */
.site-header:not([data-scrolled])::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 168%;
  background: linear-gradient(to bottom,
    rgba(9, 22, 33, 0.86) 0%,
    rgba(9, 22, 33, 0.74) 40%,
    rgba(9, 22, 33, 0.38) 72%,
    rgba(9, 22, 33, 0) 100%);
  pointer-events: none;
  z-index: -1;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  background: linear-gradient(to bottom, rgba(11, 26, 38, 0.16), rgba(11, 26, 38, 0));
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

/* Deckung am 29.08.2026 von 0.72 auf 0.96 erhoeht. Die Unschaerfe bleibt.

   GRUND, gemessen mit scripts/miss-kopfdeckung.mjs an Bildpunkten, im
   ECHTEN gescrollten Zustand, ueber drei Seiten, drei Breiten und drei
   Scrollstellen — 144 Texte je Kandidat:

     0.72 (vorher):  schlechtester Text 3.48:1,  23 von 144 unter 4.5:1
     0.82:                              4.32:1,   8 unter 4.5:1
     0.90:                              5.12:1,   0 unter 4.5:1
     0.96 (jetzt):                      5.78:1,   0 unter 4.5:1
     1.00:                              6.23:1,   0 unter 4.5:1

   Bei 0.72 schienen 28 Prozent des Fotos durch. Damit hing die Lesbarkeit
   der Wortmarke am BILDINHALT, nicht an der Bildschirmbreite. Angel Garcia
   hat das benannt, nachdem eine fruehere Messung von mir eine Breitenliste
   vorgelegt hatte, die auf einem Werkzeugfehler beruhte: der Prueframen
   trug scrolling="no", und care.css Zeile 74 setzt scroll-behavior: smooth,
   sodass unter virtueller Zeit nie gescrollt wurde. Gemessen wurde also der
   Zustand "oben" und fuer "gescrollt" gehalten.

   Warum 0.96 und nicht 0.90: Die Messung deckt drei Seiten und drei
   Scrollstellen ab. Ein Foto, das nur an einer NICHT gemessenen Stelle hell
   ist, faellt bei 0.90 (Reserve 0.62) eher unter die Schwelle als bei 0.96
   (Reserve 1.28). Die Reservevorgabe stand vor der Messung fest. */
.site-header[data-scrolled] {
  background: rgba(246, 242, 234, 0.96);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.site-header[data-scrolled]::after { opacity: 1; }

/* Schrift auf der durchscheinenden Flaeche etwas kraeftiger. */
.site-header[data-scrolled] .site-nav a,
.site-header[data-scrolled] .brand { font-weight: 600; }

/* Buchstabenabstand nach Groesse: grosse Ueberschrift enger, Fliesstext bei 0.
   Ein fester Wert fuer alles ist immer irgendwo falsch. */
h1 { letter-spacing: -0.02em; line-height: 1.04; }
h2 { letter-spacing: -0.014em; line-height: 1.12; }
h3 { letter-spacing: -0.008em; line-height: 1.2; }
p, li { letter-spacing: 0; }
.hero-lead, .section-lead { line-height: 1.75; }

/* Lange deutsche Woerter duerfen die Spalte nicht sprengen — aber sie
   duerfen auch nicht MITTEN IM WORT ohne Trennstrich brechen.
   Bis zum 07.09.2026 stand hier hyphens: manual. Das ist ein Widerspruch:
   overflow-wrap: break-word ERLAUBT den Bruch an jeder Stelle, hyphens:
   manual VERBIETET den Trennstrich dazu. Ergebnis auf about.html bei
   801 px: "Rollenvermisc / hung".
   Gemessen am 07.09.2026 ueber 51 Seiten und 11 Breiten: 55 solcher
   Brueche, in allen drei Sprachen — darunter "Selbstbestimm / ung",
   "Produktverspre / chen", "Acompañam / iento", "responsibilit / y".
   Mit hyphens: auto und dem lang-Attribut der Seite trennt der Browser
   korrekt: "Rollenvermi-schung". Nachgewiesen an einem Vergleichsbild.
   overflow-wrap bleibt als Notbremse fuer Woerter, die auch getrennt
   nicht passen (lange Adressen, Dateinamen). */
/* KANTE 1040 px, am 08.09.2026 nachgezogen. Die Regel oben stand seit dem
   07.09. fuer JEDE Breite — am Rechner trennte der Browser daraufhin
   "Beglei-tung" und "Koordi-nation", obwohl die Zeile Platz hatte.
   Warum 1040 und nicht 900: 1040 ist ein Umschaltpunkt von care.css
   (640, 800, 1040, 1144), 900 ist keiner. Und er liegt ueber jeder Breite,
   bei der ueberhaupt ein harter Bruch gemessen wurde — der Fall, der die
   Regel ausgeloest hat ("Rollenvermisc / hung"), trat bei 801 px auf.
   Gemessen ueber 51 Seiten und 11 Breiten: oberhalb 1040 px null harte
   Brueche. Die Trennung ist dort also entbehrlich, nicht nur unschoen.
   overflow-wrap bleibt ueberall als Notbremse fuer Woerter, die auch
   getrennt nicht passen. */
h1, h2, h3 { overflow-wrap: normal; hyphens: manual; }

/* Zusatz, keine Bedingung: text-wrap: balance verteilt die Zeilen einer
   Ueberschrift gleichmaessiger. Ein Browser, der es nicht kennt, ueberliest
   die Zeile — der Rest bleibt unveraendert. Deshalb steht es in einer
   EIGENEN Regel: eine unbekannte Eigenschaft wirft sonst nichts weg. */
h1, h2 { text-wrap: balance; }

/* C3.5, 14.09.2026: Die Auswahlkarten trugen h3 direkt unter dem h1 —
   ein uebersprungene Ebene, die ein Screenreader-Nutzer als fehlenden
   Abschnitt hoert (6 Faelle auf 6 Seiten). Sie sind jetzt h2.
   Die GESTALT darf sich dabei nicht aendern: als h2 waren sie plotzlich
   68,3 px statt der bisherigen h3-Groesse. Deshalb erben sie hier genau
   die h3-Werte zurueck — Schriftgroesse, Abstand, Laufweite, Zeilenhoehe.
   Gemessen nach der Aenderung: wieder dieselben Werte wie vorher. */
.choice-card h2 {
  margin-bottom: 14px;
  font-size: clamp(1.65rem, 2.4vw, 2.2rem);
  letter-spacing: -0.008em;
  line-height: 1.2;
}

/* C3.4, 14.09.2026: Trefferflaechen der Fusszeilen- und Menuelinks auf
   den erzeugten Seiten. Dieselbe Technik wie auf den handgeschriebenen:
   ein Pseudoelement mit negativem inset vergroessert die Flaeche, ohne
   Platz im Fluss zu brauchen. Das Bild bleibt unveraendert. */
.footer-grid a,
.site-nav a,
.language-switcher a{position:relative}
.footer-grid a::after,
.site-nav a::after,
.language-switcher a::after{
  content:"";
  position:absolute;
  left:0;right:0;top:-5px;bottom:-5px;
  pointer-events:auto;
}

/* C2.1, 10.09.2026: In den schmalen Spalten des Grenzen-Kastens und der
   AVELORA-Bruecke wird WIEDER getrennt — bei jeder Breite.
   Die Kante von 1040 px (Paket A2) gilt fuer die FENSTERbreite. Diese
   Spalte ist aber rund 379 px breit, egal wie breit das Fenster ist:
   minmax(230px, 0.65fr) in einem Kasten fester Maximalbreite. Oberhalb
   1040 px stand die Trennung damit ab, und "Rollenvermischung" lief
   gemessene 180 px ueber die Spalte und 90 px in den Nachbarabsatz.
   Gemessen am 10.09.2026: 32 Faelle auf 10 Seiten bei 1100 bis 1920 px,
   bei 390 und 820 px keiner — genau dort galt die Trennung noch.
   OHNE overflow-wrap. Der erste Anlauf hatte break-word als Notbremse
   dabei — damit kam der harte Bruch "Organisatio / n" auf
   care-coordination-en.html bei 1912 px zurueck: im Englischen kennt der
   Browser dort keine Trennstelle, und dann bricht die Notbremse
   strichlos. Genau das ist ausgeschlossen. Passt ein Wort auch getrennt
   nicht, muss die SPALTE breiter werden, nicht das Wort zerschnitten. */
.boundary-panel h2,
.boundary-panel h3,
.bridge-panel h2,
.bridge-panel h3 {
  hyphens: auto;
}

/* BEIDE zusammen, nicht einzeln. Am 08.09.2026 stand hier zuerst nur
   "hyphens: auto" und oben blieb "overflow-wrap: break-word" fuer jede
   Breite stehen. Gemessen: die harten Wortbrueche stiegen von 1 auf 40 —
   oberhalb 1040 px erlaubte overflow-wrap den Bruch, waehrend hyphens:
   manual den Trennstrich verbot. Genau der Widerspruch, den der Kommentar
   oben fuer den 07.09. beschreibt, nur eine Breite hoeher.
   Deshalb gelten Notbremse und Trennung jetzt gemeinsam: unterhalb der
   Kante beide, oberhalb keins von beiden. Oberhalb 1040 px ist genug
   Platz — das ist die Begruendung der Kante, und sie wurde gemessen. */
@media (max-width: 1040px) {
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
}

/* Knoepfe reagieren beim DRUECKEN, nicht beim Loslassen. */
.button { transition: transform 100ms var(--enter-ease), background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.button:active { transform: scale(0.975); }

/* ---- Bewegungsempfindlichkeit: nicht verhandelbar ----
   Aeltere Menschen bekommen von Bildschirmbewegung ueberdurchschnittlich
   oft Schwindel. Bei Angels Zielgruppe ist das nicht die Randgruppe,
   sondern die Mitte. Kein Versatz, nur ein sanftes Aufblenden. */
@media (prefers-reduced-motion: reduce) {
  [data-enter] {
    transform: none;
    animation: fade-only 420ms ease forwards;
  }
  @keyframes fade-only { to { opacity: 1; } }
  .button:active { transform: none; }
  .site-header, .site-header::after { transition: none; }

  /* Der AVELORA-Kreis hoert auf zu atmen. Der Schein BLEIBT — er wird
     auf den mittleren Wert festgestellt, damit der Kreis genauso
     aussieht wie sonst, nur ohne Bewegung. "Keine Animation" heisst
     hier nicht "kein Schein": wer Bewegung nicht vertraegt, soll
     dasselbe Element sehen, nicht ein aermeres. */
  .avelora-kreis {
    animation: none;
    /* MITTELWERTE der Lichtstufe III: Kern (0,15+0,60)/2 = 0,375,
       Halo (0,08+0,30)/2 = 0,19, Innenlicht (0,02+0,06)/2 = 0,04.
       Dieselben Zahlen stehen als Grundwert an .avelora-kreis, damit
       beide nicht auseinanderlaufen.
       Die Linie steht auf --gold, dem Tiefpunktwert: sie ist der
       schlechtere der beiden Kontraste und damit der sichere. */
    box-shadow:
      0 0 13px 0 rgba(215, 195, 158, 0.375),
      0 0 44px 10px rgba(215, 195, 158, 0.19),
      inset 0 0 18px 0 rgba(215, 195, 158, 0.04);
    border-color: var(--gold);
  }
}

/* ---- Transparenzempfindlichkeit: Kopfzeile wird deckend ---- */
@media (prefers-reduced-transparency: reduce) {
  .site-header[data-scrolled] {
    background: var(--paper, #f6f2ea);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header[data-scrolled]::after { opacity: 1; }
}

/* ---- Bildausschnitt je Bildschirmbreite ----
   Am Handy braucht das Foto einen Hochformat-Ausschnitt, damit das Gesicht
   mittig sitzt statt angeschnitten. Verschoben wird der AUSSCHNITT, nicht
   die Schriftgroesse — so bleibt die Ueberschrift lesbar gross. */
@media (max-width: 1040px) {
  .hero-media img { object-position: 58% 24%; }   /* iPad quer: Bild unveraendert */
}

@media (max-width: 800px) {
  .hero { min-height: min(100svh, 780px); align-items: end; }
  .hero-media img { object-position: 52% 18%; }   /* iPad hoch: Bild unveraendert */
  .hero-media::after {
    background:
      linear-gradient(to top, rgba(11, 26, 38, 0.96) 0%, rgba(11, 26, 38, 0.9) 34%, rgba(11, 26, 38, 0.5) 62%, rgba(11, 26, 38, 0.1) 86%, rgba(11, 26, 38, 0) 100%);
  }
  .hero-inner { padding: clamp(84px, 14vh, 130px) 0 clamp(40px, 6vh, 64px); }
  .hero-copy { max-width: 100%; }
}

/* Nur unter 640 px. Rechner und iPad bleiben unangetastet.
   Befund: die Vorzeile brach auf zwei Zeilen und lag quer ueber Augen und
   Brille, die Schaedeldecke war oben angeschnitten.
   Der Textblock beginnt deshalb erst unterhalb der Augenpartie.

   GRENZE, nachgerechnet: hero-mallorca.jpg ist 1456x816 im Querformat.
   Bei 390 px Breite ergibt die Skalierung auf die Breite eine Bildhoehe von
   218.6 px. Jede Bandhoehe darueber laesst die HOEHE die Skalierung bestimmen
   — das Bild fuellt sie dann exakt aus, und der Y-Wert von object-position
   ist wirkungslos. Es gibt im Bild keine Luft ueber dem Kopf. Der zweite
   Wert steht hier nur fuer den Fall schmalerer Baender; gewirkt hat der
   erste. Abhilfe braeuchte eine Hochformat-Fassung des Bildes. */
@media (max-width: 640px) {
  .hero { min-height: min(100svh, 720px); }
  /* NUR HIER wirkt --hero-x. Am Handy ist der Kasten hochkant (390x746),
     das Bild wird ohnehin seitlich beschnitten — der Ausschnitt laesst sich
     also allein durch Verschieben waehlen, ganz ohne Vergroesserung.
     Der Wert je Seite ist BERECHNET, nicht geschaetzt:
       X = (Kopfanteil * skalierte Breite - 0,68 * Kastenbreite) / Ueberhang
     Ziel: Kopf rechts der Mitte, Text links auf Hintergrund. */
  .hero-media img { object-position: var(--hero-x, 58%) 12%; }
  .hero-inner { padding-top: 190px; }
}