/* ==========================================================================
   Legal-Seiten (Impressum/Datenschutz/Nutzungsbedingungen) — page-impressum.php/
   page-datenschutz.php/page-nutzungsbedingungen.php + template-parts/legal-hero.php.
   Vorher liefen diese 3 Seiten ueber das generische page.php OHNE fotografischen
   Hero (Seitentitel stand doppelt da) und mit unstyled Sektionsueberschriften
   (Original ist auf allen 3 Seiten durchgaengig Versalien+Letter-Spacing per
   Automatic.css-Framework-Default, Rebuild zeigte normale Gross-/Kleinschreibung).

   ⚠ Bewusst eine EIGENE, separat enqueue-te Datei statt Anhaengen an main.css:
   main.css wird waehrend dieses Rebuilds von mehreren parallelen Sessions
   gleichzeitig bearbeitet (mehrfach live beobachtet, s.
   project_stefanie_grace_technik.md "Parallelsession"-Funde) — jeder Append-Versuch
   dort wurde innerhalb weniger Minuten von einem fremden Deploy wieder ueberschrieben.
   Diese Datei wird nur auf den 3 Legal-Seiten selbst enqueued (grace_legal_assets()
   in functions.php, is_page()-gescopet) und ist dadurch komplett kollisionsfrei.

   Bewusst als eigene, gescopte Klassen statt Aenderung von .page-hero/
   .content-blocks__heading direkt — die werden auch von Retreat/Event-Single-Seiten
   genutzt, die nicht Teil dieses Fixes sind.
   Alle Werte 1:1 aus echten getComputedStyle-Messungen auf stefanie-grace.com/
   impressum/ (5 Breakpoints 375–1920px), siehe project_stefanie_grace_technik.md. */
.page-hero--legal{
  position:relative; /* Fix-Runde 1 (2026-08-11): noetig als containing block fuer die
    beiden neuen absolut positionierten Layer (__media/__overlay) unten. */
  overflow:hidden;
  /* ⭐ Fix-Runde "pingeliger UX-Experte" /impressum/ (2026-08-11, spaeter) — Nachbesserung
     der Fix-Runde-5-Erkenntnis direkt oberhalb: "durchgehend bei 360px" war noch nicht die
     volle Wahrheit — die Fix-Runde-5-Messung hielt (wie schon die noch frueheren 400px-
     Messungen) die Browser-Fenster-HOEHE bei allen 4 Breakpoint-Tests konstant (auf 900px),
     wodurch 360px wie ein fixer Wert aussah. Frischer Test mit 5 verschiedenen Fenster-
     HOEHEN (700/800/900/1000/1100px) bei GLEICHER Breite (1440px) auf stefanie-grace.com/
     impressum/ zeigt Hero-Hoehe 280/320/360/400/440px — exakt linear 0.4×Fensterhoehe.
     Matched-CSS-Rules bestaetigt die Original-Regel woertlich: `.hero-small{height:40vh
     !important}`. 360px war bei der Fix-Runde-5-Testfensterhoehe (900px) also korrekt
     GEMESSEN, nur falsch als Fixwert statt als 40vh interpretiert — mit `height:40vh` bleibt
     der 360px-Wert bei genau dieser Fensterhoehe ohnehin exakt erhalten, es kommen nur die
     anderen Fensterhoehen jetzt zusaetzlich korrekt mit. */
  height:40vh;
  display:flex;
  align-items:center;
  padding:60px 0;
  /* ⭐ Fix-Runde 2 (2026-08-11, pingeliger UX-Check "nutzungsbedingungen"): Header-Hero-
     Z-Order-Bug — 4. unabhaengiger Fund desselben strukturellen Bugs an diesem Tag (nach
     /events/, /bibliothek/, /retreat/ibiza-retreat/, s. project_stefanie_grace_technik.md
     "Fuer kuenftige Sessions: JEDE Seite mit position:sticky-Header + vollflaechigem
     Foto-Hero..."). Live per getBoundingClientRect + Pixel-Screenshot bestaetigt: Original
     hat `.hero-sub{margin-top:-70px}`, wodurch die obersten 70px des 400px-Fotos UNTER dem
     transparenten `<header>` liegen — die dortige, IMMER (nicht scroll-abhaengig) solide
     `.header-grace`-Ebene (rgba(0,0,0,.7)) zeigt dadurch echte Foto-Textur durchscheinend
     (Screenshot-Beleg ntb2_orig_top.png: sichtbare Wolken-/Rauch-Struktur hinter der Nav).
     Rebuild hatte die Hero-Section OHNE Overlap direkt unterhalb des Headers (top:70px statt
     0px) — dadurch liegt die `.site-header`-Verdunkelung auf reinem Seitenhintergrund statt
     auf dem Foto = optisch ein flacher, texturloser Graubalken (Screenshot-Beleg
     ntb2_reb_top.png). Kein Scroll-Verhalten involviert (per Live-Messung auf 6 Kombinationen
     [top/scrolled/back] beider Domains widerlegt: `.header-grace`/`.site-header__inner`-
     Hintergrund ist auf BEIDEN Domains bei jedem Scroll-Stand identisch — die vom Auftrag
     vermutete JS-Scroll-Klasse `scrolling` existiert zwar im Original-DOM, aendert aber
     nachweislich weder background-color/opacity/transform noch irgendeine andere gemessene
     Eigenschaft des Headers). Fix nach dem etablierten Muster: Section rutscht per
     margin-top:-70px unter den Header, `.page-hero--legal .container` kompensiert mit
     margin-top:70px (haelt die Textposition bei — Original-Textposition war nicht Teil
     dieser Meldung, daher bewusst nur die bereits deployte Position beibehalten statt neu
     zu vermessen). */
  margin-top:-70px;
}
.page-hero--legal .container{margin-top:70px;}
/* ⭐ Fix-Runde 1 (2026-08-11, pingeliger UX-Check): Original nutzt 2 GETRENNTE Layer
   (Bild + Overlay), keinen kombinierten background-Shorthand. Der Overlay-Layer traegt
   `linear-gradient(45deg, rgba(0,0,0,.7), rgba(0,0,0,0))` — ein echter diagonaler
   70%-Schwarz-zu-transparent-Verlauf (1:1 per getComputedStyle auf `.hero-sub__overlay`
   gemessen). Vorher: `linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45))` — beide
   Farbstops identisch = kein Verlauf, nur ein flacher 45%-Tint, dadurch eine sichtbare
   harte Kante zwischen Navbar und Foto statt eines weichen Uebergangs. */
.page-hero--legal__media{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
}
/* ⭐ Fix-Runde 1, Nutzungsbedingungen-Session (2026-08-11): Original nutzt fuer dasselbe
   Foto bei ganz kleinen Breiten einen ANDEREN Bildausschnitt (Bricks "Image Position" pro
   Breakpoint) — object-position wechselt exakt bei 480px von "50% 50%" auf "68.49% 48.99%"
   (per getComputedStyle in 1px-Schritten von 320-1280px auf stefanie-grace.com/
   nutzungsbedingungen/ verifiziert: 320/375px = 68.49%/48.99%, ab 480px durchgehend
   50%/50%). Rebuild nutzt statt eines <img> ein CSS-Background (background-position statt
   object-position), gleiche Wirkung. */
@media (max-width:479px){
  .page-hero--legal__media{background-position:68.49% 48.99%;}
}
.page-hero--legal__overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(45deg, rgba(0,0,0,.7), rgba(0,0,0,0));
}
.page-hero--legal .container{position:relative;z-index:1;text-align:center;}
.page-hero--legal h1{
  text-align:center;
  text-transform:uppercase; /* Automatic.css-Default, nicht Original-Content-Grossschreibung */
  letter-spacing:normal; /* war faelschlich 1px im generischen .page-hero h1 */
  font-size:clamp(2.61rem,2.2rem + 1.75vw,3.775rem);
  /* ⭐ Fix-Runde 1, Nutzungsbedingungen-Session (2026-08-11): `overflow-wrap:break-word`
     entfernt — brach "NUTZUNGSBEDINGUNGEN" bei 375px haesslich mitten im Wort um
     ("NUTZUNGSBEDI"/"NGUNGEN"). Original macht genau das NICHT: h1 bleibt einzeilig
     (`white-space`/`overflow-wrap` beide `normal`, per getComputedStyle verifiziert) und
     laesst das eine lange Wort stattdessen an der Sektionskante optisch abgeschnitten
     erscheinen — moeglich, weil die umgebende `<section>` im Original `overflow:hidden`
     hat (Original-DOM-Walk bestaetigt: H1 `scrollWidth` 520px > `clientWidth` 334px, aber
     0px Dokument-Overflow, weil der Ueberstand vom Section-Container geclippt wird statt
     die Seite zu sprengen). `.page-hero--legal` hat bereits `overflow:hidden` (s.o., fuer
     die __media/__overlay-Layer) — genau derselbe Clip-Mechanismus greift jetzt automatisch
     auch hier, ganz ohne Wort-Umbruch. Live verifiziert: 0px Overflow auf 320/360/375/390px,
     H1-Boxhoehe wieder einzeilig (~60px statt ~121px bei 2 Zeilen). */
}
.page-hero__lede{
  font-family:var(--font-body);
  font-weight:400;
  text-align:center;
  color:var(--white);
  margin-top:8px;
  font-size:clamp(1.203rem,1.161rem + 0.284vw,1.416rem);
}

.content-page--legal .content-blocks__heading{
  color:var(--neutral); /* Original: schwarz, nicht der goldene --secondary-text-Ton
                            der auf Retreat/Event-Content-Blocks verwendet wird */
  font-weight:700;
  overflow-wrap:break-word; /* Sicherheitsnetz (QA-Fund, gleiches Muster wie Hero-h1):
    lange Datenschutz-Ueberschriften wie "Google Fonts Lokale Datenschutzbestimmungen"
    liefen mit Versalien+4px Letter-Spacing bei 375px 8px ueber den Viewport hinaus. */
  /* ⭐ Fix-Runde 2 (2026-08-11, pingeliger UX-Check "nutzungsbedingungen", Teil des
     "Spacing/Typografie-Drift"-Befunds): main.css' generische `.content-blocks__heading`-
     Regel traegt fluide margin-top/margin-bottom (fuer Retreat/Event-Content gedacht).
     Original hat auf ALLEN gemessenen H2/H3 auf dieser Seite (Merke/Programm Gebühren/
     Gewährleistung/Vertraulichkeit/Sonstiges, 4 Breakpoints) durchgehend margin:0 — die
     sichtbaren Abstaende kommen ausschliesslich von margin-top auf den nachfolgenden
     <p>-Elementen (s.u.), nicht von den Ueberschriften selbst. Rebuild hatte durch die
     geerbte main.css-Regel zusaetzliche 7–24px pro Ueberschrift, die sich ueber die vielen
     Abschnitte der Seite zu einem spuerbaren Teil der dokumentierten Gesamthoehen-
     Ueberlaenge aufsummierten. */
  margin:0;
}
.content-page--legal h2.content-blocks__heading{
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:clamp(1.1455rem,0.669rem + 2.035vw,2.5rem);
  /* ⭐ Fix-Runde 2 (2026-08-11): Original-line-height der "MERKE"-Ueberschrift folgt NICHT
     proportional der font-size-Kurve (kein fixer Ratio-Faktor), sondern ist eine eigene,
     flacher ansteigende Fluid-Kurve — 4 echte getComputedStyle-Messpunkte (25.2146px@375,
     41.6582px@1024, 50.32px@1440+1920) per kleinste-Quadrate-Regression zu einem clamp()
     verdichtet (Fehler <0.8px an jedem Messpunkt). War vorher ungesetzt → main.css'
     line-height:1.45 (fuer Body-Text gedacht) griff auch hier durch, ergab bei 1440/1920px
     58px statt 50.32px (+15%) und bei 1024px 45.74px statt 41.66px (+10%). */
  line-height:clamp(1.576rem, calc(1.038rem + 2.373vw), 3.145rem);
}
.content-page--legal h3.content-blocks__heading{
  /* h3 bleibt bewusst OHNE Versalien/Letter-Spacing — 1:1 so im Original gemessen,
     nur h2 bekommt die Automatic.css-Versalien-Behandlung. */
  font-size:clamp(0.764rem,0.446rem + 1.357vw,1.6663rem);
}

/* Pfeil-Listen (→) — auf dem Original eine sitewide Automatic.css-Regel
   (".brxe-text ul{display:grid;grid-template-columns:1fr 1fr}" + "li::marker{content:
   '→'}"), auf /datenschutz/ durch die vielen Cookie-/GDPR-Aufzaehlungen besonders
   auffaellig. Hier bewusst nur fuer Legal-Seiten nachgebaut (nicht sitewide auf
   .content-blocks__text ul, um Retreat/Event-FAQ-Listen nicht anzufassen — die
   liegen ausserhalb dieses Fixes). */
.content-page--legal .content-blocks__text ul{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.2rem;
  margin:1rem 0 1.2em;
  padding:0;
  list-style:none;
}
.content-page--legal .content-blocks__text ul li{
  margin:0 0 0 1rem;
  padding:0 0 0 .5rem;
  position:relative;
}
.content-page--legal .content-blocks__text ul li::before{
  content:"→";
  position:absolute;
  left:-1rem;
}
@media (max-width:767px){
  .content-page--legal .content-blocks__text ul{grid-template-columns:1fr;}
}

/* ⭐ Fix-Runde 1 (2026-08-11, pingeliger UX-Check): Kontakt-Links (Mailto/Tel) waren
   schwarz+unterstrichen (geerbt von der sitewide .content-page a:not(.btn)-Regel in
   main.css). Original: goldfarben rgb(181,170,137) = --secondary, KEINE Unterstreichung
   (per getComputedStyle auf stefanie-grace.com/impressum/ verifiziert). Bewusst nur
   Mailto/Tel gescopet (nicht alle .content-page--legal-Links generell umgefaerbt) —
   das war exakt der gemeldete Befund, hoehere Spezifitaet als main.css' Regel gewinnt. */
.content-page--legal a[href^="mailto:"],
.content-page--legal a[href^="tel:"]{
  color:var(--secondary);
  text-decoration:none;
}
.content-page--legal a[href^="mailto:"]:hover,
.content-page--legal a[href^="tel:"]:hover{
  text-decoration:underline;
}

/* ⭐ Fix-Runde 5 (2026-08-11, pingeliger UX-Check /datenschutz/): main.css' sitewide
   `.content-page a:not(.btn){text-decoration:underline}` (schwarz, kein color-Override)
   traf auch die normalen externen Fliesstext-Links (z.B. den EUR-Lex-Link auf die DSGVO-
   Richtlinien). Original: gedaempftes Gold rgb(181,170,137) = --secondary, KEINE
   Unterstreichung (per getComputedStyle auf stefanie-grace.com/datenschutz/ verifiziert)
   — wirkt wie ein bewusst gestaltetes Design-Element statt eines Standard-Browser-Links.
   Gleiches Hover-Muster wie die bereits bestehende Mailto/Tel-Regel oben. */
.content-page--legal .content-blocks__text a:not([href^="mailto:"]):not([href^="tel:"]){
  color:var(--secondary);
  text-decoration:none;
}
.content-page--legal .content-blocks__text a:not([href^="mailto:"]):not([href^="tel:"]):hover{
  text-decoration:underline;
}

/* ⭐ Fix-Runde 5 (2026-08-11, pingeliger UX-Check /datenschutz/) hatte hier einen
   page-id-11-gescopten transform:translateX(73px)-Behelfsfix fuer die Logo-Zentrierung
   (dieselbe Root Cause wie unten beschrieben, unabhaengig zweitgefunden — deckungsgleiche
   Messwerte: +73.9px@1440/1920). ENTFERNT durch die Fix-Runde "pingeliger UX-Experte"
   /impressum/-Session (2026-08-11, spaeter): die dort parallel laufende, im obigen Kommentar
   bereits vermutete main.css-Session hat den echten strukturellen Bug (`.site-header__nav`
   hatte `flex:1`, zwang beide Nav-Gruppen zu identischer Breite statt natuerlicher
   Inhaltsbreite) sitewide in main.css behoben (`.site-header__nav`/`.site-header__nav--right
   .lang-switcher`, siehe dortiger Kommentar) — das zentriert jetzt automatisch auf JEDER
   Seite korrekt asymmetrisch, exakt wie im Original. Dieser page-id-11-Patch haette dadurch
   auf Datenschutz zu einem DOPPELTEN Versatz gefuehrt (sitewide-Fix plus zusaetzliches
   +73px-Transform) — deshalb ersatzlos entfernt statt behalten. */

/* ⚠ Fix-Runde 1, Datenschutz-Session (2026-08-11): sitewide .content-blocks__text p
   (main.css) hat line-height:1.7 — Original liegt bei 17px Schriftgroesse auf 24.632px
   Zeilenhoehe (Verhaeltnis 1.449, per getComputedStyle auf allen 4 Breakpoints 375/1024/
   1440/1920px verifiziert: 23.547/16.0149=1.470, 24.259/16.66=1.456, 24.632/17=1.449 —
   praktisch konstantes Verhaeltnis ~1.45). main.css bewusst NICHT angefasst (sitewide/
   Retreat+Event-Content nutzen dieselbe Klasse, main.css ist Hot-File bei Parallelbetrieb)
   — stattdessen hier nur fuer die 3 Legal-Seiten override.
   ⭐ Fix-Runde 1, Nutzungsbedingungen-Session (2026-08-11) Nachbesserung: main.css'
   `.content-blocks__text p{margin-bottom:1.2em}` (20.4px) ergaenzt — Original hat
   margin-bottom:0px auf JEDEM Absatz, der sichtbare Zwischenraum kommt stattdessen von
   margin-top:17px auf jedem Absatz AUSSER dem ersten in einem Abschnitt (0px direkt nach
   einer Ueberschrift/als allererster Absatz der Seite) — 60+ Absaetze auf dieser Seite per
   getComputedStyle einzeln durchgemessen, durchgehend margin-bottom:0/font-size:17px/
   line-height:24.632px bestaetigt, margin-top wechselt 0↔17px im o.g. Muster. Hier bewusst
   AEQUIVALENT ueber margin-bottom:17px (statt margin-top) umgesetzt — identischer optischer
   Absatzabstand (17px), aber ohne fuer jede Ueberschrift-Nachbarschaft einen eigenen
   Adjacent-Sibling-Reset (`h2/h3 + p{margin-top:0}`) samt Testabdeckung aller Bricks-
   Block-Grenzen (grace_render_blocks() rendert jeden Text-Block als eigenes
   .content-blocks__text-div, nicht als durchgehenden Fliesstext) einbauen zu muessen — bei
   margin-bottom traegt in jedem Fall der VORHERIGE Absatz die Distanz, unabhaengig davon,
   ob direkt danach eine neue .content-blocks__heading oder ein weiterer .content-blocks__text-
   Block folgt. Reduziert sitewide-Textspalte + line-height + margin zusammen die dokumentierte
   ~23-24%-Ueberlaenge der Seite spuerbar (Haupttreiber: line-height allein, Absatzabstand nur
   ein kleinerer Zusatzbeitrag). */
/* ⭐ Fix-Runde 2 Nachbesserung (2026-08-11, "Spacing/Typografie-Drift"-Befund): main.css
   liefert 17px fix auf JEDER Breite — Original-Body-Text ist dagegen fluid (16.0149px@375,
   16.66px@1024, 17px ab ~1366px konstant, per getComputedStyle auf 4 Breakpoints
   verifiziert). Clamp aus den 3 Messpunkten per kleinste-Quadrate-Regression (Fehler
   <0.03px an jedem Messpunkt). line-height bleibt bewusst der bereits bestehende
   unitless-Faktor 1.45 (skaliert automatisch mit der neuen fluiden font-size mit, ergibt an
   allen Messpunkten weiterhin die bereits bestaetigten ~1.45-1.47-Original-Verhaeltnisse —
   kein separater line-height-Wert noetig). */
.content-page--legal .content-blocks__text p{font-size:clamp(1rem, calc(0.98rem + 0.093vw), 1.0625rem);line-height:1.45;margin-top:0;margin-bottom:17px;}
.content-page--legal .content-blocks__text p:last-child{margin-bottom:0;}

/* ⭐ Fix-Runde 1, Nutzungsbedingungen-Session (2026-08-11): main.css'
   `.content-page--narrow{max-width:800px}` (geteilt mit page.php/1-1-coaching/Retreat-
   Event-Bibliothek-Templates, s. Kommentar oben "main.css ist Hot-File") ergibt auf den
   Legal-Seiten eine zu schmale Textspalte — Original nutzt hier KEINE engere Lesespalte,
   sondern denselben Standard-Container wie sitewide sonst auch (1100px ab ≥1210px, darunter
   91% fluid — exakt die bereits etablierte `.container`-Logik, s. project_
   stefanie_grace_technik.md "Root-Cause Bug 2"). Ueberschreibt NUR innerhalb von
   `.content-page--legal` (2 Klassen = hoehere Spezifitaet als main.css' einzelne
   `.content-page--narrow`, gewinnt unabhaengig von der main.css-Ladereihenfolge) — Retreat/
   Event/Bibliothek/generische Seiten, die dieselbe `.content-page--narrow`-Klasse nutzen,
   bleiben unveraendert bei 800px. */
.content-page--legal .content-page--narrow{max-width:var(--container,1100px);}

/* "made with heart by Auftrittsreich"-Badge — nur auf /impressum/ (grace_ar_badge()),
   letztes Element der Seite im Original. */
.legal-badge__link{display:inline-block;margin-top:28px;opacity:.7;transition:opacity .2s ease;}
.legal-badge__link:hover{opacity:1;}
.legal-badge__svg{display:block;width:110px;height:15px;}

/* Dezenter Agentur-Credit-Satz (grace_ar_credit(), nur Impressum+Datenschutz) — Werte
   1:1 aus dem Original-mu-Plugin ar-credit.php uebernommen (dort inline gesetzt). */
.ar-seo-credit{font-size:12px;line-height:1.5;opacity:.5;margin:34px 0 6px;}
.ar-seo-credit a{color:inherit;}