/*
 * 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; }