/* =====================================================================
   Variante VERTRIEB (allgemeines Webinar zur Neukundengewinnung).
   Wird NACH basis.css eingebunden. Weisse Seite, Lime-Markierung in der
   Headline, rechts ein einziges Objekt: der Countdown im Orbit.
   Vorbilder: go.novicon.net, go.adhook.io. Vorgaben: Frederik (ein Klick),
   Daniela Lutz (Hero-Aufbau, 25.09.2026).
   ===================================================================== */

/* ---------- Hero: Headline links, Countdown-Orbit rechts ---------- */
.hero { position: relative; overflow: hidden; padding-top: 64px; padding-bottom: 64px; }
.hero .container { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.8fr); gap: 48px; align-items: center; }
.hero .eyebrow { font-size: 18px; font-weight: 600; color: var(--color-blue); margin: 0 0 16px; }
.hero h1 { font-size: clamp(46px, 5.6vw, 74px); line-height: 1.04; }
.hero h1 .hl { display: inline; font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: normal; margin: 0; padding: 0 8px; background: var(--color-neon); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .sub { font-size: 25px; font-weight: 500; line-height: 1.25; margin-top: 24px; max-width: 30ch; }
.hero .body { font-size: 19px; line-height: 1.45; margin-top: 18px; max-width: 58ch; color: var(--color-text); }
/* Vier Siegel in gleich grossen Kaesten */
.badges { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin: 34px 0 0; padding: 0; }
.badges li { display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; }
.badges img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Das eine Objekt rechts: Countdown im Orbit (Vorbild: Skill-Kugel der Round-Table-Praesentation) */
.orbit { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin: 0 auto; }
.orbit-glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(0,107,255,0.14) 0%, rgba(0,107,255,0.05) 45%, rgba(0,107,255,0) 70%); }
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-ring { fill: none; }
.orbit-ring--outer { stroke: var(--color-border); stroke-width: 1; }
.orbit-ring--ticks { stroke: var(--color-neon); stroke-width: 6; stroke-dasharray: 2 18.6; stroke-linecap: butt; transform-origin: 230px 230px; animation: orbitspin 90s linear infinite; }
.orbit-ring--track { stroke: rgba(0,107,255,0.12); stroke-width: 3; }
.orbit-ring--arc { stroke: var(--color-orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1106; stroke-dashoffset: 1106; transform: rotate(-90deg); transform-origin: 230px 230px; transition: stroke-dashoffset 1.2s ease-out; }
.orbit-sat { transform-origin: 230px 230px; }
.orbit-sat--1 { fill: var(--color-neon); animation: orbitspin 28s linear infinite; }
.orbit-sat--2 { fill: var(--color-cyan); animation: orbitspin 44s linear infinite reverse; }
.orbit-sat--3 { fill: var(--color-blue); animation: orbitspin 60s linear infinite; }
@keyframes orbitspin { to { transform: rotate(360deg); } }
.orbit-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: floaty 7s ease-in-out infinite; }
.orbit-label { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-blue); }
.orbit-days { display: block; font-size: clamp(96px, 9vw, 132px); line-height: 0.95; font-weight: 200; font-variant-numeric: tabular-nums; color: var(--color-text); margin-top: 6px; }
.orbit-unit { font-size: 18px; font-weight: 600; color: var(--color-text); margin-top: 2px; }
.orbit-time { display: flex; gap: 22px; margin-top: 18px; }
.orbit-time div { text-align: center; }
.orbit-time b { display: block; font-size: 30px; line-height: 1; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--color-text); }
.orbit-time span { display: block; font-size: 10px; color: var(--color-text-soft); margin-top: 5px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; }
.countdown.is-over .orbit-label::after { content: " läuft"; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Trust-Bar mit Benefit-Icons ---------- */
.trust-bar { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 32px; margin: 0; padding: 0; }
.trust-bar li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.3; color: var(--color-text-soft); }
.trust-bar li img { width: 30px; height: 30px; flex-shrink: 0; }

/* ---------- Statement: ein Satz, sonst nichts ---------- */
.statement { background: var(--color-blue); color: var(--color-white); text-align: center; padding: 88px 0; position: relative; overflow: hidden; }
.statement::before { content: ""; position: absolute; right: -80px; bottom: -120px; width: 300px; height: 300px; background: var(--color-blue-dark); transform: rotate(45deg); }
.statement .container--text { position: relative; }
.statement .eyebrow { display: block; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-neon); margin-bottom: 18px; }
.statement p.big { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; font-weight: 300; color: var(--color-white); margin: 0; text-wrap: balance; }
.statement p.small { font-size: 18px; margin-top: 22px; color: rgba(255,255,255,0.85); }

/* ---------- Zitate als Karten, nur Text (Style Guide 7.4) ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.quote { background: var(--color-white); padding: 30px 32px 28px; font-size: 21px; font-weight: 300; line-height: 1.3; border-left: 4px solid var(--color-orange); }

/* ---------- Fahrplan ---------- */
.agenda { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-border); }
.agenda li { background: var(--color-white); padding: 28px 24px 30px; border-top: 4px solid var(--color-blue); }
.agenda .num { display: block; font-size: 44px; line-height: 1; font-weight: 300; color: var(--color-blue); margin-bottom: 16px; }
.agenda h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; line-height: 1.25; }
.agenda p { font-size: 15px; color: var(--color-text-soft); margin: 0; }

/* ---------- Hebel-Rechner (Wow-Element aus Schritt 3) ---------- */
.demo { background: var(--color-text); color: var(--color-white); }
.demo h2, .demo p { color: var(--color-white); }
.demo h2 > span { color: var(--color-neon); }
.demo .container { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.demo-note { font-size: 14px; color: var(--color-caption); margin-top: 18px; }
.calc { background: var(--color-white); color: var(--color-text); padding: 30px 32px; }
.calc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.calc-grid label { display: flex; flex-direction: column; gap: 6px; }
.calc-grid label > span { font-size: 14px; font-weight: 600; }
.calc-grid input { font-family: var(--font-base); font-size: 28px; font-weight: 300; padding: 10px 12px; border: 2px solid var(--color-border); border-radius: 0; width: 100%; color: var(--color-text); }
.calc-grid input:focus { outline: none; border-color: var(--color-blue); }
.calc-grid small { font-size: 13px; color: var(--color-text-soft); }
.calc-out { margin-top: 24px; border-top: 2px solid var(--color-text); padding-top: 20px; }
.calc-main > span { display: block; font-size: 14px; font-weight: 600; color: var(--color-blue); }
.calc-main > b { display: block; font-size: 60px; line-height: 1.05; font-weight: 300; margin-top: 6px; font-variant-numeric: tabular-nums; }
.calc-main > small { display: block; font-size: 14px; color: var(--color-text-soft); margin-top: 4px; }
.calc-scen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--color-border); margin-top: 20px; }
.calc-scen div { background: var(--color-bg-soft); padding: 12px 14px; }
.calc-scen b { display: block; font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.calc-scen span { display: block; font-size: 12px; color: var(--color-text-soft); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) { .orbit-core, .orbit-ring--ticks, .orbit-sat { animation: none !important; } }
@media (max-width: 1100px) {
  .agenda { grid-template-columns: repeat(2, 1fr); }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .hero .container, .demo .container { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .orbit { width: min(380px, 100%); }
  .badges li { width: 64px; height: 64px; }
}
@media (max-width: 720px) {
  .hero h1 { font-size: 36px; }
  .agenda, .calc-grid, .calc-scen, .trust-bar { grid-template-columns: 1fr; }
  .orbit-core .orbit-days { font-size: 84px; }
  .orbit-core .orbit-time b { font-size: 24px; }
  .calc-main > b { font-size: 42px; }
  .quote { font-size: 18px; }
  /* Alle vier Siegel in einer Zeile, auch auf 375 Pixel. */
  .badges { gap: 12px 16px; flex-wrap: nowrap; }
  .badges li { width: 58px; height: 58px; }
}

/* ===== Standortbestimmung, 5 Fragen. Ersetzt in dieser Fassung den Hebel-Rechner. ===== */
.check-list { display: grid; gap: 14px; }
.check-list label { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; cursor: pointer; }
.check-list input { margin-top: 2px; width: 20px; height: 20px; flex: 0 0 auto; accent-color: #006BFF; }
.check-list span { flex: 1 1 auto; }

/* Wortgruppe, die nicht umbrechen darf. Ohne diese Regel greift h1 > span aus der
   basis.css und macht daraus eine kleine blaue Eyebrow-Zeile. */
.hero h1 .nowrap { display: inline; font-size: inherit; font-weight: inherit; color: inherit;
  letter-spacing: normal; margin: 0; white-space: nowrap; }

/* Probe B, kleinere Hero-Headline, damit "Vom KI-Wildwuchs" in eine Zeile passt. */
.hero h1 { font-size: clamp(40px, 4.6vw, 64px); }

/* ===== Icons, 02.11.2026 =====
   Zwei Dinge waren falsch. Erstens standen in den Icon-Dateien zwei verschiedene
   viewBox-Werte, "0 0 550 344" (ganze Zeichenflaeche) und "175 72 200 200" (auf das
   Icon beschnitten). Dadurch erschien dieselbe 60-Pixel-Box einmal gut gefuellt und
   einmal nur zu einem Drittel. Die viewBox ist jetzt in allen acht Dateien im Ordner
   icons auf den Inhalt gesetzt, jedes Icon fuellt 94 Prozent seiner Box.
   Zweitens waren die Boxen zu klein. */
.trust-bar li img { width: 40px; height: 40px; }
.promise { grid-template-columns: 84px 1fr; }
.promise img { width: 84px; height: 84px; }

@media (max-width: 720px) {
  .trust-bar li img { width: 36px; height: 36px; }
  .promise { grid-template-columns: 64px 1fr; gap: 18px; }
  .promise img { width: 64px; height: 64px; }
}

/* ===== Doppelter Anmeldeknopf, 02.11.2026 =====
   Die Kopfzeile ist position:sticky und traegt ihren eigenen Knopf, auf jeder Breite.
   Der schwebende Knopf erschien zusaetzlich ab 25 Prozent Scrolltiefe, auf dem Desktop
   rechts unten, auf dem Handy als Leiste am unteren Rand. Es standen dadurch immer zwei
   gleiche Knoepfe gleichzeitig auf dem Schirm. Der schwebende faellt weg, der Knopf in
   der Kopfzeile bleibt und ist beim Scrollen durchgehend da. Das HTML und die
   Scroll-Logik bleiben unberuehrt, damit der Rueckweg eine Zeile ist. */
.sticky-cta { display: none; }

/* ===== Vorteile je Rolle, 02.11.2026 ===== */
.rollen .promise { align-items: start; }
/* basis.css setzt .promise-grid--3 .promise img auf 60 Pixel und ist spezifischer
   als die Regel oben. Deshalb hier eigens, damit alle Karten-Icons der Seite
   gleich gross sind. */
.rollen .promise img { width: 84px; height: 84px; }
/* min-height haelt die drei Listen auf gleicher Hoehe, auch wenn eine Ueberschrift
   zweizeilig wird. 2 Zeilen zu 21 Pixel bei Zeilenhoehe 1.25 sind 52 Pixel. */
.rollen h3 { font-size: 21px; line-height: 1.25; margin: 0 0 12px; min-height: 52px; }
.rollen ul { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.45;
  color: var(--color-text-soft); }
.rollen li { margin-bottom: 8px; }
.rollen li:last-child { margin-bottom: 0; }