/* fam Hypnose · Designsystem nach dem fam-Shop (Marcellus / Cormorant Garamond, Goldlinien, eckige Buttons), Grundton Nachtblau */
@font-face{font-family:"Marcellus";src:url("../fonts/Marcellus-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --nacht:#020409 url("../img/himmel.jpg") center center/cover no-repeat fixed; --flaeche:#0A090B; --nacht-2:#141218; --nacht-3:#1A1720;
  --violett:#4E3E65; --petrol:#16515D; --gold:#A28167; --lavendel:#DCC6E3; --bernstein:#6C5833;
  --creme:#EDE4D6; --text:#F3ECE1; --leise:#E4DACB;
  --linie:rgba(162,129,103,.45); --linie-2:rgba(162,129,103,.22);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
html{background:#020409}
.himmel-foto{position:fixed;inset:0;z-index:-2;background:#020409 url("../img/himmel.jpg") center center/cover no-repeat;pointer-events:none}
body{margin:0;color:var(--text);font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;line-height:1.8;letter-spacing:.03em;background:transparent;-webkit-font-smoothing:antialiased}
/* Nachthimmel 1:1 aus dem fam-Shop (fam-sky.css) */
.fam-stars{display:block!important;position:fixed;left:0;width:100vw;z-index:-1;pointer-events:none;background-repeat:repeat-y;will-change:transform}
.fam-sky{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}

h1,h2,h3{font-family:"Marcellus",Georgia,serif;font-weight:400;color:var(--creme);margin:0 0 .55em}
h1{font-size:clamp(2.3rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:.015em}
h2{font-size:clamp(1.8rem,3vw,2.35rem);line-height:1.15;letter-spacing:.01em}
h3{font-size:1.25rem;line-height:1.3}
.lav{color:var(--lavendel)}
p{margin:0 0 1.1em}
a{color:var(--lavendel);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--creme)}
strong{color:var(--creme);font-weight:600}
.wrap{max-width:var(--max);margin:0 auto;padding:0 45px}
.schmal{max-width:760px}
.eyebrow{display:block;font-family:"Marcellus",serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#EBCFB2;margin-bottom:18px}
.eyebrow .nr{color:var(--leise);margin-right:10px}

/* Ankündigungsleiste wie im Shop */
.ankuendigung{background:rgba(0,0,0,.92);border-bottom:1px solid var(--linie-2);text-align:center;font-family:"Marcellus",serif;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--leise);padding:9px 20px}

/* Kopfzeile */
header{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linie)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:92px;gap:24px}
.logo{display:flex;align-items:center;gap:18px;text-decoration:none}
.logo img{height:58px;width:auto;display:block}
.logo .strich{width:1px;height:48px;background:var(--gold);opacity:.8}
.logo .wort{font-family:"Marcellus",serif;font-size:19px;letter-spacing:.32em;text-transform:uppercase;color:var(--creme);padding-top:2px}
nav.haupt{display:flex;align-items:center;gap:22px}
nav.haupt a{font-family:"Marcellus",serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--creme);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
nav.haupt a:hover,nav.haupt a.aktiv{border-bottom-color:var(--gold)}
nav.haupt a.btn{border:1px solid var(--gold);padding:12px 20px;color:var(--void,#0A090B)}
@media(max-width:1060px){nav.haupt a:not(.btn){display:none}}

/* Buttons wie im Shop: eckig, Goldlinie, Versalien */
.btn{display:inline-block;font-family:"Marcellus",serif;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding:17px 34px;border:1px solid var(--gold);border-radius:0;transition:background .25s,color .25s,box-shadow .25s;cursor:pointer;text-align:center;line-height:1.4}
.btn-gold{background:var(--gold);color:#0A090B}
.btn-gold:hover{background:#B38F72;color:#0A090B;box-shadow:0 0 30px rgba(162,129,103,.35)}
.btn-linie{background:transparent;color:var(--gold)}
.btn-linie:hover{background:rgba(162,129,103,.12);color:var(--creme)}
.btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}

/* Hero */
.hero{position:relative;min-height:max(540px,min(calc(100vh - 123px),51.5vw));display:flex;align-items:flex-start;padding:4.5vw 0 0;background:none}
.hero h1{font-size:clamp(2rem,3.3vw,2.9rem)}
/* Startbild: Teide + Wolkenmeer, unten weich in das Grau unter den Wolken */
.hero::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;pointer-events:none;
  background:url("../img/startbild-desktop.jpg") 14% 100%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 90%,transparent 100%)}
.hero::after{display:none}
.hero .wrap{position:relative;z-index:2;width:100%;display:flex;justify-content:flex-end}
.hero .inhalt{max-width:600px;color:#2B2622}
.hero .eyebrow{color:#7A5A40}
.hero h1{color:#2B2622}
.hero h1 .lav{color:#4E3E65}
.hero p.unter{font-size:21px;line-height:1.7;color:#3A332D;max-width:560px}
.hero .btn-linie{color:#2B2622;border-color:#7A5A40}
.hero .btn-linie:hover{background:rgba(255,255,255,.35);color:#2B2622}
.hero .fakten{margin-top:26px;font-family:"Marcellus",serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#5A4E44}
.hero .fakten span{color:#7A5A40;margin:0 10px}
@media(max-width:760px){
  .hero{display:block;min-height:0;padding:0 0 10px}
  .hero::before{bottom:auto;height:100vw;background-position:30% 100%;-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent 100%);mask-image:linear-gradient(180deg,#000 75%,transparent 100%)}
  .hero::after{bottom:0}
  .hero .wrap{padding-top:88vw}
  .hero .inhalt,.hero h1,.hero p.unter{color:var(--creme)}
  .hero h1 .lav{color:#E9D9EE}
  .hero .eyebrow,.hero .fakten span{color:#D4B79C}
  .hero .fakten{color:var(--leise)}
  .hero .btn-linie{color:var(--creme);border-color:#D4B79C}
}
/* Satz direkt unter den Wolken */
.sonne{position:relative;z-index:2;text-align:center;padding:30px 0 70px}
.sonne p{font-family:"Marcellus",serif;font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.6;color:var(--creme);max-width:820px;margin:0 auto}
.sonne p .lav{color:#E9D9EE}

/* Abschnitte */
section.abschnitt{padding:120px 0;position:relative;z-index:2}
/* Nur direkt hinter Text kein Sternenhimmel: deckende Flaeche in Himmelsfarbe mit weicher Kante */
.abschnitt :is(h2,h3,p,.eyebrow,.liste,.schritte,.inkl,.faq-gruppe,.bundle ul),
.abschluss :is(h2,p,.eyebrow){background:none;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.abschnitt :is(h2,h3,.eyebrow),.abschluss :is(h2,.eyebrow){width:fit-content}
.hero .inhalt>*{background:transparent!important;box-shadow:none!important}
.hero h1,.hero p.unter{text-shadow:none!important}
.kopf{margin-bottom:56px}
.kopf p{max-width:660px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.zwei,.drei{grid-template-columns:1fr;gap:40px}}

/* Karte mit Goldrahmen (wie Kollektionskacheln) */
.karte{border:1px solid var(--linie);background:var(--nacht);padding:34px 32px}
.karte .oben{font-family:"Marcellus",serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}
.karte p{margin:0;color:var(--leise)}

/* Liste mit feinen Linien */
.liste{list-style:none;padding:0;margin:0}
.liste li{padding:20px 0 20px 34px;border-bottom:1px solid var(--linie-2);position:relative}
.liste li:first-child{border-top:1px solid var(--linie-2)}
.liste li::before{content:"";position:absolute;left:4px;top:33px;width:14px;height:1px;background:var(--gold)}
.satz{font-family:"Marcellus",serif;font-size:1.45rem;color:var(--lavendel);margin-top:34px}

.kasten{border:1px solid var(--linie);border-left:2px solid var(--gold);padding:30px 34px;background:var(--nacht);margin-top:10px}
.kasten h3{color:var(--gold);font-size:1.1rem;letter-spacing:.04em}
.kasten p{margin:0}

/* Coaching */
.preis{font-family:"Marcellus",serif;font-size:3.2rem;color:var(--creme);line-height:1;margin:6px 0 4px}
.preis-zusatz{font-size:16px;color:var(--leise)}
.inkl{list-style:none;padding:0;margin:26px 0 0}
.inkl li{padding:12px 0 12px 30px;border-top:1px solid var(--linie-2);position:relative}
.inkl li::before{content:"✦";position:absolute;left:0;top:12px;color:var(--gold);font-size:13px}
.schritte{list-style:none;padding:0;margin:0;counter-reset:n}
.schritte li{counter-increment:n;display:grid;grid-template-columns:58px 1fr;padding:18px 0;border-bottom:1px solid var(--linie-2)}
.schritte li:first-child{border-top:1px solid var(--linie-2)}
.schritte li::before{content:"0" counter(n);font-family:"Marcellus",serif;color:var(--gold);font-size:15px;letter-spacing:.1em;padding-top:4px}
.schritte b{display:block;font-family:"Marcellus",serif;font-weight:400;color:var(--creme);font-size:1.05rem}
.schritte span{color:var(--leise)}
.hinweis{font-size:17px;color:var(--leise);margin-top:22px}
.grenzen{margin-top:90px}

/* Video */
.video{aspect-ratio:16/9;border:1px solid var(--linie);background:rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.video .play{width:74px;height:74px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center}
.video .play::after{content:"";border-left:18px solid var(--gold);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.video small{font-family:"Marcellus",serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--leise)}

/* Produkte */
.produkt{display:flex;flex-direction:column;border:1px solid var(--linie);background:var(--nacht)}
.produkt .bild{aspect-ratio:4/3;background:url("../img/horizont-desktop.webp") center 70%/cover;border-bottom:1px solid var(--linie);position:relative}
.produkt .bild.b2{background-position:20% 75%}.produkt .bild.b3{background-position:80% 75%}
.produkt .text{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.produkt .text p{color:var(--leise);flex:1;margin-bottom:18px}
.produkt .zeile{display:flex;justify-content:space-between;align-items:center;gap:12px}
.produkt .zeile .p{font-family:"Marcellus",serif;color:var(--creme);font-size:1.1rem}
.produkt .btn{padding:12px 18px;font-size:10.5px}
.gratis{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--lavendel);background:var(--nacht);margin-bottom:24px}
.gratis .bild{background:url("../img/horizont-desktop.webp") center 72%/cover;min-height:320px}
.gratis .text{padding:44px 44px}
@media(max-width:900px){.gratis{grid-template-columns:1fr}.gratis .bild{min-height:200px}}
.bundle{margin-top:24px;border:1px solid var(--linie);background:var(--nacht);padding:36px 34px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.bundle ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--leise)}
.bundle ul li::before{content:"·";color:var(--gold);margin-right:8px}
.bundle .rechts{text-align:right}
@media(max-width:900px){.bundle{grid-template-columns:1fr}.bundle .rechts{text-align:left}}
.klein{font-size:16px;color:var(--leise)}

/* FAQ */
.faq-gruppe{margin-bottom:54px}
.faq-gruppe>.eyebrow{margin-bottom:10px}
details{border-bottom:1px solid var(--linie-2)}
details:first-of-type{border-top:1px solid var(--linie-2)}
summary{cursor:pointer;list-style:none;padding:20px 50px 20px 0;position:relative;font-family:"Marcellus",serif;color:var(--creme);font-size:1.05rem;letter-spacing:.02em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:28px;width:9px;height:9px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg);transition:transform .25s}
details[open] summary::after{transform:rotate(-135deg);top:32px}
details .a{padding:0 0 22px;color:var(--text)}
details .a ul,details .a ol{margin:0;padding-left:1.2em}

/* Abschluss */
.abschluss{text-align:center;padding:140px 0 150px;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(6,5,10,.72),rgba(6,5,10,.38) 75%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55)),url("../img/startbild-desktop.jpg") 14% 100%/cover;border-top:1px solid var(--linie-2)}
.abschluss .btns{justify-content:center}

/* Formulare */
form .frage{margin-bottom:36px}
form label.f{display:block;font-family:"Marcellus",serif;color:var(--creme);font-size:1.05rem;margin-bottom:10px}
form .hilfe{font-size:16px;color:var(--leise);margin:-6px 0 10px}
input[type=text],input[type=email],input[type=tel],textarea,select{width:100%;font:inherit;font-size:19px;color:var(--creme);background:var(--nacht);border:1px solid var(--linie);border-radius:0;padding:12px 14px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--lavendel)}
textarea{min-height:120px;resize:vertical}
select option{background:var(--nacht-2)}
.wahl{display:flex;flex-wrap:wrap;gap:10px}
.wahl label{display:flex;align-items:center;gap:10px;border:1px solid var(--linie);padding:9px 16px;cursor:pointer}
.wahl input,.haken input{accent-color:var(--gold)}
.haken{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:17px;color:var(--leise);line-height:1.6}
.haken input{margin-top:5px;width:17px;height:17px;flex:none}
.bedingt{display:none;margin-top:16px}
.bedingt.an{display:block}
.notiz{border:1px solid var(--lavendel);padding:14px 18px;color:var(--text);font-size:17px}
.versteckt{position:absolute;left:-9999px}

/* Rechtliches */
.recht h2{font-size:1.5rem;margin-top:1.8em}
.offen{border:1px dashed var(--gold);padding:16px 20px;color:var(--gold);margin:22px 0}

/* Fußzeile */
footer{border-top:1px solid var(--linie);background:rgba(0,0,0,.9);padding:60px 0 50px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
footer .titel{font-family:"Marcellus",serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}
footer a{color:var(--text);text-decoration:none;display:block;font-size:18px;line-height:2}
footer a:hover{color:var(--creme)}
footer .logo img{height:50px}
footer .zeile{grid-column:1/-1;border-top:1px solid var(--linie-2);padding-top:22px;font-size:15px;color:var(--leise)}
@media(max-width:900px){footer .wrap{grid-template-columns:1fr}}

@media(max-width:640px){
  body{font-size:19px}
  .wrap{padding:0 22px}
  header .wrap{height:70px}
  .logo{gap:12px}.logo img{height:42px}.logo .strich{height:30px}.logo .wort{font-size:13px;letter-spacing:.24em}
  nav.haupt a.btn{padding:10px 12px;font-size:10px;letter-spacing:.14em}
  .ankuendigung{font-size:9.5px;letter-spacing:.18em}
  section.abschnitt{padding:80px 0}
  .hero .wrap{justify-content:flex-start}
  .hero p.unter{font-size:20px}
  .btns .btn{width:100%}
  .karte{padding:26px 22px}
  .gratis .text{padding:30px 22px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Schrift klar auf dem Himmel */
.hero :is(h1,p,span,a){text-shadow:none}
input[type=text],input[type=email],input[type=tel],textarea,select{background:rgba(0,0,0,.35)}
.abschluss :is(h2,.eyebrow){margin-left:auto;margin-right:auto}
.hero .btn-linie{background:rgba(255,255,255,.55)}

/* ---- Fragen als Buttons ---- */
.knoepfe{display:flex;flex-direction:column;gap:12px;margin-top:28px}
details.knopf{border:1px solid var(--linie);background:rgba(0,0,0,.45);border-radius:0}
details.knopf:first-of-type{border-top:1px solid var(--linie)}
details.knopf summary{padding:18px 54px 18px 22px;font-size:1.08rem}
details.knopf summary::after{right:22px;top:26px}
details.knopf[open]{border-color:var(--gold)}
details.knopf[open] summary::after{top:30px}
details.knopf .a{padding:0 22px 22px}
details.knopf .a ul.inkl,details.knopf .a ol.schritte,details.knopf .a ul.liste{padding-left:0}
.preiszeile{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:6px}
/* ---- Menü-Knopf (Handy) ---- */
.menueknopf{display:none;background:none;border:1px solid var(--linie);width:44px;height:40px;padding:10px;cursor:pointer;flex-direction:column;justify-content:space-between}
.menueknopf span{display:block;height:1px;background:var(--creme)}
@media(max-width:1060px){
  .menueknopf{display:flex}
  nav.haupt{position:absolute;top:100%;left:0;right:0;background:#000;border-bottom:1px solid var(--linie);flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 22px;display:none}
  nav.haupt.offen{display:flex}
  nav.haupt a:not(.btn){display:block;padding:14px 0;border-bottom:1px solid var(--linie-2)}
  nav.haupt a.btn{margin-top:16px}
  header .wrap{position:static}
}
/* ---- Handy: ganzes Panorama, Text darunter ---- */
@media(max-width:760px){
  .hero::before{height:auto;aspect-ratio:2.74/1;bottom:auto;background:url("../img/startbild-desktop.jpg") center/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 85%,transparent 100%);mask-image:linear-gradient(180deg,#000 85%,transparent 100%)}
  .hero .wrap{padding-top:calc(100vw/2.74 + 24px)}
  .hero h1{font-size:1.75rem}
  .hero p.unter{font-size:18px}
  .ankuendigung{display:none}
  section.abschnitt{padding:56px 0}
  .sonne{padding:10px 0 30px}
  .sonne p{font-size:1.1rem}
  details.knopf summary{font-size:1rem;padding:15px 48px 15px 16px}
  details.knopf .a{padding:0 16px 18px}
}
@media(max-width:760px){.hero .btn-linie{background:transparent;color:var(--creme);border-color:#D4B79C}}

/* ---- Startbild: harte Kante ---- */
.hero::before{-webkit-mask-image:none!important;mask-image:none!important}
/* ---- Vorstellung mit Portrait ---- */
.vorstellung{position:relative;z-index:2;padding:80px 0 40px}
.vorstellung-raster{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:center;max-width:980px;margin:0 auto}
.portrait{margin:0;border:1px solid var(--gold);padding:0;line-height:0;background:linear-gradient(180deg,rgba(162,129,103,.10),rgba(162,129,103,0) 60%)}
.portrait img{width:100%;height:auto;display:block}
.vorstellung :is(h2,p,.eyebrow){background:none!important;box-shadow:none!important}
@media(max-width:760px){
  .vorstellung{padding:44px 0 10px}
  .vorstellung-raster{grid-template-columns:1fr;gap:28px}
  .portrait{max-width:260px;margin:0 auto}
  /* Startbild gross, Text im Himmel */
  .hero{display:flex;min-height:calc(100vw/0.75);padding:0}
  .hero::before{height:auto;bottom:0;aspect-ratio:auto;background:url("../img/startbild-mobil.jpg") center bottom/cover no-repeat}
  .hero .wrap{padding-top:36px}
  .hero .inhalt,.hero h1,.hero p.unter{color:#2B2622}
  .hero h1 .lav{color:#4E3E65}
  .hero .eyebrow{color:#7A5A40}
  .hero h1{font-size:1.65rem}
  .hero p.unter{font-size:17px;line-height:1.6}
  .hero .btns{margin-top:22px}
  .hero .btn-linie{display:none}
  /* heller Himmel, keine Flaechen hinter Text (iPhone) */
  .himmel-foto{filter:brightness(1.9) saturate(1.1)}
  .abschnitt :is(h2,h3,p,.eyebrow,.liste,.schritte,.inkl,.faq-gruppe,.bundle ul),.abschluss :is(h2,p,.eyebrow){background:none!important;box-shadow:none!important}
}

/* Runde 10.11. abends */
.portrait{background:#6C5833}
@media(max-width:760px){
  .himmel-foto{filter:brightness(1.3) saturate(1.05)}
  .hero{display:block;min-height:0;padding:0}
  .hero::before{position:relative;display:block;height:auto;aspect-ratio:1800/1247;inset:auto;background:url("../img/startbild-mobil.jpg") center/cover no-repeat}
  .hero .wrap{position:absolute;top:0;left:0;right:0;padding-top:14px}
  .hero .inhalt>.eyebrow,.hero .inhalt>p.unter,.hero .inhalt>.btns{display:none}
  .hero h1{font-size:1.32rem;line-height:1.18;max-width:92%}
  .hero-unten{display:block!important}
}
.hero-unten{display:none;position:relative;z-index:2;padding:26px 0 6px}
.hero-unten p{font-size:18px;line-height:1.65}

/* Runde 19:55 */
.portrait{background:none;padding:10px;border:1px solid var(--gold)}
.portrait img{outline:1px solid rgba(162,129,103,.35)}
@media(max-width:760px){
  .hero::before{aspect-ratio:1900/1107}
  .hero .wrap{padding-top:12px}
  .hero .inhalt{margin-left:auto;max-width:62%}
  .hero h1{font-size:1.02rem;line-height:1.22;max-width:100%}
  .portrait{max-width:240px}
}

/* Unterseiten */
.unterkopf{position:relative;z-index:2;padding:70px 0 40px}
.unterkopf h1{font-size:clamp(2rem,4vw,3rem)}
.unterkopf p.unter{font-size:21px;line-height:1.7;max-width:640px}
.zurueck{display:inline-block;font-family:"Marcellus",serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none;margin-bottom:34px;border-bottom:1px solid transparent}
.zurueck:hover{border-bottom-color:var(--gold);color:var(--creme)}
.unterkopf :is(h1,p,.eyebrow){background:none!important;box-shadow:none!important}
.karte .btn-linie{padding:12px 18px;font-size:10.5px;align-self:flex-start}
.karte{display:flex;flex-direction:column}
@media(max-width:760px){.unterkopf{padding:40px 0 20px}.unterkopf p.unter{font-size:18px}}
/* ---- Umbau 10.11. 22 Uhr ---- */
.kopf.schmal{text-align:left}
.schwerpunkte{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sp-kachel{display:flex;flex-direction:column;border:1px solid var(--linie);background:rgba(0,0,0,.45);text-decoration:none;color:inherit;transition:border-color .25s,transform .25s}
.sp-kachel:hover{border-color:var(--gold);transform:translateY(-2px)}
.sp-bild{aspect-ratio:3/2;background-size:cover;background-position:center;border-bottom:1px solid var(--linie)}
.sp-text{padding:28px 30px 30px}
.sp-text h3{font-size:1.4rem;margin-bottom:.5em}
.sp-text p{color:var(--leise);margin-bottom:18px}
.sp-mehr{font-family:"Marcellus",serif;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.selbstcheck{border-color:var(--gold)!important}
.check-liste{list-style:none;padding:0;margin:4px 0 0}
.check-liste li{padding:6px 0 6px 26px;position:relative;color:var(--text);font-size:18px;line-height:1.5}
.check-liste li::before{content:"✦";position:absolute;left:0;top:7px;color:var(--gold);font-size:12px}
.selbstcheck .btn{align-self:flex-start}
.oellampe{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1080px;margin:0 auto}
.ol-schritt{border:1px solid var(--linie);background:rgba(0,0,0,.45);padding:30px 28px}
.ol-schritt p{color:var(--leise);margin:0}
.ol-nr{display:inline-flex;width:38px;height:38px;border:1px solid var(--linie);border-radius:50%;align-items:center;justify-content:center;font-family:"Marcellus",serif;color:var(--leise);margin-bottom:16px}
.ol-gold{border-color:var(--gold)}
.ol-gold .ol-nr{border-color:var(--gold);color:var(--gold)}
.ol-gold h3{color:var(--gold)}
.faq-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-auto-flow:dense}
details.faq-kachel{border:1px solid var(--linie);background:rgba(0,0,0,.45);border-bottom:1px solid var(--linie)}
details.faq-kachel:first-of-type{border-top:1px solid var(--linie)}
details.faq-kachel summary{padding:20px 46px 22px 22px;font-size:1.02rem;line-height:1.4;min-height:100%}
details.faq-kachel summary::after{right:20px;top:auto;bottom:24px}
.faq-gr{display:block;font-family:"Marcellus",serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
details.faq-kachel[open]{grid-column:1/-1;border-color:var(--gold);height:auto}
details.faq-kachel[open] summary{min-height:0}
details.faq-kachel .a{padding:0 22px 22px;max-width:780px}
.faq-kachel :is(summary,.a){background:none!important;box-shadow:none!important}
@media(max-width:1000px){.faq-raster{grid-template-columns:1fr 1fr}.oellampe{grid-template-columns:1fr}}
@media(max-width:760px){.schwerpunkte{grid-template-columns:1fr}.faq-raster{grid-template-columns:1fr}.sp-text{padding:22px}.ol-schritt{padding:24px 22px}}

.trader-raster{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;margin:28px 0}
.zertifikat figcaption{line-height:1.4;font-family:"Marcellus",serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:12px 4px 4px}
@media(max-width:760px){.trader-raster{grid-template-columns:1fr}}
.kopf.schmal{margin-left:0!important;max-width:720px}
.trader-raster{align-items:start}

.portrait.kopfbild{max-width:300px;margin:36px 0 0}
@media(max-width:760px){.portrait.kopfbild{max-width:240px;margin:28px auto 0}}

/* Bergfuehrer-Frage im Startbild + aufklappbare Geschichte */
.berg-knopf{display:inline-block;font-family:"Marcellus",serif;font-size:15px;letter-spacing:.06em;line-height:1.5;text-decoration:none;color:var(--creme);border:1px solid var(--gold);background:rgba(10,9,11,.55);padding:16px 24px;transition:background .25s}
.berg-knopf:hover{background:rgba(162,129,103,.35)}
.hero .berg-knopf.nur-desktop{position:absolute;left:32px;top:0;z-index:3;color:var(--creme)}
.hero-unten{display:none}
.bergfuehrer{display:none;position:relative;z-index:2;padding:70px 0 40px}
.bergfuehrer:target{display:block}
.bergfuehrer .wrap{background:#000;padding:44px 40px}
.bergfuehrer p{font-size:20px;line-height:1.75}
.bergfuehrer .zu{font-family:"Marcellus",serif;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);text-decoration:none}
@media(max-width:760px){
  .hero .berg-knopf.nur-desktop{display:none}
  .hero-unten{display:block;position:relative;z-index:2;padding:6px 0 40px}
  .hero-unten .berg-knopf{display:block;text-align:center;font-size:16px}
  .bergfuehrer{padding:10px 0 30px}.bergfuehrer .wrap{padding:30px 22px}.bergfuehrer p{font-size:18px}
}
.hero .berg-knopf.nur-desktop{background:rgba(255,255,255,.35);color:#2B2622;border-color:#7A5A40;font-size:16px;padding:18px 28px}
.hero .berg-knopf.nur-desktop:hover{background:rgba(255,255,255,.6)}

.berg-knopf small{display:block;margin-top:6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.75}
@media(max-width:760px){
  .hero .berg-knopf.nur-desktop{display:block;left:12px;top:12px;max-width:150px;font-size:12px;line-height:1.35;padding:8px 10px;letter-spacing:.02em}
  .hero .berg-knopf.nur-desktop small{font-size:8px;margin-top:4px;letter-spacing:.18em}
}
@media(max-width:760px){.hero .berg-knopf.nur-desktop{max-width:128px;left:10px;top:10px;font-size:11.5px;padding:7px 9px}}
@media(max-width:760px){.hero .berg-knopf br{display:none}}

/* Startbild: Bergfrage ersetzt Ueberschrift */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero .berg-knopf.haupt{font-size:clamp(1.3rem,2.1vw,1.9rem);line-height:1.35;padding:26px 34px;background:rgba(255,255,255,.35);color:#2B2622;border-color:#7A5A40;margin-top:14px}
.hero .berg-knopf.haupt small{font-size:11px;margin-top:12px;color:#7A5A40;opacity:1}
.hero .berg-knopf.haupt:hover{background:rgba(255,255,255,.6)}
.einstieg{padding-bottom:0!important}
.einstieg h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.einstieg p{font-size:21px;line-height:1.75}
@media(max-width:760px){
  .hero .berg-knopf.haupt{display:block;font-size:15px;line-height:1.35;padding:12px 14px;margin-top:0}
  .hero .berg-knopf.haupt br{display:none}
  .hero .berg-knopf.haupt small{font-size:9px;margin-top:6px;letter-spacing:.18em}
  .einstieg p{font-size:18px}
}

.wahl.skala{gap:6px}.wahl.skala label{padding:9px 0;width:calc(10% - 6px);min-width:38px;justify-content:center;flex-direction:column;gap:4px;font-size:15px}
@media(max-width:760px){.wahl.skala label{width:calc(20% - 6px)}}

/* Sterne gedimmt (max. 60 %) */
.fam-stars{opacity:.6}
/* Aufklappbarer Beschreibungstext */
.aufklapp-text{max-height:5.4em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%);transition:max-height .5s ease}
.aufklapp-text p{margin:0}
.aufklapp.ist-offen .aufklapp-text{max-height:60em;-webkit-mask-image:none;mask-image:none}
.aufklapp-knopf{background:none;border:0;padding:6px 0;margin-top:4px;cursor:pointer;font-family:"Marcellus",serif;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

.sonne{padding:44px 0 10px}
@media(max-width:760px){.sonne{padding:30px 0 0}}

/* Sonnen-Satz zurueckhaltender */
.sonne p{font-size:1.15rem;line-height:1.7;max-width:640px;opacity:.82}
@media(max-width:760px){.sonne p{font-size:.92rem;line-height:1.7;max-width:320px}}
.sonne p{font-size:18px;max-width:1100px}
@media(max-width:760px){.sonne p br{display:none}.sonne p{font-size:14px;max-width:none;letter-spacing:0}}

/* Sonnen-Satz: 2 Zeilen weiss + 1 Zeile lila */
.sonne p{font-size:22px;max-width:1100px;letter-spacing:0;opacity:.9}
.sonne p.lav-zeile{margin-top:.2em}
@media(max-width:760px){.sonne .wrap{padding-left:14px;padding-right:14px}.sonne p{font-size:12px;max-width:none;line-height:1.7}}
.sonne p{max-width:860px;text-wrap:balance}
@media(max-width:760px){.sonne p{max-width:none}}

.faq-ende{text-align:center;margin:36px auto 0;max-width:640px}

.abschluss .btn-linie{color:var(--creme);border-color:rgba(237,228,214,.8);background:rgba(10,9,11,.35)}
.abschluss .btn-linie:hover{background:rgba(10,9,11,.6)}

.quali{font-size:17px;line-height:1.7;color:var(--creme);opacity:.85}
.quali .eyebrow{display:block;margin-bottom:6px}

/* Routine (Trading) */
.routine-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.routine-schritt{background:#000;border:1px solid rgba(162,129,103,.35);padding:26px 22px}
.routine-schritt .nr{display:inline-flex;width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;align-items:center;justify-content:center;font-family:"Marcellus",serif;color:var(--gold);margin-bottom:12px}
.routine-schritt h3{font-family:"Marcellus",serif;font-weight:400;font-size:20px;margin:0 0 8px}
.routine-schritt p{font-size:17px;line-height:1.7;margin:0}
.tafel{margin:16px 0 0;max-width:180px}.tafel img{width:100%;height:auto;display:block;border:1px solid rgba(162,129,103,.35)}
@media(max-width:760px){.routine-raster{grid-template-columns:1fr}}
/* Erfahrungen */
.erf-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}
.erf-video{aspect-ratio:9/16;max-height:520px;background:#000;border:1px solid rgba(162,129,103,.35);display:flex;align-items:center;justify-content:center}
.erf-video span{font-family:"Marcellus",serif;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--gold);opacity:.7}
.erf-karte{margin:0;background:#000;border:1px solid rgba(162,129,103,.35);padding:28px}
.erf-karte blockquote{margin:0 0 14px;font-size:19px;line-height:1.7;font-style:italic}
.erf-karte figcaption{font-family:"Marcellus",serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
@media(max-width:760px){.erf-raster{grid-template-columns:1fr}}
.erf-raster:has(.erf-video){grid-template-columns:repeat(auto-fill,minmax(220px,280px));justify-content:center}
#videos .kopf,#stimmen .kopf{margin-left:auto;margin-right:auto}

/* Cookie-Banner */
#cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;display:flex;justify-content:center}
#cookie-banner .cb-innen{max-width:720px;width:100%;background:#0A090B;border:1px solid rgba(162,129,103,.6);padding:22px 24px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
#cookie-banner .cb-titel{font-family:"Marcellus",serif;font-size:18px;color:var(--creme);margin:0 0 6px}
#cookie-banner .cb-text{font-size:16px;line-height:1.6;margin:0 0 12px}
#cookie-banner .cb-details{display:grid;gap:6px;margin:0 0 14px;font-size:16px}
#cookie-banner .cb-details label{display:flex;gap:10px;align-items:center}
#cookie-banner .cb-details[hidden]{display:none}
#cookie-banner .cb-knoepfe{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#cookie-banner .btn{padding:12px 18px;font-size:11px}
@media(max-width:760px){#cookie-banner{left:8px;right:8px;bottom:8px}#cookie-banner .cb-innen{padding:16px}#cookie-banner .cb-text{font-size:14px}#cookie-banner .cb-knoepfe .btn{flex:1 1 auto}}

/* Geschichten, Prozesskette, Vergleich */
.geschichte-text{background:#000;padding:4px 0}
.geschichte-text p{font-size:19px;line-height:1.8}
.lav-satz{color:var(--lavendel);font-family:"Marcellus",serif;font-size:21px!important}
details.ganz{margin-top:14px}
details.ganz>summary{cursor:pointer;list-style:none;font-family:"Marcellus",serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding:10px 0}
details.ganz>summary::-webkit-details-marker{display:none}
details.ganz>summary::after{content:" ↓"}
details.ganz[open]>summary::after{content:" ↑"}
ol.kette{list-style:none;margin:30px 0;padding:0;display:grid;gap:0}
ol.kette li{display:flex;gap:18px;align-items:flex-start;background:#000;border:1px solid rgba(162,129,103,.35);padding:20px 22px;position:relative}
ol.kette li+li{margin-top:26px}
ol.kette li+li::before{content:"↓";position:absolute;top:-25px;left:38px;color:var(--gold);font-size:18px}
ol.kette .nr{flex:0 0 38px;height:38px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Marcellus",serif;color:var(--gold)}
ol.kette h3{font-family:"Marcellus",serif;font-weight:400;font-size:20px;margin:6px 0 6px}
ol.kette p{margin:0;font-size:17px;line-height:1.7}
.vergleich{margin-top:26px;border:1px solid rgba(162,129,103,.35);background:#000}
.vergleich .v-kopf,.vergleich .v-zeile{display:grid;grid-template-columns:1fr 1fr}
.vergleich .v-kopf span{font-family:"Marcellus",serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:14px 20px;border-bottom:1px solid rgba(162,129,103,.35)}
.vergleich .v-zeile p{margin:0;padding:16px 20px;font-size:17px;line-height:1.6}
.vergleich .v-zeile p:first-child{font-style:italic;opacity:.85;border-right:1px solid rgba(162,129,103,.2)}
.vergleich .v-zeile+.v-zeile p{border-top:1px solid rgba(162,129,103,.2)}
@media(max-width:760px){.vergleich .v-kopf span{padding:12px 12px;font-size:10px}.vergleich .v-zeile p{padding:12px;font-size:15px}.geschichte-text p{font-size:17px}}

/* Lesbarkeit: Fließtext größer und etwas kräftiger (11.11.) */
body{font-size:22px;font-weight:500}
.geschichte-text p,.einstieg p,.bergfuehrer p{font-size:22px}
.routine-schritt p,ol.kette p,.vergleich .v-zeile p,.knopf .a,.faq-kachel .a,.kasten p,.quali{font-size:20px}
@media(max-width:760px){
  body{font-size:20px}
  .geschichte-text p,.einstieg p,.bergfuehrer p{font-size:20px}
  .routine-schritt p,ol.kette p,.knopf .a,.faq-kachel .a,.kasten p,.quali{font-size:19px}
  .vergleich .v-zeile p{font-size:17px}
}

/* Sprachumschalter + Hinweis */
.sprachwahl{font-family:"Marcellus",serif;font-size:11.5px;letter-spacing:.2em;color:var(--leise);display:flex;align-items:center;gap:6px;margin-left:16px;flex:none}
.sprachwahl a{color:var(--creme);text-decoration:none;border-bottom:1px solid transparent;padding:4px 0}
.sprachwahl a:hover{border-bottom-color:var(--gold)}
.sprachwahl .an{color:var(--gold)}
header .wrap{align-items:center}
#sprach-hinweis{position:fixed;left:50%;transform:translateX(-50%);top:96px;z-index:60;display:flex;align-items:center;gap:16px;background:rgba(10,9,11,.94);border:1px solid var(--gold);padding:12px 14px 12px 20px;font-size:16px;color:var(--creme);max-width:calc(100% - 24px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
#sprach-hinweis .btn{padding:9px 16px;font-size:11px;white-space:nowrap}
#sprach-hinweis button{background:none;border:0;color:var(--creme);font-size:22px;cursor:pointer;line-height:1;padding:4px 6px}
@media(max-width:600px){#sprach-hinweis{flex-wrap:wrap;gap:10px;top:auto;bottom:12px;font-size:15px}}

nav.haupt a{white-space:nowrap}
@media(max-width:1240px){nav.haupt{gap:16px}nav.haupt a{letter-spacing:.14em}}
@media(max-width:600px){#sprach-hinweis{top:78px;bottom:auto}}
.wahl.skala label{box-sizing:border-box;width:calc(10% - 5.4px);min-width:0}@media(max-width:760px){.wahl.skala label{width:calc(20% - 4.8px)}}