/* ============================================================
   28Solutions · Design-System „Papier und Präzision"
   Warmes Papier, Tinte, Ultramarin. Editorial statt Template.
   ============================================================ */

:root {
  --paper: #ffffff;
  --paper-2: #f6f6f4;
  --paper-bright: #ffffff;
  --ink: #16161a;
  --ink-70: rgba(22, 22, 26, 0.72);
  --ink-55: rgba(22, 22, 26, 0.62); /* AA-Kontrast für Kicker, Fine, Plan-Sub */
  --line: rgba(22, 22, 26, 0.16);
  --line-soft: rgba(22, 22, 26, 0.09);
  --blue: #2438c9;
  --blue-deep: #1c2da8;
  --dark: #101014;
  --dark-2: #17171c;
  --dark-line: rgba(255, 255, 255, 0.14);
  --dark-text: #f2f2f0;
  --dark-text-soft: rgba(242, 242, 240, 0.62);
  --amber: #c9873a;

  --font-display: 'Clash Display', 'Segoe UI', sans-serif;
  --font-text: 'Switzer', 'Segoe UI', sans-serif;
  --font-mono: 'Fragment Mono', 'Consolas', monospace;
  --font-serif: 'Gambetta', Georgia, serif;

  --w: min(1180px, calc(100vw - clamp(2.5rem, 8vw, 7rem)));
  --radius: 10px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

/* ---------- Grundlagen ---------- */

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

html {
  scroll-behavior: smooth;
  /* Anker-Sprünge landen sonst unter der fixen Topbar. Der Wert ist die
     Höhe der Topbar; den eigenen Innenabstand der Zielsektion zieht
     weiter unten `scroll-margin-top` zusätzlich ab. */
  scroll-padding-top: 4.6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--blue); color: var(--paper); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

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

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

/* Skip-Link: unsichtbar, bis er per Tastatur fokussiert wird —
   dann als kleine Pille oben links über der Topbar */
.skiplink {
  position: fixed;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 3100;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  transform: translateY(calc(-100% - 2rem));
}

.skiplink:focus,
.skiplink:focus-visible {
  transform: none;
}

.container { width: var(--w); margin-inline: auto; }

/* Serifen-Akzent in Überschriften */
em.acc {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 1.04em;
}

.blue { color: var(--blue); }

/* ---------- Textmarker ----------
   Ein bis zwei Wörter, über die beim Hereinscrollen einmal Licht läuft;
   danach bleibt eine ruhige blaue Unterlage stehen. Bewusst selten
   eingesetzt: Wo alles leuchtet, leuchtet nichts.
   Der helle Streifen liegt in ::after und wird von dessen eigener
   Hintergrundfläche beschnitten — deshalb wandert die Position des
   Farbverlaufs und nicht das Element, das würde über die Nachbarwörter
   hinauslaufen. */
.lit {
  --lit-tint: color-mix(in srgb, var(--blue) 12%, transparent);
  position: relative;
  padding: 0.1em 0.22em;
  margin-inline: -0.22em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--lit-tint), var(--lit-tint));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.66s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lit.is-lit { background-size: 100% 100%; }

.lit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(100deg,
    transparent 0%,
    color-mix(in srgb, var(--blue) 30%, transparent) 50%,
    transparent 100%);
  background-repeat: no-repeat;
  background-size: 62% 100%;
  background-position: -75% 0;
}

.lit.is-lit::after { animation: litSweep 0.95s ease-out both; }

@keyframes litSweep {
  0% { opacity: 0; background-position: -75% 0; }
  22% { opacity: 1; }
  100% { opacity: 0; background-position: 175% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lit { transition: none; background-size: 100% 100%; }
  .lit::after { display: none; }
}

/* ---------- Typo-Bausteine ---------- */

.kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* Das Zeichen: eine kleine Unendlichkeit vor jedem Sektionstitel */
.kicker::before {
  content: '';
  width: 24px;
  height: 13px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 52'%3E%3Cpath d='M10,26 C10,8 42,8 50,26 C58,44 90,44 90,26 C90,8 58,8 50,26 C42,44 10,44 10,26' fill='none' stroke='%232438c9' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.kicker::after {
  content: '';
  flex: 1;
  align-self: center;
  height: 1px;
  background: var(--line);
}

.kicker b {
  font-weight: 400;
  color: var(--blue);
}

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 38em;
}

.fine {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-55);
  max-width: 60em;
}

/* Textlink mit feiner Unterstreichung */
.tlink {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-55);
  transition: color 0.2s, text-decoration-color 0.2s;
}

.tlink:hover { color: var(--blue); text-decoration-color: var(--blue); }

/* „Mehr"-Link: Mono, präzise */
.mlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink);
  /* größere Tap-Fläche ohne sichtbare Layout-Änderung */
  padding-block: 0.55rem;
  margin-block: -0.55rem;
}

.mlink i {
  font-style: normal;
  display: inline-block;
  width: 1.6em;
  height: 1px;
  background: var(--ink);
  position: relative;
  transition: width 0.25s var(--ease), background 0.2s;
}

.mlink i::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  transform: rotate(45deg);
  transition: border-color 0.2s;
}

.mlink:hover { color: var(--blue); }
.mlink:hover i { width: 2.4em; background: var(--blue); }
.mlink:hover i::after { border-color: var(--blue); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.55rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease), transform 0.18s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--blue); color: #fff; }

.btn-line { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: var(--blue); color: #fff; }

.btn-line-dark { border-color: var(--dark-line); color: var(--dark-text); }
.btn-line-dark:hover { border-color: var(--dark-text); background: var(--dark-text); color: var(--dark); }

.btn-s { padding: 0.6rem 1.1rem; font-size: 0.9rem; }

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

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 3000;
  transition: background 0.3s, box-shadow 0.3s;
}

.topbar.is-scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
}

.topbar-inner {
  width: var(--w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 0.9rem;
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.brand b { font-weight: 600; color: var(--blue); }

/* Mini-Animation der Wortmarke: beim Hover kippt die 8 um ihre eigene
   Mitte zur ∞, legt sich auf die Mittellinie der Wortmarke (nicht auf die
   Grundlinie — sie soll schweben) und schafft sich links wie rechts
   denselben Luftraum. „Solutions" rückt dafür nach rechts, sodass die
   Abstände 2 ↔ ∞ ↔ S optisch gleich groß werden.
   Die Werte sind aus den echten Glyphenmaßen der Clash Display gerechnet:
   Ziffernbreite 0,678 em, Tintenbreite 0,66 em, Versalhöhe 0,68 em.

   Bewusst nur `transform`, kein `margin`: Ränder würden die Wortmarke
   breiter machen und die ganze Navigation rechts daneben mitschieben.
   Transformationen verschieben nur die Darstellung, nicht das Layout —
   die Topbar bleibt beim Hover Pixel für Pixel stehen. */
.brand .b8,
.brand b {
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform 0.6s cubic-bezier(0.2, 1.5, 0.35, 1);
}

.brand:hover .b8,
.brand:focus-visible .b8 {
  transform: translate(0.075em, -0.04em) rotate(90deg);
}

/* 0,075 em Luft links plus 0,1 em rechts von der gekippten Acht */
.brand:hover b,
.brand:focus-visible b {
  transform: translateX(0.175em);
}

@media (prefers-reduced-motion: reduce) {
  .brand .b8,
  .brand b { transition: none; }
}

.topnav {
  display: flex;
  gap: clamp(1rem, 2vw, 1.8rem);
  margin-inline: auto;
}

.topnav a {
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-70);
  padding-block: 0.3rem;
  position: relative;
  transition: color 0.2s;
}

.topnav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.topnav a:hover, .topnav a[aria-current='page'] { color: var(--ink); }
.topnav a:hover::after, .topnav a[aria-current='page']::after { transform: scaleX(1); }

/* Schulungen: darunter klappt der Weg in den Kursbereich auf, damit
   Teilnehmer nicht erst die Seite laden müssen, um sich anzumelden.
   Die unsichtbare Brücke (::before) hält den Hover über die Lücke. */
.nav-sub-wrap { position: relative; display: inline-flex; }

.nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 0.7rem;
  padding: 0.3rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-soft);
  box-shadow: 0 16px 30px -20px rgba(22, 22, 26, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s 0.22s;
  z-index: 10;
}

.nav-sub::before {
  content: '';
  position: absolute;
  inset: -0.8rem -0.6rem 100% -0.6rem;
}

.nav-sub-wrap:hover .nav-sub,
.nav-sub-wrap:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.topnav .nav-sub a {
  display: block;
  white-space: nowrap;
  padding: 0.45rem 0.9rem;
  border-radius: 7px;
  font-size: 0.88rem;
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
}

.topnav .nav-sub a::after { display: none; }
.topnav .nav-sub a:hover { background: var(--ink); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .nav-sub { transition: none; }
}

.topbar-cta { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.topnav + .topbar-cta { margin-left: 0; }

/* Burger: feste 44×44-Tap-Fläche, darf im Flex nie gequetscht werden */
.menu-btn {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  position: relative;
}

.menu-btn span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}

.menu-btn span:nth-child(1) { top: 17px; }
.menu-btn span:nth-child(2) { top: 25px; }

.menu-btn[aria-expanded='true'] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded='true'] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* Mobiles Menü: ganze Seite Papier, große Einträge */
.mobilenav {
  position: fixed;
  inset: 0;
  z-index: 2900;
  background: var(--paper);
  padding: 6.5rem clamp(1.5rem, 6vw, 3rem) 3rem;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease), visibility 0s 0.3s;
  overflow-y: auto;
}

body.menu-open .mobilenav { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease); }
body.menu-open { overflow: hidden; }

.mobilenav a.mnav-item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 6.5vw, 2.4rem);
  text-decoration: none;
  color: var(--ink);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}

.mobilenav a.mnav-item small {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-55);
  letter-spacing: 0.1em;
}

/* Anmeldung zum Kursbereich: hängt als feine Zeile unter „Schulungen" */
.mobilenav a.mnav-sub {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-55);
  padding: 0.75rem 0 0.75rem 1.4rem;
  border-bottom: 1px solid var(--line-soft);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), color 0.2s;
}

.mobilenav a.mnav-sub::before {
  content: '';
  width: 1.1rem;
  height: 1px;
  background: var(--line);
  flex: 0 0 auto;
}

.mobilenav a.mnav-sub:hover { color: var(--ink); }

body.menu-open .mobilenav a.mnav-item,
body.menu-open .mobilenav a.mnav-sub { transform: none; opacity: 1; }
/* Nur die Einträge staffeln, nicht den CTA am Ende — sonst hinge dessen
   Hover-Wechsel um eine Vierteldrittel Sekunde hinterher. */
body.menu-open .mobilenav :is(.mnav-item, .mnav-sub):nth-child(2) { transition-delay: 0.04s; }
body.menu-open .mobilenav :is(.mnav-item, .mnav-sub):nth-child(3) { transition-delay: 0.08s; }
body.menu-open .mobilenav :is(.mnav-item, .mnav-sub):nth-child(4) { transition-delay: 0.12s; }
body.menu-open .mobilenav :is(.mnav-item, .mnav-sub):nth-child(5) { transition-delay: 0.16s; }
body.menu-open .mobilenav :is(.mnav-item, .mnav-sub):nth-child(6) { transition-delay: 0.2s; }
body.menu-open .mobilenav :is(.mnav-item, .mnav-sub):nth-child(7) { transition-delay: 0.24s; }
body.menu-open .mobilenav :is(.mnav-item, .mnav-sub):nth-child(8) { transition-delay: 0.28s; }

.mobilenav .mnav-cta { margin-top: 2.5rem; }

/* ---------- Sektionen ---------- */

.section { --sec-pad: clamp(3.25rem, 6.5vw, 5.5rem); padding-block: var(--sec-pad); }
.section-s { --sec-pad: clamp(2.5rem, 4.5vw, 4rem); padding-block: var(--sec-pad); }

/* Sprungziele: Ein Anker soll die ÜBERSCHRIFT der Sektion nach oben holen,
   nicht ihre obere Kante — sonst steht die halbe Sektion noch unter der
   Falz. Der negative Rand nimmt genau den Innenabstand wieder heraus,
   den die Sektion oben mitbringt. */
.section[id], .section-s[id], .cta[id], .engine[id] {
  scroll-margin-top: calc(0.7rem - var(--sec-pad, 0px));
}

.section-head { margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }

/* Ein Kopf ohne Vorspann braucht weniger Luft nach unten — sonst reißt
   zwischen Überschrift und Inhalt ein Loch auf. */
.section-head:not(:has(.lead)) { margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem); }

.section-head h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  max-width: 15em;
  margin-top: 1.3rem;
}

/* Preisabschnitte: Tabelle und Konditionen sollen zusammen gesehen
   werden. Die Überschrift tritt dafür eine Stufe zurück. */
#preise .section-head h2, #kurse .section-head h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  margin-top: 1rem;
}

.section-head .lead { margin-top: 1.2rem; }

/* ---------- Hero: die 28, die beim Scrollen zu unendlich wird ---------- */

.hero {
  position: relative;
  height: 92vh;
  height: 92svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  --lockup-h: clamp(150px, 18vw, 280px);
}

.hero-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 1.6rem;
}

.hero-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1vw, 18px);
}

#scene {
  display: block;
  width: calc(var(--lockup-h) * 1.5);
  height: calc(var(--lockup-h) * 1.125);
  flex: none;
  /* Standbild der 28 (exakter erster 3D-Frame): steht mit dem ersten
     Seitenaufbau. Die echte Szene übermalt es pixelgleich und setzt
     dann .live — bleibt WebGL aus, bleibt das Bild als Fallback. */
  background: url('../assets/hero-28.webp') center / 100% 100% no-repeat;
}

#scene.live { background: none; }

@media (prefers-reduced-motion: reduce) {
  /* hier zeigt die Szene sofort das statische ∞, ein 28-Standbild davor würde springen */
  #scene { background: none; }
}

.lockup-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--lockup-h) * 0.54);
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}

.hero-bottom {
  position: relative;
  margin-top: 1.4rem;
  min-height: 148px;
  width: min(660px, 92vw);
}

.hero-sub {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 520px;
  margin-inline: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.hero-center .hero-actions {
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.hero-tagline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: 0.5rem;
  pointer-events: none;
  opacity: 0;
}

.hero-tagline h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}

.hero-tagline h2 em.acc { color: var(--blue); }

.hero-tagline p {
  color: var(--ink-55);
  margin-top: 0.9rem;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.scroll-hint {
  position: absolute;
  z-index: 1;
  bottom: 26px;
  right: clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-55);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.scroll-hint i {
  width: 44px;
  height: 1px;
  background: var(--ink-55);
  transform-origin: left;
  animation: scrollPulse 2.4s var(--ease) infinite;
}

@keyframes scrollPulse {
  0% { transform: scaleX(0); opacity: 0; }
  40% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1) translateX(18px); opacity: 0; }
}

/* ---------- Instrument: das „lebende" Fenster ---------- */

.instrument {
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 22px 44px -30px rgba(22, 22, 26, 0.3);
  overflow: hidden;
  position: relative;
}

.instrument-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--ink-55);
}

.instrument-top .lamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 56, 201, 0.14);
  animation: lamp 2.4s ease-in-out infinite;
}

@keyframes lamp { 50% { opacity: 0.35; } }

.instrument-top .state { margin-left: auto; color: var(--blue); }

/* Fortschrittslinie eines Durchlaufs */
.instrument-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--blue);
  transform-origin: left;
  transform: scaleX(0);
}

.instrument.is-running .instrument-progress {
  animation: iprog var(--cycle, 9s) linear infinite;
}

@keyframes iprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.instrument-body { padding: 0.9rem 1.1rem 1rem; min-height: 15rem; }

.instrument-foot {
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-55);
  min-height: 2.6rem;
}

.instrument-foot b { color: var(--ink); font-weight: 400; }

/* Zeilen im Instrument */
.i-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.2rem;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.i-row.on { opacity: 1; transform: none; }

.i-row .t { flex: 1; min-width: 0; font-size: 0.92rem; line-height: 1.35; }

.i-row .t small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-55);
  margin-top: 0.15rem;
}

.i-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--blue);
  border: 1px solid rgba(36, 56, 201, 0.35);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.i-tag.on { opacity: 1; transform: none; }

.i-check {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--ink);
  position: relative;
  flex: 0 0 auto;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
}

.i-check.on { opacity: 1; transform: none; }

.i-check::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 4.5px;
  width: 5px;
  height: 8px;
  border-right: 1.6px solid var(--paper);
  border-bottom: 1.6px solid var(--paper);
  transform: rotate(40deg);
}

/* Chat-Elemente im Instrument: Nachrichten, die noch nicht dran sind,
   nehmen KEINEN Platz ein — der Chat wächst von oben nach unten wie ein
   echter, ohne Lücken durch verschwundene Tipp-Anzeigen. */
.i-q, .i-a {
  max-width: 88%;
  padding: 0.62rem 0.9rem;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  margin-block: 0.5rem;
}

.i-q:not(.on), .i-a:not(.on), .i-typing:not(.on) { display: none; }

.i-q.on, .i-a.on { animation: msgIn 0.4s var(--ease); }

@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
}

.i-q {
  background: var(--ink);
  color: var(--paper);
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.i-a {
  background: var(--paper-2);
  border-bottom-left-radius: 4px;
}

/* Quellen-Chip steht auf eigener Zeile unter der Antwort */
.i-a .src {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--blue);
}

.i-a .src::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.i-typing {
  gap: 4px;
  padding: 0.65rem 0.9rem;
  background: var(--paper-2);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  margin-block: 0.5rem;
  width: max-content;
}

.i-typing.on { display: inline-flex; animation: msgIn 0.3s var(--ease); }

.i-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-55);
  animation: tdot 1s infinite;
}

.i-typing i:nth-child(2) { animation-delay: 0.15s; }
.i-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes tdot { 30% { transform: translateY(-3px); opacity: 0.5; } }

/* ---------- Browser-Demo: eine Website baut sich auf und geht live ----------
   Choreografie über das data-seq-System der Instrumente. Vor dem Livegang
   ist die Mini-Website entsättigt; mit dem Klick auf „Freigeben" wechselt
   die Adresse und die Seite bekommt Farbe. */

.vb-chrome {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}

.vb-dots { display: inline-flex; gap: 5px; flex: 0 0 auto; }

.vb-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.vb-url {
  position: relative;
  flex: 1;
  height: 30px;
  border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
}

.vb-addr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-70);
  white-space: nowrap;
}

.vb-addr:not(.on) { display: none; }

.vb-addr.on { animation: msgIn 0.35s var(--ease); }

.vb-addr b { font-weight: 600; color: var(--ink); }

.vb-lock {
  width: 10px;
  height: 12px;
  flex: 0 0 auto;
  border: 1.5px solid #2e7d43;
  border-radius: 2.5px;
  position: relative;
  margin-top: 3px;
}

.vb-lock::before {
  content: '';
  position: absolute;
  left: 1px;
  top: -6px;
  width: 4px;
  height: 5px;
  border: 1.5px solid #2e7d43;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.vb-chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-55);
}

.vb-chip-live {
  border-color: rgba(46, 125, 67, 0.4);
  color: #2e7d43;
  background: rgba(46, 125, 67, 0.08);
}

/* Die Bühne mit der Mini-Website */
.vb-stage {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--paper-2);
  overflow: hidden;
}

.vb-site {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  filter: grayscale(1) opacity(0.72);
  transition: filter 0.9s var(--ease);
}

/* Livegang: die Seite bekommt Farbe */
.vb-live.on ~ .vb-site { filter: none; }

.vb-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  background: var(--paper-bright);
  border-bottom: 1px solid var(--line-soft);
}

.vb-nav:not(.on) { visibility: hidden; }
.vb-nav.on { animation: vbIn 0.5s var(--ease); }

.vb-logo {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--blue);
}

.vb-navlinks { display: inline-flex; gap: 7px; margin-left: auto; }

.vb-navlinks i {
  width: 26px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
}

.vb-navbtn {
  width: 44px;
  height: 14px;
  border-radius: 999px;
  background: var(--ink);
}

.vb-hero {
  flex: 1.25;
  position: relative;
  background: linear-gradient(128deg, #2438c9 0%, #4a5ce0 58%, #7484ec 100%);
  padding: clamp(0.8rem, 3%, 1.3rem) clamp(0.9rem, 3.5%, 1.4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.vb-hero:not(.on) { visibility: hidden; }
.vb-hero.on { animation: vbIn 0.6s var(--ease); }

.vb-h1, .vb-h2 {
  display: block;
  height: 11px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.92);
}

.vb-h1 { width: 62%; }
.vb-h2 { width: 44%; height: 8px; background: rgba(255, 255, 255, 0.55); }

.vb-h1:not(.on), .vb-h2:not(.on) { visibility: hidden; }
.vb-h1.on { animation: vbBar 0.7s var(--ease); }
.vb-h2.on { animation: vbBar 0.7s var(--ease) 0.05s backwards; }

.vb-cta {
  width: 74px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  margin-top: 4px;
}

.vb-cta:not(.on) { visibility: hidden; }
.vb-cta.on { animation: vbPop 0.45s var(--ease); }

.vb-cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 10px 12px 12px;
}

.vb-card {
  background: var(--paper-bright);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.vb-card::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 26%;
  border-radius: 4px;
  background: var(--paper-2);
}

.vb-card::after {
  content: '';
  position: absolute;
  left: 10px;
  top: calc(26% + 18px);
  width: 55%;
  height: 5px;
  border-radius: 3px;
  background: var(--blue);
  opacity: 0.75;
}

.vb-card:not(.on) { visibility: hidden; }
.vb-card.on { animation: vbPop 0.5s var(--ease); }

/* Freigeben-Knopf, Cursor und Klick */
.vb-approve {
  position: absolute;
  right: 5%;
  bottom: 7%;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 10px 24px -10px rgba(22, 22, 26, 0.5);
  z-index: 2;
}

.vb-approve:not(.on) { visibility: hidden; }
.vb-approve.on { animation: vbPop 0.45s var(--ease); }

.vb-cursor {
  position: absolute;
  left: 12%;
  top: 30%;
  width: 15px;
  height: 15px;
  z-index: 3;
  transition: left 1.1s cubic-bezier(0.45, 0.05, 0.3, 1),
    top 1.1s cubic-bezier(0.45, 0.05, 0.3, 1), opacity 0.3s;
  filter: drop-shadow(0 2px 4px rgba(22, 22, 26, 0.35));
}

.vb-cursor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 52%, 55% 62%, 68% 100%, 52% 100%, 42% 66%, 0 82%);
}

.vb-cursor:not(.on) { opacity: 0; }

.vb-cursor.on {
  opacity: 1;
  left: calc(95% - 64px);
  top: calc(93% - 30px);
}

.vb-click {
  position: absolute;
  right: calc(5% + 40px);
  bottom: calc(7% + 6px);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.vb-click.on { animation: vbRing 0.7s var(--ease) forwards; }

/* Status-Chips nach dem Livegang */
.vb-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line-soft);
  min-height: 3rem;
}

.vb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--ink-70);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
}

.vb-badge::before {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.6px solid #2e7d43;
  border-bottom: 1.6px solid #2e7d43;
  transform: rotate(-45deg) translateY(-1px);
}

.vb-badge:not(.on) { display: none; }
.vb-badge.on { animation: vbPop 0.4s var(--ease); }

.vb-status .vb-foot {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-55);
}

.vb-status .vb-foot b { color: var(--ink); font-weight: 400; }

.vb-status .vb-foot:not(.on) { display: none; }
.vb-status .vb-foot.on { animation: msgIn 0.4s var(--ease); }

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

@keyframes vbBar {
  from { opacity: 0; width: 0; }
}

@keyframes vbPop {
  0% { opacity: 0; transform: scale(0.6); }
  70% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes vbRing {
  0% { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* ---------- Schulungs-Demo: Anmeldung bis DIN-A4-Zertifikat ----------
   Gleiche data-seq-Choreografie wie die Browser-Demo, fünf Phasen in
   einer festen Bühne: Anmeldung (Striche werden getippt, Klick), die
   Kursseite scrollt mit angedeuteten Medien durch, im Abschlusstest
   wählt ein Cursor die richtige Antwort, die Auswertung zeigt Frage
   für Frage das Ergebnis, dann legt sich das Zertifikat als DIN-A4-
   Blatt auf den Tisch und bekommt das Siegel. */

.sc-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--ink-55);
}

.sc-s1, .sc-s2, .sc-s3, .sc-s4 { display: none; }

.sc-track {
  margin-left: auto;
  width: clamp(70px, 22%, 120px);
  height: 5px;
  border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
  flex: 0 0 auto;
}

.sc-track b {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: 999px;
  background: var(--blue);
  transition: width 0.7s var(--ease);
}

.sc-s1.on ~ .sc-track b { width: 30%; }
.sc-s2.on ~ .sc-track b { width: 55%; }
.sc-s3.on ~ .sc-track b { width: 78%; }
.sc-s4.on ~ .sc-track b { width: 100%; background: #2e7d43; }

.sc-stage {
  position: relative;
  min-height: 19.5rem;
}

.sc-phase {
  position: absolute;
  inset: 0;
  padding: 1rem 1.1rem;
}

.sc-phase:not(.on) { display: none; }
.sc-phase.on { animation: vbIn 0.45s var(--ease); }

/* Phase 1: die Anmeldung */
.sc-ph-login {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-lgo { display: none; }

.sc-login {
  width: min(15rem, 80%);
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 16px 34px -24px rgba(22, 22, 26, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sc-login-mark svg { width: 30px; height: 16px; display: block; }

.sc-login-title {
  width: 58%;
  height: 6px;
  border-radius: 3px;
  background: var(--paper-2);
  margin: 0.65rem 0 0.7rem;
}

.sc-lfield {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 0.45rem 0.6rem 0.5rem;
  margin-top: 0.5rem;
  transition: border-color 0.3s;
}

.sc-lfield b {
  display: block;
  height: 4px;
  width: var(--w, 40px);
  border-radius: 2px;
  background: var(--paper-2);
  margin-bottom: 0.4rem;
}

.sc-lfield i {
  display: block;
  height: 8px;
  width: 0;
  border-radius: 2px;
  background-image: repeating-linear-gradient(90deg, var(--ink-70) 0 6px, transparent 6px 10px);
  opacity: 0.7;
}

.sc-lfield.pw i {
  background-image: radial-gradient(circle at 4px 4px, var(--ink-70) 2.6px, transparent 3px);
  background-size: 10px 8px;
  background-repeat: repeat-x;
}

.sc-lfield.on { border-color: var(--blue); }

/* sobald das zweite Feld dran ist, verliert das erste den Fokus */
.sc-lfield.on:has(~ .sc-lfield.on) { border-color: var(--line-soft); }

.sc-lfield.on i { animation: scType 0.8s steps(9, end) 0.1s forwards; }

@keyframes scType {
  to { width: var(--tw, 64px); }
}

.sc-lbtn {
  width: 100%;
  margin-top: 0.7rem;
  height: 30px;
  border-radius: 7px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, filter 0.15s;
}

.sc-lbtn b {
  width: 56px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
}

.sc-lgo.on ~ .sc-login .sc-lbtn {
  transform: scale(0.96);
  filter: brightness(0.9);
}

/* Phase 2: die Kursseite scrollt durch */
.sc-ph-course { padding: 0; overflow: hidden; }

.sc-roll1, .sc-roll2, .sc-roll3 { display: none; }

.sc-pagewrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sc-page {
  padding: 1.1rem 1.6rem 1.1rem 1.4rem;
  transition: transform 1.05s cubic-bezier(0.55, 0.05, 0.2, 1);
}

.sc-roll1.on ~ .sc-pagewrap .sc-page { transform: translateY(-7.2rem); }
.sc-roll2.on ~ .sc-pagewrap .sc-page { transform: translateY(-14.6rem); }
.sc-roll3.on ~ .sc-pagewrap .sc-page { transform: translateY(-21.4rem); }

.sc-pagebar {
  position: absolute;
  right: 5px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: var(--paper-2);
  z-index: 2;
}

.sc-pagebar b {
  display: block;
  width: 100%;
  height: 30%;
  border-radius: 999px;
  background: var(--line);
  transition: transform 1.05s cubic-bezier(0.55, 0.05, 0.2, 1);
}

.sc-roll1.on ~ .sc-pagebar b { transform: translateY(78%); }
.sc-roll2.on ~ .sc-pagebar b { transform: translateY(158%); }
.sc-roll3.on ~ .sc-pagebar b { transform: translateY(233%); }

/* angedeutete Inhalte: Striche statt Text */
.sc-crumb {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.sc-crumb b {
  height: 4px;
  width: var(--w, 50px);
  border-radius: 2px;
  background: var(--paper-2);
}

.sc-hbar {
  display: block;
  height: 12px;
  width: var(--w, 70%);
  border-radius: 6px;
  background: var(--ink);
  opacity: 0.88;
  margin: 0.2rem 0 0.75rem;
}

.sc-hbar.h2 {
  height: 9px;
  opacity: 0.68;
  margin-top: 1.1rem;
}

.sc-line {
  display: block;
  height: 6px;
  width: var(--w, 100%);
  border-radius: 3px;
  background: var(--ink);
  opacity: 0.13;
  margin-bottom: 0.55rem;
}

/* Medien: bewusst unscharf angedeutet, nie echte Inhalte */
.sc-media {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  margin: 0.85rem 0;
}

.sc-video {
  height: 7.6rem;
  background: #0f1226;
}

.sc-video::before {
  content: '';
  position: absolute;
  inset: -14px;
  background:
    radial-gradient(60% 80% at 30% 35%, rgba(36, 56, 201, 0.85), transparent 70%),
    radial-gradient(50% 70% at 75% 70%, rgba(120, 140, 255, 0.5), transparent 70%),
    radial-gradient(40% 55% at 60% 20%, rgba(255, 255, 255, 0.18), transparent 70%);
  filter: blur(10px);
}

.sc-play {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
}

.sc-play::before {
  content: '';
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 9px solid var(--ink);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.sc-mediabar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
}

.sc-mediabar b {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: 2px;
  background: #fff;
}

.sc-diagram {
  height: 6.4rem;
  background: var(--paper-2);
}

.sc-diagram svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sc-diagram i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  transform: translate(-50%, -50%);
}

.sc-diagram i.d1 { left: 20%; top: 32%; }
.sc-diagram i.d2 { left: 50%; top: 68%; background: var(--ink); }
.sc-diagram i.d3 { left: 80%; top: 28%; }

.sc-diagram b {
  position: absolute;
  left: 12px;
  bottom: 9px;
  width: 62px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

.sc-chart {
  height: 6rem;
  background: var(--paper-bright);
  display: flex;
  align-items: flex-end;
  gap: 8%;
  padding: 0.9rem 13% 0;
  box-shadow: inset 0 -1px 0 var(--line-soft);
}

.sc-chart b {
  flex: 1;
  height: var(--h, 50%);
  background: var(--ink);
  opacity: 0.16;
  border-radius: 3px 3px 0 0;
}

.sc-chart b:nth-child(4) {
  background: var(--blue);
  opacity: 1;
}

.sc-callout {
  border: 1px solid rgba(36, 56, 201, 0.35);
  background: rgba(36, 56, 201, 0.05);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  margin: 0.85rem 0;
}

.sc-callout b {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(36, 56, 201, 0.4);
  width: var(--w, 80%);
}

.sc-callout b + b { margin-top: 0.45rem; }

.sc-toast {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  box-shadow: 0 10px 24px -10px rgba(22, 22, 26, 0.6);
  white-space: nowrap;
  z-index: 3;
}

.sc-toast::before {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 1.7px solid #7fd696;
  border-bottom: 1.7px solid #7fd696;
  transform: rotate(-45deg) translateY(-1px);
}

.sc-toast:not(.on) { display: none; }
.sc-toast.on { animation: vbPop 0.45s var(--ease); }

/* Phase 3: der Abschlusstest */
.sc-quiz {
  max-width: 92%;
  margin-inline: auto;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: 0 14px 30px -22px rgba(22, 22, 26, 0.4);
}

.sc-quiz-head {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-55);
  margin-bottom: 0.7rem;
}

.sc-qbar {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: var(--ink);
  opacity: 0.85;
  margin-bottom: 6px;
}

.sc-qbar + .sc-qbar { width: 70%; margin-bottom: 0.9rem; }

.sc-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  margin-top: 0.45rem;
  transition: border-color 0.3s, background 0.3s;
}

.sc-option i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex: 0 0 auto;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.sc-option b {
  height: 7px;
  border-radius: 4px;
  background: var(--line);
  flex: 0 0 auto;
  width: var(--bw, 46%);
}

/* die gewählte Antwort: Marker vor der Option schalten sie an,
   der zweite Marker bestätigt sie kurz danach als richtig */
.sc-pick, .sc-good { display: none; }

.sc-pick.on + .sc-good + .sc-option {
  border-color: var(--blue);
  background: rgba(36, 56, 201, 0.05);
}

.sc-pick.on + .sc-good + .sc-option i {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 4px var(--blue);
}

.sc-option i { position: relative; }

.sc-option i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: translate(-50%, -60%) rotate(-45deg);
  opacity: 0;
}

.sc-pick.on + .sc-good.on + .sc-option {
  border-color: rgba(46, 125, 67, 0.55);
  background: rgba(46, 125, 67, 0.07);
}

.sc-pick.on + .sc-good.on + .sc-option i {
  border-color: #2e7d43;
  box-shadow: inset 0 0 0 7px #2e7d43;
}

.sc-good.on + .sc-option i::after { opacity: 1; }

.sc-option em {
  display: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2e7d43;
}

.sc-good.on + .sc-option em {
  display: inline;
  animation: vbPop 0.4s var(--ease);
}

.sc-cursor {
  position: absolute;
  left: var(--sx, 10%);
  top: var(--sy, 22%);
  width: 15px;
  height: 15px;
  z-index: 7;
  transition: left 1s cubic-bezier(0.45, 0.05, 0.3, 1),
    top 1s cubic-bezier(0.45, 0.05, 0.3, 1), opacity 0.3s;
  filter: drop-shadow(0 2px 4px rgba(22, 22, 26, 0.35));
}

.sc-cursor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 52%, 55% 62%, 68% 100%, 52% 100%, 42% 66%, 0 82%);
}

.sc-cursor:not(.on) { opacity: 0; }

.sc-cursor.on { opacity: 1; left: var(--cx, 46%); top: var(--cy, 63%); }

.sc-click {
  position: absolute;
  left: var(--cx, 44%);
  top: var(--cy, 60%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.sc-click.on { animation: vbRing 0.7s var(--ease) forwards; }

/* Phase 4: die Auswertung, Frage für Frage */
.sc-rrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.52rem 0.2rem;
  border-bottom: 1px solid var(--line-soft);
}

.sc-rrow > span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-70);
  flex: 0 0 4.4rem;
}

.sc-rrow b {
  height: 6px;
  border-radius: 3px;
  background: var(--ink);
  opacity: 0.13;
  width: var(--w, 50%);
}

.sc-rrow i {
  margin-left: auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
}

.sc-rrow i.ok { background: rgba(46, 125, 67, 0.14); }

.sc-rrow i.ok::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 4px;
  border-left: 1.6px solid #2e7d43;
  border-bottom: 1.6px solid #2e7d43;
  transform: translate(-50%, -65%) rotate(-45deg);
}

.sc-rrow i.no { background: rgba(22, 22, 26, 0.07); }

.sc-rrow i.no::before,
.sc-rrow i.no::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1.6px;
  border-radius: 1px;
  background: var(--ink-55);
  transform: translate(-50%, -50%) rotate(45deg);
}

.sc-rrow i.no::after { transform: translate(-50%, -50%) rotate(-45deg); }

.sc-rrow:not(.on) { visibility: hidden; }
.sc-rrow.on { animation: vbIn 0.35s var(--ease); }

.sc-rsum {
  margin-top: 0.85rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-70);
}

.sc-rsum b { color: #2e7d43; font-weight: 400; }

.sc-rsum:not(.on) { visibility: hidden; }
.sc-rsum.on { animation: vbPop 0.5s var(--ease); }

/* Phase 5: bestanden + Zertifikat als DIN-A4-Blatt */
.sc-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.sc-passed {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #2e7d43;
  border: 1px solid rgba(46, 125, 67, 0.4);
  background: rgba(46, 125, 67, 0.07);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
}

.sc-passed::before {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 1.7px solid #2e7d43;
  border-bottom: 1.7px solid #2e7d43;
  transform: rotate(-45deg) translateY(-1px);
}

.sc-passed:not(.on) { display: none; }
.sc-passed.on { animation: vbPop 0.5s var(--ease); }

/* das A4-Blatt: Hochformat 1:1,414 mit doppelter Rahmenlinie */
.sc-a4 {
  position: relative;
  height: 12.4rem;
  aspect-ratio: 1 / 1.4142;
  max-width: 88%;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.55rem 0.8rem 0.8rem;
  box-shadow: 0 22px 44px -26px rgba(22, 22, 26, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(-1.6deg);
}

.sc-a4::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
}

.sc-a4:not(.on) { visibility: hidden; }
.sc-a4.on { animation: scDrop 0.6s var(--ease); }

@keyframes scDrop {
  0% { opacity: 0; transform: rotate(0.6deg) translateY(-18px) scale(1.05); }
  100% { opacity: 1; transform: rotate(-1.6deg) translateY(0) scale(1); }
}

.sc-a4-mark svg { width: 24px; height: 13px; display: block; margin-top: 0.45rem; }

.sc-cert-kicker {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  text-align: center;
  margin-top: 0.45rem;
}

.sc-a4-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  white-space: nowrap;
  text-align: center;
  margin-top: 0.2rem;
}

.sc-a4-name {
  width: 62%;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  margin-top: 0.7rem;
}

.sc-a4-line {
  display: block;
  height: 4px;
  width: var(--w, 70%);
  border-radius: 2px;
  background: var(--ink);
  opacity: 0.1;
  margin-top: 0.5rem;
}

.sc-a4-id {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--ink-70);
  text-align: center;
  margin-top: 0.65rem;
}

.sc-a4-id b { color: var(--blue); font-weight: 400; }

.sc-a4-foot {
  margin-top: auto;
  width: 86%;
  display: flex;
  justify-content: space-between;
  gap: 1.4rem;
}

.sc-a4-foot > span {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
}

.sc-a4-foot i.sig {
  width: 2.4rem;
  height: 9px;
  border-bottom: 1.6px solid rgba(22, 22, 26, 0.6);
  border-radius: 0 0 100% 30% / 0 0 12px 5px;
  transform: rotate(-4deg);
}

.sc-a4-foot i.dat {
  width: 1.7rem;
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0.18;
  margin-top: 5px;
}

.sc-a4-foot u {
  width: 100%;
  height: 1px;
  background: var(--line);
}

/* das Siegel stempelt sich auf */
.sc-seal {
  position: absolute;
  right: 0.55rem;
  bottom: 0.5rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-9deg);
  box-shadow: 0 6px 14px -6px rgba(36, 56, 201, 0.55);
}

.sc-seal::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.55);
}

.sc-seal svg { width: 22px; height: 12px; }

.sc-seal:not(.on) { visibility: hidden; }

.sc-seal.on { animation: scStamp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }

@keyframes scStamp {
  0% { opacity: 0; transform: rotate(-24deg) scale(2.1); }
  60% { opacity: 1; transform: rotate(-7deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}

.sc-mailed {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-70);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.sc-mailed::before {
  content: '';
  width: 12px;
  height: 9px;
  border: 1.4px solid var(--ink-55);
  border-radius: 2px;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--ink-55) 45%, var(--ink-55) 55%, transparent 56%) top left / 55% 70% no-repeat,
    linear-gradient(to bottom left, transparent 44%, var(--ink-55) 45%, var(--ink-55) 55%, transparent 56%) top right / 55% 70% no-repeat;
}

.sc-mailed:not(.on) { display: none; }
.sc-mailed.on { animation: vbPop 0.45s var(--ease); }

/* ---------- Chatbot-Demo: das Widget auf einer Website ----------
   Eine angedeutete Website (Striche), unten rechts ploppt der Chat-Knopf
   auf, ein Cursor öffnet ihn, das Widget klappt auf und führt ein echtes
   Gespräch: belegte Antwort mit Quelle, ehrliches „weiß ich nicht" mit
   Weiterleitung. Nachrichten scrollen im Panel mit wie im echten Chat. */

.cw-stage {
  position: relative;
  min-height: 19.5rem;
  overflow: hidden;
}

.cw-el:not(.on) { opacity: 0; }
.cw-el.on { animation: vbIn 0.4s var(--ease); }

.cw-site { position: absolute; inset: 0; }

.cw-nav {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}

.cw-logo {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--blue);
  flex: 0 0 auto;
}

.cw-nav b {
  height: 4px;
  width: 34px;
  border-radius: 2px;
  background: var(--line);
}

.cw-nav b:nth-of-type(2) { width: 26px; }
.cw-nav b:nth-of-type(3) { width: 30px; }

.cw-cta {
  margin-left: auto;
  width: 58px;
  height: 18px;
  border-radius: 9px;
  background: var(--ink);
  opacity: 0.85;
}

.cw-hero { padding: 1rem 1.1rem 0; }

.cw-img {
  position: relative;
  height: 5.4rem;
  border-radius: 9px;
  border: 1px solid var(--line-soft);
  background: var(--paper-2);
  margin: 0.85rem 1.1rem 0;
  overflow: hidden;
}

.cw-img::before {
  content: '';
  position: absolute;
  inset: -10px;
  background:
    radial-gradient(55% 75% at 30% 40%, rgba(36, 56, 201, 0.14), transparent 70%),
    radial-gradient(45% 65% at 74% 66%, rgba(22, 22, 26, 0.08), transparent 70%);
  filter: blur(7px);
}

.cw-cards {
  display: flex;
  gap: 0.7rem;
  margin: 0.85rem 1.1rem 0;
}

.cw-card {
  flex: 1;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
}

.cw-card b {
  display: block;
  height: 4px;
  width: var(--w, 70%);
  border-radius: 2px;
  background: var(--line);
  margin-bottom: 0.4rem;
}

.cw-card b:first-child { background: var(--ink); opacity: 0.6; }

/* der Chat-Knopf */
.cw-go { display: none; }

.cw-launch {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(150deg, #3d54ea 0%, var(--blue) 45%, #1a2b9e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 14px 26px -10px rgba(26, 40, 160, 0.7),
    0 3px 7px -2px rgba(22, 22, 26, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -2px 4px rgba(12, 20, 90, 0.35);
  transition: transform 0.15s;
  z-index: 4;
}

.cw-launch svg {
  width: 22px;
  height: 12px;
  filter: drop-shadow(0 1px 1.5px rgba(10, 16, 70, 0.45));
}

.cw-launch:not(.on) { opacity: 0; }
.cw-launch.on { animation: vbPop 0.5s var(--ease); }

.cw-go.on ~ .cw-launch { transform: scale(0.88); }

.cw-pulse {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.cw-pulse.on { animation: cwPulse 1.2s ease-out forwards; }

@keyframes cwPulse {
  0% { opacity: 0.65; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

/* das Widget-Panel klappt vom Knopf her auf */
.cw-panel {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  width: min(16rem, 74%);
  height: 16.2rem;
  max-height: calc(100% - 1.4rem);
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(22, 22, 26, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
  transform-origin: 88% 100%;
  transition: opacity 0.3s var(--ease), transform 0.45s cubic-bezier(0.2, 1.1, 0.3, 1);
}

.cw-panel:not(.on) {
  opacity: 0;
  transform: translateY(16px) scale(0.5);
  pointer-events: none;
}

.cw-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
}

.cw-head svg { width: 18px; height: 10px; flex: 0 0 auto; }

.cw-head .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fd696;
  margin-left: auto;
}

.cw-head .on-label { opacity: 0.85; }

.cw-body {
  flex: 1;
  overflow: hidden;
  padding: 0.7rem 0.7rem 0.2rem;
  position: relative;
}

.cw-scroll1, .cw-scroll2 { display: none; }

.cw-msgs {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  transition: transform 0.5s var(--ease);
}

.cw-scroll1.on ~ .cw-msgs { transform: translateY(-10.9rem); }
.cw-scroll2.on ~ .cw-msgs { transform: translateY(-13.9rem); }

.cw-a, .cw-q {
  max-width: 88%;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  font-size: 0.76rem;
  line-height: 1.45;
}

.cw-a {
  align-self: flex-start;
  background: var(--paper-2);
  border-bottom-left-radius: 3px;
}

.cw-q {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 3px;
}

.cw-a .src {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--blue);
}

.cw-a .src::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex: 0 0 auto;
}

.cw-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 0.55rem 0.6rem;
  background: var(--paper-2);
  border-radius: 10px;
  border-bottom-left-radius: 3px;
}

.cw-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-55);
  animation: tdot 1s infinite;
}

.cw-typing i:nth-child(2) { animation-delay: 0.15s; }
.cw-typing i:nth-child(3) { animation-delay: 0.3s; }

.cw-note {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--ink-55);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  margin-top: 0.2rem;
}

.cw-note::before {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.6px solid #2e7d43;
  border-bottom: 1.6px solid #2e7d43;
  transform: rotate(-45deg) translateY(-1px);
}

.cw-a:not(.on), .cw-q:not(.on), .cw-typing:not(.on), .cw-note:not(.on) { display: none; }
.cw-a.on, .cw-q.on, .cw-typing.on, .cw-note.on { animation: msgIn 0.3s var(--ease); }

.cw-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0.7rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.4rem 0.45rem 0.4rem 0.75rem;
  flex: 0 0 auto;
}

.cw-input b {
  height: 5px;
  width: 64px;
  border-radius: 3px;
  background: var(--paper-2);
}

.cw-input i {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(150deg, #3d54ea, #1e30b0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 5px -2px rgba(26, 40, 160, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.cw-input i svg {
  width: 11px;
  height: 11px;
  display: block;
  margin-left: 1px;
}

/* ---------- Leistungs-Index (editoriale Zeilen) ---------- */

.index-list { border-top: 1px solid var(--line); }

.index-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: padding-left 0.3s var(--ease);
}

.index-row h3 {
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 500;
  transition: color 0.25s;
}

.index-row .desc {
  font-size: 0.98rem;
  color: var(--ink-70);
  line-height: 1.55;
}

.index-row .desc .tags {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-55);
}

.index-row .go {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  position: relative;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.index-row .go::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-top: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
  transform: rotate(45deg);
  transition: border-color 0.25s;
}

.index-row:hover h3 { color: var(--blue); }
.index-row:hover .go { background: var(--ink); border-color: var(--ink); transform: scale(1.06); }
.index-row:hover .go::after { border-color: var(--paper); }

/* ---------- Fakten-Spalten (statt Karten mit Rahmen) ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4.5rem);
}

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

.fact { padding-top: 1.4rem; border-top: 1px solid var(--line); position: relative; }

.fact::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.4rem;
  height: 1px;
  background: var(--ink);
  transition: width 0.45s var(--ease), background 0.3s;
}

.fact:hover::before { width: 100%; background: var(--blue); }

.fact h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }

.fact p { margin-top: 0.7rem; font-size: 0.97rem; color: var(--ink-70); }

/* Der Abbinder einer Aufzählung: sagt, dass die Liste kein Zaun ist.
   Volle Linie und kräftigere Schrift heben ihn von den Beispielen ab. */
.fact-more::before { width: 100%; background: var(--blue); }

.fact-more h3 { font-weight: 600; font-size: 1.4rem; color: var(--blue); }

/* ---------- Schritte ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}

.step { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--line); }

.step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.4rem;
  height: 1px;
  background: var(--blue);
}

.step h3 { font-size: 1.3rem; font-weight: 500; }

.step p { margin-top: 0.7rem; font-size: 0.97rem; color: var(--ink-70); }

/* ---------- Aussage / Grundsatz-Zitat ---------- */

.statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-width: 24em;
  text-wrap: balance;
}

.statement em.acc { color: var(--blue); }

/* ---------- Hinweis-Block ---------- */

.note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.note p { font-size: 1.05rem; max-width: 36em; }

.note em { font-style: normal; font-family: var(--font-serif); font-style: italic; }

/* ---------- Code-Zeile ---------- */

.codeline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--dark);
  color: var(--dark-text);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  white-space: nowrap;
  margin-top: 1rem;
}

.codeline .c1 { color: #8f86ff; }
.codeline .c2 { color: #d8b46a; }

/* ---------- Rechner ---------- */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.calc-controls { display: grid; gap: 2.2rem; }

/* Aufgaben-Schnellwahl */
.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.preset {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-70);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.preset small {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-55);
}

.preset:hover { border-color: var(--ink); color: var(--ink); }

.preset[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.preset[aria-pressed='true'] small { color: rgba(255, 255, 255, 0.6); }

.presets-label {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.9rem;
}

/* Zählstriche: ein Strich pro verlorenem Arbeitstag */
.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.7rem;
  align-items: flex-end;
  min-height: 3.2rem;
}

.tally svg { display: block; }

.tally svg path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* neue Striche ziehen sich wie von Hand (dashoffset läuft auf 0) */
@keyframes tallyDraw {
  to { stroke-dashoffset: 0; }
}

.tally-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-55);
  margin-top: 0.6rem;
}

.calc-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.9rem;
}

.calc-field label output {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--blue);
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px; /* volle Tap-Höhe, die Optik bleibt die feine Linie */
  background: transparent;
  cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--ink) var(--fill, 30%), var(--line) var(--fill, 30%));
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper-bright);
  border: 1.5px solid var(--ink);
  margin-top: -13px;
  transition: transform 0.15s var(--ease);
}

input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.15); border-color: var(--blue); }

input[type='range']::-moz-range-track { height: 2px; background: var(--line); }
input[type='range']::-moz-range-progress { height: 2px; background: var(--ink); }

input[type='range']::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper-bright);
  border: 1.5px solid var(--ink);
  box-sizing: border-box;
}

.calc-note { font-size: 0.85rem; color: var(--ink-55); max-width: 30em; }

.calc-result {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  display: grid;
  gap: 1.6rem;
}

.calc-result .label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.calc-big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.calc-big small {
  font-size: 0.32em;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--ink-55);
  letter-spacing: 0;
  margin-left: 0.6rem;
}

.calc-sub { font-size: 0.98rem; color: var(--ink-70); max-width: 30em; }

.calc-sub b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Der Arbeitstag: ohne und mit Automatisierung ---------- */

.daybar {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

.daybar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.daybar-head p { font-size: 1.05rem; font-weight: 500; }

.daybar-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
}

.daybar-toggle button {
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-70);
  transition: background 0.25s, color 0.25s;
}

.daybar-toggle button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}

.daybar-track {
  display: flex;
  gap: 3px;
  height: 42px;
}

.daybar-track .seg {
  flex-grow: var(--w);
  flex-basis: 0;
  min-width: 5px;
  border-radius: 7px;
  transition: flex-grow 0.9s var(--ease);
}

.daybar[data-mode='mit'] .seg { flex-grow: var(--wm, var(--w)); }

.seg-w { background: var(--paper-2); border: 1px solid var(--line-soft); }
.seg-r { background: var(--blue); }

.daybar-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  margin-top: 1rem;
}

.daybar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-55);
}

/* Kästchen und Beschriftung bleiben zusammen, umgebrochen wird nur
   zwischen den Legenden-Einträgen */
.daybar-legend > span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.daybar-legend i {
  display: inline-block;
  width: 14px;
  height: 9px;
  border-radius: 3px;
  margin-right: 0.45rem;
}

.daybar-legend .lg-w { background: var(--paper-2); border: 1px solid var(--line); }
.daybar-legend .lg-r { background: var(--blue); }

.daybar-fact {
  font-size: 0.95rem;
  color: var(--ink-70);
  max-width: 34em;
}

/* ---------- Rechner: alles in einer Bildschirmhöhe ----------
   Überschrift, Regler, Ergebnis und der Arbeitstag gehören zusammen.
   Wer scrollen muss, um die Rechnung zu Ende zu sehen, verliert den
   Zusammenhang — deshalb ist dieser Abschnitt bewusst enger gesetzt
   als der Rest der Seite. */

#rechner {
  --sec-pad: clamp(2rem, 3.6vw, 3rem);
  padding-block: var(--sec-pad);
}

#rechner .section-head { margin-bottom: clamp(1.1rem, 2vw, 1.6rem); }

#rechner .section-head h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  margin-top: 0.8rem;
}

#rechner .calc { gap: clamp(2rem, 4.5vw, 3.6rem); }
#rechner .calc-controls { gap: 1.2rem; }
#rechner .presets-label { margin-bottom: 0.7rem; }
#rechner .presets { gap: 0.45rem; }
#rechner .preset { padding: 0.42rem 0.85rem; font-size: 0.85rem; }
#rechner .calc-field label { margin-bottom: 0.3rem; }
#rechner .calc-note { font-size: 0.8rem; line-height: 1.5; }

#rechner .calc-result { padding-top: 1.1rem; gap: 1rem; }
#rechner .calc-big { font-size: clamp(2.3rem, 4.8vw, 3.4rem); }
#rechner .tally { min-height: 2.4rem; gap: 0.4rem 0.6rem; }
#rechner .tally-note { margin-top: 0.45rem; }
#rechner .calc-sub { font-size: 0.94rem; }

#rechner .daybar {
  margin-top: clamp(1.4rem, 2.8vw, 2.2rem);
  padding-top: clamp(1.1rem, 2.2vw, 1.7rem);
}

#rechner .daybar-head { margin-bottom: 1rem; }
#rechner .daybar-toggle button { padding: 0.45rem 0.95rem; font-size: 0.85rem; }
#rechner .daybar-track { height: 34px; }
#rechner .daybar-foot { margin-top: 0.8rem; }

/* Am Zeiger reicht die feine Linie; die volle 44-px-Tap-Höhe braucht
   nur der Finger, und der bedient sowieso die schmale Ansicht. */
@media (min-width: 721px) and (pointer: fine) {
  #rechner input[type='range'] { height: 32px; }
  #rechner input[type='range']::-webkit-slider-thumb { margin-top: -13px; }
}

/* ---------- Maschinenraum (dunkle Sektion) ---------- */

.engine {
  background: var(--dark);
  color: var(--dark-text);
  --sec-pad: clamp(3.5rem, 7vw, 6rem);
  padding-block: var(--sec-pad);
}

.engine .kicker { color: var(--dark-text-soft); }
.engine .kicker::after { background: var(--dark-line); }

.engine h2 { color: var(--dark-text); }

.engine .lead { color: var(--dark-text-soft); }

.engine-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.readout {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  display: grid;
  border-top: 1px solid var(--dark-line);
}

.readout-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0.1rem;
  border-bottom: 1px solid var(--dark-line);
}

.readout-row .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  align-self: center;
  flex: 0 0 auto;
}

.readout-row .dot.ok { background: #79a86a; }
.readout-row .dot.warm { background: var(--amber); }

.readout-row .k { color: var(--dark-text-soft); min-width: 11em; }

.readout-row .v { color: var(--dark-text); }

.engine .fact { border-top-color: var(--dark-line); }
.engine .fact::before { background: var(--dark-text); }
.engine .fact:hover::before { background: var(--blue); }
.engine .fact p { color: var(--dark-text-soft); }

/* ---------- Produkt-Panel ---------- */

.product {
  background: var(--paper-2);
  border-radius: calc(var(--radius) + 8px);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.product .kicker::after { background: var(--line); }

.product h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 500;
  margin-top: 1.1rem;
}

.product .lead { font-size: 1.05rem; margin-top: 1rem; }

.product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-55);
}

/* Der Preis ist ein Flex-Element: ohne diese Sperre quetscht ihn der
   lange Nebensatz so weit zusammen, dass das €-Zeichen unter die Zahl
   rutscht. */
.product-price b {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.2rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* ---------- Preise (editoriale Spalten) ---------- */

.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.plan {
  padding: clamp(1.1rem, 2vw, 1.45rem) clamp(1rem, 1.7vw, 1.35rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.plan + .plan { border-left: 1px solid var(--line); }

.plan.featured { background: var(--paper-2); }

.plan-tag {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.plan h3 { font-size: 1.3rem; font-weight: 500; }

/* Steht oben rechts eine Marke, macht die Überschrift ihr Platz. Sonst
   läuft ein langer Titel wie „KI und Datenschutz im Betrieb" darunter
   durch — der Tag schwebt absolut positioniert über der Zeile. */
.plan:has(.plan-tag) h3 { padding-right: 7rem; }

.plan .plan-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-55);
  margin-top: 0.35rem;
}

.plan .plan-price {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
}

.plan .plan-price b {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.plan .plan-price span { font-size: 0.84rem; color: var(--ink-55); }

.plan .plan-once { font-size: 0.82rem; color: var(--ink-70); margin-top: 0.2rem; }
.plan .plan-once b { font-weight: 600; }

.plan .plan-for {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-70);
  margin-top: 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
}

.plan ul {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0 0.75rem;
  flex: 1;
}

.plan ul li {
  padding: 0.28rem 0 0.28rem 1.3rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-70);
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}

.plan ul li:last-child { border-bottom: 0; }

.plan ul li::before {
  content: '';
  position: absolute;
  left: 0.1rem;
  top: 1.05em;
  width: 8px;
  height: 4px;
  border-left: 1.4px solid var(--blue);
  border-bottom: 1.4px solid var(--blue);
  transform: rotate(-45deg);
}

.plan ul li strong { color: var(--ink); font-weight: 600; }

.plan .btn { align-self: stretch; padding: 0.65rem 1.2rem; font-size: 0.92rem; }

/* Zusatz-Option (Addon) */
.addon {
  text-align: left;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.8rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  transition: border-color 0.25s, background 0.25s;
}

.addon:hover { border-color: var(--ink-55); }

.addon[aria-pressed='true'] { border-color: var(--blue); background: rgba(36, 56, 201, 0.05); }

.addon-box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  border: 1.5px solid var(--ink-55);
  border-radius: 4px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}

.addon[aria-pressed='true'] .addon-box { background: var(--blue); border-color: var(--blue); }

.addon[aria-pressed='true'] .addon-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border-right: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(40deg);
}

.addon strong { display: block; font-size: 0.92rem; font-weight: 600; }

.addon .addon-note { display: block; font-size: 0.8rem; color: var(--ink-70); margin-top: 0.2rem; }

.addon .addon-save {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--blue);
  margin-top: 0.35rem;
}

.addon[aria-pressed='true'] .addon-save { display: block; }

/* Konditionen unter den Preisen */
.terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.3rem, 2.4vw, 2rem);
  margin-top: clamp(1.4rem, 2.8vw, 2rem);
}

.term { padding-top: 1rem; border-top: 1px solid var(--line); }

.term h3 { font-size: 0.98rem; font-weight: 600; font-family: var(--font-text); line-height: 1.35; }

.term p { margin-top: 0.45rem; font-size: 0.85rem; line-height: 1.5; color: var(--ink-70); }

/* ---------- FAQ ---------- */

.qa-list { border-top: 1px solid var(--line); }

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

.qa summary {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.5rem 0.2rem;
  cursor: pointer;
  list-style: none;
}

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

.qa summary h3 {
  flex: 1;
  font-family: var(--font-text);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.4;
}

.qa-mark {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink-55);
  transition: transform 0.3s var(--ease), color 0.2s;
  align-self: center;
}

.qa[open] .qa-mark { transform: rotate(45deg); color: var(--blue); }

.qa-body { padding: 0 0.2rem 1.6rem; max-width: 46em; }

.qa-body p { color: var(--ink-70); font-size: 0.99rem; }

.qa-body p + p { margin-top: 0.7rem; }

/* ---------- Kontaktformular ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.contact-alt {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--ink-70);
}

/* Kontaktseite: Seitenkopf und Formular teilen sich eine Reihe. Die
   Überschrift fällt eine Stufe kleiner aus, damit links und rechts
   optisch gleich schwer wiegen.
   Die doppelte Klasse ist Absicht: .page-head und .page-head h1 stehen
   weiter unten im Stylesheet und würden diesen Block sonst schlagen. */
.page-head.page-head-form { padding-bottom: clamp(3rem, 6vw, 5rem); }

.page-head-form .contact-grid { align-items: center; }

.page-head.page-head-form h1 {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  max-width: 11em;
  margin-top: 1.2rem;
}

/* Das Formular als klar umrissenes Panel mit eingefassten Feldern */
.contact-form {
  display: grid;
  gap: 1.2rem;
  background: var(--paper-bright);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: 0 22px 44px -30px rgba(22, 22, 26, 0.25);
}

.form-row2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem;
}

.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* mindestens 16px, sonst zoomt iOS beim Fokus */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}

/* Das Auswahlfeld bekommt denselben Rahmen wie die Eingabefelder, statt
   in jedem Betriebssystem anders auszusehen. Der Pfeil ist ein
   eingebettetes SVG, damit keine zusätzliche Datei geladen wird. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2316161a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

.field select optgroup { font-style: normal; font-weight: 600; }
.field select option { font-weight: 400; }

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

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-55); opacity: 0.65; }

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 56, 201, 0.13);
}

.field.is-invalid input,
.field.is-invalid textarea {
  border-color: #b3382e;
  box-shadow: 0 0 0 3px rgba(179, 56, 46, 0.12);
}

/* Gleiche Spezifität, spätere Regel: ohne diesen Nachtrag verlöre ein
   bemängeltes Feld beim Hineintabben jeden sichtbaren Fokus. */
.field.is-invalid input:focus-visible,
.field.is-invalid textarea:focus-visible {
  border-color: #b3382e;
  box-shadow: 0 0 0 3px rgba(179, 56, 46, 0.3);
}

/* Honeypot: für Menschen unsichtbar, für Spam-Skripte ein normales Feld */
.field-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.form-foot {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.form-status { font-size: 0.92rem; color: var(--ink-70); min-height: 1.4em; }

.form-status.ok { color: #2e7d43; }
.form-status.err { color: #b3382e; }

.form-done { padding: 1.6rem 0; border-top: 1px solid var(--line); }

.form-done h2 { font-size: 1.4rem; font-weight: 500; }
.form-done:focus { outline: none; }

.form-done p { margin-top: 0.7rem; color: var(--ink-70); }

/* ---------- CTA + Footer ---------- */

.cta { --sec-pad: clamp(3.5rem, 7vw, 6rem); padding-block: var(--sec-pad); }

.cta h2 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  max-width: 14em;
  margin-top: 1.3rem;
}

.cta .lead { margin-top: 1.3rem; }

.mail-big {
  display: inline-block;
  margin-top: 2.2rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.6vw, 2.5rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.15em;
  transition: color 0.25s, border-color 0.25s;
}

.mail-big:hover { color: var(--blue); border-color: var(--blue); }

.footer {
  background: var(--dark);
  color: var(--dark-text);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.footer-brand .brand { color: var(--dark-text); font-size: 1.5rem; }

.footer-brand p {
  margin-top: 0.9rem;
  color: var(--dark-text-soft);
  font-size: 0.95rem;
  max-width: 20em;
}

.footer h4 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-text-soft);
  margin-bottom: 1.1rem;
}

.footer-col a {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.94rem;
  color: var(--dark-text);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}

.footer-col a:hover { opacity: 1; color: #fff; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid var(--dark-line);
  font-size: 0.82rem;
  color: var(--dark-text-soft);
}

.footer-base a {
  color: inherit;
  text-decoration: none;
  /* Tap-Fläche wächst, der negative Rand hält die Optik unverändert */
  display: inline-block;
  padding: 0.6rem 0.2rem;
  margin: -0.6rem -0.2rem;
}
.footer-base a:hover { color: var(--dark-text); }

/* ---------- Seitenkopf (Unterseiten) ---------- */

.page-head { padding-top: clamp(5.5rem, 10vh, 7.5rem); padding-bottom: clamp(2rem, 3.5vw, 3rem); }

.page-head h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  margin-top: 1.4rem;
  max-width: 14em;
  /* lange Wörter („Datenschutzerklärung") dürfen die Seite nicht aufsprengen */
  overflow-wrap: break-word;
  hyphens: auto;
}

.page-head .hero-sub { max-width: 36em; }

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

/* Seitenkopf ohne Arbeitsprobe daneben: Überschrift links, Unterzeile
   rechts als Randnotiz auf gleicher Grundlinie. Quer unter einer kurzen
   Überschrift durchlaufend wirkt so ein Satz wie ein abgerissener Absatz;
   in der zweiten Spalte bekommt er eine eigene Rolle. */
.head-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.head-split h1 { margin-bottom: 0; }

.head-split .hero-sub {
  max-width: 24em;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}

@media (max-width: 860px) {
  .head-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }
  .head-split .hero-sub { max-width: 34em; }
}

/* ---------- Chat-Demo (interaktiv) ---------- */

.chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--line-soft);
}

.chat-suggest button {
  font-size: 0.84rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-bright);
  transition: border-color 0.2s, background 0.2s, color 0.2s, opacity 0.2s;
}

.chat-suggest button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }

.chat-suggest button:disabled { opacity: 0.35; cursor: default; }

/* Feste Höhe: das Fenster wächst nie mit, nur der Chat darin scrollt */
.chat-body { height: 19rem; overflow-y: auto; scroll-behavior: smooth; }

/* ---------- Zahlenleiste ---------- */

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.figure { padding-top: 1.4rem; }

.figure b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.02em;
  display: block;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.figure b sup { font-size: 0.45em; font-weight: 500; }

.figure span { display: block; margin-top: 0.7rem; font-size: 0.92rem; color: var(--ink-70); max-width: 18em; }

/* ---------- Fließtext (Rechtsseiten) ---------- */

.prose { max-width: 46em; }

.prose h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
}

.prose h2:first-child { margin-top: 0; }

.prose p { margin-bottom: 1rem; color: var(--ink-70); }

.prose ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--ink-70); }

.prose li { margin-bottom: 0.5rem; }

.prose strong { color: var(--ink); }

.prose a { color: var(--ink); }

/* ---------- Reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0s);
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .topnav { display: none; }
  .topnav + .topbar-cta { margin-left: auto; }
  .menu-btn { display: block; }
  .page-grid, .engine-grid, .calc, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .index-row { grid-template-columns: minmax(0, 1fr) auto; }
  .index-row h3 { grid-column: 1; grid-row: 1; }
  .index-row .desc { grid-column: 1; grid-row: 2; }
  .index-row .go { grid-column: 2; grid-row: 1; }
}

@media (max-width: 860px) {
  .facts, .facts-3, .steps, .terms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pricing { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  .product { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .figure { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 720px) {
  .hero { --lockup-h: clamp(110px, 27vw, 150px); height: 88vh; height: 88svh; }
  .hero-lockup { flex-direction: column; gap: 0.15em; }
  .lockup-word { font-size: calc(var(--lockup-h) * 0.42); }
  .hero-bottom { min-height: 200px; }
  .scroll-hint { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .facts, .facts-3, .steps, .terms, .form-row2 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { flex: 1 1 auto; }
  .instrument-body { min-height: 13rem; }

  .index-row { row-gap: 0.7rem; }
  .index-row h3 { font-size: 1.45rem; hyphens: auto; }
  .index-row .go { width: 40px; height: 40px; }
  .index-row .go::after { left: 13px; top: 13px; }

  .readout-row { flex-wrap: wrap; }
  .readout-row .k { min-width: 0; }

  /* Instrument-Zeilen: die Pill mit dem Haken rutscht in eine eigene
     Zeile unter den Text, statt ihn zusammenzuquetschen */
  .i-row { flex-wrap: wrap; }
  .i-row .t { flex: 1 1 100%; }

  /* die Abschlusszeile im Fuß ist reiner Text, kein Flex-Gefüge */
  .instrument-foot .i-row { display: block; }

  /* Preiskarten (Schulungen): die Marke steht über der Überschrift,
     statt sie zu überlappen */
  .plan-tag {
    position: static;
    display: inline-block;
    margin-bottom: 0.5rem;
  }

  /* steht die Marke in der Zeile, braucht die Überschrift keinen Freiraum */
  .plan:has(.plan-tag) h3 { padding-right: 0; }

  /* Chat-Demo: kein großes leeres Fenster vor dem Autoplay */
  .chat-body { height: 14rem; }
}

@media (max-width: 480px) {
  /* Der CTA steht groß im Mobilmenü und am Seitenende — oben reicht
     die Wortmarke plus Menüknopf */
  .topbar-cta .btn-s { display: none; }
}

@media (max-width: 400px) {
  .instrument-top { font-size: 0.7rem; }

  .sc-top span {
    min-width: 0; /* darf im Flex schrumpfen, sonst greift die Ellipse nie */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vb-addr { font-size: 0.62rem; }
}

@media (max-width: 380px) {
  /* der Quellen-Chip im Chat-Widget wurde sonst unten abgeschnitten */
  .cw-panel { height: 17.5rem; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .h-line > span { transform: none; animation: none; }
}

/* ---------- Testhilfe: ?demo=<ms> zeigt die Instrumente als Standbild ---------- */

html.demo-still *,
html.demo-still *::before,
html.demo-still *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}