/* Inter selbst ausgeliefert statt von Google Fonts.
   Ein Einbinden über fonts.googleapis.com überträgt die IP jedes Besuchers an
   Google — auf einer Seite, die mit DSGVO-Konformität wirbt, ein Widerspruch
   (LG München I, 3 O 17493/20). Zusätzlich entfällt eine renderblockierende
   Fremdanfrage. Eine Variable-Font-Datei deckt alle Schnitte ab (48 KB).
   Der unicode-range entspricht dem latin-Subset: äöüß, ç, ·, –, €, ' sind drin,
   alles darüber fällt sauber auf die System-Schrift zurück. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader nur für die Tagline der Startseite (seit 2026-09-17), aus
   demselben Grund selbst ausgeliefert wie Inter. Fontsource-Paket
   @fontsource-variable/newsreader 5.3.0, latin, variable Achse wght 200 bis
   800 (58 KB). SIL Open Font License, Text in assets/newsreader-OFL.txt. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/newsreader-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   signUP — Marketing-Website
   Skin: Marketing / Outreach (signUP-brand-guidelines, §5–§8)
   Nur dieses Skin verwenden — niemals App-Chrome-Neutrals.
   ============================================================ */

:root {
  /* Schriftgrößen der Überschriften (seit 2026-09-24, vorher je Seite eigene Werte).
     h1: Seitentitel aller Unterseiten. Die Startseite hat ihre eigene Tagline-Größe.
     h2: Sektionen. h2-sub: Zeilen- und Zwischenüberschriften in Serife.
     h3: Kartentitel. h3-lg: Schritte und Stellenanzeigen. */
  --fs-h1: clamp(2rem, 3.8vw, 3.3rem);
  --fs-h2: clamp(1.6rem, 3.5vw, 2.6rem);
  --fs-h2-sub: clamp(1.55rem, 2.5vw, 2.1rem);
  --fs-h3: 1.08rem;
  --fs-h3-lg: 1.35rem;
  --signup-primary: #107627;
  --signup-dark: #14381e;
  --signup-secondary: #4caf50;
  --signup-bg: #f5f8f5;
  --signup-surface: #ffffff;
  --signup-border: #e6ece7;
  --signup-text: #14381e;
  --signup-muted: #5c6b60;
  --signup-tint: #e3f1e6;

  --radius: 1rem;
  --radius-pill: 9999px;

  /* Weicher und länger als vorher: helle Karten sollen wie die Glaspanels
     der Komposition über dem Grund schweben, nicht auf ihm kleben. */
  --shadow-sm: 0 14px 30px -20px rgba(20, 56, 30, 0.24), 0 1px 2px rgba(20, 56, 30, 0.04);
  --shadow-md: 0 10px 15px -3px rgba(20, 56, 30, 0.07), 0 4px 6px -4px rgba(20, 56, 30, 0.06);
  --shadow-lg: 0 24px 48px -12px rgba(20, 56, 30, 0.16);
  --shadow-glow: 0 8px 24px rgba(16, 118, 39, 0.2);

  /* Der dunkle Grund ist der Bühnenverlauf aus der Scroll-Komposition: ein
     tiefes Grün-Schwarz, das nach außen ins Neutrale läuft. Weiterhin Ink,
     kein Flaschengrün — Grün bleibt Akzent (Payoff, CTA, Icons), ein Produkt,
     das die Marke des Kunden übernimmt, sollte nicht in der eigenen ertrinken.
     Gilt für .hero UND .section-dark, damit es nur ein Dunkel gibt. */
  /* Feste Ellipsengröße statt farthest-corner: sonst wird der Verlauf in
     einer hohen Sektion über die ganze Fläche gestreckt und der Grund kippt
     von Grün-Schwarz nach Mittelgrün. So sitzt der Grünschimmer wie in der
     Komposition oben links und der Rest bleibt Ink. */
  --grad-stage: radial-gradient(ellipse 80% 680px at 26% 8%, #16382a 0%, #0c2118 44%, #050d0a 100%);
  --grad-cta: linear-gradient(135deg, #107627, #4caf50);

  /* Bausteine der Komposition, damit dunkle Flächen überall gleich aussehen:
     Glaspanel (Designsystem-Panel), Chip (Token-Chip), Rasterlinie und der
     tiefe, weiche Schatten unter Panels und Bühnen. */
  --radius-panel: 20px;
  --panel-bg: rgba(255, 255, 255, 0.045);
  --panel-line: rgba(255, 255, 255, 0.10);
  --chip-bg: rgba(255, 255, 255, 0.07);
  --chip-line: rgba(255, 255, 255, 0.14);
  --grid-line: rgba(255, 255, 255, 0.035);
  --shadow-panel: 0 30px 60px -30px rgba(0, 0, 0, 0.85);
  --shadow-stage: 0 60px 120px -40px rgba(0, 0, 0, 0.9);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1160px;
  --nav-h: 64px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Weicher auslaufend, für die Aufklappmenüs (seit 2026-10-22). */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & Grundlagen ---------- */

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

html { scroll-behavior: smooth; }

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

/* height:auto ist hier Pflicht: die Hero-Grafik trägt width/height-Attribute,
   ohne diese Zeile bleibt die Attributhöhe stehen, während die Breite schrumpft. */
img, video { max-width: 100%; height: auto; display: block; }

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

::selection { background: var(--signup-tint); color: var(--signup-dark); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typografie ---------- */

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }

h1 { font-size: clamp(2.2rem, 7vw, 4.4rem); font-weight: 900; }
/* Überschriften der Sektionen in Newsreader wie die Tagline (seit
   2026-09-17). Eine Serife wirkt bei gleicher Größe kleiner und leichter als
   Inter 800, deshalb größer als vorher und im Schnitt 500. Karten- und
   Zwischentitel (h3) bleiben Inter. */
h2 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: #141414;   /* dasselbe fast schwarze Grau wie die Tagline */
}
.section-dark h2 { color: #fff; }
h3 { font-size: var(--fs-h3); font-weight: 700; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--signup-primary);
  display: block;
  margin-bottom: 1rem;
}

/* Überschriften sind einfarbig. Der einzige Akzent ist das Schlusszeichen —
   ein Punkt Farbe statt zweier eingefärbter Satzhälften. */
.hl-dot { color: var(--signup-primary); }
.hero .hl-dot,
.section-dark .hl-dot { color: var(--signup-secondary); }

.lead {
  font-size: 1.15rem;
  color: var(--signup-muted);
  max-width: 42rem;
}

.section {
  padding: clamp(72px, 10vw, 128px) 0;
  position: relative;
}

section[id] { scroll-margin-top: 80px; }
/* Folgt eine Sektion auf eine mit derselben Hintergrundfarbe, liefen zwei
   Innenabstände zu 256 px Leere zusammen (Inhaber, 2026-09-24). */
.section.section-follow { padding-top: 0; }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centered .lead { margin-left: auto; margin-right: auto; }
.lead + .lead { margin-top: 0.9rem; }
.section-head h2 { margin-bottom: 1rem; }

/* ---------- Buttons (Pills, §8) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-primary { background: var(--signup-primary); color: #fff; }
.btn-primary:hover {
  background: var(--signup-dark);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--signup-surface);
  color: var(--signup-primary);
  border-color: var(--signup-border);
}
.btn-secondary:hover { border-color: var(--signup-primary); background: #f0f7f1; }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }

.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.hero .btn-lg { padding: 0.68rem 1.45rem; font-size: 0.94rem; }

/* Textlink unter dem Hero-Button. Seit 2026-09-17 nicht mehr in Gebrauch:
   die Startseite trägt zwei Buttons nebeneinander (siehe „Heller Hero der
   Startseite"). Die Regel bleibt für einen Textlink unter einem Button. */
.hero-alt { text-align: center; margin: 0 0 1.1rem; }
.hero-alt a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.94rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hero-alt a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.hero-alt a:focus-visible { outline: 2px solid var(--signup-secondary); outline-offset: 4px; }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
}
.badge-soft { background: var(--signup-tint); color: var(--signup-primary); }
.badge-glass {
  background: var(--chip-bg);
  color: #dff0e2;
  border: 1px solid var(--chip-line);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.9);
}

/* ---------- Cards ---------- */

.card {
  background: var(--signup-surface);
  border: 1px solid var(--signup-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
}

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

/* Dauerhaft helle Leiste. Vorher war sie über dem Hero transparent mit
   weißem Logo und wechselte erst beim Scrollen — das kostet Wiedererkennung
   genau dort, wo sie am meisten zählt, und funktioniert auf Unterseiten mit
   hellem Kopf gar nicht. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--signup-border);
  transition: box-shadow 0.35s ease, height 0.35s ease;
}
.nav .nav-logo .logo-white { display: none; }
.nav .nav-logo .logo-dark { display: block; }

/* Die Seite tritt hinter ein geöffnetes Menü, die helle Leiste bleibt davor. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 20, 15, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s var(--ease-out), visibility 0s linear 0.26s;
}
.nav-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.26s var(--ease-out), visibility 0s;
}

/* height: 100%, damit die Menüpunkte die volle Leistenhöhe haben: das
   Aufklappmenü hängt an ihrer Unterkante und damit an der Unterkante der
   Leiste, auch wenn sie beim Scrollen auf 56 px schrumpft. */
.nav-inner {
  width: 100%;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 25px; width: auto; flex-shrink: 0; }
/* Seit dem Wechsel der Wortmarke auf Unbounded (2026-10-11) ist das Logo breiter; unter 380 px
   passt es nur etwas kleiner neben Knopf und Menüsymbol. Mindesthöhe laut Logo-Paket: 18 px. */
@media (max-width: 380px) { .nav-logo img { height: 22px; } }
.nav-logo .logo-dark { display: none; }

.nav-main { align-self: stretch; }
.nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; height: 100%; }
.nav-links a {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--signup-text);   /* war weiß, als die Leiste über dem Hero lag */
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--signup-primary); }

/* Rechts in dieser Reihenfolge: Sprache, Login, Start-Button.
   Der Button steht immer da. Vorher war er über dem Hero unsichtbar und
   hielt nur seinen Platz frei; ganz rechts wäre das eine Lücke am Ende der
   Leiste. Mit der Basis-Polsterung stand er 54 px hoch in einer 64-px-Leiste
   und las sich als eigener Block statt als Leistenelement. */
.nav-cta { display: flex; align-items: center; gap: 0.75rem; }
.nav-cta .btn { padding: 0.45rem 1rem; font-size: 0.84rem; }
.nav-cta .nav-login { margin-right: 0.35rem; }

/* ---------- Aufklappmenüs der Hauptnavigation ----------
   Vier Gruppen statt sechs gleichrangiger Sprungmarken. Geöffnet wird mit
   der Maus beim Überfahren, mit Tastatur und Touch per Klick auf den
   Pfeil (main.js). Ohne JavaScript übernimmt :hover und :focus-within.
   Seit 2026-09-18 ist der Name selbst ein Link (Wunsch des Inhabers: „wenn
   ich auf Lösungen klicke, will ich auf die Seite kommen"), der Pfeil
   daneben ein eigener Knopf für das Untermenü: Funktionen und Über uns
   führen zu ihrer Sektion der Startseite, Lösungen zu den Firmenevents,
   Sicherheit zur DSGVO-Seite. */
.nav-direct { display: flex; align-items: center; height: 100%; }
.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-top { padding: 0.4rem 0; white-space: nowrap; }
/* Gleiche Zeilenhöhe für alles in der Leiste (seit 2026-09-20): die Kästen
   sind alle mittig, aber die Zeilenkästen waren unterschiedlich hoch, und
   dadurch saß der Text der Menüpunkte knapp 1 px höher als Sprache, Login und
   Knopf. Dem Inhaber ist genau das aufgefallen. */
.nav-top,
.nav-lang a,
.nav-login,
.nav-cta .btn { line-height: 1.2; }
.nav-item.is-open > .nav-top,
.nav-top[aria-current] { color: var(--signup-primary); }
.nav-top:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 4px; border-radius: 4px; }
.nav-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* So breit wie vorher Abstand plus Pfeil: die Leiste ist bei 1061 px
     knapp (Leitplanken, „Leiste"). */
  width: 1.15rem;
  height: 2rem;
  margin-left: 0.05rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--signup-text);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-trigger .chev { color: var(--signup-muted); transition: transform 0.2s ease, color 0.2s ease; }
.nav-trigger:hover,
.nav-item.is-open > .nav-trigger { color: var(--signup-primary); }
.nav-item.is-open > .nav-trigger .chev { color: var(--signup-primary); transform: rotate(180deg); }
.nav-trigger:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 4px; border-radius: 4px; }

/* Das Menü beginnt direkt an der Unterkante der Leiste. Der Abstand zur
   Karte ist padding und nicht margin: so bleibt die Fläche zwischen Knopf
   und Karte Teil des Menüpunkts, und die Maus verlässt ihn auf dem Weg
   nach unten nicht. */
.nav-dd {
  position: absolute;
  top: 100%;
  left: -0.9rem;
  padding-top: 6px;
  width: max-content;
  min-width: 17rem;
  max-width: 22rem;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.nav-item.is-open > .nav-dd,
html:not(.js) .nav-item:hover > .nav-dd,
html:not(.js) .nav-item:focus-within > .nav-dd {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.nav-dd-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--signup-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(20, 56, 30, 0.4);
}
.nav-links .nav-dd a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.75rem;
  border-radius: 9px;
}
.nav-dd-title { font-size: 0.9rem; font-weight: 650; color: var(--signup-text); transition: color 0.2s ease; }
.nav-dd-text { font-size: 0.8rem; font-weight: 450; line-height: 1.35; color: var(--signup-muted); }
.nav-links .nav-dd a:hover { background: var(--signup-tint); }
.nav-dd a:hover .nav-dd-title,
.nav-dd a[aria-current] .nav-dd-title { color: var(--signup-primary); }
.nav-links .nav-dd a:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: -2px; }

/* Gemeinsame Kachel (seit 2026-10-22, Wunsch des Inhabers nach dem Vorbild Parloa): In der
   Desktop-Leiste trägt nicht jedes Menü seine eigene Karte. Eine Kachel liegt dahinter
   (main.js setzt Größe und Lage) und gleitet beim Wechsel auf das nächste Menü. Beim ersten
   Öffnen klappt sie von oben auf und die Punkte erscheinen nacheinander; beim Wechsel kommt der
   neue Inhalt aus der Richtung der Bewegung (--dd-rein), der alte geht in die Gegenrichtung
   (--dd-raus). Ohne JavaScript und im Burger-Menü bleibt es bei den einzelnen Karten. */
.nav-dd-bg { display: none; }
@media (min-width: 1181px) {
  html.js .nav { --dd-rein: 0px; --dd-raus: 0px; }
  html.js .nav-dd-bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  html.js .nav-dd-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    border: 1px solid var(--signup-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px -18px rgba(20, 56, 30, 0.4);
    transform-origin: 50% 0;
    transform: translateY(-6px) scale(0.98);
    transition: transform 0.38s var(--ease-soft);
  }
  html.js .nav-dd-bg.is-visible { opacity: 1; transition: opacity 0.22s ease; }
  html.js .nav-dd-bg.is-visible::before { transform: none; }
  html.js .nav-dd-bg.is-moving {
    transition: opacity 0.22s ease, transform 0.38s var(--ease-soft),
      width 0.38s var(--ease-soft), height 0.38s var(--ease-soft);
  }
  html.js .nav-dd-list { background: transparent; border-color: transparent; box-shadow: none; }
  html.js .nav-dd { transform: none; transition: opacity 0.12s ease, visibility 0s linear 0.12s; }
  html.js .nav-dd .nav-dd-list { transform: translateY(-6px); transition: transform 0.12s ease; }
  html.js .nav.is-switching .nav-dd .nav-dd-list { transform: translateX(var(--dd-rein)); }
  html.js .nav.is-switching .nav-item.is-leaving > .nav-dd .nav-dd-list { transform: translateX(var(--dd-raus)); }
  html.js .nav-item.is-open > .nav-dd { opacity: 1; visibility: visible; transform: none; transition: opacity 0.24s ease 0.04s, visibility 0s; }
  html.js .nav-item.is-open > .nav-dd .nav-dd-list { transform: none; transition: transform 0.38s var(--ease-soft) 0.02s; }
  html.js .nav-dd-list > li { opacity: 0; transform: translateY(6px); transition: opacity 0.1s ease, transform 0.1s ease; }
  html.js .nav-item.is-open .nav-dd-list > li {
    opacity: 1;
    transform: none;
    transition: opacity 0.28s ease calc(0.05s + var(--i, 0) * 0.025s),
      transform 0.42s var(--ease-soft) calc(0.05s + var(--i, 0) * 0.025s);
  }
  html.js .nav.is-switching .nav-item.is-open .nav-dd-list > li { transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-backdrop, .nav-backdrop.is-visible { transition: none; }
  .nav-dd, .nav-item.is-open > .nav-dd { transition: none; transform: none; }
  html.js .nav-dd .nav-dd-list, html.js .nav-item.is-open > .nav-dd .nav-dd-list,
  html.js .nav.is-switching .nav-dd .nav-dd-list, html.js .nav-dd-list > li,
  html.js .nav-item.is-open .nav-dd-list > li { transition: none; transform: none; }
  html.js .nav-dd-bg, html.js .nav-dd-bg.is-moving, html.js .nav-dd-bg::before { transition: none; transform: none; }
  .nav-trigger .chev { transition: none; }
}

/* Beim Scrollen nur noch etwas kompakter und leicht abgesetzt */
.nav.scrolled {
  box-shadow: var(--shadow-sm);
  height: 56px;
}

.nav-burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--signup-dark);   /* war #fff, als die Leiste noch transparent über dem Hero lag */
  padding: 8px;
}

/* ---------- Hero (Stage-Gradient) ---------- */

.hero {
  position: relative;
  background: var(--grad-stage);
  color: #fff;
  /* Der Abstand unter der Leiste haengt an der FENSTERHOEHE, nicht an der
     Breite. Vorher stand hier 2.4vw: das ergab auf einem 1100er Fenster
     26 px und auf einem 1920er 34 px, obwohl der Platz, um den es geht,
     senkrecht ist. Ein breites, flaches Fenster bekam dadurch genauso viel
     Luft wie ein hohes. 72 px ist dieselbe Obergrenze wie auf dem Telefon,
     26 px der bisherige engste Wert: schmaler wird es nirgends. */
  padding: calc(var(--nav-h) + clamp(26px, 6vh, 72px)) 0 clamp(16px, 3vh, 40px);
  overflow: hidden;
}

/* Der Hero füllt mindestens den Bildschirm und zentriert seinen Inhalt
   senkrecht. Vorher war seine Höhe rein inhaltsgetrieben und hörte bei rund
   1030 px auf zu wachsen, weil Komposition, Bühnenhöhe und Abstand alle drei
   gedeckelt sind. Auf einem 2560x1440-Monitor blieben darunter 413 px leer,
   während die Überschrift gleichzeitig oben an der Leiste klebte: der ganze
   Rest sammelte sich unten. Jetzt verteilt er sich auf beide Seiten.

   min-height, nicht height: ist der Inhalt höher als der Bildschirm (kurzes
   Fenster), wächst der Hero normal weiter und es gibt nichts zu zentrieren.
   svh statt vh, weil vh auf dem Telefon die Adressleiste mitzählt.

   NICHT für .hero-compact: das sind die Seitenköpfe der Unterseiten, die
   sollen kurz bleiben. */
.hero:not(.hero-compact) {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Ohne diese Zeile fallen beide Kinder auf ihre Inhaltsbreite zusammen: sie
   tragen "margin: 0 auto", und ein auto-Margin auf der Querachse schaltet
   das Strecken im Flex-Container ab. Die Komposition (damals im Hero)
   schrumpfte dadurch von 1112 auf 306 px. max-width und die auto-Margins zentrieren weiterhin. */
.hero:not(.hero-compact) > .hero-inner,
.hero:not(.hero-compact) > .claims { width: 100%; }

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
}
.hero-glow.g1 { width: 560px; height: 560px; background: rgba(47, 160, 74, 0.18); top: -180px; right: -120px; }
.hero-glow.g2 { width: 420px; height: 420px; background: rgba(16, 118, 39, 0.16); bottom: 60px; left: -160px; }

/* Das feine 56-px-Raster der Komposition liegt jetzt auf jeder dunklen
   Bühne — der Grund, warum die Sektionen wie eine Zeichenfläche wirken und
   nicht wie eine eingefärbte Box. */
.hero::before,
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
}
.section-dark > .container { position: relative; z-index: 1; }

.hero-inner { position: relative; z-index: 1; text-align: center; }

/* Deutlich kleiner als die globale h1: unter dem Text stehen die drei
   Karten, und die sollen ohne Scrollen im Bild stehen. Der Hero ist hier
   Anmoderation, nicht Plakat. */
.hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); margin: 0 auto 0.7rem; max-width: 30ch; }

.hero .sub {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  color: rgba(255, 255, 255, 0.76);
  max-width: 38rem;
  margin: 0 auto 1.25rem;
}

.hero-actions { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.5rem; }

/* ---------- Hero-Karten: drei Aussagen mit Produktclip ----------
   Aufbau wie bei HubSpot: unter Tagline und Buttons drei Fotos mit je einer
   Aussage. Die Karte unter der Maus wird breiter, das Foto tritt zurück und
   darüber läuft ein Ausschnitt aus dem Demo-Video (assets/clips/, stumm, als
   Fenster über dem Foto). Auf dem Telefon eine Wischreihe; dort spielt die
   Karte, die gerade im Bild steht. Logik in main.js.

   Die Höhe hängt am Rest des Heros: auf flachen Fenstern stehen die Karten
   damit noch ganz über der Falz, auf hohen wachsen sie bis 620 px. */
.hero-home .hero-alt { margin-bottom: clamp(1.5rem, 4.5vh, 3rem); }

.claims {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.claims-track {
  display: flex;
  gap: 10px;
  height: clamp(300px, calc(100vh - var(--nav-h) - 21rem), 620px);
  height: clamp(300px, calc(100svh - var(--nav-h) - 21rem), 620px);
}

/* container-type: size, damit Fenster und Text in cqw/cqh mit der Karte
   rechnen: sie wird beim Aufklappen breiter, das Fenster soll mitwachsen,
   ohne über die Aussage zu laufen. */
.claim {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  border-radius: 18px;
  background: #0c2118;
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-panel);
  transition: flex-grow 0.7s var(--ease-out);
}
.claims.has-active .claim.is-active { flex-grow: 2.2; }

.claim-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 0.6s ease;
}
.claim.is-active .claim-photo { transform: scale(1.04); filter: brightness(0.5) saturate(0.85); }

/* Verlauf von unten, damit die weiße Aussage auf jedem Foto lesbar bleibt. */
.claim::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 13, 10, 0.9) 0%, rgba(5, 13, 10, 0.5) 30%, rgba(5, 13, 10, 0) 58%);
}

/* Das Fenster hat das Seitenverhältnis des Clips (1280 x 800, der Bildschirm
   des Laptops, 16 : 10) und ist so breit, wie es über der Aussage Platz hat:
   höchstens 88 % der Karte und nie höher als die Karte abzüglich 8,5 rem für
   den Text darunter. Die helle Kante liegt als Schatten über dem Bild statt
   als Rahmen daneben: so füllt das Video das Fenster genau. */
.claim-screen {
  position: absolute;
  z-index: 2;
  top: clamp(12px, 5cqh, 28px);
  left: 50%;
  width: min(88cqw, calc((100cqh - 8.5rem) * 1.6));
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 18px) scale(0.94);
  transition: opacity 0.4s ease, transform 0.7s var(--ease-out);
}
.claim.is-active .claim-screen {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0.16s;
}
.claim-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.claim-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }

.claim-title {
  position: absolute;
  z-index: 3;
  left: clamp(16px, 7cqw, 28px);
  right: clamp(16px, 7cqw, 28px);
  bottom: clamp(16px, 6cqh, 26px);
  max-width: 22ch;
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}
.claim.is-active .claim-title { right: 64px; }

/* Anhalten und Abspielen. Für die Maus reicht Überfahren; der Knopf ist
   für Tastatur und Touch da und für alle, die Bewegung reduziert haben:
   bei ihnen startet nichts von selbst. */
.claim-toggle {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--chip-line);
  background: rgba(5, 13, 10, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.2s ease;
}
.claim.is-active .claim-toggle,
.claim-toggle:focus-visible { opacity: 1; }
.claim-toggle:hover { background: rgba(5, 13, 10, 0.8); }
.claim-toggle:focus-visible { outline: 2px solid var(--signup-secondary); outline-offset: 2px; }
.claim-toggle .i-pause,
.claim.is-playing .claim-toggle .i-play { display: none; }
.claim.is-playing .claim-toggle .i-pause { display: block; }

/* Telefon und Tablet hochkant: eine Reihe zum Wischen statt drei schmaler
   Streifen. Die Karten wachsen hier nicht; es spielt die, die im Bild steht. */
@media (max-width: 860px) {
  .claims { padding: 0; }
  .claims-track {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 0 16px 4px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .claims-track::-webkit-scrollbar { display: none; }
  .claim {
    flex: 0 0 min(84%, 400px);
    aspect-ratio: 1 / 1.08;
    scroll-snap-align: center;
    transition: none;
  }
  .claims.has-active .claim.is-active { flex-grow: 0; }
  .claim-title { font-size: 1.12rem; }
  .claim-screen { width: min(88cqw, calc((100cqh - 7.5rem) * 1.6)); }
}
/* Telefone: festes Fenster, 224 x 140 CSS-px. Für genau diese Größe gibt es
   jedes Video in 2- und 3-facher Pixeldichte (-m2, -m3; main.js wählt). Der
   Browser zeigt es dann Pixel für Pixel und muss nicht skalieren; jedes
   Skalieren macht feine Schrift im Video unscharf (gemessen 2026-09-19:
   so dargestellt gleicht das Video der Live-Animation, verkleinert nicht). */
@media (max-width: 560px) {
  .claim-screen { width: min(224px, 88cqw); }
}

@media (prefers-reduced-motion: reduce) {
  .claim, .claim-photo, .claim-screen, .claim.is-active .claim-screen { transition: none; }
  .claim.is-active .claim-photo { transform: none; }
}

/* ---------- Heller Hero der Startseite (seit 2026-09-17) ----------
   Auf Wunsch des Inhabers: das tiefe Grün-Schwarz wirkte über den Fotos der
   Karten zu schwer, die Startseite soll einladend aussehen. Weiß wie bei
   HubSpot, ohne Raster und ohne Farbverlauf; die Farbe kommt aus den Fotos
   und dem grünen Button. Nur der Hero der Startseite: die Seitenköpfe der
   Unterseiten (.hero-compact) und die dunklen Sektionen bleiben beim
   Bühnenverlauf. Direkt darunter steht die Komposition wieder auf Dunkel,
   der Wechsel ist gewollt.

   Satz nach dem Vorbild HubSpot: die Tagline groß und zweizeilig, die
   Subline breiter, zwei gleich große Buttons nebeneinander. Vorher stand
   „Demo ansehen" als Textlink unter einem kleinen Button, weil unter dem
   Text die Komposition über die Falz passen musste. Die Karten dürfen
   jetzt, wie die Fotos bei HubSpot, unten von der Falz angeschnitten
   werden. */
.hero.hero-home { background: #fff; color: var(--signup-text); }
.hero-home::before,
.hero-home .hero-glow { display: none; }

/* Tagline in Newsreader wie die Serife bei HubSpot, Subline bleibt Inter.
   Schnitt 450 statt der 900 von Inter: eine Serife trägt die Größe allein.
   Farbe ein fast schwarzes Grau, kein reines Schwarz: #000 ist auf Weiß zu
   hart und flimmert an den feinen Linien der Serife. Verglichen mit Grün
   (#107627) und Dunkelgrün (#14381e), Entscheidung des Inhabers 2026-09-17.
   Grün bleibt damit allein dem Button und dem Schlusspunkt. */
.hero-home h1 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 450;
  letter-spacing: -0.012em;
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: 1.06;
  max-width: 14em;
  margin: 0 auto clamp(0.9rem, 1.6vw, 1.4rem);
  color: #141414;
}
.hero-home .hl-dot { color: var(--signup-primary); }
/* Auf den Fotos bleibt der Punkt hellgrün: dort liegt er auf dem dunklen Verlauf. */
.hero-home .claim-title .hl-dot { color: var(--signup-secondary); }

/* Tagline-Animation (main.js, „Tagline"): der Schlusspunkt rast heran, aus
   ihm springt eine stilisierte Anmeldeseite, das signUP-Zeichen stempelt sie ab,
   dann zieht sie sich in den Punkt zurück. Die Hilfselemente liegen absolut
   in der H1 und verschieben nichts; Punkt und Spur laufen hinter der Schrift
   durch (isolation + z-index -1), die Karte steht davor. Das letzte Wort und
   der Punkt bleiben zusammen, weil der Punkt inline-block ist. */
.hero-home h1 { position: relative; isolation: isolate; }
.hero-home h1 .hl-last { white-space: nowrap; }
.hero-home h1 .hl-dot { display: inline-block; }
.tagline-runner,
.tagline-trail,
.tagline-card { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; }
.tagline-runner,
.tagline-trail { z-index: -1; }
.tagline-runner { border-radius: 50%; background: var(--signup-primary); }
.tagline-trail {
  border-radius: 999px;
  transform-origin: 100% 50%;
  background: linear-gradient(to right, rgba(16, 118, 39, 0), rgba(16, 118, 39, 0.28));
}
/* Die Karte rechnet in em: ihre Schriftgröße ist ein Zehntel ihrer Breite
   (main.js), die Höhe acht Zehntel. */
.tagline-card {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.8em;
  line-height: 0;
  background: #fff;
  border: 1px solid var(--signup-border);
  border-radius: 0.9em;
  box-shadow: 0 1.4em 2.6em -1.2em rgba(20, 56, 30, 0.45);
  transition: border-color 0.25s ease;
}
.tagline-card.is-done { border-color: var(--signup-primary); }
.tc-bar, .tc-title, .tc-field, .tc-fill, .tc-btn { display: block; }
.tc-bar { height: 0.55em; border-radius: 0.3em; background: var(--signup-primary); }
.tc-title { height: 0.55em; width: 58%; border-radius: 0.3em; background: #dfe7e1; }
.tc-field { height: 1.15em; padding: 0.3em; border: 1px solid #dfe7e1; border-radius: 0.35em; }
.tc-fill { height: 100%; width: 62%; border-radius: 0.2em; background: #cfdcd2; transform: scaleX(0); transform-origin: 0 50%; }
.tc-field + .tc-field .tc-fill { width: 44%; }
.tc-btn { width: 45%; height: 0.9em; margin-top: auto; border-radius: 999px; background: var(--signup-primary); }
/* Das signUP-Zeichen (Ticket, 54 x 34) als Stempel an der unteren rechten
   Ecke der Karte, halb über den Rand. Das SVG hat ringsum Luft für das
   Andocken (viewBox -6 -4 66 42); die Teile bewegt main.js. */
.tc-mark {
  position: absolute;
  right: -1.9em;
  bottom: -1.6em;
  width: 6.6em;
  height: 4.2em;
  max-width: none;
  overflow: visible;
}
.hero-home .sub {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  max-width: 46rem;
  margin: 0 auto clamp(1.5rem, 2.6vw, 2.25rem);
  color: var(--signup-muted);
}
.hero-home .hero-actions { gap: 0.75rem; margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
.hero-home .hero-actions .btn-lg { padding: 1rem 2.1rem; font-size: 1.06rem; }
.hero-home .hero-actions .btn-secondary { border: 1.5px solid var(--signup-primary); }
.hero-home .claims-track { height: clamp(360px, 36vw, 580px); }

@media (max-width: 1060px) {
  .hero-home .hero-actions .btn-lg { padding: 0.85rem 1.35rem; font-size: 1rem; }
}
@media (max-width: 860px) {
  .hero-home .claims-track { height: auto; }
  /* An der Breite, nicht fest: „Event-Anmeldungen," muss bei 320 px noch in
     eine Zeile passen, sonst bricht das Wort am Bindestrich. */
  .hero-home h1 { font-size: clamp(1.5rem, 7.9vw, 2.6rem); }
}
/* Beide Buttons nebeneinander bis 360 px; bei 320 px stehen sie untereinander. */
@media (max-width: 400px) {
  .hero-home .hero-actions { gap: 0.5rem; }
  .hero-home .hero-actions .btn-lg { padding: 0.8rem 1.05rem; font-size: 0.95rem; }
}

.hero-home .claim {
  background: var(--signup-tint);
  border-color: rgba(20, 56, 30, 0.08);
  box-shadow: 0 28px 50px -30px rgba(20, 56, 30, 0.45), 0 2px 6px rgba(20, 56, 30, 0.06);
}

/* ---------- Browser-Rahmen ---------- */

/* Nur noch eine Ausprägung: der randlose Zuschnitt gehörte zum
   Produkt-Shot am Hero-Fuß, den es nicht mehr gibt. */
.browser-frame {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--signup-border);
  box-shadow: var(--shadow-lg);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  background: #f3f6f3;
  border-bottom: 1px solid var(--signup-border);
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: #d7e0d8;
}
.browser-url {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--signup-border);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  color: var(--signup-muted);
  padding: 0.28rem 0.9rem;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.browser-url .lock { color: var(--signup-primary); margin-right: 4px; }

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

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0;
  transform: translateY(36px) scale(0.965);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-scale.in-view { opacity: 1; transform: none; }

/* ---------- Warum signUP: zwei Wege als Miniaturen (seit 2026-09-18) ----------
   Variante B aus drei Entwürfen, vom Inhaber gewählt. Jeder Weg zeigt sein
   Problem als kleines Bild im Stil des Kartenstapels: eine graue
   Standardseite auf fremder Adresse („Powered by EventTool", erfunden, damit
   kein echtes Produkt gemeint ist) und ein Projektplan über acht Wochen.
   Darunter löst die grüne Karte beides auf, mit einer Eventseite auf der
   eigenen Domain. Die Farben der Miniaturen außerhalb der Marke (Blau des
   Tools, Orange der Nachbeauftragung, Navy der Kundenmarke) stehen für
   fremde Marken, nicht für signUP. */
.ico-x, .ico-check {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ico-x { background: rgba(20, 56, 30, 0.07); color: var(--signup-muted); }
.ico-check { background: var(--signup-tint); color: var(--signup-primary); }
.ico-x svg, .ico-check svg { width: 0.7rem; height: 0.7rem; }

.ways {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
.way {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.75rem;
  background: var(--signup-surface);
  border: 1px solid var(--signup-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
}
.way-art {
  position: relative;
  height: 14.5rem;
  margin-bottom: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef2ef;
  overflow: hidden;
}
.way-body { padding: 0 0.75rem; }
.way h3 { font-size: var(--fs-h3); margin-bottom: 0.25rem; }
.way-sub { font-size: 0.92rem; color: var(--signup-muted); margin-bottom: 1rem; }
.way-cons { list-style: none; display: grid; gap: 0.6rem; }
.way-cons li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; line-height: 1.45; color: var(--signup-muted); }
.way-cons .ico-x { margin-top: 0.15rem; }
.ways-or { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.ways-or::before, .ways-or::after {
  content: '';
  flex: 1;
  width: 1.5px;
  background: linear-gradient(transparent, rgba(20, 56, 30, 0.18), transparent);
}
.ways-or span { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 1.35rem; color: var(--signup-dark); }
.way-flag {
  position: absolute;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--signup-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.way-flag-tool { left: 8%; top: 12%; }
.way-flag-plan { right: 6%; top: 9%; }
.way-flag-site { right: 6%; top: -10px; background: #fff; color: var(--signup-primary); }

/* Miniaturen: gemeinsame Fensterleiste */
.mk-bar { display: flex; align-items: center; gap: 4px; padding: 7px 9px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; }
.mk-bar i { width: 6px; height: 6px; border-radius: 50%; background: #d1d5db; }
.mk-bar span { margin-left: 8px; font-size: 9px; line-height: 1.4; color: #6b7280; background: #fff; border: 1px solid #e5e7eb; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }

/* Fertiges Tool: graue Standardseite */
.mk-tool { width: 78%; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 30px -14px rgba(20, 56, 30, 0.35); transform: rotate(-2deg); }
.mk-tool-page { padding: 10px 12px 8px; display: grid; gap: 7px; }
.mk-tool-hero { height: 38px; border-radius: 6px; background: linear-gradient(120deg, #c7d2e0, #aebccf); }
.mk-tool-line { height: 5px; width: 70%; border-radius: 3px; background: #e5e7eb; }
.mk-tool-line.is-short { width: 48%; }
.mk-tool-field { height: 16px; border-radius: 4px; border: 1px solid #d1d5db; }
.mk-tool-btn { justify-self: start; font-size: 8px; line-height: 1.4; font-weight: 700; color: #fff; background: #3b6fd8; border-radius: 4px; padding: 4px 10px; }
.mk-tool-powered { justify-self: center; font-size: 8px; line-height: 1.4; color: #9ca3af; margin-top: 2px; }

/* Individuell programmiert: Projektplan */
.mk-plan { width: 86%; background: #fff; border-radius: 10px; box-shadow: 0 14px 30px -14px rgba(20, 56, 30, 0.35); padding: 10px 12px 12px; display: grid; gap: 6px; transform: rotate(1.5deg); }
.mk-plan-row { display: grid; grid-template-columns: 58px repeat(8, minmax(0, 1fr)); align-items: center; gap: 0 3px; }
.mk-plan-row > span { font-size: 8px; line-height: 1.3; font-weight: 700; color: var(--signup-muted); white-space: nowrap; }
.mk-plan-head > b { font-size: 7px; line-height: 1.3; font-weight: 800; color: #9aa79d; text-align: center; letter-spacing: 0.04em; white-space: nowrap; }
.mk-plan-row > i { display: block; height: 10px; border-radius: 3px; background: #7d9c92; }
.mk-plan-row > i.is-dark { background: var(--signup-dark); }
.mk-plan-row > i.is-again { background: repeating-linear-gradient(135deg, #d9480f 0 4px, #f08c5a 4px 8px); }
.mk-plan-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed #e5e7eb; }
.mk-plan-foot span { font-size: 8px; line-height: 1.3; font-weight: 700; color: var(--signup-muted); }
.mk-plan-foot b { font-size: 8px; line-height: 1.3; font-weight: 800; color: #d9480f; text-align: right; }

.ways-resolve {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  padding: 2rem 2.25rem;
  border-radius: var(--radius-panel);
  background: linear-gradient(110deg, #0c5a1e, #1a8f37);
  color: #fff;
  box-shadow: 0 24px 48px -20px rgba(16, 118, 39, 0.55);
  overflow: hidden;
}
.ways-resolve h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  color: #fff;
  margin-bottom: 0.6rem;
}
.ways-resolve h3 .hl-dot { color: #8fe0a0; }
.ways-resolve p { color: rgba(255, 255, 255, 0.88); margin-bottom: 1.2rem; }
.ways-resolve .btn { background: #fff; color: var(--signup-primary); }
.ways-resolve .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(20, 56, 30, 0.28); }
.ways-resolve-art { position: relative; }
.mk-site { width: 100%; max-width: 22rem; margin: 0 auto; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.5); transform: rotate(-1.5deg); }
.mk-site .mk-bar span { color: var(--signup-dark); font-weight: 600; border-color: transparent; }
.mk-site-hero { background: linear-gradient(160deg, #1f2a44, #121a2e); padding: 14px 14px 12px; }
.mk-site-hero b { display: block; font-size: 13px; line-height: 1.3; font-weight: 900; color: #fff; }
.mk-site-hero span { font-size: 8px; line-height: 1.4; color: rgba(255, 255, 255, 0.7); }
.mk-site-body { padding: 10px 14px 12px; display: grid; gap: 7px; }
.mk-site-field { height: 15px; border-radius: 6px; border: 1px solid #d8dde8; }
.mk-site-btn { justify-self: start; font-size: 8px; line-height: 1.4; font-weight: 800; color: #fff; background: #e8590c; border-radius: 999px; padding: 4px 11px; }

@media (max-width: 860px) {
  .ways { grid-template-columns: minmax(0, 1fr); }
  .ways-or { flex-direction: row; }
  .ways-or::before, .ways-or::after {
    height: 1.5px;
    width: auto;
    background: linear-gradient(90deg, transparent, rgba(20, 56, 30, 0.18), transparent);
  }
  .way-art { height: 12.5rem; }
  .ways-resolve { grid-template-columns: minmax(0, 1fr); padding: 1.6rem 1.4rem; }
}

/* ---------- Firmenevents: drei Wege im Vergleich (seit 2026-09-18) ----------
   Variante C aus den Entwürfen für „Warum signUP", vom Inhaber für die
   Lösungen gewünscht. Ein Raster mit Zeilen als display: contents, damit
   die Tabellenrollen (role="row" usw.) erhalten bleiben. Die grüne Spalte
   ist eine eigene Fläche hinter der vierten Spalte, oben und unten etwas
   überstehend. Schmal (bis 760 px) wird jede Zeile ein Block mit den drei
   Antworten untereinander, die Spaltennamen stehen dann vor jeder Antwort. */
.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;
}
.compare { max-width: 64rem; margin: 0 auto; }
.compare-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) repeat(3, minmax(0, 1fr));
  background: var(--signup-surface);
  border: 1px solid var(--signup-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
}
.compare-row { display: contents; }
.compare-us-col {
  position: absolute;
  inset: -14px 0;
  grid-column: 4;
  grid-row: 1 / span 7;
  border-radius: 18px;
  background: linear-gradient(170deg, #1a8f37, #0c5a1e);
  box-shadow: 0 24px 48px -18px rgba(16, 118, 39, 0.55);
}
.compare-head { position: relative; padding: 1.4rem 1.2rem 1.1rem; font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--signup-dark); }
.compare-head small { display: block; margin-top: 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--signup-muted); }
.compare-head.is-us { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 1.55rem; color: #fff; }
.compare-head.is-us small { font-family: var(--font); color: rgba(255, 255, 255, 0.75); }
.compare-short { display: none; }
.compare-label, .compare-cell {
  position: relative;
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--signup-border);
}
.compare-label { display: flex; align-items: center; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signup-dark); }
.compare-cell { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; line-height: 1.4; color: var(--signup-muted); }
.compare-cell .ico-x, .compare-cell .ico-check { margin-top: 0.05rem; }
.compare-cell.is-us { color: #fff; font-weight: 600; border-top-color: rgba(255, 255, 255, 0.16); }
.compare-cell.is-us .ico-check { background: rgba(255, 255, 255, 0.18); color: #fff; }
.compare-foot { position: relative; padding: 1.1rem 1.2rem 1.5rem; }
.compare-foot .btn { background: #fff; color: var(--signup-primary); }
.compare-foot .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(20, 56, 30, 0.28); }

@media (max-width: 760px) {
  .compare-grid { display: block; padding: 0.4rem 1rem 1.2rem; }
  .compare-us-col { display: none; }
  .compare-row { display: grid; gap: 0.5rem; padding: 1rem 0; border-top: 1px solid var(--signup-border); }
  /* Die Kopfzeile bleibt für Screenreader da; sichtbar stehen die
     Spaltennamen vor jeder Antwort. */
  .compare-row.compare-headrow {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .compare-row:nth-child(3) { border-top: 0; }
  .compare-label, .compare-cell { padding: 0; border-top: 0; }
  .compare-label { margin-bottom: 0.15rem; }
  .compare-cell::before { content: attr(data-col); flex: none; width: 5.5rem; font-size: 0.78rem; font-weight: 700; color: var(--signup-dark); padding-top: 0.05rem; }
  .compare-cell.is-us {
    margin-top: 0.2rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: linear-gradient(110deg, #0c5a1e, #1a8f37);
  }
  .compare-cell.is-us::before { color: #fff; }
  .compare-footrow { border-top: 0; padding-bottom: 0; }
  .compare-footrow .compare-foot { display: none; }
  .compare-footrow .compare-foot.is-us { display: block; padding: 0; }
  .compare-foot .btn { background: var(--signup-primary); color: #fff; }
}

/* ---------- Story-Rail (So funktioniert's) ---------- */

.story { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: clamp(2rem, 5vw, 4.5rem); }

.story-steps { display: flex; flex-direction: column; counter-reset: schritt; }

.story-step {
  position: relative;
  padding: 1.5rem 0 1.5rem 4.1rem;
  /* Fortlaufend statt binaer: der Schritt hellt auf, waehrend der Abspielkopf
     naeher kommt. Vorgabe 1, damit ohne JS alles lesbar bleibt. */
  opacity: calc(0.42 + 0.58 * var(--lit, 1));
}

/* Nummernplakette statt Punkt: sie sagt, der wievielte Schritt das ist, und
   traegt den Fortschritt (offen / erledigt / aktiv) sichtbar mit. */
.story-step::before {
  counter-increment: schritt;
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 2px solid var(--signup-border);
  color: var(--signup-muted);
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
              color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.story-step.is-done::before {
  background: var(--signup-tint);
  border-color: var(--signup-primary);
  color: var(--signup-primary);
}
.story-step.active::before {
  background: var(--signup-primary);
  border-color: var(--signup-primary);
  color: #fff;
  box-shadow: 0 0 0 6px var(--signup-tint);
}

/* Schiene zwischen den Plaketten, pro Schritt ein Stueck: so kann der bereits
   gelaufene Teil gruen werden, statt dass eine durchgehende Linie alles gleich
   behandelt. Der letzte Schritt fuehrt keine Schiene mehr. */
.story-step::after {
  content: '';
  position: absolute;
  left: calc(1.3rem - 1px);
  top: 4.15rem;
  bottom: -0.6rem;
  width: 2px;
  /* Die Fuellkante wandert mit dem Scrollen durch das Segment. Ein harter
     Farbstopp ist hier richtig: er IST die Front, die durchlaeuft. */
  background: linear-gradient(to bottom,
    var(--signup-primary) 0 calc(var(--seg, 0) * 100%),
    rgba(20, 56, 30, 0.15) calc(var(--seg, 0) * 100%) 100%);
}
.story-step:last-child::after { display: none; }

/* Screenshots in den Steps: nur mobil sichtbar (Desktop nutzt das Sticky-Panel).
   Muss VOR der 960px-Media-Query stehen, damit deren display:block gewinnt. */
.story-step .step-shot { display: none; }

.story-step .step-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signup-primary);
}
.story-step h3 { margin: 0.4rem 0 0.5rem; font-size: var(--fs-h3-lg); }
.story-step p { color: var(--signup-muted); font-size: 0.98rem; max-width: 26rem; }

.story-visual { position: relative; }
.story-sticky { position: sticky; top: calc(64px + 2.5rem); }

.story-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  pointer-events: none;
}
.story-panel.active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
/* Die Panels zeigen seit 2026-09-20 die Clips aus der App-Demo statt Standbilder. */
.browser-frame video { display: block; width: 100%; height: auto; }

/* ---------- Video-Sektion (dunkle Bühne) ---------- */

.section-dark {
  background: var(--grad-stage);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.section-dark .eyebrow { color: var(--signup-secondary); }
.section-dark .lead { color: rgba(255, 255, 255, 0.72); }

/* ---------- Sprachumschalter in der Navigation ----------
   Zwei Textlinks „DE | EN", ganz links in der .nav-cta, vor
   Login und Start-Button. Vorher ein Aufklappmenü mit Flaggen: bei zwei
   Sprachen ist ein Menü ein Klick zu viel, und die Kürzel brauchen keine
   Flagge. Die aktive Sprache trägt aria-current, Farbe UND einen stärkeren
   Schnitt, damit der Zustand nicht allein an der Farbe hängt. Der Trenner
   steht senkrecht; ein waagerechter kurzer Strich läse sich als
   Gedankenstrich. */
.nav-lang,
.nav-lang-inline { display: flex; align-items: center; gap: 0.55rem; }
.nav-lang a {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--signup-muted);
  padding: 0.3rem 0.1rem;
  transition: color 0.2s ease;
}
.nav-lang a:hover { color: var(--signup-primary); }
.nav-lang a[aria-current],
.nav-lang-inline a[aria-current] { color: var(--signup-primary); font-weight: 800; }
.nav-lang a:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 3px; border-radius: 4px; }
.nav-lang-sep { width: 1px; height: 14px; background: #cfdcd2; }

/* Im aufgeklappten Menü steht die Sprache als eigene Zeile, statt sich oben
   in der Leiste mit Logo, CTA und Burger um den Platz zu streiten. */
.nav-lang-inline { display: none; }

/* ---------- Login zur App ----------
   Ab 1061 px ein Textlink zwischen Sprache und Start-Button, darunter eine
   eigene Zeile im aufgeklappten Menü, wie beim Sprachumschalter: in der
   schmalen Leiste stritte er sich sonst mit Logo, CTA und Burger um den
   Platz.

   „Login", nicht „Anmelden": auf einer Seite über Event-Anmeldungen liest
   sich „Anmelden" neben „Jetzt starten" wie die Anmeldung zu etwas. Das Wort
   ist außerdem deutlich breiter. */
.nav-login {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--signup-text);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-login:hover { color: var(--signup-primary); }
.nav-login:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 4px; border-radius: 4px; }
.nav-login-inline { display: none; }
.nav-login-inline a { display: inline-flex; align-items: center; gap: 0.55rem; }

/* Platz in der Leiste: die Abstände wachsen mit der Breite, von 20 und 24 px
   bei 1061 px auf die vollen 28 und 32 px ab 1117 px. Gerechnet ist mit
   einer klassischen Scrollleiste von 17 px, wie Windows sie zeigt. Nur ab
   1061 px, darunter gilt der Burger. Zahlen in docs/website-leitplanken.md. */
@media (min-width: 1181px) {
  .nav-links { gap: clamp(0.65rem, calc(10px + (100vw - 1181px) / 10), 2rem); }
  /* Dezentere Leiste (seit 2026-10-22, Wunsch des Inhabers nach dem Vorbild Parloa): kleinere
     und leichtere Schrift, gedämpfte Farbe, kleinere Pfeile, mehr Luft zwischen den Punkten.
     Aktiver, offener und überfahrener Punkt werden grün wie bisher. */
  .nav-links > li > .nav-top, .nav-login { font-size: 0.875rem; font-weight: 500; color: #33443a; }
  .nav-links > li > .nav-top:hover, .nav-links > .nav-item.is-open > .nav-top,
  .nav-links > li > .nav-top[aria-current], .nav-login:hover { color: var(--signup-primary); }
  .nav-trigger .chev { width: 10px; height: 10px; }
  .nav-lang a { font-size: 0.78rem; font-weight: 500; }
  .nav-lang a[aria-current] { font-weight: 700; }
  .nav-inner { gap: clamp(0.85rem, calc(14px + (100vw - 1181px) / 10), 1.5rem); }
}

.video-wrap { position: relative; max-width: 940px; margin: 0 auto; }

/* Die Video-Bühne trägt dieselben Kanten wie der Browserrahmen in der
   Komposition: Panelradius, tiefer weicher Schatten, dazu zwei Eckwinkel
   als technischer Anriss. */
.video-frame {
  position: relative;
  border-radius: var(--radius-panel);
  overflow: hidden;
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-stage);
}
.video-wrap { position: relative; }
.video-wrap::before,
.video-wrap::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border: 0 solid var(--signup-secondary);
}
.video-wrap::before { left: -12px; top: -12px; border-top-width: 1px; border-left-width: 1px; }
.video-wrap::after { right: -12px; bottom: -12px; border-bottom-width: 1px; border-right-width: 1px; }
.video-frame video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: pointer; }

.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 36, 21, 0.32);
  border: 0;
  cursor: pointer;
  transition: background 0.3s ease, opacity 0.3s ease;
}
.video-play:hover { background: rgba(12, 36, 21, 0.18); }
.video-play .play-circle {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  color: var(--signup-primary);
  box-shadow: var(--shadow-glow);
  transition: transform 0.25s ease;
}
.video-play:hover .play-circle { transform: scale(1.07); }
.video-wrap.playing .video-play { opacity: 0; pointer-events: none; }
/* Nach dem ersten Start übernehmen die nativen Controls dauerhaft */
.video-wrap.started .video-play { display: none; }

.video-caption {
  text-align: center;
  margin-top: 1.4rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Demo-Seite (demo.html, en/demo.html), seit 2026-09-18 ----------
   Das Video stand bis dahin als eigene Sektion auf der Startseite; der
   Inhaber wollte es auf einer eigenen Seite. Dunkler Seitenkopf wie ein
   Kinosaal, daneben die neun Kapitel des Videos: ein Klick springt an die
   Stelle, die laufende ist markiert (main.js, „Demo-Video"). Die Startzeiten
   sind aus dem Video gemessen (Wechsel der Schritt-Überschrift, in DE und EN
   gleich). */
.hero-demo { padding-bottom: clamp(56px, 8vw, 104px); }
.demo-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
}
.demo-stage .video-wrap { max-width: none; margin: 0; }
.chapters { text-align: left; }
.chapters-h { margin-bottom: 0.8rem; font-family: var(--font); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.chapters ol { list-style: none; display: grid; gap: 0.35rem; }
.chapter {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.chapter:hover { background: var(--panel-bg); border-color: var(--panel-line); }
.chapter:focus-visible { outline: 2px solid var(--signup-secondary); outline-offset: 2px; }
.chapter-num {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.75);
}
.chapter-text b { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: #fff; }
.chapter-text small { display: block; margin-top: 0.15rem; font-size: 0.8rem; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.chapter-time { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; padding-top: 0.2rem; }
/* Die Beschreibung nur beim laufenden Kapitel: sonst wird die Liste höher als das Video. */
.chapter:not(.is-current) .chapter-text small { display: none; }
.chapter.is-current { background: var(--panel-bg); border-color: var(--panel-line); }
.chapter.is-current .chapter-num { background: var(--signup-secondary); border-color: transparent; color: #0c2118; }
.next-links.next-links-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; margin-top: 0; }
@media (max-width: 1000px) {
  .demo-stage { grid-template-columns: minmax(0, 1fr); }
  .chapters ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter:not(.is-current) .chapter-text small { display: block; }
}
@media (max-width: 760px) {
  .chapters ol,
  .next-links.next-links-3 { grid-template-columns: minmax(0, 1fr); }
  .chapter:not(.is-current) .chapter-text small { display: none; }
}

/* ---------- Feature-Grid ---------- */

/* Vier Karten entlang der Phasen, nicht sechs gleichrangige Kacheln: die
   Überschrift kündigt einen Lebenszyklus an, also soll das Raster einen
   zeigen. Jede Karte ist eine Spalte mit fester Reihenfolge — Artefakt,
   Phase, Titel, Stichpunkte, Ziel — und der Link sitzt durch margin-top:auto
   auf derselben Grundlinie wie in den Nachbarkarten, egal wie lang der Text
   ist. Zwei mal zwei statt vier nebeneinander: bei vier Spalten bliebe pro
   Karte zu wenig Breite, die Stichpunkte würden auf jeder Zeile umbrechen. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.feature-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.4rem;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Das Artefakt, von dem die Karte spricht — gebaut, nicht geschraubt:
   bleibt in der Marke, lädt nichts nach und veraltet nicht mit der App. */
.fc-art {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 82px;
  justify-content: center;
  padding: 0.9rem 1rem;
  margin-bottom: 2rem;   /* war 1,2rem: zwischen Illustration und Phase wirkte es gestaucht */
  border-radius: 12px;
  background: #f4f8f5;
  border: 1px solid var(--signup-border);
}

.fc-swatches { display: flex; gap: 0.4rem; }
.fc-swatches i { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(20, 56, 30, 0.12); }
.fc-tokens { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fc-tokens span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--signup-muted);
  background: #fff;
  border: 1px solid var(--signup-border);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

.fc-mail {
  display: flex;
  max-width: 100%;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.74rem;
  background: #fff;
  border: 1px solid var(--signup-border);
  border-radius: 8px;
  padding: 0.32rem 0.7rem;
}
.fc-mail span { flex: none; font-weight: 700; color: var(--signup-muted); letter-spacing: 0.04em; }
/* min-width:0 ist hier Pflicht: ein Flex-Kind schrumpft ohne das nicht unter
   seine Textbreite, und text-overflow greift nie — die Karte wird stattdessen
   breiter als das Fenster. */
.fc-mail b {
  min-width: 0;
  font-weight: 600;
  color: var(--signup-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fc-langs { display: flex; gap: 0.3rem; }
.fc-langs i {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--signup-muted);
  background: #fff;
  border: 1px solid var(--signup-border);
  border-radius: 999px;
  padding: 0.24rem 0.6rem;
}
.fc-langs i.is-on { background: var(--signup-primary); border-color: transparent; color: #fff; }
.fc-addr {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--signup-muted);
  background: #fff;
  border: 1px solid var(--signup-border);
  border-radius: 999px;
  padding: 0.26rem 0.7rem;
}
.fc-addr b { width: 5px; height: 5px; border-radius: 50%; background: var(--signup-secondary); flex: none; }

.fc-bar { display: flex; gap: 3px; height: 22px; }
.fc-bar i { border-radius: 4px; }
.fc-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; }
.fc-legend span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; color: var(--signup-muted); }
.fc-legend b { width: 8px; height: 8px; border-radius: 3px; flex: none; }

.fc-phase {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signup-primary);
  margin-bottom: 0.45rem;
}
.feature-card h3 { font-size: var(--fs-h3); line-height: 1.3; margin-bottom: 0.9rem; }

/* Gestrichelt statt durchgezogen: die Linien gliedern die Karte, sie
   trennen keine eigenständigen Objekte. */
.fc-list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.3rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--signup-border);
}
.fc-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--signup-muted);
}
/* Runder Punkt statt Haarlinie. Die Linie war zwar kein Zeichen, sondern ein
   gezeichneter Balken, las sich aber als Gedankenstrich und machte die Seite
   genau so strichlastig, wie sie nicht sein soll. Gezeichnete zaehlen mit. */
.fc-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signup-primary);
}

.fc-more {
  margin-top: auto;
  padding-top: 0.95rem;
  border-top: 1px solid var(--signup-border);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--signup-primary);
}
.fc-more svg { transition: transform 0.25s var(--ease-out); }
.fc-more:hover svg { transform: translateX(3px); }
.fc-more:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 3px; border-radius: 4px; }

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--signup-tint);
  color: var(--signup-primary);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
.feature-card h3 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.feature-card p { color: var(--signup-muted); font-size: 0.93rem; }

/* ---------- Feature-Deep-Dive (alternierende Reihen) ---------- */

.deep-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.deep-row + .deep-row { margin-top: clamp(4rem, 7vw, 6.5rem); }
.deep-row.flip .deep-text { order: 2; }
.deep-row.flip .deep-media { order: 1; }

.deep-text h3 { font-size: var(--fs-h2-sub); margin-bottom: 0.8rem; }
.deep-text p { color: var(--signup-muted); margin-bottom: 1.2rem; }
.deep-text ul { list-style: none; display: grid; gap: 0.6rem; }
.deep-text li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; }
.deep-text li svg { flex: none; margin-top: 4px; color: var(--signup-primary); }

/* ---------- Erfahrung (anonymisierte Kategorien + Zahlen) ---------- */

.exp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.exp-stat { text-align: center; padding: 2.2rem 1.5rem; }
.exp-stat .num {
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--signup-primary);
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.exp-stat .label { color: var(--signup-muted); font-size: 0.95rem; }

.marquee {
  overflow: hidden;
  position: relative;
  padding: 0.6rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 36s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.paused .marquee-track { animation-play-state: paused; }
.marquee-dup { display: contents; }
.marquee-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
  padding: 0.55rem 1.15rem;
  background: var(--signup-surface);
  border: 1px solid var(--signup-border);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--signup-muted);
}
.marquee-chip svg { color: var(--signup-primary); }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Der Hinweis qualifiziert die Zahlen und die Branchenliste darueber: die
   dort betreuten Unternehmen sind keine signUP-Kunden. Er stand bisher in
   der Gruender-Karte und waere mit ihr verschwunden — die Leitplanken in
   docs/website-leitplanken.md verlangen ihn aber fuer DIESE Sektion. */
.exp-note {
  max-width: 46rem;
  margin: clamp(1.8rem, 3vw, 2.6rem) auto 0;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--signup-muted);
}

/* ---------- Sicherheit / DSGVO ---------- */

.security-link { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.security-link:hover { color: var(--signup-secondary); }
.security-link:focus-visible { outline: 2px solid var(--signup-secondary); outline-offset: 6px; border-radius: 2px; }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.trust-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-panel);
  padding: 1.75rem;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-panel);
}
.trust-card .feature-icon { background: rgba(76, 175, 80, 0.16); color: #8fd79a; }
.trust-card h3 { color: #fff; font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.trust-card p { color: rgba(255, 255, 255, 0.66); font-size: 0.93rem; }

.trust-badges {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.5rem;
}

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

.faq-list { max-width: 46rem; margin: 0 auto; display: grid; gap: 0.9rem; }

.faq-item { padding: 0; overflow: hidden; }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: 0;
  font-family: var(--font);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--signup-text);
  text-align: left;
  cursor: pointer;
}
.faq-q svg { flex: none; transition: transform 0.3s ease; color: var(--signup-primary); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }

/* Die Antwort klappt auf ihre eigene Höhe auf. Mit festem max-height (320 px) wurden lange
   Antworten auf dem Telefon abgeschnitten, bis zu 354 px Text. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.4s var(--ease-out), visibility 0s;
}
.faq-a > div { min-height: 0; overflow: hidden; padding: 0 1.5rem; color: var(--signup-muted); font-size: 0.95rem; }
.faq-a p, .faq-a li { text-wrap: pretty; }
.faq-a p + p { margin-top: 0.7rem; }
.faq-a ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.faq-a li + li { margin-top: 0.45rem; }
.faq-a strong { color: var(--signup-text); font-weight: 600; }
.faq-a > div > :last-child { margin-bottom: 1.4rem; }
/* Die Tabellen der Datenorte im FAQ-Eintrag, enger als in ihrer eigenen Sektion. */
.faq-a .svc { margin-top: 1.1rem; }
.faq-a .svc-head { margin: 1.5rem 0 0.25rem; font-family: var(--font); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--signup-text); }
.faq-a .svc-intro { margin-bottom: 0.6rem; font-size: 0.9rem; }
.faq-a .svc-table { box-shadow: none; border-radius: 12px; font-size: 0.86rem; }
.faq-a .svc-table th, .faq-a .svc-table td { padding: 0.65rem 0.8rem; }

/* ---------- Finale CTA ---------- */

.cta-final { text-align: center; }
.cta-final h2 { color: #fff; max-width: 20ch; margin: 0 auto 1rem; }
.cta-final .lead { margin: 0 auto 2.2rem; }
.cta-final .hero-actions { margin-bottom: 0; }

/* ---------- Footer ---------- */

/* Der Fuß schließt an das Ende des Bühnenverlaufs an (#050d0a) statt in
   einem helleren Grün zu stehen — sonst steht über ihm eine sichtbare Kante.
   Die Haarlinie macht den Übergang zur Absicht. */
.footer {
  background: #060f0b;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.62);
  padding: 3.5rem 0 2.5rem;
  font-size: 0.9rem;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.footer-brand img { height: 30px; width: auto; margin-bottom: 1rem; }
.footer-brand p { max-width: 24rem; }
.footer-links { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer-links h3 {
  color: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.9rem;
}
.footer-links ul { list-style: none; display: grid; gap: 0.5rem; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.75rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
/* Rechtliches steht seit 2026-10-11 abgesetzt in der untersten Zeile, links von der Urheberzeile. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.footer-legal a:hover { color: #fff; }

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

@media (max-width: 960px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin: 0 auto; }
  .exp-stats { grid-template-columns: repeat(3, 1fr); }
  .trust-grid { grid-template-columns: 1fr; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story-visual { display: none; }
  /* Mobil traegt jeder Schritt seine eigene Flaeche: sonst laeuft die Sektion
     als ein einziger Textstrom durch, in dem die drei Schritte untergehen. */
  .story-step {
    opacity: calc(0.6 + 0.4 * var(--lit, 1));
    padding: 1.4rem 1.25rem 1.4rem 1.25rem;
    margin-left: 1.3rem;
    margin-bottom: 1.1rem;
    background: #fff;
    border: 1px solid var(--signup-border);
    border-radius: var(--radius-lg, 18px);
    box-shadow: 0 12px 30px -22px rgba(20, 56, 30, 0.5);
  }
  /* Die Plakette sitzt auf der Kante der Karte, die Schiene laeuft dahinter
     weiter — das haelt die Timeline auch ueber die Kartenluecken hinweg. */
  .story-step::before {
    left: -1.3rem;
    top: -0.7rem;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.9rem;
  }
  .story-step::after {
    left: calc(-0.1rem - 1px);
    top: 1.75rem;
    bottom: -1.75rem;
  }
  .story-step h3 { margin-top: 0.5rem; }
  .story-step p { max-width: none; }
  .story-step .step-shot { display: block; margin-top: 1.1rem; }
  /* Die gerahmten Screenshots sind Desktop-Aufnahmen. Auf dem Telefon sind sie
     ein Blick aufs Produkt, kein lesbares UI — der Rahmen macht das klar. */
  .story-step .step-shot .browser-bar { padding: 0.45rem 0.7rem; }
  .story-step .step-shot .browser-url { font-size: 0.62rem; padding: 0.22rem 0.6rem; }
  .story-step .step-shot .browser-dots i { width: 7px; height: 7px; }
  .story-step .step-shot img { display: block; width: 100%; }
  .deep-row, .deep-row.flip { grid-template-columns: 1fr; }
  .deep-row.flip .deep-text { order: 1; }
  .deep-row.flip .deep-media { order: 2; }
}

@media (max-width: 1180px) {
  .nav-links, .nav-cta .btn-secondary { display: none; }
  .nav-burger { display: block; }
  /* Aus dem Fluss nehmen: sonst zählt die leere Navigation als drittes
     Flex-Kind, der Abstand der Leiste greift zweimal, und bei 320 px stand
     der Burger 12 statt 24 px vom Rand. Das Menü selbst ist fixed und
     richtet sich weiter am Fenster aus. */
  .nav-main { position: absolute; }
  /* Das Menü ist eine linksbündige Liste: vier Gruppen, die sich wie ein
     Akkordeon öffnen, darunter Login und Sprache. Höher als der Schirm
     scrollt es in sich, die Seite dahinter bleibt stehen. */
  body.menu-open .nav-links {
    display: flex;
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    height: auto;
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    padding: 0.4rem 24px 1.5rem;
    box-shadow: var(--shadow-lg);
    gap: 0;
    z-index: 99;
  }
  body.menu-open .nav-links a { color: var(--signup-text); font-size: 1.05rem; }
  body.menu-open .nav { background: #fff; height: var(--nav-h); }
  body.menu-open .nav .nav-logo .logo-white { display: none; }
  body.menu-open .nav .nav-logo .logo-dark { display: block; }
  body.menu-open .nav .nav-burger { color: var(--signup-dark); }

  .nav-direct { height: auto; border-bottom: 1px solid var(--signup-border); }
  .nav-item { display: flex; flex-wrap: wrap; align-items: center; height: auto; border-bottom: 1px solid var(--signup-border); }
  body.menu-open .nav-links .nav-top { flex: 1; padding: 0.95rem 0; font-size: 1.05rem; font-weight: 800; }
  /* Seit 2026-09-21 stehen die Unterseiten im Menü offen da, ohne Tippen auf
     den Pfeil (der Inhaber sah sie sonst nicht). Die Pfeile entfallen, die
     Beschreibungen unter den Titeln auch, damit die Liste kurz bleibt. */
  .nav-trigger { display: none; }
  .nav-dd { flex-basis: 100%; }
  .nav-dd,
  .nav-item.is-open > .nav-dd {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 0 0.6rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-dd { display: block; }
  body.menu-open .nav-links .nav-dd-text { display: none; }
  .nav-dd-list { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  body.menu-open .nav-links .nav-dd a { padding: 0.55rem 0.75rem; }
  body.menu-open .nav-links .nav-dd-title { font-size: 0.98rem; font-weight: 500; }

  /* Login und Sprache wandern aus der Leiste ins Menü. */
  .nav-cta .nav-lang,
  .nav-cta .nav-login { display: none; }
  body.menu-open .nav-login-inline { display: block; padding: 1.05rem 0 0.2rem; }
  body.menu-open .nav-lang-inline { display: flex; padding: 0.7rem 0 0; gap: 0.9rem; }
  body.menu-open .nav-lang-inline a { font-size: 0.98rem; font-weight: 600; color: var(--signup-muted); padding: 0.35rem 0; }
  body.menu-open .nav-lang-inline a[aria-current] { color: var(--signup-primary); font-weight: 800; }

  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .exp-stats { grid-template-columns: 1fr; gap: 0.9rem; }

  /* Hero auf dem Telefon: ohne diese Regeln füllt allein der Textblock
     einen ganzen Bildschirm, bevor irgendetwas vom Produkt zu sehen ist.

     Der Abstand unter der Leiste steckt KOMPLETT in diesem padding, nicht
     zusätzlich im margin der H1: vorher stand der Wert an zwei Stellen und
     die Summe (30 + 14 = 44 px) las niemand mehr aus dem Quelltext ab.
     Die Obergrenze 72 px ist der Wert, der auf einem normalen Telefon gut
     aussieht. Auf kurzen Geräten (360x640) drückt er die Karten unter
     die Falz, deshalb fällt er über 8vh mit der Bildhöhe. Die Untergrenze
     44 px ist der bisherige Abstand: enger wird es nirgends. */
  .hero { padding-top: calc(var(--nav-h) + clamp(44px, 8vh, 72px)); }
  .hero h1 { margin: 0 auto 0.9rem; max-width: 20ch; }
  .hero .sub { font-size: 1.02rem; line-height: 1.55; margin-bottom: 1.5rem; }
  /* Nebeneinander statt zwei volle Breiten: gestapelt kosteten die beiden
     Buttons 133 px. Kein nowrap — auf sehr schmalen Geräten dürfen sie
     umbrechen, dann aber im kleineren Format. */
  .hero-actions { gap: 0.5rem; margin-bottom: 1.15rem; }
  .hero-actions .btn-lg { padding: 0.72rem 1.1rem; font-size: 0.95rem; }
  .hero.hero-compact { padding-bottom: 40px; }
  .hero.hero-compact .sub { margin-bottom: 1.3rem; }
}

@media (max-width: 400px) {
  .nav-inner { gap: 1rem; }
  .nav-cta { gap: 0.4rem; }
  .nav-cta .btn { padding: 0.46rem 1rem; font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-scale { opacity: 1; transform: none; transition: none; }
  .story-panel, .faq-a { transition: none; }
  .story-step::before { transition: none; }
  .marquee-track { animation: none !important; }
  .hero-glow { display: none; }
}

/* ---------- Content-Unterseiten ----------
   Der globale Reset oben setzt margin/padding auf 0 — auch für p, h2, ul.
   Die Startseite kompensiert das pro Sektionsklasse; Fließtextseiten
   brauchen einen eigenen Scope. Greift ausschließlich innerhalb .prose. */

.prose { max-width: 46rem; }
.prose > h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: clamp(2.4rem, 4.5vw, 3.2rem) 0 0.9rem;
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h3); margin: 1.7rem 0 0.5rem; }
.prose p { color: var(--signup-muted); margin-bottom: 1.1rem; }
.prose ul, .prose ol { display: grid; gap: 0.55rem; margin: 0 0 1.3rem 1.15rem; color: var(--signup-muted); }
.prose li { font-size: 0.97rem; }
.prose a { color: var(--signup-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--signup-text); font-weight: 700; }
.prose .card { margin: 1.5rem 0; }
.prose .card p:last-child, .prose .card ul:last-child { margin-bottom: 0; }

/* Breite Tabellen scrollen in ihrem eigenen Container, nie der Body */
.table-wrap { overflow-x: auto; margin: 0 0 1.4rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 32rem; }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--signup-border); vertical-align: top; }
.prose th { color: var(--signup-text); font-weight: 700; }
.prose td { color: var(--signup-muted); }

/* Kompakter Seitenkopf für Unterseiten: .hero sorgt dafür, dass der
   Nav-Logowechsel (.nav.scrolled) auch ohne Startseiten-Hero funktioniert. */
.hero.hero-compact { padding-bottom: clamp(48px, 7vw, 84px); }
/* Seitentitel der Unterseiten in derselben Serife wie Tagline und Sektionen. */
.hero.hero-compact h1 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-size: var(--fs-h1);
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: -0.012em;
}
.hero.hero-compact .hero-inner { max-width: 52rem; }

/* ---------- Lösungsseiten (Firmenevents, Eventagenturen), seit 2026-09-18 ----------
   Vorher ein dunkler Kurzkopf und darunter Fließtext in einer 46-rem-Spalte,
   die links am Container klebte („einfach nur Text runtergeschrieben", der
   Inhaber). Jetzt wie die Startseite: heller Seitenkopf mit drei Eventfotos,
   die Formate als Zeilen mit Produktminiatur, weitere Formate als Karten,
   Vorbereitung als Karten, die Änderungen mit einer Versionsliste, die
   Grenzen als eigene Sektion. Die Texte sind die bisherigen; die Tabelle
   „Welche Funktionen dein Anwendungsfall braucht" steckt jetzt in den
   Zeilen „Anmeldung" und „Typisch dazu" jedes Formats. */

/* Seitenkopf mit Fotos */
.hero.hero-sub { background: #fff; color: var(--signup-text); padding-bottom: clamp(40px, 6vw, 80px); }
.hero-sub::before,
.hero-sub .hero-glow { display: none; }
.hero-sub .hl-dot { color: var(--signup-primary); }
.hero-sub-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-sub-text { text-align: left; }
.hero.hero-sub h1 { color: #141414; margin: 0 0 1rem; max-width: 15em; }
.hero-sub .sub { color: var(--signup-muted); margin: 0 0 1.6rem; max-width: 34rem; }
.hero-sub .hero-actions { justify-content: flex-start; }
.hero-photos { position: relative; width: 100%; aspect-ratio: 11 / 9; }
.hero-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--signup-tint);
  box-shadow: 0 24px 48px -22px rgba(20, 56, 30, 0.45);
}
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-photo.p1 { top: 0; right: 0; width: 76%; height: 66%; }
.hero-photo.p2 { left: 0; bottom: 3%; width: 47%; height: 50%; border: 5px solid #fff; }
.hero-photo.p3 { right: 6%; bottom: 0; width: 38%; height: 38%; border: 5px solid #fff; }
/* Das große Foto trägt sein Etikett oben: unten links liegt das zweite Foto darüber. */
.hero-photo.p1 figcaption { top: 0.7rem; bottom: auto; }
.hero-photo figcaption {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.93);
  color: var(--signup-dark);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .hero-sub-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-sub-text { text-align: center; }
  .hero.hero-sub h1,
  .hero-sub .sub { margin-left: auto; margin-right: auto; }
  .hero-sub .hero-actions { justify-content: center; }
  .hero-photos { max-width: 34rem; margin: 0 auto; }
}

/* Formate: Zeilen mit Miniatur */
.uc-list { display: grid; gap: clamp(3rem, 7vw, 5.5rem); margin-bottom: clamp(3.5rem, 8vw, 6rem); }
.uc-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.uc-feature:nth-child(even) .uc-art { order: 2; }
.uc-art, .chg-art {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--radius-panel);
  background: linear-gradient(160deg, #eef5ef, #e2eee4);
}
.uc-art { min-height: 22rem; padding: clamp(1.5rem, 4vw, 3rem); }
.uc-text .eyebrow { margin-bottom: 0.3rem; }
.uc-text h3 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #141414;
  margin-bottom: 0.9rem;
}
.uc-text > p { color: var(--signup-muted); margin-bottom: 1.1rem; }
.uc-checks { list-style: none; display: grid; gap: 0.55rem; margin-bottom: 1.2rem; }
.uc-checks li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; }
.uc-checks .ico-check { margin-top: 0.15rem; }
.uc-meta { display: grid; gap: 0.45rem; padding-top: 1rem; border-top: 1px solid var(--signup-border); }
.uc-meta div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.8rem; font-size: 0.88rem; line-height: 1.45; }
.uc-meta dt { padding-top: 0.12rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signup-primary); }
.uc-meta dd { font-weight: 600; color: var(--signup-text); }
.uc-more-h {
  margin: 0 0 1.5rem;
  text-align: center;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: var(--fs-h2-sub);
  color: #141414;
}
.uc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.uc-card { display: flex; flex-direction: column; padding: 1.75rem; }
.uc-card h3 { font-size: var(--fs-h3); line-height: 1.3; margin-bottom: 0.5rem; }
.uc-card > p { color: var(--signup-muted); font-size: 0.93rem; margin-bottom: 1.1rem; }
.uc-card .uc-meta { margin-top: auto; }
.uc-agency {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  margin-top: 1.25rem;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--signup-dark);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.uc-agency:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -18px rgba(20, 56, 30, 0.4); }
.uc-agency:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 4px; }
.uc-agency-photo img { display: block; width: 100%; height: 100%; min-height: 16rem; object-fit: cover; }
.uc-agency-text { display: flex; flex-direction: column; justify-content: center; gap: 0.7rem; padding: clamp(1.5rem, 4vw, 2.6rem); }
.uc-agency .eyebrow { margin: 0; color: var(--signup-secondary); }
.uc-agency-title { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-weight: 500; font-size: var(--fs-h2-sub); line-height: 1.15; }
.uc-agency-p { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }
.uc-agency-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-weight: 700; color: #8fe0a0; }
.uc-agency-link svg { transition: transform 0.25s var(--ease-out); }
.uc-agency:hover .uc-agency-link svg { transform: translateX(3px); }

/* Miniaturen der Formate und der Versionsliste */
.mk-app {
  width: 100%;
  max-width: 21rem;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 48px -22px rgba(20, 56, 30, 0.45);
  color: var(--signup-dark);
  font-size: 13px;
  line-height: 1.35;
}
.mk-app .mk-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-app-body { display: grid; gap: 9px; padding: 16px 18px 18px; }
.mk-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signup-primary); }
.mk-title { margin-bottom: 2px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.mk-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 7px 10px; border: 1px solid #dfe6e1; border-radius: 8px; background: #fbfcfb; }
.mk-field span { grid-column: 1 / -1; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--signup-muted); }
.mk-field b { font-size: 13px; font-weight: 600; }
.mk-field svg { width: 12px; height: 12px; color: #9aa79d; }
.mk-field.is-locked { background: #f3f6f4; }
.mk-field.is-cond { border-style: dashed; border-color: #9fcfa9; background: #f4faf5; }
.mk-field.is-cond em { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--signup-tint); color: var(--signup-primary); font-style: normal; font-weight: 700; letter-spacing: 0; text-transform: none; }
.mk-add { padding: 4px 2px; font-size: 12px; font-weight: 700; color: var(--signup-primary); }
.mk-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.mk-btn { padding: 7px 16px; border-radius: 999px; background: var(--signup-primary); color: #fff; font-size: 12px; font-weight: 800; }
.mk-link { font-size: 12px; font-weight: 600; color: var(--signup-muted); text-decoration: underline; text-underline-offset: 2px; }
.mk-chip { padding: 4px 9px; border-radius: 999px; background: #f1f4f2; color: var(--signup-muted); font-size: 10.5px; font-weight: 700; }
.mk-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.mk-steps span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eef2ef; color: var(--signup-muted); font-size: 10px; font-weight: 800; }
.mk-steps span.is-done { background: var(--signup-tint); color: var(--signup-primary); }
.mk-steps span.is-on { background: var(--signup-primary); color: #fff; }
.mk-steps em { flex: 1; height: 2px; border-radius: 2px; background: #e3e9e5; }
.mk-opt, .mk-date { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #dfe6e1; border-radius: 9px; font-size: 13px; font-weight: 600; }
.mk-opt i, .mk-date i { flex: none; width: 14px; height: 14px; border: 2px solid #b9c6bc; border-radius: 50%; }
.mk-opt.is-on, .mk-date.is-on { border-color: var(--signup-primary); background: #f2f9f3; box-shadow: 0 0 0 3px rgba(16, 118, 39, 0.08); }
.mk-opt.is-on i, .mk-date.is-on i { border: 4px solid var(--signup-primary); }
.mk-app.mk-versions { position: relative; overflow: visible; }
.mk-versions .mk-app-body { padding-top: 26px; }
.mk-toast { position: absolute; top: -16px; right: 16px; display: flex; align-items: center; gap: 7px; padding: 6px 13px 6px 7px; border-radius: 999px; background: var(--signup-dark); color: #fff; font-size: 12px; font-weight: 700; box-shadow: var(--shadow-md); }
.mk-toast .ico-check { background: rgba(255, 255, 255, 0.18); color: #fff; }
.mk-ver { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e3e9e5; border-radius: 9px; font-size: 12.5px; }
.mk-ver b { font-weight: 800; }
.mk-ver span { color: var(--signup-muted); }
.mk-ver em { padding: 3px 8px; border-radius: 999px; background: var(--signup-tint); color: var(--signup-primary); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mk-ver.is-current { border-color: var(--signup-primary); background: #f2f9f3; }
.mk-ver .mk-restore { padding: 3px 9px; border: 1px solid #b9dcc0; border-radius: 999px; color: var(--signup-primary); font-size: 11px; font-weight: 700; }

/* Vorbereitung */
.prep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.prep-card { padding: 1.6rem 1.5rem; }
.prep-card h3 { margin-bottom: 0.45rem; font-size: var(--fs-h3); line-height: 1.3; }
.prep-card p { color: var(--signup-muted); font-size: 0.92rem; }
.prep-note { max-width: 44rem; margin: 1.75rem auto 0; text-align: center; color: var(--signup-muted); font-size: 0.95rem; }
.prep-note a { color: var(--signup-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Kurzfristige Änderungen */
.chg-p { max-width: 46rem; margin-top: 0.9rem; color: var(--signup-muted); }
.chg-art { padding: clamp(2.6rem, 5vw, 3.6rem) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }

/* Grenzen und weiterführende Seiten */
.limits { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 60rem; margin: 0 auto; }
.limits li { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1.3rem 1.4rem; border: 1px solid var(--signup-border); border-radius: 16px; background: var(--signup-surface); box-shadow: var(--shadow-sm); }
.limits .ico-x { margin-top: 0.2rem; }
.limits strong { display: block; margin-bottom: 0.25rem; font-size: 1rem; color: var(--signup-text); }
.limits li > div > span { font-size: 0.93rem; line-height: 1.5; color: var(--signup-muted); }
/* Auf der Lösungsseite stehen die beiden Links seit 2026-09-20 unter den Fragen,
   deshalb auf der Breite der FAQ-Liste statt auf 60 rem. */
#faq .next-links { max-width: 46rem; }
.next-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 60rem; margin: 2.5rem auto 0; }
.next-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15rem 1rem;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  background: var(--signup-tint);
  color: var(--signup-dark);
  transition: background 0.2s ease;
}
.next-link:hover { background: #d6eadb; }
.next-link:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 3px; }
.next-link span { font-size: 0.82rem; color: var(--signup-muted); }
.next-link b { font-size: 1rem; }
.next-link svg { grid-column: 2; grid-row: 1 / span 2; color: var(--signup-primary); transition: transform 0.25s var(--ease-out); }
.next-link:hover svg { transform: translateX(3px); }

/* DSGVO-Seite (seit 2026-09-18, wie die Lösungsseiten aufgebaut): im
   Seitenkopf zwei Fotos und statt des dritten eine Karte „Datenbank in
   Frankfurt"; die Dienste als Tabelle mit Ortsmarke (EU grün, sonst neutral:
   offengelegt, nicht verschwiegen und nicht dramatisiert); der Filter der
   KI-Gästeanalyse als Miniatur; die übrigen Themen als Karten. */
.hero-photo.is-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 5px solid #fff;
  outline: 1px solid var(--signup-border);
  color: var(--signup-dark);
}
.hp-card-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: 0.3rem; border-radius: 10px; background: var(--signup-tint); color: var(--signup-primary); }
.hero-photo.is-card b { font-size: clamp(0.9rem, 1.3vw, 1.05rem); line-height: 1.25; }
.hero-photo.is-card > span:last-child { font-size: 0.78rem; line-height: 1.35; color: var(--signup-muted); overflow-wrap: anywhere; }
/* Auf dem Handy ist die Karte gut 130 px breit: nur Zeichen und Titel */
@media (max-width: 560px) {
  .hero-photo.is-card { gap: 0.2rem; padding: 0.6rem 0.7rem; }
  .hero-photo.is-card > span:last-child { display: none; }
  .hero-photo.is-card b { font-size: 0.8rem; }
  .hp-card-icon { width: 1.8rem; height: 1.8rem; margin-bottom: 0.1rem; }
  .hp-card-icon svg { width: 16px; height: 16px; }
}
/* Sicherheitsseite: der Tipp neben „Was es heißt" und die nach Fragen
   gruppierten Tabellen der Datenorte (seit 2026-09-20). */
.tip-card { padding: clamp(1.5rem, 3vw, 2.2rem); }
/* Die drei Karten unter „Weniger Hände an den Daten" sind seit 2026-09-20
   sehr unterschiedlich lang; sie enden deshalb dort, wo ihr Text endet. */
#zugriff .topic-grid { align-items: start; }
.tip-card h3 { margin: 0.45rem 0 0.9rem; font-size: var(--fs-h3); line-height: 1.3; }
.tip-card .uc-checks { margin-bottom: 0.9rem; }
.tip-note { font-size: 0.9rem; color: var(--signup-muted); }
.svc { margin: 0; }
.svc-head { margin: 2.4rem 0 0.35rem; font-size: var(--fs-h3); }
.svc > .svc-head:first-child { margin-top: 0; }
.svc-intro { margin-bottom: 0.8rem; font-size: 0.95rem; color: var(--signup-muted); }
.svc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--signup-border);
  border-radius: var(--radius-panel);
  background: var(--signup-surface);
  box-shadow: var(--shadow-sm);
  font-size: 0.93rem;
}
/* Feste Spaltenbreiten, damit die drei Tabellen der Datenorte dieselben
   Spaltenkanten haben (sonst misst jede Tabelle ihre Breiten selbst). */
.svc-table { table-layout: fixed; }
.svc-table thead th:nth-child(1) { width: 32%; }
.svc-table thead th:nth-child(2) { width: 42%; }
.svc-table thead th:nth-child(3) { width: 26%; }
.svc-table th, .svc-table td { padding: 0.95rem 1.2rem; text-align: left; vertical-align: top; border-top: 1px solid var(--signup-border); overflow-wrap: break-word; }
.svc-table thead th { border-top: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signup-primary); background: #f7faf8; }
.svc-table tbody th { font-weight: 700; color: var(--signup-text); width: 30%; }
.svc-table td { color: var(--signup-muted); }
.loc { display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; line-height: 1.35; }
.loc-eu { background: var(--signup-tint); color: var(--signup-primary); }
.loc .nb { white-space: nowrap; }
.loc-out, .loc-mix { background: #f2f4f3; color: var(--signup-text); border: 1px solid #dfe5e1; }
.callout {
  margin: 1.5rem auto 0;
  padding: 1.4rem 1.6rem;
  border-radius: 16px;
  background: var(--signup-tint);
}
.callout .eyebrow { margin-bottom: 0.4rem; }
.callout p { color: var(--signup-text); font-size: 0.97rem; line-height: 1.6; }
.mk-filter .mk-app-body { gap: 7px; }
.mk-frow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid #e3e9e5; border-radius: 9px; font-size: 12.5px; }
.mk-frow span { font-weight: 700; color: var(--signup-muted); }
.mk-frow b { font-weight: 600; color: var(--signup-dark); }
.mk-frow.is-out { background: #f7f8f7; }
.mk-frow.is-out span { text-decoration: line-through; text-decoration-color: rgba(20, 56, 30, 0.45); color: #9aa79d; }
.mk-frow em { padding: 2px 8px; border-radius: 999px; background: #fdecec; color: #a3342b; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.mk-ffoot { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--signup-primary); }
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.topic-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.topic-card { display: flex; flex-direction: column; padding: 1.9rem 1.8rem; }
.topic-card h2 { margin-bottom: 0.8rem; font-family: var(--font); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--signup-text); }
.topic-card p { margin-bottom: 0.9rem; color: var(--signup-muted); font-size: 0.95rem; }
.topic-card .uc-checks { margin: 0.2rem 0 0.9rem; }
.topic-card .uc-checks li { font-size: 0.93rem; }
@media (max-width: 1000px) {
  .topic-grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
  /* Die Tabelle wird schmal zu Blöcken, die Spaltennamen stehen vor den Zellen */
  .svc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .svc-table, .svc-table tbody, .svc-table tr, .svc-table th, .svc-table td { display: block; width: auto; }
  .svc-table tr { padding: 0.9rem 1.1rem; border-top: 1px solid var(--signup-border); }
  .svc-table tbody tr:first-child { border-top: 0; }
  .svc-table th, .svc-table td { padding: 0.15rem 0; border-top: 0; }
  .svc-table tbody th { width: auto; margin-bottom: 0.2rem; }
  .svc-table td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--signup-text); }
  .svc-table td:last-child { margin-top: 0.35rem; }
  .svc-table td:last-child::before { display: none; }
}

/* Themenseiten „Anmeldeformular erstellen" und „Eventseite im Corporate
   Design" (seit 2026-09-18, wie die Lösungsseiten): die Themen als Zeilen mit
   Produktminiatur, kleinere als Karten. In den Zeilen sind die Überschriften
   h2 (sie waren es im Fließtext), gestaltet wie die h3 der Lösungsseiten. */
.uc-text h2 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #141414;
  margin-bottom: 0.9rem;
}
.uc-list-last { margin-bottom: 0; }
.prep-note + .uc-agency { margin-top: 2.5rem; }
.uc-agency h2.uc-agency-title { margin: 0; color: #fff; font-size: var(--fs-h2-sub); line-height: 1.15; }
.part-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.part-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.part-card, .tok-card { padding: 1.5rem 1.4rem; }
.part-card h3, .tok-card h3 { margin-bottom: 0.4rem; font-size: var(--fs-h3); line-height: 1.3; }
.part-card p, .tok-card p { color: var(--signup-muted); font-size: 0.9rem; }
.tok-lead { max-width: 44rem; margin: -0.6rem auto 1.5rem; text-align: center; color: var(--signup-muted); }
.tok-vis { display: flex; align-items: center; gap: 0.4rem; height: 2.6rem; margin-bottom: 1rem; }
.tok-color i { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--signup-primary); }
.tok-color i + i { background: var(--signup-secondary); margin-left: -0.7rem; box-shadow: 0 0 0 3px #fff; }
.tok-surface i { width: 3.6rem; height: 2.4rem; border-radius: 8px; background: #f3f7f4; border: 1.5px solid #cfdcd2; }
.tok-surface i + i { display: none; }
.tok-text i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 8px; font-style: normal; font-weight: 800; font-size: 1rem; }
.tok-text i::before { content: 'Aa'; }
.tok-text i:first-child { background: var(--signup-dark); color: #fff; }
.tok-text i + i { background: var(--signup-tint); color: var(--signup-dark); }
.tok-fonts i { font-style: normal; font-size: 1.6rem; line-height: 1; color: var(--signup-dark); }
.tok-fonts i:first-child::before { content: 'Aa'; font-family: 'Newsreader', Georgia, serif; }
.tok-fonts i + i::before { content: 'Aa'; font-family: var(--font); font-weight: 700; font-size: 1.3rem; }
.tok-radius i { width: 2.4rem; height: 2.4rem; background: #fff; border: 1.5px solid #cfdcd2; }
.tok-radius i:first-child { border-radius: 4px; }
.tok-radius i + i { border-radius: 14px; box-shadow: 0 10px 18px -8px rgba(20, 56, 30, 0.45); }

/* Template gegen eigene Marke (Eventseite im Corporate Design) */
.cmp-wrap { padding: clamp(1.5rem, 3vw, 2.25rem); }
.cmp-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; align-items: start; }
.cmp-col { position: relative; display: grid; gap: 0.7rem; justify-items: center; }
.cmp-col .mk-tool, .cmp-col .mk-site { width: 100%; max-width: none; transform: none; }
.cmp-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signup-muted); }
.cmp-label.is-brand { color: var(--signup-primary); }

/* Miniaturen der Themenseiten */
.mk-quote { padding: 10px 12px; border: 1px solid #dfe6e1; border-radius: 9px; background: #fbfcfb; font-size: 12.5px; line-height: 1.45; color: var(--signup-dark); }
.mk-gen { display: grid; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed #dfe6e1; }
.mk-genrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: #f5f8f6; font-size: 12px; }
.mk-genrow b { font-weight: 700; color: var(--signup-dark); }
.mk-genrow span { color: var(--signup-muted); font-size: 11px; text-align: right; }
.mk-sec { display: grid; grid-template-columns: 10px auto minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #e3e9e5; border-radius: 9px; font-size: 12.5px; }
.mk-sec i { width: 10px; height: 12px; background: radial-gradient(circle, #b9c6bc 1.2px, transparent 1.4px) 0 0 / 5px 4px; }
.mk-sec b { font-weight: 700; color: var(--signup-dark); }
.mk-sec span { height: 5px; border-radius: 3px; background: #e9efeb; }
.mk-ai { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 9px 11px; border-radius: 12px 12px 12px 4px; background: var(--signup-dark); color: #fff; font-size: 12px; }
.mk-ai em { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 10.5px; font-style: normal; font-weight: 800; }
.mk-mail { display: grid; gap: 2px; padding: 9px 11px; border: 1px solid #e3e9e5; border-radius: 9px; }
.mk-mail b { font-size: 12.5px; font-weight: 700; color: var(--signup-dark); }
.mk-mail span { font-size: 11.5px; color: var(--signup-muted); }
.mk-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.mk-tags small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signup-primary); }
.mk-tag { padding: 3px 8px; border-radius: 6px; background: var(--signup-tint); color: var(--signup-primary); font-size: 11px; font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; }
.mk-gbar { display: flex; align-items: center; gap: 6px; }
.mk-search { flex: 1; padding: 6px 10px; border: 1px solid #dfe6e1; border-radius: 8px; color: #9aa79d; font-size: 11.5px; }
.mk-grow { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #eef2ef; font-size: 12.5px; }
.mk-grow i { width: 14px; height: 14px; border: 1.5px solid #b9c6bc; border-radius: 4px; }
.mk-grow i.is-checked { border-color: var(--signup-primary); background: var(--signup-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat; }
.mk-grow b { font-weight: 600; color: var(--signup-dark); }
.mk-status { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; }
.mk-status.is-yes { background: var(--signup-tint); color: var(--signup-primary); }
.mk-status.is-open { background: #f2f4f3; color: var(--signup-muted); }
.mk-status.is-no { background: #fdecec; color: #a3342b; }
.mk-url { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid #dfe6e1; border-radius: 9px; font-size: 12.5px; font-weight: 600; }
.mk-url em { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-style: normal; font-weight: 800; color: var(--signup-primary); }
.mk-url .ico-check { width: 16px; height: 16px; }
.mk-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mk-swatches i { height: 30px; border-radius: 8px; border: 1px solid rgba(20, 56, 30, 0.1); }
.mk-swatches i:nth-child(1) { background: #1f2a44; }
.mk-swatches i:nth-child(2) { background: #e8590c; }
.mk-swatches i:nth-child(3) { background: #f4f1ec; }
.mk-swatches i:nth-child(4) { background: #8a94a6; }
.mk-fstep { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e3e9e5; border-radius: 9px; }
.mk-fstep:last-child { border-color: var(--signup-primary); background: #f2f9f3; }
.mk-fnum { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--signup-tint); color: var(--signup-primary); font-size: 11px; font-weight: 800; }
.mk-fstep small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signup-muted); }
.mk-fstep b { font-size: 13px; font-weight: 700; color: var(--signup-dark); }

@media (max-width: 1060px) {
  .part-grid, .part-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .part-grid, .part-grid-5 { grid-template-columns: minmax(0, 1fr); }
  .cmp-art { grid-template-columns: minmax(0, 1fr); }
}

/* Agenturen: Ablauf eines Kundenprojekts in vier Schritten */
.steps4 { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.steps4::before {
  content: '';
  position: absolute;
  top: 1.35rem;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #b9dcc0 0 8px, transparent 8px 14px);
}
.step4 { position: relative; padding: 0 0.5rem; text-align: center; }
.step4-num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--signup-primary);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 0 0 6px #fff;
}
.step4 h3 { margin-bottom: 0.45rem; font-size: var(--fs-h3); line-height: 1.3; }
.step4 p { color: var(--signup-muted); font-size: 0.93rem; }

@media (max-width: 1060px) {
  .prep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .uc-feature { grid-template-columns: minmax(0, 1fr); }
  .uc-feature:nth-child(even) .uc-art { order: 0; }
  .uc-art { min-height: 0; }
  .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .steps4::before { display: none; }
}
@media (max-width: 760px) {
  .uc-grid,
  .limits,
  .next-links { grid-template-columns: minmax(0, 1fr); }
  .uc-agency { grid-template-columns: minmax(0, 1fr); }
  .uc-agency-photo img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .prep-grid { grid-template-columns: minmax(0, 1fr); }
  .uc-meta div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .steps4 { grid-template-columns: minmax(0, 1fr); }
  .step4 { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 0; text-align: left; }
  .step4-num { grid-row: 1 / span 2; margin: 0; }
}

/* ---------- Hilfe & Kontakt (hilfe.html, en/help.html) ----------
   Schnellzugriffe, FAQ nach Themen gruppiert, Kontakt als dunkles Band.
   Die Antworten sind wortgleich von den Themenseiten übernommen, damit
   keine zweite, abweichende Fassung einer Aussage entsteht. */
.help-quick { padding-top: clamp(40px, 6vw, 72px); padding-bottom: 0; }
.help-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.help-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s ease;
}
.help-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--signup-primary); }
.help-link:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 3px; }
.help-link .feature-icon { margin-bottom: 0.7rem; }
.help-link-title { font-weight: 700; font-size: 1.05rem; color: var(--signup-text); }
.help-link-text { color: var(--signup-muted); font-size: 0.93rem; }

.help-group { max-width: 46rem; margin: 0 auto; }
.help-group + .help-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.help-group-title { font-size: var(--fs-h3); margin-bottom: 1rem; }
.help-group .faq-list { max-width: none; }
.help-more { margin-top: 0.9rem; font-size: 0.93rem; }
.help-more a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--signup-primary); font-weight: 600; }
.help-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Derselbe Link unter der FAQ der Startseite, dort zentriert unter der Liste. */
.faq-more { max-width: 46rem; margin: 1.6rem auto 0; text-align: center; }

.help-mail { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.help-mail:hover { border-color: #fff; }
/* Kontakt auf der Hilfe-Seite: links Einleitung und Mailadresse, rechts dasselbe Formular wie auf
   der Kontaktseite. */
.help-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.help-contact-intro h2 { margin: 0.75rem 0 1rem; }
.help-contact .contact-embed { margin-top: 0; }
.help-contact .contact-form, .help-contact .contact-success { max-width: none; margin: 0; }

@media (max-width: 960px) {
  .help-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .help-links { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Eventarten mit Fotos (Startseite) und Seitenfotos ----------
   Stockfotos inszenierter Shootings; Herkunft, Lizenz und Regeln stehen in
   den Leitplanken unter Assets-Herkunft. Die Karten behalten Reveal und
   Staffelung (opacity und transform samt --reveal-delay) und heben sich beim
   Hover über translate, das kein Reveal-transform überschreibt. */
.event-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.event-type {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  color: inherit;
  transition: opacity 0.8s var(--ease-out) var(--reveal-delay, 0s),
    transform 0.8s var(--ease-out) var(--reveal-delay, 0s),
    translate 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s ease;
}
.event-type:hover { translate: 0 -3px; box-shadow: var(--shadow-md); border-color: var(--signup-primary); }
.event-type:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 3px; }
.event-type-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.event-type-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem 1.3rem; }
.event-type-title { font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--signup-text); }
/* Der Pfeil steht inline hinter dem letzten Wort, auch wenn der Titel
   umbricht; als Flex-Kind rutschte er bei zweizeiligen Titeln an den Rand. */
.event-type-title svg { display: inline-block; vertical-align: -2px; margin-left: 0.35rem; color: var(--signup-primary); transition: translate 0.3s var(--ease-out); }
.event-type-last { white-space: nowrap; }
.event-type:hover .event-type-title svg { translate: 3px 0; }
.event-type-text { color: var(--signup-muted); font-size: 0.93rem; }
.event-type-more { display: none; }

/* ---------- Eventarten als Karussell (seit 2026-09-17) ----------
   Nach dem Vorbild HubSpot: die aktive Karte groß in der Mitte, links und
   rechts kleiner und blass die Nachbarn, Pfeile an den Seiten, darunter
   Pause. main.js setzt .is-carousel und je Karte data-pos (0 Mitte, -1
   links, 1 rechts, 2 verdeckt hinter der Mitte). Ohne JavaScript bleibt das
   Raster darüber stehen. Alle Karten liegen in derselben Rasterzelle; die
   Höhe des Karussells ist damit die der höchsten Karte. */
.event-carousel { position: relative; }
/* Die Nachbarkarten ragen auf schmalen Schirmen über den Rand. */
#eventarten { overflow: hidden; }
.event-types.is-carousel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 0;
  padding: 0.5rem 0 1.25rem;
  touch-action: pan-y;
}
.is-carousel .event-type {
  grid-area: 1 / 1;
  width: min(400px, 80vw);
  opacity: 0;
  transform: translateX(0) scale(0.7);
  transition: transform 0.65s var(--ease-out), opacity 0.5s ease, box-shadow 0.4s ease, border-color 0.3s ease;
  z-index: 1;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
}
.is-carousel .event-type img { pointer-events: none; }
.is-carousel .event-type[data-pos="0"] {
  opacity: 1;
  transform: none;
  z-index: 3;
  box-shadow: 0 30px 60px -28px rgba(20, 56, 30, 0.35);
  cursor: auto;
}
.is-carousel .event-type[data-pos="-1"],
.is-carousel .event-type[data-pos="1"] { opacity: 0.5; z-index: 2; }
.is-carousel .event-type[data-pos="-1"] { transform: translateX(-96%) scale(0.84); }
.is-carousel .event-type[data-pos="1"] { transform: translateX(96%) scale(0.84); }
.is-carousel .event-type[data-pos="-1"]:hover,
.is-carousel .event-type[data-pos="1"]:hover { opacity: 0.75; }
.is-carousel .event-type[data-pos="2"] { visibility: hidden; transition: transform 0.65s var(--ease-out), opacity 0.5s ease, visibility 0s linear 0.5s; }
.is-carousel .event-type:hover { translate: none; }
.is-carousel .event-type-title svg { display: none; }
.is-carousel .event-type-title { font-size: 1.2rem; }
.is-carousel .event-type-body { padding: 1.25rem 1.5rem 1.5rem; text-align: center; align-items: center; }
.is-carousel .event-type-more {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--signup-primary);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  visibility: hidden;
}
.is-carousel .event-type[data-pos="0"] .event-type-more { visibility: visible; }

.ec-nav,
.ec-pause {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--signup-border);
  background: #fff;
  color: var(--signup-dark);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ec-nav[hidden],
.ec-pause[hidden] { display: none; }
.ec-nav { position: absolute; top: 42%; width: 48px; height: 48px; z-index: 4; }
.ec-prev { left: 0; }
.ec-next { right: 0; }
.ec-pause { width: 36px; height: 36px; margin: 0.25rem auto 0; }
.ec-nav:hover,
.ec-pause:hover { border-color: var(--signup-primary); color: var(--signup-primary); box-shadow: var(--shadow-md); }
.ec-nav:focus-visible,
.ec-pause:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 2px; }
.ec-pause .i-play,
.ec-pause[aria-pressed="true"] .i-pause { display: none; }
.ec-pause[aria-pressed="true"] .i-play { display: block; }

/* Schmal: die Nachbarn schauen nur noch am Rand herein, die Pfeile stehen
   unten neben dem Pause-Knopf statt auf den Karten. */
@media (max-width: 860px) {
  .event-carousel { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0.75rem; }
  .event-carousel > .event-types { flex: 0 0 100%; }
  .ec-nav { position: static; width: 42px; height: 42px; order: 2; }
  .ec-prev { order: 1; }
  .ec-pause { order: 2; margin: 0; }
  .ec-next { order: 3; }
  .is-carousel .event-type[data-pos="-1"] { transform: translateX(-100%) scale(0.86); }
  .is-carousel .event-type[data-pos="1"] { transform: translateX(100%) scale(0.86); }
}

@media (prefers-reduced-motion: reduce) {
  .is-carousel .event-type,
  .is-carousel .event-type[data-pos="2"] { transition: none; }
}

.testimonials { margin-top: clamp(3.5rem, 6vw, 5.5rem); scroll-margin-top: calc(var(--nav-h) + 24px); }
.testimonials-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.5rem; }
.testimonials-head h3 { font-family: 'Newsreader', Georgia, serif; font-size: var(--fs-h2); font-weight: 500; line-height: 1.1; letter-spacing: -0.025em; color: #141414; }
.testimonials-note { max-width: 20rem; color: var(--signup-muted); font-size: .8rem; line-height: 1.5; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Seit 2026-09-24 Sprechblasen: die Blase ist das Zitat, darunter Name und Rolle an der Spitze. */
.testimonial-card { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.testimonial-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.testimonial-mark { display: block; height: 22px; margin-bottom: 10px; color: var(--signup-primary); font-family: 'Newsreader', Georgia, serif; font-size: 3.2rem; line-height: .8; }
.testimonial-label { padding: .25rem .65rem; background: var(--signup-bg); border-radius: var(--radius-pill); color: var(--signup-muted); font-size: .7rem; font-weight: 550; }
.testimonial-card blockquote { position: relative; flex: 1; margin: 0 0 24px; padding: 24px 28px 28px; border: 1px solid var(--signup-border); border-radius: 28px 28px 28px 8px; background: #fff; box-shadow: var(--shadow-sm); }
.testimonial-card blockquote::after { content: ''; position: absolute; left: 26px; bottom: -10px; width: 18px; height: 18px; border-right: 1px solid var(--signup-border); border-bottom: 1px solid var(--signup-border); background: #fff; transform: rotate(45deg); }
.testimonial-card blockquote p { color: #141414; font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.05rem, 1.25vw, 1.2rem); font-weight: 450; line-height: 1.45; }
.testimonial-card figcaption { display: flex; flex-direction: column; gap: .2rem; padding-left: 20px; }
.testimonial-name { font-size: .86rem; font-weight: 650; color: var(--signup-dark); }
.testimonial-role { font-size: .77rem; color: var(--signup-muted); }
@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .testimonial-card blockquote { padding: 22px 24px 24px; }
}
@media (max-width: 600px) {
  .testimonials-head { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .testimonial-card blockquote { padding: 20px 22px 22px; }
}

.prose h2[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
/* Lange Textblöcke nur einblenden, nicht schieben: beim Sprung auf #tagungen
   rechnete der Browser am noch um 28 px verschobenen Block, danach rückte die
   Überschrift unter die Leiste (gemessen 60 px statt 88 px). */
.prose.reveal { transform: none; }

@media (max-width: 960px) {
  .event-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .event-types { grid-template-columns: minmax(0, 1fr); }
}



/* ---------- Isometrische Schichtmodelle (iso) ----------
   Abgeleitet aus der Hero-Komposition: dieselbe Kamera (rotateX 15°,
   rotateY −27°, perspective 1700px), nur eingefroren statt animiert.
   Alle Maße in em, damit eine einzige font-size das ganze Modell skaliert.
   Der Versatz muss groß gegen die Plattenbreite sein (hier 43 %), sonst
   verschmelzen die hinteren Platten zu einem Schmier statt zu Schichten. */
.iso {
  font-size: clamp(8px, 1.28vw, 15px);
  perspective: 150em;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em 0;
}
.iso-stack {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(14deg) rotateY(-26deg);
  /* Breite = Platte + (n−1) × Versatz, per --n aus dem Markup */
  width: calc(13em + (var(--n) - 1) * 5.6em);
  height: 15.6em;
}
.iso-plate {
  position: absolute;
  top: calc(var(--i) * -0.5em);
  left: calc(var(--i) * 5.6em);
  width: 13em;
  height: 15em;
  transform: translateZ(calc(var(--i) * -2.4em));
  border-radius: 1.1em;
  padding: 1.1em;
  display: flex;
  flex-direction: column;
  /* Je weiter hinten, desto blasser — die Tiefe trägt die Abstufung, nicht
     nur die Perspektive. */
  /* Mit der Tiefe wandert die Platte ins Grüne: auf dem fast weißen Grund
     der Sektion wäre reines Weiß mit sinkender Deckkraft nicht zu sehen. */
  background: linear-gradient(155deg,
    hsl(140 32% calc(99% - var(--i) * 3.2%)),
    hsl(142 30% calc(96% - var(--i) * 3.4%)));
  border: 1px solid rgba(20, 56, 30, calc(0.08 + var(--i) * 0.015));
  box-shadow: 0 2em 3.4em -1.4em rgba(20, 56, 30, 0.34);
  color: var(--signup-dark);
}
.iso-plate.is-lead {
  background: linear-gradient(155deg, #1a8f37, #0c5a1e);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.iso-label {
  margin-top: auto;
  font-size: 0.94em;
  font-weight: 800;
  line-height: 1.25;
}
/* Von jeder hinteren Platte ist nur der Streifen rechts frei (= der Versatz).
   Beschriftung dorthin, sonst schreibt sie unter die davorliegende Platte. */
.iso-plate:not(.is-lead) {
  align-items: flex-end;
  text-align: right;
}
.iso-plate:not(.is-lead) .iso-label { max-width: 4.9em; }
.iso-plate:not(.is-lead) .iso-lines { align-self: stretch; }
.iso-sub {
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--signup-muted);
  margin-top: 0.3em;
}
.iso-plate.is-lead .iso-sub { color: rgba(255, 255, 255, 0.78); }

/* Leitplatte: dieselben Kacheln und Token-Chips wie der Brand-Scan im Hero */
.iso-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45em; }
.iso-tile {
  height: 2.2em;
  border-radius: 0.55em;
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.iso-tile.is-solid { background: rgba(255, 255, 255, 0.88); border-color: transparent; }
.iso-chips { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.6em; }
.iso-chip {
  font-size: 0.7em;
  font-weight: 700;
  padding: 0.28em 0.65em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  white-space: nowrap;
}
/* Die Sicherheitsaussage muss auch allein stimmen: „keine API-Schlüssel"
   braucht immer „im Browser", dafür darf dieser Chip umbrechen. */
.iso-chip.is-wide {
  white-space: normal;
  text-align: left;
}
/* Angedeutetes Layout auf den hinteren Platten */
.iso-lines { display: flex; flex-direction: column; gap: 0.4em; }
.iso-lines i { height: 0.45em; border-radius: 999px; background: rgba(20, 56, 30, 0.11); }
.iso-lines i:nth-child(1) { width: 58%; background: rgba(26, 143, 55, 0.42); }
.iso-lines i:nth-child(2) { width: 88%; }
.iso-lines i:nth-child(3) { width: 72%; }
.iso-lines i:nth-child(4) { width: 44%; }

/* Auf dunklen Sektionen kehren sich die Platten um */
.section-dark .iso-plate {
  background: linear-gradient(155deg,
    rgba(233, 245, 239, calc(0.17 - var(--i) * 0.035)),
    rgba(233, 245, 239, calc(0.08 - var(--i) * 0.018)));
  border-color: rgba(255, 255, 255, calc(0.26 - var(--i) * 0.05));
  backdrop-filter: blur(3px);
  box-shadow: 0 2em 3.4em -1.4em rgba(0, 0, 0, 0.8);
  color: #fff;
}
/* Gleiche Spezifitaet wie .iso-plate.is-lead, aber weiter unten: ohne diese
   Regel schluckt die Dunkel-Variante das Gruen der Leitplatte. */
.section-dark .iso-plate.is-lead {
  background: linear-gradient(155deg, #1a8f37, #0c5a1e);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: none;
}
.section-dark .iso-sub { color: rgba(223, 240, 226, 0.72); }
.section-dark .iso-plate.is-lead .iso-sub { color: rgba(255, 255, 255, 0.78); }
.section-dark .iso-lines i { background: rgba(255, 255, 255, 0.15); }
.section-dark .iso-lines i:nth-child(1) { background: rgba(76, 175, 80, 0.6); }

/* Sektionskopf mit Modell daneben: links die Aussage, rechts das Bild davon */
.head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.head-split .section-head { margin-bottom: 0; }

/* ---------- Funktionen: der Kartenstapel mischt durch (seit 2026-09-18) ----------
   Entwurf des Inhabers aus Claude Design („signUP Schichtmodell"), hier ohne
   React nachgebaut. Fünf Karten mit echten Miniaturen: Gästeliste, E-Mail,
   Eventseite, Formular und das grüne „Dein Design". Das Grün gehört der
   Karte, nicht dem Platz: es wandert mit ihr durch den Stapel, keine Farbe
   wechselt je.

   Alle 3,25 s gleitet die vordere Karte in 1,25 s nach hinten ans Ende,
   dabei ein Stück vom Betrachter weg, während die übrigen gleichzeitig
   eine Stelle vorrücken. Eine Uhr für alle Karten (main.js, requestAnimationFrame),
   keine Überblendung, kein Sprung. Die Stapelfolge (z-index) folgt der
   laufenden Position, damit eine Karte genau dann hinter die Nachbarin
   rutscht, wenn sie sie passiert.

   Maße: --u ist ein Pixel der Vorlage. Der Kasten zeigt einen Ausschnitt von
   720 x 440 aus der 960 x 560 großen Bühne der Vorlage, genau um die Fläche,
   die der Stapel über einen ganzen Umlauf belegt (gemessen, mit Rand für den
   Schatten). So bleiben Perspektive und Blickpunkt wie im Entwurf. Die Größe
   folgt der Spaltenbreite über Container-Einheiten, höchstens 0,9 px je
   Vorlagenpixel. Ohne JavaScript und bei „Bewegung reduzieren" steht der
   Stapel mit „Dein Design" vorn; die Lage steht dafür im Markup. */
.deck { container-type: inline-size; }
.deck-box {
  --u: min(calc(100cqw / 720), 0.9px);
  position: relative;
  width: calc(720 * var(--u));
  height: calc(440 * var(--u));
  margin-inline: auto;
  overflow: hidden;
}
.deck-stage {
  position: absolute;
  left: calc(-164 * var(--u));
  top: calc(-90 * var(--u));
  width: calc(960 * var(--u));
  height: calc(560 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: calc(1600 * var(--u));
  perspective-origin: 50% 42%;
}
.deck-stack {
  position: relative;
  width: calc(630 * var(--u));
  height: calc(302 * var(--u));
  transform-style: preserve-3d;
  transform: translateY(calc(14 * var(--u))) scale(1.04) rotateX(13deg) rotateY(-25deg);
}
.deck-card {
  --ink: rgba(20, 56, 30, 0.14);
  --key: #107627;
  --card: rgba(20, 56, 30, 0.045);
  --edge: rgba(20, 56, 30, 0.1);
  --chip: var(--signup-muted);
  --on-key: #fff;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(262 * var(--u));
  height: calc(302 * var(--u));
  border-radius: calc(20 * var(--u));
  padding: calc(19 * var(--u)) calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(11 * var(--u));
  border: 1px solid rgba(20, 56, 30, 0.1);
  box-shadow: 0 calc(30 * var(--u)) calc(52 * var(--u)) calc(-26 * var(--u)) rgba(20, 56, 30, 0.42);
  transform-style: preserve-3d;
  background: #fff;
  color: var(--signup-dark);
  line-height: normal;
  will-change: transform;
}
.deck-card.is-brand {
  --ink: rgba(255, 255, 255, 0.3);
  --key: rgba(255, 255, 255, 0.9);
  --card: rgba(255, 255, 255, 0.15);
  --edge: rgba(255, 255, 255, 0.3);
  --chip: rgba(255, 255, 255, 0.82);
  --on-key: #0c5a1e;
  background: linear-gradient(158deg, #1a8f37, #0c5a1e);
  color: #fff;
}
.deck-card i, .deck-card b, .deck-card em { display: block; font-style: normal; }
.dk-eyebrow { font-size: calc(9 * var(--u)); font-weight: 900; letter-spacing: 0.13em; color: var(--chip); }
.dk-eyebrow-split { display: flex; align-items: center; justify-content: space-between; }
.dk-eyebrow-split span { font-weight: 700; letter-spacing: 0.04em; }
.dk-eyebrow-live { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.dk-eyebrow-live span {
  font-size: calc(7 * var(--u));
  letter-spacing: 0.06em;
  padding: calc(3 * var(--u)) calc(6 * var(--u));
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--edge);
}
/* Von einer hinteren Karte ist rechts nur ein Streifen frei; gemessen passen
   rund 89 Vorlagenpixel („Eventseite"), „Dein Design" braucht 100 und wurde zu
   „ein Design" angeschnitten. Deshalb höchstens 86: längere Titel brechen auf
   zwei Zeilen um („Dein / Design", EN „Your / brand", „Event / page"). */
.dk-title {
  margin-top: auto;
  align-self: flex-end;
  max-width: calc(86 * var(--u));
  text-align: right;
  font-size: calc(17 * var(--u));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.dk-tags { display: flex; gap: calc(5 * var(--u)); flex-wrap: wrap; }
.dk-tag, .dk-pill {
  font-size: calc(7 * var(--u));
  letter-spacing: 0.06em;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--edge);
  color: var(--chip);
}
.dk-tag { font-weight: 800; padding: calc(4 * var(--u)) calc(8 * var(--u)); }
.dk-pill { font-weight: 900; padding: calc(3 * var(--u)) calc(6 * var(--u)); justify-self: end; }
.dk-lines { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.dk-lines i { height: calc(4 * var(--u)); border-radius: 999px; background: var(--ink); }
.dk-lines i:nth-child(1) { width: 100%; }
.dk-lines i:nth-child(2) { width: 86%; }
.dk-lines i:nth-child(3) { width: 62%; }
.dk-lines-short i:nth-child(1) { width: 78%; }
.dk-lines-short i:nth-child(2) { width: 54%; }

/* Gästeliste */
.dk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(6 * var(--u)); }
.dk-stat { border-radius: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(7 * var(--u)); background: var(--card); border: 1px solid var(--edge); }
.dk-stat b { font-size: calc(13 * var(--u)); font-weight: 800; line-height: 1; }
.dk-stat span { display: block; font-size: calc(7 * var(--u)); font-weight: 800; letter-spacing: 0.09em; color: var(--chip); margin-top: calc(2 * var(--u)); }
.dk-rows { display: flex; flex-direction: column; gap: calc(7 * var(--u)); margin-top: calc(2 * var(--u)); }
.dk-row { display: grid; grid-template-columns: calc(14 * var(--u)) minmax(0, 1fr) calc(54 * var(--u)); gap: calc(8 * var(--u)); align-items: center; }
.dk-row-head {
  padding-bottom: calc(6 * var(--u));
  border-bottom: 1px solid var(--edge);
  font-size: calc(7 * var(--u));
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--chip);
}
.dk-row-head span:last-child { text-align: right; }
.dk-dot { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 999px; background: var(--key); opacity: 0.9; }
.dk-dot.is-open { background: var(--ink); opacity: 1; }
.dk-name { font-size: calc(10 * var(--u)); font-weight: 600; white-space: nowrap; }

/* E-Mail */
.dk-mailhead { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.dk-mailrow { display: flex; gap: calc(7 * var(--u)); align-items: center; }
.dk-mlabel { flex: none; width: calc(38 * var(--u)); font-size: calc(7 * var(--u)); font-weight: 900; letter-spacing: 0.08em; color: var(--chip); }
.dk-mfield {
  flex: 1;
  min-width: 0;
  font-size: calc(9 * var(--u));
  font-weight: 600;
  padding: calc(5 * var(--u)) calc(8 * var(--u));
  border-radius: calc(7 * var(--u));
  background: var(--card);
  border: 1px solid var(--edge);
  white-space: nowrap;
  overflow: hidden;
}
.dk-strong { font-weight: 700; }
.dk-mailbody { border-radius: calc(10 * var(--u)); border: 1px solid var(--edge); padding: calc(11 * var(--u)); display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.dk-greet { font-size: calc(11 * var(--u)); font-weight: 800; line-height: 1.25; }
.dk-cta {
  align-self: flex-start;
  font-size: calc(8 * var(--u));
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: var(--key);
  color: var(--on-key);
}

/* Eventseite */
.dk-site { border-radius: calc(10 * var(--u)); overflow: hidden; border: 1px solid var(--edge); }
.dk-hero {
  height: calc(86 * var(--u));
  background: linear-gradient(170deg, #24463a, #0e1f16);
  padding: calc(9 * var(--u)) calc(10 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dk-nav { align-self: center; display: flex; gap: calc(7 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.dk-nav i { height: calc(3 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.4); }
.dk-nav i:nth-child(1) { width: calc(16 * var(--u)); background: rgba(255, 255, 255, 0.7); }
.dk-nav i:nth-child(2) { width: calc(12 * var(--u)); }
.dk-nav i:nth-child(3) { width: calc(14 * var(--u)); }
.dk-event { font-size: calc(12 * var(--u)); font-weight: 900; color: #fff; line-height: 1.15; }
.dk-date { font-size: calc(8 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.72); margin-top: calc(2 * var(--u)); }
.dk-sitebody { padding: calc(9 * var(--u)) calc(10 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.dk-sitebody i { height: calc(4 * var(--u)); border-radius: 999px; background: var(--ink); }
.dk-sitebody i:nth-child(1) { width: 92%; }
.dk-sitebody i:nth-child(2) { width: 70%; }
.dk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(6 * var(--u)); }
.dk-tiles span {
  border-radius: calc(8 * var(--u));
  padding: calc(7 * var(--u)) calc(6 * var(--u));
  background: var(--card);
  border: 1px solid var(--edge);
  text-align: center;
  font-size: calc(7 * var(--u));
  font-weight: 900;
  letter-spacing: 0.07em;
  color: var(--chip);
}

/* Formular */
.dk-steps { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.dk-steps b { flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 999px; background: var(--ink); }
.dk-steps b.is-on { background: var(--key); }
.dk-steps em { flex: 1; height: calc(2 * var(--u)); border-radius: 999px; background: var(--ink); }
.dk-steps span { font-size: calc(7 * var(--u)); font-weight: 900; letter-spacing: 0.07em; color: var(--chip); margin-left: calc(3 * var(--u)); }
.dk-form { display: flex; flex-direction: column; gap: calc(9 * var(--u)); margin-top: calc(2 * var(--u)); }
.dk-field { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.dk-flabel { font-size: calc(8 * var(--u)); font-weight: 900; letter-spacing: 0.08em; color: var(--chip); }
.dk-input {
  font-size: calc(10 * var(--u));
  font-weight: 600;
  padding: calc(7 * var(--u)) calc(9 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--card);
  border: 1px solid var(--edge);
  white-space: nowrap;
  overflow: hidden;
}
.dk-consent { display: flex; gap: calc(7 * var(--u)); align-items: flex-start; }
.dk-consent b { flex: none; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u)); border: 1px solid var(--edge); background: var(--key); margin-top: calc(1 * var(--u)); }
.dk-consent span { font-size: calc(8 * var(--u)); font-weight: 600; line-height: 1.3; color: var(--chip); }
.dk-btn {
  align-self: flex-start;
  margin-top: calc(2 * var(--u));
  font-size: calc(9 * var(--u));
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: 999px;
  background: var(--key);
  color: var(--on-key);
}

/* Dein Design */
.dk-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(6 * var(--u)); }
.dk-swatches i { height: calc(38 * var(--u)); border-radius: calc(9 * var(--u)); border: 1px solid var(--edge); }
.dk-swatches i:nth-child(1) { background: #107627; }
.dk-swatches i:nth-child(2) { background: #14381e; }
.dk-swatches i:nth-child(3) { background: #e8f5e9; }
.dk-swatches i:nth-child(4) { background: #7d9c92; }
.dk-type {
  display: flex;
  align-items: baseline;
  gap: calc(7 * var(--u));
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--card);
  border: 1px solid var(--edge);
}
.dk-type span:first-child { font-size: calc(22 * var(--u)); font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.dk-type span:last-child { font-size: calc(8 * var(--u)); font-weight: 800; letter-spacing: 0.07em; color: var(--chip); }

/* Kleiner Stapel (Handy, schmale Spalte, seit 2026-09-18 auf Wunsch des
   Inhabers): unter 470 px Breite wären die Beschriftungen nur 3 bis 4 px groß.
   Dann werden die Karten zu Formen: jeder Text wird zu einem Balken genau
   seiner Länge (durchgestrichen mit dicker Linie, Schrift unsichtbar), Pillen,
   Kacheln und Knöpfe bleiben als leere Flächen. Lesbar bleiben nur die
   Kartentitel und das „Aa" der Schriftprobe. Ein Balken über text-decoration
   folgt auch Text ohne eigenes Element (die Kopfzeile „GÄSTELISTE"). */
@container (max-width: 470px) {
  .deck-card { --bar: rgba(20, 56, 30, 0.16); --bar-strong: rgba(20, 56, 30, 0.3); }
  .deck-card.is-brand { --bar: rgba(255, 255, 255, 0.32); --bar-strong: rgba(255, 255, 255, 0.62); }
  .dk-eyebrow,
  .dk-stat b,
  .dk-stat span,
  .dk-row-head,
  .dk-name,
  .dk-mlabel,
  .dk-mfield,
  .dk-greet,
  .dk-event,
  .dk-date,
  .dk-steps span,
  .dk-flabel,
  .dk-input,
  .dk-consent span,
  .dk-type span:last-child {
    color: transparent;
    text-decoration-line: line-through;
    text-decoration-thickness: 0.62em;
    text-decoration-color: var(--bar);
  }
  .dk-stat b, .dk-name, .dk-mfield, .dk-greet, .dk-input { text-decoration-color: var(--bar-strong); }
  .dk-event { text-decoration-color: rgba(255, 255, 255, 0.7); }
  .dk-date { text-decoration-color: rgba(255, 255, 255, 0.35); }
  .dk-pill, .dk-tag, .dk-cta, .dk-btn, .dk-tiles span, .dk-eyebrow-live span { color: transparent; }
}

@media (max-width: 900px) {
  .head-split { grid-template-columns: minmax(0, 1fr); }
  .iso { font-size: clamp(6px, 2.1vw, 11px); }
}
@media (max-width: 420px) {
  .iso-stack { transform: rotateX(11deg) rotateY(-19deg); }
}

/* Feature navigation shares the existing keyboard and backdrop behaviour. */
.nav-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; padding: 18px; }
.nav-links .nav-feature-grid > li > a { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px; }
.nav-feature-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: #edf5ee; color: var(--signup-primary); }
.nav-feature-icon svg { width: 20px; height: 20px; }
.nav-feature-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nav-feature-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; padding: 12px 0 0; border-top: 1px solid var(--signup-border); }
.nav-links .nav-feature-footer > a { font-size: .85rem; font-weight: 650; color: var(--signup-primary); align-items: center; }
.uc-feature[id], .topic-card[id] { scroll-margin-top: 105px; }
@media (min-width: 1181px) {
  .nav-inner { position: relative; }
  .nav-item-features { position: static; }
  .nav-dd-features { left: 50%; translate: -50% 0; width: min(900px, calc(100vw - 48px)); max-width: none; }
  .nav-feature-grid { max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 1180px) {
  .nav-feature-grid { gap: 4px 14px; padding: 0 0 14px; }
  .nav-links .nav-feature-grid > li > a { align-items: center; }
  .nav-feature-footer { margin-top: 4px; padding-top: 8px; }
}
@media (max-width: 620px) {
  .nav-feature-grid { grid-template-columns: 1fr; }
  .nav-feature-footer { flex-direction: column; gap: 0; }
}

/* Seitentitel ohne Hero (Datenschutz, Impressum): wie alle Unterseiten. */
.page-title { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-weight: 450; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.012em; color: #141414; margin-bottom: 1.5rem; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }

/* Kopierknopf auf der Karte „Schreib uns" der Hilfe (seit 2026-09-24). */
.hp-copy { position: absolute; top: 0.6rem; right: 0.6rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--signup-border); border-radius: 9px; background: #fff; color: var(--signup-primary); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.hp-copy:hover { background: var(--signup-tint); }
.hp-copy:focus-visible { outline: 2px solid var(--signup-primary); outline-offset: 2px; }
.hp-copy.is-done { background: var(--signup-primary); border-color: var(--signup-primary); color: #fff; }
/* Die Karte schneidet über ihren Rand ab, der Hinweis steht deshalb links neben dem Knopf. */
.hp-copy .hp-copy-tip { position: absolute; top: 50%; right: calc(100% + 6px); transform: translateY(-50%); padding: 0.25rem 0.55rem; border-radius: 6px; background: var(--signup-dark); color: #fff; font-size: 0.72rem; font-weight: 700; white-space: nowrap; pointer-events: none; }
@media (max-width: 620px) { .hp-copy { top: 0.4rem; right: 0.4rem; width: 1.8rem; height: 1.8rem; } .hp-copy svg { width: 14px; height: 14px; } }

/* Seit 2026-09-24 tragen alle Aufklappmenüs Symbole wie „Funktionen". */
.nav-links .nav-icon-list > li > a { flex-direction: row; align-items: flex-start; gap: 12px; }
@media (max-width: 1180px) { .nav-links .nav-icon-list > li > a { align-items: center; } }

/* Rechtstexte (Impressum und Datenschutz, seit 2026-10-11) im Seitenlayout mit Menü und Fußzeile. */
.legal-main { padding: 140px 0 96px; }
.legal { max-width: 46rem; }
.legal .page-title { margin: 14px 0 20px; }
.legal-lead { font-size: 1.08rem; line-height: 1.65; color: var(--signup-text); }
.legal-date { margin-top: .9rem; font-size: .88rem; color: var(--signup-muted); }
.legal section { margin-top: 2.6rem; scroll-margin-top: 96px; }
.legal h2 { font-size: var(--fs-h3-lg); margin: 0 0 .7rem; }
.legal address { font-style: normal; }
.legal p, .legal address, .legal dd { line-height: 1.7; color: var(--signup-text); }
.legal section p + p, .legal address + p, .legal p + address, .legal dl + p, .legal p + dl { margin-top: .8rem; }
.legal a { color: var(--signup-primary); text-decoration: underline; text-underline-offset: 4px; }
.legal-facts { margin: 0; border: 1px solid var(--signup-border); border-radius: 14px; background: #fff; overflow: hidden; }
.legal-facts > div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 4px 20px; padding: .8rem 1.1rem; }
.legal-facts > div + div { border-top: 1px solid var(--signup-border); }
.legal-facts dt { font-weight: 600; color: var(--signup-muted); font-size: .92rem; line-height: 1.7; }
.legal-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .legal-main { padding-top: 110px; } }
@media (max-width: 560px) { .legal-facts > div { grid-template-columns: minmax(0, 1fr); } }

/* Vertragstexte (AGB, seit 2026-10-11), erzeugt mit docs/tools/rechtstexte-bauen.py. */
.legal-contract .page-title { font-size: var(--fs-h2); hyphens: manual; text-wrap: balance; }
.legal-subtitle { color: var(--signup-muted); line-height: 1.6; }
.legal-subtitle + .legal-subtitle { margin-top: .2rem; }
/* Rechtstexte mit Verzeichnis (AGB, Datenschutz; seit 2026-10-11, Wunsch des Inhabers): links ein
   mitlaufendes Inhaltsverzeichnis, das den aktuellen Abschnitt markiert (main.js), rechts der Text.
   Unter 1000 px steht das Verzeichnis eingeklappt über dem Text. */
.legal-doc { max-width: 72rem; }
.legal-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: 2.8rem; }
.legal-body { min-width: 0; max-width: 46rem; }
.legal-body > section:first-child { margin-top: 0; }
.legal-doc section { margin-top: 3.2rem; }
.legal-doc h2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: baseline; font-family: 'Inter', sans-serif; font-size: 1.28rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 1rem; color: var(--signup-text); }
.legal-sec-num { color: var(--signup-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.legal-doc .legal-num { color: var(--signup-primary); }
.legal-doc h3 { font-weight: 700; }
.legal-toc { position: sticky; top: calc(var(--nav-h) + 28px); max-height: calc(100vh - var(--nav-h) - 56px); overflow-y: auto; scrollbar-width: thin; padding-right: .4rem; font-size: .9rem; }
.legal-toc summary { list-style: none; margin-bottom: .7rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--signup-muted); pointer-events: none; }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; }
.legal .legal-toc a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .3rem; padding: .36rem .4rem .36rem .8rem; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: var(--signup-muted); text-decoration: none; line-height: 1.4; }
.legal .legal-toc a:hover { color: var(--signup-text); }
.legal .legal-toc a[aria-current] { color: var(--signup-text); font-weight: 600; border-left-color: var(--signup-primary); background: rgba(16, 118, 39, .06); }
.legal-toc-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--signup-primary); white-space: nowrap; }
@media (max-width: 999px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; margin-top: 2rem; }
  .legal-toc { position: static; max-height: none; overflow: visible; padding: .9rem 1.1rem; border: 1px solid var(--signup-border); border-radius: 14px; background: #fff; }
  .legal-toc summary { margin-bottom: 0; pointer-events: auto; cursor: pointer; }
  .legal-toc summary::after { content: ''; float: right; width: .5rem; height: .5rem; margin-top: .15rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
  .legal-toc[open] summary { margin-bottom: .6rem; }
  .legal-toc[open] summary::after { margin-top: .4rem; transform: rotate(-135deg); }
}
.legal-clause { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0 .6rem; margin-top: .8rem; }
.legal-clause-sub { margin-left: 3.8rem; grid-template-columns: 2.2rem minmax(0, 1fr); }
.legal-num { font-weight: 600; color: var(--signup-muted); line-height: 1.7; font-variant-numeric: tabular-nums; }
.legal h3 { font-size: 1.02rem; margin: 1.6rem 0 .5rem; }
.legal ul { margin: .8rem 0 0 1.2rem; line-height: 1.7; }
.legal ul + p, .legal dl + h3 { margin-top: 1.4rem; }
.legal ul + p { margin-top: .8rem; }
.legal-download { margin-top: .9rem; }
.legal-download a { font-weight: 600; }
.legal-open { background: #fff1b8; color: inherit; padding: 0 .15em; border-radius: 3px; }
.legal-table-wrap { margin-top: 1rem; overflow-x: auto; }
.legal-table { width: 100%; min-width: 34rem; border-collapse: collapse; table-layout: fixed; font-size: .93rem; line-height: 1.6; background: #fff; }
.legal-table th, .legal-table td { padding: .6rem .8rem; border: 1px solid var(--signup-border); text-align: left; vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.legal-table-wrap + p, .legal p + .legal-table-wrap { margin-top: 1rem; }
.legal-table th { font-weight: 600; background: var(--signup-bg); }
@media (max-width: 560px) { .legal-clause { grid-template-columns: 2.6rem minmax(0, 1fr); } .legal-clause-sub { margin-left: 1.4rem; } }

/* 404-Seiten (seit 2026-10-13): 404.html und en/404.html. Cloudflare liefert sie für jede unbekannte
   Adresse aus, deshalb stehen dort alle Verweise ab Wurzel. */
.notfound-main { padding: clamp(150px, 20vh, 220px) 0 clamp(90px, 14vh, 150px); text-align: center; }
.notfound .page-title { margin: 16px 0 20px; }
.notfound .lead { max-width: 34rem; margin: 0 auto 2.2rem; }