/* ============================================================================
   Lancely — lancely.de (Marketingseite)

   ⚠️ Kein Framework, keine Laufzeit, keine fremden Hosts. Warum, steht in der
   README — kurz: die Seite behauptet über sich selbst, dass sie nichts sammelt,
   und ohne Anwendung auf dem Host kann sie das gar nicht.

   ⚠️ Alle Farben stehen als Token in `:root`. Der Entwurf aus Claude Design
   hatte jeden Wert an Ort und Stelle stehen (rund 90 Vorkommen von #7C3AED);
   eine Markenänderung wäre damit ein Suchen-und-Ersetzen über die ganze Seite
   gewesen — und genau so laufen zwei Fassungen derselben Farbe auseinander.
   ========================================================================== */

/* ── Schriften ──────────────────────────────────────────────────────────────
   ⚠️ Selbst gehostet, woff2. Der Entwurf lieferte rohe .ttf-Dateien (280 KB) —
   das ist das falsche Format fürs Web. Die Dateien hier sind dieselben, die
   codedoktor.de ausliefert: gleiche Marke, gleiche Schnitte, bereits optimiert
   (128 KB für fünf Schnitte).

   ⚠️ `font-display: swap` — Text ist sofort lesbar, auch bevor die Schrift da
   ist. Bei einer Seite, deren einziger Zweck Lesen ist, wäre ein unsichtbarer
   Absatz das schlechteste Ergebnis.                                          */

@font-face {
  font-family: 'Darker Grotesque';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/darker-grotesque-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Darker Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/darker-grotesque-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Darker Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/darker-grotesque-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-700.woff2') format('woff2');
}

/* ── Marke ─────────────────────────────────────────────────────────────────
   Gemessen auf codedoktor.de (Batch 80). Lancely wird unter dieser Marke
   betrieben; die Farben stammen daher von dort und nicht aus dem
   Entwurfswerkzeug.

     --brand        #6960F7  Anfang JEDES Markenverlaufs auf codedoktor.de
     --brand-bright #B537FF  Ende des Hauptverlaufs
     --brand-magenta#E129A8  Ende des zweiten Verlaufs (hier ungenutzt)
     --violet       #9C3AED  Karten-Hover auf codedoktor.de

   ⚠️ Der Entwurf hatte `#7C3AED` — eine Voreinstellung des Entwurfswerkzeugs,
   die zufällig nah an CodeDoktors `#9C3AED` liegt. Übernommen ist der echte
   Wert; der Unterschied ist klein, aber es gibt keinen Grund, eine Marke
   ungefähr zu treffen, wenn der genaue Wert bekannt ist.                     */

:root {
  --brand: #6960f7;
  --brand-bright: #b537ff;
  --brand-magenta: #e129a8;
  --violet: #9c3aed;

  /* Verlauf: dieselbe Richtung wie auf codedoktor.de — von --brand aus. */
  --gradient: linear-gradient(135deg, var(--brand), var(--brand-bright));

  --ink: #1e1a2e;
  --ink-soft: #3d364f;
  --muted: #5f5875;
  --muted-soft: #6b6280;
  --muted-light: #7a7290;
  --faint: #a79fb8;

  --ground: #faf8fc;
  --card: #ffffff;
  --tint: #f6f3fb;
  --line: #ede7f6;

  /* Von --brand abgeleitet, damit ein Markenwechsel nicht 30 rgba() vergisst. */
  --brand-rgb: 105, 96, 247;
  --edge: rgba(var(--brand-rgb), 0.18);
  --edge-strong: rgba(var(--brand-rgb), 0.35);
  --wash: rgba(var(--brand-rgb), 0.06);
  --wash-mid: rgba(var(--brand-rgb), 0.1);

  --ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text: 'Darker Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1160px;
  --gutter: 24px;
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

/* ⚠️ Wer „reduzierte Bewegung" eingestellt hat, meint auch das Scrollen. */
@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;
  }
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip, nicht hidden — hidden bricht position:sticky */
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-bright); }

/* Sichtbarer Fokus. Die Seite ist ohne Zeigegerät vollständig bedienbar. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }
.mid { max-width: 900px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--card);
  border-radius: 0 0 10px 0;
  font-family: var(--ui);
  font-weight: 700;
}
.skip:focus { left: 0; }

/* ── Typografie ──────────────────────────────────────────────────────────── */

h1, h2, h3 { font-family: var(--ui); letter-spacing: -0.015em; line-height: 1.05; }

h1 {
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; text-wrap: balance; }
h3 { font-family: var(--text); font-size: 27px; font-weight: 700; line-height: 1.1; }

.eyebrow {
  font-size: 19px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 12px;
}
.eyebrow--quiet { color: #8a82a0; }

.lead {
  font-size: 21px;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
.lead--wide { font-size: 22px; max-width: 540px; }

.prose p { margin-bottom: 16px; color: var(--muted); }
.prose h2 { font-size: clamp(24px, 3vw, 32px); margin: 40px 0 14px; }
.prose h3 { font-size: 22px; margin: 28px 0 10px; }
.prose ul { margin: 0 0 16px 22px; color: var(--muted); }
.prose li { margin-bottom: 6px; }
.prose a { text-decoration: underline; }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  background: var(--gradient);
  color: #fff;
  font-family: var(--text);
  font-size: 21px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 8px 30px rgba(var(--brand-rgb), 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 34px rgba(var(--brand-rgb), 0.45);
}
.btn--sm { padding: 10px 20px; font-size: 18px; box-shadow: none; }
.btn--lg { padding: 16px 34px; font-size: 22px; }
.btn--block { display: flex; justify-content: center; width: 100%; }

/* ── Navigation ──────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
  padding: 0 var(--gutter);
  background: rgba(250, 248, 252, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--edge);
}

.wordmark {
  font-family: var(--ui);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark span { color: var(--brand); }
.wordmark:hover { color: var(--ink); }

.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.nav__links a:hover { color: var(--brand); }
.nav__links .btn { color: #fff; }

/* ⚠️ Unter 720px verschwinden die Textlinks, der Knopf bleibt. Kein
   Hamburger-Menü: das bräuchte JavaScript, und die Seite muss ohne
   funktionieren. Die Ziele sind über die Fußzeile weiterhin erreichbar. */
@media (max-width: 720px) {
  .nav__links a:not(.btn) { display: none; }
}

/* ── Abschnitte ──────────────────────────────────────────────────────────── */

.section { padding: 80px 0; }
.section--tight { padding: 24px 0 80px; }
.section--hero { position: relative; overflow: hidden; padding: 84px 0 72px; }
.section--wash { background: linear-gradient(180deg, var(--wash), transparent); }

.section__head { max-width: 760px; margin-bottom: 44px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 12% 0%, rgba(var(--brand-rgb), 0.22) 0%, transparent 68%),
    radial-gradient(ellipse 50% 55% at 100% 40%, rgba(181, 55, 255, 0.16) 0%, transparent 70%);
}
.hero__grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}
.hero__copy { flex: 1 1 440px; min-width: 300px; }
.hero__art { flex: 1 1 460px; min-width: 280px; display: flex; justify-content: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  background: var(--wash-mid);
  border: 1px solid var(--edge-strong);
  border-radius: 9999px;
  font-size: 17px;
  font-weight: 600;
  color: #5b46c9;
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

.hero__cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 34px; }
.hero__note { font-size: 17px; color: var(--muted-light); }

.claim {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 8px 15px;
  background: var(--wash);
  border: 1px solid rgba(var(--brand-rgb), 0.2);
  border-radius: 9999px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-soft);
}
.claim strong { font-weight: 700; color: var(--ink); }
.claim svg { flex-shrink: 0; }

.gradient-text {
  background: linear-gradient(120deg, var(--brand), var(--brand-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand); /* Rückfall, falls background-clip fehlt */
}

/* ── Karten ──────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--trust { gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }

.card {
  background: var(--card);
  border: 1px solid rgba(var(--brand-rgb), 0.15);
  border-radius: 16px;
  padding: 30px;
}
.card--feature {
  border: none;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 2px 10px rgba(30, 26, 46, 0.06), 0 0 0 1px rgba(var(--brand-rgb), 0.09);
}
.card__title { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.card p { font-size: 19px; color: var(--muted); }
.card h3 { margin-bottom: 8px; }

.orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brand), var(--brand-bright));
  box-shadow: 0 6px 18px rgba(var(--brand-rgb), 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 48px 44px;
  box-shadow: 0 2px 10px rgba(30, 26, 46, 0.05);
}
.panel--split { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; }
.panel--split > div { flex: 1 1 420px; min-width: 260px; }
/* Zeilen statt Spalten: die Haarlinie trennt, der Rahmen fasst zusammen. */
.panel--rows { border-radius: 20px; padding: 8px 32px; }

/* ── „Was Lancely nicht macht" ───────────────────────────────────────────
   Zwei Spalten je Zeile: links WAS fehlt, rechts WARUM in einem Satz. Die
   ausführliche Begründung liegt darunter in einem `<details>` — sechs lange
   Absätze am Stück liest niemand, und wer sie sucht, findet sie trotzdem.

   ⚠️ Der Pfeil ist ein Hintergrundbild auf `::after`, kein zweites SVG im
   Markup: Er dreht sich beim Aufklappen, und eine Drehung gehört ins
   Stylesheet — sechsmal dasselbe SVG einzusetzen hieße, sie sechsmal zu
   pflegen.                                                                 */
.limit { display: flex; flex-wrap: wrap; gap: 18px 44px; align-items: flex-start; padding: 30px 0; }
.limit + .limit { border-top: 1px solid var(--line); }
.limit__head { display: flex; gap: 11px; align-items: flex-start; flex: 1 1 210px; max-width: 300px; }
.limit__head svg { flex-shrink: 0; margin-top: 5px; }
.limit__head > div { min-width: 0; }
.limit__title { font-size: 23px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.limit__what { font-size: 17px; color: var(--muted-soft); line-height: 1.35; margin-top: 3px; text-wrap: pretty; }
.limit__body { flex: 3 1 340px; min-width: 0; }
.limit__claim {
  font-family: var(--ui);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.limit details { margin-top: 14px; }
.limit summary {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
}
.limit summary::-webkit-details-marker { display: none; }
.limit summary::after {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: no-repeat center / 18px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236960f7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  transition: transform 0.25s;
}
.limit details[open] summary::after { transform: rotate(180deg); }
.limit details p { margin-top: 12px; font-size: 17.5px; color: var(--muted-soft); line-height: 1.5; text-wrap: pretty; }

/* ── Vertrauen ───────────────────────────────────────────────────────────── */

.trust {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 2px 10px rgba(30, 26, 46, 0.05);
}
.trust__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--brand-rgb), 0.08);
  margin-bottom: 18px;
}
.trust__title { font-size: 23px; font-weight: 700; color: var(--ink); line-height: 1.15; margin-bottom: 7px; text-wrap: balance; }
.trust__text { font-size: 18px; color: var(--muted-soft); line-height: 1.4; text-wrap: pretty; }

.bayern {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 34px;
  padding: 34px 36px;
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.07), rgba(var(--brand-rgb), 0.04));
  border: 1px solid rgba(var(--brand-rgb), 0.2);
  border-radius: 20px;
}
.bayern > div { flex: 1 1 420px; min-width: 260px; }
.bayern__title {
  font-family: var(--ui);
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 8px;
}
.bayern__text { font-size: 19px; color: var(--muted); line-height: 1.4; text-wrap: pretty; }

/* Auf schmalen Geräten frisst der Innenabstand die Textbreite auf. */
@media (max-width: 560px) {
  .panel--rows { padding: 4px 20px; }
  .bayern { padding: 26px 22px; }
  .namestory { padding: 28px 20px; }
}

.flags { display: flex; gap: 8px; flex-shrink: 0; }
.flag {
  position: relative;
  overflow: hidden;
  width: 42px;
  height: 29px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(30, 26, 46, 0.12), 0 2px 6px rgba(30, 26, 46, 0.1);
}
.flag--de { background: linear-gradient(180deg, #000 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%); }

/* Bayern als RAUTEN-, nicht als Streifenflagge — beide sind amtlich, der
   Entwurf zeigt die Rauten.

   ⚠️ Gezeichnet, nicht geladen: Der Entwurf legte dafür ein PNG mit 172 KB bei
   — für eine Fläche von 42 × 29 px. Ein Schachbrett aus einem
   `conic-gradient`, um 45° gedreht, IST das Rautenmuster; es kostet nichts,
   bleibt bei jeder Auflösung scharf und ist keine weitere Datei, die auf dem
   Server liegen und mit ausgeliefert werden muss.                            */
.flag--by { background: #fff; }
.flag--by::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(#0066b3 90deg, #fff 0 180deg, #0066b3 0 270deg, #fff 0) 0 0 / 13px 13px;
  transform: rotate(45deg);
}

/* ── Preis ───────────────────────────────────────────────────────────────── */

.price {
  max-width: 540px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--edge-strong);
  border-radius: 26px;
  padding: 44px 40px;
  box-shadow: 0 0 50px rgba(var(--brand-rgb), 0.18);
  text-align: left;
}
.price__amount { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.price__amount b { font-family: var(--ui); font-size: 64px; font-weight: 700; line-height: 1; }
.price__amount span { font-size: 22px; font-weight: 500; color: var(--muted); }
.price__rule { height: 1px; background: rgba(var(--brand-rgb), 0.25); margin-bottom: 24px; }
.price__list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; }
.price__list div { display: flex; align-items: center; gap: 12px; font-size: 19px; color: var(--ink-soft); }
.price__list svg { flex-shrink: 0; }
.price__fine { font-size: 18px; color: var(--muted-soft); margin-bottom: 26px; text-wrap: pretty; }
.price__after { font-size: 17px; color: var(--muted-light); line-height: 1.5; margin-top: 18px; text-align: center; }

.namestory {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 40px;
  text-align: center;
  background: var(--wash);
  border: 1px solid rgba(var(--brand-rgb), 0.16);
  border-radius: 20px;
}
/* ── Woher der Name ──────────────────────────────────────────────────────
   „free" und „easi" schrumpfen weg, der Punkt kommt dazu: aus
   „freelance + easily" wird „lancely." und wieder zurück. Ein Zyklus, 7 s —
   dieselbe Länge wie die Szenen der Kopfgrafik, damit auf der Seite nicht zwei
   Takte gegeneinander laufen.

   ⚠️ Die Bewegung liegt vollständig hier; `site.js` fasst sie nicht an. Ohne
   JavaScript läuft sie deshalb genauso, und bei „reduzierte Bewegung" hält die
   allgemeine Regel weiter oben sie an — dann bleibt der Grundzustand stehen,
   und der ist die VOLLSTÄNDIGE Herleitung (nur der Punkt fehlt). Der Entwurf
   ließ dort „lancely." stehen; ein Abschnitt „Woher der Name?", der nur den
   Namen zeigt, erklärt aber nichts mehr.                                    */
.namestory__word {
  font-family: var(--ui);
  /* ⚠️ Untergrenze 26px, nicht 30px: `white-space: nowrap` darf auf einem
     320-px-Gerät nicht aus dem Kasten laufen. Vor der Bewegung durfte die
     Zeile umbrechen, jetzt nicht mehr — dafür muss sie schrumpfen können. */
  font-size: clamp(26px, 6vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink-soft);
  margin-bottom: 18px;
  white-space: nowrap;
}
.namestory__word b { font-weight: 700; }
.nm__go { color: var(--faint); animation: nm-go 7s cubic-bezier(0.5, 0, 0.2, 1) infinite 0.12s; }
.nm__plus { padding: 0 0.28em; animation-delay: 0s; }
.nm__lance { color: var(--ink-soft); animation: nm-glow 7s ease-in-out infinite; }
.nm__ly { color: var(--brand); }
/* Grundzustand: unsichtbar. Der Punkt gehört zum Ergebnis, nicht zur Herleitung. */
.nm__dot { font-size: 0; font-weight: 700; color: var(--brand); animation: nm-dot 7s cubic-bezier(0.5, 0, 0.2, 1) infinite; }

@keyframes nm-go {
  0%, 18% { font-size: 1em; opacity: 1; }
  44%, 82% { font-size: 0; opacity: 0; }
  96%, 100% { font-size: 1em; opacity: 1; }
}
@keyframes nm-dot {
  0%, 30% { font-size: 0; opacity: 0; }
  50%, 82% { font-size: 1em; opacity: 1; }
  94%, 100% { font-size: 0; opacity: 0; }
}
@keyframes nm-glow {
  0%, 34% { color: var(--ink-soft); }
  52%, 82% { color: var(--ink); }
  96%, 100% { color: var(--ink-soft); }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────
   ⚠️ `<details>`/`<summary>` statt eines JavaScript-Akkordeons. Ohne Skript
   sind alle Antworten weiterhin auf- und zuklappbar — und für Suchmaschinen
   liegt der Text ohnehin im Markup. Der Entwurf hatte einen onClick-Handler;
   der hätte die Antworten ohne JavaScript unerreichbar gemacht.             */

.faq { display: flex; flex-direction: column; gap: 12px; }

.faq details {
  background: var(--card);
  border: 1px solid rgba(var(--brand-rgb), 0.15);
  border-radius: 14px;
  overflow: hidden;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: no-repeat center / 22px 22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F5875' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  transition: transform 0.25s;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { padding: 0 24px 22px; font-size: 19px; line-height: 1.5; color: var(--muted); }

/* ── Einblenden beim Scrollen ────────────────────────────────────────────
   ⚠️ Der Startzustand steht NICHT auf `[data-reveal]`, sondern auf `.reveal` —
   und diese Klasse setzt `site.js`. Ohne JavaScript ist damit nichts versteckt.
   Der Entwurf hatte `opacity:0` direkt im Markup; genau so verschwindet die
   halbe Seite, sobald das Skript nicht lädt (und für jeden, der es nicht
   ausführt — Suchmaschinen eingeschlossen, wenn sie nicht rendern).

   `site.js` setzt die Klasse außerdem nur auf das, was beim Laden UNTER der
   Falz liegt. Damit kann oben nichts kurz aufblitzen und wieder verschwinden,
   falls das Skript erst nach dem ersten Bildaufbau an die Reihe kommt.       */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Die Funktionskarten kommen nacheinander — 70 ms Versatz je Karte. */
.card--feature.reveal.is-in { transition-duration: 0.6s; }
.card--feature.reveal:nth-child(2).is-in { transition-delay: 0.07s; }
.card--feature.reveal:nth-child(3).is-in { transition-delay: 0.14s; }
.card--feature.reveal:nth-child(4).is-in { transition-delay: 0.21s; }
.card--feature.reveal:nth-child(5).is-in { transition-delay: 0.28s; }
.card--feature.reveal:nth-child(6).is-in { transition-delay: 0.35s; }

/* ── Abschluss-Aufruf ────────────────────────────────────────────────────── */

.final {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 40px;
  text-align: center;
  background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(var(--brand-rgb), 0.1), transparent 70%), var(--card);
  border: 1px solid rgba(var(--brand-rgb), 0.28);
  border-radius: 28px;
}
.final h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 16px; }
.final p { font-size: 21px; color: var(--muted); margin-bottom: 32px; }

/* ── Fußzeile ────────────────────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--edge); padding: 44px var(--gutter) 40px; }
.footer__top {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer__tag { font-size: 18px; color: var(--muted-light); }
.footer__links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 18px; }
.footer__links a { color: var(--brand); }
.footer__bottom {
  max-width: var(--shell);
  margin: 28px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(30, 26, 46, 0.07);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: 16px;
  color: var(--muted-light);
}

/* ── Hero-Grafik: „Chaos rein — Struktur raus" ────────────────────────────
   Fünf Zeilen fliegen verstreut herein, ordnen sich, dann erscheinen Status
   und Betrag. Nach 7 s wechselt die Szene.

   ⚠️ Die Bewegung liegt VOLLSTÄNDIG hier, nicht in `site.js`. Damit läuft sie
   auch ohne das Skript, und sie hört auf, sobald jemand im Betriebssystem
   weniger Bewegung eingestellt hat — beides ließe sich mit einer in
   JavaScript gerechneten Animation nicht so billig haben.

   ⚠️ Der Ruhezustand JEDER Regel hier ist der FERTIGE Zustand: Zeile sichtbar,
   nicht verschoben, Betrag da. Die Keyframes blenden nur hinein. Andersherum
   (Grundzustand `opacity: 0`, Sichtbarkeit erst aus der Animation) wäre die
   Grafik für jeden leer, der `prefers-reduced-motion` gesetzt hat — genau die
   Fassung, die niemand testet. Der Entwurf hatte diesen Fehler.

   ⚠️ 7 s stehen an drei Stellen: hier in den Animationen, im Szenenwechsel in
   `site.js` und nirgends sonst. Laufen sie auseinander, schneidet der Wechsel
   eine Bewegung mittendrin ab.                                              */

.demo { position: relative; width: 100%; max-width: 500px; }
.demo__glow {
  position: absolute;
  inset: -14% -10%;
  background: radial-gradient(ellipse at 50% 45%, rgba(var(--brand-rgb), 0.2), transparent 68%);
  filter: blur(34px);
  pointer-events: none;
}
.demo__tag {
  position: absolute;
  z-index: 3;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-light);
  white-space: nowrap;
}
.demo__tag--in {
  top: -6px;
  left: 0;
  animation: lc-fade-a 7s ease-in-out infinite;
}
.demo__tag--out {
  bottom: -6px;
  right: 0;
  color: var(--brand);
  opacity: 0.25;
  animation: lc-fade-b 7s ease-in-out infinite;
}

.demo__frame {
  position: relative;
  margin: 26px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px 18px 20px;
  box-shadow: 0 24px 60px rgba(30, 26, 46, 0.1), 0 2px 6px rgba(30, 26, 46, 0.04);
}
.demo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f1ecf8;
}
.demo__mark { font-family: var(--ui); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.demo__mark span { color: var(--brand); }
.demo__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(var(--brand-rgb), 0.08);
  border: 1px solid rgba(var(--brand-rgb), 0.22);
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  animation: lc-pill 7s ease-in-out infinite;
}

.demo__scene { display: none; }
.demo__scene[data-active] { display: block; }

/* Die Zeilen liegen absolut übereinander gestapelt. Sie MÜSSEN aus dem Fluss
   heraus: beim Einfliegen hängen sie weit über den Rahmen hinaus, und ein
   Rahmen, der sich dabei mitbewegt, macht aus der Bewegung ein Zucken. */
.demo__rows { position: relative; }

.demo__row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 58px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid rgba(var(--brand-rgb), 0.28);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.1);
  animation: lc-settle 7s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation-delay: var(--d, 0s);
}
.demo__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.demo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--ui); }
.demo__line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.demo__t { font-size: 14px; font-weight: 700; color: #111827; white-space: nowrap; }
.demo__t2 { font-size: 13px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__sub { font-size: 11.5px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--ui);
  animation: lc-check 7s ease-in-out infinite both;
  animation-delay: var(--d, 0s);
}
.demo__chip { font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.demo__amt { font-size: 13px; font-weight: 700; white-space: nowrap; }
.demo__dots { display: flex; flex-direction: column; gap: 2.5px; padding: 0 2px; }
.demo__dots i { width: 3px; height: 3px; border-radius: 50%; background: #d1d5db; }

@keyframes lc-settle {
  0% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.96);
    border-color: #e7e1f0;
    box-shadow: 0 8px 18px rgba(30, 26, 46, 0.12);
  }
  10%, 20% {
    opacity: 1;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
    border-color: #e7e1f0;
    box-shadow: 0 8px 18px rgba(30, 26, 46, 0.12);
  }
  46%, 84% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    border-color: rgba(var(--brand-rgb), 0.28);
    box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.96);
    border-color: #e7e1f0;
    box-shadow: 0 8px 18px rgba(30, 26, 46, 0.12);
  }
}
@keyframes lc-check {
  0%, 30% { opacity: 0; transform: scale(0.5); }
  50%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.5); }
}
@keyframes lc-pill {
  0%, 40% { opacity: 0; transform: translateY(5px); }
  58%, 82% { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(5px); }
}
@keyframes lc-fade-a {
  0%, 20% { opacity: 1; }
  46%, 100% { opacity: 0.25; }
}
@keyframes lc-fade-b {
  0%, 34% { opacity: 0.25; }
  56%, 84% { opacity: 1; }
  96%, 100% { opacity: 0.25; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt die fertige Szene — nicht
   eine leere Fläche. Deshalb weiter oben die Grundzustände. */
@media (prefers-reduced-motion: reduce) {
  .demo__row,
  .demo__right,
  .demo__pill,
  .demo__tag {
    animation: none !important;
  }
  .demo__tag--out { opacity: 1; }
}

@media (max-width: 560px) {
  .demo__sub, .demo__t2 { display: none; }
}

/* ── Alle Funktionen ─────────────────────────────────────────────────────── */

/* ⚠️ `align-items: start` — die Gruppen sind unterschiedlich lang (4 bis 10
   Einträge). Ohne das zöge die Rasterzeile beide Karten auf die Höhe der
   längeren, und unter der kürzeren stünde ein leerer Kasten. */
.fgrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }

.fgroup {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px 14px;
  box-shadow: 0 2px 10px rgba(30, 26, 46, 0.05);
}
.fgroup__head { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.fgroup__head > div { flex: 1; min-width: 0; }
.fgroup__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(var(--brand-rgb), 0.08);
}
.fgroup h2 { font-size: 25px; margin-bottom: 1px; }
.fgroup__note { font-size: 17px; color: var(--muted-light); line-height: 1.2; }
.fgroup__count {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(var(--brand-rgb), 0.07);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
}

.flist { display: flex; flex-direction: column; }
.fitem { display: flex; gap: 11px; align-items: flex-start; padding: 15px 0; }
.fitem + .fitem { border-top: 1px solid var(--tint); }
.fitem svg { flex-shrink: 0; margin-top: 3px; }
.fitem > div { flex: 1; min-width: 0; }
.fitem b { display: block; font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.fitem span { font-size: 17.5px; color: var(--muted-soft); }

/* Nur für Vorlesewerkzeuge: „10" allein sagt niemandem, wovon zehn. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Unterseiten: Rücksprung und Rechtstexte ─────────────────────────────── */

.backlink {
  display: inline-block;
  margin-bottom: 26px;
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
}
.backlink:hover { color: var(--brand); }

.legal { display: flex; flex-direction: column; gap: 10px; }
.legal h2 {
  font-size: 25px;
  margin-top: 28px;
  color: var(--ink);
}
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: 18.5px; color: var(--muted-soft); line-height: 1.55; }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(var(--brand-rgb), 0.08);
  color: var(--brand);
}

.legal a { font-weight: 600; }
.legal__cta { margin: 6px 0 18px; }

/* ⚠️ `.legal__todo` — der gestrichelte Platzhalterkasten — ist mit Batch M2
   entfallen: Impressum und Datenschutzverweis sind vollständig, es gibt nichts
   mehr zu markieren. Wenn je wieder ein Abschnitt fehlt, gehört die Regel
   zurück und NICHT ein plausibel klingender Absatz an seine Stelle. Ein
   sichtbar leerer Kasten wird beim Korrekturlesen bemerkt, ein grau gesetzter
   Satz im Fluss des übrigen Textes nicht — und geht so live. */