/* ==========================================================================
   KernMedia — Unterseiten (Landingpages)
   Erbt Farben, Schriften und Pillen aus style.css. Hier nur, was die
   Welt-Startseite nicht braucht: Hero, Textspalten, Ablauf, Preisrahmen.
   ========================================================================== */

/* Unterseiten scrollen normal — die Sperre der Welt gilt hier nicht */
body{overflow:visible}

/* ---------- Hero ---------- */
.seiten-held{
  position:relative; margin-top:4.2rem;
  min-height:min(60svh, 30rem); display:flex; align-items:flex-end;
  overflow:hidden; background:var(--creme-2);
}
.seiten-held img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.seiten-held::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--creme) 2%, color-mix(in oklab, var(--creme) 55%, transparent) 45%, transparent 75%);
}
.held-text{
  position:relative; z-index:2; max-width:var(--breite); width:100%;
  margin-inline:auto; padding:clamp(2rem,6vw,4rem) clamp(1.2rem,4vw,3rem) clamp(1.5rem,4vh,2.5rem);
}
.held-text h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.5vw,3.1rem); line-height:1.08; margin:0 0 .5rem;
  max-width:20ch;
}
.held-text .vorspann{max-width:44ch; color:var(--kohle); font-size:1.05rem; margin:0}

/* Auf dem hellen Diorama ging der Kicker unter — dunkler und mit einem
   schmalen Traeger, damit er auf jedem Bildbereich lesbar bleibt. */
.seiten-held .kicker{
  display:inline-block; color:var(--kohle);
  background:color-mix(in oklab, var(--weiss) 82%, transparent);
  padding:.35rem .7rem; border-radius:99rem; margin-bottom:.9rem;
}

/* ---------- Zurück-Pfad ---------- */
.pfad{
  max-width:var(--breite); margin:1.5rem auto -.5rem; padding-inline:clamp(1.2rem,4vw,3rem);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grau);
}
.pfad a{color:var(--grau); text-decoration:none; border-bottom:1px solid var(--linie)}
.pfad a:hover{color:var(--kohle); border-color:var(--gold)}

/* ---------- Textblöcke ---------- */
.bloecke{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.1rem}
.block{
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  padding:1.5rem 1.6rem;
}
.block h3{margin:0 0 .5rem; font-size:1.18rem}
.block p{color:var(--grau); font-size:.93rem; margin:0}
.block .kicker{margin-bottom:.7rem}

/* Hervorgehobener Block (z. B. EB-Team) */
.block.betont{background:var(--kohle); border-color:var(--kohle)}
.block.betont h3{color:var(--creme)}
.block.betont p{color:color-mix(in oklab, var(--creme) 78%, transparent)}
.block.betont .kicker{color:var(--gold)}

/* ---------- Ablauf ---------- */
.ablauf{list-style:none; margin:0; padding:0; counter-reset:schritt;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.6rem 2rem}
.ablauf li{counter-increment:schritt; position:relative; padding-top:2.4rem; color:var(--grau); font-size:.93rem}
.ablauf li::before{
  content:"0" counter(schritt); position:absolute; top:0; left:0;
  font-family:var(--mono); font-size:.8rem; color:var(--cyan);
  padding-bottom:.5rem; border-bottom:2px solid var(--gold); min-width:2.5rem;
}
.ablauf strong{display:block; font-family:var(--display); font-size:1.05rem; color:var(--kohle); margin-bottom:.25rem}

/* ---------- Was drin ist / Liste ---------- */
.haken{list-style:none; margin:1rem 0 0; padding:0; columns:2; column-gap:2.5rem}
.haken li{
  break-inside:avoid; padding:.55rem 0 .55rem 1.6rem; position:relative;
  border-top:1px solid var(--linie); color:var(--grau); font-size:.92rem;
}
.haken li::before{
  content:"✓"; position:absolute; left:0; top:.5rem; color:var(--gold); font-weight:700;
}
@media (max-width:640px){ .haken{columns:1} }

/* ---------- Abschluss-Aufruf ---------- */
.aufruf{
  background:var(--kohle); color:var(--creme); border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.2rem); text-align:center;
}
.aufruf h2{color:var(--creme); margin-bottom:.6rem}
.aufruf p{color:color-mix(in oklab, var(--creme) 75%, transparent); max-width:46ch; margin:0 auto 1.6rem}
.aufruf .pille.gold{background:var(--gold); color:#1d1509}
.aufruf .zweitlink{color:var(--gold); margin-left:1rem}

/* ---------- Schwesterseite ---------- */
.schwester{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  background:var(--creme-2); border:1px solid var(--linie); border-radius:var(--radius);
  padding:1.3rem 1.5rem;
}
.schwester p{margin:0; color:var(--grau); font-size:.93rem; flex:1 1 18rem}
.schwester strong{color:var(--kohle)}

/* ==========================================================================
   Livestream-Landingpage — eigener Hero und Funnel-Bausteine
   ========================================================================== */

/* Hero: grosses Diorama, Text auf hellem Sockel darunter geblendet */
.ls-held{
  position:relative; margin-top:4.2rem; overflow:hidden;
  min-height:min(78svh, 42rem); display:flex; align-items:flex-end;
  background:var(--creme-2);
}
.ls-held img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ls-held::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--creme) 6%, color-mix(in oklab, var(--creme) 60%, transparent) 38%, transparent 68%);
}
.ls-held-text{
  position:relative; z-index:2; max-width:var(--breite); width:100%;
  margin-inline:auto; padding:clamp(2.5rem,8vw,5rem) clamp(1.2rem,4vw,3rem) clamp(1.6rem,4vh,2.6rem);
}
.ls-held-text h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2.3rem,5.5vw,3.8rem); line-height:1.05; margin:0 0 .55rem;
}
.ls-held-text .vorspann{max-width:48ch; color:var(--kohle); font-size:1.08rem; margin:0}
.ls-held-text .kicker{
  display:inline-block; color:var(--kohle);
  background:color-mix(in oklab, var(--weiss) 82%, transparent);
  padding:.35rem .7rem; border-radius:99rem; margin-bottom:.9rem;
}
.ls-aktionen{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.4rem}

/* Vertrauensanker unter dem Hero-Text */
.ls-anker{
  list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 2.2rem;
  margin:1.6rem 0 0; padding:1rem 0 0;
  border-top:1px solid color-mix(in oklab, var(--kohle) 18%, transparent);
}
.ls-anker li{font-size:.85rem; color:var(--grau)}
.ls-anker strong{
  font-family:var(--display); font-weight:900; font-size:1.5rem;
  color:var(--gold-dunkel); margin-right:.35rem;
}

/* Warum-Block: eine ruhige, breite Aussage */
.ls-warum{max-width:46rem}
.ls-warum h2{margin-bottom:.7rem}
.ls-warum p{color:var(--grau); font-size:1.02rem; margin:0}

/* Formatkarten mit Bild */
.ls-formate{display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:1.2rem}
.ls-format{
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ls-format:hover{transform:translateY(-3px); box-shadow:0 18px 40px -20px rgb(40 30 10 / .3)}
.ls-format img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.ls-format-text{padding:1.2rem 1.4rem 1.4rem}
.ls-format-text h3{margin:0 0 .45rem; font-size:1.15rem}
.ls-format-text p{color:var(--grau); font-size:.92rem; margin:0}

/* Zwischenruf: kleiner CTA mitten im Fluss */
.ls-zwischenruf{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 2rem; margin-top:2rem;
  background:var(--creme-2); border:1px solid var(--linie); border-radius:var(--radius);
  padding:1.2rem 1.5rem;
}
.ls-zwischenruf p{margin:0; color:var(--grau); font-size:.95rem; flex:1 1 22rem}

/* FAQ */
.ls-fragen{max-width:46rem}
.ls-fragen details{border-top:1px solid var(--linie); padding:.9rem 0}
.ls-fragen details:last-child{border-bottom:1px solid var(--linie)}
.ls-fragen summary{
  cursor:pointer; font-family:var(--display); font-weight:700; font-size:1.02rem;
  list-style:none; position:relative; padding-right:2rem;
}
.ls-fragen summary::-webkit-details-marker{display:none}
.ls-fragen summary::after{
  content:"+"; position:absolute; right:.2rem; top:0;
  font-family:var(--mono); color:var(--gold-dunkel); transition:rotate .2s ease;
}
.ls-fragen details[open] summary::after{rotate:45deg}
.ls-fragen details p{color:var(--grau); font-size:.93rem; margin:.6rem 0 0; max-width:60ch}

/* Anfrage: dunkler Abschlussblock mit Formular */
.ls-anfrage{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(1.6rem,4vw,3.5rem);
  background:var(--kohle); border-radius:var(--radius);
  padding:clamp(1.8rem,4.5vw,3rem);
}
.ls-anfrage-text h2{color:var(--creme); margin-bottom:.6rem}
.ls-anfrage-text p{color:color-mix(in oklab, var(--creme) 75%, transparent); font-size:.98rem}
.ls-anfrage-text .kicker{color:var(--gold)}
.ls-direkt a{color:var(--gold); text-decoration:none; border-bottom:1px solid color-mix(in oklab, var(--gold) 45%, transparent)}
.ls-anfrage .formular label{color:color-mix(in oklab, var(--creme) 70%, transparent)}
.ls-anfrage .formular input,
.ls-anfrage .formular textarea{
  background:color-mix(in oklab, var(--creme) 8%, var(--kohle));
  border-color:color-mix(in oklab, var(--creme) 22%, transparent);
  color:var(--creme);
}
.ls-anfrage .formular input:focus,
.ls-anfrage .formular textarea:focus{border-color:var(--gold)}
.formular-echo{margin:.9rem 0 0; font-size:.9rem; color:var(--gold)}
.formular-echo.fehler{color:oklch(70% .17 25)}
@media (max-width:860px){ .ls-anfrage{grid-template-columns:1fr} }