/* =========================================================================
   GONGAUSBILDUNG.DE — Landingpage-Layer
   Baut auf style.css auf (Tokens, Header, Manifest, Duo, Trainer, Voices,
   Footer werden wiederverwendet). Hier nur die LP-eigenen Bausteine.
   Gleiche Tokens, gleicher Ethos: Linie statt Schatten, Eyebrow statt Icon,
   Kante statt Glow. Nachgeschaerft 20.07.2026 (Feedback Alexander):
   grosser Hero mit Ken-Burns und Panel-Verzahnung, entkastete Fakten,
   Manifest-Statement, grosse Ziffern, Full-Bleed-Hoehepunkt, dunkler
   Kontrast-Block. Vorlage-Seite: Einzel-Gongtraining (Praesenz-Familie).
   ========================================================================= */

/* Anker nicht unter den fixen Header rutschen lassen */
#ueberblick, #inhalte, #ablauf, #trainer, #stimmen, #anfrage { scroll-margin-top: 104px; }

/* ---------- Hero (asymmetrisch: grosse Typo, Bild blutet rechts aus,
              weisses Panel verzahnt sich ins Bild) ---------- */
.lp-hero { padding-top: clamp(28px, 4.5vh, 56px); }

.lp-hero__head .eyebrow { display: flex; align-items: center; gap: 16px; }
.lp-hero__head .eyebrow::before {
  content: ""; width: 52px; height: 1px; background: var(--gold);
}
.lp-hero__head h1 {
  margin-top: clamp(20px, 2.6vw, 34px);
  font-size: clamp(2.7rem, 6vw, 5.9rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.lp-hero__head h1 .shift { display: block; margin-left: clamp(0px, 16vw, 232px); }
.lp-hero__sub {
  margin-top: clamp(14px, 1.6vw, 24px);
  font-size: clamp(1.5rem, 2.9vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-soft);
}

/* Breakout-Raster: 12 Inhaltsspalten buendig zur Shell, Bild laeuft bis
   an den rechten Viewport-Rand */
.lp-hero__stage {
  margin-top: clamp(30px, 4vw, 60px);
  display: grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    repeat(12, minmax(0, calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 12)))
    minmax(var(--gutter), 1fr);
}
.lp-hero__media {
  grid-column: 5 / -1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  height: clamp(440px, 76vh, 800px);
}
.lp-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 56% 45%;
  transform-origin: 62% 40%;
  animation: lp-kenburns 18s ease-in-out infinite alternate;
}
@keyframes lp-kenburns {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to   { transform: scale(1.13) translate3d(-1.5%,-1%,0); }
}
.lp-hero__panel {
  grid-column: 2 / 7;
  grid-row: 1;
  align-self: end;
  z-index: 2;
  background: var(--white);
  margin-bottom: clamp(36px, 6vh, 84px);
  padding: clamp(26px, 3vw, 46px) clamp(26px, 3vw, 52px) 0 0;
}
.lp-hero__panel .lede { max-width: 40ch; }
.lp-hero__actions { display: flex; gap: 26px; align-items: center; margin-top: clamp(24px, 2.6vw, 34px); flex-wrap: wrap; }
.lp-hero__meta {
  display: flex; gap: clamp(18px, 2.4vw, 40px); flex-wrap: wrap;
  margin-top: clamp(28px, 3.2vw, 44px); padding-top: 18px; border-top: 1px solid var(--rule);
}
.lp-hero__meta span {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* Hero-Einzug: choreografierter Auftritt beim Laden (nur CSS) */
.lp-hero__head .eyebrow,
.lp-hero__head h1,
.lp-hero__media,
.lp-hero__panel {
  animation-name: lp-rise; animation-duration: 0.9s;
  animation-timing-function: var(--ease); animation-fill-mode: backwards;
}
.lp-hero__head .eyebrow { animation-delay: 0.05s; }
.lp-hero__head h1 { animation-delay: 0.15s; }
.lp-hero__media { animation-name: lp-fade; animation-duration: 1.2s; animation-delay: 0.3s; }
.lp-hero__panel { animation-delay: 0.45s; }
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Manifest-Bild auf der LP: voller Ausschnitt, kein Parallax-Zoom (Gong und Staender ganz sichtbar) */
.manifest__media--full img { transform: none !important; }

/* ---------- Section-Kopf (geteilt, LP) ---------- */
.lp-head { max-width: 44ch; }
.lp-head .eyebrow { margin-bottom: 16px; }
.lp-head h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.lp-head p { margin-top: 18px; color: var(--ink-soft); }

/* ---------- Auf einen Blick (entkastet: feine Linien, grosse Werte) ---------- */
.glance { background: var(--paper); padding-block: var(--sec-s); }
.glance__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.glance__intro { grid-column: 1 / 5; }
.glance__intro .eyebrow { margin-bottom: 16px; }
.glance__intro h2 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); letter-spacing: -0.02em; }
.glance__intro .btn { margin-top: clamp(24px, 3vw, 40px); }
.glance__list {
  grid-column: 5 / 13;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 5vw, 88px);
  align-content: start;
}
.glance__list li { border-top: 1px solid var(--rule-strong); padding: 20px 0 30px; }
.g__k { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.g__v { margin-top: 12px; font-size: clamp(1.3rem, 1.8vw, 1.65rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.g__d { margin-top: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); max-width: 36ch; }

/* ---------- Gruende (warum es passt) ---------- */
.reasons { padding-block: var(--sec); }
.reasons__grid {
  margin-top: clamp(36px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px) clamp(32px, 4vw, 64px);
}
.reason { border-top: 1px solid var(--rule-strong); padding-top: 18px; }
.reason h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
.reason p { margin-top: 8px; color: var(--ink-soft); font-size: var(--fs-small); max-width: 34ch; }

/* ---------- Inhalte und Themen (Kern-Block Praesenz, grosse Ziffern,
              versetzter Takt) ---------- */
.themes { padding-block: var(--sec); }
.themes__grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(36px, 4vw, 64px) clamp(48px, 6vw, 112px);
}
.theme { border-top: 1px solid var(--rule-strong); padding-top: 22px; }
.themes__grid .theme:nth-child(even) { margin-top: clamp(32px, 5vw, 88px); }
.theme__num {
  font-size: clamp(3.2rem, 5.4vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--gold-soft);
}
.theme h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; margin: 18px 0 16px; }
.theme ul { list-style: none; margin: 0; padding: 0; }
.theme li { border-top: 1px solid var(--rule); padding: 11px 0; font-size: var(--fs-small); color: var(--ink); line-height: 1.5; }

/* ---------- Full-Bleed-Moment (Hoehepunkt, Statement im Bild) ---------- */
.lp-still { position: relative; overflow: hidden; height: clamp(460px, 82vh, 780px); }
.lp-still figure { position: absolute; inset: 0; overflow: hidden; }
.lp-still img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
  transform: scale(1.15); will-change: transform;
}
.lp-still__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(20,19,17,0.86) 0%, rgba(20,19,17,0.34) 46%, rgba(20,19,17,0) 70%),
    linear-gradient(90deg, rgba(20,19,17,0.6) 0%, rgba(20,19,17,0.08) 48%, rgba(20,19,17,0) 72%);
}
.lp-still__text { position: absolute; inset-inline: 0; bottom: clamp(40px, 7vh, 88px); color: #fff; }
.lp-still__text .eyebrow { color: var(--gold-soft); margin-bottom: 18px; }
.lp-still__text p.big {
  font-size: clamp(1.9rem, 3.8vw, 3.5rem);
  line-height: 1.08; letter-spacing: -0.025em;
  max-width: 20ch; text-wrap: balance;
  text-shadow: 0 1px 26px rgba(8,7,6,0.45);
}
.lp-still__text p.sub {
  margin-top: 18px; max-width: 46ch;
  font-size: var(--fs-lede); line-height: 1.5; color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 18px rgba(8,7,6,0.4);
}

/* ---------- Ablauf (Schritte) ---------- */
.steps { background: var(--paper); padding-block: var(--sec); }
.steps__grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.step__num {
  font-size: clamp(2.6rem, 3.6vw, 3.5rem); font-weight: 400; letter-spacing: -0.03em; color: var(--gold-deep);
  line-height: 0.9; padding-bottom: 18px; border-bottom: 1px solid var(--rule-strong); margin-bottom: 20px;
}
.step h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; }
.step p { color: var(--ink-soft); font-size: var(--fs-small); }

/* ---------- Dein Gong (entkasteter Hinweis, Gold-Kante) ---------- */
.gongtip { padding-block: var(--sec-s); }
.gongtip__inner {
  border-left: 3px solid var(--gold);
  padding-left: clamp(24px, 3.5vw, 56px);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.gongtip__inner .eyebrow { margin-bottom: 12px; }
.gongtip__inner h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
.gongtip__body p { color: var(--ink); max-width: 62ch; }
.gongtip__body p + p { margin-top: 14px; }

/* ---------- Haeufige Fragen (Akkordeon) ---------- */
.faq { padding-block: var(--sec); }
.faq .lp-head { max-width: none; }
.faq__list { margin-top: clamp(36px, 4vw, 56px); max-width: 860px; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 0; display: flex;
  justify-content: space-between; align-items: baseline; gap: 24px;
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
  transition: color 0.16s var(--ease);
}
.faq summary:hover { color: var(--gold-deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-deep); font-weight: 400; font-size: 1.6rem; line-height: 1; flex: 0 0 auto; transition: transform 0.2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--ink-soft); max-width: 68ch; }

/* ---------- Cross-Sell (Vertiefung, dunkler Kontrast-Block) ---------- */
.crosssell { position: relative; overflow: hidden; background: var(--black); color: var(--paper); padding-block: var(--sec); }
.crosssell::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../img/free-abend.webp") center 42% / cover no-repeat;
  opacity: 0.55; filter: saturate(0.92);
}
.crosssell::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(20,19,17,0.86) 0%, rgba(20,19,17,0.6) 52%, rgba(20,19,17,0.34) 100%);
}
.crosssell__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.crosssell .eyebrow { color: var(--gold); margin-bottom: 16px; }
.crosssell h2 { color: var(--paper); font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -0.025em; }
.crosssell__sub { margin-top: 14px; font-size: var(--fs-h3); font-weight: 700; color: var(--gold-soft); letter-spacing: -0.01em; }
.crosssell p { margin-top: 18px; color: rgba(250, 244, 234, 0.82); max-width: 48ch; font-size: var(--fs-lede); line-height: 1.55; }
.crosssell__cta { justify-self: end; padding-bottom: 6px; }
@media (max-width: 900px) { .crosssell__cta { justify-self: start; } }

/* ---------- Anfrage-Block (Conversion Praesenz) ---------- */
.inquiry { padding-block: var(--sec); }
.inquiry__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.inquiry__intro h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.inquiry__intro .eyebrow { margin-bottom: 16px; }
.inquiry__intro .lede { margin-top: 20px; max-width: 42ch; }
.inquiry__contact { margin-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); padding-top: 24px; }
.inquiry__contact p { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: 10px; }
.inquiry__contact a { color: var(--bordeaux); font-weight: 700; text-decoration: none; }
.inquiry__contact a:hover { color: var(--gold-deep); }
.inquiry__microline { margin-top: 22px; font-size: var(--fs-small); color: var(--ink); }

/* ---------- Kontaktformular, EIN Layout fuer die ganze Site ----------
   Ansage Alexander 24.07.2026: Formulare wie auf alexander-renner.com/kontakt
   (dort gemessen). Weiche Karte mit Radius 16 und leisem Schatten, gefuellte
   Felder mit Radius 11, Labels als normaler Satz statt Versalien, Auswahl als
   Pillen, Button ueber die ganze Breite, kleine Fussnote mittig.
   Gilt fuer die Anfrageformulare der Landingpages (.inquiry__form) und fuer
   das Formular der Kontaktseite (.ct-form). Schriftgroessen liegen bewusst
   ueber dem Original (Zielgruppe 40 plus).
   ------------------------------------------------------------------------ */
.inquiry__form, .ct-form {
  background: var(--white);
  border: 1px solid #e8e3da;
  border-radius: 16px;
  padding: clamp(26px, 2.6vw, 38px);
  box-shadow: 0 34px 80px -44px rgba(23, 17, 14, 0.6);
}
.inquiry__form .fld, .ct-form .fld { margin-bottom: 16px; }
.inquiry__form label, .ct-form label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 7px;
}
/* Fehlende oder falsche Eingabe: Feld in Bordeaux markieren, bis der Besucher
   es korrigiert. Die Meldungen setzt assets/js/main.js. */
.inquiry__form input.is-invalid, .inquiry__form textarea.is-invalid,
.ct-form input.is-invalid, .ct-form textarea.is-invalid {
  border-color: var(--bordeaux);
  background: #fbf6f5;
}
.inquiry__consent.has-invalid span, .has-invalid > span { color: var(--bordeaux); }
.inquiry__consent.has-invalid input[type="checkbox"],
.has-invalid input[type="checkbox"] { outline: 2px solid var(--bordeaux); outline-offset: 2px; }

.inquiry__form input, .inquiry__form textarea,
.ct-form input, .ct-form textarea {
  width: 100%;
  background: #f5f3ef;
  border: 1px solid #e8e3da;
  border-radius: 11px;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  padding: 13px 15px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.inquiry__form textarea, .ct-form textarea { min-height: 140px; resize: vertical; }
.inquiry__form input::placeholder, .ct-form input::placeholder,
.inquiry__form textarea::placeholder, .ct-form textarea::placeholder { color: var(--ink-soft); }
.inquiry__form input:focus, .inquiry__form textarea:focus,
.ct-form input:focus, .ct-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(209, 153, 71, 0.18);
}
.inquiry__form .fld--row, .ct-form .fld--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Laufender Satz, deshalb wie die Labels ohne Versalien. */
.inquiry__form .inquiry__consent, .ct-form .ct-consent {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px;
  font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.inquiry__consent input, .ct-consent input { width: auto; margin-top: 3px; flex: 0 0 auto; accent-color: var(--bordeaux); }
.inquiry__consent a, .ct-consent a { color: var(--bordeaux); }
.inquiry__form .btn, .ct-form .btn { margin-top: 10px; width: 100%; justify-content: center; }
.inquiry__form .req, .ct-form .req { color: var(--gold-deep); }

/* ---------- Impressionen (interaktive Galerie, horizontal) ---------- */
.gallery { padding-block: var(--sec); overflow: hidden; }
.gallery__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(28px, 3.5vw, 48px);
}
.gallery__head .eyebrow { margin-bottom: 14px; }
.gallery__head h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.gallery__nav { display: flex; gap: 12px; flex: 0 0 auto; }
.gallery__btn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--rule-strong); background: transparent;
  color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.gallery__btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.gallery__btn:active { transform: scale(0.94); }
.gallery__btn:disabled { opacity: 0.3; cursor: default; }
.gallery__btn:disabled:hover { background: transparent; color: var(--ink); border-color: var(--rule-strong); }

.gallery__track {
  display: flex; gap: clamp(16px, 1.6vw, 26px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-inline: var(--gutter);
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-drag { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.gallery__item {
  flex: 0 0 clamp(280px, 38vw, 560px);
  scroll-snap-align: center;
  position: relative; overflow: hidden;
}
.gallery__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
  transform: scale(1.02);
}
.gallery__item:hover img { transform: scale(1.08); }
.gallery__item figcaption {
  margin-top: 12px; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.gallery__item.is-tall img { aspect-ratio: 3 / 4; }

/* Hover-Bewegung auf redaktionellen Bildern (Tiefe statt Standbild) */
.manifest__media img, .duo__tall img, .duo__wide img { transition: transform 0.7s var(--ease); }
.manifest__media:hover img, .duo__tall:hover img, .duo__wide:hover img { transform: scale(1.18) translateY(0); }
.trainer__media { overflow: hidden; }
.trainer__media img { transition: transform 0.7s var(--ease); }
.trainer__media:hover img { transform: scale(1.05); }

/* ---------- Bewegung: Ruhe respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp-hero__head .eyebrow, .lp-hero__head h1, .lp-hero__media, .lp-hero__panel { animation: none; }
  .lp-hero__media img { animation: none; }
  .lp-still img { transform: none; will-change: auto; }
  .gallery__track { scroll-behavior: auto; }
  .gallery__item:hover img, .manifest__media:hover img, .duo__tall:hover img, .duo__wide:hover img, .trainer__media:hover img { transform: scale(1.02); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .lp-hero { padding-top: 20px; }
  .lp-hero__stage { display: block; margin-top: clamp(24px, 4vw, 40px); }
  .lp-hero__media { height: min(56vh, 540px); min-height: 340px; }
  .lp-hero__media img { object-position: 60% 48%; }
  .lp-hero__panel { margin: 0; padding: clamp(28px, 5vw, 44px) var(--gutter) 0; }

  .glance__grid { grid-template-columns: 1fr; }
  .glance__intro, .glance__list { grid-column: 1; }
  .reasons__grid { grid-template-columns: repeat(2, 1fr); }
  .themes__grid .theme:nth-child(even) { margin-top: 0; }
  .steps__grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .gongtip__inner { grid-template-columns: 1fr; gap: 18px; }
  .crosssell__inner { grid-template-columns: 1fr; align-items: start; }
  .inquiry__grid { grid-template-columns: 1fr; }
  .inquiry__form { max-width: 620px; }
}

@media (max-width: 600px) {
  .lp-hero__head h1 .shift { margin-left: 0; }
  .lp-hero__media { height: min(48vh, 440px); }
  .glance__list { grid-template-columns: 1fr; }
  .glance__list li { padding: 18px 0 24px; }
  .reasons__grid { grid-template-columns: 1fr; }
  .themes__grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); }
  .gallery__head { flex-direction: column; align-items: flex-start; }
  .gallery__item { flex-basis: 78vw; }
  .lp-still { height: min(66vh, 560px); min-height: 420px; }
  .lp-still__scrim {
    background:
      linear-gradient(0deg, rgba(20,19,17,0.8) 0%, rgba(20,19,17,0.34) 58%, rgba(20,19,17,0.08) 80%),
      linear-gradient(90deg, rgba(20,19,17,0.3) 0%, rgba(20,19,17,0) 60%);
  }
  .inquiry__form .fld--row { grid-template-columns: 1fr; }
}

/* ============================================================
   Zusatz-Bausteine (Resilienz-Ausbau, additive Klassen)
   Video-Embed, Curriculum-Galerie, Format-Gegenueberstellung,
   Verkaufs-CTA-Stoerer. Nur neue Klassen, andere Seiten unberuehrt.
   ============================================================ */

/* Kopfzeilen mit kurzer Headline nicht kuenstlich schmal umbrechen */
.reasons .lp-head, .steps .lp-head, .curriculum .lp-head, .formats2 .lp-head { max-width: 64ch; }

/* Bonus-Hinweis im Hero-Panel */
.lp-hero__bonus {
  margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--gold);
  color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.5;
}

/* ---------- YouTube-Video (oben, direkt nach dem Hero) ---------- */
.lp-video { padding-block: var(--sec); background: var(--white); }
.lp-video__head { max-width: 46ch; margin: 0 auto clamp(32px, 3.4vw, 52px); text-align: center; }
.lp-video__head .eyebrow { margin-bottom: 14px; }
.lp-video__head h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.lp-video__head p { margin-top: 14px; color: var(--ink-soft); }
.lp-video__frame {
  position: relative; width: 100%; max-width: 1040px; margin: 0 auto;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #12100e;
  box-shadow: 0 40px 90px -38px rgba(20, 19, 17, 0.55);
}
.lp-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp-video__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; display: block;
}
.lp-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.lp-video__play:hover .lp-video__poster { transform: scale(1.03); }
.lp-video__btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(66px, 6vw, 88px); height: clamp(66px, 6vw, 88px); border-radius: 50%;
  background: rgba(112, 21, 18, 0.92); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4); transition: background 0.25s, transform 0.25s;
}
.lp-video__btn svg { margin-left: 4px; }
.lp-video__play:hover .lp-video__btn, .lp-video__play:focus-visible .lp-video__btn {
  background: var(--gold); color: var(--black); transform: translate(-50%, -50%) scale(1.07);
}

/* ---------- Curriculum / Inhalte und Themen (Bild-Galerie) ---------- */
.curriculum { padding-block: var(--sec); background: var(--white); }
.curriculum__grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.6vw, 40px) clamp(24px, 2.6vw, 36px);
}
.curr-card { display: flex; flex-direction: column; }
.curr-card__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--paper); }
.curr-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.curr-card:hover .curr-card__img img { transform: scale(1.06); }
.curr-card__num {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em;
  color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.curr-card h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; margin: 18px 0 8px; }
.curr-card p { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; }

/* ---------- Format-Gegenueberstellung (1:1 vs. Gruppe) ---------- */
.formats2 { padding-block: var(--sec); background: var(--paper); }
.formats2__grid {
  margin-top: clamp(36px, 4vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.6vw, 40px);
}
.fmt {
  background: var(--white); border: 1px solid var(--rule);
  padding: clamp(28px, 3vw, 46px); display: flex; flex-direction: column;
}
.fmt__tag { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.fmt h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.015em; margin: 10px 0 12px; }
.fmt__lede { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; }
.fmt__facts { list-style: none; margin: 22px 0 4px; padding: 0; }
.fmt__facts li { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule); padding: 11px 0; font-size: var(--fs-small); }
.fmt__facts .k { color: var(--ink-soft); }
.fmt__facts .v { color: var(--ink); font-weight: 700; text-align: right; }
.fmt__incl-label { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 26px 0 10px; }
.fmt__incl { list-style: none; margin: 0 0 30px; padding: 0; }
.fmt__incl li { position: relative; padding: 8px 0 8px 26px; font-size: var(--fs-small); color: var(--ink); line-height: 1.5; }
.fmt__incl li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--gold-deep); font-weight: 700; }
.fmt .btn { margin-top: auto; align-self: flex-start; }
.fmt__points { list-style: none; margin: 20px 0 30px; padding: 0; }
.fmt__points li { position: relative; padding: 9px 0 9px 20px; font-size: var(--fs-small); color: var(--ink); line-height: 1.5; border-top: 1px solid var(--rule); }
.fmt__points li:first-child { border-top: 0; }
.fmt__points li::before { content: ""; position: absolute; left: 0; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.fmt__points strong { font-weight: 700; }

/* ---------- Vergleichstabelle (Fakten-Matrix 1:1 vs. Gruppe) ---------- */
.cmp-sec { padding-block: var(--sec); background: var(--paper); }
.cmp-lead { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 3vw, 56px); align-items: center; margin-bottom: clamp(34px, 4vw, 54px); }
.cmp-lead .lp-head { max-width: none; }
.cmp-lead__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; }
.cmp-lead__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.cmp-lead__img:hover img { transform: scale(1.05); }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cmp { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--white); border: 1px solid var(--rule); }
.cmp caption { caption-side: bottom; text-align: left; margin-top: 12px; font-size: var(--fs-micro); color: var(--ink-soft); }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.4; }
.cmp thead th { background: var(--bordeaux); color: #fff; font-weight: 700; vertical-align: top; letter-spacing: -0.01em; }
.cmp thead th .price { display: block; margin-top: 6px; font-weight: 400; font-size: calc(var(--fs-micro) * 1.25); color: rgba(255, 255, 255, 0.9); }
.cmp thead th.cmp__rowhead { background: var(--bordeaux-ink, #4d0f0d); }
.cmp tbody th { font-weight: 600; color: var(--ink); width: 48%; }
.cmp td.val { text-align: center; width: 26%; }
.cmp .yes { color: var(--gold-deep); font-weight: 700; }
.cmp .no { color: var(--rule-strong); }
.cmp tbody tr:nth-child(even) td, .cmp tbody tr:nth-child(even) th { background: var(--paper); }
.cmp tfoot td, .cmp tfoot th { border-bottom: 0; padding-top: 20px; background: var(--white); text-align: center; }
.cmp tfoot .btn { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .cmp-lead { grid-template-columns: 1fr; }
  .cmp-lead__img { order: -1; aspect-ratio: 16 / 9; }
}

/* ---------- Interessen-Auswahl im Anfrage-Formular ---------- */
/* Auswahl als Pillen, wie im Formular von alexander-renner.com/kontakt */
.fld--interest { border: 0; padding: 0; margin: 0 0 16px; }
.fld--interest legend {
  padding: 0; font-size: 0.95rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ink); margin-bottom: 10px;
}
.fld--interest .opt {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--paper); border: 1px solid #e8e3da; border-radius: 999px;
  padding: 10px 16px; margin: 0 10px 10px 0;
  font-size: var(--fs-small); font-weight: 500; letter-spacing: normal;
  text-transform: none; color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.fld--interest .opt:hover { border-color: var(--gold); }
.fld--interest .opt input { width: auto; margin: 0; flex: 0 0 auto; accent-color: var(--bordeaux); }
.fld--interest .opt:has(input:checked) { border-color: var(--gold); background: rgba(209, 153, 71, 0.14); }

/* ---------- Verkaufs-CTA-Stoerer (zwischen den Sektionen) ---------- */
.cta-band { background: var(--bordeaux); color: #fff; padding-block: clamp(52px, 6vw, 92px); text-align: center; }
.cta-band .eyebrow { color: var(--gold-soft); margin-bottom: 14px; }
.cta-band h2 { color: #fff; font-size: clamp(1.7rem, 2.9vw, 2.5rem); letter-spacing: -0.02em; max-width: 26ch; margin: 0 auto 24px; }
.cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 46ch; margin: 0 auto 26px; font-size: var(--fs-lede); line-height: 1.5; }

/* ---------- Responsive fuer die Zusatz-Bausteine ---------- */
@media (max-width: 1023px) {
  .curriculum__grid { grid-template-columns: repeat(2, 1fr); }
  .formats2__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .curriculum__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .curr-card:hover .curr-card__img img { transform: scale(1.02); }
}

/* Manifest-Bild im Querformat: ganzes Motiv zeigen, kein Hochkant-Crop */
.manifest__media--wide img { aspect-ratio: 4 / 3; }

/* ---------- Angebots-Sektor: Mentoring / Supervision als eigene Bloecke ---------- */
.offer { padding-block: var(--sec); }
.offer + .offer { padding-top: 0; }
.offer__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 96px);
  align-items: start;
}
.offer__text .eyebrow { margin-bottom: 16px; }
.offer__text h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.offer__text p { margin-top: 20px; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.6; max-width: 52ch; }
.offer__card {
  align-self: start;
  background: var(--paper);
  border-top: 3px solid var(--gold);
  padding: clamp(28px, 3vw, 44px);
}
.offer__label { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.offer__points { list-style: none; margin: 16px 0 30px; padding: 0; }
.offer__points li { position: relative; padding: 12px 0 12px 22px; font-size: var(--fs-small); color: var(--ink); line-height: 1.5; border-top: 1px solid var(--rule); }
.offer__points li:first-child { border-top: 0; }
.offer__points li::before { content: ""; position: absolute; left: 0; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.offer__card .btn { align-self: flex-start; }
/* gespiegelt: Karte links, Text rechts (Desktop) */
.offer--alt .offer__text { grid-column: 2; grid-row: 1; }
.offer--alt .offer__card { grid-column: 1; grid-row: 1; }
@media (max-width: 900px) {
  .offer__grid { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); }
  .offer--alt .offer__text { grid-column: 1; grid-row: 1; }
  .offer--alt .offer__card { grid-column: 1; grid-row: 2; }
}

/* =====================================================================
   Uebersichtsseiten (Gong Trainings / Online Gong Trainings)
   Additiv, schlicht. Karten mit Key-Visual, Linie statt Schatten.
   ===================================================================== */

.ov-head { padding: calc(var(--sec-s) * 0.9) 0 clamp(48px, 6vw, 96px); }
.ov-head .shell { max-width: 820px; }
.ov-head h1 {
  font-size: var(--fs-d2);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0.35rem 0 0;
}
.ov-head .lede {
  margin: 1.1rem 0 0;
  max-width: 62ch;
  color: var(--ink-soft);
}

.ov { background: var(--paper); padding: var(--sec-s) 0 var(--sec); }
.ov__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 2.6vw, 44px);
}
.ov__grid--duo { grid-template-columns: repeat(2, 1fr); max-width: 1040px; margin: 0 auto; }
/* Zwei Spalten ueber die volle Satzbreite, Kopf und Karten stehen links am Seitenrand */
.ov__grid--half { grid-template-columns: repeat(2, 1fr); }
/* Kopf auf voller Satzbreite: Text startet an derselben Kante wie die Karten,
   bei jeder Fensterbreite. Kein margin-inline 0, sonst wandert der Kopf ueber 1440px
   an den Fensterrand, waehrend die Karten in der zentrierten Satzbreite bleiben. */
.ov-head--flush .shell { max-width: var(--maxw); }
.ov-head--flush h1 { max-width: 20ch; }

/* Zwischenueberschrift (z. B. englischer Block unter dem deutschen) */
.ov-sub { max-width: 1040px; margin: clamp(64px, 7vw, 120px) auto clamp(28px, 3.5vw, 52px); }
.ov-sub h2 { font-size: var(--fs-h2); line-height: 1.08; margin: 0.35rem 0 0; }

/* Ruhiger Abschluss unter dem Karten-Grid (z. B. Verweis auf den YouTube-Kanal) */
.ov-outro { max-width: 1040px; margin: clamp(40px, 4.5vw, 72px) auto 0; }
.ov-outro--flush { margin-inline: 0; }
.ov-outro p { margin: 0 0 0.5rem; color: var(--ink-soft); }

.ov-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.ov-card__media {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sand);
}
.ov-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.ov-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2vw, 32px);
}
.ov-card__cat {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.ov-card__title {
  font-size: var(--fs-h3);
  line-height: 1.15;
  margin: 0.6rem 0 0;
}
.ov-card__text {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.ov-card__meta {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.ov-card__go {
  margin: 1.2rem 0 0;
  font-weight: 600;
  color: var(--gold-deep);
}
.ov-card__go .arr { display: inline-block; transition: transform 0.4s var(--ease); }

@media (hover: hover) {
  .ov-card:hover { border-color: var(--gold); transform: translateY(-3px); }
  .ov-card:hover .ov-card__media img { transform: scale(1.05); }
  .ov-card:hover .ov-card__go .arr { transform: translateX(6px); }
}
.ov-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 980px) {
  .ov__grid, .ov__grid--duo { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ov__grid, .ov__grid--duo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-card, .ov-card__media img, .ov-card__go .arr { transition: none; }
  .ov-card:hover { transform: none; }
  .ov-card:hover .ov-card__media img { transform: none; }
}