@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
/* i3ucky's Tools – Theme "Studio": ruhig wie Profi-Software, Akzent Twitch-Lila */
:root, body.sx, body.pw-admin {
  --bg: #131417; --panel: #1a1c20; --panel2: #22252a; --line: #2c2f35; --text: #e7e8ea; --muted: #8a8f98;
  --acc: #9146ff; --acc-h: #a46bff; --acc-ink: #ffffff; --ok: #3ecf8e; --warn: #f5a524;
  --t1: #e7e8ea; --t2: #9146ff; --t3: #4fc4cf; --t-ink: #131417; --t2-txt: #b48cff;
  --f-body: 'IBM Plex Sans', system-ui, sans-serif; --f-head: 'IBM Plex Sans', system-ui, sans-serif; --f-label: 'IBM Plex Mono', ui-monospace, monospace; --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --hw: 600; --hls: -.015em; --lw: 500; --lls: .08em;
  --r: 5px; --r-s: 3px; --r-card: 8px; --bw: 1px;
  --top-bg: #0f1013; --side-bg: #0f1013; --code-bg: #0f1013; --thumb-bg: #0f1013;
  --h1-size: clamp(2.2rem, 4.2vw, 3.4rem); --em-color: var(--acc);
  --eyebrow: var(--muted); --card-hover: #4a4f58; --card-hover2: #3a3e45;
}

/* ================= Bausteine (alle Werte kommen aus den Variablen oben) ================= */
:root, body.sx, body.pw-admin {
    --pw-bg: var(--bg); --pw-surface: var(--panel); --pw-border: var(--line); --pw-text: var(--text); --pw-muted: var(--muted);
    --pw-primary: var(--acc); --pw-primary-dark: var(--acc);
    --sx-panel: var(--panel); --sx-panel2: var(--panel2); --sx-line: var(--line); --sx-pink: var(--t2); --sx-p2: var(--t3); --sx-ok: var(--ok);
}
body.sx, body.pw-admin { font-family: var(--f-body); background: var(--bg); background-image: var(--bg-img, none); color: var(--text); -webkit-font-smoothing: antialiased; }
body.sx h1, body.sx h2, body.sx h3, body.pw-admin h1, body.pw-admin h2 { font-family: var(--f-head); font-weight: var(--hw); font-style: var(--hst, normal);
    text-transform: var(--htt, none); letter-spacing: var(--hls, 0); line-height: var(--hlh, 1.1); }
::selection { background: var(--acc); color: var(--acc-ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sx-lbl, .sx-eyebrow, .sx-facts span, .db-tile > span, .db-h2, .db-lbl, .sx-grp, .sx-badges .b, .sx-tag, .sx-open, .db-badge, .nb, .sx-chip, .sx-fchip, .pw-lang-switch a {
    font-family: var(--f-label); text-transform: var(--ltt, uppercase); letter-spacing: var(--lls, .06em); font-weight: var(--lw, 600); }

/* Kopfzeile */
.sx-top { background: var(--top-bg, var(--bg)); backdrop-filter: none; border-bottom: var(--bw) solid var(--line); }
.sx-brand { font-family: var(--f-head); font-weight: var(--hw); font-style: var(--hst, normal); text-transform: var(--htt, none); font-size: 1.15rem; }
.sx-logo { font-size: 0 !important; width: 30px; height: 30px; border-radius: var(--r); background: var(--acc); box-shadow: var(--logo-sh, none); position: relative; }
.sx-logo::after { content: 'i3'; position: absolute; inset: 0; display: grid; place-items: center; font: var(--hw) 15px/1 var(--f-head); font-style: var(--hst, normal); color: var(--acc-ink); letter-spacing: -.02em; }
.sx-avatar { border-radius: var(--r); background: var(--panel2); color: var(--text); border: var(--bw) solid var(--line); }
.sx-chip { border-radius: var(--r-s); background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: .66rem; padding: 3px 7px; }
.sx-chip.ok { background: transparent; border-color: var(--ok); color: var(--ok); }
.pw-lang-switch { border: var(--bw) solid var(--line); border-radius: var(--r); }
.pw-lang-switch a { border-radius: var(--r-s); font-size: .7rem; }
.pw-lang-switch a.active { background: var(--text); color: var(--bg); }

/* Knöpfe */
.sx-btn { border-radius: var(--r); font-family: var(--f-btn, var(--f-body)); font-weight: var(--bw-weight, 600); text-transform: var(--btt, none); letter-spacing: var(--bls, 0);
          font-size: var(--bfs, .92rem); border: var(--bw) solid transparent; transition: transform .12s, box-shadow .12s, background .12s; clip-path: var(--btn-clip, none); }
.sx-btn.sm { font-size: calc(var(--bfs, .92rem) * .9); }
.sx-btn.pri { background: var(--acc); color: var(--acc-ink) !important; border-color: var(--btn-border, transparent); box-shadow: var(--btn-sh, none); }
.sx-btn.pri:hover { background: var(--acc-h, var(--acc)); transform: var(--btn-hover-move, none); box-shadow: var(--btn-sh-h, var(--btn-sh, none)); }
.sx-btn.sec { background: var(--btn2-bg, transparent); color: var(--text); border-color: var(--btn-border, var(--line)); box-shadow: var(--btn-sh, none); }
.sx-btn.sec:hover { border-color: var(--btn2-hover, var(--text)); transform: var(--btn-hover-move, none); box-shadow: var(--btn-sh-h, var(--btn-sh, none)); }

/* Startseite */
.sx-hero { background: var(--hero-bg, transparent); border-bottom: var(--bw) solid var(--line); padding: 72px 40px 56px; }
.sx-hero::before, .sx-hero::after { display: none; }
.sx-eyebrow { background: none; border: 0; padding: 0; border-radius: 0; color: var(--eyebrow, var(--acc)); font-size: .74rem; }
.sx-hero h1 { hyphens: manual; text-wrap: balance; font-size: var(--h1-size, clamp(2.3rem, 4.6vw, 3.8rem)); line-height: var(--h1-lh, 1.04); }
.sx-hero h1 em { background: var(--em-bg, none); -webkit-background-clip: initial; background-clip: initial; color: var(--em-color, var(--acc)); padding: var(--em-pad, 0); }
.sx-lead { color: var(--lead, var(--muted)); }
.sx-facts { gap: 34px; }
.sx-facts > div { display: flex; flex-direction: column-reverse; gap: 2px; }
.sx-facts b { font-family: var(--f-head); font-weight: var(--hw); font-style: var(--hst, normal); font-size: 1.7rem; }
.sx-facts span { font-size: .66rem; }
.sx-collage img { border-radius: var(--r-card); border: var(--bw) solid var(--line); box-shadow: var(--img-sh, 0 20px 40px rgba(0,0,0,.4)); }
.sx-tier { border-radius: var(--r-card); border: var(--bw) solid var(--line); background: var(--panel); box-shadow: var(--card-sh, none); }
.sx-tier.mine { border-color: var(--ok); box-shadow: var(--card-sh, none); }
.sx-tier .n { border-radius: var(--r); background: var(--t1); color: var(--t-ink); font-family: var(--f-head); font-weight: var(--hw); font-style: var(--hst, normal); }
.sx-tier.t2 .n { background: var(--t2); color: var(--t-ink); }
.sx-tier.t3 .n { background: var(--t3); color: var(--t-ink); }
.sx-tier b { font-family: var(--f-head); font-weight: var(--hw); font-style: var(--hst, normal); text-transform: var(--htt, none); }
.sx-fchip { border-radius: var(--r); border: var(--bw) solid var(--line); font-size: .7rem; }
.sx-fchip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.sx-card { border-radius: var(--r-card); border: var(--bw) solid var(--line); background: var(--panel); box-shadow: var(--card-sh, none); clip-path: var(--card-clip, none); }
.sx-card:hover { transform: var(--card-hover-move, none); border-color: var(--card-hover, var(--acc)); box-shadow: var(--card-sh-h, var(--card-sh, none)); }
.sx-thumb { background-color: var(--thumb-bg, var(--panel2)); border-bottom: var(--bw) solid var(--line); font-family: var(--f-head); font-weight: var(--hw); }
.sx-badges .b { border-radius: var(--r-s); backdrop-filter: none; font-size: .62rem; }
.sx-badges .new { background: var(--t2); color: var(--t-ink); }
.sx-badges .cat { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.sx-tag { border-radius: var(--r-s); background: transparent; border: 1px solid currentColor; color: var(--t1-txt, var(--t1)); font-size: .64rem; }
.sx-tag.tier2 { background: transparent; color: var(--t2-txt, var(--t2)); }
.sx-tag.tier3 { background: transparent; color: var(--t3-txt, var(--t3)); }
.sx-tag.ok, .sx-tag.free { background: transparent; color: var(--ok); }
.sx-open { font-size: .66rem; color: var(--muted); }
.sx-card:hover .sx-open { color: var(--text); }
.sx-side { background: var(--side-bg, var(--bg)); border-right: var(--bw) solid var(--line); }
.sx-it { border-radius: var(--r); }
.sx-it.on { background: var(--panel2); box-shadow: inset 3px 0 0 var(--acc); }
.sx-it .th { border-radius: var(--r-s); }
.nb { border-radius: var(--r-s); background: var(--t2); color: var(--t-ink); }
.sx-big, .sx-row button { border-radius: var(--r-card); }

/* Dashboard */
.db-tile, .db-card, .db-panel, .db-empty, .db-cp { border-radius: var(--r-card); border: var(--bw) solid var(--line); background: var(--panel); box-shadow: var(--card-sh, none); }
.db-tile > span { font-size: .66rem; }
.db-tile b { font-family: var(--f-head); font-weight: var(--hw); font-style: var(--hst, normal); font-size: 1.9rem; }
.db-h2 { font-size: .72rem; color: var(--muted); }
.db-card:hover { border-color: var(--card-hover2, var(--line)); }
.db-card h3, .db-panel h3, .db-cp b { font-family: var(--f-head); font-weight: var(--hw); font-style: var(--hst, normal); text-transform: var(--htt, none); letter-spacing: var(--hls, 0); }
.db-ic { border-radius: var(--r); border: var(--bw) solid var(--line); }
.db-st i { border-radius: var(--dot-r, 50%); }
.db-st.online i { background: var(--ok); box-shadow: none; }
.db-st.recent i { background: var(--warn); }
.db-st.setup i { background: var(--acc); }
.db-url code { border-radius: var(--r); border: 1px solid var(--line); background: var(--code-bg, var(--bg)); font-family: var(--f-mono); }
.db-btn { border-radius: var(--r); border: 1px solid var(--line); background: var(--btn2-bg, var(--panel2)); color: var(--text); }
.db-btn:hover { border-color: var(--text); }
.db-btn.ok { background: transparent; border-color: var(--ok); color: var(--ok); }
.db-chips span { border-radius: var(--r-s); background: var(--panel2); border: 1px solid var(--line); }
.db-badge { border-radius: var(--r-s); }
.db-badge.new { background: var(--t2); color: var(--t-ink); }
.db-badge.pro { background: transparent; border: 1px solid var(--t3); color: var(--t3-txt, var(--t3)); }
.db-lock { border-radius: var(--r); border: 1px solid var(--line); background: transparent; }
.db-lock:hover { border-color: var(--acc); }
.db-lock-t small { color: var(--t2-txt, var(--t2)); }
.db-cp { background: var(--panel); }
.db-start { border-color: var(--acc); background: var(--start-bg, var(--panel)); }
.db-cp span { color: var(--muted); }
body.sx input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), body.sx select, body.sx textarea { border-radius: var(--r); font-family: var(--f-body); }
body.sx input[type=checkbox], body.sx input[type=radio] { accent-color: var(--acc); }

/* Besonderheiten */
.sx-hero { background: #0f1013; }
.sx-eyebrow::before { content: '●'; color: var(--acc); margin-right: 2px; }
.sx-facts { gap: 0; border-top: 1px solid var(--line); padding-top: 18px; }
.sx-facts > div { padding-right: 34px; }
.db-h2 { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.db-start { box-shadow: inset 3px 0 0 var(--acc); border-color: var(--line); }
.sx-tier.t2 .n, .sx-badges .new, .nb, .db-badge.new { color: #fff; }

/* ---------- Tool-Updates (Tag, Liste, "Neu für dich") ---------- */
.sx-badges .b.upd, .nb.upd, .db-badge.upd { background: var(--warn); color: #1a1205; border: 1px solid var(--warn); }
.db-badge.upd { text-decoration: none; margin-left: 4px; }
.sx-upd-page { max-width: 760px; margin: 0 auto; padding: 32px 24px 60px; }
.sx-upd-page h1 { margin: 0 0 6px; }
.sx-upd-page > .sx-tl { margin-bottom: 22px; }
.sx-upd { border: 1px solid var(--line); border-radius: var(--r-card, 8px); background: var(--panel); padding: 16px 18px; margin-bottom: 12px; }
.sx-upd-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.sx-upd-h time { margin-left: auto; font-family: var(--f-mono, ui-monospace, monospace); }
.sx-upd-k { font: 500 .68rem/1 var(--f-mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px; border-radius: 4px; border: 1px solid currentColor; }
.sx-upd-k.new { color: var(--ok); } .sx-upd-k.improved { color: #b48cff; } .sx-upd-k.fix { color: var(--warn); }
.sx-upd-t { color: var(--text) !important; font-weight: 600; }
.sx-upd h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.sx-upd-b { color: var(--muted); line-height: 1.55; font-size: .92rem; }
.sx-upd-b p { margin: 0 0 6px; } .sx-upd-b ul { margin: 4px 0 8px; padding-left: 20px; } .sx-upd-b b { color: var(--text); }
.sx-upd-b code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.sx-upd-img { display: block; max-width: 100%; border-radius: 6px; border: 1px solid var(--line); margin-top: 10px; }
.sx-upd.compact { background: transparent; padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }
.sx-upd.compact .sx-upd-b { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sx-upd-box .sx-link { display: inline-block; margin-top: 10px; }
.db-upd { margin-bottom: 18px; border-color: rgba(145,70,255,.55); }
.db-upd .sx-upd { background: transparent; padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }
.db-upd > .sx-link { display: inline-block; margin-top: 8px; }
.sx-upd-b a { color: #b48cff !important; text-decoration: underline; text-underline-offset: 2px; }
.sx-owned { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--ok); border-radius: var(--r-card, 8px); background: rgba(62,207,142,.06); }
.sx-owned b { color: var(--ok); }