/* Fassung A · Nachtbetrieb · dunkel, Glas, Tiefe · vollständige Seite */

/* ---------- Schriften ---------- */
/* Geist und Geist Mono liegen in assets/fonts und kommen vom eigenen Server, nicht von Google.
   Herkunft, Lizenz und Austausch: assets/fonts/SOURCES.md. Die Zeichenbereiche entsprechen der Aufteilung von Google:
   Der Browser lädt „latin-ext“ nur, wenn ein Zeichen daraus auf der Seite steht. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #03050b;
  --ink: #f3f6fc;
  --soft: #c5d0e6;
  --muted: #94a1ba;
  --dim: #8591a8;
  --blue: #2f6bff;
  --blue-hi: #7fa8ff;
  --mint: #6fe3c1;
  --line: rgba(255, 255, 255, 0.08);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue-hi);
  outline-offset: 5px;
}
::selection { color: #fff; background: #2458b9; }
p, h2, h3 { margin: 0; }
section { scroll-margin-top: 84px; }

/* ---------- Bühne ---------- */

.stage { position: relative; }
.stage::after {
  /* Übergang von der Bühne in die Seite */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 260px;
  background: linear-gradient(180deg, rgba(3, 5, 11, 0) 0%, rgba(3, 5, 11, 0.9) 50%, var(--bg) 86%);
  z-index: 8;
  pointer-events: none;
}
.stage-pin {
  --tilt: 17deg;
  --persp: 2200px;
  --scene-top: max(690px, 72svh);
  --scene-end: clamp(170px, calc(50svh - 245px), 250px);
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 800px;
  padding-top: 76px;
  overflow: hidden;
}
.stage-pin::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(3, 5, 11, 0) 0%, rgba(3, 5, 11, 0.55) 55%, rgba(3, 5, 11, 0.96) 100%);
  z-index: 6;
  pointer-events: none;
}

.bg { position: absolute; inset: 0; z-index: -1; }
.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 40% at 50% -8%, rgba(70, 128, 255, 0.5) 0%, rgba(58, 116, 255, 0) 72%),
    radial-gradient(30% 34% at 14% 78%, rgba(30, 110, 255, 0.2) 0%, rgba(30, 110, 255, 0) 72%),
    radial-gradient(30% 34% at 86% 70%, rgba(30, 150, 255, 0.22) 0%, rgba(30, 150, 255, 0) 72%),
    radial-gradient(44% 34% at 50% 72%, rgba(36, 92, 240, 0.55) 0%, rgba(36, 92, 240, 0) 72%),
    radial-gradient(80% 54% at 50% 104%, rgba(14, 34, 104, 0.95) 0%, rgba(3, 5, 11, 0) 70%);
}
.bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(180, 205, 255, 0.6) 1px, transparent 1.5px);
  background-size: 28px 28px;
  background-position: 50% 0;
  -webkit-mask-image: radial-gradient(58% 52% at 50% 34%, #000 0%, transparent 78%);
  mask-image: radial-gradient(58% 52% at 50% 34%, #000 0%, transparent 78%);
  opacity: 0.28;
}
.bg-beam {
  position: absolute;
  left: 50%;
  top: -220px;
  width: 1100px;
  height: 980px;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 148deg, rgba(110, 160, 255, 0.3) 170deg, rgba(200, 222, 255, 0.52) 180deg, rgba(110, 160, 255, 0.3) 190deg, transparent 212deg);
  filter: blur(30px);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  animation: beam 14s ease-in-out infinite alternate;
}
.bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Navigation ---------- */

.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
}
.nav-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}
.logo { display: inline-flex; }
.logo img { display: block; height: 30px; width: auto; }
.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav-links a {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--soft);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
}
.nav-cta { display: flex; align-items: center; gap: 10px; }

/* Sprachumschalter im Kopf. Klappt ohne Skript auf (details); sprache.js schließt ihn bei Klick daneben und mit Escape.
   Bis 720 px ist im Kopf kein Platz neben Logo und Knopf: Dort steht die Auswahl nur in der Fußzeile (.foot-lang). */
.lang { position: relative; }
.lang summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--soft);
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { flex: none; }
.lang-pfeil { opacity: 0.7; transition: transform 0.2s var(--ease); }
.lang[open] summary { background: rgba(255, 255, 255, 0.07); border-color: var(--line); color: #fff; }
.lang[open] .lang-pfeil { transform: rotate(180deg); }
.lang ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 14px;
  background: rgba(9, 13, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 44px -20px rgba(0, 0, 0, 0.85);
}
.lang li > * {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--soft);
  transition: background 0.2s, color 0.2s;
}
.lang li [aria-current] { color: #fff; }
.lang li [aria-current]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.lang li a:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .lang summary:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
  .lang li a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
}
@media (max-width: 720px) {
  .lang { display: none; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-glass {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@media (hover: hover) and (pointer: fine) {
  .btn-glass:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); }
}
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #4a84ff 0%, #1f5cf2 52%, #0f48d8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 20, 90, 0.5),
    0 0 0 1px rgba(110, 160, 255, 0.4),
    0 10px 24px -12px rgba(20, 60, 190, 0.7);
}
/* Das weite blaue Leuchten gehört nur zum Einstieg und zum Abschluss. */
.hero .btn-primary, .closing-card .btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 20, 90, 0.5),
    0 0 0 1px rgba(110, 160, 255, 0.4),
    0 10px 34px -6px rgba(40, 100, 255, 0.5),
    0 24px 60px -18px rgba(40, 100, 255, 0.32);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-1px); }
}
.btn-ghost {
  color: var(--soft);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(18px, 3.6vh, 46px) 24px 0;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 14px 6px 13px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 30px -10px rgba(47, 107, 255, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.pill i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(111, 227, 193, 0.16), 0 0 14px var(--mint);
  animation: pulse 2.4s ease-in-out infinite;
}

h1 {
  margin: clamp(16px, 2.6vh, 26px) 0 0;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.048em;
  font-weight: 600;
}
h1 span {
  display: block;
  padding-bottom: 0.1em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 .l1 { background-image: linear-gradient(180deg, #ffffff 28%, #b7c5e4 100%); }
h1 .l2 {
  position: relative;
  width: fit-content;
  margin: -0.04em auto 0;
  /* ein Lichtstreifen zieht gelegentlich über die Zeile */
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(92deg, #6f9dff 4%, #cfe0ff 46%, #ffffff 60%, #8db2ff 96%);
  background-size: 220% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
}
h1 .l2::before, h1 .l2::after {
  content: "";
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  background: #fff;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  opacity: 0;
  animation: twinkle 4.6s ease-in-out 2.6s infinite;
}
h1 .l2::after { right: -0.2em; top: 0.06em; }
h1 .l2::before { left: -0.17em; bottom: 0.2em; width: 0.13em; height: 0.13em; animation-delay: 4.3s; }

.lede {
  max-width: 700px;
  margin-top: clamp(8px, 1.4vh, 16px);
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.cta {
  display: flex;
  gap: 12px;
  margin-top: clamp(20px, 3.2vh, 32px);
}
.cta-note { margin-top: 13px; font-size: 13.5px; color: var(--dim); }
.cta-note.left { text-align: left; }

/* ---------- Szene mit Konsole ---------- */

.scene {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--scene-top);
  z-index: 5;
  width: min(1240px, calc(100% - 56px));
  margin: 0 auto;
}
.scene-glow {
  position: absolute;
  inset: -120px -10% auto;
  height: 460px;
  background:
    radial-gradient(36% 26% at 50% 30%, rgba(150, 195, 255, 0.75) 0%, rgba(90, 150, 255, 0) 70%),
    radial-gradient(50% 50% at 50% 46%, rgba(52, 112, 255, 0.8) 0%, rgba(58, 118, 255, 0) 70%);
  filter: blur(44px);
  z-index: -1;
  animation: glow 7s ease-in-out infinite alternate;
}

.console, .sys-panel {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(22, 30, 52, 0.74) 0%, rgba(9, 13, 25, 0.88) 46%, rgba(6, 9, 18, 0.94) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 -6px 70px -6px rgba(84, 144, 255, 0.7),
    0 60px 140px -30px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
}
.console {
  transform: perspective(var(--persp)) rotateX(var(--tilt));
  transform-origin: 50% 0;
}
.console::before, .sys-panel::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170, 205, 255, 0.95) 50%, transparent);
}
.console::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(105deg, transparent 43%, rgba(170, 205, 255, 0.11) 50%, transparent 57%);
  background-size: 100% 100%, 320% 100%;
  background-position: 0 0, 140% 0;
  background-repeat: no-repeat;
  animation: sheen 10s ease-in-out 4s infinite;
  pointer-events: none;
}

.console-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 46px;
  padding: 0 16px 0 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.bar-dots { display: inline-flex; gap: 7px; }
.bar-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); }
.bar-title { color: var(--soft); position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.bar-title em { font-style: normal; color: var(--dim); margin: 0 4px; }
.bar-right { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.bar-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--soft);
}
.bar-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: pulse 2.4s ease-in-out infinite; }

/* vier Spalten: Quellen, Signale, Anschreiben, Termin */
.console-body {
  position: relative;
  display: grid;
  grid-template-columns: 214px minmax(0, 1.12fr) minmax(0, 1.06fr) minmax(0, 0.9fr);
  height: 480px;
}
.console-body::before {
  /* ein Lichtpunkt läuft von links nach rechts durch die vier Schritte */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(170, 205, 255, 0.95), transparent) no-repeat;
  background-size: 200px 1px;
  animation: flow-x 5s linear 3s infinite backwards;
  pointer-events: none;
}
.col { position: relative; min-width: 0; border-left: 1px solid var(--line); }
.col:first-child { border-left: 0; }
.col-head {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--soft);
}
.col-head b {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0;
  color: #fff;
  background: rgba(70, 128, 255, 0.3);
  border: 1px solid rgba(130, 172, 255, 0.55);
}
.col-head span { display: none; }
.col:not(:last-child) .col-head::after {
  content: "→";
  margin-left: auto;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--blue-hi);
}

/* 1 Quellen */
.src-list, .flow-src { list-style: none; margin: 0; padding: 10px 10px 0; }
.src-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  font-size: 12.5px;
  color: var(--soft);
  white-space: nowrap;
}
.slot {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.035);
}
.act { margin-left: auto; display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.act i { width: 2px; height: 100%; border-radius: 2px; background: var(--blue-hi); transform-origin: 50% 100%; animation: eq 1.6s ease-in-out infinite; }
.act i:nth-child(2) { animation-delay: -0.4s; }
.act i:nth-child(3) { animation-delay: -0.9s; }
.act i:nth-child(4) { animation-delay: -1.3s; }
.act.a2 i { animation-duration: 2.1s; }
.act.a3 i { animation-duration: 1.3s; }
.act.a4 i { animation-duration: 2.6s; }
.act.a5 i { animation-duration: 1.9s; }
.col-sub {
  margin: 18px 16px 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
.kinds span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* 2 Signale */
.col-feed { overflow: hidden; }
.col-feed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 64px;
  background: linear-gradient(180deg, rgba(110, 160, 255, 0) 0%, rgba(110, 160, 255, 0.07) 70%, rgba(150, 190, 255, 0.2) 100%);
  border-bottom: 1px solid rgba(190, 215, 255, 0.38);
  mix-blend-mode: screen;
  opacity: 0;
  animation: scan 7s cubic-bezier(0.4, 0, 0.3, 1) 4.2s infinite;
  pointer-events: none;
}
.row {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  border-bottom: 1px solid var(--line);
}
.row time { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.row-main { min-width: 0; display: grid; gap: 3px; }
.row-main b { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.is-active {
  background: linear-gradient(90deg, rgba(58, 118, 255, 0.24) 0%, rgba(58, 118, 255, 0.05) 100%);
  box-shadow: inset 2px 0 0 var(--blue-hi), inset 0 1px 0 rgba(140, 180, 255, 0.2), inset 0 -1px 0 rgba(140, 180, 255, 0.12);
}
.row.is-active time { color: var(--blue-hi); }
.row.is-out { opacity: 0.5; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip-write { color: #dce8ff; background: rgba(70, 128, 255, 0.28); border-color: rgba(130, 172, 255, 0.45); }
.chip-write i { width: 3px; height: 3px; margin-left: 1px; border-radius: 50%; background: currentColor; animation: dots 1.2s infinite; }
.chip-write i:nth-of-type(1) { margin-left: 5px; }
.chip-write i:nth-of-type(2) { animation-delay: 0.15s; }
.chip-write i:nth-of-type(3) { animation-delay: 0.3s; }
.chip .sm { display: none; }
.chip-plan { color: var(--mint); background: rgba(111, 227, 193, 0.09); border-color: rgba(111, 227, 193, 0.24); font-family: var(--mono); font-size: 10.5px; }
.chip-check { color: var(--soft); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
.chip-watch { color: var(--dim); border-color: rgba(255, 255, 255, 0.1); }
.chip-done { color: #04271d; font-weight: 500; background: linear-gradient(180deg, #9af0d6, #58d3ae); }

/* 3 Ansprechpartner und Anschreiben */
.col-mail > :not(.col-head), .col-meet > :not(.col-head) { margin: 12px 14px 0; }
.col-mail { background: linear-gradient(180deg, rgba(58, 118, 255, 0.07), rgba(58, 118, 255, 0) 60%); }

.contactc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 11px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.contactc > div { min-width: 0; display: grid; gap: 2px; }
.contactc b { font-size: 13.5px; font-weight: 500; }
.contactc span:not(.avatar) { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #fff;
  background: linear-gradient(160deg, rgba(120, 165, 255, 0.55), rgba(60, 100, 220, 0.25));
  border: 1px solid rgba(160, 195, 255, 0.4);
}
.avatar.sq { border-radius: 10px; width: 40px; height: 40px; }
.cks {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--mint);
  white-space: nowrap;
}
.cks i, .checks i {
  flex: none;
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(111, 227, 193, 0.16);
  border: 1px solid rgba(111, 227, 193, 0.5);
}
.cks i::after, .checks i::after {
  content: "";
  position: absolute;
  left: 4.2px;
  top: 2.2px;
  width: 3px;
  height: 6px;
  border: solid var(--mint);
  border-width: 0 1.4px 1.4px 0;
  transform: rotate(42deg);
}
.cks i:not(:first-child) { margin-left: 8px; }

.mailc, .calc {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 50px -24px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.mailc-top, .calc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dim);
}
.mailc-top span:last-child { color: var(--blue-hi); }
.mailc-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  margin: 0;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.mailc-meta dt { color: var(--dim); }
.mailc-meta dd { margin: 0; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mailc-body { display: grid; gap: 7px; padding: 11px 13px 4px; }
.mailc-body p { font-size: 12.5px; line-height: 1.5; color: #dfe7f7; }
.mailc-body u {
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, transparent 56%, rgba(70, 128, 255, 0.55) 56%);
  padding: 0 1px;
}
.mailc-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 13px 12px; }
.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--blue-hi);
  animation: blink 1.05s steps(1) infinite;
}

/* 4 Termin */
.replyc {
  padding: 11px 13px 12px;
  border-radius: 12px 12px 12px 4px;
  background: rgba(111, 227, 193, 0.07);
  border: 1px solid rgba(111, 227, 193, 0.24);
}
.replyc-top { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); }
.replyc p { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
.calc-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 10px 12px; }
.calc-week span { display: grid; gap: 4px; font-family: var(--mono); font-size: 10px; text-align: center; color: var(--dim); }
.calc-week i { display: block; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05); }
.calc-week .busy { background: rgba(255, 255, 255, 0.13); }
.calc-week .booked { background: linear-gradient(180deg, #5b90ff, #2260f0); border-color: rgba(160, 195, 255, 0.8); }
.calc-week .is-day { color: #fff; }
.calc-slot {
  display: grid;
  gap: 2px;
  margin: 0 12px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(70, 128, 255, 0.2);
  border: 1px solid rgba(130, 172, 255, 0.45);
}
.calc-slot b { font-size: 13px; font-weight: 500; }
.calc-slot span { font-size: 12px; color: var(--soft); }
.calc-foot { display: flex; padding: 10px 12px 12px; }

/* schwebende Karten */
.float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(40, 54, 92, 0.72), rgba(16, 22, 42, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 60px -18px rgba(0, 0, 0, 0.85), 0 0 50px -14px rgba(70, 128, 255, 0.6);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  animation: pop 1s cubic-bezier(0.2, 0.8, 0.2, 1) 2.9s backwards, drift 8s ease-in-out infinite alternate;
}
.float div { display: grid; gap: 3px; }
.float b { font-size: 13.5px; font-weight: 500; }
.float span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.float-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #4a84ff, #1650e0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 18px -4px rgba(47, 107, 255, 0.8);
}
.float-icon.ok { color: #04271d; background: linear-gradient(180deg, #9af0d6, #4fcfa8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 18px -4px rgba(111, 227, 193, 0.6); }
.float-left { left: -72px; top: -40px; }
.float-right { right: -72px; top: -70px; animation-delay: 3.4s, -4s; }

/* ---------- Bewegung ---------- */

@property --w { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes dots { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
@keyframes drift { from { transform: translateY(-5px); } to { transform: translateY(7px); } }
@keyframes glow { from { opacity: 0.75; } to { opacity: 1; } }
@keyframes beam { from { opacity: 0.7; } to { opacity: 1; } }
@keyframes eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes flow-x { from { background-position: -200px 0; } to { background-position: calc(100% + 200px) 0; } }
@keyframes pipe { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 26px); opacity: 0; } }
@keyframes shine { 0% { background-position: 130% 0, 0 0; } 32%, 100% { background-position: -30% 0, 0 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0; scale: 0.4; rotate: 0deg; } 12% { opacity: 1; scale: 1; rotate: 45deg; } 26% { opacity: 0; scale: 0.4; rotate: 90deg; } }
@keyframes row-in { from { opacity: 0; filter: blur(8px); translate: 0 -14px; background-color: rgba(70, 128, 255, 0.34); } }
@keyframes daywave { 0%, 100% { opacity: 0.35; } 12% { opacity: 1; } 30% { opacity: 0.35; } }

@keyframes rise-in { from { opacity: 0; filter: blur(14px); translate: 0 18px; } }
@keyframes build {
  0% { opacity: 0; filter: blur(34px); translate: 0 70px; scale: 0.955; }
  45% { opacity: 1; }
  100% { opacity: 1; filter: blur(0); translate: 0 0; scale: 1; }
}
@keyframes piece { from { opacity: 0; filter: blur(9px); translate: 0 10px; } }
@keyframes pop { from { opacity: 0; filter: blur(12px); scale: 0.9; } }
@keyframes light-in { from { opacity: 0; } }
@keyframes sheen { 0% { background-position: 0 0, 140% 0; } 40%, 100% { background-position: 0 0, -40% 0; } }
@keyframes scan { 0% { top: 44px; opacity: 0; } 8% { opacity: 1; } 60% { opacity: 1; } 72%, 100% { top: 100%; opacity: 0; } }

/* Aufbau beim Laden: alles entsteht aus der Unschärfe */
.nav-in { animation: rise-in 0.9s var(--ease) backwards; }
.pill { animation: rise-in 0.9s var(--ease) 0.1s backwards; }
h1 .l1 { animation: rise-in 1.1s var(--ease) 0.2s backwards; }
h1 .l2 { animation: rise-in 1.1s var(--ease) 0.34s backwards, shine 7s ease-in-out 2.2s infinite; }
.lede { animation: rise-in 1s var(--ease) 0.5s backwards; }
.cta { animation: rise-in 1s var(--ease) 0.62s backwards; }
.hero .cta-note { animation: rise-in 1s var(--ease) 0.74s backwards; }
.bg-dots { animation: light-in 2.4s ease-out 0.2s backwards; }
.scene { animation: build 2.4s cubic-bezier(0.16, 0.8, 0.2, 1) 0.55s backwards; }
.pc { animation: piece 0.8s var(--ease) backwards; animation-delay: var(--d, 1.4s); }

/* Zeile über der aufgerichteten Konsole */
.caption {
  position: absolute;
  left: 0;
  right: 0;
  top: 96px;
  z-index: 7;
  display: none;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-hi);
}
.caption-h {
  margin-top: 10px;
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #fff;
}
.caption-h span { color: var(--muted); }

/* Scrollen: Text weicht, Konsole richtet sich auf und kommt nach vorn */
@keyframes hero-out { to { opacity: 0; filter: blur(12px); transform: translateY(-70px) scale(0.97); } }
@keyframes scene-up { to { transform: translateY(calc(var(--scene-end) - var(--scene-top))); } }
@keyframes console-flat { to { transform: perspective(var(--persp)) rotateX(0deg); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes caption-in { from { opacity: 0; filter: blur(10px); translate: 0 22px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
@keyframes float-l { 60%, 100% { opacity: 0; filter: blur(10px); translate: -40px 30px; } }
@keyframes float-r { 60%, 100% { opacity: 0; filter: blur(10px); translate: 40px 40px; } }
@keyframes nav-glass {
  to {
    background: rgba(4, 7, 15, 0.62);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}
@keyframes reveal { from { opacity: 0; filter: blur(14px); translate: 0 46px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage { height: calc(max(100svh, 800px) + 120vh); }
    .stage-pin { position: sticky; top: 0; }

    .nav { position: fixed; animation: nav-glass linear both; animation-timeline: scroll(root); animation-range: 30vh 80vh; }
    /* Auf der Plan-Seite beginnt der Text gleich unter der Kopfzeile. Sie bekommt ihr Glas deshalb sofort. */
    .nav:has(+ .op) { animation-range: 0 72px; }

    .hero { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 46vh; }
    .stage-pin::after { animation: fade-out linear both; animation-timeline: scroll(root); animation-range: 10vh 70vh; }

    .scene {
      animation: build 2.4s cubic-bezier(0.16, 0.8, 0.2, 1) 0.55s backwards, scene-up cubic-bezier(0.3, 0, 0.2, 1) both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 92vh;
    }
    .console { animation: console-flat cubic-bezier(0.3, 0, 0.2, 1) both; animation-timeline: scroll(root); animation-range: 0 92vh; }

    .float-left {
      animation: pop 1s cubic-bezier(0.2, 0.8, 0.2, 1) 2.9s backwards, drift 8s ease-in-out infinite alternate, float-l linear both;
      animation-timeline: auto, auto, scroll(root);
      animation-range: normal, normal, 0 92vh;
    }
    .float-right {
      animation: pop 1s cubic-bezier(0.2, 0.8, 0.2, 1) 3.4s backwards, drift 8s ease-in-out -4s infinite alternate, float-r linear both;
      animation-timeline: auto, auto, scroll(root);
      animation-range: normal, normal, 0 92vh;
    }

    .caption { display: block; animation: caption-in linear both; animation-timeline: scroll(root); animation-range: 52vh 92vh; }

    .rv {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover { transform: none !important; }
}

/* =====================================================================
   Abschnitte unter dem Hero
   ===================================================================== */

.proof, .era, .system, .benefits, .letter, .day, .who, .plan, .compare, .trust, .faq {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(84px, 13vh, 150px) 40px 0;
}

.sec-head { text-align: center; }
/* Nicht jede Überschrift steht mittig: Wo der Inhalt links beginnt, beginnt auch die Überschrift links. */
.sec-head.is-left { text-align: left; }
h2 {
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.042em;
  color: #fff;
  text-wrap: balance;
}
h2 span { color: var(--muted); }
.sec-head h2 { font-size: clamp(32px, 3.9vw, 56px); }
.sec-head h2 span { display: block; }
.kicker + h2 { margin-top: 16px; }
.sec-p { max-width: 500px; margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ---------- Logoleiste ---------- */

.proof { padding-top: clamp(40px, 7vh, 80px); text-align: center; }
.proof-line { font-size: 16.5px; color: var(--soft); }
.logos { margin-top: clamp(40px, 6vh, 60px); }
.logos-label { font-size: 13.5px; color: var(--dim); text-wrap: balance; }
/* Marken stehen frei auf dem Grund. --s ist die optische Breite je Marke (Wurzel des Seitenverhältnisses). */
.logos-list {
  --logo: 62px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 38px 28px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.logos-list img { display: block; width: calc(var(--logo) * var(--s)); max-width: 100%; height: auto; opacity: 0.74; }
.voice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 24px;
  max-width: 760px;
  margin: clamp(44px, 7vh, 68px) auto 0;
  padding: 30px 34px;
  text-align: left;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.voice-mark { color: rgba(127, 168, 255, 0.6); }
.voice-quote { margin: 0; }
.voice-quote p { font-size: clamp(21px, 2.1vw, 26px); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.voice figcaption { grid-column: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-top: 22px; }
.voice-who { display: grid; gap: 3px; font-size: 13px; color: var(--dim); }
.voice-who b { font-size: 14px; font-weight: 500; color: var(--soft); }
.voice-source { font-size: 13px; color: var(--blue-hi); border-radius: 4px; text-decoration: underline; text-decoration-color: rgba(127, 168, 255, 0.4); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .voice-source { transition: color 0.2s, text-decoration-color 0.2s; }
  .voice-source:hover { color: #fff; text-decoration-color: #fff; }
}

/* ---------- So arbeitet das System ---------- */

.system::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 700px;
  background: radial-gradient(60% 50% at 50% 30%, rgba(47, 107, 255, 0.2) 0%, rgba(47, 107, 255, 0) 70%);
  z-index: -1;
  pointer-events: none;
}
.sys {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  column-gap: clamp(30px, 5vw, 76px);
  margin-top: 10px;
}
.stations { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; }
.station {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78vh;
  transition: opacity 0.45s;
}
.js .station { opacity: 0.5; }
.js .sys[data-step="1"] .station[data-step="1"],
.js .sys[data-step="2"] .station[data-step="2"],
.js .sys[data-step="3"] .station[data-step="3"],
.js .sys[data-step="4"] .station[data-step="4"] { opacity: 1; }
.st-no { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-hi); }
.station h3 {
  margin-top: 14px;
  font-size: clamp(25px, 2.7vw, 38px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.station p { max-width: 430px; margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

.sys-stick {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: max(96px, calc(50vh - 280px));
  align-self: start;
  height: 560px;
}
.sys-panel {
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 60px 140px -30px rgba(0, 0, 0, 0.9);
}
.sys-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 54px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.sys-tabs span {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--dim);
  border: 1px solid transparent;
  transition: color 0.4s, background 0.4s, border-color 0.4s;
}
.sys[data-step="1"] .sys-tabs [data-s="1"],
.sys[data-step="2"] .sys-tabs [data-s="2"],
.sys[data-step="3"] .sys-tabs [data-s="3"],
.sys[data-step="4"] .sys-tabs [data-s="4"] { color: #fff; background: rgba(70, 128, 255, 0.24); border-color: rgba(130, 172, 255, 0.45); }

.sv {
  position: absolute;
  inset: 55px 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 28px;
  opacity: 0;
  filter: blur(14px);
  translate: 0 20px;
  transition: opacity 0.55s, filter 0.55s, translate 0.55s var(--ease);
  pointer-events: none;
}
.sys[data-step="1"] .sv1, .sys[data-step="2"] .sv2, .sys[data-step="3"] .sv3, .sys[data-step="4"] .sv4 { opacity: 1; filter: blur(0); translate: 0 0; }

.sv > * { flex: none; }

/* Zustand 1 */
.sv1 { display: grid; grid-template-columns: 216px 76px minmax(0, 1fr); align-items: center; gap: 0; }
.flow-src { padding: 0; }
.flow-src li { display: flex; align-items: center; gap: 11px; height: 50px; font-size: 14px; color: var(--soft); white-space: nowrap; }
.flow-src .slot { width: 28px; height: 28px; border-radius: 8px; }
.flow-pipes { border-right: 1px solid rgba(130, 172, 255, 0.45); }
.flow-pipes i { display: block; position: relative; height: 50px; }
.flow-pipes i::before { content: ""; position: absolute; left: 6px; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.14); }
.flow-pipes i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #cfe0ff);
  animation: pipe 2.6s linear infinite;
}
.flow-pipes i:nth-child(2)::after { animation-delay: -0.9s; }
.flow-pipes i:nth-child(3)::after { animation-delay: -1.7s; }
.flow-pipes i:nth-child(4)::after { animation-delay: -0.4s; }
.flow-pipes i:nth-child(5)::after { animation-delay: -2.1s; }
.flow-sig { display: grid; gap: 10px; padding-left: 20px; }
.sigc {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.sigc span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.sigc b { font-size: 14.5px; font-weight: 500; }
.sigc em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.sigc.is-hot { background: rgba(58, 118, 255, 0.18); border-color: rgba(130, 172, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.sigc.is-hot span { color: var(--blue-hi); }
.moment {
  justify-self: start;
  margin-top: 7px;
  padding: 4px 9px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(180deg, #4a84ff, #1f5cf2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Zustand 2 */
.firmc {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.firmc-head { display: flex; align-items: center; gap: 12px; }
.firmc-head div { display: grid; gap: 2px; }
.firmc-head b { font-size: 15.5px; font-weight: 500; }
.firmc-head span:not(.avatar) { font-size: 13px; color: var(--muted); }
.checks { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--soft); }
.people { position: relative; display: grid; gap: 8px; padding-left: 28px; }
.people::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -16px;
  width: 16px;
  height: 52px;
  border-left: 1px solid rgba(130, 172, 255, 0.55);
  border-bottom: 1px solid rgba(130, 172, 255, 0.55);
  border-bottom-left-radius: 10px;
}
.contactc.is-pick { background: rgba(58, 118, 255, 0.18); border-color: rgba(130, 172, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.contactc.is-dim { opacity: 0.42; }

/* Zustand 3 und 4 */
.sv3 .mailc { width: 100%; max-width: 540px; margin: 0 auto; }
.sv3 .mailc-body p, .mailc-xl .mailc-body p { font-size: 14.5px; line-height: 1.6; }
.sv3 .mailc-body, .mailc-xl .mailc-body { gap: 10px; padding: 16px 18px 6px; }
.sv3 .mailc-top, .sv3 .mailc-meta, .mailc-xl .mailc-top, .mailc-xl .mailc-meta { padding-left: 18px; padding-right: 18px; }
.sv3 .mailc-meta, .mailc-xl .mailc-meta { font-size: 13px; }
.sv3 .mailc-foot, .mailc-xl .mailc-foot { padding: 12px 18px 16px; }
.sv4 .replyc { max-width: 430px; padding: 14px 16px; }
.sv4 .replyc p { font-size: 14.5px; }
.sv4 .calc { width: 100%; max-width: 460px; align-self: flex-end; }
.sv4 .calc-week i { height: 20px; }
.sv4 .calc-slot b { font-size: 14.5px; }
.sv4 .calc-slot span { font-size: 13px; }
.sys-panel .sigc span, .sys-panel .replyc-top, .sys-panel .calc-head span, .sys-panel .calc-week span,
.sys-panel .mailc-top span, .mailc-xl .mailc-top span, .sys-panel .chip-plan, .mailc-xl .chip-plan { font-size: 11px; }

/* Band mit der Hauptaktion */
.band, .closing-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(22, 30, 52, 0.7) 0%, rgba(7, 10, 20, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 60px 140px -50px rgba(40, 100, 255, 0.55);
}
.band { margin-top: clamp(30px, 6vh, 70px); padding: clamp(40px, 7vh, 70px) 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.band h2 { font-size: clamp(27px, 3.3vw, 46px); }
.band h2 span { display: block; }
.band p { margin: 14px 0 26px; font-size: 17px; color: var(--muted); text-wrap: balance; }
/* Die Flugroute steht nur hier: der Plan als Weg zum Ziel. Ohne Schein. Sie schwebt leise (unten). */
.band-route { display: block; width: 240px; height: auto; margin-bottom: 22px; }
@media (min-width: 901px) {
  .band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(32px, 5vw, 80px);
    align-items: center;
    justify-items: start;
    text-align: left;
    padding-left: clamp(40px, 5vw, 76px);
    padding-right: clamp(32px, 4vw, 60px);
  }
  .band-route { grid-column: 2; grid-row: 1 / span 3; width: clamp(300px, 28vw, 400px); margin: 0; }
  .band h2 { align-self: end; font-size: clamp(27px, 2.65vw, 38px); }
  .band .btn { align-self: start; }
}
/* Abschluss: Gebirgskamm im ersten Schnee, nach oben ausgeblendet. Oben bleibt der ruhige Grund der Karte. */
.closing-photo {
  position: absolute;
  left: 0;
  top: 16%;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 0;
  filter: saturate(0.82) brightness(0.9);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 26%, #000 56%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 26%, #000 56%);
}
/* Dunkler Grund hinter dem Text, damit er auf dem Schnee lesbar bleibt. */
.closing-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 50% at 50% 54%, rgba(4, 7, 16, 0.84) 0%, rgba(4, 7, 16, 0.62) 55%, rgba(4, 7, 16, 0) 100%);
}
.closing-glow {
  position: absolute;
  left: 50%;
  bottom: -62%;
  width: 90%;
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(70, 130, 255, 0.75) 0%, rgba(47, 107, 255, 0) 70%);
  filter: blur(30px);
  z-index: -1;
  animation: glow 7s ease-in-out infinite alternate;
}

/* ---------- Vorteile ---------- */

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 6vh, 64px); }
.bcard {
  grid-column: span 2;
  padding: 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.018) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.bcard h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.bcard p { margin-top: 9px; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.b-wide { grid-column: span 3; padding: 14px 14px 28px; }
.b-wide h3 { margin: 22px 14px 0; font-size: 25px; }
.b-wide p { margin: 9px 14px 0; max-width: 440px; }
/* Die Abbildung steht direkt auf der Karte, ohne eigenen Kasten. Sie beginnt an derselben Kante wie der Text. */
.bvis { height: 190px; }
.vis-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; padding: 14px 14px 18px; }
.vis-week span { display: grid; grid-template-rows: 1fr auto; gap: 10px; font-family: var(--mono); font-size: 11px; text-align: center; color: var(--dim); }
.vis-week i {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(127, 168, 255, 0.85), rgba(47, 107, 255, 0.35));
  border: 1px solid rgba(160, 195, 255, 0.5);
  opacity: 0.35;
  animation: daywave 5.6s ease-in-out infinite;
}
.vis-week span:nth-child(2) i { animation-delay: 0.8s; }
.vis-week span:nth-child(3) i { animation-delay: 1.6s; }
.vis-week span:nth-child(4) i { animation-delay: 2.4s; }
.vis-week span:nth-child(5) i { animation-delay: 3.2s; }
.vis-week span:nth-child(6) i { animation-delay: 4s; }
.vis-week span:nth-child(7) i { animation-delay: 4.8s; }
.vis-test { display: grid; align-content: center; gap: 18px; padding: 0 14px; }
.variant { display: grid; grid-template-columns: 76px minmax(0, 1fr) 96px; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.variant i { height: 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.28) var(--w), rgba(255, 255, 255, 0.07) var(--w)); }
.variant.is-win { color: #fff; }
.variant.is-win i { background: linear-gradient(90deg, #7fa8ff var(--w), rgba(255, 255, 255, 0.07) var(--w)); }
.variant em {
  justify-self: start;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  color: var(--mint);
  background: rgba(111, 227, 193, 0.09);
  border: 1px solid rgba(111, 227, 193, 0.24);
  white-space: nowrap;
}
/* Glas-Bilder in den kleinen Karten: frei auf dem Grund, ohne Kasten und ohne Schein. Sie schweben leise (unten). */
.bobj { display: block; width: auto; height: 112px; margin: -2px 0 22px -4px; }
.bobj-wide { height: 92px; margin-top: 18px; }
/* Zwei Spalten: Die letzte Karte ist breit, Bild und Text stehen dort nebeneinander. */
@media (min-width: 721px) and (max-width: 1080px) {
  .bcard:last-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: center; }
  .bcard:last-child .bobj { grid-row: 1 / span 2; margin: 0 0 0 -4px; }
  .bcard:last-child h3 { align-self: end; }
  .bcard:last-child p { align-self: start; }
}

/* ---------- Das Anschreiben ---------- */

.letter, .plan {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(30px, 6vw, 90px);
}
.letter h2, .plan h2 { font-size: clamp(28px, 3.1vw, 44px); }
.letter h2 span, .plan h2 span { display: block; }
.marks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.marks li { display: flex; gap: 14px; }
.marks b, .mailc-body sup {
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--mono);
  font-weight: 500;
  color: #fff;
  background: linear-gradient(180deg, #2f66ea, #1a4fd8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.marks b { width: 24px; height: 24px; font-size: 12px; margin-top: 1px; }
.marks div { display: grid; gap: 3px; }
.marks strong { font-size: 16px; font-weight: 500; }
.marks span { font-size: 15px; line-height: 1.5; color: var(--muted); }
.mailc-body sup { width: 18px; height: 18px; margin-left: 4px; font-size: 11px; line-height: 1; vertical-align: 0.3em; }
.letter-vis { position: relative; }
.letter-glow {
  position: absolute;
  inset: -12% 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(52, 112, 255, 0.2) 0%, rgba(58, 118, 255, 0) 70%);
  filter: blur(40px);
  z-index: -1;
}
.mailc-xl {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 36, 62, 0.82), rgba(9, 13, 25, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 50px 120px -40px rgba(0, 0, 0, 0.9);
}
.mailc-xl .mailc-body p { font-size: 15.5px; }

/* ---------- Ein Tag im System ---------- */

.tl { position: relative; height: 400px; margin-top: clamp(36px, 6vh, 60px); }
.tl::before {
  content: "";
  position: absolute;
  inset: -26px -34px;
  border-radius: 26px;
  background:
    radial-gradient(50% 60% at 80% 50%, rgba(47, 107, 255, 0.16), transparent 75%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.tl-axis { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.22) 12%, rgba(255, 255, 255, 0.22) 88%, rgba(255, 255, 255, 0.06)); }
.tl-window {
  position: absolute;
  left: 60%;
  right: 0;
  top: calc(50% - 46px);
  height: 46px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(70, 128, 255, 0), rgba(70, 128, 255, 0.18));
  border-bottom: 1px solid rgba(130, 172, 255, 0.7);
}
.tl-window span { position: absolute; right: 12px; bottom: 9px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-hi); }
.tl-hours { position: absolute; left: 0; right: 0; top: calc(50% + 9px); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.ev {
  position: absolute;
  left: calc(var(--x) * 1%);
  width: 200px;
  display: grid;
  gap: 3px;
  padding-left: 14px;
  border-left: 1px solid rgba(130, 172, 255, 0.55);
}
.ev::before {
  content: "";
  position: absolute;
  left: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cfe0ff;
  box-shadow: 0 0 0 4px rgba(127, 168, 255, 0.22);
}
.ev.up { bottom: 50%; padding-bottom: 40px; }
.ev.up::before { bottom: -5px; }
.ev.down { top: 50%; padding-top: 40px; }
.ev.down::before { top: -4px; }
.ev time { font-family: var(--mono); font-size: 12px; color: var(--blue-hi); }
.ev b { font-size: 15.5px; font-weight: 500; }
.ev span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* ---------- Für wen ---------- */

/* Kopf und Bilder teilen sich dieselben zwei Spalten. */
.who-head, .who-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.who-head { align-items: end; }
.who-head h2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.08; }
.who-head h2 span { display: block; }
.who-head .sec-p { max-width: 430px; margin: 0 0 6px; }
.who-grid { margin-top: clamp(36px, 5vh, 56px); }
.who-card { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 22px; background: #0a0f1c; isolation: isolate; }
.who-main { grid-row: span 2; aspect-ratio: auto; }
.who-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: saturate(0.82) brightness(0.9); }
/* Verlauf trägt den Text, Lichtkante wie bei den Glasflächen. */
.who-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3, 5, 11, 0) 34%, rgba(3, 5, 11, 0.62) 66%, rgba(3, 5, 11, 0.95) 100%); }
.who-card::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.16); pointer-events: none; }
.who-card figcaption { position: absolute; z-index: 2; inset: auto 0 0; padding: 24px 26px; }
.who-card h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.who-card figcaption p { max-width: 42ch; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.who-main figcaption { padding: 32px 34px; }
.who-main h3 { font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -0.03em; }
.who-main figcaption p { font-size: 16px; }

/* ---------- Outbound-Plan ---------- */
/* Zwei Teile: der Hinweis im Abschnitt der Startseite (.plan-*) und die eigene Seite outbound-plan/ (.op, .quiz-*, .sheet). */

.plan .btn { margin-top: 30px; }
.plan-vis { position: relative; min-height: 400px; display: flex; align-items: center; }
.plan-vis::before {
  content: "";
  position: absolute;
  inset: 0 -6%;
  background: radial-gradient(50% 50% at 46% 56%, rgba(52, 112, 255, 0.2) 0%, rgba(58, 118, 255, 0) 70%);
  filter: blur(40px);
  z-index: -1;
}
.plan-back {
  position: absolute;
  right: 0;
  top: 14px;
  width: 72%;
  height: min(84%, 420px);
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  rotate: 3deg;
}
.plan-back span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); text-align: right; }
.plan-back i { justify-self: end; height: 10px; width: calc(var(--w) * 0.55); border-radius: 10px; background: rgba(255, 255, 255, 0.07); }
.plan-card, .sheet {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 42, 74, 0.86), rgba(10, 14, 28, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 50px 110px -36px rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.plan-card { width: min(460px, 92%); padding: 24px 26px 22px; }
.plan-card-h, .sheet-h, .quiz-count { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.plan-list { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: frage; }
.plan-list li {
  counter-increment: frage;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0 8px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--soft);
  text-wrap: pretty;
}
.plan-list li::before { content: counter(frage); padding-top: 2px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--blue-hi); }
.plan-card-f { padding-top: 15px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; color: #fff; }

/* Eigene Seite mit eigenem Einstieg: Licht und Lichtstrahl von oben wie auf der Startseite, rechts die Bühne mit
   einem Glas-Bild je Frage und einem blauen Schein dahinter (docs/gestaltung.md, Zeile „Outbound-Plan“). */
.op { position: relative; isolation: isolate; min-height: 100svh; padding: 128px 40px 112px; overflow: clip; }
.op .bg::before {
  background:
    radial-gradient(46% 40% at 50% -8%, rgba(70, 128, 255, 0.42) 0%, rgba(58, 116, 255, 0) 72%),
    radial-gradient(34% 48% at 79% 42%, rgba(36, 92, 240, 0.3) 0%, rgba(36, 92, 240, 0) 72%);
}
.op-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 452px); gap: 80px; align-items: start; max-width: 1200px; margin: 0 auto; }
.op [hidden] { display: none; }
/* Ohne Skript gibt es keinen Plan, dann steht nur der Hinweis mit dem Weg zum Gespräch da. */
.js .op-nojs, html:not(.js) .quiz-form, html:not(.js) .sheet { display: none; }
.op-nojs { max-width: 30em; padding-top: 40px; font-size: 19px; line-height: 1.55; color: var(--soft); }
.op-nojs a, .plan-rows a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }

.quiz-form, .quiz-result { max-width: 620px; }
.quiz-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
h1.quiz-count, .quiz-result > .quiz-count { font-size: 12px; letter-spacing: 0.12em; color: var(--blue-hi); }
.quiz-count b { font-weight: inherit; }
/* Fortschritt als Strecke mit fünf Stationen: erledigt, jetzt, offen. */
.quiz-prog { display: flex; align-items: center; margin: 18px 0 0; padding: 0; list-style: none; }
.quiz-prog li { display: flex; align-items: center; flex: 1; }
.quiz-prog li:last-child { flex: none; }
.quiz-prog i {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font: 500 11px/1 var(--mono);
  color: var(--dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: color 0.4s, background 0.4s, border-color 0.4s, box-shadow 0.5s var(--ease);
}
.quiz-prog li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); transition: background 0.5s var(--ease); }
.quiz-prog .on i { color: #fff; background: rgba(58, 118, 255, 0.3); border-color: rgba(140, 180, 255, 0.6); }
.quiz-prog .on:not(.now)::after { background: var(--blue-hi); }
.quiz-prog .now i { background: #2a5fe0; border-color: #a9c4ff; box-shadow: 0 0 0 5px rgba(47, 107, 255, 0.2), 0 0 26px rgba(84, 144, 255, 0.75); }

.quiz-step { min-width: 0; margin: 0; padding: 0; border: 0; }
/* legend fließt nur mit float wie ein normaler Block. */
.quiz-q { float: left; width: 100%; margin: 44px 0 0; padding: 0; font-size: clamp(30px, 3.9vw, 54px); line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.quiz-q:focus, .quiz-result:focus { outline: none; }
/* Der Fokus springt bei jedem Schritt auf die Frage. Der Abstand hält sie unter dem Kopf frei. */
.quiz-q, .quiz-result { scroll-margin-top: 150px; }
.quiz-sub { clear: both; padding-top: 12px; font-size: 16px; line-height: 1.4; color: var(--muted); }
.quiz-opts { clear: both; display: grid; gap: 10px; padding-top: 30px; }
.quiz-sub + .quiz-opts { padding-top: 16px; }
.quiz-opts label { position: relative; display: block; }
.quiz-opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.quiz-opts span {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 16px 22px;
  border-radius: 18px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
/* Kreis heißt eine Antwort, Quadrat heißt mehrere. */
.quiz-opts span::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.34);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.quiz-opts input[type="checkbox"] + span::before { border-radius: 6px; }
/* Der Haken rechts erscheint mit der Auswahl. */
.quiz-opts span::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  opacity: 0;
  scale: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 9.5l3.4 3.4L14 6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 0.2s, scale 0.35s var(--ease);
}
.quiz-opts input:checked + span::after { opacity: 1; scale: 1; }
.quiz-opts input:checked + span { color: #fff; background: linear-gradient(180deg, rgba(64, 124, 255, 0.34), rgba(40, 92, 230, 0.2)); border-color: rgba(140, 180, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 40px -18px rgba(30, 80, 230, 0.95); }
.quiz-opts input:checked + span::before { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 4px #2a5fe0; }
.quiz-opts input:focus-visible + span, .op button:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .quiz-opts input:not(:checked):hover + span { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); }
}
.quiz-hint { min-height: 22px; margin-top: 14px; font-size: 14.5px; line-height: 22px; color: var(--blue-hi); }
.quiz-foot { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.op button { margin: 0; font: inherit; border: 0; cursor: pointer; }
.quiz-next { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 500; letter-spacing: -0.005em; color: #0a1024; background: #fff; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.9); transition: background 0.2s, transform 0.2s; }
.quiz-next svg { transition: translate 0.2s var(--ease); }
.quiz-key { font-size: 13px; color: var(--dim); }
.quiz-key kbd { margin-left: 4px; padding: 3px 7px; border-radius: 6px; font-family: var(--mono); font-size: 11px; color: var(--soft); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); }
.op .quiz-back { margin-left: auto; }
.quiz-back, .quiz-restart { padding: 10px 0; font-size: 14.5px; color: var(--muted); background: none; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .quiz-back:hover, .quiz-restart:hover { color: #fff; }
  .quiz-next:hover { background: #e6ecf8; }
  .quiz-next:hover svg { translate: 3px 0; }
}
/* Der Hinweis auf die Enter-Taste hilft nur mit Tastatur. */
@media (hover: none), (pointer: coarse) { .quiz-key { display: none; } }

.quiz-result h2 { margin-top: 26px; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; }
.quiz-result h2 span { color: inherit; }
.plan-rows { margin: 32px 0 0; }
.plan-rows > div { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 6px 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.plan-rows dt { padding-top: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.plan-rows dd { margin: 0; font-size: 18px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.plan-tools { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
/* Werkzeuge im Ergebnis: Name als Link, darunter in einem Satz, wofür es da ist. */
.plan-tools li { display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid var(--line); }
.plan-tools li:first-child { padding-top: 0; border-top: 0; }
.plan-tools a { font-weight: 600; }
.plan-tools span { font-size: 16px; line-height: 1.5; color: var(--muted); }
.plan-ad { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--dim); }
/* Frage mit vielen kurzen Antworten: zwei Spalten, sobald Platz ist. */
@media (min-width: 370px) { .quiz-opts.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Unter 370 px bleibt eine Spalte, dafür mit flacheren Zeilen: acht Märkte sollen nicht drei Handylängen füllen. */
@media (max-width: 369px) {
  .quiz-opts.is-two { gap: 8px; }
  .quiz-opts.is-two span { min-height: 50px; padding: 10px 14px; }
}
/* Am Handy stehen die zwei Spalten enger, damit „Weiter“ ohne langes Scrollen erreichbar ist. Der Haken rechts
   entfällt dort; die gewählte Antwort bleibt an Farbe und gefülltem Kreis erkennbar. */
@media (min-width: 370px) and (max-width: 559px) {
  .quiz-opts.is-two span { gap: 10px; min-height: 54px; padding: 10px 12px; font-size: 15.5px; }
  .quiz-opts.is-two span::after { display: none; }
}

/* Marken unter dem Plan (Janik, 13.11.2026: Logos laufen durch). Die Liste läuft langsam von rechts nach links und
   hält an, wenn die Maus darauf steht. plan.js hängt dafür eine zweite, für Vorleseprogramme stumme Kopie an.
   Bei „Bewegung reduzieren“ steht die Liste als ruhiges Raster. */
.op-logos { margin-top: clamp(36px, 6vh, 64px); padding-top: 22px; border-top: 1px solid var(--line); }
.op-logos-label { margin: 0; font-size: 13px; color: var(--dim); }
.op-logos-run { margin-top: 20px; overflow: hidden; }
.op-logos-list { --logo: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; margin: 0; padding: 0; list-style: none; }
.op-logos-list[hidden] { display: none; }
.op-logos-list li { flex: none; }
/* Die Kopie für den Durchlauf zeigt sich nur, wenn die Liste läuft. */
.op-logos-list li[aria-hidden] { display: none; }
.op-logos-list img { display: block; width: calc(var(--logo) * var(--s)); height: auto; max-height: 34px; object-fit: contain; opacity: 0.74; }
@media (prefers-reduced-motion: no-preference) {
  .op-logos-run { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
  .op-logos-list.is-run { flex-wrap: nowrap; gap: 0; width: max-content; animation: op-logos-lauf var(--dauer, 40s) linear infinite; }
  .op-logos-list.is-run li { display: block; padding-right: 44px; }
  .op-logos-run:hover .op-logos-list.is-run { animation-play-state: paused; }
}
@keyframes op-logos-lauf { to { translate: -50% 0; } }
/* Die vier Stationen des Systems als Strecke. Die letzte ist das Ziel und trägt Blau. */
.plan-route { padding: 22px 0 26px; border-top: 1px solid var(--line); }
.plan-route-h { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.plan-route ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: station; }
.plan-route li {
  counter-increment: station;
  padding: 14px 14px 16px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.plan-route li::before { content: "0" counter(station); display: block; margin-bottom: 12px; font: 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--blue-hi); }
.plan-route li:last-child { background: linear-gradient(180deg, rgba(64, 124, 255, 0.34), rgba(40, 92, 230, 0.2)); border-color: rgba(140, 180, 255, 0.7); }
.plan-route li:last-child::before { color: #fff; }
.quiz-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 28px; border-top: 1px solid var(--line); }

/* Bühne: Glaskarte wie die Konsole im Einstieg. Oben das Bild zur Frage, darunter das Blatt, das sich füllt. */
.sheet {
  position: sticky;
  top: 104px;
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 -6px 80px -14px rgba(84, 144, 255, 0.6), 0 60px 140px -30px rgba(0, 0, 0, 0.9);
}
.sheet::before { content: ""; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(170, 205, 255, 0.95) 50%, transparent); }
.sheet-bar { position: relative; display: flex; align-items: center; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.sheet-bar-t { position: absolute; left: 50%; translate: -50% 0; font-size: 13px; color: var(--soft); white-space: nowrap; }
.sheet-stage {
  position: relative;
  height: 252px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(52% 58% at 50% 56%, rgba(64, 124, 255, 0.36) 0%, rgba(64, 124, 255, 0) 100%),
    radial-gradient(rgba(180, 205, 255, 0.16) 1px, transparent 1.5px) 50% 50% / 22px 22px;
}
/* Lichtfleck unter dem Bild, als stünde es auf Glas. */
.sheet-stage::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 30px; height: 22px; border-radius: 50%; background: rgba(120, 170, 255, 0.55); filter: blur(16px); transition: background 0.5s var(--ease); }
/* Zweites Licht, das erst unter der Maus aufgeht und ihr folgt (plan.js setzt --mx und --my, je von -1 bis 1). */
.sheet-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(42% 54% at calc(50% + var(--mx, 0) * 14%) calc(52% + var(--my, 0) * 12%), rgba(120, 170, 255, 0.34) 0%, rgba(120, 170, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.sheet-float { position: absolute; inset: 0; z-index: 1; }
.sheet-stage img {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: 68%;
  max-height: 64%;
  margin: auto;
  opacity: 0;
  scale: 0.88;
  translate: 0 16px;
  filter: drop-shadow(0 22px 26px rgba(8, 26, 100, 0.65)) drop-shadow(0 0 0 rgba(130, 176, 255, 0));
  transition: opacity 0.4s var(--ease), scale 0.8s var(--ease), translate 0.8s var(--ease), filter 0.6s var(--ease);
}
.sheet-stage img.on { opacity: 1; scale: 1; translate: 0 0; }
.sheet-body { padding: 20px 26px 20px; }
.sheet-rows { margin: 12px 0 0; }
.sheet-rows > div { padding: 11px 0 12px; border-top: 1px solid var(--line); }
.sheet-rows dt { font-size: 13px; line-height: 1.4; color: var(--dim); transition: color 0.3s; }
.sheet-rows .is-now dt { color: var(--blue-hi); }
.sheet-rows dd { min-height: 24px; margin: 3px 0 0; font-size: 16px; line-height: 1.5; color: #fff; text-wrap: pretty; }
.sheet-rows dd:empty::before { content: ""; display: block; width: 64%; height: 14px; border-bottom: 1px dashed rgba(255, 255, 255, 0.2); }
.is-done .sheet-rows > div:not(.is-set) { display: none; }
.sheet-note { padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--dim); }

/* Bewegung: Die Antworten kommen nacheinander, das Ergebnis baut sich Zeile für Zeile auf, das Bild schwebt. */
@media (prefers-reduced-motion: no-preference) {
  .quiz-step .quiz-q, .quiz-step .quiz-sub, .quiz-opts label,
  .quiz-result > *, .plan-rows > div, .plan-route li { animation: quiz-in 0.55s var(--ease) both; }
  .quiz-opts label:nth-child(1) { animation-delay: 0.06s; }
  .quiz-opts label:nth-child(2) { animation-delay: 0.11s; }
  .quiz-opts label:nth-child(3) { animation-delay: 0.16s; }
  .quiz-opts label:nth-child(4) { animation-delay: 0.21s; }
  .quiz-opts label:nth-child(5) { animation-delay: 0.26s; }
  .quiz-opts label:nth-child(n+6) { animation-delay: 0.3s; }
  .quiz-result > h2 { animation-delay: 0.08s; }
  .plan-rows > div { animation-delay: 0.2s; }
  .plan-rows > div ~ div { animation-delay: 0.32s; }
  .quiz-result > .plan-route { animation-delay: 0.44s; }
  .plan-route li:nth-child(1) { animation-delay: 0.52s; }
  .plan-route li:nth-child(2) { animation-delay: 0.62s; }
  .plan-route li:nth-child(3) { animation-delay: 0.72s; }
  .plan-route li:nth-child(4) { animation-delay: 0.82s; }
  .quiz-result > .quiz-end { animation-delay: 0.6s; }
  .sheet-rows .is-set dd { animation: quiz-in 0.5s var(--ease); }
  /* Das Bild schwebt langsam auf und ab und dreht sich dabei eine Spur. Der Lichtfleck darunter atmet im Gegentakt:
     oben ist er klein und schwach, unten breit und hell. */
  .sheet-float { animation: art-float 5.5s ease-in-out infinite alternate; }
  .sheet-stage::after { animation: art-glow 5.5s ease-in-out infinite alternate; }

  /* Am Rechner: Unter der Maus hebt sich das Bild, leuchtet stärker und neigt sich der Maus leicht zu.
     Die Neigung folgt der Maus zügig und geht beim Verlassen langsam zurück. */
  @media (hover: hover) and (pointer: fine) {
    .sheet-float {
      transform: perspective(900px) rotateX(calc(var(--my, 0) * -9deg)) rotateY(calc(var(--mx, 0) * 12deg)) translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 6px), 0);
      transition: transform 0.9s var(--ease);
    }
    .sheet-stage:hover .sheet-float { transition: transform 0.22s ease-out; }
    .sheet-stage:hover img.on {
      scale: 1.08;
      filter: drop-shadow(0 32px 34px rgba(8, 26, 100, 0.72)) drop-shadow(0 0 26px rgba(130, 176, 255, 0.5));
    }
    .sheet-stage:hover::before { opacity: 1; }
    .sheet-stage:hover::after { background: rgba(150, 192, 255, 0.85); }
  }
}
@keyframes quiz-in { from { opacity: 0; translate: 0 12px; } }
@keyframes art-float { from { translate: 0 8px; rotate: -1.4deg; } to { translate: 0 -10px; rotate: 1.4deg; } }
@keyframes art-glow { from { opacity: 1; scale: 1.1 1; } to { opacity: 0.6; scale: 0.84 1; } }

/* Niedrige Fenster am Rechner (Laptop): alles etwas dichter, damit Frage, Antworten und Knopf ohne Scrollen passen. */
@media (min-width: 901px) and (max-height: 920px) {
  .op { padding-top: 104px; }
  .quiz-q { margin-top: 28px; font-size: clamp(28px, 3.2vw, 42px); }
  .quiz-opts { gap: 8px; padding-top: 22px; }
  .quiz-opts span { min-height: 56px; padding: 12px 20px; font-size: 17px; }
  .quiz-hint { margin-top: 8px; }
  .sheet { top: 92px; }
  .sheet-stage { height: 188px; }
  .sheet-body { padding-top: 16px; padding-bottom: 14px; }
  .sheet-rows > div { padding: 7px 0 8px; }
  .sheet-note { padding-top: 10px; }
}

/* ---------- Im Vergleich ---------- */

.cmp-wrap { margin-top: clamp(36px, 6vh, 60px); }
.cmp-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.05fr; }
.cmp-row span { padding: 19px 22px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; color: var(--muted); }
.cmp-row span:first-child { padding-left: 0; color: var(--soft); font-weight: 500; }
.cmp-head span { border-top: 0; align-self: end; font-size: 14px; font-weight: 500; color: var(--soft); }
.cmp-row .us {
  color: #fff;
  font-weight: 500;
  background: rgba(58, 118, 255, 0.14);
  border-left: 1px solid rgba(130, 172, 255, 0.4);
  border-right: 1px solid rgba(130, 172, 255, 0.4);
  border-top-color: rgba(130, 172, 255, 0.18);
}
.cmp-head .us {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  padding-top: 24px;
  font-size: 17px;
  border-top: 1px solid rgba(130, 172, 255, 0.4);
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(58, 118, 255, 0.34), rgba(58, 118, 255, 0.14));
}
.cmp-row:last-child .us { border-bottom: 1px solid rgba(130, 172, 255, 0.4); border-radius: 0 0 18px 18px; padding-bottom: 24px; }

/* ---------- Vertrauen und Datenschutz ---------- */

.trust-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.trust-head h2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.08; }
.trust-head h2 span { display: block; }
.trust-head .sec-p { max-width: 480px; }
.trust-art { position: relative; width: min(100%, 340px); justify-self: center; }
.trust-art::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 3%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(127, 168, 255, 0.16), rgba(127, 168, 255, 0)); }
.trust-art img { position: relative; display: block; width: 100%; height: auto; }

/* Die Glas-Bilder der Startseite schweben leise (Janik, 13.11.2026). Leiser als auf der Plan-Seite: wenige Pixel,
   eine Spur Drehung, kein zusätzliches Licht. Jedes Bild hat seinen eigenen Takt, damit sie nicht im Gleichschritt
   gehen. Der Tresor bewegt sich am wenigsten und dreht sich nicht (docs/gestaltung.md, Zeile „Glas-Bilder“).
   Am Rechner hebt sich ein Bild leicht, wenn die Maus über seiner Karte oder über ihm steht. */
@media (prefers-reduced-motion: no-preference) {
  .bobj, .band-route, .trust-art img { animation: glas-float 6.5s ease-in-out infinite alternate; transition: scale 0.7s var(--ease); }
  .bobj-wide { animation-delay: -2.4s; }
  .bcard:last-child .bobj { animation-delay: -4.6s; }
  .band-route { animation-duration: 7.5s; animation-delay: -1.2s; }
  .trust-art img { animation-name: glas-float-ruhig; animation-duration: 8s; }
  @media (hover: hover) and (pointer: fine) {
    .bcard:hover .bobj { scale: 1.07; }
    .band-route:hover { scale: 1.04; }
    .trust-art:hover img { scale: 1.03; }
  }
}
@keyframes glas-float { from { translate: 0 3px; rotate: -0.8deg; } to { translate: 0 -5px; rotate: 0.8deg; } }
@keyframes glas-float-ruhig { from { translate: 0 3px; } to { translate: 0 -4px; } }
.trust-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; margin: clamp(28px, 4vh, 44px) 0 0; }
.trust-list > div { padding-top: 20px; border-top: 1px solid var(--line); }
.trust-list dt { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.trust-list dd { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.trust-foot { margin-top: clamp(28px, 4vh, 40px); }
.trust-note { max-width: 68ch; font-size: 14.5px; line-height: 1.55; color: var(--dim); text-wrap: pretty; }
.trust-links { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 6px; font-size: 14px; }
.trust-links a { padding-block: 10px; color: var(--blue-hi); border-radius: 4px; text-decoration: underline; text-decoration-color: rgba(127, 168, 255, 0.4); text-underline-offset: 4px; }
@media (max-width: 1080px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .trust-top { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .trust-art { order: -1; width: min(46vw, 190px); justify-self: start; }
  .trust-list { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 30px; }
  .trust-list > div { padding-top: 18px; }
  .trust-list dd { font-size: 16px; }
  .trust-links a { padding-block: 13px; }
}

/* ---------- Fragen ---------- */

.faq-list { margin-top: clamp(30px, 5vh, 50px); border-bottom: 1px solid var(--line); }
/* Breite Bildschirme: Überschrift links, Fragen rechts. Die Überschrift bleibt beim Lesen stehen. */
@media (min-width: 1081px) {
  .faq { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .faq .sec-head { position: sticky; top: 112px; }
  .faq .sec-head h2 { font-size: clamp(32px, 3.3vw, 48px); }
  .faq-list { margin-top: 0; }
}
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 23px 46px 23px 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 17px;
  font-size: 26px;
  font-weight: 300;
  color: var(--blue-hi);
  transition: rotate 0.25s;
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { max-width: 640px; padding: 0 0 24px; font-size: 16.5px; line-height: 1.6; color: var(--muted); }

/* ---------- Abschluss ---------- */

.closing { padding: clamp(84px, 13vh, 150px) 28px clamp(50px, 8vh, 90px); }
.closing-card { max-width: 1160px; margin: 0 auto; padding: clamp(48px, 9vh, 96px) 28px; }
.closing-card h2 span { display: block; }
.closing-p { max-width: 520px; margin: 18px 0 4px; font-size: 17.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- Fehlerseite (404.html) ---------- */
/* Ruhiger als der Einstieg der Startseite: ein Licht von oben, kein Lichtstrahl, kein weiter Schein am Knopf. */
.err {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(540px, 74svh, 720px);
  padding: 116px 24px 76px;
  text-align: center;
  overflow: hidden;
}
.err .bg::before { background: radial-gradient(46% 44% at 50% -10%, rgba(70, 128, 255, 0.36) 0%, rgba(58, 116, 255, 0) 72%); }
.err .kicker { animation: rise-in 1s var(--ease) 0.1s backwards; }
.err h1 { margin-top: 18px; font-size: clamp(44px, 5.4vw, 68px); line-height: 1.03; letter-spacing: -0.045em; }
.err .lede { max-width: 31em; margin-top: 16px; }
@media (max-width: 720px) {
  .err { padding: 96px 20px 60px; }
  .err h1 { font-size: clamp(36px, 10.5vw, 44px); }
  .err .cta { gap: 10px; margin-top: 24px; }
  .err .cta .btn { width: 100%; max-width: 340px; }
}

/* ---------- Fußzeile ---------- */

.foot {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 40px 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 14px;
  color: var(--dim);
}
.foot-top {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
}
.foot-brand a { display: inline-block; }
.foot-brand img { display: block; height: 24px; width: auto; }
.foot-brand p { max-width: 27ch; margin-top: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* Abzeichen „Available in the Chrome Web Store“: das Original von Google auf weißem Grund, nicht nachgebaut. */
.foot-brand .foot-store { display: inline-block; margin-top: 20px; border-radius: 8px; }
.foot-brand .foot-store img { height: 44px; width: auto; border-radius: 8px; background: #fff; }  /* die Datei ist durchsichtig; das Original steht auf Weiß */
.foot-brand .foot-store:hover img { filter: brightness(0.94); }
.foot-h { margin-bottom: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot-col a {
  display: inline-block;
  max-width: 100%;
  padding: 6px 0;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: break-word;
  hyphens: auto;
  transition: color 0.2s ease;
}
.foot a:focus-visible { outline-offset: 3px; border-radius: 4px; }
.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 32px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
}
/* Sprachen in der Fußzeile: an jeder Breite sichtbar, am Handy der einzige Sprachumschalter. */
.foot-lang ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.foot-lang li > * { display: inline-block; padding: 6px 0; line-height: 1.4; }
.foot-lang a { color: var(--muted); transition: color 0.2s ease; }
.foot-lang [aria-current] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .foot-col a:hover, .foot-lang a:hover { color: #fff; }
}
@media (max-width: 1180px) {
  .foot-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-brand p { max-width: none; margin-top: 12px; }
}
@media (max-width: 900px) {
  /* Die lange Spalte links über zwei Reihen, die drei kurzen daneben */
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-col:nth-child(2) { grid-row: span 2; }
}

/* =====================================================================
   Schmalere Breiten
   ===================================================================== */

@media (max-width: 1400px) {
  .float-left { left: -22px; }
  .float-right { right: -22px; }
}
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .console-body { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.06fr) minmax(0, 0.9fr); }
  .col-src { display: none; }
  .col-feed { border-left: 0; }
}
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bcard, .b-wide { grid-column: span 1; }
  .bcard:last-child { grid-column: 1 / -1; }
  .logos-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Zeitstrahl senkrecht */
  .tl { height: auto; max-width: 560px; margin-left: auto; margin-right: auto; padding-top: 34px; }
  .tl::before { inset: -6px -14px -22px; }
  .tl-axis, .tl-hours, .tl-window { display: none; }
  .ev, .ev.up, .ev.down { position: relative; left: auto; top: auto; bottom: auto; width: auto; padding: 0 0 28px 22px; }
  .ev:last-child { padding-bottom: 0; border-left-color: transparent; }
  .ev.up::before, .ev.down::before { top: 4px; bottom: auto; }
}
@media (max-width: 900px) {
  .who-head { grid-template-columns: minmax(0, 1fr); }
  .who-head .sec-p { max-width: 520px; margin-bottom: 0; }
  .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who-main { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .who-card:not(.who-main) { aspect-ratio: 4 / 3; }
  .console-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .col-meet { display: none; }

  .letter, .plan { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  /* Schmal: Die Bühne löst sich auf. Das Bild steht über der Frage, das Blatt als eigene Karte unter dem Ergebnis. */
  .op-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .op .bg::before { background: radial-gradient(70% 34% at 50% -6%, rgba(70, 128, 255, 0.46) 0%, rgba(58, 116, 255, 0) 72%); }
  .sheet { display: contents; }
  .sheet::before, .sheet-bar { display: none; }
  .sheet-stage { order: -1; height: 168px; margin-bottom: 22px; border: 0; background: radial-gradient(40% 56% at 50% 54%, rgba(64, 124, 255, 0.4) 0%, rgba(64, 124, 255, 0) 100%); }
  .sheet-stage::after { left: 34%; right: 34%; bottom: 14px; }
  .sheet-stage img { max-width: min(52%, 250px); max-height: 74%; }
  .sheet-body {
    display: none;
    max-width: 620px;
    margin-top: 48px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(30, 42, 74, 0.86), rgba(10, 14, 28, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 50px 110px -36px rgba(0, 0, 0, 0.95);
  }
  .is-done .sheet-body { display: block; }
  .sec-p { max-width: 560px; }

  /* Stationen: Bild bleibt oben stehen, Text läuft darunter durch */
  .sys { display: block; }
  .sys-stick {
    top: 64px;
    z-index: 4;
    height: 480px;
    margin: 0 -20px;
    padding: 10px 14px 26px;
    background: linear-gradient(180deg, var(--bg) 90%, rgba(3, 5, 11, 0));
  }
  .sv { padding: 20px; }
  .people .is-dim:last-child { display: none; }
  .station { min-height: 62vh; justify-content: flex-start; padding-top: 30px; }
  .station:last-child { min-height: 44vh; }
}

@media (max-width: 720px) {
  .stage-pin { --tilt: 12deg; --persp: 1400px; --scene-top: max(574px, 67svh); --scene-end: 172px; min-height: 760px; padding-top: 64px; }
  .stage-pin::after { height: 100px; }
  .nav-in { height: 64px; padding: 0 20px; }
  .logo img { height: 25px; }
  .btn-glass { height: 36px; padding: 0 14px; font-size: 13px; }
  .bg-beam { width: 760px; }

  .hero { padding: 10px 20px 0; }
  .pill { font-size: 12.5px; line-height: 1.35; gap: 9px; padding: 7px 14px 7px 12px; border-radius: 18px; text-align: left; max-width: 300px; }
  h1 { font-size: clamp(33px, 9.9vw, 50px); letter-spacing: -0.045em; line-height: 1.03; margin-top: 16px; }
  .lede { font-size: 15.5px; line-height: 1.5; margin-top: 8px; }
  .cta { flex-direction: column; align-items: center; width: 100%; gap: 4px; margin-top: 18px; }
  .cta .btn-primary { width: 100%; height: 52px; }
  .hero .btn-ghost { display: none; }
  .cta-note { font-size: 13px; margin-top: 11px; max-width: 290px; line-height: 1.4; }

  .caption { top: 80px; padding: 0 20px; }
  .caption-h span { display: block; }

  /* Konsole: die vier Schritte untereinander */
  .scene { width: calc(100% - 28px); }
  .scene-glow { inset: -70px -10% auto; height: 300px; }
  .console { border-radius: 16px; }
  .console-bar { height: 40px; padding: 0 12px 0 14px; gap: 10px; font-size: 12.5px; }
  .bar-dots, .bt-pre { display: none; }
  .bar-title { position: static; transform: none; }
  .console-body { display: block; height: auto; padding-bottom: 14px; }
  .console-body::before { display: none; }
  .col, .col-feed { border-left: 0; }
  .col-head { height: 38px; padding: 0 14px; }
  .col:not(:last-child) .col-head::after { content: "↓"; }
  .col-src, .col-meet { display: block; }
  .col-src .col-head, .col-sub, .kinds, .act { display: none; }
  .src-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .src-list li { gap: 6px; padding: 4px 8px 4px 5px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.09); font-size: 11px; }
  .src-list .slot { display: none; }
  .src-list li { padding: 4px 8px; }
  .col-feed::after { display: none; }
  .row { padding: 10px 14px 11px; gap: 3px 10px; grid-template-columns: 38px minmax(0, 1fr) auto; }
  .row:nth-of-type(n + 3) { display: none; }
  .row time { grid-row: 1 / span 2; align-self: start; padding-top: 3px; }
  .row-main { display: contents; }
  .row-main b { grid-column: 2; grid-row: 1; align-self: center; }
  .row-main span { grid-column: 2 / -1; grid-row: 2; }
  .row .chip { grid-column: 3; grid-row: 1; }
  .chip .lg { display: none; }
  .chip .sm { display: inline; }
  .col-mail .mailc-meta, .col-mail .mailc-foot, .col-mail .mailc-body p:not(:nth-child(2)), .col-mail .cks { display: none; }
  .col-mail .mailc-body { padding-bottom: 11px; }
  .col-meet .replyc, .col-meet .calc-head, .col-meet .calc-week { display: none; }
  .col-meet .calc-slot { margin-top: 12px; }
  .float { display: none; }

  .proof, .era, .system, .benefits, .letter, .day, .who, .plan, .compare, .trust, .faq { padding-left: 20px; padding-right: 20px; padding-top: 84px; }
  .proof { padding-top: 36px; }
  .proof-line { font-size: 15px; line-height: 1.5; text-wrap: balance; }
  .logos-label { font-size: 13px; }
  .who-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 30px; }
  .who-main, .who-card:not(.who-main) { aspect-ratio: 5 / 4; }
  .who-card::before { background: linear-gradient(180deg, rgba(3, 5, 11, 0) 20%, rgba(3, 5, 11, 0.7) 56%, rgba(3, 5, 11, 0.95) 100%); }
  .who-card figcaption, .who-main figcaption { padding: 20px 22px; }
  .who-card h3, .who-main h3 { font-size: 20px; }
  .who-card figcaption p, .who-main figcaption p { font-size: 15px; }
  .logos-list { --logo: 46px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; margin-top: 26px; }
  .voice { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 14px; }
  .voice figcaption { grid-column: 1; margin-top: 4px; }
  .voice-source { padding-block: 12px; margin-block: -12px; }
  h2 { font-size: clamp(30px, 8.4vw, 40px); }
  .sec-p { font-size: 16px; }

  .sys-tabs { height: 46px; padding: 0 10px; gap: 2px; }
  .sys-tabs span { padding: 5px 9px; font-size: 12px; }
  .sv { inset: 47px 0 0 0; padding: 16px 16px 36px; gap: 12px; justify-content: flex-start; }
  .sys-stick { height: 440px; }
  .sv1 { display: flex; align-items: stretch; }
  .flow-src { display: flex; flex-wrap: wrap; gap: 6px; }
  .flow-src li { height: auto; gap: 6px; padding: 4px 8px 4px 5px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.09); font-size: 11px; }
  .flow-src .slot { width: 14px; height: 14px; border-radius: 4px; }
  .flow-pipes { display: none; }
  .flow-sig { padding-left: 0; gap: 8px; }
  .flow-sig .sigc:last-child { display: none; }
  .firmc { padding: 13px; }
  .checks { margin-top: 11px; padding-top: 10px; gap: 7px; }
  .checks li { font-size: 13px; }
  .sv3 .mailc-body p { font-size: 13px; line-height: 1.5; }
  .sv3 .mailc-body { gap: 7px; padding: 11px 13px 4px; }
  .sv3 .mailc-top, .sv3 .mailc-meta { padding-left: 13px; padding-right: 13px; }
  .sv3 .mailc-foot { display: none; }
  .sv3 .mailc-body { padding-bottom: 12px; }
  .sv4 .replyc p { font-size: 13.5px; }
  .sv4 .replyc-top { letter-spacing: 0.04em; }
  .sv4 .calc-week i { height: 14px; }
  .station h3 { font-size: 26px; }
  .station p { font-size: 16px; }

  .band { border-radius: 22px; padding: 40px 20px; }
  .band .btn, .closing-card .btn { width: 100%; max-width: 340px; }
  .band p { font-size: 16px; }

  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bcard:last-child { grid-column: auto; }
  .b-wide h3 { font-size: 22px; }
  .bvis { height: 160px; }
  .vis-week { gap: 6px; padding: 12px 14px 14px; }
  .variant { grid-template-columns: 62px minmax(0, 1fr) 88px; gap: 10px; font-size: 12.5px; }

  .mailc-xl .mailc-body p { font-size: 14.5px; }
  .mailc-xl .mailc-body { padding: 14px 15px 4px; }
  .mailc-xl .mailc-top, .mailc-xl .mailc-meta { padding-left: 15px; padding-right: 15px; }

  .plan .btn { width: 100%; }
  .plan-vis { min-height: 0; padding: 20px 0 10px; }
  .plan-back { display: none; }
  .plan-card { width: 100%; padding: 20px 20px 18px; }
  .op { padding: 84px 20px 72px; }
  .sheet-stage { height: 136px; margin-bottom: 14px; }
  .quiz-q { margin-top: 28px; }
  .quiz-opts { gap: 8px; padding-top: 22px; }
  .quiz-opts span { min-height: 56px; padding: 12px 16px; border-radius: 16px; font-size: 16px; }
  .quiz-prog i { width: 28px; height: 28px; }
  .plan-route ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-rows > div { grid-template-columns: minmax(0, 1fr); padding: 16px 0; }
  .plan-rows dt { padding-top: 0; }
  .plan-rows dd { font-size: 17px; }
  .op-logos-list { --logo: 36px; }
  .quiz-end .btn { width: 100%; }

  /* Vergleich als Karten */
  .cmp-row.cmp-head { display: none; }
  .cmp-row { display: block; margin-bottom: 10px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09); }
  .cmp-row span { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border: 0; font-size: 14px; text-align: right; }
  .cmp-row span:first-child { display: block; padding: 0 0 8px; font-size: 16px; color: #fff; text-align: left; }
  .cmp-row span:nth-child(n + 2)::before { flex: none; color: var(--dim); text-align: left; font-weight: 400; }
  .cmp-row span:nth-child(2)::before { content: "Eigener Mitarbeiter"; }
  .cmp-row span:nth-child(3)::before { content: "Software"; }
  .cmp-row span:nth-child(4)::before { content: "Leadscraper"; color: var(--blue-hi); }
  .cmp-row .us, .cmp-row:last-child .us { margin-top: 4px; padding: 9px 11px; border: 1px solid rgba(130, 172, 255, 0.4); border-radius: 10px; }

  .faq summary { padding: 19px 40px 19px 0; font-size: 17px; }
  .faq summary::after { top: 12px; }
  .faq details p { font-size: 16px; }

  .closing { padding: 84px 14px 50px; }
  .closing-card { border-radius: 22px; }
  /* Hohe, schmale Karte: Die Berge stehen nur im unteren Teil, hinter den Knöpfen. */
  .closing-photo {
    top: 52%;
    height: 56%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 18%, #000 42%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 18%, #000 42%);
  }
  .closing-card .cta { margin-top: 26px; gap: 10px; }
  .foot { padding: 36px 20px 30px; }
  /* Zwei Spalten: links die lange, rechts zwei kurze untereinander, „Rechtliches“ darunter */
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .foot-base { margin-top: 34px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* =====================================================================
   Live-Zeile, Bewertungen, Porträts, Laufband, neuer Standard
   ===================================================================== */

.pill b { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); }
.pill-t { padding-right: 10px; border-right: 1px solid rgba(255, 255, 255, 0.14); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.pill-n { white-space: nowrap; }
.pill-n em { font-style: normal; font-family: var(--mono); font-variant-numeric: tabular-nums; color: #fff; }

.hero-proof {
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: clamp(16px, 2.2vh, 22px) 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
  animation: rise-in 1s var(--ease) 0.86s backwards;
}
.hero-proof li { padding: 0 24px; border-left: 1px solid var(--line); }
.hero-proof li:first-child { border-left: 0; }
.review-item { display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 5px; }
.review-brand { display: flex; align-items: center; justify-content: center; height: 28px; }
.review-brand img, .closing-proof img { display: block; object-fit: contain; flex: none; }
.review-count { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.review-count b { color: var(--ink); font-size: 13px; font-weight: 600; }
/* Sterne der Bewertungen: die einzige Stelle mit Bernstein (docs/gestaltung.md, Zeile „Farben“) */
.stars { display: block; flex: none; align-self: center; width: 62px; height: 11px; fill: #f5c451; }
.review-users { height: 28px; display: flex; align-items: center; color: var(--ink); font-size: 21px; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.review-users span { color: var(--muted); font-size: 17px; }
.review-date { margin: 10px 0 0; color: var(--dim); font-size: 12px; letter-spacing: 0.01em; text-wrap: balance; }
.hero > .review-date { animation: rise-in 1s var(--ease) 0.9s backwards; }
.closing-proof { display: flex; justify-content: center; gap: 32px; }
.closing-proof > * { display: grid; justify-items: center; align-content: center; grid-template-rows: 28px auto; gap: 8px; font-size: 12px; color: var(--muted); border-radius: 5px; }
.closing-proof img { align-self: center; }
.closing-proof b { color: var(--soft); font-weight: 500; }
.closing-card .review-date { margin-bottom: 32px; }
@media (hover: hover) and (pointer: fine) {
  a.review-item:hover .review-count, .closing-proof a:hover { color: var(--ink); }
}

.proof-line span { display: block; margin-top: 4px; color: var(--muted); }

img.avatar { display: block; padding: 0; object-fit: cover; background: #1a2a52; border: 1px solid rgba(255, 255, 255, 0.3); }
.avatar.xs { display: inline-block; width: 18px; height: 18px; margin-right: 7px; vertical-align: -5px; }

.src-list li, .slot { transition: color 0.4s, border-color 0.4s, box-shadow 0.4s, background 0.4s; }
.src-list li.is-ping { color: #fff; }
.src-list li.is-ping .slot { border-color: var(--blue-hi); background: rgba(70, 128, 255, 0.3); box-shadow: 0 0 0 3px rgba(127, 168, 255, 0.16); }
.row.is-new { animation: row-in 0.8s var(--ease); }
.row.is-new time { color: var(--mint); }

/* Zehn Arbeitsschritte als stehende Zeile. Keine Laufschrift: Der Leser sieht alle auf einmal. */
.worksteps {
  margin: 44px 0 0;
  padding: 16px 0;
  list-style: none;
  font-size: 14px;
  line-height: 2;
  text-align: center;
  text-wrap: balance;
  color: var(--muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.worksteps li { display: inline; margin: 0 12px; white-space: nowrap; }
.worksteps li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 5px;
  height: 5px;
  margin: -2px 9px 0 0;
  border-radius: 50%;
  background: rgba(111, 227, 193, 0.7);
}

.era-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 6vh, 60px); }
.era-col { padding: 28px 30px 32px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); }
.era-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.era-col ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; }
.era-col li { font-size: clamp(19px, 1.9vw, 26px); line-height: 1.2; font-weight: 500; letter-spacing: -0.028em; }
.era-old li { color: var(--dim); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, 0.25); }
.era-new {
  background: linear-gradient(180deg, rgba(58, 118, 255, 0.22), rgba(58, 118, 255, 0.05));
  border-color: rgba(130, 172, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.era-new .era-tag { color: var(--blue-hi); }
.era-new li { display: flex; align-items: baseline; gap: 13px; color: #fff; }
.era-new li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; translate: 0 -3px; background: var(--mint); }

@media (max-width: 720px) {
  .pill { max-width: 100%; gap: 6px; padding: 6px 13px 6px 11px; border-radius: 999px; font-size: 12px; }
  .pill-t { padding-right: 8px; }
  .hero-proof { width: 100%; margin-top: 16px; font-size: 11px; }
  .hero-proof li { flex: 1; min-width: 0; padding: 0 6px; }
  .review-brand img { max-width: 100%; height: auto; }
  .review-brand { width: 100%; }
  .review-count { flex-wrap: wrap; gap: 1px 4px; }
  .review-count span { font-size: 10px; }
  .stars { width: 54px; height: 9.5px; }
  .review-users { font-size: 19px; }
  .closing-proof { gap: 24px; }
  .closing-proof > * { font-size: 11px; }
  .cta-note { margin-top: 10px; }
  .worksteps { margin-top: 30px; padding: 14px 0; font-size: 13.5px; }
  .worksteps li { margin: 0 6px; }
  .worksteps li::before { margin-right: 8px; }
  .era-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .era-col { padding: 22px 22px 26px; }
}

@media (max-width: 360px) {
  /* „Ihr Kaltakquise-Plan“ und „Frage 3 von 6“ passen nur mit engerem Abstand in eine Zeile. */
  .quiz-top { gap: 10px; }
  .quiz-top .quiz-count { letter-spacing: 0.03em; white-space: nowrap; }
  .sys-tabs { padding-inline: 7px; gap: 0; }
  .sys-tabs span { padding-inline: 7px; font-size: 11px; }
  .stage-pin { --scene-top: max(620px, 75svh); }
  .bar-live { display: none; }
  .pill { font-size: 10px; padding-left: 9px; padding-right: 9px; gap: 5px; }
  .pill-t { font-size: 10px; padding-right: 5px; }
  .pill b { font-size: 10px; }
  .hero-proof li { padding: 0 4px; }
  .review-brand img[alt="OMR Reviews"] { width: 94px; height: auto; }
  .closing-proof { gap: 16px; }
  .review-sep { display: none; }
  .review-asof { display: block; }
  .band, .closing-card { padding-left: 16px; padding-right: 16px; }
  .band .btn, .closing-card .btn { padding-left: 8px; padding-right: 8px; }
  .btn-primary { font-size: 15px; }
  .logos-list { --logo: 40px; gap: 26px 14px; }
  .who-main, .who-card:not(.who-main) { aspect-ratio: 1 / 1; }
  .worksteps { line-height: 1.75; }
}

/* =====================================================================
   Termin mit Gründer · Kalender im Fenster (termin.js)
   Dunkle Fläche mit Rand und Lichtkante, kein Schein um das Fenster.
   ===================================================================== */

html.termin-open { overflow: hidden; padding-right: var(--termin-bar, 0px); }

.termin {
  width: min(1060px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: none;
  color: var(--ink);
  overflow: visible;
}
/* Das Fenster ist so hoch wie der Kalender und nie höher als der Bildschirm. Dann rollt nur der Kalender. */
.termin[open] { display: flex; flex-direction: column; }
.termin::backdrop {
  background: rgba(2, 4, 9, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.termin-win {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  border-radius: inherit;
  background: #0a0e18;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.termin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px 22px;
  border-bottom: 1px solid var(--line);
}
.termin-title { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
.termin-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--soft);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.termin-close:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .termin-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
}
.termin-body { position: relative; overflow: auto; overscroll-behavior: contain; }
/* Platz für den Monat (570 px bei Cal.com), damit das Fenster beim Laden nicht springt.
   Das Element von Cal.com erbt diese Mindesthöhe, der Innenabstand kommt dazu. */
.termin-cal { box-sizing: content-box; min-height: 570px; padding: 16px; }
.termin[data-state="laden"] .termin-cal, .termin[data-state="fehler"] .termin-cal { visibility: hidden; }
.termin-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: var(--soft);
}
.termin-state p { max-width: 26em; }
.termin[data-state="bereit"] .termin-state { display: none; }
.termin-note {
  padding: 11px 22px 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--dim);
}

@media (prefers-reduced-motion: no-preference) {
  .termin[open] { animation: termin-auf 0.28s var(--ease) both; }
  .termin[open]::backdrop { animation: termin-grund 0.28s ease both; }
}
@keyframes termin-auf {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
}
@keyframes termin-grund {
  from { opacity: 0; }
}

/* Bis zu dieser Breite zeigt Cal.com Monat und Uhrzeiten untereinander (gemessen am 14.11.2026: der
   Kalender ist dann höchstens 768 px breit). Das ist lang, also bekommt das Fenster von Anfang an die
   volle Höhe und der Kalender rollt darin. */
@media (max-width: 832px) {
  .termin { height: calc(100vh - 32px); height: calc(100dvh - 32px); }
  .termin-win { flex: 1; }
  .termin-cal { min-height: 0; }
}
@media (max-width: 720px) {
  .termin { width: calc(100vw - 16px); height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: none; border-radius: 20px; }
  .termin-head { padding-left: 18px; }
  .termin-cal { padding: 8px; }
  .termin-note { padding-inline: 18px; }
}