/* rundum.dog · MITMACH-SYSTEM Phase 1 · rd-mitmach.css
   Iris / design-craft · 2026-06-25 · produktionsreif, additiv, kollisionsfrei.

   ENQUEUE (Hinweis fuer Apply, kein Code-Edit hier):
     Handle:   rundum-mitmach
     Dep:      rundum-system   (laedt nach rd-system, das wiederum nach rundum-main)
     Datei:    assets/css/rd-mitmach.css   (Ziel-Pfad im Theme)
     Beispiel: wp_enqueue_style( 'rundum-mitmach',
                 get_theme_file_uri( 'assets/css/rd-mitmach.css' ),
                 [ 'rundum-system' ], RUNDUM_THEME_VER );

   NAMESPACE:  rd-mitmach*  (kollisionsfrei gegen Live rd-btn / rd-chip / rd-standort__* /
               rd-dashboard__* / rd-sec*, alle live belegt, NICHT mitnutzen).

   TOKEN-BRIDGE: Iris-Aliase zeigen NUR auf bestehende Live-Token (verifiziert in
               assets/css/rundum.css). KEIN Live-Token wird redefiniert. Jeder var()
               traegt einen literalen Fallback, falls rd-mitmach vor rundum.css faellt.
               WICHTIG: Live-Namen sind --rd-accent / --rd-accent-strong / --rd-accent-soft,
               --rd-bg-soft (Surface) / --rd-bg-alt (warm-card), --rd-space-N, --rd-shadow-*,
               --rd-success, NICHT die im Mockup geratenen brand/surface/s-N-Namen.

   KOMMENTAR-HYGIENE: keine Sequenz Stern-Slash in Klassen-Aufzaehlungen (frueherer Bug:
               rd-btn + rd-chip mit Stern direkt vor Slash schloss den Block vorzeitig).
   ============================================================ */

.rd-mitmach {
  /* --- Bridge-Layer: NUR Aliase auf Live-Token, mit literalem Fallback --- */
  --mm-accent:        var(--rd-accent, #B56A34);
  --mm-accent-strong: var(--rd-accent-strong, #944F22);
  --mm-wash:          var(--rd-accent-soft, #F4E3D2);
  --mm-bg:            var(--rd-bg, #FDFAF6);
  --mm-bg-warm:       var(--rd-bg-alt, #F4EDE4);
  --mm-surface:       var(--rd-bg-soft, #FFFFFF);
  --mm-ink:           var(--rd-text, #1A1A1A);
  --mm-text:          var(--rd-text-secondary, #595959);
  --mm-muted:         var(--rd-text-tertiary, #767676);
  --mm-border:        var(--rd-border, #E5DDD7);
  --mm-good:          var(--rd-success, #1F8A5B);
  --mm-r-md:          var(--rd-r-md, 12px);
  --mm-r-lg:          var(--rd-r-lg, 20px);
  --mm-r-pill:        var(--rd-r-pill, 9999px);
  --mm-s-1:           var(--rd-space-1, 4px);
  --mm-s-2:           var(--rd-space-2, 8px);
  --mm-s-3:           var(--rd-space-3, 12px);
  --mm-s-4:           var(--rd-space-4, 16px);
  --mm-s-5:           var(--rd-space-5, 24px);
  --mm-s-6:           var(--rd-space-6, 32px);
  --mm-s-7:           var(--rd-space-7, 48px);
  --mm-shadow-soft:   var(--rd-shadow-sm, 0 1px 2px rgba(20,19,17,.04), 0 2px 6px rgba(20,19,17,.04));
  --mm-shadow:        var(--rd-shadow-md, 0 4px 12px rgba(20,19,17,.06), 0 8px 24px rgba(20,19,17,.05));
  --mm-ease:          var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));   /* rd-system :root-Token, ohne rd-Praefix (Carla F3) */
  --mm-dur-fast:      140ms;
  --mm-dur-base:      240ms;
}

/* Scope-Wurzel auf jedem Mitmach-Block, damit die Bridge-Vars dort gelten.
   Alle Komponenten setzen .rd-mitmach am aeussersten Element. */

/* ============================================================
   A) Sektionskopf-Einstieg  ·  .rd-mitmach-link
   Variante a, neben "Alle anzeigen". Ordnet sich unter (Squint).
   ============================================================ */
.rd-mitmach-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 8px 14px;
  border-radius: var(--mm-r-pill);
  font-size: .9rem; font-weight: 600; line-height: 1.2;
  color: var(--mm-accent-strong);
  background: transparent; border: 1px solid var(--mm-border);
  white-space: nowrap; cursor: pointer;
  transition: border-color var(--mm-dur-fast) var(--mm-ease),
              background-color var(--mm-dur-fast) var(--mm-ease),
              transform var(--mm-dur-fast) var(--mm-ease);
}
.rd-mitmach-link__plus {
  width: 18px; height: 18px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--mm-wash); color: var(--mm-accent-strong);
  font-weight: 700; line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .rd-mitmach-link:hover { border-color: var(--mm-accent); background: var(--mm-wash); }
}
.rd-mitmach-link:active { transform: scale(.98); }
.rd-mitmach-link:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }

/* ============================================================
   B) Empty-State-Einladung  ·  .rd-mitmach-invite
   Variante b, gewinnt den Squint-Test bewusst (kein Inhalt da).
   Wuerde-Ton, Pfoten-Mark, 1 solid + 1 ghost CTA.
   ============================================================ */
.rd-mitmach-invite {
  display: grid; gap: var(--mm-s-4); justify-items: center; text-align: center;
  padding: clamp(var(--mm-s-6), 5vw, var(--mm-s-7)) var(--mm-s-5);
  background: var(--mm-bg-warm);
  border: 1px dashed var(--mm-border);
  border-radius: var(--mm-r-lg);
}
.rd-mitmach-invite__mark {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--mm-surface);
  box-shadow: var(--mm-shadow-soft);
  color: var(--mm-accent);
}
.rd-mitmach-invite__mark svg { width: 28px; height: 28px; }
.rd-mitmach-invite__title { font-size: 1.25rem; max-width: 22ch; color: var(--mm-ink); line-height: 1.25; margin: 0; text-wrap: balance; }
.rd-mitmach-invite__lead { color: var(--mm-text); max-width: 46ch; margin: 0; font-size: .98rem; line-height: 1.6; }
.rd-mitmach-invite__actions { display: flex; flex-wrap: wrap; gap: var(--mm-s-3); justify-content: center; margin-top: var(--mm-s-2); }

/* ============================================================
   Mitmach-eigene Button-Optik  ·  .rd-mitmach-cta
   Bewusst NICHT rd-btn (live anders belegt). Solid + Ghost.
   ============================================================ */
.rd-mitmach-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 20px;
  border-radius: var(--mm-r-pill);
  font-size: .95rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--mm-dur-fast) var(--mm-ease),
              background-color var(--mm-dur-fast) var(--mm-ease),
              border-color var(--mm-dur-fast) var(--mm-ease),
              color var(--mm-dur-fast) var(--mm-ease);
}
/* Solid = accent-strong (#944F22), wie rd-btn--primary / empty-cta live: ~6.9:1
   Kontrast mit Weiss (AA fuer normalen Text). NICHT das hellere --rd-accent
   (waere nur 4.14:1, Body-Schwelle 4.5:1 knapp verfehlt). */
.rd-mitmach-cta--solid { background: var(--mm-accent-strong); color: #fff; }
.rd-mitmach-cta--ghost { background: transparent; border-color: var(--mm-border); color: var(--mm-ink); }
.rd-mitmach-cta__plus { width: 18px; height: 18px; flex: none; display: grid; place-items: center; line-height: 1; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .rd-mitmach-cta--solid:hover { background: #7c4219; }   /* = rd-btn--primary:hover live */
  .rd-mitmach-cta--ghost:hover { border-color: var(--mm-accent); color: var(--mm-accent-strong); }
}
.rd-mitmach-cta:active { transform: scale(.98); }
.rd-mitmach-cta:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }

/* ============================================================
   C) Persistenter Sektions-Anker  ·  .rd-mitmach-anchor
   Variante c, ruhige Surface-Zeile am Fuss befuellter Sektionen.
   ============================================================ */
.rd-mitmach-anchor {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-s-3) var(--mm-s-4);
  margin-top: var(--mm-s-5); padding: var(--mm-s-4) var(--mm-s-5);
  border-radius: var(--mm-r-md);
  background: var(--mm-surface); border: 1px solid var(--mm-border);
  box-shadow: var(--mm-shadow-soft);
}
.rd-mitmach-anchor__ico { width: 22px; height: 22px; flex: none; color: var(--mm-accent); }
.rd-mitmach-anchor__text { flex: 1 1 240px; min-width: 0; }
.rd-mitmach-anchor__text b { color: var(--mm-ink); font-weight: 600; }
.rd-mitmach-anchor__text span { color: var(--mm-muted); font-size: .92rem; display: block; margin-top: 1px; }
.rd-mitmach-anchor__link {
  margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 600; color: var(--mm-accent-strong); white-space: nowrap;
}
.rd-mitmach-anchor__link svg { transition: transform var(--mm-dur-fast) var(--mm-ease); }
@media (hover: hover) and (pointer: fine) {
  .rd-mitmach-anchor__link:hover svg { transform: translateX(2px); }
}
.rd-mitmach-anchor__link:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   D) CPT-Single-Footer  ·  .rd-mitmach-near
   Variante d, greift Ort + Typ des Eintrags auf. wash-Box, 1 solid CTA.
   ============================================================ */
.rd-mitmach-near {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-s-4);
  margin-top: var(--mm-s-6); padding: var(--mm-s-5) var(--mm-s-6);
  border-radius: var(--mm-r-lg);
  background: var(--mm-wash); border: 1px solid var(--mm-border);
}
.rd-mitmach-near__text { flex: 1 1 280px; min-width: 0; }
.rd-mitmach-near__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mm-accent-strong); margin: 0 0 4px; }
.rd-mitmach-near__title { font-size: 1.2rem; margin: 0; max-width: 30ch; color: var(--mm-ink); line-height: 1.3; }
.rd-mitmach-near__lead { margin: 6px 0 0; color: var(--mm-text); font-size: .95rem; max-width: 50ch; line-height: 1.55; }
.rd-mitmach-near__actions { flex: 0 0 auto; }

/* ============================================================
   /mitmachen/ Landing  ·  .rd-mitmach-landing
   Oeffentliche Einstiegsseite. 4 Beitragstypen als Touch-Chips,
   Mission-Framing, ruhig (VARIANCE 3).
   ============================================================ */
.rd-mitmach-landing { padding-block: clamp(var(--mm-s-6), 6vw, var(--mm-s-7)); }
.rd-mitmach-landing__head { max-width: 62ch; margin: 0 auto; text-align: center; }
.rd-mitmach-landing__eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mm-accent-strong); margin: 0 0 var(--mm-s-3); }
.rd-mitmach-landing__title { font-size: clamp(1.8rem, 3vw + 1rem, 2.6rem); letter-spacing: -.01em; color: var(--mm-ink); margin: 0; line-height: 1.15; text-wrap: balance; }
.rd-mitmach-landing__lead { margin: var(--mm-s-4) auto 0; max-width: 58ch; color: var(--mm-text); font-size: 1.05rem; line-height: 1.6; }

/* Branch-Picker als Touch-Chip-Karten (auto-fit Grid, intrinsic) */
.rd-mitmach-pick {
  margin: clamp(var(--mm-s-6), 5vw, var(--mm-s-7)) auto 0;
  max-width: 760px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--mm-s-4);
}
.rd-mitmach-pick__card {
  display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: var(--mm-s-4);
  padding: var(--mm-s-5); text-align: left;
  background: var(--mm-surface); border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-md); box-shadow: var(--mm-shadow-soft);
  cursor: pointer; min-height: 44px;
  transition: border-color var(--mm-dur-fast) var(--mm-ease),
              transform var(--mm-dur-fast) var(--mm-ease),
              box-shadow var(--mm-dur-fast) var(--mm-ease);
}
.rd-mitmach-pick__ico {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: var(--mm-r-md); background: var(--mm-wash); color: var(--mm-accent-strong);
}
.rd-mitmach-pick__ico svg { width: 22px; height: 22px; }
.rd-mitmach-pick__title { display: block; font-size: 1.05rem; font-weight: 700; color: var(--mm-ink); margin: 0; line-height: 1.25; }
.rd-mitmach-pick__sub { display: block; margin: 4px 0 0; font-size: .9rem; color: var(--mm-muted); line-height: 1.45; }
@media (hover: hover) and (pointer: fine) {
  .rd-mitmach-pick__card:hover { border-color: var(--mm-accent); transform: translateY(-2px); box-shadow: var(--mm-shadow); }
}
.rd-mitmach-pick__card:active { transform: scale(.99); }
.rd-mitmach-pick__card:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }

.rd-mitmach-landing__foot { max-width: 60ch; margin: clamp(var(--mm-s-6), 5vw, var(--mm-s-7)) auto 0; text-align: center; color: var(--mm-muted); font-size: .92rem; line-height: 1.6; }

/* ============================================================
   Form-Shell  ·  .rd-mitmach-form
   Leichte Huelle um das rduc-Formular. Kontext-Kopf (WAS + WO) +
   Endowed-Progress + Trust. Das rduc-Form selbst bleibt unveraendert.
   ============================================================ */
.rd-mitmach-form { max-width: 680px; margin: 0 auto; }
.rd-mitmach-form__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mm-s-2) var(--mm-s-3);
  margin-bottom: var(--mm-s-3);
}
.rd-mitmach-form__title { font-size: clamp(1.4rem, 2vw + 1rem, 1.9rem); color: var(--mm-ink); margin: 0; line-height: 1.2; }
.rd-mitmach-form__where {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--mm-r-pill);
  background: var(--mm-wash); color: var(--mm-accent-strong);
  font-size: .85rem; font-weight: 600;
}
.rd-mitmach-form__where svg { width: 14px; height: 14px; }
.rd-mitmach-form__sub { margin: 0 0 var(--mm-s-5); color: var(--mm-text); font-size: 1rem; line-height: 1.6; max-width: 56ch; }

/* Endowed Progress, Schritt 1 bereits erledigt (kein 0%), seriöse Punkt-Form.
   KEIN gefuellter Balken-Track (Slop #49). */
.rd-mitmach-steps {
  display: flex; align-items: center; gap: var(--mm-s-3);
  margin-bottom: var(--mm-s-5); padding: var(--mm-s-3) var(--mm-s-4);
  background: var(--mm-bg-warm); border-radius: var(--mm-r-md);
  font-size: .9rem; color: var(--mm-text);
}
.rd-mitmach-steps__dots { display: inline-flex; gap: 6px; flex: none; }
.rd-mitmach-steps__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mm-border); }
.rd-mitmach-steps__dot--done { background: var(--mm-good); }
.rd-mitmach-steps__dot--now { background: var(--mm-accent); }
.rd-mitmach-steps__label b { color: var(--mm-ink); font-weight: 600; }

/* Form-Card als ruhige Shell (ersetzt die rduc-"Wand"-Optik visuell) */
.rd-mitmach-form__shell {
  background: var(--mm-surface); border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-lg); box-shadow: var(--mm-shadow-soft);
  padding: clamp(var(--mm-s-5), 4vw, var(--mm-s-6));
}

/* Foot: 1 gewichteter Primaer-CTA + ghost "Spaeter" + Trust-Zeile */
.rd-mitmach-form__foot { margin-top: var(--mm-s-5); display: grid; gap: var(--mm-s-3); }
.rd-mitmach-form__foot-actions { display: flex; flex-wrap: wrap; gap: var(--mm-s-3); align-items: center; }
.rd-mitmach-form__trust { display: inline-flex; align-items: center; gap: 8px; color: var(--mm-muted); font-size: .88rem; }
.rd-mitmach-form__trust svg { width: 15px; height: 15px; flex: none; color: var(--mm-good); }

/* ============================================================
   Recognition-Layer  ·  Status-Zeilen im Konto + Inline-Vermerk
   Wuerde-Ton, ruhig. Status traegt FARBE UND WORT (A11y).
   ============================================================ */
.rd-mitmach-mine { display: grid; gap: var(--mm-s-2); }
.rd-mitmach-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mm-s-3) var(--mm-s-4);
  padding: var(--mm-s-3) var(--mm-s-4);
  background: var(--mm-surface); border: 1px solid var(--mm-border);
  border-radius: var(--mm-r-md);
}
.rd-mitmach-row__main { flex: 1 1 220px; min-width: 0; }
.rd-mitmach-row__title { font-size: .98rem; font-weight: 600; color: var(--mm-ink); margin: 0; }
.rd-mitmach-row__meta { font-size: .85rem; color: var(--mm-muted); margin: 2px 0 0; }
.rd-mitmach-row__link { min-height: 44px; display: inline-flex; align-items: center; font-size: .88rem; font-weight: 600; color: var(--mm-accent-strong); white-space: nowrap; }
.rd-mitmach-row__link:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; border-radius: 4px; }

/* Status-Pille, Farbe UND Wort, nie nur Farbe */
.rd-mitmach-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; padding: 3px 10px;
  border-radius: var(--mm-r-pill); white-space: nowrap;
}
.rd-mitmach-status svg { width: 13px; height: 13px; flex: none; }
.rd-mitmach-status--live  { background: rgba(31,138,91,.12); color: var(--mm-good); }
.rd-mitmach-status--check { background: var(--mm-bg-warm); color: var(--mm-text); }
.rd-mitmach-status--draft { background: var(--mm-wash); color: var(--mm-accent-strong); }

/* Bestaetigung nach Einreichung, einmaliger ruhiger Check, kein Konfetti */
.rd-mitmach-done {
  display: grid; justify-items: center; text-align: center; gap: var(--mm-s-3);
  padding: clamp(var(--mm-s-6), 5vw, var(--mm-s-7)) var(--mm-s-5);
  max-width: 56ch; margin: 0 auto;
}
.rd-mitmach-done__check {
  width: 56px; height: 56px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: rgba(31,138,91,.12); color: var(--mm-good);
  animation: rd-mm-pop 520ms var(--mm-ease) both;
}
.rd-mitmach-done__check svg { width: 28px; height: 28px; }
.rd-mitmach-done__title { font-size: 1.35rem; color: var(--mm-ink); margin: 0; line-height: 1.25; text-wrap: balance; }
.rd-mitmach-done__lead { color: var(--mm-text); font-size: 1rem; line-height: 1.6; margin: 0; }
@keyframes rd-mm-pop {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* "Local"-Marke (verdient, opt-in, kein Punktestand) */
.rd-mitmach-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: var(--mm-r-pill);
  background: var(--mm-wash); color: var(--mm-accent-strong);
  font-size: .78rem; font-weight: 600;
}
.rd-mitmach-badge svg { width: 14px; height: 14px; flex: none; }

/* Inline-Vermerk in oeffentlicher Meta-Zeile ("Tipp von … · Local für …") */
.rd-mitmach-by { color: var(--mm-muted); font-size: .85rem; }
.rd-mitmach-by b { color: var(--mm-text); font-weight: 600; }

/* ============================================================
   Mobile-first Anpassungen (375px Basis nach oben)
   ============================================================ */
@media (max-width: 640px) {
  .rd-mitmach-near__actions,
  .rd-mitmach-near__actions .rd-mitmach-cta { width: 100%; }
  .rd-mitmach-invite__actions .rd-mitmach-cta { width: 100%; }
  .rd-mitmach-anchor__link { margin-left: 0; }
  .rd-mitmach-form__foot-actions .rd-mitmach-cta { width: 100%; }
  .rd-mitmach-row__link { margin-left: 0; }
}

/* ============================================================
   Reduced-Motion-Gate, Positions/Scale-Motion raus, Opazitaet bleibt
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rd-mitmach-link,
  .rd-mitmach-cta,
  .rd-mitmach-pick__card,
  .rd-mitmach-anchor__link svg { transition-duration: .01ms; }
  .rd-mitmach-done__check { animation: none; }
}