/* ============================================================
   NEXIS im AP-Solutions-Design (wie apsolutions-leipzig.de und INVESTA)
   Eine Schrift (IBM Plex Sans 400/500), neutrale Grautöne, 1-px-Linien,
   Radien 8/12/16 px, viel Luft. Wird NACH nexis.css geladen und
   überschreibt nur Tokens und Oberflächen-Chrome. Datenfarben bleiben.
   ============================================================ */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("./fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500 700; font-style: normal; font-display: swap; src: url("./fonts/plex-sans-500.woff2") format("woff2"); }

:root {
    --font-ui: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --radius-card: 12px;
    --radius-btn: 8px;
    --radius-lg: 16px;
    --header-h: 68px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --transition-base: 0.2s cubic-bezier(.2, .7, .2, 1);
}
html[data-theme="dark"], html:not([data-theme]) {
    color-scheme: dark;
    --bg-primary: #0a0a0a;
    --bg-secondary: #0a0a0a;
    --bg-card: #141414;
    --bg-raised-2: #1b1b1b;
    --bg-input: #111111;
    --text-primary: #f4f4f2;
    --text-secondary: #a6a6a3;
    --text-3: #7b7b78;
    --border-subtle: #242424;
    --line-strong: #3a3a3a;
    --ink-hover: #d9d9d6;
    --header-bg: rgba(10, 10, 10, .82);
    --data-green: #81c995;
    --data-red: #f28b82;
    --row-hover: #141414;
    --attribution-bg: rgba(10, 10, 10, .82);
    --shadow-ap: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
}
html[data-theme="light"] {
    color-scheme: light;
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-card: #f5f5f3;
    --bg-raised-2: #ececea;
    --bg-input: #ffffff;
    --text-primary: #111111;
    --text-secondary: #5c5c59;
    --text-3: #8a8a86;
    --border-subtle: #e2e2de;
    --line-strong: #c4c4bf;
    --ink-hover: #2b2b2b;
    --header-bg: rgba(255, 255, 255, .86);
    --data-green: #2e7d32;
    --data-red: #c62828;
    --row-hover: #f5f5f3;
    --attribution-bg: rgba(255, 255, 255, .86);
    --shadow-ap: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .06);
}

/* ---------- Grundlagen ---------- */
body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.02em; }
b, strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; border-radius: 4px; }
.live-ticker-feed, .live-ticker-prozent, .intro-zeile, .intro code { font-family: var(--font-ui) !important; letter-spacing: .04em; }

/* ---------- Kopfzeile ---------- */
.app-header {
    height: var(--header-h);
    background: var(--header-bg);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 clamp(16px, 2.2vw, 32px);
}
.logo {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 13px; font-weight: 500; letter-spacing: .16em; white-space: nowrap;
}
.logo::before {
    content: ""; width: 28px; height: 28px; flex: 0 0 auto; background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1.3'><circle cx='20' cy='20' r='19'/><path d='M9 31 31 9'/><path d='M10 19.5V11l6.5 8.5V11'/><path d='M23.5 23l6.5 8.5M30 23l-6.5 8.5'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='black' stroke-width='1.3'><circle cx='20' cy='20' r='19'/><path d='M9 31 31 9'/><path d='M10 19.5V11l6.5 8.5V11'/><path d='M23.5 23l6.5 8.5M30 23l-6.5 8.5'/></svg>") center / contain no-repeat;
}
.logo::after { content: "von AP Solutions"; font-size: 11px; font-weight: 400; letter-spacing: .08em; color: var(--text-3); }
@media (max-width: 900px) { .logo::after { display: none; } }

.header-info { gap: 8px; }
.header-stats, .theme-toggle-btn, .chat-toggle-btn {
    height: 38px; display: inline-flex; align-items: center; gap: 0;
    padding: 0 14px; font-size: 13px; font-weight: 400;
    color: var(--text-secondary); background: transparent;
    border: 1px solid var(--border-subtle); border-radius: var(--radius-btn);
    transition: color .2s, border-color .2s, background .2s;
}
.theme-toggle-btn:hover, .chat-toggle-btn:hover { color: var(--text-primary); border-color: var(--line-strong); }
.header-stats { border-radius: 999px; font-size: 12px; gap: 6px; }
.header-stats .number { font-weight: 500; }
.werkzeuge-liste { border-radius: var(--radius-card); padding: 6px; background: var(--bg-primary); box-shadow: var(--shadow-ap); }
.werkzeuge-liste button { border-radius: var(--radius-btn); padding: 10px 12px; }
.werkzeuge-liste button b { font-weight: 500; }
.werkzeuge-liste button span { color: var(--text-3); }
.werkzeuge-liste button:hover { background: var(--bg-card); }

/* ---------- Detail-Panel ---------- */
.detail-panel { background: var(--bg-primary); border-left: 1px solid var(--border-subtle); }
.panel-header { background: var(--header-bg); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }
.panel-header h2 { font-weight: 500; letter-spacing: -.02em; }
.panel-subtitle { color: var(--text-3); }
.toggle-group { background: transparent; border-radius: var(--radius-btn); padding: 3px; }
.toggle-btn { border-radius: 6px; font-weight: 400; }
.toggle-btn.active { background: var(--text-primary); color: var(--bg-primary); font-weight: 500; }
.section-title { font-size: 13px; font-weight: 400; color: var(--text-3); }
.brw-karte, .richtwert-karte, .energie-karte { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
.metric-row { border-bottom-color: var(--border-subtle); }

/* ---------- Knöpfe ---------- */
.expose-knopf, .contact-btn, .panel-oeffnen {
    border-radius: var(--radius-btn); font-weight: 500;
    background: var(--text-primary); color: var(--bg-primary); border: 1px solid var(--text-primary);
    transition: background .2s, border-color .2s;
}
.expose-knopf:hover, .contact-btn:hover, .panel-oeffnen:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.expose-knopf.leise { background: transparent; color: var(--text-primary); border-color: var(--line-strong); }
.expose-knopf.leise:hover { border-color: var(--text-secondary); background: transparent; }

/* ---------- Karte ---------- */
.karten-legende { background: var(--header-bg); backdrop-filter: saturate(140%) blur(14px); border-radius: var(--radius-card); padding: 12px 14px; }
.karten-ebene-label { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.karten-ebene { border-radius: var(--radius-btn); }
.karten-tooltip { border-radius: var(--radius-btn); box-shadow: var(--shadow-ap); }
.maplibregl-ctrl-group { border-radius: var(--radius-btn) !important; overflow: hidden; box-shadow: none !important; }
.maplibregl-popup-content { border-radius: var(--radius-card) !important; font-family: var(--font-ui); }

/* ---------- Fenster (Exposé, Werkzeuge, Radar-Flyer) ---------- */
.expose-fenster { background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-ap); }
.expose-kopf strong { font-weight: 500; letter-spacing: -.01em; }
.expose-form fieldset { border-radius: var(--radius-card); }
.expose-form legend { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--text-3); }
.expose-form input, .expose-form select, .expose-form textarea { border-radius: var(--radius-btn); }
.chat-container, .kontakt-panel, .ms-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-ap); }
.tour-box { border-radius: var(--radius-lg); background: var(--bg-primary); box-shadow: var(--shadow-ap); }
.tour-box strong { font-weight: 500; }
.tour-knoepfe button { border-radius: var(--radius-btn); }
.tour-knoepfe button.haupt { font-weight: 500; }
.tour-ziel { outline-color: var(--text-primary) !important; }