/* =========================================================
   Jeff Stoll — Cinematic One-Pager
   Wird nur von index.html geladen, ergaenzt styles.css.
   Scroll-Szenen: Weg-Linie, Live-Chat, Kalender.
   ========================================================= */

/* ---------- Vertiefte Tokens nur fuer den One-Pager ---------- */
:root {
  --bg: #05070c;
  --bg-alt: #080c13;
  --surface: #0d131d;
  --surface-2: #131b28;
  --glass: rgba(255, 255, 255, 0.035);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --accent-2: #4a72d8;
  --aik-violet: #7c6ef0;
  --aik-violet-weak: rgba(124, 110, 240, 0.16);
  --aik-magenta: #c1489f;
  --aik-magenta-weak: rgba(193, 72, 159, 0.14);

  --hv-blue: var(--accent);
  --hv-blue-weak: rgba(95, 146, 232, 0.14);
  --hv-red: #cf483e;
  --hv-red-weak: rgba(207, 72, 62, 0.15);
  --hv-green: #3fae87;
  --hv-green-weak: rgba(63, 174, 135, 0.15);
  --hv-gold: #d9ab52;
  --hv-gold-weak: rgba(217, 171, 82, 0.15);
}

body {
  background:
    radial-gradient(90% 60% at 70% -10%, rgba(47, 95, 208, 0.16), transparent 60%),
    radial-gradient(70% 55% at 12% 65%, rgba(47, 95, 208, 0.1), transparent 68%),
    var(--bg);
  background-attachment: fixed, fixed, scroll;
}

/* ---------- Ambient: Leuchtkugeln ---------- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  will-change: transform;
}

.orb-1 {
  width: 520px;
  height: 520px;
  top: -160px;
  left: -120px;
  background: radial-gradient(circle, rgba(47, 95, 208, 0.32), transparent 65%);
  animation: drift1 16s ease-in-out infinite alternate;
}

.orb-2 {
  width: 420px;
  height: 420px;
  top: 8%;
  right: -140px;
  background: radial-gradient(circle, rgba(95, 146, 232, 0.20), transparent 65%);
  animation: drift2 20s ease-in-out infinite alternate;
}

.orb-3 {
  width: 380px;
  height: 380px;
  bottom: -180px;
  left: 30%;
  background: radial-gradient(circle, rgba(40, 70, 150, 0.16), transparent 65%);
  animation: drift1 24s ease-in-out infinite alternate-reverse;
}

@keyframes drift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 40px, 0) scale(1.08); }
}

@keyframes drift2 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-50px, 60px, 0) scale(1.06); }
}

main {
  position: relative;
  z-index: 1;
}

/* ---------- Glas-Grundstil ---------- */
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px -30px rgba(0, 0, 0, 0.85),
    0 0 60px -26px rgba(95, 146, 232, 0.4);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* ---------- Szenen-Geruest ---------- */
.scene {
  position: relative;
}

.sc-220 { height: 220vh; }
.sc-300 { height: 300vh; }
.sc-360 { height: 360vh; }
.sc-430 { height: 430vh; }
/* Weg-Abschnitt: bewusst sehr lang, damit sich die Linie nur langsam
   füllt und man dafür deutlich mehr scrollen muss. */
.sc-weg { height: 360vh; }

.scene-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + 8px);
  box-sizing: border-box;
}

.scene-sticky .container {
  width: 100%;
}

.scene-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.scene-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* =========================================================
   HERO
   ========================================================= */
.c-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 2rem) 0 4.5rem;
}

.c-hero .container {
  position: relative;
  z-index: 3;
}

/* Sci-Fi-Canvas + Schleier */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

.c-hero .orb {
  z-index: 0;
}

/* Sanftes Leuchten genau hinter der Ueberschrift, hebt den Text von der
   Aurora ab, ohne einen eigenen Hintergrund-Effekt zu konkurrieren. */
.hero-glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(880px, 92%);
  height: 460px;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(95, 146, 232, 0.15), transparent 70%);
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(66% 54% at 50% 56%, rgba(5, 7, 12, 0.5), rgba(5, 7, 12, 0.22) 54%, transparent 82%),
    linear-gradient(180deg, rgba(5, 7, 12, 0.66) 0%, transparent 18%, transparent 66%, rgba(5, 7, 12, 0.92) 100%);
}

/* Cleaner, zentrierter Aufbau */
.hero-centered {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 8px 1px rgba(95, 146, 232, 0.8);
  animation: kickerPulse 2.2s ease-in-out infinite;
}

@keyframes kickerPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1); }
}

.motion-off .hero-kicker-dot {
  animation: none;
  opacity: 1;
}

.hero-centered h1 {
  margin: 2.4rem auto 1.6rem;
  max-width: 20ch;
  font-size: clamp(2.5rem, 6.4vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 40px rgba(5, 7, 12, 0.6);
}

.hero-sub {
  max-width: 40rem;
  margin: 0 auto 2.4rem;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  color: var(--muted);
  line-height: 1.6;
}

.hero-centered .hero-actions {
  justify-content: center;
}

.c-hero-inner {
  will-change: transform, opacity;
}

.c-hero h1 {
  font-size: clamp(2.4rem, 5.9vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 1.1rem 0 1.6rem;
  max-width: 17ch;
}

.hl-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hl-inner {
  display: inline-block;
  transform: translateY(120%);
  animation: riseIn 0.95s cubic-bezier(0.2, 0.75, 0.15, 1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes riseIn {
  to { transform: translateY(0); }
}

.fade-up {
  opacity: 0;
  transform: translateY(22px);
  animation: fadeUp 0.9s cubic-bezier(0.2, 0.75, 0.15, 1) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.c-hero .lead {
  max-width: 36rem;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  margin-bottom: 2.2rem;
}

.c-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2.1rem;
}

.c-hero .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  color: var(--dim);
  font-size: 0.92rem;
  padding: 0;
}

.c-hero .hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.c-hero .hero-trust svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--dim);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 3;
}

.scroll-cue span.line {
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--accent), transparent);
  overflow: hidden;
  position: relative;
}

.scroll-cue span.line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -50%;
  width: 100%;
  height: 50%;
  background: #fff;
  animation: cueDrop 1.8s ease-in-out infinite;
}

@keyframes cueDrop {
  0%   { top: -50%; opacity: 0; }
  30%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* ---------- Hero: schwebende Kalender-Vorschau ----------
   Sitzt in .c-hero-inner.hero-centered nach .hero-actions. Rein
   dekorativ (aria-hidden), tritt einmalig ueber das bestehende
   fade-up-Muster ein, kein eigenes JS noetig. ------------------- */
.hero-preview {
  width: 100%;
  max-width: 560px;
  margin: 1.6rem auto 0;
}

/* ---------- Hero: Fortschritts-Ring plus echtes Live-Protokoll (Version 5, 03.08.2026) ----------
   Ersetzt den reinen Energie-Orb (Version 4, siehe AUFGABEN.md Abschnitt T,
   T11): Jeff fand die leuchtende Kugel weiterhin nicht gut, wollte etwas
   ganz anderes an ihrer Stelle. Jetzt steht statt der Kugel ein
   Fortschritts-Ring mit echter Kennzahl (gleiche Ring-Technik wie beim
   Antwortzeit-Ring in der Live-Demo weiter unten, .dash-ring-*), mit
   derselben dort schon etablierten Beispielzahl "11 Sek." Antwortzeit,
   nicht neu erfunden. Das Protokoll (.hv-log) daneben ist unveraendert.
   Eine von drei Varianten auf varianten.html (Block 11), von Jeff
   ausgewaehlt (siehe AUFGABEN.md, Abschnitt T, T12). */
.hv-ring {
  position: relative;
  width: 112px;
  height: 112px;
  flex-shrink: 0;
}

.hv-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hv-ring-track {
  fill: none;
  stroke: var(--glass-border);
  stroke-width: 6;
}

.hv-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px var(--accent));
  animation: hvRingFill 4s ease-in-out infinite;
}

@keyframes hvRingFill {
  0%        { stroke-dashoffset: 100; }
  60%, 100% { stroke-dashoffset: 2; }
}

.hv-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hv-ring-value {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.hv-ring-unit {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 0.2rem;
}

/* Der Orb steht in .hv-duo neben dem Protokoll: mobil gestapelt (Orb oben,
   Zeilen darunter), ab 640px nebeneinander. Jede Zeile blendet einzeln ein,
   bleibt kurz stehen und faedet zusammen mit den anderen wieder aus, dann
   beginnt die Schleife von vorn (reine CSS-Endlosschleife, 8s Takt, jede
   Zeile ein eigenes Keyframe mit eigenem Timing-Fenster statt versetzter
   animation-delay, damit nichts ueber mehrere Runden auseinanderdriftet). */
.hv-duo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.hv-log {
  width: 100%;
  max-width: 360px;
  list-style: none;
  display: grid;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: var(--text);
}

.hv-log-line {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  opacity: 0;
  transform: translateY(6px);
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.hv-log-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px 1px currentColor;
}

.hv-log-dot--blue  { background: var(--hv-blue);  color: var(--hv-blue); }
.hv-log-dot--red   { background: var(--hv-red);   color: var(--hv-red); }
.hv-log-dot--green { background: var(--hv-green); color: var(--hv-green); }
.hv-log-dot--gold  { background: var(--hv-gold);  color: var(--hv-gold); }

.hv-log-line--1 { animation-name: hvLog1; }
.hv-log-line--2 { animation-name: hvLog2; }
.hv-log-line--3 { animation-name: hvLog3; }
.hv-log-line--4 { animation-name: hvLog4; }

@keyframes hvLog1 {
  0%   { opacity: 0; transform: translateY(6px); }
  5%   { opacity: 1; transform: translateY(0); }
  86%  { opacity: 1; transform: translateY(0); }
  95%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; }
}

@keyframes hvLog2 {
  0%, 17% { opacity: 0; transform: translateY(6px); }
  22%     { opacity: 1; transform: translateY(0); }
  86%     { opacity: 1; transform: translateY(0); }
  95%     { opacity: 0; transform: translateY(-4px); }
  100%    { opacity: 0; }
}

@keyframes hvLog3 {
  0%, 34% { opacity: 0; transform: translateY(6px); }
  39%     { opacity: 1; transform: translateY(0); }
  86%     { opacity: 1; transform: translateY(0); }
  95%     { opacity: 0; transform: translateY(-4px); }
  100%    { opacity: 0; }
}

@keyframes hvLog4 {
  0%, 51% { opacity: 0; transform: translateY(6px); }
  56%     { opacity: 1; transform: translateY(0); }
  86%     { opacity: 1; transform: translateY(0); }
  95%     { opacity: 0; transform: translateY(-4px); }
  100%    { opacity: 0; }
}

.hv-caption {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--dim);
  text-align: center;
}

@media (min-width: 640px) {
  .hv-duo {
    flex-direction: row;
    gap: 2.2rem;
  }

  .hv-log {
    max-width: 380px;
  }
}

@media (max-width: 380px) {
  .hv-ring {
    width: 96px;
    height: 96px;
  }

  .hv-ring-value {
    font-size: 1.45rem;
  }
}

/* =========================================================
   PROBLEM: Text, der sich beim Scrollen fuellt
   ========================================================= */
.fill-text {
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 700;
  max-width: 22ch;
}

.fill-text .w {
  opacity: 0.14;
  transition: opacity 0.22s linear;
}

.fill-text .w.on {
  opacity: 1;
}

.pain-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.2rem;
}

.pain-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--muted);
  font-size: 0.92rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.pain-chip.on {
  opacity: 1;
  transform: none;
}

.pain-chip svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}

/* =========================================================
   WEG: gezeichnete Linie
   ========================================================= */
.journey-stage {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.j-svg {
  position: absolute;
  left: 0;
  right: 0;
  top: -46px;
  width: 100%;
  height: 150px;
  overflow: visible;
  pointer-events: none;
}

.j-svg .j-base {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2;
}

.j-svg .j-draw {
  fill: none;
  stroke: url(#jgrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(95, 146, 232, 0.65));
}

.j-svg .j-node {
  fill: var(--bg);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 2;
  transition: stroke 0.35s ease, fill 0.35s ease;
}

.j-svg .j-node.active {
  fill: var(--accent);
  stroke: var(--accent);
  filter: drop-shadow(0 0 10px rgba(95, 146, 232, 0.9));
}

.j-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  padding-top: 96px;
  position: relative;
}

.j-step {
  padding: 1.35rem;
  border-radius: var(--radius);
  opacity: 0.35;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.j-step.active {
  opacity: 1;
  transform: none;
  border-color: rgba(95, 146, 232, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 50px -28px rgba(95, 146, 232, 0.35);
}

.j-step .card-ico {
  width: 42px;
  height: 42px;
  margin-bottom: 0.9rem;
}

.j-step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.j-step p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.j-num {
  position: absolute;
  top: 1.05rem;
  right: 1.15rem;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(154, 166, 180, 0.3);
}

.j-step.active .j-num {
  -webkit-text-stroke: 1px rgba(95, 146, 232, 0.8);
}

.j-line-mobile {
  display: none;
}

/* =========================================================
   DEMO: Handy mit Live-Chat
   ========================================================= */
/* ---------- Weg: vertikaler Zickzack ---------- */
.zz {
  position: relative;
  max-width: 840px;
  margin: clamp(1.5rem, 4vw, 3rem) auto 0;
  padding: 0.5rem 0 1.5rem;
}

.zz-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.zz-base {
  fill: none;
  stroke: none;
}

/* Bewusst leise: dünn, transparent, nur ein Hauch Schein, ganz im Hintergrund */
.zz-draw {
  fill: none;
  stroke: rgba(120, 162, 236, 0.2);
  stroke-width: 1.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(95, 146, 232, 0.14));
}

.zz-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 112px;
}

/* Karten fahren von ihrer eigenen Seite herein und werden scharf */
.zz-card {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  border-radius: var(--radius);
  opacity: 0;
  transform: translateX(var(--from, -60px)) scale(0.95);
  filter: blur(5px);
  transition:
    opacity 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.16, 0.84, 0.24, 1),
    filter 0.55s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

/* Karten etwas schmaler und ein Stück mehr zur Mitte gezogen */
.zz-step.zz-left .zz-card { grid-column: 1; max-width: 360px; margin-left: auto; margin-right: 2rem; --from: -54px; }
.zz-step.zz-right .zz-card { grid-column: 2; max-width: 360px; margin-right: auto; margin-left: 2rem; --from: 54px; }

.zz-step.active .zz-card {
  opacity: 1;
  transform: none;
  filter: none;
  border-color: rgba(95, 146, 232, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 22px 54px -28px rgba(0, 0, 0, 0.85),
    0 0 46px -22px rgba(95, 146, 232, 0.55);
}

/* Variante D: der Rahmen der Karte zeichnet sich beim Zünden nach.
   Das Zeichnen selbst steuert cinematic.js über stroke-dashoffset. */
.zz-cardborder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.zz-cardborder-line {
  fill: none;
  stroke: rgba(150, 195, 255, 0.85);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(95, 146, 232, 0.5));
}

.zz-card .card-ico {
  transition: color 0.5s ease, box-shadow 0.5s ease;
}

.zz-step.active .zz-card .card-ico {
  box-shadow: 0 0 26px -10px rgba(95, 146, 232, 0.9);
}

.zz-num {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(154, 166, 180, 0.3);
}

.zz-step.active .zz-num { -webkit-text-stroke: 1px var(--accent); }

.zz-card .card-ico { margin-bottom: 0.9rem; }
.zz-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.zz-card p { color: var(--muted); font-size: 0.94rem; line-height: 1.55; }

/* Im angepinnten Weg-Abschnitt muss alles in eine Bildschirmhöhe passen.
   Die Karten stehen auf wechselnden Seiten, deshalb dürfen sie sich
   vertikal leicht überlappen. Dazu ein kompakterer Kopf und etwas
   enardere Karten. Gilt nur auf breiten Schirmen (dort ist angepinnt). */
@media (min-width: 721px) {
  .sc-weg .section-head { margin-bottom: 0.6rem; }
  .sc-weg .section-head h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
  .sc-weg .zz { margin-top: 0.5rem; padding-top: 0; }
  .sc-weg .zz-step { min-height: 0; }
  .sc-weg .zz-step + .zz-step { margin-top: -2.6rem; }
  .sc-weg .zz-card { padding: 1.15rem 1.35rem; }
  .sc-weg .zz-card .card-ico { margin-bottom: 0.55rem; }
  .sc-weg .zz-card h3 { font-size: 1.04rem; }
  .sc-weg .zz-card p { font-size: 0.9rem; line-height: 1.45; }
}

@media (max-width: 720px) {
  .zz-step { grid-template-columns: 1fr; min-height: 0; margin-bottom: 1rem; }
  .zz-step + .zz-step { margin-top: 0; }
  .zz-step.zz-left .zz-card,
  .zz-step.zz-right .zz-card { grid-column: 1; margin: 0; max-width: none; }
  .zz-card { transform: translateY(24px) scale(0.97); }
  .zz-step.active .zz-card { transform: none; }
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.demo-copy h2 {
  margin-bottom: 1.6rem;
}

.cap {
  padding: 1rem 1.2rem;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.9rem;
  opacity: 0.3;
  transform: translateX(-6px);
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.45s ease;
}

.cap.active {
  opacity: 1;
  transform: none;
  border-color: var(--accent);
}

.cap h3 {
  font-size: 1.08rem;
  margin-bottom: 0.3rem;
}

.cap p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.demo-note {
  color: var(--dim);
  font-size: 0.78rem;
  margin-top: 1rem;
  letter-spacing: 0.04em;
}

/* ---- Live-Dashboard ----
   Ersetzt den frueheren Automations-Fluss (Kern plus vier Knoten) durch
   ein kompaktes Dashboard-Panel mit vier Karten: eine Antwortzeit-Karte
   mit Fortschritts-Ring, eine Anfrage-Karte, eine Termin-Karte und eine
   Automatisierungsgrad-Karte mit Fuellbalken. Alle vier fuellen sich
   synchron zu den drei .cap-Erzaehl-Schritten (0-0.3 / 0.3-0.55 /
   0.55-1.01), gesteuert aus initDashboard() in cinematic.js.
   ------------------------------------------------------------------ */
.dash-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-panel {
  width: 100%;
  max-width: 440px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  box-sizing: border-box;
}

.dash-panel * {
  box-sizing: border-box;
}

.dash-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dash-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 8px 1px var(--accent-weak);
  animation: dashLivePulse 2.2s ease-in-out infinite;
}

@keyframes dashLivePulse {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1); }
}

.dash-live-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.5s ease;
}

.dash-card.is-in {
  opacity: 1;
  transform: none;
}

.dash-card--hero {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-color: var(--border-strong);
  opacity: 1;
  transform: none;
}

.dash-card--hero::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-weak), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}

.dash-ring-wrap {
  position: relative;
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  z-index: 1;
}

.dash-ring {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.dash-ring-track {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 8;
}

.dash-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--accent-weak));
}

.dash-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dash-ring-value {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.dash-ring-unit {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 0.2rem;
}

.dash-ring-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--surface-2);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.dash-ring-badge.is-in {
  opacity: 1;
  transform: scale(1);
}

.dash-ring-badge svg {
  width: 11px;
  height: 11px;
}

.dash-hero-text {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.dash-card-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.dash-card-status {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.4s ease;
}

.dash-card-status.is-done {
  color: var(--accent);
}

.dash-card-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.dash-card-row--between {
  justify-content: space-between;
}

.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-weak);
}

.dash-dot.is-answered {
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-weak);
}

.dash-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.dash-card-text {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.dash-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-weak);
  color: var(--accent);
}

.dash-card-tag.is-answered {
  background: var(--primary-weak);
  color: var(--text);
  animation: dashTagBlink 0.7s ease-out 1;
}

/* Sanftes Einfaden mit kurzem Aufleuchten, wenn die Anfrage-Karte auf
   "Beantwortet" wechselt, statt mehrfach an/aus zu blinken. */
@keyframes dashTagBlink {
  0%   { opacity: 0.4; transform: scale(0.94); box-shadow: 0 0 0 0 rgba(95, 146, 232, 0); }
  45%  { opacity: 1; transform: scale(1.05); box-shadow: 0 0 14px 2px rgba(95, 146, 232, 0.55); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(95, 146, 232, 0); }
}

.motion-off .dash-card-tag.is-answered {
  animation: none;
}

.dash-card-tag--muted {
  background: transparent;
  color: var(--dim);
  padding: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.dash-card-tag--muted.is-in {
  opacity: 1;
  transform: none;
}

.dash-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--primary);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.dash-check.is-in {
  opacity: 1;
  transform: scale(1);
}

.dash-check svg {
  width: 11px;
  height: 11px;
}

.dash-card-time {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.dash-card--auto {
  grid-column: 1 / -1;
}

.dash-auto-percent {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dash-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin-bottom: 0.55rem;
}

.dash-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* Drei Status-Zeilen, die nacheinander einblenden, waehrend der
   Balken darueber von 0 auf 100 Prozent laeuft, statt nur einer
   einzelnen statischen Zeile. */
.dash-auto-log {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

@media (max-width: 960px) {
  .dash-panel {
    max-width: 480px;
  }
}

@media (max-width: 720px) {
  .dash-panel {
    padding: 1.2rem;
    gap: 0.9rem;
  }

  .dash-ring-wrap {
    width: 88px;
    height: 88px;
  }

  .dash-ring-value {
    font-size: 1.4rem;
  }

  .dash-card--hero {
    gap: 0.9rem;
  }

  .dash-card {
    padding: 0.75rem 0.85rem;
  }
}

@media (max-width: 560px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }

  .dash-card--hero {
    flex-direction: column;
    text-align: center;
    gap: 0.7rem;
  }

  .dash-card--hero::before {
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
  }

  .dash-panel {
    padding: 1.1rem;
  }
}

.motion-off .dash-live-dot {
  animation: none;
  opacity: 1;
}

.motion-off .dash-ring-fill {
  stroke-dashoffset: 0 !important;
}

.motion-off .dash-bar-fill {
  transform: scaleX(1) !important;
}

/* Hero-Ring: fester Endzustand statt Loop, Ring steht fertig gefuellt da. */
.motion-off .hv-ring-fill {
  animation: none;
  stroke-dashoffset: 2;
}

.motion-off .hv-log-line {
  animation: none;
  opacity: 1;
  transform: none;
}



/* =========================================================
   ERGEBNIS: Kalender fuellt sich
   Ueberarbeitet ueber einen Workflow mit drei unabhaengigen
   Entwuerfen plus Kritik-Durchlauf (siehe AUFGABEN.md, Abschnitt M):
   statt zwei fast identischer Blautoene jetzt drei klar
   unterscheidbare, aber zueinander passende Kategorie-Farben,
   groesszuegigere Karten und Abstaende, ein aufgewerteter
   Live-Zaehler mit Farbverlauf-Zahl und kleiner Sparkline. Die
   Scroll-Kopplung (data-at pro Termin, .on-Klasse, [data-count])
   und initCalendar(engine) in cinematic.js bleiben unveraendert.
   ========================================================= */
:root {
  --cal-cat-besichtigung: #2f5fd0;
  --cal-cat-besichtigung-deep: #2650bd;
  --cal-cat-beratung: #5f92e8;
  --cal-cat-beratung-deep: #2f5fd0;
  --cal-cat-technik: #8fb4f0;
  --cal-cat-technik-deep: #5f92e8;
}

.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.7rem;
}

.cal-head-text h2 {
  margin-bottom: 0.4rem;
}

.cal-head-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.cal-badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  padding: 0.8rem 1.25rem 0.85rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(95, 146, 232, 0.16), rgba(47, 95, 208, 0.1));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 40px -28px rgba(0, 0, 0, 0.7);
}

.cal-badge-pulse {
  position: absolute;
  top: 0.85rem;
  left: 0.95rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px var(--accent-weak);
  animation: calBadgePulse 2.2s ease-in-out infinite;
}

@keyframes calBadgePulse {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1); }
}

.cal-badge-figure {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cal-badge-count {
  font-size: clamp(1.8rem, 3.2vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent);
  background: linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(95, 146, 232, 0.4);
}

.cal-badge-spark {
  width: 54px;
  height: 20px;
  overflow: visible;
  opacity: 0.8;
}

.cal-badge-spark polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(95, 146, 232, 0.5));
}

.cal-badge small {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
}

.calendar {
  padding: 1.35rem 1.4rem 1.3rem;
  border-radius: var(--radius);
  border-color: rgba(95, 146, 232, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 30px 70px -32px rgba(0, 0, 0, 0.85),
    0 0 90px -32px rgba(95, 146, 232, 0.5);
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.1rem;
  margin: 0 0.1rem 1.1rem;
}

.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.cal-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.cal-legend-item--besichtigung .cal-legend-dot {
  background: linear-gradient(135deg, var(--cal-cat-besichtigung-deep), var(--cal-cat-besichtigung));
  box-shadow: 0 0 8px rgba(95, 146, 232, 0.5);
}

.cal-legend-item--beratung .cal-legend-dot {
  background: linear-gradient(135deg, var(--cal-cat-beratung-deep), var(--cal-cat-beratung));
  box-shadow: 0 0 8px rgba(47, 95, 208, 0.5);
}

.cal-legend-item--technik .cal-legend-dot {
  background: linear-gradient(135deg, var(--cal-cat-technik-deep), var(--cal-cat-technik));
  box-shadow: 0 0 8px rgba(95, 146, 232, 0.5);
}

.cal-grid {
  display: grid;
  grid-template-columns: 58px repeat(5, 1fr);
  gap: 12px;
}

.cal-day {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
  padding: 0.35rem 0 0.65rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.cal-time {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--dim);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.7rem 0.55rem 0 0;
  font-variant-numeric: tabular-nums;
}

.cal-cell {
  min-height: 82px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.appt {
  position: absolute;
  inset: 5px;
  border-radius: 11px;
  padding: 8px 10px 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, var(--cal-cat-besichtigung-deep), var(--cal-cat-besichtigung));
  transform: scale(0.6) translateY(4px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.25, 1.4, 0.4, 1), opacity 0.35s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.appt-cat-besichtigung {
  background: linear-gradient(135deg, var(--cal-cat-besichtigung-deep), var(--cal-cat-besichtigung));
  border-color: rgba(95, 146, 232, 0.35);
}

.appt-cat-beratung {
  background: linear-gradient(135deg, var(--cal-cat-beratung-deep), var(--cal-cat-beratung));
  border-color: rgba(47, 95, 208, 0.4);
}

.appt-cat-technik {
  background: linear-gradient(135deg, var(--cal-cat-technik-deep), var(--cal-cat-technik));
  border-color: rgba(95, 146, 232, 0.35);
}

.appt.on {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.appt-cat-besichtigung.on {
  box-shadow: 0 14px 30px -18px rgba(38, 80, 189, 0.5), 0 0 20px -10px rgba(47, 95, 208, 0.45);
}

.appt-cat-beratung.on {
  box-shadow: 0 14px 30px -18px rgba(47, 95, 208, 0.45), 0 0 20px -10px rgba(95, 146, 232, 0.45);
}

.appt-cat-technik.on {
  box-shadow: 0 14px 30px -18px rgba(95, 146, 232, 0.45), 0 0 20px -10px rgba(127, 168, 238, 0.45);
}

.appt-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.appt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  flex: 0 0 auto;
}

.appt strong {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.appt-sub {
  display: block;
  margin-top: 1px;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.cal-note {
  color: var(--dim);
  font-size: 0.78rem;
  margin-top: 1rem;
  letter-spacing: 0.04em;
}

/* Zwischen 721 und 960px sind die Spalten schmal genug, dass lange
   Titel wie "Vor-Ort-Termin" sonst abgeschnitten wuerden. */
@media (max-width: 960px) {
  .appt strong {
    font-size: 0.68rem;
  }
}

/* =========================================================
   Warum / FAQ / Kontakt im One-Pager
   ========================================================= */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}

.c-pillar {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}

.c-pillar:hover {
  border-color: rgba(95, 146, 232, 0.28);
  background: linear-gradient(180deg, rgba(95, 146, 232, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px -30px rgba(0, 0, 0, 0.85),
    0 0 44px -10px rgba(95, 146, 232, 0.4);
}

.motion-off .c-pillar {
  transition: none;
}

.c-pillar .pillar-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--accent-weak);
  display: grid;
  place-items: center;
}

.c-pillar h3 {
  font-size: 1.06rem;
  margin-bottom: 0.35rem;
}

.c-pillar p {
  color: var(--muted);
  font-size: 0.95rem;
}

.k-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

.k-panel {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--radius);
}

.k-panel h3 {
  margin-bottom: 0.5rem;
}

.k-panel > p {
  color: var(--muted);
  font-size: 0.96rem;
}

.k-channels {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

/* Formular-Panel erbt .form-wrap-Innenleben aus styles.css */
.k-grid .form-wrap {
  background: transparent;
  border: 0;
  padding: 0;
}

/* =========================================================
   Responsive
   ========================================================= */
.nav-links a {
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .nav-links a {
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 980px) and (min-width: 721px) {
  .nav-cta-desktop {
    display: none;
  }
}

@media (max-width: 960px) {
  .demo-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .demo-copy .scene-eyebrow {
    margin-bottom: 0.5rem;
  }

  .demo-copy h2 {
    font-size: clamp(1.45rem, 5vw, 2rem);
    margin-bottom: 0.7rem;
  }

  .cap {
    padding: 0.35rem 0.85rem;
    margin-bottom: 0.3rem;
  }

  .cap h3 {
    font-size: 0.98rem;
    margin-bottom: 0;
  }

  .cap p {
    display: none;
  }

  .demo-note {
    display: none;
  }

  .j-track {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 1rem;
  }

  .j-svg {
    display: none;
  }

  .pillar-grid {
    grid-template-columns: 1fr;
  }

  .k-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .sc-220 { height: 200vh; }
  .sc-300 { height: 260vh; }
  .sc-360 { height: 300vh; }
  .sc-430 { height: 380vh; }

  /* Weg-Abschnitt auf dem Handy nicht anpinnen: vier gestapelte Karten
     passen nicht in eine Bildschirmhöhe. Läuft hier normal im Fluss. */
  .sc-weg { height: auto; }
  .sc-weg .scene-sticky {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
    padding: 3rem 0;
  }

  .j-track {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    position: relative;
    padding-left: 22px;
  }

  .j-line-mobile {
    display: block;
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(var(--primary), var(--accent));
    transform-origin: 50% 0;
    transform: scaleY(var(--jp, 0));
    border-radius: 2px;
    filter: drop-shadow(0 0 6px rgba(95, 146, 232, 0.6));
  }

  .j-step {
    opacity: 0.4;
  }

  .fill-text {
    max-width: none;
  }

  .cal-grid {
    grid-template-columns: 38px repeat(5, 1fr);
    gap: 7px;
  }

  .cal-day {
    font-size: 0.7rem;
    padding: 0.3rem 0 0.5rem;
  }

  .cal-time {
    font-size: 0.6rem;
    padding: 0.5rem 0.35rem 0 0;
  }

  .cal-cell {
    min-height: 64px;
    border-radius: 11px;
  }

  .appt {
    inset: 3px;
    padding: 6px 7px 5px;
    border-radius: 9px;
  }

  .appt strong { font-size: 0.62rem; }
  .appt-sub { display: none; }

  .cal-legend {
    gap: 0.4rem 0.7rem;
  }

  .cal-legend-item { font-size: 0.68rem; }

  .cal-badge {
    padding: 0.65rem 0.9rem 0.7rem 1.1rem;
  }

  .cal-badge-count {
    font-size: clamp(1.4rem, 7vw, 1.75rem);
  }

  .cal-badge-spark {
    width: 42px;
    height: 15px;
  }

  .calendar {
    padding: 1rem;
  }

  .scene-sticky {
    align-items: flex-start;
    padding-top: calc(var(--nav-h) + 20px);
  }

  .c-hero h1 {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .cal-grid {
    grid-template-columns: 30px repeat(5, 1fr);
    gap: 5px;
  }

  .cal-cell {
    min-height: 56px;
    border-radius: 9px;
  }

  .appt {
    inset: 2px;
    padding: 5px 5px 4px;
    border-radius: 7px;
  }

  .appt strong { font-size: 0.56rem; }
  .appt-dot { width: 5px; height: 5px; }
  .cal-legend-item { font-size: 0.64rem; }
}

/* =========================================================
   Reduzierte Bewegung: alles sofort im Endzustand
   ========================================================= */
.motion-off .hl-inner,
.motion-off .fade-up {
  animation: none;
  transform: none;
  opacity: 1;
}

.motion-off .orb {
  animation: none;
}

.motion-off .appt,
.motion-off .pain-chip,
.motion-off .j-step,
.motion-off .zz-card,
.motion-off .dash-card,
.motion-off .dash-ring-badge,
.motion-off .dash-check,
.motion-off .dash-card-tag--muted,
.motion-off .cap {
  opacity: 1;
  transform: none;
  filter: none;
}

.motion-off .cal-badge-pulse {
  animation: none;
  opacity: 1;
  transform: none;
}

.motion-off .zz-cardborder-line {
  stroke-dashoffset: 0 !important;
}

.motion-off .fill-text .w {
  opacity: 1;
}

.motion-off .scroll-cue {
  display: none;
}

/* =========================================================
   Hell-Modus fuer die Startseite
   Steht bewusst am Ende, damit diese Regeln die dunklen
   Vorgaben oberhalb sicher ueberschreiben.
   ========================================================= */
:root[data-theme="light"] {
  --bg: #f5f7fb;
  --bg-alt: #eaeff7;
  --surface: #ffffff;
  --surface-2: #f1f4fa;
  --glass: rgba(16, 28, 48, 0.028);
  --glass-border: rgba(16, 28, 48, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --accent-2: #2b62d4;
  --aik-violet: #6a4fe0;
  --aik-violet-weak: rgba(106, 79, 224, 0.1);
  --aik-magenta: #a8348f;
  --aik-magenta-weak: rgba(168, 52, 143, 0.1);

  --hv-blue: var(--accent);
  --hv-blue-weak: rgba(43, 98, 212, 0.1);
  --hv-red: #b03a30;
  --hv-red-weak: rgba(176, 58, 48, 0.1);
  --hv-green: #359073;
  --hv-green-weak: rgba(53, 144, 115, 0.1);
  --hv-gold: #b78a3e;
  --hv-gold-weak: rgba(183, 138, 62, 0.1);
}

[data-theme="light"] body {
  background:
    radial-gradient(90% 60% at 70% -10%, rgba(43, 98, 212, 0.1), transparent 60%),
    var(--bg);
}

[data-theme="light"] .orb-1 {
  background: radial-gradient(circle, rgba(43, 98, 212, 0.2), transparent 65%);
}

[data-theme="light"] .orb-2 {
  background: radial-gradient(circle, rgba(95, 146, 232, 0.18), transparent 65%);
}

[data-theme="light"] .glass {
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-color: rgba(16, 28, 48, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 60px -34px rgba(16, 28, 48, 0.4),
    0 0 60px -30px rgba(43, 98, 212, 0.35);
}

[data-theme="light"] .c-pillar:hover {
  border-color: rgba(43, 98, 212, 0.22);
  background: linear-gradient(180deg, rgba(43, 98, 212, 0.05), #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 60px -34px rgba(16, 28, 48, 0.4),
    0 0 40px -10px rgba(43, 98, 212, 0.3);
}

[data-theme="light"] .hero-veil {
  background:
    radial-gradient(66% 54% at 50% 56%, rgba(245, 247, 251, 0.5), rgba(245, 247, 251, 0.2) 54%, transparent 82%),
    linear-gradient(180deg, rgba(245, 247, 251, 0.7) 0%, transparent 18%, transparent 62%, rgba(245, 247, 251, 0.96) 100%);
}

[data-theme="light"] .hero-kicker {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(16, 28, 48, 0.12);
}

[data-theme="light"] .hero-centered h1 {
  text-shadow: none;
}

[data-theme="light"] .scroll-cue span.line::after {
  background: var(--primary);
}

[data-theme="light"] .fill-text .w {
  opacity: 0.16;
}

/* Der Weg */
[data-theme="light"] .zz-draw {
  stroke: rgba(43, 98, 212, 0.26);
  filter: drop-shadow(0 0 2px rgba(43, 98, 212, 0.16));
}

[data-theme="light"] .zz-num {
  -webkit-text-stroke: 1px rgba(16, 28, 48, 0.22);
}

[data-theme="light"] .zz-step.active .zz-num {
  -webkit-text-stroke: 1px var(--accent);
}

[data-theme="light"] .zz-step.active .zz-card {
  border-color: rgba(43, 98, 212, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 22px 54px -32px rgba(16, 28, 48, 0.45),
    0 0 46px -24px rgba(43, 98, 212, 0.5);
}

[data-theme="light"] .zz-cardborder-line {
  stroke: rgba(43, 98, 212, 0.7);
  filter: drop-shadow(0 0 6px rgba(43, 98, 212, 0.35));
}

/* Live-Demo */
[data-theme="light"] .cap {
  border-left-color: rgba(16, 28, 48, 0.12);
}

[data-theme="light"] .cap.active {
  border-left-color: var(--accent);
}

/* Ergebnis */
[data-theme="light"] .calendar {
  border-color: rgba(43, 98, 212, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 30px 70px -34px rgba(16, 28, 48, 0.4),
    0 0 90px -36px rgba(43, 98, 212, 0.4);
}

[data-theme="light"] .cal-cell {
  background: rgba(16, 28, 48, 0.022);
  border-color: rgba(16, 28, 48, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .cal-badge {
  background: linear-gradient(160deg, rgba(43, 98, 212, 0.1), rgba(43, 98, 212, 0.06));
  border-color: rgba(16, 28, 48, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 16px 34px -24px rgba(16, 28, 48, 0.3);
}

[data-theme="light"] .cal-badge-pulse {
  background: var(--accent-2, var(--accent));
}

[data-theme="light"] .cal-badge-count {
  color: var(--accent-2, var(--accent));
  background: linear-gradient(135deg, var(--text), var(--accent-2, var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(43, 98, 212, 0.28);
}

[data-theme="light"] .cal-badge-spark polyline {
  stroke: var(--accent-2, var(--accent));
  filter: drop-shadow(0 0 3px rgba(43, 98, 212, 0.35));
}

[data-theme="light"] .appt {
  border-color: rgba(16, 28, 48, 0.12);
}

[data-theme="light"] .appt-cat-besichtigung.on {
  box-shadow: 0 12px 26px -18px rgba(43, 98, 212, 0.35), 0 0 20px -10px rgba(43, 98, 212, 0.35);
}

[data-theme="light"] .appt-cat-beratung.on {
  box-shadow: 0 12px 26px -18px rgba(43, 98, 212, 0.3), 0 0 20px -10px rgba(43, 98, 212, 0.32);
}

[data-theme="light"] .appt-cat-technik.on {
  box-shadow: 0 12px 26px -18px rgba(43, 98, 212, 0.28), 0 0 20px -10px rgba(95, 146, 232, 0.3);
}

[data-theme="light"] .cal-legend-item {
  color: var(--muted);
}