/* ============================================================
   UNIQUE LIFE NOW — gemeinsames Stylesheet
   ============================================================
   Eine Datei für die ganze Seite statt Inline-<style> pro Seite —
   das ist der Kern des Wechsels weg von Nicepage: Design-Änderungen
   nur noch an einem Ort.

   Aufbau bewusst schrittweise: enthalten sind die Bausteine, die
   header.php / footer.php / cta-block.php brauchen (Variablen, Reset,
   Nav inkl. mobilem Menü, Footer, Trust-CTA/Foto+CTA-Block), dazu Hero
   und Stage-Ladder (für sichtbarplus.php). Weitere seiten-eigene
   Komponenten (Module-Grid, Mentor-Karten usw.) kommen dazu, sobald die
   jeweilige Seite gebaut wird — damit bleibt jede Ergänzung nachvollziehbar
   statt alles auf Vorrat reinzukopieren.
   ============================================================ */

:root{
  --navy-deep:#0A0E16;
  --navy:#0F1522;
  --navy-soft:#161D2C;
  --ink:#F4F1EA;
  --ink-dim:#B9C0CC;
  --orange-1:#FF9A3D;
  --orange-2:#FF7A18;
  --orange-3:#FFC15E;
  --line: rgba(244,241,234,0.10);

  --cream:#FAF4E9;
  --cream-soft:#F2E9D8;
  --ink-d:#1E1710;
  --ink-d-dim:rgba(30,23,16,0.62);
  --line-l: rgba(30,23,16,0.10);
  --orange-deep:#D9660F;
}

*{box-sizing:border-box; margin:0; padding:0;}
/* Wichtig: KEIN overflow-x:hidden hier auf html/body setzen — das ist ein
   bekannter Stolperstein, der position:sticky für alle Nachfahren komplett
   deaktiviert (z.B. .page-jumpnav, siehe index.php). Ursache des "da ist
   nix sticky"-Bugs 2026-08-03. Deko-Elemente, die über den Viewport hinaus
   bluten könnten (z.B. .path::before, .mentor-photo::after), haben
   ohnehin schon jeweils ihr eigenes, lokal begrenztes overflow:hidden auf
   dem direkten Elternelement — kein globales Netz auf html/body nötig. */
html,body{background:var(--navy-deep); color:var(--ink); font-family:'Inter',sans-serif;}
h1,h2,h3,.display{font-family:'Poppins',sans-serif; font-weight:700;}
a{text-decoration:none;}
section{position:relative; z-index:2;}
img{max-width:100%; display:block;}

/* ============ NAV ============ */
nav{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 56px; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-logo{height:32px; width:auto; display:block;}
.navlinks{display:flex; gap:32px; font-size:14px; color:var(--ink-dim); font-weight:500;}
.navlinks a{color:inherit;}
.navlinks a.active{color:var(--orange-3);}
.navlinks a:hover{color:var(--ink);}
.navcta{
  font-family:'Poppins',sans-serif; font-size:13px; font-weight:600;
  color:#1a1006; background:linear-gradient(120deg,var(--orange-3),var(--orange-2));
  padding:11px 22px; border-radius:999px;
  box-shadow:0 8px 24px rgba(255,122,24,0.28);
}

/* Mobiles Hamburger-Menü — ersetzt das reine "display:none" der alten
   Mockups, die unter 820px die Links kommentarlos verschwinden ließen. */
.navtoggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  flex-direction:column; gap:5px;
}
.navtoggle span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle.open span:nth-child(2){opacity:0;}
.navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:820px){
  nav{padding:20px 22px; flex-wrap:wrap;}
  .navtoggle{display:flex;}
  .navlinks{
    display:none; flex-direction:column; gap:0; width:100%;
    order:3; margin-top:18px; border-top:1px solid var(--line);
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 4px; border-bottom:1px solid var(--line);}
  .navcta{order:2;}
}

/* ============ PAGE-JUMPNAV (sticky, Startseite) ============
   Feedback 2026-08-03: lange Seite ohne visuellen Anker. Sticky
   Sprungmarken-Leiste unter dem Hero.
   Feedback 2026-08-03 (2): auf Mobile war die Leiste als horizontale
   Scroll-Zeile zu lang und nicht zentriert (lief einfach links los und
   brach hässlich um). Lösung: auf schmalen Screens keine Scroll-Zeile
   mehr, sondern ein zentriertes, umbrechendes Chip-Layout (kompaktere
   Pillen, 2 Zeilen statt 1 lange Zeile) — bleibt vollständig sichtbar,
   ohne Scrollen, und ist mittig ausgerichtet. Desktop bleibt eine Zeile.
   position:sticky statt fixed, weil die Haupt-Nav (siehe "nav{}" oben)
   selbst nicht fixed ist — beim Scrollen übernimmt diese Leiste sichtbar
   ihren Platz ganz oben, kein doppeltes Nav-Layout nötig. */
.page-jumpnav{
  position:sticky; top:0; z-index:40;
  display:flex; justify-content:center; gap:4px;
  background:rgba(10,14,22,0.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.page-jumpnav::-webkit-scrollbar{display:none;}
.page-jumpnav a{
  flex-shrink:0; font-family:'Poppins',sans-serif; font-weight:600; font-size:13.5px;
  color:var(--ink-dim); padding:16px 18px; border-bottom:2px solid transparent;
  white-space:nowrap; transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.page-jumpnav a:hover{color:var(--ink);}
.page-jumpnav a.active{color:var(--orange-3); border-bottom-color:var(--orange-3);}
@media (max-width:820px){
  .page-jumpnav{
    flex-wrap:wrap; justify-content:center; overflow-x:visible;
    gap:3px 3px; padding:10px 10px;
  }
  .page-jumpnav a{
    padding:6px 12px; font-size:12px; border-bottom:none;
    background:rgba(255,255,255,0.05); border-radius:999px;
  }
  .page-jumpnav a.active{background:rgba(255,122,24,0.14);}
}
#mentoren, #mindset-module-grid, #sichtbarkeit, #podcast, #kontakt{scroll-margin-top:54px;}
@media (max-width:820px){
  #mentoren, #mindset-module-grid, #sichtbarkeit, #podcast, #kontakt{scroll-margin-top:96px;}
}

/* ============ HERO / HOOK (dark) ============
   Genutzt von Sichtbar+-Übersicht, künftig auch von anderen Seiten mit
   dunklem Hero (Mindset+-Übersicht, Modul-Seiten).
   Hinweis (2026-07-30): der Verlauf lag früher auf einem separaten
   ".field"-Element mit fester Höhe (760px), das VOR der Hero im DOM stand.
   Weil die Hero-Höhe je nach Seite/Textmenge stark variiert (kurzer Hero
   auf sichtbarplus.php vs. langer Hero mit Checkliste + Empfehlung auf den
   Modul-Seiten) und sich beim Umbruch auf Mobile zusätzlich ändert, endete
   der Verlauf oft mitten im Hero — sichtbarer harter Schnitt zu Flat-Navy
   darunter. Jetzt liegt der Verlauf direkt als Hintergrund auf
   "header.hero" selbst, wächst also automatisch mit dem tatsächlichen
   Inhalt mit, auf jeder Seite und jeder Bildschirmgröße gleich sauber. */
header.hero{
  position:relative; z-index:2;
  background:
    radial-gradient(ellipse at 78% 8%, rgba(255,122,24,0.20), transparent 45%),
    radial-gradient(ellipse at 15% 92%, rgba(255,122,24,0.10), transparent 50%);
}
.eyebrow-bar{
  text-align:center; font-size:13px; color:var(--orange-3); padding:13px;
  border-bottom:1px solid var(--line); font-weight:600;
}
.eyebrow-bar .dot{display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--orange-2); margin-right:8px; box-shadow:0 0 10px var(--orange-2);}
.hero-inner{max-width:880px; margin:0 auto; padding:70px 56px 60px; text-align:center;}
.kicker{font-size:12.5px; letter-spacing:0.16em; color:var(--orange-3); text-transform:uppercase; font-weight:700; margin-bottom:18px;}
.kicker a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,122,24,0.4);}
.kicker a:hover{border-bottom-color:var(--orange-3);}
h1{font-size:clamp(30px, 4.4vw, 48px); line-height:1.14; letter-spacing:-0.01em; margin:0 auto 14px;}
.grad{background:linear-gradient(100deg, var(--orange-3), var(--orange-2) 60%, var(--orange-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.hook{font-size:18px; line-height:1.5; color:var(--ink-dim); max-width:46ch; margin:0 auto 34px;}

.hero-body{max-width:720px; margin:0 auto; text-align:left;}
.hero-body p{font-size:15.5px; line-height:1.75; color:var(--ink-dim); margin-bottom:18px;}
.hero-body b{color:var(--ink); font-weight:600;}
.hero-body p a{color:var(--orange-3); font-weight:700; text-decoration:none;
  border-bottom:1.5px solid rgba(255,122,24,0.4);}
.hero-body p a:hover{border-bottom-color:var(--orange-3);}
.hero-body .rec{
  border:1px solid rgba(255,122,24,0.35); border-radius:14px; padding:18px 22px;
  background:rgba(255,122,24,0.06); font-size:14.5px; color:var(--ink-dim); margin-top:36px;
}
.hero-body .rec b{color:var(--orange-3);}

/* Cover + Intro-Text nebeneinander, oben in der Hero (Podcast-Seite,
   Ferit-Mockup 2026-08-01). .hero-body bleibt innen unverändert (gleiche
   p/a/.rec-Regeln), nur die 720px-Zentrierung wird hier überschrieben,
   weil der Text jetzt neben dem Cover steht statt allein zentriert. */
.podcast-hero-row{display:flex; gap:32px; align-items:flex-start; margin-top:36px; text-align:left;}
.podcast-hero-row .hero-body{max-width:none; margin:0;}
.podcast-hero-cover{width:250px; height:250px; border-radius:20px; object-fit:cover;
  flex-shrink:0; box-shadow:0 14px 32px rgba(0,0,0,0.45);}
@media (max-width:820px){
  .podcast-hero-row{flex-direction:column; align-items:center;}
  .podcast-hero-cover{width:100%; max-width:350px; height:auto; aspect-ratio:1/1; margin:0 auto;}
}

/* Plattform-Übersicht darunter, zentriert — je Anbieter eigene
   Markenfarbe/-icon, damit sofort klar ist, wo der Podcast überall
   läuft, noch vor allen Format-Details. */
.platform-strip{margin-top:40px; text-align:center;}
.platform-strip-label{display:block; font-family:'Poppins',sans-serif; font-size:16px;
  font-weight:700; color:var(--ink); margin-bottom:18px;}
.platform-badges{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.platform-badge{display:inline-flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif;
  font-weight:700; font-size:13.5px; color:#fff; padding:10px 18px; border-radius:999px;
  transition:filter .2s ease;}
.platform-badge:hover{filter:brightness(1.12);}
.platform-badge.youtube{background:#FF0000;}
.platform-badge.spotify{background:#1DB954;}
.platform-badge.apple{background:linear-gradient(135deg, #A855F7, #EC4899);}

/* Checkliste innerhalb .hero-body (dunkel) — genutzt von den 8 Mindset+
   Modul-Seiten für "Dieses Modul ist für Dich, wenn Du:". Bewusst eigener
   Name ".fit-list" statt der hellen ".founder ul" (die ist an .founder-sec
   gebunden, eigene Textfarben für Creme-Hintergrund). */
.fit-list{list-style:none; display:flex; flex-direction:column; gap:12px; margin:22px 0 8px;}
.fit-list li{font-size:15px; color:var(--ink-dim); line-height:1.55; display:flex; gap:12px; align-items:flex-start;}
.fit-list li::before{content:"✓"; color:var(--orange-3); font-weight:700; flex-shrink:0; margin-top:2px;}

@media (max-width:820px){
  .hero-inner{padding:52px 22px 40px;}
}

/* ============ HOMEPAGE-HERO-VARIANTE ============
   Die Startseite braucht einen breiteren Hero (zwei Weg-Karten
   nebeneinander) als die 880px-Standardbreite oben. Statt die geteilte
   .hero-inner global zu verbreitern (würde sichtbarplus.php mit
   verbreitern), wird die Abweichung unter .home-hero verschachtelt —
   nur Seiten mit <header class="hero home-hero"> bekommen die breitere
   Variante, alle anderen bleiben unangetastet. */
.home-hero .hero-inner{max-width:1180px;}

/* Founder-Intro-Streifen direkt nach dem Home-Hero (siehe index.php) —
   kompakt, damit er nicht wie eine zweite Hero wirkt, nur ein kurzer
   menschlicher Anker vor dem ersten Content-Abschnitt. */
.founder-intro{max-width:680px; margin:0 auto 0; padding:0 56px 64px;
  display:flex; align-items:center; gap:22px; text-align:left;}
.founder-intro img{width:104px; height:104px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.founder-intro p{font-size:15px; line-height:1.6; color:var(--ink-dim); margin:0;}
.founder-intro b{color:var(--ink); font-weight:700;}
.founder-intro a{color:var(--orange-3); font-weight:700; text-decoration:none; white-space:nowrap;}
.founder-intro a:hover{text-decoration:underline;}
@media (max-width:820px){
  .founder-intro{flex-direction:column; text-align:center; padding:0 22px 40px; gap:14px;}
}
.sub{font-size:17.5px; line-height:1.65; color:var(--ink-dim); max-width:56ch; margin:0 auto 20px;}
.sub b{color:var(--ink); font-weight:600;}
.stats-line{font-size:13px; color:var(--ink-dim); margin-bottom:40px;}
.stats-line span{color:var(--orange-3); font-weight:600;}

.paths{max-width:1080px; margin:0 auto 70px; display:grid; grid-template-columns:1fr 1fr; gap:22px; text-align:left;}
.path{position:relative; display:block; border:1px solid var(--line); border-radius:20px; padding:34px 32px;
  background:linear-gradient(160deg, rgba(244,241,234,0.045), rgba(244,241,234,0.015));
  transition:transform .3s ease, border-color .3s ease; overflow:hidden; cursor:pointer;}
.path:hover{transform:translateY(-4px); border-color:rgba(255,122,24,0.45);}
.path::before{content:""; position:absolute; top:-40%; right:-30%; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,24,0.22), transparent 70%);}
.path .idx{font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--orange-3);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;}
.path .idx::before{content:""; width:22px; height:1px; background:var(--orange-2);}
.path h3{font-size:25px; margin-bottom:12px; color:var(--ink);}
.path p{color:var(--ink-dim); font-size:14.5px; line-height:1.6; margin-bottom:22px; min-height:60px;}
.path .meta{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-dim); margin-bottom:24px;}
.path .meta span{border:1px solid var(--line); padding:5px 11px; border-radius:999px;}
/* Feedback 2026-08-03: war nur ein Text-Link mit Pfeil, wirkte neben den
   sonst genutzten Verlauf-Buttons (.cta-btn, .podcast-links a) zu schwach
   und "nicht klickfreundlich" — jetzt derselbe kräftige Orange-Verlauf-Pill
   wie überall sonst auf der Seite, obwohl .go hier ein <span> in einer
   bereits verlinkten Karte ist (kein <a> im <a>), rein optisch als Button. */
.path .go{display:inline-flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif;
  font-weight:700; font-size:14px; color:#1a1006;
  background:linear-gradient(120deg, var(--orange-3), var(--orange-2));
  padding:12px 22px; border-radius:999px; box-shadow:0 10px 26px rgba(255,122,24,0.3);
  transition:filter .2s ease, transform .25s ease;}
.path .go::after{content:"→"; color:#1a1006; transition:transform .25s ease;}
.path:hover .go{filter:brightness(1.08);}
.path:hover .go::after{transform:translateX(4px);}

@media (max-width:820px){
  .paths{grid-template-columns:1fr; padding:0 4px;}
}

/* ============ LIGHT SECTION BASE (wiederverwendbar) ============
   Generischer Wrapper für helle Abschnitte (Pain-Points, Testimonials).
   ".alt" für einen leicht abgesetzten Creme-Ton bei aufeinanderfolgenden
   hellen Sektionen. */
.sec-light{background:var(--cream); color:var(--ink-d); padding:88px 56px;}
.sec-light.alt{background:var(--cream-soft);}
.sec-tag{font-size:12px; letter-spacing:0.14em; color:var(--orange-deep); text-transform:uppercase; font-weight:700; margin-bottom:14px; text-align:center;}
/* Hinweis: .mentors-sec ist eine eigene helle Sektion (kein .sec-light),
   braucht aber dieselbe Textfarben-Behandlung — sonst erbt die Überschrift
   die helle Schrift für dunkle Hintergründe und wird auf Creme fast
   unsichtbar (genau das ist hier passiert, 2026-07-30 gefunden). Bei
   jeder neuen hellen Sektion prüfen, ob sie hier mit aufgenommen werden muss. */
.sec-light h2, .mentors-sec h2{color:var(--ink-d); font-size:clamp(26px,3vw,36px); text-align:center; max-width:22ch; margin:0 auto 14px; line-height:1.2;}
.sec-light h2 em{font-style:normal; color:var(--orange-deep);}
.sec-light .lead, .mentors-sec .lead{color:var(--ink-d-dim); font-size:15.5px; text-align:center; max-width:58ch; margin:0 auto 50px; line-height:1.65;}

/* Pain-Liste (innerhalb .sec-light) — nummerierte Liste mit Ghost-Zahlen
   und Trennlinien statt Karten-Grid. */
.pain-list{max-width:900px; margin:0 auto; position:relative;}
/* Schmalere Variante für die "Themenbereiche" auf den Mindset+ Welten-
   Seiten — dort ist der Beschreibungstext pro Punkt länger als in der
   Pain-Liste der Startseite, bei voller 900px-Breite wurden die Zeilen
   unangenehm lang zum Lesen. Bewusst ein Modifier statt die Basisklasse
   zu ändern, damit die Startseite unverändert bleibt. */
.pain-list.narrow{max-width:700px;}
.pain-list::before{content:""; position:absolute; top:8px; bottom:8px; left:44px; width:1px;
  background:var(--line-l);}
.pain-row{
  position:relative; display:grid; grid-template-columns:100px 1fr; gap:24px; align-items:start;
  padding:30px 0; border-bottom:1px solid var(--line-l);
}
.pain-row:last-child{border-bottom:none;}
.pain-row .num{
  font-family:'Poppins',sans-serif; font-weight:800; font-size:52px; line-height:1;
  color:rgba(217,102,15,0.16); -webkit-text-stroke:1.5px var(--orange-deep);
}
.pain-row .q{font-weight:700; font-size:18.5px; margin-bottom:8px; color:var(--ink-d);}
.pain-row p{font-size:14.5px; color:var(--ink-d-dim); line-height:1.6;}
.pain-row p a{color:var(--orange-deep); font-weight:700; text-decoration:none;
  border-bottom:1.5px solid rgba(217,102,15,0.35);}
.pain-row p a:hover{border-bottom-color:var(--orange-deep);}

@media (max-width:820px){
  .pain-row{grid-template-columns:56px 1fr; gap:14px; padding:22px 0;}
  .pain-row .num{font-size:34px;}
  .pain-list::before{left:26px;}
}

/* Bridge-Link nach der Pain-Liste — bewusst kein Button/harter CTA (kein
   Commitment, kein Seitenwechsel), sondern ein weicher Sprung-Anker
   runter zum Modul-Grid, um die Spannung aus der Pain-Liste zu halten. */
.pain-bridge{text-align:center; margin-top:46px;}
.pain-bridge a{color:var(--orange-deep); font-weight:700; font-size:15px; text-decoration:none;
  border-bottom:1.5px solid rgba(217,102,15,0.35);}
.pain-bridge a:hover{border-bottom-color:var(--orange-deep);}

/* ============ MENTORS SHOWCASE (light, echte Fotofarben) ============
   War vorher ein Graustufen+Multiply-Duoton (grayscale + dunkler oranger
   Overlay über das ganze Foto) — wirkte auf echten Porträts zu dunkel und
   leblos ("wie eine Todesanzeige"). Jetzt: Fotos bleiben in echter Farbe,
   nur ein leichter Verlauf oben fürs Tag-Badge (Lesbarkeit), Rest des
   Fotos bleibt hell. */
.mentors-sec{background:var(--cream); padding:88px 56px;}
.mentor-grid{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:28px 26px;}
.mentor-photo{
  display:block; position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; margin-bottom:16px;
  background:#ddd2bd;
}
/* Feedback 2026-08-03: der Zickzack-Versatz (Karte 2 runter, Karte 3 hoch)
   ließ die Fotos "hüpfen" — auf der Startseite-Vorschau jetzt alle auf
   gleicher Höhe, dazu kompakteres, quadratisches Format statt 3:4 Hochformat. */
.mentors-sec .mentor-photo{aspect-ratio:1/1;}
.mentor-photo img{width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.12) contrast(1.03) brightness(1.02);}
.mentor-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,14,8,0.38) 0%, rgba(20,14,8,0) 32%);
}
.mentor-photo .tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:#fff; background:rgba(20,14,8,0.45); backdrop-filter:blur(3px);
  padding:6px 11px; border-radius:999px;
}
.mentor-card h4{font-size:19px; color:var(--ink-d); margin-bottom:6px;}
.mentor-card p{font-size:13.5px; color:var(--ink-d-dim); line-height:1.55; margin-bottom:12px; min-height:58px;}
.mentor-card a{font-size:13px; font-weight:700; color:var(--orange-deep); display:inline-flex; gap:6px; align-items:center;}
.mentor-card a::after{content:"→";}
.mentor-more{text-align:center; margin-top:50px;}
.mentor-more a{
  display:inline-block; font-family:'Poppins',sans-serif; font-weight:700; font-size:14px;
  color:var(--ink-d); border:1.4px solid var(--orange-deep); padding:13px 28px; border-radius:999px;
  margin:6px 8px;
}
.mentor-more .cta-btn{border:none; margin:6px 8px;}

@media (max-width:820px){
  .mentor-grid{grid-template-columns:1fr; max-width:340px; margin:0 auto;}
}

/* Mentoren-Übersichtsseite (/mentoren/): 6 Karten statt 3, eigener
   Grid-Wrapper (unverändert 3:4-Hochformat, nur die Startseiten-Vorschau
   oben nutzt das kompaktere 1:1-Format). */
@media (min-width:821px) and (max-width:1000px){
  .mentor-grid--overview{grid-template-columns:repeat(2,1fr); max-width:620px;}
}

/* ============ DARK SECTION BASE (wiederverwendbar) ============
   Generischer Wrapper für dunkle Abschnitte (Modul-Grid, Sichtbarkeits-
   Steps). ".sec-tag-d" existiert schon (siehe Stage-Ladder oben) und wird
   hier mitgenutzt statt neu definiert. */
.sec-dark{background:var(--navy); padding:90px 56px; position:relative; overflow:hidden;}
.sec-dark::before{content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,122,24,0.10), transparent 55%);}
.sec-dark .inner{position:relative; z-index:1; max-width:1080px; margin:0 auto;}
.sec-dark h2{color:var(--ink); text-align:center; font-size:clamp(26px,3vw,36px); max-width:24ch; margin:0 auto 14px; line-height:1.2;}
.sec-dark .lead{color:var(--ink-dim); text-align:center; max-width:58ch; margin:0 auto 50px; font-size:15.5px; line-height:1.65;}

/* Modul-Grid (innerhalb .sec-dark) — Farbverlauf/Hover schon final abgestimmt. */
.module-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.module{
  display:block; text-decoration:none; color:inherit; cursor:pointer;
  position:relative; border:1px solid var(--line); border-radius:16px; padding:24px 20px;
  background:linear-gradient(160deg, rgba(244,241,234,0.05), rgba(244,241,234,0.015));
  transition:transform .3s ease, border-color .3s ease; overflow:hidden;
}
.module::after{content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(100deg, var(--orange-3), var(--orange-2) 60%, var(--orange-1));}
.module::before{content:""; position:absolute; top:-50%; right:-40%; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,24,0.22), transparent 70%);}
.module:hover{transform:translateY(-4px); border-color:rgba(255,122,24,0.45);}
.module .n{font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; margin-bottom:12px;
  background:linear-gradient(100deg, var(--orange-3), var(--orange-2) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  position:relative; z-index:1;}
.module h4{font-size:15.5px; margin-bottom:8px; line-height:1.3; position:relative; z-index:1; color:var(--ink);}
.module p{font-size:12.5px; color:var(--ink-dim); line-height:1.5; position:relative; z-index:1;}
/* Feiner Klickbarkeits-Hinweis: dezenter Pfeil unten rechts, wird beim
   Hover etwas kräftiger und rutscht minimal nach rechts (gleiches Prinzip
   wie bei .path .go und .modcard a.go, nur zurückhaltender). */
.module .arrow{position:absolute; z-index:1; bottom:16px; right:18px; font-size:13px;
  color:var(--orange-2); opacity:0.5; transition:transform .25s ease, opacity .25s ease;}
.module:hover .arrow{opacity:1; transform:translateX(3px);}

@media (max-width:820px){
  .module-grid{grid-template-columns:1fr 1fr;}
}

/* Modcard-Grid (innerhalb .sec-dark) — größere, textreichere Modul-Karten
   für die Mindset+-Übersichtsseite, mit Inline-Links zu einzelnen Welten.
   Bewusst ".modcard-grid" statt ".module-grid" genannt: Letzteres ist
   schon für die einfachen Icon-Kacheln auf der Startseite vergeben,
   gleicher Name für zwei verschiedene Grids hätte sich überschrieben. */
/* Einspaltig statt 2x2-Raster (2026-08-01, Ferit-Feedback: das dichte
   2-Spalten-Textraster wirkte auf einen Blick unübersichtlich). Jede
   Karte jetzt eine horizontale Zeile: Symbolbild links (wiederverwendet
   von den Modul-Detailseiten, /assets/images/mindset/modul-0X.jpg),
   Text rechts — lockert die reine Textwand auf und macht die 8 Karten
   auf einen Blick unterscheidbar statt austauschbar. */
.modcard-grid{max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:20px;}
.modcard{
  position:relative; border:1px solid var(--line); border-radius:20px; padding:28px 32px 26px;
  background:linear-gradient(160deg, rgba(244,241,234,0.05), rgba(244,241,234,0.015));
  transition:transform .3s ease, border-color .3s ease; overflow:hidden;
  display:flex; gap:26px; align-items:stretch;
}
.modcard::after{content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(100deg, var(--orange-3), var(--orange-2) 60%, var(--orange-1));}
.modcard:hover{transform:translateY(-4px); border-color:rgba(255,122,24,0.45);}
.modcard::before{content:""; position:absolute; top:-40%; right:-30%; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,122,24,0.22), transparent 70%);}
.modcard-img{position:relative; z-index:1; flex:0 0 148px; width:148px;
  border-radius:16px; overflow:hidden; background:#0d0e18;}
.modcard-img img{width:100%; height:100%; object-fit:cover; display:block;}
.modcard-body{position:relative; z-index:1; flex:1; min-width:0;}
.modcard .idx{font-family:'Poppins',sans-serif; font-weight:700; font-size:17px;
  background:linear-gradient(100deg, var(--orange-3), var(--orange-2) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;}
.modcard .idx::before{content:""; width:22px; height:2px; border-radius:2px;
  background:linear-gradient(100deg, var(--orange-3), var(--orange-2));}
.modcard h3{font-size:22px; margin-bottom:10px; color:var(--ink);}
.modcard p{color:var(--ink-dim); font-size:14.5px; line-height:1.6; margin-bottom:18px;}
.modcard p a{color:var(--orange-3); font-weight:700; border-bottom:1.5px solid rgba(255,193,94,0.35);}
.modcard p a:hover{border-bottom-color:var(--orange-3);}
.modcard .meta{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:rgba(185,192,204,0.6); margin-bottom:20px;}
.modcard .meta span{border:1px solid rgba(244,241,234,0.07); padding:5px 11px; border-radius:999px;}
.modcard a.go{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--ink);}
.modcard a.go::after{content:"→"; color:var(--orange-2); transition:transform .25s ease; font-weight:800;}
.modcard:hover a.go::after{transform:translateX(4px);}

@media (max-width:720px){
  .modcard{flex-direction:column;}
  .modcard-img{width:100%; height:160px;}
}

/* Sichtbarkeit-Steps (innerhalb .sec-dark) */
.steps-photo-row{display:grid; grid-template-columns:1.05fr 0.95fr; gap:54px; align-items:center; max-width:1080px; margin:0 auto;}
.steps-row{display:flex; flex-direction:column; gap:26px; text-align:left;}
.steps-row .cta-btn{align-self:flex-start; margin-top:6px;}
.steps-row .step{display:flex; align-items:flex-start; gap:18px; text-align:left;}
.steps-row .step .ic{margin:0; flex-shrink:0;}
.sichtbarkeit-photo{
  position:relative; border-radius:20px; overflow:hidden; aspect-ratio:1/1;
  border:1px solid rgba(255,122,24,0.3); box-shadow:0 0 60px rgba(255,122,24,0.15);
}
.sichtbarkeit-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.step{text-align:center;}
.step .ic{width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  border:1px solid rgba(255,122,24,0.5); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 40px rgba(255,122,24,0.18);}
.step h4{font-size:16px; margin-bottom:8px; color:var(--ink);}
.step p{font-size:13.5px; color:var(--ink-dim); line-height:1.55;}

@media (max-width:820px){
  .steps-photo-row{grid-template-columns:1fr;}
  .steps-row{grid-template-columns:1fr; gap:36px;}
}

/* ============ QUOTE (light) ============ */
.quote-sec{background:var(--cream-soft); padding:80px 56px; text-align:center;}
blockquote{font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(20px,2.6vw,30px);
  color:var(--ink-d); max-width:26ch; margin:0 auto; line-height:1.4;}
blockquote em{font-style:normal; color:var(--orange-deep);}
.quote-cite{margin-top:22px; font-size:13px; color:var(--ink-d-dim);}

/* ============ TESTIMONIALS (light) ============ */
.testi-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:900px; margin:0 auto;}
.testi{background:#fff; border:1px solid var(--line-l); border-radius:16px; padding:26px 28px;}
.testi .mark-q{font-family:'Poppins',sans-serif; font-size:34px; color:var(--orange-deep); line-height:1; margin-bottom:6px;}
.testi p{font-size:14.5px; color:var(--ink-d); line-height:1.6; margin-bottom:14px;}
.testi .who{font-size:12.5px; color:var(--ink-d-dim); font-weight:600;
  display:flex; align-items:center; gap:10px;}
.testi .who img{width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0;}

@media (max-width:820px){
  .testi-grid{grid-template-columns:1fr;}
}

/* ============ FOUNDER BIO (light) ============
   Andere Komponente als .trust-cta weiter oben: das ist die ausführliche,
   helle Bio-Sektion der Startseite, kein Foto+CTA-Baustein. Der Name
   ".founder-sec" war extra für diese hier reserviert (siehe Hinweis bei
   .trust-cta). */
.founder-sec{background:var(--cream); padding:90px 56px;}
.founder{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:center;}
.founder-visual{aspect-ratio:1/1; border-radius:20px; position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, rgba(255,122,24,0.20), transparent 60%), var(--navy);
  border:1px solid var(--line-l); display:flex; align-items:center; justify-content:center;}
.founder-visual img{width:100%; height:100%; object-fit:cover;}
.founder-visual .ring{width:120px; height:120px; border-radius:50%; border:1px solid rgba(255,122,24,0.5);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 60px rgba(255,122,24,0.25);}
.founder-visual .ring2{width:88px; height:88px; border-radius:50%; border:1px solid rgba(255,122,24,0.7);
  display:flex; align-items:center; justify-content:center;}
.founder h2{color:var(--ink-d); font-size:30px; margin-bottom:16px; line-height:1.2; text-align:left;}
.founder p.bio{color:var(--ink-d-dim); font-size:15px; line-height:1.7; margin-bottom:18px; max-width:52ch;}
.founder ul{list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:26px;}
.founder li{font-size:14px; color:var(--ink-d); display:flex; align-items:center; gap:10px;}
.founder li::before{content:"✓"; color:var(--orange-deep); font-weight:700;}

@media (max-width:820px){
  .founder{grid-template-columns:1fr;}
}

/* ============ FINAL CTA (dark) ============ */
.cta-sec{background:var(--navy-deep); padding:100px 56px; text-align:center; position:relative; overflow:hidden;}
.cta-sec::before{content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,122,24,0.20), transparent 55%);}
.cta-sec .inner{position:relative; z-index:1;}
.cta-sec h2{font-size:clamp(28px,3.4vw,42px); max-width:18ch; margin:0 auto 18px; line-height:1.18; color:var(--ink);}
.cta-sec .lead{color:var(--ink-dim); font-size:16px; max-width:50ch; margin:0 auto 36px;}
.cta-btn{
  display:inline-block; font-family:'Poppins',sans-serif; font-weight:700; font-size:15px;
  color:#1a1006; background:linear-gradient(120deg,var(--orange-3),var(--orange-2));
  padding:17px 36px; border-radius:999px; box-shadow:0 12px 40px rgba(255,122,24,0.35);
}
.cta-note{margin-top:18px; font-size:12.5px; color:var(--ink-dim);}

/* WhatsApp-Variante des CTA-Buttons (z.B. Johanna Reinke) — eigene
   Markenfarbe statt des Orange-Verlaufs, damit sofort erkennbar ist,
   dass es sich um einen WhatsApp-Kontakt handelt. */
.cta-btn.whatsapp{
  color:#fff; background:linear-gradient(120deg,#25D366,#128C7E);
  box-shadow:0 12px 40px rgba(37,211,102,0.35);
}

/* Zweite, "leichtere" CTA neben dem Haupt-Button (z.B. Final-CTA Startseite:
   Termin buchen = hohe Verbindlichkeit, daneben 111 Impulse = kostenloser,
   niedrigschwelliger Einstieg für alle, die noch nicht buchen wollen). Nur
   Outline statt Verlauf-Fläche, damit die Hierarchie zum Haupt-CTA klar
   bleibt — sie konkurriert visuell nicht mit ihm. */
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; align-items:center;}
.cta-btn.ghost{
  background:transparent; color:var(--ink); box-shadow:none;
  border:1.5px solid rgba(255,255,255,0.3);
}
.cta-btn.ghost:hover{border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.06);}

@media (max-width:820px){
  .sec-light, .sec-dark, .quote-sec, .founder-sec, .cta-sec{padding:64px 22px;}
}

/* ============ MINDSET+ MODUL-SEITEN ============
   Genutzt von www/mindset/modul-0X-*.php. Eigener Name, keine Kollision
   mit .pain-list (das ist Ghost-Zahlen-nummeriert und dunkler getönt) oder
   .modcard-grid (Kartenraster, hier reicht eine schlichte Zeilenliste). */

/* Hero-Zeile (dunkel): Modul-Foto links, Checkliste "Dieses Modul ist für
   Dich, wenn Du:" rechts daneben — Foto gehört inhaltlich zu genau dieser
   Frage, nicht zur Welten-Liste weiter unten. Reihenfolge im HTML: Foto
   zuerst, dann Textblock (bestimmt die Spaltenreihenfolge im Grid UND die
   Stapel-Reihenfolge mobil). */
.hero-fit-row{display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:center; margin:22px 0 58px;}
.hero-fit-row .fit-list{margin:0;}
.hero-photo{border-radius:18px; overflow:hidden; aspect-ratio:1/1; border:1px solid rgba(255,122,24,0.3);
  box-shadow:0 0 40px rgba(255,122,24,0.15); flex-shrink:0;}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}

@media (max-width:820px){
  .hero-fit-row{grid-template-columns:1fr; gap:20px; margin-bottom:30px;}
  /* Mobil bewusst kein kleines Quadrat: breites Foto über voller Breite,
     damit die Illustration auch auf dem Smartphone gut erkennbar bleibt. */
  .hero-photo{aspect-ratio:16/9; width:100%;}
}


/* Welten-Liste (hell): jede Zeile bekommt ein Themenfoto vorangestellt
   (Bilder aus "Bilder Mindset+"), statt eines einzelnen großen Modul-Fotos
   für die ganze Liste — jede Welt hat ihr eigenes passendes Bild. Bewusst
   großzügig dimensioniert (auch mobil), weil die Bilder selbst Teil des
   Wiedererkennungswerts sind, nicht nur Dekoration. */
.welt-list{display:flex; flex-direction:column; max-width:700px; margin:0 auto;}
.welt-row{display:flex; gap:26px; align-items:center; padding:28px 44px 28px 0; border-bottom:1px solid var(--line-l);
  text-decoration:none; color:inherit; position:relative; transition:background .2s ease;}
.welt-row:last-child{border-bottom:none;}
.welt-row:hover{background:rgba(217,102,15,0.04);}
.welt-row img{width:150px; height:150px; border-radius:16px; object-fit:cover; flex-shrink:0;}
.welt-row .txt{flex:1;}
.welt-row h4{font-size:17px; color:var(--ink-d); margin-bottom:6px;}
.welt-row p{font-size:14px; color:var(--ink-d-dim); line-height:1.6;}
.welt-row .arrow{position:absolute; top:50%; right:14px; transform:translateY(-50%); font-size:15px;
  color:var(--orange-2); opacity:0.45; transition:transform .25s ease, opacity .25s ease;}
.welt-row:hover .arrow{opacity:1; transform:translateY(-50%) translateX(3px);}
.welt-note{font-size:13.5px; color:var(--ink-d-dim); font-style:italic; margin-top:10px;}

@media (max-width:820px){
  .welt-row{gap:16px; align-items:flex-start; padding-right:26px;}
  .welt-row img{width:110px; height:110px;}
}

/* ============ STAGE LADDER (dark) ============
   Genutzt von der Sichtbar+-Übersicht (5-stufige Angebotsleiter). */
.stages-sec{background:var(--navy); padding:80px 56px 88px; position:relative; overflow:hidden;}
.stages-sec::before{content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,122,24,0.10), transparent 55%);}
.stages-sec .inner{position:relative; z-index:1; max-width:880px; margin:0 auto;}
.sec-tag-d{font-size:12px; letter-spacing:0.14em; color:var(--orange-3); text-transform:uppercase; font-weight:700; margin-bottom:14px; text-align:center;}
.stages-sec h2{color:var(--ink); font-size:clamp(24px,2.8vw,32px); text-align:center; max-width:26ch; margin:0 auto 14px; line-height:1.25;}
.stages-sec .lead{color:var(--ink-dim); text-align:center; max-width:56ch; margin:0 auto 46px; font-size:15.5px; line-height:1.65;}

.stage-track{position:relative; display:flex; flex-direction:column; gap:22px;}
.stage{
  position:relative; display:grid; grid-template-columns:128px 1fr; gap:26px;
  border:1px solid var(--line); border-radius:20px; padding:26px 30px 26px;
  background:linear-gradient(160deg, rgba(244,241,234,0.05), rgba(244,241,234,0.015));
  transition:transform .3s ease, border-color .3s ease; overflow:hidden; align-items:stretch;
}
.stage::after{content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(100deg, var(--orange-3), var(--orange-2) 60%, var(--orange-1));}
.stage:hover{transform:translateY(-3px); border-color:rgba(255,122,24,0.45);}

/* Icon-Kacheln (2026-08-01): reines CSS statt Bild-Dateien, im Stil von
   Ferits eigenen "PODCAST+"/"111 IMPULSE"-Grafiken (fette weiße Wortmarke
   auf Orange-Verlauf). Kein Bild-Asset nötig, bleibt bei jeder Größe
   gestochen scharf. ".plus" baut das weiße Kreuz aus ::before/::after
   nach — für alle "+"-Produkte (Circle+, Präsenz+, Podcast+, Wachstum+).
   Nur 111 Impulse hat kein Kreuz, da kein "+" im Namen steht. */
.stage-icon{
  position:relative; flex-shrink:0; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg, var(--orange-3), var(--orange-2) 55%, var(--orange-1));
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:6px; padding:10px;
}
.stage-icon .l1, .stage-icon .l2{font-family:'Poppins',sans-serif; font-weight:800; color:#fff;
  line-height:1.1; letter-spacing:-0.02em; max-width:100%;}
.stage-icon .l1{font-size:14px;}
.stage-icon .l2{font-size:18px;}
.stage-icon .plus{width:24px; height:24px; position:relative; margin-top:2px;}
.stage-icon .plus::before, .stage-icon .plus::after{content:""; position:absolute; background:#fff; border-radius:2px;}
.stage-icon .plus::before{top:0; bottom:0; left:42%; width:16%;}
.stage-icon .plus::after{left:0; right:0; top:42%; height:16%;}
.stage h3{font-size:21px; margin-bottom:4px; color:var(--ink);}
.stage .tagline{font-size:13px; color:var(--orange-3); font-weight:600; margin-bottom:12px;}
.stage p{color:var(--ink-dim); font-size:14.5px; line-height:1.65; margin-bottom:16px;}
.stage p b{color:var(--ink); font-weight:700;}
.stage p a{color:var(--orange-3); font-weight:700; border-bottom:1.5px solid rgba(255,193,94,0.35);}
.stage p a:hover{border-bottom-color:var(--orange-3);}
.stage .meta{display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:rgba(185,192,204,0.6); margin-bottom:18px;}
.stage .meta span{border:1px solid rgba(244,241,234,0.07); padding:5px 11px; border-radius:999px;}
.stage a.go{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--ink);}
.stage a.go::after{content:"→"; color:var(--orange-2); transition:transform .25s ease; font-weight:800;}
.stage:hover a.go::after{transform:translateX(4px);}

@media (max-width:820px){
  .stages-sec{padding:56px 22px 64px;}
  .stage{grid-template-columns:1fr; text-align:left;}
  /* Volle Kartenbreite als Banner statt schmaler Box (2026-08-01,
     Ferit-Feedback: das feste 104x104px-Quadrat hat "WACHSTUM" & Co.
     abgeschnitten). Wortmarke + Kreuz jetzt nebeneinander in einer
     Zeile statt gestapelt, dadurch passt jeder Name bequem hinein. */
  .stage-icon{width:100%; height:auto; min-height:84px; flex-direction:row; gap:14px; padding:16px 20px;}
  .stage-icon .l1, .stage-icon .l2{font-size:20px;}
  .stage-icon .plus{margin-top:0; width:22px; height:22px;}
}

/* ============ PODCAST-SEITE (3 Formate) ============
   Eigener Inner-Wrapper (880px, wie .stages-sec .inner) statt neuem
   Section-Typ — .sec-dark/.sec-light übernehmen Hintergrund+Textfarbe
   automatisch (body-color hell auf dunkel, .sec-light setzt --ink-d),
   deshalb setzen die Komponenten hier bewusst keine eigene Textfarbe.

   2026-08-01, Ferit-Feedback nach erster Version: die kleine Verlaufs-
   Kachel (wie bei den Sichtbar+-Stufen) plus dünn umrandete Plattform-
   Buttons mit SVG-Icon wirkten "verworren" und auf Dunkel schlecht
   lesbar — Icon+Rahmen-Kombi mit `color:inherit` verliert offenbar zu
   leicht Kontrast. Deshalb bewusst simpler: kein Icon-Quadrat mehr, nur
   noch Tag-Zeile + Überschrift. Plattform-Buttons jetzt volltonige
   Verlauf-Pills (wie .cta-btn) mit fest gesetzter dunkler Schrift statt
   `currentColor`/Rahmen — dadurch immer lesbar, unabhängig vom
   Section-Hintergrund. */
.podcast-sec-inner{position:relative; z-index:1; max-width:880px; margin:0 auto;}
.podcast-head{margin-bottom:18px;}
.podcast-head .tagline{font-size:12.5px; color:var(--orange-3); font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px;}
.podcast-head h3{font-size:27px; margin-bottom:6px;}
.podcast-motto{font-size:13.5px; opacity:0.65; margin-bottom:4px;}
.podcast-sec-inner p{font-size:15px; line-height:1.7; margin-bottom:18px; opacity:0.85;}
/* Cover-Bild neben dem Format-Text (Ferit-Wunsch 2026-08-01, wie schon
   in der Hero) — je Format-Sektion ein eigenes Cover. */
.podcast-cover-row{display:flex; gap:22px; align-items:flex-start; margin-bottom:24px;}
.podcast-cover{width:140px; height:140px; border-radius:14px; object-fit:cover;
  flex-shrink:0; box-shadow:0 8px 22px rgba(0,0,0,0.4);}
.podcast-cover-row p{margin-bottom:0;}
@media (max-width:820px){
  .podcast-cover-row{flex-direction:column; align-items:center; text-align:center;}
  .podcast-cover{width:160px; height:160px;}
}
.podcast-embed{position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000; margin-bottom:18px;}
.podcast-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.podcast-embed.audio{aspect-ratio:auto; height:160px; background:transparent;}
.shorts-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:28px;}
.shorts-tile{position:relative; display:block; aspect-ratio:9/16; border-radius:14px;
  overflow:hidden; background:#000;}
.shorts-tile img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;}
.shorts-tile:hover img{transform:scale(1.06);}
.shorts-tile-title{position:absolute; top:0; left:0; right:0; padding:10px 10px 20px;
  background:linear-gradient(180deg, rgba(0,0,0,0.75), transparent);
  color:#fff; font-size:11.5px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.shorts-tile-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,0.55); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; padding-left:2px;}
.shorts-tile-views{position:absolute; bottom:10px; left:10px; background:rgba(0,0,0,0.65);
  color:#fff; font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px;}
@media (max-width:820px){
  .shorts-grid{grid-template-columns:repeat(2, 1fr); max-width:420px; margin:0 auto 36px; gap:14px;}
}
.podcast-links{display:flex; gap:12px; flex-wrap:wrap;}
.podcast-links.center{justify-content:center;}
/* Podcast-Embed auf der Startseite (siehe index.php, nach den
   Sichtbarkeit-Steps) — eigener, schmalerer Wrapper, weil .sec-light
   sonst keine Breitenbegrenzung für Blockinhalte hat (nur Text-Elemente
   sind über max-width in ch begrenzt) und das Video sonst auf breiten
   Screens riesig würde. */
.podcast-embed-home{max-width:820px; margin:0 auto;}
.podcast-embed-home .podcast-links{margin-top:22px;}
.podcast-links a{display:inline-flex; align-items:center; font-family:'Poppins',sans-serif;
  font-weight:700; font-size:13.5px; color:#1a1006;
  background:linear-gradient(120deg, var(--orange-3), var(--orange-2));
  padding:11px 20px; border-radius:999px; transition:filter .2s ease;}
.podcast-links a:hover{filter:brightness(1.1);}
@media (max-width:820px){
  /* Feedback 2026-08-03: Shorts-Grid saß zu dicht am "Alle Shorts auf
     YouTube"-Button (siehe margin-bottom oben) — zusätzlich sollen auf
     Mobile alle Podcast-Buttons mittig statt linksbündig stehen. */
  .podcast-links{justify-content:center; text-align:center;}
}
.podcast-sec-inner p a{color:var(--orange-3); font-weight:700; border-bottom:1.5px solid rgba(255,122,24,0.4);}
.podcast-sec-inner p a:hover{border-bottom-color:var(--orange-3);}

/* ============ TRUST-CTA / FOTO+CTA (dark, wiederverwendbar) ============
   Hinweis: bewusst NICHT ".founder-sec" genannt — die Startseite hat
   bereits eine andere ".founder-sec" (helle Bio-Sektion). Gleicher Name,
   zwei verschiedene Komponenten hätte beim Zusammenführen in eine
   gemeinsame Datei zu einer stillen Kollision geführt. */
.trust-cta{background:var(--navy); padding:80px 56px; position:relative; overflow:hidden;}
.trust-cta::before{content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,122,24,0.10), transparent 55%);}
.trust-cta-inner{position:relative; z-index:1; max-width:880px; margin:0 auto; display:grid;
  grid-template-columns:150px 1fr; gap:34px; align-items:center;}
.trust-cta-photo{width:150px; height:150px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid rgba(255,122,24,0.4); box-shadow:0 0 40px rgba(255,122,24,0.2);}
.trust-cta-photo img{width:100%; height:100%; object-fit:cover;}
.trust-cta-text h3{font-size:22px; margin-bottom:10px; color:var(--ink);}
.trust-cta-text p{font-size:14.5px; line-height:1.7; color:var(--ink-dim); margin-bottom:18px; max-width:56ch;}
.trust-cta-text p a{color:var(--orange-3); font-weight:700; text-decoration:none;
  border-bottom:1.5px solid rgba(255,122,24,0.4);}
.trust-cta-text p a:hover{border-bottom-color:var(--orange-3);}
.trust-cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:14px;
  color:#1a1006; background:linear-gradient(120deg,var(--orange-3),var(--orange-2));
  padding:13px 26px; border-radius:999px; box-shadow:0 10px 30px rgba(255,122,24,0.3);
}

@media (max-width:820px){
  .trust-cta-inner{grid-template-columns:1fr; text-align:center;}
  .trust-cta-photo{margin:0 auto;}
  .trust-cta-text p{margin-left:auto; margin-right:auto;}
}

/* ============ MINDSET+ WELTEN-SEITEN (24 Einzelseiten) ============
   Bewusst mehr Hell/Dunkel-Wechsel als bei den 8 Modul-Seiten (die sind
   fast komplett dunkel) — Ferit wollte hier ausdrücklich helle Elemente
   wie auf der Startseite, nicht nur Schwarz. Dritter Anlauf (2026-07-30)
   nach zwei Design-Reviews:
   - Hero-Foto bleibt quadratisch (Originalbilder sind 1:1, keine
     Portrait-Beschneidung mehr).
   - Intro-Text + Foto + Checkliste liegen jetzt ALLE gemeinsam in einem
     einzigen .hero-body, so wie bei den Modul-Seiten — vorher lag die
     Foto-Zeile fälschlich außerhalb von .hero-body und hat dadurch die
     zentrierte Textausrichtung von .hero-inner geerbt statt linksbündig
     zu sein.
   - "Methoden & Ansätze" nutzt jetzt eine eigene Karte (.method), NICHT
     mehr .module: der orangene Verlaufsbalken oben ist bewusst den
     echten 8 Modulen vorbehalten, damit dieses Signature-Element nicht
     verwässert. .method markiert sich stattdessen über ein rundes
     Nummern-Badge (gleiche Formsprache wie .stage .num).
   - Praxisbeispiele: Titel + Teaser-Satz + Schluss-Zitat sind IMMER
     sichtbar, nur der mittlere Erzähltext liegt hinter einem großen,
     klar klickbaren "Weiterlesen"-Pill (kein <details> mehr auf der
     ganzen Karte, sondern nur auf dem mittleren Textblock).
   - Vorteile sind jetzt eine 2×2-Kachel mit rundem Haken-Icon statt einer
     schlichten Liste — mehr visuelles Gewicht für einen wichtigen Punkt.
   Reihenfolge: Hero (dunkel) → Themenbereiche (hell, .pain-list) →
   Methoden (dunkel, .method-grid) → Praxisbeispiele (hell, .case) →
   "Werde sichtbar"-CTA (dunkel, .cta-sec) → Vorteile (hell, .perk-grid) →
   Foto+CTA/trust-cta (dunkel) → Footer (dunkel). */

/* Methoden-Karte: bewusst eigene Klasse statt .module (siehe Hinweis
   oben) — rundes Nummern-Badge statt Verlaufsbalken oben. */
.method-grid{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.method{
  position:relative; border:1px solid var(--line); border-radius:16px; padding:24px 20px;
  background:linear-gradient(160deg, rgba(244,241,234,0.05), rgba(244,241,234,0.015));
  transition:transform .3s ease, border-color .3s ease;
}
.method:hover{transform:translateY(-4px); border-color:rgba(255,122,24,0.45);}
.method .num{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--orange-3);
  border:1px solid rgba(255,122,24,0.4); background:rgba(255,122,24,0.08); margin-bottom:14px;
}
.method h4{font-size:15.5px; margin-bottom:8px; line-height:1.3; color:var(--ink);}
.method p{font-size:12.5px; color:var(--ink-dim); line-height:1.5;}
.method p a{color:var(--orange-3); font-weight:700; border-bottom:1.5px solid rgba(255,193,94,0.35);}
.method p a:hover{border-bottom-color:var(--orange-3);}

@media (max-width:820px){
  .method-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .method-grid{grid-template-columns:1fr;}
}

/* Praxisbeispiele: Titel + Teaser + Schluss-Zitat immer sichtbar, nur der
   mittlere Erzähltext ist ein <details>-Pill zum Aufklappen — bewusst kein
   JavaScript, aber jetzt bewusst NICHT mehr die ganze Karte als
   Klick-Ziel, sondern ein extra-großer, eindeutig klickbarer Button
   ("Weiterlesen"), gut mit dem Finger zu treffen. */
.case-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:16px;}
.case{border:1px solid var(--line-l); border-radius:16px; background:#fff; padding:26px 28px;}
.case h4{font-family:'Poppins',sans-serif; font-weight:700; font-size:16.5px; color:var(--ink-d); margin-bottom:14px;}

/* Ghost-Zahl im Case-Kopf, gleiches Muster wie .pain-row .num — bewusst
   wiederverwendet (Feedback 2026-07-31: Wiedererkennungswert zwischen
   Spezialgebiete-Kurzübersicht und Deep-Dive-Sektion). */
.case-head{display:flex; align-items:center; gap:22px; margin-bottom:16px;}
.case-head .num{font-family:'Poppins',sans-serif; font-weight:800; font-size:44px; line-height:1;
  color:rgba(217,102,15,0.16); -webkit-text-stroke:1.5px var(--orange-deep); flex-shrink:0;}
.case-head h4{margin-bottom:0;}
.case-teaser{font-size:14.5px; color:var(--ink-d-dim); line-height:1.7;}

/* Fließtext-Absätze innerhalb eines "immer offenen" .case (Mentoren-Deep-
   Dives ohne Accordion, siehe .case-label) — bisher gab es dafür keine
   generische Regel, "p" ohne Klasse erbte nur den Browser-Standardabstand,
   dadurch liefen die Absätze im Screenshot ohne Luft ineinander. */
.case > p{font-size:14.5px; color:var(--ink-d-dim); line-height:1.75; margin-bottom:16px;}
.case > p:last-child{margin-bottom:0;}
.case > p b, .case > p strong{color:var(--ink-d);}

/* "Konkretes Beispiel"-Label: eigene Zeile mit Trennlinie und Farbakzent
   statt fett-kursiv im Fließtext — sonst kaum von den Absätzen davor zu
   unterscheiden (Feedback 2026-07-31). */
.case-label{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--orange-deep); margin:22px 0 12px !important;
  padding-top:20px; border-top:1px solid var(--line-l);
}
.case-more{margin:14px 0;}
.case-more summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; color:var(--orange-deep);
  padding:11px 20px; border:1.5px solid rgba(217,102,15,0.35); border-radius:999px;
}
.case-more summary:hover{background:rgba(217,102,15,0.06);}
.case-more summary::-webkit-details-marker{display:none;}
.case-more summary::after{content:"+"; font-size:17px; font-weight:400; transition:transform .25s ease;}
.case-more[open] summary::after{transform:rotate(45deg);}
/* Label wechselt beim Öffnen zu "Weniger anzeigen" (zwei <span>s im Markup,
   hier per CSS umgeschaltet) — sonst bleibt "Weiterlesen" sichtbar stehen,
   obwohl der Text darunter schon aufgeklappt ist, das wirkte wie ein
   stehengelassener, funktionsloser Button (Feedback 2026-07-30). */
.case-more .lbl-open{display:none;}
.case-more[open] .lbl-closed{display:none;}
.case-more[open] .lbl-open{display:inline;}
.case-more[open] summary{background:rgba(217,102,15,0.06);}
.case-more p{font-size:14.5px; color:var(--ink-d-dim); line-height:1.7; margin-top:14px;}
.case-insight{
  border-left:3px solid var(--orange-deep); padding-left:16px; margin-top:6px;
  font-style:italic; font-weight:600; color:var(--ink-d);
}

/* Vorteile-Kacheln (hell) — 2×2-Grid mit rundem Haken-Icon statt einer
   schlichten Liste, damit dieser Abschnitt mehr visuelles Gewicht bekommt
   (Ferit: "das ist schon wichtig, das sichtbarer machen"). */
.perk-grid{max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.perk{
  display:flex; gap:16px; align-items:flex-start; background:#fff;
  border:1px solid var(--line-l); border-radius:16px; padding:22px 24px;
}
.perk .ic{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; background:rgba(217,102,15,0.10); border:1px solid rgba(217,102,15,0.35);
  color:var(--orange-deep); font-weight:800; font-size:15px;
}
.perk p{font-size:14.5px; color:var(--ink-d); line-height:1.6;}

@media (max-width:820px){
  .perk-grid{grid-template-columns:1fr;}
}

/* Erklär-Absatz (hell) — für Welten-Seiten, deren Thema von einem
   esoterischeren Vorgänger-Namen umbenannt wurde (z.B. "Manifestation" →
   "Bewusste Zielausrichtung", "Human Design" → "Dein natürlicher
   Arbeitsrhythmus"). Erklärt kurz die Umbenennung/Einordnung, linksbündiger
   Fließtext statt zentrierter .lead-Kurzzeile, da hier mehrere Absätze
   zusammenhängend gelesen werden. */
.light-copy{max-width:720px; margin:0 auto;}
.light-copy p{font-size:14.5px; color:var(--ink-d-dim); line-height:1.75; margin-bottom:16px; text-align:left;}
.light-copy p:last-child{margin-bottom:0;}
.light-copy b{color:var(--ink-d); font-weight:600;}

/* ============ RECHTLICHE SEITEN (Impressum, Datenschutz, AGB) ============
   Reine Textseiten, kein neues Prosa-Muster nötig: nutzt .light-copy
   (oben) für Absätze, ergänzt hier nur linksbündige, nummerierbare
   Zwischenüberschriften — die zentrierten, kurzen .sec-light h2 passen
   nicht zu fortlaufenden Rechtsabschnitten. Kombiniert als
   class="light-copy legal-content". */
.legal-content h2{color:var(--ink-d); font-size:20px; text-align:left; max-width:none;
  margin:36px 0 12px; line-height:1.3;}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{color:var(--ink-d); font-size:15px; text-align:left; margin:20px 0 6px;}
.legal-content ul{margin:0 0 16px 20px; padding:0;}
.legal-content li{font-size:14.5px; color:var(--ink-d-dim); line-height:1.7; margin-bottom:6px;}
.legal-content a{color:var(--orange-deep); font-weight:700; text-decoration:none;
  border-bottom:1.5px solid rgba(217,102,15,0.35);}
.legal-content a:hover{border-bottom-color:var(--orange-deep);}
.legal-note{margin:22px 0; padding:16px 20px; border:1px solid rgba(217,102,15,0.3);
  border-radius:12px; background:rgba(217,102,15,0.06); font-size:13.5px;
  color:var(--ink-d-dim); line-height:1.65;}
.legal-note b{color:var(--ink-d);}
/* Kontaktblock, der per JS zusammengesetzt wird (siehe impressum.php) —
   im HTML-Quelltext steht dadurch keine zusammenhängende Adresse/E-Mail,
   für Menschen aber sofort sichtbar (kein Klick nötig). */
.legal-contact p{margin-bottom:4px;}

/* ============ MENTOREN-PROFILSEITEN ============
   Genutzt von www/mentoren/*.php (Übersichtsseite + 6 Profile).
   Zweiter Anlauf (2026-07-31): der erste Entwurf hatte den sonst
   sitetypischen dunklen Navy-".hero" auch für die Mentoren-Profile
   übernommen — Feedback von Ferit: wirkt für ein persönliches Porträt zu
   "corporate", ein Mensch ist keine Produkt-Kategorie wie ein Mindset-
   Modul. Deshalb eigener heller Hero (.mentor-hero) mit echtem Foto statt
   Duotone-Kachel, und auch die beiden bisher dunklen Abschnitte (Angebote,
   Zwischen-CTA) sind jetzt helle Varianten, damit die ganze Seite ab dem
   Hero durchgehend hell bleibt. Weiterhin wiederverwendet: .pain-list.narrow
   (Spezialgebiete-Kurzübersicht), .case-list (Deep-Dives), .testi-grid
   (Kundenstimmen), .founder-sec/.founder (Reflexionstext mit Foto),
   .perk-grid (Kontakt), .quote-sec (Schlusszitat). */

/* Heller Mentoren-Hero: Foto + Text nebeneinander, warmer Creme-Hintergrund
   statt Navy-Verlauf. Eigener Name statt "header.hero" wiederzuverwenden,
   weil praktisch jeder Wert (Hintergrund, Textfarben, Ausrichtung) anders
   ist — eine Modifier-Klasse hätte am Ende mehr Overrides gebraucht als
   eine schlanke eigene Definition. */
.mentor-hero{background:var(--cream); position:relative; overflow:hidden;}
.mentor-hero::before{content:""; position:absolute; top:-14%; right:-10%; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,122,24,0.16), transparent 70%); z-index:0;}
.mentor-hero::after{content:""; position:absolute; bottom:-20%; left:-10%; width:360px; height:360px;
  border-radius:50%; background:radial-gradient(circle, rgba(217,102,15,0.08), transparent 70%); z-index:0;}
.mentor-hero-inner{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:44px 56px 0;}
.mentor-hero-inner .kicker{text-align:left; margin-bottom:0;}
.mentor-hero-inner .kicker a{color:var(--orange-deep); border-bottom-color:rgba(217,102,15,0.4);}
.mentor-hero-row{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; padding:34px 0 64px;}
.mentor-hero-photo{border-radius:24px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 26px 60px rgba(30,23,16,0.14);}
.mentor-hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block;}
.mentor-hero-tag{display:inline-block; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  font-weight:700; color:var(--orange-deep); background:rgba(217,102,15,0.08);
  border:1px solid rgba(217,102,15,0.25); padding:6px 14px; border-radius:999px; margin-bottom:18px;}
.mentor-hero-text h1{color:var(--ink-d); font-size:clamp(30px,4vw,46px); text-align:left; margin:0 0 10px; line-height:1.15;}
.mentor-hero-role{color:var(--orange-deep); font-family:'Poppins',sans-serif; font-weight:600;
  font-size:17px; margin-bottom:22px;}
.mentor-hero-text > p{color:var(--ink-d-dim); font-size:15px; line-height:1.75; margin-bottom:24px; max-width:52ch;}
.mentor-chip-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px;}
.mentor-chip-row span{font-size:12.5px; font-weight:600; color:var(--ink-d); background:#fff;
  border:1px solid var(--line-l); padding:8px 16px; border-radius:999px;}

/* Spezialgebiete im Hero als kleine nummerierte Karten statt umbrechender
   Pillen — Feedback 2026-07-31: die Pillen wirkten mit dem langen Text
   unruhig/uneinheitlich breit. */
.mentor-specialty-list{display:flex; flex-direction:column; gap:10px; margin-bottom:30px;}
.mentor-specialty-list .tag-row{display:flex; align-items:center; gap:13px; background:#fff;
  border:1px solid var(--line-l); border-radius:13px; padding:13px 18px;}
.mentor-specialty-list .tag-row .n{width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:rgba(217,102,15,0.10);
  border:1px solid rgba(217,102,15,0.3); color:var(--orange-deep); font-size:11.5px; font-weight:800;}
.mentor-specialty-list .tag-row .txt{font-size:13.5px; font-weight:600; color:var(--ink-d); line-height:1.4;}

/* Voller-Breite Bio-Block unterhalb der Foto+Name-Zeile — für Mentoren-
   Texte, die zu lang für die schmale Hero-Textspalte sind (Feedback
   2026-07-31: "der ganze Text" soll komplett rein, nicht gekürzt). */
.mentor-hero-bio{max-width:720px; margin:0 auto 50px; text-align:left;}
.mentor-hero-bio p{color:var(--ink-d-dim); font-size:15px; line-height:1.75; margin-bottom:18px;}
.mentor-hero-bio p a{color:var(--orange-deep); font-weight:700; border-bottom:1.5px solid rgba(217,102,15,0.35);}
.mentor-hero-bio p a:hover{border-bottom-color:var(--orange-deep);}
.mentor-hero-bio .leitsaetze{margin:22px 0; padding:20px 26px; border-left:3px solid var(--orange-deep);
  background:rgba(217,102,15,0.05); border-radius:0 12px 12px 0;}
.mentor-hero-bio .leitsaetze p{color:var(--ink-d); font-weight:600; font-style:italic; margin-bottom:8px;}
.mentor-hero-bio .leitsaetze p:last-child{margin-bottom:0;}

.pull-quote{
  font-family:'Poppins',sans-serif; font-weight:600; font-style:italic; font-size:22px;
  color:var(--orange-deep); text-align:center; max-width:24ch; margin:0 auto; line-height:1.4;
}

.media-embed{max-width:720px; margin:0 auto 30px; border-radius:16px; overflow:hidden;
  aspect-ratio:16/9; border:1px solid var(--line-l); background:#000;}
.media-embed iframe{width:100%; height:100%; display:block; border:0;}
.platform-links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.platform-links a{
  display:inline-flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif;
  font-weight:700; font-size:13.5px; color:var(--ink-d); border:1.4px solid var(--orange-deep);
  padding:11px 22px; border-radius:999px; transition:background .2s ease;
}
.platform-links a:hover{background:rgba(217,102,15,0.06);}

/* Angebote als helle Karten (statt der dunklen .stage-track) — drei
   Formate nebeneinander, dezentes Karten-Weiß auf Creme statt Navy-Ladder. */
.offer-grid{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.offer-card{background:#fff; border:1px solid var(--line-l); border-radius:20px; padding:32px 28px;
  display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;}
.offer-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(30,23,16,0.08);}
.offer-card .tag{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700;
  color:var(--orange-deep); margin-bottom:12px;}
.offer-card h3{font-size:19px; color:var(--ink-d); margin-bottom:10px; line-height:1.25;}
.offer-card p{font-size:14px; color:var(--ink-d-dim); line-height:1.6; margin-bottom:18px; flex:1;}
.offer-card .meta{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-d-dim);
  margin-bottom:18px; padding-top:14px; border-top:1px solid var(--line-l);}
.offer-card .price{font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:var(--ink-d);}
.offer-card a.go{font-size:13.5px; font-weight:700; color:var(--orange-deep); display:inline-flex; gap:6px; align-items:center;}
.offer-card a.go::after{content:"→"; transition:transform .25s ease;}
.offer-card:hover a.go::after{transform:translateX(3px);}

/* Spezialgebiete-Kurzübersicht: kleiner Jump-Link pro Zeile, springt zum
   passenden Deep-Dive weiter unten (Feedback 2026-07-31: die drei Punkte
   sollen mit ihrem jeweiligen Abschnitt verlinkt sein, wie früher die
   "> mehr dazu"-Links auf der alten Seite). */
.pain-row .more-link{display:inline-block; margin-top:10px; font-size:13px; font-weight:700;
  color:var(--orange-deep); border-bottom:1.5px solid rgba(217,102,15,0.35);}
.pain-row .more-link:hover{border-bottom-color:var(--orange-deep);}

/* Kundenstimmen mit 3 statt 2 Spalten (für Mentoren mit 4+ Stimmen) —
   Feedback: bei kleineren Breiten sollen die Karten direkt einspaltig
   untereinander stehen statt über eine 2er-Zwischenstufe zu laufen. */
.testi-grid.cols-3{grid-template-columns:repeat(3,1fr); max-width:1100px;}
@media (max-width:900px){
  .testi-grid.cols-3{grid-template-columns:1fr;}
}

/* Kontakt & Buchung als vollflächige dunkle Sektion (.sec-dark) —
   Feedback 2026-07-31, zweite Runde: das dunkle Panel sollte nicht nur
   ein Block innerhalb einer hellen Sektion sein, sondern die ganze Fläche
   füllen. Die Reihen sitzen jetzt direkt auf .sec-dark, kein eigener
   Karten-Hintergrund/Schatten mehr nötig — .sec-dark bringt Fläche und
   Verlauf schon mit. */
.contact-rows{max-width:760px; margin:0 auto 36px; display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.contact-row{display:flex; align-items:center; gap:14px; background:rgba(244,241,234,0.05);
  border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
.contact-row .ic{width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; background:rgba(255,122,24,0.12); border:1px solid rgba(255,122,24,0.35);}
.contact-row .lbl{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim); margin-bottom:2px;}
.contact-row a, .contact-row .val{color:var(--ink); font-size:14px; font-weight:600; word-break:break-word;}
.contact-cta{text-align:center;}

/* Verkleinertes Porträt (Hero-Foto, Foto bei "X bei Unique Life Now") —
   auf Desktop bewusst schmaler als die volle Spalte (Feedback 2026-07-31:
   "etwas kleiner, harmonischer"), auf Mobile aber wieder volle Breite,
   weil dort die Spalte ohnehin einspaltig ist und ein 340px-Foto in der
   Mitte verloren wirkt (Referenz-Mockup: Foto füllt die Breite). Eigene
   Klasse statt Inline-Style, damit genau dieser Breakpoint-Unterschied
   zentral an einer Stelle steht. */
.mentor-photo-sm{max-width:340px; margin:0 auto;}

/* "Mentor bei Unique Life Now"-Foto: .founder-visual selbst bleibt
   unangetastet (Ferit nutzt sie unverändert auf der Startseite), deshalb
   eigene Zusatzklasse nur für dieses Foto. Der Zoom/Ausschnitt ist NICHT
   pauschal für alle Mentoren richtig — jedes Foto braucht seinen eigenen,
   per PIL-Simulation geprüften Wert (z.B. .crop-mona), sonst bekommt ein
   bereits gut komponiertes quadratisches Foto (wie bei Stefanie) fälschlich
   Monas starken Zoom aufgedrückt. Ohne Modifier-Klasse: kein Zoom, einfach
   object-fit:cover mit Standard-Zentrierung. */
.mentor-founder-photo{border:none;}

/* Buch-Abschnitt (z.B. Antonia Conzett) — Überschrift zentriert oben,
   darunter Cover neben dem Fließtext (ähnliches Zweispalten-Muster wie
   .founder, schmalere Spalte + schmalere Bildspalte). Cover behält sein
   natürliches Seitenverhältnis (3D-Mockup-Foto, kein Quadrat-Zuschnitt). */
.book-row{max-width:640px; margin:0 auto; display:grid; grid-template-columns:150px 1fr;
  gap:32px; align-items:center; text-align:left;}
.book-row .lead{text-align:left; margin:0;}
.book-cover{width:150px; height:auto; border-radius:10px;
  box-shadow:0 20px 50px rgba(20,20,20,0.18); display:block;}
@media (max-width:820px){
  .book-row{grid-template-columns:1fr; text-align:center; justify-items:center;}
}

/* Mona Kraft: enger aufs Gesicht gezoomt statt der ganzen Figur (Feedback
   2026-07-31). transform:scale zoomt sichtbar hinein, object-position
   schiebt den sichtbaren Ausschnitt zum Gesicht hoch (.founder-visual hat
   overflow:hidden, schneidet den Überstand sauber ab). */
.mentor-founder-photo.crop-mona img{object-position:center 0%; transform:scale(1.8); transform-origin:center 4%;}

@media (max-width:820px){
  .pull-quote{font-size:19px;}
  .mentor-hero-inner{padding:36px 22px 0;}
  .mentor-hero-row{grid-template-columns:1fr; gap:28px; padding:24px 0 46px;}
  .offer-grid{grid-template-columns:1fr;}
  .contact-rows{grid-template-columns:1fr;}
  .mentor-photo-sm{max-width:100%;}
  /* Hero-Foto auf Mobile: volle Breite, aber nur halb so hoch wie die
     4:5-Desktop-Version (Feedback 2026-07-31). Jedes Mentoren-Foto braucht
     einen eigenen, per PIL-Simulation geprüften Ausschnitt — deshalb HIER
     keine gemeinsame object-position mehr für alle Fotos, sondern pro
     Mentor eine eigene Modifier-Klasse auf .mentor-hero-photo (z.B.
     .crop-mona). !important bleibt nötig, weil object-position sonst per
     Inline-Style (Desktop-Wert) gesetzt ist und das auf Mobile sonst nicht
     überschreibbar wäre — aber jetzt scoped pro Person, nicht global. */
  .mentor-hero-photo{max-width:100%; margin:0; aspect-ratio:2/1;}

  /* Mona Kraft: object-position:center center schnitt bei diesem sehr
     flachen 2:1-Ausschnitt das Gesicht ab (nur Kinn/Oberkörper sichtbar) —
     Y-Wert näher an den oberen Bildrand gesetzt. */
  .mentor-hero-photo.crop-mona img{object-position:center 18% !important;}

  /* Gleiche Mobile-Behandlung für das Reflexions-Foto: volle Breite, halbe
     Höhe (Feedback 2026-07-31: "genau das Gleiche wie oben"). Der Zoom
     bleibt Mona-spezifisch (siehe Desktop-Regel oben). */
  .mentor-founder-photo{max-width:100%; margin:0; aspect-ratio:2/1;}
  .mentor-founder-photo.crop-mona img{object-position:center 0%; transform:scale(1.15);}

  /* Stefanie Oberfrank: quadratisches Foto, bei diesem flachen 2:1-
     Ausschnitt zeigte object-position:center center (Default) nur noch
     Mund/Kinn/Schultern (Feedback 2026-07-31) — Ausschnitt näher an den
     oberen Bildrand gesetzt, damit das ganze Gesicht sichtbar bleibt. */
  .mentor-founder-photo.crop-stefanie img{object-position:center 10% !important;}

  /* Heike Bauer: quadratisches Foto (See-Motiv), Gesicht sitzt etwas
     oberhalb der Bildmitte — bei diesem 2:1-Ausschnitt per PIL-Simulation
     geprüft. */
  .mentor-founder-photo.crop-heike img{object-position:center 40% !important;}

  /* Birgit Raichle: schmales Hochformat-Foto (Studio-Portrait), Standard-
     Mitte schneidet bei 2:1 das Gesicht ab — per PIL-Simulation geprüft. */
  .mentor-hero-photo.crop-birgit img{object-position:center 35% !important;}
  .mentor-founder-photo.crop-birgit img{object-position:center 0% !important;}

  /* Johanna Reinke: beide Hochformat-Selfies (Wald-Hintergrund) wirkten bei
     der normalen 2:1-Mobile-Kachel zu eng gezoomt (Feedback 2026-07-31:
     "Zoom sie doch weiter raus") — deshalb hier ein eigenes, weniger
     extremes Seitenverhältnis (4:3 statt 2:1) nur für ihre Fotos, dazu
     passend neu justierte object-position, per PIL-Simulation geprüft. */
  .mentor-hero-photo.crop-johanna,
  .mentor-founder-photo.crop-johanna{aspect-ratio:4/3;}
  .mentor-hero-photo.crop-johanna img{object-position:center 45% !important;}
  .mentor-founder-photo.crop-johanna img{object-position:center 45% !important;}

  /* Antonia Conzett: Reflexionsfoto (sie + 3 Hunde am Steg, seit Tausch
     2026-07-31 im Founder-Bereich) — Standard-Mitte schnitt bei diesem
     2:1-Ausschnitt zu knapp, per PIL-Simulation geprüft. Hero-Foto (mit
     Hund im Arm) braucht keine eigene Anpassung, Standard-Zentrierung
     passt bei beiden Breakpoints. */
  .mentor-founder-photo.crop-antonia img{object-position:center 35% !important;}
}

/* ============ 404-SEITE ============
   Wiederverwendet .mentor-hero (helles Cream-Theme, dieselbe Bühne wie
   Über-mich/Mentoren-Profile) statt einer eigenen Hero-Variante — passt
   zum persönlichen, freundlichen Ton, den ein Foto von Ferit hier braucht.
   Nur das Foto (rund, kleiner als .mentor-hero-photo) und die Schnell-
   Links darunter sind neue, seiten-eigene Bausteine. */
.error-photo{width:132px; height:132px; border-radius:50%; overflow:hidden; margin:0 auto 26px;
  box-shadow:0 20px 50px rgba(30,23,16,0.14);}
.error-photo img{width:100%; height:100%; object-fit:cover; display:block;}
/* Direkter Kind-Selektor (>), bewusst NICHT ".mentor-hero-inner h1" ohne
   ">" — sonst würde das auch ".mentor-hero-text h1" auf den echten
   Mentoren-/Über-mich-Seiten treffen (gleiche Spezifität, käme im
   Stylesheet später und würde deren text-align:left überschreiben). Nur
   die 404-Seite hat ein h1 als direktes Kind von .mentor-hero-inner. */
.mentor-hero-inner > h1{color:var(--ink-d); text-align:center;}
.error-lead{color:var(--ink-d-dim); font-size:16px; line-height:1.75; max-width:52ch; margin:0 auto 8px;}
.error-links{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:6px 0 38px;}
.error-links a{font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; color:var(--ink-d);
  border:1.5px solid var(--line-l); border-radius:999px; padding:11px 22px; text-decoration:none;
  transition:border-color .2s ease, color .2s ease;}
.error-links a:hover{border-color:var(--orange-deep); color:var(--orange-deep);}

/* ============ FOOTER ============ */
footer{background:var(--navy-deep); border-top:1px solid var(--line); padding:50px 56px 40px;}
footer a{color:var(--ink-dim);}
footer a:hover{color:var(--orange-3);}
.foot-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.2fr 0.85fr 0.85fr 1fr; gap:32px; margin-bottom:40px;}
.foot-grid h5{font-size:13px; color:var(--ink); margin-bottom:14px;}
.foot-grid ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
.foot-grid a{font-size:13px;}
.foot-bottom{max-width:1180px; margin:0 auto; text-align:center; font-size:12px; color:var(--ink-dim);
  border-top:1px solid var(--line); padding-top:24px;}
.foot-bottom a{font-size:inherit;}

/* Social & Podcast Spalte im Footer — Icon + Label je Zeile, Icons per
   currentColor eingefärbt, ziehen die normale Link-/Hover-Farbe automatisch
   mit (siehe "footer a" oben), keine separate Icon-Farbregel nötig. */
.foot-social a{display:inline-flex; align-items:center; gap:8px;}
.foot-social svg{flex-shrink:0;}

@media (max-width:820px){
  .foot-grid{grid-template-columns:1fr 1fr; gap:26px;}
}