/* ---- Self-hosted fonts ---- */
@font-face { font-family:"Cormorant"; font-weight:300; font-style:normal; font-display:swap; src:url("../fonts/cormorant-v24-latin-300.woff2") format("woff2"); }
@font-face { font-family:"Cormorant"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/cormorant-v24-latin-regular.woff2") format("woff2"); }
@font-face { font-family:"Cormorant"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/cormorant-v24-latin-500.woff2") format("woff2"); }
@font-face { font-family:"Cormorant"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/cormorant-v24-latin-600.woff2") format("woff2"); }
@font-face { font-family:"Cormorant"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/cormorant-v24-latin-700.woff2") format("woff2"); }
@font-face { font-family:"Cormorant"; font-weight:400; font-style:italic; font-display:swap; src:url("../fonts/cormorant-v24-latin-italic.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:300; font-style:normal; font-display:swap; src:url("../fonts/poppins-v23-latin-300.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/poppins-v23-latin-regular.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/poppins-v23-latin-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/poppins-v23-latin-700.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:800; font-style:normal; font-display:swap; src:url("../fonts/poppins-v23-latin-800.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:400; font-style:italic; font-display:swap; src:url("../fonts/poppins-v23-latin-italic.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:600; font-style:italic; font-display:swap; src:url("../fonts/poppins-v23-latin-600italic.woff2") format("woff2"); }
/* ⚠ Hollins.woff2 ist auf BEIDEN Seiten (Original UND Rebuild) tatsaechlich eine
   fehlerhaft benannte PostScript-Type1-Datei (Magic Bytes "%!PS-Adobe" statt "wOF2",
   verifiziert per Byte-Vergleich) — Browser koennen sie nicht parsen. Das Original
   faengt das unbemerkt per Mehrfach-Fallback in Bricks' bricks_font_faces auf
   (woff2->woff->ttf), hier fehlte dieser Fallback komplett (nur woff2 im src, QA-Fund)
   -> Hollins lud nirgends, stiller Rueckfall auf sans-serif. Echte .woff/.ttf-Dateien
   von stefanie-grace.com nachgezogen, gleiches Fallback-Muster wie im Original. */
@font-face { font-family:"Hollins"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/Hollins.woff2") format("woff2"), url("../fonts/Hollins.woff") format("woff"), url("../fonts/Hollins.ttf") format("truetype"); }


:root{
  --primary:#ECEAE2;
  --primary-light:#E1DED1;
  --primary-dark:#4D4832;
  --secondary:#B5AA89;
  --secondary-light:#E2DDD0; /* Kontakt-CTA-Banner-Hintergrund, 1:1 gemessen (rgb(226,221,208)) */
  --secondary-text:#B8B193; /* exakte gemessene Farbe der goldenen Ueberschriften */
  --secondary-header:#BAB091; /* eigener, minimal hellerer Goldton nur fuer Logo-Schriftzug (Header+Footer), 1:1 gemessen */
  --secondary-dark:#4E4731;
  --neutral:#000000;
  --white:#ffffff;
  --container:1100px;
  --header-edge:13.51px;
  --gutter:35px;
  --font-body:"Poppins",sans-serif;
  --font-heading:"Cormorant",serif;
  --font-script:"Hollins",sans-serif;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#000;} 
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.45;color:#000;background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,textarea{font-family:inherit;font-size:1rem;}

/* Fluid width (91vw) capped at --container (1100px) — 1:1 gemessenes Verhalten des
   Originals (stefanie-grace.com): der Content-Container hat KEIN eigenes Padding,
   der Randabstand entsteht rein aus der Differenz zwischen 91% Viewport-Breite und
   dem 1100px-Cap. Ab ca. 1210px Viewport greift nur noch der Cap (fix 1100px). */
.container{width:91%;max-width:var(--container);margin:0 auto;padding:0;}

/* Visuell versteckt, aber fuer Screenreader lesbar — genutzt auf der Kontaktseite fuer
   die Formularfelder, deren einzige sichtbare Beschriftung (wie im Original) das
   Placeholder-Attribut ist (1:1 nachgebautes Original-Verhalten: dort traegt jedes
   Feld nur ein aria-label + Placeholder, kein sichtbares <label>). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}


/* Fix 2026-08-12 (kleinere Punkte, /links/): das hier vorher stehende, veraltete
   .skip-link{top:-100px;background:#000;...}-Regelpaar (top-Offset-Hide-Mechanik) ist
   toter Code aus einer frueheren Iteration -- header.php traegt seit "Sitewide-Muster-
   Fix C" (s. project_stefanie_grace_technik.md) laengst eine eigene, korrekte, inline
   <style>-Regel (clip-rect-Hide-Mechanik, taupe/gold background:#B5AA89, passende
   #main-content/#footer-start-Ziele). Beide Regeln haben identische Selektor-
   Spezifitaet (.skip-link / .skip-link:focus); main.css wird nach dem Inline-<style>-
   Block im <head> geladen (wp_head()) und gewann dadurch per Ladereihenfolge -- der
   Skip-Link erschien beim Tab-Fokus schwarz/weiss statt taupe/gold. main.css-Regel
   ersatzlos entfernt (die inline header.php-Regel bleibt einzige, korrekte Quelle). */

/* ---- Buttons ---- */
.btn{
  display:inline-block;
  background:var(--secondary);
  color:var(--white);
  border:2px solid var(--secondary);
  padding:8.5px 21.25px;
  font-size:17px;
  font-weight:500;
  text-align:center;
  line-height:1; /* 1:1 gemessen: Button-Hoehe 38px = padding 17 + border 4 + line-height 17 (flach, nicht body-Ratio) */
  text-transform:uppercase;
  letter-spacing:3px;
  
  transition:background .3s ease-in-out,color .3s ease-in-out,border .3s ease-in-out,translate .3s ease-in-out; 
}
.btn:hover{background:var(--primary-light);color:#000;border-color:var(--primary-light);}
/* War faelschlich background:transparent;color:var(--secondary) — echte Zielfarben am
   Original gemessen: heller Beige-Hintergrund (--primary-light) + schwarzer Text, nicht
   transparent + goldener Text (Feinheiten-Audit-Fund). */
.btn--newsletter{
  text-transform:none;
  letter-spacing:.5px;
  font-weight:400;
  line-height:1.45; /* Newsletter-Absenden-Button nutzt (anders als die CTA-Buttons oben) die normale Body-Ratio, 1:1 gemessen */
  padding:8.5px 17px;
  border:none;
}
/* Icon-Variante (Kontaktseite "Jetzt anrufen"/"Schreib' mir") — im Original per
   Bricks-Icon-Setting automatisch zu einem Flex-Layout mit 10px Gap, 1:1 gemessen. */
.btn--icon{display:inline-flex;align-items:center;gap:10px;}
.btn--icon svg{width:17px;height:17px;flex-shrink:0;}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  
  position:sticky;
  top:0;left:0;right:0;
  height:70px;
  z-index:998; 
  background:rgba(0,0,0,.7);
  
  transition:background-color .2s ease,transform .4s ease;
}
.site-header__inner{
  
  max-width:none;
  margin:0;
  height:100%;
  padding:0 var(--header-edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.site-header__nav{display:flex;gap:20px;} 
.site-header__nav--right{justify-content:flex-end;align-items:center;}
.site-header__nav a{
  color:var(--white);
  font-family:var(--font-body);
  font-size:17px; /* 1:1 gemessen, war faelschlich 15px */
  font-weight:400;
  text-transform:uppercase; /* Original erreicht Grossschreibung ueber literalen Content, nicht CSS-Transform — visuell identisch, hier bewusst per CSS geloest statt Markup umzuschreiben */
  white-space:nowrap;
  
  transition:background .3s ease-in-out,color .3s ease-in-out,border .3s ease-in-out,translate .3s ease-in-out;
}
.site-header__nav a:hover{color:var(--secondary);}

.site-header__nav a.is-active{color:var(--secondary);}

.site-header__logo{
  text-align:left; /* 1:1 gemessen: Original zentriert den Logo-Block NICHT per text-align, die optische Mitte entsteht rein aus dem flex space-between */
  flex-shrink:0;
}
.site-header__logo-title{
  font-family:var(--font-heading);
  font-size:30px; /* 1:1 gemessen, war faelschlich 26px */
  color:var(--white); 
  margin:0;
  line-height:.972; /* 1:1 gemessen (29.16/30) */
  text-align:center; /* 1:1 gemessen: nur die Titelzeile ist zentriert, die Subzeile bleibt links (start) */
}
.site-header__logo-sub{
  font-family:var(--font-body);
  font-size:12px; /* 1:1 gemessen, war faelschlich 10px */
  text-transform:uppercase;
  color:var(--white); 
  margin:2px 0 0;
}

body.home .site-header__logo-title,
body.home .site-header__logo-sub{color:var(--secondary-header);}

.lang-switcher{position:relative;margin:0 0 0 8px;}
.site-header__nav--right .lang-switcher{margin-left:-6.5px;}

.lang-switcher__toggle{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;padding:4px 2px;cursor:pointer;
  color:var(--secondary);
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  text-transform:uppercase;
  transition:color .3s ease-in-out;
}
.lang-switcher__toggle:hover{color:var(--white);}
.lang-switcher__chevron{width:13px;height:13px;transition:transform .3s cubic-bezier(.4,0,.2,1);}
.lang-switcher.is-open .lang-switcher__chevron{transform:rotate(180deg);}

.lang-switcher__menu{
  position:absolute;top:calc(100% + 12px);right:0;
  min-width:88px;
  background:#fff;border-radius:12px;
  box-shadow:0 16px 40px -12px rgba(20,18,10,.32);
  padding:6px;margin:0;list-style:none;
  opacity:0;visibility:hidden;
  transform:translateY(-6px) scale(.94);
  transform-origin:top right;
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
  z-index:1000;
}
.lang-switcher.is-open .lang-switcher__menu{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
.lang-switcher__menu a.lang-switcher__item{
  display:block;padding:10px 18px;border-radius:8px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  letter-spacing:.3px;
  text-transform:none;
  color:var(--secondary-dark);
  transition:background .2s ease,color .2s ease;
  white-space:nowrap;
  text-align:center;
}
/* Alex-Feedback 2026-08-13: aktives Sprach-Item war heller Gold-Text (--secondary) auf
   weissem Panel-Hintergrund -- zu wenig Kontrast, schlecht lesbar. Umgestellt auf gefuellte
   dunkle Pille (identisches Muster wie die bereits bestehenden Sprachfilter-Pillen im
   Bibliothek-Grid, .bib2-nav__filter button.is-active), das ist auch das etablierte
   "aktiv"-Signal sitewide. */
.lang-switcher__menu a.lang-switcher__item:hover{background:var(--primary);color:var(--secondary-dark);}
.lang-switcher__menu a.lang-switcher__item.is-active{background:var(--secondary-dark);color:#fff;font-weight:700;}
.lang-switcher__menu a.lang-switcher__item.is-active:hover{background:var(--secondary-dark);color:#fff;}



@media (max-width:767px){
  .site-header__nav{display:none;}
  
  .site-header__inner{padding:0 70px 0 20px;justify-content:flex-start;} 
  .site-header__logo{max-width:100%;}
  
}



.mobile-lang-switcher{display:none;position:fixed;top:14px;right:82px;z-index:900000;}
.mobile-lang-switcher .lang-switcher{margin:0;}
@media (max-width:767px){
  .mobile-lang-switcher{display:block;}
}

@media (max-width:420px){
  .site-header__inner{padding-right:62px;}
  
  
}


.mobile-menu-toggle{
  position:fixed;
  top:14px;right:16px;
  width:56px;height:56px; /* groessere Tap-Flaeche, Icon selbst bleibt schlank */
  border-radius:0;
  background:none;
  border:none;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
  z-index:1000000;
  cursor:pointer;
}
.mobile-menu-toggle__bar{
  display:block;
  width:26px;
  height:2px;
  background:var(--white);
  border-radius:2px;
  transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .3s ease-in-out,background-color .3s ease-in-out;
}
/* Balken 1+3 drehen sich zum X, Balken 2 (Mitte) verblasst — klassischer, ruhiger Morph
   statt hartem Umschalten zwischen zwei getrennten Icons. */
.mobile-menu-toggle.is-open .mobile-menu-toggle__bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.mobile-menu-toggle.is-open .mobile-menu-toggle__bar:nth-child(2){opacity:0;transform:scaleX(0);}
.mobile-menu-toggle.is-open .mobile-menu-toggle__bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.mobile-menu-toggle.is-open{opacity:0;pointer-events:none;transition:opacity .2s ease-in-out;}

@media (max-width:767px){
  /* Muss mit dem Breakpoint des .site-header__nav-Fixes oben synchron bleiben, s. dortiger
     Kommentar (Nav-Breakpoint-Korrektur 2026-08-11). */
  .mobile-menu-toggle{display:flex;}
}

.mobile-menu-overlay{
  
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:999999;
  opacity:0;
  visibility:hidden;
  
  transition:opacity .2s cubic-bezier(.25,0,.25,1),visibility .2s cubic-bezier(.25,0,.25,1);
  pointer-events:none;
}
.mobile-menu-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.mobile-menu-overlay__panel{
  position:fixed;
  top:0;right:0;bottom:0;
  width:300px; 
  background:var(--primary-light); /* 1:1 gemessen rgb(226,221,208) ≈ --primary-light */
  display:flex;
  flex-direction:column;
  
  padding:107px 32px 32px;
  overflow-y:auto;
  transform:translateX(100%);
  
  transition:transform .2s cubic-bezier(.25,0,.25,1);
}
.mobile-menu-overlay.is-open .mobile-menu-overlay__panel{transform:translateX(0);}
.mobile-menu-overlay,
.mobile-menu-overlay a{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.mobile-menu-overlay__close{
  position:absolute;
  top:18px;right:20px;
  width:40px;height:40px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.mobile-menu-overlay__close span{
  position:absolute;
  top:50%;left:50%;
  width:22px;height:3px; /* dicker als der 2px-Hamburger-Balken im Header — "dickes X"
    1:1 wie im Original (Bricks-Offcanvas-Close, 40x24px Klickflaeche gemessen). */
  background:#000;
  border-radius:2px;
}
.mobile-menu-overlay__close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);}
.mobile-menu-overlay__close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg);}
.mobile-menu-overlay nav{
  display:flex;
  flex-direction:column;
  align-items:flex-start; /* 1:1 gemessen: Original ist linksbuendig (textAlign:start), nicht zentriert */
  /* ⭐ Gezielter Fix (2026-08-12, "pingeliger UX-Experte"): war hartes 20px (Muster A,
     Fixed-px). Original-Offcanvas-Liste (UL.list--none, echtes Bricks-Nav-Widget) hat
     row-gap:24.0895px@375px -- exakter numerischer Treffer mit der bereits sitewide etablierten
     Automatic.css-Formel var(--space-m) (clamp(1.5rem,calc(0.5964214712vw+1.365805169rem),
     1.875rem), 24.09-30px@375-1440px, s. auch /links/-Zitat-Abstand + Homepage-Hero-Bottom-Pinnung
     in dieser Doku). Live getComputedStyle auf beiden Seiten bestaetigt: top-to-top-Abstand
     Original 47,625px@375 konstant zwischen allen 10 Items vs. vorher 43,19px im Nachbau. Eigener
     Namensraum vermieden (kein sitewide --space-m in main.css definiert), Formel 1:1 als
     Rohwert uebernommen wie an den anderen bereits dokumentierten Stellen dieses Rebuilds. */
  gap:clamp(1.5rem, calc(0.5964214712vw + 1.365805169rem), 1.875rem);
  width:100%;
}
.mobile-menu-overlay a{
  font-family:var(--font-body); /* 1:1 gemessen: Poppins/sans-serif, NICHT Cormorant/serif */
  
  font-size:16px;
  font-weight:400;
  color:#000; /* 1:1 gemessen: reines Schwarz auf dem cremefarbenen Panel */
  text-transform:none; /* 1:1 gemessen: KEINE Versalien im Original-Offcanvas */
  letter-spacing:normal;
  text-align:left;
  padding:0;
  transition:color .3s ease-in-out;
}
.mobile-menu-overlay a:hover,.mobile-menu-overlay a:focus-visible{color:var(--secondary-dark);}
.mobile-menu-overlay .lang-switcher{margin:8px 0 0;}
.mobile-menu-overlay .lang-switcher__toggle{color:var(--secondary-dark);}
.mobile-menu-overlay .lang-switcher__toggle:hover{color:#000;}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  height:100vh;
  min-height:560px;
  overflow:hidden;
}
.hero__img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 30%;
}
.hero__overlay{
  position:absolute;inset:0;
  
  background:linear-gradient(rgba(0,0,0,.1) 60%,rgba(0,0,0,.7) 100%);
}
.hero__heading{
  position:absolute;
  left:0;right:0;
  bottom:9%;
  text-align:center;
  color:var(--white);
  font-family:var(--font-heading);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:10px; /* 1:1 gemessen, war faelschlich 6px */
  /* H1-Zeilenumbruch-Bug (2026-08-11): clamp(1.6rem,4.2vw,2.96rem) war nie 1:1 gemessen —
     bei 375px 25.6px statt echter 18.438px, dadurch brach die Ueberschrift auf 3 statt 2
     Zeilen. Echte Formel dicht abgetastet (320-1600px): fluid zwischen 360px(18px) und
     1366px(47.3719px), Steigung 2.9197vw + 7.489px Achsenabschnitt. */
  font-size:clamp(1.125rem,calc(0.468rem + 2.92vw),2.96rem);
  line-height:1.4;
  padding:0 20px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}


.hero-sub{
  position:relative;
  height:100vh;
  min-height:480px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  
  margin-top:-70px;
}
.hero-sub__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  
  object-position:50% 50%;
}
@media (max-width:478px){
  .hero-sub__img{object-position:68.49% 48.99%;}
}
.hero-sub__overlay{
  position:absolute;inset:0;
  
  background-image:linear-gradient(45deg,rgba(0,0,0,.7),rgba(0,0,0,0));
}
.hero-sub__content{
  position:relative;z-index:1;
  text-align:center;
  color:var(--white);
  padding:0 24px;
  max-width:760px;
  margin-top:70px; /* kompensiert .hero-sub margin-top:-70px oben, haelt Titel/Lede visuell exakt an derselben Position */
}
.hero-sub__heading{
  font-family:var(--font-heading);
  font-weight:700;
  text-transform:uppercase;
  /* Fluid-Fit aus 7 gemessenen Breakpoints (375->41.75px .. 1440+->60.4px, danach flach) */
  font-size:clamp(2.61rem,2.2rem + 1.8vw,3.775rem);
  line-height:1.4; /* 1:1 gemessen (84.56/60.4) */
  margin-bottom:16px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero-sub__lede{
  font-family:var(--font-body);
  font-weight:400;
  /* Fluid-Fit aus 7 gemessenen Breakpoints (375->19.25px .. 1440+->22.66px, danach flach) */
  font-size:clamp(1.2rem,1.13rem + 0.32vw,1.42rem);
  line-height:1.36; /* 1:1 gemessen (30.84/22.66) */
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}

/* ==========================================================================
   Intro / "Hi, ich bins Grace"
   ========================================================================== */
.intro{padding:90px 0 60px;}
.intro__top{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  gap:0;
  margin-bottom:70px;
}
.intro__box{
  background:var(--primary);
  padding:60px 50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.intro__heading{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(1.44rem,calc(1.312rem + 0.64vw),1.8879rem);
  line-height:1.2;
  letter-spacing:4px;
  color:#000;
  margin:0;
}
.intro__box .script{
  font-family:var(--font-script);
  font-size:48px;
  font-weight:400;
}
.intro__top img{width:100%;height:100%;object-fit:cover;min-width:0;}

.intro__claim{
  text-align:center;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:clamp(1.5rem,3vw,2.5rem);
  color:var(--secondary-text);
  line-height:.92; /* 1:1 gemessen (37.08/40.27), war faelschlich 1.3 */
  max-width:900px;
  margin:0 auto 50px;
}

.intro__bottom{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:60px;
  align-items:start;
}
.intro__bottom img{width:100%;}
.intro__bottom p{margin-bottom:20px;} /* font-size/line-height: erbt jetzt den korrekten Body-Wert (17px/1.45), 1:1 gemessen */
.intro__bottom p:last-child{margin-bottom:0;}

/* ==========================================================================
   Certification strip
   ========================================================================== */
.cert-strip{
  background-image:url("../img/sandig_bg.webp");
  background-size:cover;
  background-position:center;
  padding:70px 0;
  /* 2026-08-12 (Alex-QA "Logos zu klein"): fluide Gap-Formel 1:1 aus dem Original gemessen
     (getComputedStyle .logo-grid-Elternselektor, 768/1024/1440/1920px: 26.4334/27.9602/30/30px)
     — identisch zur bereits sitewide etablierten Automatic.css-Formel clamp(24px,calc(21.853px +
     0.5964vw),30px) (front-page.php .hero__content padding-block, archive-retreat.php --grid-gap,
     u.a.). Als Custom-Property auf dem gemeinsamen Ancestor, damit __inner UND __badges dieselbe
     Formel referenzieren statt sie zu duplizieren. */
  --cert-gap:clamp(24px, calc(21.853px + 0.5964vw), 30px);
}
.cert-strip__inner{
  display:grid;
  /* 2026-08-12 (Alex-QA "Logos zu klein"): war 3 Spalten (1fr 2fr 1fr) fuer nur 2 Kind-Elemente
     (.cert-strip__label + .cert-strip__badges) -- die 3. Spalte blieb dadurch permanent leer und
     stahl bei jeder Breite ein volles 1fr der Badges-Spalte (bestaetigt per getComputedStyle auf
     beiden Seiten, 768-1920px: Original-Badges-Spalte 501.9-802.5px vs. Rebuild nur 309.4-510px,
     ca. 40% schmaler -- daher wirkten die eigentlich korrekt grossen Logos "zu klein"). Original
     ist ein echtes 2-Spalten-Grid mit Verhaeltnis exakt 1:3 (267.5:802.5px @1440, an allen 4
     geprueften Breakpoints 768-1920px bestaetigt exakt 3.000). */
  grid-template-columns:1fr 3fr;
  gap:var(--cert-gap);
  align-items:center;
}
.cert-strip__label{
  font-family:var(--font-heading);
  font-size:30px; /* 1:1 gemessen, war faelschlich 19px */
  line-height:.97; /* 1:1 gemessen (29.31/30.2) */
}
.cert-strip__badges{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--cert-gap); /* war fix 28px 40px -- Original nutzt fuer die innere Badge-Gap dieselbe
    fluide Formel wie fuer die aeussere __inner-Gap (live identisch gemessen), 1:1 uebernommen */
  align-items:center;
  justify-items:center;
}
/* Badge-Groesse (2026-08-11): war max-height:70px — Original constraint die Logos per
   Spaltenbreite (echtes 3-Spalten-Grid auf JEDEM Breakpoint), nicht per Hoehe. Jedes Logo
   behaelt seine native Groesse (width/height-Attribute im Markup) und schrumpft nur wenn
   die Spalte enger ist — Standard-Responsive-Image-Pattern reproduziert das exakt. */
.cert-strip__badges img{width:auto;height:auto;max-width:100%;}

/* ==========================================================================
   Section heading label (RETREATS / MIND BODY EATING / ERFAHRUNGEN)
   ========================================================================== */
.section-label{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:40px; /* 1:1 gemessen, war faelschlich 30px */
  line-height:1; /* 1:1 gemessen (40/40, flach) */
  letter-spacing:4px;
  text-transform:uppercase;
}
/* Section-Label-Fluid-Fix (2026-08-11, NUR Homepage-Instanzen): .section-label ist eine
   sitewide-Klasse (auch von der Inneres-Kind-Meditation-Seite genutzt) -- deshalb hier
   bewusst ueber die drei homepage-spezifischen Eltern-Container gescoped statt die
   Basisklasse direkt zu aendern. Original-Messung (.intro-grace__heading): font-size ist
   dort NICHT fest 40px sondern fluid, gleiches Floor/Cap-Muster wie die Hero-Ueberschrift
   (18px Floor ab <=360px, 40px Cap ab >=1366px, dazwischen ~2.187vw + 0.633rem). Ohne
   diesen Fix ueberschritt "ERFAHRUNGEN"/"RETREATS"/"MIND BODY EATING" bei 320-480px seine
   Grid-Spalte drastisch (Regressions-Fund nach dem minmax(0,1fr)-Fix). */
.retreats__top .section-label,.mbe__top .section-label,.erfahrungen__top .section-label{
  font-size:clamp(1.125rem,calc(0.633rem + 2.187vw),2.5rem);
  overflow-wrap:anywhere;
}

/* ==========================================================================
   Retreats teaser
   ========================================================================== */
.retreats{padding:90px 0 0;}
.retreats__top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  margin-bottom:40px;
}
.retreats__top img{width:100%;min-width:0;}
.painpoints{
  background:var(--primary-light);
  padding:30px 45px;
  margin-bottom:70px;
}
.painpoints li{
  padding:6px 0;
} /* font-size erbt jetzt 17px vom Body, 1:1 gemessen */
.painpoints li span.arrow{margin-right:8px;color:#000;}

.retreats__discover{
  /* 1:1 gemessen: Original zentriert diesen Block NICHT — war faelschlich
     text-align:center, siehe QA-Befund "ein Absatz zentriert statt linksbuendig". */
  padding:0 20px 70px;
}
.retreats__discover h2{
  font-family:var(--font-heading);
  font-weight:400;
  font-size:clamp(1.8rem,4.4vw,3.52rem); /* Max 56.37px 1:1 gemessen, war faelschlich 3.1rem/49.6px */
  line-height:.878; /* 1:1 gemessen (49.52/56.37) */
  color:var(--secondary-text);
  margin-bottom:24px;
}
.retreats__discover h2 .deco{font-family:var(--font-script);font-weight:400;}
.retreats__discover p{
  max-width:900px;
  font-size:17px; /* 1:1 gemessen, war faelschlich 16px */
} /* margin:0 auto entfernt (nicht mehr zentriert), line-height erbt Body-Default */

/* ==========================================================================
   Video CTA banner
   ========================================================================== */
.video-cta{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:var(--white);
}
.video-cta__media{position:absolute;inset:0;z-index:0;}
.video-cta__media video,.video-cta__media img{
  width:100%;height:100%;object-fit:cover;
}
.video-cta__overlay{
  position:absolute;inset:0;
  
  background:linear-gradient(45deg,rgba(0,0,0,.5),rgba(0,0,0,0));
}
.video-cta__content{
  position:relative;z-index:1;
  /* 700px statt 520px: bei korrekter 40px-Schriftgroesse (s.u.) braucht die
     Ueberschrift "Schau dir die Retreats an" ca. 660px in einer Zeile (1:1
     gemessen) — bei 520px brach sie faelschlich auf 2 Zeilen um. */
  max-width:700px;
  padding:60px 0;
}
.video-cta__heading{
  font-family:var(--font-heading);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:4px; /* 1:1 gemessen, war faelschlich 3px */
  font-size:clamp(1.8rem,3.4vw,2.5rem); /* Max 40px 1:1 gemessen, war faelschlich 2rem/32px */
  line-height:1.258; /* 1:1 gemessen (50.32/40) */
  margin-bottom:18px;
}
.video-cta__content p{
  font-size:17px; /* 1:1 gemessen, war faelschlich 16px */
  margin-bottom:26px;
} /* font-weight 600 entfernt (Original ist regulaer 400), line-height erbt Body-Default */

/* ==========================================================================
   Mind Body Eating teaser
   ========================================================================== */
.mbe{padding:90px 0 0;}
.mbe__top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  margin-bottom:60px;
}
.mbe__top img{width:100%;min-width:0;}
.mbe__bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
  padding-bottom:90px;
}
.mbe__bottom h2{
  font-family:var(--font-heading);
  font-weight:400;
  font-size:clamp(1.8rem,4.4vw,3.52rem); /* Max 56.37px 1:1 gemessen, war faelschlich 2.9rem/46.4px */
  line-height:.878; /* 1:1 gemessen (49.52/56.37) */
  color:var(--secondary-text);
  margin-bottom:24px;
}
.mbe__bottom p{font-size:17px;margin-bottom:26px;} /* war faelschlich 16px/1.7, line-height erbt Body-Default */

/* ==========================================================================
   Erfahrungen / Testimonials
   ========================================================================== */
.erfahrungen{background:var(--primary);padding:80px 0;}
.erfahrungen__top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  margin-bottom:50px;
}
.erfahrungen__top img{width:100%;min-width:0;}
/* min-width:0 noetig: als direktes Grid-Item hat ein <img> per CSS-Default
   min-width:auto, d.h. der Browser laesst die Spur nie schmaler werden als die
   intrinsische Bildbreite (643px) — bei 320px-Viewports lief das trotz width:100%
   in ~337px Ist-Breite = 31px Overflow ueber den Viewport hinaus (QA-Fund). */
.testimonial{
  background:var(--white);
  padding:40px 45px;
  position:relative;
  border-radius:10px; /* 1:1 gemessen, fehlte komplett */
  box-shadow:-3px 2px 40px 0 rgba(128,144,174,.2); /* 1:1 gemessen, fehlte komplett */
  margin-bottom:16px; /* Platz fuer die Sprechblasen-Spitze unten */
}

.testimonial::after{
  content:"";
  position:absolute;
  left:auto;
  right:4rem;
  bottom:-.4em;
  width:0;height:0;
  background:transparent;
  border-left:.5em solid transparent;
  border-right:.5em solid transparent;
  border-top:.5em solid var(--white);
  clip-path:none;
  box-shadow:none;
}
.testimonial p{font-size:17px;margin-bottom:4px;} /* war faelschlich 15px/1.7, line-height erbt Body-Default */
.testimonial strong{display:block;font-size:17px;margin-bottom:10px;}
.testimonial__name{
  text-align:right;
  margin-top:18px;
  font-weight:400;
}
.testimonial__nav{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
}
.testimonial__nav button{
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.25);
  background:transparent;
  display:flex;align-items:center;justify-content:center;
}

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter{background:var(--primary);padding:0 0 70px;}
.newsletter__inner{
  display:grid;
  /* war eine fixe 300px-Spalte — Original ist ein echtes 1:3-Verhaeltnis (268:803px bei
     1920, 197:592px bei 900px, immer exakt 25/75), skaliert mit statt einzufrieren. */
  grid-template-columns:minmax(0,1fr) minmax(0,3fr);

  gap:30px;
  align-items:normal; /* 2026-08-12: war faelschlich center, Original zentriert nie - Foto
     ragt bei schmaleren Breiten (600-1440px, wo die Textspalte hoeher ist als das Foto)
     sichtbar zu weit nach oben/unten aus der Zeile, statt wie im Original oben buendig
     mit der Ueberschrift zu sitzen (kontakt/-Bugreport, per getBoundingClientRect an 7
     Breakpoints verifiziert: 0.000px Restfehler nach diesem Fix, vorher bis zu 80px Offset). */
}
.newsletter__inner img{width:100%;min-width:0;}
.newsletter h3{

  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(1.245rem,1.245rem + 0.468vw,1.6663rem);
  line-height:1.31; /* 1:1 gemessen (34.87/26.66), war faelschlich Body-Default (1.45) */
  text-transform:uppercase;
  margin-bottom:clamp(42.633px, calc(33.734px + 2.472vw), 67.501px); /* Sitewide-Root-Cause-
    Fix 2026-08-12 (Runde 6 Zentralisierung): war fix 18px, an >=4 Seiten (danke/bestaetigung/
    mind-body-eating/datenschutz) unabhaengig als derselbe Bug page-scoped gefixt -- Formel
    hier 1:1 aus dem `/danke/`-Fund uebernommen (43.02/59.05/67.5px @375/1024/1440, <0.02px
    Restfehler), jetzt zentral statt N-mal pro Seite. */
} /* letter-spacing entfernt, Original hat keinen */
.newsletter p{font-size:17px;margin-bottom:26px;max-width:100%;} /* war faelschlich 16px/1.6, line-height erbt Body-Default.
  max-width war faelschlich 620px (Sitewide-Root-Cause "Newsletter-Spalten-Breite", jetzt zentral
  gefixt statt bisher auf >=5 Seiten einzeln page-scoped umgangen -- Original hat auf
  `.footer-top__lede` KEINEN eigenen Breiten-Deckel, `max-width:100%` fuellt die bereits fluide
  `.newsletter__inner`-Textspalte 1:1). */
.newsletter form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px, calc(10.926px + 0.298vw), 15px); /* war fix 30px, Original-Formular-Gap ist
    fluid 12px-Boden@<=360px bis 15px-Deckel@>=1366px (19-Punkte-Sweep, `/bestaetigung/`-Fund) --
    zentral statt page-scoped, Teil desselben "Newsletter-Spalten-Breite"-Root-Cause. */
  margin-bottom:24px;
  max-width:100%; /* war fix 700px, Relikt von vor dem bereits fluiden `.newsletter__inner`-Umbau
    -- Original hat hier ebenfalls keinen eigenen Deckel. */
}
.newsletter label{display:block;font-size:17px;margin-bottom:6px;} /* war faelschlich 15px */
.newsletter input{
  width:100%;
  border:none;
  border-bottom:1px solid #000;
  background:transparent;
  padding:6px 0; /* war faelschlich 6px 2px - Original hat 0px horizontal an allen Breiten (375-1920px real gemessen) */
  font-size:clamp(16px,calc(15.642px + 0.0994vw),17px); /* war starr 17px, Original ist fluid 16.015px@375px bis 17px ab ~1366px - starrer Wert liess "Deine Mailadresse" bei 375px fast an den Feldrand stossen */
  line-height:1.45;
}
.newsletter input:focus{outline:none;border-bottom-color:var(--secondary);}

.newsletter input::placeholder{color:#000;opacity:1;}
.newsletter form button{justify-self:start;}

.social-icons{
  /* gap 2026-08-12 (Alex-QA "Icons waren vorher schoener"): war 22px, Original-Footer-Icon-Reihe
     (.footer-top__social, echtes Flexbox, live per getComputedStyle bestaetigt) nutzt 30px. */
  display:flex;justify-content:center;gap:30px;padding:40px 0 0;
}
.social-icons a{
  display:block;
  color:var(--secondary);
  transition:color .3s ease-in-out,transform .3s ease-in-out;
}
.social-icons a:hover{color:#C6BEA3;transform:translateY(-3px);}
.social-icons svg{width:32px;height:32px;}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--primary);padding:70px 0 0;} /* 2026-08-13: die 50px padding-bottom hier war der eigentliche Bug hinter dem wiederholt gemeldeten "weisser/cremefarbener Leerraum unter dem Footer" -- .site-footer__bottom (die schwarze Bar) ist das LETZTE Kind hier drin, padding-bottom auf dem Wrapper erzeugt also sichtbaren Creme-Nachlauf NACH der schwarzen Bar, nicht davor. Der echte Abstand VOR der Bar kommt jetzt korrekt von margin-top auf .site-footer__bottom selbst (44px, s. dort). */ /* Sitewide-Root-Cause-Fix 2026-08-12
  (Runde 6 Zentralisierung): padding-bottom war fix 40px, lag NACH `.site-footer__bottom` (dem
  schwarzen Copyright-Balken) und liess den beigen `.site-footer`-Hintergrund darunter
  durchscheinen -- bereits unabhaengig auf /datenschutz/ als sitewide-Bug identifiziert+page-
  scoped umgangen (`.page-id-11{padding-bottom:0}`). Original: `<footer>` endet exakt auf
  `document.body.scrollHeight`, 0px Differenz an allen 4 Breakpoints -- der schwarze Balken ist
  dort das letzte sichtbare Element ohne Nachlauf. padding-top:70px (Abstand Menues-Spalte zum
  Balken) bleibt unangetastet, ausserhalb dieses Befunds. */
.site-footer__inner{
  display:grid;
  
  grid-template-columns:1fr 2fr auto;
  gap:20px;
}
.site-footer__logo-title{
  font-family:var(--font-heading);
  font-size:28px; 
  line-height:.986;
  color:#000; 
  text-align:center;
  margin-bottom:4px;
}
.site-footer__logo-sub{
  font-size:12px;
  text-transform:uppercase;
  color:#000; 
  text-align:center;
}
.site-footer__links{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:20px;
  
  row-gap:30px;
}
.site-footer__links a{
  display:block;
  font-size:17px;
  text-align:left; 
  
  transition:background .3s ease-in-out,color .3s ease-in-out,border .3s ease-in-out,translate .3s ease-in-out;
}
.site-footer__links a:hover{color:#C6BEA3;}

.site-footer__lang{align-self:start;}

.site-footer__lang .lang-switcher{margin-left:0;}
.site-footer__bottom{
  background:#000;
  color:var(--white);
  text-align:center;
  /* Sitewide-Root-Cause-Fix 2026-08-12 (Runde 6 Zentralisierung, "Footer-Copyright-Bar nicht
     fluid"): war komplett starr (padding:16px 0, font-size:14px, margin-top:50px) -- unabhaengig
     auf /links/, /bestaetigung/, /mind-body-eating/, /datenschutz/ gefunden und je einzeln
     page-scoped umgangen, statt hier einmal zentral geloest. Original (`.footer-bottom` +
     `.footer-bottom__container`, per Ancestor-Chain-Dump + 15-Punkte-Breakpoint-Sweep gegen
     stefanie-grace.com/kontakt/ live vermessen, 320-1920px):
       - font-size folgt exakt dem bereits sitewide etablierten `--text-m`-Fluid-Token
         (16px@<=360px bis 17px@>=1366px) -- war starr 14px.
       - padding-top/-bottom folgt einer eigenen 360-1366px-Fluid-Formel (13.5068px@<=360px bis
         20px@>=1366px, exakter linearer Fit aus 11 Messpunkten) -- war starr 16px.
       - margin-top ist auf dem Original durchgehend 0px an JEDER Breite (der schwarze Balken
         sitzt direkt anschliessend an die Links/Newsletter-Sektion, kein Nachlauf) -- war starr
         50px, erzeugte einen zusaetzlichen beigen Spalt VOR dem Balken. */
  padding:clamp(13.5068px, calc(11.183px + 0.6454vw), 20px) 0;
  font-size:clamp(1rem, calc(0.0994035785vw + 0.9776341948rem), 1.0625rem);
  /* Alex-Direktive 2026-08-13 (wiederholt+dringend gemeldet, "kein Abstand nach unten"):
     0px hier war eine bewusste 1:1-Originaltreue-Entscheidung (echtes Original misst an
     jeder Breite 0px), aber Alex will das UNABHAENGIG vom Original sichtbar aufgeloest
     haben -- klare, wiederholte Anweisung geht hier vor Pixel-Paritaet. Fixer, grosszuegiger
     Abstand statt 0. */
  margin-top:44px;
}



.back-to-top{
  position:fixed;
  right:40px;bottom:40px;
  width:60px;height:60px;
  border-radius:50%;
  background:transparent;
  color:#000;
  border:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:10px 10px 30px rgba(0,0,0,.12); /* 1:1 gemessen */
  cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease-in-out,transform .3s ease-in-out,visibility .3s;
  z-index:500;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:transparent;} /* 1:1 gemessen: kein Hover-Farbwechsel im Original */
.back-to-top__progress{position:absolute;inset:0;width:100%;height:100%;transform:rotate(0deg);overflow:visible;}
.back-to-top__progress-bg{fill:none;stroke:#e5e5e5;stroke-width:6;}
.back-to-top__progress-line{fill:none;stroke:var(--secondary);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .1s linear;}
.back-to-top__icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--secondary);} 


/* ==========================================================================
   Page hero — schlichter Titelbanner fuer alle Unterseiten (Legal/Content/Kontakt).
   Nutzt dieselben Typografie-Tokens wie die Startseite (section-label/heading-Fonts).
   ========================================================================== */
.page-hero{
  background:var(--primary-dark);
  padding:150px 0 50px;
  color:var(--white);
}
.page-hero__eyebrow{
  font-family:var(--font-body);
  font-size:14px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--secondary);
  text-shadow:0 2px 18px rgba(0,0,0,.35);
  margin-bottom:10px;
}
.page-hero h1{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:clamp(2rem,4vw,3rem);
  letter-spacing:1px;
}
.page-hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
  margin-top:16px;
  font-size:16px;
  color:var(--primary);
}
.page-hero__lang-badge{
  
  border:1px solid var(--secondary);
  color:var(--secondary);
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  padding:2px 9px;
  border-radius:3px;
  text-transform:uppercase;
}

/* ==========================================================================
   Content page — generischer Wrapper fuer Legal-/Info-Seiten und den
   Fliesstext-Teil von Retreat/Event-Single-Seiten (siehe grace_render_blocks()).
   ========================================================================== */
.content-page{padding:60px 0 100px;}
.content-page--narrow{max-width:800px;margin:0 auto;}
.content-page h2,.content-page h3{margin-top:2em;margin-bottom:.6em;font-family:var(--font-heading);}
/* font-family ergaenzt (QA-Fund): manche Original-Ueberschriften ("Stell dir vor…" auf
   /mind-body-eating/, "Kakao Zeremonie"/"Live Musik mit Nana Falkner" auf /event/wild-
   woman-rising/) wurden beim Extrahieren nicht als eigener heading-Block erkannt,
   sondern blieben als rohes <h2>/<h3> INNERHALB eines text-Blocks stecken — dadurch
   griff nie die .content-blocks__heading-Klasse (Cormorant), sondern nur dieser
   generische Selector, dem bislang die Schriftart fehlte -> Fallback auf Poppins
   (Body-Font). Diese generische Fix-Stelle deckt jedes so verschachtelte Heading
   sitewide ab, nicht nur die 3 von der QA konkret gefundenen. */

.content-page h2:first-child,.content-page h3:first-child{margin-top:0;}
.content-page p{margin-bottom:1.2em;}
.content-page p:last-child{margin-bottom:0;}
.content-page ul,.content-page ol{margin:0 0 1.2em 1.4em;padding:0;}
.content-page a:not(.btn){text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;}
.content-page a:not(.btn):hover{color:var(--secondary);}
/* overflow-wrap:anywhere noetig fuer /datenschutz/: lange rohe Google/Facebook-
   Privacy-URLs ohne natuerliche Umbruchstellen erzeugten Horizontal-Scroll auf
   fast allen Breakpoints ausser dem breitesten (QA-Fund). */

/* Brevo-Opt-in-Embed (aktuell nur /inneres-kind-meditation/, siehe page-inneres-kind-
   meditation.php) — schlichter Rahmen passend zum Rest der Content-Page, Iframe-Hoehe
   auf die Original-Formularhoehe abgestimmt, responsiv voll breit. */
.optin-form{margin:2.5em 0 1em;padding:20px;background:var(--primary);border-radius:6px;}
.optin-form__iframe{display:block;width:100%;max-width:540px;height:660px;margin:0 auto;border:0;}
@media(max-width:480px){.optin-form__iframe{height:720px;}}

.content-blocks__heading{
  font-family:var(--font-heading);
  font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  color:var(--secondary-text);
  margin:2em 0 .6em;
}
.content-blocks__heading:first-child{margin-top:0;}
.content-blocks__text{overflow-wrap:anywhere;}
/* Genereller Overflow-Schutz (QA-Fund /retreat/austria-retreat/ 320px): manche
   Original-Absaetze bestehen aus vielen einzeln in <b>-Tags gewickelten Woertern
   (Word/Docs-Copy-Paste-Artefakt) kombiniert mit haendischen <br/>-Umbruechen — an
   manchen Breakpoints reicht der normale Wort-Umbruch dadurch nicht zuverlaessig aus.
   overflow-wrap:anywhere auf dem gesamten Textblock (nicht nur auf <a> wie beim
   Datenschutz-Fix oben) faengt das robust ab, unabhaengig von der genauen
   Tag-Verschachtelung. */
.content-blocks__text p{margin-bottom:1.2em;font-size:17px;line-height:1.7;}
.content-blocks__text p:last-child{margin-bottom:0;}
.content-blocks__text .deko-xxl{font-family:var(--font-script);font-size:1.5em;}
.content-blocks__img{width:100%;border-radius:6px;margin:1.5em 0;}
.content-blocks__gallery{
  display:grid;
  /* min(260px,100%) statt hart 260px, gleiches Muster/gleicher Grund wie beim
     .cpt-grid-Fix oben: verhindert Overflow bei sehr schmalen Viewports. */
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:16px;
  margin:1.5em 0;
}
.content-blocks__gallery img{width:100%;height:280px;object-fit:cover;border-radius:6px;min-width:0;}
/* min-width:0 (QA-Fund /event/mindful-playfight/ 320px, Zertifikats-Badges rechts
   abgeschnitten): gleiche CSS-Grid-Falle wie bei .erfahrungen__top img weiter oben —
   <img> als direktes Grid-Item ohne explizite HTML-width/height-Attribute lässt die
   Spur nicht unter die intrinsische Bildbreite schrumpfen. */

/* ==========================================================================
   Bibliothek Archiv-Grid
   ========================================================================== */
.bib-filter{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:30px 0 40px;
}
.bib-filter a{
  display:inline-block;
  padding:6px 16px;
  border:1px solid var(--secondary);
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.bib-filter a.is-active{background:var(--secondary);color:var(--white);}
/* 2026-08-13: /bibliothek-2/-Entwurf war ein separater Review-Prototyp fuer ein
   Restyling dieses Grids -- Alex hat ihn freigegeben ("mach bibliothek-2 zu bibliothek"),
   Optik hier direkt in die echten .bib-card/.bib-grid-Klassen uebernommen (statt einer
   parallelen .bib2-*-Klasse), damit sowohl das Archiv-Grid HIER als auch die "Weitere
   Videos"-Sektion auf den Einzelseiten (single-bibliothek.php, teilt sich dieselbe
   grace_bib_render_card()-Funktion) einheitlich von der Aufwertung profitieren. */
.bib-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:28px 24px;
  padding-bottom:20px;
}
.bib-card{
  display:block;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 1px 3px rgba(20,18,10,.06);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.bib-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(20,18,10,.14);}
.bib-card__thumb{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:linear-gradient(135deg,var(--primary-light) 0%,var(--secondary-light) 100%);
}
/* Play-Icon-Platzhalter: die meisten Bibliothek-Eintraege haben (wie im Original) kein
   eigenes Vorschaubild -- ein leerer Farbblock ohne jeden Hinweis wirkt wie ein Ladefehler.
   Icon liegt via z-index UNTER dem <img>, ist also nur sichtbar wenn kein Bild vorhanden ist. */
.bib-card__thumb::before{
  content:"";
  position:absolute; top:50%; left:50%;
  width:48px; height:48px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,.8);
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  z-index:2;
}
.bib-card__thumb::after{
  content:"";
  position:absolute; top:50%; left:50%;
  transform:translate(-38%,-50%);
  width:0; height:0;
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--secondary);
  z-index:2;
}
.bib-card__thumb img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:transform .5s ease;}
.bib-card:hover .bib-card__thumb img{transform:scale(1.06);}
.bib-card__dauer{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.65);
  color:var(--white);
  font-size:12px;
  padding:2px 8px;
  border-radius:3px;
  z-index:2;
}
.bib-card__title{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:18px;
  line-height:1.3;
  margin:16px 18px 8px;
  color:#211f16;
  position:relative;
  padding-bottom:9px;
}
.bib-card__title::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--secondary);transition:width .3s;}
.bib-card:hover .bib-card__title::after{width:44px;}
.bib-card__meta{
  display:inline-block;margin:0 0 16px 18px;
  font-size:11px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--secondary-dark);
  background:var(--primary);padding:3px 10px;border-radius:999px;
}

/* ==========================================================================
   Retreat/Event Archiv-Grid
   ========================================================================== */
.cpt-grid{
  display:grid;
  /* min(340px,100%) statt hart 340px: bei sehr schmalen Viewports (320px, Container
     ~291px) erzwang der harte Wert eine Spalte breiter als der verfuegbare Platz ->
     Horizontal-Scroll sitewide auf /retreats/ und /events/ (QA-Fund). min() lässt die
     Spalte nie breiter als 100% des verfuegbaren Platzes werden, faellt bei mehr Platz
     aber weiterhin auf die gewuenschten 340px zurueck. */
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));
  gap:40px;
  padding:60px 0 100px;
}
.cpt-card{display:block;position:relative;}
.cpt-card__img{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;}
.cpt-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.cpt-card:hover .cpt-card__img img{transform:scale(1.04);}
.cpt-card__lang{
  
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,.65);
  color:var(--white);
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  padding:2px 8px;
  border-radius:3px;
}
.cpt-card__title{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:26px;
  margin-top:16px;
}
.cpt-card__meta{font-size:15px;color:var(--secondary-dark);margin-top:4px;}



/* -- CTA-Banner "Buche ein KOSTENLOSES Erstgespraech" -- */
.contact-cta{
  background:var(--secondary-light); /* 1:1 gemessen rgb(226,221,208) */
  padding:45px 0; /* 1:1 gemessen */
}
.contact-cta__grid{
  display:grid;
  grid-template-columns:1fr 1fr; /* 1:1 gemessen: exakt gleich breite Spalten, bleibt auch bei 320px 2-spaltig (Original stackt hier NIE, der Button-Text bricht stattdessen auf 2 Zeilen um) */
  gap:30px; /* 1:1 gemessen */
}
.contact-cta__text p{font-size:17px;line-height:1.45;}
.contact-cta__btn-col{
  display:flex;
  align-items:flex-end; /* 1:1 gemessen: Button haengt unten in seiner Spalte, nicht zentriert */
  justify-content:center;
}

/* -- Intro-Text + Quick-Contact-Buttons + Formular (ein gemeinsamer, einspaltiger
   Container im Original — KEIN Formular+Sidebar-Split) -- */
.contact-main{padding:90px 0 100px;}
.contact-intro{font-size:17px;margin-bottom:28px;}
.contact-quickbtns{
  display:flex;
  flex-wrap:wrap; /* 1:1 gemessen: kein expliziter Mobile-Breakpoint noetig, die Buttons
    brechen bei zu wenig Platz (<~460px) von selbst untereinander um (320/375/480px
    gemessen), ab 600px passen beide nebeneinander. */
  gap:30px; /* 1:1 gemessen */
  margin-bottom:67.5px; /* 1:1 gemessen (Original-Row-Gap zwischen Quick-Buttons und Formular) */
}
.form-success{background:var(--primary);padding:16px 20px;margin-bottom:24px;font-size:15px;}
.form-error{color:#b3261e;font-size:15px;margin:-8px 0 20px;}

/* -- Hauptformular: Underline-Inputs 1:1 nach Original (WS-Form-Plugin-Optik dort
   nachgebaut, aber ohne das Plugin selbst — bewusst schlicht, kein Page-Builder). -- */
.contact-form-underline{max-width:1100px;}
.contact-form-underline .field{margin-bottom:21px;} /* 1:1 gemessen (WS-Form-Field-Wrapper-Abstand) */
.contact-form-underline input,
.contact-form-underline textarea{
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid var(--secondary); /* 1:1 gemessen */
  background:transparent;
  padding:9px 0; /* 1:1 gemessen */
  
  font-size:clamp(14.0596px, calc(12.6721px + 0.37vw), 18px);
  font-family:inherit;
  color:#404040; /* 1:1 gemessen */
}
.contact-form-underline textarea{min-height:110px;resize:vertical;}
.contact-form-underline input:focus,
.contact-form-underline textarea:focus{outline:none;border-bottom-color:var(--secondary-dark);}
.contact-form-underline input::placeholder,
.contact-form-underline textarea::placeholder{color:#404040;opacity:1;}
/* DSGVO-Einwilligung — rechtlich Pflichtfeld, im Original wortwoertlich uebernommen
   (inkl. Link auf /datenschutz/ und dem roten Pflichtfeld-Sternchen). Serverseitig in
   grace_handle_contact_form() zusaetzlich zum HTML5 "required" erzwungen, s. functions.php. */
.contact-form__consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:8px 0 28px;
  font-size:16px; /* 1:1 gemessen */
  line-height:1.4;
  cursor:pointer;
  
  color:#404040;
}
.contact-form__consent input[type="checkbox"]{
  width:18px;height:18px;
  margin-top:2px;
  flex-shrink:0;
  accent-color:var(--secondary);
}
.contact-form__consent a{color:var(--secondary);text-decoration:none;} 
.contact-form__consent a:hover{color:var(--secondary-dark);}
.contact-form__consent .req{color:#404040;font-weight:700;} /* 2026-08-12: war #b3261e (zu
   rotes Warnrot), Original-Pflichtfeld-Sternchen ist dunkelgrau (rgb(64,64,64) == #404040,
   deckungsgleich mit der Fliesstext-Farbe direkt daneben) */

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1239px){
  /* 2026-08-11: .intro__top/.retreats__top/.mbe__top/.mbe__bottom/.erfahrungen__top/
     .newsletter__inner ENTFERNT — gemeinsamer 1239px-Wert war fuer alle sechs falsch
     geraten. Echte gemessene Werte: .retreats__top/.mbe__top/.erfahrungen__top (Original
     `.intro-grace`) kollabieren NIE (320-1920px immer 2-spaltig, Basisregel gilt
     unveraendert). .intro__top/.intro__bottom/.newsletter__inner kollabieren erst ab
     <=478px (Bricks mobile_portrait). .cert-strip__inner/.mbe__bottom kollabieren erst
     ab <=767px. Vorher kollabierten alle sechs schon ab 1239px (QA-Fund: "Hi ich bins
     Grace" faelschlich 1-spaltig bei 768px, Seite ~69% zu lang). */
  
  .video-cta{min-height:460px;}
  .page-hero{padding:120px 0 40px;}
}

@media (max-width:767px){
  .cert-strip__inner{grid-template-columns:1fr;text-align:center;}
  .mbe__bottom{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:478px){
  .intro__top{grid-template-columns:minmax(0,1fr);}
  
  .intro__bottom{grid-template-columns:1fr;gap:30px;position:relative;}
  .intro__bottom img{max-width:320px;margin:0 auto;position:absolute;top:-20px;left:0;right:0;z-index:-1;}
  .newsletter__inner{grid-template-columns:minmax(0,1fr);}
  .newsletter__inner img{order:2;} 
  .newsletter__inner>div{order:1;}
  
  .newsletter__inner img{aspect-ratio:334/320;object-fit:cover;}
  
  
  .site-footer__inner{grid-template-columns:1fr;}
}

@media (max-width:600px){
  body{font-size:16px;}
  .intro{padding:60px 0 40px;}
  .intro__box{padding:40px 28px;}
  .retreats,.mbe{padding-top:60px;}
  .painpoints{padding:24px 26px;}
  .testimonial{padding:28px 24px;}
  
  .site-footer__lang{justify-self:center;}
  .hero__heading{letter-spacing:3px;bottom:7%;}
  /* Fix 2026-08-12 (kleinere Punkte, /retreats/): "max-width:90%" ersatzlos entfernt --
     Original-`.video-cta__content` (width:60ch, live per getComputedStyle auf
     stefanie-grace.com/retreats/ verifiziert) hat KEINEN zusaetzlichen Mobile-Breiten-
     Deckel, dieser main.css-Zusatz stauchte den Textcontainer unter <=600px enger als
     das Original (main.css' eigene Basisregel max-width:700px bleibt unangetastet,
     padding:50px 0 ebenfalls -- war nicht Teil des gemeldeten Befunds). */
  .video-cta__content{padding:50px 0;}
}
@media (max-width:360px){
  
  .section-label{font-size:32px;letter-spacing:2px;}
}


:root{
  --ikm-beige:#F5F4EF; /* 1:1 gemessen (rgb(245,244,239) Intro/Kennst-du-Diagonale, rgb(245,244,240) Grace-Sektion — praktisch identisch, ein Wert reicht */
  --ikm-card:#F2F2F2; /* 1:1 gemessen, Medi-Ueberlapp-Card */
}

.ikm-hero,.ikm-intro,.ikm-kennst,.ikm-kontroll,.ikm-medi,.ikm-warum,.ikm-erwartung,.ikm-grace,.ikm-connect{
  padding:clamp(48px,9vw,90px) 0;
}

/* .section-label ist eine sitewide-Klasse (fest 40px, kollabiert erst unter 360px auf 32px,
   siehe Basis-Definition weiter oben in dieser Datei) — auf dieser Seite sitzt sie in
   deutlich schmaleren Spalten als auf der Startseite (z.B. .ikm-connect__col nur ~341px
   bei 375px Viewport, .ikm-medi__card sogar noch schmaler durch Padding). Ein einzelnes
   langes Wort wie "TRANSFORMATION" oder "ANZUSETZEN" passt bei 40px/4px-letter-spacing
   nicht mehr hinein und erzwingt echten Dokument-Horizontal-Overflow zwischen 361-767px
   (Element-fuer-Element-scrollWidth-Scan bei 375px nachgewiesen: 128px Overflow allein
   durch die H2 in .ikm-connect__row, 28px durch die H2 in .ikm-medi__card). Gleiches
   Fluid-Floor/Cap-Muster wie bereits fuer die Homepage-Instanzen von .section-label an
   anderer Stelle in dieser Datei gefixt (dort bewusst nur auf die 3 Homepage-Eltern
   gescoped, um diese Seite nicht ungeprueft mitzubeeinflussen) — hier eigens fuer die
   Inneres-Kind-Meditation-Sektionen ergaenzt, identische Werte fuer sitewide Konsistenz. */
.ikm-hero .section-label,.ikm-intro .section-label,.ikm-kennst .section-label,
.ikm-kontroll .section-label,.ikm-medi .section-label,.ikm-warum .section-label,
.ikm-erwartung .section-label,.ikm-grace .section-label,.ikm-connect .section-label{
  font-size:clamp(1.125rem,calc(0.633rem + 2.187vw),2.5rem);
  overflow-wrap:anywhere;
}

/* ---- Hero ---- */
.ikm-hero{
  position:relative;
  background-size:cover;
  background-position:center 30%;
  color:var(--white);
}
.ikm-hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.4) 100%);
}
.ikm-hero__container{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(30px,5vw,67.5px);}
.ikm-hero__top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:800px;}
.ikm-hero__heading{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.2;
  font-size:clamp(3.5rem,2.9rem + 2.3vw,5.03rem); /* 1:1 gemessen 375->1440px (55.67px->80.53px), Original-Cap bei 1440 */
  text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.ikm-hero__accent{
  display:inline-block;
  background:var(--secondary);
  color:#000;
  padding:7px 14px;
  font-size:17px;
  font-weight:600;
  order:-1; 
}
.ikm-hero__lede{
  font-size:clamp(1.2rem,1.1rem + 0.35vw,1.42rem); /* 1:1 gemessen 375->1440px */
  line-height:1.55;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
  max-width:760px;
}
.ikm-hero__cols{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  width:100%;
  text-align:left;
}
.ikm-hero__benefit{margin-bottom:10px;font-size:17px;}
.ikm-hero__benefit:last-child{margin-bottom:0;}
.ikm-hero__cta-text{margin-bottom:14px;font-size:17px;}

/* ---- Intro ---- */
.ikm-intro{background:var(--ikm-beige);}
.ikm-intro__cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-bottom:45px;}
.ikm-intro__text p{margin-bottom:1em;}
.ikm-intro__text p:last-child{margin-bottom:0;}
.ikm-intro__image{width:100%;height:100%;object-fit:cover;min-width:0;}
.ikm-intro__bottom p{margin-bottom:1em;}
.ikm-intro__bottom .btn{margin-top:10px;}

/* ---- Kennst du (diagonale Flaeche) ---- */
.ikm-kennst{position:relative;overflow:hidden;}
.ikm-kennst__diag{
  position:absolute;inset:0;
  background:var(--ikm-beige);
  
  clip-path:polygon(0 40%,100% 10%,100% 100%,0 100%);
  z-index:0;
}
.ikm-kennst__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.ikm-kennst__media{position:relative;min-height:420px;}
.ikm-kennst__img-top{width:72%;position:relative;z-index:2;box-shadow:0 20px 50px rgba(0,0,0,.15);}
.ikm-kennst__img-bottom{
  position:absolute;right:0;bottom:-8%;width:62%;
  z-index:1;
  box-shadow:0 0 60px rgba(0,0,0,.2); /* 1:1 gemessen */
}
.ikm-kennst__content .section-label{margin-bottom:20px;}
.ikm-kennst__text{margin-bottom:24px;}
.ikm-kennst__text p{margin-bottom:1em;}
.ikm-kennst__text p:last-child{margin-bottom:0;}

/* Zweispaltige Pfeil-Liste (→), auf mehreren Sektionen dieser Seite genutzt.
   Original nutzt Bricks' natives ul-Grid (siehe .brxe-text ul auf dem Original:
   grid-template-columns:1fr 1fr) — hier per CSS-Columns nachgebaut, visuell
   gleichwertig, robuster bei ungleich langen Items. */
/* CSS-Grid statt column-count: Original ordnet die Listenpunkte reihenweise (Item1
   links/Item2 rechts/Item3 links...), 1:1 wie Bricks' natives ul-Grid — column-count
   fuellt spaltenweise zuerst und haette bei ungerader Item-Anzahl eine andere
   Lese-Reihenfolge ergeben als im Original (verifiziert per Screenshot-Vergleich). */
.ikm-arrow-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin:14px 0;}
.ikm-arrow-list li{padding-left:1.3em;text-indent:-1.3em;}
.ikm-arrow-list .arrow{margin-right:6px;color:#000;}

/* Outline-CTA-Button-Variante (Bin dabei →), 1:1 gemessen: 2px solid schwarz,
   transparenter Hintergrund, schwarzer Text — im Gegensatz zu .btn (gefuellt). */
.btn--outline{
  background:transparent;
  color:#000;
  border-color:#000;
}
.btn--outline:hover{background:#000;color:var(--white);border-color:#000;}

/* ---- Kontrollblock ---- */
.ikm-kontroll{background:var(--white);}
.ikm-kontroll__container .section-label{margin-bottom:20px;}
.ikm-kontroll__lede p{margin:0;}
.ikm-missing-link{
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;
  gap:16px 20px;margin:32px 0;
}
.ikm-missing-link__hand{font-size:30px;line-height:1;}
.ikm-missing-link__hand--r{transform:scaleX(-1);} /* 1:1 gemessen: Original spiegelt die rechte Hand per Transform */
.ikm-missing-link__special{
  font-size:17px;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:0;
}


.ikm-medi{background:var(--white);}
.ikm-medi__grid{position:relative;min-height:640px;}
.ikm-medi__image{display:block;width:58%;height:460px;object-fit:cover;}
.ikm-medi__card{
  position:absolute;top:90px;right:0;
  width:62%; /* 1:1 gemessen: Original-Card ist 676px = 61.5% von 1100px Container */
  background:var(--ikm-card);
  padding:clamp(30px,5vw,67.5px) clamp(24px,6vw,101px);
  z-index:2;
}
.ikm-medi__card .section-label{margin-bottom:20px;}
.ikm-medi__card p{margin-bottom:1em;}
.ikm-medi__card .btn{margin-top:10px;}

/* ---- Divider (Fixed-Background-Break) ---- */
.ikm-divider{
  height:80vh;
  min-height:320px;
  background-size:cover;
  background-position:center;
  background-attachment:fixed; /* 1:1 Original */
}
@media (max-width:900px){
  /* attachment:fixed ist auf iOS Safari performance-/darstellungsproblematisch —
     sitewide keine andere Stelle nutzt es, hier bewusst auf mobilen Breiten
     deaktiviert (reines Performance-Safety-Net, visuell auf Mobile ohnehin kaum
     wahrnehmbar da die Sektion beim Scrollen schnell durchlaeuft). */
  .ikm-divider{background-attachment:scroll;}
}

/* ---- Player (dunkle Split-Sektion) ---- */
.ikm-player{display:grid;grid-template-columns:1fr 1fr;color:var(--white);}
.ikm-player__left{
  position:relative;
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;justify-content:center;
  min-height:420px;
  padding-top:40px;
}
.ikm-player__mockup{width:68%;max-width:420px;display:block;}
.ikm-player__right{
  position:relative;
  background-size:cover;background-position:center;
  display:flex;align-items:center;
  min-height:420px;
}
.ikm-player__right::before{
  content:"";position:absolute;inset:0;
  background:rgba(20,18,15,.6); /* dunkler Foto-Tint, 1:1 Muster wie .hero__overlay/.video-cta__overlay */
}
.ikm-player__right-inner{
  position:relative;z-index:1;
  padding:clamp(40px,8vw,101px) clamp(24px,6vw,60px);
  display:flex;flex-direction:column;gap:22px;
}
.ikm-player__heading{
  font-family:var(--font-heading);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:4px;
  /* Fluid statt fest 40px (gleiches Muster/gleicher Grund wie der .section-label-Fix
     weiter oben): "INNER CHILD MEDITATION" passte bei 320px in die schmale rechte
     Spalte (272px Innenraum nach Padding) nicht mehr hinein -> 14px Dokument-Overflow,
     letzter verbleibender Rest nach dem sitewide-Breakpoint-Scan. */
  font-size:clamp(1.125rem,calc(0.633rem + 2.187vw),2.5rem);
  overflow-wrap:anywhere;
  line-height:1.1;
  margin-bottom:6px;
}
.ikm-player__by{font-size:17px;}
.ikm-player__lede{font-size:17px;max-width:520px;}

/* ---- Warum ---- */
.ikm-warum{background:var(--white);}
.ikm-warum__container .section-label{margin-bottom:30px;}
.ikm-warum__cols{display:grid;grid-template-columns:2fr 1fr;gap:60px;align-items:center;}
.ikm-warum__text p{margin-bottom:1em;}
.ikm-warum__text p:last-child{margin-bottom:0;}
.ikm-warum__image{width:100%;height:100%;object-fit:cover;min-width:0;}

/* ---- Erwartung ---- */
.ikm-erwartung{background:var(--white);}
.ikm-erwartung__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;}
.ikm-erwartung__image{width:100%;height:100%;object-fit:cover;min-height:360px;min-width:0;}
.ikm-erwartung__content{display:flex;flex-direction:column;justify-content:space-between;gap:30px;}
.ikm-erwartung__cta-line{margin-top:16px;}
.ikm-erwartung__content .btn{align-self:flex-start;}

/* ---- Grace / Ueber mich ---- */
.ikm-grace{background:var(--ikm-beige);}
.ikm-grace .section-label{margin-bottom:30px;}
.ikm-grace__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;}
.ikm-grace__col{display:flex;flex-direction:column;gap:22px;}
.ikm-grace__text p{margin-bottom:1em;}
.ikm-grace__text p:last-child{margin-bottom:0;}
.ikm-grace__badge{width:260px;max-width:100%;}
.ikm-grace__portrait{width:100%;height:100%;object-fit:cover;min-width:0;}

/* ---- Connect / Formular ---- */
.ikm-connect{background:var(--white);}
.ikm-connect__row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:80px;}
.ikm-connect__row--gespraech{margin-bottom:0;}
.ikm-connect__col .section-label{margin-bottom:16px;}
.ikm-connect__text p{margin-bottom:1em;}
.ikm-connect__text p:last-child{margin-bottom:0;}
.ikm-connect__row--gespraech .btn{margin-top:16px;}
.optin-form--inline{margin:0;padding:0;background:transparent;}
.optin-form--inline .optin-form__iframe{max-width:100%;height:600px;margin:0;}

/* ==========================================================================
   Inneres Kind Meditation — Responsive
   ========================================================================== */
@media (max-width:767px){
  .ikm-hero__cols,.ikm-intro__cols,.ikm-kennst__grid,.ikm-player,
  .ikm-warum__cols,.ikm-erwartung__grid,.ikm-grace__grid,.ikm-connect__row,
  .ikm-arrow-list{
    
    grid-template-columns:minmax(0,1fr); /* 1:1 gemessen: Original kollabiert die
      2-spaltige Pfeil-Liste ebenfalls auf 1 Spalte unterhalb der Tablet-Breite */
  }
  .ikm-hero__cols{gap:26px;text-align:center;}
  .ikm-hero__col{display:flex;flex-direction:column;align-items:center;}
  .ikm-intro__cols{gap:24px;margin-bottom:30px;}
  .ikm-intro__image{order:-1;}
  .ikm-kennst__media{min-height:0;margin-bottom:30px;}
  .ikm-kennst__img-top{width:78%;margin:0 auto;display:block;}
  .ikm-kennst__img-bottom{position:relative;right:auto;bottom:auto;width:60%;margin:-15% 0 0 auto;display:block;}
  .ikm-medi__grid{min-height:0;}
  .ikm-medi__image{width:100%;height:280px;}
  .ikm-medi__card{position:static;width:92%;margin:-40px auto 0;}
  .ikm-player__left,.ikm-player__right{min-height:340px;}
  .ikm-warum__cols{gap:24px;}
  .ikm-warum__image{order:-1;max-height:320px;}
  .ikm-erwartung__grid{gap:24px;}
  .ikm-erwartung__image{order:-1;min-height:280px;}
  .ikm-grace__grid{gap:30px;}
  .ikm-grace__portrait{order:-1;max-height:420px;}
  .ikm-connect__row{gap:24px;margin-bottom:50px;}
  .optin-form--inline .optin-form__iframe{height:660px;}
}
@media (max-width:480px){
  .optin-form--inline .optin-form__iframe{height:720px;}
  .ikm-missing-link{justify-content:center;text-align:center;}
}