/* ============================================================
   Pawline Design System (§10) — Premium Dark, layered surfaces,
   subtle glow & glass, calm micro-interactions.
   ============================================================ */

/* --- Signatur-Typografie: Inter (variabel, lokal eingebettet, offline-tauglich).
   Ein einziger variabler Schnitt trägt die gesamte Gewichtsskala 100–900;
   deckt Body, Metriken (tabellarische Ziffern) und ausdrucksstarke Headings ab. --- */
@font-face {
  font-family: "InterVar";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "InterVar";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-italic.woff2") format("woff2-variations");
}
/* --- Editorial-Display: Bricolage Grotesque (variabel, OFL, lokal eingebettet).
   Charaktervolle Grotesk (KEINE Serife) NUR für emotionale Momente — Almanach-Kopf,
   Seiten-Headlines, Signatur-Ziffern. Body/Metriken bleiben InterVar. --- */
@font-face {
  font-family: "Bricolage";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/bricolage-grotesque-wght-normal.woff2") format("woff2-variations");
}

:root {
  --color-bg-canvas: #06070a;
  --color-bg-surface-1: rgba(18, 22, 32, 0.72);
  --color-bg-surface-2: rgba(26, 32, 46, 0.82);
  --color-bg-surface-3: rgba(34, 42, 60, 0.90);
  --color-pine: #1A382B;   /* Marken-Grün: Hero/aktive Nav/Portrait-Ring */
  --color-brass: #E5B976;  /* Champagner-Gold Akzent */
  --color-gold-hero: #E5B976;
  --color-gold-glow: rgba(229, 185, 118, 0.18);
  /* Geschlechts-Split (Welpen ♂/♀): edle Messing & Petrol Akzente */
  --ratio-sex-m: #E5B976;  /* ♂ Champagner-Gold (dark) */
  --ratio-sex-f: #2E9C89;  /* ♀ Petrol-Saphir (dark) */
  --color-bg-elevated: rgba(16, 20, 30, 0.92);

  --color-text-primary: #F7F5F0;
  --color-text-secondary: #B5C0D0;
  --color-text-muted: #8E9BB0;
  --color-text-disabled: #556275;

  --color-accent-primary: #E5B976;
  --color-accent-primary-hover: #F2CA8A;
  --color-accent-secondary: #2E9C89;
  --color-accent-secondary-hover: #3EB8A3;
  --color-accent-cyan: #64DFDF;
  --accent-marigold: #F2A03C;
  --accent-petrol: #2E9C89;

  --color-accent-surface: #9E793A;
  --color-accent-surface-hover: #B58C46;
  --color-accent-secondary-surface: #1E6F63;
  --color-accent-secondary-surface-hover: #268577;
  --color-accent-cyan-surface: #1B8C90;
  --color-accent-pink-surface: #B23568;
  --color-success: #34D399;
  --color-warning: #F59E0B;
  --color-danger: #F87171;
  --color-info: #60A5FA;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(229, 185, 118, 0.22);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --glow-accent: 0 0 0 1px rgba(229, 185, 118, 0.4), 0 8px 32px rgba(229, 185, 118, 0.25);

  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* Typo-Skala (§1.4): ersetzt Magic-Number-Größen; halbe Pixel gerundet
     (WebView2 rendert halbe Pixel unscharf). Sanft auf häufige Stellen angewandt. */
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px;
  --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 26px; --fs-3xl: 30px; --fs-display: 38px;
  --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.55;

  --motion-fast: 120ms; --motion-normal: 190ms; --motion-slow: 320ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-emphasized: cubic-bezier(.2, .9, .2, 1.08);

  --font-sans: "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --sidebar-w: 260px;
  /* Topbar-Kontrollhöhe (Art-Director-Fix #1): eine gemeinsame Box-Höhe für
     ALLE Topbar-Controls (Zurück, Breadcrumb, Suche, Kontext-Switch, Sync),
     damit sie auf einer Baseline sitzen statt in 4 verschiedenen Höhen. */
  --topbar-control-h: 36px;

  /* Schwebendes Content-Canvas — Inset-Abstand zur Chrome + Pane-Radius.
     Auf schmalen Screens (Media-Query) auf 0 gesetzt = randlos. */
  --pane-gap: 14px;
  --pane-radius: 26px;
  --pane-bg: linear-gradient(180deg, rgba(22, 30, 42, 0.64), rgba(14, 19, 28, 0.50));
  --pane-border: rgba(255, 255, 255, 0.09);
  --pane-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --pane-shadow: 0 1px 0 rgba(255,255,255,.03), 0 20px 50px rgba(0,0,0,.36), 0 48px 100px rgba(0,0,0,.32);

  /* --- Glas-Ebenen (Dark): halbtransparente Flächen, die den Aurora-Grund
     dezent durchscheinen lassen. Gestaffelte Transluzenz erzeugt Tiefe. --- */
  --glass-1: rgba(21, 29, 41, 0.55);          /* Karten / Content-Flächen */
  --glass-2: rgba(24, 33, 47, 0.72);          /* Popover / Modal / Topbar */
  --glass-row: rgba(19, 26, 37, 0.62);        /* Listenzeilen (ohne Per-Zeilen-Blur) */
  --glass-row-alt: rgba(27, 36, 50, 0.62);    /* Zebra-Alt */
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.12);
  --glass-blur: 16px;
  --glass-blur-strong: 22px;
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.22);
  --glass-shadow-lg: 0 26px 74px rgba(0, 0, 0, 0.48);

  /* --- Themebare „harte" Flächen & Ambient (Dark-Defaults; im Light überschrieben). --- */
  --color-accent: var(--color-accent-primary);   /* Alias: killt #6366f1-Drift (breed-row, bottomnav) */
  --color-accent-pink: #ff5fa2;
  --color-bg-app: var(--color-bg-canvas);         /* App-Sperre-Backdrop (vorher Phantom → #0b0d12-Fallback) */
  --font-mono: "SF Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
  --sidebar-bg: rgba(9, 22, 28, 0.74);            /* Chrome-Rahmen-Grund (Basis) */
  --sidebar-glass: rgba(9, 22, 28, 0.66);         /* Chrome mit backdrop-blur (Sidebar+Topbar) */
  --sidebar-solid: rgba(9, 22, 28, 0.95);         /* Fallback ohne backdrop-filter */
  --sidebar-solid-strong: rgba(9, 22, 28, 0.97);  /* reduced-transparency */
  --reg-head-bg: rgba(9, 12, 18, 0.55);           /* klebriger Tabellenkopf (Glas) */
  --contract-bg: rgba(6, 9, 14, 0.6);             /* Vertrags-/Mono-Vorschau */
  --text-shadow-hero: 0 1px 12px rgba(0, 0, 0, 0.35);
  --text-shadow-soft: 0 1px 10px rgba(0, 0, 0, 0.3);
  --text-shadow-lead: 0 1px 8px rgba(0, 0, 0, 0.25);
  /* Aurora — atmosphärisches Flüstern, in die Signatur-Achse gedreht
     (Indigo → tiefes Blau → ein Hauch Teal). Kein lautes Pink/Grün mehr;
     stark gedämpfte Opazität + weiter Blur = Tiefe statt Effekt. */
  --aurora-a1: #16b8bf; --aurora-a2: #0d8f9e; --aurora-a3: #37c7cf; --aurora-a4: #e6a24f;
  --aurora-opacity: 0.36; --aurora-blur: 120px; --aurora-blend: screen;
  --scrim-aurora: radial-gradient(130% 108% at 50% 34%, rgba(8,11,17,.70) 0%, rgba(8,11,17,.40) 48%, rgba(8,11,17,.14) 100%);
  /* Statischer Farb-Mesh hinter dem Canvas (html) — dezent, entlang der Akzentachse. */
  --app-mesh:
    radial-gradient(1200px 780px at 8% -8%, rgba(20,184,191,.17), transparent 62%),
    radial-gradient(980px 680px at 98% 0%, rgba(13,143,158,.12), transparent 58%),
    radial-gradient(1100px 860px at 82% 112%, rgba(230,162,79,.07), transparent 62%);
  /* Hero (Hundeprofil): Basis-Fläche + Textschutz-Scrim als Token → im Light
     eine Pine-Marke statt des near-black-Scrims. */
  --hero-base: linear-gradient(155deg, var(--color-bg-surface-3), var(--color-bg-canvas));
  --hero-scrim: rgba(9,12,18,.78);
  /* --color-warm hat GENAU EINE Rolle: „Aufmerksamkeit/überfällig" (Fix #9a).
     Aktuell dekorativ im --app-mesh-Eckakzent (Light) verankert; NICHT für
     die .pw-metric-Topline-Rotation verwenden (die bleibt bewusst bei
     accent/cyan/--color-warning — eigene Semantik „ausstehend", kein Gold-Alias). */
  --color-warm: #e0a34a; --color-warm-soft: rgba(224,163,74,.16);
  /* Marken-Anker (Fix #9c): der mittlere Hero-Gradient-Stop, als Token verankert,
     damit spätere Marken-Elemente (Tab-Unterstrich, Sync-Indikator) dieselbe
     Reise referenzieren statt eigene Hex-Werte zu erfinden. */
  --accent-anchor: #0e5057;
}

/* ============================================================
   LIGHT-THEME — eigenständig premium (nicht invertiert).
   Ruhige, edle Off-White-Neutrals mit feiner Abstufung; violett-blauer
   Marken-Akzent bleibt. Glas funktioniert auf HELL: helle transluzente
   Flächen, feinere Hairlines, weiche farbige Schatten.
   Aktiviert über data-theme="light" (Runtime-Swap setzt das Attribut).
   ============================================================ */
[data-theme="light"] {
  /* Porcelain: kühl-porzellanweißer Grund (kein Cyan-Wash), whitere Flächen-
     Abstufung → Karten heben sich durch Elevation ab, nicht durch Fläche. */
  /* Fix #9b: #fff-Karte auf #f5f7f7-Canvas war rechnerisch nur ~2,7% Kanal-
     Abstand — bei --shadow-card allein (0 1px 2px + 0 12px 32px, sehr weich)
     auf hellen Monitoren zu fad. Kanal-Diff auf ~2-3% angehoben (Karten heben
     sich jetzt per Fläche UND Schatten ab), Porcelain-Charakter bleibt (immer
     noch neutral-kühl, kein Grau-Wash). */
  --color-bg-canvas: #f3efe6;
  --color-bg-surface-1: #fffdf8;
  --color-bg-surface-2: #f6f1e6;
  --color-bg-surface-3: #ede5d2;
  --color-pine: #143e30;
  --color-brass: #7c6a3f;
  /* Geschlechts-Split (Welpen ♂/♀) — Erd-Töne, klar unterscheidbar auf Papier-Beige. */
  --ratio-sex-m: #7c6a3f;  /* ♂ Messing (light) */
  --ratio-sex-f: #1E6F63;  /* ♀ Petrol (light) */
  --color-bg-elevated: rgba(255, 255, 255, 0.96);
  /* Warm-Akzent (Messing/Ocker) — sparsam für Auszeichnungen/„lebend", damit
     Porcelain edel-warm statt kühl-generisch wirkt. */
  --color-warm: #b0842f;
  --color-warm-soft: #f4edda;

  /* Text: tiefes Tinten-Blaugrau statt reinem Schwarz. */
  --color-text-primary: #1a2420;
  --color-text-secondary: #445267;
  --color-text-muted: #5d6b7e;
  --color-text-disabled: #93a0b1;

  /* Akzente: kräftiges, sattes Petrol/Teal, so weit abgedunkelt, dass weißer Text
     auf dem Akzent UND der Akzent als Text auf dem Canvas WCAG AA (≥4.5:1) erreichen. */
  --color-accent-primary: #06767e;
  --color-accent-primary-hover: #05747b;
  --color-accent: var(--color-accent-primary);
  /* Petrol-Akzent (Light-Pendant): tief genug für weißen Text (AA ≥4.5 auf Akzent, verifiziert). */
  --color-accent-secondary: #036c73;
  --color-accent-secondary-hover: #057078;
  --color-accent-cyan: #0a7b83;   /* AA auf Weiß (auch für inline <code>) */
  --color-accent-pink: #d63f80;
  /* Dashboard-„Horizont"-Statement-Akzente (light): Marigold („bold orange auf beige") + Petrol-Live. */
  --accent-marigold: #E08A2B;
  --accent-petrol: #1E6F63;
  /* Surface-Set (WP-D3): im Light-Theme kein Rollenkonflikt (dunkler hilft
     sowohl weißem Text auf der Fläche als auch dem Akzent als Text auf dem
     hellen Canvas) — daher reine Aliase auf die bereits AA-konformen
     Haupttoken. Nur --color-accent-pink war für Weiß-Text allein zu hell
     (4,30:1), deshalb eigener, dunklerer Pink-Surface-Wert. */
  --color-accent-surface: var(--color-accent-primary);              /* weiß darauf: 5,38:1 */
  --color-accent-surface-hover: var(--color-accent-primary-hover);  /* weiß darauf: 5,55:1 */
  --color-accent-secondary-surface: var(--color-accent-secondary);              /* weiß darauf: 6,18:1 */
  --color-accent-secondary-surface-hover: var(--color-accent-secondary-hover);  /* weiß darauf: 5,84:1 */
  --color-accent-cyan-surface: var(--color-accent-cyan);   /* weiß darauf: 5,03:1 */
  --color-accent-pink-surface: #b23568;                    /* weiß darauf: 5,83:1 (Original-Pink: 4,30:1 ✗) */
  --color-bg-app: var(--color-bg-canvas);
  --color-success: #12784c; --color-warning: #9a6400; --color-danger: #c62a45; --color-info: #1667c9;

  /* Hairlines & Schatten: dunkle Linien auf hell, weiche kühle Schatten. */
  --border-subtle: rgba(17, 27, 45, 0.10);
  --border-strong: rgba(17, 27, 45, 0.18);
  /* Gleiche gestaffelte Elevation-Logik wie Dark, nur kühle helle Werte. */
  --shadow-card: 0 1px 2px rgba(30, 41, 66, 0.06), 0 12px 30px rgba(30, 41, 66, 0.10);
  --shadow-overlay: 0 2px 8px rgba(30, 41, 66, 0.10), 0 22px 60px rgba(30, 41, 66, 0.16);
  --shadow-elevated: 0 3px 10px rgba(30, 41, 66, 0.10), 0 20px 52px rgba(30, 41, 66, 0.16);
  --glow-accent: 0 0 0 1px rgba(6, 138, 146, 0.28), 0 8px 26px rgba(18, 179, 186, 0.22);

  /* Glas auf HELL: helle transluzente Flächen + feine helle Highlights. */
  --glass-1: rgba(255, 255, 255, 0.62);
  --glass-2: rgba(255, 255, 255, 0.80);
  --glass-row: rgba(255, 255, 255, 0.60);
  --glass-row-alt: rgba(238, 242, 248, 0.72);
  --glass-border: rgba(17, 27, 45, 0.09);
  --glass-border-strong: rgba(17, 27, 45, 0.14);
  --glass-blur: 14px;
  --glass-blur-strong: 18px;
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 10px 30px rgba(30, 41, 66, 0.08), 0 2px 8px rgba(30, 41, 66, 0.05);
  --glass-shadow-lg: 0 22px 60px rgba(30, 41, 66, 0.16);

  /* Harte Flächen hell-adaptiert. */
  --sidebar-bg: rgba(255, 255, 255, 0.72);
  --sidebar-glass: rgba(255, 255, 255, 0.70);
  --sidebar-solid: rgba(255, 255, 255, 0.94);
  --sidebar-solid-strong: rgba(255, 255, 255, 0.97);
  --reg-head-bg: rgba(238, 241, 246, 0.72);
  --contract-bg: var(--color-bg-surface-2);
  --text-shadow-hero: none;
  --text-shadow-soft: none;
  --text-shadow-lead: none;

  /* Aurora im Light: sehr dezente, edle helle Schleier entlang derselben
     Indigo→Blau-Achse (kein Pink) — Signatur-Fläche bleibt, nur leiser. */
  --aurora-a1: #7fd0d5; --aurora-a2: #bfe6e4; --aurora-a3: #a9dcda; --aurora-a4: #e6c58f;
  --aurora-opacity: 0.20; --aurora-blur: 120px; --aurora-blend: normal;
  --scrim-aurora: radial-gradient(130% 106% at 50% 36%, rgba(245,247,247,.60) 0%, rgba(245,247,247,.28) 50%, rgba(245,247,247,.05) 100%);
  /* Mesh nur noch ein Flüstern (kein Cyan-Wash mehr): dezente Marken-/Warm-Tönung an den Ecken. */
  --app-mesh:
    radial-gradient(1100px 720px at 100% -6%, color-mix(in srgb, var(--color-accent-primary) 6%, transparent), transparent 60%),
    radial-gradient(900px 700px at -4% 106%, color-mix(in srgb, var(--color-warm) 7%, transparent), transparent 58%);

  /* Schwebendes Canvas im Light: heller, transluzenter Bogen + weiche kühle Elevation. */
  --pane-bg: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.66));
  --pane-border: rgba(17, 27, 45, 0.08);
  --pane-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --pane-shadow: 0 1px 0 rgba(255,255,255,.5), 0 16px 40px rgba(30,41,66,.12), 0 40px 84px rgba(30,41,66,.10);
  /* Hero im Light = bewusste Pine-Marke (dunkles Petrol, NICHT schwarz) mit
     leichtem Scrim → weißer Text bleibt lesbar, kein „extrem dunkler" Block. */
  --hero-base: linear-gradient(150deg, #0a3b3f, var(--accent-anchor) 60%, #0b6b72);
  --hero-scrim: rgba(8,28,30,.28);
}

* { box-sizing: border-box; }
/* Formular-Controls erben die App-Schrift (InterVar) statt des UA-Defaults (Arial). */
button, input, select, textarea, optgroup { font-family: inherit; }

html {
  /* Canvas paints at the very back; a static colour mesh gives depth even
     before the animated aurora. */
  background: var(--app-mesh), var(--color-bg-canvas);
  /* Explizite Basisfarbe: der background-Shorthand setzt keine verlässliche
     background-color (Multi-Layer), sonst bleibt der Canvas im Dark-Theme
     transparent und der Inhaltsbereich wirkt hell. */
  background-color: var(--color-bg-canvas);
  background-attachment: fixed;
}
/* Nur der body bleibt transparent, damit die fixe .aurora nicht überdeckt wird —
   html BEHÄLT seine Canvas-Farbe, sonst ist der Inhaltsbereich im Dark-Theme
   transparent und wirkt hell. */
body { background-color: transparent; }
html, body {
  margin: 0; padding: 0;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Ambient glow behind the canvas — very subtle (§10.8). */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(128, 108, 255, 0.10), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(67, 217, 255, 0.06), transparent 55%);
}

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 640; letter-spacing: -0.014em; color: var(--color-text-primary); margin: 0 0 var(--space-4); }
/* Editorial-Display auf den großen Seiten-Titeln (Bricolage Grotesque) — Magazin-Kopf statt Utility-Sans. */
.meute-head h1 { font-family: var(--font-display); font-weight: 620; letter-spacing: -0.022em; }
h1 { font-size: var(--fs-3xl); font-weight: 680; line-height: var(--lh-tight); letter-spacing: -0.024em; text-shadow: var(--text-shadow-hero); }
h2 { font-size: var(--fs-xl); font-weight: 660; line-height: var(--lh-snug); letter-spacing: -0.019em; margin-top: var(--space-8); }
.pw-content > h2, .hub-body > h2 { text-shadow: var(--text-shadow-soft); }
.lead { text-shadow: var(--text-shadow-lead); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: -0.013em; }
p { color: var(--color-text-secondary); margin: 0 0 var(--space-4); }
.lead { color: var(--color-text-muted); font-size: 15px; margin-top: -6px; }
a { color: var(--color-accent-primary); text-decoration: none; transition: color var(--motion-fast) var(--ease-standard); }
a:hover { color: var(--color-accent-primary-hover); }
code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-accent-cyan); background: color-mix(in srgb, var(--color-accent-cyan) 10%, transparent); padding: 2px 6px; border-radius: var(--radius-xs); }
.tnum { font-variant-numeric: tabular-nums; }

/* Fokus: sichtbarer Ring nur bei Tastaturnavigation (§10.10), kein Kasten bei programmatischem Fokus. */
:focus:not(:focus-visible) { outline: none; }
/* Programmatischer Fokus (Blazor-A11y, tabindex="-1") darf weder Outline noch
   den Akzent-Halo zeigen — der Halo gilt nur echter Tastaturnavigation. */
h1:focus, h2:focus, [tabindex="-1"]:focus { outline: none; box-shadow: none; }
:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-primary) 20%, transparent); }

/* Textauswahl: dezenter Akzent-Tint, in beiden Themes stimmig. */
::selection { background: color-mix(in srgb, var(--color-accent-primary) 26%, transparent); }

/* ---------- Shell ---------- */
.page { display: flex; min-height: 100vh; }

.pw-sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  /* Fix #8: identisches Material wie .pw-topbar (var(--sidebar-glass) + Blur),
     damit Sidebar+Topbar als EIN durchgehender L-Rahmen lesen statt als zwei
     Panels mit unterschiedlicher Füllung. */
  background: var(--sidebar-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: var(--space-5) var(--space-3);
}
/* Naht bewusst gestaltet: keine flache Hairline mehr über die volle Höhe,
   sondern eine 1px-Gradient-Fade (oben opak an der L-Ecke, unten transparent) —
   der Rahmen wirkt atmosphärisch statt wie eine harte Box-Kontur. */
.pw-sidebar::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--border-subtle) 0%, transparent 65%);
  pointer-events: none;
}
.pw-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-6); }
.pw-brand-mark {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center; padding: 5px;
  background: #fff; border-radius: 11px;
  box-shadow: 0 4px 12px rgba(0,0,0,.38), 0 1px 3px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.6);
}
.pw-brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }

.pw-nav { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.pw-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pw-brand, .pw-lang, .pw-nav-foot { flex: 0 0 auto; }
.pw-nav a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3); border-radius: var(--radius-sm);
  color: var(--color-text-secondary); font-weight: 500; font-size: var(--fs-base);
  position: relative; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.pw-nav a svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; opacity: .85; flex: 0 0 auto; }
.pw-nav a:hover { background: var(--color-bg-surface-2); color: var(--color-text-primary); }
.pw-nav a.active {
  background: linear-gradient(90deg, rgba(128,108,255,.16), rgba(128,108,255,.04));
  color: var(--color-text-primary);
}
.pw-nav a.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 3px;
  background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-cyan));
  box-shadow: 0 0 12px rgba(128,108,255,.6);
}
.pw-nav a.active svg { opacity: 1; color: var(--color-accent-primary); }

.pw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pw-topbar {
  height: 60px; display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-8);
  position: sticky; top: 0; z-index: 10;
  /* Vereinte Chrome: dasselbe Material wie die Sidebar → Sidebar + Topbar lesen als EIN
     durchgehender L-Rahmen um die Arbeitsfläche. Hairline-Unterkante schließt den Rahmen. */
  background: var(--sidebar-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}
/* Naht-Pendant zu .pw-sidebar::after (Fix #8): Fade läuft von der L-Ecke
   (links, opak) nach rechts (transparent) statt einer flachen Linie. */
.pw-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--border-subtle) 0%, transparent 65%);
  pointer-events: none;
}
.pw-search {
  flex: 1 1 auto; max-width: 420px; display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-bg-surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--fs-sm);
  /* Fix #1: einheitliche Topbar-Kontrollhöhe statt implizit ~36px durch Padding. */
  height: var(--topbar-control-h); padding: 0 12px;
}
.pw-search { cursor: pointer; text-align: left; font-family: inherit; }
.pw-search:hover { border-color: var(--border-strong); color: var(--color-text-secondary); }
.pw-kbd { margin-left: auto; font-size: 11px; color: var(--color-text-muted); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 1px 6px; }
.cmdk-foot .pw-kbd, .cmdk-input .pw-kbd { margin-left: 0; }
/* Schwebendes Inhalts-Canvas: eigenständige, weich gerundete Sheet-Fläche auf
   stiller Chrome. Bewahrt bewusst width:100% + max-width + align-self:center,
   damit Grids darin mehrspaltig füllen. Die obere-linke Ecke ist rund
   (die „innere" Content-Ecke am Übergang Sidebar/Topbar). */
/* Background-forward: der Content ist KEIN opakes Pane mehr, sondern sitzt transparent
   auf der Aurora/dem (später wählbaren) Eigenbild. Nur die Instrumente (Karten, Chips …)
   sind Glas. Grid-Füllung bleibt via width:100% + max-width + align-self:center. */
.pw-content {
  position: relative;
  padding: var(--space-8) var(--space-8) var(--space-10);
  width: 100%; max-width: 1560px; align-self: center;
  min-height: calc(100vh - 60px);
  animation: pw-enter var(--motion-slow) var(--ease-emphasized);
}

@keyframes pw-enter { from { opacity: 0; transform: translateY(10px) scale(.994); } to { opacity: 1; transform: none; } }

/* Ultrawide: Content mittig statt linksbündig. Greift erst >1440 — bis 1440 unverändert. */

/* ---------- Cards & metrics ---------- */
.pw-card {
  background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-6); transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast);
}
.pw-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }

.pw-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 var(--space-8); }
.pw-metric {
  background: linear-gradient(160deg, var(--color-bg-surface-2), var(--color-bg-surface-1));
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card);
  transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast);
}
.pw-metric:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.pw-metric .metric { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pw-metric .label { color: var(--color-text-muted); font-size: 13px; margin-top: var(--space-2); }
.pw-metric.accent .metric { color: var(--color-accent-primary); }
.pw-metric.cyan .metric { color: var(--color-accent-cyan); }
.pw-metric.warn .metric { color: var(--color-warning); }
/* Graphic-Device statt Topline: Icon-Chip (.pw-metric-icon) links über der Zahl, dieselbe
   Sprache wie die COI-Gauge (getönte Fläche + Akzentfarbe je Variante). Rein additiv —
   Instanzen ohne Icon (Dashboard/LitterHub/DogCloudImport) rendern unverändert, da das
   Chip-Markup dort schlicht fehlt. Ersetzt die vorherige dünne 2px-Akzent-Topline. */
.pw-metric-icon {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  margin-bottom: var(--space-3); background: var(--color-bg-surface-3); color: var(--color-text-secondary);
}
.pw-metric-icon svg { width: 17px; height: 17px; }
.pw-metric.accent .pw-metric-icon { background: color-mix(in srgb, var(--color-accent-primary) 16%, transparent); color: var(--color-accent-primary); }
.pw-metric.cyan .pw-metric-icon { background: color-mix(in srgb, var(--color-accent-cyan) 16%, transparent); color: var(--color-accent-cyan); }
/* Fix #9a: bewusst --color-warning (Semantik „ausstehend"), NICHT --color-warm —
   letzteres ist reserviert für „Aufmerksamkeit/überfällig" (s. Token-Kommentar oben). */
.pw-metric.warn .pw-metric-icon { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }

/* ---------- Buttons ---------- */
.pw-btn, button:not(.e-control):not(.pw-nav a):not(.pw-search):not(.pw-lang-btn):not(.pw-back):not(.pw-pin):not(.pw-icon-btn) {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-sm); padding: 9px 16px; border: 1px solid var(--border-strong);
  background: var(--color-bg-surface-3); color: var(--color-text-primary);
  transition: transform var(--motion-fast) var(--ease-standard), background var(--motion-fast), box-shadow var(--motion-fast);
}
.pw-btn:hover, button:not(.e-control):not(.pw-nav a):not(.pw-search):not(.pw-lang-btn):not(.pw-back):not(.pw-pin):not(.pw-icon-btn):hover { background: var(--color-bg-surface-2); transform: translateY(-1px); }
.pw-btn:active, button:not(.e-control):not(.pw-nav a):not(.pw-search):not(.pw-lang-btn):not(.pw-back):not(.pw-pin):not(.pw-icon-btn):active { transform: translateY(0); }
.pw-btn--primary, button.primary {
  background: linear-gradient(135deg, var(--color-accent-surface), var(--color-accent-secondary-surface)) !important;
  border-color: transparent !important; color: #fff !important; box-shadow: var(--glow-accent);
}
.pw-btn--primary:hover, button.primary:hover { background: linear-gradient(135deg, var(--color-accent-surface-hover), var(--color-accent-secondary-surface-hover)); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---------- Forms ---------- */
input, select, textarea {
  font-family: inherit; font-size: 14px; color: var(--color-text-primary);
  background: var(--color-bg-surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 9px 12px; outline: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
input::placeholder { color: var(--color-text-disabled); }
input:focus, select:focus, textarea:focus { border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px rgba(128,108,255,.22); }
select option { background: var(--color-bg-surface-2); color: var(--color-text-primary); }

/* Select: eigener Chevron statt OS-Chrome, damit Dropdowns wie Text-Inputs/Pills wirken (rein additiv). */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23aeb8c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23445267' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select:disabled { cursor: not-allowed; opacity: .6; background-image: none; padding-right: 12px; }
select[multiple] { appearance: auto; -webkit-appearance: listbox; background-image: none; padding-right: 12px; }

.toolbar, .form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.form { padding: var(--space-5); background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.error { color: var(--color-danger); font-size: 13px; }

/* ---------- Table ---------- */
.table, .pw-table { width: 100%; border-collapse: collapse; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.table th, .pw-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.table td, .pw-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--color-text-secondary); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-bg-surface-2); }

/* ---------- Lists / reminders ---------- */
ul { padding-left: 0; list-style: none; }
.pw-card ul li, .pw-list li { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); color: var(--color-text-secondary); }
.pw-card ul li:last-child { border-bottom: none; }

/* ---------- Status chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); }
.chip.ok { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); }
.chip.warn { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, transparent); }
.chip.danger { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, transparent); }

/* ---------- Syncfusion grid → Pawline dark integration (§6.1 #11) ---------- */
.e-grid, .e-grid .e-gridheader, .e-grid .e-gridcontent, .e-grid .e-table { background: transparent !important; border-color: var(--border-subtle) !important; color: var(--color-text-secondary) !important; }
.e-grid { border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg) !important; overflow: hidden; }
.e-grid .e-headercell, .e-grid .e-columnheader { background: var(--color-bg-surface-2) !important; }
.e-grid .e-headercelldiv { color: var(--color-text-muted) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .04em; }
.e-grid .e-row { background: var(--color-bg-surface-1) !important; }
.e-grid .e-rowcell { color: var(--color-text-secondary) !important; border-color: var(--border-subtle) !important; }
.e-grid .e-row:hover .e-rowcell { background: var(--color-bg-surface-2) !important; }
.e-grid .e-gridpager, .e-pager { background: var(--color-bg-surface-1) !important; border-color: var(--border-subtle) !important; color: var(--color-text-muted) !important; }
.e-pager .e-numericitem { color: var(--color-text-secondary) !important; background: transparent !important; }
.e-pager .e-currentitem { background: var(--color-accent-surface) !important; color: #fff !important; border-radius: 8px; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-bg-surface-3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #26313f; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Motion-Schicht (§10.7) — gestaffelte Reveals, Toasts,
   Micro-Interactions, Übergänge.
   ============================================================ */

/* Einblenden per reiner CSS-Animation (zuverlässig, unabhängig von JS). */
.pw-reveal { animation: pw-rise var(--motion-slow) var(--ease-emphasized) both; }
@keyframes pw-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.pw-metrics .pw-reveal:nth-child(2) { animation-delay: 70ms; }
.pw-metrics .pw-reveal:nth-child(3) { animation-delay: 140ms; }

/* Karten-Sheen beim Hover. */
.pw-metric, .pw-card { position: relative; overflow: hidden; }
.pw-metric::after, .pw-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.05) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform var(--motion-slow) var(--ease-standard);
}
.pw-metric:hover::after, .pw-card:hover::after { transform: translateX(120%); }
.pw-metric:hover { box-shadow: var(--shadow-card), 0 0 0 1px rgba(128,108,255,.18), 0 10px 30px rgba(128,108,255,.10); }

/* Brand-Mark: sehr dezenter Glow-Puls. */
.pw-brand-mark { animation: pw-brand 5s ease-in-out infinite; }
@keyframes pw-brand {
  0%,100% { box-shadow: 0 0 0 1px rgba(128,108,255,.35), 0 8px 24px rgba(128,108,255,.20); }
  50% { box-shadow: 0 0 0 1px rgba(67,217,255,.40), 0 10px 30px rgba(67,217,255,.28); }
}

/* Nav-Icon Micro-Interaction. */
.pw-nav a svg { transition: transform var(--motion-fast) var(--ease-emphasized), opacity var(--motion-fast); }
.pw-nav a:hover svg { transform: translateX(1px) scale(1.08); }

/* Button-Press + Primär-Glow. */
.pw-btn:active, button:not(.e-control):not(.pw-nav a):not(.pw-search):not(.pw-lang-btn):not(.pw-back):not(.pw-pin):not(.pw-icon-btn):active { transform: scale(.97); }
.pw-btn--primary:hover, button.primary:hover { box-shadow: 0 0 0 1px rgba(128,108,255,.5), 0 10px 34px rgba(128,108,255,.4); }

/* Formular gleitet ein. */
.form { animation: pw-expand var(--motion-normal) var(--ease-standard); transform-origin: top center; }
@keyframes pw-expand { from { opacity: 0; transform: translateY(-8px) scaleY(.96); } to { opacity: 1; transform: none; } }

/* Skeleton-Shimmer. */
.pw-skel { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-bg-surface-2) 25%, var(--color-bg-surface-3) 37%, var(--color-bg-surface-2) 63%); background-size: 400% 100%; animation: pw-shimmer 1.3s ease-in-out infinite; height: 16px; }
.pw-skel.tile { height: 96px; border-radius: var(--radius-lg); }
@keyframes pw-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Toasts. */
.pw-toast-host { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.pw-toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-bg-elevated); backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-overlay); color: var(--color-text-primary);
  padding: 12px 16px; font-size: 14px; font-weight: 500; min-width: 220px;
  transform: translateX(120%); opacity: 0; transition: transform var(--motion-normal) var(--ease-emphasized), opacity var(--motion-normal);
}
.pw-toast.show { transform: none; opacity: 1; }
.pw-toast.out { transform: translateX(120%); opacity: 0; }
.pw-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 10px var(--color-success); }
.pw-toast.info .pw-toast-dot { background: var(--color-info); box-shadow: 0 0 10px var(--color-info); }
.pw-toast.warn .pw-toast-dot { background: var(--color-warning); box-shadow: 0 0 10px var(--color-warning); }

/* ============================================================
   Stammbaum-Canvas (§9.3) — bildbasiert, zoom-/pan-bar.
   ============================================================ */
.ped-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.ped-viewport {
  position: relative; height: 620px; width: 100%; max-width: 100%;
  overflow: hidden; contain: layout paint; cursor: grab;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  background:
    radial-gradient(1000px 500px at 20% -10%, rgba(128,108,255,.08), transparent 60%),
    var(--color-bg-surface-1);
  box-shadow: var(--shadow-card) inset;
}
.ped-viewport.grabbing { cursor: grabbing; }
.ped-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.ped-links { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.ped-link {
  fill: none; stroke: rgba(229, 185, 118, 0.45); stroke-width: 2.2;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  filter: drop-shadow(0 0 8px rgba(229, 185, 118, 0.3));
  animation: ped-draw 700ms var(--ease-standard) forwards;
}
@keyframes ped-draw { to { stroke-dashoffset: 0; } }

.ped-node {
  position: absolute; width: 194px; height: 76px; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 18px;
  background: rgba(20, 26, 38, 0.88); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform var(--motion-fast) var(--ease-emphasized), box-shadow var(--motion-fast), border-color var(--motion-fast);
  cursor: pointer;
}
.ped-node:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(229, 185, 118, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(229, 185, 118, 0.5), 0 0 24px rgba(229, 185, 118, 0.25);
  z-index: 5;
}
.ped-node.male { border-left: 3px solid #E5B976; }
.ped-node.female { border-left: 3px solid #2E9C89; }
.ped-node.stub { opacity: .6; border-style: dashed; }
.ped-node.common { border-color: #64DFDF; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px #64DFDF, 0 0 24px rgba(100, 223, 223, 0.35); }
.ped-avatar {
  width: 50px; height: 50px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center; color: #E5B976; font-weight: 700; font-size: 18px;
  font-family: var(--font-display);
  background: radial-gradient(circle at center, rgba(229, 185, 118, 0.2) 0%, rgba(10, 14, 22, 0.9) 80%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); position: relative; overflow: hidden;
}
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); position: relative; overflow: hidden;
}
.ped-avatar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.18), transparent 55%); }
.ped-avatar.has-photo { background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.ped-avatar.has-photo::after { display: none; }
.ped-sex { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: #fff; border: 2px solid var(--color-bg-surface-2); }
.ped-sex.m { background: var(--color-info); }
.ped-sex.f { background: var(--color-danger); }
.ped-meta { min-width: 0; }
.ped-name { font-size: var(--fs-sm); font-weight: 650; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-sub { font-size: var(--fs-2xs); color: var(--color-text-muted); }

/* Stammbaum bearbeiten — Drag-to-reparent */
.ped-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.ped-toolbar > * { flex: 0 1 auto; min-width: 0; }
.ped-toolbar select { max-width: 100%; }
.ped-editbtn { font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--color-bg-surface-1); color: var(--color-text-primary); cursor: pointer; transition: all var(--motion-fast); }
.ped-editbtn.on { background: var(--color-accent-surface); border-color: var(--color-accent-surface); color: #fff; }
.ped-hint { font-size: 12.5px; color: var(--color-text-muted); }
.ped-palette { display: flex; gap: 8px; overflow-x: auto; padding: 10px; margin-bottom: 12px; border-radius: 14px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); scrollbar-width: thin; }
.ped-chip { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--color-bg-surface-2); border: 1px solid var(--border-subtle); cursor: grab; transition: transform var(--motion-fast), box-shadow var(--motion-fast); }
.ped-chip:active { cursor: grabbing; }
.ped-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.ped-chip.f { border-color: rgba(255,95,162,.4); }
.ped-chip.m { border-color: rgba(43,184,255,.4); }
.ped-chip-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; overflow: hidden; flex: 0 0 auto; }
.ped-chip-name { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }
.ped-node.droptarget { border-style: dashed; opacity: .9; cursor: copy; }
.ped-node.droptarget.over { border-style: solid; border-color: var(--color-accent-primary); background: rgba(128,108,255,.16); transform: scale(1.04); box-shadow: var(--glow-accent); z-index: 6; }
.ped-avatar.drop { color: #fff; font-size: 20px; }
.ped-avatar.drop.m { background: linear-gradient(135deg, #2bb8ff, #1f7fd0); }
.ped-avatar.drop.f { background: linear-gradient(135deg, #ff5fa2, #d63f80); }
.ped-clear { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(255,80,110,.9); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.ped-viewport.editing { cursor: default; }
.ped-empty-hint { display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin-bottom: 14px; border-radius: 16px; cursor: pointer; background: linear-gradient(135deg, rgba(128,108,255,.16), rgba(43,184,255,.10)); border: 1px solid var(--border-subtle); transition: border-color var(--motion-fast), transform var(--motion-fast); }
.ped-empty-hint:hover { border-color: var(--color-accent-primary); transform: translateY(-2px); }
.peh-icon { font-size: 34px; flex: 0 0 auto; }
.peh-title { font-weight: 700; color: var(--color-text-primary); font-size: 15px; }
.peh-sub { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.ped-gen-label { position: absolute; top: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-disabled); }

.ped-zoombtn { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .pw-reveal { opacity: 1 !important; }
  .ped-link { stroke-dashoffset: 0 !important; }
  /* Almanach-Ring: Segmente fertig gezeichnet, Zeiger sofort am korrekten Heute-Winkel
     (nicht bei 0°/Jan eingefroren), Soon-Puls + Zeiger-Punkt-Puls explizit aus. */
  .almanac-ring-seg { stroke-dashoffset: 0 !important; }
  .almanac-ring-today, .almanac-ring-today-dot { animation: none !important; transform: none !important; }
  .almanac-ring-event.soon { animation: none !important; }
  .almanac-ring-num { opacity: 1 !important; }
  /* Titelbild-Redesign: kein Ken-Burns-Drift, kein Strip-Sweep, keine Pulse. */
  .cover-photo, .horizont-strip, .horizont-seam, .meute-soon,
  .horizont-pin.soon .horizont-pin-dot { animation: none !important; }
  .horizont-strip { clip-path: none !important; }
}

/* ============================================================
   Command Palette (Ctrl+K) — Glas, Feder-Einblendung.
   ============================================================ */
.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 900; display: flex; justify-content: center; align-items: flex-start;
  padding-top: 14vh; background: rgba(6, 9, 14, 0.55); backdrop-filter: blur(6px);
  animation: pw-fade var(--motion-fast) var(--ease-standard);
}
@keyframes pw-fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk {
  width: min(600px, 92vw); background: var(--color-bg-elevated); backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay), 0 0 0 1px rgba(128,108,255,.10);
  overflow: hidden; animation: cmdk-in var(--motion-normal) var(--ease-emphasized);
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); color: var(--color-text-muted); }
.cmdk-input input { flex: 1; background: transparent; border: none; outline: none; box-shadow: none; padding: 0; font-size: 16px; color: var(--color-text-primary); }
.cmdk-input input::placeholder { color: var(--color-text-disabled); }
.cmdk-results { max-height: 44vh; overflow-y: auto; padding: 8px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.cmdk-item.active { background: linear-gradient(90deg, rgba(128,108,255,.20), rgba(128,108,255,.06)); }
.cmdk-ico { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: var(--color-bg-surface-3); color: var(--color-text-secondary); font-size: 15px; }
.cmdk-ico.dog { background: linear-gradient(135deg, var(--color-accent-surface), var(--color-accent-cyan-surface)); color: #fff; }
.cmdk-ico.action { background: rgba(85,214,155,.16); color: var(--color-success); }
.cmdk-label { flex: 1; font-weight: 550; color: var(--color-text-primary); }
.cmdk-hint { font-size: 12px; color: var(--color-text-muted); }
.cmdk-empty { padding: 24px; text-align: center; color: var(--color-text-muted); }
.cmdk-foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--color-text-muted); }

/* Stammbaum: Ahnenlinien-Trace beim Hover. */
.ped-world.tracing .ped-node { opacity: .28; transition: opacity var(--motion-fast); }
.ped-world.tracing .ped-node.trace-on { opacity: 1; }
.ped-world.tracing .ped-node.trace-on { border-color: var(--color-accent-primary); box-shadow: var(--shadow-card), var(--glow-accent); }
.ped-link { transition: stroke var(--motion-fast), opacity var(--motion-fast); }
.ped-world.tracing .ped-link { opacity: .18; }
.ped-world.tracing .ped-link.trace-on { opacity: 1; stroke: var(--color-accent-primary); stroke-width: 2.4; }

/* Sanfte Hintergrund-Drift im Stammbaum. */
.ped-viewport::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  background: radial-gradient(600px 400px at 30% 20%, rgba(128,108,255,.10), transparent 60%),
              radial-gradient(500px 400px at 80% 80%, rgba(67,217,255,.08), transparent 60%);
  animation: ped-drift 18s ease-in-out infinite alternate;
}
@keyframes ped-drift { from { transform: translate(0,0); } to { transform: translate(3%, 2%); } }

/* ============================================================
   Cinematic Hundeprofil + Lebens-Timeline (§10.6).
   ============================================================ */
.dog-hero { position: relative; border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-6); box-shadow: var(--shadow-card); animation: pw-enter var(--motion-slow) var(--ease-standard); }
.dog-hero-bg { position: absolute; inset: 0; }
.dog-hero-bg {
  background:
    radial-gradient(760px 420px at 10% -10%, hsl(var(--hero) 72% 56% / .55), transparent 62%),
    radial-gradient(640px 460px at 92% 110%, hsl(calc(var(--hero) + 46) 72% 50% / .42), transparent 60%),
    var(--hero-base);
}
.dog-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, var(--hero-scrim)); }
.dog-hero-inner { position: relative; display: flex; align-items: center; gap: var(--space-6); padding: var(--space-8); min-height: 250px; }
.dog-portrait {
  width: 128px; height: 128px; border-radius: 30px; flex: 0 0 auto; position: relative;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 44px;
  box-shadow: 0 22px 55px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 6px rgba(255,255,255,.06);
}
.dog-portrait::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,.22), transparent 55%); }
/* Graphic-Device statt reines Gravatar-Monogramm: einfarbige Pfoten-Silhouette bei
   niedriger Opazität hinter den Initialen (nur Fallback ohne Foto). Beide Elemente sind
   positioniert (die Initialen absichtlich `position:relative` statt inline) — dadurch
   zählt für die Stapelreihenfolge die DOM-Reihenfolge: Silhouette steht im Markup zuerst
   und liegt daher automatisch hinter den danach kommenden Initialen. Kein z-index nötig. */
.dog-portrait-mark { position: absolute; inset: 0; margin: auto; width: 60%; height: 60%; opacity: .10; pointer-events: none; }
.dog-portrait-initials { position: relative; }
.dog-portrait-sex { position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: #fff; border: 3px solid var(--color-bg-canvas); z-index: 1; }
.dog-portrait-sex.m { background: var(--color-info); } .dog-portrait-sex.f { background: var(--color-danger); }
.dog-hero-kennel { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: rgba(255,255,255,.72); margin-bottom: 8px; }
.dog-hero-name { font-size: 38px; line-height: 1.05; margin: 0 0 14px; color: #fff; letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.dog-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dog-hero-chips .chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.20); color: #fff; backdrop-filter: blur(6px); }
.dog-hero-actions { margin-left: auto; display: flex; flex-direction: column; gap: 10px; align-self: flex-start; }

.pw-metrics .pw-reveal:nth-child(4) { animation-delay: 210ms; }

.timeline { position: relative; padding: 8px 0 8px 4px; }
.timeline::before { content: ""; position: absolute; left: 23px; top: 10px; bottom: 14px; width: 2px; background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-cyan) 40%, transparent); opacity: .35; }
.tl-item { position: relative; display: flex; gap: 18px; padding-bottom: 22px; }
.tl-dot { position: relative; z-index: 1; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--color-bg-surface-3); border: 1px solid var(--border-strong); box-shadow: var(--shadow-card); }
.tl-dot.birth { background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-cyan)); box-shadow: var(--glow-accent); }
/* Fix #7: reine Icon-Einfärbung auf flachem grauem Grund war zu kontrastarm
   (dünnes Stroke-Icon). Getönter Hintergrund je Semantik (Muster wie
   .pw-sync.ok) + passender Rand macht die Dots auf einen Blick lesbar. */
.tl-dot.vacc { color: var(--color-info); background: color-mix(in srgb, var(--color-info) 14%, transparent); border-color: color-mix(in srgb, var(--color-info) 32%, transparent); }
.tl-dot.meas { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 14%, transparent); border-color: color-mix(in srgb, var(--color-success) 32%, transparent); }
.tl-dot.exam { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, transparent); border-color: color-mix(in srgb, var(--color-warning) 32%, transparent); }
.tl-card { flex: 1; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-left-width: 3px; border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-card); transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast); }
/* Akzentrand in derselben Semantikfarbe wie der zugehörige .tl-dot — Timeline
   wird per Randfarbe scanbar. .tl-dot und .tl-card sind direkte Geschwister
   (DogTimeline.razor), daher rein per CSS-Sibling-Selektor lösbar. */
.tl-dot.vacc + .tl-card { border-left-color: color-mix(in srgb, var(--color-info) 55%, var(--border-subtle)); }
.tl-dot.meas + .tl-card { border-left-color: color-mix(in srgb, var(--color-success) 55%, var(--border-subtle)); }
.tl-dot.exam + .tl-card { border-left-color: color-mix(in srgb, var(--color-warning) 55%, var(--border-subtle)); }
/* Dringlichkeit übersteuert Kategorie: ein überfälliger Eintrag wird per Dot UND
   Karten-Rand rot, nicht nur per Badge — beim Scannen sofort sichtbar. Nach den
   Kategorie-Regeln platziert → gewinnt bei gleicher Spezifität. */
.tl-dot.overdue { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 15%, transparent); border-color: color-mix(in srgb, var(--color-danger) 34%, transparent); }
.tl-dot.overdue + .tl-card, .tl-card.overdue { border-left-color: color-mix(in srgb, var(--color-danger) 60%, var(--border-subtle)); }
.tl-card:hover { transform: translateX(4px); border-color: var(--border-strong); }
.tl-date { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.tl-title { font-weight: 600; color: var(--color-text-primary); margin-top: 2px; }
.tl-detail { font-size: 13px; color: var(--color-text-secondary); margin-top: 3px; }
.timeline .tl-item:nth-child(2){animation-delay:70ms}
.timeline .tl-item:nth-child(3){animation-delay:130ms}
.timeline .tl-item:nth-child(4){animation-delay:190ms}
.timeline .tl-item:nth-child(5){animation-delay:250ms}
.timeline .tl-item:nth-child(6){animation-delay:310ms}
.timeline .tl-item:nth-child(7){animation-delay:370ms}

/* ============================================================
   Verpaarungs-Studio — COI-Gauge + Vererbungsbalken (§9.4/§31).
   ============================================================ */
.mate-pick { display: flex; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.mate-slot { display: flex; flex-direction: column; gap: 6px; }
.mate-slot select { min-width: 220px; }
.mate-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.mate-slot.female .mate-label { color: var(--color-danger); }
.mate-slot.male .mate-label { color: var(--color-info); }
.mate-x { font-size: 26px; color: var(--color-text-muted); padding-bottom: 6px; }

.mate-grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .mate-grid { grid-template-columns: 1fr; } }

.gauge-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.gauge-wrap { width: 240px; }
.gauge { width: 100%; height: auto; overflow: visible; }
.gauge-track { fill: none; stroke: var(--color-bg-surface-3); stroke-width: 14; stroke-linecap: round; }
.gauge-val { fill: none; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 950ms var(--ease-emphasized), stroke 300ms; filter: drop-shadow(0 0 8px currentColor); }
.gauge-val.ok { stroke: var(--color-success); } .gauge-val.info { stroke: var(--color-accent-cyan); }
.gauge-val.warn { stroke: var(--color-warning); } .gauge-val.danger { stroke: var(--color-danger); }
.gauge-num { text-anchor: middle; font-size: 36px; font-weight: 800; fill: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.gauge-cap { text-anchor: middle; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; fill: var(--color-text-muted); }
.gauge-meta { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.gauge-sub { font-size: 13px; color: var(--color-text-muted); }
.gauge-sub strong { color: var(--color-text-secondary); }
.chip.info { color: var(--color-accent-cyan); background: color-mix(in srgb, var(--color-accent-cyan) 12%, transparent); }

.gene-block { margin-bottom: var(--space-5); }
.gene-head { font-weight: 650; margin-bottom: 8px; }
.gene-bar { display: flex; height: 20px; border-radius: 999px; overflow: hidden; background: var(--color-bg-surface-3); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.gene-seg { height: 100%; transition: width 800ms var(--ease-emphasized); }
.gene-seg.ok { background: linear-gradient(180deg, var(--color-success), #3fb884); }
.gene-seg.warn { background: linear-gradient(180deg, var(--color-warning), #e0a23f); }
.gene-seg.danger { background: linear-gradient(180deg, var(--color-danger), #e04a63); }
.gene-seg.info { background: var(--color-accent-cyan); }
.gene-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gene-key { font-size: 12px; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.gene-key::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.gene-key.ok::before { background: var(--color-success); } .gene-key.warn::before { background: var(--color-warning); }
.gene-key.danger::before { background: var(--color-danger); } .gene-key.info::before { background: var(--color-accent-cyan); }

/* ============================================================
   Geburtsmodus — immersiver Night-Screen (§34).
   ============================================================ */
.night-root {
  min-height: 100vh; color: #e9e2d6; background:
    radial-gradient(1000px 700px at 50% 120%, rgba(255,150,80,.06), transparent 60%),
    #05070b;
  display: flex; flex-direction: column; padding: 22px clamp(20px, 5vw, 64px) 48px;
  font-variant-numeric: tabular-nums; user-select: none;
}
.night-bar { display: flex; align-items: center; justify-content: space-between; }
.night-title { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .04em; color: rgba(233,226,214,.75); }
.night-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff9b52; box-shadow: 0 0 14px #ff9b52; animation: night-pulse 2s ease-in-out infinite; }
.night-litter { color: rgba(233,226,214,.5); }
.night-exit { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(233,226,214,.8); border-radius: 12px; padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
.night-exit:hover { background: rgba(255,255,255,.10); }

.night-start { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.night-start h1 { color: #f3ede2; font-size: 34px; }
.night-start p { color: rgba(233,226,214,.55); max-width: 440px; }
.night-cta, .night-add {
  cursor: pointer; border: none; border-radius: 18px; font-weight: 700; color: #1a1206;
  background: linear-gradient(135deg, #ffb765, #ff9436); box-shadow: 0 14px 40px rgba(255,148,54,.35);
  transition: transform var(--motion-fast) var(--ease-emphasized), box-shadow var(--motion-fast);
}
.night-cta { font-size: 20px; padding: 18px 36px; margin-top: 12px; }
.night-cta:hover, .night-add:hover { transform: translateY(-2px); }
.night-continue { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; width: min(440px, 90%); }
.night-continue-label { color: rgba(233,226,214,.5); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.night-continue-btn { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: rgba(233,226,214,.06); border: 1px solid rgba(233,226,214,.14); color: #f3ede2; font-size: 16px; font-weight: 600; cursor: pointer; transition: background var(--motion-fast); }
.night-continue-btn:hover { background: rgba(233,226,214,.12); }
.night-continue-meta { color: rgba(233,226,214,.5); font-size: 13px; font-weight: 500; }
.night-undo { margin-top: 14px; align-self: center; background: transparent; border: 1px solid rgba(233,226,214,.2); color: rgba(233,226,214,.7); padding: 10px 20px; border-radius: 12px; font-size: 15px; cursor: pointer; }
.night-undo:hover { background: rgba(233,226,214,.08); color: #f3ede2; }

.night-main { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; padding-top: 12px; }
.night-timerwrap { text-align: center; }
.night-timer { font-size: clamp(64px, 13vw, 132px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #ffd9a8; text-shadow: 0 0 50px rgba(255,180,100,.25); transition: color .4s; }
.night-timer.warn { color: #ff6b6b; text-shadow: 0 0 60px rgba(255,80,80,.5); animation: night-alarm 1.1s ease-in-out infinite; }
.night-timerlabel { margin-top: 10px; color: rgba(233,226,214,.5); font-size: 15px; letter-spacing: .04em; }

.night-stats { display: flex; gap: 40px; }
.night-stat { text-align: center; }
.night-stat .n { font-size: 40px; font-weight: 800; color: #f3ede2; }
.night-stat .l { color: rgba(233,226,214,.5); font-size: 13px; }
.night-stat.male .n { color: #7ec8ff; } .night-stat.female .n { color: #ff9ec4; }

.night-entry { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; justify-content: center; }
.night-weight { display: flex; flex-direction: column; gap: 6px; }
.night-weight label { font-size: 12px; color: rgba(233,226,214,.5); text-transform: uppercase; letter-spacing: .05em; }
.night-weight input { width: 150px; font-size: 20px; padding: 14px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; color: #f3ede2; text-align: center; }
.night-add { font-size: 20px; padding: 16px 30px; min-width: 170px; }
.night-add.female { background: linear-gradient(135deg, #ff9ec4, #ff6fa8); box-shadow: 0 14px 40px rgba(255,111,168,.30); color: #2a0e1c; }
.night-add.male { background: linear-gradient(135deg, #8fd0ff, #58a7ff); box-shadow: 0 14px 40px rgba(88,167,255,.30); color: #06253f; }

.night-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; width: 100%; max-width: 900px; }
.night-pup { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 12px 16px; }
.night-pup-no { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #06121f; }
.night-pup-no.male { background: linear-gradient(135deg, #8fd0ff, #58a7ff); } .night-pup-no.female { background: linear-gradient(135deg, #ff9ec4, #ff6fa8); }
.night-pup-sex { font-weight: 650; color: #f3ede2; }
.night-pup-meta { font-size: 13px; color: rgba(233,226,214,.55); }

@keyframes night-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes night-alarm { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Foto-Upload auf dem Porträt. */
.dog-portrait-upload { position: absolute; left: -8px; top: -8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.6); border: 2px solid var(--color-bg-canvas); display: grid; place-items: center; cursor: pointer; color: #fff; opacity: .0; transition: opacity var(--motion-fast), transform var(--motion-fast); z-index: 2; }
.dog-portrait:hover .dog-portrait-upload { opacity: 1; }
.dog-portrait-upload:hover { transform: scale(1.08); background: var(--color-accent-primary); }
.dog-portrait-upload input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }

/* ============================================================
   Dog-zentrische IA — Meute, Hub, Galerie, lebendiger BG.
   ============================================================ */
body::after {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(560px 560px at 18% 28%, rgba(128,108,255,.12), transparent 60%),
              radial-gradient(520px 520px at 82% 62%, rgba(67,217,255,.09), transparent 60%),
              radial-gradient(480px 480px at 60% 100%, rgba(255,120,180,.06), transparent 60%);
  animation: bg-drift 26s ease-in-out infinite alternate;
}
@keyframes bg-drift { from { transform: translate(0,0) rotate(0deg); } to { transform: translate(-4%, 3%) rotate(2deg); } }

.pw-nav-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; padding: 6px 0 2px; margin-top: 6px; border-top: 1px solid var(--border-subtle); }
.pw-nav-foot a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 6px 17px; border-radius: var(--radius-sm);
  color: var(--color-text-secondary); font-weight: 500; font-size: var(--fs-base);
  position: relative; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.pw-nav-foot a svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; opacity: .85; flex: 0 0 auto; }
.pw-nav-foot a:hover { background: var(--color-bg-surface-2); color: var(--color-text-primary); }
.pw-nav-foot a.active { color: var(--color-text-primary); background: var(--color-bg-surface-2); }
.pw-nav-foot a span { white-space: nowrap; }

/* Meute-Galerie - TopTier Cinematic Showcase */
.meute-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-6); gap: var(--space-4); flex-wrap: wrap; }
.meute-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.meute-card {
  position: relative; display: block; border-radius: 26px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--color-bg-surface-1);
  transition: transform var(--motion-normal) var(--ease-emphasized), box-shadow var(--motion-normal), border-color var(--motion-normal), opacity var(--motion-normal), filter var(--motion-normal);
}
.meute-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(229, 185, 118, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border-color: rgba(229, 185, 118, 0.4);
}
.meute-card::before {
  content: ""; position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none;
  transition: opacity var(--motion-normal) var(--ease-standard);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
    rgba(229, 185, 118, 0.22), transparent 70%);
  mix-blend-mode: screen;
}
.meute-card:hover::before { opacity: 1; }
.meute-grid:has(.meute-card:hover) .meute-card:not(:hover) { transform: scale(.98); opacity: .72; filter: saturate(.85); }
.meute-cover { position: relative; aspect-ratio: 3 / 4; background-size: cover; background-position: center; display: flex; align-items: flex-end; transition: transform var(--motion-slow) var(--ease-standard); }
.meute-card:hover .meute-cover { transform: scale(1.05); }
.meute-initials {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 48px; font-weight: 700;
  font-family: var(--font-display);
  color: #E5B976; text-shadow: 0 4px 20px rgba(0,0,0,0.6);
  background: radial-gradient(circle at center, rgba(229, 185, 118, 0.15) 0%, rgba(6, 8, 12, 0.85) 75%);
}
.meute-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(6, 7, 10, 0.92) 90%); }
.meute-sex {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700;
  backdrop-filter: blur(10px); z-index: 5;
}
.meute-sex.f { background: rgba(46, 156, 137, 0.35); border: 1px solid rgba(46, 156, 137, 0.6); color: #64DFDF; box-shadow: 0 4px 12px rgba(46, 156, 137, 0.3); }
.meute-sex.m { background: rgba(229, 185, 118, 0.35); border: 1px solid rgba(229, 185, 118, 0.6); color: #E5B976; box-shadow: 0 4px 12px rgba(229, 185, 118, 0.3); }
.meute-caption { position: relative; padding: 20px 18px; width: 100%; z-index: 5; }
.meute-name { font-size: 20px; font-weight: 700; color: #F7F5F0; letter-spacing: -0.015em; font-family: var(--font-display); text-shadow: 0 2px 8px rgba(0,0,0,0.7); }
.meute-sub { font-size: 13px; color: rgba(247, 245, 240, 0.72); margin-top: 2px; }

/* Hub-Hero mit Foto-Cover */
.hub-hero { position: relative; border-radius: 26px; overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-card); animation: pw-enter var(--motion-slow) var(--ease-standard); }
.hub-hero-cover { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(30px) brightness(.5) saturate(1.25); transform: scale(1.15); }
.hub-hero-scrim { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(9,12,18,.35), rgba(9,12,18,.85)); }
/* Mit echtem Foto: formatfüllend, weniger Blur, seitlicher Verlauf hält den Text links lesbar. */
.hub-hero.has-cover .hub-hero-cover { filter: blur(14px) brightness(.78) saturate(1.35); transform: scale(1.12); }
.hub-hero.has-cover .hub-hero-scrim { background: linear-gradient(100deg, rgba(9,12,18,.94) 0%, rgba(9,12,18,.74) 34%, rgba(9,12,18,.32) 68%, rgba(9,12,18,.12) 100%); }
.hub-hero-inner { position: relative; display: flex; align-items: center; gap: 28px; padding: 32px; min-height: 216px; }
.hub-hero-inner::after {
  content: ""; position: absolute; right: 4%; top: 50%; width: 240px; height: 240px; transform: translateY(-50%);
  pointer-events: none; opacity: .06; background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='28' cy='32' rx='11' ry='14'/%3E%3Cellipse cx='53' cy='23' rx='11' ry='15'/%3E%3Cellipse cx='76' cy='35' rx='10' ry='13'/%3E%3Cpath d='M52 47c16 0 27 12 27 25 0 11-9 16-20 14-6-1-8-2-14-2s-9 1-14 2c-11 2-20-3-20-14 0-13 11-25 27-25z'/%3E%3C/g%3E%3C/svg%3E"); }
.hub-back { position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #fff; border-radius: 12px; padding: 8px 14px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); }
.hub-back:hover { background: rgba(255,255,255,.16); }
/* Hundeprofil-Hero (.dog-hero-hub): das originale Pfoten-Wasserzeichen bleibt rechts im
   Balken (Deko, unabhängig vom Avatar-Foto) — es war zu Unrecht abgeschaltet worden. */
.dog-hero-hub .hub-hero-inner::after { display: block; }

/* Segment-Navigation im Hub */
.seg { display: flex; flex-wrap: wrap; gap: 4px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 4px; margin-bottom: 24px; max-width: 100%; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 0 0 auto; white-space: nowrap; }
.seg button { background: transparent; border: none; color: var(--color-text-secondary); font-weight: 600; font-size: var(--fs-sm); padding: 9px 14px; border-radius: 10px; cursor: pointer; transition: color var(--motion-fast), background var(--motion-fast); }
.seg button.on { background: linear-gradient(135deg, var(--color-accent-surface), var(--color-accent-secondary-surface)); color: #fff; box-shadow: var(--glow-accent); }
.seg button:hover:not(.on) { color: var(--color-text-primary); background: var(--color-bg-surface-2); }
/* Hundeprofil-Tabs: Underline-Rail statt gefüllter Pill-Tray (Fix „button soup" bei 12 Tabs).
   Scoped auf .dp-tabrail .seg, damit die globale .seg-Pilloptik (StudsPage/LitterHub/CalendarPage/
   ClubFinance) unangetastet bleibt — nur das Hundeprofil bekommt die neue Optik. Gruppen-Captions
   (.dp-tab-caption) stehen je Cluster als eigene 10px-Zeile darüber; echter Whitespace zwischen den
   Clustern (.dp-tabrail gap) ersetzt den früheren Inline-„|"-Trenner. */
.dp-tabrail { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 32px; row-gap: 14px; margin-bottom: 24px; }
.dp-tabcluster { display: flex; flex-direction: column; gap: 6px; }
.dp-tab-caption { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted); padding-left: 1px; }
.dp-tabrail .seg {
  display: flex; gap: 20px; background: none; border: none; border-radius: 0; padding: 0; margin-bottom: 0;
  max-width: none; overflow: visible; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.dp-tabrail .seg button {
  background: none !important; box-shadow: none !important; padding: 8px 1px !important; border-radius: 0 !important;
  color: var(--color-text-secondary) !important; border: none !important; border-bottom: 2px solid transparent !important;
  transition: color var(--motion-fast), border-color 180ms var(--ease-standard);
}
.dp-tabrail .seg button:hover:not(.on) { color: var(--color-text-primary) !important; background: none !important; }
.dp-tabrail .seg button.on { color: var(--color-text-primary) !important; border-bottom-color: var(--accent-anchor) !important; }
/* Bearbeiten: Aktion, kein Sektions-Tab — rechtsbündig abgesetzt, kein Underline-Treatment.
   !important gegen die globale button:not(...)-Reset-Regel nötig (gleiches Muster wie
   .club-sections button / button.primary weiter unten in dieser Datei). */
.dp-tab-edit {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; align-self: flex-end;
  font-size: var(--fs-sm) !important; font-weight: 600; color: var(--color-text-secondary) !important;
  background: none !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-sm) !important;
  padding: 7px 14px !important; cursor: pointer; transition: all var(--motion-fast) var(--ease-standard);
}
.dp-tab-edit:hover { color: var(--color-text-primary) !important; border-color: var(--border-strong) !important; background: var(--color-bg-surface-2) !important; }
.dp-tab-edit.on { background: linear-gradient(135deg, var(--color-accent-surface), var(--color-accent-secondary-surface)) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--glow-accent); }
@media (max-width: 640px) { .dp-tabrail .seg { overflow-x: auto; -webkit-overflow-scrolling: touch; } }
.hub-body { animation: pw-section 380ms var(--ease-emphasized); }
@keyframes pw-section { from { opacity: 0; transform: translateY(12px) scale(.994); } to { opacity: 1; transform: none; } }

/* Vereins-Sektionen (ClubPage Ebene 1) — Tab-Leiste mit Unterstrich-Indikator statt gefüllter
   Pills: das ist die oberste Navigationsebene und muss sich klar von den tieferen `.seg-mini`-
   Sub-Tabs und dem `.acc-view-switch` der Buchhaltung abheben. Gleiche Scroll-statt-Umbruch-
   Mechanik wie `.seg`. */
.club-sections { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.club-sections::-webkit-scrollbar { display: none; }
.club-sections button { flex: 0 0 auto; white-space: nowrap; background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--color-text-secondary) !important; font-weight: 700 !important; font-size: 15px !important; padding: 11px 6px !important; margin-right: 24px; cursor: pointer; transition: color var(--motion-fast), border-color var(--motion-fast); }
.club-sections button:last-child { margin-right: 0; }
.club-sections button:hover:not(.on) { color: var(--color-text-primary); }
.club-sections button.on { color: var(--color-text-primary) !important; border-bottom-color: var(--color-accent-primary) !important; }

/* Galerie */
.gallery-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.gallery-add { cursor: pointer; position: relative; overflow: hidden; }
.gallery-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.gallery-item { aspect-ratio: 1; border-radius: 16px; background-size: cover; background-position: center; cursor: pointer; position: relative; border: 2px solid transparent; transition: transform var(--motion-fast), border-color var(--motion-fast); box-shadow: var(--shadow-card); }
.gallery-item:hover { transform: scale(1.03); border-color: var(--border-strong); }
.gallery-item.primary { border-color: var(--color-accent-primary); }
.gallery-badge { position: absolute; top: 8px; left: 8px; background: var(--color-accent-surface); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.gallery-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 220px; border: 2px dashed var(--border-strong); border-radius: 20px; color: var(--color-text-muted); cursor: pointer; position: relative; font-size: 15px; }
.gallery-drop div:first-child { font-size: 40px; }
.gallery-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.mate-fixed { min-width: 220px; padding: 10px 12px; background: var(--color-bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-weight: 600; }

/* Verpaarung — Eltern-Fotos + Ahnenvergleich */
.mate-avatar { width: 68px; height: 68px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.mate-avatar.f { outline: 2px solid rgba(255,95,162,.6); outline-offset: 2px; }
.mate-avatar.m { outline: 2px solid rgba(43,184,255,.6); outline-offset: 2px; }
.mate-avatar.empty { background: var(--color-bg-surface-2) !important; color: var(--color-text-muted); outline-color: var(--border-subtle); }
.ped-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1000px) { .ped-compare { grid-template-columns: 1fr; } }
.ped-compare-col { min-width: 0; }
.ped-compare-h { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding-left: 4px; border-left: 3px solid var(--border-subtle); }
.ped-compare-h.f { border-left-color: #ff5fa2; }
.ped-compare-h.m { border-left-color: #2bb8ff; }
.ped-compare .ped-viewport { height: 340px; }

/* Hund anlegen */
.create-wrap { max-width: 560px; margin: 12px auto; }
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fld > span { font-size: 13px; color: var(--color-text-muted); }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.create-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ============================================================
   Aurora-Hintergrund (lebendig) + Icon-Rail-Navigation.
   ============================================================ */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; mix-blend-mode: var(--aurora-blend); will-change: transform; }
.aurora .a1 { width: 540px; height: 540px; background: var(--aurora-a1); left: -8%; top: -12%; animation: au1 28s ease-in-out infinite alternate; }
.aurora .a2 { width: 500px; height: 500px; background: var(--aurora-a2); right: -6%; top: 6%; animation: au2 34s ease-in-out infinite alternate; }
.aurora .a3 { width: 600px; height: 600px; background: var(--aurora-a3); left: 28%; bottom: -22%; animation: au3 31s ease-in-out infinite alternate; }
.aurora .a4 { width: 420px; height: 420px; background: var(--aurora-a4); right: 18%; bottom: -14%; animation: au1 37s ease-in-out infinite alternate-reverse; }
.aurora span { opacity: var(--aurora-opacity); filter: blur(var(--aurora-blur)); }
.aurora::after { content: ""; position: absolute; inset: 0; background: var(--scrim-aurora); }
@keyframes au1 { from { transform: translate(0,0) scale(1); } to { transform: translate(130px, 90px) scale(1.22); } }
@keyframes au2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-110px, 130px) scale(1.16); } }
@keyframes au3 { from { transform: translate(0,0) scale(1); } to { transform: translate(90px, -110px) scale(1.26); } }
body::before, body::after { display: none; }

/* Icon-Rail: schmal, klappt bei Hover auf */
/* App-Shell: der Rahmen (Rail + Topbar) steht fest, NUR der Inhalt scrollt.
   Ganzseiten-Scroll (html/body) erzeugte in WebView2 Kompositor-Jank samt
   invertiertem Wheel-Delta über fixierten/sticky Ebenen (Aurora, Topbar).
   Ein einziger, klar definierter Scroll-Container (.pw-main) beseitigt das
   und macht sticky Topbar + reg-head bombenfest. */
.page { display: block; height: 100vh; overflow: hidden; }
.pw-sidebar {
  position: fixed; top: 0; left: 0; height: 100vh; width: 74px; z-index: 60; overflow: hidden;
  background: var(--sidebar-bg); backdrop-filter: blur(18px); border-right: 1px solid var(--border-subtle);
  transition: width var(--motion-normal) var(--ease-emphasized), box-shadow var(--motion-normal);
}
.pw-sidebar:hover { width: 250px; box-shadow: var(--shadow-overlay); }
.pw-brand { padding: 16px 18px 14px 8px; }
.pw-brand-name, .pw-nav a span, .pw-nav-group span, .pw-nav-group .pw-chevron, .pw-nav-foot a span { opacity: 0; white-space: nowrap; transition: opacity var(--motion-fast); }
.pw-sidebar:hover .pw-brand-name, .pw-sidebar:hover .pw-nav a span, .pw-sidebar:hover .pw-nav-group span, .pw-sidebar:hover .pw-nav-group .pw-chevron, .pw-sidebar:hover .pw-nav-foot a span,
body.nav-pinned .pw-brand-name, body.nav-pinned .pw-nav a span, body.nav-pinned .pw-nav-group span, body.nav-pinned .pw-nav-group .pw-chevron, body.nav-pinned .pw-nav-foot a span { opacity: 1; }
.pw-nav a { padding: 6px 17px; }

/* --- Pin-Button: hält die Rail beschriftet offen --- */
.pw-pin { margin-left: auto; flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: none; color: var(--color-text-muted); cursor: pointer; border-radius: 8px; opacity: 0; transition: opacity var(--motion-fast), color var(--motion-fast), background var(--motion-fast); }
.pw-pin svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pw-sidebar:hover .pw-pin, body.nav-pinned .pw-pin { opacity: 1; }
.pw-pin:hover { color: var(--color-accent-primary); background: var(--color-bg-surface-2); }
body.nav-pinned .pw-pin { color: var(--color-accent-primary); }

/* --- „Mehr"-Gruppe (Button wie Nav-Eintrag) + Untergruppe --- */
.pw-nav-group { display: flex; align-items: center; width: 100%; padding: 6px 17px; background: transparent; border: none; cursor: pointer; color: var(--color-text-secondary); font: inherit; font-size: var(--fs-base); font-weight: 500; border-radius: var(--radius-sm); transition: color var(--motion-fast), background var(--motion-fast); }
.pw-nav-group > svg:first-child { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.pw-nav-group span { margin-left: var(--space-3); text-align: left; flex: 1 1 auto; }
.pw-nav-group .pw-chevron { width: 15px; height: 15px; flex: 0 0 15px; stroke: currentColor; fill: none; stroke-width: 2; transition: opacity var(--motion-fast), transform var(--motion-normal) var(--ease-emphasized); }
.pw-nav-group.open .pw-chevron { transform: rotate(180deg); }
.pw-nav-group:hover { color: var(--color-text-primary); background: var(--color-bg-surface-2); }
.pw-nav-sub { display: none; flex-direction: column; gap: 1px; }
.pw-nav-sub.open { display: flex; }
.pw-sidebar:hover .pw-nav-sub a, body.nav-pinned .pw-nav-sub a { padding-left: 30px; }

/* --- Nav-Gruppen-Header (WP-A1): beschriftete Sektionen statt „Mehr"-Blackbox --- */
.pw-nav-sect {
  padding: 13px 17px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  user-select: none;
  opacity: 0;
  transition: opacity var(--motion-fast);
}
.pw-sidebar:hover .pw-nav-sect, body.nav-pinned .pw-nav-sect { opacity: 1; }

/* --- Angeheftet: Rail bleibt breit + beschriftet, Inhalt rückt nach --- */
body.nav-pinned .pw-sidebar { width: 250px; box-shadow: var(--shadow-overlay); }
body.nav-pinned .pw-main { margin-left: 250px; }
.pw-bn-more { background: transparent; border: none; font: inherit; cursor: pointer; }

/* --- Breadcrumb (Topbar): gegangener Pfad, klickbar, Zustand-erhaltend --- */
.pw-crumbs { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.pw-back {
  /* Runder, randloser Ghost-Button statt kastiger Box — ruhig im Default, Kreis-Halo beim Hover. */
  flex: 0 0 auto; width: var(--topbar-control-h); height: var(--topbar-control-h); display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%; margin-left: -4px;
  color: var(--color-text-muted); cursor: pointer;
  transition: color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.pw-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pw-back:hover:not(:disabled) { color: var(--color-text-primary); background: var(--color-bg-surface-2); transform: translateX(-2px); }
.pw-back:active:not(:disabled) { background: var(--color-bg-surface-3); }
/* nicht verfügbar = ganz weg (kein toter, ausgegrauter Kasten) */
.pw-back:disabled { display: none; }
.pw-crumb-trail { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pw-crumb-trail::-webkit-scrollbar { display: none; }
/* Fix #2: .pw-crumb rendert (für alle Nicht-letzten Krümel) als <button> — die
   globale Reset-Regel „.pw-btn, button:not(...)" (s.o.) hat höhere Spezifität
   und malt background/padding/border über jeden Krümel (graue Pills). Out-
   spezifiziert per !important; darüber hinaus reine Text-Navigation ohne
   Button-Chrome: kein Hintergrund, Hover = Unterstrich statt Fläche.
   Höhe zugleich auf die gemeinsame Topbar-Kontrollhöhe (Fix #1) gebracht. */
.pw-crumb {
  background: transparent !important; border: none !important; padding: 2px 2px !important;
  flex: 0 0 auto; display: inline-flex; align-items: center; height: var(--topbar-control-h); box-sizing: border-box; line-height: 1;
  cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--color-text-secondary); white-space: nowrap; letter-spacing: -0.01em;
  text-decoration: none; text-underline-offset: 3px; text-decoration-color: transparent;
  transition: color var(--motion-fast), text-decoration-color var(--motion-fast);
}
.pw-crumb:hover { color: var(--color-text-primary); text-decoration-color: color-mix(in srgb, var(--color-text-primary) 45%, transparent); }
.pw-crumb.cur { color: var(--color-text-primary); font-weight: 650; cursor: default; }
.pw-crumb.cur:hover { text-decoration-color: transparent; }
.pw-crumb-sep { width: 13px; height: 13px; flex: 0 0 13px; stroke: var(--color-text-muted); fill: none; stroke-width: 2; opacity: .35; }
@media (max-width: 640px) {
  .pw-crumb-trail .pw-crumb:not(.cur), .pw-crumb-sep { display: none; }
  .pw-crumb.cur { padding-left: 2px; }
}

/* --- Tier-Gate: Sperr-Hinweis für nicht freigeschaltete Funktionen (§6a) --- */
.tier-lock { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px dashed var(--border-strong); background: var(--color-bg-surface-2); color: var(--color-text-secondary); }
.tier-lock.compact { padding: 10px 14px; gap: 10px; }
.tier-lock-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--color-bg-surface-3); color: var(--color-accent-primary); }
.tier-lock.compact .tier-lock-icon { width: 30px; height: 30px; border-radius: 9px; }
.tier-lock-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tier-lock-body { flex: 1 1 auto; min-width: 0; }
.tier-lock-title { font-weight: 700; color: var(--color-text-primary); }
.tier-lock-sub { font-size: var(--fs-sm); color: var(--color-text-muted); }
.tier-lock-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); padding: 8px 14px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--color-accent-surface), var(--color-accent-secondary-surface)); text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--motion-fast), box-shadow var(--motion-fast); }
.tier-lock-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-overlay); }
.tier-badge { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.22); }

/* --- Sync-Indikator (Topbar) --- */
/* Fix #1: einheitliche Topbar-Kontrollhöhe (statt 32px). */
.pw-sync { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: var(--topbar-control-h); padding: 0 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; text-decoration: none; border: 1px solid var(--border-subtle); }
.pw-sync svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pw-sync.ok { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.pw-sync.off { color: var(--color-text-muted); background: var(--color-bg-surface-2); cursor: pointer; transition: color var(--motion-fast), border-color var(--motion-fast); }
.pw-sync.off:hover { color: var(--color-accent-primary); border-color: var(--color-accent-primary); }
@media (max-width: 720px) { .pw-sync span { display: none; } .pw-sync { padding: 0 9px; } }

/* Fix #1: Topbar-Kontext-Switch (Züchter/Verein, <ContextSwitch/>) nutzt vermutlich
   .seg-mini — dieselbe Klasse wie die /club-Sub-Tabs. Bewusst NICHT global geändert;
   nur innerhalb der Topbar auf die gemeinsame Kontrollhöhe gebracht. */
.pw-topbar .seg-mini { height: var(--topbar-control-h); box-sizing: border-box; margin-bottom: 0; }

/* --- Dev-Tier-Umschalter (Einstellungen) --- */
.dev-tier-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.dev-tier-label { flex: 0 0 70px; font-weight: 600; color: var(--color-text-secondary); font-size: var(--fs-sm); }

/* --- Onboarding (Erststart) --- */
.onboard-card { max-width: 460px; text-align: left; }
.onboard-roles { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.onboard-role { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md); border: 1.5px solid var(--border-subtle); background: var(--color-bg-surface-2); cursor: pointer; text-align: left; transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast); }
.onboard-role:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.onboard-role.sel { border-color: var(--color-accent-primary); background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-surface-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary) 18%, transparent); }
.onboard-role .or-ico { font-size: 26px; flex: 0 0 auto; line-height: 1; }
.onboard-role .or-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onboard-role .or-txt strong { color: var(--color-text-primary); font-size: var(--fs-base); }
.onboard-role .or-txt small { color: var(--color-text-muted); font-size: var(--fs-sm); }
.onboard-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.onboard-input { width: 100%; padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--color-bg-surface-1); color: var(--color-text-primary); font: inherit; }
.onboard-input:focus { outline: none; border-color: var(--color-accent-primary); }
.onboard-hint { font-size: var(--fs-sm); color: var(--color-text-muted); margin: -4px 0 12px; }
.onboard-card .primary { width: 100%; }

/* --- Vorgangs-Checkliste (§5.2) --- */
.case-checklist { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 8px; }
.case-check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); cursor: pointer; }
.case-check input { width: 17px; height: 17px; accent-color: var(--color-accent-primary); flex: 0 0 auto; }
.case-check span.done { color: var(--color-text-muted); text-decoration: line-through; }
.pw-btn.warn { color: var(--color-warning, #d08700); border-color: color-mix(in srgb, var(--color-warning, #d08700) 42%, transparent); }

/* --- Formular-Kontingente (§5.3) --- */
.pkg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.pkg-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-bg-surface-2); border: 1px solid var(--border-subtle); }
.pkg-info { flex: 1 1 auto; min-width: 0; }
.pkg-title { font-weight: 600; color: var(--color-text-primary); }
.pkg-bar { display: flex; gap: 3px; flex: 0 0 auto; flex-wrap: wrap; max-width: 180px; }
.pkg-dot { width: 12px; height: 12px; border-radius: 3px; }
.pkg-dot.avail { background: var(--color-accent-primary); }
.pkg-dot.used { background: var(--color-bg-surface-3); border: 1px solid var(--border-subtle); }

/* --- Vereins-Ämter & Rechte (§4) --- */
.chip.office { background: color-mix(in srgb, var(--color-accent-primary) 16%, transparent); color: var(--color-accent-primary); border: 1px solid color-mix(in srgb, var(--color-accent-primary) 30%, transparent); display: inline-flex; align-items: center; gap: 4px; }
.chip-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; opacity: .7; }
.chip-x:hover { opacity: 1; }
.office-panel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.office-current { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.office-assign { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.office-assign select { padding: 7px 10px; padding-right: 30px; border-radius: var(--radius-sm); background-color: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); color: var(--color-text-primary); }
.office-perms { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.office-perms-h { color: var(--color-text-muted); font-weight: 600; }
.pw-nav a.active::before { left: 3px; }
/* Inset des schwebenden Panes: Rail-Abstand (74px) + gleichmäßiger Gap rechts/unten/links.
   Topbar und Pane teilen sich dieselben Content-Kanten = ruhiger, ausgerichteter Rahmen. */
.pw-main { margin-left: 74px; height: 100vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: smooth; }
.pw-topbar { padding-left: var(--space-6); }

/* Innere runde Ecke: der konkave Übergang in der Kehle des L-Rahmens
   (rechts der Rail, unter der Topbar). Ein glasfarbenes Quadrat mit
   herausgebissenem Viertelkreis lässt die obere-linke Kante der Arbeitsfläche
   weich einrunden — der „Screen im Bezel"-Look, den der Header NICHT haben soll. */
.pw-topbar { position: sticky; }
.pw-topbar::after {
  content: ""; position: absolute; left: 0; top: 100%;
  width: 18px; height: 18px; z-index: 11; pointer-events: none;
  /* Chromfüllung in der Kehle + gebogene Haarlinie, die Topbar-Unterkante und
     Rail-Rechtskante nahtlos verbindet. Innerhalb 16.5px = Inhalt (transparent). */
  background: radial-gradient(circle at 100% 100%,
    transparent 0 16.5px,
    var(--border-subtle) 16.5px 17.6px,
    var(--sidebar-glass) 17.6px);
}

/* Hub: Gesundheit + Dokumente */
.hub-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .hub-cols { grid-template-columns: 1fr; } }
.status-list { display: flex; flex-direction: column; gap: 10px; }
.status-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.status-row:last-child { border-bottom: none; }
.status-name { flex: 1; font-weight: 600; color: var(--color-text-primary); }
.status-due { font-size: 13px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.doc-list { display: flex; flex-direction: column; gap: 10px; }
.doc-row { display: flex; align-items: center; gap: 14px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px 16px; box-shadow: var(--shadow-card); }
.doc-ico { width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--color-accent-surface), var(--color-accent-cyan-surface)); }
.doc-info { flex: 1; min-width: 0; }
.doc-title { font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: 12px; color: var(--color-text-muted); }
.doc-open { font-weight: 600; font-size: 13px; }
.doc-row .doc-info { flex: 1; min-width: 0; }
.doc-upload { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

/* Finanzen + Segment-Toggle im Hub */
.seg-mini { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); margin-bottom: 16px; }
.seg-mini button { border: none; background: transparent; color: var(--color-text-muted); font-weight: 600; font-size: 13px; padding: 7px 16px; border-radius: 9px; cursor: pointer; transition: all var(--motion-fast) var(--ease-standard); }
.seg-mini button.on { background: var(--color-accent-surface) !important; border-color: var(--color-accent-surface) !important; color: #fff !important; box-shadow: var(--glow-accent); }

/* Buchhaltung Alltag/Experte (ClubAccounting Ebene 3/4) — leichter View-Switcher: eine Zeile,
   ghost-Buttons mit dezentem Neutral-Hover/Aktiv statt Akzent-Pill, Gruppen durch Trenner statt
   zwei geboxte Reihen getrennt. Bewusst schwächer als `.club-sections`/`.seg`/`.seg-mini`, damit
   klar bleibt: das schaltet nur die Ansicht innerhalb der Buchhaltung. */
.acc-view-switch { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.acc-view-switch::-webkit-scrollbar { display: none; }
.acc-view-switch .acc-view-label { flex: 0 0 auto; white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-right: 2px; }
.acc-view-switch .acc-view-sep { flex: 0 0 auto; width: 1px; height: 18px; background: var(--border-subtle); margin: 0 8px; }
.acc-view-switch button { flex: 0 0 auto; white-space: nowrap; background: transparent !important; border: none !important; color: var(--color-text-secondary) !important; font-weight: 600 !important; font-size: 12.5px !important; padding: 5px 9px !important; border-radius: 7px !important; cursor: pointer; transition: color var(--motion-fast), background var(--motion-fast); }
.acc-view-switch button:hover:not(.on) { color: var(--color-text-primary); background: var(--color-bg-surface-2); }
.acc-view-switch button.on { color: var(--color-text-primary) !important; background: var(--color-bg-surface-2) !important; font-weight: 700 !important; }
/* Mitglieder-Toolbar: Export-Gruppe als sekundäre, entschärfte Klammer (scoped, keine Nebenwirkung auf andere .ghost/.pw-btn). */
.pw-toolbar-export { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 8px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-bg-surface-2) 60%, transparent); }
.pw-toolbar-export-label { font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.pw-toolbar-export .pw-btn { padding: 5px 10px; font-size: 12px; background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.pw-toolbar-export .pw-btn:hover { background: var(--color-bg-surface-2); border-color: var(--border-subtle); }
/* Vorgangs-Karte, die auf eine Aktion wartet (Entwurf/Nachforderung): Warn-Akzentrand, gleiches Muster wie .risk-item.warn. */
.case-card.case-attn { border-left: 3px solid var(--color-warning, #d08700); }

.fin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fin-kpi { text-align: center; padding: 14px 8px; border-radius: 14px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); }
.fin-kpi .label { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.fin-num { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.fin-num.income, .fin-amt.income { color: #35e0a0; }
.fin-num.expense, .fin-amt.expense { color: #ff6d84; }
.fin-row { display: flex; align-items: center; gap: 12px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 11px 15px; box-shadow: var(--shadow-card); }
.fin-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fin-dot.income { background: #35e0a0; box-shadow: 0 0 10px rgba(53,224,160,.6); }
.fin-dot.expense { background: #ff6d84; box-shadow: 0 0 10px rgba(255,109,132,.6); }
.fin-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Ausstellungen — Titel-Fortschritt + Ergebniszeilen */
.title-bar { height: 12px; border-radius: 999px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); overflow: hidden; }
.title-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-cyan)); transition: width 900ms var(--ease-emphasized); box-shadow: 0 0 14px rgba(128,108,255,.5); }
.show-row { display: flex; align-items: center; gap: 12px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 11px 15px; box-shadow: var(--shadow-card); }
.show-rate { flex: 0 0 auto; font-weight: 800; }
.show-pts { font-weight: 800; color: var(--color-accent-cyan); white-space: nowrap; }

/* Termine — Agenda-Zeilen mit Datumskachel */
.agenda-row { display: flex; align-items: center; gap: 14px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 14px; box-shadow: var(--shadow-card); }
.agenda-row.past { opacity: .72; }
.agenda-date { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; line-height: 1; background: linear-gradient(160deg, rgba(128,108,255,.22), rgba(43,184,255,.12)); border: 1px solid var(--border-subtle); }
.agenda-date.soon { background: linear-gradient(160deg, rgba(255,193,92,.28), rgba(255,140,60,.12)); }
.agenda-date.past { background: linear-gradient(160deg, rgba(255,109,132,.28), rgba(255,60,90,.12)); }
.ad-day { font-size: 18px; font-weight: 800; color: var(--color-text-primary); }
.ad-mon { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }

/* Verträge — Live-Vorschau */
.contract-preview { margin: 0; padding: 16px; border-radius: 12px; background: var(--contract-bg); border: 1px solid var(--border-subtle); font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-word; max-height: 520px; overflow: auto; }

/* Interessenten — Warteliste-Zeilen */
.prospect-row { display: flex; align-items: center; gap: 12px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 14px; box-shadow: var(--shadow-card); }
.prospect-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--color-accent-surface), var(--color-accent-pink-surface, #b23568)); }
.prospect-stars { color: #ffc15c; font-size: 12px; letter-spacing: 1px; margin-left: 4px; }
.prospect-adv { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border-subtle); background: var(--color-bg-surface-2, rgba(255,255,255,.04)); color: var(--color-text-primary); font-size: 16px; cursor: pointer; transition: all var(--motion-fast) var(--ease-standard); }
.prospect-adv:hover { background: var(--color-accent-primary); border-color: var(--color-accent-primary); transform: translateX(2px); }

/* Würfe — Galerie-Karten */
.litter-create { margin-bottom: 22px; }
.litter-glyph { font-size: 66px; }
.litter-status { position: absolute; top: 14px; left: 14px; z-index: 3; }
.litter-count { position: absolute; top: 12px; right: 14px; z-index: 3; text-align: right; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.litter-count .lc-total { display: block; font-size: 26px; font-weight: 800; line-height: 1; }
.litter-count .lc-split { font-size: 12px; opacity: .9; }
.litter-count .lc-split .m { color: #8fd0ff; }
.litter-count .lc-split .f { color: #ffb0d4; }

/* Wurf-Hub — Hero-Badge */
.litter-hero .hub-hero-inner { align-items: center; }
.litter-badge { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 24px; display: grid; place-items: center; font-size: 46px; font-weight: 800; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); box-shadow: var(--shadow-card); }
.litter-parents { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.litter-parents .lp { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.litter-parents .lp-av { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.litter-parents .lp-av.f { outline: 2px solid rgba(255,95,162,.7); outline-offset: 1px; }
.litter-parents .lp-av.m { outline: 2px solid rgba(43,184,255,.7); outline-offset: 1px; }
.litter-parents .lp-x { color: rgba(255,255,255,.7); font-size: 18px; }

/* Welpen-Grid */
.puppy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.puppy-card { position: relative; padding: 16px; border-radius: 18px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); overflow: hidden; }
.puppy-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; }
.puppy-card.f::before { background: linear-gradient(180deg, #ff5fa2, #ff8ec2); }
.puppy-card.m::before { background: linear-gradient(180deg, #2bb8ff, #6fd0ff); }
.puppy-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.puppy-no { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--color-bg-surface-2, rgba(255,255,255,.05)); color: var(--color-text-primary); }
.puppy-sex { font-size: 20px; }
.puppy-card.f .puppy-sex { color: #ff8ec2; }
.puppy-card.m .puppy-sex { color: #6fd0ff; }
.puppy-name { font-weight: 700; font-size: 16px; color: var(--color-text-primary); }
.puppy-meta { font-size: 12px; color: var(--color-text-muted); margin: 2px 0 12px; }
.puppy-actions { display: flex; align-items: center; gap: 8px; }
.puppy-res { flex: 1; font-size: 12px; padding: 6px 8px; }
.puppy-promote { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--border-subtle); background: transparent; color: var(--color-text-primary); cursor: pointer; transition: all var(--motion-fast) var(--ease-standard); }
.puppy-promote:hover { background: var(--color-accent-primary); border-color: var(--color-accent-primary); }
.puppy-actions a.chip { text-decoration: none; }

/* Welpen-Foto in der Karte */
.puppy-photo { position: relative; height: 120px; border-radius: 12px; margin: -4px -4px 12px; background-size: cover; background-position: center; background-color: var(--color-bg-surface-2); display: grid; place-items: center; overflow: hidden; }
.puppy-photo-ph { font-size: 40px; opacity: .5; }
.puppy-photo-upload { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(9,12,18,.7); color: #fff; cursor: pointer; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); }
.puppy-photo-upload input { display: none; }

/* Zuordnung — Drag & Drop */
.assign-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .assign-grid { grid-template-columns: 1fr; } }
.assign-pool { display: flex; flex-direction: column; gap: 10px; }
.assign-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); cursor: grab; transition: transform var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast); }
.assign-chip:active { cursor: grabbing; }
.assign-chip.dragging { opacity: .5; transform: scale(.97); }
.assign-chip .assign-grip { margin-left: auto; color: var(--color-text-muted); font-size: 18px; }
.assign-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.assign-drop { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--color-bg-surface-1); border: 2px dashed var(--border-subtle); transition: all var(--motion-fast) var(--ease-emphasized); }
.assign-drop.f { border-left: 4px solid #ff5fa2; }
.assign-drop.m { border-left: 4px solid #2bb8ff; }
.assign-drop.over { border-color: var(--color-accent-primary); border-style: solid; background: rgba(128,108,255,.12); transform: scale(1.02); box-shadow: var(--glow-accent); }
.assign-drop.taken { border-style: solid; border-color: rgba(53,224,160,.5); }
.assign-drop-photo { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 12px; background-size: cover; background-position: center; background-color: var(--color-bg-surface-2); display: grid; place-items: center; font-size: 22px; }
.assign-drop-info { min-width: 0; }
.assign-drop-name { font-weight: 700; font-size: 14px; color: var(--color-text-primary); }
.assign-drop-hint { font-size: 12px; color: var(--color-text-muted); }
.assign-drop-to { font-size: 13px; color: var(--color-text-secondary); margin-top: 3px; }

/* Onboarding-Leerzustand */
.onboard-card { text-align: center; padding: 40px 32px; border-radius: 22px; background: linear-gradient(160deg, rgba(128,108,255,.14), rgba(43,184,255,.08)); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); }
.onboard-icon { font-size: 46px; margin-bottom: 10px; }
.onboard-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; max-width: 900px; margin: 0 auto; }
.onboard-step { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 14px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); cursor: pointer; transition: transform var(--motion-fast) var(--ease-emphasized), border-color var(--motion-fast), box-shadow var(--motion-fast); }
.onboard-step:hover { transform: translateY(-3px); border-color: var(--color-accent-primary); box-shadow: var(--glow-accent); }
.onboard-step.ghost { background: transparent; }
.onboard-step .os-ico { font-size: 24px; flex: 0 0 auto; }
.onboard-step strong { display: block; color: var(--color-text-primary); font-size: 14px; }
.onboard-step small { color: var(--color-text-muted); font-size: 12px; }

/* Trächtigkeit / geplanter Wurf */
.preg-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(255,95,162,.14), rgba(128,108,255,.12)); border-color: rgba(255,95,162,.3); }
.preg-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #ff9ec6; font-weight: 700; }
.preg-date { font-size: 16px; color: var(--color-text-primary); margin-top: 4px; }
.preg-count { font-size: 22px; font-weight: 800; color: #ff5fa2; margin-top: 6px; }
.preg-cta { margin: 0; }

/* Zuchtbuch / Registry — tabellarische Fremdhund-Liste */
.reg-search { flex: 1; min-width: 220px; padding: 10px 14px; border-radius: 12px; background: var(--color-bg-surface-2); border: 1px solid var(--border-subtle); color: var(--color-text-primary); }
.reg-table { display: flex; flex-direction: column; gap: 6px; }
.reg-row { display: grid; grid-template-columns: 40px 1.5fr 1.1fr 1fr 0.9fr 0.6fr 1fr 0.9fr 1.2fr; gap: 12px; align-items: center; padding: 10px 16px; border-radius: 12px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); cursor: pointer; transition: border-color var(--motion-fast), transform var(--motion-fast); font-size: var(--fs-sm); }
.reg-photo { width: 36px; height: 36px; border-radius: 8px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--color-bg-surface-2); display: inline-grid; place-items: center; font-size: 15px; flex: 0 0 auto; overflow: hidden; }
.reg-row.reg-head .reg-photo, .reg-row.reg-head span:first-child { background: none; }
.reg-row:hover:not(.reg-head) { border-color: var(--color-accent-primary); transform: translateX(2px); }
.reg-row.reg-head { position: sticky; top: 62px; z-index: 3; background: var(--color-bg-canvas); border: none; box-shadow: none; cursor: default; color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 8px; padding-bottom: 8px; }
/* Dezentes Zebra für Scanbarkeit (nur Datenzeilen). */
.reg-row:not(.reg-head):nth-child(even) { background: var(--color-bg-surface-2); }
.reg-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-name { font-weight: 650; color: var(--color-text-primary); display: flex; align-items: center; gap: 8px; }
.reg-sex { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; color: #fff; flex: 0 0 auto; }
.reg-sex.f { background: var(--color-danger); }
.reg-sex.m { background: var(--color-info); }
.reg-mono { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
@media (max-width: 900px) { .reg-row { grid-template-columns: 40px 1.6fr 1fr; } .reg-row > *:nth-child(n+4) { display: none; } }

/* Import-Assistent */
.imp-steps { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.imp-step { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); color: var(--color-text-muted); font-size: 13.5px; font-weight: 600; }
.imp-step span { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--color-bg-surface-2); font-size: 12px; }
.imp-step.active { border-color: var(--color-accent-primary); color: var(--color-text-primary); }
.imp-step.active span { background: var(--color-accent-surface); color: #fff; }
.imp-step.done { color: var(--color-success); }
.imp-step.done span { background: var(--color-success); color: #fff; }
.imp-textarea { width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--color-bg-surface-2); border: 1px solid var(--border-subtle); color: var(--color-text-primary); font-family: var(--font-mono, monospace); font-size: 13px; resize: vertical; }
.imp-file { margin-bottom: 8px; color: var(--color-text-secondary); }
.imp-map { display: flex; flex-direction: column; gap: 8px; }
.imp-map-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: center; }
.imp-map-field { font-weight: 600; font-size: 14px; }
.imp-req { color: var(--color-danger); }
.imp-map-row select, .fld select { padding: 9px 12px; padding-right: 32px; border-radius: 10px; background-color: var(--color-bg-surface-2); border: 1px solid var(--border-subtle); color: var(--color-text-primary); }
.imp-hint { margin-top: 10px; font-size: 13px; color: var(--color-text-muted); }
.imp-hint.err { color: var(--color-danger); }
.imp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 8px; }
.imp-stat { padding: 14px 16px; border-radius: 14px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); text-align: center; }
.imp-stat b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
.imp-stat span { font-size: 12px; color: var(--color-text-muted); }
.imp-stat.ok b { color: var(--color-success); }
.imp-stat.warn b { color: var(--color-warning, #d08700); }
.imp-stat.err b { color: var(--color-danger); }
.imp-issues { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.imp-issue { display: flex; gap: 8px; padding: 7px 12px; border-radius: 8px; font-size: 13px; background: var(--color-bg-surface-2); }
.imp-issue.error { border-left: 3px solid var(--color-danger); }
.imp-issue.warning { border-left: 3px solid var(--color-warning, #d08700); }
.imp-issue.info { border-left: 3px solid var(--color-info); }

/* Verpaarungs-Risiko-Banner */
.risk-banner { border-radius: 16px; padding: 16px 18px; margin-bottom: 20px; border: 1px solid; background: var(--color-bg-surface-1); }
.risk-banner.danger { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, var(--color-bg-surface-1)); }
.risk-banner.warn { border-color: var(--color-warning, #d08700); background: color-mix(in srgb, var(--color-warning, #d08700) 8%, var(--color-bg-surface-1)); }
.risk-banner.info { border-color: var(--color-info); }
.risk-banner-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.risk-ico { font-size: 20px; }
.risk-item { padding: 10px 12px; border-radius: 10px; background: var(--color-bg-surface-2); margin-top: 8px; border-left: 3px solid var(--border-subtle); }
.risk-item.danger { border-left-color: var(--color-danger); }
.risk-item.warn { border-left-color: var(--color-warning, #d08700); }
.risk-item.info { border-left-color: var(--color-info); }
.risk-item-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.risk-item-detail { font-size: 13.5px; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.45; }
.risk-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); color: var(--color-text-muted); }

/* Gesundheits-Panel (Hundeprofil) */
.hpanel { display: flex; flex-direction: column; gap: 6px; }
.hpanel-row { display: grid; grid-template-columns: 1.6fr 0.7fr 0.9fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); font-size: 13.5px; }
.hpanel-name { font-weight: 600; }
.hpanel-name small { display: block; font-weight: 400; color: var(--color-text-muted); font-size: 11.5px; }
.hpanel-geno { font-variant-numeric: tabular-nums; font-weight: 600; }
.hpanel-badge { justify-self: start; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.hpanel-badge.ok { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }
.hpanel-badge.warn { background: color-mix(in srgb, var(--color-warning, #d08700) 20%, transparent); color: var(--color-warning, #d08700); }
.hpanel-badge.danger { background: color-mix(in srgb, var(--color-danger) 18%, transparent); color: var(--color-danger); }
.hpanel-badge.untested { background: var(--color-bg-surface-2); color: var(--color-text-muted); }
.hpanel-meta { font-size: 11.5px; color: var(--color-text-muted); text-align: right; }

/* Abrechnung */
.bill-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.bill-hero { text-align: center; padding: 24px 16px; }
.bill-hero-num { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.bill-hero-cap { margin-top: 8px; color: var(--color-text-muted); font-size: 13px; }
.bill-hero.accent { background: linear-gradient(150deg, color-mix(in srgb, var(--color-accent-primary) 16%, var(--color-bg-surface-1)), var(--color-bg-surface-1)); border-color: var(--color-accent-primary); }
.bill-hero.accent .bill-hero-num { color: var(--color-accent-primary); }
.bill-table { display: flex; flex-direction: column; gap: 4px; }
.bill-row { display: grid; grid-template-columns: 1.6fr 1fr 0.8fr 1fr 30px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); cursor: pointer; transition: border-color var(--motion-fast); font-size: 14px; }
.bill-row:hover:not(.bill-head) { border-color: var(--color-accent-primary); }
.bill-row.sel { border-color: var(--color-accent-primary); }
.bill-row.bill-head { background: transparent; border: none; cursor: default; color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
.bill-month { font-weight: 600; text-transform: capitalize; }
.bill-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.bill-caret { text-align: center; color: var(--color-text-muted); }
.bill-detail { padding: 4px 14px 10px 14px; }
.bill-line { display: grid; grid-template-columns: 1.6fr 1.4fr 0.8fr; gap: 12px; padding: 7px 10px; border-radius: 8px; background: var(--color-bg-surface-2); margin-top: 4px; font-size: 13px; }
.bill-line-name { font-weight: 600; }
.bill-line-days { color: var(--color-text-muted); }
.bill-line-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Hund-Titel-Zeile */
.dog-hero-titles { margin-top: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-accent-primary); letter-spacing: .01em; }
.chip.danger { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: var(--color-danger); }

/* Verein (Zwinger/Mitglieder) */
.fld-check { flex-direction: row; align-items: center; gap: 8px; }
.fld-check input { width: auto; }
.club-list { display: flex; flex-direction: column; gap: 8px; }
.club-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); }
.club-row.inactive { opacity: .6; }
.club-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.club-sub { font-size: 13px; color: var(--color-text-muted); margin-top: 3px; display: flex; gap: 4px; flex-wrap: wrap; }
.club-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.ghost.danger { color: var(--color-danger); }

/* Rassen-Auswahl (F6) */
.breed-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; max-height: 340px; overflow-y: auto; margin-top: 12px; padding: 2px; }
.breed-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--color-bg-surface-2); border: 1px solid transparent; cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast); }
.breed-row:hover { border-color: var(--border-subtle); }
.breed-row.on { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }
.breed-name { flex: 1; font-size: 13.5px; font-weight: 500; }
.breed-std { font-size: 11px; color: var(--color-text-muted); }

/* Vereins-Vorgänge (V6-C/E) */
.case-list { display: flex; flex-direction: column; gap: 12px; }
.case-card { padding: 16px 18px; }
.case-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.case-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.case-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.case-issue { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.case-timeline { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 10px; }
.case-ev { display: flex; gap: 10px; align-items: flex-start; }
.case-ev-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; background: var(--color-text-muted); }
.case-ev-dot.ok { background: var(--color-success, #10b981); }
.case-ev-dot.info { background: var(--color-info, #3b82f6); }
.case-ev-dot.warn { background: var(--color-warning, #f59e0b); }
.case-ev-msg { font-size: 13.5px; }
.case-ev-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 1px; }
.case-note-add { display: flex; gap: 8px; margin-top: 4px; }
.case-note-add input { flex: 1; }

/* Vereins-Mitteilungen (V6-F) */
.broadcast-row { align-items: flex-start; }
.broadcast-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 auto; background: var(--color-bg-surface-2); }
.broadcast-icon.ev { background: color-mix(in srgb, #3b82f6 18%, transparent); }
.broadcast-icon.rm { background: color-mix(in srgb, #f59e0b 20%, transparent); }
.broadcast-icon.doc { background: color-mix(in srgb, #8b5cf6 18%, transparent); }
.broadcast-body { font-size: 13.5px; color: var(--color-text-secondary); margin-top: 6px; white-space: pre-wrap; }

/* Verwandtschaft + Stammbaumanalyse */
.rel-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.rel-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--color-bg-surface-2); text-decoration: none; color: var(--color-text-primary); transition: background var(--motion-fast); }
.rel-row:hover { background: var(--color-bg-surface-3, var(--color-bg-surface-1)); }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: none; }
.avk-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; font-size: 13px; color: var(--color-text-secondary); align-items: center; }
.avk-pill { background: var(--color-bg-surface-2); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 4px 12px; }
.avk-pill strong { color: var(--color-accent-primary); }
.ped-pdf-bar { display: flex; gap: 14px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.ped-pdf-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-secondary); }
.ped-pdf-opt input[type=color] { width: 32px; height: 24px; padding: 0; border: 1px solid var(--border-subtle); border-radius: 6px; background: none; cursor: pointer; }
.ped-pdf-opt select { padding: 4px 8px; padding-right: 26px; background-position: right 8px center; }
.rel-sex { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; color: #fff; flex: 0 0 auto; }
.rel-sex.f { background: var(--color-danger); } .rel-sex.m { background: var(--color-info); }
.rel-name { font-weight: 600; flex: 1; }
.rel-rel { font-size: 12px; color: var(--color-text-muted); }
.anc-table { display: flex; flex-direction: column; gap: 4px; }
.anc-row { display: grid; grid-template-columns: 2fr 1fr 0.8fr 1fr; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 8px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); text-decoration: none; color: var(--color-text-primary); font-size: 13.5px; }
.anc-row:hover:not(.anc-head) { border-color: var(--color-accent-primary); }
.anc-row.anc-head { background: transparent; border: none; color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.anc-name { font-weight: 600; }
.anc-contrib { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Welpen-Wachstumschart (F15) */
.growth-chart { width: 100%; height: auto; max-height: 280px; }
.growth-chart .gc-axis { stroke: var(--border-subtle); stroke-width: 1; }
.growth-chart .gc-lbl { fill: var(--color-text-muted); font-size: 11px; }
.growth-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.growth-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-secondary); }
.growth-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.growth-chart .gc-axis-2 { stroke: var(--border-subtle); stroke-dasharray: 2 2; }
.growth-chart .gc-lbl-2 { fill: var(--color-text-muted); font-size: 11px; opacity: .85; }
.growth-toolbar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.growth-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.growth-swatch-dashed { width: 16px; height: 0; border-top: 2px dashed var(--color-text-secondary); border-radius: 0; background: none; }
.growth-key-overlay { color: var(--color-text-muted); }

/* Deckrüden-Börse */
.stud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.stud-card { display: flex; flex-direction: column; gap: 10px; }
.stud-head { display: flex; justify-content: space-between; align-items: center; }
.stud-name a { font-weight: 700; font-size: 16px; color: var(--color-text-primary); text-decoration: none; }
.stud-name a:hover { color: var(--color-accent-primary); }
.stud-meta { font-size: 13px; color: var(--color-text-secondary); display: flex; flex-direction: column; gap: 3px; }
.inq-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.inq-msg { margin-top: 6px; font-size: 13px; color: var(--color-text-secondary); background: var(--color-bg-surface-2); padding: 8px 10px; border-radius: 8px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: center; z-index: 200; padding: 20px; }
.modal-card { background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 24px; max-width: 540px; width: 100%; box-shadow: var(--shadow-elevated); }

/* Sprachumschalter */
.pw-lang { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 7px 5px; }
.pw-lang-btn { font-size: 11px; font-weight: 700; padding: 4px 6px; border-radius: 8px; background: var(--color-bg-surface-2); border: 1px solid var(--border-subtle); color: var(--color-text-muted); cursor: pointer; min-width: 0; text-align: center; }
.pw-lang-btn.on { background: var(--color-accent-surface); color: #fff; border-color: var(--color-accent-surface); }

/* Zuletzt bearbeitet */
.recent-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.recent-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-right: 4px; }
.recent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); font-size: 13px; font-weight: 600; color: var(--color-text-primary); text-decoration: none; transition: border-color var(--motion-fast); }
.recent-chip:hover { border-color: var(--color-accent-primary); }
.recent-sex { width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; color: #fff; }
.recent-sex.f { background: var(--color-danger); } .recent-sex.m { background: var(--color-info); }

/* Fortpflanzung (Läufigkeit/Progesteron) */
.repro-cycle { padding: 12px; border-radius: 12px; background: var(--color-bg-surface-2); margin-top: 10px; }
.repro-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.repro-readings { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.repro-pill { font-size: 12px; padding: 3px 9px; border-radius: 14px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; }
.repro-pill.hot { border-color: var(--color-success); color: var(--color-success); font-weight: 600; }
.repro-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.repro-add input { padding: 7px 10px; border-radius: 8px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); color: var(--color-text-primary); }

/* Wurfplanungs-Matrix */
.matrix-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 14px; }
.matrix-pick-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 8px; }
.matrix-chk { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.matrix-chk input { width: auto; }
.matrix-scroll { overflow-x: auto; }
.matrix-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.matrix-table th, .matrix-table td { border: 1px solid var(--border-subtle); padding: 8px 12px; text-align: center; }
.matrix-table thead th, .matrix-table tbody th { background: var(--color-bg-surface-2); font-weight: 600; text-align: left; }
.matrix-table td.ok { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); font-weight: 600; }
.matrix-table td.info { background: color-mix(in srgb, var(--color-info) 14%, transparent); }
.matrix-table td.warn { background: color-mix(in srgb, var(--color-warning, #d08700) 20%, transparent); color: var(--color-warning, #d08700); font-weight: 600; }
.matrix-table td.danger { background: color-mix(in srgb, var(--color-danger) 18%, transparent); color: var(--color-danger); font-weight: 700; }
.matrix-cell { position: relative; min-width: 108px; }
.mx-coi { font-weight: 700; font-size: 14px; }
.mx-sub { font-size: 10.5px; opacity: .8; font-weight: 500; margin-top: 1px; }
.mx-save { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; line-height: 1; border-radius: 6px; opacity: 0; transition: opacity var(--motion-fast); background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); cursor: pointer; }
.matrix-cell:hover .mx-save { opacity: 1; }

/* Lookup-Katalog löschen */
.lookup-del { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 11px; margin-left: 4px; padding: 0 2px; }
.lookup-del:hover { color: var(--color-danger); }

/* Welpen-Fotoverlauf (F15) */
.growth-photo-preview { max-height: 80px; border-radius: 8px; margin: 6px 0; display: block; }
.photo-track { margin-top: 12px; }
.photo-track-name { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.photo-track-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.photo-track-item { margin: 0; flex: 0 0 auto; text-align: center; }
.photo-track-item img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-subtle); }
.photo-track-item figcaption { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }

/* Kalender-Seite */
.cal-month { margin-bottom: 24px; }
.cal-month-head { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-weight: 700; margin-bottom: 10px; }
.cal-list { display: flex; flex-direction: column; gap: 6px; }
.cal-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); }
.cal-row.past { opacity: .55; }
.cal-date { display: flex; flex-direction: column; align-items: center; width: 44px; flex: 0 0 auto; }
.cal-day { font-size: 20px; font-weight: 700; line-height: 1; }
.cal-dow { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; }
.cal-body { flex: 1; }
.cal-title { font-weight: 600; }
.cal-meta { font-size: 13px; color: var(--color-text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.cal-meta a { color: var(--color-accent-primary); text-decoration: none; }
.cal-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text-secondary); }

/* ===== Mobile-Navigation (Drawer) ===== */
.pw-hamburger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); color: var(--color-text-primary); cursor: pointer; flex: 0 0 auto; margin-right: 10px; }
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; }

/* App-Sperre (5.2) */
.app-lock { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-bg-app) 82%, transparent); backdrop-filter: blur(14px); }
.app-lock-card { background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: 22px;
  box-shadow: var(--shadow-overlay); padding: 34px 30px; width: min(360px, 90vw); text-align: center; display: flex; flex-direction: column; gap: 12px; }
.app-lock-logo { width: 56px; height: 56px; margin: 0 auto 4px; background: #fff; border-radius: 15px; padding: 8px; box-shadow: var(--shadow-card); }
.app-lock-logo img { width: 100%; height: 100%; object-fit: contain; }
.app-lock-card h2 { margin: 0; }
.app-lock-pin { text-align: center; font-size: 22px; letter-spacing: 8px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--border-subtle); background: var(--color-bg-surface-2); color: var(--color-text-primary); }
.app-lock-pin.err { border-color: var(--color-danger); }
.app-lock-err { color: var(--color-danger); font-size: 13px; }

/* Native-Style Bottom-Navigation (5.2): nur auf schmalen Screens. */
.pw-bottomnav { display: none; }

@media (max-width: 720px) {
  .pw-hamburger { display: flex; }
  .pw-sidebar { width: 260px !important; transform: translateX(-100%); transition: transform var(--motion-normal) var(--ease-emphasized); box-shadow: var(--shadow-overlay); }
  .pw-sidebar:hover { width: 260px; }
  body.nav-open .pw-sidebar { transform: translateX(0); }
  body.nav-open .nav-backdrop { display: block; }
  /* Labels im Drawer immer sichtbar */
  .pw-sidebar .pw-brand-name, .pw-sidebar .pw-nav a span, .pw-sidebar .pw-nav-group span, .pw-sidebar .pw-nav-group .pw-chevron, .pw-sidebar .pw-nav-foot a span, .pw-sidebar .pw-nav-sect, .pw-sidebar .pw-lang { opacity: 1 !important; }
  .pw-main { margin-left: 0 !important; padding: 0 !important; }
  /* Schmal: Pane randlos = mehr Raum. Sheet-Chrome zurücknehmen. */
  .pw-content {
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + 68px);
    margin-top: 0; min-height: 0; border: none; border-radius: 0; background: transparent;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .pw-content::before { display: none; }
  .pw-topbar { padding-left: var(--space-4); }
  .meute-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .seg { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .pw-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--color-bg-surface-1); border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -4px 18px rgba(0,0,0,.10);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
  }
  .pw-bottomnav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex: 1 1 0; padding: 4px 2px; text-decoration: none; border-radius: 12px;
    color: var(--color-text-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .1px;
    transition: color var(--motion-fast), background var(--motion-fast);
  }
  .pw-bottomnav a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .pw-bottomnav a.active { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
  .pw-bottomnav a:active { transform: scale(.94); }
}

@media (max-width: 480px) {
  .pw-content { padding: 14px 12px; }
  .meute-grid { grid-template-columns: 1fr; }
  .fld-row { grid-template-columns: 1fr; }
}

/* Tier-4: Gruppierung + Wurfbuch */
.group-head { margin: 26px 0 10px; font-size: 18px; font-weight: 700; }
.group-select { padding: 8px 12px; padding-right: 32px; border-radius: 10px; background-color: var(--color-bg-surface-2); border: 1px solid var(--border-subtle); color: var(--color-text-primary); }

/* ============================================================
   Microanimations — „Wachsen & Verbinden" (additiv, reduced-motion-sicher)
   ============================================================ */

/* Stammbaum: generationsweise Knoten-Entfaltung.
   .ped-node trägt bereits .pw-reveal (pw-rise); wir staffeln nur pro Generation
   über die im Markup gesetzte Custom-Property --gen und geben dem Wachstum
   einen Ursprung links (Richtung Nachkomme → Ahn). */
.ped-node { transform-origin: left center; animation-delay: calc(var(--gen, 0) * 70ms); }

/* Listen-Stagger: Zeilen/Karten fließen sanft gestaffelt ein statt gleichzeitig.
   Gedeckelt, damit lange Listen nicht ewig nachladen. */
.reg-table .reg-row:nth-child(2)  { animation-delay: 30ms; }
.reg-table .reg-row:nth-child(3)  { animation-delay: 60ms; }
.reg-table .reg-row:nth-child(4)  { animation-delay: 90ms; }
.reg-table .reg-row:nth-child(5)  { animation-delay: 120ms; }
.reg-table .reg-row:nth-child(6)  { animation-delay: 150ms; }
.reg-table .reg-row:nth-child(7)  { animation-delay: 180ms; }
.reg-table .reg-row:nth-child(n+8){ animation-delay: 210ms; }

.meute-grid > .pw-reveal:nth-child(2), .puppy-grid > .pw-reveal:nth-child(2) { animation-delay: 45ms; }
.meute-grid > .pw-reveal:nth-child(3), .puppy-grid > .pw-reveal:nth-child(3) { animation-delay: 90ms; }
.meute-grid > .pw-reveal:nth-child(4), .puppy-grid > .pw-reveal:nth-child(4) { animation-delay: 135ms; }
.meute-grid > .pw-reveal:nth-child(5), .puppy-grid > .pw-reveal:nth-child(5) { animation-delay: 180ms; }
.meute-grid > .pw-reveal:nth-child(n+6), .puppy-grid > .pw-reveal:nth-child(n+6) { animation-delay: 220ms; }

/* Ruhiger Ring-Puls beim Tastatur-Fokus eines Knotens (kein Bounce) + dauerhaft sichtbarer Fokusring
   (WCAG 2.4.7): der Puls klingt nach 620ms ab, der Outline bleibt bestehen, solange der Fokus da ist. */
.ped-node:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; animation: node-pulse 620ms var(--ease-standard); }
@keyframes node-pulse {
  0%   { box-shadow: var(--shadow-card); }
  50%  { box-shadow: var(--shadow-card), var(--glow-accent); }
  100% { box-shadow: var(--shadow-card); }
}

@media (prefers-reduced-motion: reduce) {
  .ped-node, .reg-table .reg-row, .meute-grid > .pw-reveal, .puppy-grid > .pw-reveal {
    animation-delay: 0ms !important; opacity: 1 !important;
  }
  .ped-node:focus-visible { animation: none !important; }
  .pw-main { scroll-behavior: auto; }
  .meute-grid:has(.meute-card:hover) .meute-card:not(:hover) { transform: none; opacity: 1; filter: none; }
}

/* ============================================================
   GLAS-EBENEN (Dark) — Transluzenz + Tiefe, additiv & reversibel.
   Flächen schweben über dem Aurora-Grund statt als flache dunkle
   Boxen auf Schwarz zu liegen. Blur nur auf Container/Einzelflächen,
   NIE auf lange Listen-Zeilen (dort nur leichte Transluzenz).
   ============================================================ */

/* --- Ebene 2: Popover / Modal / Overlays / Topbar (stärkstes Glas) --- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pw-topbar {
    /* Fix (Premium-Gate): identisches Material wie .pw-sidebar (--sidebar-glass) —
       Topbar + Sidebar lesen als EINE L-Chrome, keine Nahtfarbdifferenz mehr. */
    background: var(--sidebar-glass);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(125%);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(125%);
    box-shadow: 0 1px 0 var(--glass-border), var(--glass-highlight);
  }
  .pw-sidebar {
    background: var(--sidebar-glass);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(125%);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(125%);
  }
  .cmdk, .modal-card, .app-lock-card, .pw-toast {
    background: var(--glass-2);
    border-color: var(--glass-border-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(132%);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(132%);
    box-shadow: var(--glass-shadow-lg), var(--glass-highlight);
  }
  .cmdk { box-shadow: var(--glass-shadow-lg), 0 0 0 1px rgba(128,108,255,.10), var(--glass-highlight); }

  /* --- Ebene 1: Content-Karten & Panels (mittleres Glas) --- */
  .pw-card, .form,
  .doc-row, .fin-row, .show-row, .agenda-row, .prospect-row,
  .tl-card, .club-row, .cal-row, .assign-chip, .assign-drop,
  .imp-stat, .onboard-step, .repro-cycle,
  .seg, .seg-mini, .ped-palette {
    background: var(--glass-1);
    border-color: var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
    backdrop-filter: blur(var(--glass-blur)) saturate(122%);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
  }
  /* Metric-Kacheln behalten ihren diagonalen Verlauf, nur transluzent. */
  .pw-metric {
    background: linear-gradient(160deg, rgba(32, 43, 60, 0.62), rgba(18, 25, 36, 0.50));
    border-color: var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
    backdrop-filter: blur(var(--glass-blur)) saturate(122%);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
  }
  /* Onboarding-/Trächtigkeits-Karten: farbiger Verlauf über Glas erhalten. */
  .onboard-card {
    background: linear-gradient(160deg, rgba(128,108,255,.16), rgba(43,184,255,.09)), var(--glass-1);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
    backdrop-filter: blur(var(--glass-blur)) saturate(122%);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
  }
  /* Hinweis-/Risiko-Banner: transluzent statt flache dunkle Box; semantische
     Tönung in Glas gemischt, damit die Farbcodierung erhalten bleibt. */
  .risk-banner {
    background: var(--glass-1);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(122%);
    backdrop-filter: blur(var(--glass-blur)) saturate(122%);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
  }
  .risk-banner.danger { background: color-mix(in srgb, var(--color-danger) 12%, var(--glass-1)); }
  .risk-banner.warn { background: color-mix(in srgb, var(--color-warning, #d08700) 12%, var(--glass-1)); }
  .risk-item { background: var(--glass-row); }
}

/* --- Listen-Zeilen: nur Transluzenz, KEIN Per-Zeilen-Blur (Performance).
   Der Aurora-Grund scheint durch die Lücken/Flächen und lässt Zeilen schweben. --- */
.reg-row:not(.reg-head) {
  background: var(--glass-row);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.reg-row:not(.reg-head):nth-child(even) { background: var(--glass-row-alt); }
.hpanel-row, .anc-row:not(.anc-head), .rel-row, .breed-row, .imp-issue,
.bill-row:not(.bill-head), .recent-chip, .avk-pill, .repro-pill, .mate-fixed {
  background: var(--glass-row);
  border-color: var(--glass-border);
}
.reg-row.reg-head { background: var(--reg-head-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Hover-Lift etwas weicher & konsistenter — „weniger starr". */
.pw-card:hover { box-shadow: var(--glass-shadow), 0 0 0 1px rgba(128,108,255,.12), var(--glass-highlight); }
.doc-row, .fin-row, .show-row, .agenda-row, .prospect-row, .tl-card, .club-row, .cal-row {
  transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.doc-row:hover, .fin-row:hover, .show-row:hover, .agenda-row:hover, .prospect-row:hover, .club-row:hover, .cal-row:hover {
  transform: translateY(-1px); border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* --- Robustheit: keine backdrop-filter-Unterstützung → solide Flächen. --- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pw-card, .form, .pw-metric, .onboard-card, .doc-row, .fin-row, .show-row,
  .agenda-row, .prospect-row, .tl-card, .club-row, .cal-row, .assign-chip,
  .assign-drop, .imp-stat, .onboard-step, .repro-cycle, .seg, .seg-mini, .ped-palette,
  .risk-banner {
    background: var(--color-bg-surface-1);
  }
  .pw-topbar, .cmdk, .modal-card, .app-lock-card, .pw-toast { background: var(--color-bg-elevated); }
  .pw-sidebar { background: var(--sidebar-solid); }
}

/* --- Barrierefreiheit: reduzierte Transparenz → solide, blickdichte Flächen. --- */
@media (prefers-reduced-transparency: reduce) {
  .pw-card, .form, .pw-metric, .onboard-card, .doc-row, .fin-row, .show-row,
  .agenda-row, .prospect-row, .tl-card, .club-row, .cal-row, .assign-chip,
  .assign-drop, .imp-stat, .onboard-step, .repro-cycle, .seg, .seg-mini, .ped-palette,
  .hpanel-row, .anc-row:not(.anc-head), .rel-row, .breed-row, .imp-issue,
  .bill-row:not(.bill-head), .recent-chip, .avk-pill, .repro-pill, .mate-fixed,
  .risk-banner, .risk-item {
    background: var(--color-bg-surface-1) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .reg-row:not(.reg-head) { background: var(--color-bg-surface-1) !important; }
  .reg-row:not(.reg-head):nth-child(even) { background: var(--color-bg-surface-2) !important; }
  .reg-row.reg-head { background: var(--color-bg-canvas) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .pw-topbar, .cmdk, .modal-card, .app-lock-card, .pw-toast { background: var(--color-bg-elevated) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .pw-sidebar { background: var(--sidebar-solid-strong) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* Schwebendes Canvas ohne Transluzenz: solide Sheet-Fläche statt Frost. */
  .pw-content { background: var(--color-bg-surface-1) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ============================================================
   LIGHT-THEME — Selektor-Overrides für hart-dunkle Reste, die nicht
   über Tokens laufen (Metric-Glasverlauf, Finanz-/Scrollbar-Farben).
   Höhere Spezifität als die Glas-Regeln → gewinnt ohne !important.
   Immersive Screens (Hero-Scrims, .night-*, Foto-Overlays) bleiben
   bewusst dunkel (Foto-Lesbarkeit, §2.5) und sind hier NICHT gelistet.
   ============================================================ */
[data-theme="light"] .pw-metric {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(240, 244, 250, 0.62));
}
/* Karten-Sheen (weißer Streiflicht-Sweep) auf Hell abschwächen. */
[data-theme="light"] .pw-metric::after,
[data-theme="light"] .pw-card::after {
  background: linear-gradient(120deg, transparent 30%, rgba(90, 69, 224, 0.05) 48%, transparent 66%);
}
[data-theme="light"] .pw-metric:hover {
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(90, 69, 224, 0.16), 0 10px 30px rgba(90, 69, 224, 0.10);
}
/* Finanz-Akzente: satte, WCAG-taugliche Töne statt Neon auf Weiß. */
[data-theme="light"] .fin-num.income, [data-theme="light"] .fin-amt.income { color: var(--color-success); }
[data-theme="light"] .fin-num.expense, [data-theme="light"] .fin-amt.expense { color: var(--color-danger); }
[data-theme="light"] .fin-dot.income { background: var(--color-success); box-shadow: 0 0 10px color-mix(in srgb, var(--color-success) 50%, transparent); }
[data-theme="light"] .fin-dot.expense { background: var(--color-danger); box-shadow: 0 0 10px color-mix(in srgb, var(--color-danger) 50%, transparent); }
/* Scrollbar-Daumen: heller, Hover nicht ins Dunkle kippen. */
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
/* Aurora im Light dezenter halten (zusätzlich zur Token-Opacity). */
[data-theme="light"] .aurora span { mix-blend-mode: var(--aurora-blend); }
/* Command-Palette-Backdrop auf Hell etwas heller (kein tiefschwarzer Schleier). */
[data-theme="light"] .cmdk-backdrop { background: rgba(30, 41, 66, 0.30); }
[data-theme="light"] .modal-backdrop { background: rgba(30, 41, 66, 0.35); }

/* Theme-Umschalter (Settings): aktiver Zustand klar sichtbar. Nötig, weil die
   globale button:not(...)-Regel (hohe Spezifität) den .seg-mini.on-Akzent sonst
   überschreibt. Gilt in beiden Themes. */
.seg-mini.theme-seg button { min-width: 96px; }
.seg-mini.theme-seg button.on {
  background: var(--color-accent-surface) !important;
  border-color: var(--color-accent-surface) !important;
  color: #fff !important;
  box-shadow: var(--glow-accent);
}

/* ============================================================
   Zuchtalmanach — Dashboard-Neugestaltung (§artdir3-Handoff).
   AlmanacRing (Zone A), PackRollCall (Zone B), AgendaTimeline (Zone C),
   RatioInstrument (Zone D). Rein additiv: .pw-metric/.pw-metrics bleiben
   unangetastet (Cross-Screen-Primitive, LitterHub/DogCloudImport).
   Farbjob (dataviz-Skill): Ring-Track = Struktur/neutral, Termin-Punkte
   tragen die BESTEHENDE Status-Semantik (warm=bald, cyan=geplant — exakt
   die alte chip-warn/chip-info-Zuordnung), Petrol bleibt der EINE volle
   Akzent (Heute-Zeiger + Quoten-Gauge — genau 2 volle Stellen im ganzen
   Dashboard), brass/warm nur für Dringlichkeit/Zierrat (Kicker, Soon-Dot).
   ============================================================ */
:root {
  --almanac-ring-track: var(--border-strong);
  --almanac-ring-current: color-mix(in srgb, var(--color-accent-primary) 55%, var(--almanac-ring-track));
  --almanac-ring-event-soon: var(--color-warm);
  --almanac-ring-event-planned: var(--color-accent-cyan);
  --almanac-today: var(--color-accent-primary);
  --almanac-today-shadow: drop-shadow(0 0 6px color-mix(in srgb, var(--almanac-today) 55%, transparent));
  /* Hero-Grundfläche der Zone A: ein warmer "Bett"-Ton, EIN Elevation-Modell
     (Fläche + Schatten) hebt den Jahres-Ring von den übrigen Zonen ab. */
  --zone-hero-bg: linear-gradient(160deg, color-mix(in srgb, var(--color-warm) 14%, var(--color-bg-surface-1)), var(--color-bg-surface-1) 65%);
  --zone-hero-shadow: var(--shadow-elevated), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* Trivialer späterer Font-Swap (Bricolage Grotesque o.ä.) — bis dahin Alias auf Sans. */
  --font-display: "Bricolage", var(--font-sans);
}
[data-theme="light"] {
  /* Gate-Fix #1: Track+Nadel+Hero-Fläche waren im Light (Default!) zu blass gegen das
     warme Papier — Track jetzt aus --color-pine (Tinte) statt dem blassen --border-strong,
     Nadel bekommt zusätzlich einen echten Kontaktschatten (Tiefe statt reinem Farbwechsel),
     Hero-Fläche kräftiger eingefärbt + Innen-Vignette für spürbare Elevation. */
  --almanac-ring-track: color-mix(in srgb, var(--color-pine) 34%, transparent);
  --almanac-ring-current: color-mix(in srgb, var(--color-accent-primary) 55%, var(--almanac-ring-track));
  --almanac-today-shadow: drop-shadow(0 2px 4px rgba(20, 30, 26, .22)) drop-shadow(0 0 7px color-mix(in srgb, var(--almanac-today) 45%, transparent));
  --zone-hero-bg: linear-gradient(160deg, color-mix(in srgb, var(--color-warm) 22%, var(--color-bg-surface-1)), var(--color-bg-surface-1) 65%);
  --zone-hero-shadow: var(--shadow-elevated), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -48px 70px -48px rgba(20, 32, 26, .14);
}

/* Kopfzeile: Eyebrow-Kicker + degradierte Zähler als Fließtext-Caption
   (ersetzt die alten 4 pw-metric-Kacheln — Größe = Priorität liegt jetzt beim Ring). */
.almanac-kicker { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--color-brass); margin-bottom: 4px; }
.almanac-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

.almanac { container-type: inline-size; }
.almanac-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 20px; align-items: start; margin-top: 20px; }
.almanac-instruments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
@container (max-width: 680px) {
  .almanac-grid { grid-template-columns: 1fr; }
  .almanac-instruments { grid-template-columns: 1fr; }
}

/* Generischer A11y-Helfer: visuell verborgen, für Screenreader vorhanden
   (Text-Alternative des Rings — SVG-Punkte sind sonst nicht vorlesbar). */
.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; }

/* --- Zone A: AlmanacRing --- */
.almanac-ring-card { background: var(--zone-hero-bg); display: flex; justify-content: center; padding: var(--space-8) var(--space-6); box-shadow: var(--zone-hero-shadow); margin-top: 22px; }
.almanac-ring-wrap { position: relative; width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Canvas = exakt die Box des SVG (Ticks/Zentralziffer sind KEIN SVG-<text> mehr — RZ1023:
   <text> ist in .razor ein reservierter Steuerblock und verträgt in @if/@foreach-Kontext
   keine Attribute — sondern HTML-Overlay, absolut relativ zu diesem Canvas positioniert). */
.almanac-ring-canvas { position: relative; width: 100%; }
.almanac-ring { display: block; width: 100%; height: auto; overflow: visible; }
.almanac-ring-seg {
  fill: none; stroke: var(--almanac-ring-track); stroke-width: 16; stroke-linecap: round;
  /* Aufziehen (Motion A): identisches Draw-Pattern wie .ped-link (siehe ped-draw, Zeile ~643) —
     bestehendes System wiederverwendet statt eines zweiten Keyframes. Bogenlänge bei r=118,
     26°-Segment ~53.5px; 56 lässt etwas Luft, ohne dass ein Rest-Offset sichtbar bleibt. */
  stroke-dasharray: 56; stroke-dashoffset: 56;
  animation: ped-draw var(--motion-slow) var(--ease-standard) both;
}
.almanac-ring-seg.current { stroke: var(--almanac-ring-current); stroke-width: 18; }
/* Staffelung der 12 Segmente (Draw nacheinander): reine :nth-child-Selektoren, kein Markup nötig,
   da die Pfade als erste 12 Kinder des <svg> immer in Monatsreihenfolge stehen. Letztes Segment
   startet bei 385ms + 320ms Dauer = 705ms < 900ms-Budget. */
.almanac-ring-seg:nth-child(2) { animation-delay: 35ms; }
.almanac-ring-seg:nth-child(3) { animation-delay: 70ms; }
.almanac-ring-seg:nth-child(4) { animation-delay: 105ms; }
.almanac-ring-seg:nth-child(5) { animation-delay: 140ms; }
.almanac-ring-seg:nth-child(6) { animation-delay: 175ms; }
.almanac-ring-seg:nth-child(7) { animation-delay: 210ms; }
.almanac-ring-seg:nth-child(8) { animation-delay: 245ms; }
.almanac-ring-seg:nth-child(9) { animation-delay: 280ms; }
.almanac-ring-seg:nth-child(10) { animation-delay: 315ms; }
.almanac-ring-seg:nth-child(11) { animation-delay: 350ms; }
.almanac-ring-seg:nth-child(12) { animation-delay: 385ms; }
.almanac-ring-tick { position: absolute; transform: translate(-50%, -50%); font-size: 9px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.almanac-ring-event { stroke: var(--color-bg-surface-1); stroke-width: 2; }
.almanac-ring-event.soon {
  fill: var(--almanac-ring-event-soon);
  /* Dringlichkeits-Atmen (Motion B): sehr sanft, startet erst wenn der Zeiger angekommen ist
     (780ms = Sweep-Ende). Eigenes bbox-Zentrum korrekt, da jeder Punkt für sich skaliert. */
  transform-box: fill-box; transform-origin: center;
  animation: almanac-soon-pulse 2.1s ease-in-out 780ms infinite;
}
.almanac-ring-event.planned { fill: var(--almanac-ring-event-planned); }
@keyframes almanac-soon-pulse {
  0%, 100% { opacity: .8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.16); }
}
.almanac-ring-today {
  stroke: var(--almanac-today); stroke-width: 3; stroke-linecap: round; filter: var(--almanac-today-shadow);
  /* Zeiger-Sweep (Motion A): GOTCHA — fill-box wäre hier falsch, die bbox der <line> liegt
     zwischen Center und Spitze, ihr Mittelpunkt ist NICHT (150,150). view-box referenziert
     stattdessen die viewBox-Koordinaten des <svg> direkt, also exakt den Ring-Mittelpunkt. */
  transform-box: view-box; transform-origin: 150px 150px;
  animation: almanac-needle-sweep var(--motion-slow) var(--ease-emphasized) 460ms both;
}
.almanac-ring-today-dot {
  fill: var(--almanac-today); stroke: var(--color-bg-surface-1); stroke-width: 2;
  transform-box: view-box; transform-origin: 150px 150px;
  /* Zwei Animationen auf derselben Property: der Puls startet erst bei 780ms (= Sweep-Ende bei
     460ms Delay + 320ms Dauer), überlappt also nicht mit dem Sweep — kein Kompositions-Konflikt. */
  animation: almanac-needle-sweep var(--motion-slow) var(--ease-emphasized) 460ms both,
             almanac-soon-pulse 2.1s ease-in-out 780ms infinite;
}
@keyframes almanac-needle-sweep {
  /* Start: um den bereits im Markup korrekt gesetzten Heute-Winkel (--needle-a, siehe .razor)
     zurückgedreht auf 0°/Jan (12-Uhr-Position); Ende = transform:none = die tatsächliche,
     im SVG codierte Heute-Position. Kein Drift möglich, da reine Rotation um den echten Center. */
  from { transform: rotate(calc(-1 * var(--needle-a, 0) * 1deg)); }
  to { transform: none; }
}
.almanac-ring-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; pointer-events: none; }
.almanac-ring-num {
  font-family: var(--font-display); font-size: 46px; font-weight: 800; line-height: 1; color: var(--color-text-primary);
  /* Kernzahl blendet zart ein, kurz nach Sweep-Ende (820ms > 780ms). */
  animation: almanac-num-in var(--motion-normal) var(--ease-standard) 820ms both;
}
@keyframes almanac-num-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: none; }
}
.almanac-ring-num.word { font-size: 26px; }
.almanac-ring-num.seed { color: var(--color-text-disabled); font-weight: 600; }
/* Leer-Seed (Jahres-Uhr): heutiges Datum als ruhiger, ambienter Anker — sekundäre Farbe,
   damit es NICHT wie eine dringliche Countdown-Zahl schreit, sondern „du bist hier" sagt. */
.almanac-ring-num--today { color: var(--color-text-secondary); font-weight: 700; }
.almanac-ring-seed-note { color: var(--color-text-muted); font-weight: 500; }
.almanac-ring-cap { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.almanac-ring-title { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Gate-Fix #4: im leeren Zustand ist „Termin planen" die einzig sinnvolle Aktion in Zone A —
   sie trägt daher .pw-btn/.pw-btn--primary (dieselbe gefüllte Pille wie der Hero-Button),
   während Dashboard.razor „Zur Meute" in genau diesem Zustand auf sekundär (kein .primary)
   zurückstuft. Nur EINE gefüllte Primäraktion gleichzeitig im Hero. */
.almanac-ring-cta.pw-btn--primary { text-decoration: none; }

/* Geteilter editorialer Leerzustand (Appell/Termine) — kein grauer Einzeiler. */
.almanac-empty { text-align: center; padding: 28px 20px; }
.almanac-empty-icon { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.almanac-empty p { margin: 0 0 10px; }

/* --- Zone B: PackRollCall --- */
.pack-rollcall { display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 10px; }
.pack-rollcall-item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 84px; text-decoration: none; }
.pack-rollcall-ring { position: relative; width: 72px; height: 72px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 3px var(--color-pine), var(--shadow-card); display: grid; place-items: center; transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast); }
.pack-rollcall-item:hover .pack-rollcall-ring, .pack-rollcall-item:focus-visible .pack-rollcall-ring { transform: translateY(-3px); box-shadow: inset 0 0 0 3px var(--color-pine), var(--glow-accent); }
.pack-rollcall-initials { font-size: 22px; font-weight: 800; color: rgba(255,255,255,.9); text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.pack-rollcall-dot { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-warm); border: 2px solid var(--color-bg-surface-1); }
.pack-rollcall-name { font-size: 12px; font-weight: 600; color: var(--color-text-primary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* --- Zone C: AgendaTimeline (eigenständige Klassen, .tl-*/.agenda-* bleiben unberührt) --- */
.almanac-timeline { list-style: none; margin: 0; padding: 6px 0 0 4px; position: relative; }
/* Verbindungslinie beginnt/endet an der Chip-Mitte (nicht am ol-Rand) — sonst ragt sie oben
   bis in den „Anstehende Termine"-Header und unten ins Leere (Fix). 30px = ol-padding + halbe Chip-Höhe. */
.almanac-timeline::before { content: ""; position: absolute; left: 23px; top: 30px; bottom: 40px; width: 2px; background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-cyan) 55%, transparent); opacity: .3; }
.almanac-timeline-item { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 16px; }
.almanac-timeline-item.clickable { cursor: pointer; }
.almanac-timeline-date { position: relative; z-index: 1; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; line-height: 1; background: linear-gradient(160deg, rgba(128,108,255,.20), rgba(43,184,255,.10)); border: 1px solid var(--border-subtle); }
.almanac-timeline-date.soon { background: linear-gradient(160deg, color-mix(in srgb, var(--color-warm) 32%, transparent), color-mix(in srgb, var(--color-warm) 12%, transparent)); }
.almanac-timeline-card { flex: 1; min-width: 0; background: var(--color-bg-surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 8px 14px; box-shadow: var(--shadow-card); }
.almanac-timeline-title { font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.almanac-timeline-meta { font-size: 12px; color: var(--color-text-muted); }

/* --- Zone D: RatioInstrument (gauge / split / band) --- */
.ratio-instr { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ratio-instr-label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.ratio-instr.dampened { opacity: .82; }
.ratio-instr-cta { font-size: 12px; font-weight: 600; color: var(--color-accent-primary); text-decoration: none; }
.ratio-instr-cta:hover, .ratio-instr-cta:focus-visible { text-decoration: underline; }

/* Canvas = exakt die Box des SVG; Zahl/Caption/Sub sind HTML-Overlay, nicht SVG-<text>
   (RZ1023, siehe .almanac-ring-canvas oben — dieselbe Ursache/derselbe Fix). */
.ratio-gauge-canvas { position: relative; width: 168px; }
.ratio-gauge { display: block; width: 100%; height: auto; }
.ratio-gauge-track { fill: none; stroke: var(--color-bg-surface-3); stroke-width: 14; stroke-linecap: round; }
.ratio-gauge-val { fill: none; stroke: var(--color-accent-primary); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 950ms var(--ease-emphasized); }
.ratio-instr.dampened .ratio-gauge-val { stroke: var(--color-text-disabled); opacity: .5; }
.ratio-gauge-center { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; text-align: center; pointer-events: none; }
.ratio-gauge-num { font-size: 34px; font-weight: 800; line-height: 1; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.ratio-gauge-num.seed { color: var(--color-text-disabled); }
/* Label + Sub jetzt UNTER dem Bogen (nicht mehr im Ring gequetscht) — mittig, klar lesbar. */
.ratio-gauge-cap { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--color-text-secondary); margin-top: -6px; }
.ratio-gauge-sub { font-size: 12px; color: var(--color-text-muted); }

.ratio-split-bar { width: 100%; height: 16px; border-radius: 999px; overflow: hidden; display: flex; background: var(--color-bg-surface-3); }
/* feine Naht zwischen ♂ und ♀, damit die Teilung auch bei ähnlicher Helligkeit klar liest */
.ratio-split-m { background: var(--ratio-sex-m); height: 100%; box-shadow: 1px 0 0 var(--color-bg-surface-1); }
.ratio-split-f { background: var(--ratio-sex-f); height: 100%; }
.ratio-instr.dampened .ratio-split-bar { background: repeating-linear-gradient(135deg, var(--border-strong) 0 6px, transparent 6px 12px); }
.ratio-split-legend { display: flex; gap: 16px; font-size: 13px; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.ratio-split-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.ratio-split-legend .dot.m { background: var(--ratio-sex-m); }
.ratio-split-legend .dot.f { background: var(--ratio-sex-f); }

.ratio-band-num { font-size: 34px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.ratio-band-num.seed { color: var(--color-text-disabled); font-size: 28px; }
.ratio-band-track { position: relative; width: 100%; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-accent-primary) 12%, var(--color-bg-surface-3)); }
.ratio-band-fill { position: absolute; inset: 0; width: 0; border-radius: 999px; background: color-mix(in srgb, var(--color-accent-primary) 60%, var(--color-bg-surface-1)); transition: width 700ms var(--ease-emphasized); }
.ratio-band-marker { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent-primary); border: 2px solid var(--color-bg-surface-1); transform: translate(-50%, -50%); }
.ratio-instr.dampened .ratio-band-track { background: repeating-linear-gradient(135deg, var(--border-strong) 0 6px, transparent 6px 12px); }
.ratio-band-scale { display: flex; justify-content: space-between; width: 100%; font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD „Das lebende Titelbild" — Statement-Redesign (Apple/Google-Niveau)
   Wenige, große, atmende, foto-/farbgetragene Blöcke. App-Chrome bleibt fix.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Signatur-Farbset pro Hund (freundlich-warm, heritage-treu) — die gerettete Buntheit als System. */
.hue-0 { --dog: #1F6B4E; } .hue-1 { --dog: #1E6F63; } .hue-2 { --dog: #3E8C7A; } .hue-3 { --dog: #A87C3C; }
.hue-4 { --dog: #E08A2B; } .hue-5 { --dog: #C06A3E; } .hue-6 { --dog: #7A4A5E; } .hue-7 { --dog: #5C7A46; }

/* Sequenz-Layout (12-col) + warmer Farbnebel hinter dem Content (Dark nie flach/eintönig). */
.dash { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; max-width: 1360px; margin-inline: auto; }
.dash::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(1200px 620px at 74% -8%, color-mix(in srgb, var(--accent-marigold) 13%, transparent), transparent 60%); }
.dash > * { position: relative; z-index: 1; }
.dash-hero { grid-column: 1 / -1; }
.dash-meute { grid-column: 1 / -1; margin-top: 32px; }
.dash-timeline { grid-column: span 7; margin-top: 32px; }
.dash-status { grid-column: span 5; margin-top: 32px; display: grid; gap: 24px; align-content: start; }
.dash-instr { grid-column: 1 / -1; margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .dash-timeline, .dash-status { grid-column: 1 / -1; } .dash-instr { grid-template-columns: 1fr; } }

.dash .pw-card { border-radius: 24px; box-shadow: 0 2px 6px rgba(20,30,20,.05), 0 18px 48px rgba(20,30,20,.09); }
:root[data-theme="dark"] .dash .pw-card { box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.dash-sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.dash-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.01em; margin: 0; }
.dash-timeline .dash-h2 { margin: 0 0 14px; }
.dash-sec-count { font-size: 13px; color: var(--color-text-muted); }

/* ---- COVER HERO ---- */
.cover { --cover-veil: #F4ECDC; position: relative; overflow: hidden; border-radius: 28px; min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(115deg, #F4ECDC 0%, #EAD9B4 55%, #E3C489 100%);
  box-shadow: 0 2px 6px rgba(20,30,20,.05), 0 28px 70px rgba(20,30,20,.12); }
:root[data-theme="dark"] .cover { --cover-veil: #17271E;
  background: linear-gradient(115deg, #17271E 0%, #24301D 55%, #3A2E16 100%);
  box-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.cover-media { position: absolute; inset: 0 0 0 42%; overflow: hidden;
  /* weiche linke Kante — kein harter Halbseiten-Übergang (cinematic statt zweigeteilt) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.cover-photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; animation: cover-kenburns 16s ease-in-out infinite alternate; }
@keyframes cover-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.cover--nophoto .cover-media { inset: 0 0 0 46%; background: linear-gradient(160deg, color-mix(in srgb, var(--dog, #7c6a3f) 58%, #0b120e), color-mix(in srgb, var(--dog, #7c6a3f) 94%, #000)); }
.cover-ghost { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 800; font-size: 320px; line-height: .8; color: color-mix(in srgb, #fff 13%, transparent); user-select: none; }
.cover-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cover-veil) 0%, color-mix(in srgb, var(--cover-veil) 82%, transparent) 30%, transparent 62%); }
.cover-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: 46px 48px 22px; max-width: 62%; }
.cover-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 12px; }
.cover-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 7vw, 104px); line-height: .92; letter-spacing: -.03em; color: var(--color-text-primary); }
.cover-subline { margin-top: 14px; font-size: clamp(17px, 1.8vw, 26px); font-weight: 500; color: var(--color-text-secondary); }
.cover-cta { margin-top: 24px; }
.cover-baseline { position: relative; z-index: 2; padding: 0 48px 26px; }

/* ---- HORIZONT-BASELINE (aufgeschnittener Ring, jetzt Detail) ---- */
.horizont-strip { position: relative; height: 44px; border-radius: 14px;
  background: linear-gradient(100deg, #F3E3C4 0%, #E8C98A 45%, #E08A2B 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10); animation: strip-in .9s cubic-bezier(.2,.7,.1,1) both; }
:root[data-theme="dark"] .horizont-strip { background: linear-gradient(100deg, #23301F 0%, #3A3A22 45%, #6E4E1C 80%, #F2A03C 100%); }
@keyframes strip-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.horizont-seam { position: absolute; top: -7px; bottom: -7px; width: 2px; border-radius: 2px; background: var(--accent-petrol);
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--accent-petrol) 70%, transparent); animation: seam-pulse 2.5s ease-in-out infinite; }
@keyframes seam-pulse { 0%,100% { opacity: .85; } 50% { opacity: 1; box-shadow: 0 0 22px 3px color-mix(in srgb, var(--accent-petrol) 85%, transparent); } }
.horizont-pin { position: absolute; top: -14px; width: 2px; height: 14px; transform: translateX(-50%); border-radius: 2px; background: color-mix(in srgb, var(--pin, #E08A2B) 55%, transparent); }
.horizont-pin-dot { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--pin, #E08A2B); box-shadow: 0 0 10px color-mix(in srgb, var(--pin, #E08A2B) 75%, transparent); }
.horizont-pin.kind-appt { --pin: var(--accent-marigold); }
.horizont-pin.kind-litter { --pin: var(--accent-petrol); }
.horizont-pin.kind-show { --pin: var(--color-brass); }
.horizont-pin.soon .horizont-pin-dot { animation: seam-pulse 2s ease-in-out infinite; }
.horizont-ticks { position: relative; height: 14px; margin-top: 10px; }
.horizont-tick { position: absolute; transform: translateX(-50%); font-size: 10px; letter-spacing: .08em; color: var(--color-text-muted); }

/* ---- MEUTE cinematic ---- */
.meute-strip { display: flex; gap: 20px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; }
.meute-strip::-webkit-scrollbar { height: 8px; }
.meute-strip::-webkit-scrollbar-thumb { background: var(--color-bg-surface-3); border-radius: 8px; }
.meute-card { position: relative; flex: 0 0 auto; width: 210px; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden;
  text-decoration: none; scroll-snap-align: start; background: var(--color-bg-surface-3);
  box-shadow: 0 2px 6px rgba(20,30,20,.05), 0 16px 40px rgba(20,30,20,.10);
  transition: transform .26s cubic-bezier(.2,.7,.1,1), box-shadow .26s; }
.meute-card:hover, .meute-card:focus-visible { transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(20,30,20,.06), 0 30px 70px rgba(20,30,20,.16), 0 0 44px color-mix(in srgb, var(--dog, var(--color-pine)) 32%, transparent); }
.meute-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
.meute-card:hover .meute-photo { transform: scale(1.05); }
.meute-card.duo { background: linear-gradient(160deg, color-mix(in srgb, var(--dog) 74%, #f4efe6) 0%, color-mix(in srgb, var(--dog) 96%, #000) 100%); }
.meute-card.duo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,.28) 100%); }
.meute-paw { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 46%; height: 46%; color: #fff; opacity: .9; filter: drop-shadow(0 3px 10px rgba(0,0,0,.28)); }
.meute-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, color-mix(in srgb, var(--dog, #0b120e) 55%, #0b120e) 0%, color-mix(in srgb, var(--dog, #0b120e) 26%, transparent) 40%, transparent 68%); }
.meute-meta { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 15px; display: flex; flex-direction: column; gap: 1px; }
.meute-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meute-role { font-size: 12px; color: rgba(255,255,255,.82); }
.meute-sex { position: absolute; z-index: 3; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #fff; backdrop-filter: blur(6px); }
.meute-sex.f { background: color-mix(in srgb, var(--accent-petrol) 82%, transparent); }
.meute-sex.m { background: color-mix(in srgb, var(--color-brass) 82%, transparent); }
.meute-soon { position: absolute; z-index: 3; top: 14px; left: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-marigold); box-shadow: 0 0 10px var(--accent-marigold); animation: seam-pulse 2s ease-in-out infinite; }

/* ---- STATUS-STACK (getönte KPI-Karten) ---- */
.statcard { border-radius: 20px; padding: 24px 26px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 2px 6px rgba(20,30,20,.05), 0 14px 36px rgba(20,30,20,.08); }
.statcard--tint-amber { background: linear-gradient(160deg, #F8EFDD, #F3E6CC); }
.statcard--tint-petrol { background: linear-gradient(160deg, #E7EFEC, #DCE8E3); }
:root[data-theme="dark"] .statcard--tint-amber { background: linear-gradient(160deg, #2A2015, #1f1810); box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
:root[data-theme="dark"] .statcard--tint-petrol { background: linear-gradient(160deg, #16251F, #122019); box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
.statcard-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.statcard-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 56px); line-height: 1; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.statcard-num--seed { color: var(--color-text-disabled); }
.statcard-sub { font-size: 13px; color: var(--color-text-secondary); }
.statcard-pips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.statcard-cta { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--accent-marigold); text-decoration: none; }
.pip { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--color-text-muted) 22%, transparent); }
.pip.on { background: var(--accent-marigold); box-shadow: 0 0 8px color-mix(in srgb, var(--accent-marigold) 55%, transparent); }

/* ---- KENNZAHL-STATEMENTS (Instrumente als getönte Tiles, links-bündig) ---- */
.dash-instr .ratio-instr { align-items: flex-start; text-align: left; gap: 12px; padding: 22px 24px; border-radius: 20px; }
.dash-instr .ratio-instr-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.dash-instr .ratio-split-legend, .dash-instr .ratio-band-scale { width: 100%; }
.ratio-pips-num { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.ratio-pips-num.seed { color: var(--color-text-disabled); }
.ratio-pips-row { display: flex; gap: 7px; flex-wrap: wrap; }
.dash-instr .ratio-pips-sub { font-size: 12px; color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD-BÜHNE „Ein Zwinger — alles verbunden" — interaktive Homepage-Stage
   (cinematisch, glühende Verbindungen, Kaskade beim Laden). Kein App-Raster.
   ═══════════════════════════════════════════════════════════════════════════ */
.stage-hero { grid-column: 1 / -1; }
.stage-head { text-align: center; max-width: 760px; margin: 8px auto 0; }
.stage-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-marigold); margin-bottom: 14px; }
.stage-headline { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.025em; margin: 0; color: var(--color-text-primary); text-wrap: balance; }
.stage-subline { margin: 14px auto 0; font-size: clamp(14px, 1.4vw, 17px); color: var(--color-text-secondary); max-width: 620px; }

.stage { position: relative; margin-top: 34px; min-height: 540px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(680px 420px at 50% 42%, color-mix(in srgb, var(--dog, #4b57d6) 26%, transparent), transparent 60%),
    radial-gradient(900px 500px at 80% 8%, color-mix(in srgb, var(--accent-marigold) 12%, transparent), transparent 60%),
    linear-gradient(160deg, #0c1510 0%, #0a1119 60%, #0b0f14 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
:root[data-theme="light"] .stage {
  background:
    radial-gradient(680px 420px at 50% 42%, color-mix(in srgb, var(--dog, #4b57d6) 15%, transparent), transparent 60%),
    radial-gradient(900px 500px at 80% 8%, color-mix(in srgb, var(--accent-marigold) 14%, transparent), transparent 62%),
    linear-gradient(160deg, #f3ede1 0%, #eef1ee 60%, #f2ede3 100%);
  box-shadow: 0 24px 60px rgba(20,30,20,.12), inset 0 1px 0 rgba(255,255,255,.7); }
/* feines Punkt-Raster als Tiefe/Atmosphäre */
.stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-text-primary) 12%, transparent) 1px, transparent 1px);
  background-size: 26px 26px; -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 75%); }

.stage-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.stage-wire { stroke: color-mix(in srgb, var(--accent-petrol) 70%, transparent); stroke-width: 1.5; fill: none;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-petrol) 60%, transparent));
  animation: wire-draw .9s cubic-bezier(.2,.7,.1,1) var(--d, 0ms) forwards; }
.stage-wire.soon { stroke: color-mix(in srgb, var(--accent-marigold) 78%, transparent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-marigold) 70%, transparent)); }
@keyframes wire-draw { to { stroke-dashoffset: 0; } }

.stage-node { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 16px; text-decoration: none; white-space: nowrap;
  background: color-mix(in srgb, #0b1a16 72%, transparent); border: 1px solid color-mix(in srgb, var(--accent-petrol) 34%, transparent);
  backdrop-filter: blur(10px) saturate(120%); box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 22px color-mix(in srgb, var(--accent-petrol) 16%, transparent);
  opacity: 0; animation: node-in .6s cubic-bezier(.2,.7,.1,1) var(--d, 0ms) forwards;
  transition: transform .24s cubic-bezier(.2,.7,.1,1), box-shadow .24s, border-color .24s; }
:root[data-theme="light"] .stage-node:not(.stage-node--hub) { background: color-mix(in srgb, #ffffff 82%, transparent); border-color: color-mix(in srgb, var(--accent-petrol) 26%, transparent); box-shadow: 0 12px 30px rgba(20,30,20,.12), 0 0 22px color-mix(in srgb, var(--accent-petrol) 12%, transparent); }
@keyframes node-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.stage-node:hover, .stage-node:focus-visible { transform: translate(-50%, -50%) translateY(-3px); border-color: var(--accent-petrol);
  box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--accent-petrol) 38%, transparent); }
.stage-node-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  background: color-mix(in srgb, var(--accent-petrol) 20%, transparent); color: var(--accent-petrol); }
.stage-node-icon svg { width: 19px; height: 19px; }
.stage-node-body { display: flex; flex-direction: column; gap: 1px; }
.stage-node-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.stage-node-value { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.05; color: var(--color-text-primary); }
.stage-node.soon { border-color: color-mix(in srgb, var(--accent-marigold) 55%, transparent); }
.stage-node.soon .stage-node-icon { background: color-mix(in srgb, var(--accent-marigold) 22%, transparent); color: var(--accent-marigold); }
.stage-node-dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-marigold); box-shadow: 0 0 12px var(--accent-marigold); animation: seam-pulse 2s ease-in-out infinite; }

/* Zentraler Feature-Knoten (Hund/Zwinger) — der glühende Held */
.stage-node--hub { flex-direction: column; gap: 8px; width: 168px; height: 168px; justify-content: center; padding: 0; border-radius: 28px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--dog, #4b57d6) 82%, #0b1220), color-mix(in srgb, var(--dog, #4b57d6) 96%, #000));
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 60px color-mix(in srgb, var(--dog, #4b57d6) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  animation: node-in .7s cubic-bezier(.2,.7,.1,1) both; }
.stage-node--hub:hover { transform: translate(-50%, -50%) translateY(-3px); box-shadow: 0 26px 70px rgba(0,0,0,.55), 0 0 80px color-mix(in srgb, var(--dog, #4b57d6) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.28); }
.stage-hub-photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.stage-hub-paw { width: 64px; height: 64px; color: rgba(255,255,255,.92); filter: drop-shadow(0 3px 10px rgba(0,0,0,.3)); }
.stage-hub-label { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.stage-node--hub.no-photo .stage-hub-label { position: absolute; bottom: 16px; }

/* Responsiv: unter 760px keine freie Bühne — Knoten als saubere Liste, Drähte aus. */
@media (max-width: 760px) {
  .stage { min-height: 0; padding: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .stage-wires { display: none; }
  .stage::before { display: none; }
  .stage-node { position: static; transform: none; animation: none; opacity: 1; width: 100%; justify-content: flex-start; }
  .stage-node:hover { transform: translateY(-2px); }
  .stage-node--hub { width: 100%; height: auto; flex-direction: row; gap: 14px; padding: 16px; justify-content: flex-start; order: -1; }
  .stage-node--hub .stage-hub-photo, .stage-node--hub .stage-hub-paw { width: 48px; height: 48px; }
  .stage-node--hub.no-photo .stage-hub-label { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-wire { stroke-dashoffset: 0 !important; animation: none !important; }
  .stage-node, .stage-node--hub { animation: none !important; opacity: 1 !important; }
  .stage-node-dot { animation: none !important; }
}

/* ============================================================
   TopTier Flagship Showcase & Hero Banner Styles
   ============================================================ */
.meute-hero-banner {
  position: relative; border-radius: 28px; padding: 40px 44px; margin-bottom: 28px;
  background: radial-gradient(circle at 80% 20%, rgba(229, 185, 118, 0.15) 0%, transparent 60%),
              linear-gradient(135deg, rgba(22, 28, 40, 0.95) 0%, rgba(12, 16, 24, 0.98) 100%);
  border: 1px solid rgba(229, 185, 118, 0.25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px;
}
.meute-hero-kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: #E5B976; margin-bottom: 6px; }
.meute-hero-title { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: #F7F5F0; margin: 0 0 8px; letter-spacing: -0.02em; text-shadow: 0 4px 20px rgba(0,0,0,0.6); }
.meute-hero-subtitle { font-size: 16px; color: rgba(247, 245, 240, 0.75); margin: 0; display: flex; align-items: center; }
.meute-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.meute-add-btn {
  font-size: 15px !important; font-weight: 700 !important; padding: 12px 24px !important; border-radius: 14px !important;
  background: linear-gradient(135deg, #E5B976, #B88E43) !important; color: #0A0D14 !important;
  box-shadow: 0 8px 24px rgba(229, 185, 118, 0.35) !important; border: none !important;
}
.meute-add-btn:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 12px 32px rgba(229, 185, 118, 0.5) !important; }

.recent-strip-container { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; padding: 12px 18px; border-radius: 16px; background: rgba(18, 24, 34, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); }
.recent-label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.recent-strip-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.recent-chip-luxury {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px;
  background: rgba(30, 38, 54, 0.7); border: 1px solid rgba(255, 255, 255, 0.09);
  color: #F7F5F0; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.recent-chip-luxury:hover { transform: translateY(-2px); border-color: #E5B976; background: rgba(40, 50, 70, 0.9); }
.recent-sex-badge { font-weight: 700; font-size: 12px; }
.recent-sex-badge.m { color: #E5B976; } .recent-sex-badge.f { color: #64DFDF; }

.meute-title-badge {
  position: absolute; top: 14px; left: 14px; z-index: 5; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 12px; background: rgba(229, 185, 118, 0.25);
  border: 1px solid rgba(229, 185, 118, 0.5); color: #E5B976; backdrop-filter: blur(10px);
}
.meute-kennel-sub { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #E5B976; margin-bottom: 2px; }
.group-header-strip { display: flex; align-items: center; gap: 12px; margin: 32px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 8px; }
.group-header-strip h2 { margin: 0; font-family: var(--font-display); font-size: 24px; color: #F7F5F0; }
.chip.gold { background: rgba(229, 185, 118, 0.2); border-color: rgba(229, 185, 118, 0.4); color: #E5B976; }

.meute-empty-card { text-align: center; padding: 60px 40px; border-radius: 28px; background: rgba(18, 24, 34, 0.7); border: 1px dashed rgba(229, 185, 118, 0.3); }
.meute-empty-card .empty-icon { font-size: 54px; margin-bottom: 16px; }