/* =============================================================================
   DPEngineering — Funnel-CI-Kit · components.css   (aus dem kanonischen Skelett)
   -----------------------------------------------------------------------------
   Wiederverwendbare UI-Komponenten für ALLE Funnel (TF/AWF/LWF) + System-Seiten.
   KANONISCHER KOMPONENTEN-SATZ — Klassennamen agenturweit IDENTISCH, komplett
   token-getrieben (Farben/Typo/Spacing/Radius via var(--…)). Diese Datei ist zu
   ~99 % kundenunabhängig: sie wird meist 1:1 übernommen, gefüllt wird nur tokens.css.
   ALLE Interaktions-States leben HIER (Hover/Active/Focus/Disabled/Selected) —
   nie pro Funnel neu definieren. Master im <kunde>-router-Repo; Funnel tragen
   Kopien (funnel-deploy --kit-Gate erzwingt Byte-Gleichheit).

   ⚠️ EINZIGE kundenabhängige Stellen (data-URI-SVGs können kein var() nutzen):
   die zwei Häkchen-Farben unten — an --c-on-accent (Checkbox auf Akzent) und
   --c-primary (Checkliste) angepasst: %23ffffff (weiß auf Grün) / %23006039 (Grün).
   Stand: 2026-07-25
   ============================================================================= */

/* ============================ Layout ======================================= */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:var(--container-narrow); }
.section{ padding-block:var(--section-y); }
.section--surface{ background:var(--c-bg-surface); }
.section--tint{ background:var(--c-bg-tint); }
.section--dark{ background:var(--c-on-dark-bg); color:var(--c-on-dark-text); }
.section--dark .section__title{ color:var(--c-on-dark-heading); }
.stack > * + *{ margin-top:var(--sp-4); }
.row{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }

/* Brand-Hero: Marken-Verlauf (--grad-brand) + weiße Schrift + Akzent-CTA (wärmer als
   flaches Weiß). Akzent-Eyebrow & Akzent-CTA stechen auf dem Marken-Grund heraus. */
.hero--brand{ background:var(--grad-brand); color:var(--c-on-dark-text); }
.hero--brand .display,.hero--brand .h1,.hero--brand .section__title{ color:#fff; }
.hero--brand .lead{ color:rgba(255,255,255,.85); }
.hero--brand .eyebrow{ color:var(--c-accent); }
.hero--brand .subtle{ color:rgba(255,255,255,.72); }
.hero--brand .trust{ color:rgba(255,255,255,.78); }
.hero--brand .rating{ color:#fff; }
.hero--brand a:not(.btn){ color:#fff; }

/* Foto-Hero: realistisches Bild + Marken-Overlay (garantiert Kontrast für weiße Schrift).
   Bild pro Funnel setzen: <section class="section hero--photo" style="background-image:url(...)">.
   KEINE KI-Bilder — echte, passende Fotografie (MOG-Funnel-CI-Kit-Standard §7). webp + lazy. */
.hero--photo{ position:relative; background-size:cover; background-position:center; color:var(--c-on-dark-text); }
.hero--photo::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,.80) 100%); }
.hero--photo > *{ position:relative; z-index:1; }
.hero--photo .display,.hero--photo .h1,.hero--photo .section__title{ color:#fff; }
.hero--photo .lead{ color:rgba(255,255,255,.90); }
.hero--photo .eyebrow{ color:var(--c-accent); }
.hero--photo .subtle{ color:rgba(255,255,255,.72); }
.hero--photo .trust{ color:rgba(255,255,255,.80); }
.hero--photo .rating{ color:#fff; }

/* Bild-Utilities: gleichmäßig gecroppte Fotos, unten lazy. */
.img-cover{ width:100%; height:100%; object-fit:cover; }
.media-photo{ border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); }

/* ============================ Typografie =================================== */
.eyebrow{ font:var(--fw-bold) var(--fs-caption)/1 var(--font-eyebrow);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--c-accent-hover); }
.section--dark .eyebrow{ color:var(--c-accent); }
.h1,.section__title{ font:var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-head);
  color:var(--c-heading); letter-spacing:var(--ls-tight); margin:0 0 var(--sp-4); }
.display{ font:var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-head);
  color:var(--c-heading); letter-spacing:var(--ls-tight); margin:0 0 var(--sp-4); text-wrap:balance; }
.h2{ font:var(--fw-bold) var(--fs-h2)/var(--lh-head) var(--font-head); color:var(--c-heading); margin:0 0 var(--sp-3); }
.h3{ font:var(--fw-bold) var(--fs-h3)/var(--lh-head) var(--font-head); color:var(--c-heading); margin:0 0 var(--sp-2); }
.lead{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--c-text-muted); max-width:56ch; }
.muted{ color:var(--c-text-muted); }
.subtle{ color:var(--c-text-subtle); font-size:var(--fs-small); }

/* ============================ Buttons / CTA ================================
   Akzent (--c-accent) = primärer CTA (Disziplin). Marke (--c-primary) = sekundär.
   States: hover/active/focus-visible/disabled/loading. -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:var(--tap-min); padding:0 28px; border:0; border-radius:var(--r-btn);
  font:var(--fw-bold) var(--fs-body)/1.05 var(--font-head); text-align:center;
  text-decoration:none; cursor:pointer; user-select:none;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; }
.btn[disabled],.btn.is-disabled{ opacity:.55; cursor:not-allowed; pointer-events:none; box-shadow:none; }
.btn .sub{ display:block; font-weight:var(--fw-normal); font-size:var(--fs-caption); opacity:.85; margin-top:2px; }

.btn--cta{ background:var(--c-accent); color:var(--c-on-accent); box-shadow:var(--sh-cta); }
.btn--cta:hover{ background:var(--c-accent-hover); transform:translateY(-1px); box-shadow:0 12px 30px var(--c-accent-glow); }
.btn--cta:active{ transform:translateY(0); }

.btn--secondary{ background:var(--c-primary); color:#fff; }
.btn--secondary:hover{ background:var(--c-primary-dark); transform:translateY(-1px); }

.btn--ghost{ background:transparent; color:var(--c-primary); border:1.5px solid var(--c-border-strong); }
.btn--ghost:hover{ border-color:var(--c-primary); background:var(--c-primary-soft); }

.btn--lg{ min-height:56px; padding:0 36px; font-size:var(--fs-lead); }
.btn--block{ display:flex; width:100%; }

/* Loading-State (aria-busy) */
.btn.is-loading{ color:transparent !important; pointer-events:none; position:relative; }
.btn.is-loading::after{ content:""; position:absolute; width:1.1em; height:1.1em; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:btn-spin .6s linear infinite; color:var(--c-on-accent); }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

/* Sticky-Mobile-CTA (erscheint, wenn der Hero-CTA aus dem Blick ist) */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky-cta);
  padding:var(--sp-3) var(--gutter); background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-top:1px solid var(--c-border); transform:translateY(110%); transition:transform .3s var(--ease); }
.sticky-cta.is-visible{ transform:none; }
@media (min-width:768px){ .sticky-cta{ display:none; } }

/* ============================ Formulare ==================================== */
.field{ display:block; margin-bottom:var(--sp-4); }
.field > label{ display:block; font-size:var(--fs-small); font-weight:var(--fw-medium); color:var(--c-heading); margin-bottom:6px; }
.field input,.field textarea,.field select{
  width:100%; min-height:var(--tap-min); padding:12px 14px; background:var(--c-white);
  border:1.5px solid var(--c-border-strong); border-radius:var(--r-input);
  font:var(--fw-normal) var(--fs-body) var(--font-body); color:var(--c-heading);
  transition:border-color var(--dur), box-shadow var(--dur); }
.field textarea{ min-height:120px; resize:vertical; line-height:var(--lh-body); }
.field input::placeholder,.field textarea::placeholder{ color:var(--c-text-subtle); }
.field input:hover,.field textarea:hover,.field select:hover{ border-color:var(--c-primary-light); }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--c-focus);
  box-shadow:0 0 0 3px var(--c-primary-soft); }
.field--error input,.field--error textarea,.field--error select{ border-color:var(--c-error); }
.field--error input:focus{ box-shadow:0 0 0 3px var(--c-error-soft); }
.field__error{ display:block; color:var(--c-error); font-size:var(--fs-small); margin-top:6px; }

/* Consent-/Checkbox + Radio */
.check{ display:flex; align-items:flex-start; gap:10px; font-size:var(--fs-small); color:var(--c-text); cursor:pointer; }
.check input{ appearance:none; width:22px; height:22px; flex:0 0 auto; margin-top:1px;
  border:2px solid var(--c-border-strong); border-radius:6px; background:var(--c-white); cursor:pointer;
  transition:border-color var(--dur), background var(--dur); }
.check input[type=radio]{ border-radius:50%; }
.check input:hover{ border-color:var(--c-primary-light); }
.check input:checked{ border-color:var(--c-accent); background:var(--c-accent); }
.check input:checked::after{ content:""; display:block; }
.check input[type=checkbox]:checked{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E"); background-size:15px; background-position:center; background-repeat:no-repeat; }
.check input:focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; }

/* ============================ Quiz ========================================= */
.quiz__progress{ height:6px; background:var(--c-bg-panel); border-radius:var(--r-pill); overflow:hidden; margin-bottom:var(--sp-5); }
.quiz__bar{ height:100%; background:var(--c-accent); border-radius:inherit; transition:width .4s var(--ease); }
.quiz__steps{ font-size:var(--fs-small); color:var(--c-text-muted); margin-bottom:var(--sp-3); }
.opt{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--c-white); border:2px solid var(--c-border); border-radius:var(--r-card);
  padding:16px 18px; margin-bottom:var(--sp-3); font:var(--fw-medium) var(--fs-body) var(--font-body);
  color:var(--c-heading); cursor:pointer; transition:border-color var(--dur), background var(--dur), transform var(--dur); }
.opt:hover{ border-color:var(--c-border-strong); transform:translateY(-1px); }
.opt:active{ transform:translateY(0); }
.opt:focus-visible{ outline:2px solid var(--c-focus); outline-offset:2px; }
.opt .dot{ width:22px; height:22px; border-radius:50%; border:2px solid var(--c-border-strong);
  flex:0 0 auto; display:grid; place-items:center; transition:border-color var(--dur), background var(--dur); }
.opt.is-selected{ border-color:var(--c-accent); background:var(--c-accent-soft); }
.opt.is-selected .dot{ border-color:var(--c-accent); background:var(--c-accent); }
.opt.is-selected .dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c-on-accent); }
.opt--multi .dot{ border-radius:6px; }
.opt--multi.is-selected .dot::after{ border-radius:1px; }

/* ============================ Karten / Trust =============================== */
.card{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--r-card);
  box-shadow:var(--sh-card); padding:var(--sp-6); }
.card--link{ display:block; text-decoration:none; color:inherit; transition:transform var(--dur), box-shadow var(--dur); }
.card--link:hover{ transform:translateY(-3px); box-shadow:var(--sh-lift); }

.badge{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill);
  padding:6px 14px; font-size:var(--fs-small); font-weight:var(--fw-medium);
  background:var(--c-primary-soft); color:var(--c-primary-dark); }
.badge--accent{ background:var(--c-accent-soft); color:var(--c-accent-hover); }

.trust{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; color:var(--c-text-subtle); font-size:var(--fs-small); }
.trust__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1rem,4vw,2.5rem); opacity:.75; }
.trust__logos img{ height:32px; width:auto; filter:grayscale(1); }
.rating{ display:inline-flex; align-items:center; gap:8px; font-weight:var(--fw-medium); color:var(--c-heading); }
.stars{ color:var(--c-accent); letter-spacing:1px; }

/* Testimonial */
.testimonial{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--r-card); padding:var(--sp-6); box-shadow:var(--sh-card); }
.testimonial__quote{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--c-text); }
.testimonial__author{ display:flex; align-items:center; gap:12px; margin-top:var(--sp-4); }
.testimonial__author img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.testimonial__name{ font-weight:var(--fw-bold); color:var(--c-heading); }

/* ============================ Media / Video-Facade ========================
   click-to-load (Poster + Play, iframe erst bei Klick = besserer LCP + kein
   Fremd-Request/Cookie vor Consent). ------------------------------------- */
.video{ position:relative; aspect-ratio:16/9; border-radius:var(--r-card); overflow:hidden;
  background:linear-gradient(160deg,var(--c-primary),var(--c-primary-dark)); }
.video--facade{ cursor:pointer; }
.video__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video--facade::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); transition:background var(--dur); }
.video--facade:hover::after{ background:rgba(0,0,0,.06); }
.video__play{ position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%;
  background:var(--c-accent); box-shadow:var(--sh-cta); display:grid; place-items:center; z-index:2;
  transition:transform var(--dur) var(--ease); }
.video--facade:hover .video__play{ transform:scale(1.07); }
.video__play::before{ content:""; border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--c-on-accent); margin-left:4px; }
.video > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }

/* ============================ Webinar (AWF/LWF) ===========================
   Countdown-Urgency + Live-Indikator. ------------------------------------ */
.countdown{ display:flex; gap:var(--sp-3); justify-content:center; }
.countdown__unit{ min-width:64px; background:var(--c-white); border:1px solid var(--c-border);
  border-radius:var(--r-card); padding:10px 8px; text-align:center; box-shadow:var(--sh-xs); }
.section--dark .countdown__unit{ background:rgba(255,255,255,.08); border-color:var(--c-on-dark-border); }
.countdown__num{ font:var(--fw-bold) var(--fs-h2)/1 var(--font-head); color:var(--c-heading); font-variant-numeric:tabular-nums; }
.section--dark .countdown__num{ color:#fff; }
.countdown__label{ font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.08em; color:var(--c-text-muted); margin-top:4px; }
.section--dark .countdown__label{ color:var(--c-on-dark-muted); }
.live-dot{ display:inline-flex; align-items:center; gap:8px; font-weight:var(--fw-medium); color:var(--c-error); }
.live-dot::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--c-error); animation:live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ============================ Offer / Checkliste ========================== */
.offer{ background:var(--c-white); border:2px solid var(--c-accent); border-radius:var(--r-card);
  padding:var(--sp-7); box-shadow:var(--sh-lift); }
.offer__price{ font:var(--fw-bold) var(--fs-display)/1 var(--font-head); color:var(--c-heading); }
.offer__price small{ font-size:var(--fs-lead); font-weight:var(--fw-medium); color:var(--c-text-muted); }
.checklist{ list-style:none; margin:0; padding:0; }
.checklist li{ position:relative; padding:8px 0 8px 32px; color:var(--c-text); }
.checklist li::before{ content:""; position:absolute; left:0; top:10px; width:20px; height:20px;
  background:var(--c-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23006039' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/13px no-repeat; border-radius:50%; }

/* ============================ FAQ / Accordion ============================= */
.faq{ border-bottom:1px solid var(--c-border); }
.faq__q{ display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%;
  padding:var(--sp-4) 0; background:none; border:0; cursor:pointer; text-align:left;
  font:var(--fw-medium) var(--fs-lead) var(--font-head); color:var(--c-heading); }
.faq__q::after{ content:"+"; font-size:1.4em; color:var(--c-primary); transition:transform var(--dur); }
.faq[open] .faq__q::after{ content:"−"; }
.faq__a{ padding:0 0 var(--sp-4); color:var(--c-text-muted); line-height:var(--lh-body); }

/* ============================ Header / Notices ============================ */
.site-header{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) 0; }
.site-header__logo img{ height:32px; width:auto; }
.notice{ border-radius:var(--r-input); padding:14px 16px; font-size:var(--fs-small); border:1px solid var(--c-border); background:var(--c-bg-surface); }
.notice--error{ background:var(--c-error-soft); border-color:var(--c-error); color:var(--c-error); }
.notice--success{ background:var(--c-success-soft); border-color:var(--c-success); color:var(--c-success); }

/* ============================ Footer (domain-weit, Single Source) =========
   Rechtsform-Name === Impressum ({{LEGAL_NAME}}), Jahr self-resolving
   per .yr-Script, Cookie-Einstellungen öffnen den Consent-Manager. Struktur =
   partials/footer.html. Siehe MOG-Footer-Legal-Standard. --------------------- */
.site-footer{ background:var(--c-on-dark-bg); color:var(--c-on-dark-text); font-size:var(--fs-small); line-height:1.5; }
.site-footer__in{ max-width:var(--container); margin-inline:auto; padding:28px var(--gutter);
  display:flex; flex-wrap:wrap; gap:12px 32px; align-items:center; justify-content:space-between; }
.site-footer__nav{ display:flex; flex-wrap:wrap; gap:12px 24px; }
.site-footer a{ color:var(--c-on-dark-text); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }