Fix invisible service descriptions, broken empty-translation glitch; redesign modal list

Real bugs, both confirmed via screenshot 2026-08-02:
- dark3 was set to a near-white cream tone assuming background-only
  use, but Klaro's .cm-list-description rule uses it as a TEXT color
  — every service description was almost invisible. Changed to
  --color-text-muted.
- The service.disableAll.description="" override to hide Klaro's
  boilerplate toggle-all text broke its own t() lookup, rendering a
  literal "[missing translation: de/service/disableAll/description]"
  string instead — worse than the original. Reverted, hidden via a
  plain CSS display:none on .cm-toggle-all .cm-list-description
  instead.

Also a real redesign pass on the settings modal's service/purpose
list (wider modal, row separators, bigger/clearer toggle switches,
distinct footer) — was previously only reachable via the notice's own
generic styling, still visibly "default library layout" per Marco's
own read.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/components/KlaroConsentManager.tsx

@@ -118,6 +118,58 @@ function KlaroTheme() {
       .klaro select, .klaro .cm-list-input + label {
         border-radius: 6px !important;
       }
+
+      /* ---- Settings modal service/purpose list — a real pass modeled on
+         well-known CMPs like Cookiebot (roomier modal, clear row
+         separators, bigger switches, muted-but-legible descriptions),
+         not just inherited from the notice's own styling. Class names
+         confirmed against node_modules/klaro's src/scss/switch.scss +
+         klaro.scss, not guessed. */
+      .klaro .cookie-modal { max-width: 640px !important; }
+      .klaro .cookie-modal .cn-body { padding: 32px 36px !important; }
+      .klaro .cookie-modal h1 { font-size: 26px !important; margin-bottom: 4px !important; }
+      .klaro .cookie-modal > .cn-body > p:first-of-type { color: #6b6b69 !important; margin-bottom: 24px !important; }
+
+      /* Re-adds a deliberate row separator the blanket border-reset above
+         removes — each purpose/service row genuinely benefits from one,
+         unlike the notice's own outer border which just looked heavy. */
+      .klaro .cm-switch-container {
+        border-bottom: 1px solid #e5e0d8 !important;
+        padding: 16px 4px !important;
+        padding-left: 70px !important;
+      }
+      .klaro .cm-switch-container:last-child { border-bottom: 0 !important; }
+      .klaro .cm-list-title { font-size: 15px !important; font-weight: 700 !important; }
+      .klaro .cm-list-description { font-size: 13.5px !important; line-height: 1.5 !important; padding-top: 5px !important; max-width: 46ch; }
+      .klaro p.purposes { font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 6px !important; }
+
+      /* Bigger, clearer toggle (44×24 vs. Klaro's cramped 50×30-but-
+         visually-thin default) — brand amber when on, plain border-tone
+         off, matching this site's own bg-brand/bg-border pairing. */
+      .klaro .cm-switch, .klaro .cm-list-input { width: 44px !important; height: 24px !important; }
+      .klaro .slider { border: 1px solid #e5e0d8 !important; }
+      .klaro .slider::before { width: 18px !important; height: 18px !important; left: 3px !important; bottom: 2px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important; }
+      .klaro .cm-list-input:checked + .cm-list-label .slider::before { transform: translateX(19px) !important; }
+
+      .klaro .cm-caret { color: #6b6b69 !important; }
+
+      /* Bottom action row reads as a distinct footer, not just the last
+         list item — separated + slightly recessed. */
+      .klaro .cookie-modal .cm-buttons {
+        border-top: 1px solid #e5e0d8 !important;
+        margin-top: 24px !important;
+        padding-top: 20px !important;
+      }
+
+      /* Hides the "alle umschalten" toggle's own boilerplate description
+         ("Mit diesem Schalter können Sie alle Dienste aktivieren oder
+         deaktivieren.") — redundant next to a plainly-labeled switch.
+         CSS hide, not an empty translation override — Klaro's own t()
+         treats an empty string as "translation missing" and renders a
+         literal "[missing translation: ...]" debug string instead
+         (confirmed via screenshot 2026-08-02), which is worse than the
+         original text. */
+      .klaro .cm-toggle-all .cm-list-description { display: none !important; }
     `}</style>
   );
 }