/* ==========================================================================
   Kanzlei Hub – Stylesheet
   Eine Datei, keine externen Requests.
   1 Tokens · 2 Base · 3 Layout & Bänder · 4 Kopf/Fuß · 5 Komponenten
   6 Hero & Bühne · 7 Story-Blöcke · 8 Formulare · 9 Prose · 10 Motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Flächen */
  --ink:        #0a0f1e;
  --ink-2:      #131c36;
  --ink-3:      #222d4d;
  --white:      #ffffff;
  --bg:         #ffffff;
  --wash:       #f4f7fe;   /* kühles Blau-Weiß statt Grau */
  --wash-warm:  #fff6ea;
  --line:       #e6eaf4;
  --line-soft:  #eef1f8;

  /* Text */
  --text:       #0d1424;
  --muted:      #58627d;
  --on-dark:    #eef1f8;
  --on-dark-mut:#a7b1cb;

  /* Akzente */
  --amber:      #f5a524;
  --amber-deep: #9a5c00;
  --indigo:     #4c6ef5;
  --indigo-deep:#2f4bd0;
  --teal:       #0fb5a6;
  --teal-deep:  #067f76;
  --violet:     #8b5cf6;
  --violet-deep:#6b32e0;
  --green:      #17a34a;
  --rose:       #f2547d;

  /* Gradienten */
  --g-amber:  linear-gradient(140deg, #ffc257, #f0871f);
  --g-indigo: linear-gradient(140deg, #7a92ff, #3b57e0);
  --g-teal:   linear-gradient(140deg, #4ad7c4, #06998f);
  --g-violet: linear-gradient(140deg, #a98bff, #6d3ae6);
  --g-green:  linear-gradient(140deg, #57d98a, #0e8a44);
  --g-rose:   linear-gradient(140deg, #ff8fab, #e23e6b);
  --g-dark:   linear-gradient(155deg, #0b1226 0%, #17204a 52%, #221a45 100%);

  /* Typo */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
          "Roboto Mono", Consolas, "Liberation Mono", monospace;

  --fs-label: 0.75rem;
  --fs-small: 0.9375rem;
  --fs-body:  1.0625rem;
  --fs-lead:  clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
  --fs-h4:    1.125rem;
  --fs-h3:    clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-h2:    clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);
  --fs-h1:    clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);

  /* Maße */
  --shell: 78rem;
  --narrow: 46rem;
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --pad: clamp(3.75rem, 2rem + 6vw, 7rem);
  --gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);

  --sh-1: 0 1px 2px rgba(13, 20, 36, 0.04), 0 10px 26px -14px rgba(13, 20, 36, 0.14);
  --sh-2: 0 2px 4px rgba(13, 20, 36, 0.04), 0 28px 64px -28px rgba(13, 20, 36, 0.3);
  --sh-glow: 0 30px 80px -30px rgba(76, 110, 245, 0.45);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  /* Seitliches Verschieben der ganzen Seite unterbinden. `clip` erzeugt keinen
     Scroll-Container (der sticky Kopf bleibt), `hidden` fängt ältere Browser. */
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 0.55em;
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
  /* Lange deutsche Wörter (z. B. „Datenschutzerklärung") dürfen die Seite
     nicht seitlich aufziehen. Silbentrennung nur, wenn das Wort sonst nicht passt. */
  hyphens: auto;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.018em; }
h4 { font-size: var(--fs-h4); line-height: 1.35; letter-spacing: -0.012em; }

p { margin: 0 0 1.05em; }
p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

img, svg { max-width: 100%; height: auto; }
strong { font-weight: 660; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
::selection { background: #ffe1a8; color: var(--ink); }

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

.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: var(--ink); color: #fff; padding: 0.8rem 1.25rem;
  border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; transition: top 0.15s ease-out;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3 Layout & Bänder
   -------------------------------------------------------------------------- */
/* Ein eigenes display in einer Komponentenregel schlägt das display:none, das
   Browser dem hidden-Attribut geben. Deshalb hier einmal global festhalten. */
[hidden] { display: none !important; }

.shell {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: 1.25rem;
  padding-inline: clamp(1.25rem, 0.5rem + 2.6vw, 2.75rem);
}
.shell--narrow { max-width: var(--narrow); }

.band { position: relative; padding-block: var(--pad); }
.band--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
/* Folgt auf ein eingefärbtes Band ein weißes, addieren sich beide Innenabstände
   zu einer großen Leerfläche. Der Farbwechsel trennt bereits – also weniger. */
.band--wash + .band:not([class*="--"]),
.band--warm + .band:not([class*="--"]) {
  padding-top: clamp(2.75rem, 1.5rem + 3.5vw, 4.75rem);
}
.band--wash { background: var(--wash); }
/* Folgen zwei Bänder mit derselben Fläche aufeinander, fehlt der Farbwechsel,
   der den vollen Abstand rechtfertigt – er wirkt dann wie ein Loch. Der untere
   Innenabstand des ersten Bandes reicht in diesem Fall völlig. */
.band:not([class*="band--"]) + .band:not([class*="band--"]),
.band--tight + .band:not([class*="band--"]),
.band--wash + .band--wash,
.band--warm + .band--warm { padding-top: 0; }
.band--warm { background: var(--wash-warm); }

/* Dunkles Band: Farbverläufe und weiche Lichter, kein Muster.
   Die Lichter liegen als Hintergrundebenen auf dem Band selbst, nicht als
   geblurrte Pseudoelemente. Grund: Safari auf iOS beschneidet Kindelemente mit
   `filter: blur()` nicht am `border-radius` – dort blitzten die Ecken hell
   heraus. Hintergründe werden immer am Radius beschnitten. */
.band--dark {
  background:
    radial-gradient(20rem 20rem at calc(100% - 9rem) 3rem, rgba(245, 165, 36, 0.30), transparent 70%),
    radial-gradient(19rem 19rem at 6rem 100%, rgba(108, 99, 255, 0.34), transparent 70%),
    var(--g-dark);
  color: var(--on-dark);
  border-radius: var(--r-xl);
  margin-inline: clamp(0.5rem, 0.2rem + 1vw, 1.5rem);
  overflow: hidden;
  isolation: isolate;
}
.band--dark > .shell { position: relative; z-index: 1; }
.band--dark :where(h2, h3, h4) { color: #fff; }
.band--dark p { color: var(--on-dark-mut); }
.band--dark a { color: #fff; }

.measure { max-width: 60ch; }
.grid { display: grid; gap: var(--gap); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
.hero .stage#cockpit .paper { max-width: 100%; }
.calc--kapazitaet .calc__panel {
  grid-template-columns: minmax(0, 1fr);
}
.calc--kapazitaet .calc__out { justify-content: center; }
.calc--kapazitaet .calc__out p:not(.calc__unit):not(.calc__disclaimer) {
  margin: 0;
  color: var(--on-dark);
}
.calc--kapazitaet .calc__out .calc__total { margin: 0 0 0.25rem; }
.calc--kapazitaet .calc__out .btn { white-space: normal; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
.split--top { align-items: start; }

/* --------------------------------------------------------------------------
   4 Kopf & Fuß
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  /* feine Goldlinie als Abschluss – der einzige Zierakzent im Kopfbereich */
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid rgba(230, 234, 244, 0.9);
}
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 165, 36, 0.55), transparent);
}
.masthead__inner {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  min-height: 4.5rem; padding-block: 0.5rem;
}
.brand { white-space: nowrap; }
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.03em;
  text-decoration: none; color: var(--text); margin-right: auto;
}
.brand__mark { width: 32px; height: 32px; flex: none; border-radius: 10px; }
.brand__hub {
  background: var(--g-amber); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

.nav { margin-left: auto; }
.nav__list { display: flex; flex-wrap: wrap; gap: 0.125rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; padding: 0.5rem 0.8125rem; border-radius: 999px;
  font: inherit; font-size: var(--fs-small); font-weight: 560; text-decoration: none;
  color: var(--muted); background: none; border: 0; cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.nav__link:hover { color: var(--text); background: var(--wash); }
.nav__link[aria-current="page"], .nav__link[data-current="true"] {
  color: var(--indigo-deep); background: #eef2ff;
}
.nav__link--group { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav__link--group::after {
  content: ""; width: 0.4rem; height: 0.4rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s;
}
.nav__link--group[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }

/* Untermenü: ohne JavaScript stehen beide Links direkt in der Leiste. */
.nav__group { position: relative; }
.nav__sub { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.125rem; }
.nav__sub a {
  display: block; padding: 0.5rem 0.8125rem; border-radius: 999px;
  font-size: var(--fs-small); font-weight: 560; text-decoration: none; color: var(--muted);
}
.nav__sub a small { display: none; }
.nav__sub a:hover { color: var(--text); background: var(--wash); }
.nav__sub a[aria-current="page"] { color: var(--indigo-deep); background: #eef2ff; }

.js .nav__sub {
  position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 5;
  display: none; flex-direction: column; gap: 0.125rem; min-width: 17rem;
  padding: 0.5rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-2);
}
.js .nav__sub.is-open { display: flex; }
.js .nav__sub a { border-radius: var(--r-sm); padding: 0.625rem 0.75rem; }
.js .nav__sub a span { display: block; font-weight: 620; color: var(--text); }
.js .nav__sub a small { display: block; font-size: 0.8125rem; color: var(--muted); }
.js .nav__sub a:hover span { color: var(--indigo-deep); }

.nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  margin-left: auto; margin-right: -0.5rem;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  cursor: pointer; color: var(--text); box-shadow: var(--sh-1);
}
/* Burger aus drei Linien; im geöffneten Zustand wird daraus ein Kreuz. */
.burger, .burger::before, .burger::after {
  display: block; width: 1.125rem; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -0.375rem; }
.burger::after { top: 0.375rem; }
.nav__toggle[aria-expanded="true"] .burger { background: transparent; }
.nav__toggle[aria-expanded="true"] .burger::before { transform: translateY(0.375rem) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .burger::after { transform: translateY(-0.375rem) rotate(-45deg); }

.masthead__actions {
  display: flex; align-items: center; gap: 0.5rem; flex: none; flex-shrink: 0;
}
.masthead__actions .btn { white-space: nowrap; flex-shrink: 0; }

/* Aktionen erscheinen nur im aufgeklappten Menü, nicht in der Desktop-Leiste. */
.nav__actions { display: none; }

@media (max-width: 63.99em) {
  .js .nav__toggle { display: inline-flex; }
  .js .nav__list { display: none; }
  /* Der Knopf steht als letztes Element ganz rechts und schließt mit der
     Innenkante ab – wie das Logo links. Ohne die Umsortierung beansprucht die
     leere Navigation Platz und schiebt ihn von der Kante weg. */
  .js .nav { order: 1; margin-left: 0; }
  .js .nav__toggle { order: 2; margin-left: auto; margin-right: 0; }
  /* Das Menü hängt bündig unter dem Kopfbereich: kein Spalt, durch den der
     Inhalt dahinter durchscheint, und es reicht bis an beide Ränder. */
  .js .nav__list.is-open {
    display: flex; flex-direction: column; gap: 0.125rem;
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    max-height: calc(100vh - 5.5rem);
    max-height: calc(100dvh - 5.5rem);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0.625rem clamp(1.25rem, 0.5rem + 2.6vw, 2.75rem) 1rem;
    background: #fff; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; box-shadow: var(--sh-2);
  }
  /* Bei offenem Menü wird der Kopfbereich deckend, damit Leiste und Menü als
     eine zusammenhängende Fläche wirken statt als zwei weiße Ebenen. */
  .masthead:has(.nav__list.is-open) { background: #fff; }
  .js .nav__list.is-open .nav__link { padding: 0.6875rem 0.875rem; border-radius: var(--r-sm); width: 100%; text-align: left; }
  .js .nav__list.is-open .nav__sub {
    position: static; box-shadow: none; border: 0; padding: 0 0 0 0.875rem;
    min-width: 0; margin-top: 0.125rem;
  }
  .js .nav__list.is-open .nav__sub a { padding: 0.5625rem 0.875rem; }
  .js .nav__list.is-open .nav__actions {
    display: grid; gap: 0.5rem; margin-top: 0.625rem;
    padding-top: 0.75rem; border-top: 1px solid var(--line);
  }
  .js .nav__list.is-open .nav__actions .btn { width: 100%; }
  /* Die Knöpfe im Kopfbereich entfallen – sie stecken jetzt im Menü. */
  .js .masthead__actions { display: none; }
}

.footer {
  background: var(--g-dark); color: var(--on-dark-mut);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
  font-size: var(--fs-small); position: relative; overflow: hidden;
}
.footer__grid { display: grid; gap: 2.25rem; }
.footer h2 {
  color: #fff; font-size: var(--fs-label); font-family: var(--mono);
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.5rem; }
.footer a { color: var(--on-dark-mut); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer .brand { color: #fff; margin-bottom: 0.75rem; }
.footer__note { color: #8b95b2; max-width: 32ch; }
.footer__login span { font-size: 0.85em; opacity: 0.75; }
/* Kontaktspalte: Hauptaktion als Button, darunter die übrigen Wege.
   `.footer a` ist spezifischer als `.btn--accent` und würde sonst Textfarbe
   und Unterstreichung des Buttons überschreiben – deshalb hier explizit. */
.footer__cta .btn { margin-bottom: 1.125rem; }
.footer__cta h2 { margin-bottom: 0.875rem; }
.footer .btn--accent,
.footer .btn--accent:hover { color: #2b1a00; text-decoration: none; }
.footer__made {
  margin: 0.875rem 0 0; padding: 0;
  text-align: center; font-size: 0.8125rem; color: #8b95b2;
}
.footer__made a { color: #c8d0e2; text-decoration: none; font-weight: 600; }
.footer__made a:hover { color: #fff; text-decoration: underline; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-label); font-family: var(--mono); letter-spacing: 0.05em;
}
.footer__bottom ul { display: flex; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   5 Komponenten
   -------------------------------------------------------------------------- */

/* 5.1 Eyebrow */
.eyebrow {
  display: block; margin: 0 0 0.85rem;
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo);
}
h2.eyebrow { font-size: var(--fs-label); line-height: 1.4; }
.band--dark .eyebrow { color: var(--amber); }
.eyebrow--amber { color: var(--amber-deep); }

/* 5.2 Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  white-space: nowrap;
  font: inherit; font-size: var(--fs-small); font-weight: 620;
  padding: 0.8125rem 1.375rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(135deg, #1a2547, #0a0f1e); color: #fff;
  box-shadow: 0 10px 24px -12px rgba(10, 15, 30, 0.7);
}
.btn--accent {
  background: var(--g-amber); color: #2b1a00;
  box-shadow: 0 12px 28px -12px rgba(240, 135, 31, 0.75);
}
.btn--accent:hover {
  background: linear-gradient(135deg, #ffcd72, #f5921f);
  box-shadow: 0 18px 34px -14px rgba(240, 135, 31, 0.9);
}
.btn--ghost { background: #fff; border-color: var(--line); color: var(--text); box-shadow: var(--sh-1); }
.btn--ghost:hover { border-color: rgba(245, 165, 36, 0.8); box-shadow: 0 12px 26px -14px rgba(240, 135, 31, 0.6); }
/* Goldrand-Variante für die zweite Aktion neben dem Hauptbutton */
.btn--gold {
  background: #fff; color: var(--amber-deep);
  border-color: rgba(245, 165, 36, 0.55); box-shadow: var(--sh-1);
}
.btn--gold:hover {
  background: var(--g-amber); color: #2b1a00; border-color: transparent;
  box-shadow: 0 12px 28px -12px rgba(240, 135, 31, 0.75);
}
.btn--onDark { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.btn--onDark:hover { background: rgba(255, 255, 255, 0.18); }
.btn--sm { padding: 0.5625rem 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* 5.3 Farbige Icon-Plättchen */
.tile {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 14px; color: #fff; flex: none;
  box-shadow: 0 8px 18px -10px rgba(13, 20, 36, 0.55);
}
.tile svg { width: 1.375rem; height: 1.375rem; }
.tile--amber  { background: var(--g-amber); }
.tile--indigo { background: var(--g-indigo); }
.tile--teal   { background: var(--g-teal); }
.tile--violet { background: var(--g-violet); }
.tile--green  { background: var(--g-green); }
.tile--rose   { background: var(--g-rose); }
.tile--sm { width: 2.25rem; height: 2.25rem; border-radius: 11px; }
.tile--sm svg { width: 1.125rem; height: 1.125rem; }

/* 5.4 Karten */
.card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: clamp(1.375rem, 1rem + 1vw, 1.875rem);
  box-shadow: var(--sh-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}
.card > .tile { margin-bottom: 1rem; }
.card > .badge-datev { margin-bottom: 1rem; }
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--muted); font-size: var(--fs-small); }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: #d8e0f5; }
.card--link::before {
  content: ""; position: absolute; left: 1.75rem; right: 1.75rem; top: 0; height: 2px;
  background: var(--g-amber); border-radius: 0 0 3px 3px;
  opacity: 0; transition: opacity 0.2s ease;
}
.card--link:hover::before { opacity: 1; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.band--dark .card {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none; backdrop-filter: blur(6px);
}
.band--dark .card p { color: var(--on-dark-mut); }

/* 5.4b Kennzeichnung unfertiger Funktionen auf Karten ---------------------- */
/* Für den umlaufenden Impuls: ohne registrierte Eigenschaft lässt sich ein
   Winkel nicht animieren. Fehlt die Unterstützung, bleibt die Kontur ruhig. */
@property --soon-ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.soon {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center;
  margin: 0.875rem 0 0.75rem; padding: 0.4375rem 0.9375rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  background: none; color: #fff;
  font-size: 0.75rem; font-weight: 620; letter-spacing: 0.01em; line-height: 1.2;
  /* Wechselt zwischen weiß (Ruhe) und leuchtendem Türkis (nach dem Impuls). */
  animation: soonEdge 14s ease-in-out infinite;
}
.soon--b { animation-delay: 7s; }

/* `.band--dark .card p` ist spezifischer als `.soon` und würde die Schrift
   gedämpft grau färben – hier ausdrücklich auf Weiß gezogen. */
.card p.soon,
.band--dark .card p.soon { color: #fff; }

/* Der Impuls: ein kurzer heller Bogen, der einmal im Uhrzeigersinn umläuft.
   Die Maske schneidet die Fläche heraus, sodass nur die Kontur leuchtet. */
.soon::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  border-radius: inherit; padding: 2px; opacity: 0;
  /* Breiterer, hellerer Bogen mit Schein – vorher ging der Impuls im dunklen
     Band unter. */
  background: conic-gradient(from var(--soon-ang),
              transparent 0deg, transparent 250deg,
              rgba(74, 215, 196, 0.35) 272deg, rgba(74, 215, 196, 0.9) 305deg,
              rgba(125, 211, 252, 1) 334deg, #ffffff 353deg, transparent 360deg);
  filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: soonRun 14s linear infinite, soonGlow 14s linear infinite;
}
/* Zweite Kennzeichnung läuft um einen halben Zyklus versetzt – so leuchten
   nie beide gleichzeitig. */
.soon--b::before { animation-delay: 7s, 7s; }

/* Zeitlicher Ablauf je Runde (14 s):
   0–2 s weiß · 2–4,5 s Impuls läuft · 4,5–9,5 s Kontur leuchtet · ab 11 s weiß */
@keyframes soonRun {
  0%, 14%      { --soon-ang: 0deg; }
  32%, 100%    { --soon-ang: 360deg; }
}
@keyframes soonGlow {
  0%, 13%      { opacity: 0; }
  16%, 29%     { opacity: 1; }
  33%, 100%    { opacity: 0; }
}
@keyframes soonEdge {
  0%, 16%      { border-color: rgba(255, 255, 255, 0.62); box-shadow: none; }
  33%, 66%     { border-color: rgba(94, 234, 212, 0.95);
                 box-shadow: 0 0 16px -2px rgba(94, 234, 212, 0.55),
                             inset 0 0 10px -6px rgba(94, 234, 212, 0.9); }
  80%, 100%    { border-color: rgba(255, 255, 255, 0.62); box-shadow: none; }
}

/* Karte mit Kennzeichnung: Icon leicht zurückgenommen, damit der Hinweis führt. */
.card--soon .tile { opacity: 0.75; }
.card--soon h3 { margin-bottom: 0.4em; }

/* 5.5 Chips & Badges */
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4375rem 0.875rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 0.8125rem; font-weight: 560; color: var(--muted);
  box-shadow: var(--sh-1);
}
.chip svg { width: 1rem; height: 1rem; flex: none; }
.chip__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green); flex: none; }
.chip--live { color: var(--text); }
.band--dark .chip {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16);
  color: var(--on-dark); box-shadow: none;
}
.chiprow { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

.badge-datev {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1rem 0.5rem 0.625rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1);
  font-size: 0.8125rem; font-weight: 600; color: var(--text);
}
.badge-datev img { width: 52px; height: auto; display: block; }
.badge-datev--partner {
  gap: 1.125rem; padding: 1rem 1.5rem 1rem 1.125rem;
  border-radius: var(--r-md);
}
.badge-datev--partner img { width: 72px; }

/* Im Hero ohne Kasten – Logo frei, getrennt durch eine Haarlinie. */
.badge-datev--bare {
  gap: 0.875rem; padding: 0; border: 0; box-shadow: none; background: none;
  font-size: 0.8125rem; font-weight: 560; color: var(--muted);
}
.badge-datev--bare img { width: 58px; }
.badge-datev--bare span {
  padding-left: 0.875rem; border-left: 1px solid var(--line); line-height: 1.35;
}
.band--dark .badge-datev {
  background: rgba(255, 255, 255, 0.94); border-color: transparent; color: var(--ink);
}

/* 5.6 Listen */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative; padding-left: 2rem; margin-bottom: 0.75rem;
  font-size: var(--fs-small);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.15em;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #e8fbf3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317a34a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
.band--dark .checklist li { color: var(--on-dark-mut); }
.band--dark .checklist li::before { background-color: rgba(87, 217, 138, 0.16); }
.band--dark .checklist strong { color: #fff; }

.deflist { margin: 0; }
.deflist dt {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--amber-deep); padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.deflist dd { margin: 0.3rem 0 0.9rem; font-size: var(--fs-small); }

/* 5.7 Sprungmarken */
.toc { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
/* Auf schmalen Viewports würden 15 Sprungmarken den Inhalt weit nach unten
   schieben. Sie laufen deshalb in einer Zeile, die sich seitlich schieben lässt. */
@media (max-width: 47.99em) {
  .toc {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 0.25rem;
    /* über die Shell-Polsterung hinaus, damit die Zeile am Rand ausläuft */
    margin-inline: calc(clamp(1.25rem, 0.5rem + 2.6vw, 2.75rem) * -1);
    padding-inline: clamp(1.25rem, 0.5rem + 2.6vw, 2.75rem);
    /* Beide Kanten laufen weich aus. Beim Laden steht die Reihe leicht
       angeschoben (siehe app.js), sodass links und rechts eine angeschnittene
       Marke stehen bleibt – damit ist ohne Erklärung klar, dass sie sich
       schieben lässt. Am jeweiligen Ende entfällt der Auslauf auf dieser
       Seite, sonst wirkt es, als ginge es dort weiter. */
    --fade-l: transparent 0, #000 10%;
    --fade-r: #000 90%, transparent 100%;
    -webkit-mask-image: linear-gradient(to right, var(--fade-l), var(--fade-r));
            mask-image: linear-gradient(to right, var(--fade-l), var(--fade-r));
  }
  .toc--start { --fade-l: #000 0; }
  .toc--end { --fade-r: #000 100%; }
  .toc::-webkit-scrollbar { display: none; }
  .toc li { flex: none; }
}
.toc a {
  display: inline-block; padding: 0.5rem 0.875rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; font-size: 0.875rem;
  text-decoration: none; color: var(--muted); box-shadow: var(--sh-1);
  transition: transform 0.15s, color 0.15s;
}
.toc a:hover { color: var(--text); transform: translateY(-2px); border-color: rgba(245, 165, 36, 0.6); }

/* 5.8 FAQ */
.faq { display: grid; gap: 0.75rem; }
.faq__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--sh-1); overflow: hidden;
}
.faq__q {
  display: flex; align-items: center; gap: 0.875rem; cursor: pointer;
  padding: 1.0625rem 1.25rem; font-weight: 620; font-size: 1rem; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "+"; display: grid; place-items: center; flex: none;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--wash); color: var(--indigo); font-family: var(--mono);
  font-size: 1rem; line-height: 1;
}
.faq__item[open] .faq__q::before { content: "–"; background: #fff4e3; color: var(--amber-deep); }
.faq__a { padding: 0 1.25rem 1.25rem 3.625rem; }
.faq__a p { color: var(--muted); font-size: var(--fs-small); }

/* 5.9 Brotkrumen & Seitenkopf */
.breadcrumb { padding-top: 1.5rem; }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em;
  color: var(--muted);
}
.breadcrumb li + li::before { content: "/ "; color: #c3c9db; }
.breadcrumb a { color: var(--muted); }

.pagehead { position: relative; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; }
/* Folgt direkt ein eingefärbtes Band, stößt dessen Kante sonst fast an den
   Einleitungstext. Weiße Bänder brauchen den Abstand nicht – sie haben keine
   sichtbare Kante und bringen ihre eigene Innenabstand mit. */
.pagehead + .band--dark,
.pagehead + .band--wash,
.pagehead + .band--warm {
  margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}
.pagehead__lead { font-size: var(--fs-lead); color: var(--muted); max-width: 58ch; }

/* --------------------------------------------------------------------------
   6 Hero & Bühne
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--pad); overflow-x: clip; }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bg::before, .hero__bg::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px);
}
.hero__bg::before {
  width: 42rem; height: 42rem; top: -18rem; right: -12rem; opacity: 0.5;
  background: radial-gradient(circle, rgba(245, 165, 36, 0.55), transparent 65%);
}
.hero__bg::after {
  width: 38rem; height: 38rem; top: 4rem; left: -16rem; opacity: 0.45;
  background: radial-gradient(circle, rgba(76, 110, 245, 0.45), transparent 65%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 4.5rem); align-items: center; }
.hero h1 { margin: 1.25rem 0 1rem; }
.hero__lead { font-size: var(--fs-lead); color: var(--muted); max-width: 48ch; }
.hero .btn-row { margin: 1.5rem 0 1.75rem; }
.hero__break { display: block; }

.hero__points {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; gap: 0.5rem; max-width: 42rem;
}
.hero__points li {
  display: flex; align-items: flex-start; gap: 0.625rem;
  font-size: var(--fs-small); font-weight: 560; line-height: 1.4;
}
.hero__points li::before {
  content: ""; flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.12em;
  border-radius: 50%;
  background: #e8fbf3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317a34a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

/* Bühne: schwebende Karten */
.stage { position: relative; z-index: 1; min-width: 0; max-width: 100%; }
.stage__glow {
  position: absolute; inset: 12% -6% -8% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(76, 110, 245, 0.3), transparent 62%);
  filter: blur(48px);
}
.paper {
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.paper__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem;
  padding: 1.125rem 1.375rem;
  background: linear-gradient(120deg, #f7f9ff, #fff);
  border-bottom: 1px solid var(--line-soft);
}
.paper__head .tile { margin: 0; }
.paper__id {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.paper__title { font-size: var(--fs-small); font-weight: 660; margin: 0; }
.paper__group-label {
  margin: 1.25rem 1.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.paper table { width: 100%; border-collapse: collapse; }
.paper th, .paper td {
  text-align: left; padding: 0.75rem 1.375rem; font-size: var(--fs-small);
  border-bottom: 1px solid var(--line-soft);
}
.paper thead th {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  padding-block: 0.5rem;
}
.paper thead th:last-child, .paper td:last-child { text-align: right; }
.paper td:last-child { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 47.99em) {
  /* Auf schmalen Schirmen zieht die Status-Spalte sonst die ganze Karte – und
     damit die Seite – über den Rand. Die Zeile darf umbrechen. */
  .paper table { table-layout: fixed; }
  .paper td, .paper th { overflow-wrap: anywhere; }
  .paper td:last-child { white-space: normal; }
}
.paper tbody tr:last-child :where(td) { border-bottom: 0; }
.check { display: flex; align-items: center; gap: 0.625rem; font-weight: 560; }
.check__mark {
  display: grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; flex: none;
}
.check__mark svg { width: 0.75rem; height: 0.75rem; }
.check__mark--ok { background: #e8fbf3; color: var(--green); }
.check__mark--open { background: #fff3e0; color: #d98200; }
.paper__foot {
  display: flex; align-items: center; gap: 0.875rem;
  /* unten mehr Luft: dort liegen die beiden schwebenden Chips auf,
     ohne Text zu verdecken (Chiphöhe ca. 2,7rem, davon ragen 1,75rem heraus) */
  padding: 1.125rem 1.375rem 2.5rem; font-size: var(--fs-small);
  background: linear-gradient(120deg, #fff8ee, #fff);
  border-top: 1px solid #f6e6cd;
}

/* Kompakte Prüfkarten in der Ausnahme-Section – dieselbe UI wie im Hero,
   ohne schwebende Chips und deshalb ohne Extra-Polster unten. */
.paper--case { height: 100%; display: flex; flex-direction: column; }
.paper--case .paper__head { padding: 0.9375rem 1.125rem; }
.paper--case th, .paper--case td { padding: 0.5625rem 1.125rem; }
.paper--case td:first-child { min-width: 0; }
.paper--case .check { min-width: 0; align-items: flex-start; }
.paper--case .paper__foot {
  margin-top: auto; padding: 0.9375rem 1.125rem; align-items: flex-start;
}
.paper--case .paper__foot p { margin: 0; min-width: 0; }

.float {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.9375rem; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--sh-2);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}
.float svg { width: 1rem; height: 1rem; }

/* Alle drei Chips hängen vollständig über den Kartenrand hinaus – oben einer,
   unten zwei. Damit verdeckt keiner eine Zeile des Prüfergebnisses.
   Sichtbarkeit wird nur über `display: none` gesteuert, nie über einen
   Layout-Wert: fällt der aus, bliebe der Chip sonst dauerhaft verborgen. */
.float--a { top: -1.875rem; left: -0.75rem; color: var(--indigo-deep); }
.float--b { bottom: -1.75rem; left: -0.5rem; color: var(--teal-deep); }
.float--c { bottom: -1.75rem; right: -0.5rem; color: var(--amber-deep); }
.float { animation: none; }

@media (max-width: 47.99em) {
  .float { display: none; }
}
/* Unter etwa 1280px ist die Bühne schmaler als beide unteren Chips zusammen
   (ca. 218px + 248px). Dann entfällt der rechte, damit sich nichts überlagert. */
@media (max-width: 79.99em) {
  .float--c { display: none; }
}

/* --------------------------------------------------------------------------
   7 Story-Blöcke
   -------------------------------------------------------------------------- */

/* 7.1 Interaktiver Ablauf */
.steps__tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 2rem; padding: 0;
}
.steps__tab {
  display: inline-flex; align-items: center; gap: 0.625rem; font: inherit;
  font-size: var(--fs-small); font-weight: 600; color: var(--muted);
  padding: 0.625rem 1.125rem 0.625rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  box-shadow: var(--sh-1); transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.steps__tab:hover { transform: translateY(-2px); }
.steps__tab b {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--wash); color: var(--indigo);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
}
.steps__tab[aria-selected="true"] {
  color: var(--text); border-color: transparent;
  box-shadow: 0 12px 26px -14px rgba(76, 110, 245, 0.6), inset 0 0 0 1.5px var(--indigo);
}
.steps__tab[aria-selected="true"] b { background: var(--g-indigo); color: #fff; }

.steps__panel { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); }
.js .steps__panel[hidden] { display: none; }
.steps__panel h3 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); }
.steps__panel + .steps__panel { margin-top: 3rem; }
.js .steps__panel + .steps__panel { margin-top: 0; }

/* 7.2 Problem-Karten */
.problem {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.5rem; box-shadow: var(--sh-1);
  display: grid; gap: 0.875rem;
}
.problem__quote {
  font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.015em; margin: 0;
  line-height: 1.35;
}
.problem p { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.problem__fix {
  display: flex; gap: 0.625rem; align-items: flex-start;
  padding-top: 0.875rem; border-top: 1px dashed var(--line);
  font-size: var(--fs-small); color: var(--text);
}
.problem__fix svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--green); margin-top: 0.15em; }

/* 7.3 Zahlenvergleich */
.compare { display: grid; gap: var(--gap); }
.compare__side {
  display: flex; flex-direction: column;
  border-radius: var(--r-md); padding: clamp(1.375rem, 1rem + 1vw, 1.875rem);
  border: 1px solid var(--line); background: #fff;
  /* eigene Textfarbe, damit die Karte auch im dunklen Band lesbar bleibt */
  color: var(--text);
}
.compare__side p { color: var(--muted); }
.compare__side--now { background: var(--wash); box-shadow: none; }
.compare__side--new {
  background: linear-gradient(160deg, #ffffff, #f3fdf8);
  border-color: #c9ecd9; box-shadow: var(--sh-2);
}
.compare__label {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.compare__count {
  display: block; margin: 0.5rem 0 0; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  font-weight: 780; letter-spacing: -0.04em; line-height: 1.15;
}
.compare__side--new .compare__count {
  background: var(--g-green); -webkit-background-clip: text; background-clip: text;
  color: transparent; padding-bottom: 0.06em;
}
.steplist { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.steplist li {
  display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem 0;
  font-size: var(--fs-small); border-bottom: 1px solid var(--line-soft);
}
.steplist li:last-child { border-bottom: 0; }
.steplist--now li { color: var(--muted); }
.steplist--now li::before {
  content: ""; width: 0.875rem; height: 0.875rem; border-radius: 50%;
  border: 1.5px solid #c7cddd; flex: none;
}
.steplist--new li::before {
  content: ""; width: 0.875rem; height: 0.875rem; border-radius: 50%; flex: none;
  background: var(--g-green);
}
/* Die Schritte, die ohne Zutun laufen – füllen den Raum, den die kurze Liste
   frei lässt, und belegen die Aussage, statt sie nur zu behaupten. */
.auto__label {
  display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0;
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.auto__label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auto {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 1rem 0 0; padding: 0; list-style: none;
}
.auto li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4375rem 0.8125rem; border-radius: 999px;
  background: rgba(23, 163, 74, 0.07); border: 1px solid rgba(23, 163, 74, 0.2);
  color: var(--green); font-size: 0.8125rem; font-weight: 580;
}
.auto svg { width: 0.875rem; height: 0.875rem; stroke-width: 3; }

/* Ein Licht wandert einmal durch die Kette – zeigt, dass hier etwas läuft.
   Startwert ist der Ruhezustand: Fällt die Animation aus, bleibt alles sichtbar. */
@keyframes autoSweep {
  0%, 100% { background: rgba(23, 163, 74, 0.07); border-color: rgba(23, 163, 74, 0.2); }
  8%       { background: rgba(23, 163, 74, 0.2);  border-color: rgba(23, 163, 74, 0.5); }
  22%      { background: rgba(23, 163, 74, 0.07); border-color: rgba(23, 163, 74, 0.2); }
}
.auto li { animation: autoSweep 5.4s ease-in-out infinite; }
.auto li:nth-child(1) { animation-delay: 0s; }
.auto li:nth-child(2) { animation-delay: 0.28s; }
.auto li:nth-child(3) { animation-delay: 0.56s; }
.auto li:nth-child(4) { animation-delay: 0.84s; }
.auto li:nth-child(5) { animation-delay: 1.12s; }
.auto li:nth-child(6) { animation-delay: 1.4s; }

/* Der Schlusssatz füllt die Resthöhe, damit beide Karten gleich hoch schließen. */
.compare__note { margin-top: auto; padding-top: 1.5rem; font-size: var(--fs-small); }
.compare__note strong { color: var(--text); }

/* 7.4 Anbindungen */
.connect { display: grid; gap: 0.875rem; }
.connect__item {
  display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.125rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--sh-1); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.connect__item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.connect__body { min-width: 0; }
.connect__name { display: block; font-weight: 640; font-size: var(--fs-small); }
.connect__meta { display: block; font-size: 0.8125rem; color: var(--muted); }
.connect__state {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--green); flex: none;
}
.connect__state--soon { color: var(--amber-deep); }
.connect__state::before {
  content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%;
  background: currentColor;
}

/* 7.5 Screenshots – ohne Fensterattrappe */
.shot { margin: 0; position: relative; }
.shot__glow {
  position: absolute; inset: 8% -4% -6% -4%; z-index: -1; border-radius: 50%;
  filter: blur(50px); opacity: 0.5;
  background: radial-gradient(circle at 50% 50%, rgba(76, 110, 245, 0.35), transparent 65%);
}
.shot img {
  display: block; width: 100%; border-radius: var(--r-md);
  border: 1px solid var(--line); box-shadow: var(--sh-2);
}
/* Freigestellte Montagen brauchen weder Rahmen noch Schatten – die Geräte
   bringen ihre eigenen Kanten mit. */
.shot--plain img { border: 0; box-shadow: none; border-radius: 0; background: none; }
/* Für Bilder, die sonst den Abschnitt dominieren – sie sollen auf einen Blick
   vollständig sichtbar sein, nicht scrollbar. */
.shot--portrait { max-width: 34rem; }

/* Kennzeichnung KI-erzeugter Bilder, unten links im Bild */
.shot__media { position: relative; display: block; }
.ai-badge {
  position: absolute; left: 0.875rem; bottom: 0.875rem; margin: 0;
  display: inline-flex; align-items: center;
  padding: 0.3125rem 0.8125rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: #14161a;
  border: 1.5px solid #14161a;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; line-height: 1.2;
  backdrop-filter: blur(4px);
}
/* Screenshot auf dunklem Grund: heller Rahmen statt harter Kante gegen Navy */
.shot--onDark img {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 70px -30px rgba(3, 6, 18, 0.85);
}
.shot--plain .shot__glow { opacity: 0.35; }

/* Bildunterschriften laufen über die volle Bildbreite. Eine feste Zeichen-
   begrenzung würde sie unter breiten Bildern unnötig früh umbrechen. */
.shot figcaption {
  margin-top: 0.875rem; font-size: 0.875rem; color: var(--muted);
  text-wrap: pretty;
}
.band--dark .shot figcaption { color: var(--on-dark-mut); }

/* Ablauf-Tabs: Screenshot-Zoom folgt der Maus (gesteuert in app.js) */
#ablauf .steps__panel .shot picture {
  display: block; overflow: hidden; border-radius: var(--r-md);
  border: 1px solid var(--line); box-shadow: var(--sh-2);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
#ablauf .steps__panel .shot img {
  display: block; width: 100%;
  border: 0; box-shadow: none; border-radius: 0;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#ablauf .steps__panel .shot .shot__glow {
  transition: opacity 0.35s ease;
}
@media (hover: hover) {
  #ablauf .steps__panel .shot picture { cursor: zoom-in; }
  #ablauf .steps__panel .shot picture.is-zooming {
    cursor: crosshair;
    box-shadow: var(--sh-glow);
    border-color: #d0daf5;
  }
  #ablauf .steps__panel .shot picture.is-zooming img {
    transform: scale(var(--shot-zoom, 2.35));
    transform-origin: var(--shot-ox, 50%) var(--shot-oy, 50%);
  }
  #ablauf .steps__panel .shot picture.is-zooming + figcaption { opacity: 0.55; }
  #ablauf .steps__panel .shot:has(picture.is-zooming) .shot__glow { opacity: 0.68; }
}
#ablauf .steps__panel .shot figcaption { transition: opacity 0.25s ease; }

/* Freigestellte Montagen lassen in keiner Ecke Platz für die Kennzeichnung,
   ohne ein Gerät zu verdecken. Dort steht sie vor der Bildunterschrift. */
.ai-badge--inline {
  position: static; margin-right: 0.625rem;
  vertical-align: baseline; translate: 0 1px;
}

/* 7.6 Feature-Blöcke (abwechselnd) */
.feature { position: relative; }
.feature + .feature { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.feature__meta {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--indigo); margin: 0 0 0.75rem;
}
.feature h3 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); }
.feature p { color: var(--muted); }
.feature__grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: center; }

/* 7.7 Kompakte Funktionsliste */
.mini { display: grid; gap: 1.25rem; }
.mini__item { display: flex; gap: 1rem; align-items: flex-start; }
.mini__item h4, .mini__title { margin: 0 0 0.2rem; }
/* Kurzlabels ohne Überschriftenrang – dort, wo ein h4 die Hierarchie brechen würde */
.mini__title { font-size: var(--fs-h4); font-weight: 660; letter-spacing: -0.012em; line-height: 1.35; }
.mini__item p { margin: 0; color: var(--muted); font-size: var(--fs-small); }


/* 7.10 Schaubild: der Weg eines Belegs */
.pipe { display: grid; gap: 0.875rem; align-items: center; }
.pipe__side, .pipe__core { min-width: 0; }
.pipe__label {
  margin: 0 0 0.75rem; font-family: var(--mono); font-size: var(--fs-label);
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.pipe__label--gold { color: var(--amber-deep); }
.pipe__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pipe__chip {
  display: flex; align-items: center; gap: 0.6875rem;
  padding: 0.6875rem 0.9375rem; background: #fff; border: 1px solid var(--line);
  border-radius: 13px; font-size: 0.875rem; box-shadow: var(--sh-1);
  line-height: 1.35;
}
.pipe__chip svg { width: 1.0625rem; height: 1.0625rem; flex: none; color: var(--indigo); }
.pipe__chip strong { font-weight: 640; }
.pipe__chip > span:first-of-type { min-width: 0; flex: 1; }
.pipe__state {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--amber-deep); white-space: nowrap;
}

.pipe__core {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(11rem 11rem at calc(100% - 3rem) 1rem, rgba(245, 165, 36, 0.42), transparent 70%),
    linear-gradient(158deg, #101a35 0%, #1a1c44 60%, #241a3f 100%);
  color: #fff; border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  box-shadow: 0 30px 64px -30px rgba(10, 15, 30, 0.6);
}
.pipe__core > * { position: relative; z-index: 1; }
.pipe__claim {
  margin: 0 0 1.125rem; font-size: 1.0625rem; font-weight: 660;
  letter-spacing: -0.018em; line-height: 1.3;
}
.pipe__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4375rem; }
.pipe__steps li {
  display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem;
  padding: 0.5rem 0.6875rem; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04);
  color: #e9ecf6;
}
.pipe__steps b {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 8px; background: rgba(245, 165, 36, 0.18); color: var(--amber);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
}
.pipe__note {
  display: flex; align-items: center; gap: 0.5rem; margin: 1.125rem 0 0;
  font-size: 0.8125rem; color: var(--on-dark-mut);
}
.pipe__note svg { width: 1rem; height: 1rem; flex: none; color: var(--amber); }

/* Laufende Verbindungslinie – senkrecht auf schmalen Viewports */
.pipe__rail { position: relative; display: grid; place-items: center; height: 2.5rem; }
.rail {
  display: block; width: 3px; height: 100%; border-radius: 3px;
  background-image: repeating-linear-gradient(180deg,
    var(--amber) 0 7px, rgba(245, 165, 36, 0.16) 7px 16px);
  background-size: 100% 16px;
  animation: railFlowV 1.1s linear infinite;
}
.rail__dot {
  position: absolute; top: 50%; left: 50%; width: 0.5rem; height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 4px rgba(245, 165, 36, 0.16);
  animation: dotTravelV 2.8s ease-in-out infinite;
}
@keyframes railFlowV { to { background-position: 0 16px; } }
@keyframes dotTravelV {
  0%   { transform: translateY(-1rem); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(1rem); opacity: 0; }
}
@keyframes railFlowH { to { background-position: 16px 0; } }
@keyframes dotTravelH {
  0%   { transform: translateX(-1.25rem); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(1.25rem); opacity: 0; }
}
@keyframes stepOn {
  0%, 11%  { border-color: rgba(245, 165, 36, 0.5); background: rgba(245, 165, 36, 0.1); }
  20%, 100% { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); }
}
.pipe__steps li { animation: stepOn 7s linear infinite; }
.pipe__steps li:nth-child(1) { animation-delay: 0s; }
.pipe__steps li:nth-child(2) { animation-delay: 1.4s; }
.pipe__steps li:nth-child(3) { animation-delay: 2.8s; }
.pipe__steps li:nth-child(4) { animation-delay: 4.2s; }
.pipe__steps li:nth-child(5) { animation-delay: 5.6s; }

/* 7.11 Vorher/Nachher als Zeilen */
.swap { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6875rem; }
.swap__head {
  display: none; padding: 0 1.375rem 0.25rem; font-family: var(--mono);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text);
}
.swap__head p { margin: 0; }
.swap__head p:nth-child(1) { color: var(--amber-deep); }
.swap__head p span {
  display: inline-block; padding: 0.3125rem 0.75rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.swap__head p:nth-child(2) span { color: var(--muted); }
.swap__head p:nth-child(3) span { color: var(--teal-deep); border-color: #c9e9e3; }
.swap__head p { margin: 0; }
.swap__row {
  position: relative; overflow: hidden;
  display: grid; gap: 0.5rem 1.5rem;
  padding: 1.125rem 1.375rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.swap__row:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.swap__row::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  background: var(--g-amber); border-radius: 0 3px 3px 0;
  opacity: 0; transition: opacity 0.18s ease;
}
.swap__row:hover::before { opacity: 1; }
.swap__task {
  margin: 0; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-deep);
}
.swap__from, .swap__to {
  display: flex; gap: 0.625rem; align-items: flex-start; margin: 0;
  font-size: var(--fs-small);
}
.swap__from { color: var(--muted); }
.swap__from svg, .swap__to svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.12em; }
.swap__from svg { color: #b6bdd1; }
.swap__to svg { color: var(--green); }
/* Zwei Spalten mit Haken (Mandant | Kanzlei): erste Spalte türkis abgesetzt */
.swap__row .swap__to:nth-of-type(1) svg { color: var(--teal-deep); }


/* 7.12 Herkunfts-Kennzeichen */
.made {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.9375rem 0.5rem 0.625rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1);
  font-size: 0.8125rem; font-weight: 640; color: var(--text);
}
.chip__eu {
  display: grid; place-items: center; flex: none;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #003399;
  box-shadow: inset 0 0 0 1px rgba(13, 20, 36, 0.12);
}
.chip__eu svg { width: 0.875rem; height: 0.875rem; }
.made__flag, .chip__flag {
  display: flex; flex-direction: column; flex: none; overflow: hidden;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(13, 20, 36, 0.12);
}
.made__flag i, .chip__flag i { flex: 1; }
.made__flag i:nth-child(1), .chip__flag i:nth-child(1) { background: #1b1b1b; }
.made__flag i:nth-child(2), .chip__flag i:nth-child(2) { background: #d0141c; }
.made__flag i:nth-child(3), .chip__flag i:nth-child(3) { background: var(--amber); }
.band--dark .made { background: rgba(255, 255, 255, 0.95); border-color: transparent; }

/* 7.13 Zeitleiste */
.tl {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
}
.tl__line { display: none; }
.tl__item {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  padding: 1.5rem 1.375rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tl__item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.tl__item .tile { margin-bottom: 1rem; }
.tl__day {
  display: inline-block; margin: 0 0 0.625rem;
  padding: 0.25rem 0.6875rem; border-radius: 999px;
  background: var(--wash); color: var(--muted);
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.tl__item h3 { font-size: var(--fs-h4); margin-bottom: 0.4em; }
.tl__item p { margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* 7.14 Echtzeit-Verarbeitung */
.rt {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(12rem 12rem at calc(100% - 3rem) 1rem, rgba(15, 181, 166, 0.4), transparent 70%),
    linear-gradient(158deg, #101a35 0%, #1a1c44 60%, #241a3f 100%);
  color: #fff; border-radius: var(--r-lg);
  padding: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  box-shadow: 0 30px 64px -30px rgba(10, 15, 30, 0.6);
}
.rt > * { position: relative; z-index: 1; }
.rt__head {
  display: flex; align-items: center; gap: 0.625rem; margin: 0;
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-mut);
}
/* Abschlussmeldung: erscheint, wenn alle vier Balken durchgelaufen sind,
   und weicht wieder dem Laufzustand. Ohne Animation bleibt sie verborgen –
   der Laufzustand ist dann die gültige Aussage. */
.rt__done {
  display: flex; align-items: center; gap: 0.875rem;
  margin: 1.5rem 0 0; padding: 0.875rem 1.125rem;
  border-radius: var(--r-sm); font-size: 0.875rem; line-height: 1.4;
  background: rgba(87, 217, 138, 0.1);
  border: 1px solid rgba(87, 217, 138, 0.28);
  color: #a9f5c9; opacity: 0;
}
.rt__done strong { color: #fff; font-weight: 650; }
.rt__badge {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--g-green); color: #052e14; flex: none;
}
.rt__badge svg { width: 1rem; height: 1rem; stroke-width: 3; }
.rt__live {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #57d98a; flex: none;
  animation: livePulse 1.9s ease-out infinite;
}
.rt__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.rt__row {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: 0.375rem 0.75rem; align-items: center;
}
.rt__icon { display: grid; place-items: center; }
.rt__icon svg { width: 1.125rem; height: 1.125rem; }
.rt__label { font-size: 0.9375rem; font-weight: 620; }
.rt__state { font-size: 0.8125rem; color: var(--on-dark-mut); text-align: right; }
.rt__track {
  grid-column: 1 / -1; height: 5px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.12); overflow: hidden;
}
.rt__bar {
  display: block; height: 100%; width: 100%; border-radius: 99px;
  transform-origin: left center;
}
.rt__row--teal   .rt__icon { color: #4ad7c4; } .rt__row--teal   .rt__bar { background: var(--g-teal); }
.rt__row--indigo .rt__icon { color: #93a6ff; } .rt__row--indigo .rt__bar { background: var(--g-indigo); }
.rt__row--violet .rt__icon { color: #b79bff; } .rt__row--violet .rt__bar { background: var(--g-violet); }
.rt__row--amber  .rt__icon { color: var(--amber); } .rt__row--amber  .rt__bar { background: var(--g-amber); }
.rt__foot {
  display: flex; align-items: flex-start; gap: 0.625rem; margin: 1.75rem 0 0;
  padding-top: 1.125rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem; color: var(--on-dark-mut);
}
.rt__foot svg { width: 1rem; height: 1rem; flex: none; color: var(--amber); margin-top: 0.15em; }

@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(87, 217, 138, 0.55); }
  60%      { box-shadow: 0 0 0 7px rgba(87, 217, 138, 0); }
}
/* Balken starten sichtbar gefüllt: fällt die Animation aus, bleibt die
   Darstellung vollständig – sie füllen sich nur zusätzlich nacheinander. */
@keyframes fillBar {
  0%        { transform: scaleX(0); }
  22%, 88%  { transform: scaleX(1); }
  100%      { transform: scaleX(1); }
}
.rt__bar { animation: fillBar 6s cubic-bezier(0.3, 0.7, 0.3, 1) infinite; }

/* Zeitachse: letzter Balken ist bei ~3,4 s voll, danach die Bestätigung */
@keyframes doneIn {
  0%, 55%   { opacity: 0; transform: translateY(6px) scale(0.98); }
  63%       { opacity: 1; transform: translateY(0) scale(1.015); }
  68%, 92%  { opacity: 1; transform: translateY(0) scale(1); }
  100%      { opacity: 0; transform: translateY(0) scale(1); }
}
@keyframes badgeRing {
  0%, 56%  { box-shadow: 0 0 0 0 rgba(87, 217, 138, 0); }
  62%      { box-shadow: 0 0 0 0 rgba(87, 217, 138, 0.65); }
  74%      { box-shadow: 0 0 0 12px rgba(87, 217, 138, 0); }
  100%     { box-shadow: 0 0 0 0 rgba(87, 217, 138, 0); }
}
.rt__done { animation: doneIn 6s ease-out infinite; }
.rt__badge { animation: badgeRing 6s ease-out infinite; }
.rt__badge svg { animation: none; }
.rt__row:nth-child(1) .rt__bar { animation-delay: 0s; }
.rt__row:nth-child(2) .rt__bar { animation-delay: 0.7s; }
.rt__row:nth-child(3) .rt__bar { animation-delay: 1.4s; }
.rt__row:nth-child(4) .rt__bar { animation-delay: 2.1s; }

/* 7.15 Gegenüberstellung Kanzlei / Mandant */
.duo { display: grid; gap: var(--gap); align-items: stretch; }
.duo__side { display: flex; flex-direction: column; }
.duo__label {
  margin: 0.875rem 0 0.3rem; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.duo__side h3 { margin-bottom: 0.875rem; }
.duo__side .checklist { margin-top: auto; }

/* Verbindungsstück: auf schmalen Viewports waagerecht, sonst mittig senkrecht */
.duo__link { display: grid; place-items: center; }
.duo__pill {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--sh-1); color: var(--indigo);
}
.duo__pill svg { width: 1.125rem; height: 1.125rem; }
/* Untereinander gestapelt muss der Pfeil nach unten weisen, nicht nach rechts. */
@media (max-width: 47.99em) {
  .duo__pill svg { transform: rotate(90deg); }
}

.handoff {
  display: flex; align-items: flex-start; gap: 0.875rem;
  margin: var(--gap) 0 0; padding: 1.125rem 1.375rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-1); font-size: var(--fs-small); line-height: 1.5;
}
.handoff svg {
  width: 1.25rem; height: 1.25rem; flex: none; color: var(--green); margin-top: 0.1em;
}

/* Partnerschaftliche Gegenüberstellung – gleiche visuelle Gewichtung,
   kein Vorher/Nachher. */
.duo__side--peer { background: linear-gradient(160deg, #ffffff, #f7f9ff); }
.handoff--key {
  background: linear-gradient(120deg, #fff8ee, #fff);
  border-color: #f6e6cd;
  font-size: 1.0625rem; font-weight: 560;
}
.handoff--key strong { font-weight: 700; color: var(--text); }


/* 7.16 Ticketfenster – zeigt, dass die Frage im Tool selbst gestellt wird */
.ticket {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
.ticket__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: linear-gradient(135deg, #1a2547, #0a0f1e); color: #fff;
  font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ticket__num { display: inline-flex; align-items: center; gap: 0.5rem; }
.ticket__num svg { width: 1rem; height: 1rem; color: var(--amber); }
.ticket__status {
  padding: 0.25rem 0.625rem; border-radius: 999px;
  background: rgba(245, 165, 36, 0.18); color: var(--amber);
  border: 1px solid rgba(245, 165, 36, 0.4); letter-spacing: 0.08em;
}

/* Perforation wie bei einem Abriss-Ticket – macht die Form eindeutig */
.ticket__perf {
  position: relative; height: 0; margin: 0 1.25rem;
  border-top: 2px dashed #dbe1f0;
}
.ticket__perf::before, .ticket__perf::after {
  content: ""; position: absolute; top: -0.6875rem;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--wash);
}
.ticket__perf::before { left: -1.9375rem; }
.ticket__perf::after { right: -1.9375rem; }

.ticket__agent {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: 50%; background: var(--g-green); color: #052e14;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
}
.ticket__body { padding: 1.25rem; }
.ticket__meta {
  margin: 0; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.ticket__ref {
  display: flex; align-items: center; gap: 0.5rem; margin: 0.4375rem 0 0;
  padding: 0.5625rem 0.75rem; border-radius: var(--r-sm);
  background: var(--wash); border: 1px solid var(--line);
  font-size: 0.8125rem; font-weight: 560;
}
.ticket__ref svg { width: 1rem; height: 1rem; flex: none; color: var(--indigo); }
.ticket__text {
  margin: 0.4375rem 0 0; padding: 0.75rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fdfdff; font-size: var(--fs-small); color: var(--text);
}
.ticket__send {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0;
  padding: 0.5rem 0.9375rem; border-radius: 999px;
  background: linear-gradient(135deg, #1a2547, #0a0f1e); color: #fff;
  font-size: 0.8125rem; font-weight: 620;
}
.ticket__send svg { width: 0.9375rem; height: 0.9375rem; }
.ticket__foot {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 1rem 1.25rem; font-size: 0.8125rem; line-height: 1.45;
  background: rgba(23, 163, 74, 0.06); border-top: 1px solid rgba(23, 163, 74, 0.18);
  color: var(--muted);
}
.ticket__foot strong { color: var(--text); }

/* 7.8 CTA */
/* Lichter als Hintergrundebenen – siehe Hinweis bei .band--dark: geblurrte
   Pseudoelemente laufen auf iOS über die abgerundeten Ecken hinaus. */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(16rem 16rem at calc(100% - 7rem) 3rem, rgba(245, 165, 36, 0.5), transparent 70%),
    radial-gradient(15rem 15rem at 4rem 100%, rgba(139, 92, 246, 0.5), transparent 70%),
    var(--g-dark);
  color: #fff; border-radius: var(--r-xl);
  padding: clamp(2rem, 1.4rem + 3vw, 3.75rem);
}
.cta__grid { position: relative; z-index: 1; }
.cta h2 { color: #fff; }
.cta p { color: var(--on-dark-mut); }
.cta__grid { display: grid; gap: 2rem; align-items: center; }
.illu { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   8 Formulare
   -------------------------------------------------------------------------- */
.formcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--sh-2);
}
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
/* Label – Eingabe – Hinweis in drei festen Zeilen: dadurch stehen benachbarte
   Felder auf gleicher Höhe, auch wenn nur eines einen Hinweistext hat. */
.field { display: grid; grid-template-rows: auto auto 1fr; gap: 0.4rem; align-content: start; }
.field > label { font-size: var(--fs-small); font-weight: 620; }
.field__hint { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); margin: 0; }
.req { color: var(--rose); }

.input, .select, .textarea {
  font: inherit; font-size: var(--fs-small); width: 100%;
  padding: 0.8125rem 1rem; color: var(--text); background: #fdfdff;
  border: 1px solid #dbe1f0; border-radius: var(--r-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.textarea { min-height: 9rem; resize: vertical; }
.select {
  appearance: none; padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 1.3rem, calc(100% - 0.95rem) 1.3rem;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  background-color: #fdfdff;
}
.input:hover, .textarea:hover, .select:hover { border-color: #c3cce4; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(76, 110, 245, 0.14);
}
.input:user-invalid, .textarea:user-invalid { border-color: var(--rose); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.consent input { margin-top: 0.25rem; width: 1.125rem; height: 1.125rem; accent-color: var(--indigo); }
.consent label { font-size: 0.875rem; color: var(--muted); }
.form__note { font-size: 0.8125rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   9 Prose
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5rem; font-size: var(--fs-h3); }
.prose h3 { margin-top: 1.75rem; font-size: var(--fs-h4); }
.prose ul, .prose ol { padding-left: 1.25rem; margin-bottom: 1.05em; }
.prose li { margin-bottom: 0.4rem; }
.prose address { font-style: normal; }
.prose__meta {
  font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------------------
   10 Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .connect--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); align-items: stretch; }
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .feature__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature--flip .feature__media { order: -1; }
  .tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .cta__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .swap__head { display: grid; }
  .swap__head, .swap__row { grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  /* Kopfzeile um die Icon-Breite der Zeilen einrücken, damit die Spalten fluchten */
  .swap__head p:nth-child(2), .swap__head p:nth-child(3) { padding-left: 1.75rem; }
}

@media (min-width: 64em) {
  /* Drei Spalten: Marke | Navigation | Knöpfe – damit die Aktionen die
     Menüpunkte nicht überdecken, wenn beide Knöpfe rechts stehen. */
  .masthead__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    flex-wrap: nowrap;
  }
  .brand { margin-right: 0; grid-column: 1; font-size: 1rem; }
  .nav {
    margin: 0; min-width: 0; grid-column: 2; justify-self: end;
    max-width: 100%;
  }
  .nav__toggle { margin-left: 0; margin-right: 0; }
  .nav__list {
    flex-wrap: nowrap; justify-content: flex-end;
    gap: 0; max-width: 100%;
  }
  .nav__link {
    white-space: nowrap;
    padding: 0.4375rem 0.5rem;
    font-size: 0.8125rem;
  }
  .nav__sub a { padding: 0.4375rem 0.5rem; font-size: 0.8125rem; }
  .masthead__actions {
    grid-column: 3;
    gap: 0.375rem;
    padding-left: 0.75rem;
    margin-left: 0.125rem;
    border-left: 1px solid var(--line-soft);
  }
  .masthead .btn { flex: none; }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
  .split--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .split--text { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .tl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .tl__line {
    display: block; position: absolute; top: 3.9rem; left: 8%; right: 8%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 165, 36, 0.55) 15%,
                rgba(245, 165, 36, 0.55) 85%, transparent);
  }
  .pipe {
    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1.25fr) 3rem minmax(0, 1fr);
    gap: 0.5rem;
  }
}

/* Enger Desktop: Navigation noch kompakter, damit nichts abgeschnitten wird. */
@media (min-width: 64em) and (max-width: 86em) {
  .masthead__inner { column-gap: 0.5rem; }
  .brand { font-size: 0.9375rem; gap: 0.5rem; }
  .brand__mark { width: 28px; height: 28px; }
  .nav__link { padding-inline: 0.375rem; font-size: 0.75rem; }
  .nav__sub a { padding-inline: 0.375rem; font-size: 0.75rem; }
  .masthead__actions { padding-left: 0.5rem; gap: 0.25rem; }
  .masthead__actions .btn--sm { padding: 0.4375rem 0.625rem; font-size: 0.75rem; }
}

@media (min-width: 64em) {
  .pipe__rail { height: auto; width: 100%; }
  .rail {
    width: 100%; height: 3px;
    background-image: repeating-linear-gradient(90deg,
      var(--amber) 0 7px, rgba(245, 165, 36, 0.16) 7px 16px);
    background-size: 16px 100%;
    animation-name: railFlowH;
  }
  .rail__dot { animation-name: dotTravelH; }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   11 Motion
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 130, 0, 0.5); }
  55%      { box-shadow: 0 0 0 8px rgba(217, 130, 0, 0); }
}

.hero .paper tbody tr { animation: rowIn 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.hero .paper tbody tr:nth-child(1) { animation-delay: 0.10s; }
.hero .paper tbody tr:nth-child(2) { animation-delay: 0.18s; }
.hero .paper tbody tr:nth-child(3) { animation-delay: 0.26s; }
.hero .paper tbody tr:nth-child(4) { animation-delay: 0.34s; }
.hero .paper tbody tr:nth-child(5) { animation-delay: 0.42s; }
.hero .paper__foot { animation: rowIn 0.45s ease-out 0.54s both; }
.check__mark--open { animation: pulseRing 2.4s ease-out 0.8s 3; }
/* Zeitlich versetzt über unterschiedliche Dauern statt über Verzögerung plus
   fill-mode: so ist der Chip auch dann sichtbar, wenn Animationen ausfallen. */
/* Die Chips stehen fest – sie sollen den Blick auf die Karte lenken,
   nicht selbst in Bewegung bleiben. */

/* Scroll-Reveal – nur mit JavaScript aktiv */
.reveals .reveal { opacity: 0; transform: translateY(18px); }
.reveals .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveals .reveal-d1.is-in { transition-delay: 0.08s; }
.reveals .reveal-d2.is-in { transition-delay: 0.16s; }
.reveals .reveal-d3.is-in { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveals .reveal { opacity: 1; transform: none; }
}

/* Fallback ohne clamp() */
@supports not (width: clamp(1rem, 2vw, 3rem)) {
  :root {
    --pad: 4.5rem; --gap: 1.5rem; --fs-lead: 1.25rem;
    --fs-h3: 1.375rem; --fs-h2: 2.125rem; --fs-h1: 3rem;
  }
  .shell { padding-inline: 1.5rem; }
  .card, .compare__side { padding: 1.625rem; }
  .cta { padding: 2.75rem; }
  .hero { padding-block: 3.5rem 4.5rem; }
  .pagehead + .band--dark,
  .pagehead + .band--wash,
  .pagehead + .band--warm { margin-top: 2.75rem; }
  .band--wash + .band:not([class*="--"]),
  .band--warm + .band:not([class*="--"]) { padding-top: 3.25rem; }
}

@media print {
  .masthead, .footer, .cta, .skip-link, .hero__bg, .stage__glow, .shot__glow { display: none; }
  body { background: #fff; font-size: 11pt; }
  .band { padding-block: 1rem; }
  .band--dark { background: #fff; color: #000; }
}

/* ===========================================================================
   12. Preisseite
   Aufbau: Zahlweise-Schalter → drei Lizenzkarten → Positionsvergleich →
   Mandantenstaffel → Rechner → Premium als optionalen Zusatz.
   =========================================================================== */

/* 12.1 Zahlweise-Schalter -------------------------------------------------- */
.billing {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.3125rem; margin-inline: auto;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--sh-1);
}
.billing__btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 650; color: var(--muted);
  padding: 0.5rem 1.125rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background 0.18s ease, color 0.18s ease;
}
.billing__btn:hover { color: var(--text); }
.billing__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.billing__save {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  background: rgba(245, 165, 36, 0.18); color: var(--amber-deep);
}
.billing__btn[aria-pressed="true"] .billing__save { background: var(--amber); color: #14161a; }
.billing-hint {
  text-align: center; font-size: var(--fs-small); color: var(--muted);
  margin: 0.875rem auto 0; max-width: 34rem;
}

/* 12.2 Rollenwahl ----------------------------------------------------------
   Erste Entscheidung auf der Seite: Kanzlei oder Unternehmen. Danach stehen
   nur noch die Karten da, die den Fall betreffen. Ohne JavaScript bleibt der
   Schalter aus und alle drei Karten sind sichtbar. */
.rolle { display: grid; justify-items: center; gap: 0.75rem; margin-top: 2.25rem; }
html:not(.js) .rolle { display: none; }
.rolle__label {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
/* Zwei gleich breite Hälften statt einer Flex-Zeile: auf schmalen Schirmen
   rutschte die zweite Möglichkeit sonst unter die erste und der Schalter sah
   aus wie zwei gestapelte Knöpfe. */
.rolle__seg {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.375rem;
  width: 100%; max-width: min(26rem, 100%); min-width: 0;
  padding: 0.375rem; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--sh-1);
}
@media (min-width: 34em) { .rolle__seg { width: auto; } }
.rolle__btn {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  font-weight: 650; color: var(--muted); text-align: center; white-space: nowrap;
  min-width: 0;
  padding: 0.6875rem 1rem; border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}
@media (max-width: 23.99em) {
  .rolle__btn { font-size: 0.875rem; padding-inline: 0.5rem; }
}
@media (min-width: 34em) { .rolle__btn { padding: 0.6875rem 1.75rem; } }
.rolle__btn:hover { color: var(--text); }
.rolle__btn[aria-pressed="true"] {
  background: var(--ink); color: #fff; box-shadow: var(--sh-1);
}

/* 12.3 Lizenzkarten -------------------------------------------------------- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (min-width: 60em) {
  .plans { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  /* Bleiben nach der Rollenwahl zwei Karten übrig, sollen sie nicht auf die
     ganze Breite auseinanderlaufen. */
  .plans--paar { max-width: 58rem; margin-inline: auto; }
}
.plan {
  position: relative; display: flex; flex-direction: column; height: 100%;
  min-width: 0; max-width: 100%;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
/* Die Kanzlei ist der Regelfall – die Karte trägt deshalb die dunkle Fläche. */
.plan--featured {
  background:
    radial-gradient(14rem 14rem at calc(100% - 5rem) 2rem, rgba(245, 165, 36, 0.42), transparent 70%),
    var(--g-dark);
  border-color: transparent; color: var(--on-dark);
  box-shadow: var(--sh-2);
}
.plan--featured :where(h3, .plan__amount, .plan__setup strong) { color: #fff; }
.plan--featured :where(p, .plan__unit, .plan__note) { color: var(--on-dark-mut); }
.plan--featured .plan__list li { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.14); }
.plan--featured .plan__list li::before { background: rgba(245, 165, 36, 0.22); color: var(--amber); }
.plan__tag {
  position: absolute; top: 1.125rem; right: 1.125rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.6875rem; border-radius: 999px;
  background: var(--amber); color: #14161a;
}
.plan__tag--gratis {
  background: var(--green); color: #fff;
}
.plan__tag--inline {
  position: static;
  flex: none;
}
.plan--gratis .plan__amount { color: var(--green); }
.plan--gratis .plan__note { color: var(--green); font-weight: 650; }
.plan h3 { font-size: var(--fs-h3); margin: 0 0 0.375rem; padding-right: 8.75rem; }
.plan__for { font-size: var(--fs-small); margin: 0 0 1.25rem; min-height: 2.75rem; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4375rem; }
.plan__amount { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.plan__unit { font-size: var(--fs-small); color: var(--muted); }
.plan__note { font-size: var(--fs-small); color: var(--muted); margin: 0.4375rem 0 0; min-height: 1.5rem; }
/* Die Einrichtung ging als Randnotiz neben dem Monatspreis unter. Sie steht
   jetzt als eigene, farblich abgesetzte Zeile am Ende der Karte – dort, wo der
   Blick vor dem Knopf zuletzt hängt. */
.plan__inkl,
.plan__once {
  position: relative;
  padding: 0.8125rem 1rem;
  border-radius: var(--r-sm); font-size: var(--fs-small);
}
.plan__once {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.375rem 1rem;
}
.plan__inkl {
  display: grid; gap: 0.625rem;
  margin: 0 0 0.625rem;
  background: #e8fbf3; border: 1px solid rgba(23, 163, 74, 0.32);
}
.plan__inkl-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.375rem 1rem; margin: 0;
}
.plan__inkl-head span { color: var(--green); font-weight: 650; }
.plan__inkl-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.375rem;
}
.plan__inkl-list li {
  white-space: nowrap; padding: 0.25rem 0.625rem; border-radius: 999px;
  background: rgba(23, 163, 74, 0.12); color: var(--ink);
  font-size: 0.75rem; line-height: 1.45;
}
.plan--featured .plan__inkl {
  background: rgba(23, 163, 74, 0.2); border-color: rgba(110, 231, 160, 0.4);
}
.plan--featured .plan__inkl-head span { color: #8ef0b4; }
.plan--featured .plan__inkl-list li {
  background: rgba(255, 255, 255, 0.1); color: #e8fbf3;
}
.plan__once {
  margin: 0 0 1.5rem;
  background: var(--wash-warm); border: 1px solid rgba(245, 165, 36, 0.4);
}
.plan__once > span { color: var(--amber-deep); font-weight: 650; }
.plan__once b { font-variant-numeric: tabular-nums; font-weight: 700; }
.plan--featured .plan__once {
  background: rgba(245, 165, 36, 0.14); border-color: rgba(245, 165, 36, 0.45);
}
.plan--featured .plan__once > span { color: var(--amber); }
.plan--featured .plan__once b { color: #fff; }
.plan__list { list-style: none; margin: 1.125rem 0 1.375rem; padding: 0; display: grid; gap: 0.6875rem; }
.plan__list li {
  position: relative; padding-left: 1.875rem; font-size: var(--fs-small);
}
.plan__list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0.0625rem;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700;
  background: rgba(23, 163, 74, 0.14); color: var(--green);
}
.plan__list li[data-aus]::before { content: "\2013"; background: var(--line-soft); color: var(--muted); }
.plan .btn { margin-top: auto; justify-content: center; }

/* 12.4 Erklärungen an den Aufzählungspunkten -------------------------------
   Statt einer breiten Vergleichstabelle steht die Erklärung dort, wo die
   Behauptung steht. Die Blase öffnet bei Hover, bei Tastaturfokus und beim
   Antippen – auf dem Telefon gibt es kein Hover. */
.hint { position: static; }
/* Letztes Wort und Zeichen bleiben zusammen: ein geschütztes Leerzeichen allein
   reicht nicht, Browser brechen trotzdem vor dem Zeichen um. */
.nowrap { white-space: nowrap; }
.nowrap .hint__bubble { white-space: normal; }
.hint__btn {
  appearance: none; cursor: pointer; padding: 0; margin-left: 0.125rem;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  border: 1.5px solid currentColor; background: none; color: var(--muted);
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
  display: inline-grid; place-items: center;
  /* Mitte des Zeichens auf die Mitte der Textzeile: „middle" allein legt es an
     die Grundlinie plus halbe x-Höhe und sitzt dadurch noch etwas zu tief. */
  vertical-align: middle; position: relative; top: -0.1em;
  transition: color 0.16s ease, background 0.16s ease;
}
.hint__btn:hover, .hint__btn[aria-expanded="true"] {
  color: var(--indigo); background: rgba(76, 110, 245, 0.1);
}
.plan--featured .hint__btn { color: var(--on-dark-mut); }
.plan--featured .hint__btn:hover,
.plan--featured .hint__btn[aria-expanded="true"] {
  color: var(--amber); background: rgba(245, 165, 36, 0.16);
}

/* Die Blase spannt über die Breite des Listenpunkts – so kann sie seitlich
   nicht aus der Karte laufen, egal wo im Text das Zeichen steht. */
.hint__bubble {
  position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 0.4375rem);
  padding: 0.75rem 0.875rem; border-radius: var(--r-sm);
  background: var(--ink); color: var(--on-dark);
  font-size: 0.8125rem; line-height: 1.5; font-weight: 400; text-align: left;
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transform: translateY(-0.25rem);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  /* Die Blase liegt über den folgenden Punkten. Ohne dies fängt sie deren
     Klicks ab und man kommt an das nächste Zeichen nicht heran. */
  pointer-events: none;
}
/* Auf der dunklen Karte hebt sich eine helle Blase besser ab als eine weitere
   dunkle Fläche. */
.plan--featured .hint__bubble { background: #fff; color: var(--text); }
.hint__bubble--links { left: auto; right: 0; width: min(20rem, 100%); }
.hint:hover .hint__bubble,
.hint__btn:focus-visible + .hint__bubble,
.hint__btn[aria-expanded="true"] + .hint__bubble {
  opacity: 1; visibility: visible; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .hint__bubble { transition: none; transform: none; }
}
/* Auf Zeigergeräten ohne Hover (Touch) nur über das Antippen öffnen */
@media (hover: none) {
  .hint:hover .hint__bubble { opacity: 0; visibility: hidden; }
  .hint__btn[aria-expanded="true"] + .hint__bubble { opacity: 1; visibility: visible; }
}

/* 12.5 Mandantenstaffel ---------------------------------------------------- */
.tiers { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.tiers li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1rem; padding: 0.9375rem 1.125rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.tiers b { font-variant-numeric: tabular-nums; }
.tiers span { color: var(--muted); font-size: var(--fs-small); }
.tiers strong { font-size: 1.0625rem; }

/* 12.6 Rechner ------------------------------------------------------------- */
/* Eine zusammenhängende Karte: links die Einstellungen auf kühlem Wash, rechts
   die dunkle Summe. So liest es sich als ein Werkzeug, nicht als zwei Kästen. */
.calc {
  display: grid; gap: 0; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-2); overflow: hidden;
}
@media (min-width: 62em) {
  .calc { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}
.calc__panel {
  display: grid; gap: 0.75rem; align-content: start;
  padding: clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
  background:
    radial-gradient(18rem 14rem at 0% 0%, rgba(76, 110, 245, 0.08), transparent 70%),
    var(--wash);
}
@media (min-width: 62em) {
  .calc__panel {
    grid-template-columns: 1fr 1fr;
    padding: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  }
  .calc__row--breit { grid-column: 1 / -1; }
  /* Ohne Mandanten/Onboarding bleibt die Zahlweise sonst als halbe Karte stehen. */
  .calc__panel:has([data-nur-kanzlei][hidden]) .calc__row { grid-column: 1 / -1; }
}
/* Jede Einstellung sitzt in einer eigenen weißen Fläche – wie Karten in der App,
   nicht als lange Liste mit Haarlinien. */
.calc__row {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.125rem 1.25rem 1.25rem;
  box-shadow: 0 1px 2px rgba(13, 20, 36, 0.03);
}
@media (min-width: 62em) {
  .calc__row:not(.calc__row--breit) { height: 100%; }
}

/* Was im Preis steckt – füllt die Ergebnisbox und erinnert daran, wofür die
   Summe steht. */
.calc__inkl { margin-top: 1.375rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.calc__inkl > span {
  display: block; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--amber); margin-bottom: 0.625rem;
}
.calc__inkl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4375rem; }
.calc__inkl li {
  position: relative; padding-left: 1.25rem; font-size: var(--fs-small); color: var(--on-dark-mut);
}
.calc__inkl li::before {
  content: "\2713"; position: absolute; left: 0; top: 0; color: var(--amber); font-size: 0.75rem;
}
.calc__head { margin-bottom: 0.875rem; }
.calc__head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
}
.calc__label { display: block; font-weight: 700; letter-spacing: -0.012em; margin: 0; }
.calc__help {
  display: block; font-size: 0.8125rem; line-height: 1.45;
  color: var(--muted); margin: 0.3125rem 0 0;
}
.calc__value {
  font-variant-numeric: tabular-nums; font-weight: 800;
  font-size: 1.25rem; letter-spacing: -0.03em; line-height: 1.2;
  color: var(--indigo); background: rgba(76, 110, 245, 0.1);
  padding: 0.1875rem 0.75rem; border-radius: 999px; white-space: nowrap;
}

/* Segment-Schalter: dieselbe Spur wie Rolle und Zahlweise oben auf der Seite. */
.calc__seg {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem; padding: 0.3125rem; margin-top: auto;
  background: var(--wash); border: 1px solid var(--line); border-radius: 999px;
}
.calc__seg--vier {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--r-sm);
}
@media (min-width: 40em) {
  .calc__seg--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 999px; }
}
.calc__seg button {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  font: inherit; font-size: var(--fs-small); font-weight: 650; color: var(--muted);
  padding: 0.625rem 0.75rem; border-radius: 999px; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.calc__seg button:hover { color: var(--text); }
.calc__seg button[aria-pressed="true"] {
  background: var(--ink); color: #fff; box-shadow: var(--sh-1);
}
.calc__save {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.125rem 0.4375rem; border-radius: 999px;
  background: rgba(245, 165, 36, 0.2); color: var(--amber-deep);
}
.calc__seg button[aria-pressed="true"] .calc__save {
  background: var(--amber); color: #14161a;
}

.calc__stepper {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.3125rem; margin-top: auto; align-self: flex-start;
  background: var(--wash); border: 1px solid var(--line); border-radius: 999px;
}
.calc__stepper button {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; cursor: pointer;
  border: 0; background: #fff; color: var(--text); box-shadow: var(--sh-1);
  font-size: 1.125rem; line-height: 1; display: grid; place-items: center;
  transition: background 0.16s ease, color 0.16s ease;
}
.calc__stepper button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.calc__stepper button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.calc__stepper output {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.25rem;
  min-width: 2.25rem; text-align: center; letter-spacing: -0.02em;
}

/* Schieberegler: eigene Spur und Daumen, Füllstand über --fill aus JS. */
.calc__slider { padding: 0.375rem 0.25rem 0.125rem; }
.calc__range {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 1.375rem; margin: 0; background: transparent; cursor: pointer;
}
.calc__range::-webkit-slider-runnable-track {
  height: 0.5rem; border-radius: 999px; border: 0;
  background: linear-gradient(to right, var(--indigo) var(--fill, 0%), #d9e0f2 var(--fill, 0%));
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.375rem; height: 1.375rem; margin-top: -0.4375rem;
  border-radius: 50%; background: #fff; border: 3px solid var(--indigo);
  box-shadow: 0 2px 8px rgba(76, 110, 245, 0.35);
}
.calc__range::-moz-range-track {
  height: 0.5rem; border-radius: 999px; border: 0;
  background: #d9e0f2;
}
.calc__range::-moz-range-progress {
  height: 0.5rem; border-radius: 999px; background: var(--indigo);
}
.calc__range::-moz-range-thumb {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #fff; border: 3px solid var(--indigo);
  box-shadow: 0 2px 8px rgba(76, 110, 245, 0.35);
}
.calc__range:focus-visible { outline: none; }
.calc__range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--indigo); outline-offset: 2px; }
.calc__range:focus-visible::-moz-range-thumb { outline: 3px solid var(--indigo); outline-offset: 2px; }

/* Sprünge auf die Grenzen, an denen sich der Satz ändert – mit dem Regler
   allein trifft man 51 oder 21 nur mit Mühe. */
.calc__jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  margin-top: 0.875rem; padding-top: 0.875rem;
  border-top: 1px dashed var(--line);
}
.calc__jump-label {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-right: 0.125rem;
}
.calc__jump button {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 650;
  padding: 0.3125rem 0.6875rem; border-radius: 999px; border: 0;
  background: var(--wash); color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.calc__jump button:hover { color: var(--text); background: #e8eefc; }
.calc__jump button[aria-pressed="true"] {
  background: var(--ink); color: #fff; box-shadow: var(--sh-1);
}

.calc__scale {
  display: flex; justify-content: space-between;
  font-size: 0.6875rem; color: var(--muted); margin-top: 0.375rem;
  font-variant-numeric: tabular-nums; padding-inline: 0.125rem;
}

/* Ergebnis: dunkle Fläche, damit die Summe der Blickfang bleibt */
.calc__out {
  background:
    radial-gradient(13rem 13rem at calc(100% - 4rem) 1rem, rgba(245, 165, 36, 0.34), transparent 70%),
    var(--g-dark);
  color: var(--on-dark); border-radius: 0;
  padding: clamp(1.375rem, 1.1rem + 1vw, 2rem);
}
.calc__out { display: flex; flex-direction: column; }
.calc__out .calc__sum { margin-top: auto; }
.calc__out h3 { color: #fff; font-size: var(--fs-h4); margin: 0 0 0.375rem; }
.calc__unit {
  margin: 0 0 1.125rem; font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--on-dark-mut);
}
.calc__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6875rem; }
.calc__items li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-small); }
.calc__items li span { color: var(--on-dark-mut); }
.calc__items li b { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.calc__items li.ist-nachlass b { color: var(--amber); }
.calc__sum {
  margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.calc__sum span { color: var(--on-dark-mut); font-size: var(--fs-small); }
.calc__total { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.calc__year { margin: 0.5rem 0 0; font-size: var(--fs-small); color: var(--on-dark-mut); }
.calc__once {
  margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-small);
}
.calc__once b { color: #fff; font-variant-numeric: tabular-nums; }
.calc__out .btn { width: 100%; justify-content: center; margin-top: 1.375rem; }
.calc__disclaimer { font-size: var(--fs-label); color: var(--on-dark-mut); margin: 0.875rem 0 0; }

/* Oberhalb der obersten Stufe: kein Preis, sondern ein Gesprächsangebot mit
   Kontaktfeld. Die Felder stehen auf dunklem Grund, deshalb eigene Farben. */
.calc__solo { margin-top: auto; padding-top: 1.5rem; }
.calc__solo > p { color: var(--on-dark); font-size: var(--fs-small); margin: 0 0 1.25rem; }
.calc__form { display: grid; gap: 1rem; }
.calc__felder { display: grid; gap: 0.375rem; }
.calc__felder label {
  font-size: var(--fs-small); font-weight: 620; color: var(--on-dark);
}
.calc__felder label + input { margin-bottom: 0.5rem; }
.calc__felder label span { font-weight: 400; color: var(--on-dark-mut); }
.calc__form .input {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.calc__form .input::placeholder { color: var(--on-dark-mut); }
.calc__form .input:hover { border-color: rgba(255, 255, 255, 0.4); }
.calc__form .input:focus {
  border-color: var(--amber); box-shadow: 0 0 0 4px rgba(245, 165, 36, 0.2);
  background: rgba(255, 255, 255, 0.12);
}
.calc__check { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem; align-items: start; }
.calc__check input { margin-top: 0.1875rem; width: 1.125rem; height: 1.125rem; accent-color: var(--amber); }
.calc__check label { font-size: 0.8125rem; color: var(--on-dark-mut); }
.calc__check a { color: #fff; }
.calc__form .btn { width: 100%; justify-content: center; }

/* 12.7 Übergang von der Lizenz zum Zusatz ----------------------------------
   Lizenzkarten und Premium stehen auf demselben Grund und werden von
   einer Linie mit einem Plus-Knoten verbunden – so liest es sich als Rechnung
   „Lizenz + optional Premium" statt als zwei getrennte Abschnitte. */
.band--vor-anschluss { padding-bottom: 0; }
.band--anschluss { padding-top: 0; background: transparent; }
.joiner {
  display: grid; justify-items: center;
  margin: 0 auto clamp(1rem, 0.7rem + 1vw, 1.5rem);
}
.joiner__linie {
  width: 1px; height: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  background: linear-gradient(to bottom, transparent, var(--line));
}
.joiner__linie--unten { background: linear-gradient(to bottom, var(--line), transparent); }
.joiner__knoten {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line);
  color: var(--amber-deep); font-size: 1.25rem; font-weight: 400; line-height: 1;
  box-shadow: 0 10px 24px -14px rgba(16, 20, 40, 0.55), 0 0 0 6px rgba(245, 165, 36, 0.07);
}
.mitte { text-align: center; }
.mitte .measure { margin-inline: auto; }

.addon-chip {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.3125rem 0.8125rem; margin-bottom: 0.875rem; border-radius: 999px;
  background: rgba(245, 165, 36, 0.14); color: var(--amber-deep);
  border: 1px solid rgba(245, 165, 36, 0.35);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}


/* 12.8 Premium-Zusatz ------------------------------------------------------
   Eine Karte, zentriert – nicht als Rest-Spalte in einem 3er-Grid. */
.svc { display: grid; gap: var(--gap); }
.svc--solo { max-width: 26rem; margin-inline: auto; }
@media (min-width: 58em) {
  .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc--solo { grid-template-columns: minmax(0, 1fr); }
}
.svc__card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.svc__card--pick { border-color: rgba(245, 165, 36, 0.55); box-shadow: var(--sh-2); }
.svc__tag {
  position: absolute; top: 1.125rem; right: 1.125rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.6875rem; border-radius: 999px;
  background: var(--amber); color: #14161a;
}
.svc__card h3 { font-size: var(--fs-h4); margin: 0 0 0.25rem; }
/* Feste Mindesthöhen, damit Preis und Kennzahlen über die drei Karten hinweg
   auf einer Linie liegen, auch wenn ein Text umbricht. */
.svc__for { font-size: var(--fs-small); color: var(--muted); margin: 0; line-height: 1.45; }
@media (min-width: 58em) {
  .svc__for { min-height: 2.7em; }
  .svc--solo .svc__for { min-height: 0; }
}
.svc__price {
  display: flex; align-items: baseline; gap: 0.4375rem;
  margin: 1.125rem 0 1.375rem; padding-bottom: 1.375rem;
  border-bottom: 1px solid var(--line-soft);
}
.svc__price b { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.svc__price span { font-size: var(--fs-small); color: var(--muted); }
.svc__metrics {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;
}
.svc__metrics li { display: grid; gap: 0.125rem; }
.svc__metrics b {
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.svc__metrics span { font-size: 0.75rem; line-height: 1.35; color: var(--muted); }
.svc__list {
  list-style: none; margin: 1.125rem 0 0; padding: 0;
  display: grid; gap: 0.5625rem;
}
.svc__list li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.8125rem; line-height: 1.45; color: var(--ink);
}
.svc__list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0.0625rem;
  width: 1.0625rem; height: 1.0625rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.5625rem; font-weight: 700;
  background: rgba(23, 163, 74, 0.14); color: var(--green);
}
/* Merkmale als kleine Marken statt als Aufzählung mit Trennpunkten: keine
   Angabe bricht mitten im Wort um, und beim Umbruch rutscht kein Punkt an den
   Zeilenanfang. */
.svc__meta {
  list-style: none; margin: 1.125rem 0 1.375rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.375rem;
}
.svc__meta li {
  white-space: nowrap; padding: 0.25rem 0.625rem; border-radius: 999px;
  background: var(--wash); color: var(--muted);
  font-size: 0.75rem; line-height: 1.45;
}
.svc__fuss {
  margin: 1.75rem 0 0; font-size: var(--fs-small); color: var(--muted); text-wrap: pretty;
}
.svc__card .btn { margin-top: auto; justify-content: center; }

/* --------------------------------------------------------------------------
   Datenschutz-Hinweis (Transparenz, kein Tracking-Consent)
   -------------------------------------------------------------------------- */
.privacy-notice {
  position: fixed;
  inset: auto 0 0;
  z-index: 120;
  padding: 0 0 clamp(0.75rem, 0.3rem + 1vw, 1.125rem);
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(100% + 0.5rem));
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .privacy-notice { transition: opacity 0.15s ease; transform: none; }
}
.privacy-notice.is-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.privacy-notice__inner {
  display: flex;
  align-items: center;
  gap: 0.875rem 1.25rem;
  max-width: min(44rem, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 0.625rem 0.625rem 0.625rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(230, 234, 244, 0.92);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 32px -12px rgba(13, 20, 36, 0.14),
              0 0 0 1px rgba(255, 255, 255, 0.55) inset;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.privacy-notice__text {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.privacy-notice__copy {
  flex: 1;
  min-width: 0;
}
.privacy-notice__text a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-color: rgba(76, 110, 245, 0.32);
}
.privacy-notice__text a:hover { text-decoration-color: var(--indigo); }
.privacy-notice__icon {
  flex-shrink: 0;
  display: flex;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.0625rem;
  color: var(--teal-deep);
}
.privacy-notice__icon svg { width: 100%; height: 100%; }
.privacy-notice__close {
  flex-shrink: 0;
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: none;
}
.footer__linkbtn {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  opacity: 0.72;
}
.footer__linkbtn:hover { color: var(--on-dark); opacity: 1; }
@media (max-width: 640px) {
  .privacy-notice__inner {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--r-md);
    max-width: calc(100% - 1rem);
    padding: 0.875rem 1rem;
  }
  .privacy-notice__close { align-self: flex-end; }
}

/* ===========================================================================
   13. Produktseite (funktionen.html)
   Hero mit Prozesslinie → Vergleich → Apps mit Demo → Perspektiven →
   QuickClear → Finanzcockpit → Abschlagskette → Plattform → Konfigurator →
   Bundles → DATEV. Ohne JavaScript stehen alle Demos und beide Perspektiven
   untereinander; das Skript blendet dann jeweils eine davon ein.
   =========================================================================== */

/* 13.1 Hero ---------------------------------------------------------------- */
.produkt-hero h1 { max-width: 20ch; }
.nutzen {
  list-style: none; margin: 2.75rem 0 0; padding: 0;
  display: grid; gap: 1.25rem;
}
.nutzen__col { padding-top: 1rem; border-top: 1px solid var(--line); }
.nutzen__label {
  margin: 0 0 0.625rem; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.nutzen .checklist li { font-size: var(--fs-small); }

.prozess {
  margin: 2.75rem 0 0; padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.prozess__rail { display: grid; gap: 2rem; align-items: center; }
.prozess__end {
  display: grid; justify-items: center; gap: 0.25rem; text-align: center;
}
.prozess__end strong { font-size: 1.0625rem; }
.prozess__end small { font-size: 0.8125rem; color: var(--muted); }
.prozess__icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.25rem;
  border-radius: 50%; background: #eef2ff; color: var(--indigo-deep);
}
.prozess__icon svg { width: 1.375rem; height: 1.375rem; }
.prozess__end--datev .prozess__icon { background: #e9f8ef; color: var(--green); }
.prozess__hub {
  position: relative; padding: 1.25rem; border-radius: var(--r-md);
  background:
    radial-gradient(12rem 8rem at 100% 0, rgba(245, 165, 36, 0.28), transparent 70%),
    var(--g-dark);
  box-shadow: var(--sh-glow);
}
.prozess__name {
  margin: 0 0 0.875rem; text-align: center; font-size: 1.125rem;
  font-weight: 750; letter-spacing: -0.02em; color: var(--text);
}
.prozess__hub .prozess__name { color: #fff; }
.prozess__steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
.prozess__steps li {
  font-size: 0.8125rem; font-weight: 620; color: var(--on-dark);
  padding: 0.375rem 0.8125rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  animation: stepGlow 6s ease-in-out infinite;
}
.prozess__steps li:nth-child(2) { animation-delay: 1s; }
.prozess__steps li:nth-child(3) { animation-delay: 2s; }
.prozess__steps li:nth-child(4) { animation-delay: 3s; }
.prozess__steps li:nth-child(5) { animation-delay: 4s; }
.prozess__steps li:nth-child(6) { animation-delay: 5s; }
/* Verbindungen Mandant → Hub → DATEV: senkrecht auf dem Handy, waagerecht ab Desktop */
.prozess__hub::before, .prozess__hub::after {
  content: ""; position: absolute; left: 50%; width: 2px; height: 2rem;
  background-image: repeating-linear-gradient(180deg, var(--amber) 0 6px, transparent 6px 12px);
  background-size: 2px 12px;
  animation: flowV 0.9s linear infinite;
}
.prozess__hub::before { top: -2rem; }
.prozess__hub::after { bottom: -2rem; }
.prozess figcaption {
  margin-top: 1.5rem; text-align: center; font-size: var(--fs-small); color: var(--muted);
}

@keyframes stepGlow {
  0%, 22%, 100% { background: rgba(255, 255, 255, 0.08); color: var(--on-dark); border-color: rgba(255, 255, 255, 0.14); }
  6%, 15%       { background: var(--amber); color: #2b1a00; border-color: transparent; }
}
@keyframes flowV { to { background-position: 0 12px; } }
@keyframes flowH { to { background-position: 12px 0; } }

/* 13.2 Vergleich Heute / Mit Kanzlei Hub ------------------------------------ */
.vergleich { display: grid; gap: var(--gap); margin-top: 2.5rem; }
.vergleich__seite {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.375rem, 1rem + 1.2vw, 2.25rem); box-shadow: var(--sh-1);
}
.vergleich__seite--neu {
  border-color: rgba(15, 181, 166, 0.45);
  box-shadow: 0 0 0 4px rgba(15, 181, 166, 0.08), var(--sh-2);
}
.vergleich__label {
  margin: 0 0 1rem; font-family: var(--mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose);
}
.vergleich__seite--neu .vergleich__label { color: var(--teal-deep); }
.vergleich__liste { list-style: none; margin: 0; padding: 0; }
.vergleich__liste li {
  position: relative; padding: 0.4375rem 0 0.4375rem 1.75rem; font-size: var(--fs-small);
}
.vergleich__liste li::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.875rem;
  width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #c3c9db;
}
.vergleich__liste li:not(:last-child)::after {
  content: ""; position: absolute; left: 0.5rem; top: 1.5rem; bottom: -0.375rem;
  width: 2px; margin-left: -1px; background: var(--line);
}
.vergleich__liste .ist-schmerz::before { background: var(--rose); }
.vergleich__seite--neu .vergleich__liste li::before { background: var(--teal); }
.vergleich__seite--neu .vergleich__liste .ist-mensch { font-weight: 660; }
.vergleich__seite--neu .vergleich__liste .ist-mensch::before {
  background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 165, 36, 0.22);
}

/* 13.2b Lernschleife ------------------------------------------------------- */
.lern { margin: 2.5rem 0 0; }
.lern__board {
  padding: clamp(1.125rem, 0.8rem + 1.4vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background-color: #fff;
  background-image: radial-gradient(rgba(76, 110, 245, 0.16) 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: var(--sh-2);
}
.lern__chart { display: grid; gap: 0.875rem; }
.lern__phase {
  margin: 0; font-family: var(--mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.lern__phase--lernen { margin-top: 0.75rem; }
.lern__phase--anwenden { margin-top: 0.75rem; }
.lern__node,
.lern__out {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.lern__node { padding: 1.125rem 1.25rem 1.25rem; }
.lern__ico {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem;
  border-radius: 50%;
}
.lern__ico svg { width: 1.25rem; height: 1.25rem; }
.lern__node--team .lern__ico { background: #fff4e3; color: var(--amber-deep); }
.lern__node--datev .lern__ico { background: #e9f8ef; color: #0e8a44; }
.lern__kicker {
  margin: 0; font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.lern__node--team .lern__kicker { color: var(--amber-deep); }
.lern__node--datev .lern__kicker { color: #0e8a44; }
.lern__node h3 { margin: 0.3rem 0 0.4rem; font-size: 1.125rem; }
.lern__node p:last-child { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.lern__kern {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; gap: 0.35rem;
  padding: 1.5rem 1.25rem; border-radius: var(--r-md); color: #fff;
  background:
    radial-gradient(12rem 9rem at 100% 0, rgba(245, 165, 36, 0.32), transparent 68%),
    var(--g-dark);
  box-shadow: var(--sh-glow);
}
.lern__orb {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 0.35rem;
  border-radius: 50%; color: #2b1a00; background: var(--g-amber);
  box-shadow: 0 0 0 6px rgba(245, 165, 36, 0.18);
}
.lern__orb svg { width: 1.35rem; height: 1.35rem; }
.lern__kern-kicker {
  margin: 0; font-family: var(--mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
}
.lern__kern-title {
  margin: 0 0 0.65rem; max-width: 16ch; font-size: 1.25rem; font-weight: 750;
  letter-spacing: -0.02em; line-height: 1.25; color: #fff;
}
.lern__tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem;
  list-style: none; margin: 0; padding: 0;
}
.lern__tags li {
  font-size: 0.75rem; font-weight: 620; color: var(--on-dark);
  padding: 0.3rem 0.65rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
}
.lern__out { padding: 0.5rem 1.15rem; }
.lern__out ol { list-style: none; margin: 0; padding: 0; }
.lern__out li {
  position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.75rem; align-items: start; padding: 0.85rem 0;
}
.lern__out li:not(:last-child) { border-bottom: 1px solid var(--line-soft); }
.lern__num {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--wash); color: var(--indigo-deep); font-size: 0.8125rem; font-weight: 750;
}
.lern__out .is-result .lern__num { background: var(--g-amber); color: #2b1a00; }
.lern__out strong { display: block; font-size: 0.9375rem; line-height: 1.35; }
.lern__out li div > span { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.lern__return {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: 0.25rem 0 0; padding: 0.7rem 1rem; border-radius: 999px;
  background: #fff6ea; color: var(--amber-deep); font-size: 0.875rem; font-weight: 650;
}
.lern__back { display: none; }
.lern figcaption {
  margin: 1rem 0 0; text-align: center; font-size: var(--fs-small); color: var(--muted);
}

/* 13.3 App-Karten ---------------------------------------------------------- */
.apps { display: grid; gap: var(--gap); margin-top: 2.5rem; }
.app {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); box-shadow: var(--sh-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}
.app:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: #d8e0f5; }
.app.is-active {
  border-color: rgba(245, 165, 36, 0.8);
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.2), var(--sh-2);
}
.app__head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.875rem; }
.app__head h3 { margin: 0; font-size: 1.25rem; }
.app__claim { margin: 0 0 0.375rem; font-weight: 650; line-height: 1.4; }
.app__desc { margin: 0 0 1.125rem; font-size: var(--fs-small); color: var(--muted); }
.app__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
  margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line-soft);
}
.app__facts dt {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.app__facts dd { margin: 0.125rem 0 0; font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.app__more {
  margin-top: 1.125rem; font-size: var(--fs-small); font-weight: 650;
  color: var(--indigo-deep); text-decoration: none;
}
.app__more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.app__more span { display: inline-block; transition: transform 0.2s ease; }
.app:hover .app__more span { transform: translateX(4px); }

/* 13.4 Modul-Demo ---------------------------------------------------------- */
.appdemo { margin-top: 2rem; display: grid; gap: 1rem; }
.appdemo__panel {
  display: grid; gap: 1.75rem; scroll-margin-top: 6rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-xl);
  color: var(--on-dark);
  background:
    radial-gradient(18rem 14rem at calc(100% - 6rem) 0, rgba(245, 165, 36, 0.24), transparent 70%),
    radial-gradient(16rem 14rem at 0 100%, rgba(108, 99, 255, 0.28), transparent 70%),
    var(--g-dark);
}
.appdemo__tag {
  display: block; margin-bottom: 0.625rem; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
}
.appdemo__intro h3 { color: #fff; font-size: var(--fs-h3); }
.appdemo__intro p { color: var(--on-dark-mut); font-size: var(--fs-small); }

.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: schritt; }
.ablauf > li { position: relative; display: flex; flex-direction: column; gap: 0.625rem; counter-increment: schritt; }
.ablauf__step {
  display: flex; align-items: flex-start; gap: 0.5rem; margin: 0;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: var(--on-dark-mut);
}
.ablauf__step::before {
  content: counter(schritt); flex: none; display: grid; place-items: center;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--g-amber); color: #2b1a00; font-size: 0.75rem; font-weight: 750;
}
.appdemo__stage { display: grid; gap: 1rem; align-items: start; }

.mock {
  flex: 1; background: #fff; color: var(--text); border-radius: var(--r-sm);
  padding: 0.875rem 1rem; box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.7);
  font-size: 0.875rem; line-height: 1.45;
  min-height: 4.5rem; display: flex; flex-direction: column; justify-content: center;
}
.mock p { margin: 0; }
.mock__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.mock__amt { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.mock__amt--neg { color: #c42a55; }
.mock__mono { font-family: var(--mono); font-size: 0.8125rem; }
.mock__sub { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.mock__checks, .mock__lines { list-style: none; margin: 0; padding: 0; }
.mock__checks li { position: relative; padding: 0.125rem 0 0.125rem 1.375rem; }
.mock__checks li::before { position: absolute; left: 0; font-weight: 800; }
.mock__checks .ok::before { content: "✓"; color: var(--green); }
.mock__checks .warn { color: var(--amber-deep); font-weight: 650; }
.mock__checks .warn::before { content: "!"; left: 0.25rem; color: var(--amber-deep); }
.mock__lines li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.125rem 0; font-size: 0.8125rem; }
.mock__lines b { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.mock__q { font-weight: 650; }
.mock__a {
  margin-top: 0.5rem !important; padding: 0.5rem 0.625rem; border-radius: 8px;
  background: var(--wash); color: var(--muted); font-size: 0.8125rem;
}
.mock--done { border: 1px solid rgba(23, 163, 74, 0.4); background: linear-gradient(180deg, #effbf3, #fff); }
.mock__ok { color: var(--green); font-weight: 750; font-size: 0.8125rem; white-space: nowrap; }
.mock__conf { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.625rem !important; }
.mock__conf span {
  flex: 1; height: 6px; border-radius: 999px; background-color: var(--line);
  background-image: var(--g-teal); background-size: var(--w) 100%; background-repeat: no-repeat;
}
.mock__conf b { font-size: 0.75rem; color: var(--teal-deep); white-space: nowrap; }
.mock__btn {
  display: inline-flex; align-items: center; padding: 0.5rem 0.9375rem; border-radius: 999px;
  background: var(--g-amber); color: #2b1a00; font-size: 0.8125rem; font-weight: 650;
  text-decoration: none; white-space: nowrap;
}
.mock__btn--ghost { background: #fff; color: var(--text); border: 1px solid var(--line); }
.mock__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.125rem; }
.mock--hero { padding: 1.375rem 1.5rem; }
.mock--hero .mock__row strong { font-size: 1.0625rem; }
.mock__badge {
  display: inline-block; margin-bottom: 0.75rem !important; padding: 0.25rem 0.6875rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 700;
}
.mock__badge--warn { background: #fff1dc; color: var(--amber-deep); }
.mock__text { margin-top: 0.5rem !important; color: var(--muted); font-size: 0.9375rem; }
.mock__big {
  font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; color: #c42a55;
}
.mock__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mock__list li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem; border-radius: var(--r-sm); font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.mock__list b { font-family: var(--mono); font-weight: 600; color: #fff; white-space: nowrap; }
.mock__list--big li { background: #fff; color: var(--text); border-color: transparent; }
.mock__list--big b { color: var(--text); }
.mock__list--big strong, .mock__list--big small { display: block; }
.mock__list--big small { font-size: 0.8125rem; color: var(--muted); }
.mock__list--big .is-warn { box-shadow: inset 0 0 0 2px var(--amber); }
.mock__list--big .is-warn b, .mock__list--big .is-warn small { color: var(--amber-deep); }
.bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 7rem; margin-top: 0.875rem; }
.bars span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: #dfe5f5; }
.bars .is-hot { background: var(--g-rose); }

.kette__bar {
  display: flex; height: 0.625rem; margin: 0.875rem 0 0.5rem; overflow: hidden;
  border-radius: 999px; background: var(--line);
}
.kette__bar span { width: var(--w); }
.kette__bar .is-paid { background: var(--g-green); }
.kette__bar .is-open { background: var(--g-amber); }

/* Nur mit Skript: eine Demo sichtbar, Schritte laufen nacheinander ein */
.appdemo__panel.is-open .ablauf > li,
.appdemo__panel.is-open .appdemo__stage > * { animation: rowIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.appdemo__panel.is-open .ablauf > li:nth-child(2),
.appdemo__panel.is-open .appdemo__stage > :nth-child(2) { animation-delay: 0.3s; }
.appdemo__panel.is-open .ablauf > li:nth-child(3) { animation-delay: 0.6s; }
.appdemo__panel.is-open .ablauf > li:nth-child(4) { animation-delay: 0.9s; }

/* 13.5 Zwei Perspektiven --------------------------------------------------- */
.sicht { margin-top: 2.5rem; }
.sicht + .sicht { margin-top: 3rem; }
.sicht__grid { display: grid; gap: 2rem; align-items: center; }
.sicht__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.sicht__list li {
  padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--indigo); border-radius: var(--r-sm); scroll-margin-top: 6rem;
}
.sicht__list h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; }
.sicht__list p { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.sicht__statement {
  margin: 0 0 0.875rem; font-size: var(--fs-h3); font-weight: 750;
  line-height: 1.25; letter-spacing: -0.02em;
}
.sicht__sub { color: var(--muted); }
.sicht__apps-label {
  margin: 1.75rem 0 0.625rem; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}

.screen {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2), var(--sh-glow); overflow: hidden;
}
.screen__bar {
  display: flex; align-items: center; gap: 0.375rem; padding: 0.75rem 1rem;
  background: #f7f9fe; border-bottom: 1px solid var(--line);
}
.screen__bar span { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #d9deeb; }
.screen__bar p { margin: 0 0 0 0.625rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.screen__body { display: grid; gap: 1rem; padding: 1.25rem; }
.screen__body p { margin: 0; }
.screen__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.screen__kpis p { padding: 0.875rem; border-radius: var(--r-sm); background: var(--wash); }
.screen__kpis b { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.screen__kpis small { font-size: 0.75rem; color: var(--muted); }
.screen__kpis .is-focus { background: var(--g-amber); }
.screen__kpis .is-focus b { color: #2b1a00; }
.screen__kpis .is-focus small { color: #5a3a00; }
.screen__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.screen__rows li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; align-items: center;
  padding: 0.75rem 0.875rem; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  font-size: 0.875rem; font-weight: 620;
}
.screen__rows small { grid-column: 2; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.dot { grid-row: span 2; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; }
.dot--rose { background: var(--rose); }
.dot--amber { background: var(--amber); }
.screen__hello { font-size: 1.375rem; font-weight: 750; letter-spacing: -0.02em; }
.screen__attention {
  padding: 0.875rem 1rem; border-radius: var(--r-sm);
  background: #fff4e3; border: 1px solid rgba(245, 165, 36, 0.4);
}
.screen__attention p { margin-bottom: 0.375rem; font-size: 0.9375rem; }
.screen__attention ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; }
.screen__attention li { font-size: 0.875rem; color: var(--amber-deep); font-weight: 600; }
.screen__attention li::before { content: "• "; }
.screen__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.screen__tiles p { padding: 0.875rem; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.screen__tiles small { display: block; font-size: 0.75rem; color: var(--muted); }
.screen__tiles b { font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; }
.screen__tiles p:first-child b { color: var(--green); }

/* 13.6 QuickClear ---------------------------------------------------------- */
.qc { display: grid; gap: 1rem; margin-top: 2.5rem; align-items: stretch; }
.qc__progress, .qc__meta {
  padding: 1.25rem; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.band--dark .qc__count { margin: 0; color: #fff; font-size: 0.9375rem; }
.qc__count b { font-size: 1.5rem; }
.qc__bar { height: 6px; margin: 0.75rem 0 1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.qc__bar span { display: block; height: 100%; background: var(--g-amber); transition: width 0.4s ease; }
.qc__queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.qc__queue li {
  display: flex; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border-radius: 10px; font-size: 0.875rem; color: var(--on-dark-mut);
}
.qc__queue .is-current { background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 620; }
.qc__queue .is-done { color: #7f8aa8; }
.qc__queue .is-done::after { content: attr(data-res); font-size: 0.75rem; color: #57d98a; white-space: nowrap; }
.qc__card {
  display: grid; align-content: center; min-height: 22rem; padding: 1.75rem;
  background: #fff; color: var(--text); text-align: center; border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
.qc__card .qc__name { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text); }
.qc__card .qc__amt { margin: 0.25rem 0 0; font-size: clamp(2.25rem, 1.8rem + 1.5vw, 2.875rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: var(--text); }
.qc__card .qc__date { margin: 0 0 1.25rem; font-size: 0.875rem; color: var(--muted); }
.qc__card .qc__ask {
  margin: 0 0 1.25rem; padding: 0.875rem 1rem; border-radius: var(--r-sm);
  background: var(--wash); font-weight: 620; color: var(--text);
}
.qc__primary { justify-self: center; }
.qc__alts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.875rem; }
.qc__alts button {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.8125rem; font-weight: 600;
  padding: 0.4375rem 0.875rem; border-radius: 999px;
  background: #fff; color: var(--muted); border: 1px solid var(--line);
  transition: border-color 0.15s, color 0.15s;
}
.qc__alts button:hover { border-color: var(--amber); color: var(--text); }
.qc__card .is-swap { animation: rowIn 0.35s ease-out both; }
.qc__check {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
  border-radius: 50%; background: var(--g-green); color: #fff !important;
  font-size: 1.5rem; font-weight: 800;
}
.band--dark .qc__metatitle {
  margin: 0 0 1rem; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
}
.qc__meta dl { margin: 0; display: grid; gap: 0.875rem; }
.qc__meta dt { font-size: 0.75rem; color: var(--on-dark-mut); }
.qc__meta dd { margin: 0.125rem 0 0; font-size: 0.9375rem; font-weight: 620; color: #fff; }
.qc__conf { display: block; height: 6px; margin-top: 0.375rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.qc__conf span { display: block; height: 100%; background: var(--g-teal); transition: width 0.4s ease; }
.band--dark .qc__hint { margin-top: 1.25rem; text-align: center; font-size: var(--fs-small); }
html:not(.js) .qc__hint { display: none; }

/* 13.7 Finanzcockpit ------------------------------------------------------- */
.fin { display: grid; gap: var(--gap); margin-top: 2.5rem; }
.fin__card {
  display: flex; flex-direction: column; padding: clamp(1.375rem, 1rem + 1vw, 2rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.fin__app {
  display: flex; align-items: center; gap: 0.625rem; margin: 0 0 1rem;
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.fin__card h3 { margin-bottom: 0.375rem; }
.fin__card > p:not(.fin__app) { color: var(--muted); font-size: var(--fs-small); }
.fin__viz, .fin__tasks, .fin__pair, .fin__deltas { margin-top: auto; padding-top: 1.25rem; }
.fin__flow {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  margin: 0 0 0.5rem; font-size: 0.875rem;
}
.fin__flow b { font-family: var(--mono); font-weight: 600; }
.fin__line { height: 0.5rem; border-radius: 999px; background: var(--wash); overflow: hidden; }
.fin__line span { display: block; height: 100%; width: var(--w); }
.fin__line .is-in { background: var(--g-green); }
.fin__line .is-out { background: var(--g-rose); }
.fin__tasks { list-style: none; margin-bottom: 0; padding-left: 0; display: grid; gap: 0.5rem; }
.fin__tasks li {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem;
  border-radius: var(--r-sm); background: #fff6ea; font-size: 0.875rem; font-weight: 600;
}
.fin__tasks li::before { content: ""; width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--amber); }
.fin__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.fin__pair p { margin: 0; padding: 1rem; border-radius: var(--r-sm); background: var(--wash); }
.fin__pair small { display: block; font-size: 0.75rem; color: var(--muted); }
.fin__pair b { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.fin .is-pos { color: var(--green); }
.fin__deltas { list-style: none; margin-bottom: 0; padding-left: 0; }
.fin__deltas li {
  display: flex; justify-content: space-between; padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-soft); font-size: 0.875rem;
}
.fin__deltas li:last-child { border-bottom: 0; }
.fin__deltas b { font-family: var(--mono); font-weight: 600; }
.fin__deltas .is-warn span { font-weight: 650; }
.fin__deltas .is-warn b { color: #c42a55; }
.fin__quote {
  max-width: 46rem; margin: 2.75rem auto 0; text-align: center;
  font-size: var(--fs-lead); font-weight: 700; letter-spacing: -0.015em;
}
.fin__quote span { display: block; margin-top: 0.5rem; font-size: var(--fs-small); font-weight: 400; color: var(--muted); }

/* 13.8 Abschlagskette ------------------------------------------------------ */
.kette {
  margin-top: 2.5rem; padding: clamp(1.375rem, 1rem + 1.5vw, 2.5rem);
  background: #fff; border: 1px solid rgba(245, 165, 36, 0.28); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.kette__head { display: grid; gap: 1.25rem; }
.kette__projekt { margin: 0; }
.kette__projekt small {
  display: block; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.kette__projekt strong { font-size: 1.375rem; letter-spacing: -0.02em; }
.kette__stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.kette__stats div { padding: 0.75rem 1rem; border-radius: var(--r-sm); background: var(--wash-warm); }
.kette__stats dt { font-size: 0.75rem; color: var(--muted); }
.kette__stats dd { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.kette__stats .is-paid { color: var(--green); }
.kette__stats .is-open { color: var(--amber-deep); }
.kette__bar--big { height: 0.875rem; margin: 1.5rem 0 0; background: rgba(154, 92, 0, 0.1); }
.kette__glieder { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.kette__glied {
  position: relative; display: grid; gap: 0.125rem; padding: 1rem 1.125rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.kette__glied small {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.kette__glied b { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.kette__glied span { font-size: 0.8125rem; font-weight: 620; color: var(--muted); }
.kette__glied--auftrag { background: var(--ink); border-color: transparent; color: #fff; }
.kette__glied--auftrag small, .kette__glied--auftrag span { color: var(--on-dark-mut); }
.kette__glied.is-paid { background: #f1fbf4; border-color: rgba(23, 163, 74, 0.35); }
.kette__glied.is-paid span { color: var(--green); }
.kette__glied.is-open { background: #fff6ea; border-color: var(--amber); animation: pulseRing 2.4s ease-out infinite; }
.kette__glied.is-open span { color: var(--amber-deep); }
.kette__glied.is-future { border-style: dashed; }
.kette__glied.is-future b { color: var(--muted); }
.kette__glied:not(:last-child)::after {
  content: "↓"; position: absolute; left: 50%; bottom: -1.375rem; transform: translateX(-50%);
  color: var(--amber); font-weight: 800;
}

/* 13.9 Plattform ----------------------------------------------------------- */
.zusammen { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: z; }
.zusammen li {
  position: relative; display: grid; gap: 0.125rem; counter-increment: z;
  padding: 1.125rem 1.25rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  animation: zusammenPuls 8s ease-in-out infinite;
}
.zusammen li::before { content: counter(z, decimal-leading-zero); font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.zusammen li:nth-child(2) { animation-delay: 1s; }
.zusammen li:nth-child(3) { animation-delay: 2s; }
.zusammen li:nth-child(4) { animation-delay: 3s; }
.zusammen li:nth-child(5) { animation-delay: 4s; }
.zusammen li:nth-child(6) { animation-delay: 5s; }
.zusammen li:nth-child(7) { animation-delay: 6s; }
.zusammen li:nth-child(8) { animation-delay: 7s; }
.zusammen__app { font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.01em; }
.zusammen__app + span { font-size: var(--fs-small); color: var(--muted); }
.zusammen .zusammen__datev { background: var(--g-dark); border-color: transparent; }
.zusammen__datev .zusammen__app { color: #fff; }
.zusammen__datev .zusammen__app + span { color: var(--on-dark-mut); }
.zusammen .zusammen__datev::before { color: var(--amber); }
.zusammen li:not(:last-child)::after {
  content: "↓"; position: absolute; left: 50%; bottom: -1.3rem; transform: translateX(-50%);
  color: var(--amber); font-weight: 800;
}
@keyframes zusammenPuls {
  0%, 16%, 100% { box-shadow: var(--sh-1); }
  4%, 11%       { box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.45), var(--sh-2); }
}

/* 13.10 Konfigurator ------------------------------------------------------- */
.konfig { display: grid; gap: 1.5rem; margin-top: 2.5rem; align-items: start; }
.konfig__opts { display: grid; gap: 0.75rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.konfig__opt {
  position: relative; display: flex; align-items: flex-start; gap: 0.875rem;
  padding: 1rem 1.125rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; box-shadow: var(--sh-1);
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.konfig__opt:hover { border-color: #c9d3ec; }
.konfig__opt:has(input:checked) {
  background: #fffaf1; border-color: rgba(245, 165, 36, 0.7);
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.15);
}
.konfig__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.konfig__box {
  display: grid; place-items: center; flex: none; width: 1.375rem; height: 1.375rem; margin-top: 0.125rem;
  border: 2px solid #c3cce4; border-radius: 7px; background: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.konfig__opt input:checked + .konfig__box { background: var(--g-amber); border-color: transparent; }
.konfig__opt input:checked + .konfig__box::after {
  content: ""; width: 0.375rem; height: 0.6875rem; margin-top: -0.125rem;
  border: solid #2b1a00; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.konfig__opt input:focus-visible + .konfig__box { outline: 3px solid var(--indigo); outline-offset: 2px; }
.konfig__txt strong { display: block; font-size: 1rem; }
.konfig__txt small { display: block; font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.konfig__out {
  position: sticky; top: 6rem; padding: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--r-lg); color: #fff; box-shadow: var(--sh-2);
  background:
    radial-gradient(14rem 12rem at 100% 0, rgba(245, 165, 36, 0.35), transparent 70%),
    var(--g-dark);
}
.konfig__kicker {
  margin: 0 0 0.625rem; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
}
.konfig__title { margin: 0 0 0.5rem; font-size: var(--fs-h3); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }
.konfig__desc { font-size: var(--fs-small); color: var(--on-dark-mut); }
.konfig__effects { list-style: none; margin: 1rem 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.konfig__effects li { position: relative; padding-left: 1.5rem; font-size: 0.875rem; color: var(--on-dark); }
.konfig__effects li::before { content: "✓"; position: absolute; left: 0; color: var(--amber); font-weight: 800; }
.konfig__count { margin: 0 0 1.25rem; font-size: var(--fs-small); color: var(--on-dark-mut); }
.konfig__count b { color: #fff; }
.konfig__count span { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--amber); }
.konfig__out .btn { width: 100%; }
.konfig__note { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--on-dark-mut); }

/* 13.11 Bundles ------------------------------------------------------------ */
.bundles { margin-top: 2.25rem; }
.bundle { display: flex; flex-direction: column; gap: 0.875rem; }
.card .bundle__name { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.bundle p { margin: 0; }
.bundle .btn { margin-top: auto; align-self: flex-start; }
.bundle--featured { border-color: rgba(245, 165, 36, 0.6); box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.14), var(--sh-2); }
.bundles__note { margin-top: 1.75rem; text-align: center; font-size: var(--fs-small); color: var(--muted); }

/* 13.12 DATEV -------------------------------------------------------------- */
.verbindet { display: grid; gap: 0.75rem; align-items: center; }
.verbindet::before {
  content: "↓"; grid-row: 2; text-align: center;
  font-size: 1.5rem; font-weight: 800; color: var(--amber);
}
.verbindet__in { grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.verbindet__in li {
  padding: 0.75rem 1rem; border-radius: var(--r-sm); font-size: 0.9375rem; font-weight: 620; color: #fff;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
}
.verbindet__out {
  grid-row: 3; padding: 1.75rem 1.5rem; text-align: center;
  background: #fff; border-radius: var(--r-md); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.band--dark .verbindet__out .prozess__name { margin-bottom: 0.25rem; font-size: 1.375rem; color: var(--text); }
.band--dark .verbindet__out p:last-child { margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* 13.13 Breakpoints -------------------------------------------------------- */
@media (min-width: 40em) {
  .konfig__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
  .nutzen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .vergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appdemo__stage { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .appdemo__stage > :only-child { grid-column: 1 / -1; }
  .fin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kette__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kette__glieder { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
  .kette__glied:not(:last-child)::after {
    content: "→"; left: auto; right: -1rem; bottom: auto; top: 50%; transform: translateY(-50%);
  }
  .zusammen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zusammen li:not(:last-child)::after { display: none; }
  .verbindet { grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 0.9fr); }
  .verbindet::before { content: "→"; grid-row: 1; grid-column: 2; }
  .verbindet__in { grid-column: 1; }
  .verbindet__out { grid-row: 1; grid-column: 3; }
}
@media (min-width: 64em) {
  .prozess__rail { grid-template-columns: 10rem minmax(0, 1fr) 10rem; gap: 3rem; }
  .prozess__hub::before, .prozess__hub::after {
    top: 50%; bottom: auto; left: auto; width: 3rem; height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 12px);
    background-size: 12px 2px; animation-name: flowH;
  }
  .prozess__hub::before { left: -3rem; }
  .prozess__hub::after { right: -3rem; }
  .apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appdemo__panel { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
  .ablauf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sicht__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; }
  .qc { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 16rem); }
  .kette__head { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 2.5rem; }
  .zusammen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zusammen li:not(:last-child)::after {
    display: block; content: "→"; left: auto; right: -1.05rem; bottom: auto; top: 50%; transform: translateY(-50%);
  }
  .zusammen li:nth-child(4)::after { display: none; }
  .konfig { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2rem; }

  .lern__chart {
    grid-template-columns: minmax(0, 1fr) 3.25rem minmax(0, 1fr) 3.25rem minmax(0, 1fr);
    grid-template-areas:
      "ph1 . ph2 . ph3"
      "team . kern . out"
      "datev . kern . out"
      ". . back back back";
    column-gap: 0;
    row-gap: 0.75rem;
    align-items: stretch;
  }
  .lern__phase--quellen { grid-area: ph1; margin: 0; }
  .lern__phase--lernen { grid-area: ph2; margin: 0; }
  .lern__phase--anwenden { grid-area: ph3; margin: 0; }
  .lern__node--team { grid-area: team; }
  .lern__node--datev { grid-area: datev; }
  .lern__kern { grid-area: kern; }
  .lern__out {
    grid-area: out; display: flex; flex-direction: column;
    padding: 1.35rem 1.15rem 1.15rem;
  }
  .lern__out ol {
    position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  }
  .lern__out ol::before {
    content: ""; position: absolute; z-index: 0;
    left: calc(0.875rem - 1px); top: 0.875rem; bottom: 0.875rem;
    width: 2px; background: var(--line);
  }
  .lern__out li { border-bottom: 0; padding: 0; }
  .lern__num { position: relative; z-index: 1; }
  .lern__return { display: none; }
  .lern__node,
  .lern__kern { position: relative; }
  .lern__node::after,
  .lern__kern::after {
    content: ""; position: absolute; top: 50%; z-index: 2;
    width: calc(3.25rem - 9px); height: 2px; margin-top: -1px;
    right: calc(-3.25rem + 9px);
    background-size: 12px 2px;
    animation: flowH 0.9s linear infinite;
  }
  .lern__node--team::after {
    background-image: repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 12px);
  }
  .lern__node--datev::after {
    background-image: repeating-linear-gradient(90deg, #17a34a 0 6px, transparent 6px 12px);
  }
  .lern__kern::after {
    background-image: repeating-linear-gradient(90deg, var(--amber) 0 6px, transparent 6px 12px);
  }
  .lern__node::before,
  .lern__kern::before {
    content: ""; position: absolute; top: 50%; right: -3.25rem; z-index: 2;
    margin-top: -5px; border: 5px solid transparent;
  }
  .lern__node--team::before,
  .lern__kern::before { border-left-color: var(--amber); }
  .lern__node--datev::before { border-left-color: #17a34a; }
  .lern__back {
    display: block; grid-area: back; position: relative;
    height: 4.25rem; margin-top: calc(-0.75rem - 1px);
  }
  .lern__back-track {
    position: absolute; top: 0; bottom: 1.15rem;
    left: calc((100% - 3.25rem) / 4);
    right: calc(50% - 3.65rem);
    border: 2px solid var(--amber); border-top: 0; border-radius: 0 0 1.25rem 1.25rem;
  }
  .lern__back-arrow {
    position: absolute; top: -5px; left: calc((100% - 3.25rem) / 4);
    transform: translateX(-50%);
    border: 6px solid transparent; border-bottom-color: var(--amber);
  }
  .lern__back-label {
    position: absolute; left: 50%; bottom: 1.15rem; transform: translate(-50%, 50%);
    padding: 0.28rem 0.8rem; border-radius: 999px; background: #fff;
    border: 1px solid rgba(245, 165, 36, 0.55);
    font-size: 0.8125rem; font-weight: 650; color: var(--amber-deep); white-space: nowrap;
  }
}