/* ===========================================================================
   Rusantech — Stylesheet
   ---------------------------------------------------------------------------
   Aufbau:
     1. Design-Tokens
     2. Reset & Basis
     3. Layout-Primitives
     4. Typografie-Bausteine
     5. Buttons & Formulare
     6. Navigation
     7. Hintergrund-Ebenen
     8. Sektionen
     9. Footer
    10. Rechtstexte (Impressum / Datenschutz / 404)
    11. Bewegung & Barrierefreiheit
    12. Scroll-Erlebnis (weiches Scrollen, Leitsatz, Faden)
   =========================================================================== */

/* --- 1. Design-Tokens ---------------------------------------------------- */
:root {
  /* Markenfarben, abgeleitet aus dem Logo (#18466A Navy / #189BC5 Cyan) */
  --brand-navy: #18466a;
  --brand-cyan: #189bc5;

  --accent: #56c2f0;
  --accent-strong: #2e86c1;
  --accent-soft: rgba(86, 194, 240, 0.12);
  --accent-line: rgba(86, 194, 240, 0.28);
  --accent-glow: rgba(86, 194, 240, 0.3);

  --bg: #07090f;
  --bg-elevated: #0d1119;
  --surface: rgba(255, 255, 255, 0.032);
  --surface-hover: rgba(255, 255, 255, 0.055);

  --border: rgba(255, 255, 255, 0.085);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #edeef3;
  --text-secondary: #9aa0b0;
  --text-muted: #5f6577;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-body);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1140px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(80px, 11vw, 140px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-lift: 0 24px 60px -28px rgba(0, 0, 0, 0.85);

  --nav-h: 68px;
}

/* --- 2. Reset & Basis ---------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

/* [hidden] ist nur ein Attributselektor und unterliegt jeder Klassenregel,
   die display setzt. Ohne diese Zeile blieben ausgeblendete Elemente stehen. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Von iOS erkannte Zahlen und Zeiten sollen nicht wie Links aussehen */
a[x-apple-data-detectors] {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(86, 194, 240, 0.28);
  color: #fff;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 999;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #04121c;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 3. Layout-Primitives ------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  z-index: 1;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(56px, 7vw, 96px);
}

.grid {
  display: grid;
  gap: 18px;
}

/* --- 4. Typografie-Bausteine --------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* Auf schmalen Displays sonst unschöner Umbruch mitten im Wort */
@media (max-width: 480px) {
  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
}

.section-head {
  max-width: 660px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.page-back-row {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

.page-back {
  display: flex;
  width: max-content;
  max-width: max-content;
  margin: 0;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.2;
}

.page-back svg {
  flex-shrink: 0;
}

.section-head h2 {
  margin-top: 18px;
  font-size: clamp(28px, 3.6vw, 44px);
}

.section-head p {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: clamp(15px, 1.6vw, 17px);
}

/* Branchen-Verweise unter „Für Unternehmen" — dieselben vier wie in der
   ersten Bedarfs-Check-Frage, hier als eigene Links statt Quiz-Option. */
.branch-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  list-style: none;
}

.branch-links a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13.5px;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.branch-links a:hover,
.branch-links a:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

/* --- Branchen-Landingpages: statische Zuerst/Später-Übersicht ---
   Bewusst eigene, einfache Klassen statt der .phase-Klassen aus dem
   Baukasten: dort gehören cursor:grab und touch-action:none zur echten
   Ziehbarkeit dazu — hier ist die Liste nur eine Übersicht, kein Bedienteil,
   das falsche Erwartung wäre eine Interaktion vorzutäuschen, die es auf
   dieser Seite nicht gibt. */
.branch-plan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .branch-plan {
    grid-template-columns: 1fr;
  }
}

.branch-plan__col {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.branch-plan__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.branch-plan__col--later .branch-plan__label {
  color: #ffcb9a;
}

.branch-plan__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted);
}

.branch-plan__tag::before {
  content: '· ';
}

.branch-plan__col ul {
  display: grid;
  gap: 12px;
  list-style: none;
}

.branch-plan__col li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.branch-plan__col li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--accent);
}

.branch-plan__col--later li svg {
  color: #ffcb9a;
}

.branch-plan__col li b {
  display: block;
  font-weight: 600;
  color: var(--text-secondary);
}

.branch-note {
  max-width: 68ch;
  margin-top: 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.branch-note a {
  color: var(--accent);
}

.text-accent {
  color: var(--accent);
}

.grad-text {
  background: linear-gradient(96deg, var(--accent-strong), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pill {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* --- 5. Buttons & Formulare ---------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease),
    background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: linear-gradient(96deg, var(--accent-strong), var(--accent));
  color: #04121c;
  box-shadow: 0 10px 34px -12px var(--accent-glow);
}

.btn--primary:hover {
  box-shadow: 0 16px 44px -12px var(--accent-glow);
}

.btn--ghost {
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* Zweiter Hero-Knopf: führt zur Live-Demo. Grün statt Blau, damit er sich
   vom Hauptknopf abhebt und zum „läuft gerade“-Punkt passt. */
.btn--demo {
  border-color: rgba(95, 220, 160, 0.4);
  background: rgba(95, 220, 160, 0.08);
  color: var(--text);
  box-shadow: 0 0 0 0 rgba(95, 220, 160, 0), 0 10px 30px -16px rgba(95, 220, 160, 0.5);
}

.btn--demo:hover {
  border-color: rgba(95, 220, 160, 0.7);
  background: rgba(95, 220, 160, 0.14);
  box-shadow: 0 14px 38px -14px rgba(95, 220, 160, 0.55);
}

.btn--sm {
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
}

.btn__arrow {
  transition: transform 0.25s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}

@keyframes ripple {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* Eingabefelder mit wanderndem Feldnamen ------------------------------------
   Die Beschriftung liegt zunächst im Feld und rutscht beim Tippen nach oben
   an den Rand. Das spart eine Zeile pro Feld, lässt die Felder deutlich
   größer werden und die Beschriftung bleibt trotzdem lesbar — anders als bei
   reinen Platzhaltern, die beim Tippen verschwinden.

   Der Trick dahinter: das Feld trägt `placeholder=" "`, damit `:placeholder-
   shown` überhaupt greift. Ist nichts eingegeben, gilt es als „gezeigt" und
   die Beschriftung sitzt mittig; sobald etwas drinsteht oder das Feld den
   Fokus hat, wandert sie hoch. */
.field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.field label {
  position: absolute;
  top: 19px;
  left: 17px;
  transform-origin: 0 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-muted);
  pointer-events: none;
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 26px 16px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.025);
  font-size: 15px;
  color: var(--text);
  resize: vertical;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.field textarea {
  min-height: 156px;
  padding-top: 28px;
  line-height: 1.6;
}

.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: var(--border-strong);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(86, 194, 240, 0.05);
  box-shadow: 0 0 0 3px rgba(86, 194, 240, 0.12);
}

/* Leer und ohne Fokus: Beschriftung sitzt groß im Feld */
.field input:placeholder-shown:not(:focus) + label,
.field textarea:placeholder-shown:not(:focus) + label {
  transform: translateY(0) scale(1);
}

.field input + label,
.field textarea + label {
  transform: translateY(-11px) scale(0.76);
}

.field input:focus + label,
.field textarea:focus + label {
  color: var(--accent);
}

.field__opt {
  margin-left: 5px;
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Ungültig erst melden, wenn jemand wirklich etwas eingegeben hat */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid {
  border-color: rgba(255, 140, 110, 0.55);
}

.field__count {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.field--message:focus-within .field__count {
  opacity: 1;
}

/* Auswahlliste: gleiche Bauhöhe wie die Eingabefelder. Der Feldname steht
   dauerhaft oben klein, weil eine Liste nie „leer" ist. */
.field--select label {
  transform: translateY(-11px) scale(0.76);
}

.field select {
  padding: 26px 40px 11px 16px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 4px), calc(100% - 17px) calc(50% + 4px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field select option {
  background: var(--bg-elevated);
  color: var(--text);
}

/* Honeypot: für Menschen unsichtbar, für Bots verlockend */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- 6. Navigation ------------------------------------------------------- */
/* Oben auf der Seite liegt die Leiste frei und durchsichtig über dem Hero.
   Sobald gescrollt wird, zieht sie sich zu einer schwebenden Glasleiste
   zusammen (.is-stuck). Sie bleibt immer sichtbar. */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 150;
  pointer-events: none;
}

/* Breiter als der Inhalt darunter: auf dem Laptop hat die Leiste Platz,
   und die fünf Ziele sollen Luft zwischen sich haben. */
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1320px;
  height: var(--nav-h);
  border: 1px solid transparent;
  border-radius: 18px;
  pointer-events: auto;
  transition: height 0.45s var(--ease), margin-top 0.45s var(--ease),
    max-width 0.45s var(--ease), padding 0.45s var(--ease), background 0.45s var(--ease),
    border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.site-nav.is-stuck .site-nav__inner {
  max-width: min(1260px, calc(100% - 32px));
  height: 62px;
  margin-top: 12px;
  padding-inline: 24px 10px;
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(10, 13, 20, 0.72);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand img {
  width: 28px;
  height: auto;
}

.brand__word {
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.brand__word span {
  color: var(--accent);
}

/* Die Ziele stehen rechtsbündig, direkt vor Telefon, WhatsApp und Knopf */
.site-nav__links {
  margin-left: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  font-size: 14.5px;
  color: var(--text-secondary);
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.nav-links a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}

.nav-links a.is-active,
.nav-links a[aria-current='page'] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.075);
}

/* Aufklappmenüs: beim Darüberfahren (oder Tab-Taste, oder Tippen auf dem
   Touch-Gerät) öffnen sich die Sparten. Das Menü hängt direkt unter dem Punkt,
   eine unsichtbare Brücke verhindert, dass es beim Hinüberfahren zugeht. */
.nav-item,
.brand-switch {
  position: relative;
}

.nav-chev {
  flex-shrink: 0;
  /* größere Trefferfläche: der Pfeil öffnet das Menü per Klick */
  box-sizing: content-box;
  margin: -8px -6px -8px -2px;
  padding: 8px 6px;
  cursor: pointer;
  opacity: 0.55;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-item.is-open .nav-chev,
.brand-switch.is-open .nav-chev {
  opacity: 1;
  transform: rotate(180deg);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 320px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(11, 14, 22, 0.96);
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
}

.nav-menu::before {
  content: '';
  position: absolute;
  inset: -12px 0 auto;
  height: 12px;
}

.nav-item.is-open > .nav-menu,
.brand-switch.is-open > .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.nav-menu--brand {
  left: 0;
  transform: translate(0, 6px);
}

.brand-switch.is-open > .nav-menu--brand {
  transform: translate(0, 0);
}

.nav-links .nav-menu a,
.nav-menu a {
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  white-space: normal;
  color: var(--text-secondary);
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.nav-menu b {
  font-weight: 600;
  color: var(--text);
}

.nav-menu span {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.nav-menu a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.07);
}

/* Der Farbpunkt der Marke steht links vom Namen, nicht darüber */
.nav-menu a[data-marke] {
  position: relative;
  padding-left: 32px;
}

.nav-menu a[data-marke]::before {
  position: absolute;
  top: 17px;
  left: 14px;
}

/* Fidant steht eingerückt unter Systems */
.nav-menu a.nav-menu__sub {
  margin-left: 22px;
  padding: 7px 12px;
  border-left: 1px solid rgba(143, 176, 255, 0.35);
  border-radius: 0 12px 12px 0;
}

.nav-menu a.nav-menu__sub b {
  font-size: 13.5px;
}

.nav-menu a.nav-menu__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 12px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
}

/* Marken-Seiten: Wortmarke führt zurück zu Rusantech, das Schildchen zum Anfang der Marke */
.brand-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-switch .brand__sub {
  margin-left: 2px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.brand-switch .brand__sub:hover {
  background: var(--accent-line);
}

.brand-switch .brand:hover .brand__word {
  opacity: 0.8;
}

.brand-switch__more {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  cursor: pointer;
}

.brand-switch__more:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 1079px) {
  .brand-switch__more,
  .brand-switch > .nav-menu {
    display: none;
  }
}

/* Gemeinsamer „läuft gerade“-Punkt für Menü, Hero-Knopf und Demo */
.live-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55);
  animation: pulse 2.4s ease-out infinite;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.site-nav__links + .site-nav__actions {
  margin-left: 0;
}

/* Telefon und WhatsApp: nur das Zeichen, die Nummer zeigt der Hinweis
   beim Darüberfahren. So bleibt sie eine Bewegung entfernt, ohne die
   Leiste zu füllen. */
.nav-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-secondary);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.nav-icon:hover,
.nav-icon:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-icon--wa {
  border-color: rgba(37, 211, 102, 0.45);
  background: rgba(37, 211, 102, 0.12);
  color: #4fe383;
}

.nav-icon--wa:hover,
.nav-icon--wa:focus-visible {
  border-color: rgba(37, 211, 102, 0.85);
  background: rgba(37, 211, 102, 0.24);
  color: #7ff0a8;
}

.nav-icon[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.9);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  pointer-events: none;
}

.nav-icon:hover::after,
.nav-icon:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.nav-cta {
  margin-left: 6px;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
}

/* Zwischen Handy-Menü und großem Bildschirm: Ziele etwas enger */
@media (max-width: 1239px) {
  .site-nav__inner {
    gap: 16px;
  }

  .nav-links {
    gap: 2px;
  }

  .nav-links a {
    padding: 8px 12px;
  }
}

.nav-burger {
  position: relative;
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

/* Die drei Balken liegen absolut in der Mitte übereinander; ihr Abstand
   entsteht allein über transform. So ergibt sich beim Öffnen ein sauberes
   Kreuz, unabhängig von Zeilenhöhen oder Innenabständen. */
.nav-burger span {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 1.5px;
  margin: auto;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}

.nav-burger span:nth-child(1) {
  transform: translateY(-4.5px);
}

.nav-burger span:nth-child(3) {
  transform: translateY(4.5px);
}

.nav-burger[aria-expanded='true'] span:nth-child(1) {
  transform: rotate(45deg);
}

.nav-burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav-burger[aria-expanded='true'] span:nth-child(3) {
  transform: rotate(-45deg);
}

/* Unter 1080 px passen die fünf Ziele nicht mehr sauber neben Marke und
   Knöpfe — dann übernimmt das Menü. */
@media (max-width: 1079px) {
  .site-nav__links {
    display: none;
  }

  .site-nav__links + .site-nav__actions {
    margin-left: auto;
  }

  .nav-burger {
    display: block;
  }
}

@media (max-width: 600px) {
  .site-nav__inner {
    gap: 10px;
  }

  .site-nav.is-stuck .site-nav__inner {
    padding-inline: 14px 7px;
  }

  .nav-cta {
    display: none;
  }

  .nav-icon,
  .nav-burger {
    width: 38px;
    height: 38px;
  }

  .site-nav__actions {
    gap: 6px;
  }

  /* Auf dem Handy reicht der Platz für keinen Hinweis — dort ist das
     Antippen ohnehin der Anruf selbst. */
  .nav-icon[data-tip]::after {
    content: none;
  }
}

/* Menü: eine ruhige Fläche über der ganzen Seite, große Ziele, unten die
   direkten Wege. Die Einträge laufen beim Öffnen leicht versetzt ein. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 149;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: calc(var(--nav-h) + 28px) var(--gutter) calc(26px + env(safe-area-inset-bottom));
  background: rgba(7, 9, 15, 0.94);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__nav {
  display: grid;
}

.mobile-menu__nav a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), color 0.2s var(--ease);
}

.mobile-menu__nav a:first-child {
  border-top: 1px solid var(--border);
}

.mobile-menu__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.mobile-menu__label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(23px, 6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.mobile-menu__label .live-dot {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

.mobile-menu__label small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
}

.mobile-menu__go {
  color: var(--text-muted);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.mobile-menu__nav a:hover .mobile-menu__go,
.mobile-menu__nav a:focus-visible .mobile-menu__go {
  color: var(--accent);
  transform: translateX(3px);
}

.mobile-menu__nav a:hover,
.mobile-menu__nav a[aria-current='page'] {
  color: var(--accent);
}

.mobile-menu__nav a.is-active .mobile-menu__no {
  color: var(--accent);
}

.mobile-menu.is-open .mobile-menu__nav a {
  opacity: 1;
  transform: none;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(2) { transition-delay: 0.04s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(3) { transition-delay: 0.08s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(4) { transition-delay: 0.12s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(5) { transition-delay: 0.16s; }

/* Was nicht in die fünf Hauptziele gehört, steht klein darunter */
.mobile-menu__more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.2s;
}

.mobile-menu.is-open .mobile-menu__more {
  opacity: 1;
}

.mobile-menu__more a {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.mobile-menu__more a:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.mobile-menu__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 26px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease) 0.22s, transform 0.6s var(--ease) 0.22s;
}

.mobile-menu.is-open .mobile-menu__foot {
  opacity: 1;
  transform: none;
}

.mobile-menu__foot .btn {
  grid-column: 1 / -1;
  border-radius: 14px;
}

.mobile-menu__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.mobile-menu__chip svg {
  color: var(--accent);
}

.mobile-menu__chip--wa {
  border-color: rgba(37, 211, 102, 0.4);
  background: rgba(37, 211, 102, 0.08);
}

.mobile-menu__chip--wa svg {
  color: #6ee79b;
}

/* Höhere Spezifität als `.mobile-menu a`, sonst gewinnt dort die Linkfarbe */
.mobile-menu a.btn--primary {
  color: #04121c;
}

/* --- 7. Hintergrund-Ebenen ----------------------------------------------- */
.bg-layers {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(760px circle at 12% 4%, rgba(46, 134, 193, 0.13), transparent 62%),
    radial-gradient(640px circle at 88% 26%, rgba(86, 194, 240, 0.09), transparent 60%),
    radial-gradient(700px circle at 50% 100%, rgba(24, 70, 106, 0.16), transparent 65%);
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}

#node-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.42;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(78px);
  animation: drift 26s ease-in-out infinite;
}

.orb--1 {
  top: 6%;
  left: -7%;
  width: 380px;
  height: 380px;
  background: rgba(46, 134, 193, 0.15);
}

.orb--2 {
  right: -5%;
  bottom: 6%;
  width: 320px;
  height: 320px;
  background: rgba(86, 194, 240, 0.12);
  animation-duration: 21s;
  animation-delay: -7s;
}

.orb--3 {
  top: 52%;
  left: 46%;
  width: 280px;
  height: 280px;
  background: rgba(24, 70, 106, 0.22);
  animation-duration: 32s;
  animation-delay: -14s;
}

@keyframes drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(42px, -32px) scale(1.08);
  }
  66% {
    transform: translate(-32px, 26px) scale(0.94);
  }
}

/* --- 8. Sektionen -------------------------------------------------------- */

/* 8.1 Hero */
.hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + 56px) 120px;
}

.hero h1 {
  max-width: 900px;
  margin: 22px 0 0;
  font-size: clamp(38px, 6.6vw, 76px);
  line-height: 1.04;
}

.hero h1 .line {
  display: block;
  overflow: hidden;
}

.hero h1 .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.9s var(--ease);
}

.hero.is-ready h1 .line > span {
  transform: translateY(0);
}

.hero.is-ready h1 .line:nth-child(2) > span {
  transition-delay: 0.1s;
}

.hero.is-ready h1 .line:nth-child(3) > span {
  transition-delay: 0.2s;
}

.hero__lead {
  max-width: 580px;
  margin-top: 26px;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.9vw, 18.5px);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero__fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.hero.is-ready .hero__fade {
  opacity: 1;
  transform: none;
}

.hero.is-ready .hero__lead {
  transition-delay: 0.34s;
}

.hero.is-ready .hero__actions {
  transition-delay: 0.44s;
}

/* Scroll-Hinweis unten mittig. Die Linie darunter ist der Anfang des
   Fadens, der beim Scrollen bis ans Seitenende mitläuft (scroll.js). */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  translate: -50% 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.25s var(--ease);
}

.hero.is-ready .hero__cue {
  transition-delay: 0.7s;
}

.hero__cue:hover {
  color: var(--text-secondary);
}

.hero__cue-line {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: linear-gradient(180deg, transparent, rgba(86, 194, 240, 0.35));
}

.hero__cue-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--accent));
  transform: translateY(-100%);
  animation: cueDrop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes cueDrop {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

@media (max-height: 640px) {
  .hero__cue {
    display: none;
  }
}

/* 8.3 Kennzahlen */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--border);
  overflow: hidden;
}

/* Jede Kennzahl ist ein Verweis. Sie soll aber nicht wie ein Link aussehen,
   sondern wie eine Kachel, die auf Berührung reagiert — der Pfeil erscheint
   erst dann und macht sie eindeutig anklickbar. */
.stats__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px;
  background: var(--bg-elevated);
  transition: background 0.22s var(--ease);
}

.stats__item:hover,
.stats__item:focus-visible {
  background: var(--surface);
}

.stats__item:hover .stats__value,
.stats__item:focus-visible .stats__value {
  color: var(--accent);
}

.stats__item:hover .stats__label,
.stats__item:focus-visible .stats__label {
  color: var(--text);
}

.stats__go {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.stats__item:hover .stats__go,
.stats__item:focus-visible .stats__go {
  opacity: 1;
  transform: translate(0, 0);
}

/* Ohne Zeiger — also auf dem Handy — steht der Pfeil dauerhaft da. Sonst
   sähe niemand, dass sich die Kacheln antippen lassen. */
@media (hover: none) {
  .stats__go {
    opacity: 0.55;
    transform: none;
  }
}

.stats__value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stats__label {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  text-wrap: balance;
}

/* Schmal wird aus dem Raster eine Liste ---------------------------------
   Als 2×2-Kachelblock strecken sich alle vier Felder auf die Höhe des
   längsten — und weil eine Beschriftung zwei Zeilen braucht und die nächste
   nur eine, standen unter drei von vier Zahlen große leere Flächen. Als
   Zeilen mit fester Zahlenspalte stehen die Werte sauber untereinander und
   der Block ist halb so hoch. */
@media (max-width: 820px) {
  .stats {
    grid-template-columns: 1fr;
  }

  .stats__item {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 15px 20px;
  }

  .stats__go {
    position: static;
    width: 22px;
    height: 22px;
  }

  .stats__value {
    font-size: 27px;
  }

  .stats__label {
    margin-top: 0;
    font-size: 14px;
  }
}

@media (max-width: 430px) {
  .stats__item {
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px 16px;
  }

  .stats__value {
    font-size: 24px;
  }

  .stats__label {
    font-size: 13px;
  }
}

/* 8.4 Leistungen — Bento-Raster mit unterschiedlich gewichteten Kacheln */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

/* Spannweiten bewusst ohne :not() — sonst hätten die Grundregeln eine höhere
   Spezifität als die Media-Query-Regeln und die Kacheln würden auf dem Handy
   weiter über mehrere Spalten laufen, die es dort gar nicht mehr gibt. */
.bento > * { grid-column: span 2; }
.bento > .bento__tile--lead { grid-column: span 4; }

@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento > * { grid-column: span 1; }
  .bento > .bento__tile--lead { grid-column: span 2; }
}

@media (max-width: 620px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .bento > *,
  .bento > .bento__tile--lead { grid-column: span 1; }
}

.bento__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

/* Lichtkegel folgt dem Mauszeiger (Koordinaten kommen aus main.js) */
.bento__tile::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(86, 194, 240, 0.13),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

.bento__tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.bento__tile:hover::before {
  opacity: 1;
}

.bento__tile > * {
  position: relative;
}

.bento__tile--lead {
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(46, 134, 193, 0.11), rgba(86, 194, 240, 0.02));
}

@media (max-width: 700px) {
  .bento__tile--lead {
    flex-direction: column;
    align-items: stretch;
  }
}

.bento__tile--lead .bento__body {
  flex: 1;
  min-width: 0;
}

.bento__tile--lead h3 {
  margin-top: 14px;
  font-size: clamp(19px, 2.2vw, 23px);
}

.bento__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(46, 134, 193, 0.26), rgba(86, 194, 240, 0.07));
  color: var(--accent);
}

.bento__body h3 {
  margin-bottom: 9px;
  font-size: 17.5px;
}

.bento__body p {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.bento__foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* --- Angedeutetes Anwendungsfenster in der großen Kachel --- */
.mockup {
  flex-shrink: 0;
  width: min(300px, 100%);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.mockup__bar {
  display: flex;
  gap: 5px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.mockup__bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
}

.mockup__bar span:first-child {
  background: var(--accent);
  opacity: 0.8;
}

.mockup__body {
  display: flex;
  gap: 10px;
  padding: 12px;
}

.mockup__side {
  display: grid;
  gap: 7px;
  flex-shrink: 0;
  width: 42px;
}

.mockup__side i {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.mockup__side i:first-child {
  background: rgba(86, 194, 240, 0.45);
}

.mockup__main {
  flex: 1;
  display: grid;
  gap: 12px;
}

.mockup__row {
  display: flex;
  gap: 7px;
}

.mockup__row b {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}

.mockup__row b:first-child { width: 46%; }
.mockup__row b:last-child { width: 26%; }

.mockup__chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 62px;
}

.mockup__chart u {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--accent), rgba(46, 134, 193, 0.25));
  transform-origin: bottom;
  animation: bar 3.6s ease-in-out infinite;
}

.mockup__chart u:nth-child(2) { animation-delay: -0.4s; }
.mockup__chart u:nth-child(3) { animation-delay: -0.8s; }
.mockup__chart u:nth-child(4) { animation-delay: -1.2s; }
.mockup__chart u:nth-child(5) { animation-delay: -1.6s; }
.mockup__chart u:nth-child(6) { animation-delay: -2s; }

@keyframes bar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.62); }
}

/* --- Gestapelte Ebenen in der Infrastruktur-Kachel --- */
.layers {
  position: relative;
  height: 92px;
  margin-top: 4px;
}

.layers i {
  position: absolute;
  left: 0;
  width: 92px;
  height: 30px;
  border: 1px solid var(--accent-line);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(46, 134, 193, 0.24), rgba(86, 194, 240, 0.05));
  transform: skewY(-14deg);
  animation: layerFloat 4.2s ease-in-out infinite;
}

.layers i:nth-child(1) { top: 50px; opacity: 0.45; }
.layers i:nth-child(2) { top: 29px; opacity: 0.7; animation-delay: -1.4s; }
.layers i:nth-child(3) { top: 8px; animation-delay: -2.8s; }

@keyframes layerFloat {
  0%, 100% { transform: skewY(-14deg) translateY(0); }
  50% { transform: skewY(-14deg) translateY(-5px); }
}

/* 8.45 Live-Demo — echte, bedienbare Werkzeuge im Gerätrahmen */
.section--lab {
  position: relative;
  isolation: isolate;
  /* Der Lichtschein ist breiter als die Sektion und sein Weichzeichner
     reicht noch weiter — ohne diese Zeile schiebt er die Seite seitlich auf.
     `clip` statt `hidden`, damit kein Scrollbereich entsteht. */
  overflow: clip;
}

/* Ruhig atmender Lichtschein hinter dem Gerät. Er sorgt dafür, dass die
   Sektion beim Scrollen auffällt, ohne dem Inhalt Aufmerksamkeit zu klauen. */
.lab-aura {
  position: absolute;
  top: 12%;
  left: 50%;
  z-index: -1;
  width: min(1100px, 120%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(86, 194, 240, 0.16),
    rgba(86, 194, 240, 0.05) 45%,
    transparent 70%
  );
  filter: blur(30px);
  pointer-events: none;
  animation: auraBreath 9s ease-in-out infinite;
}

@keyframes auraBreath {
  0%, 100% { opacity: 0.65; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.eyebrow--live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55);
  animation: pulse 2.4s ease-out infinite;
}

.lab {
  display: grid;
  gap: 16px;
}

/* --- Reiter --- */
.lab__tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Die Pille gleitet unter den aktiven Reiter, statt dass jeder Reiter
   einzeln umgefärbt wird — dadurch entsteht eine sichtbare Bewegung. */
.lab__pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--r-md);
  background: var(--demo-soft);
  box-shadow: inset 0 0 0 1px var(--demo-line), 0 0 28px -8px var(--demo);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.42s cubic-bezier(0.22, 1, 0.36, 1), height 0.2s var(--ease), opacity 0.2s var(--ease);
}

.lab__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.22s var(--ease), color 0.22s var(--ease),
    background 0.22s var(--ease);
}

.lab__tab svg {
  color: var(--text-muted);
  transition: color 0.22s var(--ease), transform 0.3s var(--ease);
}

.lab__tab:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.lab__tab[aria-selected='true'] {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.lab__tab[aria-selected='true'] svg {
  color: var(--demo);
  transform: scale(1.08);
}

.lab__tab svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.lab__tab-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lab__tab-sub {
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Wie viele Aufgaben der Tour in diesem Werkzeug schon erledigt sind */
.lab__tab-count {
  margin-left: auto;
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}

.lab__tab-count:empty {
  display: none;
}

.lab__tab-count.is-done {
  border-color: rgba(95, 220, 160, 0.45);
  background: rgba(95, 220, 160, 0.12);
  color: #5fdca0;
}

@media (max-width: 640px) {
  .lab__tabs {
    gap: 6px;
  }

  .lab__tab {
    flex-direction: column;
    gap: 6px;
    padding: 11px 6px 10px;
    font-size: 12.5px;
    text-align: center;
  }

  .lab__tab-sub {
    display: none;
  }

  .lab__tab-count {
    margin-left: 0;
  }
}

/* --- Tour ------------------------------------------------------------------
   Sitzt zwischen Reitern und Gerät, genau dort, wo der Blick hinfällt. Links
   der Fortschritt über alle Werkzeuge, rechts die Handgriffe im offenen. */
.quest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 12px 14px 12px 18px;
  border: 1px dashed var(--demo-line);
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--demo-soft), transparent 70%);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.quest__progress {
  display: grid;
  gap: 7px;
  min-width: 170px;
}

.quest__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.quest__title b {
  font-weight: 600;
  color: var(--text);
}

.quest__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--demo);
}

.quest__bar {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.quest__bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #56c2f0, #5fdca0);
  transition: width 0.6s var(--ease);
}

.quest__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  list-style: none;
}

.quest__task,
.quest__next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease), transform 0.2s var(--ease);
}

.quest__task:hover,
.quest__next:hover {
  border-color: var(--demo-line);
  background: var(--demo-soft);
  transform: translateY(-1px);
}

.quest__check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  color: transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}

.quest__task.is-done {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}

.quest__task.is-done .quest__check {
  border-color: #5fdca0;
  background: #5fdca0;
  color: #04140c;
}

.quest__task.is-fresh .quest__check {
  animation: questPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes questPop {
  0% { transform: scale(0.4); }
  100% { transform: scale(1); }
}

.quest__next {
  padding-left: 13px;
  border-color: var(--demo-line);
  background: var(--demo-soft);
  color: var(--demo);
  font-weight: 600;
}

/* Nur der Pfeil stupst, der Knopf selbst bleibt ruhig und gut zu treffen */
.quest__next svg {
  animation: questNudge 1.8s var(--ease) infinite;
}

@keyframes questNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.quest__finish {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-left: auto;
}

.quest__finish[hidden] {
  display: none;
}

.quest__finish p {
  max-width: 420px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.quest__finish b {
  display: block;
  color: var(--text);
}

.quest.is-complete {
  border-style: solid;
  border-color: rgba(95, 220, 160, 0.45);
  background: linear-gradient(90deg, rgba(95, 220, 160, 0.12), transparent 75%);
}

/* Das Bedienelement, auf das eine Aufgabe zeigt, leuchtet kurz auf */
.is-quest-hint {
  position: relative;
  z-index: 2;
  animation: questHint 0.8s var(--ease) 3;
}

@keyframes questHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 220, 160, 0); }
  40% { box-shadow: 0 0 0 4px rgba(95, 220, 160, 0.55), 0 0 22px 4px rgba(95, 220, 160, 0.35); }
}

/* Funken, wenn die letzte Aufgabe erledigt ist */
.quest__spark {
  position: fixed;
  z-index: 400;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  pointer-events: none;
  animation: questSpark 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes questSpark {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--rot)); }
}

@media (max-width: 640px) {
  .quest {
    padding: 12px;
  }

  .quest__progress {
    width: 100%;
  }

  .quest__list,
  .quest__finish {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quest__next svg,
  .is-quest-hint,
  .quest__task.is-fresh .quest__check {
    animation: none;
  }

  .is-quest-hint {
    box-shadow: 0 0 0 3px rgba(95, 220, 160, 0.6);
  }
}

/* Punkt am Reiter „Auswertung“, wenn sich die Planung geändert hat, während
   der Reiter zu war. Beide Demos sind dasselbe System — das soll man sehen,
   ohne erst hinüberzuklicken. */
.lab__tab.is-fresh::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
  animation: labFresh 1.8s var(--ease) infinite;
}

@keyframes labFresh {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .lab__tab.is-fresh::after {
    animation: none;
  }
}

/* --- Gerätrahmen -----------------------------------------------------------
   Jede Demo bekommt ihr eigenes Gesicht. Vorher sahen alle drei gleich aus —
   dieselbe Fläche, dieselbe Farbe, derselbe Kopf — und der Wechsel wirkte wie
   ein Textaustausch.

   Die drei Farben sind nicht beliebig gewählt, sondern liegen gleichmäßig auf
   dem Farbkreis: Blau für die Planung (Werkzeug), Bernstein für die Website
   (Werkbank, warm gegen die helle Vorschau), Grün für die Auswertung
   (Bericht). Weit genug auseinander, dass man den Wechsel sieht, und in
   derselben Sättigung, damit es nicht bunt wirkt. */
.lab {
  --demo: var(--accent);
  --demo-soft: var(--accent-soft);
  --demo-line: var(--accent-line);
}

.lab[data-demo='plan'] {
  --demo: #56c2f0;
  --demo-soft: rgba(86, 194, 240, 0.11);
  --demo-line: rgba(86, 194, 240, 0.34);
}

.lab[data-demo='web'] {
  --demo: #f0ab5a;
  --demo-soft: rgba(240, 171, 90, 0.12);
  --demo-line: rgba(240, 171, 90, 0.34);
}

.lab[data-demo='zahlen'] {
  --demo: #5fdca0;
  --demo-soft: rgba(95, 220, 160, 0.11);
  --demo-line: rgba(95, 220, 160, 0.32);
}

.lab__device {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
}

/* Planung: kühles Blau, Werkzeugcharakter */
.lab__device[data-demo='plan'] {
  background: #0a111a;
}

.lab__device[data-demo='plan'] .lab__screen {
  background: linear-gradient(180deg, rgba(86, 194, 240, 0.07), transparent 44%);
}

/* Website: Werkbank mit Millimeterpapier, damit die helle Vorschau darauf
   liegt statt darin zu schweben */
.lab__device[data-demo='web'] {
  background: #14100b;
}

.lab__device[data-demo='web'] .lab__screen {
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Auswertung: tiefer Grund, grüner Akzent, Berichtcharakter */
.lab__device[data-demo='zahlen'] {
  background: #071110;
}

.lab__device[data-demo='zahlen'] .lab__screen {
  background: radial-gradient(120% 80% at 50% 0%, rgba(95, 220, 160, 0.09), transparent 58%);
}

/* --- Vollbild ------------------------------------------------------------
   Die Demo steht im Fluss der Seite bewusst kompakt. Wer sie wirklich
   ausprobieren will, klappt sie einmal groß auf. */
.lab__full {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 4px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  font-size: 11.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.lab__full:hover {
  border-color: var(--demo-line);
  background: var(--demo-soft);
  color: var(--demo);
}

.lab__full-close {
  display: none;
}

.lab__full[aria-pressed='true'] .lab__full-open {
  display: none;
}

.lab__full[aria-pressed='true'] .lab__full-close {
  display: block;
}

.lab__device.is-full {
  position: fixed;
  inset: 14px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
}

.lab__device.is-full .lab__screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Der Platz darunter bleibt reserviert, sonst springt die Seite beim Öffnen */
.lab__device.is-full::before {
  content: '';
}

body.has-lab-full {
  overflow: hidden;
}

body.has-lab-full::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(4, 6, 10, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Im Vollbild darf das Gerät den ganzen Platz nehmen */
.lab__device.is-full .dev[data-device='desktop'] {
  max-width: min(100%, 1180px);
}

.lab__device.is-full .dev[data-device='tablet'] {
  max-width: 760px;
}

.lab__device.is-full .dev[data-device='handy'] {
  max-width: 340px;
}

.lab__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.028);
}

.lab__dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.lab__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.lab__dots i:first-child {
  background: var(--demo);
  transition: background 0.4s var(--ease);
}

.lab__url {
  flex: 1;
  min-width: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

/* Nur die Website-Demo läuft im Browser — die anderen beiden sind Programme
   und tragen deshalb einen Fenstertitel statt einer Adresszeile. */
.lab__device:not([data-demo='web']) .lab__url {
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.lab__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1px solid rgba(61, 220, 132, 0.35);
  border-radius: 999px;
  background: rgba(61, 220, 132, 0.09);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fe3ab;
}

.lab__badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3ddc84;
  animation: pulse 2.4s ease-out infinite;
}

.lab__screen {
  padding: clamp(16px, 2.4vw, 26px);
  min-height: 460px;
}

.lab__panel {
  animation: labIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes labIn {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
}

.lab__note {
  max-width: 720px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Zeiger, der die Karte im Selbstlauf begleitet */
.lab__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(86, 194, 240, 0.35);
  box-shadow: 0 0 16px rgba(86, 194, 240, 0.6);
  pointer-events: none;
}

/* --- Gemeinsame kleine Bausteine --- */
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    background 0.2s var(--ease), transform 0.2s var(--ease);
}

.chip-btn:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-1px);
}

.chip-btn--go {
  border-color: var(--demo-line);
  background: var(--demo-soft);
  color: var(--demo);
}

.chip-btn--go svg {
  transition: transform 0.25s var(--ease);
}

.chip-btn--go:hover svg {
  transform: rotate(-12deg) scale(1.12);
}

/* Umschalter mit zwei bis vier Stufen */
.seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
}

.seg__btn {
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}

.seg__btn:hover {
  color: var(--text);
}

.seg__btn.is-on {
  background: var(--demo-soft);
  color: var(--demo);
}

/* --- Demo 1: Einsatzplanung --- */
.dispo__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.dispo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dispo__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.dispo__sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Kennzahlenband über dem Brett — zählt bei jeder Verschiebung mit */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.metric {
  position: relative;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.metric__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.metric__label {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.metric__bar {
  display: block;
  height: 3px;
  margin-top: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.metric__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--demo), color-mix(in srgb, var(--demo) 55%, #fff));
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s var(--ease);
}

.metric__bar i.is-over {
  background: linear-gradient(90deg, #ff9d6e, #ff6b6b);
}

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

  .metric:last-child {
    grid-column: 1 / -1;
  }
}

.dispo__board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

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

.dispo__flash {
  margin-top: 14px;
  min-height: 20px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.dispo__flash.is-in {
  animation: flashIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes flashIn {
  from { opacity: 0; transform: translateY(-4px); }
}

.dispo__flash.is-ok { color: #8fe3b6; }
.dispo__flash.is-warn { color: #ffb694; }

.col {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.015);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.col.is-target {
  border-color: var(--demo);
  border-style: solid;
  background: var(--demo-soft);
}

.col__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.col__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.col__load {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.col__load.is-full {
  color: var(--demo);
}

/* Überbuchung: genau die Art Regel, die später eure eigene wird */
.col__load.is-over {
  color: #ff9d6e;
  font-weight: 600;
}

.col__bar {
  display: block;
  height: 3px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.col__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--demo), color-mix(in srgb, var(--demo) 55%, #fff));
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.col__fill.is-over {
  background: linear-gradient(90deg, #ff9d6e, #ff6b6b);
}

.col__list {
  display: grid;
  align-content: start;
  gap: 9px;
  flex: 1;
}

.col__empty {
  align-self: center;
  padding: 14px 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  opacity: 0.75;
}

.job {
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--bg-elevated);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

.job:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.9);
}

.job.is-dragging {
  z-index: 60;
  cursor: grabbing;
  border-color: var(--accent);
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.95);
  transform: rotate(-1.5deg) scale(1.03);
}

/* Fliegende Kopie im Selbstlauf */
.job--ghost {
  position: fixed;
  z-index: 80;
  border-color: var(--accent);
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}

.job.is-landing {
  animation: jobLand 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes jobLand {
  0% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(86, 194, 240, 0.5); }
  55% { box-shadow: 0 0 0 8px rgba(86, 194, 240, 0); }
  100% { transform: scale(1); }
}

.job__customer {
  font-size: 13px;
  font-weight: 600;
}

.job__task {
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-muted);
}

.job__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}

.job__day,
.job__hours {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.job__day {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.job__hours {
  background: var(--demo-soft);
  color: var(--demo);
}

.job__urgent {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 122, 90, 0.14);
  font-size: 10.5px;
  color: #ff9d6e;
}

/* --- Demo 2: Website --- */
.web {
  display: grid;
  gap: 16px;
}

.web__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: flex-end;
}

.web__group {
  display: grid;
  gap: 7px;
}

.web__legend {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.swatches {
  display: flex;
  gap: 8px;
}

.swatch {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--sw);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.swatch:hover {
  transform: translateY(-2px);
}

.swatch[aria-pressed='true'] {
  box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--sw);
}

/* --- Vorführung: der Knopf, der gerade selbst gedrückt wird --------------
   Die Vorschau schaltet beim Hereinscrollen einmal selbst durch. Ohne
   Hinweis sieht man nur das Ergebnis und nicht, dass hier Knöpfe sind —
   also blitzt der jeweilige Knopf kurz auf. Ein Ring, der aufgeht und
   verschwindet, kein Dauerleuchten. */
/* Der Ring läuft über `outline`, nicht über `box-shadow` — das Farbfeld
   trägt seine Auswahl schon als Schatten, und zwei Schatten am selben
   Element würden sich gegenseitig ausknipsen. */
@keyframes autoTap {
  0% {
    outline-color: var(--demo);
    outline-offset: 0;
  }
  100% {
    outline-color: transparent;
    outline-offset: 9px;
  }
}

.seg__btn.is-auto,
.swatch.is-auto {
  outline: 2px solid transparent;
  animation: autoTap 0.46s var(--ease);
}

.swatch.is-auto {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .seg__btn.is-auto,
  .swatch.is-auto {
    animation: none;
  }
}

/* --- Gezeichnete Geräte ---------------------------------------------------
   Der Umschalter ändert nicht bloß die Breite: Laptop, Tablet und Handy sind
   als Gehäuse gezeichnet. Alles läuft über ein Attribut und Übergänge, damit
   der Wechsel fährt statt zu springen. */
.devstage {
  display: flex;
  justify-content: center;
  padding: clamp(18px, 3vw, 34px) clamp(24px, 4vw, 52px) clamp(26px, 3vw, 38px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: radial-gradient(120% 100% at 50% 0%, rgba(86, 194, 240, 0.09), transparent 62%),
    rgba(0, 0, 0, 0.28);
}

.dev {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.devstage {
  align-items: center;
}

.dev__frame {
  position: relative;
  /* Bezugsgröße für die Abfragen weiter unten. Sie muss am Gehäuse hängen,
     nicht an der Bühne: beim Handy ist das Gehäuse 306 px breit, die Bühne
     aber weiterhin die volle Spalte — die Vorschau würde sonst nie umbrechen. */
  container-type: inline-size;
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(165deg, #333944, #171b22 45%, #262b34);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition: padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kamera, Steg und Fuß gehören je nach Gerät dazu oder nicht */
.dev__cam,
.dev__notch,
.dev__home,
.dev__base {
  display: block;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.dev__cam {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #0b0e13;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.dev__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 3;
  width: 78px;
  height: 18px;
  margin-left: -39px;
  border-radius: 0 0 11px 11px;
  background: #05070a;
}

.dev__home {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 3;
  width: 92px;
  height: 4px;
  margin-left: -46px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
}

/* Laptopfuß: nach unten breiter werdend, mit Griffmulde und Lichtkante oben.
   Der Trapezschnitt macht den Unterschied zwischen „Balken" und „Gerät". */
.dev__base {
  position: relative;
  width: 116%;
  max-width: 116%;
  height: 15px;
  margin-top: -1px;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, #4a505b 0, #4a505b 1.5px, #2b3038 1.5px, #171b22 100%);
  clip-path: polygon(2.4% 0, 97.6% 0, 100% 100%, 0 100%);
  box-shadow: 0 16px 26px -14px rgba(0, 0, 0, 0.95);
}

/* Griffmulde in der Vorderkante */
.dev__base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 84px;
  height: 5px;
  margin-left: -42px;
  border-radius: 0 0 7px 7px;
  background: rgba(0, 0, 0, 0.6);
}

/* Echte Seitenverhältnisse. Vorher hatte die Vorschau eine feste Höhe von
   376 px, egal wie breit das Gerät war — der Laptop war dadurch fast 3:1 und
   das Handy beinahe quadratisch. Beides sah verzerrt aus, weil es das war.
   Jetzt gibt jedes Gerät sein Format vor und die Breite folgt daraus. */

/* Laptop — 16:10 ------------------------------------------------------------
   Vorher sah der Deckel aus wie ein Tablet mit einem Balken darunter: gleich
   dicker Rand ringsum, kaum Rundung, ein gerader Fuß. Ein Laptop hat oben und
   seitlich einen dünnen Rand, unten ein deutlich breiteres Kinn, darunter ein
   Scharnier und einen Fuß, der nach unten breiter wird. */
.dev[data-device='desktop'] {
  max-width: 820px;
}

.dev[data-device='desktop'] .site {
  aspect-ratio: 16 / 10;
}

.dev[data-device='desktop'] .dev__frame {
  padding: 10px 10px 26px;
  border-radius: 13px 13px 3px 3px;
  background: linear-gradient(168deg, #3e444e, #1b1f26 26%, #15181e 72%, #2f343d);
}

.dev[data-device='desktop'] .dev__cam,
.dev[data-device='desktop'] .dev__base,
.dev[data-device='desktop'] .dev__home {
  opacity: 1;
}

.dev[data-device='desktop'] .dev__cam {
  top: 4px;
}

/* Markenstrich im Kinn statt Bedienleiste */
.dev[data-device='desktop'] .dev__home {
  bottom: 9px;
  width: 46px;
  height: 3px;
  margin-left: -23px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}

/* Tablet — 4:3 */
.dev[data-device='tablet'] {
  max-width: 592px;
}

.dev[data-device='tablet'] .site {
  aspect-ratio: 4 / 3;
  /* Aus demselben Grund wie beim Handy (siehe unten) gedeckelt */
  max-height: calc((592px - 32px) * 3 / 4 + 1px);
}

.lab__device.is-full .dev[data-device='tablet'] .site {
  max-height: calc((760px - 32px) * 3 / 4 + 1px);
}

.dev[data-device='tablet'] .dev__frame {
  padding: 22px 16px;
  border-radius: 24px;
}

.dev[data-device='tablet'] .dev__cam {
  opacity: 1;
  top: 10px;
}

/* Auf schmalen Displays wurde der Laptop vorher auf eine feste Höhe gesetzt.
   Bei 250 px Breite ergab das ein hochkantes Gerät — ein Laptop im
   Hochformat, und genau so sah es auch aus. Die Verhältnisse bleiben jetzt
   überall gleich; damit das Bild trotzdem so groß wie möglich wird, gibt die
   Bühne auf dem Handy fast ihren ganzen Rand ab. */
@media (max-width: 700px) {
  .devstage {
    padding: 16px 8px 22px;
  }
}

/* Handy — 9:19,5 wie ein heutiges Gerät */
.dev[data-device='handy'] {
  max-width: 276px;
}

.dev[data-device='handy'] .site {
  aspect-ratio: 9 / 19.5;
  /* Beim Wechsel auf das Handy gilt das hohe Seitenverhältnis sofort, die
     Breite schrumpft aber erst in 0,4 s. Ohne Deckel wäre die Vorschau
     dazwischen kurz fast 1.900 px hoch und die ganze Seite darunter würde
     springen. Der Deckel entspricht genau der Höhe bei voller Handybreite
     (276 px Gehäuse − 22 px Rand). */
  max-height: calc((276px - 22px) * 19.5 / 9 + 1px);
}

.lab__device.is-full .dev[data-device='handy'] .site {
  max-height: calc((340px - 22px) * 19.5 / 9 + 1px);
}

.dev[data-device='handy'] .dev__frame {
  padding: 11px 11px 26px;
  border-radius: 40px;
}

.dev[data-device='handy'] .dev__notch,
.dev[data-device='handy'] .dev__home {
  opacity: 1;
}

/* Kerbe oben, Steg unten: beide brauchen Luft, sonst liegt Inhalt darunter */
.dev[data-device='handy'] .site__bar {
  padding-top: 24px;
}

.dev[data-device='handy'] .site__scroll {
  padding-bottom: 26px;
}

.web__note {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* --- Die Vorschau selbst ---------------------------------------------------
   Bewusst hell, damit sie sich wie eine echte Kundenseite anfühlt und nicht
   wie ein weiterer Kasten dieser Seite. Jede Branche bringt ihre eigene
   Bildsprache mit: Schrift, Rundungen, Anordnung und Kartenstil ändern sich,
   nicht nur der Text. */
.site {
  --site-accent: #2563eb;
  --site-ink: #0f1c3a;
  --site-tint: #eaf0ff;
  --site-paper: #ffffff;
  --site-soft: #fbfbfc;
  --site-muted: #5d646f;
  --site-line: rgba(0, 0, 0, 0.08);
  --site-r: 9px;
  --site-btn-r: 8px;
  --site-font: var(--font-sans);
  --site-display: var(--font-display);
  --site-track: 0;

  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: var(--site-paper);
  color: #1a1d23;
  font-family: var(--site-font);
  overflow: hidden;
  transition: background 0.3s var(--ease), border-radius 0.4s var(--ease);
}

.dev[data-device='tablet'] .site {
  border-radius: 6px;
}

.dev[data-device='handy'] .site {
  border-radius: 30px;
}

/* Gastronomie: warmes Papier, Serifen, großzügige Rundungen */
.site[data-branch='gastro'] {
  --site-paper: #fffaf4;
  --site-soft: #fff3e6;
  --site-muted: #6b5c4d;
  --site-line: rgba(90, 60, 30, 0.12);
  --site-r: 16px;
  --site-btn-r: 999px;
  --site-display: Georgia, 'Times New Roman', serif;
  --site-track: 0.01em;
}

/* Praxis: kühles Weiß, sehr weiche Formen, viel Luft */
.site[data-branch='praxis'] {
  --site-paper: #ffffff;
  --site-soft: #f4f8fb;
  --site-muted: #64707d;
  --site-line: rgba(20, 50, 80, 0.09);
  --site-r: 20px;
  --site-btn-r: 999px;
  --site-track: 0.005em;
}

/* Handwerk: kantig, kräftig, technisch */
.site[data-branch='handwerk'] {
  --site-paper: #ffffff;
  --site-soft: #f5f7fa;
  --site-muted: #56606d;
  --site-line: rgba(0, 0, 0, 0.11);
  --site-r: 3px;
  --site-btn-r: 3px;
  --site-track: -0.01em;
}

.site__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  padding: clamp(10px, 1.6cqw, 18px) clamp(15px, 2.6cqw, 30px);
  border-bottom: 1px solid var(--site-line);
  transition: border-color 0.4s var(--ease);
}

.site[data-branch='gastro'] .site__bar {
  justify-content: center;
  border-bottom-style: solid;
}

.site__logo {
  font-family: var(--site-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--site-track);
  color: var(--site-ink);
  white-space: nowrap;
  transition: color 0.4s var(--ease);
}

.site[data-branch='handwerk'] .site__logo {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
}

.site[data-branch='gastro'] .site__logo {
  font-size: 17px;
  font-weight: 400;
}

.site__nav {
  display: flex;
  gap: 14px;
  flex: 1;
}

.site[data-branch='gastro'] .site__nav {
  flex: 0;
  order: 2;
}

.site__nav span {
  font-size: 11px;
  color: var(--site-muted);
  white-space: nowrap;
}

.site[data-branch='handwerk'] .site__nav span {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.site__cta {
  padding: 6px 13px;
  border-radius: var(--site-btn-r);
  background: var(--site-accent);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: background 0.35s var(--ease), border-radius 0.4s var(--ease);
}

.site[data-branch='gastro'] .site__cta {
  order: 3;
  background: transparent;
  border: 1px solid var(--site-accent);
  color: var(--site-accent);
}

.site__burger {
  display: none;
  flex-direction: column;
  gap: 3px;
}

.site__burger i {
  width: 15px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--site-ink);
}

.site__scroll {
  flex: 1;
  min-height: 0;
  /* Mit dem Geräteformat ist die Fläche höher geworden. Abstände und Bild
     wachsen deshalb mit der Gerätebreite mit, sonst klebt alles oben und
     darunter bleibt ein leeres Drittel stehen. */
  padding: clamp(15px, 2.6cqw, 30px);
  overflow-y: auto;
  scrollbar-width: none;
}

.site__scroll::-webkit-scrollbar {
  width: 0;
}

/* Weicher Abschluss unten. Ohne ihn endet der Inhalt mitten in einer Kachel
   und sieht abgeschnitten aus statt fortgesetzt. */
.site::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(to top, var(--site-paper) 30%, transparent);
  transition: background 0.4s var(--ease);
}

.site__hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(14px, 2.4cqw, 28px);
  align-items: center;
}

/* Gastronomie stellt das Bild nach oben und zentriert den Text darunter */
.site[data-branch='gastro'] .site__hero {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

.site[data-branch='gastro'] .site__hero-art {
  order: -1;
  width: 100%;
  height: clamp(64px, 12cqw, 116px);
}

.site[data-branch='gastro'] .site__hero {
  gap: 12px;
}

.site[data-branch='gastro'] .site__cards {
  margin-top: 12px;
}

.site[data-branch='gastro'] .site__btns {
  justify-content: center;
}

/* Praxis: Bild links als stehender Bogen. Vorher hatte es nur eine feste
   Höhe und durfte die halbe Breite einnehmen — aus dem Bogen wurde dadurch
   eine breitgezogene Kuppel. Jetzt gibt das Seitenverhältnis die Form vor
   und eine Höchstbreite hält sie hochkant. */
.site[data-branch='praxis'] .site__hero {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
}

.site[data-branch='praxis'] .site__hero-art {
  order: -1;
  width: clamp(96px, 22cqw, 168px);
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 22px 22px;
}

.site__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--site-accent);
  transition: color 0.35s var(--ease);
}

.site[data-branch='gastro'] .site__eyebrow {
  font-family: var(--site-display);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
}

.site__title {
  margin-top: 6px;
  min-height: 1.15em;
  font-family: var(--site-display);
  /* cqw statt vw: die Überschrift richtet sich nach der Breite des Geräts.
     Im Handy stand sonst dieselbe 26-px-Zeile wie im Laptop und brauchte
     vier Zeilen für vier Wörter. */
  font-size: clamp(16px, 4.4cqw, 26px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--site-track);
  color: var(--site-ink);
  transition: color 0.35s var(--ease);
}

.site[data-branch='gastro'] .site__title {
  font-weight: 400;
  line-height: 1.2;
}

.site[data-branch='praxis'] .site__title {
  font-weight: 600;
  line-height: 1.2;
}

.site__title.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 2px;
  vertical-align: -0.08em;
  background: var(--site-accent);
  animation: caret 0.9s steps(1) infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

.site__text {
  margin-top: 8px;
  max-width: 46ch;
  font-size: clamp(10.5px, 1.9cqw, 11.5px);
  line-height: 1.55;
  color: var(--site-muted);
}

.site[data-branch='praxis'] .site__text {
  line-height: 1.75;
}

.site__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.site__btn {
  padding: 7px 14px;
  border-radius: var(--site-btn-r);
  background: var(--site-accent);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  transition: background 0.35s var(--ease), border-radius 0.4s var(--ease);
}

.site[data-branch='handwerk'] .site__btn {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.site__btn--ghost {
  background: var(--site-tint);
  color: var(--site-ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.site__hero-art {
  height: clamp(104px, 21cqw, 178px);
  border-radius: var(--site-r);
  background: linear-gradient(135deg, var(--site-accent), var(--site-ink));
  transition: background 0.45s var(--ease), border-radius 0.45s var(--ease),
    height 0.45s var(--ease);
}

/* Handwerk bekommt ein Raster wie auf einem Plan */
.site[data-branch='handwerk'] .site__hero-art {
  background-image: linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(135deg, var(--site-accent), var(--site-ink));
  background-size: 16px 16px, 16px 16px, 100% 100%;
}

.site[data-branch='gastro'] .site__hero-art {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(120deg, var(--site-accent), var(--site-ink));
}

.site__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.4cqw, 16px);
  margin-top: clamp(14px, 3cqw, 30px);
}

.site__card {
  display: grid;
  gap: 3px;
  padding: clamp(10px, 1.6cqw, 16px);
  border: 1px solid var(--site-line);
  border-radius: var(--site-r);
  background: var(--site-soft);
  animation: siteCard 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i) * 46ms);
  transition: border-radius 0.45s var(--ease), background 0.4s var(--ease);
}

/* Handwerk: Karten ohne Rahmen, dafür mit kräftiger Kante links */
.site[data-branch='handwerk'] .site__card {
  border: 0;
  border-left: 3px solid var(--site-accent);
  background: var(--site-soft);
}

/* Gastronomie: keine Kästen, nur Trennlinien und mittiger Text */
.site[data-branch='gastro'] .site__card {
  border: 0;
  border-top: 1px solid var(--site-line);
  border-radius: 0;
  background: transparent;
  padding: 12px 6px 4px;
  text-align: center;
  justify-items: center;
}

@keyframes siteCard {
  from { opacity: 0; transform: translateY(10px); }
}

.site__card-mark {
  position: relative;
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
  border-radius: 6px;
  background: var(--site-accent);
  opacity: 0.92;
  transition: background 0.35s var(--ease), border-radius 0.4s var(--ease);
}

.site[data-branch='praxis'] .site__card-mark,
.site[data-branch='gastro'] .site__card-mark {
  border-radius: 50%;
}

.site[data-branch='handwerk'] .site__card-mark {
  border-radius: 2px;
}

.site__card-mark::after {
  content: '';
  position: absolute;
  inset: 6px 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
}

.site__card-title {
  font-family: var(--site-display);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--site-ink);
}

.site[data-branch='gastro'] .site__card-title {
  font-weight: 400;
  font-size: 13px;
}

.site__card-text {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--site-muted);
}

.site__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: clamp(12px, 2.4cqw, 24px);
}

.site[data-branch='gastro'] .site__strip {
  justify-content: center;
}

.site__chip {
  padding: 5px 10px;
  border-radius: var(--site-btn-r);
  background: var(--site-tint);
  font-size: 10px;
  color: var(--site-ink);
  animation: siteCard 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(150ms + var(--i) * 46ms);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-radius 0.4s var(--ease);
}

.site[data-branch='handwerk'] .site__chip {
  background: transparent;
  border: 1px solid var(--site-line);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.06em;
}

/* Wenn die Bühne zu schmal für den Desktop-Entwurf ist, verhält sich die
   Vorschau von selbst wie auf einem kleinen Gerät — statt gequetscht oder
   abgeschnitten zu werden. Das ist genau der Punkt, den die Demo zeigt:
   eine Seite, die sich mitdreht, statt zweimal gebaut zu werden. */
@container (max-width: 520px) {
  .site__nav,
  .site__cta {
    display: none;
  }

  .site__burger {
    display: flex;
    margin-left: auto;
  }

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

  .site__hero-art {
    display: none;
  }

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

/* --- Mini-Website: Knöpfe, Bild, Bewertungen, Terminanfrage ---------------
   :where() hält die Grundwerte ohne Gewicht, damit die Klassen oben
   (Farbe, Rundung, Rahmen der Gastronomie) weiterhin gewinnen. */
:where(.site) button {
  appearance: none;
  margin: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.site__cta,
.site__btn {
  transition: background 0.35s var(--ease), border-radius 0.4s var(--ease),
    transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.site__cta:hover,
.site__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px var(--site-accent);
}

.site__hero-art {
  position: relative;
  display: grid;
  place-items: center;
}

.site__art-svg {
  width: 74%;
  height: 78%;
}

.site[data-branch='gastro'] .site__art-svg {
  width: 100%;
  height: 100%;
}

.site[data-branch='praxis'] .site__art-svg {
  width: 86%;
  height: 86%;
}

/* Kleine schwebende Karten am Bild — wie auf echten Seiten */
.site__badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45);
  font-size: 9px;
  font-weight: 600;
  color: var(--site-ink);
  white-space: nowrap;
  animation: siteFloat 4.5s ease-in-out infinite;
}

.site__badge--live {
  top: 8px;
  right: 8px;
}

.site__badge--live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.site__badge--rate {
  bottom: 8px;
  left: 8px;
  color: #b7791f;
  animation-delay: -2.2s;
}

/* Praxis: der Bogen ist schmal — die Karten ragen etwas heraus */
.site[data-branch='praxis'] .site__badge--live {
  top: auto;
  right: -18px;
  bottom: 34px;
}

.site[data-branch='praxis'] .site__badge--rate {
  display: none;
}

@keyframes siteFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.site__h {
  font-family: var(--site-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--site-ink);
}

.site[data-branch='gastro'] .site__h {
  font-weight: 400;
  font-size: 14px;
  text-align: center;
}

.site__reviews {
  margin-top: clamp(18px, 3.4cqw, 34px);
}

.site__review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.4cqw, 14px);
  margin-top: 10px;
}

.site__review {
  margin: 0;
  padding: clamp(10px, 1.6cqw, 14px);
  border: 1px solid var(--site-line);
  border-radius: var(--site-r);
  background: var(--site-paper);
}

.site__stars {
  font-size: 10px;
  letter-spacing: 1px;
  color: #f5a524;
}

.site__review blockquote {
  margin: 4px 0 6px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--site-ink);
}

.site__review figcaption {
  font-size: 9.5px;
  color: var(--site-muted);
}

.site__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: clamp(16px, 3cqw, 28px) calc(-1 * clamp(15px, 2.6cqw, 30px)) calc(-1 * clamp(15px, 2.6cqw, 30px));
  padding: 12px clamp(15px, 2.6cqw, 30px) 40px;
  background: var(--site-ink);
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.72);
  transition: background 0.4s var(--ease);
}

.site__foot span:last-child {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.45);
}

@container (max-width: 520px) {
  .site__review-list {
    grid-template-columns: 1fr;
  }

  /* Das Bild bleibt im schmalen Rahmen nur bei der Gastronomie stehen —
     dort ist es ein flaches Band über dem Text. Die Regel weiter oben kommt
     gegen `display: grid` am Bild nicht mehr an, deshalb hier noch einmal. */
  .site:not([data-branch='gastro']) .site__hero-art {
    display: none;
  }

  .site__badge--rate {
    display: none;
  }

  /* Im kleinen Rahmen oben ansetzen und scrollen lassen statt abschneiden */
  .site__book {
    place-items: start center;
    padding: 8px;
  }

  .site__book-card {
    padding: 11px;
  }

  .site__book-days {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site__book-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site__foot span:last-child {
    margin-left: 0;
  }
}

/* Terminanfrage: legt sich über die Mini-Website, wie ein echtes Popup */
.site__book {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow-y: auto;
  background: rgba(10, 14, 22, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: bookFade 0.25s var(--ease);
}

.site__book[hidden] {
  display: none;
}

@keyframes bookFade {
  from { opacity: 0; }
}

.site__book-card {
  width: min(100%, 330px);
  padding: 14px;
  border-radius: calc(var(--site-r) + 4px);
  background: var(--site-paper);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
  animation: bookUp 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bookUp {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}

.site__book-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.site__book-title {
  font-family: var(--site-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--site-ink);
}

.site__book-close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--site-soft);
  color: var(--site-muted);
}

.site__book-label {
  margin: 8px 0 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-muted);
}

.site__book-days,
.site__book-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.site__book-slots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site__book-days button,
.site__book-slots button {
  padding: 7px 2px;
  border: 1px solid var(--site-line);
  border-radius: min(var(--site-btn-r), 8px);
  background: var(--site-soft);
  font-size: 10px;
  font-weight: 600;
  color: var(--site-ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.site__book-days button:hover,
.site__book-slots button:not(:disabled):hover {
  border-color: var(--site-accent);
}

.site__book-days button.is-on,
.site__book-slots button.is-on {
  border-color: var(--site-accent);
  background: var(--site-accent);
  color: #fff;
}

.site__book-slots button:disabled {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed;
}

.site__book-send {
  width: 100%;
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: var(--site-btn-r);
  background: var(--site-accent);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.site__book-send:disabled {
  opacity: 0.4;
  cursor: default;
}

.site__book-send:not(:disabled):hover {
  transform: translateY(-1px);
}

.site__book-done {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 4px 2px;
  text-align: center;
}

.site__book-done[hidden],
.site__book-form[hidden] {
  display: none;
}

.site__book-check {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  animation: bookCheck 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bookCheck {
  from { transform: scale(0.3); opacity: 0; }
}

.site__book-ok {
  font-size: 12px;
  font-weight: 700;
  color: var(--site-ink);
}

.site__book-sub {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--site-muted);
}

.site__book-jump {
  margin-top: 4px;
  padding: 7px 12px;
  border-radius: var(--site-btn-r);
  background: var(--site-tint);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--site-ink);
}

/* --- Einsatzplanung: Teams, Orte, Benachrichtigungen ---------------------- */
.col__who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.col__crew {
  display: inline-flex;
}

.col__crew i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border: 2px solid #0a111a;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 30%, #0d1520);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 600;
  color: var(--c);
}

.col__crew i:first-child {
  margin-left: 0;
}

.col__inbox {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.col__head {
  align-items: center;
}

.job {
  position: relative;
}

.job--urgent,
.job--urgent:hover {
  border-left: 3px solid #ff8a65;
}

.job--new {
  border-color: rgba(240, 171, 90, 0.5);
  background: linear-gradient(180deg, rgba(240, 171, 90, 0.08), transparent 70%), var(--bg-elevated);
}

.job__new {
  display: inline-block;
  margin-bottom: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(240, 171, 90, 0.16);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #f0ab5a;
}

.job__where {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-muted);
}

.job__where svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Die Nachricht an den Kunden erscheint wie eine echte Benachrichtigung
   unten rechts am Bildschirm — so verdeckt sie nichts auf dem Brett. Über
   dem Vollbild-Hintergrund, damit sie auch dort zu sehen ist. */
.dispo__toasts {
  position: fixed;
  right: 24px;
  /* über dem Chat-Auslöser (chat.css), nicht darauf */
  bottom: 92px;
  z-index: 310;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 24px));
  pointer-events: none;
}

.dispo__toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(22, 27, 36, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.95);
  animation: toastIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.dispo__toast.is-out {
  opacity: 0;
  transform: translateX(16px);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
}

.dispo__toast-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #22c55e;
  color: #fff;
}

.dispo__toast-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.dispo__toast-body b {
  font-size: 12px;
  color: var(--text);
}

.dispo__toast-time {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-muted);
}

/* Auf dem Handy ist das Brett höher als das Fenster — die Nachricht
   erscheint deshalb unten am Bildschirm, wo man sie sieht */
@media (max-width: 760px) {
  .dispo__toasts {
    right: 12px;
    bottom: 86px;
    left: 12px;
    width: auto;
  }

  /* Auf dem Handy immer nur die neueste Nachricht */
  .dispo__toast:nth-child(n + 2) {
    display: none;
  }
}

/* --- Auswertung: Umsatz, Ring, Teams, Werte am Balken --------------------- */
.kpi--money .kpi__value {
  color: #9af0c4;
}

.dash__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
}

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

.chart__plot {
  position: relative;
  padding-top: 22px;
}

/* Hilfslinien hinter den Balken */
.chart__plot::before {
  content: '';
  position: absolute;
  inset: 22px 0 0;
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    rgba(255, 255, 255, 0.05) calc(25% - 1px),
    rgba(255, 255, 255, 0.05) 25%
  );
  pointer-events: none;
}

.chart__bars {
  position: relative;
}

.chart__fill {
  position: relative;
}

.chart__val {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(7, 17, 16, 0.85);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.chart__col.is-peak .chart__fill {
  box-shadow: 0 0 22px -6px var(--demo);
}

.chart__col.is-peak .chart__val {
  color: var(--demo);
  font-weight: 600;
}

/* Die Tooltips würden die festen Werte verdecken */
.chart__tip {
  display: none;
}

.chart__avg {
  position: absolute;
  right: 0;
  left: 0;
  height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.35);
  pointer-events: none;
  transition: bottom 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.chart__avg[hidden] {
  display: none;
}

.chart__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 14px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}

.chart__legend::before {
  content: '';
  width: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.45);
}

.chart__legend:empty {
  visibility: hidden;
}

.dash__side {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.ring {
  position: relative;
  width: 132px;
  margin: 0 auto;
}

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

.ring circle {
  fill: none;
  stroke-width: 10;
}

.ring__track {
  stroke: rgba(255, 255, 255, 0.07);
}

.ring__value {
  stroke: var(--demo);
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--demo) 60%, transparent));
  transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.3s var(--ease);
}

.ring.is-over .ring__value {
  stroke: #ff9d6e;
}

.ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.ring__label b {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.ring__label span {
  font-size: 10.5px;
  color: var(--text-muted);
}

.teams {
  display: grid;
  gap: 10px;
  list-style: none;
}

.team__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 11.5px;
}

.team__name {
  color: var(--text-secondary);
}

.team__val {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}

.team__bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.team__bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--demo) 55%, transparent), var(--demo));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.team.is-over .team__bar i {
  background: linear-gradient(90deg, #ff9d6e, #ff6b6b);
}

.team.is-over .team__val {
  color: #ffb694;
}

@media (max-width: 760px) {
  .dash__side {
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
  }

  .ring {
    width: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site__badge,
  .site__book,
  .site__book-card,
  .site__book-check,
  .dispo__toast {
    animation: none;
  }
}

/* --- Demo 3: Auswertung --- */
.dash {
  display: grid;
  gap: 18px;
}

.dash__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.dash__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.dash__sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.dash__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  .dash__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kpi {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.kpi__value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.kpi__label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.kpi__delta {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.kpi__delta.is-up { color: #7fe3ab; }
.kpi__delta.is-down { color: #ffb694; }

.kpi__delta.is-live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.kpi__delta.is-live::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3ddc84;
  animation: pulse 2.4s ease-out infinite;
}

/* Zwei Klassen, gleiche Spezifität: ohne diese Regel gewönne `is-live`
   allein durch die spätere Position und die Warnung bliebe grün. */
.kpi__delta.is-live.is-down {
  color: #ffb694;
}

.kpi__delta.is-live.is-down::before {
  background: #ff9d6e;
}

.chart {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.chart__bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(5px, 1.4vw, 12px);
  height: 150px;
}

.chart__col {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1;
  height: 100%;
}

.chart__fill {
  width: 100%;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--demo), color-mix(in srgb, var(--demo) 25%, transparent));
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s var(--ease);
}

.chart__fill.is-empty {
  background: rgba(255, 255, 255, 0.1);
}

.chart__col:hover .chart__fill {
  filter: brightness(1.15);
}

.chart__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%) translateY(4px);
  padding: 4px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: rgba(7, 9, 15, 0.96);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.chart__col:hover .chart__tip,
.chart__col:focus-within .chart__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.chart__axis {
  display: flex;
  gap: clamp(5px, 1.4vw, 12px);
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.chart__axis span {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
}

/* 8.5 Ablauf ----------------------------------------------------------------
   Auf großen Bildschirmen ist der Abschnitt dreimal so hoch wie das Fenster,
   sein Inhalt aber klebt (sticky) in der Mitte. Beim Weiterscrollen bewegt
   sich deshalb nicht die Seite, sondern der Ablauf: Schritt für Schritt
   leuchtet auf, die große Ziffer zählt mit, der Stern (scroll.js) fliegt
   an den Punkten vorbei. Erst nach Schritt 4 geht es weiter. Ist das Fenster zu niedrig oder zu schmal,
   stehen die Schritte normal untereinander und leuchten im Vorbeiscrollen
   auf — dieselbe Logik in initSteps (main.js). */
.process {
  position: relative;
  z-index: 1;
  padding-block: var(--section-y);
}

.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}

.process__head h2 {
  margin-top: 18px;
  font-size: clamp(28px, 3.6vw, 44px);
}

.process__head > p:not(.eyebrow):not(.process__count) {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: clamp(15px, 1.6vw, 17px);
}

/* Große Ziffer: zeigt, wo man im Ablauf steht. Nur auf großen Bildschirmen,
   wo der Abschnitt anhält — sonst wäre sie eine Zahl ohne Bezug. */
.process__count {
  display: none;
  align-items: baseline;
  gap: 12px;
  margin-top: clamp(28px, 5vh, 56px);
  font-family: var(--font-display);
  line-height: 1;
}

.process__num {
  font-size: clamp(72px, 9vw, 128px);
  font-weight: 700;
  letter-spacing: -0.05em;
  background: linear-gradient(155deg, #9ee6ff, var(--accent) 42%, #8f7dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.process__num.is-tick {
  animation: numTick 0.55s var(--ease);
}

@keyframes numTick {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
}

.process__of {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.steps {
  position: relative;
  padding-left: 40px;
}

.steps__list {
  display: grid;
  gap: clamp(22px, 3.4vh, 34px);
  list-style: none;
}

.step {
  position: relative;
  opacity: 0.32;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.step.is-reached {
  opacity: 0.62;
}

.step.is-current {
  opacity: 1;
  transform: translateX(6px);
}

.step__dot {
  position: absolute;
  top: 4px;
  left: -40px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.step__dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background 0.4s var(--ease), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.step.is-reached .step__dot {
  border-color: var(--accent);
}

.step.is-reached .step__dot::after {
  background: var(--accent);
}

.step.is-current .step__dot {
  box-shadow: 0 0 0 5px rgba(86, 194, 240, 0.12), 0 0 18px rgba(86, 194, 240, 0.45);
}

.step.is-current .step__dot::after {
  transform: scale(1.3);
}

.step__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.step h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 6px;
  font-size: clamp(18px, 1.9vw, 22px);
}

/* Schritt 4 ist ein Angebot, keine Stufe, die man durchlaufen muss */
.step__tag {
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.step p {
  max-width: 46ch;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Anhalten nur, wo der ganze Ablauf in ein Fenster passt */
@media (min-width: 900px) and (min-height: 620px) {
  .process {
    height: 320vh;
    padding-block: 0;
  }

  .process__sticky {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100vh;
    padding-top: calc(var(--nav-h) * 0.5);
  }

  .process__count {
    display: flex;
  }
}

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

/* 8.6 Partner / Referenzen */
.case-grid {
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

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

.case {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.case:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.case__visual {
  position: relative;
  height: 190px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(circle at 28% 26%, rgba(86, 194, 240, 0.2), transparent 62%),
    var(--bg-elevated);
  overflow: hidden;
}

.case__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Lichtstrahl, der langsam über die Karte wandert */
.case__visual::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(86, 194, 240, 0.14), transparent);
  animation: sweep 6.5s ease-in-out infinite;
}

.case:nth-child(2) .case__visual::before {
  animation-delay: -3.2s;
}

@keyframes sweep {
  0% { transform: translateX(0); }
  55%, 100% { transform: translateX(360%); }
}

/* Gezeichnete Vorschau dessen, was gebaut wurde. Keine Fotos und keine
   fremden Logos — sondern eine Skizze der Sache selbst: Browserfenster,
   Handy, Inhalte. Das füllt die Karte, ohne etwas zu behaupten. */
.case__visual svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mock__body {
  fill: rgba(12, 18, 28, 0.92);
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

.mock__bar {
  fill: rgba(255, 255, 255, 0.055);
}

.mock__dot {
  fill: var(--accent);
}

.mock__dot--dim {
  fill: rgba(255, 255, 255, 0.16);
}

.mock__url {
  fill: rgba(0, 0, 0, 0.4);
}

.mock__hero {
  fill: rgba(86, 194, 240, 0.32);
}

.mock__line {
  fill: rgba(255, 255, 255, 0.42);
}

.mock__line--dim {
  fill: rgba(255, 255, 255, 0.16);
}

.mock__pill {
  fill: var(--accent);
}

.mock__card,
.mock__tile {
  fill: rgba(255, 255, 255, 0.055);
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.mock__tile {
  fill: rgba(86, 194, 240, 0.1);
}

/* Vordergrund: Handy mit eigenem Schatten, damit es davor steht */
.mock--front {
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.75));
}

.mock__phone {
  fill: #22262f;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
}

.mock__screen {
  fill: rgba(9, 14, 22, 0.98);
}

.mock__notch {
  fill: #22262f;
}

.mock__row {
  fill: rgba(255, 255, 255, 0.07);
}

.mock__row--on {
  fill: rgba(86, 194, 240, 0.28);
}

.mock__bar-b {
  fill: rgba(255, 255, 255, 0.2);
}

.mock__play-bg {
  fill: var(--accent);
  opacity: 0.9;
}

.mock__play {
  fill: #06121b;
}

.case__body {
  padding: 26px;
}

.case__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Jede Partnerkachel trägt das Auftreten ihres Partners. Neli arbeitet
   schwarz auf weiß, n10 weiß und rot auf schwarz — nebeneinander zeigen die
   beiden Kacheln damit ganz nebenbei, dass hier nicht alles gleich aussieht. */

/* --- Neli Innenausbau: die weiße Karte --- */
.case--neli {
  --brand: #b9bec6;
  --brand-soft: rgba(185, 190, 198, 0.12);
}

.case__visual--paper {
  display: grid;
  place-items: center;
  padding: 30px;
  background: #f3f3f1;
}

.case__visual--paper::after {
  content: none;
}

/* Die feinen Linien der Visitenkarte, nur angedeutet */
.case__visual--paper::before {
  inset: 0;
  width: auto;
  background: linear-gradient(118deg, transparent 22%, rgba(0, 0, 0, 0.09) 22%, rgba(0, 0, 0, 0.09) 22.5%, transparent 22.5%),
    linear-gradient(118deg, transparent 31%, rgba(0, 0, 0, 0.09) 31%, rgba(0, 0, 0, 0.09) 31.4%, transparent 31.4%),
    linear-gradient(62deg, transparent 78%, rgba(0, 0, 0, 0.07) 78%, rgba(0, 0, 0, 0.07) 78.4%, transparent 78.4%);
  animation: none;
}

/* --- n10performance: schwarz und rot --- */
.case--n10 {
  --brand: var(--accent);
  --brand-soft: var(--accent-soft);
}

.case--n10:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
}

.case__visual--brand {
  display: grid;
  place-items: center;
  padding: 26px;
  background: radial-gradient(120% 100% at 50% 20%, var(--brand-soft), transparent 62%), #0a0a0a;
}

.case__visual--brand::after {
  /* Das Raster der übrigen Kachel würde den fremden Auftritt zerschneiden */
  content: none;
}

.case__visual--brand::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 22%, transparent), transparent);
}

.case__logo {
  position: relative;
  z-index: 1;
  width: min(230px, 76%);
  height: auto;
}

/* Roter Streifen wie auf ihrer Seite */
.case--n10 .case__visual--brand {
  border-left: 3px solid var(--brand);
}

.case--n10 .case__label {
  color: var(--brand);
}

.case__site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}

.case__site:hover {
  color: var(--brand, var(--accent));
}

.case__site svg {
  transition: transform 0.2s var(--ease);
}

.case__site:hover svg {
  transform: translate(2px, -2px);
}

/* Punkt für „in Arbeit": pulsiert nicht, weil noch nichts läuft */
.dot-work {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
}

.dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  70%,
  100% {
    box-shadow: 0 0 0 7px rgba(61, 220, 132, 0);
  }
}

.case__body h3 {
  margin: 12px 0 10px;
  font-size: 19.5px;
}

.case__body p {
  font-size: 14.5px;
  color: var(--text-secondary);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tag-row span {
  padding: 4px 11px;
  /* Trägt die Kachel eine Markenfarbe, gilt sie auch hier — sonst stünden
     rote Überschrift und blaue Marken in derselben Kachel. */
  border: 1px solid color-mix(in srgb, var(--brand, var(--accent)) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, var(--accent)) 12%, transparent);
  font-size: 12px;
  color: var(--brand, var(--accent));
}

/* 8.7 Eigene Produkte */
.panel {
  position: relative;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008));
  overflow: hidden;
}

.panel::after {
  content: '';
  position: absolute;
  top: -42%;
  right: -12%;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(86, 194, 240, 0.14), transparent 70%);
  pointer-events: none;
}

.panel__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

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

.panel__grid h2 {
  margin-top: 16px;
  font-size: clamp(26px, 3.2vw, 36px);
}

.panel__grid > div > p {
  margin-top: 16px;
  color: var(--text-secondary);
}

.device {
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.product {
  border-bottom: 1px solid var(--border);
}

.product:last-child {
  border-bottom: none;
}

.product > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 6px;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease);
}

.product > summary::-webkit-details-marker {
  display: none;
}

.product > summary:hover {
  color: var(--accent);
}

.product__name {
  font-weight: 600;
  font-size: 15px;
}

.product__status {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-secondary);
}

.chev {
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 0.3s var(--ease);
}

.product[open] .chev {
  transform: rotate(90deg);
}

.product__detail {
  padding: 0 6px 18px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.62;
}

/* 8.8 Baukasten — interaktive Zusammenstellung zum Anfassen */
.builder {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 3vw, 40px);
  /* Nicht strecken: zusammen mit aspect-ratio würde die Bühne sonst aus
     ihrer Spalte herauswachsen und die Buttons daneben überdecken. */
  align-items: start;
}

/* Ohne min-width:0 schrumpfen Grid-Kinder nicht unter ihre Inhaltsbreite
   und schieben auf schmalen Displays die ganze Seite zur Seite. */
.builder > * {
  min-width: 0;
}

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

/* --- Bühne --- */
.builder__stage {
  /* Das Bedienfeld ist mit zwölf Bausteinen, Check und Fahrplan deutlich
     länger als die Bühne. Ohne `sticky` scrollt das Netz nach oben weg und
     man wählt blind — so bleibt es beim Klicken im Blick. */
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  display: grid;
  place-items: center;
  /* Format folgt dem viewBox des Diagramms, sonst entsteht toter Raum */
  aspect-ratio: 640 / 700;
  min-height: 320px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: radial-gradient(circle at 50% 50%, rgba(46, 134, 193, 0.11), transparent 62%),
    var(--bg-elevated);
  overflow: hidden;
  cursor: grab;
}

/* Einspaltig steht die Bühne über dem Bedienfeld — dort würde sie beim
   Kleben das halbe Fenster belegen und über den Fragen liegen. Die Regel
   muss nach der Grundregel stehen, sonst gewinnt dort `sticky`. */
@media (max-width: 980px) {
  .builder__stage {
    position: relative;
    top: auto;
  }
}

.builder.is-grabbing .builder__stage {
  cursor: grabbing;
}

.builder__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 50%, #000 24%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 24%, transparent 76%);
}

.builder__canvas {
  position: relative;
  width: 100%;
  height: auto;
}

/* --- Kern --- */
.builder__core-ring {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 1;
  transform-origin: 320px 350px;
  animation: coreRing 3.4s ease-in-out infinite;
}

@keyframes coreRing {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.13); opacity: 0.25; }
}

.builder__core-dot {
  fill: rgba(9, 14, 22, 0.95);
  stroke: var(--accent);
  stroke-width: 1.4;
}

.builder__core-label {
  fill: var(--accent);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
}

/* --- Grenze zwischen den Phasen ---
   Sichtbar nur, solange gezogen wird: innerhalb des Kreises heißt „zuerst“,
   außerhalb „später“. Dieselbe Aussage wie der Fahrplan unten, nur rund. */
.builder__zone {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 4 9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), stroke 0.25s var(--ease);
}

.builder.is-zoning .builder__zone {
  opacity: 1;
}

.builder.is-zone-now .builder__zone {
  stroke: var(--accent);
}

.builder.is-zone-later .builder__zone {
  stroke: rgba(255, 190, 130, 0.8);
}

/* --- Verbindungen --- */
.builder__links line {
  stroke: var(--accent);
  stroke-width: 1.1;
  stroke-linecap: round;
  transition: stroke-width 0.2s var(--ease);
}

.builder__links line.is-hot {
  stroke-width: 2.2;
}

/* Fachlich verwandte Bausteine, gestrichelt und zurückhaltender */
.builder__relations line {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
  opacity: 0;
  transition: stroke-width 0.2s var(--ease);
}

.builder__relations line.is-hot {
  stroke-width: 2;
  stroke-dasharray: none;
}

.builder__particles circle {
  fill: var(--accent);
}

/* --- Knoten --- */
.bnode {
  cursor: grab;
  /* Nur die Knoten fangen Gesten ab — daneben bleibt die Seite scrollbar */
  touch-action: none;
}

.bnode.is-dragging {
  cursor: grabbing;
}

.bnode-grab {
  fill: transparent;
}

.bnode-ring {
  fill: rgba(11, 17, 26, 0.94);
  stroke: var(--accent-line);
  stroke-width: 1.2;
  transition: stroke 0.2s var(--ease), stroke-width 0.2s var(--ease);
}

.bnode.is-hot .bnode-ring {
  stroke: var(--accent);
  stroke-width: 2;
}

.bnode-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  transform-origin: center;
  animation: bnodePulse 1.1s ease-out 1 forwards;
}

@keyframes bnodePulse {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(2.4); opacity: 0; }
}

.bnode-icon {
  stroke: var(--accent);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.bnode-label {
  fill: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-anchor: middle;
  pointer-events: none;
  transition: fill 0.2s var(--ease);
}

.bnode.is-hot .bnode-label {
  fill: var(--accent);
}

/* Vertagte Bausteine: gestrichelter Ring in warmem Ton, damit im Bild
   sofort erkennbar ist, was zur zweiten Phase gehört. `is-wish-later` ist
   dasselbe als Vorschau: wer einen Baustein über die Grenze nach außen
   zieht, sieht schon beim Ziehen, worauf er ihn stellt. */
.bnode.is-later .bnode-ring,
.bnode.is-wish-later .bnode-ring {
  stroke: rgba(255, 190, 130, 0.6);
  stroke-dasharray: 4 4;
}

.bnode.is-later .bnode-icon,
.bnode.is-wish-later .bnode-icon {
  stroke: #ffcb9a;
  opacity: 0.85;
}

.bnode.is-later .bnode-label,
.bnode.is-wish-later .bnode-label {
  fill: rgba(255, 203, 154, 0.75);
}

/* Ein gezogener Baustein, der innen bleibt, zeigt den Ton der ersten Phase */
.bnode.is-dragging:not(.is-wish-later) .bnode-ring {
  stroke: var(--accent);
  stroke-dasharray: none;
}

.builder__links line.is-later {
  stroke: rgba(255, 190, 130, 0.75);
  stroke-dasharray: 3 5;
}

/* --- Hinweise auf der Bühne --- */
.builder__empty,
.builder__grabhint,
.builder__zonehint {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(7, 9, 15, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  transition: opacity 0.4s var(--ease);
}

.builder__grabhint,
.builder__zonehint {
  opacity: 0;
}

.builder.is-active .builder__empty {
  opacity: 0;
}

.builder.is-active .builder__grabhint {
  opacity: 1;
}

.builder.is-grabbing .builder__grabhint,
.builder.has-dragged .builder__grabhint,
.builder.is-zoning .builder__grabhint {
  opacity: 0;
}

/* Beim Ziehen steht an derselben Stelle, was die Grenze bedeutet. Welche
   Zeile das ist, entscheidet die Klasse am Baukasten. */
.builder.is-zoning .builder__zonehint {
  opacity: 1;
}

.builder__zonehint span {
  display: none;
}

.builder.is-zone-now .builder__zonehint-now,
.builder.is-zone-later .builder__zonehint-later {
  display: inline;
}

.builder.is-zone-now .builder__zonehint {
  color: var(--accent);
  border-color: var(--accent-line);
}

.builder.is-zone-later .builder__zonehint {
  color: #ffcb9a;
  border-color: rgba(255, 190, 130, 0.45);
}

@media (max-width: 560px) {
  .builder__empty,
  .builder__grabhint,
  .builder__zonehint {
    max-width: calc(100% - 28px);
    font-size: 10px;
    padding: 6px 11px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
}

/* --- Bedienfeld --- */
.builder__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Bedarfs-Check: ein Angebot über dem Baukasten, keine Pflichtstation ---
   Zugeklappt ist er eine Zeile mit Knopf. Erst wer will, klappt die Fragen
   auf; danach bleibt nur das Ergebnis stehen. */
.check {
  margin-bottom: clamp(24px, 3vw, 36px);
  padding: 16px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.check.is-open,
.check.is-done {
  border-color: var(--accent-line);
  background: linear-gradient(150deg, var(--accent-soft), rgba(86, 194, 240, 0.02));
}

.check__offer {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.check__tag {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.check__offer-body {
  flex: 1;
  min-width: 260px;
}

.check__offer-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.check__offer-text {
  margin-top: 3px;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.check__offer .btn {
  flex-shrink: 0;
}

@media (max-width: 620px) {
  .check__offer .btn {
    width: 100%;
    justify-content: center;
  }
}

.check__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.check__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.check__sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.check__count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}

.check__bar {
  display: block;
  height: 3px;
  margin: 12px 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.check__bar i {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #7ad4ff);
  transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.check__body {
  transition: min-height 0.28s var(--ease);
}

.check__q {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text);
  animation: checkIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes checkIn {
  from { opacity: 0; transform: translateY(8px); }
}

.check__note {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.check__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.check__opt {
  padding: 10px 16px;
  animation-delay: calc(var(--i, 0) * 35ms);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  animation: checkIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease), transform 0.2s var(--ease);
}

.check__opt:hover {
  border-color: var(--accent-line);
  color: var(--text);
  transform: translateY(-1px);
}

.check__opt.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.check__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.check__nav .chip-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.check__nav .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.check__skip {
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}

.check__skip:hover {
  color: var(--text-secondary);
}

.check__result {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  animation: checkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.check__result .chip-btn {
  margin-left: auto;
}

@media (max-width: 620px) {
  .check__result .chip-btn {
    margin-left: 0;
  }
}

.check__result-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.check__result-title svg {
  color: #7fe3ab;
}

.check__result-text {
  flex: 1;
  min-width: 260px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.builder__modules {
  display: grid;
  gap: 16px;
}

.mgroup {
  display: grid;
  gap: 7px;
}

.mgroup__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mgroup__list {
  display: grid;
  gap: 7px;
}

.module-row {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease),
    transform 0.22s var(--ease);
}

.module-row:hover {
  border-color: var(--border-strong);
  transform: translateX(3px);
}

.module-row.is-on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* Stufenwahl: erscheint erst, wenn der Baustein gewählt ist. Sie sitzt in
   derselben Zeile, abgesetzt durch eine dünne Linie statt durch einen
   eigenen Rahmen — das hält die Liste ruhig. */
.prio {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px;
  padding: 9px 0 10px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.prio__label {
  margin-right: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.prio__btn {
  padding: 4px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  font-size: 11.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
    color 0.18s var(--ease);
}

.prio__btn:hover {
  color: var(--text);
}

.prio__btn.is-on {
  border-color: var(--accent);
  background: rgba(86, 194, 240, 0.16);
  color: var(--accent);
}

.prio__btn[data-prio='later'].is-on {
  border-color: rgba(255, 190, 130, 0.5);
  background: rgba(255, 190, 130, 0.14);
  color: #ffcb9a;
}

@media (max-width: 420px) {
  .prio {
    padding-left: 0;
  }
}

/* Rahmen und Fläche liegen an `.module-row`. Der Knopf selbst bleibt nackt —
   sonst säße ein Kasten im Kasten und die Liste wirkt wie doppelt gerahmt. */
.module {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: color 0.22s var(--ease);
}

.module:hover {
  color: var(--text);
}

.module[aria-pressed='true'] {
  color: var(--text);
}

.module__box {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}

.module__box svg {
  opacity: 0;
  stroke: #04121c;
  transform: scale(0.5);
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease);
}

.module[aria-pressed='true'] .module__box {
  border-color: var(--accent);
  background: var(--accent);
}

.module[aria-pressed='true'] .module__box svg {
  opacity: 1;
  transform: scale(1);
}

.module__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(86, 194, 240, 0.08);
  color: var(--accent);
  transition: background 0.22s var(--ease);
}

.module[aria-pressed='true'] .module__icon {
  background: rgba(86, 194, 240, 0.2);
}

.module__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.module__name {
  font-size: 14.5px;
  font-weight: 500;
}

.module__hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* --- Zusammenfassung --- */
.summary {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(46, 134, 193, 0.11), rgba(255, 255, 255, 0.02));
}

.summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.summary__count {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.summary__num {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.summary__unit {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Umfang als Segmentbalken statt einer erfundenen Wochenzahl */
.scope {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scope__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scope__bar {
  display: flex;
  gap: 3px;
}

.scope__bar i {
  width: 15px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.scope__bar i.is-on {
  background: var(--accent);
  box-shadow: 0 0 9px rgba(86, 194, 240, 0.5);
}

.scope__value {
  min-width: 72px;
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}

.builder__note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* --- Fahrplan: was zuerst, was später ---
   Beide Kästen sind Ablagen: ein Eintrag lässt sich aus dem einen greifen
   und in den anderen ziehen. Ihr Rahmen zeigt sich erst, während gezogen
   wird — im Ruhezustand soll die Zusammenfassung ruhig bleiben. */
.summary__phases {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Der Rahmen greift in die Polsterung der Karte hinein, damit Beschriftung
   und Einträge auf derselben Linie bleiben wie die Kennzahlen darüber. */
.phase {
  padding: 8px 10px;
  margin: 0 -10px;
  border: 1px dashed transparent;
  border-radius: var(--r-md);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.summary__phases.is-sorting .phase {
  border-color: var(--border);
}

.summary__phases.is-sorting .phase.is-target {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}

.summary__phases.is-sorting .phase--later.is-target {
  border-color: rgba(255, 190, 130, 0.6);
  background: rgba(255, 190, 130, 0.08);
}

.phase__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.phase--later .phase__label {
  color: #ffcb9a;
}

.phase__count {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 10.5px;
  color: var(--accent);
}

.phase--later .phase__count {
  background: rgba(255, 190, 130, 0.14);
  color: #ffcb9a;
}

.phase__list {
  display: grid;
  gap: 8px;
  list-style: none;
}

.phase__list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 3px 5px;
  margin: -3px -5px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0;
  transform: translateY(6px);
  /* Nur der Eintrag fängt die Geste ab — daneben bleibt die Seite scrollbar */
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
    background 0.2s var(--ease);
}

.phase__list li.is-in {
  opacity: 1;
  transform: none;
}

.phase__list li:hover {
  background: rgba(255, 255, 255, 0.035);
}

.phase__list li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Der gegriffene Eintrag folgt dem Zeiger — ohne Nachlauf, sonst schwimmt er */
.phase__list li.is-grabbed {
  z-index: 2;
  cursor: grabbing;
  background: var(--bg-elevated);
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.95);
  opacity: 1;
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  transition: none;
}

/* Verlässt ein Eintrag seine Phase, trägt sein Rahmen schon den Ton der
   anderen — dieselbe Ansage wie die Fahne und der Ring auf der Bühne. */
.phase__list li.is-moving {
  border: 1px dashed rgba(255, 190, 130, 0.55);
  margin: -4px -6px;
}

.phase--later .phase__list li.is-moving {
  border-color: var(--accent-line);
}

/* Fahne am gezogenen Eintrag: sie sagt, wo er landet. Auf dem Handy ist sie
   die einzige Rückmeldung — die Bühne steht dort weit oben. */
.phase__move {
  margin-left: auto;
  align-self: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
}

.phase__list li.is-grabbed .phase__move {
  opacity: 1;
}

.phase--later .phase__move {
  background: rgba(255, 190, 130, 0.14);
  color: #ffcb9a;
}

/* Zeigt die Fahne die andere Phase, trägt sie auch deren Farbe — sonst
   verspricht ein blaues „später“ das Gegenteil von dem, was passiert. */
.phase__list li.is-moving .phase__move {
  background: rgba(255, 190, 130, 0.14);
  color: #ffcb9a;
}

.phase--later .phase__list li.is-moving .phase__move {
  background: var(--accent-soft);
  color: var(--accent);
}

.phase__list li b {
  display: block;
  font-weight: 600;
  color: var(--text-secondary);
}

.phase__list svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--accent);
}

.phase--later .phase__list svg {
  color: #ffcb9a;
}

.phase__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted);
}

.phase__tag::before {
  content: '· ';
}

.phase__empty {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.summary__hint {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Leere Phase: nur der Hinweistext, keine leere Liste */
.phase:not(.is-empty) .phase__empty {
  display: none;
}

.phase.is-empty .phase__count {
  opacity: 0.5;
}

.builder__actions {
  display: flex;
  gap: 10px;
}

.builder__actions .btn {
  flex: 1;
}

.builder__cta:disabled,
.builder__actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 8.83 Ausblick: Business Suite ---------------------------------------------
   Ein ruhiger Ausblick ohne Anfrage-Button: der Inhalt erklärt die Idee,
   ohne sie wie ein fertiges Angebot wirken zu lassen. */
.soon {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 100% at 88% 0%, rgba(155, 140, 255, 0.09), transparent 58%),
    var(--bg-elevated);
}

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

  .soon__art {
    display: none;
  }
}

.soon__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.soon__body h2 {
  margin-top: 16px;
  font-size: clamp(23px, 2.9vw, 32px);
  letter-spacing: -0.015em;
}

.soon__lead {
  margin-top: 13px;
  max-width: 62ch;
  color: var(--text-secondary);
}

.soon-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.soon-progress__step {
  position: relative;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.25;
  color: var(--text-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

.soon-progress__step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: var(--border-strong);
}

.soon-progress__step.is-current {
  color: #b6a9ff;
  font-weight: 700;
}

.soon-progress__step.is-current::before {
  background: #9b8cff;
  box-shadow: 0 0 12px rgba(155, 140, 255, 0.45);
}

.soon__interest-open {
  margin-top: 18px;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 12px;
}

.suite-interest {
  max-width: 560px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.018);
}

.suite-interest[hidden] {
  display: none;
}

.suite-interest label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.suite-interest__row {
  display: flex;
  gap: 8px;
}

.suite-interest input {
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.16);
  color: var(--text);
  font: inherit;
}

.suite-interest input::placeholder {
  color: var(--text-muted);
}

.suite-interest__status {
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .suite-interest__row {
    align-items: stretch;
    flex-direction: column;
  }
}

.soon__art {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.soon__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
}

.soon__core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border: 1px solid rgba(155, 140, 255, 0.5);
  border-radius: 18px;
  background: rgba(155, 140, 255, 0.12);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #b6a9ff;
}

.soon__tile {
  position: absolute;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  animation: soonFloat 7s ease-in-out infinite;
}

.soon__tile--1 { top: 16%; left: 14%; width: 30%; height: 22%; }
.soon__tile--2 { top: 20%; right: 12%; width: 24%; height: 30%; animation-delay: -2.4s; }
.soon__tile--3 { bottom: 15%; left: 24%; width: 42%; height: 20%; animation-delay: -4.8s; }

@keyframes soonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.ahead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 20px;
  padding: 13px 18px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.018);
}

.ahead__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ahead__text {
  flex: 1;
  min-width: 240px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.ahead__text b {
  font-weight: 600;
  color: var(--text-secondary);
}

.ahead__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  transition: color 0.2s var(--ease);
}

.ahead__link:hover {
  color: var(--accent);
}

.ahead__link svg {
  transition: transform 0.2s var(--ease);
}

.ahead__link:hover svg {
  transform: translateX(3px);
}

/* 8.85 Produkt-Teaser auf der Startseite + Layout der Unterseiten */
/* Die eigenen Apps gingen zwischen den Unternehmens-Abschnitten unter. Sie
   bekommen deshalb einen eigenen Ton — dasselbe warme Amber wie „Für
   Privatkunden" in der Navigation, damit die beiden zusammengehören. Bewusst
   nur ein Hauch: getönter Rand, ein weicher Schein und eine Kante oben. */
.teaser {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(236, 143, 211, 0.2);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 8% 0%, rgba(236, 143, 211, 0.07), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.008));
  box-shadow: 0 24px 60px -40px rgba(236, 143, 211, 0.3);
}

/* Feine Lichtkante an der Oberkante — der Blick bleibt kurz hängen, ohne
   dass etwas leuchtet. */
.teaser::before {
  content: '';
  position: absolute;
  top: -1px;
  left: clamp(28px, 4vw, 48px);
  right: clamp(28px, 4vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 143, 211, 0.55), transparent);
  pointer-events: none;
}

/* Kicker und Chip stehen auf einer Grundlinie — der Kicker hat oben etwas
   Luft aus .eyebrow, die hier weg muss, sonst hängt der Chip höher. */
.teaser__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.teaser__head .eyebrow {
  margin: 0;
}

/* „alle drei bedienbar" mit dem pulsierenden Punkt: sagt in drei Worten,
   dass hier etwas zum Anfassen ist. */
.teaser__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 8px;
  border: 1px solid rgba(236, 143, 211, 0.24);
  border-radius: 999px;
  background: rgba(236, 143, 211, 0.06);
  font-size: 11.5px;
  line-height: 1.2;
  color: #efb9e0;
}

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

.teaser__body h2 {
  margin-top: 16px;
  font-size: clamp(26px, 3.2vw, 36px);
}

.teaser__body p {
  margin-top: 16px;
  color: var(--text-secondary);
}

.teaser__body .btn {
  margin-top: 26px;
}

/* --- Bewertung ------------------------------------------------------------
   Fünf Sterne aus einer einzigen gekachelten Grafik, darüber dieselbe
   Kachel in Gold, auf `--pct` beschnitten. So sind Teilsterne exakt und es
   braucht kein Skript und keine 35 Sternpfade im Markup.

   Der Stern sitzt in einem 28 breiten Feld bei 24 Höhe — die vier Einheiten
   rechts sind der Abstand zum nächsten Stern. Deshalb rechnet die Breite
   mit 136 statt 140: der letzte Abstand fällt weg.

   Wichtig: Bewertungen dürfen nur mit ihrer Herkunft stehen (§ 5b Abs. 3
   UWG). Die Herkunft steht als Fußnote am Seitenende — die hochgestellte
   Zahl an der Bewertung ist der Verweis darauf und darf nicht wegfallen.
   -------------------------------------------------------------------- */
.stars {
  --s: 14px;
  --pct: 100%;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: calc(var(--s) * 136 / 24);
  height: var(--s);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.17' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: calc(var(--s) * 28 / 24) var(--s);
}

.stars::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--pct);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath fill='%23e8b45f' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: calc(var(--s) * 28 / 24) var(--s);
}

.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.rating__num {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: #e8b45f;
}

/* Bei den Partnern trägt die Bewertung den Abschnitt mit — größer, mittig. */
.rating--lead {
  justify-content: center;
  margin-top: 34px;
}

.rating--lead .stars {
  --s: 19px;
}

.rating--lead .rating__num {
  font-size: 17px;
}

/* Beim Hereinscrollen füllen sich die Sterne von links auf ihren Wert, und
   kurz danach geht das Gold einmal an. Die Zahl zählt parallel hoch, das
   macht der Zähler in main.js über `data-count-to`.

   Angehängt an `.is-visible`: die Klasse setzt derselbe Beobachter, der den
   Abschnitt einblendet — so beginnt die Füllung genau dann, wenn die Zeile
   sichtbar wird, und nicht schon beim Laden weit oberhalb.

   Kein `to`-Bild im Keyframe: mit `both` bleibt am Ende die eigene Breite
   der Regel stehen, also `var(--pct)`. Damit muss der Wert nur an einer
   Stelle im HTML stehen. Bei reduzierter Bewegung kürzt die globale Regel
   ganz unten die Dauer auf 0,001 ms — dann steht der Wert sofort da. */
@keyframes starsFill {
  from {
    width: 0;
  }
}

@keyframes starsGlow {
  0%,
  58% {
    filter: none;
  }
  76% {
    filter: drop-shadow(0 0 7px rgba(232, 180, 95, 0.6));
  }
  100% {
    filter: none;
  }
}

.rating--lead.is-visible .stars::before {
  animation: starsFill 1.1s var(--ease) both, starsGlow 2s var(--ease) both;
}

/* Bei den eigenen Apps steht die Bewertung neben dem Namen und soll dort
   nicht mitreden — kleine Sterne, Zahl in derselben Zurückhaltung. */
.rating--mini {
  gap: 5px;
  font-size: 11px;
}

.rating--mini .stars {
  --s: 10.5px;
  opacity: 0.85;
}

.rating--mini .rating__num {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
}

/* --- Fußnoten -------------------------------------------------------------
   Nebenbemerkungen, Einordnungen und Herkunftsangaben standen vorher als
   Kleingedrucktes direkt an ihrer Stelle und haben die Seite unruhig
   gemacht. Jetzt hängt an der Aussage nur eine hochgestellte Zahl, der
   Text steht gesammelt am Seitenende.

   Der Verweis ist bewusst kein Link: die Bewertungen sitzen in Knöpfen und
   in Verweisen, und ein Link im Link ist nicht erlaubt. Vorleseprogramme
   bekommen den Text stattdessen über `aria-describedby` direkt am Element.

   Die Fußnoten müssen lesbar bleiben — sie tragen Pflichtangaben. Deshalb
   `--text-muted` und 12,5px, nicht das nächstblassere Grau.
   -------------------------------------------------------------------- */
.fn {
  margin-left: 1px;
  font-size: 0.62em;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  vertical-align: super;
}

/* Ganz unten im Footer, unter der Schlusszeile — weiter nach unten geht
   es auf der Seite nicht. Der Footer selbst hat unten kein Polster, also
   bringt der Block sein eigenes mit; sonst klebt die letzte Zeile am
   Seitenende. */
.footnotes {
  padding-bottom: 30px;
}

.footnotes__inner {
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--border);
}

.footnotes__title {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.footnotes__list {
  display: grid;
  gap: 8px;
  max-width: 68ch;
  margin: 0;
  padding-left: 1.6em;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.footnotes__list li::marker {
  font-size: 11px;
  color: var(--text-muted);
}

/* Name und Bewertung in einer Zeile, damit die Reihen nicht höher werden */
.app-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.teaser__apps {
  display: grid;
  gap: 9px;
  list-style: none;
}

/* Jede Reihe führt direkt in ihre App — der Knopf „Applikationen ansehen"
   bleibt daneben für den Überblick. */
.teaser__app {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease),
    transform 0.22s var(--ease);
}

.teaser__app:hover,
.teaser__app:focus-visible {
  border-color: rgba(236, 143, 211, 0.34);
  background: var(--bg-elevated);
  transform: translateX(3px);
}

/* Der Pfeil sitzt normalerweise still da und rückt beim Zeigen nach vorn. */
.teaser__go {
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), color 0.22s var(--ease);
}

.teaser__app:hover .teaser__go,
.teaser__app:focus-visible .teaser__go {
  opacity: 1;
  color: #efb9e0;
  transform: translateX(3px);
}

.teaser__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

.teaser__app > span:nth-child(2) {
  display: grid;
  gap: 1px;
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.teaser__apps b {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.teaser__state {
  flex-shrink: 0;
  padding: 3px 9px;
  border: 1px solid rgba(108, 195, 148, 0.4);
  border-radius: 999px;
  background: rgba(108, 195, 148, 0.1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fd6b0;
}

.teaser__state.is-soon {
  border-color: var(--border);
  background: none;
  color: var(--text-muted);
}

/* Unterseiten starten direkt unter der Navigation */
.section--page {
  padding-block: calc(var(--nav-h) + clamp(48px, 6vw, 88px)) var(--section-y);
}

.section--page h1 {
  margin-top: 18px;
  font-size: clamp(30px, 4.4vw, 48px);
}

.page-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(46, 134, 193, 0.1), rgba(7, 9, 15, 0));
}

.page-cta h2 {
  font-size: clamp(21px, 2.6vw, 27px);
}

.page-cta p {
  max-width: 52ch;
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--text-secondary);
}

/* 8.9 Kontakt */
.contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
  padding: clamp(30px, 5vw, 56px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(46, 134, 193, 0.1), rgba(7, 9, 15, 0));
}

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

.contact h2 {
  margin-top: 18px;
  font-size: clamp(26px, 3.4vw, 40px);
}

.contact__lead {
  margin-top: 16px;
  color: var(--text-secondary);
}

/* Anrufen und Schreiben sind zwei gleichwertige Wege — sie sehen deshalb
   auch gleich aus. Kompakt und waagerecht: das Symbol steht neben dem Text,
   nicht darüber, sonst wird aus zwei Kontaktzeilen ein halber Bildschirm. */
.reach {
  display: grid;
  /* Nach der Breite der Karte statt nach der des Fensters umbrechen: die
     linke Spalte ist schmaler als der Bildschirm. */
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.reach__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1px 11px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease),
    transform 0.22s var(--ease);
}

.reach__card:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

.reach__icon {
  display: grid;
  place-items: center;
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(86, 194, 240, 0.14);
  color: var(--accent);
  transition: background 0.22s var(--ease);
}

.reach__card:hover .reach__icon {
  background: rgba(86, 194, 240, 0.24);
}

.reach__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.reach__value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: break-word;
}

/* Der Zusatz ist eine Nettigkeit, keine Information — auf schmalen Karten
   fliegt er raus, statt die Karte in die Höhe zu treiben. */
.reach__note {
  grid-column: 2;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 420px) {
  .reach__note {
    display: none;
  }
}

/* Das Formular ist die letzte Station der Seite — es bekommt eine eigene
   Karte statt nackt im Abschnitt zu stehen. */
.form {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  box-shadow: var(--shadow-lift);
}

.form__head {
  margin-bottom: 4px;
}

.form__head-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.form__head-note {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

/* Absendeknopf über die volle Breite — er ist der einzige Weg nach vorn */
.form > .btn[type='submit'] {
  justify-content: center;
  width: 100%;
  padding: 15px 24px;
  font-size: 15px;
}

/* Fahrplan aus dem Baukasten — getrennt von dem, was der Besucher schreibt.
   Deshalb sieht er auch anders aus: kein Eingabefeld, sondern eine
   Zusammenfassung, die erkennbar automatisch entstanden ist. */
.plan {
  display: grid;
  gap: 10px;
  padding: 15px 17px;
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  animation: mailfixIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

.plan__clear {
  border: 0;
  background: transparent;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}

.plan__clear:hover {
  color: var(--text-secondary);
}

.plan__note {
  font-size: 12px;
  color: var(--text-muted);
}

.plan__body {
  display: grid;
  gap: 12px;
}

.plan__group-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.plan__group ul {
  display: grid;
  gap: 4px;
  margin-top: 5px;
  padding-left: 16px;
  list-style: disc;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.plan__scope {
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Rückfallebene, wenn kein Mailprogramm aufgeht */
.mailfix {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: rgba(86, 194, 240, 0.05);
  animation: mailfixIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mailfixIn {
  from { opacity: 0; transform: translateY(10px); }
}

.mailfix__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.mailfix__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.mailfix__text a {
  color: var(--accent);
  text-decoration: none;
}

.mailfix__box {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.32);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  resize: vertical;
}

.mailfix__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mailfix__done:not(:empty) {
  font-size: 12.5px;
  color: #8fe3b6;
}

/* Fehlschlag darf nicht wie Erfolg aussehen */
.mailfix__done.is-bad {
  color: #ffb694;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.form__consent input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.form__consent a {
  color: var(--text-secondary);
  text-decoration: none;
}

.form__status {
  display: none;
  padding: 13px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 14px;
}

.form__status.is-visible {
  display: block;
}

.form__status[data-tone='ok'] {
  border-color: rgba(61, 220, 132, 0.4);
  background: rgba(61, 220, 132, 0.08);
  color: #8be8b4;
}

.form__status[data-tone='error'] {
  border-color: rgba(255, 120, 120, 0.4);
  background: rgba(255, 120, 120, 0.08);
  color: #ffb0b0;
}

/* --- 9. Footer ----------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: var(--section-y);
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: 40px;
  padding-block: 56px 44px;
}

@media (max-width: 760px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

.site-footer__brand p {
  max-width: 320px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
}

.site-footer h4 {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.site-footer ul {
  display: grid;
  gap: 11px;
  list-style: none;
  font-size: 14.5px;
  color: var(--text-secondary);
}

.site-footer ul a {
  transition: color 0.2s var(--ease);
}

.site-footer ul a:hover {
  color: var(--accent);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

.footer-legal-links {
  display: flex;
  gap: 20px;
}

.footer-legal-links a:hover {
  color: var(--accent);
}

/* --- 10. Rechtstexte / Fehlerseite --------------------------------------- */
.legal {
  max-width: 780px;
  padding-block: calc(var(--nav-h) + 72px) 40px;
}

.legal h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  /* „Datenschutzerklärung" ist ein Wort und passt bei 320 px nicht in eine
     Zeile — ohne Trennung schiebt es die ganze Seite zur Seite. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.legal h2 {
  margin-top: 44px;
  font-size: 21px;
}

.legal h3 {
  margin-top: 28px;
  font-size: 16.5px;
}

.legal p,
.legal li {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 15.5px;
}

.legal ul,
.legal ol {
  margin-top: 6px;
  padding-left: 22px;
}

.legal a {
  color: var(--accent);
  text-decoration: none;
}

.legal address {
  margin-top: 14px;
  font-style: normal;
  color: var(--text-secondary);
  line-height: 1.8;
}

.legal__updated {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Vertragstexte (AGB, Widerruf): nummerierte Absätze, Inhaltsverzeichnis, Textkasten */
.legal h4 {
  margin-top: 20px;
  font-size: 15.5px;
}

.legal .abs {
  display: grid;
  grid-template-columns: 2.9em 1fr;
  gap: 0 4px;
}

.legal .abs__nr {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  padding-top: 2px;
}

.legal .legal__toc {
  columns: 2 280px;
  column-gap: 32px;
  margin-top: 10px;
  padding-left: 0;
  list-style: none;
}

.legal .legal__toc li {
  margin-top: 6px;
  break-inside: avoid;
  font-size: 14.5px;
}

.legal__box {
  margin-top: 16px;
  padding: 4px 22px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.legal a.btn {
  margin-top: 6px;
}

.legal a.btn--primary {
  color: #04121c;
}

/* Dienstleister-Liste (/dienstleister): eine Karte je Anbieter */
.legal .prov {
  margin-top: 14px;
  padding: 16px 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.legal .prov h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 0;
  font-size: 16.5px;
}

.legal .prov__status {
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
}

.legal .prov__status--aktiv {
  border-color: currentColor;
  color: var(--accent);
}

.legal .prov dl {
  display: grid;
  grid-template-columns: 7.4em 1fr;
  gap: 6px 16px;
  margin: 12px 0 0;
  font-size: 14.5px;
}

.legal .prov dt {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}

.legal .prov dd {
  margin: 0;
  color: var(--text-secondary);
}

@media (max-width: 520px) {
  .legal .prov dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .legal .prov dd {
    margin-bottom: 8px;
  }
}

/* Platzhalter, die vor dem Livegang ersetzt werden müssen */
.todo {
  padding: 2px 7px;
  border: 1px dashed rgba(255, 190, 100, 0.55);
  border-radius: 5px;
  background: rgba(255, 190, 100, 0.09);
  font-family: var(--font-mono);
  font-size: 0.87em;
  color: #ffcf8a;
}

.notice {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 190, 100, 0.35);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: rgba(255, 190, 100, 0.06);
  font-size: 14.5px;
  color: #f5d3a4;
}

.error-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  text-align: center;
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.error-page h1 {
  margin: 18px 0 14px;
  font-size: clamp(30px, 5vw, 48px);
}

.error-page p {
  max-width: 440px;
  margin: 0 auto 32px;
  color: var(--text-secondary);
}

/* --- 11. Bewegung & Barrierefreiheit ------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

/* Überschriften mit data-type schreiben sich beim Scrollen selbst.
   ---------------------------------------------------------------------------
   Zwei Ebenen, damit die Zeile nicht springt: `.type__ghost` trägt den
   vollständigen Text, ist durchsichtig und hält damit die Höhe und den
   Umbruch fest — Vorleseprogramme lesen genau diese Ebene. Darüber liegt
   `.type__out` mit dem, was schon getippt ist; sie ist für Vorleseprogramme
   ausgeblendet, damit der Text nicht zweimal ankommt. */
.type__ghost {
  opacity: 0;
}

.type__out {
  position: absolute;
  inset: 0;
}

[data-type] {
  position: relative;
}

.type__out::after {
  content: '';
  display: none;
  width: 3px;
  height: 0.82em;
  margin-left: 3px;
  vertical-align: -0.06em;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(86, 194, 240, 0.7);
}

[data-type].is-typing .type__out::after {
  display: inline-block;
  animation: caretBlink 0.85s steps(1) infinite;
}

@keyframes caretBlink {
  50% { opacity: 0; }
}

/* Hero: Inhalt zieht beim Wegscrollen leicht mit und blendet aus */
.hero__parallax {
  will-change: transform, opacity;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Gestaffelter Einlauf innerhalb einer Gruppe */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.07s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.14s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.21s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.28s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  [data-stagger] > *,
  .phase__list li,
  .hero__fade {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero h1 .line > span {
    transform: none !important;
  }

  .hero__parallax {
    transform: none !important;
    opacity: 1 !important;
  }

  .case__visual::before,
  .builder__core-ring,
  .bnode-pulse,
  .mockup__chart u,
  .layers i,
  .lab__panel,
  .job.is-landing,
  .lab__badge::before {
    animation: none;
  }

  .chart__fill {
    transition: none;
  }

  .bnode-pulse {
    opacity: 0;
  }

  #node-canvas,
  .orb {
    display: none;
  }
}

/* Rechtliches muss da sein und erreichbar bleiben — aber es muss nicht
   mitreden. Kleiner und gedämpfter als der Rest der Fußzeile. */
.site-footer__legal a {
  font-size: 12px;
  color: var(--text-faint, rgba(255, 255, 255, 0.34));
}

.site-footer__legal a:hover {
  color: var(--text-secondary);
}

/* Weg der Nachricht: E-Mail oder WhatsApp. Zwei schlichte Schalter, keine
   Entscheidung, die jemanden aufhält. */
.form__way {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 2px;
  padding: 0;
  border: none;
}

.form__way legend {
  padding: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.form__way label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.form__way label:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.form__way label:has(input[value='whatsapp']:checked) {
  border-color: rgba(37, 211, 102, 0.5);
  background: rgba(37, 211, 102, 0.12);
  color: #8bf0b1;
}

/* Rechtliches klappt auf. Die Verweise stehen trotzdem im Quelltext. */
.foot-legal summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  color: var(--text-faint, rgba(255, 255, 255, 0.34));
}

.foot-legal summary::-webkit-details-marker {
  display: none;
}


/* In der unteren Zeile: geschlossen nur ein Wort, aufgeklappt ein kleines
   Fenster darüber — eine Ebene, ein Kasten, mittig. */
.site-footer__bottom .foot-legal {
  position: relative;
  text-align: center;
}

.foot-legal:not([open]) .foot-legal__menu {
  display: none;
}

.foot-legal__menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  z-index: 5;
}

.foot-legal__menu a {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
}

.foot-legal__menu a:hover {
  background: var(--surface);
  color: var(--text);
}

/* Auf schmalen Geräten bricht die untere Zeile um. Dann stehen die drei
   Angaben untereinander in der Mitte — sonst sitzt „Rechtliches" am rechten
   Rand und das Fenster darüber ragt aus der Seite. */
@media (max-width: 640px) {
  .site-footer__bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  .site-footer__bottom .foot-legal {
    order: 3;
  }

  .foot-legal__menu {
    white-space: normal;
    max-width: calc(100vw - 40px);
  }
}

/* --- Erstgespräch: „Noch unsicher?“ und Terminplanung ------------------- */
.form[hidden],
.meet[hidden],
.meet__form[hidden],
.meet__steps[hidden],
.meet__done[hidden] {
  display: none;
}

.form__head--split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
}

/* Ein ruhiger Streifen unter der Überschrift: Frage links, Knopf rechts */
.meet-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  width: 100%;
  padding: 10px 10px 10px 16px;
  border: 1px dashed rgba(95, 220, 160, 0.35);
  border-radius: var(--r-md);
  background: rgba(95, 220, 160, 0.04);
}

.meet-cta__q {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.meet-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(95, 220, 160, 0.4);
  border-radius: 999px;
  background: rgba(95, 220, 160, 0.1);
  font-size: 13px;
  font-weight: 600;
  color: #a9ecc9;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.meet-cta__btn:hover {
  border-color: rgba(95, 220, 160, 0.7);
  background: rgba(95, 220, 160, 0.16);
  transform: translateY(-1px);
}

@media (max-width: 460px) {
  .meet-cta__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Dieselbe Karte wie das Formular, damit der Wechsel ruhig bleibt */
.meet {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(95, 220, 160, 0.06), rgba(255, 255, 255, 0.012));
  box-shadow: var(--shadow-lift);
  animation: meetIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes meetIn {
  from { opacity: 0; transform: translateY(8px); }
}

.meet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.meet__back {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.meet__back:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.meet__steps {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
}

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

.meet__cal,
.meet__slots {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.18);
}

.cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cal__month {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.cal__legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.cal__legend i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: rgba(95, 220, 160, 0.35);
}

.cal__week,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal__week {
  margin-bottom: 4px;
}

.cal__week span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

.cal__day {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.cal__day:hover:not(:disabled) {
  border-color: rgba(95, 220, 160, 0.5);
  background: rgba(95, 220, 160, 0.1);
}

.cal__day.is-free {
  background: rgba(95, 220, 160, 0.07);
}

.cal__mon {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  font-size: 7.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.cal__day:disabled {
  background: transparent;
  color: var(--text-muted);
  opacity: 0.45;
  cursor: default;
}

.cal__day.is-today::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}

.cal__day.is-on {
  border-color: #5fdca0;
  background: #5fdca0;
  color: #04140c;
  font-weight: 700;
}

.meet__label {
  margin-bottom: 10px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 7px;
}

.slot {
  padding: 9px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  animation: slotIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease);
}

.slot:nth-child(2) { animation-delay: 30ms; }
.slot:nth-child(3) { animation-delay: 60ms; }
.slot:nth-child(4) { animation-delay: 90ms; }
.slot:nth-child(5) { animation-delay: 120ms; }
.slot:nth-child(6) { animation-delay: 150ms; }
.slot:nth-child(7) { animation-delay: 180ms; }

@keyframes slotIn {
  from { opacity: 0; transform: translateY(4px); }
}

.slot:hover {
  border-color: rgba(95, 220, 160, 0.5);
  color: var(--text);
}

.slot.is-on {
  border-color: #5fdca0;
  background: rgba(95, 220, 160, 0.16);
  color: #a9ecc9;
  font-weight: 600;
}

.meet__hint {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.meet__form {
  display: grid;
  gap: 14px;
}

.meet__kind {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
}

.meet__kind legend {
  float: left;
  width: 100%;
  margin-bottom: 8px;
}

.meet__kind label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.meet__kind label:has(input:checked) {
  border-color: rgba(95, 220, 160, 0.5);
  background: rgba(95, 220, 160, 0.1);
  color: var(--text);
}

.meet__done {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 6px 6px;
  text-align: center;
}

.meet__check {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #5fdca0;
  color: #04140c;
  box-shadow: 0 0 0 8px rgba(95, 220, 160, 0.14);
  animation: bookCheck 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.meet__done-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.meet__done-text {
  max-width: 440px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.meet__done-text a {
  color: var(--accent);
}

.meet__done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .meet,
  .slot,
  .meet__check {
    animation: none;
  }
}

/* Der Knopf trägt den gewählten Termin — auf dem Handy darf er umbrechen */
.meet__form .btn {
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}

/* Datenschutz als Merkmal, unter den Kontaktwegen */
.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(95, 220, 160, 0.22);
  border-radius: var(--r-md);
  background: rgba(95, 220, 160, 0.05);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.privacy-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #5fdca0;
}

.privacy-note b {
  color: var(--text);
}

/* --- Cal.com in der Terminplanung ---------------------------------------- */
.meet__embed {
  display: grid;
  gap: 12px;
}

.meet__embed[hidden] {
  display: none;
}

.meet__privacy {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.025);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.meet__privacy svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #5fdca0;
}

.meet__privacy a {
  color: var(--text-secondary);
  text-decoration: none;
}

/* Cal.com setzt die Höhe des Rahmens selbst; bis dahin hält die Fläche
   den Platz, damit die Seite beim Laden nicht springt */
.meet__frame {
  position: relative;
  min-height: 460px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.meet__frame iframe {
  width: 100% !important;
  border: 0;
}

.meet__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.meet__spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid rgba(95, 220, 160, 0.2);
  border-top-color: #5fdca0;
  border-radius: 50%;
  animation: meetSpin 0.8s linear infinite;
}

@keyframes meetSpin {
  to { transform: rotate(360deg); }
}

.meet__newtab {
  justify-self: center;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
}

.meet__newtab:hover {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .meet__spinner {
    animation: none;
  }
}

/* --- 12. Scroll-Erlebnis -------------------------------------------------
   Weiches Scrollen, der Leitsatz, der beim Scrollen aufleuchtet, und der
   Faden, der vom Hero bis in die Fußzeile mitläuft. Das Verhalten steht in
   scroll.js; hier nur das Aussehen.
   ------------------------------------------------------------------------- */

/* Läuft das weiche Scrollen, darf der Browser nicht zusätzlich glätten —
   sonst ziehen zwei Animationen an derselben Position. */
html.has-smooth-scroll {
  scroll-behavior: auto;
}

/* Die beiden Abschnitte, die beim Scrollen anhalten, sollen bei einem
   Sprung genau an ihrem Anfang landen — dort rastet ihr Inhalt ein. Der
   negative Rand hebt die Polsterung für die Leiste wieder auf. */
.statement,
.process {
  scroll-margin-top: calc(-1 * (var(--nav-h) + 24px));
}

@media (max-width: 899px), (max-height: 619px) {
  .process {
    scroll-margin-top: 0;
  }
}

/* Leitsatz: der Abschnitt ist knapp doppelt so hoch wie das Fenster, der
   Satz klebt in der Mitte. Beim Scrollen leuchtet er Wort für Wort auf. */
.statement {
  position: relative;
  z-index: 1;
  height: 190vh;
}

.statement__sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100vh;
  height: 100svh;
}

.statement__text {
  max-width: 19ch;
  font-family: var(--font-display);
  font-size: clamp(32px, 5.4vw, 70px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: var(--text);
  text-wrap: balance;
}

.statement__text em {
  font-style: normal;
  color: var(--accent);
}

.statement__text .sw {
  opacity: calc(0.13 + 0.87 * var(--lit, 1));
  transition: opacity 0.18s linear;
}

/* „Über uns“ über dem Leitsatz */
.statement__eyebrow {
  margin-bottom: clamp(18px, 3vh, 30px);
}

/* Live-Demo: hält auf großen Bildschirmen an ----------------------------
   Die Demo rastet mit ihrer Oberkante knapp unter der Leiste ein — die
   bleibt ja stehen und würde sonst die Reiter verdecken.
   Der leere Raum darunter ist die Strecke, die das Anhalten dauert — in
   der Zeit bedient der Faden die Demo. Kein Verkleinern: das Ziehen im
   Planungsbrett arbeitet mit festen Positionen und braucht echte Maße. */
.lab-hold__room {
  display: none;
}

@media (min-width: 900px) and (min-height: 640px) {
  /* Wechselt der Faden den Reiter, ändert sich die Höhe der Demo. Der
     Browser würde dann die Scrollposition nachziehen („Scroll-Anchoring“),
     der Faden fiele hinter seine Station zurück, schaltete zurück — und
     das im Kreis. Innerhalb der Demo darf deshalb nichts verankern. */
  .lab-hold {
    overflow-anchor: none;
  }

  .lab-stage {
    position: sticky;
    top: calc(var(--nav-h) + 20px);
    z-index: 1;
  }

  .lab-hold__room {
    display: block;
    height: 170vh;
  }
}

/* Faden -----------------------------------------------------------------
   Eine Leinwand hinter allem Inhalt (gleiche Ebene wie der Hintergrund,
   aber danach im Dokument). Darauf zeichnet scroll.js einen kleinen Stern
   und die Funken, die er beim Scrollen hinterlässt — in der Machart der
   Sternpunkte im Hintergrund. Text und Karten stehen immer davor. */
.thread {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Was der Faden gerade zeigt: ein feiner Rahmen in der Farbe des
   Abschnitts — Hinweis, kein Scheinwerfer. */
.is-thread-mark {
  outline: 1.5px solid color-mix(in srgb, var(--thread-c, var(--accent)) 65%, transparent) !important;
  outline-offset: 4px !important;
  transition: outline-offset 0.35s var(--ease), outline-color 0.35s var(--ease);
}

.is-thread-mark--strong {
  animation: markPulse 1.4s ease-in-out infinite;
}

@keyframes markPulse {
  0%, 100% { outline-offset: 4px; box-shadow: 0 0 0 0 transparent; }
  50% {
    outline-offset: 6px;
    box-shadow: 0 0 26px -10px var(--thread-c, var(--accent));
  }
}

.is-thread-press {
  animation: threadPress 0.5s var(--ease);
}

@keyframes threadPress {
  35% { transform: scale(0.97); }
}

/* Endstation: „Nachricht senden“ leuchtet und bleibt so */
.is-thread-dock {
  outline: 1.5px solid color-mix(in srgb, var(--thread-c, var(--accent)) 70%, transparent);
  outline-offset: 4px;
  animation: dockGlow 2.8s ease-in-out infinite;
}

@keyframes dockGlow {
  0%, 100% { box-shadow: 0 10px 34px -12px var(--accent-glow), 0 0 0 0 rgba(86, 194, 240, 0); }
  50% { box-shadow: 0 16px 50px -10px var(--accent-glow), 0 0 0 8px rgba(86, 194, 240, 0.12); }
}

@media print {
  .thread {
    display: none;
  }
}

/* Ohne Bewegung steht der Leitsatz einfach da — kein Anhalten nötig. Steht
   hier und nicht in Abschnitt 11, weil die Regeln oben sonst gewinnen. */
@media (prefers-reduced-motion: reduce) {
  .statement {
    height: auto;
  }

  .statement__sticky {
    position: static;
    height: auto;
    padding-block: var(--section-y);
  }

  .hero__cue-line::after,
  .is-thread-mark--strong,
  .is-thread-dock {
    animation: none;
  }

  .lab-stage {
    position: static;
  }

  .lab-hold__room {
    display: none;
  }
}

/* Marken als Pillen mit Logo in der Kopfzeile des Blogs (Farbe kommt von .marke-<name>) */
.nav-links a.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
  transition: box-shadow 0.25s, border-color 0.25s, background 0.25s;
}

.nav-links a.nav-brand img {
  width: 18px;
  height: auto;
}

.nav-links a.nav-brand:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: 0 0 18px -4px var(--accent-glow);
  color: var(--accent);
}

.nav-links li:has(> .nav-brand) {
  margin-left: 2px;
}


/* --- Auswahlfenster (window.rtChoice in main.js) ------------------------------ */
.ask {
  position: fixed;
  inset: 0;
  margin: auto; /* das Seiten-Reset nimmt dem Fenster sonst die Mitte */
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: visible;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
  border-radius: var(--r-lg, 20px);
  background: var(--surface-strong, #11151f);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9);
  color: var(--text, #edeef3);
}

.ask::backdrop {
  background: rgba(3, 5, 10, 0.72);
  backdrop-filter: blur(4px);
}

.ask__box {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 28px 24px 22px;
}

.ask h3 {
  padding-right: 30px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.ask p {
  font-size: 14.5px;
  color: var(--text-secondary);
}

.ask__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ask__x:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ask__opts {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.ask__opt {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 16px 18px;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.ask__opt:hover,
.ask__opt:focus-visible {
  border-color: var(--accent, #56c2f0);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.ask__opt b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.ask__opt span {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.ask__opt--wa {
  border-color: rgba(37, 211, 102, 0.6);
  background: linear-gradient(120deg, rgba(37, 211, 102, 0.18), rgba(37, 211, 102, 0.04));
}

.ask__opt--wa:hover,
.ask__opt--wa:focus-visible {
  border-color: #25d366;
  background: linear-gradient(120deg, rgba(37, 211, 102, 0.28), rgba(37, 211, 102, 0.08));
}

.ask__badge {
  position: absolute;
  top: -11px;
  right: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #25d366;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #04210f;
}

.ask__cancel {
  justify-self: center;
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.ask__cancel:hover {
  color: var(--text);
}

/* „Blog“ in der Hauptnavigation: nur Logo und Schriftzug, ohne Rahmen */
.nav-links .nav-item > a.nav-brand {
  padding: 6px 4px;
  border-color: transparent;
  background: none;
  box-shadow: none;
}

.nav-links .nav-item > a.nav-brand:hover,
.nav-links .nav-item.is-open > a.nav-brand {
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: #d6ccff;
}

/* Telefon neben WhatsApp: blau, wie WhatsApp grün ist */
.nav-icon[href^='tel:'] {
  border-color: rgba(86, 194, 240, 0.45);
  background: rgba(86, 194, 240, 0.12);
  color: #56c2f0;
}

.nav-icon[href^='tel:']:hover,
.nav-icon[href^='tel:']:focus-visible {
  border-color: rgba(86, 194, 240, 0.9);
  background: rgba(86, 194, 240, 0.24);
  color: #8fd8f7;
}