/* ══════════════════════════════════════════════════════════════════
   Webinar-Landingpage „Raus aus dem Hamsterrad, rein in die Zukunft"
   Christian Wolf Coaching — Stylesheet der Landingpage.

   Angeglichen an die bestehende Website christian-coaching.de:
   Poppins für Überschriften, Montserrat für Fließtext, Blau #193154,
   20-px-Karten, 40-px-Pillen, weißer Grund, zentrierte Abschnitts-
   überschriften. Die Werte stammen aus der ausgelesenen Homepage,
   nicht aus Schätzung.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   FARBEN — Markenblau #193154, wie auf der Homepage gemessen
   ══════════════════════════════════════════════════════════════════ */
:root{
  --deep:#193154;      /* Markenfarbe der Website */
  --deep-2:#122340;    /* dunkler: Zitatfläche, Footer */
  --bg:#FFFFFF;        /* Grundfläche, wie die Homepage */
  --paper:#F4F6FA;     /* abgesetzte helle Fläche */
  --line:#E2E7EF;      /* Kartenrahmen */
  --ink:#16233A;       /* Fließtext */
  --ink-soft:#5A6880;  /* Sekundärtext */
  --accent:#193154;
  --accent-2:#24406F;
  --on-deep:#93AACB;   /* helles Blau für Details auf dunklem Grund */
  --cta:#F57C20;       /* Orange: Anmeldebutton und Bewertungssterne */
  --cta-hover:#FF8B33;
  --cta-icon:#F0AD4E;  /* Orange der Homepage-Icons, heller als der Button */
}

:root{
  /* Poppins für Überschriften und Beschriftungen, Montserrat für
     Fließtext — genau die Aufteilung der bestehenden Website. */
  --display:"Poppins","Montserrat",system-ui,sans-serif;
  --body:"Montserrat",system-ui,sans-serif;

  /* Radien der Homepage: 20 px Karten und Bilder, 40 px Pillen,
     50 px als einzelner Eckakzent. */
  --r-card:20px;
  --r-pill:40px;
  --r-corner:50px;

  --pad:clamp(1.25rem,5vw,2.5rem);
  --maxw:1140px;
  --measure:56ch;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:clamp(.96rem,.45vw + .86rem,1.0375rem);line-height:1.68;
  letter-spacing:-.004em;font-weight:400;overflow-x:hidden;
}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:760px}

h1,h2,h3,.eyebrow,.btn,label,input,summary{font-family:var(--display)}
h1,h2,h3{font-weight:600;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(1.75rem,3.6vw,2.6rem);margin-bottom:.9rem}
h3{font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.005em;line-height:1.3;font-weight:600}
p{max-width:var(--measure)}
strong{font-weight:500}

.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:.9rem;color:var(--ink-soft);
}

/* Abschnittsköpfe stehen mittig, wie auf der Homepage. Der Hero und
   die zweispaltigen Abschnitte behalten ihre linke Ausrichtung —
   dort trüge Zentrierung nur Unruhe hinein. */
section > .wrap > .eyebrow,
section > .wrap > h2,
section > .wrap > .lead{text-align:center;margin-inline:auto}
section > .wrap > .lead{max-width:62ch}

/* ── Signatur: der Bogen, der sich öffnet ── */
.arc{width:34px;height:34px;flex:none;overflow:visible}
.arc circle{
  fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;
  stroke-dasharray:var(--dash,88) 88;
}
.arc .tip{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:var(--tip,0)}

/* ── Buttons ── */
/* Pillenform und Poppins wie die Buttons der Homepage. Die Fläche
   bleibt orange und die Schrift dunkelblau: Weiß auf diesem Orange
   erreicht nur 2,7:1, Dunkelblau 4,85:1 und besteht damit WCAG AA. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  background:var(--cta);color:var(--deep);font-family:var(--display);
  font-size:.95rem;font-weight:600;letter-spacing:0;
  padding:1rem 2.1rem;border:none;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;
  transition:background .2s,transform .2s;
}
.btn:hover{background:var(--cta-hover);transform:translateY(-2px)}
.btn svg{transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:4px}

/* auf dunklem Grund */
.on-dark .arc circle,.on-dark .arc .tip{stroke:var(--on-deep)}
.on-dark a:focus-visible,.on-dark button:focus-visible,.on-dark input:focus-visible{outline-color:#fff}

.meta{font-family:var(--display);font-size:.82rem;color:var(--ink-soft)}

/* ── Hero ──────────────────────────────────────────────────────────
   Vollbild-Foto mit blauem Overlay, weiße Schrift darauf — dieselbe
   Anlage wie der Hero der Homepage. Das Bild kommt als background,
   damit es beliebig beschnitten werden kann, ohne das Textmaß zu
   beeinflussen. Der Verlauf nach links hält den Text lesbar, auch
   wenn das Foto an dieser Stelle hell ist.                        */
.hero{
  position:relative;
  padding:clamp(3.5rem,8vw,6rem) 0 clamp(3.5rem,8vw,6rem);
  background:var(--deep) var(--hero-bild,none) no-repeat center/cover;
  color:#fff;isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(25,49,84,.94) 0%, rgba(25,49,84,.86) 42%, rgba(25,49,84,.42) 72%, rgba(25,49,84,.28) 100%);
}
@media(max-width:820px){
  /* Schmal steht der Text über dem Bild statt daneben — dann braucht
     es die Abdeckung auf ganzer Breite. */
  .hero::before{background:linear-gradient(180deg, rgba(25,49,84,.92) 0%, rgba(25,49,84,.86) 100%)}
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}

.hero h1,.hero .hero-sub,.hero .eyebrow,.hero .hero-when span{color:#fff}
.hero .eyebrow{color:rgba(255,255,255,.72)}
.hero .hero-sub{color:rgba(255,255,255,.88)}
.hero .hero-when span::before{background:var(--cta)}
.hero .form-note{color:rgba(255,255,255,.68)}
.hero .consent{color:rgba(255,255,255,.72)}
.hero input[type=text],.hero input[type=email]{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff;
}
.hero input::placeholder{color:rgba(255,255,255,.62)}
.hero input:hover{border-color:rgba(255,255,255,.6)}
.hero a:focus-visible,.hero button:focus-visible,.hero input:focus-visible,
.hero summary:focus-visible{outline-color:#fff}

/* Bewertung im Hero: die Zahl stand vorher am Freisteller, den es
   nicht mehr gibt. Jetzt eine ruhige Zeile unter dem Formular. */
.hero-proof{
  display:inline-flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin-top:1.6rem;padding:.7rem 1.2rem;text-decoration:none;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-pill);font-family:var(--display);color:#fff;
  transition:background .2s;
}
.hero-proof:hover{background:rgba(255,255,255,.2)}
.hero-proof b{font-size:1.15rem;font-weight:600;line-height:1}
.hero-proof .stars{margin:0;display:inline;font-size:.9rem}
.hero-proof small{font-size:.78rem;color:rgba(255,255,255,.75);font-weight:500}

h1{font-size:clamp(2.1rem,5.2vw,3.6rem);margin-bottom:1.3rem;line-height:1.14}
h1 .line{display:block;overflow:hidden;padding-bottom:.14em}
h1 .line span{display:block;transform:translateY(105%);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
h1 .line:nth-child(2) span{animation-delay:.09s}
h1 .line:nth-child(3) span{animation-delay:.18s}
@keyframes rise{to{transform:translateY(0)}}
h1 em{font-style:normal;font-weight:600;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

.hero-sub{font-size:clamp(1.1rem,1.5vw,1.28rem);color:var(--ink-soft);max-width:36ch;margin-bottom:2rem;line-height:1.55}
.hero-when{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-bottom:2.2rem}
.hero-when span{font-family:var(--display);font-size:.86rem;font-weight:500;display:flex;align-items:center;gap:.5rem}
.hero-when span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

.stars{color:var(--cta);font-size:.8rem;letter-spacing:.08em;display:block;margin-top:.2rem}

/* ── Formular ── */
.form{display:flex;flex-direction:column;gap:.6rem;max-width:440px}
.form-row{display:flex;flex-direction:column;gap:.6rem}
@media(min-width:560px){.form-row{flex-direction:row}.form-row input{flex:1}}
input[type=text],input[type=email]{
  font-family:var(--display);font-size:1rem;color:var(--ink);
  padding:1rem 1.15rem;border:1.5px solid var(--line);border-radius:var(--r-pill);
  background:var(--paper);width:100%;transition:border-color .2s;
}
.on-dark input[type=text],.on-dark input[type=email]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.on-dark input::placeholder{color:rgba(255,255,255,.5)}
input:hover{border-color:rgba(0,0,0,.42)}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;line-height:1.5;color:var(--ink-soft);font-family:var(--display);max-width:44ch;margin-top:.4rem}
.on-dark .consent{color:rgba(255,255,255,.62)}
.consent input{margin-top:.28rem;accent-color:var(--cta);width:1rem;height:1rem;flex:none}
.consent a{color:inherit}
.form-note{font-family:var(--display);font-size:.78rem;color:var(--ink-soft)}
.on-dark .form-note{color:rgba(255,255,255,.6)}
.success{
  display:none;background:var(--deep);color:#fff;padding:1.5rem 1.75rem;border-radius:var(--r-card);
  font-family:var(--display);font-size:1rem;line-height:1.5;max-width:440px;
}
.success strong{display:block;font-size:1.15rem;margin-bottom:.35rem;font-weight:700}
form.done{display:none}
form.done + .success{display:block}

/* Fehlerzeile im Formular. Steht direkt über dem Kleingedruckten,
   damit sie nach dem Klick im Blickfeld liegt. */
.form-error{
  font-family:var(--display);font-size:.82rem;font-weight:500;
  color:#B3261E;margin-bottom:.2rem;
}
.on-dark .form-error{color:#FFB4A9}
.form-error[hidden]{display:none}

/* Honigtopf gegen einfache Bots: für Menschen unsichtbar, aber nicht
   per display:none — manche Bots erkennen das und lassen das Feld leer. */
.hp{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* ── Sektionen ── */
section{padding:clamp(4rem,9vw,7rem) 0}
.on-dark{background:var(--deep);color:#fff}
.on-dark h2,.on-dark h3,.on-dark strong{color:#fff}
.on-dark .eyebrow{color:rgba(255,255,255,.6)}
.on-dark p{color:rgba(255,255,255,.82)}
.on-paper{background:var(--paper)}
.lead{font-size:clamp(1.12rem,1.5vw,1.28rem);line-height:1.62;color:var(--ink-soft);margin-bottom:2.6rem}
.on-dark .lead{color:rgba(255,255,255,.78)}

/* Fünf weiße Karten mit Rahmen und 20-px-Radius — dieselbe Bildsprache
   wie „Kommt dir das bekannt vor?" auf der Homepage. Über auto-fit
   ordnen sie sich je nach Breite in drei, zwei oder eine Spalte. */
.recog{
  list-style:none;display:grid;margin-top:2.5rem;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.recog li{
  display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:2rem 1.6rem;
}
.recog p{font-size:1rem;line-height:1.6;margin:0;max-width:none}

/* Gefülltes Kreis-Icon statt Linienbogen, wie die orangen Kreise der
   Homepage. Das Bogen-SVG im Markup wird dafür ausgeblendet. */
.recog .arc{display:none}
.recog li::before{
  content:"";flex:none;width:46px;height:46px;border-radius:50%;
  background:var(--cta-icon) no-repeat center/20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.quote{background:var(--deep-2);color:#fff;padding:clamp(3.5rem,8vw,6rem) 0}
.quote blockquote{
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1.12;
  font-size:clamp(1.85rem,5vw,3.5rem);max-width:17ch;text-wrap:balance;
}
.quote blockquote span{color:var(--on-deep)}
.quote figcaption{margin-top:1.5rem;font-family:var(--display);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.blocks{display:grid;gap:1.25rem;margin-top:3rem}
@media(min-width:820px){.blocks{grid-template-columns:1fr 1fr}}
.block{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-card);padding:clamp(1.8rem,3.5vw,2.4rem);
}
.block .arc{margin-bottom:1.3rem}
.block h3{margin-bottom:.7rem}
.block p{font-size:.98rem;line-height:1.65;margin:0}

.outcomes{display:grid;gap:1.25rem;margin-top:3rem}
@media(min-width:820px){.outcomes{grid-template-columns:repeat(3,1fr)}}
.outcome{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:2rem 1.7rem;text-align:center;
}
.outcome .arc{display:none}
.outcome::before{
  content:"";display:block;width:46px;height:46px;border-radius:50%;margin:0 auto 1.2rem;
  background:var(--deep) no-repeat center/20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
}
.outcome h3{margin-bottom:.6rem}
.outcome p{font-size:.98rem;line-height:1.65;max-width:none}

.fit{display:grid;gap:2.5rem;margin-top:3rem}
@media(min-width:820px){.fit{grid-template-columns:1fr 1fr;gap:3.5rem}}
.fit ul{list-style:none;display:grid;gap:.9rem;margin-top:1.4rem}
.fit li{display:flex;gap:.85rem;align-items:flex-start;font-size:1rem;line-height:1.55}
.fit li svg{flex:none;margin-top:.4rem}
.fit h3{font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}

.host{display:grid;gap:2.5rem;align-items:center}
@media(min-width:820px){.host{grid-template-columns:1fr 1.15fr;gap:4rem}}
.host img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 35%;
  border-radius:var(--r-card) var(--r-card) var(--r-corner) var(--r-card);
}

.voices{display:grid;gap:1.5rem;margin-top:3rem}
@media(min-width:820px){.voices{grid-template-columns:repeat(3,1fr)}}
.voice{background:#fff;border:1px solid var(--line);padding:2rem;border-radius:var(--r-card);display:flex;flex-direction:column;gap:1.2rem}
.voice p{font-size:.95rem;line-height:1.65;margin:0;color:var(--ink-soft)}
.voice p::before{content:"„"}
.voice p::after{content:"“"}
.voice cite{font-family:var(--display);font-style:normal;font-size:.82rem;font-weight:500;color:var(--ink-soft);margin-top:auto}

details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:1.4rem 2.5rem 1.4rem 0;position:relative;font-size:1.05rem;font-weight:500;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
details .ans{padding-bottom:1.5rem;font-size:1rem;line-height:1.68;color:var(--ink-soft);max-width:70ch}

.final{background:var(--deep);color:#fff}
.final-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:900px){.final-grid{grid-template-columns:1fr 1fr;gap:5rem}}
.final h2{font-size:clamp(2.1rem,5vw,3.4rem)}

footer.site{background:var(--deep-2);color:rgba(255,255,255,.55);padding:2.5rem 0;font-family:var(--display);font-size:.8rem}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;justify-content:space-between;align-items:center}
footer.site a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
footer.site a:hover{color:#fff}
footer.site nav{display:flex;gap:1.5rem;flex-wrap:wrap}

/* Scroll-Reveal: nur wenn JavaScript läuft. Die Klasse .js setzt ein
   Inline-Skript im <head>. Ohne JS bleibt jeder Inhalt sichtbar. */
.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}

/* Logo-Leiste — weiß wie der Header der Website. Das Logo ist dunkel
   und wäre auf blauem Grund kaum lesbar. */
.topbar{background:#fff;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.topbar img{height:34px;width:auto;object-fit:contain}
.topbar span{
  font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--deep);display:flex;align-items:center;gap:.5rem;
}
.topbar span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cta-icon);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Bewertungszeile */
.rating{
  margin-top:2.8rem;display:inline-flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  text-decoration:none;color:inherit;font-family:var(--display);
  padding:.9rem 1.5rem;border:1px solid var(--line);border-radius:var(--r-pill);
  transition:border-color .2s,transform .2s;
}
.rating:hover{border-color:var(--deep);transform:translateY(-2px)}
.rating b{font-size:1.6rem;font-weight:700;color:var(--deep);line-height:1}
.rating .stars{font-size:1rem;margin:0;display:inline}
.rating span:last-child{font-size:.88rem;font-weight:500;color:var(--ink-soft)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  h1 .line span{transform:none}
  .js .reveal{opacity:1;transform:none}
}