/* ═══════════════════════════════════════════════════════════════
   IKKZ Visualizer · WCAG 2.1 AA Light & Dark Mode Design System
   ═══════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  /* ── Light Mode (Default Base Tokens: Crisp Bright Slate-50 / Slate-900) ── */
  --bg-canvas:          rgb(241 245 249); /* slate-100 */
  --bg-surface:         rgb(255 255 255); /* white */
  --bg-card:            rgb(248 250 252); /* slate-50 */
  --bg-card-elevated:   rgb(255 255 255); /* white */
  --bg-input:           rgb(255 255 255); /* white */
  --bg-dropdown:        rgb(255 255 255); /* white */
  --bg-dropdown-header: rgb(241 245 249); /* slate-100 */
  --bg-dropdown-hover:  rgb(224 242 254); /* sky-100 */
  --bg-subtle:          rgb(241 245 249); /* slate-100 */

  --text-primary:       rgb(15 23 42);    /* slate-900 (AAA contrast > 15:1) */
  --text-secondary:     rgb(51 65 85);    /* slate-700 (AA+ contrast > 7.5:1) */
  --text-muted:         rgb(71 85 105);   /* slate-600 (AA contrast > 5.5:1) */

  --border-subtle:      rgb(203 213 225); /* slate-300 */
  --border-strong:      rgb(148 163 184); /* slate-400 */

  /* ── Tactical Competence Ampel (Light Mode: Saturated & Non-Glaring) ── */
  --ampel-effective:      rgb(5 150 105);            /* emerald-600 */
  --ampel-effective-bg:   rgba(5, 150, 105, 0.14);
  --ampel-effective-fill: rgba(5, 150, 105, 0.22);
  --ampel-effective-text: rgb(6 78 59);              /* emerald-900 */
  --ampel-effective-glow: rgba(5, 150, 105, 0.20);

  --ampel-neutral:        rgb(217 119 6);            /* amber-600 */
  --ampel-neutral-bg:     rgba(245, 158, 11, 0.16);
  --ampel-neutral-fill:   rgba(245, 158, 11, 0.24);
  --ampel-neutral-text:   rgb(120 53 15);            /* amber-900 */
  --ampel-neutral-glow:   rgba(245, 158, 11, 0.22);

  --ampel-vulnerable:      rgb(225 29 72);           /* rose-600 */
  --ampel-vulnerable-bg:   rgba(225, 29, 72, 0.14);
  --ampel-vulnerable-fill: rgba(225, 29, 72, 0.22);
  --ampel-vulnerable-text: rgb(136 19 55);           /* rose-900 */
  --ampel-vulnerable-glow: rgba(225, 29, 72, 0.22);

  --accent-telemetry:      rgb(2 132 199);           /* sky-600 */
  --accent-telemetry-bg:   rgba(2, 132, 199, 0.12);
  --accent-telemetry-text: rgb(12 74 110);           /* sky-900 */
  --accent-telemetry-glow: rgba(2, 132, 199, 0.22);

  /* ── Dynamic SVG Tokens (Light Mode) ── */
  --svg-surface:        rgb(255 255 255);
  --svg-sector-idle:    rgb(241 245 249); /* slate-100 */
  --svg-stroke:         rgb(15 23 42);    /* slate-900 */
  --svg-stroke-muted:   rgb(100 116 139); /* slate-500 */
  --svg-text:           rgb(15 23 42);    /* slate-900 */
  --svg-subtext:        rgb(51 65 85);    /* slate-700 */
  --radar-grid:         rgba(15, 23, 42, 0.22);

  /* ── Judo-Gi Tokens (Light Mode: White Judogi on Light Tatami) ── */
  --gi-body-fill:       rgb(255 255 255);
  --gi-body-stroke:     rgb(30 41 59);
  --gi-lapel-stroke:    rgb(51 65 85);
  --gi-stitch-stroke:   rgb(100 116 139);
  --gi-obi-fill:        rgb(30 41 59);
  --gi-obi-knot-fill:   rgb(15 23 42);
  --gi-obi-stroke:      rgb(2 132 199);

  --shadow-sm:          0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md:          0 6px 18px rgba(15, 23, 42, 0.10);
  --shadow-lg:          0 16px 36px rgba(15, 23, 42, 0.12);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-jp:   "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur:       200ms;
}

/* ── Dark Mode Tokens (Deep Slate-950 / Crisp Slate-100 & Neon Ampel) ── */
:root.dark,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas:          rgb(2 6 23);               /* slate-950 */
  --bg-surface:         rgb(15 23 42);             /* slate-900 */
  --bg-card:            rgb(30 41 59);             /* slate-800 */
  --bg-card-elevated:   rgb(15 23 42);             /* slate-900 */
  --bg-input:           rgb(15 23 42);             /* slate-900 */
  --bg-dropdown:        rgb(15 23 42);             /* slate-900 */
  --bg-dropdown-header: rgb(30 41 59);             /* slate-800 */
  --bg-dropdown-hover:  rgb(30 58 138);            /* blue-900 */
  --bg-subtle:          rgb(30 41 59);             /* slate-800 */

  --text-primary:       rgb(241 245 249);          /* slate-100 */
  --text-secondary:     rgb(203 213 225);          /* slate-300 */
  --text-muted:         rgb(148 163 184);          /* slate-400 */

  --border-subtle:      rgb(51 65 85);             /* slate-700 */
  --border-strong:      rgb(100 116 139);          /* slate-500 */

  /* ── Tactical Competence Ampel (Dark Mode: Luminous Neon + Subtle Glow) ── */
  --ampel-effective:      rgb(52 211 153);         /* emerald-400 */
  --ampel-effective-bg:   rgba(52, 211, 153, 0.18);
  --ampel-effective-fill: rgba(16, 185, 129, 0.34);
  --ampel-effective-text: rgb(167 243 208);        /* emerald-200 */
  --ampel-effective-glow: rgba(52, 211, 153, 0.42);

  --ampel-neutral:        rgb(251 191 36);         /* amber-400 */
  --ampel-neutral-bg:     rgba(251, 191, 36, 0.18);
  --ampel-neutral-fill:   rgba(245, 158, 11, 0.32);
  --ampel-neutral-text:   rgb(253 230 138);        /* amber-200 */
  --ampel-neutral-glow:   rgba(251, 191, 36, 0.40);

  --ampel-vulnerable:      rgb(244 63 94);         /* rose-500 */
  --ampel-vulnerable-bg:   rgba(244, 63, 94, 0.22);
  --ampel-vulnerable-fill: rgba(244, 63, 94, 0.36);
  --ampel-vulnerable-text: rgb(254 205 211);       /* rose-200 */
  --ampel-vulnerable-glow: rgba(244, 63, 94, 0.45);

  --accent-telemetry:      rgb(56 189 248);        /* sky-400 */
  --accent-telemetry-bg:   rgba(56, 189, 248, 0.18);
  --accent-telemetry-text: rgb(186 230 253);       /* sky-200 */
  --accent-telemetry-glow: rgba(56, 189, 248, 0.42);

  /* ── Dynamic SVG Tokens (Dark Mode) ── */
  --svg-surface:        rgb(15 23 42);
  --svg-sector-idle:    rgba(30, 41, 59, 0.72);
  --svg-stroke:         rgb(241 245 249);          /* slate-100 */
  --svg-stroke-muted:   rgb(148 163 184);          /* slate-400 */
  --svg-text:           rgb(241 245 249);          /* slate-100 */
  --svg-subtext:        rgb(203 213 225);          /* slate-300 */
  --radar-grid:         rgba(241, 245, 249, 0.24);

  /* ── Judo-Gi Tokens (Dark Mode: Slate Judogi on Deep Telemetry Surface) ── */
  --gi-body-fill:       rgb(15 23 42);
  --gi-body-stroke:     rgb(226 232 240);
  --gi-lapel-stroke:    rgb(203 213 225);
  --gi-stitch-stroke:   rgb(148 163 184);
  --gi-obi-fill:        rgb(2 6 23);
  --gi-obi-knot-fill:   rgb(15 23 42);
  --gi-obi-stroke:      rgb(56 189 248);

  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:          0 8px 24px rgba(0, 0, 0, 0.48);
  --shadow-lg:          0 20px 48px rgba(0, 0, 0, 0.65);
}

/* ═══════════════════════════════════════════════════════════════
   Multi-Theme System: Japanese Fun · JSV Speyer · Judo Verband Pfalz
   (Each Theme supports both Light/White Mode & Dark Mode)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. JAPANESE FUN (⛩️ Kodokan Washi, Torii Vermilion, Matcha & Indigo) — LIGHT MODE ── */
:root[data-style-theme="japanese-fun"],
:root[data-theme="light"][data-style-theme="japanese-fun"] {
  --bg-canvas:          rgb(252 243 230); /* Warm Washi Tatami Cream */
  --bg-surface:         rgb(255 252 247); /* Pure Washi Ivory */
  --bg-card:            rgb(253 247 237);
  --bg-card-elevated:   rgb(255 254 250);
  --bg-input:           rgb(255 255 255);
  --bg-dropdown:        rgb(255 253 249);
  --bg-dropdown-header: rgb(249 236 220);
  --bg-dropdown-hover:  rgb(254 226 226); /* Soft Sakura/Torii Tint */
  --bg-subtle:          rgb(247 235 218);

  --text-primary:       rgb(28 19 23);    /* Deep Sumi Ink */
  --text-secondary:     rgb(68 48 54);
  --text-muted:         rgb(107 79 88);

  --border-subtle:      rgb(226 200 178);
  --border-strong:      rgb(190 148 120);

  --ampel-effective:      rgb(21 128 61);            /* Matcha Bamboo Green */
  --ampel-effective-bg:   rgba(21, 128, 61, 0.14);
  --ampel-effective-fill: rgba(21, 128, 61, 0.22);
  --ampel-effective-text: rgb(20 83 45);
  --ampel-effective-glow: rgba(21, 128, 61, 0.22);

  --ampel-neutral:        rgb(180 83 9);             /* Golden Yuzu / Kitsune Amber */
  --ampel-neutral-bg:     rgba(217, 119, 6, 0.16);
  --ampel-neutral-fill:   rgba(217, 119, 6, 0.25);
  --ampel-neutral-text:   rgb(120 53 15);
  --ampel-neutral-glow:   rgba(217, 119, 6, 0.24);

  --ampel-vulnerable:      rgb(220 38 38);           /* Torii Vermilion / Daruma Red */
  --ampel-vulnerable-bg:   rgba(220, 38, 38, 0.14);
  --ampel-vulnerable-fill: rgba(220, 38, 38, 0.23);
  --ampel-vulnerable-text: rgb(127 29 29);
  --ampel-vulnerable-glow: rgba(220, 38, 38, 0.25);

  --accent-telemetry:      rgb(79 70 229);           /* Hokusai Indigo / Edo Violet-Blue */
  --accent-telemetry-bg:   rgba(79, 70, 229, 0.13);
  --accent-telemetry-text: rgb(49 46 129);
  --accent-telemetry-glow: rgba(79, 70, 229, 0.24);

  --svg-surface:        rgb(255 252 247);
  --svg-sector-idle:    rgb(247 235 218);
  --svg-stroke:         rgb(28 19 23);
  --svg-stroke-muted:   rgb(120 90 100);
  --svg-text:           rgb(28 19 23);
  --svg-subtext:        rgb(68 48 54);
  --radar-grid:         rgba(28, 19, 23, 0.22);

  --gi-body-fill:       rgb(255 253 248);
  --gi-body-stroke:     rgb(45 27 33);
  --gi-lapel-stroke:    rgb(88 47 58);
  --gi-stitch-stroke:   rgb(156 112 122);
  --gi-obi-fill:        rgb(185 28 28);             /* Kohaku Red Master Belt */
  --gi-obi-knot-fill:   rgb(153 27 27);
  --gi-obi-stroke:      rgb(254 240 138);
}

/* ── 1b. JAPANESE FUN (⛩️ Tokyo Neo-Dojo · Cyber Sakura & Matcha) — DARK MODE ── */
:root.dark[data-style-theme="japanese-fun"],
:root[data-theme="dark"][data-style-theme="japanese-fun"] {
  --bg-canvas:          rgb(14 9 26);    /* Deep Shibuya Indigo-Plum Night */
  --bg-surface:         rgb(25 17 44);
  --bg-card:            rgb(37 26 64);
  --bg-card-elevated:   rgb(30 20 52);
  --bg-input:           rgb(22 14 38);
  --bg-dropdown:        rgb(25 17 44);
  --bg-dropdown-header: rgb(37 26 64);
  --bg-dropdown-hover:  rgb(76 29 105);
  --bg-subtle:          rgb(35 24 60);

  --text-primary:       rgb(253 242 248); /* Crisp Sakura Blossom White */
  --text-secondary:     rgb(233 213 255);
  --text-muted:         rgb(186 154 218);

  --border-subtle:      rgb(76 53 117);
  --border-strong:      rgb(126 92 184);

  --ampel-effective:      rgb(74 222 128);           /* Electric Matcha */
  --ampel-effective-bg:   rgba(74, 222, 128, 0.18);
  --ampel-effective-fill: rgba(34, 197, 94, 0.34);
  --ampel-effective-text: rgb(187 247 208);
  --ampel-effective-glow: rgba(74, 222, 128, 0.44);

  --ampel-neutral:        rgb(250 204 21);           /* Neon Yuzu Gold */
  --ampel-neutral-bg:     rgba(250, 204, 21, 0.18);
  --ampel-neutral-fill:   rgba(234, 179, 8, 0.34);
  --ampel-neutral-text:   rgb(254 240 138);
  --ampel-neutral-glow:   rgba(250, 204, 21, 0.42);

  --ampel-vulnerable:      rgb(251 113 133);         /* Cyber Sakura / Torii Neon */
  --ampel-vulnerable-bg:   rgba(244, 63, 94, 0.22);
  --ampel-vulnerable-fill: rgba(244, 63, 94, 0.36);
  --ampel-vulnerable-text: rgb(254 205 211);
  --ampel-vulnerable-glow: rgba(251, 113, 133, 0.48);

  --accent-telemetry:      rgb(167 139 250);         /* Neo-Tokyo Violet */
  --accent-telemetry-bg:   rgba(167, 139, 250, 0.20);
  --accent-telemetry-text: rgb(221 214 254);
  --accent-telemetry-glow: rgba(167, 139, 250, 0.44);

  --svg-surface:        rgb(25 17 44);
  --svg-sector-idle:    rgba(37, 26, 64, 0.78);
  --svg-stroke:         rgb(253 242 248);
  --svg-stroke-muted:   rgb(186 154 218);
  --svg-text:           rgb(253 242 248);
  --svg-subtext:        rgb(233 213 255);
  --radar-grid:         rgba(253, 242, 248, 0.24);

  --gi-body-fill:       rgb(25 17 44);
  --gi-body-stroke:     rgb(253 242 248);
  --gi-lapel-stroke:    rgb(244 114 182);
  --gi-stitch-stroke:   rgb(167 139 250);
  --gi-obi-fill:        rgb(159 18 57);
  --gi-obi-knot-fill:   rgb(136 19 55);
  --gi-obi-stroke:      rgb(250 204 21);
}

/* ── 2. JSV SPEYER (JSV_Speyer_Logo.png: Alabaster White, Speyerer Dom-Schwarz & Aufgehende Sonne Rot) — LIGHT MODE ── */
:root[data-style-theme="jsv-speyer"],
:root[data-theme="light"][data-style-theme="jsv-speyer"] {
  --bg-canvas:          rgb(244 244 246); /* Fine Architectural Stone-Alabaster */
  --bg-surface:         rgb(255 255 255); /* Pure Diamond Logo White */
  --bg-card:            rgb(250 250 251);
  --bg-card-elevated:   rgb(255 255 255);
  --bg-input:           rgb(255 255 255);
  --bg-dropdown:        rgb(255 255 255);
  --bg-dropdown-header: rgb(242 240 241);
  --bg-dropdown-hover:  rgb(254 226 226); /* Soft Rising-Sun Red Tint */
  --bg-subtle:          rgb(241 239 241);

  --text-primary:       rgb(17 17 19);    /* Speyerer Dom Ink-Black */
  --text-secondary:     rgb(52 52 58);
  --text-muted:         rgb(92 92 102);

  --border-subtle:      rgb(214 212 218);
  --border-strong:      rgb(148 144 154);

  --ampel-effective:      rgb(16 124 65);            /* Championship Tatami Green */
  --ampel-effective-bg:   rgba(16, 124, 65, 0.13);
  --ampel-effective-fill: rgba(16, 124, 65, 0.21);
  --ampel-effective-text: rgb(6 78 59);
  --ampel-effective-glow: rgba(16, 124, 65, 0.22);

  --ampel-neutral:        rgb(180 96 10);            /* Noble Bronze-Gold */
  --ampel-neutral-bg:     rgba(217, 119, 6, 0.15);
  --ampel-neutral-fill:   rgba(217, 119, 6, 0.23);
  --ampel-neutral-text:   rgb(120 53 15);
  --ampel-neutral-glow:   rgba(217, 119, 6, 0.22);

  --ampel-vulnerable:      rgb(218 18 26);           /* JSV Logo Rising-Sun Crimson Red */
  --ampel-vulnerable-bg:   rgba(218, 18, 26, 0.12);
  --ampel-vulnerable-fill: rgba(218, 18, 26, 0.21);
  --ampel-vulnerable-text: rgb(142 12 18);
  --ampel-vulnerable-glow: rgba(218, 18, 26, 0.24);

  --accent-telemetry:      rgb(190 18 26);           /* Speyer Dom & Sun Accent Red */
  --accent-telemetry-bg:   rgba(218, 18, 26, 0.10);
  --accent-telemetry-text: rgb(136 14 20);
  --accent-telemetry-glow: rgba(218, 18, 26, 0.22);

  --svg-surface:        rgb(255 255 255);
  --svg-sector-idle:    rgb(244 244 246);
  --svg-stroke:         rgb(17 17 19);
  --svg-stroke-muted:   rgb(100 100 110);
  --svg-text:           rgb(17 17 19);
  --svg-subtext:        rgb(52 52 58);
  --radar-grid:         rgba(17, 17, 19, 0.20);

  --gi-body-fill:       rgb(255 255 255);
  --gi-body-stroke:     rgb(17 17 19);
  --gi-lapel-stroke:    rgb(218 18 26);
  --gi-stitch-stroke:   rgb(113 113 122);
  --gi-obi-fill:        rgb(17 17 19);
  --gi-obi-knot-fill:   rgb(10 10 12);
  --gi-obi-stroke:      rgb(218 18 26);
}

/* ── 2b. JSV SPEYER (JSV_Speyer_Logo.png: Dom-Obsidian, Diamant-Weiß & Sonnenstrahl-Rot) — DARK MODE ── */
:root.dark[data-style-theme="jsv-speyer"],
:root[data-theme="dark"][data-style-theme="jsv-speyer"] {
  --bg-canvas:          rgb(10 10 12);    /* Deep Cathedral Silhouette Black */
  --bg-surface:         rgb(18 18 22);
  --bg-card:            rgb(27 27 33);
  --bg-card-elevated:   rgb(22 22 27);
  --bg-input:           rgb(15 15 19);
  --bg-dropdown:        rgb(18 18 22);
  --bg-dropdown-header: rgb(27 27 33);
  --bg-dropdown-hover:  rgb(72 16 22);
  --bg-subtle:          rgb(24 24 30);

  --text-primary:       rgb(250 250 252); /* Pure Diamond Logo White */
  --text-secondary:     rgb(212 212 220);
  --text-muted:         rgb(154 154 166);

  --border-subtle:      rgb(52 50 58);
  --border-strong:      rgb(118 112 124);

  --ampel-effective:      rgb(52 211 153);
  --ampel-effective-bg:   rgba(52, 211, 153, 0.18);
  --ampel-effective-fill: rgba(16, 185, 129, 0.34);
  --ampel-effective-text: rgb(167 243 208);
  --ampel-effective-glow: rgba(52, 211, 153, 0.42);

  --ampel-neutral:        rgb(251 191 36);
  --ampel-neutral-bg:     rgba(251, 191, 36, 0.18);
  --ampel-neutral-fill:   rgba(245, 158, 11, 0.32);
  --ampel-neutral-text:   rgb(254 240 138);
  --ampel-neutral-glow:   rgba(251, 191, 36, 0.40);

  --ampel-vulnerable:      rgb(239 52 60);           /* Luminous JSV Rising-Sun Red */
  --ampel-vulnerable-bg:   rgba(239, 52, 60, 0.20);
  --ampel-vulnerable-fill: rgba(239, 52, 60, 0.34);
  --ampel-vulnerable-text: rgb(254 205 211);
  --ampel-vulnerable-glow: rgba(239, 52, 60, 0.46);

  --accent-telemetry:      rgb(248 113 113);         /* Subtle Radiant Crimson-Silver */
  --accent-telemetry-bg:   rgba(239, 52, 60, 0.17);
  --accent-telemetry-text: rgb(254 226 226);
  --accent-telemetry-glow: rgba(239, 52, 60, 0.38);

  --svg-surface:        rgb(18 18 22);
  --svg-sector-idle:    rgba(27, 27, 33, 0.82);
  --svg-stroke:         rgb(250 250 252);
  --svg-stroke-muted:   rgb(154 154 166);
  --svg-text:           rgb(250 250 252);
  --svg-subtext:        rgb(212 212 220);
  --radar-grid:         rgba(250, 250, 252, 0.22);

  --gi-body-fill:       rgb(24 24 30);
  --gi-body-stroke:     rgb(250 250 252);
  --gi-lapel-stroke:    rgb(239 52 60);
  --gi-stitch-stroke:   rgb(161 161 170);
  --gi-obi-fill:        rgb(10 10 12);
  --gi-obi-knot-fill:   rgb(18 18 22);
  --gi-obi-stroke:      rgb(239 52 60);
}

/* ── 3. JUDO VERBAND PFALZ (JVP_Logo.png: Wappen-Schwarz, Pfälzer Löwe Gelb-Gold & Kronen-Rotorange) — LIGHT MODE ── */
:root[data-style-theme="jvp-pfalz"],
:root[data-theme="light"][data-style-theme="jvp-pfalz"] {
  --bg-canvas:          rgb(247 244 235); /* Warm Heraldic Ivory-Parchment */
  --bg-surface:         rgb(255 254 250);
  --bg-card:            rgb(251 248 239);
  --bg-card-elevated:   rgb(255 255 252);
  --bg-input:           rgb(255 255 255);
  --bg-dropdown:        rgb(255 254 250);
  --bg-dropdown-header: rgb(243 236 218);
  --bg-dropdown-hover:  rgb(254 240 188); /* Soft Palatinate Lion Yellow-Gold Tint */
  --bg-subtle:          rgb(242 235 216);

  --text-primary:       rgb(14 13 11);    /* JVP Crest Velvet Black */
  --text-secondary:     rgb(54 48 40);
  --text-muted:         rgb(94 84 72);

  --border-subtle:      rgb(220 206 174);
  --border-strong:      rgb(182 156 104);

  --ampel-effective:      rgb(21 128 61);            /* Palatinate Emerald Green */
  --ampel-effective-bg:   rgba(21, 128, 61, 0.14);
  --ampel-effective-fill: rgba(21, 128, 61, 0.22);
  --ampel-effective-text: rgb(20 83 45);
  --ampel-effective-glow: rgba(21, 128, 61, 0.22);

  --ampel-neutral:        rgb(184 120 0);            /* JVP Lion Gold (High-Contrast on Ivory) */
  --ampel-neutral-bg:     rgba(245, 196, 0, 0.20);
  --ampel-neutral-fill:   rgba(245, 196, 0, 0.30);
  --ampel-neutral-text:   rgb(104 64 0);
  --ampel-neutral-glow:   rgba(245, 196, 0, 0.28);

  --ampel-vulnerable:      rgb(224 60 18);           /* JVP Logo Crown & Claws Vermilion Red-Orange */
  --ampel-vulnerable-bg:   rgba(230, 68, 21, 0.14);
  --ampel-vulnerable-fill: rgba(230, 68, 21, 0.23);
  --ampel-vulnerable-text: rgb(146 34 10);
  --ampel-vulnerable-glow: rgba(230, 68, 21, 0.24);

  --accent-telemetry:      rgb(172 108 0);           /* Heraldic Lion Gold Telemetry */
  --accent-telemetry-bg:   rgba(245, 196, 0, 0.16);
  --accent-telemetry-text: rgb(98 58 0);
  --accent-telemetry-glow: rgba(245, 196, 0, 0.28);

  --svg-surface:        rgb(255 254 250);
  --svg-sector-idle:    rgb(242 235 216);
  --svg-stroke:         rgb(14 13 11);
  --svg-stroke-muted:   rgb(112 98 82);
  --svg-text:           rgb(14 13 11);
  --svg-subtext:        rgb(54 48 40);
  --radar-grid:         rgba(14, 13, 11, 0.22);

  --gi-body-fill:       rgb(255 254 250);
  --gi-body-stroke:     rgb(14 13 11);
  --gi-lapel-stroke:    rgb(224 60 18);
  --gi-stitch-stroke:   rgb(168 142 96);
  --gi-obi-fill:        rgb(14 13 11);
  --gi-obi-knot-fill:   rgb(8 8 8);
  --gi-obi-stroke:      rgb(245 196 0);
}

/* ── 3b. JUDO VERBAND PFALZ (JVP_Logo.png: Wappen-Schwarz, Löwen-Gelbgold & Kronen-Rotorange) — DARK MODE ── */
:root.dark[data-style-theme="jvp-pfalz"],
:root[data-theme="dark"][data-style-theme="jvp-pfalz"] {
  --bg-canvas:          rgb(8 8 8);       /* Authentic JVP Shield Velvet Black */
  --bg-surface:         rgb(16 15 13);
  --bg-card:            rgb(26 23 19);
  --bg-card-elevated:   rgb(21 19 16);
  --bg-input:           rgb(12 11 10);
  --bg-dropdown:        rgb(16 15 13);
  --bg-dropdown-header: rgb(26 23 19);
  --bg-dropdown-hover:  rgb(66 48 10);
  --bg-subtle:          rgb(23 20 16);

  --text-primary:       rgb(252 249 240); /* Crest Border White-Ivory */
  --text-secondary:     rgb(236 220 180);
  --text-muted:         rgb(178 160 128);

  --border-subtle:      rgb(66 54 34);
  --border-strong:      rgb(156 124 52);

  --ampel-effective:      rgb(52 211 153);
  --ampel-effective-bg:   rgba(52, 211, 153, 0.18);
  --ampel-effective-fill: rgba(16, 185, 129, 0.34);
  --ampel-effective-text: rgb(167 243 208);
  --ampel-effective-glow: rgba(52, 211, 153, 0.42);

  --ampel-neutral:        rgb(255 218 10);           /* Authentic JVP Lion Gold-Yellow */
  --ampel-neutral-bg:     rgba(255, 218, 10, 0.18);
  --ampel-neutral-fill:   rgba(255, 218, 10, 0.32);
  --ampel-neutral-text:   rgb(254 243 176);
  --ampel-neutral-glow:   rgba(255, 218, 10, 0.44);

  --ampel-vulnerable:      rgb(238 78 28);           /* JVP Crown & Claws Vermilion Red-Orange */
  --ampel-vulnerable-bg:   rgba(238, 78, 28, 0.22);
  --ampel-vulnerable-fill: rgba(238, 78, 28, 0.36);
  --ampel-vulnerable-text: rgb(254 215 190);
  --ampel-vulnerable-glow: rgba(238, 78, 28, 0.46);

  --accent-telemetry:      rgb(255 218 10);          /* Palatinate Lion Gold Telemetry */
  --accent-telemetry-bg:   rgba(255, 218, 10, 0.16);
  --accent-telemetry-text: rgb(254 243 176);
  --accent-telemetry-glow: rgba(255, 218, 10, 0.42);

  --svg-surface:        rgb(16 15 13);
  --svg-sector-idle:    rgba(26, 23, 19, 0.84);
  --svg-stroke:         rgb(252 249 240);
  --svg-stroke-muted:   rgb(178 160 128);
  --svg-text:           rgb(252 249 240);
  --svg-subtext:        rgb(236 220 180);
  --radar-grid:         rgba(255, 218, 10, 0.22);

  --gi-body-fill:       rgb(21 19 16);
  --gi-body-stroke:     rgb(252 249 240);
  --gi-lapel-stroke:    rgb(255 218 10);
  --gi-stitch-stroke:   rgb(238 78 28);
  --gi-obi-fill:        rgb(8 8 8);
  --gi-obi-knot-fill:   rgb(16 15 13);
  --gi-obi-stroke:      rgb(238 78 28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  background-color: var(--bg-canvas);
  margin: 0;
  padding: 24px 16px 64px;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute; top: -48px; left: 16px;
  background: var(--ampel-vulnerable); color: rgb(255 255 255);
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  font-weight: 800; z-index: 100; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }

html body .container {
  max-width: 1140px;
  margin: 0 auto;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  padding: 36px 40px 48px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.container::before {
  content: "柔道";
  position: absolute;
  top: 18px; right: 28px;
  font-family: var(--font-jp);
  font-size: 104px; font-weight: 700;
  color: var(--ampel-vulnerable); opacity: 0.06;
  pointer-events: none; line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
:root[data-style-theme="japanese-fun"] .container::before {
  content: "一本";
  color: var(--ampel-vulnerable);
  opacity: 0.08;
}
:root[data-style-theme="jsv-speyer"] .container {
  border-top: 4px solid rgb(218 18 26);
}
:root[data-style-theme="jsv-speyer"] .container::before {
  content: "";
  top: 16px;
  right: 26px;
  width: 112px;
  height: 112px;
  background-image: url("JSV_Speyer_Logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.085;
}
:root[data-style-theme="jvp-pfalz"] .container {
  border-top: 4px solid rgb(230 68 21);
}
:root[data-style-theme="jvp-pfalz"] .container::before {
  content: "";
  top: 16px;
  right: 28px;
  width: 96px;
  height: 114px;
  background-image: url("JVP_Logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.085;
}

.formblatt-header { text-align: center; margin-bottom: 22px; }
.header-theme-crest {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
  transition: transform var(--dur) var(--ease);
}
.header-theme-crest[hidden] {
  display: none !important;
}
.status-pulse-dot { background-color: var(--ampel-effective); }
.formblatt-badge {
  background-color: var(--ampel-vulnerable-bg);
  border: 1px solid var(--ampel-vulnerable);
  color: var(--ampel-vulnerable-text);
}
.style-theme-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--accent-telemetry-bg);
  border: 1px solid var(--accent-telemetry);
  color: var(--accent-telemetry-text);
}
.style-theme-chip-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.header-subtitle { color: var(--text-secondary); }

html body h1 {
  font-size: 1.95rem; font-weight: 900;
  letter-spacing: -0.02em;
  text-align: center; text-transform: uppercase;
  color: var(--text-primary);
  margin: 6px 0 0; padding-bottom: 14px;
  position: relative;
}
h1::after {
  content: ""; position: absolute;
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: 84px; height: 3px;
  background: linear-gradient(90deg, var(--ampel-vulnerable), var(--accent-telemetry));
  border-radius: 2px;
}

/* ═══════════════ Rollen- & Profil-Leiste (HUD) ═══════════════ */
html body .role-profile-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
html body .role-switch {
  display: inline-flex;
  background-color: var(--bg-surface);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  gap: 4px;
}
html body .role-btn {
  min-height: 44px;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--text-secondary);
  font-weight: 800;
  font-size: 0.84rem;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
html body .role-btn:hover { color: var(--text-primary); }
html body .role-btn[aria-pressed="true"] {
  background-color: var(--ampel-vulnerable);
  color: rgb(255 255 255);
  box-shadow: 0 2px 10px var(--ampel-vulnerable-glow);
}

.profile-manager {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
  min-width: 240px;
}
html body .profile-manager select {
  max-width: 270px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 700;
}

.toolbar {
  display: flex; gap: 10px;
  justify-content: flex-end; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap;
}

/* ═══════════════ State-of-the-Art Style Theme Switcher ═══════════════ */
.style-theme-switcher {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-subtle);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
html body .style-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
html body .style-theme-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-surface);
}
html body .style-theme-btn[aria-pressed="true"] {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--accent-telemetry);
  box-shadow: 0 2px 10px var(--accent-telemetry-glow);
}
.style-theme-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
}
.style-theme-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(15, 23, 42, 0.25);
}
.swatch-default  { background: linear-gradient(135deg, rgb(2 132 199), rgb(5 150 105)); }
.swatch-japanese { background: linear-gradient(135deg, rgb(220 38 38), rgb(245 158 11)); }
.swatch-speyer   { background: linear-gradient(135deg, rgb(17 17 19), rgb(218 18 26)); }
.swatch-pfalz    { background: linear-gradient(135deg, rgb(14 13 11), rgb(245 196 0), rgb(224 60 18)); }

html body .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  line-height: 1;
  color: var(--text-primary);
}
.theme-mode-label {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}
.theme-icon-moon { display: block; color: var(--text-primary); }
.theme-icon-sun  { display: none; color: var(--ampel-neutral); }
:root.dark .theme-icon-moon,
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root.dark .theme-icon-sun,
:root[data-theme="dark"] .theme-icon-sun  { display: block; }

html body .gkkz-badge {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  padding: 8px 16px;
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--ampel-vulnerable);
  border-radius: 999px;
  font-size: 0.82rem;
  margin-right: auto;
}
.gkkz-badge-label { color: var(--ampel-vulnerable-text); }
.gkkz-badge-bar { background-color: var(--bg-surface); border: 1px solid var(--border-subtle); }
.gkkz-badge-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ampel-vulnerable), var(--ampel-neutral), var(--ampel-effective));
  transition: width 0.4s var(--ease);
}
.gkkz-badge-fill[data-state="complete"] {
  background: var(--ampel-effective);
}
.gkkz-badge-percent {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 800; min-width: 40px; text-align: right;
  color: var(--text-primary);
}

.progress-container { background-color: var(--bg-subtle); border: 1px solid var(--border-subtle); }
.progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ampel-vulnerable), var(--accent-telemetry), var(--ampel-effective));
  border-radius: 999px;
  transition: width 0.4s var(--ease);
}

/* ═══════════════ Tactical Chain Synthesis Banner ═══════════════ */
html body .tactical-chain-banner {
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-subtle);
  border-left: 5px solid var(--ampel-effective);
  color: var(--text-primary);
}
#tacticalChainContent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  width: 100%;
}
.tactical-chain-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}
.tactical-chain-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-telemetry-text);
}
.tactical-chain-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}
.tactical-chain-sep { display: none; }
.chain-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

/* ═══════════════ Semantic Accent Labels & Legends ═══════════════ */
html body .athlete-meta-grid,
html body .ikkz-section {
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
}

/* ═══════════════ Subtle Public Judo Data Feed / Athlete Telemetry ═══════════════ */
html body .athlete-stats-feed {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-telemetry);
  padding: 10px 14px;
  margin-top: -10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur) var(--ease);
}
html body .athlete-stats-feed[hidden] {
  display: none !important;
}
.stats-feed-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.stats-feed-identity {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.stats-feed-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--ampel-effective);
  box-shadow: 0 0 6px var(--ampel-effective-glow);
}
.stats-feed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--accent-telemetry-bg);
  color: var(--accent-telemetry-text);
  border: 1px solid var(--accent-telemetry);
}
.stats-feed-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}
.stats-feed-pill-gold {
  background-color: var(--ampel-neutral-bg);
  color: var(--ampel-neutral-text);
  border-color: var(--ampel-neutral);
}
.stats-feed-pill-tech {
  background-color: var(--ampel-effective-bg);
  color: var(--ampel-effective-text);
  border-color: var(--ampel-effective);
}
.stats-feed-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html body .stats-feed-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.71rem;
  font-weight: 800;
  background-color: var(--bg-surface);
  color: var(--accent-telemetry-text);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
html body .stats-feed-action-btn:hover {
  background-color: var(--accent-telemetry-bg);
  border-color: var(--accent-telemetry);
}
.stats-feed-details {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stats-feed-details[hidden] {
  display: none !important;
}
.stats-feed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.stats-feed-source {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
}
.stats-feed-portal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.stats-feed-portal-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  text-decoration: none;
  background-color: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  transition: all var(--dur) var(--ease);
}
.stats-feed-portal-link:hover {
  color: var(--accent-telemetry-text);
  border-color: var(--accent-telemetry);
  background-color: var(--accent-telemetry-bg);
}
html body .trainer-section {
  background-color: var(--bg-card);
  border: 2px solid var(--accent-telemetry);
}
html body .label-accent-rose    { color: var(--ampel-vulnerable-text) !important; }
html body .label-accent-emerald { color: var(--ampel-effective-text) !important; }
html body .label-accent-sky     { color: var(--accent-telemetry-text) !important; }
html body .label-accent-amber   { color: var(--ampel-neutral-text) !important; }

html body .legend-emerald { color: var(--ampel-effective-text) !important; border-color: var(--ampel-effective) !important; }
html body .legend-sky     { color: var(--accent-telemetry-text) !important; border-color: var(--accent-telemetry) !important; }
html body .legend-rose    { color: var(--ampel-vulnerable-text) !important; border-color: var(--ampel-vulnerable) !important; }
html body .legend-amber   { color: var(--ampel-neutral-text) !important; border-color: var(--ampel-neutral) !important; }

/* ═══════════════ Fieldsets & Inputs (WCAG 2.1 AA High Contrast) ═══════════════ */
html body fieldset {
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin: 0 0 22px;
  background-color: var(--bg-card);
  color: var(--text-primary);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
html body fieldset:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

html body legend {
  font-weight: 900; font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 6px;
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  color: var(--text-primary);
}
html body legend::before {
  content: "▍"; color: var(--ampel-vulnerable); margin-right: 6px;
}

.form-group { margin-bottom: 16px; }
html body .label-text,
html body label {
  display: block; margin-bottom: 6px;
  font-weight: 800; font-size: 0.84rem;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

html body input[type="text"],
html body textarea,
html body select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1.5px solid var(--border-strong) !important;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary) !important;
  background-color: var(--bg-input) !important;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
html body select option {
  color: var(--text-primary) !important;
  background-color: var(--bg-surface) !important;
  font-weight: 600;
}
html body input[type="text"]::placeholder,
html body textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}
html body input[type="text"]:focus,
html body textarea:focus,
html body select:focus {
  outline: none;
  border-color: var(--accent-telemetry) !important;
  box-shadow: 0 0 0 3px var(--accent-telemetry-bg);
}
html body textarea { min-height: 82px; resize: vertical; }

html body .technique-input.is-valid {
  border-color: var(--ampel-effective) !important;
  background-color: var(--bg-input) !important;
  box-shadow: inset 4px 0 0 var(--ampel-effective);
}
html body .technique-input.is-invalid {
  border-color: var(--ampel-vulnerable) !important;
  background-color: var(--bg-input) !important;
  box-shadow: inset 4px 0 0 var(--ampel-vulnerable);
}
html body .technique-input.is-forbidden {
  border-color: var(--ampel-neutral) !important;
  background-color: var(--bg-input) !important;
  box-shadow: inset 4px 0 0 var(--ampel-neutral);
}

html body input[type="text"]:-webkit-autofill,
html body input[type="text"]:-webkit-autofill:hover,
html body input[type="text"]:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
  box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
}

.ac-host,
.input-with-validation {
  position: relative;
}
.input-with-validation { display: flex; align-items: center; gap: 8px; }
.input-with-validation input { flex: 1; }

html body fieldset:has(.ac-dropdown:not([hidden])),
html body .direction-block:has(.ac-dropdown:not([hidden])),
html body .kombination-row:has(.ac-dropdown:not([hidden])),
html body .kaeshi-row:has(.ac-dropdown:not([hidden])) {
  z-index: 50;
  position: relative;
}

/* ═══════════════ Kontext-Smart Autocomplete Dropdown (Theme-Matched) ═══════════════ */
html body .ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 120;
  background-color: var(--bg-dropdown) !important;
  color: var(--text-primary) !important;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
html body .ac-dropdown[hidden] {
  display: none !important;
}
html body .ac-dropdown-header {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--bg-dropdown-header) !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border-subtle);
}
html body .ac-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  min-height: 40px;
  cursor: pointer;
  background-color: var(--bg-dropdown) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 120ms var(--ease);
}
html body .ac-option:last-child {
  border-bottom: none;
}
html body .ac-option:hover,
html body .ac-option[aria-selected="true"] {
  background-color: var(--bg-dropdown-hover) !important;
  color: var(--text-primary) !important;
}
html body .ac-option-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary) !important;
}
html body .ac-option-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-telemetry-text) !important;
  background-color: var(--accent-telemetry-bg);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.validation-indicator {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-weight: 800; font-size: 0.95rem;
  flex-shrink: 0; visibility: hidden;
}
.validation-indicator.valid {
  visibility: visible; color: rgb(255 255 255); background-color: var(--ampel-effective);
}
:root.dark .validation-indicator.valid,
:root[data-theme="dark"] .validation-indicator.valid {
  color: rgb(2 44 34);
}
.validation-indicator.invalid {
  visibility: visible; color: rgb(255 255 255); background-color: var(--ampel-vulnerable);
}
.validation-indicator.forbidden {
  visibility: visible; color: rgb(15 23 42); background-color: var(--ampel-neutral);
}

.validation-feedback {
  font-size: 0.8rem;
  margin-top: 4px;
  font-weight: 700;
  display: none;
}
.validation-feedback.is-invalid   { display: block; color: var(--ampel-vulnerable-text); }
.validation-feedback.is-forbidden { display: block; color: var(--ampel-neutral-text); }

/* Quick-Pick Technique Chips (Mat-Edge Tactility) */
.quick-chips-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.quick-chips-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-right: 2px;
}
html body .tech-chip {
  min-height: 36px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background-color: var(--bg-subtle);
  color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
html body .tech-chip:hover,
html body .tech-chip.is-active {
  border-color: var(--accent-telemetry);
  background-color: var(--accent-telemetry-bg);
  color: var(--accent-telemetry-text);
}

.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
html body .radio-group label {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-weight: 800; cursor: pointer;
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background-color: var(--bg-input);
  color: var(--text-primary);
  margin-bottom: 0;
  transition: all var(--dur) var(--ease);
}
html body .radio-group label:hover { border-color: var(--accent-telemetry); }
html body .radio-group label:has(input:checked) {
  background-color: var(--accent-telemetry-bg);
  border-color: var(--accent-telemetry);
  color: var(--accent-telemetry-text);
}
.radio-group input[type="radio"] { accent-color: var(--accent-telemetry); width: 18px; height: 18px; }

html body .checkbox-group {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
}
html body .checkbox-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 0.86rem; font-weight: 700;
  color: var(--text-primary) !important;
  background-color: var(--bg-card);
  cursor: pointer; padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  margin-bottom: 0;
  transition: all var(--dur) var(--ease);
}
html body .checkbox-item:hover { background-color: var(--bg-subtle); border-color: var(--border-strong); }
html body .checkbox-item:has(input:checked) {
  background-color: var(--ampel-effective-bg);
  border-color: var(--ampel-effective);
  color: var(--ampel-effective-text) !important;
}
.checkbox-item input[type="checkbox"] { accent-color: var(--ampel-effective); width: 18px; height: 18px; flex-shrink: 0; }

/* ═══════════════ 2. Uwagi Grip-Mapper (Dynamic Gi SVG) ═══════════════ */
html body .uwagi-planner,
html body .grip-break-box,
html body .stance-switcher-bar,
html body .ampel-legend,
html body .flowchart-box {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-primary);
}
html body .uwagi-svg-box {
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-subtle);
}
html body .scenario-tabs,
html body .stance-tabs {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
html body .scenario-tab,
html body .stance-tab {
  min-height: 44px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
html body .scenario-tab:hover,
html body .stance-tab:hover { color: var(--text-primary); }
html body .scenario-tab[aria-pressed="true"],
html body .stance-tab[aria-pressed="true"] {
  background-color: var(--accent-telemetry);
  color: rgb(255 255 255);
  box-shadow: 0 2px 10px var(--accent-telemetry-glow);
}
:root.dark body .scenario-tab[aria-pressed="true"],
:root.dark body .stance-tab[aria-pressed="true"],
:root[data-theme="dark"] body .scenario-tab[aria-pressed="true"],
:root[data-theme="dark"] body .stance-tab[aria-pressed="true"] {
  color: rgb(2 6 23);
}

html body .phase-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  background-color: var(--bg-input);
  color: var(--text-primary);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
html body .phase-btn.phase-opening[aria-pressed="true"] {
  border-color: var(--accent-telemetry);
  background-color: var(--accent-telemetry-bg);
  color: var(--accent-telemetry-text);
}
html body .phase-btn.phase-target[aria-pressed="true"] {
  border-color: var(--ampel-vulnerable);
  background-color: var(--ampel-vulnerable-bg);
  color: var(--ampel-vulnerable-text);
}
.phase-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.dot-opening { background-color: var(--accent-telemetry); }
.dot-target  { background-color: var(--ampel-vulnerable); }

html body .grip-summary {
  font-size: 0.84rem;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-left: 4px solid var(--accent-telemetry);
}
.grip-summary-line { margin: 4px 0; }
.badge-opening {
  display: inline-block;
  background-color: var(--accent-telemetry-bg);
  color: var(--text-primary);
  border: 1.5px solid var(--accent-telemetry);
  padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; margin: 2px;
}
.badge-target {
  display: inline-block;
  background-color: var(--ampel-vulnerable-bg);
  color: var(--text-primary);
  border: 1.5px solid var(--ampel-vulnerable);
  padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; margin: 2px;
}

#uwagiSvg { width: 100%; max-width: 280px; height: auto; overflow: visible; }
.svg-marker-telemetry { fill: var(--accent-telemetry); }
.svg-line-telemetry   { stroke: var(--accent-telemetry); }
.svg-marker-stroke    { fill: var(--svg-stroke); }

.gi-telemetry-axis {
  stroke: var(--svg-stroke-muted);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.45;
}
.gi-telemetry-ring {
  fill: none;
  stroke: var(--svg-stroke-muted);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  opacity: 0.45;
}
.uwagi-body {
  fill: var(--gi-body-fill);
  stroke: var(--gi-body-stroke);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.uwagi-lapel {
  fill: none;
  stroke: var(--gi-lapel-stroke);
  stroke-width: 2.2;
}
.uwagi-lapel-stitch {
  fill: none;
  stroke: var(--gi-stitch-stroke);
  stroke-width: 1.3;
  stroke-dasharray: 4 3;
}
.uwagi-weave {
  stroke: var(--gi-stitch-stroke);
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
}
.uwagi-obi {
  fill: var(--gi-obi-fill);
  stroke: var(--gi-obi-stroke);
  stroke-width: 1.6;
}
.uwagi-obi-knot {
  fill: var(--gi-obi-knot-fill);
  stroke: var(--gi-obi-stroke);
  stroke-width: 1.6;
}
.uwagi-caption {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  font-weight: 800;
  fill: var(--svg-subtext);
  stroke: none;
}

@keyframes hotspotPulse {
  0%, 100% { opacity: 0.96; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(1.05); }
}
.grip-node {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}
.grip-node:not([data-grip-state]) {
  animation: hotspotPulse 2.4s ease-in-out infinite;
}
.grip-node .grip-halo {
  fill: var(--accent-telemetry-bg);
  stroke: var(--svg-stroke-muted);
  stroke-width: 1.2;
  stroke-dasharray: 2 2;
  transition: all var(--dur) var(--ease);
}
.grip-node .grip-hotspot {
  fill: var(--svg-surface);
  stroke: var(--svg-stroke);
  stroke-width: 2;
  transition: all var(--dur) var(--ease);
}
.grip-node:hover .grip-hotspot {
  stroke: var(--accent-telemetry);
  stroke-width: 2.6;
}
.grip-node text {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 900;
  fill: var(--svg-text);
  stroke: none;
  text-anchor: middle;
  pointer-events: none;
}

/* Active Grip States (High-Contrast Light & Dark) */
.grip-node[data-grip-state] { animation: none !important; }

.grip-node[data-grip-state="opening"] .grip-halo {
  fill: var(--accent-telemetry-bg);
  stroke: var(--accent-telemetry);
  stroke-dasharray: none;
}
.grip-node[data-grip-state="opening"] .grip-hotspot {
  fill: var(--accent-telemetry);
  stroke: var(--svg-surface);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px var(--accent-telemetry-glow));
}
.grip-node[data-grip-state="opening"] text { fill: rgb(255 255 255); stroke: none; }
:root.dark .grip-node[data-grip-state="opening"] text,
:root[data-theme="dark"] .grip-node[data-grip-state="opening"] text {
  fill: rgb(2 6 23);
}

.grip-node[data-grip-state="target"] .grip-halo {
  fill: var(--ampel-vulnerable-bg);
  stroke: var(--ampel-vulnerable);
  stroke-dasharray: none;
}
.grip-node[data-grip-state="target"] .grip-hotspot {
  fill: var(--ampel-vulnerable);
  stroke: var(--svg-surface);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px var(--ampel-vulnerable-glow));
}
.grip-node[data-grip-state="target"] text { fill: rgb(255 255 255); stroke: none; }

.grip-node[data-grip-state="both"] .grip-halo {
  fill: var(--ampel-effective-bg);
  stroke: var(--ampel-effective);
  stroke-dasharray: none;
}
.grip-node[data-grip-state="both"] .grip-hotspot {
  fill: var(--ampel-effective);
  stroke: var(--svg-surface);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px var(--ampel-effective-glow));
}
.grip-node[data-grip-state="both"] text { fill: rgb(255 255 255); stroke: none; }
:root.dark .grip-node[data-grip-state="both"] text,
:root[data-theme="dark"] .grip-node[data-grip-state="both"] text {
  fill: rgb(2 44 34);
}

.grip-vector-line {
  stroke: var(--accent-telemetry);
  stroke-width: 2.2;
  stroke-dasharray: 5 3;
  pointer-events: none;
}

.grip-break-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background-color: var(--bg-subtle);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--ampel-neutral);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

/* ═══════════════ 3. 360° Wurfkreis Matrix (Dynamic Contrast SVGs) ═══════════════ */
.stances-comparison-grid[data-view-mode="migi"] #stancePanelHidari { display: none; }
.stances-comparison-grid[data-view-mode="hidari"] #stancePanelMigi { display: none; }
.stances-comparison-grid[data-view-mode="both"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

html body .stance-panel-title {
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-subtle);
  color: var(--text-primary);
}
html body .relation-badge-migi {
  background-color: var(--accent-telemetry-bg);
  color: var(--accent-telemetry-text);
  border: 1px solid var(--accent-telemetry);
}
html body .relation-badge-hidari {
  background-color: var(--ampel-neutral-bg);
  color: var(--ampel-neutral-text);
  border: 1px solid var(--ampel-neutral);
}
html body .telemetry-tag {
  color: var(--text-secondary);
}

.wurfkreis-wrapper {
  position: relative;
  width: 340px; height: 340px;
  margin: 26px auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wurfkreis-svg {
  width: 100%; height: 100%;
  overflow: visible;
  color: var(--svg-text);
}
.wk-ring {
  fill: none;
  stroke: var(--svg-stroke-muted);
}
.wk-ring-inner {
  fill: none;
  stroke: var(--border-subtle);
}
.wk-axis-line {
  stroke: var(--svg-stroke-muted);
  stroke-width: 1.8;
  stroke-dasharray: 4 4;
  pointer-events: none;
}
.wk-quad-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  font-weight: 900;
  fill: var(--svg-text);
  stroke: none;
  pointer-events: none;
}
.wk-quad-sub {
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 700;
  fill: var(--svg-subtext);
  stroke: none;
  pointer-events: none;
}
.wk-quad-tech {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  fill: var(--accent-telemetry-text);
  stroke: none;
  pointer-events: none;
}

/* Sector Styling & Smooth Hover / Traffic-Light Transitions */
.wk-sector {
  fill: var(--svg-sector-idle);
  stroke: var(--svg-stroke-muted);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill 220ms var(--ease), stroke 220ms var(--ease), stroke-width 220ms var(--ease), filter 220ms var(--ease);
}
.wk-sector:hover,
.wk-sector[data-hover="true"] {
  fill: var(--accent-telemetry-bg);
  stroke: var(--accent-telemetry);
  stroke-width: 2.5;
}
.wk-sector[data-rating="effective"] {
  fill: var(--ampel-effective-fill);
  stroke: var(--ampel-effective);
  stroke-width: 2;
}
.wk-sector[data-rating="effective"]:hover,
.wk-sector[data-rating="effective"][data-hover="true"] {
  filter: drop-shadow(0 0 12px var(--ampel-effective-glow));
}
.wk-sector[data-rating="neutral"] {
  fill: var(--ampel-neutral-fill);
  stroke: var(--ampel-neutral);
  stroke-width: 2;
}
.wk-sector[data-rating="neutral"]:hover,
.wk-sector[data-rating="neutral"][data-hover="true"] {
  filter: drop-shadow(0 0 12px var(--ampel-neutral-glow));
}
.wk-sector[data-rating="vulnerable"] {
  fill: var(--ampel-vulnerable-fill);
  stroke: var(--ampel-vulnerable);
  stroke-width: 2;
}
.wk-sector[data-rating="vulnerable"]:hover,
.wk-sector[data-rating="vulnerable"][data-hover="true"] {
  filter: drop-shadow(0 0 12px var(--ampel-vulnerable-glow));
}
.wk-sector[data-active="true"] {
  stroke: var(--svg-stroke);
  stroke-width: 3.2;
}

/* Attack Vector Path (Center -> Quadrant Node) */
.wk-attack-path {
  stroke: var(--svg-stroke-muted);
  stroke-width: 1.8;
  stroke-dasharray: 5 4;
  opacity: 0.55;
  pointer-events: none;
  transition: stroke 220ms var(--ease), stroke-width 220ms var(--ease), opacity 220ms var(--ease), filter 220ms var(--ease);
}
.wk-attack-path[data-highlight="true"] {
  stroke: var(--accent-telemetry);
  stroke-width: 3.2;
  stroke-dasharray: none;
  opacity: 1;
}
.wk-attack-path[data-rating="effective"][data-highlight="true"] {
  stroke: var(--ampel-effective);
  filter: drop-shadow(0 0 8px var(--ampel-effective-glow));
}
.wk-attack-path[data-rating="neutral"][data-highlight="true"] {
  stroke: var(--ampel-neutral);
  filter: drop-shadow(0 0 8px var(--ampel-neutral-glow));
}
.wk-attack-path[data-rating="vulnerable"][data-highlight="true"] {
  stroke: var(--ampel-vulnerable);
  filter: drop-shadow(0 0 8px var(--ampel-vulnerable-glow));
}

.wk-node-dot {
  fill: var(--svg-surface);
  stroke: var(--svg-stroke);
  stroke-width: 2;
  pointer-events: none;
  transition: all 220ms var(--ease);
}
.wk-node-dot[data-highlight="true"] {
  r: 7;
  fill: var(--accent-telemetry);
  stroke: var(--svg-surface);
}

.wk-center-outer {
  fill: var(--svg-surface);
  stroke: var(--ampel-vulnerable);
  stroke-width: 3;
}
.wk-center-outer.wk-center-outer-hidari {
  stroke: var(--accent-telemetry);
}
.wk-center {
  fill: var(--ampel-vulnerable);
}
.wk-center.wk-center-hidari {
  fill: var(--accent-telemetry);
}
.wk-center-label {
  font-family: var(--font-mono);
  font-weight: 900; font-size: 13px;
  letter-spacing: 0.12em;
  fill: rgb(255 255 255);
  stroke: none;
}
.wk-center-sublabel {
  font-family: var(--font-sans);
  font-weight: 800; font-size: 9.5px;
  fill: rgb(255 255 255);
  stroke: none;
}
:root.dark .wk-center.wk-center-hidari ~ .wk-center-label,
:root.dark .wk-center.wk-center-hidari ~ .wk-center-sublabel,
:root[data-theme="dark"] .wk-center.wk-center-hidari ~ .wk-center-label,
:root[data-theme="dark"] .wk-center.wk-center-hidari ~ .wk-center-sublabel {
  fill: rgb(2 6 23);
}

/* Tactile 44x44px Corner Quadrant Pills (Optimized for Light & Dark Mode) */
html body .wk-btn {
  position: absolute;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all var(--dur) var(--ease);
  box-shadow: var(--shadow-sm);
}
html body .wk-btn:hover {
  border-color: var(--accent-telemetry);
  box-shadow: 0 0 12px var(--accent-telemetry-glow);
}
html body .wk-btn[aria-pressed="true"] {
  background-color: var(--accent-telemetry);
  color: rgb(255 255 255);
  border-color: var(--accent-telemetry);
}
:root.dark body .wk-btn[aria-pressed="true"],
:root[data-theme="dark"] body .wk-btn[aria-pressed="true"] {
  color: rgb(2 6 23);
}

/* Ampel States on Wurfkreis Quadrant Buttons */
html body .wk-btn[data-rating="effective"] {
  background-color: var(--ampel-effective);
  color: rgb(255 255 255);
  border-color: var(--ampel-effective);
  box-shadow: 0 2px 12px var(--ampel-effective-glow);
}
:root.dark body .wk-btn[data-rating="effective"],
:root[data-theme="dark"] body .wk-btn[data-rating="effective"] {
  color: rgb(2 44 34);
}

html body .wk-btn[data-rating="neutral"] {
  background-color: var(--ampel-neutral);
  color: rgb(255 255 255);
  border-color: var(--ampel-neutral);
  box-shadow: 0 2px 12px var(--ampel-neutral-glow);
}
:root.dark body .wk-btn[data-rating="neutral"],
:root[data-theme="dark"] body .wk-btn[data-rating="neutral"] {
  color: rgb(2 6 23);
}

html body .wk-btn[data-rating="vulnerable"] {
  background-color: var(--ampel-vulnerable);
  color: rgb(255 255 255);
  border-color: var(--ampel-vulnerable);
  box-shadow: 0 2px 12px var(--ampel-vulnerable-glow);
}
html body .wk-btn[data-active="true"] {
  box-shadow: 0 0 0 3px var(--accent-telemetry);
}

.wk-btn-tl { top: 0;    left: -14px; }
.wk-btn-tr { top: 0;    right: -14px; }
.wk-btn-bl { bottom: 0; left: -14px; }
.wk-btn-br { bottom: 0; right: -14px; }
.wk-btn-tl:hover { transform: translate(-2px, -2px); }
.wk-btn-tr:hover { transform: translate(2px, -2px); }
.wk-btn-bl:hover { transform: translate(-2px, 2px); }
.wk-btn-br:hover { transform: translate(2px, 2px); }

/* ═══════════════ Interaktiver Blind-Spots Wurfkreis-Monitor ═══════════════ */
html body .blind-spots-box {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 2px solid var(--ampel-vulnerable);
  font-size: 0.86rem;
}
html body .blind-spots-box.is-clean {
  background-color: var(--ampel-effective-bg);
  border-color: var(--ampel-effective);
}
.blindspot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.blindspot-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
}
.bs-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle;
}
.bs-dot-blind   { background-color: var(--ampel-neutral); }
.bs-dot-deficit { background-color: var(--ampel-vulnerable); }
.bs-dot-ok      { background-color: var(--ampel-effective); }

.blindspot-circles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
html body .blindspot-card {
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
}
.blindspot-card h4 {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}
.bs-svg {
  width: 100%;
  max-width: 210px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.bs-sector {
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}
.bs-sector:hover { opacity: 0.85; }
.bs-sector path {
  stroke: var(--svg-stroke-muted);
  stroke-width: 1.5;
  transition: all var(--dur) var(--ease);
}
.bs-sector[data-bs-state="blind"] path {
  fill: var(--ampel-neutral-fill);
  stroke: var(--ampel-neutral);
  stroke-dasharray: 4 2;
}
.bs-sector[data-bs-state="deficit"] path {
  fill: var(--ampel-vulnerable-fill);
  stroke: var(--ampel-vulnerable);
}
.bs-sector[data-bs-state="ok"] path {
  fill: var(--ampel-effective-fill);
  stroke: var(--ampel-effective);
}
.bs-label {
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 800;
  fill: var(--svg-text);
  stroke: none !important;
  pointer-events: none;
}
.bs-status-tag {
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 700;
  fill: var(--svg-subtext);
  stroke: none !important;
  pointer-events: none;
}
.bs-sector[data-bs-state="blind"] .bs-status-tag   { fill: var(--ampel-neutral-text); }
.bs-sector[data-bs-state="deficit"] .bs-status-tag { fill: var(--ampel-vulnerable-text); }
.bs-sector[data-bs-state="ok"] .bs-status-tag      { fill: var(--ampel-effective-text); }
.bs-center-circle {
  fill: var(--text-primary);
  stroke: var(--accent-telemetry);
  stroke-width: 2;
}
:root.dark .bs-center-circle,
:root[data-theme="dark"] .bs-center-circle {
  fill: var(--bg-surface);
}
.bs-center-text {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 900;
  fill: var(--bg-surface);
  stroke: none !important;
  pointer-events: none;
}
:root.dark .bs-center-text,
:root[data-theme="dark"] .bs-center-text {
  fill: var(--text-primary);
}

/* ═══════════════ Richtungs-Blöcke & Tactical Ampel Buttons ═══════════════ */
html body .direction-block {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-left: 5px solid var(--accent-telemetry);
  border-radius: var(--radius-sm);
  padding: 16px 18px; margin-bottom: 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
html body .direction-block:hover { box-shadow: var(--shadow-sm); }
html body .direction-block[data-dir^="vorne"]      { border-left-color: var(--ampel-vulnerable); }
html body .direction-block[data-dir^="hauptseite"] { border-left-color: var(--accent-telemetry); }
html body .direction-block[data-dir^="hinten"]     { border-left-color: var(--ampel-effective); }
html body .direction-block[data-dir^="gegenseite"] { border-left-color: var(--ampel-neutral); }

.direction-header {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 0.88rem; margin-bottom: 8px;
  color: var(--text-primary);
}
.dir-percent {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--text-secondary); font-size: 0.84rem;
}
.dir-percent[data-state="complete"] { color: var(--ampel-effective); }

.mini-progress {
  height: 5px; background-color: var(--bg-subtle);
  border-radius: 999px; overflow: hidden; margin-bottom: 12px;
}
.mini-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ampel-vulnerable), var(--ampel-neutral));
  transition: width 0.4s var(--ease), background 0.3s var(--ease);
}
.mini-progress-fill[data-state="complete"] {
  background: var(--ampel-effective);
}

/* Tactical Ampel Rating Buttons (Contrast-Optimized for Light & Dark Mode) */
.rating-group { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
html body .rating-btn {
  flex: 1; min-width: 115px; min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--border-strong);
  background-color: var(--bg-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: 0.8rem; font-weight: 800;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
html body .rating-btn:hover { border-color: var(--accent-telemetry); }

html body .rating-btn[aria-pressed="true"].rating-effective {
  background-color: var(--ampel-effective);
  color: rgb(255 255 255);
  border-color: var(--ampel-effective);
  box-shadow: 0 2px 12px var(--ampel-effective-glow);
}
:root.dark body .rating-btn[aria-pressed="true"].rating-effective,
:root[data-theme="dark"] body .rating-btn[aria-pressed="true"].rating-effective {
  color: rgb(2 44 34);
}

html body .rating-btn[aria-pressed="true"].rating-neutral {
  background-color: var(--ampel-neutral);
  color: rgb(255 255 255);
  border-color: var(--ampel-neutral);
  box-shadow: 0 2px 12px var(--ampel-neutral-glow);
}
:root.dark body .rating-btn[aria-pressed="true"].rating-neutral,
:root[data-theme="dark"] body .rating-btn[aria-pressed="true"].rating-neutral {
  color: rgb(2 6 23);
}

html body .rating-btn[aria-pressed="true"].rating-vulnerable {
  background-color: var(--ampel-vulnerable);
  color: rgb(255 255 255);
  border-color: var(--ampel-vulnerable);
  box-shadow: 0 2px 12px var(--ampel-vulnerable-glow);
}

.fussarbeit-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border-subtle);
}
.fussarbeit-row label { font-size: 0.82rem; margin: 0; min-width: 170px; color: var(--text-secondary); }
.fussarbeit-row select { flex: 1; }

/* ═══════════════ 4. Flowchart Builder & Handlungsketten ═══════════════ */
.kombinationen-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
html body .kombination-row {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto;
  gap: 10px; align-items: center;
  padding: 12px; border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
}
html body .kaeshi-row {
  display: grid; grid-template-columns: 1fr auto 1fr auto;
  gap: 10px; align-items: center;
  padding: 12px; border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface);
}
.kombination-row .arrow, .kaeshi-row .arrow {
  font-weight: 900; color: var(--accent-telemetry); font-size: 1.15rem;
}
html body .kombination-row .remove-btn,
html body .kaeshi-row .remove-btn,
html body .grip-break-item .remove-btn {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--ampel-vulnerable-bg);
  border: 1.5px solid var(--ampel-vulnerable);
  color: var(--ampel-vulnerable); cursor: pointer;
  font-size: 1.2rem; font-weight: bold;
  border-radius: var(--radius-sm);
  transition: all var(--dur) var(--ease);
}
html body .kombination-row .remove-btn:hover,
html body .kaeshi-row .remove-btn:hover,
html body .grip-break-item .remove-btn:hover {
  background-color: var(--ampel-vulnerable); color: rgb(255 255 255);
}

.flowchart-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.flow-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
.flow-chain-index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 4px 9px;
  border-radius: 6px;
  margin-right: 4px;
}
/* Glassmorphic Technique Cards in Flowchart (High Contrast in Both Modes) */
.flow-node {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 800;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
}
.flow-node:hover { transform: translateY(-2px); }
.flow-node-stage {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.flow-node.node-prep {
  border-color: var(--accent-telemetry);
  background-color: var(--accent-telemetry-bg);
}
.flow-node.node-main {
  border-color: var(--ampel-vulnerable);
  background-color: var(--ampel-vulnerable-bg);
}
.flow-node.node-ne {
  border-color: var(--ampel-effective);
  background-color: var(--ampel-effective-bg);
}
.flow-svg-arrow {
  width: 42px;
  height: 20px;
  flex-shrink: 0;
  overflow: visible;
  color: var(--accent-telemetry);
}

/* ═══════════════ 5. Übergang Stand / Boden (If/Else) ═══════════════ */
.ifelse-tree { margin-bottom: 18px; }
.ifelse-root-node {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  padding: 12px 16px;
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-strong);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.ifelse-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
html body .ifelse-branch {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
html body .branch-success  { border-top: 4px solid var(--ampel-effective); }
html body .branch-fallback { border-top: 4px solid var(--ampel-neutral); }
.branch-badge {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.badge-success {
  background-color: var(--ampel-effective-bg);
  color: var(--ampel-effective-text);
  border: 1px solid var(--ampel-effective);
}
.badge-fallback {
  background-color: var(--ampel-neutral-bg);
  color: var(--ampel-neutral-text);
  border: 1px solid var(--ampel-neutral);
}

.combo-select-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html body .combo-select-input select {
  font-size: 0.85rem;
  padding: 8px 12px;
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

/* ═══════════════ 7. Zusammenklappbare Skizze (Optional) ═══════════════ */
.collapsible-section {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  overflow: hidden;
}
.collapsible-summary {
  cursor: pointer;
  min-height: 44px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-primary);
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  background-color: var(--bg-subtle);
}
.collapsible-summary::-webkit-details-marker { display: none; }
.collapsible-summary::before {
  content: '▸ ';
  color: var(--accent-telemetry);
  margin-right: 8px;
  transition: transform var(--dur) var(--ease);
  display: inline-block;
}
.collapsible-section[open] > .collapsible-summary::before {
  transform: rotate(90deg);
}
.optional-badge {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: auto;
}
.collapsible-body { padding: 16px; }

.image-preview-box {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 18px; text-align: center;
  background-color: var(--bg-subtle); min-height: 140px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  font-weight: 600;
}
.image-preview-box:has(img) { border-style: solid; border-color: var(--accent-telemetry); }
.image-preview-box img { max-width: 100%; max-height: 260px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.image-actions { margin-top: 12px; display: flex; gap: 10px; }

/* ═══════════════ 8. Judo-Skills, Top-3 Highlight & Radar ═══════════════ */
.kpi-top3-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background-color: var(--ampel-neutral-bg);
  border: 1.5px solid var(--ampel-neutral);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  color: var(--text-primary);
}
.top3-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  color: var(--text-primary);
  font-weight: 800;
  font-size: 0.78rem;
}
.top3-badge.rank-1 { border-color: var(--ampel-vulnerable); background-color: var(--ampel-vulnerable-bg); }
.top3-badge.rank-2 { border-color: var(--accent-telemetry); background-color: var(--accent-telemetry-bg); }
.top3-badge.rank-3 { border-color: var(--ampel-effective);  background-color: var(--ampel-effective-bg); }

.kpi-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.kpi-list { display: flex; flex-direction: column; gap: 10px; }
html body .kpi-row {
  display: grid; grid-template-columns: 1.2fr 1.8fr auto; gap: 10px; align-items: center;
  min-height: 44px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: all var(--dur) var(--ease);
}
html body .kpi-row.is-top-skill {
  background-color: var(--ampel-neutral-bg);
  border-color: var(--ampel-neutral);
  border-left: 4px solid var(--ampel-neutral);
}
.kpi-row label { font-size: 0.84rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.kpi-slider, .trainer-kpi-slider { width: 100%; height: 24px; cursor: pointer; accent-color: var(--ampel-vulnerable); }
.trainer-kpi-slider { accent-color: var(--accent-telemetry); }
.kpi-slider:not(.is-set), .trainer-kpi-slider:not(.is-set) { opacity: 0.65; }
.kpi-value {
  min-width: 44px; text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 0.88rem;
  color: var(--text-secondary);
}
.kpi-value.is-set { color: var(--ampel-vulnerable); }
[data-trainer-kpi-value].is-set { color: var(--accent-telemetry); }
.kpi-summary {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
  display: flex; justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.kpi-summary strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ampel-effective); }
html body .kpi-radar-wrapper {
  display: flex; justify-content: center; align-items: center;
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 16px;
}
#kpiRadar { width: 100%; max-width: 340px; height: auto; overflow: visible; color: var(--svg-text); }
.radar-grid { fill: none; stroke: var(--radar-grid); stroke-width: 1.2; }
.radar-axis { stroke: var(--radar-grid); stroke-width: 1.2; stroke-dasharray: 2 3; }
.radar-area { fill: var(--ampel-vulnerable-bg); stroke: var(--ampel-vulnerable); stroke-width: 2.4; }
.radar-point { fill: var(--ampel-vulnerable); }
.radar-point-top { fill: var(--ampel-neutral); stroke: var(--svg-surface); stroke-width: 2; }
.radar-area-trainer { fill: var(--accent-telemetry-bg); stroke: var(--accent-telemetry); stroke-width: 2.4; stroke-dasharray: 5 3; }
.radar-point-trainer { fill: var(--accent-telemetry); }
.radar-label { font-size: 11.5px; fill: var(--svg-text); stroke: none; font-weight: 800; font-family: var(--font-sans); }

/* Trainer-KPI-Vergleich & Reflexion */
html body .trainer-kpi-comparison-box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 18px;
}
.sub-heading {
  margin: 0 0 14px;
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-telemetry);
}
.kpi-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px;
  align-items: start;
}
html body .kpi-reflection-box {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 0.83rem;
  color: var(--text-primary);
}
.reflection-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}
.reflection-table th, .reflection-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.reflection-table th { font-weight: 800; font-size: 0.74rem; text-transform: uppercase; color: var(--text-secondary); }
.delta-pos { color: var(--ampel-effective); font-weight: 800; font-family: var(--font-mono); }
.delta-neg { color: var(--ampel-vulnerable); font-weight: 800; font-family: var(--font-mono); }
.delta-neutral { color: var(--text-secondary); font-family: var(--font-mono); }

/* ═══════════════ Buttons & Actions (44x44px Touch Targets) ═══════════════ */
.actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 32px; flex-wrap: wrap; }
html body .btn {
  min-height: 44px;
  padding: 10px 22px; border: none;
  border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 800;
  font-size: 0.86rem; letter-spacing: 0.03em;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all var(--dur) var(--ease);
}
html body .btn:focus-visible { outline: 2px solid var(--accent-telemetry); outline-offset: 2px; }
html body .btn-primary {
  background-color: var(--ampel-vulnerable);
  color: rgb(255 255 255);
  box-shadow: 0 4px 14px var(--ampel-vulnerable-glow);
}
html body .btn-primary:hover { transform: translateY(-1px); }
html body .btn-secondary {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
}
html body .btn-secondary:hover {
  border-color: var(--accent-telemetry);
  background-color: var(--bg-subtle);
}
html body .btn-small { padding: 8px 14px; font-size: 0.8rem; }

/* ═══════════════ 9. GKKZ Section ═══════════════ */
.gkkz-total { margin: 16px 0 20px; }
.gkkz-total-header {
  display: flex; justify-content: space-between;
  font-size: 0.92rem; margin-bottom: 8px; font-weight: 800;
  color: var(--text-primary);
}
.gkkz-total-percent { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ampel-vulnerable); font-weight: 800; }
.gkkz-total-bar { height: 10px; background: var(--bg-subtle); border-radius: 999px; overflow: hidden; }
.gkkz-total-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ampel-vulnerable), var(--ampel-neutral), var(--accent-telemetry));
  transition: width 0.4s var(--ease);
}
.gkkz-total-fill[data-state="complete"] { background: var(--ampel-effective); }

.gkkz-container { display: flex; flex-direction: column; gap: 12px; }
.gkkz-category { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); overflow: hidden; }
.gkkz-category > summary {
  cursor: pointer; min-height: 44px; padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; list-style: none;
  color: var(--text-primary);
  background: var(--bg-subtle);
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--dur) var(--ease);
}
.gkkz-category > summary::-webkit-details-marker { display: none; }
.gkkz-category > summary::before {
  content: '▸'; display: inline-block;
  transition: transform var(--dur) var(--ease);
  color: var(--ampel-vulnerable); font-size: 0.9rem;
}
.gkkz-category[open] > summary::before { transform: rotate(90deg); }

.gkkz-cat-icon {
  font-family: var(--font-jp);
  font-size: 1.25rem; font-weight: 700;
  color: var(--ampel-vulnerable); width: 32px; text-align: center;
}
.gkkz-cat-title { flex: 1; }
.gkkz-cat-percent { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 0.84rem; }
.gkkz-cat-percent[data-state="complete"] { color: var(--ampel-effective); font-weight: 800; }
.gkkz-cat-progress { height: 3px; background: var(--bg-subtle); }
.gkkz-cat-progress-fill { height: 100%; width: 0%; background: var(--ampel-vulnerable); transition: width 0.3s var(--ease); }
.gkkz-cat-progress-fill[data-state="complete"] { background: var(--ampel-effective); }

.gkkz-items { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.gkkz-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 0.88rem;
  color: var(--text-secondary);
  transition: color var(--dur) var(--ease);
}
.gkkz-item.is-covered { color: var(--text-primary); font-weight: 700; }
.gkkz-icon { width: 22px; text-align: center; flex-shrink: 0; font-size: 1rem; color: var(--ampel-effective); font-weight: 800; }
.gkkz-item-label { flex: 1; }
.gkkz-note { font-size: 0.75rem; color: var(--ampel-effective); font-weight: 700; margin-left: 4px; }

.gkkz-checkbox-label {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  cursor: pointer; margin: 0; font-weight: 700;
  color: var(--text-primary);
  width: 100%; padding: 4px 0;
  transition: color var(--dur) var(--ease);
}
.gkkz-checkbox-label:hover { color: var(--accent-telemetry); }
.gkkz-checkbox-label input[type="checkbox"] { accent-color: var(--ampel-effective); width: 18px; height: 18px; }

.gkkz-hint {
  margin-top: 16px; padding: 12px 16px;
  background: var(--ampel-neutral-bg);
  border-left: 4px solid var(--ampel-neutral);
  border-radius: var(--radius-sm); font-size: 0.82rem;
  color: var(--text-primary);
}

/* ═══════════════ 10. Trainer-Dashboard ═══════════════ */
body[data-role="athlet"] #trainerDashboard {
  display: none;
}
.trainer-deficit-summary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-telemetry);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 0.86rem;
}

.print-signatures { display: none; }

.notation-info {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--ampel-vulnerable);
  padding: 14px 18px; font-size: 0.84rem;
  border-radius: var(--radius-sm); margin-top: 24px;
  color: var(--text-primary);
}

.hint { font-size: 0.84rem; color: var(--text-secondary); margin: 6px 0 14px; }
.legend-dot {
  display: inline-block; width: 11px; height: 11px;
  border-radius: 50%; vertical-align: middle;
}
.legend-effective  { background: var(--ampel-effective); }
.legend-neutral    { background: var(--ampel-neutral); }
.legend-vulnerable { background: var(--ampel-vulnerable); }

.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;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1.5fr 0.8fr 1.5fr; gap: 20px; }
.grid-3-equal { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: 1.4fr 0.7fr 0.9fr 1.3fr; gap: 14px; }

/* ═══════════════ Mobile-First & Tatami Touch Responsiveness ═══════════════ */
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-3-equal, .grid-4,
  .uwagi-planner, .ifelse-branches,
  .stances-comparison-grid[data-view-mode="both"],
  .kpi-layout, .kpi-dual-grid, .blindspot-circles-grid, .grip-break-controls {
    grid-template-columns: 1fr;
  }
  .kombination-row, .kaeshi-row {
    grid-template-columns: 1fr;
  }
  .kombination-row .arrow, .kaeshi-row .arrow { display: none; }
  .container { padding: 22px 16px 36px; }
  h1 { font-size: 1.4rem; }
  .container::before { font-size: 64px; top: 12px; right: 16px; }
  .wurfkreis-wrapper { width: 290px; height: 290px; margin: 24px auto 28px; }
  .wk-btn { font-size: 0.68rem; padding: 8px 11px; min-height: 44px; }
  .wk-btn-tl { left: -4px; }
  .wk-btn-tr { right: -4px; }
  .wk-btn-bl { left: -4px; }
  .wk-btn-br { right: -4px; }
  .fussarbeit-row { flex-direction: column; align-items: stretch; gap: 6px; }
}

/* ═══════════════ CSP-konforme Breiten (0-100%) ═══════════════ */
[data-pct="0"]{width:0%}[data-pct="1"]{width:1%}[data-pct="2"]{width:2%}[data-pct="3"]{width:3%}[data-pct="4"]{width:4%}[data-pct="5"]{width:5%}[data-pct="6"]{width:6%}[data-pct="7"]{width:7%}[data-pct="8"]{width:8%}[data-pct="9"]{width:9%}[data-pct="10"]{width:10%}[data-pct="11"]{width:11%}[data-pct="12"]{width:12%}[data-pct="13"]{width:13%}[data-pct="14"]{width:14%}[data-pct="15"]{width:15%}[data-pct="16"]{width:16%}[data-pct="17"]{width:17%}[data-pct="18"]{width:18%}[data-pct="19"]{width:19%}[data-pct="20"]{width:20%}[data-pct="21"]{width:21%}[data-pct="22"]{width:22%}[data-pct="23"]{width:23%}[data-pct="24"]{width:24%}[data-pct="25"]{width:25%}[data-pct="26"]{width:26%}[data-pct="27"]{width:27%}[data-pct="28"]{width:28%}[data-pct="29"]{width:29%}[data-pct="30"]{width:30%}[data-pct="31"]{width:31%}[data-pct="32"]{width:32%}[data-pct="33"]{width:33%}[data-pct="34"]{width:34%}[data-pct="35"]{width:35%}[data-pct="36"]{width:36%}[data-pct="37"]{width:37%}[data-pct="38"]{width:38%}[data-pct="39"]{width:39%}[data-pct="40"]{width:40%}[data-pct="41"]{width:41%}[data-pct="42"]{width:42%}[data-pct="43"]{width:43%}[data-pct="44"]{width:44%}[data-pct="45"]{width:45%}[data-pct="46"]{width:46%}[data-pct="47"]{width:47%}[data-pct="48"]{width:48%}[data-pct="49"]{width:49%}[data-pct="50"]{width:50%}[data-pct="51"]{width:51%}[data-pct="52"]{width:52%}[data-pct="53"]{width:53%}[data-pct="54"]{width:54%}[data-pct="55"]{width:55%}[data-pct="56"]{width:56%}[data-pct="57"]{width:57%}[data-pct="58"]{width:58%}[data-pct="59"]{width:59%}[data-pct="60"]{width:60%}[data-pct="61"]{width:61%}[data-pct="62"]{width:62%}[data-pct="63"]{width:63%}[data-pct="64"]{width:64%}[data-pct="65"]{width:65%}[data-pct="66"]{width:66%}[data-pct="67"]{width:67%}[data-pct="68"]{width:68%}[data-pct="69"]{width:69%}[data-pct="70"]{width:70%}[data-pct="71"]{width:71%}[data-pct="72"]{width:72%}[data-pct="73"]{width:73%}[data-pct="74"]{width:74%}[data-pct="75"]{width:75%}[data-pct="76"]{width:76%}[data-pct="77"]{width:77%}[data-pct="78"]{width:78%}[data-pct="79"]{width:79%}[data-pct="80"]{width:80%}[data-pct="81"]{width:81%}[data-pct="82"]{width:82%}[data-pct="83"]{width:83%}[data-pct="84"]{width:84%}[data-pct="85"]{width:85%}[data-pct="86"]{width:86%}[data-pct="87"]{width:87%}[data-pct="88"]{width:88%}[data-pct="89"]{width:89%}[data-pct="90"]{width:90%}[data-pct="91"]{width:91%}[data-pct="92"]{width:92%}[data-pct="93"]{width:93%}[data-pct="94"]{width:94%}[data-pct="95"]{width:95%}[data-pct="96"]{width:96%}[data-pct="97"]{width:97%}[data-pct="98"]{width:98%}[data-pct="99"]{width:99%}[data-pct="100"]{width:100%}

/* ═══════════════ Formblatt Print-Layout ═══════════════ */
@media print {
  :root, :root.dark, :root[data-theme="dark"], :root[data-theme="light"] {
    --text-primary: rgb(0 0 0);
    --text-secondary: rgb(34 34 34);
    --svg-text: rgb(0 0 0);
    --svg-stroke: rgb(0 0 0);
    --radar-grid: rgb(180 180 180);
  }
  body { background: rgb(255 255 255) !important; padding: 0; color: rgb(0 0 0) !important; font-size: 12px; }
  .container {
    box-shadow: none; padding: 0;
    max-width: 100%; border: none; background: rgb(255 255 255) !important;
  }
  .container::before { display: none; }
  h1 { font-size: 1.35rem; padding-bottom: 6px; color: rgb(0 0 0) !important; }
  h1::after { background: rgb(0 0 0); box-shadow: none; }

  .actions, .toolbar, .role-profile-bar, .progress-container,
  input[type="file"], .mini-progress, .quick-chips-row, #autoChainBtn,
  .hint, .kpi-slider, .trainer-kpi-slider, .gkkz-badge,
  .image-actions, #addKombinationBtn, #addKaeshiBtn, #addGripBreakBtn,
  .grip-break-controls, .phase-selector, .stance-switcher-bar,
  .preset-select, .ac-dropdown,
  .kombination-row .remove-btn, .kaeshi-row .remove-btn, .grip-break-item .remove-btn,
  .validation-indicator, .validation-feedback,
  .gkkz-checkbox-label input[type="checkbox"],
  .legend-dot { display: none !important; }

  .stances-comparison-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  #stancePanelMigi, #stancePanelHidari { display: block !important; }

  .rating-btn:not([aria-pressed="true"]) { display: none !important; }
  .rating-group { margin-top: 4px; }
  .rating-btn[aria-pressed="true"] {
    flex: 0 0 auto;
    min-height: 0;
    padding: 1px 6px;
    font-size: 0.72rem;
    border: 1px solid rgb(0 0 0) !important;
    color: rgb(0 0 0) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .wurfkreis-wrapper {
    width: 180px; height: 180px;
    margin: 12px auto 16px;
  }
  .kpi-radar-wrapper {
    background: rgb(255 255 255) !important;
    border: none;
    padding: 4px;
  }
  #kpiRadar { max-width: 190px; }

  fieldset { background: rgb(255 255 255) !important; page-break-inside: avoid; border-color: rgb(120 120 120); padding: 12px 14px; margin-bottom: 12px; }

  input[type="text"], textarea, select {
    border: none;
    border-bottom: 1px solid rgb(0 0 0);
    border-radius: 0;
    min-height: 0;
    padding: 2px;
    background: transparent !important;
    color: rgb(0 0 0) !important;
  }

  .fussarbeit-row { display: block; border-top: none; margin-top: 4px; padding-top: 2px; }
  .fussarbeit-row label { min-width: 0; display: inline; }
  .fussarbeit-row select {
    display: inline !important;
    border: none; background: transparent;
    padding: 0; width: auto;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    font-size: 0.85rem;
  }

  .technique-input.is-valid,
  .technique-input.is-invalid,
  .technique-input.is-forbidden { background: transparent !important; }

  .direction-block { border: none; padding: 4px 0; margin: 0 0 6px; background: rgb(255 255 255) !important; }
  .kpi-row { grid-template-columns: 1fr auto; min-height: 0; background: transparent !important; }

  .gkkz-category { display: block !important; background: rgb(255 255 255) !important; }
  .gkkz-category > * { display: block !important; background: rgb(255 255 255) !important; }
  .gkkz-items { display: block !important; }
  .gkkz-cat-progress { display: none !important; }

  .gkkz-checkbox-label input[type="checkbox"] { display: none; }
  .gkkz-checkbox-label .gkkz-item-label::before {
    content: attr(data-checked) " ";
    font-weight: bold; margin-right: 4px;
  }

  .print-signatures {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-top: 28px;
    page-break-inside: avoid;
  }
  .sig-box {
    border-top: 1px solid rgb(0 0 0);
    padding-top: 4px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
  }

  .notation-info { border: none; padding: 0; font-size: 0.72rem; background: transparent !important; margin-top: 12px; }
}