/* Automatisch erzeugt (lib/css-bundle.js, Paket "Startseite entschlacken") — nicht von Hand bearbeiten. */

/* ---- css/tokens.css ---- */
/*
 * Recurra Design Tokens — neu erzeugt aus MD3-Palette des Design-Systems (build.mjs)
 * Stand: 2026-08-14
 * Namensschema: --rc-<kategorie> (passend zu Design-System-Variablennamen)
 * Keine externen Ressourcen, kein CDN-Import.
 */

/* ===== SCHRIFTEN LOKAL =====
   Space Grotesk (Ueberschriften) und Manrope (Fliesstext), SIL Open Font
   License 1.1 — Lizenztexte liegen neben den Dateien unter public/fonts/.
   Latin-Subset (U+0000-00FF) deckt deutsche Umlaute und ß bereits ab, daher
   kein zusaetzliches latin-ext noetig. Keine externen Font-Anfragen
   (kein Google-Fonts-Link, kein CDN) — Dateien liegen im eigenen /fonts/.
*/
@font-face {
  font-family: 'Space Grotesk';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/space-grotesk/space-grotesk-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope/manrope-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/manrope/manrope-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope/manrope-latin-700-normal.woff2') format('woff2');
}

:root {

  /* ===== MD3 PRIMARY ===== */
  --rc-primary:                   #a90055;   /* 7,19:1 auf Weiß (AAA) — CTA, Hauptakzent, Text freigegeben */
  --rc-primary-container:         #d6006d;   /* 5,08:1 auf Weiß (AA) — dunkle CTA-Fläche */
  --rc-on-primary:                #ffffff;
  --rc-on-primary-container:      #ffecef;
  --rc-inverse-primary:           #ffb1c6;

  /* ===== MD3 SECONDARY / TEAL ===== */
  --rc-secondary:                 #006972;   /* 6,12:1 auf Weiß (AA) — Teal-Akzent, Text freigegeben */
  --rc-secondary-container:       #9ff0fb;
  --rc-on-secondary:              #ffffff;
  --rc-on-secondary-container:    #066f79;
  --rc-secondary-fixed-dim:       #82d3de;

  /* ===== MD3 TERTIARY / GRÜN ===== */
  --rc-tertiary:                  #00631d;   /* 6,96:1 auf Weiß (AA) — Erfolg, Match gewonnen */
  --rc-tertiary-container:        #007f28;
  --rc-on-tertiary:               #ffffff;
  --rc-tertiary-fixed:            #8ffa92;

  /* ===== MD3 SURFACE / FLÄCHEN ===== */
  --rc-surface:                   #f9f9f9;
  --rc-surface-container:         #eeeeee;
  --rc-surface-container-low:     #f3f3f3;
  --rc-surface-container-high:    #e8e8e8;
  --rc-surface-container-highest: #e2e2e2;
  --rc-surface-container-lowest:  #ffffff;
  --rc-surface-dim:               #dadada;
  --rc-on-surface:                #1a1c1c;   /* 18,40:1 auf Weiß (AAA) — Haupttext */
  --rc-on-surface-variant:        #5a3f46;
  --rc-outline:                   #8e6f76;
  --rc-outline-variant:           #e2bdc5;

  /* ===== MD3 ERROR ===== */
  --rc-error:                     #ba1a1a;   /* 6,39:1 auf Weiß (AA) */
  --rc-error-container:           #ffdad6;
  --rc-on-error:                  #ffffff;
  --rc-on-error-container:        #93000a;

  /* ===== MD3 INVERSE (Header, Footer) ===== */
  --rc-inverse-surface:           #2f3131;
  --rc-inverse-on-surface:        #f1f1f1;

  /* ===== MARKEN-FLÄCHEN ===== */
  /* Logo-Pink: NUR als Fläche/Akzent — nie als Textfarbe (Kontrast 3,16:1, nicht WCAG AA) */
  --rc-pink:                      #F9527D;
  --rc-pink-tint:                 rgba(249, 82, 125, 0.10);
  --rc-dark:                      #12222B;   /* auf Pink: 5,27:1 (AA) */

  /* ===== ROLLENFARBEN (Gründer 04.10.2026) =====
     Magenta und Dunkel stehen für Recurra; Spieler = Grün (Tertiary), Verkäufer = Teal (Secondary).
     Beide als Text auf Weiß freigegeben (AA). */
  --rc-rolle-spieler:             #00631d;   /* 6,96:1 auf Weiß */
  --rc-rolle-spieler-tint:        #e6f8e6;
  --rc-rolle-verkaeufer:          #006972;   /* 6,12:1 auf Weiß */
  --rc-rolle-verkaeufer-tint:     #e3f8fa;

  /* ===== SCHATTEN ===== */
  --rc-shadow-card:               0px 20px 40px rgba(26, 28, 28, 0.04);
  --rc-shadow-card-hover:         0px 20px 40px rgba(26, 28, 28, 0.12);
  --rc-shadow-glow-primary:       0 0 15px rgba(169, 0, 85, 0.3);
  --rc-shadow-glow-primary-lg:    0px 10px 30px rgba(169, 0, 85, 0.3);

  /* ===== RADIEN (aus tailwind.config.js des Design-Systems) ===== */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-card: 24px;
  --r-pill: 9999px;

  /* ===== TYPOGRAFIE ===== */
  /* Space Grotesk (Ueberschriften, 500/700) + Manrope (Fliesstext, 400/600/700) lokal
     eingebunden (siehe @font-face oben), System-Fallback dahinter. */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* ===== CONTAINER ===== */
  --rc-container-max:       1200px;
  --rc-container-narrow:    720px;
  --rc-container-padding-x: clamp(16px, 4vw, 48px);

  /* ===== TRANSITIONS ===== */
  --rc-transition-fast:   0.15s ease;
  --rc-transition-normal: 0.2s ease;

  /* ===== WEB-CORE-BRÜCKE (Consent-Banner) =====
     @hego-factory/web-core/tracking#buildConsentBanner (ab 2.1.1) liest --ink/--ink-invert/
     --amber statt eigener Farben, damit eine Website ihr eigenes Aussehen setzen kann.
     Ohne diese Brücke bekommt der Banner die generischen HEGO-Factory-Ausweichwerte
     (dunkles Grün, Gold) statt Recurras Marke. --rc-pink ist laut eigener Doku "NUR als
     Fläche/Akzent, nie als Textfarbe" (Zeile 54 oben) — passt deshalb genau als --amber:
     dunkler Text auf hellerer Fläche, wie im Ausgangsentwurf mit Gold. */
  --ink:        var(--rc-dark);
  --ink-invert: var(--rc-inverse-on-surface);
  --amber:      var(--rc-pink);
}

/* ---- css/site.css ---- */
/*
 * Recurra Website — Haupt-Stylesheet
 * Importiert: tokens.css (muss vorab eingebunden sein)
 * Leitplanken: WCAG 2.2 AA, prefers-reduced-motion, kein Casino-Look, kein CDN
 */

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /*
  Ladeanimation: die globale Regel oben liesse die Klingen nach einem 0,01-ms-Durchlauf auf ihrer
  Grunddeckkraft 0,25 stehen (halb durchsichtige Bildmarke). Marke verlangt: still und voll sichtbar.
  */
  .rc-loader-klinge {
    animation: none !important;
    opacity: 1 !important;
  }
}

/*
Inline-SVG-Sinnbilder (Paket "Startseite entschlacken", lib/icons.js#iconSvg()): ersetzen die
Material-Symbols-Ligaturen innerhalb der bisherigen ".material-symbols-outlined"-Container, ohne
dass jede Verwendungsstelle ihre font-size/color-Regeln selbst anpassen muss — "1em" folgt der
font-size des umschliessenden Elements genauso wie vorher die Glyphe, "currentColor" der Textfarbe.
Gilt seitenweit (site.css ist auf jeder Seite eingebunden), eine Regel statt fuenf verstreuter
@font-face-Bloecke.
*/
.material-symbols-outlined svg,
.rc-icon-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}

/* Nur fuer Screenreader sichtbarer Text (z. B. "Wird geladen" in der Ladeanzeige) */
.rc-visuell-verborgen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*
Ladeanzeige "Umlauf" (lib/template.js#ladeanzeige): ein Akzent wandert im Uhrzeigersinn ueber die
drei Klingen der Bildmarke, 1,2 s je Umlauf, sanft auslaufend. Kein Blinken, kein Leuchteffekt.
Farbe ueber currentColor: #a90055 auf hellem Grund, Weiss auf dem Primary-Knopf.
Groessen: 16 px in Knoepfen, 24 px in Listen und Karten, 48 px beim Laden ganzer Seiten.
*/
.rc-loader {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

.rc-loader svg {
  display: block;
  fill: currentColor;
}

.rc-loader-klinge {
  opacity: 0.25;
  animation: rc-umlauf 1.2s infinite ease-out;
}

.rc-loader-klinge--2 { animation-delay: 0.4s; }
.rc-loader-klinge--3 { animation-delay: 0.8s; }

@keyframes rc-umlauf {
  0%   { opacity: 1; }
  20%  { opacity: 1; }
  50%  { opacity: 0.25; }
  100% { opacity: 0.25; }
}

body {
  font-family: var(--font-body);
  background: var(--rc-surface);
  color: var(--rc-on-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Globaler Fokus (WCAG 2.2) */
:focus-visible {
  outline: 3px solid var(--rc-primary);
  outline-offset: 3px;
  border-radius: var(--r-md);
}

/* Skip-Link (Barrierefreiheit) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rc-primary);
  color: var(--rc-on-primary);
  padding: 8px 16px;
  font-weight: 600;
  z-index: 9999;
  border-radius: var(--r-md);
}
.skip-link:focus { left: 8px; top: 8px; }

/* Container */
.container {
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding-inline: var(--rc-container-padding-x);
}

/* ===== BREADCRUMB (Paket "Sitemap und Verlinkung") ===== */
/* Sichtbare Leiste ausgeblendet (Gründerentscheidung 05.10.2026); die BreadcrumbList im JSON-LD
   bleibt. Zum Wiedereinblenden nur die display-Zeile entfernen. */
.rc-breadcrumb {
  display: none;
  max-width: var(--rc-container-max);
  margin-inline: auto;
  padding: 12px var(--rc-container-padding-x) 0;
  font-size: 0.875rem;
  color: var(--rc-on-surface-variant);
}
.rc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}
.rc-breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 4px;
  color: var(--rc-outline);
}
.rc-breadcrumb a {
  color: var(--rc-on-surface-variant);
  text-decoration: none;
}
.rc-breadcrumb a:hover {
  text-decoration: underline;
}
.rc-breadcrumb li[aria-current="page"] {
  color: var(--rc-on-surface);
  font-weight: 600;
}

/* ===== NAVIGATION ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 var(--rc-container-padding-x);
  background: var(--rc-inverse-surface);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-inner {
  max-width: var(--rc-container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

/*
Logo in der Kopfzeile: Bild (weisse transparente Fassung, Komposition 01), nie als Schrift
nachgesetzt. Breite 180 px mit Claim (Mindestbreite laut Marke 160 px), auf schmalen Bildschirmen
die Fassung ohne Claim (Mindestbreite 80 px, hier 120 px). Schutzraum laut Design-System = halbe
Logohoehe rundum: 180 px breit -> 35 px hoch -> 18 px; ohne Claim 20 px hoch -> 10 px. Oben und
unten stellt ihn das Padding des Links, rechts der Abstand der Kopfzeile (.nav-inner gap 20 px),
links der Seitenrand (mind. 16 px; auf schmalen Bildschirmen reicht das fuer 10 px).
*/
.nav-brand {
  display: flex;
  align-items: center;
  padding-block: 18px;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 0;
}

.nav-brand img {
  display: block;
  width: 180px;
  height: auto;
}

@media (max-width: 480px) {
  .nav-brand { padding-block: 12px; }
  .nav-brand img { width: 120px; }
}

.nav-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin-left: 10px;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--rc-transition-fast);
}

.nav-links a:hover,
.nav-links a.active { color: var(--rc-inverse-on-surface); font-weight: 600; }

.nav-spacer { margin-left: auto; }

.nav-cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  background: var(--rc-primary);
  color: var(--rc-on-primary);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  text-decoration: none;
  box-shadow: var(--rc-shadow-glow-primary);
  transition: background var(--rc-transition-fast);
  white-space: nowrap;
}

.nav-cta:hover { background: var(--rc-primary-container); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rc-inverse-on-surface);
  padding: 4px;
  margin-left: auto;
}

@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
               background: var(--rc-inverse-surface); padding: 16px var(--rc-container-padding-x); border-top: 1px solid rgba(255,255,255,0.08); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  /* Mobil steht die Kopfzeile immer fest oben (Logo und Menü-Knopf bleiben sichtbar, auch wo
     „sticky“ in mobilen Browsern aussetzt). Der Seiteninhalt beginnt darunter (--rc-kopf-h). */
  .site-header { position: fixed; top: 0; left: 0; right: 0; }
  body { padding-top: var(--rc-kopf-h, 45px); }
  html { scroll-padding-top: var(--rc-kopf-h, 45px); }
  .nav-links.open { max-height: calc(100vh - var(--rc-kopf-h, 45px)); overflow-y: auto; }
}

/* ===== SECTION GEMEINSAM ===== */
.section {
  padding: 80px var(--rc-container-padding-x);
}

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rc-primary);
  margin-bottom: 8px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.5vw, 36px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 12px;
}

.section-intro {
  font-size: 17px;
  color: var(--rc-on-surface-variant);
  max-width: 60ch;
  margin-bottom: 48px;
  line-height: 1.7;
}

.btn-primary {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  background: var(--rc-primary);
  color: var(--rc-on-primary);
  border-radius: var(--r-pill);
  padding: 14px 28px;
  text-decoration: none;
  box-shadow: var(--rc-shadow-glow-primary-lg);
  transition: background var(--rc-transition-fast);
  display: inline-block;
  border: none;
  cursor: pointer;
}

.btn-primary:hover { background: var(--rc-primary-container); }

/* ===== NEWS ===== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.news-card {
  background: var(--rc-surface-container-lowest);
  border: 1px solid var(--rc-outline-variant);
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: var(--rc-shadow-card);
  transition: box-shadow var(--rc-transition-normal);
  text-decoration: none;
  color: inherit;
  display: block;
}

.news-card:hover { box-shadow: var(--rc-shadow-card-hover); }

.news-card-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-outline);
  margin-bottom: 8px;
}

.news-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 10px;
  color: var(--rc-on-surface);
}

.news-card p {
  font-size: 14px;
  color: var(--rc-on-surface-variant);
  line-height: 1.6;
  margin-bottom: 16px;
}

.news-card-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--rc-primary);
  text-decoration: none;
}

.news-card-link:hover { text-decoration: underline; }

/* ===== KONTAKTFORMULAR ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

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

.contact-form {
  background: var(--rc-surface-container-lowest);
  border: 1px solid var(--rc-outline-variant);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: var(--rc-shadow-card);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--rc-on-surface);
}

.form-label .required {
  color: var(--rc-error);
  margin-left: 2px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--rc-outline);
  border-radius: var(--r-lg);
  background: var(--rc-surface-container-lowest);
  color: var(--rc-on-surface);
  transition: border-color var(--rc-transition-fast), box-shadow var(--rc-transition-fast);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--rc-primary);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(169, 0, 85, 0.15);
}

.form-input.error,
.form-textarea.error {
  border-color: var(--rc-error);
  border-width: 2px;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-error {
  font-size: 13px;
  color: var(--rc-error);
  margin-top: 5px;
  display: none;
}

.form-error.visible { display: block; }

/*
Absendeknopf mit Ladezustand: waehrend des Sendens gesperrt (disabled, aria-busy), links die
16-px-Ladeanzeige in Weiss (currentColor des Primary-Knopfs), daneben "Wird gesendet …".
Keine abgeschwaechte Deckkraft im gesperrten Zustand: Weiss auf #a90055 behaelt 7,19:1.
*/
.btn-primary.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-primary.form-submit[disabled] {
  cursor: progress;
  background: var(--rc-primary);
}

/* Honeypot: vollständig ausgeblendet (auch für Browser-Autofill), nur Bots lesen es aus dem HTML */
.form-honeypot,
.form-honeypot[hidden] {
  display: none !important;
}

/* Datenschutz-Checkbox (nicht vorausgewählt — Leitplanke) */
.form-checkbox-group {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--rc-primary);
}

.form-checkbox-label {
  font-size: 14px;
  color: var(--rc-on-surface-variant);
  line-height: 1.5;
}

.form-checkbox-label a {
  color: var(--rc-primary);
  text-decoration: underline;
}

.form-submit {
  width: 100%;
}

/* Alert-Boxen (barrierefrei: role="alert") */
.alert {
  border-radius: var(--r-lg);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Erfolg: weißer Kasten, dunkler Text, grüner Haken – lesbar auch auf dunklen Flächen. */
.alert--success {
  position: relative;
  padding-left: 52px;
  background: #fff;
  border: 1px solid var(--rc-tertiary);
  color: var(--rc-on-surface);
}

.alert--success::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rc-tertiary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}


/* Faehnchen oben (z. B. bestaetigte Newsletter-Anmeldung), unter der festen Kopfleiste. */
.rc-faehnchen {
  position: fixed;
  top: calc(var(--rc-kopf-h, 64px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(560px, calc(100% - 32px));
  margin: 0;
  padding-right: 44px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.rc-faehnchen-schliessen {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  padding: 6px;
  color: var(--rc-on-surface);
  cursor: pointer;
}

.alert--error {
  background: var(--rc-error-container);
  border: 1px solid var(--rc-error);
  color: var(--rc-on-error-container);
}

/* ===== NEWS-SEITE ===== */
.news-article {
  max-width: var(--rc-container-narrow);
  margin-inline: auto;
}

.news-article h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.news-article-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-outline);
  margin-bottom: 40px;
}

.news-article-body p {
  margin-bottom: 20px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--rc-on-surface);
}

.news-article-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 32px 0 12px;
}

.news-article-body strong { font-weight: 700; }

.news-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--rc-primary);
  text-decoration: none;
  margin-bottom: 40px;
}

.news-back-link:hover { text-decoration: underline; }

/* ===== LEGAL-SEITEN ===== */
.legal-content {
  max-width: var(--rc-container-narrow);
  margin-inline: auto;
}

.legal-content h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.01em;
  margin-bottom: 40px;
}

.legal-section {
  margin-bottom: 32px;
}

.legal-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--rc-on-surface);
}

.legal-section p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--rc-on-surface-variant);
  white-space: pre-line;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--rc-inverse-surface);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 48px var(--rc-container-padding-x) 32px;
}

.footer-inner {
  max-width: var(--rc-container-max);
  margin-inline: auto;
}

.footer-top {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.footer-brand {
  margin-right: auto;
  max-width: 280px;
}

.footer-logo {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

.footer-logo img {
  display: block;
  width: 180px;
  height: auto;
}

.footer-brand p {
  color: var(--rc-outline);
  font-size: 13px;
  margin-top: 18px;
  line-height: 1.5;
}

.footer-col h3,
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-outline);
  margin-bottom: 12px;
}

/*
Kompaktformular der Fusszeile (renderAnmeldeformular({kontext:'footer'}), lib/template.js#footer()):
dasselbe Formular-Markup wie Section 3 der Startseite, aber auf dunklem Grund (.site-footer) —
die generischen .form-label/.form-input-Farben (public/css/site.css, Zeile ~615ff.) sind fuer
HELLEN Grund gedacht und waeren hier kaum lesbar. Diese Regeln aendern NUR die Farben innerhalb
der Fusszeilen-Spalte, nicht die generischen Klassen selbst — jede andere Einsatzstelle bleibt
unberuehrt. `min-width: 0` gegen horizontales Ueberlaufen bei 375px (Flex-Kinder schrumpfen sonst
nicht unter ihren Inhalt).
*/
.footer-col--formular {
  min-width: 0;
  flex: 1 1 240px;
}

.footer-col--formular .rc-anmeldeformular-rollen {
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}

.footer-col--formular .rc-anmeldeformular-rollen legend,
.footer-col--formular .rc-anmeldeformular-rolle,
.footer-col--formular .rc-anmeldeformular-einwilligung,
.footer-col--formular .form-label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

/* Spezifischer als ".rc-anmeldeformular .form-label { color: inherit }" aus
   startseite/anmeldung.css, das auf der Startseite nach site.css geladen wird. */
.footer-col--formular .rc-anmeldeformular .form-label,
.footer-col--formular .rc-anmeldeformular .rc-anmeldeformular-rollen legend {
  color: rgba(255, 255, 255, 0.78);
}

.footer-col--formular .rc-anmeldeformular-einwilligung a {
  display: inline;
  color: var(--rc-inverse-primary);
}

.footer-col--formular .form-input {
  background: var(--rc-surface-container-lowest);
  color: var(--rc-on-surface);
}

.footer-col--formular .form-group { margin-bottom: 12px; }
.footer-col--formular .rc-anmeldeformular-einwilligung { display: block; margin-bottom: 10px; }

.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 7px;
  transition: color var(--rc-transition-fast);
}

.footer-col a:hover { color: var(--rc-inverse-primary); }

/*
Anschrift in der Kontaktspalte der Fusszeile. Kein Verweis, deshalb kein <a> — aber
dieselbe Optik wie die Verweise daneben, damit die Spalte nicht auseinanderfaellt.
Der Text kommt aus den Stammdaten (locales.de.stammdaten.contactAddress); dieses
Regelwerk bestimmt nur das Aussehen.
*/
.footer-col p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-bottom: 7px;
  line-height: 1.5;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--rc-outline);
  font-size: 11px;
  font-family: var(--font-mono);
  flex-wrap: wrap;
  gap: 8px;
}

/* ===== 404 / 500 ===== */
.error-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 48px var(--rc-container-padding-x);
}

.error-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
}

.error-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 120px;
  line-height: 1;
  color: var(--rc-primary);
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}

.error-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 12px;
}

.error-page p {
  font-size: 16px;
  color: var(--rc-on-surface-variant);
  margin-bottom: 32px;
  max-width: 40ch;
}

/* ---------------------------------------------------------------------------
   CMS-Inline-Bearbeitung: Groesse der Sinnbilder in den Bedienknoepfen.
   Das Paket liefert den Ligatur-Namen (z. B. "edit"); die Schrift
   Material Symbols wird lokal unter /fonts/material-symbols geladen.
   Ohne Groessenangabe rendert die Schrift in ihrer Vorgabe von 24px und
   sprengt den 32px-Knopf.
--------------------------------------------------------------------------- */
.rc-cms-symbol {
  font-size: 16px;
  line-height: 1;
}

/* =============================================================================================
   BAUSTEINE (Paket "Seitengerüst und Bausteine", lib/bausteine.js)
   Pflichtzeile, Warteliste-Karte/-Band/-Formular, Social-Icons, FAQ-Liste. Primärfarbe
   var(--rc-primary) (#a90055, public/css/tokens.css) — geprüft, identisch zur
   Primärfarbe aus der fachlichen Grundlage (webseite-recurra-de.md §8).
============================================================================================= */

/* ----- Pflichtzeile ----- */
.rc-pflichtzeile {
  font-size: 13px;
  color: var(--rc-on-surface-variant);
  margin-top: 8px;
}

/* ----- Neutrale CTA-Karte (aktuell genutzt) und Warteliste-Karte (angelegt, nicht eingebunden) ----- */
.rc-cta-karte,
.rc-warteliste-karte {
  background: var(--rc-surface-container-low);
  border-radius: var(--r-card);
  padding: 24px;
}

.rc-cta-karte h3,
.rc-warteliste-karte h3 {
  margin-bottom: 8px;
}

.rc-cta-karte .btn-primary,
.rc-warteliste-karte .btn-primary {
  margin-top: 16px;
  display: inline-block;
}

/* ----- Warteliste: vollbreites Band ----- */
.rc-warteliste-band {
  background: var(--rc-primary);
  color: var(--rc-on-primary);
  padding: 48px var(--rc-container-padding-x);
  text-align: center;
}

.rc-warteliste-band h2 {
  color: var(--rc-on-primary);
}

.rc-warteliste-band .btn-primary {
  margin-top: 16px;
  display: inline-block;
  background: var(--rc-on-primary);
  color: var(--rc-primary);
}

/* ----- Warteliste: Formular ----- */
.rc-warteliste-formular {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rc-warteliste-rollen {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
}

.rc-warteliste-rolle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rc-warteliste-einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
}

.rc-warteliste-hinweis {
  font-size: 13px;
  color: var(--rc-on-surface-variant);
}

/* Honeypot: fuer Menschen unsichtbar, fuer automatisiertes Ausfuellen weiterhin erreichbar
   (kein display:none — manche Bots ueberspringen ausgeblendete Felder gezielt). */
.rc-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ----- Social-Icons ----- */
.rc-social-icons {
  display: flex;
  gap: 16px;
}

.rc-social-icon {
  color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--rc-transition-fast);
}

.rc-social-icon:hover {
  opacity: 0.8;
}

/* ----- FAQ-Liste ----- */
.rc-faq-gruppe {
  margin-bottom: 32px;
}

.rc-faq-item {
  border-bottom: 1px solid var(--rc-outline-variant);
  padding: 16px 0;
}

.rc-faq-item summary {
  cursor: pointer;
  font-weight: 600;
}

/* ===== Kontakt (Paket "Kontakt erweitern", .agent/pakete/kontakt-erweitern.md) ===== */
/* Direktwege neben dem Formular: info@recurra.de, FAQ, Discord (nur bei konfigurierter Einladung) -
   auch Teil des Danke-Zustands (renderKontaktDankeInhalt(), src/routes/contact.js). */
.kontakt-direktwege {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.kontakt-direktwege li a {
  color: var(--rc-primary);
  font-weight: 600;
  text-decoration: underline;
}

.kontakt-direktwege-block {
  margin-top: 32px;
}

/* Handlungsaufruf im Danke-Zustand - heute ungenutzt (renderKontaktDankeInhalt({ cta })), schon
   gestaltet fuer eine spaetere Ergaenzung (z. B. Warteliste). */
.kontakt-danke-cta {
  margin-top: 16px;
}

/* ===== Startseite, Navigation, Fusszeile (Paket, .agent/pakete/startseite-navigation.md) ===== */

/* Burger-Menue: FAQ und Kontakt stehen zusaetzlich zu den sechs Hauptpunkten, aber NUR mobil
   (fachliche Grundlage §4: "FAQ und Kontakt stehen bewusst nicht in der Kopfzeile [Desktop]").
   Auf Desktop-Breiten (>768px, siehe .nav-links-Regel oben) ausgeblendet. */
.nav-link-mobile-only { display: none; }

@media (max-width: 768px) {
  .nav-link-mobile-only { display: list-item; }
}

/* Fusszeile: neue Spaltenueberschriften (vier Spalten nach §4) nutzen dieselbe Optik wie die
   bisherigen "Plattform"/"Mehr"/"Rechtliches"-Spalten - keine neuen Klassen noetig, .footer-col
   bleibt unveraendert. Die untere Zeile traegt jetzt zusaetzlich die Rechtslinks als <nav>. */
.footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.footer-legal-row a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 13px;
}

.footer-legal-row a:hover { color: var(--rc-inverse-on-surface); }

/*
 * KI-Hinweis (Gründerauftrag): Alle Foto-/Video-Flächen (nicht Logos/Bildmarke/Icons) tragen
 * einen unauffälligen, aber sichtbaren "AI generated"-Schriftzug unten rechts. Reines CSS-Overlay
 * per Attribut `data-ki-hinweis` auf dem umschließenden Container (::after wirkt nicht auf
 * <img>/<video> selbst) - die Originaldateien bleiben unveraendert, der Hinweis ist zentral hier
 * aenderbar. Werte (leerzeichengetrennt, mehrere moeglich):
 *   data-ki-hinweis            - Normalfall, unten rechts, 7px.
 *   data-ki-hinweis="rund"     - Container mit overflow:hidden + Radius >= 16px: groesserer
 *                                 Abstand, damit der Text innerhalb der Rundung bleibt.
 *   data-ki-hinweis="links"    - unten LINKS statt rechts, falls rechts schon eine Bedienfläche
 *                                 liegt (z. B. Ton-Knopf am Video).
 *   data-ki-hinweis="hero"     - sehr grosse Flaeche (Hero-Vollbild): 8px statt 7px.
 *   data-ki-hinweis="vorne"    - nutzt ::before statt ::after, fuer Container, deren eigenes
 *                                 ::after schon vergeben ist (siehe .rc-hero-video-flaeche).
 *   data-ki-hinweis="abzeichen" - kleine runde Profilbilder: statt Schriftzug ein rundes „AI“-
 *                                 Abzeichen unten rechts am Kreis (Gründer: Profilbilder der
 *                                 Startseite, Section „So funktioniert's“).
 * Position: relative nur setzen, wenn der Container nicht schon selbst positioniert ist - eine
 * eigene Positionsangabe des Containers (spaeter im Stylesheet bzw. in einer spezifischeren Regel)
 * gewinnt in der Kaskade von selbst.
 */
[data-ki-hinweis] {
  position: relative;
}

[data-ki-hinweis]::after {
  content: "AI generated";
  content: "AI generated" / "";
  position: absolute;
  right: 6px;
  bottom: 4px;
  font: 600 7px/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 3;
}

[data-ki-hinweis~="rund"]::after {
  right: 10px;
  bottom: 10px;
}

[data-ki-hinweis~="links"]::after {
  right: auto;
  left: 10px;
}

[data-ki-hinweis~="hero"]::after {
  font-size: 8px;
}

[data-ki-hinweis~="abzeichen"]::after {
  content: "AI";
  content: "AI" / "";
  right: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #1e1e1c;
  font: 700 7px/1 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(18, 34, 43, 0.25);
}

[data-ki-hinweis~="vorne"]::before {
  content: "AI generated";
  content: "AI generated" / "";
  position: absolute;
  right: 6px;
  bottom: 4px;
  font: 600 7px/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 3;
}

[data-ki-hinweis~="vorne"][data-ki-hinweis~="hero"]::before {
  font-size: 8px;
}

/* Footer: Plattform-Logo vor dem Kanalnamen (lib/template.js#footerCommunityLinks). */
.site-footer .rc-footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-footer .rc-footer-social .rc-social-logo { flex: none; }

/* ---- css/startseite/basis.css ---- */
/*
 * Zweck: Gemeinsames Gerüst-CSS der vier neuen Startseiten-Sections (Phase 0, .agent/pakete/
 *   startseite-neu-phase0.md) — Abstände, Container, Section-Rhythmus, Farb-Tokens.
 * Hauptverantwortung: NUR das, was alle vier Sections teilen. Section-eigenes Aussehen (Hero-
 *   Video, Fortschrittsbalken, Formular-Layout, Ablauf-Karten) kommt in die jeweils eigene Datei
 *   (hero.css, fortschritt.css, anmeldung.css, ablauf.css).
 * Eingebunden über page({ stylesheets: [...] }) NACH /css/site.css, siehe lib/routes.js.
 */

.rc-start {
  padding: 64px 0;
}

.rc-start .container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.rc-start--hero {
  background: #12222B;
  color: #fff;
}

.rc-start--anmeldung {
  background: #a90055;
  color: #fff;
}

.rc-start--anmeldung a {
  color: inherit;
}

.rc-start--fortschritt,
.rc-start--ablauf {
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .rc-start * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Einblenden beim Scrollen (Sections 3 und 4, public/js/startseite-einblenden.js) ---
   Nur mit Skript aktiv (Klasse rc-einblenden-js); Versatz je Teil setzt das Skript. */
.rc-einblenden-js [data-einblenden-teil] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rc-einblenden-js [data-einblenden-teil="links"] {
  transform: translateX(-48px);
}

.rc-einblenden-js [data-einblenden-teil="rechts"] {
  transform: translateX(48px);
}

.rc-einblenden-js [data-einblenden-teil="zoom"] {
  transform: scale(0.85);
}

.rc-einblenden-js.ist-sichtbar [data-einblenden-teil] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rc-einblenden-js [data-einblenden-teil] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- css/startseite/hero.css ---- */
/*
 * Zweck: Section-eigenes CSS der Startseiten-Section "Hero" (Video-Hero, drei Clips,
 *   fachliche Grundlage §9.1 Section 1). Spezifikation .agent/pakete/
 *   startseite-senior1-hero.md.
 * Hauptverantwortung: Vollbild-Video auf #12222B, feste Flächenhöhe (keine Layoutverschiebung),
 *   Clip-Texte/-Striche, CTAs. Ohne JavaScript bleiben Text und Poster von Clip 1 sichtbar —
 *   deshalb ist ".rc-hero-clip:not(:first-child)" standardmäßig (ohne JS-Klasse) ausgeblendet,
 *   kein JavaScript-Zustand nötig, um den No-JS-Fall abzudecken.
 * Bei "prefers-reduced-motion: reduce" wird NUR das Standbild gezeigt (kein Video) — das Video
 *   selbst bleibt im DOM (barrierefrei abschaltbar über display:none), damit kein Netzwerkabruf
 *   des JS nötig ist, um den Ruhezustand sicherzustellen.
 *
 * Pause-Button (Auftrag Gruender 2026-10-03, WCAG 2.2.2): eigenes @font-face fuer das
 *   Material-Symbols-Icon, dieselbe lokale Schriftdatei wie public/fonts/material-symbols/
 *   material-symbols.css — hier erneut deklariert, weil diese Section unabhaengig von
 *   lib/template.js (das die Schrift nur im CMS-Bearbeitungsmodus laedt) funktionieren muss.
 *   Dasselbe Muster wie public/css/startseite/fortschritt.css.
 * Bei "prefers-reduced-motion: reduce" wird der Pause-Button ausgeblendet (nicht nur auf
 *   "abspielen" gesetzt): das Skript startet in diesem Fall keine Wiedergabe
 *   (public/js/startseite-hero.js) — ein Button ohne Video waere irrefuehrend. Die Pfeile
 *   bleiben dagegen sichtbar und wechseln Standbild und Text.
 */

.rc-start--hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 560px;
  display: flex;
  align-items: center;
}

.rc-hero-video-flaeche {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #12222B;
}

.rc-hero-video,
.rc-hero-standbild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
No-JS-Rueckfall (Umsetzungspunkt 2, Paket "Startseite entschlacken", Runde 2): Das Standbild
ist SICHTBAR, bis das Skript laeuft — ohne JavaScript traegt das <video> kein "poster"-Attribut
mehr (das <picture> uebernimmt die Geraete-Weiche ueber "media", s. lib/startseite/hero.js).
Sobald das Skript startet (".rc-hero--js"), uebernimmt das Video und setzt seinen eigenen,
geraetegerechten Poster selbst (public/js/startseite-hero.js#ladeClip). Im Datensparmodus bzw.
bei reduzierter Bewegung (".rc-hero--standbild") zeigt wieder das Standbild, s. unten.
*/
.rc-hero-standbild {
  display: block;
}

.rc-hero--js .rc-hero-standbild {
  display: none;
}

/* Übergang zwischen den Clips: kurz vor Clip-Ende blendet das Video auf den dunklen
   Grund (#12222B) aus, der nächste Clip blendet ein (Klasse setzt startseite-hero.js). */
.rc-hero-video {
  transition: opacity 0.6s ease;
}

.rc-hero-video.ist-ausgeblendet {
  opacity: 0;
}

.rc-hero-video-flaeche::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 34, 43, 0.35) 0%, rgba(18, 34, 43, 0.75) 100%);
}

.rc-hero-inhalt {
  position: relative;
  z-index: 1;
  padding: 96px 24px;
  width: 100%;
  color: #fff;
}

.rc-hero-text-buehne {
  min-height: 160px;
}

.rc-hero-clip {
  display: none;
}

.rc-hero-clip:first-child,
.rc-hero-clip--aktiv {
  display: block;
}

/* Mit Skript steuert nur die Aktiv-Klasse, welcher Text sichtbar ist (ohne Skript bleibt
   Clip 1 über :first-child sichtbar). Der Text blendet je Clip neu ein. */
.rc-hero--js .rc-hero-clip:not(.rc-hero-clip--aktiv) {
  display: none;
}

.rc-hero--js .rc-hero-clip--aktiv {
  animation: rc-hero-text-ein 0.6s ease both;
}

@keyframes rc-hero-text-ein {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rc-hero-ueberschrift {
  font-size: 2rem;
  line-height: 1.15;
  margin: 0 0 16px;
}

.rc-hero-ueberschrift--ersatz {
  font-weight: 700;
}

.rc-hero-unterzeile {
  font-size: 1.125rem;
  max-width: 640px;
  margin: 0 0 32px;
}

.rc-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 28px;
}

/* Hauptbutton je Clip (Variante 4a): immer gefüllt in Primärfarbe, Text und Rolle wechseln
   mit dem Clip. */
.rc-hero-cta {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  background: #a90055;
  color: #fff;
  border: 2px solid #a90055;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.rc-hero-cta:hover {
  background: #8a0046;
  box-shadow: 0 0 0 3px #ffecef;
}

.rc-hero-cta:focus-visible,
.rc-hero-nebenlink:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Nebenlink für die jeweils andere Rolle. */
.rc-hero-nebenlink {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rc-hero-nebenlink:hover {
  color: #ffecef;
}

/* Höhe der Textbühne fest, damit beim Clip-Wechsel nichts springt. */
.rc-hero-text-buehne {
  min-height: 280px;
}

@media (max-width: 767px) {
  .rc-hero-text-buehne {
    min-height: 340px;
  }
}

.rc-hero-striche {
  display: flex;
  gap: 8px;
}

.rc-hero-strich {
  width: 32px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.rc-hero-strich--aktiv {
  background: #fff;
}

/*
Kein eigenes @font-face mehr (Paket "Startseite entschlacken"): Pause- und Pfeil-Symbole kommen
jetzt als Inline-SVG (lib/icons.js), die Schriftdatei (988 KB) wird auf der Startseite nicht mehr
geladen. Die Größenregeln unten (".material-symbols-outlined" je Kontext) wirken unverändert auf
das <svg> weiter (site.css: ".material-symbols-outlined svg { width/height: 1em; fill: currentColor }").
*/

.rc-hero-pause {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(18, 34, 43, 0.55);
  color: #fff;
  cursor: pointer;
}

.rc-hero-pause:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.rc-hero-pause .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 767px) {
  .rc-start--hero {
    min-height: 680px;
  }

  .rc-hero-ueberschrift {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc-hero-video {
    display: none;
  }

  .rc-hero-standbild {
    display: block;
  }

  /* Text wechselt auf Pfeiltipp ohne Einblend-Bewegung. Ohne Skript bleibt Clip 1 über
     die Grundregeln (.rc-hero-clip / :first-child) stehen. */
  .rc-hero--js .rc-hero-clip--aktiv {
    animation: none;
  }

  .rc-hero-pause {
    display: none;
  }
}

/*
Datensparmodus (Umsetzungspunkt 3, Paket "Startseite entschlacken", Runde 2): wirkt in der
Darstellung GENAUSO wie "prefers-reduced-motion: reduce" oben — dieselben vier Regeln, nur ueber
eine Klasse statt eine Medienabfrage ausgeloest, weil "navigator.connection.saveData" kein
CSS-Gegenstueck hat. public/js/startseite-hero.js setzt ".rc-hero--standbild" auf die Section,
sobald "datenSparen" zutrifft (und zusaetzlich bei reduzierter Bewegung, schadet dort nicht).
*/
.rc-hero--standbild .rc-hero-video {
  display: none;
}

.rc-hero--standbild .rc-hero-standbild {
  display: block;
}

.rc-hero--standbild.rc-hero--js .rc-hero-clip--aktiv {
  animation: none;
}

.rc-hero--standbild .rc-hero-pause {
  display: none;
}

/* Pfeile links/rechts zum Wechseln der Clips (nur mit Skript sichtbar; der Wechsel bleibt ein
   Aus-/Einblenden, keine Schiebe-Diashow). */
.rc-hero-pfeil {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: rgba(18, 34, 43, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.rc-hero-pfeil[hidden] {
  display: none;
}

.rc-hero-pfeil--zurueck {
  left: 24px;
}

.rc-hero-pfeil--weiter {
  right: 24px;
}

.rc-hero-pfeil:hover {
  background: rgba(169, 0, 85, 0.85);
  border-color: #fff;
}

.rc-hero-pfeil:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.rc-hero-pfeil .material-symbols-outlined {
  font-weight: normal;
  font-style: normal;
  font-size: 28px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 767px) {
  .rc-hero-pfeil {
    top: auto;
    bottom: 24px;
    transform: none;
    width: 44px;
    height: 44px;
  }

  .rc-hero-pfeil--weiter {
    right: 84px;
  }
}

@media (min-width: 768px) {
  /* Text nicht unter die Pfeile laufen lassen. */
  .rc-hero--js .rc-hero-inhalt {
    padding-left: 96px;
    padding-right: 96px;
  }
}

/* Bei reduzierter Bewegung bleiben die Pfeile sichtbar (startseite-hero.js wechselt dann
   Standbild und Text) — nur ohne Übergangseffekt. */
@media (prefers-reduced-motion: reduce) {
  .rc-hero-pfeil {
    transition: none;
  }
}

/* Rollenfarben im Hero (Gründer 04.10.2026): Clip 1 (Marke) bleibt Magenta; Clip 2 (Spieler)
   Grün, Clip 3 (Verkäufer) Teal. Der Nebenlink zeigt die Farbe der Rolle, zu der er führt. */
.rc-hero-clip[data-clip-index="1"] .rc-hero-cta {
  background: var(--rc-rolle-spieler, #00631d);
  border-color: var(--rc-rolle-spieler, #00631d);
}

.rc-hero-clip[data-clip-index="1"] .rc-hero-cta:hover {
  background: #004d16;
  box-shadow: 0 0 0 3px var(--rc-rolle-spieler-tint, #e6f8e6);
}

.rc-hero-clip[data-clip-index="2"] .rc-hero-cta {
  background: var(--rc-rolle-verkaeufer, #006972);
  border-color: var(--rc-rolle-verkaeufer, #006972);
}

.rc-hero-clip[data-clip-index="2"] .rc-hero-cta:hover {
  background: #00545b;
  box-shadow: 0 0 0 3px var(--rc-rolle-verkaeufer-tint, #e3f8fa);
}

/* Nebenlink: Unterstrich immer weiß. */
.rc-hero-nebenlink {
  text-decoration-color: #fff;
  text-decoration-thickness: 2px;
}

/* Symbol im Hauptbutton je Clip: Recurra-Bildmarke, Gamepad (Spieler), Paket (Verkäufer). */
.rc-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.rc-hero-cta-logo {
  display: block;
  width: 22px;
  height: 22px;
}

.rc-hero-cta .rc-hero-cta-icon {
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ---- css/startseite/fortschritt.css ---- */
/*
 * Zweck: Aussehen der Startseiten-Section 2 „Fortschritt und Lösung" (lib/startseite/
 *   fortschritt.js). Paket "Senior 2" (.agent/pakete/startseite-senior2-fortschritt.md).
 * Hauptverantwortung: Zweispaltiges Layout (mobil untereinander), senkrechter Fortschrittsbalken
 *   mit Icons (erledigt gefüllt #a90055, aktuell hervorgehoben, kommend als Umriss), zwei Karten
 *   mit Bild. Eigenes @font-face statt einer Änderung an lib/template.js#page() — siehe
 *   Kopfkommentar von lib/startseite/fortschritt.js.
 * Eingebunden über page({ stylesheets: [...] }) NACH basis.css, siehe lib/routes.js.
 */

/*
Kein eigenes @font-face mehr (Paket "Startseite entschlacken"): Die Meilenstein-Icons kommen
jetzt als Inline-SVG aus einer festen Erlaubnisliste (lib/startseite/fortschritt.js,
ERLAUBTE_MEILENSTEIN_ICONS) statt aus der 988-KB-Schriftdatei. Die Größenregel unten bleibt,
sie wirkt jetzt auf das <svg> (site.css: ".material-symbols-outlined svg { width/height: 1em }").
*/

.rc-start--fortschritt .material-symbols-outlined {
  font-weight: normal;
  font-style: normal;
  font-size: 28px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Nur im Redaktionsmodus sichtbar — Dock kann das Feld trotzdem anspringen. */
.rc-fortschritt-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;
}

.rc-fortschritt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

@media (min-width: 769px) {
  .rc-fortschritt-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 64px;
  }
}

/* --- Fortschrittsbalken --- */

.rc-fortschritt-balken {
  min-width: 0;
}

.rc-fortschritt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.rc-fortschritt-liste::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: #e3e3e3;
}

.rc-fortschritt-punkt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  min-width: 0;
}

.rc-fortschritt-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid #c9c9c9;
  color: #c9c9c9;
  background: #fff;
  line-height: 0;
  z-index: 1;
}

.rc-start--fortschritt .rc-fortschritt-icon .material-symbols-outlined {
  display: block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  font-size: 22px;
}

.rc-fortschritt-punkt--erledigt .rc-fortschritt-icon,
.rc-fortschritt-punkt--aktuell .rc-fortschritt-icon {
  border-color: #a90055;
  color: #a90055;
}

.rc-fortschritt-punkt--erledigt .rc-fortschritt-icon {
  background: #a90055;
  color: #fff;
}

.rc-fortschritt-text {
  min-width: 0;
  padding-top: 7px;
}

.rc-fortschritt-titel {
  color: #12222B;
  font-weight: 600;
}

.rc-fortschritt-punkt--kommend .rc-fortschritt-titel {
  color: #70787c;
  font-weight: 400;
}

.rc-fortschritt-hier {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #ffecef;
  color: #a90055;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Einblend-Animation beim Hineinscrollen ---
   Nur aktiv, wenn public/js/startseite-fortschritt.js die Klasse "rc-fortschritt-js" gesetzt
   hat (ohne JavaScript bleibt diese Klasse aus, der Endzustand ist von Anfang an sichtbar —
   progressive Anreicherung). */
.rc-fortschritt-js .rc-fortschritt-punkt {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.rc-fortschritt-js.ist-sichtbar .rc-fortschritt-punkt {
  opacity: 1;
  transform: translateY(0);
}

.rc-fortschritt-js.ist-sichtbar .rc-fortschritt-punkt:nth-child(1) { transition-delay: 0ms; }
.rc-fortschritt-js.ist-sichtbar .rc-fortschritt-punkt:nth-child(2) { transition-delay: 180ms; }
.rc-fortschritt-js.ist-sichtbar .rc-fortschritt-punkt:nth-child(3) { transition-delay: 360ms; }
.rc-fortschritt-js.ist-sichtbar .rc-fortschritt-punkt:nth-child(4) { transition-delay: 540ms; }
.rc-fortschritt-js.ist-sichtbar .rc-fortschritt-punkt:nth-child(5) { transition-delay: 720ms; }

/* --- Karten --- */

.rc-fortschritt-karten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
}

@media (min-width: 481px) {
  .rc-fortschritt-karten {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.rc-fortschritt-karte {
  min-width: 0;
}

/* Schlanker Rahmen nur fuer den KI-Hinweis (data-ki-hinweis) - aendert nichts am Layout, das Bild
   selbst behaelt sein eigenes Format. */
.rc-fortschritt-karte-bild-rahmen {
  display: block;
}

.rc-fortschritt-karte-bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.rc-fortschritt-karte-titel {
  margin-top: 12px;
  color: #12222B;
}

@media (prefers-reduced-motion: reduce) {
  .rc-fortschritt-js .rc-fortschritt-punkt,
  .rc-fortschritt-js.ist-sichtbar .rc-fortschritt-punkt {
    opacity: 1;
    transform: none;
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}

/* Wortbildmarke neben der Überschrift (Datei mit eingebautem Schutzraum, weiß hinterlegt). */
.rc-fortschritt-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 32px;
}

.rc-fortschritt-kopf h2 {
  margin: 0;
}

.rc-fortschritt-logo {
  display: block;
  height: 60px;
  width: auto;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .rc-fortschritt-logo {
    height: 44px;
  }
}

/* Karten als Link-Out auf /spieler bzw. /verkaeufer. */
a.rc-fortschritt-karte {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.rc-fortschritt-karte .rc-fortschritt-karte-bild {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.rc-fortschritt-karte:hover .rc-fortschritt-karte-bild,
a.rc-fortschritt-karte:focus-visible .rc-fortschritt-karte-bild {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(18, 34, 43, 0.18);
}

a.rc-fortschritt-karte:hover .rc-fortschritt-karte-titel,
a.rc-fortschritt-karte:focus-visible .rc-fortschritt-karte-titel {
  color: #a90055;
}

a.rc-fortschritt-karte:focus-visible {
  outline: 2px solid #a90055;
  outline-offset: 4px;
  border-radius: 12px;
}

.rc-fortschritt-karte-pfeil {
  color: #a90055;
  white-space: nowrap;
}

/* Section beim Hineinscrollen: Kopf und Karten gleiten ein (Skript setzt die Klassen auf
   die Section; ohne Skript bleibt alles sichtbar). */
.rc-fortschritt-js .rc-fortschritt-kopf,
.rc-fortschritt-js .rc-fortschritt-karte {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.rc-fortschritt-js.ist-sichtbar .rc-fortschritt-kopf,
.rc-fortschritt-js.ist-sichtbar .rc-fortschritt-karte {
  opacity: 1;
  transform: none;
}

.rc-fortschritt-js.ist-sichtbar .rc-fortschritt-karte:nth-child(1) { transition-delay: 300ms; }
.rc-fortschritt-js.ist-sichtbar .rc-fortschritt-karte:nth-child(2) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .rc-fortschritt-js .rc-fortschritt-kopf,
  .rc-fortschritt-js .rc-fortschritt-karte,
  a.rc-fortschritt-karte .rc-fortschritt-karte-bild {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Füllung des Balkens (nach dem Hineinscrollen, gesteuert von startseite-fortschritt.js) ---
   Vorher ist der Balken leer: alle Meilensteine grau, keine Linie, kein "Wir sind hier". */
.rc-fortschritt-liste::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 34px;
  width: 2px;
  height: 0;
  background: #a90055;
}

.rc-fortschritt-js .rc-fortschritt-liste::after {
  height: var(--rc-fuellung, 0px);
  transition: height var(--rc-fuell-dauer, 0ms) linear;
}

.rc-fortschritt-icon {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.rc-fortschritt-js .rc-fortschritt-punkt--erledigt:not(.ist-erreicht) .rc-fortschritt-icon,
.rc-fortschritt-js .rc-fortschritt-punkt--aktuell:not(.ist-erreicht) .rc-fortschritt-icon {
  border-color: #c9c9c9;
  color: #c9c9c9;
  background: #fff;
}

.rc-fortschritt-hier {
  transition: opacity 0.4s ease;
}

.rc-fortschritt-js .rc-fortschritt-punkt--aktuell:not(.ist-erreicht) .rc-fortschritt-hier {
  opacity: 0;
}

.rc-fortschritt-js .rc-fortschritt-punkt--aktuell.ist-erreicht .rc-fortschritt-icon {
  animation: rc-fortschritt-puls 1.6s ease-out 2;
}

@keyframes rc-fortschritt-puls {
  0% { box-shadow: 0 0 0 0 rgba(169, 0, 85, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(169, 0, 85, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .rc-fortschritt-js .rc-fortschritt-punkt--aktuell.ist-erreicht .rc-fortschritt-icon {
    animation: none;
  }
}

/* Linien (grau ::before, pink ::after) liegen unter den Meilensteinen. Nötig, weil die
   Einblend-Animation (transform) jeden Punkt zu einem eigenen Stapelkontext macht — sonst
   malt die später gezeichnete Füllung über die Kreise. */
.rc-fortschritt-liste::before,
.rc-fortschritt-liste::after {
  z-index: 0;
}

.rc-fortschritt-punkt {
  z-index: 1;
}

/* Rollenfarben (Gründer 04.10.2026) für die Bildkarten: Spieler Grün, Verkäufer Teal. */
a.rc-fortschritt-karte[href="/spieler"] { --rolle-akzent: var(--rc-rolle-spieler, #00631d); }
a.rc-fortschritt-karte[href="/verkaeufer"] { --rolle-akzent: var(--rc-rolle-verkaeufer, #006972); }

a.rc-fortschritt-karte .rc-fortschritt-karte-pfeil {
  color: var(--rolle-akzent, #a90055);
}

a.rc-fortschritt-karte .rc-fortschritt-karte-bild {
  border-bottom: 4px solid var(--rolle-akzent, #a90055);
}

a.rc-fortschritt-karte:hover .rc-fortschritt-karte-titel,
a.rc-fortschritt-karte:focus-visible .rc-fortschritt-karte-titel {
  color: var(--rolle-akzent, #a90055);
}

a.rc-fortschritt-karte:focus-visible {
  outline-color: var(--rolle-akzent, #a90055);
}

/* ---- css/startseite/anmeldung.css ---- */
/*
 * Zweck: Section-eigenes CSS der Startseiten-Section "Anmeldung" (fachliche Grundlage §9.1
 *   Section 3; .agent/pakete/startseite-senior3-anmeldung.md).
 * Hauptverantwortung: Logo mit Schutzraum, Zähler/Bonus-Zeile, Formular "in einer Zeile"
 *   (Rolle · E-Mail · Anmelden, Einwilligungen darunter), Pflichtzeile — alles auf der
 *   #a90055-Fläche aus basis.css. Kein horizontales Scrollen bei 375 px.
 */

.rc-start--anmeldung {
  text-align: center;
}

.rc-anmeldung-logo {
  display: flex;
  justify-content: center;
}

.rc-anmeldung-logo img {
  max-width: 100%;
  height: auto;
}

.rc-start--anmeldung h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 4vw, 36px);
}

.rc-anmeldung-zaehler {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}

.rc-anmeldung-bonus {
  margin: 0 0 24px;
  font-size: 16px;
  opacity: 0.92;
}

.rc-anmeldeformular {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--r-card, 12px);
  padding: 24px;
}

.rc-anmeldeformular-rollen {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.rc-anmeldeformular-rollen legend {
  width: 100%;
  font-weight: 600;
  margin-bottom: 8px;
}

.rc-anmeldeformular-rolle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.rc-anmeldeformular-einwilligung {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.rc-anmeldeformular-einwilligung input {
  margin-top: 2px;
  flex-shrink: 0;
}

.rc-anmeldeformular .form-label,
.rc-anmeldeformular-rollen legend {
  color: inherit;
}

.rc-anmeldung-pflichtzeile {
  margin-top: 16px;
  font-size: 13px;
  opacity: 0.85;
}

/* Formular "in einer Zeile" ab breiterem Bildschirm: Rolle · E-Mail · Anmelden nebeneinander */
@media (min-width: 640px) {
  .rc-anmeldeformular-reihe {
    display: flex;
    gap: 16px;
    align-items: flex-end;
  }
}

/* Kompaktes Footer-Formular (Senior 5) — kleinerer Innenabstand, kein eigener Hintergrund */
.rc-anmeldeformular--kompakt {
  background: transparent;
  padding: 0;
  max-width: none;
}

@media (max-width: 375px) {
  .rc-anmeldeformular {
    padding: 16px;
  }
}

/* Rollenfarben (Gründer 04.10.2026) im Rollenschalter des Formulars: ausgewählte Rolle als
   Chip in der Rollenfarbe (Spieler Grün, Verkäufer Teal). */
.rc-anmeldeformular-rolle input[value="spieler"] { accent-color: var(--rc-rolle-spieler, #00631d); }
.rc-anmeldeformular-rolle input[value="verkaeufer"] { accent-color: var(--rc-rolle-verkaeufer, #006972); }

/* ---- css/startseite/ablauf.css ---- */
/*
 * Zweck: Section-eigenes CSS der Startseiten-Section "So funktioniert's" (fachliche Grundlage
 *   §9.1 Section 4).
 * Hauptverantwortung: Zwei Karten nebeneinander (mobil untereinander), Schritt-Liste, Link zur
 *   Rollen-Seite, CTA-Button, kleine Regelhinweis-Zeile. Farb-Tokens aus tokens.css
 *   (--rc-primary u. a.), Abstände/Container aus basis.css.
 * Getestet: kein horizontales Scrollen bei 375px (grid mit 1fr-Spalten, keine festen Breiten).
 */

.rc-ablauf-karten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 640px) {
  .rc-ablauf-karten {
    grid-template-columns: 1fr;
  }
}

.rc-ablauf-karte {
  background: var(--rc-tint, #ffecef);
  border-radius: 12px;
  padding: 24px;
  min-width: 0;
}

.rc-ablauf-karte h3 {
  margin: 0 0 16px;
}

.rc-ablauf-schritte {
  margin: 0 0 16px;
  padding-left: 1.4em;
}

.rc-ablauf-schritte li {
  margin-bottom: 8px;
}

.rc-ablauf-mehr {
  color: var(--rc-primary, #a90055);
  font-weight: 600;
  text-decoration: none;
}

.rc-ablauf-mehr:hover,
.rc-ablauf-mehr:focus-visible {
  text-decoration: underline;
}

.rc-ablauf-cta {
  margin-top: 40px;
  text-align: center;
}

.rc-ablauf-regelhinweis {
  margin-top: 16px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--rc-muted, #5a6872);
}

/* --- Personas und Icons (statt Nummern) --- */
.rc-ablauf-karte {
  position: relative;
}

/* Rundes Profilbild in der oberen äußeren Ecke der Karte (Spieler links, Verkäufer rechts).
   Position/Größe liegen am Rahmen (data-ki-hinweis="abzeichen"), damit das AI-Abzeichen am
   Bildkreis sitzt; das <img> selbst füllt den Rahmen nur noch aus. */
.rc-ablauf-persona-rahmen {
  position: absolute;
  top: -28px;
  width: 96px;
  height: 96px;
}

.rc-ablauf-persona {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 8px 20px rgba(18, 34, 43, 0.18);
}

.rc-ablauf-karte--spieler .rc-ablauf-persona-rahmen {
  left: 20px;
}

.rc-ablauf-karte--spieler h3 {
  padding-right: 0;
  padding-left: 112px;
}

.rc-ablauf-karte--verkaeufer .rc-ablauf-persona-rahmen {
  right: 20px;
}

.rc-ablauf-karte h3 {
  padding-right: 112px;
  min-height: 48px;
}

.rc-ablauf-karten {
  margin-top: 56px;
  row-gap: 56px;
}

.rc-ablauf-schritte {
  list-style: none;
  padding-left: 0;
}

.rc-ablauf-schritte li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.rc-ablauf-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--rc-primary, #a90055);
  line-height: 0;
}

.rc-start--ablauf .rc-ablauf-icon .material-symbols-outlined {
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  display: block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 640px) {
  .rc-ablauf-persona {
    width: 72px;
    height: 72px;
    top: -20px;
  }

  .rc-ablauf-karte h3 {
    padding-right: 84px;
  }

  .rc-ablauf-karte--spieler h3 {
    padding-right: 0;
    padding-left: 84px;
  }
}

/* Claim in der Spieler-Karte: Claimwort vor jedem Schritt und Markenzeile am Kartenende. */
.rc-ablauf-claimwort {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  color: var(--rc-primary, #a90055);
  margin-right: 4px;
  white-space: nowrap;
}

.rc-ablauf-claim {
  margin: 4px 0 16px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--rc-primary, #a90055);
}

/* Schritte als Raster: Icon | Claimwort | Text – damit der Text bei unterschiedlich langen
   Claimwörtern („play.“, „own it.“, „ship it.“) in beiden Karten bündig links beginnt. */
.rc-ablauf-schritte li {
  display: grid;
  grid-template-columns: 40px 4.6em minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

.rc-ablauf-claimwort {
  margin-right: 0;
}

.rc-ablauf-schritte li > span:last-child {
  text-align: left;
}


/* Rollenfarben (Gründer 04.10.2026): Spieler Grün, Verkäufer Teal; Magenta bleibt Recurra. */
.rc-ablauf-karte--spieler {
  --rolle-akzent: var(--rc-rolle-spieler, #00631d);
  --rolle-tint: var(--rc-rolle-spieler-tint, #e6f8e6);
}
.rc-ablauf-karte--verkaeufer {
  --rolle-akzent: var(--rc-rolle-verkaeufer, #006972);
  --rolle-tint: var(--rc-rolle-verkaeufer-tint, #e3f8fa);
}
.rc-ablauf-karte {
  background: var(--rolle-tint);
  border-top: 4px solid var(--rolle-akzent);
}
.rc-ablauf-karte .rc-ablauf-icon,
.rc-ablauf-karte .rc-ablauf-claimwort,
.rc-ablauf-karte .rc-ablauf-claim,
.rc-ablauf-karte .rc-ablauf-mehr {
  color: var(--rolle-akzent);
}
.rc-ablauf-karte .rc-ablauf-persona {
  border-color: var(--rolle-akzent);
}