/* ═══════════════════════════════════════════════════════════════
   Ferienpass — Vermarktungsseite
   Richtung: „Das Produkt zeigt sich selbst — entlang der Saison“.
   Weißer Grund, hellgraue Abschnittsflächen (die Fläche der Anwendung),
   Text in Tinte, die drei Portalfarben nur als Markierung. Echte
   Screenshots in dünner Fensterfassung mit Unterschrift. Keine Glows,
   keine Schwebe-Karten, keine Zähl-Zahlen.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Portalfarben — identisch mit lib/theme.ts der Anwendung */
  --indigo: #4263eb;
  --indigo-deep: #364fc7;
  --indigo-soft: #eef2ff;
  --teal: #0ca678;
  --teal-deep: #087f5b;
  --teal-soft: #e6fcf5;
  --coral: #e46a35;
  --coral-deep: #b14d1e;
  --coral-soft: #fff4f0;

  /* Fläche und Tinte — der Anwendung entnommen */
  --paper: #ffffff;
  --tint: #f5f6f8;
  --tint-deep: #eceef2;
  --line: #e5e7eb;
  --line-strong: #d3d7de;
  --ink: #1a1b25;
  --ink-2: #3d4150;
  --muted: #5f6673;
  --muted-2: #7b8290;

  --shadow-frame:
    0 1px 2px rgba(26, 27, 37, 0.06),
    0 8px 24px -8px rgba(26, 27, 37, 0.14);
  --shadow-nav: 0 1px 0 var(--line), 0 6px 18px -8px rgba(26, 27, 37, 0.12);

  --radius: 10px;
  --radius-lg: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Aktionsfarbe = Tinte. Die Portalfarben bleiben Markierung der drei Portale
     und leben in den Screenshots; keine Portalfarbe auf Buttons oder Marken. */
  --accent: var(--ink);
  --accent-hover: #0c0d14;
  --accent-soft: #eceef2;
  --accent-ring: rgba(26, 27, 37, 0.35);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
  line-height: 1.6;
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }

/* Browser-Oberflächen aus der Palette */
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

.container {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}
@media (max-width: 640px) {
  .container { width: min(1200px, 100% - 32px); }
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}

/* ════════════════ BUTTONS ════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }
.btn-md { padding: 11px 20px; font-size: 0.95rem; }
.btn-lg { padding: 13px 24px; font-size: 1rem; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(26, 27, 37, 0.2), 0 6px 14px -6px rgba(26, 27, 37, 0.45);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: var(--ink-2); background: var(--tint); }

/* ════════════════ NAVIGATION ════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.nav.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-nav); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-mark {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.18s, color 0.18s;
}
.nav-links a:hover { background: var(--tint); color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
.nav-burger:hover { background: var(--tint); }

/* ════════════════ EINSTIEG ════════════════ */
.hero {
  padding: 44px 0 72px;
  border-bottom: 1px solid var(--line);
}
/* Text oben in voller Inhaltsbreite, darunter der Film — so ist die Anwendung im Video erkennbar */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.hero-title {
  font-weight: 800;
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--ink);
}
.hero-sub {
  margin-top: 18px;
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 500;
}
.hero-facts li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Die eine Bewegung der Seite: der Screenshot setzt sich beim Laden. */
@keyframes settle {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.shot-hero { animation: settle 0.7s var(--ease) 0.1s both; }
@media (prefers-reduced-motion: reduce) {
  .shot-hero { animation: none; }
}

/* ════════════════ SCREENSHOT-FASSUNG ════════════════ */
.shot { margin: 0; min-width: 0; }
.shot-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
}
.shot-frame img {
  width: 100%;
  height: auto;
}
.shot figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.shot figcaption .shot-note { font-weight: 400; }

/* ════════════════ ABSCHNITTE ════════════════ */
.section { padding: 88px 0; }
.section-tint {
  background: var(--tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-tint + .section-tint { border-top: none; }

.section-head {
  max-width: 720px;
  margin-bottom: 44px;
}
.section-head-tight { margin-bottom: 0; }
.section-title {
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.section-desc {
  margin-top: 14px;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}
.section-desc + .btn { margin-top: 24px; }

/* ════════════════ HEUTE / MIT FERIENPASS ════════════════ */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-frame);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
  min-width: 640px;
}
.compare-table th,
.compare-table td {
  text-align: left;
  vertical-align: top;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.compare-table thead th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--tint);
  padding-top: 12px;
  padding-bottom: 12px;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 22%;
}
.compare-table td:nth-child(2) { color: var(--muted); width: 30%; }
.compare-table td:nth-child(3) { color: var(--ink); }

/* Schmal: Tabelle stapeln — je Aufgabe ein Block „Heute → Mit Ferienpass“,
   damit die Produktspalte nie außerhalb des Sichtfensters liegt. */
@media (max-width: 640px) {
  .compare-table { min-width: 0; display: block; }
  .compare-table thead { display: none; }
  .compare-table tbody, .compare-table tr { display: block; }
  .compare-table tr { padding: 14px 18px 16px; border-bottom: 1px solid var(--line); }
  .compare-table tr:last-child { border-bottom: none; }
  .compare-table tbody th,
  .compare-table td,
  .compare-table td:nth-child(2),
  .compare-table td:nth-child(3) { display: block; width: auto; padding: 0; border: none; }
  .compare-table tbody th { margin-bottom: 10px; font-size: 1.02rem; }
  .compare-table td { margin-top: 8px; }
  /* Zellenlabel als eigene Zeile über dem Wert — volle Breite für den Text */
  .compare-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
  }
}

/* ════════════════ SAISONVERLAUF ════════════════ */
.stage-nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  margin-bottom: 72px;
}
.stage-nav li + li { border-left: 1px solid var(--line); }
.stage-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  min-height: 56px;
}
.stage-nav a:hover { background: var(--tint); color: var(--ink); }
.stage-nav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.stages { display: flex; flex-direction: column; gap: 88px; }
.stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.stage:nth-child(even) .stage-copy { order: 2; }
.stage:nth-child(even) .shot { order: 1; }
.stage-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
}
/* Etappen-Nummer als Teil der Überschrift — dieselbe Kreisziffer wie in der Ablaufleiste */
.stage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.62em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.stage-text {
  margin-top: 14px;
  color: var(--ink-2);
  line-height: 1.62;
  max-width: 48ch;
}
.stage-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.stage-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
}
.stage-list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.62em;
  width: 8px; height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* ════════════════ DREI PORTALE ════════════════ */
.portals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.portal {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Portalname ist die Überschrift, der Farbpunkt Teil davon; die Rolle steht als Unterzeile */
.portal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 700;
}
.portal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.portal-kommune .portal-dot { background: var(--indigo); }
.portal-anbieter .portal-dot { background: var(--teal); }
.portal-familien .portal-dot { background: var(--coral); }
.portal-role { margin-top: 6px; color: var(--ink-2); font-size: 1rem; }
.portal-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.94rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.portal-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 2px;
  border-radius: 1px;
}
.portal-kommune .portal-list li::before { background: var(--indigo); }
.portal-anbieter .portal-list li::before { background: var(--teal); }
.portal-familien .portal-list li::before { background: var(--coral); }

/* ════════════════ WEITERE FUNKTIONEN ════════════════ */
.feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
  border-top: 1px solid var(--line);
}
.feature {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.feature dt { font-weight: 700; font-size: 1rem; color: var(--ink); }
.feature dd { margin-top: 6px; color: var(--ink-2); font-size: 0.94rem; line-height: 1.55; }

/* ════════════════ BETRIEB & DATENSCHUTZ ════════════════ */
.operate {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}
.operate-text { display: flex; flex-direction: column; gap: 28px; }
.host-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.host p { color: var(--ink-2); line-height: 1.6; font-size: 0.97rem; }
.plain-list { display: flex; flex-direction: column; gap: 8px; }
.plain-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.5;
}
.plain-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* ════════════════ FRAGEN ════════════════ */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: start;
}
.faq-aside { position: sticky; top: 100px; }
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.22s var(--ease);
  flex-shrink: 0;
  margin-top: -5px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.faq-item summary:hover { color: var(--muted); }
.faq-item summary:focus-visible { outline-offset: -2px; }
.faq-answer { padding: 0 0 20px; }
.faq-answer p { color: var(--ink-2); line-height: 1.65; font-size: 0.97rem; max-width: 62ch; }

/* ════════════════ DEMO ════════════════ */
.demo { padding: 96px 0; }
.demo-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}
.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.contact {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--tint);
  padding: 6px 24px;
}
.contact > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.contact > div:last-child { border-bottom: none; }
.contact dt { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.contact dd { margin-top: 4px; font-size: 0.98rem; color: var(--ink); font-weight: 500; }
.contact a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.contact a:hover { text-decoration-color: var(--ink); }

/* ════════════════ FUSSZEILE ════════════════ */
.footer {
  border-top: 1px solid var(--line);
  background: var(--tint);
  color: var(--muted);
  padding: 56px 0 32px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-tag {
  margin-top: 14px;
  line-height: 1.6;
  font-size: 0.92rem;
  max-width: 300px;
}
.footer-h {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}
.footer-cols { display: contents; }
.footer-col { display: flex; flex-direction: column; }
.footer-col a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 4px 0;
  width: fit-content;
}
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 1080px) {
  .stage-nav { grid-template-columns: repeat(3, 1fr); }
  .stage-nav li:nth-child(4) { border-left: none; }
  .stage-nav li:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .nav-links {
    position: fixed;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 16px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-nav);
    margin: 0;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 1rem; padding: 12px 12px; }
  .nav-burger { display: inline-flex; }

  .hero { padding: 40px 0 56px; }
  /* Schmal: Überschrift, Text, dann sofort das Produkt — erst danach Button und Fakten */
  .hero-inner { gap: 0; }
  .hero-copy { display: contents; }
  .hero-title { order: 1; }
  .hero-sub { order: 2; }
  .shot-hero { order: 3; margin-top: 28px; }
  .hero-cta { order: 4; }
  .hero-facts { order: 5; }

  .stage,
  .stage:nth-child(even) { grid-template-columns: 1fr; gap: 28px; }
  .stage:nth-child(even) .stage-copy { order: 1; }
  .stage:nth-child(even) .shot { order: 2; }
  .stages { gap: 64px; }

  .portals { grid-template-columns: 1fr; gap: 40px; }
  .operate { grid-template-columns: 1fr; gap: 36px; }
  .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq-aside { position: static; }
  .demo-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .demo { padding: 72px 0; }
  .section-head { margin-bottom: 32px; }
  .stage-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 48px; }
  .stage-nav li + li { border-left: none; }
  .stage-nav li:nth-child(even) { border-left: 1px solid var(--line); }
  .stage-nav li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .feature-list { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-cta .btn, .demo-actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .stage-nav { grid-template-columns: 1fr; }
  .stage-nav li:nth-child(even) { border-left: none; }
  .stage-nav li + li { border-top: 1px solid var(--line); }
}

@media (max-width: 380px) {
  .nav-inner { gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn { font-size: 0.75rem; padding-inline: 8px; }
  .nav-burger { width: 36px; height: 36px; flex-shrink: 0; }
}

/* ════════════════ HANDSCHRIFT (31.08.2026) ════════════════
   Das Produkt in Bewegung (Hero-Video), die Perforation des Logos als
   Strukturmotiv, die Etappenleiste als Fahrschein mit Scroll-Spy, die
   Sonne geht beim Laden im Logo auf. Coral (Logo) ist die Handlungsfarbe. */
:root {
  --cta: #e46a35;
  --cta-hover: #cb5c2b;
  --sun: #f5b73c;
}

/* Handlung in Coral — die einzige warme Fläche neben dem Logo */
.btn-primary {
  background: var(--cta);
  box-shadow: 0 1px 2px rgba(228, 106, 53, 0.25), 0 6px 14px -6px rgba(228, 106, 53, 0.55);
}
.btn-primary:hover { background: var(--cta-hover); }
.btn-primary:focus-visible { outline-color: var(--cta-hover); }

/* ─── Hero-Video: Produktfilm auf indigoblauer Bühne ─── */
.hero-media .shot-frame { position: relative; background: #172451; }
.hero-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.video-toggle {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(14, 20, 32, 0.72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
.video-full { right: 60px; }
.video-sound { right: 108px; }
/* Lautstärkeregler: schmale Pille links vom Ton-Knopf, sichtbar bei Ton an oder beim Zeigen */
.video-volume {
  position: absolute; right: 156px; bottom: 22px; height: 40px; padding: 0 14px;
  display: none; align-items: center; border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(14, 20, 32, 0.72); backdrop-filter: blur(6px);
}
.video-volume.is-on, .video-sound:hover ~ .video-volume, .video-volume:hover, .video-volume:focus-within { display: inline-flex; }
.video-volume input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 96px; height: 4px; margin: 0; border-radius: 2px; cursor: pointer;
  background: linear-gradient(to right, var(--cta) 0 var(--pct, 80%), rgba(255, 255, 255, 0.35) var(--pct, 80%) 100%);
}
.video-volume input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.video-volume input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.video-volume input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.video-volume input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--cta); }
.video-volume input[type="range"]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.video-sound .ico-sound { display: none; }
.video-sound.is-on .ico-muted { display: none; }
.video-sound.is-on .ico-sound { display: block; }
.video-toggle, .video-full { bottom: 22px; }
/* Zeitleiste am unteren Rand des Rahmens: schmale Spur, beim Zeigen etwas hoeher; Kapitelmarken der Etappen */
.video-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; cursor: pointer; touch-action: none; }
.video-bar-track { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(26, 27, 37, 0.14); transition: height 0.15s var(--ease); }
.video-bar:hover .video-bar-track, .video-bar:focus-visible .video-bar-track { height: 6px; }
.video-bar-fill { height: 100%; width: 0; background: var(--cta); }
.video-bar:focus-visible { outline: none; }
.video-bar:focus-visible .video-bar-track { box-shadow: 0 0 0 2px var(--accent-ring); }
.video-chapter { position: absolute; bottom: 0; width: 10px; height: 14px; margin-left: -5px; padding: 0; border: 0; background: none; cursor: pointer; }
.video-chapter::after { content: ''; position: absolute; left: 4px; bottom: 0; width: 2px; height: 8px; background: rgba(26, 27, 37, 0.55); border-radius: 1px; }
.video-chapter:hover::after, .video-chapter:focus-visible::after { background: var(--ink); height: 10px; }
.video-chapter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
.hero-media .shot-frame:fullscreen .video-bar { bottom: 8px; left: 16px; right: 16px; }
.hero-media .shot-frame:fullscreen .video-bar-track { background: rgba(255, 255, 255, 0.28); }
.hero-media .shot-frame:fullscreen .video-toggle, .hero-media .shot-frame:fullscreen .video-full { bottom: 34px; }
.video-toggle:hover { background: rgba(14, 20, 32, 0.9); }
/* Vollbild: der ganze Rahmen (Video + Knöpfe) geht in den Vollbildmodus, das Bild bleibt im Seitenverhältnis */
.hero-media .shot-frame:fullscreen { background: #000; border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; }
.hero-media .shot-frame:fullscreen .hero-video { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; }
.hero-media .shot-frame:fullscreen .video-toggle,
.hero-media .shot-frame:fullscreen .video-full { right: 24px; bottom: 24px; width: 48px; height: 48px; }
.hero-media .shot-frame:fullscreen .video-full { right: 84px; }
.hero-media .shot-frame:fullscreen .video-sound { right: 144px; bottom: 34px; width: 48px; height: 48px; }
.hero-media .shot-frame:fullscreen .video-volume { right: 204px; bottom: 34px; height: 48px; }
.video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.video-toggle .ico-pause { display: none; }
.video-toggle.is-playing .ico-play { display: none; }
.video-toggle.is-playing .ico-pause { display: block; }
/* Umschalter unter dem Hero-Video: schlichter Textlink in Tinte */
.video-switch { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.video-switch:hover { color: var(--accent-hover); }
.video-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ─── Abbildungen vergrößern: Klickfläche in der Fensterfassung und die Lightbox ─── */
.shot-zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
.shot-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.shot-zoom img { display: block; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(26, 27, 37, 0.86); }
.lightbox-figure { position: relative; margin: 0; max-width: min(1600px, 100%); display: grid; gap: 12px; justify-items: center; }
.lightbox-frame { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); line-height: 0; }
.lightbox-img { display: block; max-width: calc(100vw - 48px); max-height: calc(100vh - 110px); width: auto; height: auto; }
.lightbox-caption { color: #fff; font-size: 0.95rem; font-weight: 500; text-align: center; line-height: 1.4; }
.lightbox-btn {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(14, 20, 32, 0.72); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.18s var(--ease);
}
.lightbox-btn:hover { background: rgba(14, 20, 32, 0.95); }
.lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
body.lightbox-open { overflow: hidden; }
@media (max-width: 640px) {
  .lightbox { padding: 12px; }
  .lightbox-img { max-width: calc(100vw - 24px); max-height: calc(100vh - 150px); }
  .lightbox-prev { left: 8px; top: auto; bottom: 12px; transform: none; }
  .lightbox-next { right: 8px; top: auto; bottom: 12px; transform: none; }
  .lightbox-close { top: 8px; right: 8px; }
}

/* ─── Perforation: Trenner im Ticket-Motiv des Logos ─── */
.section-tint, .demo { position: relative; }
.section-tint { border-top: none; }
.perf {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  pointer-events: none;
}
.perf::before {
  content: '';
  position: absolute;
  left: 28px; right: 28px; top: -1px;
  border-top: 2px dashed var(--line-strong);
}
.perf::after {
  content: '';
  position: absolute;
  top: -11px; left: 8px; right: 8px;
  height: 22px;
  background:
    radial-gradient(circle at 0 50%, var(--paper) 10px, transparent 11px) left / 22px 22px no-repeat,
    radial-gradient(circle at 100% 50%, var(--paper) 10px, transparent 11px) right / 22px 22px no-repeat;
}
.section-tint + .section-tint .perf { display: none; }

/* ─── Etappenleiste: klebt unter der Kopfzeile, zeigt die aktuelle Etappe ─── */
.stage-nav {
  position: sticky;
  top: 76px;
  z-index: 20;
  box-shadow: var(--shadow-frame);
}
.stage-nav a { position: relative; transition: background 0.18s, color 0.18s; }
.stage-nav a::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--cta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.stage-nav a.is-active { color: var(--ink); background: var(--paper); }
.stage-nav a.is-active::after { transform: scaleX(1); }
.stage-nav a.is-active .stage-nav-num { background: var(--cta); color: #fff; }
.stage-nav-num { transition: background 0.18s, color 0.18s; }

/* ─── Einblendungen: Etappen, Portale, Tabelle — einmal, ruhig ─── */
[data-reveal].is-armed { opacity: 0; transform: translateY(22px); }
[data-reveal].is-armed.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.stage.is-armed .shot { transition-delay: 0.08s; }

/* ─── Die Sonne geht im Logo auf (einmal beim Laden) ─── */
@keyframes sunrise {
  from { transform: translateY(9px) scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes raysIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: none; }
}
.brand-mark .mark-sun { transform-box: fill-box; transform-origin: center; animation: sunrise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.brand-mark .mark-rays { transform-box: fill-box; transform-origin: center; animation: raysIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both; }

@media (max-width: 960px) {
  .stage-nav { top: 68px; }
}
@media (max-width: 640px) {
  .stage-nav { position: static; box-shadow: none; }
  .perf::before { left: 22px; right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-armed { opacity: 1; transform: none; transition: none; }
  .brand-mark .mark-sun, .brand-mark .mark-rays { animation: none; }
  .stage-nav a::after { transition: none; }
}