/* Zycord Pool – gemeinsames Stylesheet. Dunkel zuerst, hell über prefers-color-scheme oder data-theme.
   Typografie: IBM Plex Sans (Text), IBM Plex Mono (Zahlen, Code). Schriften selbst gehostet unter /fonts/. */
@import url("/fonts/fonts.css");

:root {
  --bg: #0a0e15; --bg-2: #0f141d; --bg-3: #151c27; --bg-4: #1b2432;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --fg: #e9eef5; --fg-2: #a9b4c3; --fg-3: #6e7a8a;
  --accent: #d9a05b; --accent-2: #f0c27d; --accent-ink: #1a1206; --accent-soft: rgba(217,160,91,.14); --blue: #7aa7ff; --violet: #6f7df0;
  --ok: #4fcf85; --warn: #e6b450; --bad: #f06d6a;
  --chart-fill-top: rgba(217,160,91,.26); --chart-fill-bottom: rgba(217,160,91,0);
  --shadow: 0 10px 30px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.04) inset;
  --glass: rgba(17,23,33,.62);
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; /* CJK: nur Systemschriften */
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 12px; --radius-s: 8px; --maxw: 1120px;
  /* Aliase für ältere Seiten */
  --muted: var(--fg-3); --card: var(--bg-2);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #f2f4f7; --bg-2: #ffffff; --bg-3: #eceff3; --bg-4: #e2e7ed;
  --line: #e1e6ec; --line-2: #c9d2dc;
  --fg: #111822; --fg-2: #4b5665; --fg-3: #7b8796;
  --accent: #b55f17; --accent-2: #d2751f; --accent-ink: #fff8ef; --accent-soft: rgba(181,95,23,.10); --blue: #3b6fd1; --violet: #5b63d6;
  --ok: #1f7a46; --warn: #946400; --bad: #b4302d;
  --chart-fill-top: rgba(181,95,23,.20); --chart-fill-bottom: rgba(181,95,23,0);
  --shadow: 0 10px 30px rgba(16,24,40,.08), 0 1px 0 rgba(255,255,255,.6) inset;
  --glass: rgba(255,255,255,.72);
  color-scheme: light;
} }
:root[data-theme="light"] {
  --bg: #f2f4f7; --bg-2: #ffffff; --bg-3: #eceff3; --bg-4: #e2e7ed;
  --line: #e1e6ec; --line-2: #c9d2dc;
  --fg: #111822; --fg-2: #4b5665; --fg-3: #7b8796;
  --accent: #b55f17; --accent-2: #d2751f; --accent-ink: #fff8ef; --accent-soft: rgba(181,95,23,.10);
  --ok: #1f7a46; --warn: #946400; --bad: #b4302d;
  --chart-fill-top: rgba(181,95,23,.22); --chart-fill-bottom: rgba(181,95,23,0);
  --shadow: 0 10px 30px rgba(16,24,40,.08), 0 1px 0 rgba(255,255,255,.6) inset;
  --glass: rgba(255,255,255,.72);
  color-scheme: light;
}

* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--fg); font: 15px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; position: relative }
/* Hintergrund: zwei Lichtquellen (Kupfer oben links, kaltes Blau unten rechts), feines Punktraster, Vignette */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1000px 640px at 6% -12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(900px 760px at 102% 108%, color-mix(in srgb, var(--violet) 26%, transparent), transparent 62%),
    radial-gradient(700px 420px at 62% 38%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 70%),
    var(--bg) }
body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 14%, transparent) 1px, transparent 1.2px);
  background-size: 26px 26px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 85%) }
a { color: var(--accent-2); text-decoration: none } a:hover { text-decoration: underline }
h1, h2, h3 { margin: 0; line-height: 1.12; text-wrap: balance; letter-spacing: -.012em }
h2 { font-size: 21px; font-weight: 600 } h3 { font-size: 15px; font-weight: 600 }
code, pre, kbd, .mono, .num { font-family: var(--font-data) }
.num { font-variant-numeric: tabular-nums }
code { font-size: .92em; background: var(--bg-3); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 20px }
.eyebrow { font: 600 11px/1 var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3) }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* Kopfzeile */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) }
header.top::after { content: ""; display: block; height: 1px; background: linear-gradient(90deg, var(--accent), var(--blue) 35%, transparent 70%); opacity: .8 }
.top .wrap { display: flex; align-items: center; gap: 10px; height: 60px }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--fg); font-size: 15.5px; white-space: nowrap; flex: none; letter-spacing: -.01em }
.brand .mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: var(--accent-ink); font: 700 15px var(--font-data) }
nav { display: flex; gap: 2px; margin-left: auto; min-width: 0 }
nav a { color: var(--fg-2); padding: 7px 10px; border-radius: 8px; font-size: 14px; white-space: nowrap; position: relative }
nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 1.5px; background: var(--fg-2); opacity: 0; transition: opacity .15s }
nav a:hover { color: var(--fg); text-decoration: none } nav a:hover::after { opacity: .6 }
.top .right { margin-left: auto; display: flex; gap: 6px; align-items: center }
.top .right a { font-size: 14px; color: var(--fg-2); padding: 7px 10px; border-radius: 8px } .top .right a:hover { background: var(--bg-3); text-decoration: none }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px; border: 0; font: 500 12.5px var(--font-data); color: var(--fg-3); white-space: nowrap; background: transparent }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); box-shadow: 0 0 0 0 transparent }
.status.ok i { background: var(--ok); animation: pulse 2.4s ease-out infinite } .status.warn i { background: var(--warn) } .status.bad i { background: var(--bad) }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent) } 70% { box-shadow: 0 0 0 7px transparent } 100% { box-shadow: 0 0 0 0 transparent } }
a.login { flex: none; border: 0; color: var(--accent-2); padding: 7px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; background: transparent; position: relative } a.login::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 1.5px; background: var(--accent); opacity: 0; transition: opacity .15s } a.login:hover { text-decoration: none } a.login:hover::after { opacity: 1 }
.theme { flex: none; height: 34px; min-width: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: 600 12.5px var(--font-data); line-height: 1; letter-spacing: .06em; transition: color .15s, background .15s } .theme:hover { color: var(--fg); background: var(--bg-3) }
#theme { font-size: 15px }
.top .sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; flex: none }

/* Buttons, Pills */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg); font: 600 14px var(--font-ui); cursor: pointer; text-decoration: none; transition: background .15s, transform .08s }
.btn:hover { background: var(--bg-3); text-decoration: none } .btn:active { transform: translateY(1px) }
.btn.primary { background: linear-gradient(135deg, var(--accent-2), var(--accent) 70%, #c2763a); border-color: transparent; color: var(--accent-ink); box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.35) } .btn.primary:hover { filter: brightness(1.06) }
.btn.small { padding: 7px 13px; font-size: 13px }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 600 12px var(--font-data); border: 1px solid var(--line-2); color: var(--fg-2); background: var(--bg-2) }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)) } .pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)) } .pill.warn { color: var(--warn) }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-right: 8px; vertical-align: middle } .dot.on { background: var(--ok) }

/* Flächen, Tabellen */
.card, .tbl, .stats, .faq > div, .ticket { position: relative; border-radius: 20px; border: 1px solid rgba(255,255,255,.06); background: color-mix(in srgb, var(--bg-2) 55%, transparent); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03), inset 0 40px 80px -60px color-mix(in srgb, var(--accent) 35%, transparent) }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .tbl, :root:not([data-theme="dark"]) .stats, :root:not([data-theme="dark"]) .faq > div, :root:not([data-theme="dark"]) .ticket { border-color: rgba(16,24,40,.08); background: rgba(255,255,255,.62); box-shadow: 0 24px 50px rgba(16,24,40,.10), inset 0 0 0 1px rgba(255,255,255,.5) } }
:root[data-theme="light"] .card, :root[data-theme="light"] .tbl, :root[data-theme="light"] .stats, :root[data-theme="light"] .faq > div, :root[data-theme="light"] .ticket { border-color: rgba(16,24,40,.08); background: rgba(255,255,255,.62); box-shadow: 0 24px 50px rgba(16,24,40,.10), inset 0 0 0 1px rgba(255,255,255,.5) }
.tbl { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums }
th, td { padding: 11px 14px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap }
th { font: 600 11px var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3) }
tr:last-child td { border-bottom: 0 } tbody tr:hover td { background: color-mix(in srgb, var(--bg-3) 50%, transparent) }
td.num { font-family: var(--font-data); font-size: 13.5px }
.empty { padding: 28px; text-align: center; color: var(--fg-3); font-size: 14px }

/* Kennzahlen als Leiste */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden }
.stat { padding: 16px 18px 14px; border-right: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); min-width: 0 }
.stat:nth-child(4n) { border-right: 0 } .stat:nth-last-child(-n+4) { border-bottom: 0 }
.stat .k { font: 600 11px var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3) }
.stat .v { font: 600 24px/1.2 var(--font-data); font-variant-numeric: tabular-nums; margin-top: 6px; letter-spacing: -.01em; color: var(--fg) }
.stat:first-child .v { color: var(--accent-2) }
.stat .v small { font-size: 13px; color: var(--fg-2); font-weight: 500; margin-left: 4px }
.stat .s { font-size: 12.5px; color: var(--fg-2); margin-top: 4px }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } .stat:nth-child(4n) { border-right: 1px solid var(--line) } .stat:nth-child(2n) { border-right: 0 } .stat:nth-last-child(-n+4) { border-bottom: 1px solid var(--line) } .stat:nth-last-child(-n+2) { border-bottom: 0 } }

/* Formulare */
.field { display: grid; gap: 6px } .field label { font-size: 12.5px; color: var(--fg-2); font-weight: 600 }
.field input, .field select, input.text { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); color: var(--fg); font: 14px var(--font-data); transition: border-color .15s } .field select { font-family: var(--font-ui) }
.field input:focus, .field select:focus, input.text:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft) }
.field .hint { font-size: 12px; color: var(--fg-3) }
.seg { display: flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--bg) }
.seg button { flex: 1; padding: 9px; background: transparent; color: var(--fg-2); border: 0; font: 600 13px var(--font-ui); cursor: pointer } .seg button + button { border-left: 1px solid var(--line) }
.seg button[aria-pressed="true"] { background: var(--bg-3); color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent) }

/* 3-spaltige Variante (9 Kacheln) */
.stats.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.stats.cols3 .stat:nth-child(4n) { border-right: 1px solid var(--line) } .stats.cols3 .stat:nth-child(3n) { border-right: 0 }
.stats.cols3 .stat:nth-last-child(-n+4) { border-bottom: 1px solid var(--line) } .stats.cols3 .stat:nth-last-child(-n+3) { border-bottom: 0 }
@media (max-width: 860px) { .stats.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .stats.cols3 .stat:nth-child(3n) { border-right: 1px solid var(--line) } .stats.cols3 .stat:nth-child(2n) { border-right: 0 } .stats.cols3 .stat:nth-last-child(-n+3) { border-bottom: 1px solid var(--line) } .stats.cols3 .stat:nth-last-child(-n+2) { border-bottom: 0 } }

/* Trenner: keine flachen Linien, sondern kurze Verlaufsstriche */
.sec-head { position: relative } .sec-head::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 56px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--blue)) }

/* Mobil */
@media (max-width: 480px) { .wrap { padding-inline: 16px } .stat .v { font-size: 19px } .stat { padding: 13px 14px 11px } .top .wrap { gap: 8px; height: 54px } nav { display: none } a.login { margin-left: auto } .top .status { display: none } th, td { padding: 9px 10px } }

/* Logo (Schnitt-Z auf Kupfer-Kachel, brand/logo.svg) statt Text-Z; /design1-3 behalten das alte Zeichen */
.brand .mark.logo { background: none; display: block; flex: none } .brand .mark.logo svg { width: 100%; height: 100%; display: block }