/* ============================================================
   SALES PERFORMANCE – DAS PLAYBOOK
   Landingpage-CI

   Die Optik ist bewusst NICHT die der Ankauf-Landingpages.
   Sie bildet das Playbook selbst nach: dunkle Kapitelseiten,
   helle Inhaltsseiten, Gold nur als Linie, Label und Ziffer.

   Schriften wie im PDF: Archivo (Ueberschriften, Labels),
   Inter (Fliesstext). Beides ueber Google Fonts.

   Farben aus UMA-PRO_Farbpalette.pdf:
     #0D0D0D Hintergrund · #C9A84C Akzent · #E2C879 hell
     #A8842F dunkel · #ECE8DF Creme · #B6B1A6 gedaempft
   #8A5F1C stammt aus dem zweiten Brandguide und ist die einzige
   Goldstufe, die auf hellem Grund die Kontrastanforderung
   erfuellt (5.5:1). Kleine Goldtexte auf Papier nutzen deshalb
   IMMER --gold-ink, nie --gold.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* Papier */
  --paper:#fbfaf9; --paper2:#f5f1e7; --paper3:#ffffff;
  --ink:#111111; --ink2:#3a3a3a; --ink3:#6b6b6b;
  --rule:rgba(17,17,17,0.12); --rule2:rgba(17,17,17,0.07);
  /* Dunkel */
  --black:#0d0d0d; --black2:#161510; --black3:#2b2820;
  --cream:#ece8df; --cream2:#b6b1a6; --cream3:#8d887d;
  --rule-d:rgba(236,232,223,0.14);
  /* Gold */
  --gold:#c9a84c; --gold-l:#e2c879; --gold-d:#a8842f; --gold-ink:#8a5f1c;
  /* Signal */
  --green:#5fb98a; --red:#c46a5c;
}

*{margin:0;padding:0;box-sizing:border-box;}
/* Muss vor allen display-Regeln stehen: eine Angabe wie display:flex wuerde
   das hidden-Attribut sonst aushebeln und verborgene Elemente doch anzeigen. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink2);
  font-weight:400;line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.wrap{max-width:1020px;margin:0 auto;padding:0 28px;}
.col{max-width:760px;margin:0 auto;}            /* Textspalte wie im PDF */

/* ===== Typografie ===== */
h1,h2,h3,h4{font-family:'Archivo',sans-serif;color:var(--ink);letter-spacing:-0.5px;line-height:1.1;}
h1{font-size:clamp(34px,6.4vw,62px);font-weight:800;letter-spacing:-1.6px;line-height:1.02;}
h2{font-size:clamp(26px,4.2vw,42px);font-weight:800;letter-spacing:-1px;}
h3{font-size:clamp(19px,2.4vw,24px);font-weight:700;}
h4{font-size:16px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;}
p{font-size:clamp(15px,1.7vw,17px);}
strong,b{font-weight:600;color:var(--ink);}

/* Gold-Label, das Erkennungszeichen des Playbooks */
.eyebrow{font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:2.8px;text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px;}
.lead{font-size:clamp(16px,1.9vw,19px);color:var(--ink3);font-weight:300;}
.rule-gold{width:104px;height:3px;background:var(--gold);margin:22px 0;border:0;}

/* ===== Flaechen ===== */
.paper{background:var(--paper);color:var(--ink2);}
.dark{background:var(--black);color:var(--cream2);}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff;}
.dark .eyebrow{color:var(--gold);}
.dark .lead{color:var(--cream2);}
.dark strong,.dark b{color:var(--cream);}
.dark a{color:var(--gold-l);}
section{padding:clamp(44px,6vw,68px) 0;}

/* ===== Kopfzeile wie auf den Playbook-Seiten ===== */
.sheet-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:30px;}
.sheet-head .mark{height:34px;width:auto;flex:0 0 auto;}
.sheet-head .ref{font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--ink);text-align:right;}
.sheet-head .ref i{font-style:normal;color:var(--gold-ink);margin-right:8px;}

/* Fusszeile wie im PDF */
.sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--rule);padding-top:14px;margin-top:32px;
  font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--ink3);}
.sheet-foot .pg{color:var(--gold-ink);font-weight:800;}
.dark .sheet-foot{border-color:var(--rule-d);color:var(--cream3);}
.dark .sheet-foot .pg{color:var(--gold);}

/* ===== Buttons – flach und typografisch, kein Verlauf ===== */
.btn{display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:1.4px;font-size:clamp(14px,2.2vw,17px);line-height:1.15;
  background:var(--gold);color:#0d0d0d;border:0;cursor:pointer;text-decoration:none;
  padding:19px 34px;border-radius:3px;text-align:center;
  box-shadow:0 10px 26px rgba(201,168,76,0.28);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;}
.btn:hover{background:var(--gold-l);transform:translateY(-2px);box-shadow:0 16px 34px rgba(201,168,76,0.36);}
.btn:active{transform:translateY(0);}
.btn small{font-family:'Inter',sans-serif;font-weight:500;text-transform:none;
  letter-spacing:0;font-size:12.5px;opacity:.72;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:1.6px;
  text-transform:uppercase;padding:15px 26px;border-radius:3px;text-decoration:none;cursor:pointer;
  background:transparent;border:1px solid var(--gold);color:var(--gold-ink);
  transition:background .18s,color .18s,transform .18s;}
.btn-ghost:hover{background:rgba(201,168,76,0.13);transform:translateY(-2px);}
/* Auf dunklem Grund muss der helle Goldton her - --gold-ink ist die
   Variante fuer Papier und waere hier kaum lesbar. Gilt auch fuer
   .on-dark-Bloecke, die kein .dark-Elternteil haben. */
.dark .btn-ghost,.on-dark .btn-ghost{color:var(--gold-l);border-color:var(--gold-d);}
.dark .btn-ghost:hover,.on-dark .btn-ghost:hover{background:rgba(201,168,76,0.16);border-color:var(--gold);}
.btn-ghost svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}

/* ===== HERO – nachgebaut nach der Titelseite des Playbooks ===== */
/* Der Goldschein lag frueher in einem eigenen, begrenzten :after-Element.
   Dessen Rand war auf schmalen Viewports als senkrechte Kante sichtbar.
   Als Hintergrundverlauf ueber die volle Flaeche kann das nicht passieren. */
.hero{color:var(--cream2);position:relative;overflow:hidden;
  padding:34px 0 clamp(56px,8vw,86px);
  background:radial-gradient(120% 82% at 80% 26%,rgba(201,168,76,0.14),transparent 58%),var(--black);}
.hero-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:26px;margin-bottom:clamp(34px,5vw,58px);border-bottom:1px solid var(--rule-d);}
.hero-bar .uma{height:38px;width:auto;}
.hero-bar .tag{font-family:'Archivo',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--cream3);text-align:right;}
.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(30px,5vw,64px);
  align-items:center;position:relative;z-index:1;}
.hero h1{text-transform:uppercase;}
.hero h1 .w{color:#fff;display:block;}
.hero h1 .g{color:var(--gold);display:block;}
.hero .sub{margin-top:6px;font-size:clamp(16px,2vw,19px);color:var(--cream2);
  font-weight:300;max-width:30em;}
.hero .authors{margin-top:30px;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:#fff;}
.hero .authors span{display:block;margin-top:6px;font-family:'Inter',sans-serif;
  font-weight:400;letter-spacing:0;text-transform:none;font-size:13.5px;color:var(--gold);}
.hero-cta{margin-top:34px;}
.hero-meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 22px;
  font-size:13px;color:var(--cream3);}
.hero-meta i{font-style:normal;color:var(--gold);margin-right:7px;}

/* Cover mit Buchkante. Feste Obergrenze: ueber die volle Spaltenbreite
   gezogen schiebt es den Hero auf mehr als zwei Bildschirmhoehen. */
.cover{position:relative;max-width:330px;margin-left:auto;}
.cover img{width:100%;border-radius:2px 6px 6px 2px;
  box-shadow:-1px 0 0 rgba(255,255,255,0.10),0 40px 80px rgba(0,0,0,0.7),0 8px 22px rgba(0,0,0,0.5);}
.cover:before{content:'';position:absolute;left:0;top:0;bottom:0;width:14px;z-index:2;
  background:linear-gradient(90deg,rgba(255,255,255,0.16),rgba(255,255,255,0.02) 42%,rgba(0,0,0,0.34));
  border-radius:2px 0 0 2px;pointer-events:none;}
.cover .stamp{position:absolute;right:-14px;bottom:24px;z-index:3;
  background:var(--gold);color:#0d0d0d;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:11px;letter-spacing:1.8px;text-transform:uppercase;padding:9px 15px;border-radius:2px;
  box-shadow:0 10px 26px rgba(0,0,0,0.45);}

/* ===== INHALTSVERZEICHNIS – die Signatur-Seite ===== */
.toc{border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(20px,3vw,34px);}
.toc-row:nth-child(-n+2){border-top:0;}
.toc-row{display:grid;grid-template-columns:52px 1fr;gap:3px 14px;align-items:baseline;
  padding:12px 4px;border-bottom:1px solid var(--rule);
  transition:background .25s ease,padding-left .25s ease;}
.toc-row:hover{background:rgba(201,168,76,0.07);padding-left:12px;}
.toc-row .no{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:1.4px;color:var(--gold-ink);}
.toc-row .ti{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(14px,1.8vw,16.5px);
  letter-spacing:0.9px;text-transform:uppercase;color:var(--ink);}
.toc-row .de{grid-column:2;font-size:14.5px;color:var(--ink3);font-weight:300;margin-top:2px;}

/* Creme-Kasten mit Goldkante (Playbook: „SO ARBEITEST DU DAMIT") */
.callout{background:var(--paper2);border-left:4px solid var(--gold);
  padding:20px 24px;margin-top:26px;border-radius:0 3px 3px 0;}
.callout .eyebrow{margin-bottom:9px;}
.callout p{color:var(--ink2);}
.dark .callout{background:var(--black3);border-left-color:var(--gold);}
.dark .callout p{color:var(--cream);}

/* ===== KAPITEL-BAND (dunkle Trennseite mit Konturziffer) ===== */
.chapter{position:relative;background:var(--black);color:var(--cream2);
  padding:clamp(34px,4.6vw,52px) 0;overflow:hidden;}
.chapter .bignum{position:absolute;right:clamp(-10px,2vw,40px);top:50%;transform:translateY(-50%);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(150px,26vw,300px);
  line-height:.8;letter-spacing:-8px;color:transparent;-webkit-text-stroke:2px rgba(201,168,76,0.42);
  pointer-events:none;user-select:none;}
.chapter .inner{position:relative;z-index:1;}
.chapter h2{color:#fff;font-size:clamp(27px,5vw,48px);text-transform:uppercase;letter-spacing:-1.2px;}
.chapter .kap{font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:2.8px;text-transform:uppercase;color:var(--gold);margin-bottom:13px;}
.chapter .sub{margin-top:16px;font-size:clamp(15px,1.9vw,18px);color:var(--cream2);
  font-weight:300;max-width:34em;}

/* ===== NUMMERIERTE LISTE (Playbook: „DREI GRUNDSAETZE") ===== */
.numlist{margin-top:6px;}
.numrow{display:grid;grid-template-columns:44px 1fr;gap:3px 12px;padding:15px 0;
  border-bottom:1px solid var(--rule2);}
.numrow:last-child{border-bottom:0;}
.numrow .no{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:1.2px;color:var(--gold-ink);padding-top:3px;}
.numrow .ti{font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:0.8px;text-transform:uppercase;color:var(--ink);}
.numrow .de{grid-column:2;color:var(--ink3);font-size:15.5px;font-weight:300;}
.dark .numrow{border-color:var(--rule-d);}
.dark .numrow .no{color:var(--gold);}
.dark .numrow .ti{color:#fff;}
.dark .numrow .de{color:var(--cream2);}

/* ===== QUADRAT-BULLETS ===== */
.sqlist{list-style:none;margin-top:8px;}
.sqlist li{position:relative;padding:7px 0 7px 24px;font-size:15.5px;color:var(--ink2);}
.sqlist li:before{content:'';position:absolute;left:0;top:15px;width:8px;height:8px;
  background:var(--gold);}
.dark .sqlist li{color:var(--cream);}

/* ===== ZITATKASTEN (Playbook: Beispielsaetze) ===== */
.qbox{background:var(--paper3);border:1px solid var(--rule2);border-left:3px solid var(--gold);
  padding:15px 20px;margin:11px 0;font-size:15.5px;color:var(--ink2);border-radius:0 3px 3px 0;}
.dark .qbox{background:var(--black2);border-color:var(--rule-d);border-left-color:var(--gold);
  color:var(--cream);}

/* ===== GEGENUEBERSTELLUNG falsch/richtig ===== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;}
.cbox{background:var(--paper3);border:1px solid var(--rule2);border-left:3px solid #c9c4b8;
  padding:18px 20px;border-radius:0 3px 3px 0;}
.cbox.good{background:var(--paper2);border-left-color:var(--gold);}
.cbox .lbl{font-family:'Archivo',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--ink3);margin-bottom:9px;}
.cbox.good .lbl{color:var(--gold-ink);}
.cbox p{font-size:15.5px;color:var(--ink2);}

/* ===== MERKE-KASTEN (schwarz auf Papier) ===== */
.merke{background:var(--black);padding:22px 24px;margin-top:22px;border-radius:3px;}
.merke .lbl{font-family:'Archivo',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);margin-bottom:9px;}
.merke p{color:#fff;font-weight:600;font-size:16.5px;}

/* ===== DIE ZEHN MERKSAETZE ===== */
.mset{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;margin-top:8px;}
.mrow{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--rule-d);}
.mrow .no{font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;color:var(--gold);}
.mrow p{color:var(--cream);font-size:15.5px;font-weight:400;}

/* ===== LESEPROBE – Blattoptik auf dunklem Grund ===== */
.sample{background:var(--paper);color:var(--ink2);border-radius:4px;
  padding:clamp(26px,4vw,44px);box-shadow:0 40px 90px rgba(0,0,0,0.55);
  max-width:820px;margin:0 auto;position:relative;}
.sample:before{content:'';position:absolute;inset:0;border-radius:4px;
  border:1px solid rgba(255,255,255,0.10);pointer-events:none;}
.sample h3{margin-bottom:4px;text-transform:uppercase;letter-spacing:0.8px;font-size:19px;}
.sample .fade{position:absolute;left:0;right:0;bottom:0;height:120px;border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,rgba(251,250,249,0),var(--paper) 78%);pointer-events:none;}

/* ============================================================
   AUTOREN – zwei gleichwertige Kacheln.

   Frueher stand hier ein Foto neben einem Textblock. Das Playbook
   ist aber zu zweit geschrieben, und beide bringen etwas anderes
   mit: Hueseyin den Handel, Armin die Vertriebsfuehrung. Zwei
   gleich grosse Kacheln zeigen genau das, ohne dass einer wie der
   Assistent des anderen wirkt.

   Seitenverhaeltnis 4:5 statt 3:4 - hochkant genug fuer ein
   Portraet, aber flach genug, dass die Sektion die Seitenlaenge
   nicht wieder sprengt.
   ============================================================ */
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,40px);margin-top:34px;}
.member .shot{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;
  border-radius:3px;filter:grayscale(0.12);}
.member .nm{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(19px,2.2vw,23px);
  color:#fff;margin-top:18px;letter-spacing:-0.3px;}
.member .role{font-family:'Archivo',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);margin-top:6px;}
.member .bio{font-size:15px;color:var(--cream2);font-weight:300;margin-top:12px;}
.member .facts{list-style:none;margin-top:14px;padding-top:13px;border-top:1px solid var(--rule-d);}
.member .facts li{position:relative;padding:4px 0 4px 18px;font-size:13.5px;color:var(--cream);}
.member .facts li:before{content:'';position:absolute;left:0;top:12px;width:6px;height:6px;
  background:var(--gold);}
.member .facts li b{color:#fff;font-weight:600;}

.team-schluss{margin:32px auto 0;max-width:680px;text-align:center;
  font-size:clamp(15px,1.8vw,17px);color:var(--cream2);font-weight:300;}
.team-schluss b{color:#fff;font-weight:600;}

@media(max-width:760px){
  .team{grid-template-columns:1fr;gap:34px;}
  .member .shot{max-width:340px;margin:0 auto;}
  .member{text-align:center;}
  .member .facts{text-align:left;max-width:340px;margin-left:auto;margin-right:auto;}
}

/* ===== FAQ ===== */
.faq{border-top:1px solid var(--rule);margin-top:8px;}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{list-style:none;cursor:pointer;padding:19px 34px 19px 0;position:relative;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;color:var(--ink);
  letter-spacing:0.2px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:before,.faq summary:after{content:'';position:absolute;right:6px;top:50%;
  background:var(--gold-ink);transition:transform .25s ease,opacity .25s ease;}
.faq summary:before{width:14px;height:2px;margin-top:-1px;}
.faq summary:after{width:2px;height:14px;margin-top:-7px;right:12px;}
.faq details[open] summary:after{transform:rotate(90deg);opacity:0;}
.faq details p{padding:0 0 20px;color:var(--ink3);font-size:15.5px;font-weight:300;}
.faq details p a{color:var(--gold-ink);text-underline-offset:3px;}

/* ===== CTA-BAND ===== */
.cta-band{background:var(--black2);text-align:center;padding:clamp(38px,5vw,58px) 0;
  border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);}
.cta-band h2{color:#fff;font-size:clamp(23px,3.4vw,34px);text-transform:uppercase;}
.cta-band .g{color:var(--gold);}
.cta-band .btn{margin-top:26px;}

/* ===== FOOTER ===== */
footer{background:var(--black);color:var(--cream3);padding:52px 0 40px;text-align:center;
  font-size:13px;}
footer .uma{height:34px;width:auto;margin:0 auto 18px;opacity:.9;}
footer a{color:var(--cream2);text-decoration:none;border-bottom:1px solid var(--rule-d);
  padding-bottom:1px;}
footer a:hover{color:var(--gold-l);}

/* ===== LEAD-POPUP ===== */
.modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(8,8,8,0.78);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s;}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal{position:relative;width:100%;max-width:470px;background:var(--paper);
  border-radius:4px;padding:38px 30px 26px;box-shadow:0 40px 90px rgba(0,0,0,0.6);
  max-height:92vh;overflow-y:auto;border-top:4px solid var(--gold);
  transform:translateY(18px) scale(.98);transition:transform .3s cubic-bezier(.16,1,.3,1);}
.modal-overlay.open .modal{transform:none;}
.modal .close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--rule);background:transparent;color:var(--ink3);font-size:22px;
  line-height:1;cursor:pointer;transition:background .2s,color .2s;}
.modal .close:hover{background:rgba(17,17,17,0.06);color:var(--ink);}
.modal h3{font-size:23px;text-transform:uppercase;letter-spacing:-0.3px;margin-bottom:8px;}
.modal .m-sub{font-size:14.5px;color:var(--ink3);font-weight:300;margin-bottom:22px;}
.modal .note{margin-top:14px;text-align:center;font-size:12px;color:var(--ink3);}

.field{display:flex;flex-direction:column;gap:11px;}
.field input,.field select{width:100%;padding:14px 15px;border-radius:3px;
  border:1px solid var(--rule);background:#fff;color:var(--ink);
  font-family:'Inter',sans-serif;font-size:15px;transition:border-color .2s,box-shadow .2s;}
.field input::placeholder{color:#9b968e;}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,0.18);}
.field input.invalid{border-color:var(--red);}
.tel-row{display:grid;grid-template-columns:112px 1fr;gap:9px;}
.tel-row.invalid input,.tel-row.invalid select{border-color:var(--red);}
.tel-error,.email-error{display:none;color:var(--red);font-size:13px;margin-top:-3px;}
.field .btn{width:100%;margin-top:5px;}

/* ===== Scroll-Reveal ===== */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.js .reveal.in{opacity:1;transform:none;}
.js .reveal.d1{transition-delay:.08s;} .js .reveal.d2{transition-delay:.16s;}
.js .reveal.d3{transition-delay:.24s;} .js .reveal.d4{transition-delay:.32s;}

/* ===== Bestaetigungshaken (Dankeseite) ===== */
.check{width:88px;height:88px;border-radius:50%;margin:0 auto 24px;background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 40px rgba(201,168,76,0.32);animation:pop .55s cubic-bezier(.16,1,.3,1) both;}
.check svg{width:44px;height:44px;}
.check svg path{stroke:#0d0d0d;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none;
  stroke-dasharray:60;stroke-dashoffset:60;animation:draw .5s .3s ease forwards;}
@keyframes pop{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:scale(1);}}
@keyframes draw{to{stroke-dashoffset:0;}}

/* ===== Buchungs-Sektion ===== */
.booking-box{max-width:900px;margin:32px auto 0;background:var(--paper);
  border-radius:4px;padding:12px;overflow:hidden;}
.calendly-inline-widget{border-radius:3px;overflow:hidden;min-width:320px;height:700px;}
.booking-fallback{text-align:center;padding:46px 22px;color:var(--ink3);font-size:15px;}

/* ===== Rechtstexte ===== */
.legal{padding:clamp(40px,6vw,70px) 0;}
.legal h1{font-size:clamp(26px,4vw,38px);margin-bottom:8px;}
.legal h2{font-size:20px;margin:34px 0 10px;text-transform:uppercase;letter-spacing:0.6px;}
.legal h3{font-size:16px;margin:22px 0 6px;}
.legal p,.legal li{font-size:15px;color:var(--ink2);font-weight:300;}
.legal ul{margin:8px 0 8px 20px;}
.legal li{margin-bottom:5px;}
.legal a{color:var(--gold-ink);}
.legal .back{display:inline-block;margin-bottom:26px;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--gold-ink);text-decoration:none;}

/* ===== RESPONSIV ===== */
@media(max-width:900px){
  .toc{grid-template-columns:1fr;}
  /* Cover zuerst. Einspaltig stand es sonst unter Headline, Fliesstext
     und Button - der Besucher scrollte an allem vorbei, bevor er das
     Produkt ueberhaupt zu sehen bekam. Es ist der Blickfang, also
     gehoert es nach oben.

     Bewusst kleiner als die 340 px von vorher: so bleiben Headline und
     der Anfang des Fliesstextes mit im ersten Bildschirm, statt vom
     Cover verdraengt zu werden. */
  .hero-grid{grid-template-columns:1fr;gap:26px;}
  .cover{order:-1;max-width:248px;margin:0 auto;}
  .cover .stamp{right:-8px;bottom:16px;font-size:10.5px;padding:8px 13px;}

  /* Das Cover vorzuziehen schiebt alles Weitere nach unten - der Button
     landete dadurch bei 940 px und damit unter der Falz. Deshalb rueckt
     er auf schmalen Geraeten vor den Fliesstext: Cover, Headline, Button.
     Wer mehr wissen will, liest darunter weiter; wer ueberzeugt ist,
     muss nicht erst scrollen. Reihenfolge nur hier, am Desktop bleibt
     der Lesefluss unveraendert. */
  .hero-text{display:flex;flex-direction:column;}
  .hero-text .eyebrow{order:1;}
  .hero-text h1{order:2;}
  .hero-text .rule-gold{order:3;}
  .hero-text .hero-cta{order:4;margin-top:26px;}
  .hero-text .sub{order:5;margin-top:26px;}
  .hero-text .authors{order:6;margin-top:22px;}
  .hero-text .hero-meta{order:7;}
  .authors-grid{grid-template-columns:1fr;}
  .authors-grid .shot{max-width:320px;margin:0 auto;aspect-ratio:4/5;}
  .mset{grid-template-columns:1fr;gap:0;}
}
@media(max-width:620px){
  .wrap{padding:0 20px;}
  .compare{grid-template-columns:1fr;gap:12px;}
  .hero-bar{flex-direction:column;align-items:flex-start;gap:12px;}
  .hero-bar .tag{text-align:left;}
  .hero-bar .uma{height:32px;}
  .sheet-head{flex-direction:column;align-items:flex-start;gap:10px;}
  .sheet-head .ref{text-align:left;font-size:10px;letter-spacing:1.8px;}
  .toc-row{grid-template-columns:38px 1fr;}
  .btn{width:100%;padding:17px 20px;}
  .tel-row{grid-template-columns:98px 1fr;}
  .stats{gap:20px 28px;}
  .chapter .bignum{opacity:.55;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  .check,.check svg path{animation:none;stroke-dashoffset:0;}
  .btn:hover,.btn-ghost:hover,.toc-row:hover{transform:none;}
}

/* ============================================================
   Leseprobe: helles Blatt auf dunklem Grund.

   Die Sektion bekommt bewusst NICHT die Klasse .dark. Sonst
   wuerden deren Farbregeln in das helle Blatt hineinvererben
   und Ueberschriften darin weiss auf weiss stehen. Stattdessen
   faerbt .on-dark nur den Textblock ueber dem Blatt um.
   ============================================================ */
.sample-sec{background:var(--black);padding:clamp(56px,8vw,92px) 0;}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff;}
.on-dark .eyebrow{color:var(--gold);}
.on-dark p,.on-dark .lead{color:var(--cream2);}

/* ============================================================
   PROBLEM-SEKTION – Saetze, die der Leser aus dem eigenen
   Verkaufsraum kennt. Aufbau wie die Zitatkaesten im Playbook:
   der Kundensatz oben, die Folge darunter.
   ============================================================ */
.pains{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;}
.pain{background:var(--paper3);border:1px solid var(--rule2);border-left:3px solid var(--gold);
  padding:18px 20px;border-radius:0 3px 3px 0;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;}
.pain:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(17,17,17,0.07);}
.pain .said{font-size:16px;color:var(--ink);font-weight:500;line-height:1.45;}
.pain .then{margin-top:9px;padding-top:9px;border-top:1px solid var(--rule2);
  font-size:14px;color:var(--ink3);font-weight:300;display:flex;gap:8px;}
.pain .then:before{content:'→';color:var(--gold-ink);flex:0 0 auto;font-weight:600;}

/* Zwischenfazit unter der Problem-Sektion */
.verdict{margin-top:26px;text-align:center;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(17px,2.4vw,21px);color:var(--ink);line-height:1.35;}
.verdict span{color:var(--gold-ink);}

/* ============================================================
   WAS IM PLAYBOOK STECKT – zaehlbare Inhalte statt Kapitelnamen.
   Die Zahlen sind aus dem PDF ausgezaehlt, nicht geschaetzt.
   ============================================================ */
.inbox{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;}
.inbox .it{background:var(--black2);border:1px solid var(--rule-d);border-radius:3px;
  padding:22px 20px;transition:border-color .3s,transform .3s cubic-bezier(.16,1,.3,1);}
.inbox .it:hover{border-color:rgba(201,168,76,0.45);transform:translateY(-4px);}
.inbox .it .n{font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;color:var(--gold);
  line-height:1;margin-bottom:10px;}
.inbox .it .n small{font-size:15px;font-weight:700;margin-left:3px;}
.inbox .it h4{color:#fff;font-size:14px;letter-spacing:0.8px;margin-bottom:6px;}
.inbox .it p{color:var(--cream2);font-size:14.5px;font-weight:300;}

@media(max-width:900px){ .inbox{grid-template-columns:1fr 1fr;} }
@media(max-width:620px){
  .pains{grid-template-columns:1fr;}
  .inbox{grid-template-columns:1fr;}
}