/* Rudel-Prototyp · Layout und App-Bausteine (Kürzel rd-). Nur Namen aus design-grundlagen, stil-rudel und
   marke.css, keine Farbwerte. Telefon zuerst; auf großen Bildschirmen eine ruhige Spalte. */

html, body { margin: 0; background: var(--wk-grund); color: var(--wk-text); }
body.rd { font: var(--wk-text-font); min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
/* Grundregeln ohne Gewicht (:where), damit jede Klasse sie überschreibt */
:where(.rd) *, :where(.rd) *::before, :where(.rd) *::after { box-sizing: border-box; }
:where(.rd) :where(h1, h2, h3, p) { margin: 0; }
:where(.rd) button { font: inherit; color: inherit; }
:where(.rd) svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rd [hidden] { display: none; }
.rd-nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Kopf ------------------------------------------------------------------------------------- */
.rd-kopf { position: sticky; top: 0; z-index: var(--wk-ebene-kopf); display: flex; align-items: center;
  justify-content: space-between; gap: var(--wk-abstand-3); padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: color-mix(in srgb, var(--wk-grund) 88%, transparent); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); max-width: 640px; margin: 0 auto; }
.rd-marke { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--rd-tanne);
  background: var(--rd-tanne-leise); border-radius: var(--wk-radius-rund); padding: 4px 14px 4px 4px; min-height: 40px; }
.rd-logo { width: 32px; height: 32px; flex: none; stroke: none; }
.rd-logo-grund { fill: var(--rd-tanne); }
.rd-logo-offen { fill: var(--rd-offen); }
.rd-logo-punkt { fill: var(--wk-grund); }
.rd-logo-klein { fill: var(--wk-grund); opacity: .7; }
.rd-haushalt { font: 800 18px/1 var(--wk-schrift-anzeige); letter-spacing: -.02em; }
.rd-ich { border: 0; background: none; padding: 0; min-width: 44px; min-height: 44px; display: grid; place-items: center;
  cursor: pointer; border-radius: var(--wk-radius-rund); }

/* --- Avatar ---------------------------------------------------------------------------------- */
.rd-av { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--rd-person, var(--wk-linie-stark)); color: var(--rd-auf-person);
  font: 700 13px/1 var(--wk-schrift); letter-spacing: -.01em; }
.rd-av.gross { width: 40px; height: 40px; font-size: 16px; }
.rd-av.klein { width: 22px; height: 22px; font-size: 10.5px; }
.rd-av.leer { background: transparent; color: var(--wk-text-leise); border: 1.5px dashed var(--wk-linie-stark); }
.rd-ich .rd-av { box-shadow: 0 0 0 2px var(--wk-grund), 0 0 0 4px var(--rd-person, var(--wk-linie-stark)); }

/* --- Inhalt ---------------------------------------------------------------------------------- */
.rd-inhalt { max-width: 640px; margin: 0 auto; padding: 6px 16px calc(150px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 18px; outline: none; }
.rd-laedt { color: var(--wk-text-leise); padding: 40px 0; text-align: center; }
.rd-titelzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.rd-titel { font: var(--wk-gewicht-titel) clamp(30px, 8.5vw, 38px)/1.05 var(--wk-schrift-anzeige);
  letter-spacing: var(--wk-laufweite-titel); color: var(--wk-text); }
.rd-unter { color: var(--wk-text-leise); font-size: var(--wk-groesse-klein); margin-top: 4px; }
.rd-blaettern { display: flex; gap: 4px; flex: none; }
.rd-rund { border: var(--wk-strich) solid var(--wk-linie); background: var(--wk-flaeche); width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--wk-text-2); }
.rd-rund svg { width: 20px; height: 20px; }
.rd-rund:hover { background: var(--wk-flaeche-2); }
.rd-heute-knopf { border: 0; background: var(--rd-tanne-leise); color: var(--rd-tanne); border-radius: var(--wk-radius-rund);
  padding: 0 14px; min-height: 44px; font-weight: 700; cursor: pointer; }

.rd-abschnitt { display: flex; flex-direction: column; gap: 10px; }
.rd-abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rd-eyebrow { font: 500 12px/1.4 var(--wk-schrift-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--wk-text-leise); }
.rd-zahl { font: 500 12px/1 var(--wk-schrift-mono); color: var(--wk-text-leise); }
.rd-leise-knopf { border: 0; background: none; color: var(--rd-tanne); font-weight: 700; cursor: pointer; padding: 8px 4px;
  min-height: 44px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* --- Fokusleiste (Tanne): was als Nächstes für mich ansteht -------------------------------------- */
.rd-fokus { background: var(--rd-tanne); color: var(--rd-auf-tanne); border-radius: var(--wk-radius-l);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--wk-schatten-2); }
.rd-fokus .rd-eyebrow { color: color-mix(in srgb, var(--rd-auf-tanne) 72%, transparent); }
.rd-fokus-zeile { display: flex; align-items: center; gap: 10px; }
.rd-fokus-zeile b { font: 700 var(--wk-groesse-gross)/1.3 var(--wk-schrift); }
.rd-fokus .rd-zeit { color: color-mix(in srgb, var(--rd-auf-tanne) 80%, transparent); }
.rd-zaehler { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-zaehler span { border-radius: var(--wk-radius-rund); padding: 3px 10px; font: 700 13px/1.4 var(--wk-schrift);
  background: color-mix(in srgb, var(--rd-auf-tanne) 14%, transparent); }
.rd-zaehler .offen { background: var(--rd-offen); color: var(--rd-auf-offen); }
.rd-balken { display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--rd-auf-tanne) 18%, transparent); }
.rd-balken i { display: block; height: 100%; background: var(--rd-auf-tanne); }
.rd-balken i.offen { background: var(--rd-offen); }
.rd-balken i.erledigt { background: color-mix(in srgb, var(--rd-auf-tanne) 55%, transparent); }

/* --- Aufgabenkarte ------------------------------------------------------------------------------
   Offen: gestrichelt und flach in Gelb (Vorschlag „hier fehlt jemand“). Übernommen: durchgezogen mit Schatten. */
.rd-karten { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rd-karte { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; min-height: 64px;
  background: var(--wk-flaeche); border-radius: var(--wk-radius-l); box-shadow: var(--wk-schatten-1);
  border: var(--wk-strich) solid transparent; cursor: pointer; position: relative;
  transition: box-shadow var(--wk-dauer-kurz) var(--wk-kurve), transform var(--wk-dauer-kurz) var(--wk-kurve); }
.rd-karte:hover { box-shadow: var(--wk-schatten-2); }
.rd-karte[data-zustand="offen"] { box-shadow: none; border: 1.5px dashed var(--rd-offen-rand);
  background: color-mix(in srgb, var(--rd-offen-flaeche) 45%, var(--wk-flaeche)); }
.rd-karte[data-zustand="faellig"] { box-shadow: none; border: 1.5px dashed var(--rd-faellig);
  background: color-mix(in srgb, var(--rd-faellig-flaeche) 55%, var(--wk-flaeche)); }
.rd-karte[data-zustand="erledigt"] { background: transparent; box-shadow: none; border-color: var(--wk-linie); min-height: 52px; }
.rd-karte[data-zustand="erledigt"] .rd-karte-titel { color: var(--wk-text-leise); text-decoration: line-through;
  text-decoration-thickness: 1.5px; }
.rd-karte[data-zustand="mein"] { border-color: var(--wk-gut-rand); }
.rd-karte-oeffnen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none;
  padding: 0; text-align: start; cursor: pointer; min-height: 44px; border-radius: var(--wk-radius-s); }
.rd-karte-oeffnen:focus-visible { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: 4px; }
.rd-zeit { font: 500 14px/1.2 var(--wk-schrift-mono); color: var(--wk-text-leise); font-variant-numeric: tabular-nums;
  width: 46px; flex: none; }
.rd-karte-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rd-karte-titel { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.rd-meta { color: var(--wk-text-leise); font-size: var(--wk-groesse-klein); line-height: 1.35; display: flex;
  flex-wrap: wrap; gap: 2px 8px; align-items: center; }
.rd-meta .rd-av { vertical-align: middle; }
.rd-faellig-text { color: var(--rd-faellig-text); font-weight: 700; }

/* Knöpfe in Karten: Übernehmen gelb (Pille), Erledigen als runder Haken */
.rd-uebernehmen { border: 0; cursor: pointer; background: var(--rd-offen); color: var(--rd-auf-offen);
  font: 700 15px/1 var(--wk-schrift); border-radius: var(--wk-radius-rund); padding: 0 16px; min-height: 44px;
  white-space: nowrap; flex: none; box-shadow: var(--wk-schatten-1); }
.rd-uebernehmen:hover { filter: brightness(1.04); }
.rd-uebernehmen:active { transform: scale(.97); }
.rd-haken { border: 2px solid var(--wk-linie-stark); background: var(--wk-flaeche); width: 44px; height: 44px; flex: none;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: transparent; padding: 0; }
.rd-haken svg { width: 22px; height: 22px; stroke-width: 2.4; }
.rd-haken:hover { border-color: var(--wk-gut); color: var(--wk-gut); }
.rd-haken[aria-pressed="true"] { background: var(--wk-gut); border-color: var(--wk-gut); color: var(--wk-auf-haupt); }
.rd-karte[data-zustand="mein"] .rd-haken { border-color: var(--wk-gut); }
@keyframes rd-plopp { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.rd-haken.frisch, .rd-uebernehmen.frisch { animation: rd-plopp var(--wk-dauer-feiern) var(--wk-kurve-feiern); }

.rd-leer { border: 1.5px dashed var(--wk-linie-stark); border-radius: var(--wk-radius-l); padding: 18px 16px;
  color: var(--wk-text-leise); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rd-leer b { color: var(--wk-text); font: 700 var(--wk-groesse-gross)/1.3 var(--wk-schrift-anzeige); }
.rd-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Holen & Bringen: Wochenraster ----------------------------------------------------------- */
.rd-woche { background: var(--wk-flaeche); border-radius: var(--wk-radius-l); box-shadow: var(--wk-schatten-1);
  padding: 6px 10px 10px; display: flex; flex-direction: column; }
.rd-woche-kopf, .rd-weg-tage { display: grid; grid-template-columns: repeat(var(--rd-spalten, 5), minmax(0, 1fr)); gap: 6px; }
.rd-woche-kopf { position: sticky; top: calc(env(safe-area-inset-top) + 64px); z-index: 2; background: var(--wk-flaeche);
  padding: 8px 0 6px; border-bottom: var(--wk-strich) solid var(--wk-linie); }
.rd-woche-kopf span { display: flex; flex-direction: column; align-items: center; font: 500 11.5px/1.25 var(--wk-schrift-mono);
  color: var(--wk-text-leise); text-transform: uppercase; letter-spacing: .04em; }
.rd-woche-kopf span b { font: 700 15px/1.2 var(--wk-schrift); color: var(--wk-text); letter-spacing: 0; text-transform: none; }
.rd-woche-kopf span[data-heute] b { background: var(--rd-tanne); color: var(--rd-auf-tanne); border-radius: var(--wk-radius-rund);
  padding: 0 7px; }
.rd-weg { padding: 10px 0 8px; border-bottom: var(--wk-strich) solid var(--wk-linie); display: flex; flex-direction: column; gap: 8px; }
.rd-weg:last-child { border-bottom: 0; }
.rd-woche[data-spalten="7"] { --rd-spalten: 7; }
.rd-weg-knopf { border: 0; background: none; padding: 0; text-align: start; cursor: pointer; min-height: 44px; width: 100%;
  border-radius: var(--wk-radius-s); }
.rd-weg-knopf:focus-visible { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: 2px; }
.rd-weg-name { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.rd-weg-name .rd-meta { margin-left: auto; flex: none; }
.rd-richtung { display: inline-flex; align-items: center; gap: 3px; font: 500 12px/1 var(--wk-schrift-mono);
  color: var(--wk-text-2); background: var(--wk-flaeche-2); border-radius: var(--wk-radius-rund); padding: 4px 8px; }
.rd-richtung svg { width: 13px; height: 13px; stroke-width: 2.2; }
.rd-slot { height: 44px; border-radius: var(--wk-radius-m); border: 0; padding: 0; cursor: pointer; display: grid;
  place-items: center; font: 700 15px/1 var(--wk-schrift); background: var(--rd-person); color: var(--rd-auf-person);
  position: relative; min-width: 0; }
.rd-slot[data-zustand="offen"] { background: color-mix(in srgb, var(--rd-offen-flaeche) 50%, transparent);
  border: 1.5px dashed var(--rd-offen-rand); color: var(--rd-auf-offen); }
.rd-slot[data-zustand="offen"] span { background: var(--rd-offen); border-radius: 6px; padding: 2px 6px; }
.rd-slot[data-zustand="frei"] { background: transparent; cursor: default; }
.rd-slot[data-zustand="frei"]::after { content: ""; width: 10px; height: 2px; border-radius: 1px; background: var(--wk-linie); }
.rd-slot[data-zustand="erledigt"] { opacity: .55; }
.rd-slot[data-zustand="erledigt"]::after { content: "✓"; position: absolute; right: 4px; top: 2px; font-size: 11px; }
.rd-slot:focus-visible { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: 2px; }
.rd-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 56px; background: var(--wk-flaeche);
  border-radius: var(--wk-radius-m); box-shadow: var(--wk-schatten-1); cursor: pointer; border: 0; width: 100%;
  text-align: start; }
.rd-zeile:hover { box-shadow: var(--wk-schatten-2); }
.rd-zeile .rd-karte-text { flex: 1; }
.rd-zeile > svg { width: 18px; height: 18px; color: var(--wk-text-leise); flex: none; }

/* --- Einkauf --------------------------------------------------------------------------------- */
.rd-eingabe { position: sticky; top: calc(env(safe-area-inset-top) + 64px); z-index: 3; display: flex; gap: 8px;
  background: var(--wk-grund); padding: 4px 0 6px; }
.rd-eingabe .wk-feld { flex: 1; min-height: 48px; border-radius: var(--wk-radius-rund); padding-inline: 18px; }
.rd-eingabe .wk-knopf { min-height: 48px; }
.rd-liste { list-style: none; margin: 0; padding: 0; background: var(--wk-flaeche); border-radius: var(--wk-radius-l);
  box-shadow: var(--wk-schatten-1); overflow: hidden; }
.rd-artikel { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 8px 0 4px;
  border-bottom: var(--wk-strich) solid var(--wk-linie); }
.rd-artikel:last-child { border-bottom: 0; }
.rd-artikel label { display: grid; place-items: center; width: 48px; height: 52px; flex: none; cursor: pointer; }
.rd-artikel .wk-haken { width: 24px; height: 24px; border-radius: 7px; }
.rd-artikel-text { flex: 1; min-width: 0; border: 0; background: none; text-align: start; padding: 8px 4px; cursor: pointer;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-height: 52px; align-content: center; }
.rd-artikel-text b { font-weight: 600; overflow-wrap: anywhere; }
.rd-menge { font: 500 13px/1 var(--wk-schrift-mono); color: var(--wk-text-leise); }
.rd-knapp { font: 700 12px/1 var(--wk-schrift); color: var(--wk-achtung-text); background: var(--wk-achtung-flaeche);
  border-radius: var(--wk-radius-rund); padding: 4px 8px; }
.rd-artikel[data-zustand="erledigt"] .rd-artikel-text b { color: var(--wk-text-leise); text-decoration: line-through; }

/* --- Rudel ----------------------------------------------------------------------------------- */
.rd-personen { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-person { display: inline-flex; align-items: center; gap: 8px; border: var(--wk-strich) solid var(--wk-linie-stark);
  background: var(--wk-flaeche); border-radius: var(--wk-radius-rund); padding: 4px 14px 4px 4px; min-height: 44px;
  cursor: pointer; font-weight: 600; }
.rd-person[aria-pressed="true"] { border-color: var(--rd-tanne); box-shadow: 0 0 0 var(--wk-strich-aktiv) var(--rd-tanne);
  background: var(--rd-tanne-leise); }
.rd-person.leer .rd-av { background: transparent; border: 1.5px dashed var(--rd-offen-rand); color: var(--wk-text-leise); }
.rd-rueckblick { display: flex; flex-direction: column; gap: 10px; background: var(--wk-flaeche); border-radius: var(--wk-radius-l);
  box-shadow: var(--wk-schatten-1); padding: 14px 16px; }
.rd-rueck-zeile { display: grid; grid-template-columns: 30px minmax(0, 1fr) 2.5ch; gap: 10px; align-items: center; }
.rd-rueck-zeile .rd-spur { height: 10px; border-radius: 5px; background: var(--wk-flaeche-2); overflow: hidden; }
.rd-rueck-zeile .rd-spur i { display: block; height: 100%; background: var(--rd-person); border-radius: 5px;
  width: calc(var(--rd-anteil, 0) * 1%); }
.rd-rueck-zeile b { font: 500 14px/1 var(--wk-schrift-mono); text-align: end; }
.rd-fuss { color: var(--wk-text-leise); font-size: var(--wk-groesse-klein); text-align: center; padding: 8px 0; }

/* --- Blatt (Dialog von unten) ---------------------------------------------------------------- */
.rd-schleier { position: fixed; inset: 0; z-index: var(--wk-ebene-blatt); background: var(--wk-schleier);
  display: flex; align-items: flex-end; justify-content: center; animation: rd-ein var(--wk-dauer-mittel) var(--wk-kurve); }
.rd-blatt { background: var(--wk-flaeche); color: var(--wk-text); width: min(640px, 100%); max-height: 92dvh; overflow: auto;
  border-radius: var(--wk-radius-xl) var(--wk-radius-xl) 0 0; box-shadow: var(--wk-schatten-3);
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px;
  animation: rd-hoch var(--wk-dauer-blatt) var(--wk-kurve); overscroll-behavior: contain; }
.rd-blatt::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--wk-linie-stark);
  align-self: center; opacity: .6; }
.rd-blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-blatt-kopf h2 { font: var(--wk-gewicht-abschnitt) 24px/1.15 var(--wk-schrift-anzeige); letter-spacing: -.02em; }
.rd-blatt form { display: flex; flex-direction: column; gap: 14px; }
.rd-reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rd-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-wahl button, .rd-tag-wahl button { border: var(--wk-strich) solid var(--wk-linie-stark); background: var(--wk-feld);
  border-radius: var(--wk-radius-rund); padding: 0 14px; min-height: 44px; cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; }
.rd-wahl button[aria-pressed="true"], .rd-tag-wahl button[aria-pressed="true"] { background: var(--rd-tanne);
  border-color: var(--rd-tanne); color: var(--rd-auf-tanne); }
.rd-wahl button.rd-wahl-offen[aria-pressed="true"] { background: var(--rd-offen); border-color: var(--rd-offen);
  color: var(--rd-auf-offen); }
.rd-wahl button .rd-av { margin-left: -10px; }
.rd-tag-wahl { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rd-tag-wahl button { padding: 0; justify-content: center; font: 600 14px/1 var(--wk-schrift); }
.rd-farben { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-farben button { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--wk-flaeche);
  background: var(--rd-person); cursor: pointer; box-shadow: 0 0 0 1px var(--wk-linie); }
.rd-farben button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--wk-text); }
.rd-standard { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.rd-standard span { font: 500 13px/1 var(--wk-schrift-mono); color: var(--wk-text-leise); }
.rd-blatt-fuss { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap;
  padding-top: 4px; }
.rd-blatt-fuss .wk-knopf[data-variante="haupt"] { min-width: 9em; }
.rd-blatt select.wk-feld { appearance: auto; }
.rd-fehler { color: var(--wk-fehler-text); font-weight: 600; font-size: var(--wk-groesse-klein); }
@keyframes rd-ein { from { opacity: 0; } }
@keyframes rd-hoch { from { transform: translateY(40px); opacity: .4; } }

/* --- Plus und Leiste ------------------------------------------------------------------------- */
.rd-plus { position: fixed; z-index: var(--wk-ebene-schwebend); right: max(16px, calc((100vw - 640px) / 2 + 16px));
  bottom: calc(84px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: 50%; border: 0;
  background: var(--rd-tanne); color: var(--rd-auf-tanne); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--wk-schatten-3), 0 6px 16px -6px color-mix(in srgb, var(--rd-tanne) 60%, transparent); }
.rd-plus svg { width: 28px; height: 28px; stroke-width: 2.4; }
.rd-plus:active { transform: scale(.95); }
.rd-leiste { position: fixed; z-index: var(--wk-ebene-leiste); left: 0; right: 0; bottom: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); background: color-mix(in srgb, var(--wk-flaeche) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: var(--wk-strich) solid var(--wk-linie);
  padding: 6px max(6px, calc((100vw - 640px) / 2)) calc(6px + env(safe-area-inset-bottom)); }
.rd-leiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px;
  text-decoration: none; color: var(--wk-text-leise); font: 600 11.5px/1.15 var(--wk-schrift); text-align: center;
  border-radius: var(--wk-radius-m); }
.rd-leiste svg { width: 24px; height: 24px; }
.rd-leiste a[aria-current="page"] { color: var(--rd-tanne); }
.rd-leiste a[aria-current="page"] svg { stroke-width: 2.3; }
.rd-leiste a:focus-visible { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: -2px; }
.wk-toasts { --wk-toast-unten: calc(156px + env(safe-area-inset-bottom)); z-index: var(--wk-ebene-meldung); }
.wk-toasts[data-lage="mittig"] .wk-toast { width: min(560px, 100%); justify-content: space-between; text-align: start; }
.rd-tipp { color: var(--wk-text-leise); font-size: var(--wk-groesse-klein); margin-top: -10px; }

/* --- Anmelden -------------------------------------------------------------------------------- */
.rd-anmelden { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.rd-anmelden-karte { width: min(420px, 100%); display: flex; flex-direction: column; gap: 18px; }
.rd-anmelden .rd-logo { width: 64px; height: 64px; }
.rd-wortmarke { font: 800 clamp(48px, 14vw, 72px)/.9 var(--wk-schrift-anzeige); letter-spacing: -.04em; color: var(--rd-tanne); }
.rd-claim { font: 500 20px/1.35 var(--wk-schrift-anzeige); max-width: 26ch; }
.rd-anmelden form { display: flex; flex-direction: column; gap: 12px; background: var(--wk-flaeche); padding: 18px;
  border-radius: var(--wk-radius-l); box-shadow: var(--wk-schatten-2); }
.rd-anmelden .wk-knopf { min-height: 48px; }

@media (min-width: 700px) {
  .rd-inhalt { padding-top: 16px; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-schleier, .rd-blatt, .rd-haken.frisch, .rd-uebernehmen.frisch { animation: none; }
}