/* ============================================================
   AuPairando – Website Styles (v2)
   Markenfarben (aus dem Logo): Creme, Braun, Rost/Terrakotta, Tan
   Schrift: Nunito (Überschriften, rund/warm wie das Logo) + Mulish (Fließtext)
   ============================================================ */

:root {
  --creme: #f7f1e6;
  --creme-2: #fdfaf3;
  --braun: #2e1f15;
  --braun-soft: #4a3524;
  --rost: #c2562e;
  --rost-dark: #a4451f;
  --tan: #d9c4a3;
  --tan-soft: #ece0cb;

  --ink: var(--braun);
  --muted: #6f5e4d;
  --bg: var(--creme);
  --surface: #ffffff;
  --border: #e6dcc9;

  /* Drei Materialebenen: Papier (--bg / --creme-2), Band (--band), Bühne (--field-dark).
     Vorher trug die Seite nur Papier: --creme gegen --creme-2 sind 1,08 : 1 und eine weiße
     Karte auf --creme-2 sind 1,04 : 1 – der Sektionswechsel .section/.section-alt existierte
     damit nur im Code. Mit --band steigt er auf 1,16 : 1 und die Karte darauf auf 1,31 : 1.
     Bewusst ein EIGENES Token und nicht --creme-2 umdefiniert: an --creme-2 hängen sechs
     Komponenten mit gegenläufigen Anforderungen (Hero-Gradient fast weiß, Formularfüllung
     eingesenkt, Infobox beigestellt), und die Tokens sind 1:1 mit report_template.html und
     den Wettbewerbsanalyse-Berichten identisch. */
  --band: #ece0cb;
  /* Papierkorn als 160-px-Kachel, ~0,4 KB, 0 Requests. Ein graues fractalNoise um 50 %
     Helligkeit wirkt in BEIDE Richtungen – auf hellem Grund abdunkelnd, auf dunklem
     aufhellend –, deshalb genuegt eine Datei fuer beide Themes. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");

  /* ---------- Die Bühne ----------
     Am 05.09.2026 zweimal geändert. Erst wurde sie von --braun (#2e1f15) auf ein gebranntes
     Leder (#62321e) aufgehellt; der Inhaber fand den Sprung zur weißen Karte immer noch zu
     groß und wünschte ausdrücklich "den Hintergrund hell und die Box etwas dunkler".
     Jetzt ist die Bühne eine HELLE Tan-Fläche und die Karte ein warmes Creme – beide Seiten
     sind aufeinander zugegangen:

       Karte --creme-2 #fdfaf3 auf Bühne --tan #d9c4a3    1,63 : 1   (vorher 9,97)
       Bühne gegen --band #ece0cb                         1,30 : 1   (der Sektionswechsel
                                                                      --band/--creme ist 1,16)
       Bühne gegen --creme #f7f1e6                        1,51 : 1

     Die Bühne bleibt damit ein eigenes Materialereignis – sogar ein deutlicheres als der
     normale Sektionswechsel –, ohne die Karte noch anzuschreien. Zum Vergleich: weiße Karten
     stehen anderswo auf der Seite bei 1,31 : 1 auf --band und lesen sich dort einwandfrei.

     ⚠️ AUF HELLEM GRUND KIPPEN DIE TEXTFARBEN. Nachgerechnet auf #d9c4a3:
     --muted 3,66 : 1 und --rost-dark 3,59 : 1 fallen UNTER AA, --rost erreicht als Grafik
     nur 2,65 : 1. Deshalb tragen die drei Bühnen-Tokens jetzt dunkle Werte, und der Akzent
     ist ein eigenes, tieferes Rost. Wer die Bühnenfarbe erneut anfasst, rechnet alle vier
     Zeilen neu.
     ⚠️ Der DARK-Wert bleibt #3d2a1c. Dort ist die Karte dunkler als die Fläche, im Light
     Mode heller – das ist bewusst: Jede Seite für sich ist stimmig, und ein dunkles Theme
     mit heller Bühne wäre keins. */
  --stage-bg: #d9c4a3;              /* = --tan, Marken-Token                               */
  --on-stage: #4a3524;              /* = --braun-soft · 6,78 : 1                            */
  --on-stage-strong: #2e1f15;       /* = --braun      · 9,35 : 1                            */
  --stage-accent: #7d3315;          /* Eyebrow + Marken-Balken + Buttonkante · 5,25 : 1     */
  --stage-card-bg: var(--creme-2);  /* die "etwas dunklere Box" · 1,63 : 1 gegen die Bühne  */
  /* Kartenschatten auf der Bühne. Im Light Mode ein normaler weicher Schlagschatten – der
     Lichthof von vorhin war die Antwort auf eine DUNKLE Fläche und wäre auf Tan unsichtbar.
     Im Dark Mode bleibt genau dieser Hof, weil er die Karte dort von 1,21 auf 1,78 : 1 hebt. */
  --stage-card-shadow: 0 10px 30px -8px rgba(46, 31, 21, .22);
  --stage-rule: rgba(46, 31, 21, .07);      /* Tabellenkopf auf der Bühne                   */
  --stage-rule-strong: rgba(46, 31, 21, .16); /* Tabellenlinien auf der Bühne               */

  /* Textfarbe auf Rost-Flächen. Im Light Mode ist Weiß auf --rost exakt 4,50 : 1 und damit
     gerade AA-konform; im Dark Mode wird --rost zu #e06a3c und Weiß fällt auf 3,33 : 1 –
     das trifft JEDEN CTA-Button. Deshalb ein Token statt eines festen #fff. */
  --on-rost: #ffffff;
  --shadow-sm: 0 1px 3px rgba(46, 31, 21, .08);
  --shadow-md: 0 8px 28px rgba(46, 31, 21, .12);
  --shadow-lg: 0 24px 60px rgba(46, 31, 21, .18);
  --radius: 18px;
  --radius-sm: 10px;
  --maxw: 1120px;
  --font: "Mulish", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Nunito", var(--font);
}

/* ---------- Dark Mode ---------- */
html[data-theme="dark"] {
  --creme: #1e140e;
  --creme-2: #271a11;
  --braun-soft: #d8c7ad;
  --tan-soft: #33241a;
  --rost: #e06a3c;
  /* --rost-dark war die EINZIGE Akzentfarbe ohne Dark-Wert – und sie trägt die globale
     Link-Regel. Sie lag damit bei 2,97 : 1 auf dem dunklen Grund, also unter AA, auf jeder
     Seite mit Fließtext-Links (drei Rechtsseiten, .form-hint, /danke/, /es/gracias/).
     #e8794c erreicht 6,26 : 1 auf --bg, 5,71 : 1 auf --surface und 5,16 : 1 auf --tan-soft
     (letzteres trägt den Tag der Ratgeber-Karten). */
  --rost-dark: #e8794c;
  --on-rost: #2b1a10;

  --band: #33231a;
  /* Bleibt bewusst dunkel – im Dark Mode ist nicht die Fläche das Problem, sondern dass die
     Karte (#2a1c12) darauf nur 1,21 : 1 erreichte. Das repariert der Lichthof, nicht ein
     anderer Flächenton. ⚠️ An diesem Token hängt auch der Dark-Footer (Regel weiter unten). */
  --stage-bg: #3d2a1c;
  /* Im Dark Mode bleibt die Bühne dunkel – also kehren die drei Textrollen zurück auf hell.
     Ohne diese vier Zeilen erbte der Dark Mode die dunklen Light-Werte und die Bühne wäre
     schwarz auf schwarz. */
  --on-stage: var(--tan);            /* 8,00 : 1 auf #3d2a1c */
  --on-stage-strong: #f7f1e6;        /* 12,08 : 1            */
  --stage-accent: #f0a884;           /* 6,88 : 1             */
  --stage-card-bg: var(--surface);
  --stage-rule: rgba(217, 196, 163, .14);
  --stage-rule-strong: rgba(217, 196, 163, .22);
  /* Hier bleibt es der LICHTHOF: Die Karte ist im Dark Mode dunkler als die Fläche und stünde
     ohne ihn bei 1,21 : 1. Mit Hof 2,29 : 1. Ein Schlagschatten wie im Light Mode brächte dort
     gar nichts – Schatten auf dunklem Grund sind unsichtbar. */
  --stage-card-shadow:
    0 0 46px 14px rgba(244, 235, 221, .22),
    0 22px 48px -16px rgba(0, 0, 0, .5);

  --ink: #f4ebdd;
  --muted: #b6a488;
  --bg: #1e140e;
  --surface: #2a1c12;
  /* #43301f erreichte gegen --surface nur 1,45 : 1. Der Rahmen war damit nicht das eigentliche
     Problem – im Light Mode sind es 1,36 : 1, also praktisch dasselbe –, aber im Dunkeln fällt
     der Schatten als zweites Trennmittel weg (siehe unten), und dann trägt allein die Kante. */
  --border: #5a422c;

  /* Die Schatten des Light-Modes sind braun getönt (rgba(46,31,21,…)) und auf #1e140e
     praktisch unsichtbar: --surface steht nur 1,10 : 1 über dem Grund, es gab im Dark Mode
     also gar kein Kartensystem. Schwarz trägt, und die inset-Lichtkante oben ersetzt das
     Streiflicht, das eine Karte im Hellen von selbst hat. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(240, 231, 221, .05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(240, 231, 221, .06);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(240, 231, 221, .07);
}

html[data-theme="dark"] .site-header { background: rgba(46, 31, 21, .95); }
/* Der Footer ist die einzige Fläche, die in BEIDEN Themes braun bleibt (Konventionen).
   Im Dark Mode stand --braun #2e1f15 aber nur 1,14 : 1 über --bg #1e140e – als Fläche also
   unsichtbar, womit die Seite dort überhaupt kein tonales Ereignis mehr hatte. Bewusst hier
   und nicht durch Umdefinieren von --braun: an --braun hängen über ein Dutzend Textfarben. */
html[data-theme="dark"] .site-footer { background: var(--stage-bg); }
html[data-theme="dark"] .feature h3,
html[data-theme="dark"] .step h3,
html[data-theme="dark"] .contact-chip,
html[data-theme="dark"] .contact-form label { color: var(--ink); }
html[data-theme="dark"] .btn-outline { color: var(--ink); border-color: var(--ink); }
html[data-theme="dark"] .btn-outline:hover { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .footer-nav a,
html[data-theme="dark"] .footer-bottom a { color: var(--tan); }
html[data-theme="dark"] .nav-toggle span { background: var(--ink); }

/* ---------- Base ---------- */
* { box-sizing: border-box; }

/* color-scheme fehlte komplett. Ohne die Eigenschaft bleiben im Dark Mode alle NATIVEN
   Oberflächen hell: die beiden <select> des Kontaktformulars klappen mit weißer
   Systemliste auf, Scrollbalken und Autofill-Overlays bleiben hell, die Caret-Farbe im
   Textfeld ist Systemvorgabe. accent-color färbt Fokus- und Auswahlindikatoren der
   nativen Steuerelemente in die Markenfarbe. */
:root { color-scheme: light; accent-color: var(--rost); }
html[data-theme="dark"] { color-scheme: dark; }

/* Der Header ist 78 px hoch (68 px unter 560 px) und sticky – ohne scroll-margin
   verdeckt er nach jedem Ankersprung die Zielüberschrift. Das Token räumt zugleich die
   zwei Hartkodierungen in den Media-Queries des Mobilmenüs auf. */
:root { --header-h: 78px; }
:where([id]) { scroll-margin-top: calc(var(--header-h) + 18px); }

html { scroll-behavior: smooth; }

/* Tastaturbedienung: Bisher hatte NUR das Formularfeld einen eigenen Fokus-Stil, alles
   andere hing am Browser-Default – auf der cremefarbenen Fläche kaum zu sehen. */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Die Hover-Effekte hoben Elemente per transform an. Auf Touch bleibt dieser Zustand
   nach dem Antippen kleben, weil es dort kein „Mauszeiger weg" gibt. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}
.btn:active { transform: translateY(0); }
a, button, summary, .btn { -webkit-tap-highlight-color: rgba(194, 86, 46, .18); }

/* Pflicht, bevor irgendwo Bewegung dazukommt – und schon jetzt nötig, weil
   scroll-behavior: smooth unbedingt aktiv ist. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

/* height:auto ist Pflicht, sobald die Bilder width/height-Attribute tragen – sonst wirkt das
   Attribut als feste CSS-Hoehe und setzt jedes aspect-ratio ausser Kraft. */
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }

a { color: var(--rost-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Durchschuss gestaffelt statt einem Wert für alle drei Ebenen: 1,12 ist bei einer 56-px-H1
   richtig und bei einer 18,9-px-H3 zu eng. */
h1, h2, h3 { font-family: var(--font-display); margin: 0 0 .5em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -.02em; font-weight: 900; line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -.01em; line-height: 1.15; }
h3 { font-size: 1.18rem; line-height: 1.3; }
/* text-wrap: pretty verhindert Schusterjungen am Absatzende. Reine progressive Verbesserung –
   wo der Browser es nicht kennt, bleibt der Umbruch wie bisher. */
p, li, .lead, .section-sub, figcaption { text-wrap: pretty; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- Icons (inline SVG, keine Icon-Bibliothek) ---------- */
.icon { width: 24px; height: 24px; flex: none; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.text-center .lead { margin: 0 auto 28px; }
.text-center .section-sub { margin-left: auto; margin-right: auto; }
.text-center .hero-cta { justify-content: center; }
.container-narrow { max-width: 780px; }
.container-tight { max-width: 680px; }
.stack-l { margin-top: 28px; }
/* Hält Wörter mit Bindestrich zusammen. „Au-pair" bricht in schmalen Spalten sonst zu
   „Au-" / „pair" um – der Bindestrich ist für den Browser eine Umbruchstelle. Nur um
   das Wort legen, nicht um ganze Sätze, sonst entsteht horizontaler Überlauf. */
.nowrap { white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .8em 1.6em; border-radius: 999px; font-weight: 700; font-size: 1rem;
  font-family: var(--font-display);
  border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none; white-space: nowrap;
}
/* transform steht in der @media (hover:hover)-Klammer weiter oben – auf Touch klebte der Lift fest */
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--rost); color: var(--on-rost); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--rost-dark); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--braun); border-color: var(--braun); }
.btn-outline:hover { background: var(--braun); color: var(--creme); }
.btn-sm { padding: .55em 1.1em; font-size: .92rem; }
/* Kurzform des Button-Labels, die erst im schmalen Header sichtbar wird */
.btn-text-short { display: none; }

/* Sprungmarke zum Inhalt – erstes Element im body, sichtbar nur bei Tastaturfokus. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--surface); color: var(--rost-dark);
  font-family: var(--font-display); font-weight: 700;
  padding: 12px 18px; border: 2px solid var(--rost); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 241, 230, .9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: 78px; }
.brand { display: inline-flex; align-items: center; }
/* object-fit haelt das Logo proportional, falls der Header es doch einmal schrumpfen muss */
.brand-logo { height: 50px; width: auto; object-fit: contain; }
.brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark { display: inline-block; }
.main-nav { display: flex; gap: 20px; margin-left: auto; }
.main-nav a { color: var(--braun-soft); font-weight: 600; font-family: var(--font-display); white-space: nowrap; }
.main-nav a:hover { color: var(--rost); text-decoration: none; }
/* Fuenf gleich aussehende Links, und nichts zeigte, auf welcher Seite man ist – betrifft
   /ueber-uns/ und /ratgeber/, die einzigen echten Seiten im Menue (der Rest sind Anker). */
.main-nav a[aria-current="page"] { color: var(--rost-dark); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
html[data-theme="dark"] .main-nav a[aria-current="page"] { color: var(--rost); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.main-nav { margin-right: 4px; }

/* Zeigt nur die jeweils andere Sprache als Pille – eindeutiger und schmaler als „DE | ES" */
.lang-switch { display: inline-flex; align-items: center; color: var(--muted); font-weight: 700; font-size: .9rem; }
.lang-switch a {
  color: var(--muted); font: inherit; text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px;
  transition: color .2s ease, border-color .2s ease;
}
.lang-switch a:hover { color: var(--rost); border-color: var(--rost); text-decoration: none; }

.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  width: 40px; height: 40px; padding: 0; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; color: var(--braun-soft);
  transition: border-color .2s ease, background .2s ease;
}
.theme-toggle:hover { border-color: var(--rost); background: var(--tan-soft); }
.theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-icon-dark { display: inline-block; }

/* min-width/height 44px: empfohlene Mindestgroesse einer Tippflaeche */
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--braun); border-radius: 2px; transition: .2s; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1000px 500px at 80% -10%, var(--tan-soft), transparent 60%),
    linear-gradient(180deg, var(--creme-2), var(--band));
  /* Unten knapper als oben: dadurch steht die USP-Kartenreihe bei 1440x900 rund 40 px
     angeschnitten im Bild – der billigste Scroll-Hinweis, den es gibt, ohne Skript und Icon. */
  padding: clamp(48px, 7vw, 92px) 0 clamp(32px, 4vw, 56px);
}
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 800; font-family: var(--font-display); color: var(--rost-dark); margin: 0 0 14px; }
.lead { font-size: 1.22rem; color: var(--braun-soft); max-width: 42ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 34px; }
.hero-stats { list-style: none; display: flex; gap: 28px; padding: 0; margin: 0; flex-wrap: wrap; }
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 1.55rem; font-family: var(--font-display); font-weight: 900; color: var(--rost); }
.hero-stats span { font-size: .9rem; color: var(--muted); }

/* Hero media = Illustration im selben Bauteil wie die Split-Sektionen (.photo, siehe
   unten). Die Regeln .hero-photo und .hero-quote sind entfallen – der Hero trug früher
   ein eigenes Overlay, das dasselbe tat wie die Bildlegende, nur mit anderen Werten.
   ⚠️ Die Kennzahlenreihe .hero-stats darüber ist der Maßstab für die Auszeichnung in der
   Bildlegende: Solange die Legende auf Zeilengröße bleibt, gibt es auf der Seite genau
   zwei Displaygrade – diese Reihe (24,8 px) und den Preis (bis 70,4 px). Wer der Legende
   wieder einen eigenen Zahlengrad gibt, stellt die dritte Größe zurück, an der die
   Hierarchie 2026 zerbrochen war. */
.hero-media { position: relative; }

/* ---------- Sections ---------- */
/* Drei Laengen statt einer: Grundtakt, Traeger, Anschluss. Die Obergrenze steigt auf 128 px,
   damit die Seite oberhalb von 1200 px nicht einfriert (siehe --maxw-Stufe unten).
   ⚠️ .section und .section-alt liegen im WECHSEL – eine umklassifizierte Sektion verschiebt
   den Takt. Genau das musste auf /es/ am 04.09.2026 zurueckgestellt werden. */
.section { padding: clamp(48px, 5vw, 76px) 0; }
/* Traeger der Seite: die emotionale Passage, der Preis, der Kontakt. */
.section-lg { padding: clamp(72px, 9vw, 128px) 0; }
/* Anschluss-Sektion, die inhaltlich zur vorherigen gehoert (#leistungen zum Preis). */
.section-sm { padding: clamp(32px, 4vw, 52px) 0; }
.section-alt {
  background-color: var(--band); background-image: var(--grain);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}

/* Die Bühne. Braucht keine Ränder – die Fläche trennt selbst.
   ⚠️ Die Farbregeln greifen bewusst nur auf DIREKTE Kinder des Containers, also auf den
   Sektionskopf. Alles andere in dieser Sektion (Preiskarte, Abkürzungsband) sitzt in
   weißen Karten und muss seine eigenen Farben behalten – ein pauschales
   `.section-stage .eyebrow` hätte die Eyebrow IN der weißen Preiskarte mitgefärbt. */
.section-stage { background-color: var(--stage-bg); background-image: var(--grain); color: var(--on-stage); border-top: 0; border-bottom: 0; }
.section-stage > .container > .section-title { color: var(--on-stage); }
/* ⚠️ Hier stand var(--tan) – und seit die Bühne im Light Mode SELBST --tan ist, war die
   Unterzeile dort unsichtbar (1,00 : 1, exakt derselbe Hexwert). Dieselbe Falle wie einst
   bei --tan-soft auf --band. Auf der Bühne gehören ausschliesslich die --on-stage-Tokens
   zum Einsatz, nie eine Flächenfarbe der Palette. */
.section-stage > .container > .section-sub { color: var(--on-stage); }
.section-stage > .container > .eyebrow { color: var(--stage-accent); }
.section-stage > .container > h1,
.section-stage > .container > h2 { color: var(--on-stage-strong); }
.section-stage > .container > p { color: var(--on-stage); }
.section-stage > .container > .lead { color: var(--on-stage-strong); }
/* Links auf dem Feld: --rost-dark erreicht dort nur 2,23–2,61 : 1 und waere unlesbar.
   Der Feld-Akzent kommt auf 5,26–6,15 : 1. Betrifft die tel:- und WhatsApp-Links auf
   /danke/ und /es/gracias/. */
/* :not(.btn) ist Pflicht, nicht Kosmetik: Auf /danke/ liegen beide Buttons in einem
   <p class="stack-l">, sind also direkte Kinder von .container > p. Ohne den Ausschluss
   bekamen sie Unterstreichung UND die Akzentfarbe – auf dem Rost-Button stand damit
   #e58a5f auf #c2562e, praktisch unlesbar. */
.section-stage > .container > p a:not(.btn) { color: var(--stage-accent); text-decoration: underline; text-underline-offset: 2px; }
/* .btn-outline traegt Rand und Schrift in --braun – auf dem braunen Feld unsichtbar.
   Das ist der zweite Button auf beiden Bestaetigungsseiten. */
/* Die Rechte-Tabelle ist der Hoehepunkt der spanischen Startseite und steht dort auf der
   Buehne. Ohne diese Regeln waeren ihre Zellen unlesbar: .data-table td traegt --braun-soft,
   im Light Mode also ein dunkles Braun auf dunklem Grund. */
.section-stage .data-table th { background: var(--stage-rule); color: var(--on-stage-strong); }
.section-stage .data-table td { color: var(--on-stage); }
.section-stage .data-table th,
.section-stage .data-table td { border-bottom-color: var(--stage-rule-strong); }
.section-stage .form-hint,
.section-stage > .container > .stack-l { color: var(--on-stage); }
.section-stage .btn-outline { color: var(--on-stage-strong); border-color: var(--on-stage-strong); }
.section-stage .btn-outline:hover { background: var(--on-stage-strong); color: var(--stage-bg); }
/* Die Aufhellung der Bühne am 05.09.2026 hat den gefüllten Button unter WCAG 1.4.11 gedrückt:
   --rost gegen #62321e sind nur 2,34 : 1, vorher gegen #2e1f15 waren es 3,53. Der Text im Button
   (4,50 : 1) ist davon unberührt – unsichtbar wird die KANTE, also der Umriss, an dem man den
   Button überhaupt als Bedienelement erkennt. Deshalb bekommt er hier eine sichtbare Kante statt
   einer helleren Füllung: Die Markenfarbe bleibt, und .btn führt ohnehin schon
   `border: 2px solid transparent` – es verschiebt sich also kein einziges Pixel.
   --stage-accent ist das Akzent-Token der Bühne und trägt 5,33 : 1 hell, 6,88 : 1 dunkel.
   Bewusst in BEIDEN Themes: Im Dark Mode läge die Füllung mit 4,07 : 1 zwar über der Schwelle,
   aber ein Bauteil, das je nach Theme anders aussieht, ist genau der Fehler, den dieser Umbau
   beseitigt hat. Betrifft real nur /danke/ und /es/gracias/ – auf beiden Startseiten stehen die
   Buttons der Bühne innerhalb weißer Karten. */
.section-stage .btn-primary { border-color: var(--stage-accent); }
/* ---------- Der Lichthof auf der Bühne ----------
   Karten auf der Bühne hatten bis zum 05.09.2026 gar keinen Übergang zur Fläche: Die
   --shadow-Tokens sind im Light Mode braun getönt (rgba(46,31,21,…)) und ergaben über der
   damaligen Bühne (#2e1f15, derselbe Farbwert) wieder exakt die Bühne. Eine Schere schnitt
   Papier aus Karton – DAS war der Eindruck „viel zu großer Kontrast", nicht die Zahl.
   Der Hof ist ein weicher, breit gestreuter Lichtschein plus ein Schatten in SCHWARZ, der
   auf beiden Bühnen trägt.
   ⚠️ MESSWERTE, am gerenderten Bild abgenommen (1400 px, Light Mode, Mitte der Preiskarte;
   nachstellbar über Design-Varianten/theme?t=light). Es kursierten dafür schon drei falsche
   Zahlen – diese hier ist die einzige nachgemessene:
     ohne Hof   weiße Karte auf der Bühne          9,97 : 1   (rechnerisch 10,53 gegen das
                                                                reine Token; die Korn-Ebene
                                                                senkt den Istwert etwas)
     mit Hof    größte einzelne Kante an der Karte 7,97 : 1   (#6d4838 -> #ffffff)
     zum Vergleich: die ALTE Bühne #2e1f15 stand rechnerisch bei 15,87 : 1.
   Die Fläche behält also ihren Wert, nur die Kante wird gefedert.
   ⚠️ Bewusst ein weicher Hof und KEIN harter Ring: Ein Ring wäre eine zweite Kontur um die
   Karte – genau die Formidee, die am selben Tag beim Bildrahmen entfernt wurde.
   ⚠️ Der Hof gehört an die Karten, nicht an .section-stage selbst: Ein Verlauf auf der
   Sektion würde auch hinter Text liegen, der dort direkt auf der Fläche steht
   (Rechte-Tabelle auf /es/, beide Bestätigungsseiten). */
.section-stage .price-card,
.section-stage .card,
.section-stage .shortcut {
  box-shadow: var(--stage-card-shadow);
  background: var(--stage-card-bg);
}
.section-title { text-align: center; }
.section-sub { text-align: center; color: var(--muted); font-size: 1.12rem; max-width: 52ch; margin: 0 auto 46px; }

/* ---------- Grids & Cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .2s ease;
}
.card p { overflow-wrap: break-word; }
/* .card:hover steht in der @media (hover:hover)-Klammer im Base-Block – auf Touch klebte der Lift fest */
.card p { color: var(--muted); margin: 0; }

/* Icon-Kacheln statt Emojis */
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--tan-soft); color: var(--rost);
  margin-bottom: 16px;
}
.feature h3 { color: var(--braun); }

/* ---------- Leistungsliste ----------
   Ersetzt seit dem 04.09.2026 den Kartenteppich in #leistungen: acht Karten mit je einem
   einzeiligen Satz waren eine Liste, kein Grid. Spart rund 200 px Hoehe und nimmt der Seite
   eine der vier gleich klingenden Passagen (#usp, #kultur, #leistungen, #ablauf trugen
   zusammen 34 % der Seitenhoehe und dasselbe Schema). */
.service-list {
  list-style: none; padding: 0; margin: 0 auto;
  max-width: 940px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 48px;
}
.service-list li { display: flex; gap: 16px; align-items: flex-start; }
.service-mark {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: var(--tan-soft); color: var(--rost);
  display: inline-flex; align-items: center; justify-content: center;
}
.service-list h3 { font-size: 1.05rem; margin: 0 0 .2em; color: var(--rost-dark); }
.service-list p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 760px) { .service-list { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Kultur / Familie ---------- */
.section-culture {
  background:
    radial-gradient(900px 420px at 50% -20%, var(--tan-soft), transparent 65%),
    linear-gradient(180deg, var(--creme-2), var(--creme));
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.culture-head { max-width: 46rem; margin: 0 auto 46px; text-align: center; }
.culture-head h2 { margin-bottom: .5em; }
.culture-lead { color: var(--braun-soft); font-size: 1.12rem; margin: 0; }
.culture-points .feature { text-align: center; }
.culture-points .feature-icon { margin-left: auto; margin-right: auto; }

/* ---------- Split sections ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.split-reverse .split-text { order: 2; }
.split-reverse .split-media { order: 1; }
.check-list { list-style: none; padding: 0; margin: 24px 0 32px; }
.check-list li { position: relative; padding-left: 34px; margin-bottom: 14px; color: var(--braun-soft); }
/* Zwei Ebenen: ::before ist der Rost-Kreis, ::after der gezeichnete Haken.
   Beides in einem Element geht NICHT – mask-image maskiert das ganze Pseudoelement,
   der Kreis wuerde also mit weggeschnitten.
   Warum ueberhaupt gezeichnet: U+2713 hat in Nunito, Mulish und im System-Fallback exakt
   dieselbe Breite (nachgemessen 44,95 px bei 60 px Grad) – das Zeichen kommt aus einer
   Systemschrift und sieht auf jedem Betriebssystem anders aus. Dieselbe Fehlerklasse, die
   die Konventionen fuer Emoji verbieten, beim haeufigsten Bildzeichen der Seite. */
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--rost);
}
.check-list li::after {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px;
  background: var(--on-rost);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E");
  -webkit-mask-size: 15px 15px; mask-size: 15px 15px;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Ohne mask-image bliebe ein check-list-Kreis mit einem vollflaechigen Quadrat darauf –
   dort also zurueck zum Schriftzeichen. */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .check-list li::after { display: none; }
  .check-list li::before {
    content: "\2713"; color: var(--on-rost);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
  }
}
.split-media { display: flex; justify-content: center; }

/* ---------- Bild und Bildlegende ----------
   Ersetzt seit dem 05.09.2026 das Passepartout (.photo-frame). Der Inhaber hatte den
   alten Rahmen als "nicht konsistent zum Rest der Seite" beanstandet – nachgemessen zu
   Recht, und zwar aus drei Gründen:

   (1) Das Signaturelement des Passepartouts war ein harter 16-px-Versatzschatten in
       --tan-soft. Im Light Mode ist --tan-soft #ece0cb – exakt der Hexwert von --band.
       An den drei .section-alt-Stellen stand die Tiefenebene damit bei 1,00 : 1, war dort
       also nicht schwach, sondern GAR NICHT VORHANDEN; im Dark Mode hob ein Override sie
       auf 1,50 : 1 und machte sie deutlich sichtbar. Ein Bauteil, das je nach Sektion und
       Theme anders aussieht, kann nicht stimmig wirken.
   (2) Innenlinie (::after, inset 9px) und harter Schlagschatten kamen auf keiner der
       15 Seiten ein zweites Mal vor. Die weiße Fläche darunter leistete nichts: --surface
       auf --bg = 1,12 : 1, auf --band = 1,31 : 1, im Dark Mode 1,10 : 1. Also Schmuck um
       ein Blatt, das man ohnehin nicht sieht.
   (3) Es gab ZWEI Beschriftungsarten – siehe .photo-cap unten.

   Jetzt trägt das Bild exakt das Kartenrezept der Seite (--radius, 1 px --border, ein
   --shadow-Token) und sonst nichts. Dadurch entfallen ersatzlos: beide Modifier
   (.photo-frame-hero, .photo-frame-mirror), die drei Dark-Mode-Overrides und der ganze
   520-px-Block. Das Bauteil hat null Sonderregeln je Theme, weil es nur noch Tokens
   benutzt, die selbst mit dem Theme kippen. */
.photo { margin: 0 auto; width: 100%; max-width: 460px; }
/* Kein aspect-ratio und kein object-fit mehr: width/height am <img> plus die globale
   Regel img{height:auto} liefern das Verhältnis aus der Datei. Damit ist der Beschnitt,
   der dem Hero einmal 10,16 % der Bildhöhe genommen hat, konstruktiv unmöglich – es gibt
   keinen Wert mehr, der falsch sein könnte. --shadow-md ist der Wert, den .photo-frame
   schon trug; die Aufhängung ändert sich also nicht, nur der Rahmen fällt weg. */
.photo-well {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  /* Nur der Ladehintergrund, den das Bild sofort verdeckt – KEIN Gestaltungselement.
     Dass --tan-soft im Light Mode exakt --band ist, ist hier deshalb Absicht und nicht die
     Falle von oben: Auf den drei .section-alt-Stellen lädt das Bild dadurch ohne Kasten-
     blitzer. Die Falle betraf einen SCHATTEN, der sichtbar sein sollte und es nicht war. */
  background: var(--tan-soft);
}
.photo-well img { width: 100%; }

/* ---------- Bildlegende ----------
   EINE Grammatik für alle sechs Stellen. Vorher waren es zwei Bauteile mit demselben
   Nachnamen: das Hero-"Zitat" (Nunito 700 KURSIV, 1,02 rem, --ink, einspaltig, ohne
   Absender) und die Kennzahl (zweispaltiges max-content-Raster, Rost 900 bei bis zu
   2,3 rem neben --muted 0,9 rem, mal mit Quellzeile, mal ohne). Verschieden waren
   Schriftfamilie, Gewicht, Schnitt, Farbe, Größe, Spaltenzahl und Ausstattung – genau
   das "und und und" aus der Kritik.

   Die Regel, nach der eine siebte Stelle gebaut wird:
     1. Marken-Balken  – immer. Derselbe 72 x 3 px aus dem Logo wie unter .section-title.
     2. Ein Satz       – immer. Mulish, Zeilengröße, --braun-soft, mit Punkt am Ende.
     3. Eine Auszeichnung im Satz – höchstens eine, in GLEICHER Schriftgröße.
     4. Herkunftszeile – nur, wo die Aussage nicht von uns stammt.

   ⚠️ Warum die Zahl ihren Displaygrad verliert: Das Muster "Rost-Zahl in Nunito 900 plus
   kleines Label" stand auf der Startseite dreimal in drei Größen – .hero-stats strong
   24,8 px, .stat-num bis 36,8 px, .price-tag bis 70,4 px. Die MARKTZAHL war damit das
   1,26- bis 1,48-Fache des eigenen Kernversprechens "500 €", und beide standen im selben
   Blickfeld. Das ist keine Hierarchie, das ist eine Rangverletzung. Jetzt gibt es nur noch
   zwei Displaygrade in zwei klar getrennten Rollen.
   ⚠️ UND DESHALB MUSS DER SCHLÜSSEL --rost-dark TRAGEN, NICHT --rost: Die alte Zahl bestand
   die Kontrastprüfung nur, weil 36,8 px bei Gewicht 900 als "große Schrift" gegen 3 : 1
   gemessen werden. --rost #c2562e erreicht auf --band nur 3,45 : 1, auf --bg 4,00 : 1 und
   auf --creme-2 4,32 : 1 – auf Zeilengröße wäre das ein lautloser AA-Verstoß.
   --rost-dark liefert 4,66 / 5,42 / 5,84 : 1 und im Dark Mode 5,21 bis 6,26 : 1. */
.photo-cap { margin: clamp(16px, 2vw, 22px) 0 0; }
.photo-cap::before {
  content: ""; display: block;
  width: 72px; height: 3px; border-radius: 2px;
  background: var(--rost);
  margin-bottom: 14px;
}
.photo-cap p {
  margin: 0;
  font-size: .95rem; line-height: 1.55;
  color: var(--braun-soft);
  /* Bewusst OHNE max-width: Die Legende nimmt die Breite des Bildes und misst sich damit
     selbst. Jeder ch-Wert wäre eine Zahl, die für die längeren spanischen Sätze anders
     ausfallen müsste – genau die sprachabhängige Pflegezahl, die dieses Bauteil vermeidet. */
}
/* Die Auszeichnung. <b> statt <strong>: typografische Hervorhebung, keine Betonung –
   ein Screenreader soll "2.000+ deutsche Familien" als einen Satz lesen. */
.photo-cap b {
  font-family: var(--font-display); font-weight: 900;
  color: var(--rost-dark);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Zahlen zusätzlich mit .nowrap auszeichnen – "18–27" darf am Halbgeviertstrich nicht
   umbrechen. NICHT pauschal auf b: im Hero ist die Auszeichnung eine ganze Wortgruppe. */
/* Herkunft. Ohne opacity – .85 drückte --muted schon einmal unter AA. */
.photo-src { display: block; margin-top: 7px; font-size: .8rem; color: var(--muted); }

/* KEIN Hover-Effekt am Bild (Nutzerentscheidung 04.09.2026): "Ein Bild ist kein Link."
   Auch keine transition – sonst bliebe eine Übergangsdauer für eine Änderung, die es
   nicht gibt. Das Anheben bleibt .btn und .card vorbehalten. Nicht wieder einbauen.
   Ebenso bewusst KEIN Dark-Mode-Block: --border, --shadow-md, --rost, --rost-dark,
   --braun-soft und --muted kippen alle selbst. */

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-sm); position: relative;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--rost); color: var(--on-rost);
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; margin-bottom: 16px;
}
.step h3 { color: var(--braun); }
.step p { color: var(--muted); margin: 0; }

/* ---------- Angebot / Preis ---------- */
.price-wrap { display: flex; justify-content: center; }
.price-card {
  background: var(--surface); border: 1px solid var(--border); border-top: 6px solid var(--rost);
  border-radius: var(--radius); padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-lg); max-width: 560px; width: 100%; text-align: center;
}
/* Preiskarte als Beistellelement einer Split-Sektion (schon-gefunden.html) */
.split-media .price-card { max-width: 340px; }
.price-card .eyebrow { margin-bottom: 6px; }
.price-tag {
  display: flex; align-items: baseline; justify-content: center; gap: .16em; margin: 4px 0;
  /* Die Groesse steht HIER, damit die em-Werte der Kinder sich darauf beziehen. */
  font-size: clamp(3.2rem, 9vw, 4.4rem);
}
.price-tag .amount { font-family: var(--font-display); font-weight: 900; font-size: 1em; color: var(--rost); line-height: 1; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.03em; }
.price-tag .currency { font-family: var(--font-display); font-weight: 900; font-size: .55em; color: var(--rost); }
.price-note { color: var(--muted); font-size: .95rem; margin: 0 0 26px; }
.price-card .check-list { text-align: left; margin: 0 0 24px; }
.price-followup { color: var(--muted); font-size: .88rem; margin: 16px 0 0; }
/* Die drei Zusagen unter dem Preis. Wortlaut streng an AGB § 2 Abs. 3 (einheitliche
   Gesamtleistung), § 4 Abs. 4 (offener Leistungszeitraum) und § 8 Abs. 2 (erneute Begleitung).
   Bewusst OHNE Widerrufsrecht: das wird nicht beworben (Entscheidung 23.08.2026). */
.price-assurance { list-style: none; padding: 20px 0 0; margin: 20px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; }
/* text-align wie bei .price-card .check-list: die Karte zentriert, die Zusagen lesen sich
   linksbuendig – zentrierte Mehrzeiler loesen sich sonst optisch von ihrem Punkt. */
.price-assurance li { position: relative; padding-left: 34px; text-align: left; color: var(--braun-soft); font-size: .9rem; line-height: 1.45; }
/* padding-left 34px und die Punktmitte bei 11,5px: beides uebernimmt die Achse von
   .check-list darueber, damit Textkante und Marker der beiden Listen fluchten. */
.price-assurance li::before {
  content: ""; position: absolute; left: 8px; top: .52em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--rost);
}
html[data-theme="dark"] .price-assurance li { color: var(--muted); }

/* Abkuerzungs-Band unter der Preiskarte -> schon-gefunden.html. Bewusst breiter als die Karte:
   so liest es sich als eigenes Angebot und nicht als zweite Preiskarte. */
.shortcut {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  margin: 34px auto 0;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--rost);
  border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow-sm);
}
.shortcut-text { flex: 1 1 260px; }
.shortcut h3 { margin: 0 0 4px; font-size: 1.08rem; color: var(--braun); }
.shortcut p { margin: 0; color: var(--muted); font-size: .95rem; }
.shortcut .btn { flex: none; }
html[data-theme="dark"] .shortcut h3 { color: var(--ink); }

/* Inline-Links in Inhaltstexten (z. B. Partner-Plattformen) – theme-sicher */
.check-list a, .steps a { color: var(--rost); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.check-list a:hover, .steps a:hover { color: var(--rost-dark); }
html[data-theme="dark"] .check-list a:hover, html[data-theme="dark"] .steps a:hover { color: var(--ink); }

/* ---------- Contact ---------- */
.section-contact { background: linear-gradient(180deg, var(--creme), var(--tan-soft)); }
/* Das Formular ist hoeher als die Textspalte -> zentriert statt oben buendig, sonst steht links
   unter den Kontakt-Chips ein Loch. Die breitere zweite Spalte haelt die Feld-Beschriftungen
   einzeilig. */
.contact-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.contact-methods { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.contact-chip {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .6em 1.15em; color: var(--braun); font-weight: 700; font-family: var(--font-display); box-shadow: var(--shadow-sm);
}
.contact-chip .icon { color: var(--rost); }
.contact-chip:hover { text-decoration: none; border-color: var(--rost); }
/* Kurze Zusagen unter den Chips: fuellen die Textspalte und raeumen die letzten Einwaende
   direkt neben dem Formular aus. Haekchen wie .check-list, nur kleiner. */
.contact-assurance { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.contact-assurance li { position: relative; padding-left: 30px; color: var(--braun-soft); font-size: .95rem; }
/* Zwei Ebenen: ::before ist der Rost-Kreis, ::after der gezeichnete Haken.
   Beides in einem Element geht NICHT – mask-image maskiert das ganze Pseudoelement,
   der Kreis wuerde also mit weggeschnitten.
   Warum ueberhaupt gezeichnet: U+2713 hat in Nunito, Mulish und im System-Fallback exakt
   dieselbe Breite (nachgemessen 44,95 px bei 60 px Grad) – das Zeichen kommt aus einer
   Systemschrift und sieht auf jedem Betriebssystem anders aus. Dieselbe Fehlerklasse, die
   die Konventionen fuer Emoji verbieten, beim haeufigsten Bildzeichen der Seite. */
.contact-assurance li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--rost);
}
.contact-assurance li::after {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px;
  background: var(--on-rost);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E");
  -webkit-mask-size: 13px 13px; mask-size: 13px 13px;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Ohne mask-image bliebe ein contact-assurance-Kreis mit einem vollflaechigen Quadrat darauf –
   dort also zurueck zum Schriftzeichen. */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .contact-assurance li::after { display: none; }
  .contact-assurance li::before {
    content: "\2713"; color: var(--on-rost);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700;
  }
}

.contact-form {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-md);
}
.contact-form label {
  display: flex; flex-direction: column; margin-bottom: 16px;
  font-weight: 700; color: var(--braun); font-family: var(--font-display);
}
.contact-form label > span { margin-bottom: 6px; line-height: 1.25; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: .7em .9em; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font: inherit; font-weight: 400; color: var(--ink); background: var(--creme-2);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 2px solid var(--rost); outline-offset: 1px; border-color: var(--rost);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
/* Bricht eine Beschriftung auf zwei Zeilen um, muss das Feld daneben trotzdem auf gleicher
   Hoehe sitzen -> Feld an den unteren Rand der Zelle schieben. */
.form-row > label { margin-bottom: 16px; }
.form-row > label > input, .form-row > label > select { margin-top: auto; }
.form-hint { color: var(--muted); font-size: .85rem; margin: 12px 0 0; }
/* "(optional)" in der Beschriftung: die Labels sind Nunito 700, der Zusatz soll das nicht sein. */
.contact-form .label-opt { font-family: var(--font); font-weight: 400; color: var(--muted); }
/* Beispieltext im Nachrichtenfeld – kursiv, damit er nicht wie eine bereits gemachte Eingabe wirkt. */
.contact-form textarea::placeholder { color: var(--muted); font-style: italic; opacity: 1; }
/* Fehlerzustand erst NACH der Eingabe (:user-invalid, nicht :invalid – sonst ist jedes Feld
   rot, bevor jemand getippt hat). Neben der Farbe aendert sich die Rahmenstaerke: Farbe allein
   waere ein Verstoss gegen WCAG 1.4.1. */
.contact-form input:user-invalid, .contact-form textarea:user-invalid {
  border-color: var(--rost-dark); border-width: 2px; padding: calc(.7em - 1px) calc(.9em - 1px);
}
html[data-theme="dark"] .contact-form input:user-invalid,
html[data-theme="dark"] .contact-form textarea:user-invalid { border-color: var(--rost); }
/* Sendezustand: der Button bleibt klickbar (kein disabled, kein preventDefault), zeigt aber,
   dass etwas laeuft. Zuruecksetzen uebernimmt script.js beim pageshow. */
.contact-form button[aria-busy="true"] { opacity: .72; cursor: progress; }
/* Honeypot des Kontaktformulars: fuer Menschen unsichtbar, Bots fuellen ihn aus. Bewusst
   nicht display:none – das erkennen viele Bots und lassen das Feld dann leer. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--braun); color: var(--tan-soft); padding: 48px 0 26px; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid rgba(217, 196, 163, .2); }
.footer-logo { height: 46px; width: auto; margin-bottom: 12px; }
.footer-brand p { color: var(--tan); max-width: 30ch; margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.footer-nav a { color: var(--tan-soft); font-weight: 600; font-family: var(--font-display); }
.footer-nav a:hover { color: #fff; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; color: var(--tan); font-size: .88rem; }
/* Kompakter Footer der Unterseiten (Links stehen dort direkt in .footer-bottom) */
.footer-bottom a { color: var(--tan-soft); }
.footer-bottom a:hover { color: #fff; text-decoration: none; }

/* ---------- Kopfband der Textseiten ----------
   13 der 15 Seiten führen kein eigenes Bild und begannen mit einer nackten 780-px-Textspalte
   auf durchgehend Creme – nach der bebilderten Startseite ein Absturz. Das Kopfband gibt jedem
   Text einen gestalteten Anfang, ohne dass ein einziges Bild produziert werden muss:
   null Bytes, null Requests. Es endet auf --band, damit die Kante zum Fließtext sitzt. */
.page-head {
  background:
    radial-gradient(680px 280px at 14% -40%, var(--tan-soft), transparent 70%),
    linear-gradient(180deg, var(--creme-2), var(--band));
  border-bottom: 1px solid var(--border);
  padding: clamp(22px, 3vw, 40px) 0 clamp(28px, 4vw, 52px);
}
/* 824 = 780 Textbreite + 2 × 22 Innenabstand. Bei box-sizing: border-box frisst das Padding
   sonst von der Textbreite, und der Bandinhalt stünde 22 px weiter innen als der Fließtext
   darunter – die linke Kante muss aber fluchten (nachgemessen bei 1400 px: beide bei x = 310). */
.page-head-inner { max-width: 824px; margin: 0 auto; padding: 0 22px; }
/* Der Brotkrümel gehört jetzt ins Band; seine eigene Breiten- und Abstandsregel gilt dort nicht.
   (Er war ohnehin auf 820 px gesetzt und hing damit 20 px links über die 780-px-Textkante.) */
.page-head .breadcrumb { max-width: none; margin: 0 0 16px; padding: 0; }
.page-head h1 { margin-bottom: .3em; }
.page-head .article-meta { margin-bottom: .9em; }
.page-head .lead { margin-bottom: 0; max-width: 62ch; }
.page-head .eyebrow { margin-bottom: 10px; }
/* Steht das Band vor einem .article, trägt das Band schon dessen oberen Abstand. */
.page-head + .container > .article,
.page-head + .container > .legal { padding-top: clamp(26px, 3.5vw, 44px); }

/* ---------- Marken-Balken ----------
   Das Logo trägt unter dem Schriftzug einen kurzen Rost-Balken (im Asset gemessen: 528 von
   1295 px Breite, 11 px hoch, leicht gerundete Enden) – das einzige Grafikelement der Marke
   jenseits von Farbe und Schrift, und es kam auf der Website nirgends vor.
   Bewusst als schlichte Regel und NICHT als data-URI-Maske mit gemalter Pinselstruktur:
   Im Logo ist es ein gerader Balken; eine Pinselkante wäre eine Erfindung. */
.section-title::after,
.page-head h1::after {
  content: ""; display: block;
  width: 72px; height: 3px; border-radius: 2px;
  background: var(--rost);
  margin-top: .55em;
}
.section-title::after { margin-left: auto; margin-right: auto; }
/* Auf dem dunklen Feld ist --rost zu schwach (3,53 : 1 gegen --braun) – dort der Feld-Akzent. */
.section-stage > .container > .section-title::after { background: var(--stage-accent); }
/* Nicht auf .article h2 / .legal h2: die AGB haben 13 H2, 13 Balken wären billig. */

/* ---------- Legal pages ---------- */
.legal { max-width: 780px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 0; }
.legal h1 { margin-bottom: .6em; }
/* 1,45rem statt 1,3rem plus Haarlinie darüber: aus 11 bzw. 13 Fettzeilen werden sichtbare
   Abschnitte. Der Sprung H1 zu H2 lag auf den Rechtsseiten bei Faktor 2,7 (56 px auf 20,8 px),
   auf der Startseite dagegen bei 1,46. */
.legal h2 {
  font-size: 1.45rem; margin-top: 2em;
  border-top: 1px solid var(--border); padding-top: .8em;
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p, .legal li { color: var(--braun-soft); font-size: 1.05rem; line-height: 1.7; }
.legal h3 { font-size: 1.05rem; margin-top: 1.4em; }
.legal ul { padding-left: 1.2em; }
.legal ul li { margin-bottom: 8px; }
.legal-box { background: var(--creme-2); border: 1px solid var(--border); border-left: 4px solid var(--rost); border-radius: var(--radius-sm); padding: 18px 24px; margin: 18px 0; }
.legal-box h3 { margin-top: 1.1em; }
.legal-box h3:first-child { margin-top: 0; }
.legal-meta { color: var(--muted); font-size: .9rem; margin-top: 2.4em; }

/* ---------- Ratgeber / Content-Seiten ---------- */
.breadcrumb { max-width: 820px; margin: 0 auto; padding: 20px 0 0; font-size: .9rem; color: var(--muted); }
.breadcrumb a { color: var(--rost-dark); font-weight: 600; }
html[data-theme="dark"] .breadcrumb a { color: var(--rost); }

.article { max-width: 780px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) 0 clamp(40px, 6vw, 72px); }
.article > .eyebrow { margin-bottom: 10px; }
/* Die globale h1-Regel bleibt unangetastet – daran haengen beide Hero-Ueberschriften und das
   zweizeilige H1 von /schon-gefunden/. Auf Textseiten ist sie zu gross fuer ihr H2:
   56 px ueber 24 px ist Faktor 2,33, auf der Startseite sind es 1,46. */
/* .page-head h1 gehört zwingend dazu: Seit dem Kopfband-Umbau liegt die Überschrift der
   Textseiten dort und nicht mehr in .article – ohne diesen Selektor griffe wieder die globale
   Hero-Regel mit 56 px, und der Sprung zum 24-px-H2 wäre erneut Faktor 2,33. */
.article h1, .legal h1, .page-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.06; }
.article h1 { margin-bottom: .35em; }
.article-meta { color: var(--muted); font-size: .92rem; margin: 0 0 1.8em; }
.article .lead { font-size: 1.2rem; color: var(--braun-soft); max-width: none; margin: 0 0 1.5em; }
.article h2 { font-size: 1.5rem; margin-top: 1.8em; color: var(--braun); }
.article h3 { font-size: 1.14rem; margin-top: 1.5em; color: var(--rost-dark); }
.article p, .article li { color: var(--braun-soft); font-size: 1.075rem; line-height: 1.7; }
.article ul, .article ol { padding-left: 1.2em; margin: 1em 0; }
/* Silbentrennung nur, wo enge Spalte und lange Fachwoerter zusammenkommen
   ("Aufenthaltserlaubnis"). Nie in Ueberschriften und nie global: in title, meta und JSON-LD
   bleibt der ASCII-Bindestrich, sonst leidet die Suche nach "au-pair". */
.article p, .article li, .legal p, .legal li, .data-table td, .data-table th { hyphens: auto; }
.article li { margin-bottom: 8px; }
.article p a, .article li a { color: var(--rost-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.article p a:hover, .article li a:hover { color: var(--rost); }
html[data-theme="dark"] .article h2 { color: var(--ink); }
html[data-theme="dark"] .article h3 { color: var(--rost); }
html[data-theme="dark"] .article p a, html[data-theme="dark"] .article li a { color: var(--rost); }

.table-scroll { overflow-x: auto; margin: 1.2em 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.data-table th, .data-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.data-table th { background: var(--tan-soft); color: var(--braun); font-family: var(--font-display); }
.data-table td { color: var(--braun-soft); }
.data-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .data-table th { color: var(--ink); }

.faq { margin: 1.6em 0; }
.section-title + .faq { margin-top: 32px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 20px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; color: var(--braun); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--rost); font-weight: 900; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq p { color: var(--braun-soft); margin: 14px 0; }
html[data-theme="dark"] .faq summary { color: var(--ink); }

/* Offene FAQ der Startseiten. Bewusst kein Aufklapper wie .faq darueber: die Antworten stehen
   direkt vor dem Kontaktformular und sollen gelesen werden, nicht weggeklickt. Aufklapper bleiben,
   wo die Leserin EINE bestimmte Antwort sucht (Ratgeber, schon-gefunden). */
.faq-open { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; max-width: 880px; margin: 0 auto; }
.faq-open .qa h3 { color: var(--braun); margin: 0 0 .35em; }
.faq-open .qa p { color: var(--braun-soft); margin: 0; }
.faq-open .qa a { color: var(--rost-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="dark"] .faq-open .qa h3 { color: var(--ink); }
html[data-theme="dark"] .faq-open .qa a { color: var(--rost); }

/* Autorin des Beitrags – Erfahrungsnachweis fuer Leser und Suchmaschinen */
.author-box { background: var(--creme-2); border: 1px solid var(--border); border-left: 4px solid var(--rost); border-radius: var(--radius-sm); padding: 18px 22px; margin: 2.2em 0 0; }
.author-box .author-name { font-family: var(--font-display); font-weight: 800; color: var(--braun); margin: 0 0 4px; }
.author-box p { color: var(--braun-soft); margin: 0; font-size: .95rem; }
html[data-theme="dark"] .author-box .author-name { color: var(--ink); }

.cta-box { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--rost); border-radius: var(--radius); padding: 30px; margin: 2.2em auto 0; text-align: center; box-shadow: var(--shadow-sm); max-width: 780px; }
.cta-box h2 { margin-top: 0; font-size: 1.4rem; color: var(--braun); }
.cta-box p { color: var(--muted); margin: 0 auto 20px; max-width: 46ch; }
html[data-theme="dark"] .cta-box h2 { color: var(--ink); }

/* Info-Box (Markensprache wie in den Aupairando-Guides) */
.article .infobox { background: var(--creme-2); border: 1px solid var(--border); border-left: 4px solid var(--rost); border-radius: var(--radius-sm); padding: 14px 18px; margin: 1.5em 0; }
.article .infobox .ib-h { display: block; font-family: var(--font-display); font-weight: 800; color: var(--rost-dark); margin-bottom: 4px; }
.article .infobox p { margin: 0; color: var(--braun-soft); }
html[data-theme="dark"] .article .infobox .ib-h { color: var(--rost); }

/* Portrait auf der Ueber-uns-Seite. Hier steht bewusst ein echtes Foto und keine Illustration:
   die Bildentscheidung vom 04.08.2026 betrifft erfundene Personen, nicht reale Gruenderinnen. */
.portrait { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin: 1.8em 0 2.4em; }
.portrait picture { flex: none; }
.portrait img { width: 220px; height: 275px; border-radius: var(--radius); display: block; flex: none; }
.portrait img { object-fit: cover; box-shadow: var(--shadow-sm); }
.portrait figcaption { flex: 1 1 240px; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.portrait .portrait-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--braun); margin-bottom: 4px; }
html[data-theme="dark"] .portrait .portrait-name { color: var(--ink); }
/* Absenderzeile, solange kein Portrait vorliegt: eine zurueckhaltende Signatur statt eines
   gestrichelten Bildkastens – ein Platzhalter wirkt unfertig, ein Textblock nicht.
   Faellt weg, sobald das Foto da ist (siehe Kommentar in ueber-uns/index.html). */
.byline-solo {
  margin: 0 0 2.2em; padding: 2px 0 2px 18px;
  border-left: 3px solid var(--rost);
  color: var(--muted); font-size: .95rem; line-height: 1.5;
  max-width: 68ch; /* im breiten Container (ES-USP) sonst ~150 Zeichen je Zeile */
}
/* Die margin-Kurzschreibweise oben setzt margin-top auf 0 und schlaegt damit .stack-l –
   deshalb die Kombination ausdruecklich: unter den vier USP-Karten braucht der Block Luft. */
.byline-solo.stack-l { margin-top: 34px; }
.byline-solo .byline-name {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 1.05rem; color: var(--braun); margin-bottom: 3px;
}
html[data-theme="dark"] .byline-solo .byline-name { color: var(--ink); }

/* Index-Seiten der Ratgeber: Polster wie bei .article, sonst steht der CTA-Kasten auf dem Footer */
.ratgeber-index { padding: clamp(24px, 4vw, 40px) 0 clamp(40px, 6vw, 72px); }
.ratgeber-index > .ratgeber-list { margin-top: 0; }
.ratgeber-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 10px; }
.ratgeber-card { display: flex; flex-direction: column; text-decoration: none; }
.ratgeber-card:hover { text-decoration: none; }
.ratgeber-card .tag { align-self: flex-start; background: var(--tan-soft); color: var(--rost-dark); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; font-family: var(--font-display); }
.ratgeber-card h2 { font-size: 1.2rem; margin: 0 0 .45em; color: var(--braun); }
.ratgeber-card p { flex: 1; }
.ratgeber-card .read-more { margin-top: 16px; font-weight: 800; color: var(--rost); font-family: var(--font-display); }
.ratgeber-card:hover .read-more { text-decoration: underline; }
html[data-theme="dark"] .ratgeber-card h2 { color: var(--ink); }

/* Grosse Monitore: mehr Inhalt statt mehr Rand. Nur der Container waechst, die Bruchpunkte
   darunter bleiben unberuehrt. */
@media (min-width: 1600px) {
  :root { --maxw: 1240px; }
  h1 { font-size: clamp(2.1rem, 4.2vw, 4rem); }
}

/* ---------- Responsive ---------- */
/* Navigation einklappen, sobald die Menuepunkte nicht mehr in eine Zeile passen */
@media (max-width: 900px) {
  .main-nav { display: none; }
  /* .main-nav schiebt hier nicht mehr -> Actions selbst rechtsbuendig */
  .header-actions { margin-left: auto; }
  .main-nav.open {
    display: flex; flex-direction: column; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--creme); border-bottom: 1px solid var(--border); padding: 16px 22px; gap: 16px;
  }
  .nav-toggle { display: flex; }
}
/* Die Kennzahlenreihe im Hero braucht rund 510 px am Stueck (spanische Labels sind laenger als die
   deutschen). Bei zweispaltigem Hero unterschreitet die Textspalte das darunter -> lieber stapeln als
   die Reihe umbrechen lassen. Grenze = Container-Maximalbreite, damit die Textspalte immer 535 px hat. */
@media (max-width: 1120px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { max-width: 460px; margin: 0 auto 28px; }
}
/* grid-4 bricht schon bei 1024 px auf zwei Spalten: vierspaltig blieben der Karte darunter
   nur ~155 px Textbreite. */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .ratgeber-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .hero-inner, .split, .contact-inner { grid-template-columns: 1fr; }
  .split-reverse .split-text, .split-reverse .split-media { order: initial; }
  .hero-media { max-width: 460px; margin: 0 auto; }
  /* Gestapelt steht das Bild zuletzt in der Spalte und braucht Abstand zur nächsten
     Sektion. Früher stand hier „Platz für die überhängende Overlay-Box" – seit dem
     Passepartout hängt nichts mehr über, der Abstand bleibt aber sinnvoll, weil die
     versetzte Tiefenebene 10 px nach unten reicht. */
  .hero-media, .split-media { margin-bottom: 28px; }
  .faq-open { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .grid-4, .steps, .form-row { grid-template-columns: 1fr; }
  /* Einspaltig traegt jedes Feld schon seinen eigenen Abstand -> Zeilenabstand nicht doppelt */
  .form-row { gap: 0; }
  .contact-form { padding: 24px 20px; }
  .hero-stats { gap: 20px; }
  /* Im schmalen Header haben Sprachwahl und Kontakt-Button Vorrang; der Hell-/Dunkel-Schalter
     entfaellt, weil dort ohnehin die Systemeinstellung greift (siehe Inline-Script im <head>). */
  .theme-toggle { display: none; }
  .header-inner { gap: 10px; height: 68px; }
  .header-actions { gap: 10px; }
  .brand-logo { height: 34px; }
  .header-actions .btn { padding: .5em .9em; font-size: .85rem; }
  .lang-switch { font-size: .84rem; }
  /* Mindestgroesse einer Tippflaeche: 44 px. Die Pille bleibt optisch klein, die
     Trefferflaeche waechst per Pseudoelement ueber ihre sichtbaren Kanten hinaus. */
  .lang-switch a { position: relative; }
  .lang-switch a::after { content: ""; position: absolute; inset: -10px -8px; }
  .header-actions .btn { min-height: 44px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .btn-text-full { display: none; }
  .btn-text-short { display: inline; }
  /* Header ist hier 68 px hoch – das Token traegt auch das scroll-margin der Anker */
  :root { --header-h: 68px; }
  /* Der Button rutscht hier ohnehin unter den Text -> lieber ueber die volle Breite als halb daneben */
  .shortcut { padding: 20px 22px; }
  .shortcut .btn { flex: 1 1 100%; }
}

/* ---------- Bewegung ----------
   Hier stand bis zum 05.09.2026 eine Scroll-Choreografie: .card, .step, .service-list li,
   .ratgeber-card, .price-card, .shortcut, das Bildbauteil und die FAQ-Blöcke blendeten über
   animation-timeline: view() beim Hereinscrollen von opacity 0 auf 1 auf.
   ENTFERNT auf Wunsch des Inhabers: Weil die Animation an die Sichtbarkeit gebunden war und
   nicht an ein einmaliges Ereignis, stand alles, was gerade am unteren Bildschirmrand lag,
   dauerhaft halb transparent da – beim Anhalten mitten im Scrollen sah der untere Seitenteil
   blass und unfertig aus. Das war kein Fehler in den Werten, sondern die Bauart selbst:
   eine reine CSS-Scroll-Animation kennt kein "einmal eingeblendet und dann fertig".
   ⚠️ Nicht als "kleinere animation-range" wieder einbauen – der Effekt bliebe derselbe.
   Wer je wieder eine Einblendung will, braucht einen IntersectionObserver, der die Klasse
   einmalig setzt und danach nicht mehr zurücknimmt. */

/* Verbindungslinie im Ablauf-Stepper. Erst ab 901 px, weil erst dort vier Spalten stehen –
   gestapelt haette eine waagerechte Linie keinen Sinn. Sie liegt hinter den Karten und ist
   damit genau in den 22-px-Luecken sichtbar: drei kurze Striche zwischen den vier Kreisen.
   top: 53px = 30 px Karten-Padding + halber 46-px-Kreis. */
@media (min-width: 901px) {
  .steps { position: relative; }
  .steps::before {
    content: ""; position: absolute; z-index: 0;
    top: 53px; left: 12.5%; right: 12.5%; height: 2px;
    background: var(--border);
  }
  .step { position: relative; z-index: 1; }
}

/* Theme-Wechsel. Bisher fadete nur der body ueber 250 ms, waehrend Header, Karten, Formular,
   Footer und alle Raender im selben Frame hart umsprangen – das sah nach Fehler mit
   Nachzieher aus. Die Klasse setzt die Uebergaenge NUR fuer die Dauer des Wechsels; sie
   dauerhaft auf * zu legen wuerde jede Interaktion verlangsamen.
   Wird von script.js gesetzt und dort auch nur, wenn keine Bewegungsreduktion gewuenscht ist. */
html.theme-anim,
html.theme-anim *:not(.photo-well img) {
  transition: background-color .28s ease, border-color .28s ease, color .28s ease, box-shadow .28s ease !important;
}

/* ---------- Druckansicht ----------
   Browser drucken Hintergrundfarben standardmaessig NICHT, Textfarben aber schon. Eine
   Besucherin mit data-theme="dark", die einen Ratgeber ausdruckt oder als PDF speichert,
   bekam deshalb --ink #f4ebdd auf weissem Papier – also nahezu leere Blaetter. Und die
   Ratgeber sind das am haeufigsten weitergegebene Format der Seite.
   Deshalb: im Druck immer die hellen Werte erzwingen, egal welches Theme aktiv ist. */
@media print {
  html, html[data-theme="dark"] {
    color-scheme: light;
    --creme: #fff; --creme-2: #fff; --band: #fff; --bg: #fff; --surface: #fff;
    --braun: #000; --braun-soft: #1a1a1a; --ink: #000; --muted: #333;
    --rost: #a4451f; --rost-dark: #a4451f; --on-rost: #fff;
    --stage-bg: #fff; --on-stage: #000;
    /* Die Bühne hat vier Tokens, nicht zwei. Ohne diese Zeile druckt die H1 von /danke/ und
       /es/gracias/ sowie der Tabellenkopf auf /es/#requisitos in --on-stage-strong (#f7f1e6)
       auf Papierweiß – gemessen 1,12 : 1, also ein leeres Blatt. Die Eyebrow läge bei 1,97 : 1.
       --grain und --stage-card-shadow sind Flächenschmuck und kosten auf Papier nur Toner. */
    --on-stage-strong: #000; --stage-accent: #a4451f;
    --grain: none; --stage-card-shadow: none;
    --stage-card-bg: #fff; --stage-rule: #f2f2f2; --stage-rule-strong: #999;
    --tan: #666; --tan-soft: #eee; --border: #999;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  }
  body { background: #fff; color: #000; }
  /* Bedienelemente und Verkaufsflaechen haben auf Papier keinen Zweck. */
  .site-header, .site-footer, .theme-toggle, .nav-toggle, .lang-switch,
  .skip-link, .cta-box, .shortcut, .contact-form, .page-head::after { display: none !important; }
  /* Das Kopfband ohne Flaeche, aber mit Linie – der Seitenanfang bleibt erkennbar. */
  .page-head { background: none; padding: 0 0 18px; border-bottom: 1px solid #999; }
  .section, .article, .legal { padding: 0; }
  .photo-well { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  /* Aufklapper aufklappen: sonst fehlt im Ausdruck der halbe Ratgeber. */
  .faq details { border: 0; padding: 0; }
  .faq details > * { display: revert !important; }
  .faq summary::after { content: "" !important; }
  .faq summary { border-bottom: 1px solid #999; }
  /* Ziel der Verweise mitdrucken, sonst sind Links auf Papier wertlos. */
  .article p a[href^="http"]::after, .legal p a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; }
  p, li, tr { break-inside: avoid; }
  .data-table { break-inside: auto; }
  a { text-decoration: underline; }
  @page { margin: 18mm 16mm; }
}