/* KapuzenMC – Apple-Design (Vorschau). Greift nur bei <html data-design="apple"> (Wahl im App-Menü oben, „Design“).
   Nach Apples Human Interface Guidelines: Systemschrift, ruhige gruppierte Flächen ohne Rahmen, feine Trennlinien,
   abgerundete Ecken, gefüllte statt umrandete Knöpfe, Segment-Schalter und Glas-Effekt für schwebende Flächen.
   Gilt für alle Seiten – die Seiten mit kx.css folgen dabei hell/dunkel des Geräts, die anderen bleiben dunkel. */
:root[data-design="apple"] {
  --bg: #000000; --bg2: #0b0b0c; --side: #1c1c1e; --panel: #1c1c1e; --panel2: #2c2c2e; --panel3: #3a3a3c; --hover: #2c2c2e;
  --line: rgba(84, 84, 88, .42); --line2: rgba(84, 84, 88, .72); --text: #ffffff; --muted: rgba(235, 235, 245, .62);
  --faint: rgba(235, 235, 245, .32); --input: #2c2c2e; --soft: rgba(118, 118, 128, .2);
  --ok: #30d158; --good: #30d158; --warn: #ff9f0a; --bad: #ff453a;
  --r: 14px; --radius: 14px;
  --sh: 0 20px 60px rgba(0, 0, 0, .55); --sh2: 0 8px 24px rgba(0, 0, 0, .4);
  --ap-fill: rgba(118, 118, 128, .24); --ap-fill2: rgba(118, 118, 128, .16); --ap-sel: #636366; --ap-glass: rgba(30, 30, 32, .72);
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --ap-font-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root[data-design="apple"][data-kx] {
    --bg: #f2f2f7; --bg2: #ebebf0; --side: #ffffff; --panel: #ffffff; --panel2: #f2f2f7; --panel3: #e5e5ea; --hover: #e9e9ee;
    --line: rgba(60, 60, 67, .16); --line2: rgba(60, 60, 67, .28); --text: #000000; --muted: rgba(60, 60, 67, .62);
    --faint: rgba(60, 60, 67, .32); --input: rgba(118, 118, 128, .12); --soft: rgba(118, 118, 128, .12);
    --ok: #34c759; --good: #34c759; --warn: #ff9500; --bad: #ff3b30;
    --sh: 0 20px 60px rgba(0, 0, 0, .14); --sh2: 0 8px 24px rgba(0, 0, 0, .08);
    --ap-fill: rgba(118, 118, 128, .12); --ap-fill2: rgba(118, 118, 128, .08); --ap-sel: #ffffff; --ap-glass: rgba(249, 249, 251, .78);
  }
}
:root.kx-design-switch, :root.kx-design-switch * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }

/* ---------- Schrift */
:root[data-design="apple"] body { font-family: var(--ap-font); letter-spacing: -.01em; background: var(--bg); }
:root[data-design="apple"] h1 { font-family: var(--ap-font-d); font-weight: 700; letter-spacing: -.025em; }
:root[data-design="apple"] h2, :root[data-design="apple"] h3 { font-family: var(--ap-font-d); font-weight: 650; letter-spacing: -.015em; }
:root[data-design="apple"] ::selection { background: color-mix(in srgb, var(--acc, var(--accent, #0a84ff)) 35%, transparent); }

/* ---------- Flächen: gruppiert, ohne Rahmen */
:root[data-design="apple"] .card, :root[data-design="apple"] .app, :root[data-design="apple"] .tile, :root[data-design="apple"] .dapp,
:root[data-design="apple"] .step, :root[data-design="apple"] .srv .k, :root[data-design="apple"] .howto, :root[data-design="apple"] .tablewrap {
  border-color: transparent !important; box-shadow: none; border-radius: var(--r); }
:root[data-design="apple"] .tile:hover, :root[data-design="apple"] .app:hover { box-shadow: var(--sh2); }
:root[data-design="apple"] .app::before { height: 0; }
:root[data-design="apple"] .notice, :root[data-design="apple"] .note { border: 0 !important; border-radius: 12px; }

/* ---------- Knöpfe: gefüllt, ohne Rand */
:root[data-design="apple"] .btn { border: 0 !important; border-radius: 10px; background: var(--ap-fill); font-weight: 600; box-shadow: none; }
:root[data-design="apple"] .btn:hover { background: color-mix(in srgb, var(--ap-fill) 100%, var(--text) 6%); filter: none; }
:root[data-design="apple"] .btn:active { transform: scale(.97); opacity: .85; }
:root[data-design="apple"] .btn.primary { background: var(--acc, var(--accent)); color: #fff; }
:root[data-design="apple"] .btn.primary:hover { filter: brightness(1.08); background: var(--acc, var(--accent)); }
:root[data-design="apple"] .btn.ghost { background: transparent; color: var(--acc, var(--accent)); }
:root[data-design="apple"] .btn.ghost:hover { background: var(--ap-fill2); }
:root[data-design="apple"] .btn.danger { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
:root[data-design="apple"] .btn.sm { border-radius: 8px; }
:root[data-design="apple"] .dl { border-radius: 12px; }

/* ---------- Eingaben */
:root[data-design="apple"] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-design="apple"] textarea, :root[data-design="apple"] select {
  border: 0 !important; background: var(--input); border-radius: 10px; box-shadow: none; }
:root[data-design="apple"] input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, :root[data-design="apple"] textarea:focus,
:root[data-design="apple"] select:focus { outline: none; box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--acc, var(--accent, #0a84ff)) 45%, transparent); }
:root[data-design="apple"] input[type=checkbox], :root[data-design="apple"] input[type=radio] { accent-color: var(--ok); }

/* ---------- Segment-Schalter, Pillen, Fortschritt */
:root[data-design="apple"] .seg { background: var(--ap-fill); border: 0 !important; border-radius: 9px; padding: 2px; }
:root[data-design="apple"] .seg button { border-radius: 7px; }
:root[data-design="apple"] .seg button.on { background: var(--ap-sel); color: var(--text); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
:root[data-design="apple"] .pill, :root[data-design="apple"] .chip { border: 0 !important; background: var(--ap-fill2); border-radius: 99px; }
:root[data-design="apple"] .bar { background: var(--ap-fill); border-radius: 99px; }
:root[data-design="apple"] .bar > i, :root[data-design="apple"] .bar > span { border-radius: 99px; }

/* ---------- Schwebendes: Glas */
:root[data-design="apple"] .modal, :root[data-design="apple"] .menu, :root[data-design="apple"] .toast {
  background: var(--ap-glass) !important; -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border: 0 !important; border-radius: 16px; box-shadow: var(--sh); }
:root[data-design="apple"] .modal-bg { background: rgba(0, 0, 0, .35); }

/* ---------- Tabellen und Listen */
:root[data-design="apple"] th { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }
:root[data-design="apple"] td, :root[data-design="apple"] th { border-color: var(--line) !important; }

/* ---------- Bildlaufleisten schmal und rund */
:root[data-design="apple"] ::-webkit-scrollbar { width: 9px; height: 9px; }
:root[data-design="apple"] ::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
:root[data-design="apple"] ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Seitenleisten wie in macOS: Auswahl in Akzentfarbe, Symbole farbig */
:root[data-design="apple"] .side { background: var(--side); border-right: 0 !important; }
:root[data-design="apple"] .nav a { border-radius: 7px; }
:root[data-design="apple"] .nav a .ic { color: var(--acc, var(--accent)); opacity: 1; }
:root[data-design="apple"] .nav a:hover { background: var(--ap-fill2); }
:root[data-design="apple"] .nav a.on { background: var(--acc, var(--accent)); color: #fff; }
:root[data-design="apple"] .nav a.on .ic { color: #fff; }

/* ---------- Startseite und Downloads: ruhige Kacheln, gruppierte Liste, Glas-Kopfzeile */
:root[data-design="apple"] .tile::before { opacity: 0 !important; }
:root[data-design="apple"] .tile { background: var(--panel); }
:root[data-design="apple"] .tile .go { background: transparent; }
:root[data-design="apple"] .tile:hover .go { background: transparent; color: var(--c); }
:root[data-design="apple"] .tile .ic2, :root[data-design="apple"] .app .icon { border-radius: 23%; box-shadow: none; }
:root[data-design="apple"] .hello h1 span { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--acc, #0a84ff); }
:root[data-design="apple"] .rows { gap: 0; grid-template-columns: 1fr; background: var(--panel); border-radius: var(--r); overflow: hidden; }
:root[data-design="apple"] .rows .dapp { border-radius: 0; background: transparent; border: 0 !important; position: relative; }
:root[data-design="apple"] .rows .dapp + .dapp::before { content: ""; position: absolute; top: 0; left: 68px; right: 0; height: 1px; background: var(--line); }
:root[data-design="apple"] header.top { position: sticky; top: 0; z-index: 20; margin: 0 -22px; padding: 10px 22px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
:root[data-design="apple"] .meb { border: 0; background: var(--ap-fill2); }
:root[data-design="apple"] .newsc { border: 0 !important; }