:root {
      --bg: #0f0f13; --surface: #1a1a24; --surface2: #22223a; --border: #2e2e48;
      --text: #e8e8f0; --text-muted: #8888aa; --accent: #7c6af7; --accent2: #5b4fe8;
      --on-accent: #ffffff;
      --header-bg: rgba(15, 15, 19, 0.92);
      --accent-tint-bg: rgba(124, 106, 247, 0.12);
      --accent-tint-bg-subtle: rgba(124, 106, 247, 0.09);
      --accent-tint-border: rgba(124, 106, 247, 0.42);
      --accent-tint-border-strong: rgba(124, 106, 247, 0.48);
      --accent-tint-text: #c4b8fa;
      --score-chip-bg-low: #fef08a;
      --score-chip-bg-high: #7c6af7;
      --score-chip-border-low: #eab308;
      --score-chip-border-high: #5b4fe8;
      /* wie scoreChipTextColorForBg() in JS */
      --score-chip-text-dark: rgb(24, 22, 28);
      --score-chip-text-light: #ffffff;
      --urgency-hoch: #ef4444; --urgency-hoch-bg: rgba(239,68,68,0.12);
      --urgency-mittel: #f59e0b; --urgency-mittel-bg: rgba(245,158,11,0.12);
      --urgency-niedrig: #10b981; --urgency-niedrig-bg: rgba(16,185,129,0.12);
      --nutzen-hoch: #06b6d4; --nutzen-hoch-bg: rgba(6,182,212,0.12);
      --nutzen-mittel: #8b5cf6; --nutzen-mittel-bg: rgba(139,92,246,0.12);
      --nutzen-gering: #64748b; --nutzen-gering-bg: rgba(100,116,139,0.12);
      --aufwand-gering: #10b981; --aufwand-gering-bg: rgba(16,185,129,0.12);
      --aufwand-mittel: #f59e0b; --aufwand-mittel-bg: rgba(245,158,11,0.12);
      --aufwand-hoch:   #ef4444; --aufwand-hoch-bg:   rgba(239,68,68,0.12);
      --radius: 14px; --radius-sm: 8px; --shadow: 0 4px 24px rgba(0,0,0,0.4);
      /* Kopfzeile: Suche und Icon-Buttons gleiche Außenhöhe (8+8 Padding + ~18px Inhalt + 2px Rand) */
      --header-control-h: 36px;
      /* Kachel-Tags & Tag-Chips im Modal (kompakt) */
      --idea-tag-pill-fs: 0.72rem;
      --idea-tag-pill-pad-y: 2px;
      --idea-tag-pill-pad-x: 8px;
      /* Meta-Zeile: Datum, Fälligkeit, in Arbeit, Erledigt + Kachel-Pills — wie .filter-chip (Dringlichkeit etc.) */
      --idea-meta-pill-fs: 0.8rem;
      --idea-meta-pill-pad-y: 4px;
      --idea-meta-pill-pad-x: 12px;
      --idea-meta-pill-date-input-min-h: 20px;
    }
    /* Standard (#fdfdfc) & Hellblau (#60a5fa) */
    :root[data-theme="standard"] {
      --bg: #fdfdfc;
      --surface: #f5f5f3;
      --surface2: #eeede9;
      --border: rgba(20, 20, 25, 0.12);
      --text: #1f2937;
      --text-muted: rgba(31, 41, 55, 0.55);
      --accent: #60a5fa;
      --accent2: #3b82f6;
      --on-accent: #ffffff;
      --header-bg: rgba(253, 253, 252, 0.94);
      --logo-text-ideen: #1f2937;
      --logo-text-app: #3b82f6;
      --accent-tint-bg: rgba(96, 165, 250, 0.14);
      --accent-tint-bg-subtle: rgba(96, 165, 250, 0.08);
      --accent-tint-border: rgba(59, 130, 246, 0.4);
      --accent-tint-border-strong: rgba(59, 130, 246, 0.55);
      --accent-tint-text: #1e40af;
      --score-chip-bg-low: #fef3c7;
      --score-chip-bg-high: #60a5fa;
      --score-chip-border-low: #fde68a;
      --score-chip-border-high: #3b82f6;
      --shadow: 0 4px 22px rgba(20, 20, 25, 0.08);
    }
    /* Espresso (#3E2723) & Peony (#F4C9D6) */
    :root[data-theme="espresso"] {
      --bg: #3e2723;
      --surface: #4e342e;
      --surface2: #5d4037;
      --border: rgba(244, 201, 214, 0.22);
      --text: #f4c9d6;
      --text-muted: rgba(244, 201, 214, 0.58);
      --accent: #f4c9d6;
      --accent2: #e8b4c8;
      --on-accent: #3e2723;
      --header-bg: rgba(62, 39, 35, 0.94);
      --logo-text-ideen: #f4c9d6;
      --logo-text-app: #fde8ef;
      --accent-tint-bg: rgba(244, 201, 214, 0.14);
      --accent-tint-bg-subtle: rgba(244, 201, 214, 0.1);
      --accent-tint-border: rgba(244, 201, 214, 0.42);
      --accent-tint-border-strong: rgba(244, 201, 214, 0.52);
      --accent-tint-text: #fff8fa;
      --score-chip-bg-low: #d7ccc8;
      --score-chip-bg-high: #f4c9d6;
      --score-chip-border-low: #a1887f;
      --score-chip-border-high: #e8b4c8;
      --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    }
    /* Coffee Bean (#20130D) & Morning Butter (#F3D98F) */
    :root[data-theme="coffee-butter"] {
      --bg: #20130d;
      --surface: #2a1a12;
      --surface2: #352214;
      --border: rgba(243, 217, 143, 0.22);
      --text: #f3d98f;
      --text-muted: rgba(243, 217, 143, 0.55);
      --accent: #f3d98f;
      --accent2: #e8c878;
      --on-accent: #20130d;
      --header-bg: rgba(32, 19, 13, 0.94);
      --logo-text-ideen: #f3d98f;
      --logo-text-app: #f5e6b8;
      --accent-tint-bg: rgba(243, 217, 143, 0.12);
      --accent-tint-bg-subtle: rgba(243, 217, 143, 0.08);
      --accent-tint-border: rgba(243, 217, 143, 0.4);
      --accent-tint-border-strong: rgba(243, 217, 143, 0.5);
      --accent-tint-text: #faf3d6;
      --score-chip-bg-low: #3a2618;
      --score-chip-bg-high: #e8d28a;
      --score-chip-border-low: #5c4030;
      --score-chip-border-high: #d4b86a;
      --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    }
    /* Regal Navy (#0D3B66) & Lemon Chiffon (#FAF0CA) */
    :root[data-theme="regal-chiffon"] {
      --bg: #0d3b66;
      --surface: #124570;
      --surface2: #184f82;
      --border: rgba(250, 240, 202, 0.22);
      --text: #faf0ca;
      --text-muted: rgba(250, 240, 202, 0.55);
      --accent: #faf0ca;
      --accent2: #ede8c0;
      --on-accent: #0d3b66;
      --header-bg: rgba(13, 59, 102, 0.94);
      --logo-text-ideen: #faf0ca;
      --logo-text-app: #fff8e8;
      --accent-tint-bg: rgba(250, 240, 202, 0.12);
      --accent-tint-bg-subtle: rgba(250, 240, 202, 0.08);
      --accent-tint-border: rgba(250, 240, 202, 0.4);
      --accent-tint-border-strong: rgba(250, 240, 202, 0.52);
      --accent-tint-text: #ffffff;
      --score-chip-bg-low: #134a7a;
      --score-chip-bg-high: #e8e8c8;
      --score-chip-border-low: #1e5a8c;
      --score-chip-border-high: #d4d0a8;
      --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    }
    /* Dark Neon Pink: dunkle Fläche, Akzent #ff1493 */
    :root[data-theme="neon-pink"] {
      --bg: #0a0510;
      --surface: #140a1a;
      --surface2: #1c1024;
      --border: rgba(255, 20, 147, 0.32);
      --text: #fce7f3;
      --text-muted: rgba(252, 231, 243, 0.55);
      --accent: #ff1493;
      --accent2: #ff38a8;
      --on-accent: #ffffff;
      --header-bg: rgba(10, 5, 16, 0.94);
      --logo-text-ideen: #fce7f3;
      --logo-text-app: #ff5fbc;
      --accent-tint-bg: rgba(255, 20, 147, 0.14);
      --accent-tint-bg-subtle: rgba(255, 20, 147, 0.09);
      --accent-tint-border: rgba(255, 20, 147, 0.5);
      --accent-tint-border-strong: rgba(255, 56, 168, 0.6);
      --accent-tint-text: #ffd4ec;
      --score-chip-bg-low: #3d1030;
      --score-chip-bg-high: #ff38a8;
      --score-chip-border-low: #7a1f55;
      --score-chip-border-high: #ff1493;
      --shadow: 0 4px 28px rgba(255, 20, 147, 0.1), 0 4px 24px rgba(0, 0, 0, 0.55);
    }
    /* Neon Pink & Turquoise (#ff1493), Flächen pastell-türkis */
    :root[data-theme="neon-pink-turquoise"] {
      --bg: #b2e0db;
      --surface: #c9ebe8;
      --surface2: #dff5f2;
      --border: rgba(19, 78, 74, 0.2);
      --text: #134e4a;
      --text-muted: rgba(19, 78, 74, 0.58);
      --accent: #ff1493;
      --accent2: #ff38a8;
      --on-accent: #ffffff;
      --header-bg: rgba(178, 224, 219, 0.94);
      --logo-text-ideen: #134e4a;
      --logo-text-app: #ff1493;
      --accent-tint-bg: rgba(255, 20, 147, 0.1);
      --accent-tint-bg-subtle: rgba(19, 78, 74, 0.06);
      --accent-tint-border: rgba(255, 20, 147, 0.38);
      --accent-tint-border-strong: rgba(255, 56, 168, 0.48);
      --accent-tint-text: #c2186d;
      /* Hellere Rosa-Füllung (Mitte low/high), damit Abzug in Rot besser lesbar ist */
      --score-chip-bg-low: #f0d4ec;
      --score-chip-bg-high: #ffc4e4;
      --score-chip-border-low: #e0a8cc;
      --score-chip-border-high: #ff7eb8;
      --shadow: 0 4px 20px rgba(19, 78, 74, 0.12);
    }
    /* Deep Mocha (#3D2E2B) & Powder Petal (#E1D0C9) */
    :root[data-theme="mocha-petal"] {
      --bg: #3d2e2b;
      --surface: #4a3a36;
      --surface2: #564540;
      --border: rgba(225, 208, 201, 0.22);
      --text: #e1d0c9;
      --text-muted: rgba(225, 208, 201, 0.55);
      --accent: #e1d0c9;
      --accent2: #d4c0b8;
      --on-accent: #3d2e2b;
      --header-bg: rgba(61, 46, 43, 0.94);
      --logo-text-ideen: #e1d0c9;
      --logo-text-app: #f5ebe7;
      --accent-tint-bg: rgba(225, 208, 201, 0.12);
      --accent-tint-bg-subtle: rgba(225, 208, 201, 0.08);
      --accent-tint-border: rgba(225, 208, 201, 0.42);
      --accent-tint-border-strong: rgba(225, 208, 201, 0.52);
      --accent-tint-text: #faf6f4;
      --score-chip-bg-low: #6d5c58;
      --score-chip-bg-high: #e1d0c9;
      --score-chip-border-low: #8a7a76;
      --score-chip-border-high: #cbb8b0;
      --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    }
    /* French Blue (#213F95) & Celadon (#A1E1BC) */
    :root[data-theme="french-celadon"] {
      --bg: #213f95;
      --surface: #2a4aa3;
      --surface2: #3356b0;
      --border: rgba(161, 225, 188, 0.26);
      --text: #a1e1bc;
      --text-muted: rgba(161, 225, 188, 0.55);
      --accent: #a1e1bc;
      --accent2: #8fd4b0;
      --on-accent: #213f95;
      --header-bg: rgba(33, 63, 149, 0.94);
      --logo-text-ideen: #a1e1bc;
      --logo-text-app: #d4f5e6;
      --accent-tint-bg: rgba(161, 225, 188, 0.12);
      --accent-tint-bg-subtle: rgba(161, 225, 188, 0.08);
      --accent-tint-border: rgba(161, 225, 188, 0.42);
      --accent-tint-border-strong: rgba(161, 225, 188, 0.55);
      --accent-tint-text: #f0fff6;
      --score-chip-bg-low: #1a3578;
      --score-chip-bg-high: #a1e1bc;
      --score-chip-border-low: #3d5fa8;
      --score-chip-border-high: #8fd4b0;
      --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    }
    /* Matcha (#7A9E6F) & Creamy Foam (#F3EED9); Stone #E3E0D3, Dark Matcha #5B7553, Toasted Brown #C7A27B, Deep Ink #2D2D2A */
    :root[data-theme="matcha-foam"] {
      --bg: #f3eed9;
      --surface: #e3e0d3;
      --surface2: #ebe8dd;
      --border: rgba(45, 45, 42, 0.14);
      --text: #2d2d2a;
      --text-muted: rgba(45, 45, 42, 0.52);
      --accent: #7a9e6f;
      --accent2: #5b7553;
      --on-accent: #ffffff;
      --header-bg: rgba(243, 238, 217, 0.94);
      --logo-text-ideen: #2d2d2a;
      --logo-text-app: #5b7553;
      --accent-tint-bg: rgba(122, 158, 111, 0.16);
      --accent-tint-bg-subtle: rgba(122, 158, 111, 0.1);
      --accent-tint-border: rgba(91, 117, 83, 0.35);
      --accent-tint-border-strong: rgba(91, 117, 83, 0.48);
      --accent-tint-text: #4a6a42;
      --score-chip-bg-low: #efe9d8;
      --score-chip-bg-high: #95b88a;
      --score-chip-border-low: #c9c2b0;
      --score-chip-border-high: #5b7553;
      --score-chip-text-dark: rgb(35, 38, 32);
      --score-chip-text-light: #ffffff;
      --urgency-hoch: #b4533c;
      --urgency-hoch-bg: rgba(180, 83, 60, 0.12);
      --urgency-mittel: #c7a27b;
      --urgency-mittel-bg: rgba(199, 162, 123, 0.18);
      --urgency-niedrig: #5b7553;
      --urgency-niedrig-bg: rgba(91, 117, 83, 0.12);
      --nutzen-hoch: #5b7553;
      --nutzen-hoch-bg: rgba(91, 117, 83, 0.12);
      --nutzen-mittel: #7a9e6f;
      --nutzen-mittel-bg: rgba(122, 158, 111, 0.14);
      --nutzen-gering: #8a8778;
      --nutzen-gering-bg: rgba(138, 135, 120, 0.12);
      --aufwand-gering: #5b7553;
      --aufwand-gering-bg: rgba(91, 117, 83, 0.12);
      --aufwand-mittel: #c7a27b;
      --aufwand-mittel-bg: rgba(199, 162, 123, 0.16);
      --aufwand-hoch: #b4533c;
      --aufwand-hoch-bg: rgba(180, 83, 60, 0.12);
      --shadow: 0 4px 22px rgba(45, 45, 42, 0.08);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

    /* LOGIN */
    #loginScreen { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 20px; }
    #loginScreen.hidden { display: none; }
    .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 36px; width: 100%; max-width: 400px; box-shadow: var(--shadow); }
    .login-logo { text-align: center; font-size: 2.5rem; margin-bottom: 8px; }
    .login-title { text-align: center; font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
    .login-title span { color: var(--accent); }
    .login-subtitle { text-align: center; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 32px; }
    .login-form { display: flex; flex-direction: column; gap: 14px; }
    /* [hidden] allein reicht nicht: .login-form setzt display:flex und überschreibt das */
    #loginFormRecovery[hidden] {
      display: none !important;
    }
    .login-input { width: 100%; padding: 12px 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 0.95rem; font-family: inherit; transition: border-color 0.15s; text-align: center; }
    .login-input:focus { outline: none; border-color: var(--accent); }
    .login-input:disabled { opacity: 0.55; cursor: not-allowed; }
    .login-input::placeholder { color: var(--text-muted); text-align: center; }
    .login-input::-moz-placeholder { color: var(--text-muted); text-align: center; opacity: 1; }
    .login-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
    .login-forgot-wrap { text-align: center; margin-top: 2px; }
    .login-forgot-link {
      background: none;
      border: none;
      padding: 6px 8px;
      font: inherit;
      font-size: 0.82rem;
      color: var(--text-muted);
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }
    .login-forgot-link:hover:not(:disabled) { color: var(--accent); }
    .login-forgot-link:disabled { opacity: 0.55; cursor: not-allowed; text-decoration: none; }
    .login-forgot-status {
      font-size: 0.82rem;
      line-height: 1.45;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      text-align: center;
    }
    .login-forgot-status.ok {
      background: var(--urgency-niedrig-bg);
      color: var(--urgency-niedrig);
    }
    .login-form-recovery .login-recovery-hint {
      font-size: 0.88rem;
      color: var(--text-muted);
      text-align: center;
      margin: 0 0 8px 0;
      line-height: 1.45;
    }
    .login-form-recovery .login-recovery-hint strong { color: var(--text); font-weight: 600; }
    .login-btn { width: 100%; padding: 13px; background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
    .login-btn:hover:not(:disabled) { background: var(--accent2); transform: translateY(-1px); }
    .login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .login-btn-secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
    .login-btn-secondary:hover:not(:disabled) { background: var(--accent-tint-bg); color: var(--accent-tint-text); border-color: var(--accent-tint-border-strong); transform: translateY(-1px); }
    .login-btn-github { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #24292f; color: #ffffff; line-height: 1; }
    .login-btn-github:hover:not(:disabled) { background: #2c333b; transform: translateY(-1px); }
    .login-btn-icon { flex-shrink: 0; display: block; }
    .login-error { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--urgency-hoch-bg); color: var(--urgency-hoch); font-size: 0.85rem; display: none; }
    .login-error.visible { display: block; }
    /* APP */
    #app { display: none; }
    #app.visible { display: block; }

    /* HEADER */
    header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 0; display: flex; flex-direction: column; }
    .header-layout-desktop { display: block; width: 100%; }
    .header-layout-mobile { display: none; width: 100%; }
    .header-layout-desktop .header-row1 {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 20px;
      width: 100%;
      box-sizing: border-box;
    }
    .header-layout-desktop .header-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
    .header-layout-desktop .search-wrap {
      flex: 1 1 0%;
      position: relative;
      min-width: 64px;
      max-width: clamp(88px, 12vw, 152px);
    }
    .header-layout-desktop .header-week-stats-wrap .header-kw-chip,
    .header-layout-desktop .header-week-stats-wrap .header-week-score-chip {
      border-radius: var(--radius-sm);
    }
    .header-layout-mobile .header-row1-side-left {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
    }
    .header-layout-mobile .header-row1-center {
      flex-shrink: 0;
      padding: 0 8px;
    }
    .header-layout-mobile .header-row1-side-right {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }
    .header-layout-mobile .header-row1 {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 20px;
      width: 100%;
      box-sizing: border-box;
    }
    .header-layout-mobile .header-row2 {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 20px 12px;
      box-sizing: border-box;
      border-top: 1px solid var(--border);
      min-height: 0;
    }
    .header-layout-mobile .header-row2-filter-slot {
      flex: 0 0 auto;
      flex-shrink: 0;
    }
    .header-layout-mobile .header-row2-end {
      display: none;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
      flex-shrink: 0;
    }
    .header-tool-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .header-menu-wrap { position: relative; flex-shrink: 0; }
    .header-menu-panel {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 188px;
      padding: 6px;
      display: none;
      flex-direction: column;
      gap: 2px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow);
      z-index: 200;
    }
    .header-menu-wrap.header-menu-open .header-menu-panel {
      display: flex;
    }
    .header-menu-item {
      display: block;
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      border: none;
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 0.875rem;
      cursor: pointer;
      transition: background 0.12s;
    }
    .header-menu-item:hover {
      background: var(--surface2);
      color: var(--text);
    }
    .logo { font-size: 1.5rem; }
    button.header-brand {
      border: none;
      background: transparent;
      padding: 0;
      margin: 0;
      cursor: pointer;
      font: inherit;
      color: inherit;
      -webkit-appearance: none;
      appearance: none;
      text-align: left;
    }
    button.header-brand:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
    header h1 { font-size: 1.2rem; font-weight: 700; flex: 1; color: var(--logo-text-ideen, var(--text)); }
    header h1 span { color: var(--logo-text-app, var(--accent)); }
    :root[data-theme="coffee-butter"] .header-brand h1 span {
      text-shadow: 0 0 8px rgba(243, 217, 143, 0.4), 0 1px 2px rgba(0, 0, 0, 0.45);
    }
    :root[data-theme="regal-chiffon"] .header-brand h1 span {
      text-shadow: 0 0 8px rgba(250, 240, 202, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    }
    :root[data-theme="neon-pink"] .header-brand h1 span {
      text-shadow: 0 0 10px rgba(255, 20, 147, 0.4), 0 1px 2px rgba(0, 0, 0, 0.45);
    }
    :root[data-theme="neon-pink-turquoise"] .header-brand h1 span {
      text-shadow: none;
    }
    :root[data-theme="mocha-petal"] .header-brand h1 span {
      text-shadow: 0 0 6px rgba(225, 208, 201, 0.35), 0 1px 2px rgba(0, 0, 0, 0.35);
    }
    :root[data-theme="french-celadon"] .header-brand h1 span {
      text-shadow: 0 0 8px rgba(161, 225, 188, 0.4), 0 1px 2px rgba(0, 0, 0, 0.35);
    }
    :root[data-theme="matcha-foam"] .header-brand h1 span {
      text-shadow: none;
    }
    :root[data-theme="standard"] .header-brand h1 span {
      text-shadow: none;
    }
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; }
    .btn-primary { background: var(--accent); color: var(--on-accent); }
    .btn-primary:hover { background: var(--accent2); transform: translateY(-1px); }
    .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
    .btn-ghost:hover { color: var(--text); border-color: var(--accent); }
    .btn-danger {
      background: var(--urgency-hoch);
      color: #fff;
      border: 1px solid rgba(185, 28, 28, 0.55);
    }
    .btn-danger:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
    .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--header-control-h);
      height: var(--header-control-h);
      padding: 0;
      flex-shrink: 0;
      border-radius: var(--radius-sm);
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
      font-size: 1rem;
      box-sizing: border-box;
    }
    .btn-icon:hover { color: var(--text); border-color: var(--accent); }
    /* Menü: wie inaktive KW-Chips (dezent), nicht wie übrige Icon-Buttons mit surface2 */
    .btn-icon.header-menu-toggle {
      background: transparent;
      border-color: var(--border);
      color: var(--text-muted);
    }
    .btn-icon.header-menu-toggle:hover {
      background: var(--accent-tint-bg);
      color: var(--accent-tint-text);
      border-color: var(--accent-tint-border-strong);
      transform: translateY(-1px);
    }
    .header-menu-wrap.header-menu-open .header-menu-toggle {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--on-accent);
      transform: none;
    }
    .header-menu-wrap.header-menu-open .header-menu-toggle:hover {
      background: var(--accent2);
      border-color: var(--accent2);
      color: var(--on-accent);
      transform: translateY(-1px);
    }
    /* Filter-Icon: wie Menübutton; geöffnete Filterleiste wie geöffnetes Menü (Accent) */
    .btn-icon[data-filter-bar-toggle] {
      background: transparent;
      border-color: var(--border);
      color: var(--text-muted);
    }
    .btn-icon[data-filter-bar-toggle]:hover {
      background: var(--accent-tint-bg);
      color: var(--accent-tint-text);
      border-color: var(--accent-tint-border-strong);
      transform: translateY(-1px);
    }
    .btn-icon[data-filter-bar-toggle].filter-bar-toggle-active {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--on-accent);
      transform: none;
    }
    .btn-icon[data-filter-bar-toggle].filter-bar-toggle-active:hover {
      background: var(--accent2);
      border-color: var(--accent2);
      color: var(--on-accent);
      transform: translateY(-1px);
    }
    .btn-icon svg { display: block; flex-shrink: 0; }
    /* Desktop: „Neue Idee“ wie quadratischer + in der mobilen Header-Zeile (Accent) */
    .btn-icon.header-add-idea-desktop {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--on-accent);
      font-size: 1.35rem;
      font-weight: 500;
      line-height: 1;
    }
    .btn-icon.header-add-idea-desktop:hover {
      background: var(--accent2);
      border-color: var(--accent2);
      color: var(--on-accent);
    }
    /* FILTER BAR — ein Zeilenfluss: alle Chips nacheinander, Umbruch nur wo nötig (einzelne Chips, nicht ganze Blöcke) */
    .filter-bar { padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); display: none; }
    .filter-bar.open { display: block; }
    .filter-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
    .filter-bar-extra { display: none; }
    .filter-bar.open .filter-bar-extra { display: contents; }
    .filter-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
    .filter-chip { padding: 4px 12px; border-radius: 99px; font-size: 0.8rem; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-muted); transition: all 0.15s; white-space: nowrap; }
    .filter-chip:hover, .filter-chip.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
    .filter-tags-row { display: none; }
    .filter-bar.open .filter-tags-row { display: contents; }
    #tagFilters { display: contents; }
    .filter-chip.filter-reset-chip {
      border-style: dashed;
      font-weight: 600;
      color: var(--urgency-hoch);
      background: var(--urgency-hoch-bg);
      border-color: rgba(239, 68, 68, 0.45);
    }
    .filter-chip.filter-reset-chip:hover {
      background: rgba(239, 68, 68, 0.2);
      color: #f87171;
      border-color: rgba(239, 68, 68, 0.6);
      filter: none;
    }
    #tagFilters .filter-chip:hover:not(.active) {
      background: var(--accent-tint-bg);
      color: var(--accent-tint-text);
      border-color: var(--accent-tint-border);
      filter: none;
    }
    .filter-chip.idea-modal-tag-chip:not(.active):hover {
      background: var(--accent-tint-bg);
      color: var(--accent-tint-text);
      border-color: var(--accent-tint-border);
      filter: none;
    }
    /* Dringlichkeit: wie Aufwand — dezenter Hintergrund, kräftige Textfarbe */
    .filter-chip.urgency-hoch,
    .filter-chip.urgency-mittel,
    .filter-chip.urgency-niedrig { border-width: 1px; }
    .filter-chip.urgency-hoch {
      background: var(--urgency-hoch-bg);
      color: var(--urgency-hoch);
      border-color: rgba(239, 68, 68, 0.35);
    }
    .filter-chip.urgency-mittel {
      background: var(--urgency-mittel-bg);
      color: var(--urgency-mittel);
      border-color: rgba(245, 158, 11, 0.4);
    }
    .filter-chip.urgency-niedrig {
      background: var(--urgency-niedrig-bg);
      color: var(--urgency-niedrig);
      border-color: rgba(16, 185, 129, 0.35);
    }
    .filter-chip.urgency-hoch:hover:not(.active) {
      background: rgba(239, 68, 68, 0.2);
      color: #f87171;
      border-color: rgba(239, 68, 68, 0.55);
      filter: none;
    }
    .filter-chip.urgency-mittel:hover:not(.active) {
      background: rgba(245, 158, 11, 0.22);
      color: #fbbf24;
      border-color: rgba(245, 158, 11, 0.55);
      filter: none;
    }
    .filter-chip.urgency-niedrig:hover:not(.active) {
      background: rgba(16, 185, 129, 0.22);
      color: #34d399;
      border-color: rgba(16, 185, 129, 0.5);
      filter: none;
    }
    .filter-chip.urgency-hoch.active,
    .filter-chip.urgency-mittel.active,
    .filter-chip.urgency-niedrig.active {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--accent);
      filter: none;
      box-shadow: none;
    }
    .filter-chip.nutzen-hoch.active    { background: var(--nutzen-hoch);   border-color: var(--nutzen-hoch); color:#000; }
    .filter-chip.nutzen-mittel.active  { background: var(--nutzen-mittel); border-color: var(--nutzen-mittel); }
    .filter-chip.nutzen-gering.active  { background: var(--nutzen-gering); border-color: var(--nutzen-gering); }
    /* Gruppentrennung ohne separates Element (kein Strich am Zeilenende bei Umbruch) */
    .idea-modal-dimensions .idea-chip-row[data-idea-field="importance"] .filter-chip:first-of-type,
    .idea-modal-dimensions .idea-chip-row[data-idea-field="nutzen"] .filter-chip:first-of-type,
    .idea-modal-dimensions .idea-chip-row[data-idea-field="aufwand"] .filter-chip:first-of-type {
      margin-left: 4px;
      padding-left: 10px;
      border-left: 1px solid var(--border);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
    .filter-bar-extra .filter-chip.urgency-hoch,
    .filter-bar-extra .filter-chip[data-filter="importance"][data-value="hoch"],
    .filter-bar-extra .filter-chip.nutzen-hoch,
    .filter-bar-extra .filter-chip[data-filter="aufwand"][data-value="gering"] {
      margin-left: 4px;
      padding-left: 10px;
      border-left: 1px solid var(--border);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    /* MAIN */
    main { padding: 20px; max-width: 1400px; margin: 0 auto; }
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

    /* CARD */
    .idea-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
    .idea-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius) 0 0 var(--radius); background: var(--card-stripe, var(--border)); }
    .idea-card-overdue {
      background: rgba(239, 68, 68, 0.08);
      border-color: rgba(239, 68, 68, 0.38);
    }
    .idea-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
    .idea-card-overdue:hover { border-color: rgba(239, 68, 68, 0.55); }
    .card-header { position: relative; padding-right: 68px; min-width: 0; }
    .card-title { font-size: 1rem; font-weight: 600; line-height: 1.4; min-width: 0; }
    .card-actions { position: absolute; top: 0; right: 0; display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
    .idea-card:hover .card-actions,
    .idea-card:focus-within .card-actions { opacity: 1; }
    .card-action-btn { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
    .card-action-btn svg { width: 15px; height: 15px; }
    .card-action-btn:hover { color: var(--text); border-color: var(--accent); }
    .card-action-btn.delete:hover { color: var(--urgency-hoch); border-color: var(--urgency-hoch); }
    .card-text { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; }
    .card-badges { display: flex; gap: 5px; flex-wrap: wrap; }
    .badge { padding: 3px 9px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; }
    .badge-urgency-hoch    { background: var(--urgency-hoch-bg);   color: var(--urgency-hoch); }
    .badge-urgency-mittel  { background: var(--urgency-mittel-bg); color: var(--urgency-mittel); }
    .badge-urgency-niedrig { background: var(--urgency-niedrig-bg); color: var(--urgency-niedrig); }
    .badge-importance-hoch    { background: rgba(168,85,247,0.12);  color: #a855f7; }
    .badge-importance-mittel  { background: rgba(99,102,241,0.12);  color: #6366f1; }
    .badge-importance-niedrig { background: rgba(100,116,139,0.15); color: #64748b; }
    .badge-nutzen-hoch    { background: var(--nutzen-hoch-bg);   color: var(--nutzen-hoch); }
    .badge-nutzen-mittel  { background: var(--nutzen-mittel-bg); color: var(--nutzen-mittel); }
    .badge-nutzen-gering  { background: var(--nutzen-gering-bg); color: var(--nutzen-gering); }
    .badge-aufwand-gering { background: var(--aufwand-gering-bg); color: var(--aufwand-gering); }
    .badge-aufwand-mittel { background: var(--aufwand-mittel-bg); color: var(--aufwand-mittel); }
    .badge-aufwand-hoch   { background: var(--aufwand-hoch-bg);   color: var(--aufwand-hoch); }
    .badge-dim-unknown { background: var(--surface2); color: var(--text-muted); font-weight: 500; }
    .card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
    .tag {
      box-sizing: border-box;
      padding: var(--idea-tag-pill-pad-y) var(--idea-tag-pill-pad-x);
      border-radius: 99px;
      font-size: var(--idea-tag-pill-fs);
      line-height: 1.25;
      background: var(--surface2);
      color: var(--text-muted);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: all 0.15s;
    }
    /* Schwächeres Lila als aktiver Filter-Chip (volles accent) */
    .tag:hover {
      color: var(--accent-tint-text);
      border-color: var(--accent-tint-border);
      background: var(--accent-tint-bg-subtle);
    }
    /* Gleiche Optik wie aktiver Tag-Filter (#tagFilters .filter-chip.active) */
    .tag.tag-filter-active {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--accent);
    }
    .tag.tag-filter-active:hover {
      background: var(--accent2);
      border-color: var(--accent2);
      color: var(--on-accent);
    }
    .card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
    @media (min-width: 701px) {
      .grid .idea-card {
        height: 100%;
        min-height: 0;
      }
      .grid .idea-card .card-footer {
        margin-top: auto;
      }
    }
    .card-footer-left { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; flex: 1; }
    /* Meta-Pills auf Kacheln (wie Modal / .tag) */
    .idea-card-meta-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-sizing: border-box;
      padding: var(--idea-meta-pill-pad-y) var(--idea-meta-pill-pad-x);
      border-radius: 99px;
      font-size: var(--idea-meta-pill-fs);
      font-weight: 600;
      line-height: 1.25;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text-muted);
    }
    .idea-card-meta-pill--created {
      font-weight: 500;
    }
    .idea-card-meta-pill--due .idea-due-dot {
      flex-shrink: 0;
    }
    .idea-card-meta-pill--due-today:not(.idea-card-meta-pill--due-overdue) {
      border-color: rgba(245, 158, 11, 0.45);
      background: var(--urgency-mittel-bg);
      color: var(--urgency-mittel);
    }
    .idea-card-meta-pill--due-overdue {
      border-color: rgba(239, 68, 68, 0.45);
      background: var(--urgency-hoch-bg);
      color: var(--urgency-hoch);
    }
    .idea-card-meta-pill--done {
      font-weight: 500;
    }
    .card-date, .card-done-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--text-muted);
    }
    .card-date { font-size: var(--idea-meta-pill-fs); }
    .card-footer-icon { flex-shrink: 0; line-height: 1; opacity: 0.9; }
    .idea-card-done-this-week { opacity: 0.55; filter: saturate(0.65); }
    .idea-card-done-this-week .card-title { color: var(--text-muted); }
    /* Erledigt: kein Schnell-Dialog per Klick — nur Bearbeiten/Löschen */
    .idea-card.idea-card-done-no-quick { cursor: default; }
    .idea-card.idea-card-done-no-quick:hover {
      border-color: var(--border);
      transform: none;
      box-shadow: none;
    }
    .quick-idea-text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 18px; white-space: pre-wrap; }
    .quick-idea-actions { margin-top: 8px; }
    .quick-idea-actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    #ideaQuickOverlay .quick-idea-actions-row--footer {
      justify-content: flex-start;
      flex-wrap: nowrap;
    }
    .card-score-wrap {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
    }
    .card-score-chip {
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 99px;
      font-weight: 700;
      line-height: 1.15;
      box-sizing: border-box;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }
    .card-score-chip-ded {
      color: var(--urgency-hoch);
      font-weight: 700;
    }
    .empty-state { grid-column: 1/-1; text-align: center; padding: 80px 20px; color: var(--text-muted); }
    .empty-state .icon { font-size: 3rem; margin-bottom: 16px; }
    .empty-state h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text); }

    /* MODALS */
    /* Über #loginScreen (z-index 500), damit Einstellungen von der Login-Karte erreichbar sind */
    .overlay { position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; padding: 20px; }
    .overlay.open { display: flex; }
    /* Bearbeiten-Modal: Datum-/Status-Pills kompakter als Karten-Footer */
    #ideaOverlay {
      --idea-modal-date-pill-fs: 0.8rem;
      --idea-modal-date-pill-pad-y: 4px;
      --idea-modal-date-pill-pad-x: 12px;
      --idea-modal-date-pill-input-min-h: 16px;
    }
    .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; padding: 24px; }
    /* Idee-Bearbeiten: äußerer Kasten nicht scrollen — Kalender-Popup nicht am Modal-Rand abschneiden; Inhalt scrollt innen */
    #ideaOverlay .modal {
      display: flex;
      flex-direction: column;
      max-height: min(92vh, 900px);
      overflow: hidden;
      padding: 24px;
      padding-bottom: 0;
    }
    #ideaOverlay .idea-modal-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 24px;
      padding-right: 2px;
    }
    #ideaOverlay .idea-modal-meta-pills-row {
      position: relative;
      z-index: 2;
    }
    #ideaOverlay input.idea-created-date-input,
    #ideaOverlay input.idea-due-date-input {
      scroll-margin-block: 80px;
    }
    .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
    .modal-title { font-size: 1.1rem; font-weight: 700; flex: 1; min-width: 0; }
    .modal-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .modal-close { width: 48px; height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
    .modal-close:hover { color: var(--text); border-color: var(--text); }
    .modal-close svg { width: 22px; height: 22px; }
    .modal-save-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      flex-shrink: 0;
    }
    .modal-save-icon svg { width: 22px; height: 22px; }
    .modal-save-icon:hover:not(:disabled) { color: var(--text); border-color: var(--text); }
    .modal-save-icon:disabled { opacity: 0.55; cursor: not-allowed; }
    .modal-delete-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(239,68,68,0.5);
      background: var(--urgency-hoch);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      flex-shrink: 0;
    }
    .modal-delete-icon svg { width: 22px; height: 22px; }
    .modal-delete-icon:hover:not(:disabled) { filter: brightness(1.12); border-color: rgba(252,165,165,0.55); }
    .modal-delete-icon:disabled { opacity: 0.55; cursor: not-allowed; }
    .modal-confirm { max-width: 420px; }
    .modal-scores { max-width: 480px; }
    .scores-modal-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    .scores-modal-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
    .scores-modal-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .scores-modal-table tbody tr:last-child td { border-bottom: none; }
    .scores-modal-table .scores-num { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
    .scores-modal-table .scores-score-wrap {
      display: inline-flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 5px;
    }
    .scores-modal-table .scores-arrow {
      font-weight: 700;
      line-height: 1;
      flex-shrink: 0;
      font-size: 1.05em;
    }
    .scores-modal-table .scores-arrow--up { color: #22c55e; }
    .scores-modal-table .scores-arrow--down { color: #ef4444; }
    .scores-modal-empty { padding: 12px 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; margin: 0; }
    .modal-confirm-text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; margin: 0; word-break: break-word; }
    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
    .form-input, .form-textarea, .form-select { width: 100%; padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 0.9rem; font-family: inherit; transition: border-color 0.15s; }
    .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--accent); }
    .form-textarea { min-height: 80px; resize: vertical; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .form-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
    .idea-modal-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
    .idea-chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    /* Gruppen nur logisch; Chips fließen in einer Zeile bis zum Umbruch (kein Block pro Kategorie) */
    .idea-modal-dimensions .idea-chip-row { display: contents; }
    .idea-modal-tags-block { margin-top: 12px; }
    .idea-tag-pills-host { display: contents; }
    .idea-modal-tag-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
    .idea-modal-tag-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .idea-modal-tag-remove { display: inline-flex; align-items: center; justify-content: center; margin: 0 -2px 0 2px; padding: 0 2px; font-size: 1.05em; line-height: 1; opacity: 0.85; cursor: pointer; }
    .idea-modal-tag-remove:hover { opacity: 1; }
    .idea-tag-input-chip { display: inline-flex; cursor: text; align-items: center; order: 999; min-width: 2.25rem; width: fit-content; max-width: 100%; }
    .idea-tag-input-chip:focus-within { border-color: var(--accent); }
    /* Kein Vollflächen-Fill wie andere .filter-chip — nur Rahmen bei Hover/Focus */
    .filter-chip.idea-tag-input-chip:hover,
    .filter-chip.idea-tag-input-chip:focus-within {
      background: transparent;
      border-color: var(--accent);
      color: var(--text-muted);
      filter: none;
    }
    .filter-chip.idea-tag-input-chip:hover .idea-tag-input,
    .filter-chip.idea-tag-input-chip:focus-within .idea-tag-input {
      color: var(--text);
    }
    .idea-tag-input { border: none; background: transparent; outline: none; color: var(--text); font: inherit; font-size: var(--idea-tag-pill-fs); min-width: 2rem; max-width: 100%; width: auto; padding: 2px 0; field-sizing: content; }
    .idea-tag-input::placeholder {
      color: var(--text-muted);
      opacity: 1;
    }
    .idea-modal-meta-pills-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      width: 100%;
      order: 1000;
      margin-top: 4px;
    }
    /* Tag-Chips: kompakt (wie .tag auf Kacheln) */
    #ideaOverlay .idea-modal-tags-block .filter-chip.idea-modal-tag-chip,
    #ideaOverlay .idea-modal-tags-block .filter-chip.idea-tag-input-chip {
      padding: var(--idea-tag-pill-pad-y) var(--idea-tag-pill-pad-x);
      font-size: var(--idea-tag-pill-fs);
      line-height: 1.25;
    }
    /* Datum / Fälligkeit / Erledigt: eine kompakte Zeile im Modal */
    #ideaOverlay .idea-modal-tags-block .filter-chip.idea-created-chip,
    #ideaOverlay .idea-modal-tags-block .filter-chip.idea-due-chip,
    #ideaOverlay .idea-modal-tags-block .filter-chip.idea-modal-erledigt-pill {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      padding: var(--idea-modal-date-pill-pad-y) var(--idea-modal-date-pill-pad-x);
      font-size: var(--idea-modal-date-pill-fs);
      line-height: 1.15;
    }
    #ideaOverlay .idea-created-chip .idea-created-date-input,
    #ideaOverlay .idea-due-chip .idea-due-date-input {
      font-size: var(--idea-modal-date-pill-fs);
      min-height: var(--idea-modal-date-pill-input-min-h);
      padding: 0;
      line-height: 1.15;
    }
    #ideaOverlay .idea-created-chip .card-footer-icon {
      font-size: var(--idea-modal-date-pill-fs);
    }
    #ideaOverlay .idea-modal-erledigt-pill .card-footer-icon {
      font-size: var(--idea-modal-date-pill-fs);
    }
    #ideaOverlay .idea-created-chip,
    #ideaOverlay .idea-due-chip {
      gap: 4px;
    }
    #ideaOverlay .idea-modal-erledigt-pill {
      gap: 4px;
    }
    /* Erledigt-Toggle-Button im Modal */
    .idea-modal-mark-done-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      font-size: 0.8rem;
      border: 1px solid var(--border);
      border-radius: 99px;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .idea-modal-mark-done-btn:hover {
      border-color: var(--accent);
      color: var(--text);
    }
    .idea-modal-mark-done-btn.active {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--accent);
    }
    .idea-modal-mark-done-icon {
      font-weight: 700;
    }
    #ideaOverlay .idea-due-dot {
      width: 6px;
      height: 6px;
    }
    .idea-modal-pill-clear {
      border: none;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      padding: 0 2px;
      margin-left: 2px;
      opacity: 0.75;
      flex-shrink: 0;
    }
    .idea-modal-pill-clear:hover {
      opacity: 1;
      color: var(--text);
    }
    .idea-modal-created-wrap:not([hidden]) {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      margin-left: 0;
    }
    .idea-created-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      color: var(--text-muted);
    }
    .idea-created-chip .card-footer-icon {
      font-size: var(--idea-meta-pill-fs);
      opacity: 0.9;
    }
    .idea-created-chip .idea-created-date-input {
      padding: 2px 0;
      font-size: var(--idea-meta-pill-fs);
      font-family: inherit;
      color: var(--text-muted);
      -webkit-text-fill-color: var(--text-muted);
      background: transparent;
      border: none;
      outline: none;
      min-height: var(--idea-meta-pill-date-input-min-h);
      box-sizing: border-box;
      cursor: pointer;
      color-scheme: dark;
    }
    .idea-created-chip .idea-created-date-input::-webkit-calendar-picker-indicator {
      opacity: 0.75;
      cursor: pointer;
    }
    .filter-chip.idea-created-chip:hover {
      background: var(--surface2);
      color: var(--text);
      border-color: var(--accent);
      filter: none;
    }
    .filter-chip.idea-created-chip:hover .idea-created-date-input {
      color: var(--text);
      -webkit-text-fill-color: var(--text);
    }
    .filter-chip.idea-created-chip:focus-within {
      background: var(--surface2);
      border-color: var(--accent);
      color: var(--text);
    }
    .filter-chip.idea-created-chip:focus-within .idea-created-date-input {
      color: var(--text);
      -webkit-text-fill-color: var(--text);
    }
    .idea-modal-due-wrap {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      margin-left: 0;
    }
    /* :not([hidden]) — sonst überschreibt display:inline-flex das [hidden]-Verhalten */
    .idea-modal-erledigt-wrap:not([hidden]) {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      margin-left: 0;
    }
    .idea-modal-erledigt-pill {
      gap: 5px;
    }
    .idea-due-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      color: var(--text-muted);
    }
    .idea-due-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--urgency-hoch);
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
    }
    .idea-due-chip .idea-due-date-input {
      padding: 2px 0 2px 2px;
      font-size: var(--idea-meta-pill-fs);
      font-family: inherit;
      color: var(--text-muted);
      -webkit-text-fill-color: var(--text-muted);
      background: transparent;
      border: none;
      outline: none;
      min-height: var(--idea-meta-pill-date-input-min-h);
      box-sizing: border-box;
      cursor: pointer;
      color-scheme: dark;
    }
    .idea-due-chip .idea-due-date-input::-webkit-calendar-picker-indicator {
      opacity: 0.75;
      cursor: pointer;
    }
    .filter-chip.idea-due-chip:hover {
      background: var(--surface2);
      color: var(--text);
      border-color: var(--accent);
      filter: none;
    }
    .filter-chip.idea-due-chip:hover .idea-due-date-input {
      color: var(--text);
      -webkit-text-fill-color: var(--text);
    }
    .filter-chip.idea-due-chip:focus-within {
      background: var(--surface2);
      border-color: var(--accent);
      color: var(--text);
    }
    .filter-chip.idea-due-chip:focus-within .idea-due-date-input {
      color: var(--text);
      -webkit-text-fill-color: var(--text);
    }
    #ideaOverlay .filter-chip.idea-modal-erledigt-pill:hover {
      background: var(--surface2);
      color: var(--text);
      border-color: var(--accent);
      filter: none;
    }
    #ideaOverlay .idea-modal-tags-block .idea-modal-pill-clear {
      font-size: 0.72rem;
      padding: 0 1px;
      margin-left: 1px;
    }
    .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    @keyframes spin  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

    .settings-form .form-input {
      font-family: monospace;
      font-size: 0.82rem;
      line-height: 1.45;
      min-height: 42px;
      box-sizing: border-box;
    }
    .theme-picker {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .theme-picker-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
    }
    .theme-picker-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
    }
    .theme-picker-swatch {
      display: flex;
      flex-direction: row;
      width: 64px;
      height: 32px;
      padding: 0;
      border: 2px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      cursor: pointer;
      background: transparent;
      flex-shrink: 0;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .theme-picker-swatch:hover {
      border-color: var(--accent-tint-border-strong);
    }
    .theme-picker-swatch:focus {
      outline: none;
    }
    .theme-picker-swatch:focus-visible {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-tint-bg);
    }
    .theme-picker-swatch--selected {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent);
    }
    .theme-picker-half {
      flex: 1 1 50%;
      min-width: 0;
      align-self: stretch;
    }
    .settings-status { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.82rem; margin-top: 8px; }
    .settings-status.ok  { background: var(--urgency-niedrig-bg); color: var(--urgency-niedrig); }
    .settings-status.err { background: var(--urgency-hoch-bg);    color: var(--urgency-hoch); }
    .settings-email-section { margin: 0; padding: 0; }
    .settings-danger-zone {
      margin-top: 28px;
      padding: 16px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(239, 68, 68, 0.45);
      background: rgba(239, 68, 68, 0.06);
    }
    .settings-danger-zone-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--urgency-hoch);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin: 0 0 10px 0;
    }
    .settings-danger-zone p {
      margin: 0 0 12px 0;
      font-size: 0.88rem;
      line-height: 1.5;
      color: var(--text-muted);
    }
    .settings-danger-zone p strong { color: var(--text); font-weight: 600; }
    .delete-account-confirm-text {
      font-size: 0.9rem;
      line-height: 1.55;
      color: var(--text-muted);
      margin: 0 0 16px 0;
    }
    .delete-account-confirm-text strong { color: var(--text); }
    .delete-account-ack {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 18px;
      font-size: 0.88rem;
      line-height: 1.45;
      color: var(--text);
    }
    .delete-account-ack input { margin-top: 3px; flex-shrink: 0; }
    .delete-account-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
      align-items: center;
    }

    .loader { grid-column: 1/-1; text-align: center; padding: 60px; color: var(--text-muted); }
    .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 12px; }

    #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
    .toast { padding: 10px 16px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; background: var(--surface2); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); animation: slideIn 0.2s ease; max-width: 320px; }
    .toast.error   { border-color: var(--urgency-hoch);    color: var(--urgency-hoch); }
    @keyframes slideIn { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }

    /* Suche füllt den Raum zwischen KW und Filter (+/Scroll); Abstand nur über row gap */
    .header-layout-mobile .header-row2 .search-wrap {
      flex: 1 1 0%;
      position: relative;
      min-width: 0;
      max-width: none;
      box-sizing: border-box;
    }
    .header-layout-mobile .header-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
    .header-ideas-count {
      font-size: 0.75rem;
      color: var(--text-muted);
      font-weight: 500;
      white-space: nowrap;
      flex-shrink: 0;
      letter-spacing: 0.02em;
      text-align: center;
    }
    .search-input {
      width: 100%;
      height: var(--header-control-h);
      padding: 0 12px 0 34px;
      line-height: normal;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: 0.875rem;
      font-family: inherit;
      transition: border-color 0.15s, background 0.15s;
      box-sizing: border-box;
    }
    .search-input::placeholder {
      color: var(--text-muted);
      opacity: 1;
    }
    .search-input:hover:not(:focus) {
      background: var(--accent-tint-bg);
      border-color: var(--accent-tint-border-strong);
    }
    .search-input:focus {
      outline: none;
      border-color: var(--accent);
      background: transparent;
    }
    .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; align-items: center; }
    .search-icon svg { width: 16px; height: 16px; }

    .header-week-stats-wrap {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      font-size: 0.72rem;
      color: var(--text-muted);
      line-height: 1.25;
      flex-shrink: 0;
      text-align: left;
    }
    .header-week-stats-wrap .header-kw-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.02em;
      white-space: nowrap;
      line-height: 1;
      box-sizing: border-box;
      border-radius: 99px;
      flex-shrink: 0;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, filter 0.15s;
      height: var(--header-control-h);
      min-height: var(--header-control-h);
      max-height: var(--header-control-h);
      padding: 0 10px;
      font-size: 0.78rem;
    }
    .header-week-stats-wrap .header-kw-chip.active {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--on-accent);
    }
    .header-week-stats-wrap .header-kw-chip:not(.active) {
      background: transparent;
      color: var(--text-muted);
      border-color: var(--border);
    }
    .header-week-stats-wrap .header-kw-chip:not(.active):hover {
      background: var(--accent-tint-bg);
      color: var(--accent-tint-text);
      border-color: var(--accent-tint-border-strong);
      transform: translateY(-1px);
    }
    .header-week-stats-wrap .header-kw-chip.active:hover {
      background: var(--accent2);
      border-color: var(--accent2);
      color: var(--on-accent);
      transform: translateY(-1px);
    }
    .header-week-stats-wrap .header-week-points-line { font-size: 0.72rem; display: flex; align-items: center; }
    .header-kw-sep {
      width: 1px;
      align-self: stretch;
      min-height: var(--header-control-h);
      margin: 0;
      background: var(--border);
      flex-shrink: 0;
    }
    .header-week-score-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 99px;
      font-weight: 700;
      line-height: 1;
      box-sizing: border-box;
      height: var(--header-control-h);
      min-height: var(--header-control-h);
      max-height: var(--header-control-h);
      padding: 0 8px;
      font-size: 0.78rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      color: var(--text-muted);
      letter-spacing: -0.02em;
      white-space: nowrap;
    }
    .header-layout-mobile .header-row2 .header-week-stats-wrap .header-kw-chip,
    .header-layout-mobile .header-row2 .header-week-stats-wrap .header-week-score-chip {
      border-radius: var(--radius-sm);
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

    /* Mobile: Zeile 1 Marke | Ideen-Anzahl | Menü; Zeile 2 KW | Suche | (+/Scroll) | Filter (Breite siehe MOBILE_LAYOUT_MAX_WIDTH_PX) */
    @media (max-width: 640px) {
      .form-row { grid-template-columns: 1fr; }
      .form-row-2 { grid-template-columns: 1fr; }
      .form-row-4 { grid-template-columns: 1fr 1fr; }
      main { padding: 14px; }
      .grid { grid-template-columns: 1fr; }
      /* Tag-Filter (und leere Leiste) nur bei geöffnetem Filter-Panel wie Status/Dimensionen */
      .filter-bar:not(.open) {
        display: none;
      }
      .header-layout-desktop { display: none !important; }
      .header-layout-mobile { display: flex !important; flex-direction: column; }
      .header-layout-mobile .header-row1-side-left .header-brand {
        flex: 1 1 auto;
        min-width: 0;
      }
      .header-layout-mobile .header-row1 {
        padding: 8px 16px;
        gap: 8px;
        align-items: center;
        overflow: hidden;
        max-height: 120px;
        transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
        opacity: 1;
        position: relative;
        z-index: 2;
      }
      header.header-menu-dropdown-open .header-layout-mobile .header-row1 {
        overflow: visible;
      }
      header h1 { font-size: 1.05rem; flex: 1 1 auto; min-width: 0; }
      .header-layout-mobile .header-row2 {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px 16px 10px;
        border-top: 1px solid var(--border);
        min-height: 44px;
        position: relative;
        z-index: 1;
      }
      .header-layout-mobile .header-row2 .search-wrap .search-input {
        height: var(--header-control-h);
        padding: 0 4px 0 28px;
        line-height: normal;
        font-size: 0.78rem;
      }
      .header-layout-mobile .header-row2 .search-wrap .search-icon {
        left: 8px;
        font-size: 0.75rem;
      }
      .header-layout-mobile .header-row1 .header-add-idea-desktop { display: none !important; }
      /* Kein leeres Flex-Item zwischen Suche und Filter: sonst doppelter row-gap (16px statt 8px) */
      .header-layout-mobile .header-row2-end {
        display: none;
      }
      header.logo-hidden .header-layout-mobile .header-row2-end {
        display: flex;
      }
      .header-layout-mobile .header-row2-end .header-add-idea-in-header {
        display: none;
        font-size: 1.35rem;
        font-weight: 500;
        line-height: 1;
      }
      header.logo-hidden .header-layout-mobile .header-row2-end .header-add-idea-in-header {
        display: inline-flex;
        background: var(--accent);
        border-color: var(--accent);
        color: var(--on-accent);
      }
      header.logo-hidden .header-layout-mobile .header-row2-end .header-add-idea-in-header:hover {
        background: var(--accent2);
        border-color: var(--accent2);
        color: var(--on-accent);
      }
      .header-layout-mobile .header-ideas-count {
        font-size: 0.7rem;
      }
      .header-layout-mobile .header-row2 .header-week-stats-wrap {
        flex: 0 0 auto;
        flex-shrink: 0;
        min-width: min-content;
        max-width: none;
        gap: 8px;
      }
      .header-layout-mobile .header-row2 .header-week-stats-wrap .header-kw-sep {
        min-height: var(--header-control-h);
        margin: 0;
      }
      .header-layout-mobile .header-row2-end .header-scroll-top {
        display: none;
        flex-shrink: 0;
      }
      header.logo-hidden .header-layout-mobile .header-row2-end .header-scroll-top {
        display: inline-flex;
      }
      /* Kompakt: Suche + Filter ausblenden; Aktionen rechts */
      header.logo-hidden .header-layout-mobile .header-row2 .search-wrap,
      header.logo-hidden .header-layout-mobile .header-row2 .header-row2-filter-slot {
        display: none !important;
      }
      /* „+“ horizontal mittig in der Zeile (Bezug: .header-row2); Nach-oben bleibt rechts */
      header.logo-hidden .header-layout-mobile .header-row2 {
        position: relative;
      }
      header.logo-hidden .header-layout-mobile .header-row2 .header-row2-end {
        margin-left: auto;
      }
      header.logo-hidden .header-layout-mobile .header-row2-end .header-add-idea-in-header {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
      }
      /* Nach-oben wie Filter-Icon (dezent) */
      .header-layout-mobile .header-row2-end .header-scroll-top {
        background: transparent;
        border-color: var(--border);
        color: var(--text-muted);
      }
      .header-layout-mobile .header-row2-end .header-scroll-top:hover {
        background: var(--accent-tint-bg);
        color: var(--accent-tint-text);
        border-color: var(--accent-tint-border-strong);
        transform: translateY(-1px);
      }
      header.logo-hidden .header-layout-mobile .header-week-stats-wrap .header-kw-sep,
      header.logo-hidden .header-layout-mobile .header-week-stats-wrap [data-header-kw-next-chip],
      header.logo-hidden .header-layout-mobile .header-week-stats-wrap [data-header-points-next] {
        display: none !important;
      }
      header.logo-hidden .header-layout-mobile .header-ideas-count {
        display: none !important;
      }
      /* Beim Scrollen: komplette erste Zeile (Marke, Ideen-Anzahl, Menü) ausblenden */
      header.logo-hidden .header-layout-mobile .header-row1 {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        opacity: 0;
        pointer-events: none;
      }
      /* Beim Scrollen: + wandert in die Header-Zeile (Kachel im Grid ausblenden) */
      body.header-scroll-compact .grid .idea-card-create-mobile {
        display: none !important;
      }
      /* Neue Idee: kompakt, etwas höher als reine Header-Zeile */
      .grid .idea-card-create-mobile {
        grid-column: 1 / -1;
        min-height: 48px;
        max-height: 48px;
        height: 48px;
        padding: 0 12px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        font: inherit;
        text-align: center;
        appearance: none;
        -webkit-appearance: none;
        background: var(--accent);
        border-color: var(--accent);
        color: var(--on-accent);
        box-shadow: none;
      }
      .grid .idea-card-create-mobile::before {
        display: none;
      }
      .grid .idea-card-create-mobile:hover {
        border-color: var(--accent2);
        background: var(--accent2);
        color: var(--on-accent);
        transform: translateY(-2px);
        box-shadow: var(--shadow);
      }
      .idea-card-create-plus {
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1;
        pointer-events: none;
      }
      .grid .empty-state {
        grid-column: 1 / -1;
      }
    }

    /* Mobile Zeile 2: unter dieser Viewport-Breite Suche ausblenden; Filter bleibt rechtsbündig */
    @media (max-width: 380px) {
      .header-layout-mobile .header-row2 .search-wrap {
        display: none !important;
      }
      .header-layout-mobile .header-row2 .header-row2-filter-slot {
        margin-left: auto;
      }
    }

    /* ── Bilder im Idea-Modal ─────────────────────────────── */
    .idea-modal-images-area { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .idea-modal-images { display: flex; flex-wrap: wrap; gap: 8px; }
    .modal-img-thumb-wrap { position: relative; }
    .modal-img-thumb-wrap img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; display: block; }
    .modal-img-remove { position: absolute; top: -6px; right: -6px; background: var(--color-danger, #d33); color: #fff;
      border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 14px; line-height: 1;
      cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
    .idea-modal-img-add-btn { display: flex; align-items: center; justify-content: center;
      width: 48px; height: 48px; border-radius: 8px; border: 1.5px dashed var(--color-border, #bbb);
      cursor: pointer; flex-shrink: 0; user-select: none; color: var(--text-muted); transition: all 0.15s; }
    .idea-modal-img-add-btn:hover { border-color: var(--accent, #6c8ebf); background: var(--color-bg-hover, rgba(0,0,0,.05)); color: var(--accent, #6c8ebf); }
    .idea-modal-img-add-btn svg { width: 22px; height: 22px; }
    .modal.drag-over { outline: 2px dashed var(--accent, #6c8ebf); outline-offset: -4px; }
    /* ── Kachelansicht Thumbnails ─────────────────────────── */
    .card-images { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 4px; }
    .card-img-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; cursor: pointer; display: block; }
    /* ── Lightbox ─────────────────────────────────────────── */
    #lightboxImg { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 8px; cursor: default; }
    .lightbox-close { position: fixed; top: 16px; right: 16px; }