/* Fix 2026-08-12 (spaeter, pingelige-UX-Audit Runde 2 -- KRITISCH): der fruehere Fix oben
(.site-header transparent) war nur die HALBE Wahrheit. Live-Tiefenaudit gegen
stefanie-grace.com/grace/ an 5 Scrolltiefen (0/100/190/400/1500px) bestaetigt: der AEUSSERE
Original-Wrapper HEADER.brx-sticky.on-scroll ist tatsaechlich IMMER rgba(0,0,0,0) -- der
Klassenwechsel zu "...scrolling" ab ca. 50px Scroll aendert nachweislich KEINE einzige
CSS-Property (deckt sich mit dem an vielen anderen Stellen dieser Datei dokumentierten Befund,
z.B. /events/, /nutzungsbedingungen/: die "scrolling"-Klasse ist optisch wirkungslos). Der
Fruehfix hat diesen Teil korrekt getroffen. UEBERSEHEN wurde aber die zweite, strukturell
unabhaengige Ebene: Original SECTION.brxe-section.header-grace (= Aequivalent von
.site-header__inner) hat einen PERMANENT soliden background-color:rgba(0,0,0,.7) -- konstant
an JEDER gemessenen Scrolltiefe inkl. y=0, nicht scroll-abhaengig, kein JS-Toggle noetig. Der
Rebuild hatte fuer .site-header__inner GAR KEINEN eigenen Hintergrund, main.css' sitewide
.site-header-Default wurde durch den Fruehfix zusaetzlich weggenommen -- der Header war dadurch
auf /grace/ bei JEDER Scrolltiefe komplett unsichtbar/durchsichtig statt permanent leicht
verdunkelt. Sichtbare Folge (pingeliger-UX-Report, KRITISCH): Hero-Headline "HI, ICH BIN"
ueberlappt bei y=400 ungefiltert mit dem Logo-Text; Nav+Hamburger-Icon werden bei tiefem Scroll
(y=1500px, Seitenende ~8300px) weiss-auf-weiss unlesbar, auch auf Mobile (375px). Fix:
.site-header bleibt transparent (korrekt, unveraendert), .site-header__inner bekommt den
fehlenden permanenten zweiten Layer -- reiner CSS-Fix, kein Scroll-JS noetig, da das Original
selbst keinen scroll-abhaengigen Effekt hat. 7. unabhaengiger Fund dieses "main.css/Rebuild
kennt nur die halbe Original-Struktur"-Musters in diesem Projekt (nach /events/,
/nutzungsbedingungen/, /1-1-coaching/, /bibliothek/ u.a., s. project_stefanie_grace_technik.md). */
/* ⭐ Robustheits-Fix 2026-08-12 (Runde 6, Root-Cause statt Symptom): dieser Header-Fix ist
bereits das 6.+ Mal in der Projekthistorie regrediert, obwohl inhaltlich seit der letzten
Runde unveraendert. Echte Ursache per CDP-Enqueue-Analyse gefunden: main.css wird ueber den
Standard-`wp_enqueue_scripts`-Hook (grace_assets(), functions.php) geladen, grace-page.css
dagegen ueber einen eigenen `add_action('wp_head', ...)`-Closure OHNE main.css als deklarierte
Dependency (page-grace.php, bewusst so gewaehlt um main.css-Merge-Kollisionen paralleler
Sessions zu umgehen, s. Kopfkommentar dort). Die beiden Selektoren unten hatten bislang
dieselbe Spezifitaet (0-1-0) wie main.css' eigenes `.site-header{background:rgba(0,0,0,.7)}`
-- sie gewannen bisher NUR, weil die WP-Head-Priority von `wp_print_styles` (8) zufaellig vor
der Default-Priority (10) des `wp_head`-Closures liegt. Jede kuenftige Aenderung, die diese
Prioritaet/Reihenfolge beeinflusst (Caching-/Optimierungs-Plugin, ein main.css-Refactoring das
`grace_assets()` umhaengt, ein Merge-Konflikt beim Kopieren dieser Regel in main.css durch eine
Session die den Header sitewide anfasst) laesst main.css wieder gewinnen, ohne dass irgendein
Fehler sichtbar wird -- exakt das wiederholt beobachtete Regressionsmuster. Fix: Spezifitaet
PER SE erhoehen (Body-ID-Scope, WordPress-Standard-Klasse fuer Post-ID 8 = /grace/), damit der
Override unabhaengig von Ladereihenfolge/Prioritaet IMMER gewinnt -- dauerhaft geloest statt nur
der Symptom-Wert erneut zurueckgesetzt. */
body.page-id-8 .site-header{background:rgba(0,0,0,0);}
body.page-id-8 .site-header__inner{background-color:rgba(0,0,0,.7);}
/* ---- Hero ---- */
.hero-grace{
position:relative;
height:100vh;
min-height:560px;
overflow:hidden;
margin-top:-70px;
}
.hero-grace__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
@media (max-width:478px){
.hero-grace__img{object-position:68.49% 48.99%;}
}
.hero-grace__overlay{position:absolute;inset:0;background:linear-gradient(45deg,rgba(0,0,0,.7),rgba(0,0,0,0));}
.hero-grace__content{
position:relative;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding-left:clamp(1.1506rem, 0.3554rem + 3.9761vw, 3.75rem);
padding-right:clamp(1.1506rem, 0.3554rem + 3.9761vw, 3.75rem);
margin-top:70px;
}
.hero-grace__heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(2.5449rem, 2.1687rem + 1.8814vw, 3.775rem);
line-height:1.4;
text-transform:uppercase;
color:var(--white);
margin-bottom:14px;
}
.hero-grace__heading .script{
font-family:var(--font-script);
text-transform:uppercase;
}
.hero-grace__lede{
font-family:var(--font-body);
font-weight:400;
font-size:clamp(1rem,1.55vw,1.42rem);
color:var(--white);
margin:0;
}
/* ---- CTA-Leiste "Zitat Stoerer" ---- */
.zitat-stoerer{background:#F5F4EF;padding:40px 0;}
.zitat-stoerer__container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 30px;}
.zitat-stoerer__lede{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(1.1rem,1.6vw,1.42rem);
letter-spacing:4px;
text-transform:uppercase;
color:#6E6445;
margin:0;
}
/* ---- Alternierende Bild/Text-Sektionen ---- */
.alternator-grace{overflow:hidden;}
.alternator-grace__container{display:grid;align-items:stretch;}
.alternator-grace__container.grid-2-1{grid-template-columns:2fr 1fr;}
.alternator-grace__container.grid-1-2{grid-template-columns:1fr 2fr;}
.alternator-grace__text-col{
padding:70px 45px;
display:flex;
flex-direction:column;
justify-content:center;
gap:40px;
}
.alternator-grace__text-col h2{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(1.0703rem, 0.6329rem + 2.1869vw, 2.5rem);
line-height:clamp(1.4888rem, 0.9821rem + 2.5335vw, 3.145rem);
margin:0 0 .3em;
text-transform:uppercase;
letter-spacing:4px;
}
.alternator-grace__subheading,
.social-proof__subheading,
.collab-list__heading{
font-family:var(--font-heading);
font-weight:700;
font-style:normal;
font-size:clamp(1.35rem,calc(1.245rem + 0.468vw),1.666rem); /* eigene clamp()-Naeherung aus den
3 Messpunkten, Fehler <0.25px an jedem Breakpoint (375/1024/1440) */
color:#000;
margin:0 0 .7em;
}
.collab-list__heading{margin:0 0 .5em;} /* eigener kleinerer Abstand bleibt wie vorher */
.alternator-grace__text p{margin:0 0 1em;font-size:17px;line-height:1.45;}
.alternator-grace__text p:last-child{margin-bottom:0;}
.alternator-grace__img-col{height:100%;}
.alternator-grace__image{width:100%;height:100%;object-fit:cover;min-width:0;display:block;}
.ausbildungen-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 40px;margin-top:20px;}
.ausbildungen-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.ausbildungen-list li{font-size:17px;line-height:1.45;padding-left:1.3em;position:relative;overflow-wrap:break-word;}
.ausbildungen-list li::before{content:"→";position:absolute;left:0;color:var(--secondary);}
.ausbildungen-list li strong{font-weight:700;}
/* ---- Video-Teaser (YouTube-Teaser, kanalseitiger Fehler 153 s. Kommentar im Template) ---- */
.grace-video-teaser{
padding:70px 0;
background:var(--secondary-light);
}
.grace-video-teaser__frame{position:relative;aspect-ratio:16/9;background:#000;}
.grace-video-teaser__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* ---- Social Proof: Podcast-Cover, Video-Testimonials, Collaborations ---- */
.social-proof{padding:70px 0 90px;}
.social-proof .container + .container{margin-top:70px;}
.social-proof__subheading{
/* font-family/-weight/-size jetzt in der gemeinsamen Eyebrow-Regel weiter oben (Fix 2026-08-11),
hier nur noch der abweichende Abstand. */
margin:10px 0 30px;
}
.social-proof__cover{width:100%;height:auto;display:block;}
.video-playlist{display:grid;grid-template-columns:2fr 1fr;gap:30px;align-items:start;margin-top:30px;}
.video-playlist__player{position:relative;aspect-ratio:16/9;background:#111;}
.video-playlist__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* Fix 2026-08-12 (Alex-Direktauftrag "funktionieren die Videos jetzt wieder?"): ersetzt den
vorherigen Endlos-Spinner + das JS-verzoegerte, rein optische "volle Player-Chrome"-Fallback
(Fix-Runde 6, selber Tag, frueher) durch einen sofort sichtbaren, ehrlichen Hinweistext. Frischer
Live-Check widerlegt die Fix-Runde-6-Praemisse: das Original zeigt bei diesem Vimeo-403 selbst
KEINE Player-Oberflaeche, nur eine leere schwarze Flaeche mit dauerhaftem Lade-Ring — ein 1:1-
Nachbau davon waere fuer Besucher irrefuehrend (sieht aus wie "laedt gleich", passiert nie).
s. project_stefanie_grace_technik.md fuer die volle Herleitung. Kein is-hidden/is-visible-
Klassentausch mehr noetig (kein JS-Timing-Abhaengigkeit, keine Autoren-vs-UA-[hidden]-Falle). */
.video-playlist__player-fallback{
position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
background:#111;
padding:16px 24px;box-sizing:border-box;
text-align:center;
}
.video-playlist__fallback-icon{opacity:.7;}
.video-playlist__fallback-title{color:#fff;font-size:15px;font-weight:600;margin:4px 0 0;}
.video-playlist__fallback-note{color:rgba(255,255,255,.65);font-size:13px;margin:0;}
.video-playlist__list{display:flex;flex-direction:column;gap:30px;}
.video-playlist__summary{font-size:15px;text-align:right;margin:0;color:var(--secondary-text);}
/* :not([hidden]) ist Pflicht: ein einfaches "[data-vp-page]{display:flex}" wuerde als Autoren-Regel
das UA-Standard-"[hidden]{display:none}" ausstechen (Autoren- schlaegt UA-Stylesheet immer, auch
bei gleicher Spezifitaet) und Seite 2 der Playlist faelschlich dauerhaft sichtbar machen — beim
Pre-Deploy-Test live entdeckt (verrutschte Testimonial-Gaps 46px statt 30px waren nur ein
Test-Artefakt der Style-Injection, aber der sichtbare Fix hat den echten Bug aufgedeckt). */
[data-vp-page]:not([hidden]){display:flex;flex-direction:column;gap:30px;}
.video-playlist__item{
display:flex;
align-items:center;
gap:14px;
width:100%;
background:#F5F4EF;
border:0;
padding:0;
text-align:left;
cursor:pointer;
font:inherit;
color:inherit;
}
/* Fix 2026-08-12 (spaeter, MINOR-Befund): Original markiert den aktuell abgespielten Testimonial-
Eintrag mit vollflaechigem khakifarbenem Hintergrund (rgb(181,170,137) = exakt var(--secondary)),
live per Klick+Autoplay-beim-ins-Bild-Scrollen gegen stefanie-grace.com/grace/ nachgemessen --
nicht per Outline-Ring. Outline-Variante ersetzt (main.css/header.php unangetastet, nur diese
Datei). */
.video-playlist__item[aria-current="true"]{background-color:var(--secondary);}
.video-playlist__media-col{
flex:none;
width:71px;height:71px;
display:flex;align-items:center;justify-content:center;
background:var(--secondary);
overflow:hidden;
}
.video-playlist__media-col img{width:100%;height:100%;object-fit:cover;}
.video-playlist__icon{color:#F5F4EF;font-size:22px;}
.video-playlist__heading{font-size:17px;font-weight:400;}
.video-playlist__pagination{display:flex;align-items:center;gap:14px;margin-top:0;font-size:17px;}
.video-playlist__pagination button{background:none;border:0;padding:2px 4px;cursor:pointer;font:inherit;color:var(--secondary-text);}
.video-playlist__pagination button.is-current{color:#000;font-weight:700;}
/* Fix 2026-08-12 (Footer-Overflow-Root-Cause, /grace/): war "1fr 1fr" ohne minmax(0,…) — CSS-Grid
gibt jedem 1fr-Track implizit min-width:auto (= min-content der Karte inkl. 2x24px Padding,
~150-159px per Playwright gemessen). Unter ~370px Containerbreite (~336-341px Grid-Innenbreite)
passen 2 Karten + 24px Gap rechnerisch nicht mehr hinein, Grid blaeht das Dokument auf (69px
Overflow bei 280px, 31px bei 320px, 0 erst ab 360px — exakt gemessen). Original nutzt hier ein
echtes fluides Grid (Spaltenbreite waechst proportional 118px@300 bis 154.9px@375, kein fester
Boden), Rebuild-Karten dagegen exakt gleiche Pixelbreite bei 300px UND 320px (157.16/155.19px) —
Beleg fuer den Blowout, nicht fuer echte Verkleinerung. Identisches Bugmuster + identischer Fix
wie bereits bei .ausbildungen-list (s. oben, Fix-Runde 5, selbe Datei) — minmax(0,1fr) hebt das
implizite min-width:auto auf, Karten duerfen jetzt unter ihre Content-Breite schrumpfen. */
.collab-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:30px;list-style:none;padding:0;}
.collab-list__item{background:#F5F4EF;padding:24px;overflow-wrap:break-word;}
/* .collab-list__heading font-family/-weight/-size/-margin jetzt in der gemeinsamen Eyebrow-Regel
weiter oben (Fix 2026-08-11) — alte fixe 1.55rem/margin-Dopplung hier entfernt. */
.collab-list__text{font-size:14px;line-height:1.5;color:rgba(0,0,0,.8);}
.collab-list__text p{margin:0 0 .8em;}
.collab-list__text p:last-child{margin-bottom:0;}
.collab-list__text a{color:inherit;text-decoration:none;}
.collab-list__text a:hover{text-decoration:underline;}
/* ---- Meine Geschichte ---- */
/* Fluid-Nachrunde 2026-08-12: .story{padding} war fix 80px/100px statt fluid -- Original-
Section-Padding (top UND bottom identisch, .brxe-section um "Meine Geschichte") waechst
48.6262px@375, 65.0338px@768, 75.7217px@1024, 90px@1440+ (live gegen
stefanie-grace.com/grace/ nachgemessen, kleinste Quadrate-Fit ueber alle 4 Punkte statt
Zweipunkt, <1.2px Restfehler bei 1024px). */
.story{padding:clamp(48.6262px, calc(34.058px + 3.8978vw), 90px) 0;}
/* margin-bottom war fix 40px -- Original-Heading-Row-zu-Text-Abstand folgt derselben
sitewide-Automatic.css-Formel wie an vielen anderen Stellen dieses Themes (24.078125px@375,
26.421875px@768, 27.953125px@1024, 30px@1440+, live nachgemessen -- gefunden bei der
aktiven Suche nach weiteren Instanzen desselben Musters, s.
project_stefanie_grace_technik.md). */
.story__heading-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 28px;margin-bottom:clamp(24px, calc(21.853px + 0.5964vw), 30px);}
.story__heading{
font-family:var(--font-heading);
font-weight:700;
font-size:clamp(1.0703rem, 0.6329rem + 2.1869vw, 2.5rem);
line-height:clamp(1.4888rem, 0.9821rem + 2.5335vw, 3.145rem);
letter-spacing:4px;
text-transform:uppercase;
margin:0;
}
/* Fluid-Nachrunde 2026-08-12: font-size/line-height waren fix (2.5rem=40px Boden ab 768px,
line-height erbte main.css' generischen 1.45-Body-Ratio statt einer eigenen Formel) --
Original ".story__heading-script" (Script-Font "Meine Geschichte") waechst durchgaengig:
font-size 27.8361px@375, 32.7655px@768, 35.9764px@1024, 40.2661px@1440+; line-height
23.9541px@375, 27.4889px@768, 29.7905px@1024, 32.8664px@1440+ (beide live nachgemessen,
kleinste-Quadrate-Fit ueber alle 4 Punkte, <0.4px Restfehler). Die separate
@media(max-width:600px){font-size:2rem} weiter unten wurde entfernt -- sie ueberschrieb den
neuen Clamp bei kleinen Breiten wieder mit einem fixen 32px-Wert. */
.story__heading-script{
font-family:var(--font-script);
font-weight:700; /* Fix 2026-08-12 (spaeter, MINOR-Befund): live gegen stefanie-grace.com/grace/
nachgemessen, "Meine Geschichte" (Hollins-Script-Font) ist fett (700), nicht regular -- war
faelschlich 400. */
font-size:clamp(27.8361px, calc(23.6513px + 1.171vw), 40.2661px);
line-height:clamp(23.9541px, calc(20.9538px + 0.8396vw), 32.8664px);
margin:0;
}
.story__text p{font-size:17px;line-height:1.45;margin:0 0 1.4em;}
/* Fix 2026-08-12 (pingelige-UX-Audit, HOCH-Punkt): war display:block/list-style:none (globaler
ul-Reset in main.css greift ungebremst durch) — Original nutzt Automatic.css' Pfeil-Bullet-Regel
".brxe-text ul, .nice-list" (1:1 aus automatic-custom-css.css auf stefanie-grace.com gezogen,
nicht geschaetzt): 2-spaltiges Grid, grid-gap .2rem, li mit margin-left 1rem/padding-left .5rem,
Pfeil ueber ::marker{content:"→"}. Bei 9 Punkten fuellt der Default-row-flow 5 links/4 rechts
(deckt sich exakt mit dem gemeldeten Befund). list-style:disc explizit gesetzt, da main.css'
globaler ul-Reset (list-style:none) sonst den ::marker komplett unterdrueckt (Spec-Verhalten,
nicht nur Browser-Default). */
.story__text ul{
display:grid;
grid-template-columns:1fr 1fr;
grid-gap:.2rem;
margin:1rem 0 1.4em;
padding:0;
list-style:disc;
}
.story__text li{font-size:17px;line-height:1.45;margin:0 0 0 1rem;padding:0 0 0 .5rem;}
.story__text li::marker{content:"→";margin-left:1rem;}
/* Fix 2026-08-12 (pingelige-UX-Audit, HOCH-Punkt): war zentriert/kursiv/blass-beige/800px/25.6px —
praktisch jedes Attribut wich ab. Original setzt am blockquote GAR KEINE eigene Typografie,
sondern erbt Bricks' Browser-Default-Reset (frontend-light-layer.min.css: font-size:1.3em,
font-family Georgia) plus automatic-custom-css.css' einzige Override-Regel (border-left:6px
solid var(--secondary); padding-left:15px) — beides live per getMatchedCSSRules-Scan auf
stefanie-grace.com/grace/ verifiziert, nicht geschaetzt. 1.3em (statt fixer clamp()-Werte) laesst
die Groesse automatisch mit dem body-Grundschriftgrad mitlaufen (22.1px bei 17px-Body,
20.8194px bei 16px-Body @375px — exakter Match beider Original-Messpunkte). line-height der
Original- folgt ebenfalls keiner festen Ratio, sondern automatic-bricks.css' generischer
"p,li{line-height:calc(6px + 2ex)}"-Regel (ex-Einheit = Georgia-x-Hoehe) — 1:1 uebernommen statt
gefittet. Keine eigene max-width mehr (Original hat keine — blockquote fuellt einfach den
1100px-.container wie die umgebenden
, "width:1100px" im Report ist die Container-, keine
Blockquote-Eigenbreite). */
.story__quote{
margin:15px 0;
text-align:left;
font-family:georgia,"Times New Roman",times,serif;
font-style:normal;
font-weight:400;
font-size:1.3em;
color:#000;
border-left:6px solid var(--secondary);
padding-left:15px;
}
.story__quote p{margin:0;line-height:calc(6px + 2ex);}
@media (max-width:1239px){
.story__heading-row{flex-direction:column;gap:6px;}
}
@media (max-width:600px){
.zitat-stoerer__container{flex-direction:column;text-align:center;}
/* .story__heading-script{font-size:2rem;} entfernt (Fluid-Nachrunde 2026-08-12): ueberschrieb
den neuen fluiden Clamp oben (27.8361px@375) wieder mit einem fixen 32px-Wert -- der neue
Clamp deckt 375-599px bereits korrekt ab, kein Breakpoint-Override mehr noetig. */
}
/* Original-Breakpoint 1:1 aus automatic-custom-css.css (".brxe-text ul, .nice-list" @media
max-width:767px) — bewusst NICHT mit dem 600px-Block oben zusammengelegt, andere Zahl. */
@media (max-width:767px){
.story__text ul{grid-template-columns:1fr;}
}
@media (max-width:478px){
.video-playlist{grid-template-columns:1fr;}
.video-playlist__player{aspect-ratio:16/10;}
.alternator-grace__container.grid-2-1,.alternator-grace__container.grid-1-2{grid-template-columns:minmax(0,1fr);}
.alternator-grace__img-col{height:auto;}
.alternator-grace__image{height:auto;}
.alternator-grace__text-col{padding:50px 30px;}
}
.social-proof .section-label{
font-size:clamp(1.0703rem, 0.6329rem + 2.1869vw, 2.5rem);
letter-spacing:4px;
overflow-wrap:break-word;
}