/* Verkaufsseite „Was Frauen nie sagen" v2 – keine externen Schriften/Tracker (DSGVO) */
:root{
  --nacht:#0e0916; --nacht2:#170f22; --karte:#1d1429; --linie:#3a2a4d;
  --rose:#c2334d; --rose2:#ea6a82; --gold:#e0bb72; --text:#f3ecf6; --mut:#bdb1ca;
  --papier:#faf5ee; --tinte:#2a2230; --tinte2:#5a4e63;
  --serif:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nacht);color:var(--text);font:19px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--rose2)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.schmal{max-width:780px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;margin:0 0 .5em}
h2{font-size:clamp(30px,4.4vw,46px);text-align:center;letter-spacing:-.01em}
h2 em,h1 em{font-style:italic;color:var(--rose2);font-weight:700}
.hell h2 em{color:var(--rose)}
.kicker{font:700 13px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.zentriert{text-align:center}
.lead{max-width:680px;margin:0 auto 8px;text-align:center;color:var(--mut);font-size:20px}
.hell .lead{color:var(--tinte2)}
section{padding:92px 0;position:relative}
.hell{background:var(--papier);color:var(--tinte)}
.hell .kicker{color:var(--rose)}
.hell h2{color:#1d1424}

/* Kopfleiste */
.leiste{background:#08050d;border-bottom:1px solid var(--linie);font-size:14.5px;color:var(--mut);text-align:center;padding:9px 14px;letter-spacing:.02em}
.leiste b{color:var(--gold);font-weight:600}

/* Sterne */
.sterne{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sterne i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.5;animation:funkeln 5s ease-in-out infinite}
@keyframes funkeln{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.3)}}

/* Hero */
.hero{padding:70px 0 90px;background:
  radial-gradient(ellipse 60% 70% at 78% 30%,rgba(194,51,77,.28) 0,transparent 65%),
  radial-gradient(ellipse 80% 60% at 20% 0%,#2f1b45 0,transparent 70%),var(--nacht);overflow:hidden}
.hero .raster{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center;position:relative}
.hero h1{font-size:clamp(46px,7vw,84px);letter-spacing:-.02em;margin-bottom:.18em}
.hero .haken-zeile{font-family:var(--serif);font-size:clamp(22px,2.6vw,29px);line-height:1.4;color:#fff;margin:0 0 10px}
.hero .unter{font-size:18px;color:var(--mut);margin:0 0 28px;max-width:520px}
.hero .bild{position:relative;display:flex;justify-content:center}
.hero .bild:before{content:"";position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(circle,rgba(234,106,130,.5),transparent 68%);filter:blur(30px)}
.hero .bild img{position:relative;width:min(100%,470px);border-radius:10px;box-shadow:0 40px 90px rgba(0,0,0,.65);animation:schweben 7s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(.6deg)}}
.stempel{position:absolute;right:2%;bottom:7%;z-index:2;width:112px;height:112px;border-radius:50%;background:radial-gradient(#f0d28f,#b98d3e);color:#2a1c05;
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);line-height:1;box-shadow:0 0 0 5px #0e0916,0 0 0 7px var(--gold),0 14px 30px rgba(0,0,0,.5);transform:rotate(8deg)}
.stempel b{font-size:40px}.stempel small{font-size:12px;letter-spacing:.14em;margin-top:4px;font-weight:700}
.haken{list-style:none;padding:0;margin:0 0 30px}
.haken li{position:relative;padding-left:36px;margin:0 0 11px}
.haken li:before{content:"";position:absolute;left:5px;top:.42em;width:14px;height:8px;border-left:3px solid var(--rose2);border-bottom:3px solid var(--rose2);transform:rotate(-45deg)}
.hell .haken li:before{border-color:var(--rose)}

/* Preis + Knopf */
.preisbox{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.preis{font-family:var(--serif);font-size:50px;font-weight:700;line-height:1;color:#fff}
.preis small{display:block;font:14px var(--sans);color:var(--mut);margin-top:7px;font-weight:400}
.knopf{display:inline-block;position:relative;overflow:hidden;background:linear-gradient(#dc4560,#a5233c);color:#fff;text-decoration:none;font:700 20px/1.2 var(--sans);
  padding:20px 36px;border-radius:10px;box-shadow:0 10px 28px rgba(194,51,77,.5),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .18s,box-shadow .18s;text-align:center}
.knopf:before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:glanz 4.5s ease-in-out infinite}
@keyframes glanz{0%,55%{left:-70%}100%{left:130%}}
.knopf:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(194,51,77,.65)}
.knopf:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.knopf span{display:block;font-weight:400;font-size:14px;opacity:.92;margin-top:4px}
.vertrauen{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;font-size:15px;color:var(--mut)}
.vertrauen i{font-style:normal;color:var(--gold);margin-right:7px}

/* Zeichen-Band */
.band{background:#08050d;border-block:1px solid var(--linie);padding:22px 0;overflow:hidden;position:relative}
.band:before,.band:after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2}
.band:before{left:0;background:linear-gradient(90deg,#08050d,transparent)}
.band:after{right:0;background:linear-gradient(-90deg,#08050d,transparent)}
.spur{display:flex;gap:0;width:max-content;animation:lauf 80s linear infinite}
.spur span{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--mut);white-space:nowrap;padding:0 26px;position:relative}
.spur span:after{content:"✦";position:absolute;right:-6px;color:var(--rose2);font-style:normal;font-size:14px}
@keyframes lauf{to{transform:translateX(-50%)}}

/* Vorwort */
.zitat{font-family:var(--serif);font-size:clamp(25px,3.6vw,38px);font-style:italic;text-align:center;line-height:1.35;margin:0 auto 38px;max-width:760px;color:#1d1424}
.zitat:before{content:"“";display:block;font-size:90px;line-height:.5;color:var(--rose);opacity:.35;margin-bottom:8px}
.fliess p{margin:0 0 1.15em}
.fliess p:first-child:first-letter{font-family:var(--serif);float:left;font-size:4.1em;line-height:.8;padding:6px 12px 0 0;color:var(--rose);font-weight:700}

/* Aufbau + Beispielseite */
.aufbau-raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.aufbau-raster .seite img{border-radius:4px;box-shadow:0 30px 60px rgba(42,34,48,.28),0 0 0 1px #e1d6c9;transform:rotate(-2deg);transition:transform .4s}
.aufbau-raster .seite img:hover{transform:rotate(0) scale(1.02)}
.aufbau-raster h2{text-align:left}
.schritte{list-style:none;margin:26px 0 0;padding:0;counter-reset:s}
.schritte li{counter-increment:s;display:flex;gap:18px;align-items:flex-start;padding:15px 0;border-top:1px solid #e3d8cc;font-size:19px;line-height:1.45}
.schritte li:before{content:counter(s);flex:none;width:40px;height:40px;border-radius:50%;background:var(--rose);color:#fff;font:700 19px/40px var(--serif);text-align:center}
.schritte b{display:block;font-family:var(--serif);font-size:20px;color:#1d1424}
.schritte span{color:var(--tinte2);font-size:17px}

/* Inhaltsverzeichnis (Akkordeon) */
.teile{max-width:860px;margin:44px auto 0;display:grid;gap:12px}
.teil{background:var(--karte);border:1px solid var(--linie);border-radius:14px;overflow:hidden;transition:border-color .2s}
.teil[open]{border-color:var(--rose)}
.teil summary{display:flex;align-items:center;gap:18px;padding:20px 24px;cursor:pointer;list-style:none;font-family:var(--serif);font-size:22px;color:#fff;position:relative}
.teil summary::-webkit-details-marker{display:none}
.teil summary:after{content:"+";margin-left:auto;font-size:30px;color:var(--rose2);font-family:var(--sans);font-weight:300;transition:transform .25s}
.teil[open] summary:after{transform:rotate(45deg)}
.teil .nr{flex:none;font-size:15px;letter-spacing:.18em;color:var(--gold);font-family:var(--sans);font-weight:700;min-width:42px}
.teil .sub{display:block;font-size:15.5px;font-style:italic;color:var(--mut);font-weight:400;margin-top:2px}
.teil ol{list-style:none;margin:0;padding:4px 24px 20px 24px;font-size:18px}
.teil li{padding:9px 0;border-top:1px dashed var(--linie);display:flex;gap:14px}
.teil li em{font-style:normal;color:var(--rose2);font-family:var(--serif);font-weight:700;min-width:30px}
.mitgabe{max-width:860px;margin:18px auto 0;text-align:center;color:var(--mut);font-size:17px}

/* Einblick */
.einblick{background:radial-gradient(ellipse at 50% 0%,#2a1a3d 0,transparent 70%),var(--nacht2)}
.seiten{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:46px}
.seiten figure{margin:0;transition:transform .35s}
.seiten figure:nth-child(1){transform:rotate(-2.5deg)}
.seiten figure:nth-child(3){transform:rotate(2.5deg)}
.seiten figure:hover{transform:translateY(-8px) rotate(0)!important}
.seiten img{border-radius:4px;box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px #3a2a4d}
.seiten figcaption{font-size:15px;color:var(--mut);text-align:center;margin-top:14px;font-style:italic;font-family:var(--serif)}

/* Für wen */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px}
.box{background:#fff;border:1px solid #e7ddd2;border-radius:16px;padding:32px;box-shadow:0 10px 30px rgba(42,34,48,.06)}
.box h3{font-size:23px;color:#1d1424}
.box.nein{background:transparent;box-shadow:none;border-style:dashed}
.box.nein li:before{border:0;content:"✕";color:#9a8ea4;transform:none;left:4px;top:0;width:auto;height:auto;font-weight:700}
.box .haken{margin:0}

/* Ergänzungen */
.extras{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.extra-k{display:flex;gap:20px;align-items:center;background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:18px}
.extra-k img{width:128px;border-radius:10px;flex:none}
.extra-k h3{font-size:21px;margin-bottom:5px;color:#fff}
.extra-k p{margin:0;font-size:16px;line-height:1.5;color:var(--mut)}

/* Kanal */
.kanal{display:flex;gap:28px;align-items:center;background:#fff;border:1px solid #e7ddd2;border-radius:18px;padding:28px}
.kanal img{width:112px;height:112px;border-radius:50%;border:3px solid var(--gold);flex:none}
.kanal p{margin:0;color:var(--tinte2)}

/* Angebot */
.angebot{background:radial-gradient(ellipse at 50% 0%,rgba(194,51,77,.3) 0,transparent 65%),var(--nacht2);overflow:hidden}
.karte-angebot{max-width:820px;margin:40px auto 0;background:linear-gradient(160deg,#241733,#1a1124);border:1px solid var(--rose);border-radius:22px;padding:42px;display:grid;grid-template-columns:230px 1fr;gap:38px;align-items:center;box-shadow:0 0 0 6px rgba(194,51,77,.12),0 40px 80px rgba(0,0,0,.5)}
.karte-angebot img{border-radius:8px;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.karte-angebot .haken{margin-bottom:24px}
.garantie{display:flex;gap:24px;align-items:center;max-width:820px;margin:32px auto 0;padding:24px 30px;border:1px dashed var(--gold);border-radius:16px;background:rgba(224,187,114,.05)}
.siegel{flex:none;width:96px;height:96px;border-radius:50%;background:radial-gradient(#f0d28f,#b38a3c);color:#2a1c05;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;line-height:1;box-shadow:0 0 0 5px #170f22,0 0 0 7px var(--gold)}
.siegel b{font-size:36px}.siegel small{font-size:12px;letter-spacing:.1em}

/* FAQ */
.faq details{border-bottom:1px solid #e3d8cc;padding:18px 4px}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:21px;font-weight:700;list-style:none;position:relative;padding-right:36px;color:#1d1424}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:-4px;color:var(--rose);font-size:30px;font-weight:400}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:12px 0 0;color:var(--tinte2)}

/* Fuß */
footer{background:#07040b;color:#8c7f97;font-size:14px;line-height:1.6;padding:40px 0 110px;text-align:center}
footer a{color:#b9aec4;margin:0 10px}
footer p{max-width:780px;margin:12px auto}

/* Feste Kaufleiste */
.fix{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(14,9,22,.95);backdrop-filter:blur(8px);border-top:1px solid var(--rose);padding:10px 16px;display:flex;gap:14px;align-items:center;justify-content:center;transform:translateY(110%);transition:transform .35s}
.fix.an{transform:none}
.fix .p{font-family:var(--serif);font-size:26px;font-weight:700;color:#fff;line-height:1}
.fix .p small{display:block;font:12px var(--sans);color:var(--mut);font-weight:400;margin-top:3px}
.fix .knopf{padding:13px 26px;font-size:17px}
.fix .knopf:before{display:none}

/* Einblenden */
.ein{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.ein.da{opacity:1;transform:none}
.seiten figure.ein.da:nth-child(1){transform:rotate(-2.5deg)}
.seiten figure.ein.da:nth-child(3){transform:rotate(2.5deg)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}.ein{opacity:1;transform:none}
}

/* Rechtstexte */
.recht{background:var(--papier);color:var(--tinte);min-height:100vh;padding:50px 0}
.recht h1{font-size:36px}.recht h2{font-size:22px;text-align:left;margin-top:1.6em}
.recht p,.recht li{font-size:17px}
.recht .zurueck{display:inline-block;margin-bottom:24px}

@media (max-width:860px){
  body{font-size:18px}
  section{padding:64px 0}
  .hero{padding:40px 0 60px}
  .hero .raster,.zwei,.extras,.aufbau-raster{grid-template-columns:1fr;gap:34px}
  .hero .bild{order:-1}
  .hero .bild img{width:min(78%,340px)}
  .stempel{width:92px;height:92px;right:4%}.stempel b{font-size:32px}
  .aufbau-raster .seite{max-width:340px;margin:0 auto}
  .aufbau-raster h2{text-align:center}
  .seiten{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}
  .seiten figure,.seiten figure.ein.da:nth-child(1),.seiten figure.ein.da:nth-child(3),.seiten figure:nth-child(1),.seiten figure:nth-child(3){transform:none}
  .karte-angebot{grid-template-columns:1fr;padding:28px 22px}
  .karte-angebot img{max-width:200px;margin:0 auto}
  .karte-angebot .preisbox{justify-content:center}
  .kanal{flex-direction:column;text-align:center}
  .garantie{flex-direction:column;text-align:center}
  .knopf{width:100%}
  .fix .knopf{width:auto;flex:1;max-width:260px}
  .teil summary{font-size:19px;padding:16px 18px}
  .teil ol{padding:2px 18px 16px;font-size:17px}
  .extra-k{flex-direction:column;text-align:center}
}