/*
 * PHOENYRA Design V2 – Theme-Fundament (TM 10.2 / R2)
 * Nur Präsentation: Farb-Tokens, Schriften, Druckregeln. Keine Fachlogik.
 *
 * Modi (gesetzt von phoenyra_theme_v1.js auf <html data-ph-theme="…">):
 *   light – Standard, gilt für alle noch nicht umgestellten Seiten
 *   dark  – nur auf Seiten mit data-ph-theme-mode="switchable"
 * Druck: immer hell/weiß, unabhängig vom Bildschirmmodus.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* Hell (Standard) */
:root {
  --ph-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ph-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ph-bg: #f4f6f8;
  --ph-chrome: #ffffff;
  --ph-surface: #ffffff;
  --ph-line: #dbe2e9;
  --ph-text: #132029;
  --ph-text-2: #2f3e4c;
  --ph-muted: #56636f;
  --ph-accent: #0f766e;
  --ph-accent-bg: #dcf3ef;
  --ph-accent-line: #9fd3cb;
  --ph-series: #0369a1;
  --ph-event: #b45309;
  --ph-negative: #a8480f;
  --ph-status: #8a5a00;
  --ph-grid: #e5eaef;
  --ph-axis: #98a5b2;
  --ph-zero: #2f3e4c;
  --ph-logo-ring: #cfd8e0;
  /* Corporate-Leiste (Kopf-/Fußzeile) ist in beiden Modi dunkel */
  --ph-header-bg: #0b1520;
  --ph-header-line: #1f2d3a;
  color-scheme: light;
}

/* Dunkel – nur wirksam, wenn das Theme-Skript data-ph-theme="dark" setzt */
:root[data-ph-theme="dark"] {
  --ph-bg: #0d1620;
  --ph-chrome: #0a121b;
  --ph-surface: #13202c;
  --ph-line: #1f2d3a;
  --ph-text: #e6edf3;
  --ph-text-2: #c4d0db;
  --ph-muted: #8ea0b2;
  --ph-accent: #5eead4;
  --ph-accent-bg: #14303a;
  --ph-accent-line: #2c4a55;
  --ph-series: #38bdf8;
  --ph-event: #e0a84e;
  --ph-negative: #f0b27a;
  --ph-status: #c4a46b;
  --ph-grid: #22303d;
  --ph-axis: #3b4d5e;
  --ph-zero: #c4d0db;
  --ph-logo-ring: transparent;
  color-scheme: dark;
}

/* Hilfsklassen für umgestellte Seiten (Opt-in, wirken nirgends sonst) */
.ph-page { background: var(--ph-bg); color: var(--ph-text); font-family: var(--ph-font-sans); }
.ph-card { background: var(--ph-surface); border: 1px solid var(--ph-line); border-radius: 14px; }
.ph-muted { color: var(--ph-muted); }
.ph-mono { font-family: var(--ph-font-mono); }
.ph-print-only { display: none; }

/* Umgestellte Seiten: Seitenhintergrund folgt dem Theme (nur Opt-in) */
:root[data-ph-theme-mode="switchable"] body { background: var(--ph-bg) !important; color: var(--ph-text); }

/* Bausteine für umgestellte Seiten (TM 10.4) */
.ph-h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 600; color: var(--ph-text); margin: 0; letter-spacing: -0.01em; }
.ph-subtitle { color: var(--ph-muted); margin-top: 0.25rem; font-size: 0.95rem; }
.ph-label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--ph-muted); margin-bottom: 0.4rem; }
.ph-input { width: 100%; box-sizing: border-box; min-height: 40px; padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid var(--ph-line); background: var(--ph-surface); color: var(--ph-text); font: inherit; }
.ph-input::placeholder { color: var(--ph-muted); opacity: 0.8; }
.ph-input:focus { outline: 2px solid var(--ph-accent); outline-offset: 1px; border-color: var(--ph-accent-line); }
.ph-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0 0.9rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ph-btn:focus-visible { outline: 2px solid var(--ph-accent); outline-offset: 2px; }
.ph-btn-primary { background: var(--ph-accent); color: var(--ph-bg); }
.ph-btn-primary:hover { filter: brightness(1.08); }
.ph-btn-secondary { background: transparent; color: var(--ph-text); border-color: var(--ph-line); }
.ph-btn-secondary:hover { background: var(--ph-accent-bg); border-color: var(--ph-accent-line); }
.ph-btn-danger { background: transparent; color: var(--ph-negative); border-color: var(--ph-line); }
.ph-btn-danger:hover { border-color: var(--ph-negative); }
.ph-badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; background: var(--ph-accent-bg); color: var(--ph-accent); }
.ph-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; color: var(--ph-text-2); font-size: 0.875rem; }
.ph-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ph-muted); cursor: pointer; font: inherit; }
.ph-tab:hover { color: var(--ph-text); }
.ph-tab-active { border-bottom-color: var(--ph-accent); color: var(--ph-accent); }
.ph-meta i { color: var(--ph-muted); margin-right: 0.35rem; width: 1em; text-align: center; }

/* Druck – unabhängig vom Bildschirmmodus immer weiß und kontrastreich.
 * Seitenformat und Umbruchregeln gelten nur für umgestellte Seiten (Opt-in),
 * damit der Ausdruck bestehender Seiten unverändert bleibt. */
@page phoenyra { size: A4; margin: 14mm; }
.ph-page { page: phoenyra; }
@media print {
  :root,
  :root[data-ph-theme="dark"] {
    --ph-bg: #ffffff;
    --ph-chrome: #ffffff;
    --ph-surface: #ffffff;
    --ph-line: #b9c2cb;
    --ph-text: #111111;
    --ph-text-2: #222222;
    --ph-muted: #4a4a4a;
    --ph-accent: #0b5c56;
    --ph-accent-bg: #ffffff;
    --ph-accent-line: #b9c2cb;
    --ph-series: #0b4f8a;
    --ph-event: #a04400;
    --ph-negative: #111111;
    --ph-status: #4a4a4a;
    --ph-grid: #d6dbe0;
    --ph-axis: #555555;
    --ph-zero: #111111;
    --ph-logo-ring: transparent;
    color-scheme: light;
  }
  :root[data-ph-theme-mode="switchable"],
  :root[data-ph-theme-mode="switchable"] body { background: #ffffff !important; }
  .ph-page { background: #ffffff !important; }
  .ph-no-print { display: none !important; }
  .ph-print-only { display: block !important; }
  .ph-card { break-inside: avoid; page-break-inside: avoid; }
  .ph-footer { background: #ffffff !important; color: #4a4a4a !important; border-top: 1px solid #b9c2cb !important; margin-top: 8mm !important; }
  .ph-page thead { display: table-header-group; }
  .ph-page tr { break-inside: avoid; page-break-inside: avoid; }
}