/* ============================================================
   rundum.dog · rd-System — Struktur-Pattern-Sprache (Redesign 2026-06-24, Phase 0)
   Additiv, global, NACH rundum.css enqueued (Handle rundum-system, dep rundum-v3).

   Hart-Regeln dieses Files (Kollisions-/Token-Audit Max, live verifiziert):
   - KEINE Element-Selektoren (kein body/*/h1-4/a) — darf global nichts umstellen.
   - KEINE Redefinition bestehender Tokens — nur Bridge-Aliases auf Live-Namen.
   - KEINE Chrome/Button/Basis-Chip-Klassen (rd-topbar/logo/avatar/topnav/wrap/
     rd-btn/rd-chip kollidieren mit rundum.css) — hier entfernt.
   - Konto-Chips als rd-dogchip* (umbenannt, kollisionsfrei).
   Quelle: redesign-2026-06-24/rd-system.css (Iris).
   ============================================================ */

:root {
  /* Bridge: Iris-System-Namen -> bestehende Live-Tokens (Alias, NICHT Redefinition).
     Diese Alias-Namen sind rd-system-eigen; rundum.css darf sie NICHT als eigene
     Tokens definieren (rd-system laedt danach und wuerde sie ueberschreiben). */
  --rd-surface:     var(--rd-bg-soft);          /* #FFFFFF */
  --rd-surface-2:   var(--rd-bg-alt);           /* #F4EDE4 */
  --rd-muted:       var(--rd-text-secondary);   /* #595959 */
  --rd-faint:       var(--rd-text-tertiary);    /* #767676 */
  --rd-ink:         var(--rd-text);             /* #1A1A1A */
  --rd-accent-wash: var(--rd-accent-soft);      /* #F4E3D2 */
  /* Schatten: direkt Live-Token statt eigenem Alias (Carla Phase-0 Finding 2 —
     generischer Alias-Name --rd-shadow koennte kuenftiges rundum.css-Token clobbern). */

  /* Additiv neu (existieren in rundum.css nicht; Audit: kollisionsfrei) */
  --rd-good:    #4E7A52;
  --rd-measure: 68ch;
  --font-body:  "Inter", system-ui, sans-serif;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
}

/* ====== PATTERN 1 · Page-Header (geführter Einstieg, kein Stat-Wall) ====== */
.rd-phead { padding-block: clamp(var(--s-7), 6vw, var(--s-9)) var(--s-6); }
.rd-phead__crumb { font-size: 13px; color: var(--rd-muted); display: flex; gap: 6px; align-items: center; margin-bottom: var(--s-4); }
.rd-phead__crumb a:hover { color: var(--rd-accent-strong); } /* intentional: Breadcrumb-Links akzentuieren on hover (Carla Phase-0 Finding 1) */
.rd-phead__crumb span { color: var(--rd-faint); }
.rd-phead__title { font-size: clamp(2rem, 4.2vw + 1rem, 3.4rem); letter-spacing: -0.02em; max-width: 16ch; color: var(--rd-ink); font-weight: 700; line-height: 1.18; }
.rd-phead__lead { margin-top: var(--s-4); color: var(--rd-text); max-width: var(--rd-measure); font-size: 1.05rem; }

/* ====== PATTERN 2 · Orientierungs-Strip (1 Zeile Inline-Fakten statt 8 Boxen) ====== */
.rd-orient { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-r-lg); box-shadow: var(--rd-shadow-sm); }
.rd-orient__item { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.rd-orient__n { font-size: 1.25rem; font-weight: 700; color: var(--rd-ink); font-variant-numeric: tabular-nums; }
.rd-orient__l { font-size: 0.92rem; color: var(--rd-muted); }
.rd-orient__sep { width: 1px; height: 22px; background: var(--rd-border); }
.rd-orient__item--lead .rd-orient__n { color: var(--rd-accent-strong); }

/* ====== PATTERN 3 · Sektion mit Kopf + "Alle anzeigen" (Top-N + Rest progressiv) ====== */
.rd-sec { padding-block: clamp(var(--s-6), 5vw, var(--s-8)); }
.rd-sec + .rd-sec { border-top: 1px solid var(--rd-border); }
.rd-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.rd-sec__title { font-size: clamp(1.3rem, 1.6vw + 0.9rem, 1.7rem); letter-spacing: -0.01em; color: var(--rd-ink); font-weight: 700; line-height: 1.18; }
.rd-sec__sub { margin-top: 4px; color: var(--rd-muted); font-size: 0.95rem; }
.rd-sec__all { font-size: 0.92rem; font-weight: 600; color: var(--rd-accent-strong); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 4px; min-height: 44px; align-self: flex-end; }
.rd-sec__all:hover { gap: 9px; }
.rd-sec__all svg { transition: transform var(--dur-fast) var(--ease-out); }
.rd-sec__all:hover svg { transform: translateX(2px); }

/* ====== PATTERN 4 · Dichte scanbare Liste (statt Kachelwand) ====== */
.rd-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 2px 0; }
.rd-index__row { display: flex; align-items: center; gap: var(--s-3); padding: 11px 14px; border-radius: var(--rd-r-sm); transition: background var(--dur-fast) var(--ease-out); }
.rd-index__row:hover { background: var(--rd-surface); }
.rd-index__name { font-weight: 600; color: var(--rd-ink); font-size: 0.98rem; }
.rd-index__count { margin-left: auto; font-size: 0.82rem; color: var(--rd-muted); font-variant-numeric: tabular-nums; background: var(--rd-surface-2); padding: 2px 9px; border-radius: var(--rd-r-pill); }
.rd-index__row:hover .rd-index__count { background: var(--rd-accent-wash); color: var(--rd-accent-strong); }
.rd-index--collapsible[data-collapsed="true"] .rd-index__row:nth-child(n+13) { display: none; }
.rd-index__more { margin-top: var(--s-4); display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--rd-accent-strong); padding: 10px 18px; min-height: 44px; cursor: pointer; background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-r-pill); }
.rd-index__more:hover { border-color: var(--rd-accent); }

/* ====== PATTERN 5 · Teaser-Reihe (max 3, EINE Familie pro Sektion) ====== */
.rd-teasers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.rd-teaser { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-r-md); overflow: hidden; box-shadow: var(--rd-shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.rd-teaser:hover { transform: translateY(-3px); box-shadow: var(--rd-shadow-md); }
.rd-teaser__img { aspect-ratio: 16/10; background: var(--rd-surface-2); object-fit: cover; width: 100%; display: block; }
.rd-teaser__body { padding: var(--s-4); }
.rd-teaser__kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rd-accent); }
.rd-teaser__title { font-size: 1.02rem; margin-top: 6px; color: var(--rd-ink); font-weight: 700; line-height: 1.18; }
.rd-teaser__meta { font-size: 0.85rem; color: var(--rd-muted); margin-top: 8px; }

/* compact list-teaser (Events / Ratgeber: Text-dicht, kein Bild-Zwang) */
.rd-rows { display: grid; gap: 2px; }
.rd-rowt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: 13px 14px; border-radius: var(--rd-r-sm); transition: background var(--dur-fast) var(--ease-out); }
.rd-rowt:hover { background: var(--rd-surface); }
.rd-rowt__date { text-align: center; min-width: 46px; line-height: 1.05; color: var(--rd-accent-strong); font-weight: 700; }
.rd-rowt__date small { display: block; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; color: var(--rd-muted); letter-spacing: 0.03em; }
.rd-rowt__title { font-weight: 600; color: var(--rd-ink); }
.rd-rowt__sub { font-size: 0.85rem; color: var(--rd-muted); margin-top: 2px; }
.rd-rowt__where { font-size: 0.85rem; color: var(--rd-muted); white-space: nowrap; }

/* ====== Body-Prosa (Long-form bleibt, aber gegated) ====== */
.rd-prose { max-width: var(--rd-measure); }
.rd-prose p { margin: 0 0 var(--s-4); }
.rd-prose h3 { font-size: 1.2rem; margin: var(--s-6) 0 var(--s-3); color: var(--rd-ink); font-weight: 700; line-height: 1.18; }
.rd-disclose { border: 1px solid var(--rd-border); border-radius: var(--rd-r-md); background: var(--rd-surface); padding: var(--s-4) var(--s-5); margin-top: var(--s-4); }
.rd-disclose > summary { cursor: pointer; font-weight: 600; color: var(--rd-ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.rd-disclose > summary::-webkit-details-marker { display: none; }
.rd-disclose > summary::after { content: "+"; color: var(--rd-accent-strong); font-size: 1.3rem; line-height: 1; }
.rd-disclose[open] > summary::after { content: "\2013"; }
.rd-disclose__body { padding-top: var(--s-4); color: var(--rd-text); }

/* ====== Konto-spezifisch (Pattern 6 · Sub-Rail + Pattern 7 · content-first) ====== */
.rd-acct { display: grid; grid-template-columns: 232px 1fr; gap: clamp(var(--s-5), 4vw, var(--s-8)); align-items: start; }
.rd-rail { position: sticky; top: 24px; }
.rd-rail__group + .rd-rail__group { margin-top: var(--s-5); }
.rd-rail__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-faint); padding: 0 12px; margin-bottom: 6px; }
.rd-rail__link { display: flex; align-items: center; gap: var(--s-3); padding: 9px 12px; border-radius: var(--rd-r-sm); color: var(--rd-text); font-weight: 500; font-size: 0.96rem; min-height: 44px; transition: background var(--dur-fast) var(--ease-out); }
.rd-rail__link:hover { background: var(--rd-surface); }
.rd-rail__link[aria-current="page"] { background: var(--rd-accent-wash); color: var(--rd-accent-strong); font-weight: 700; }
.rd-rail__ico { width: 18px; height: 18px; flex: none; color: var(--rd-muted); }
.rd-rail__link[aria-current="page"] .rd-rail__ico { color: var(--rd-accent-strong); }

/* Hund-Card = Kern, bleibt das emotionale Herz */
.rd-dogs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
.rd-dog { background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-r-lg); padding: var(--s-4); display: flex; gap: var(--s-4); box-shadow: var(--rd-shadow-sm); }
.rd-dog__photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; background: var(--rd-surface-2); }
.rd-dog__name { font-size: 1.1rem; color: var(--rd-ink); font-weight: 700; }
.rd-dog__breed { color: var(--rd-muted); font-size: 0.9rem; margin-top: 1px; }
.rd-dog__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rd-dog__next { font-size: 0.85rem; color: var(--rd-muted); margin-top: 10px; }
.rd-dog__next b { color: var(--rd-ink); font-weight: 600; }

/* Konto-Status-Chips (umbenannt von rd-chip*, das in rundum.css belegt ist) */
.rd-dogchip { font-size: 0.74rem; font-weight: 600; padding: 3px 9px; border-radius: var(--rd-r-pill); background: var(--rd-surface-2); color: var(--rd-text); }
.rd-dogchip--good { background: rgba(78,122,82,.12); color: var(--rd-good); }
.rd-dogchip--gal  { background: var(--rd-accent-wash); color: var(--rd-accent-strong); }

.rd-addcard { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1.5px dashed var(--rd-border); border-radius: var(--rd-r-lg); padding: var(--s-5); color: var(--rd-accent-strong); font-weight: 600; min-height: 108px; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.rd-addcard:hover { border-color: var(--rd-accent); background: var(--rd-accent-wash); }

/* Shortcut-Zeilen (Konto): dichte Liste statt 12 Kacheln */
.rd-short { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px; }
.rd-short__row { display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px; border-radius: var(--rd-r-sm); min-height: 44px; transition: background var(--dur-fast) var(--ease-out); }
.rd-short__row:hover { background: var(--rd-surface); }
.rd-short__ico { width: 18px; height: 18px; color: var(--rd-muted); flex: none; }
.rd-short__row:hover .rd-short__ico { color: var(--rd-accent-strong); }
.rd-short__t { font-weight: 600; color: var(--rd-ink); font-size: 0.95rem; }
.rd-short__arrow { margin-left: auto; color: var(--rd-faint); }

@media (max-width: 760px) {
  .rd-acct { grid-template-columns: 1fr; }
  .rd-sec__head { flex-wrap: wrap; }
  .rd-rail { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
  .rd-rail__group { display: flex; gap: 6px; }
  .rd-rail__group + .rd-rail__group { margin-top: 0; }
  .rd-rail__label { display: none; }
  .rd-rail__link { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-teaser, .rd-sec__all svg, .rd-index__row, .rd-rowt, .rd-rail__link, .rd-short__row, .rd-addcard { transition: none !important; }
}

/* ====== Konto-Layout-Hook (Redesign Phase 1, Tranche 1) ======
   Body-Spalte des rd-acct-Grids darf schrumpfen: verhindert 1fr-Track-Blowout
   (Grid-Default min-width:auto) bei breitem Inhalt wie Filter-Tabs/Hund-Grid. */
.rd-acct__body { min-width: 0; }