:root {
  --bg: #0b0b0f;
  --panel: #14141a;
  --panel-2: #1b1b23;
  --line: #262631;
  --text: #ececf1;
  --muted: #8d8d9c;
  --accent: #8b5cf6;
  --accent-2: #a78bfa;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(139, 92, 246, .18), transparent 60%),
    radial-gradient(700px 400px at -10% 20%, rgba(56, 189, 248, .08), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 15px/1.6 Inter, 'Segoe UI', system-ui, sans-serif;
}
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; text-decoration: none; }
.brand img { width: 30px; height: 30px; }

.hero { padding: 56px 0 40px; }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.1; letter-spacing: -.02em; }
.hero h1 span { background: linear-gradient(90deg, var(--accent-2), #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 620px; margin: 18px 0 28px; color: var(--muted); font-size: 17px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text);
  font: 600 15px Inter, sans-serif; text-decoration: none; cursor: pointer;
}
.btn.primary { border-color: transparent; background: var(--accent); color: #fff; }
.btn.primary:hover { background: #7c4def; }
.btn[aria-disabled=true] { opacity: .5; pointer-events: none; }
.cta small { color: var(--muted); }

h2 { margin: 56px 0 18px; font-size: 22px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.step { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.step b { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%; background: rgba(139, 92, 246, .18); color: var(--accent-2); }
.step h3 { margin: 0 0 6px; font-size: 16px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.module {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color .15s, transform .15s;
}
.module:hover { border-color: var(--accent); transform: translateY(-2px); }
.module-head { display: flex; align-items: center; gap: 12px; }
.tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--tile, var(--accent)); color: #111; font-size: 13px; font-weight: 800; }
.module h3 { margin: 0; font-size: 17px; }
.module p { flex: 1; margin: 0; color: var(--muted); font-size: 14px; }
.module-meta { display: flex; gap: 14px; color: var(--muted); font-size: 13px; }
.module-open { color: var(--accent-2); font-weight: 600; font-size: 14px; }

.note { display: flex; gap: 14px; margin: 56px 0; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; }
.note strong { color: var(--text); }
footer { padding: 24px 0 40px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
code { color: var(--accent-2); font: 13px Consolas, monospace; }

/* Navigation rechts: Startseite + Konto-Symbol mit Menü */
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-home { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #6d28d9); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 4px 18px rgba(139, 92, 246, .35); }
.nav-home:hover { filter: brightness(1.1); }
.account-menu { position: relative; }
.avatar-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; overflow: hidden; border: 2px solid var(--line); border-radius: 50%; background: var(--panel-2); color: var(--muted); cursor: pointer; transition: border-color .15s; }
.avatar-btn:hover, .avatar-btn[aria-expanded=true] { border-color: var(--accent); }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.avatar-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; min-width: 240px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
.menu-head { display: grid; gap: 2px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.menu-item:hover { background: var(--panel-2); }
.menu-item.danger { color: #fca5a5; }
.menu-item.twitch { color: #c4a5ff; }
.nav-link { color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none; }
.nav-link:hover { color: var(--text); }
.menu-item.menu-pro { background: linear-gradient(90deg, rgba(139, 92, 246, .25), rgba(236, 72, 153, .2)); color: #fff; }

/* Fußzeile mit Rechtlichem (templates/footer.html) */
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }
.footer-links a { color: var(--muted); font-weight: 600; text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.site-footer p { margin: 0; }

/* Impressum, Datenschutz, AGB, Widerruf, Kündigen */
.legal { max-width: 760px; margin: 10px 0 60px; }
.legal h1 { margin: 10px 0 6px; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.02em; }
.legal h2 { margin: 34px 0 8px; font-size: 19px; }
.legal h3 { margin: 22px 0 6px; font-size: 16px; }
.legal p, .legal li { color: #c9c9d4; }
.legal ul { padding-left: 20px; }
.legal .stand { color: var(--muted); font-size: 13px; }
.legal .box { margin: 18px 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.legal address { font-style: normal; }
.form { display: grid; gap: 14px; margin-top: 18px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.form label { display: grid; gap: 6px; font-weight: 600; }
.form .choice { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.form .choice input { margin-top: 5px; accent-color: var(--accent); }
.form input[type=text], .form input[type=email], .form textarea, .form select {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); font: inherit;
}
.form textarea { min-height: 90px; resize: vertical; }
.form fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.form legend { margin-bottom: 6px; font-weight: 700; }
.form .hint { color: var(--muted); font-size: 13px; font-weight: 400; }
.form .error { padding: 10px 14px; border-radius: 10px; background: #3a1620; color: #fecaca; }
.btn.danger { border-color: transparent; background: #dc2626; color: #fff; }
.btn.danger:hover { background: #b91c1c; }
@media print { body { background: #fff; color: #000; } .nav, .site-footer, .no-print { display: none !important; } .legal p, .legal li { color: #000; } .legal .box { border-color: #999; background: #fff; } }

/* „Home“ oben in der Mitte (nur angemeldet) */
.nav { position: relative; }
.nav-center { position: absolute; left: 50%; transform: translateX(-50%); padding: 9px 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-weight: 700; font-size: 14px; text-decoration: none; transition: border-color .15s; }
.nav-center:hover, .nav-center.active { border-color: var(--accent); }
@media (max-width: 560px) { .nav-center { position: static; transform: none; } }

/* /home/: Home, Module, Hub */
.hub-tabs { display: flex; justify-content: center; gap: 6px; margin: 8px 0 26px; }
.hub-tabs button { padding: 9px 22px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: 700 14px Inter, sans-serif; cursor: pointer; }
.hub-tabs button[aria-selected=true] { border-color: transparent; background: var(--accent); color: #fff; }
.app-hint { margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; background: #2d2410; color: #fde68a; font-size: 14px; }
.hub-note { color: var(--muted); font-size: 14px; }
.hub-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; padding: 12px 18px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 14px; }
.hub-toast.error { border-color: #7f1d1d; color: #fecaca; }
.hub-dialog .btn.small, .hub-card .btn.small, .mod-actions .btn.small { height: 34px; padding: 0 14px; font-size: 13px; }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); font: 700 15px Inter, sans-serif; cursor: pointer; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.info { border-radius: 50%; font-style: italic; font-family: Georgia, serif; }
.tile.small { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }

.home { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.home-app { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); font: inherit; text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; transition: transform .15s, border-color .15s; }
.home-app:hover { border-color: var(--accent); transform: translateY(-2px); }
.home-app b { font-size: 14px; }
.home-app small { color: #fbbf24; font-size: 12px; }
.home-app .tile { width: 56px; height: 56px; border-radius: 16px; font-size: 26px; }
.home-app.size-s .tile { width: 40px; height: 40px; font-size: 18px; border-radius: 12px; }
.home-app.size-l { grid-column: span 2; grid-row: span 2; }
.home-app.size-l .tile { width: 92px; height: 92px; font-size: 44px; border-radius: 24px; }
.home-app.size-l b { font-size: 17px; }
/* 3 s halten: Rand füllt sich rot */
@property --hold { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes hold { to { --hold: 100%; } }
.home-app::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 3px; background: conic-gradient(#f87171 var(--hold), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; }
.home-app.holding::after { opacity: 1; animation: hold 3s linear forwards; }
.home-settings { border-style: dashed; }
.home-empty { grid-column: 1 / -1; color: var(--muted); }

.home-list { grid-template-columns: 1fr; gap: 8px; }
.home-list .home-app { flex-direction: row; justify-content: flex-start; padding: 12px 16px; }
.home-list .home-app.size-l { grid-column: auto; grid-row: auto; padding: 18px 16px; }
.home-list .home-app small { margin-left: auto; }

.home-ring { position: relative; display: block; min-height: 0; }
.home-ring .home-app { position: absolute; width: 130px; transform: translate(-50%, -50%); }
.home-ring .home-app:hover { transform: translate(-50%, calc(-50% - 2px)); }
.home-ring .home-app.size-s { width: 104px; }
.home-ring .home-app.size-l { width: 170px; }
.home-ring .home-empty { position: absolute; top: 0; }

.hub-dialog { width: min(620px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); }
.hub-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.dlg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dlg-head h2 { flex: 1; margin: 0; font-size: 20px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; }
.seg button { padding: 7px 16px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 700 13px Inter, sans-serif; cursor: pointer; }
.seg button.on { background: var(--accent); color: #fff; }
.hs-list { display: grid; gap: 6px; }
.hs-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.hs-row span { flex: 1; font-weight: 600; }
.hs-row select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }

.hub-search { width: 100%; height: 46px; margin-bottom: 16px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; }
.hub-search:focus { outline: none; border-color: var(--accent); }
.mod-list { display: grid; gap: 10px; margin-bottom: 40px; }
.mod-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.mod-body { flex: 1; min-width: 0; }
.mod-body p { margin: 4px 0; color: var(--muted); font-size: 14px; }
.mod-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mod-title small, .mod-meta { color: var(--muted); font-size: 12px; }
.mod-actions { display: flex; align-items: center; gap: 10px; }
.mod-title .tag { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.mod-title .tag.free { background: #12301f; color: #4ade80; }
.mod-title .tag.owned { background: #2a1d4a; color: #c4b5fd; }
.mod-title .tag.locked { background: #2a2a33; color: var(--muted); }
.mod-title .tag.warn { background: #3a2a0f; color: #fbbf24; }
.mod-actions .switch { position: relative; width: 40px; height: 24px; flex: none; }
.mod-actions .switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mod-actions .switch span { position: absolute; inset: 0; border-radius: 12px; background: var(--line); transition: background .2s; pointer-events: none; }
.mod-actions .switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.mod-actions .switch input:checked + span { background: var(--accent); }
.mod-actions .switch input:checked + span::after { transform: translateX(16px); }

.wiz-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wiz-dots button { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: 600 12px Inter, sans-serif; cursor: pointer; }
.wiz-dots button.on { border-color: var(--accent); color: var(--text); }
.wiz-body { min-height: 200px; }
.wiz-body h3 { margin: 0 0 8px; }
.wiz-body ul, .wiz-body ol { padding-left: 20px; }
.wiz-body li { margin: 6px 0; }
.wiz-body .wiz-vars { list-style: none; padding: 0; }
.wiz-nav { display: flex; justify-content: space-between; margin-top: 16px; }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 40px; }
.hub-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.hub-card h3 { margin: 0; font-size: 17px; }
.hub-card p { flex: 1; margin: 0; color: var(--muted); font-size: 14px; }
.hub-card .btn { align-self: flex-start; }
/* Kacheln immer quadratisch (Schachbrett und Ring) */
.home-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 150px)); align-items: start; }
.home-grid .home-app, .home-ring .home-app { aspect-ratio: 1 / 1; padding: 10px; }
.home-ring .home-app.size-l { width: 170px; }
/* Home-Knopf: Haus-Symbol mit Abstand zum Text */
.nav-center { display: inline-flex; align-items: center; gap: 9px; }
.nav-center svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Home als Liste: ausführlich wie unter „Module“ */
.home-list .home-row { align-items: flex-start; gap: 14px; padding: 16px; text-align: left; }
.home-list .home-row .mod-body p { margin: 4px 0; color: var(--muted); font-size: 14px; }
.home-status { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; color: var(--muted); font-size: 13px; }
.home-status i { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; flex: none; }
.home-status.ok i { background: #4ade80; }
.home-status.warn i { background: #fbbf24; }
.home-status.error i { background: #f87171; }
.home-list .home-row small.mod-meta { color: var(--muted); }
.home-list .home-row .tag { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.home-list .home-row .tag.free { background: #12301f; color: #4ade80; }
.home-list .home-row .tag.owned { background: #2a1d4a; color: #c4b5fd; }
.home-list .home-row .tag.locked { background: #2a2a33; color: var(--muted); }
.home-list .home-row small { margin-left: 0; }
/* Ring: runde Kacheln und runde Symbole */
.home-ring .home-app { border-radius: 50%; }
.home-ring .home-app .tile { border-radius: 50%; }
/* Ring „Nur Symbole“: Namen ausblenden, Kachel kleiner (Name erscheint beim Darüberfahren als Hinweis) */
.home-ring.icons-only .home-app b, .home-ring.icons-only .home-app small { display: none; }
.home-ring.icons-only .home-app { width: 96px; }
.home-ring.icons-only .home-app.size-s { width: 76px; }
.home-ring.icons-only .home-app.size-l { width: 128px; }
.hub-dialog .seg + .seg { margin-left: 8px; }
/* Home: Kacheln per Ziehen neu anordnen */
.home-ghost { position: fixed; z-index: 100; margin: 0; pointer-events: none; opacity: .9; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); border-color: var(--accent); }
.home-app.dragging { opacity: .3; }
.home-app.drop-before { box-shadow: -4px 0 0 0 var(--accent); }
.home-app.drop-after { box-shadow: 4px 0 0 0 var(--accent); }
.home-list .home-app.drop-before { box-shadow: 0 -4px 0 0 var(--accent); }
.home-list .home-app.drop-after { box-shadow: 0 4px 0 0 var(--accent); }
.home-ring .home-app.drop-before, .home-ring .home-app.drop-after { box-shadow: 0 0 0 3px var(--accent); }
/* Schachbrett: festes Raster aus 72-px-Feldern – Klein 1×1, Mittel 2×2, Groß 3×3; Lücken werden aufgefüllt */
.home-grid { grid-template-columns: repeat(auto-fill, 72px); grid-auto-rows: 72px; grid-auto-flow: dense; gap: 12px; justify-content: start; align-items: stretch; }
.home-grid .home-app { aspect-ratio: auto; padding: 6px; gap: 6px; min-width: 0; }
.home-grid .home-app.size-s { grid-column: span 1; grid-row: span 1; border-radius: 14px; }
.home-grid .home-app.size-m { grid-column: span 2; grid-row: span 2; }
.home-grid .home-app.size-l { grid-column: span 3; grid-row: span 3; border-radius: 22px; }
.home-grid .home-app.size-s .tile { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
.home-grid .home-app.size-s b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.home-grid .home-app.size-s small { display: none; }
.home-grid .home-app.size-m .tile { width: 56px; height: 56px; font-size: 26px; }
.home-grid .home-app.size-l .tile { width: 96px; height: 96px; font-size: 46px; border-radius: 26px; }
.home-grid .home-app.size-l b { font-size: 18px; }

/* PC-Info */
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pc-head .hub-note { margin: 0; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 40px; }
.pc-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.pc-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pc-icon { font-size: 18px; }
.pc-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; font-weight: 700; }
.pc-title.small { font-size: 14px; font-weight: 600; }
.pc-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.pc-kv span { color: var(--muted); }
.pc-kv b { font-weight: 600; text-align: right; }
.pc-meter { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.pc-bar { height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.pc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #22d3ee); transition: width .6s; }
.pc-bar i.hot { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.pc-temp { padding: 2px 9px; border-radius: 99px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pc-temp.cool { background: #12301f; color: #4ade80; }
.pc-temp.warm { background: #3a2a0f; color: #fbbf24; }
.pc-temp.hot { background: #3a1620; color: #f87171; }
.pc-chip { padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; }

/* Handbuch */
.manual { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; margin: 10px 0 60px; }
.manual.wide { grid-template-columns: minmax(0, 1fr); }
.manual-nav { position: sticky; top: 16px; align-self: start; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 32px); overflow-y: auto; }
.manual-nav a { padding: 7px 10px; border-radius: 8px; color: var(--muted); font-size: 14px; text-decoration: none; }
.manual-nav a:hover { background: var(--panel); color: var(--text); }
.manual-nav a.on { background: var(--panel-2); color: var(--text); font-weight: 600; }
.manual-nav-head { margin: 14px 10px 4px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.manual-body { min-width: 0; line-height: 1.7; }
.manual-body h1 { margin: 4px 0 8px; font-size: 34px; }
.manual-body h2 { margin: 34px 0 10px; font-size: 21px; }
.manual-body h3 { margin: 22px 0 8px; font-size: 16px; color: var(--accent-2); }
.manual-body table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.manual-body th, .manual-body td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.manual-body th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.manual-body li { margin: 4px 0; }
.manual-body a { color: var(--accent-2); }
.manual-body .btn { color: #fff; }
.manual-crumbs { margin: 0; color: var(--muted); font-size: 13px; }
.manual-crumbs a { color: var(--muted); }
.manual-lead { color: var(--muted); font-size: 17px; }
.manual-body .tip { padding: 12px 14px; border-radius: 10px; background: #1f1a0b; color: #fde68a; font-size: 14px; }
.manual-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.manual-facts span { padding: 4px 10px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font-size: 13px; }
.manual-cta { margin-top: 30px; }
.manual-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.manual-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text) !important; text-decoration: none; transition: border-color .15s, transform .15s; }
.manual-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.manual-card > span:first-child { font-size: 24px; }
/* .tile stärker als die Regel davor (span:first-child = 24 px Emoji-Größe), sonst wird „TFT“ zu groß */
.manual-card > span.tile { width: 36px; height: 36px; font-size: 18px; }
.manual-card small { color: var(--muted); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.btn-manual { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .manual { grid-template-columns: 1fr; } .manual-nav { position: static; max-height: none; } }

/* Handbuch-Links: Modulkarten auf der Startseite */
.module { cursor: pointer; }
.module-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.module-manual { padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.module-manual:hover { border-color: var(--accent); color: var(--text); }
a.icon-btn { text-decoration: none; font-size: 14px; }

/* Halten dauert 2 s (Handbuch öffnen) */
.home-app.holding::after { animation-duration: 2s; }
/* Home-Liste = Zeilen wie unter „Module“, ziehbar */
.home-list { display: grid; gap: 10px; }
.home-mod-row, .home-settings-row { cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; transition: border-color .15s; }
.home-mod-row:hover, .home-settings-row:hover { border-color: var(--accent); }
.home-settings-row { border-style: dashed; align-items: center; }
.home-settings-row .mod-body p { margin: 2px 0 0; }
.mod-row.dragging { opacity: .3; }
.home-list .mod-row.drop-before { box-shadow: 0 -4px 0 0 var(--accent); }
.home-list .mod-row.drop-after { box-shadow: 0 4px 0 0 var(--accent); }
.home-mod-row .home-status { display: flex; margin-top: 6px; }
.mod-row.home-ghost { position: fixed; }
/* Schachbrett: Griff unten rechts zum Ändern der Größe */
.size-grip { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 0 0 14px 0; cursor: nwse-resize; opacity: 0; transition: opacity .15s; z-index: 2;
  background: linear-gradient(135deg, transparent 55%, var(--accent) 55%, var(--accent) 63%, transparent 63%, transparent 72%, var(--accent) 72%, var(--accent) 80%, transparent 80%); }
.home-app:hover .size-grip, .home-app.resizing .size-grip { opacity: 1; }
.home-app.resizing { border-color: var(--accent); }
.home-app.holding::after { animation-duration: .75s; }
/* Navigation ruhig halten: Platz fürs Profilbild ist von Anfang an reserviert (sonst rutschen die Links,
   sobald die Kontodaten geladen sind), der Home-Knopf blendet sanft ein statt aufzuploppen */
.account-menu { min-width: 42px; min-height: 42px; }
.account-menu:empty { border-radius: 50%; background: var(--panel-2); opacity: .5; }
.nav-center { animation: nav-fade .3s ease-out; }
@keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }
/* Shop: Platz vorab reservieren (Fußzeile springt nicht), Inhalt beim ersten Laden sanft einblenden */
.shop { min-height: 80vh; opacity: 0; }
.shop.ready { opacity: 1; transition: opacity .25s ease-out; }

/* Kopfzeile bleibt oben und schrumpft beim Scrollen stufenlos (--s: 0 = oben, 1 = ganz geschrumpft,
   gesetzt von account-menu.js). Der Hintergrund reicht über die ganze Fensterbreite. */
html { overflow-x: clip; }
.nav { position: sticky; top: 0; z-index: 40; padding: calc(20px - 12px * var(--s, 0)) 0; }
.nav::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: rgba(11, 11, 15, calc(.88 * var(--s, 0)));
  backdrop-filter: blur(calc(12px * var(--s, 0))); -webkit-backdrop-filter: blur(calc(12px * var(--s, 0)));
  border-bottom: 1px solid rgba(38, 38, 49, var(--s, 0));
}
.brand { font-size: calc(17px - 2px * var(--s, 0)); }
.brand img { width: calc(30px - 8px * var(--s, 0)); height: calc(30px - 8px * var(--s, 0)); }
.nav-center { padding: calc(9px - 3px * var(--s, 0)) calc(22px - 6px * var(--s, 0)); }
.nav-center svg { width: calc(19px - 3px * var(--s, 0)); height: calc(19px - 3px * var(--s, 0)); }
.avatar-btn { width: calc(42px - 10px * var(--s, 0)); height: calc(42px - 10px * var(--s, 0)); }
.account-menu { min-width: calc(42px - 10px * var(--s, 0)); min-height: calc(42px - 10px * var(--s, 0)); }

/* Handbuch-Seitenleiste: unter der Kopfzeile, kompakter, scrollt nur wenn sie wirklich nicht passt */
.manual-nav { top: 72px; max-height: calc(100vh - 88px); gap: 0; scrollbar-width: thin; }
.manual-nav a { padding: 5px 10px; font-size: 13.5px; }
.manual-nav-head { margin: 10px 10px 3px; }
.manual-nav-head:first-child { margin-top: 0; }
/* Mini-Kopfzeile noch flacher */
.nav { padding: calc(20px - 16px * var(--s, 0)) 0; }
.brand { font-size: calc(17px - 4px * var(--s, 0)); gap: calc(10px - 3px * var(--s, 0)); }
.brand img { width: calc(30px - 12px * var(--s, 0)); height: calc(30px - 12px * var(--s, 0)); }
.nav-center { padding: calc(9px - 6px * var(--s, 0)) calc(22px - 10px * var(--s, 0)); font-size: calc(14px - 2px * var(--s, 0)); }
.nav-center svg { width: calc(19px - 6px * var(--s, 0)); height: calc(19px - 6px * var(--s, 0)); }
.nav-link { font-size: calc(14px - 2px * var(--s, 0)); }
.avatar-btn { width: calc(42px - 16px * var(--s, 0)); height: calc(42px - 16px * var(--s, 0)); border-width: calc(2px - 1px * var(--s, 0)); }
.account-menu { min-width: calc(42px - 16px * var(--s, 0)); min-height: calc(42px - 16px * var(--s, 0)); }
.manual-nav { top: 48px; max-height: calc(100vh - 64px); }

/* Kopfzeile v3: Ihre Höhe im Seitenfluss bleibt immer gleich (sonst verschiebt sich beim Hochscrollen die
   ganze Seite und es fühlt sich an wie Bremsen). Beim Scrollen rutscht sie 40 px nach oben aus dem Bild
   (sticky mit negativem top), der Inhalt wird per transform kleiner und bleibt im sichtbaren Rest mittig. */
body { overflow-anchor: none; }
.nav { top: -40px; padding: 20px 0; }
.brand { font-size: 17px; gap: 10px; }
.brand img { width: 30px; height: 30px; }
.nav-center { padding: 9px 22px; font-size: 14px; }
.nav-center svg { width: 19px; height: 19px; }
.nav-link { font-size: 14px; }
.avatar-btn { width: 42px; height: 42px; border-width: 2px; }
.account-menu { min-width: 42px; min-height: 42px; }
.nav::before { top: calc(40px * var(--s, 0)); }
.brand { transform-origin: left center; transform: translateY(calc(20px * var(--s, 0))) scale(calc(1 - .4 * var(--s, 0))); }
.nav-right { transform-origin: right center; transform: translateY(calc(20px * var(--s, 0))) scale(calc(1 - .4 * var(--s, 0))); }
.nav-center { transform: translateX(-50%) translateY(calc(20px * var(--s, 0))) scale(calc(1 - .3 * var(--s, 0))); }
@media (max-width: 560px) { .nav-center { transform: none; } }
.manual-nav { top: 52px; max-height: calc(100vh - 68px); }
/* Konto-Menü nicht mitschrumpfen: Verkleinerung der rechten Gruppe ausgleichen */
.nav-right .menu { transform-origin: top right; transform: scale(calc(1 / (1 - .4 * var(--s, 0)))); }
/* Mini-Kopfzeile: Schrift weniger stark verkleinern (80 % statt 60 %), Höhe bleibt */
.brand { transform: translateY(calc(20px * var(--s, 0))) scale(calc(1 - .2 * var(--s, 0))); }
.nav-right { transform: translateY(calc(20px * var(--s, 0))) scale(calc(1 - .2 * var(--s, 0))); }
.nav-center { transform: translateX(-50%) translateY(calc(20px * var(--s, 0))) scale(calc(1 - .12 * var(--s, 0))); }
.nav-right .menu { transform: scale(calc(1 / (1 - .2 * var(--s, 0)))); }
@media (max-width: 560px) { .nav-center { transform: none; } }
/* Logo, Links und Profilbild in der Mini-Kopfzeile fast in voller Größe (92 %) */
.brand { transform: translateY(calc(20px * var(--s, 0))) scale(calc(1 - .08 * var(--s, 0))); }
.nav-right { transform: translateY(calc(20px * var(--s, 0))) scale(calc(1 - .08 * var(--s, 0))); }
.nav-right .menu { transform: scale(calc(1 / (1 - .08 * var(--s, 0)))); }
/* Knöpfe in der Mini-Leiste etwas kleiner, damit oben und unten Luft bleibt */
.nav-center { transform: translateX(-50%) translateY(calc(20px * var(--s, 0))) scale(calc(1 - .22 * var(--s, 0))); }
.nav-right .nav-home { transform-origin: right center; transform: scale(calc(1 - .2 * var(--s, 0))); }
@media (max-width: 560px) { .nav-center { transform: none; } }
/* Gezogene Kachel im Ring: rund wie das Original */
.home-ghost.ghost-ring, .home-ghost.ghost-ring .tile { border-radius: 50%; }
.home-ghost.ghost-icons b, .home-ghost.ghost-icons small { display: none; }
/* Ring: Ziel beim Ziehen – Kachel zum Tauschen bzw. Punkt in der Lücke zum Einfügen */
.home-ring .home-app.drop-swap { box-shadow: 0 0 0 3px var(--accent), 0 0 24px rgba(139, 92, 246, .5); }
.ring-slot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(139, 92, 246, .25), 0 0 20px rgba(139, 92, 246, .6); pointer-events: none; }

/* Freies Brett: Zielfeld beim Ziehen */
.grid-slot { border: 2px dashed var(--accent); border-radius: 18px; background: rgba(139, 92, 246, .1); pointer-events: none; z-index: 0; }
.home-grid { grid-auto-rows: 72px; }
.hub-dialog .seg button:hover { color: var(--text); }

/* Foto-Kacheln im Schachbrett */
.home-photo { overflow: hidden; border-style: dashed; }
.home-photo.has-photo { padding: 0; border-style: solid; }
.home-photo img { width: 100%; height: 100%; display: block; pointer-events: none; background: #0b0b0f; }
.photo-plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2); color: var(--accent-2); font-size: 28px; font-weight: 300; line-height: 1; }
.home-grid .home-photo.size-s .photo-plus { width: 30px; height: 30px; font-size: 20px; }
.home-grid .home-photo.size-s b { display: none; }
.photo-preview { width: 100%; height: 200px; margin-bottom: 12px; border-radius: 12px; background: #0b0b0f; }
.photo-actions { display: flex; gap: 8px; margin-top: 14px; }
.photo-actions .btn.danger { border-color: transparent; background: #3a1620; color: #fecaca; }
/* Foto-Kachel mit angeheftetem Link */
.photo-link { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(11, 11, 15, .75); font-size: 11px; pointer-events: none; }
.photo-link-field { display: grid; gap: 6px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.photo-link-field .hub-search { height: 40px; margin: 0; }
.photo-link-field .hub-search.invalid { border-color: #ef4444; }
.photo-link-hint { display: none; color: #fca5a5; font-size: 12px; }
.photo-link-field .invalid + .photo-link-hint { display: block; }
/* Items: Titel-Kachel, Bild mit Beschriftung (wie ein Modul) */
.home-photo.has-title, .home-photo.has-caption { border-style: solid; }
.item-title { max-width: 100%; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.home-grid .home-photo.size-s .item-title { display: -webkit-box; font-size: 12px; -webkit-line-clamp: 2; }
.home-grid .home-photo.size-l .item-title { font-size: 18px; }
.item-thumb { width: 56px; height: 56px; flex: none; overflow: hidden; border-radius: 16px; }
.home-app.size-s .item-thumb { width: 40px; height: 40px; border-radius: 12px; }
.home-app.size-l .item-thumb { width: 92px; height: 92px; border-radius: 24px; }
.item-thumb img { width: 100%; height: 100%; display: block; pointer-events: none; background: #0b0b0f; }
.home-grid .home-photo.has-caption.size-s b { display: none; }
.item-label { margin-top: 14px; }
.photo-actions .item-save { margin-left: auto; }
/* Home gesperrt: kein Größen-Griff */
.home.locked .size-grip { display: none; }
/* PC-Info: Tipps hinter einem gelben (i) – beim Darüberfahren oder Antippen */
.pc-info { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: auto; border-radius: 50%; background: #3a2a0f; color: #fbbf24; font: italic 700 12px Georgia, serif; text-transform: none; letter-spacing: 0; cursor: help; flex: none; }
.pc-info:focus { outline: 2px solid #fbbf24; outline-offset: 2px; }
.pc-pop { position: absolute; top: calc(100% + 8px); right: -6px; z-index: 30; display: none; gap: 8px; width: 300px; padding: 12px 14px; border: 1px solid #5a4313; border-radius: 12px; background: #1f1a0b; color: #fde68a; font: 400 13px/1.5 Inter, sans-serif; font-style: normal; text-align: left; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); cursor: default; }
.pc-pop small { color: #d6b96a; font-size: 11.5px; line-height: 1.45; }
.pc-info:hover .pc-pop, .pc-info:focus .pc-pop, .pc-info:focus-within .pc-pop { display: grid; }
.pc-pop { text-transform: none; letter-spacing: normal; }

/* Hub: Filter, Abzeichen, Vorschauen */
.hub-filters { display: grid; gap: 10px; margin-bottom: 18px; }
.hub-filters .hub-search { margin-bottom: 0; }
.hub-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hub-chip { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); font: 600 13px Inter, sans-serif; cursor: pointer; }
.hub-chip:hover { color: var(--text); }
.hub-chip[aria-pressed=true] { border-color: var(--accent); background: rgba(139, 92, 246, .18); color: var(--text); }
.hub-chip-gap { flex: 0 0 14px; }
.hub-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.hub-badge { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--muted); font-size: 11px; font-weight: 700; }
.hub-badge.free { background: rgba(34, 197, 94, .14); color: #86efac; }
.hub-badge.pro { background: rgba(250, 204, 21, .14); color: #fde68a; }
.hub-badge.std { background: rgba(139, 92, 246, .16); color: #c4b5fd; }
.hub-preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #000; }
.hub-audio { display: flex; align-items: center; gap: 8px; }
.hub-locked-preview { display: grid; place-items: center; gap: 2px; aspect-ratio: 16 / 9; border-radius: 10px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px); color: var(--muted); font-size: 28px; }
.hub-locked-preview small { font-size: 11px; }
.hub-meta { display: flex; align-items: center; gap: 8px; }
.hub-card.locked { opacity: .85; }

.hub-have { align-self: flex-start; padding: 7px 0; color: #86efac; font-size: 13px; font-weight: 600; }

.hub-volume { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 14px; }
.hub-volume input { width: 120px; accent-color: var(--accent); }

/* Vorschau der Vorlagen im Hub */
.hub-tpl-preview { display: grid; place-items: center; min-height: 110px; padding: 8px; border-radius: 10px; overflow: hidden;
  background: repeating-conic-gradient(#1b1b22 0% 25%, #15151b 0% 50%) 50% / 16px 16px; }
.hub-tpl-frame { position: relative; overflow: hidden; }
.hub-tpl-wait { color: var(--muted); font-size: 12px; }

.hub-tpl-preview { height: 150px; min-height: 0; box-sizing: border-box; }
.hub-tpl-frame { flex: none; max-width: 100%; max-height: 134px; }

.hub-owned { margin-left: auto; }
.hub-owned + .hub-volume { margin-left: 14px; }

/* Hub-Filter: nichts springt beim Umschalten (gleiche Höhe, Platz für die Bildlaufleiste reserviert) */
html { scrollbar-gutter: stable; }
.hub-chips { min-height: 34px; }
.hub-chip { height: 32px; box-sizing: border-box; line-height: 1; }
.hub-volume { height: 32px; }

/* Dünne, dezente Bildlaufleisten überall (ohne Pfeile) */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
*:hover { scrollbar-color: rgba(255, 255, 255, .28) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .3); }
::-webkit-scrollbar-button { display: none; }
/* Abzeichen mit mehreren Buchstaben (TFT, LoL): kleiner als ein einzelnes Zeichen, damit sie in die Kachel passen */
.tile-txt { line-height: 1; white-space: nowrap; letter-spacing: -.02em; }
.tile-txt.len-2 { font-size: .8em; }
.tile-txt.len-3 { font-size: .62em; }
.tile-txt.len-4 { font-size: .5em; }
/* Ordner im Schachbrett: Kachel mit bis zu 4 kleinen Symbolen, Name darunter */
.home-folder { gap: 8px; }
.folder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; width: 56px; height: 56px; padding: 5px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-sizing: border-box; }
.home-app.size-s .folder-grid { width: 40px; height: 40px; padding: 3px; gap: 2px; border-radius: 12px; }
.home-app.size-l .folder-grid { width: 92px; height: 92px; padding: 8px; gap: 6px; border-radius: 24px; }
.home-grid .home-app.size-s.home-folder b { display: none; }
.folder-mini { display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; overflow: hidden; border-radius: 6px; font-size: 9px; }
/* Die kleinen Symbole im Ordner: stärker als die Kachel-Größen der Module (.home-grid .home-app.size-m .tile …) */
.home-grid .home-app .folder-grid .tile.folder-mini, .home-grid .home-app .folder-grid .folder-mini { width: 100%; height: 100%; min-height: 0; border-radius: 5px; font-size: 10px; }
.home-grid .home-app.size-l .folder-grid .tile.folder-mini { border-radius: 8px; font-size: 16px; }
.home-grid .home-app.size-s .folder-grid .tile.folder-mini { border-radius: 3px; font-size: 6px; }
.folder-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); overflow: hidden; flex: none; }
.folder-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folder-mini.text { background: var(--panel-2); color: var(--muted); font-weight: 700; }
.folder-mini.empty { background: rgba(255, 255, 255, .04); }
.folder-more { position: absolute; right: 8px; top: 6px; color: var(--muted) !important; font-size: 11px !important; }
.home-folder.drop-into { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, .35); transform: scale(1.04); }
/* Geöffneter Ordner */
.folder-name { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 18px; font-weight: 700; }
.folder-name:hover, .folder-name:focus { border-color: var(--line); background: var(--panel-2); outline: none; }
.folder-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; }
.folder-item { position: relative; }
.folder-open { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 14px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.folder-open:hover { border-color: var(--accent); }
.folder-open > .folder-mini, .folder-open > .tile { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.folder-out { position: absolute; right: 4px; top: 4px; }
/* Inhalt im geöffneten Ordner: alle Kacheln gleich groß (quadratisch), Name höchstens zwei Zeilen */
.folder-items { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-auto-rows: 1fr; }
.folder-item { display: flex; }
.folder-open { justify-content: center; height: 100%; aspect-ratio: 1 / 1; padding: 10px 8px; box-sizing: border-box; }
.folder-open > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; line-height: 1.3; }
/* Shop: ⓘ Inhalt eines Moduls */
.info-link { align-self: flex-start; margin: -4px 0 4px; padding: 0; border: 0; background: none; color: var(--accent-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.info-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.info-dialog { overscroll-behavior: contain; width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 0 22px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); overflow-y: auto; }
.info-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.info-head { position: sticky; top: 0; display: flex; align-items: center; gap: 12px; margin: 0 -22px; padding: 16px 22px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.info-head h3 { flex: 1; margin: 0; font-size: 20px; }
.info-base { margin: 14px 0 4px; font-weight: 600; }
.info-sec h4 { margin: 16px 0 6px; color: var(--accent-2); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.info-sec ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.info-sec li b { color: var(--text); }
.info-sec ul ul { margin: 2px 0 6px; }

/* ==========================================================================
   Design 2: ruhiger und eleganter – weiche Flächen statt umrandeter Kästen,
   runde Knöpfe, mehr Luft. Steht am Ende, damit es die älteren Regeln ablöst.
   ========================================================================== */
:root {
  --bg: #09090c;
  --surface: rgba(255, 255, 255, .03);
  --surface-2: rgba(255, 255, 255, .055);
  --hairline: rgba(255, 255, 255, .07);
  --radius: 18px;
}
body {
  background: radial-gradient(1100px 520px at 50% -180px, rgba(139, 92, 246, .16), transparent 70%), var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Überschriften und Einstieg */
.hero { padding: 88px 0 36px; }
.hero h1 { font-weight: 800; letter-spacing: -.035em; }
.hero p { color: #a1a1b0; }
.wrap > h2 { margin: 84px 0 22px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Knöpfe: rund, ohne harte Ränder */
.btn { height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); transition: background .15s, box-shadow .15s, filter .15s; }
.btn:hover { background: rgba(255, 255, 255, .09); }
.btn.primary { background: linear-gradient(180deg, #9a6cff, #7c4def); box-shadow: 0 10px 28px -10px rgba(139, 92, 246, .75), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn.primary:hover { background: linear-gradient(180deg, #a57cff, #8556f5); }
.btn.danger { box-shadow: none; }
.nav-home { padding: 9px 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--text); font-weight: 600; }
.nav-home:hover { filter: none; background: rgba(255, 255, 255, .09); }
.nav-center { border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); font-weight: 600; }
.nav-center:hover, .nav-center.active { box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .6); }
.avatar-btn { border-color: var(--hairline); }

/* App-Symbole der Module: weiche Kachel mit Licht von oben */
.tile {
  border-radius: 30%;
  background: linear-gradient(155deg, color-mix(in srgb, var(--tile, var(--accent)) 78%, #fff), var(--tile, var(--accent)) 45%, color-mix(in srgb, var(--tile, var(--accent)) 78%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 20px -10px color-mix(in srgb, var(--tile, var(--accent)) 80%, transparent);
}

/* „So funktioniert's“: Schritte an einer feinen Linie statt Kästen */
.steps { gap: 0 28px; border-top: 1px solid var(--hairline); }
.step { position: relative; padding: 24px 0 0; background: none; border: 0; border-radius: 0; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--accent); }
.step b { display: block; width: auto; height: auto; margin-bottom: 12px; border-radius: 0; background: none; color: var(--accent-2); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; }
.step b::before { content: "0"; }
.step h3 { font-size: 16.5px; letter-spacing: -.01em; }
.step p { color: #9a9aaa; line-height: 1.65; }

/* Module auf der Startseite: offene Liste, Fläche nur beim Darüberfahren */
.modules { gap: 6px 18px; }
.module { gap: 10px; padding: 18px; background: transparent; border: 0; border-radius: var(--radius); transition: background .2s; }
.module:hover { background: var(--surface); transform: none; }
.module-head { gap: 14px; }
.module h3 { font-size: 16.5px; letter-spacing: -.01em; }
.module p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #9a9aaa; line-height: 1.6; }
.module-meta { color: #6f6f7e; font-size: 12.5px; }
.module-open { font-size: 13.5px; }
.module-manual { padding: 0; border: 0; color: var(--muted); font-size: 13.5px; }
.module-manual:hover { color: var(--text); }

/* Karte als Ganzes klickbar, der Link darin wie bisher als Text */
a.module-open { text-decoration: none; }
a.module-open:hover { text-decoration: underline; }

/* „Was du damit baust“: Funktionen in Spalten, ruhig wie die Schritte */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px 28px; }
.feature h3 { margin: 0 0 6px; font-size: 16.5px; letter-spacing: -.01em; }
.feature h3::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 14px; border-radius: 2px; background: var(--accent); }
.feature p { margin: 0; color: #9a9aaa; font-size: 14px; line-height: 1.65; }

/* Häufige Fragen (Startseite und Shop) */
.faq { display: grid; gap: 0; margin-top: 12px; padding: 4px 6px; border-radius: 20px; background: rgba(255, 255, 255, .03); }
.faq details { padding: 16px 18px; }
.faq details + details { box-shadow: 0 -1px 0 0 rgba(255, 255, 255, .07); }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin: 10px 0 0; color: var(--muted); }

/* Hinweis unten: Zeile mit Symbol statt Kasten */
.note { align-items: flex-start; margin: 84px 0 56px; padding: 26px 0 0; background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; line-height: 1.65; }
.note-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: rgba(139, 92, 246, .12); color: var(--accent-2); }
.note-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
footer { border-top-color: var(--hairline); }

/* Handbuch: Themen als offene Liste mit Symbol */
.manual-cards { gap: 4px 14px; }
.manual-card { gap: 6px; padding: 16px; border: 0; background: transparent; border-radius: var(--radius); transition: background .2s; }
.manual-card:hover { background: var(--surface); transform: none; }
.manual-card > span:first-child { font-size: inherit; }
.manual-card b { margin-top: 6px; font-size: 15.5px; letter-spacing: -.01em; }
.manual-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(139, 92, 246, .12); color: var(--accent-2); }
.manual-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.manual-nav a.on { background: var(--surface-2); }
.manual-nav a:hover { background: var(--surface); }
.manual-body th, .manual-body td { border-bottom-color: var(--hairline); }
.manual-body .tip { background: rgba(250, 204, 21, .07); color: #f5deb0; }
.manual-facts span { background: var(--surface-2); }

/* Home, Hub, PC-Info, Modul-Liste: Flächen ohne Rand */
.hub-tabs { width: max-content; max-width: 100%; margin: 8px auto 30px; padding: 4px; gap: 2px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.hub-tabs button { padding: 8px 20px; border: 0; font-weight: 600; }
.hub-tabs button[aria-selected=true] { background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--text); }
.hub-card, .pc-card { border: 0; background: var(--surface); border-radius: var(--radius); }
.hub-search { border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.hub-search:focus { box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .7); }
.hub-chip { border: 0; background: var(--surface); }
.hub-chip[aria-pressed=true] { background: rgba(139, 92, 246, .2); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .5); }
/* Listen (Module, Home als Liste): eine ruhige Fläche, Einträge durch feine Linien getrennt */
.mod-list, .home-list { gap: 0; padding: 4px; border-radius: 20px; background: var(--surface); }
.mod-row { border: 0; border-radius: 14px; background: none; }
.mod-row + .mod-row { box-shadow: 0 -1px 0 0 var(--hairline); }
.home-mod-row:hover, .home-settings-row:hover { border-color: transparent; background: var(--surface); }
.home-settings-row { border: 0; }
.mod-row.home-ghost { background: #17171d; }
/* Home-Kacheln wie App-Symbole: kein Kasten, beim Darüberfahren eine weiche Fläche */
.home-app { border: 1px solid transparent; background: transparent; transition: background .2s, border-color .2s; }
.home-app:hover { border-color: transparent; background: var(--surface); transform: none; }
.home-app .tile, .home-app .folder-grid, .home-app .item-thumb { transition: transform .2s; }
.home-app:hover .tile, .home-app:hover .folder-grid, .home-app:hover .item-thumb { transform: translateY(-2px); }
.home-app b { font-weight: 600; }
.home-settings, .home-photo:not(.has-photo):not(.has-title):not(.has-caption) { border: 1px dashed rgba(255, 255, 255, .12); }
.home-photo.has-photo { border: 0; }
.home-ghost { background: #17171d; border-color: transparent; }
.folder-open { border: 0; background: transparent; }
.folder-open:hover { background: var(--surface); }
.folder-grid { background: var(--surface-2); }

/* Fenster, Formulare, Rechtliches */
.hub-dialog, .info-dialog { border: 0; border-radius: 22px; background: #131318; box-shadow: 0 30px 90px rgba(0, 0, 0, .65), inset 0 0 0 1px var(--hairline); }
.info-head { background: #131318; border-bottom-color: var(--hairline); }
.menu { border: 0; background: #131318; box-shadow: 0 20px 50px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--hairline); }
.menu-head { border-bottom-color: var(--hairline); }
.menu-item:hover { background: var(--surface-2); }
.seg { border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); border-radius: 999px; }
.seg button { border-radius: 999px; }
.hs-row { background: var(--surface); }
.form { border: 0; background: var(--surface); border-radius: 20px; }
.form input[type=text], .form input[type=email], .form textarea, .form select { border-color: var(--hairline); background: rgba(0, 0, 0, .25); }
.legal .box { border: 0; background: var(--surface); }
.icon-btn { border: 0; background: var(--surface-2); }
.hub-toast { border: 0; background: #17171d; box-shadow: 0 12px 40px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--hairline); }
.info-link { justify-self: start; }
/* Hinweis unter dem Download-Knopf: Windows-Warnung bei unsignierten Programmen */
.hero .smartscreen { max-width: 560px; margin: 14px 0 0; color: #6f6f7e; font-size: 13px; line-height: 1.55; }
.hero .smartscreen b { color: var(--muted); font-weight: 600; }
/* Handbuch: Code-Beispiele */
.manual-body pre { margin: 8px 0 14px; padding: 12px 16px; border-radius: 14px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--hairline); overflow-x: auto; line-height: 1.55; }
.manual-body pre code { padding: 0; background: none; color: #e4e4ec; font-size: 13px; }
.manual-body kbd { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font: 12px Inter, sans-serif; }
/* Home: eigenes Modul-Symbol aus der App */
.tile.has-icon { overflow: hidden; padding: 0; background: none; box-shadow: none; }
.tile.has-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sprachwahl in der Fußzeile */
.lang-pick { margin-left: auto; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--muted); font: 600 13px Inter, sans-serif; cursor: pointer; }
.lang-pick:hover { color: var(--text); }
.lang-pick { color-scheme: dark; }
.lang-pick option { background: #17171f; color: #f2f2f5; }
.footer-links { align-items: center; }

/* Alle Auswahllisten mit dunkler, lesbarer Liste (wie die Sprachauswahl) */
select { color-scheme: dark; }
select option { background: #17171f; color: #f2f2f5; }

/* Unterstützen im Footer: nur sichtbar, wenn in site.json ein Link steht */
.footer-donate[href=""] { display: none; }

/* Module „in Arbeit“ (Admin → Module): grau mit WIP, nicht nutzbar */
.home-app.wip .tile, .mod-row.wip .tile { filter: grayscale(1); opacity: .45; }
.home-app.wip b { opacity: .6; }
.wip-tag { padding: 1px 7px; border-radius: 999px; background: #2a2a33; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.mod-title .tag.wip, .home-list .home-row .tag.wip { background: #2a2a33; color: var(--muted); }
.manual-legal { margin-top: 26px; color: var(--muted); font-size: 12.5px; }
.manual-wip { padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .05); color: var(--muted); }
.manual-wip-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #2a2a33; color: var(--muted); font-size: 11px; font-weight: 700; vertical-align: middle; }