/* CCFE Deep Dive Landingpage
   Look and feel wie ccfe.ch: Lato, Grossbuchstaben bei Titeln, eckige Formen,
   Dunkelblau #16192C, Rot #E74B43, Hellgrau #F5F5F5.
   Kein anderes Blau verwenden. */

:root {
  --red: #E74B43;          /* Markenrot: Akzente, Linien, grosse Flächen */
  --red-strong: #D63A33;   /* Buttons (weisse Schrift darauf, Kontrast 4.7) */
  --red-text: #C42F28;     /* rote Schrift auf Weiss und Hellgrau (Kontrast mindestens 5) */
  --navy: #16192C;
  --ink: #444444;
  --body: #555555;
  --white: #FFFFFF;
  --grey: #F5F5F5;
  --line: #E3E3E6;
  --on-dark: #D5D7E0;
  --container: 1120px;
  --gutter: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
  /* Hinter der Seite dunkel statt weiss: Header oben und Footer unten gehen nahtlos weiter,
     und das elastische Überscrollen zeigt keine weisse Fläche mehr. */
  background: var(--navy);
  overscroll-behavior-y: none;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overscroll-behavior-y: none;
  overflow-x: clip;
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide { max-width: 1360px; }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.site-header :focus-visible, .site-footer :focus-visible,
.hero :focus-visible, .section-dark :focus-visible, .cta-band :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--white);
  color: var(--navy);
  padding: 0.6rem 1rem;
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* Typografie */
h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.25rem; letter-spacing: 0.02em; }

.section-label {
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.section-label::before {
  content: '';
  flex: none;
  width: 2rem;
  height: 3px;
  background: var(--red);
}

.lead-line {
  margin-top: 1.25rem;
  font-size: clamp(1.5rem, 3.6vw, 2.375rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--navy);
  max-width: 28ch;
}
.section-intro { margin-top: 1.25rem; max-width: 62ch; font-size: 1.125rem; }
.prose { margin-top: 1.5rem; max-width: 66ch; }
.prose p + p { margin-top: 1rem; }
.prose strong, .story { color: var(--ink); }
.story { margin-top: 2rem; max-width: 62ch; font-size: 1.1875rem; font-weight: 700; line-height: 1.55; }

.question {
  margin: 3rem 0 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 4px solid var(--red);
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--navy);
  max-width: 40ch;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.9rem;
  border: 2px solid transparent;
  border-radius: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-solid { background: var(--red-strong); border-color: var(--red-strong); color: var(--white); }
.btn-solid:hover { background: var(--white); color: var(--red-text); }
.btn-light { border-color: var(--white); color: var(--white); background: transparent; }
.btn-light:hover { background: var(--white); color: var(--navy); }

.btn-row { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; }
.btn { white-space: nowrap; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--navy); color: var(--white); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}
.brand {
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--red);
  text-decoration: none;
}
.nav { display: none; gap: 2rem; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Menü Knopf (nur Handy, nur mit JavaScript) */
.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin-right: -0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.has-js .nav-toggle { display: inline-flex; }
.nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--white);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-toggle .bar { position: relative; }
.nav-toggle .bar::before, .nav-toggle .bar::after { content: ''; position: absolute; left: 0; }
.nav-toggle .bar::before { top: -7px; }
.nav-toggle .bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar::after { transform: translateY(-7px) rotate(-45deg); }

/* Aufgeklapptes Menü auf dem Handy */
.has-js .nav.is-open {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.5rem var(--gutter) 1.25rem;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 24px rgba(22, 25, 44, 0.35);
}
.has-js .nav.is-open a {
  padding: 0.95rem 0;
  font-size: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.has-js .nav.is-open a:last-child { border-bottom: 0; }
.nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--red); }
.btn-header { min-height: 2.5rem; padding: 0.4rem 0.9rem; font-size: 0.75rem; letter-spacing: 0.1em; }

/* Hero: dunkel wie auf ccfe.ch. Bild Assets/city-night.jpg ist optional, sonst greift der Verlauf. */
.hero {
  color: var(--white);
  padding: 4.5rem 0 5rem;
  background:
    linear-gradient(90deg, rgba(22, 25, 44, 0.78) 0%, rgba(22, 25, 44, 0.25) 75%),
    linear-gradient(180deg, rgba(22, 25, 44, 0.55) 0%, rgba(22, 25, 44, 0.9) 100%),
    url("Assets/city-night.jpg") center / cover no-repeat,
    linear-gradient(105deg, transparent 38%, rgba(231, 75, 67, 0.28) 47%, transparent 56%),
    var(--navy);
}
.eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before { content: ''; width: 2rem; height: 3px; background: var(--red); }
.hero h1 {
  margin-top: 1.5rem;
  color: var(--white);
  font-size: clamp(2rem, 6.4vw, 3.75rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.12;
  max-width: 24ch;
}
.hero-sub { margin-top: 1.75rem; font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 300; line-height: 1.45; max-width: 44ch; }
.hero-text { margin-top: 1.25rem; max-width: 58ch; color: var(--on-dark); }
.hero-claim { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 700; }
.hero-facts {
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}

/* Sektionen */
.section { padding: 4.5rem 0; }
.section-grey { background: var(--grey); }
.section-dark { background: var(--navy); color: var(--on-dark); }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .lead-line { color: var(--white); }
.section-dark .section-intro { color: var(--on-dark); }
.section-dark .prose strong { color: var(--white); }
.section-dark a { color: var(--white); text-underline-offset: 3px; }

/* Zweispaltige Kopfbereiche: Titel links, Text rechts, damit die Fläche gefüllt ist */
.two-col { display: grid; gap: 1.5rem; }
.two-col .lead-line { max-width: none; }
.two-col .body > :first-child { margin-top: 0; }
.two-col .body .section-intro, .two-col .body .prose { max-width: none; }
.two-col .body .story { max-width: none; }
.two-col .body .story:first-child { margin-top: 0; }
.two-col .body .question { margin-top: 2rem; max-width: none; }
.two-col .body .prose + .question { margin-top: 2.5rem; }
.two-col .body .section-intro + .story { margin-top: 1.5rem; }

/* Karten */
.duo { display: grid; gap: 1rem; margin-top: 2.5rem; }
.card { background: var(--white); border: 1px solid var(--line); padding: 2rem; }
.card-accent { border-top: 4px solid var(--red); }
.card h3 { font-size: 1.5rem; }
.card p { margin-top: 0.75rem; }
.card-kicker {
  margin: 0 0 0.5rem !important;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
}
.card-facts {
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
}

.paths { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 1.5rem; }
.paths li { border-left: 3px solid var(--red); padding-left: 1.25rem; }
.paths h3 { font-size: 1.125rem; }
.paths p { margin-top: 0.4rem; }

.benefit-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 2rem; }
.benefit-list li { border-top: 3px solid var(--red); padding-top: 1.25rem; }
.benefit-list h3 { font-size: 1.1875rem; }
.benefit-list p { margin-top: 0.6rem; }

/* Modulübersicht */
.module-grid { display: grid; gap: 1rem; margin-top: 2.5rem; }
.module-card { background: var(--white); border: 1px solid var(--line); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; }
.module-card h3 { font-size: 1.1875rem; padding-top: 1rem; position: relative; }
.module-card h3::before { content: ''; position: absolute; top: 0; left: 0; width: 2rem; height: 3px; background: var(--red); }
.module-card p { margin: 0.75rem 0 1.5rem; font-size: 0.9375rem; }
.more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;               /* Tippfläche mindestens 44 px */
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  color: var(--red-text);
}
.more:hover { color: var(--navy); text-decoration-color: var(--navy); }

/* Termin je Modul */
.module-date {
  margin-top: 0.5rem !important;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red-text);
  font-variant-numeric: tabular-nums;
}
.module-detail .module-date { margin-top: 0.75rem !important; font-size: 1rem; }

/* Moduldetails */
.module-split { display: grid; gap: 2.5rem; }
.module-side { background: var(--grey); padding: 2rem 1.5rem; align-self: start; }
.section-grey .module-side { background: var(--white); }
.module-side h3 {
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.module-side h3:not(:first-child) { margin-top: 2rem; }

.learn { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.9rem; font-size: 1rem; }
.learn li { padding-left: 1.25rem; position: relative; }
.learn li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 7px; height: 7px; background: var(--red); }
.learn strong { color: var(--ink); }

.agenda { list-style: none; padding: 0; margin: 1rem 0 0; font-size: 1rem; }
.agenda li { display: grid; grid-template-columns: 4rem 1fr; gap: 0.5rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.agenda li:last-child { border-bottom: 0; }
.agenda time { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.practice { margin-top: 2rem; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 4px solid var(--red); max-width: 62ch; }
.practice h3 { font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; }
.practice p { margin-top: 0.5rem; }

.module-cta { margin-top: 2rem; }

/* Der Tag: vier Bausteine */
.pillars { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.5rem; counter-reset: pillar; }
.pillars li { counter-increment: pillar; background: var(--white); padding: 1.5rem; border-top: 3px solid var(--red); }
.pillars h3::before {
  content: '0' counter(pillar);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  color: var(--red-text);
}
.pillars p { margin-top: 0.5rem; }

/* Rollen */
.roles { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.75rem; }
.roles li { border: 1px solid var(--line); border-left: 3px solid var(--red); padding: 0.85rem 1.1rem; font-weight: 700; color: var(--ink); background: var(--white); }

/* Schritte (Rezertifizierung, Anmeldung) */
.steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; }
.steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; color: var(--on-dark); }
.steps strong { color: var(--white); font-weight: 700; }
.step-num {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--red);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--white);
}

/* Preise */
.price-grid { display: grid; gap: 1rem; margin-top: 2.5rem; }
.price-card h3 { font-size: 1.1875rem; min-height: 2.8em; }
.price { margin-top: 1rem !important; font-size: 2.75rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.price-unit { display: block; margin-top: 0.25rem; font-size: 1rem; font-weight: 400; color: var(--body); }
.price-list { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--line); }
.price-list li { padding: 0.6rem 0 0.6rem 1.5rem; border-bottom: 1px solid var(--line); position: relative; }
.price-list li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; background: var(--red); }

.price-card { position: relative; }
.price-note { margin-top: 0.4rem !important; font-size: 0.9375rem; color: var(--body); }
/* Roter Punkt mit Ersparnis, ragt über die Karte hinaus (wie der Info-Event Kreis auf ccfe.ch) */
.price-badge {
  position: absolute;
  top: -1.5rem;
  right: 1.25rem;
  width: 6.5rem;
  height: 6.5rem;
  margin: 0 !important;
  border-radius: 50%;
  background: var(--red-strong);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  box-shadow: 0 8px 20px rgba(22, 25, 44, 0.22);
  transform: rotate(8deg);
}
.price-badge + h3 { padding-right: 5.5rem; }
.price-badge span { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; }
.price-badge strong { margin-top: 0.15rem; font-size: 1.25rem; font-weight: 700; }

/* Abschluss Call to Action: rotes Band wie auf ccfe.ch */
.cta-band { background: var(--red); color: var(--white); padding: 4.5rem 0; }
.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.625rem, 4.2vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  max-width: 24ch;
}
.cta-sub, .cta-facts, .cta-help { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 700; line-height: 1.45; }
.cta-facts { letter-spacing: 0.1em; text-transform: uppercase; }
.cta-band a:not(.btn) { color: var(--white); text-underline-offset: 3px; }
.cta-band .btn-light { background: var(--white); color: var(--navy); }
.cta-band .btn-light:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* Anmeldung */
.signup-grid { display: grid; gap: 2.5rem; align-items: center; }
.signup-contact { margin-top: 2rem; color: var(--on-dark); }
.signup-contact a { font-weight: 700; }

.typeform-frame {
  width: 100%;
  overflow: hidden;
  background: #1F2227;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px rgba(0, 0, 0, 0.28);
}
.typeform-embed { width: 100%; height: 30rem; }
.typeform-frame noscript { display: block; padding: 2rem 1.25rem; text-align: center; color: var(--on-dark); }
.placeholder-title { font-size: 1.375rem; font-weight: 700; color: var(--white); }

/* Animierter Tagesablauf (Klasse is-live setzt script.js) */
.timeline {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  position: relative;
}
.timeline li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 0 1rem 1.5rem;
  border-left: 3px solid var(--line);
  position: relative;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 1.45rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--grey);
  box-sizing: content-box;
}
.timeline time { font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.timeline span { font-size: 1.0625rem; }

.dt-eyebrow, .dt-module, .dt-stage, .dt-dot { display: none; }
.daytimeline.is-live .dt-eyebrow {
  display: block;
  margin-top: 3rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-text);
}
.daytimeline.is-live .dt-module {
  display: block;
  margin-top: 0.4rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 300;
  color: var(--navy);
  min-height: 2.4em;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.daytimeline.is-live .dt-module.is-out { opacity: 0; transform: translateY(6px); }
.daytimeline.is-live .timeline { margin-top: 1.25rem; }
.daytimeline.is-live .timeline li { transition: opacity 0.3s ease; opacity: 0.5; }
.daytimeline.is-live .timeline li.is-active { opacity: 1; }

.daytimeline.is-live .dt-dot {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(231, 75, 67, 0.22);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 2;
}
.daytimeline.is-live .dt-dot.no-anim { transition: none; }

.daytimeline.is-live .dt-stage { display: block; position: relative; min-height: 6.5rem; margin-top: 1.25rem; }
.dt-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--white);
  border-top: 4px solid var(--red);
  padding: 1rem 1.25rem 1.1rem;
  box-shadow: 0 8px 24px rgba(22, 25, 44, 0.1);
  animation: dt-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.dt-card-time { font-size: 0.875rem; font-weight: 700; color: var(--body); font-variant-numeric: tabular-nums; }
.dt-card-text { margin-top: 0.15rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
@keyframes dt-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-card { animation: none; }
  .daytimeline.is-live .dt-dot, .daytimeline.is-live .dt-module, .daytimeline.is-live .timeline li { transition: none; }
}

/* Footer: bewusst klein und ruhig */
.site-footer { background: var(--navy); color: var(--on-dark); padding: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.875rem; line-height: 1.6; }
.footer-inner { display: grid; gap: 0.75rem; align-items: center; }
.site-footer .brand { font-size: 1.5rem; }
.site-footer address { font-style: normal; display: flex; flex-wrap: wrap; gap: 0.1rem 1.25rem; }
.site-footer address strong { color: var(--white); font-weight: 700; }
.site-footer a:not(.brand) { color: var(--on-dark); text-underline-offset: 3px; }
.site-footer a:not(.brand):hover { color: var(--white); }
.back { font-weight: 700; }

/* Link im Basic Block */
.card-link { margin-top: 0.75rem; }

/* Warum jetzt: Aussagesatz auf einer Zeile */
@media (min-width: 900px) {
  #jetzt .two-col { grid-template-columns: 7fr 5fr; }
  #jetzt .lead-line { white-space: nowrap; font-size: clamp(1.5rem, 2.6vw, 2rem); }
}

/* Tablet */
@media (min-width: 720px) {
  :root { --gutter: 2rem; }
  .nav, .has-js .nav { display: flex; }
  .nav-toggle, .has-js .nav-toggle { display: none; }
  .btn-header { padding: 0.4rem 1.1rem; font-size: 0.8125rem; letter-spacing: 0.14em; }
  .btn-row { flex-direction: row; flex-wrap: wrap; }
  .hero { padding: 7rem 0 8rem; }
  .section { padding: 6rem 0; }
  .cta-band { padding: 6rem 0; }
  .duo { grid-template-columns: 1fr 1fr; }
  .paths { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .paths.paths-two { grid-template-columns: repeat(2, 1fr); }
  .benefit-list { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .module-card:last-child { grid-column: 1 / -1; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .roles { grid-template-columns: repeat(3, 1fr); }
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .price-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .module-side { padding: 2.25rem 2rem; }
  .footer-inner { grid-template-columns: auto 1fr auto; gap: 2rem; }

  .timeline { grid-template-columns: repeat(6, 1fr); border-top: 3px solid var(--line); }
  .timeline li { grid-template-columns: 1fr; gap: 0.25rem; padding: 1.5rem 0.75rem 0 0; border-left: 0; }
  .timeline li::before { left: 0; top: -9px; }
  .daytimeline.is-live .dt-stage { min-height: 6rem; }
  .dt-card { width: 17rem; }
  .dt-card::before {
    content: '';
    position: absolute;
    top: -11px;
    left: var(--caret, 2rem);
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    background: var(--white);
    border-top: 4px solid var(--red);
    border-left: 4px solid var(--red);
    transform: translateX(-50%) rotate(45deg);
  }
}

/* Laptop */
@media (min-width: 900px) {
  .module-split { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: start; }
  .signup-grid { grid-template-columns: 5fr 7fr; gap: 4rem; }
  .typeform-embed { height: 32rem; }
  .steps-grid { grid-template-columns: repeat(4, 1fr); }
  .pillars { grid-template-columns: repeat(4, 1fr); }
}

/* Desktop: alle fünf Module nebeneinander */
@media (min-width: 1100px) {
  .benefit-list { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .module-grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
  .module-card { padding: 1.5rem 1.25rem; }
  .module-card:last-child { grid-column: auto; }
  .module-card h3 { font-size: 1.0625rem; }
}

/* Hero und Abschlussband zweispaltig */
.hero-grid, .cta-inner { display: grid; gap: 1.5rem; }
.hero-body > :first-child { margin-top: 0; }
.cta-body > :first-child { margin-top: 0; }
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: 1.5rem 4rem; align-items: start; }
  .two-col .body { padding-top: 0.35rem; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .hero h1 { max-width: none; }
  .hero-body { padding-top: 2.6rem; }
  .cta-inner { grid-template-columns: 6fr 5fr; gap: 4rem; align-items: center; }
  .cta-band h2 { max-width: none; }
}

/* Logo Banner: durchlaufende Firmenlogos wie auf ccfe.ch.
   Zwei identische Listen hintereinander, jede läuft um ihre eigene Breite nach links.
   Der gleiche Abstand (gap) steht auch am Ende jeder Liste, damit die Schleife lückenlos ist. */
.logo-band { background: var(--white); border-bottom: 1px solid var(--line); padding: 0.5rem 0; }
.logo-viewport {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-track {
  --logo-gap: 3rem;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding: 0 var(--logo-gap) 0 0;
  margin: 0;
  list-style: none;
  min-width: 100%;
  will-change: transform;
  animation: logo-scroll 22s linear infinite;
}
.logo-track li { flex: none; }
.logo-track img { width: 4.5rem; height: 4.5rem; object-fit: contain; }
.logo-viewport:hover .logo-track { animation-play-state: paused; }
@keyframes logo-scroll { to { transform: translateX(-100%); } }
@media (min-width: 720px) {
  .logo-band { padding: 0.75rem 0; }
  .logo-track { --logo-gap: 4.5rem; }
  .logo-track img { width: 5.5rem; height: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none; }
  .logo-track[aria-hidden="true"] { display: none; }
}

/* Grössere Tippflächen für kleine Links (Handy) */
.site-footer .brand { display: inline-block; padding: 0.4rem 0; }
.site-footer address a, .site-footer .back a { display: inline-block; padding: 0.45rem 0; }
.site-footer address { gap: 0 1.25rem; }