/*
 * Designsprache fuer die Werkzeugseiten von mangold-it.de.
 *
 * Diese Datei wird NACH global.css geladen und schreibt nur die Tokens um, mit
 * denen global.css und die Seiten ohnehin arbeiten (--bg-*, --text-*, --accent,
 * --radius, --font-*). Dadurch wechseln Toolbox, M365-Status, Entra-Tracker,
 * Einmal-Geheimnis und die Rechtsseite auf dieselbe Palette und dieselben
 * Schriften wie die Startseite, ohne dass ihr Aufbau angefasst werden muss.
 * Rund 130 var()-Aufrufe je Seite erledigen die Arbeit von allein.
 *
 * Warum ein eigener Ueberschreibungslayer und kein Umbau von global.css:
 * global.css traegt noch die Umschaltung Hell/Dunkel und die Akzentwahl aus den
 * Einstellungen. Beides wuerde beim Umschreiben brechen. Hier wird stattdessen
 * die gesamte Umschaltung stillgelegt - jede Themenvariante bekommt dieselben
 * Werte. Wer die Umschaltung zurueckwill, entfernt diese Datei aus den Seiten,
 * und global.css uebernimmt wieder unveraendert.
 *
 * Die Schriften liegen auf dem eigenen Server unter /fonts. Die Seiten haben
 * sie vorher von Google geladen - das uebertraegt bei jedem Aufruf die
 * IP-Adresse des Besuchers dorthin und passt nicht zu einer Seite, die im
 * Impressum Datensparsamkeit behauptet.
 */

/* --------------------------------------------------------------- Schriften */

@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/mi-sora-latin.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/mi-sora-latin.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/mi-sora-latin.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/mi-sora-latin.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/mi-dmsans-latin.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/mi-dmsans-latin.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/mi-dmsans-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/mi-plexmono-400-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/mi-plexmono-500-latin.woff2') format('woff2')}

/* ------------------------------------------------------------------ Tokens */

/*
 * Alle Themenvarianten bekommen dieselben Werte. Ohne die data-theme-Zeilen
 * wuerde eine alte Einstellung im Browser eines Besuchers die halbe Palette
 * zurueckdrehen.
 */
:root,
:root[data-theme="light"],
:root[data-theme="dark"],
:root[data-theme="nightblue"]{
  color-scheme:dark;

  /* Flaechen, von dunkel nach hell */
  --bg-primary:#04141c;
  --bg-card:#072430;
  --bg-card-hover:#0a2f3d;
  --bg-secondary:#0a2f3d;
  --bg-hover:#0e3a4a;
  --bg-sunken:#051a24;

  /* Schrift */
  --text-primary:#eaf3f5;
  --text-secondary:#a7bec7;
  --text-tertiary:#7d99a4;

  /* Kanten */
  --border:rgba(234,243,245,.14);
  --border-strong:rgba(234,243,245,.26);
  --border-bright:rgba(234,243,245,.20);

  /* Akzent */
  --accent:#ff6a3d;
  --accent-dim:rgba(255,106,61,.14);
  --accent-ring:rgba(255,106,61,.26);
  --accent2:#e8552a;
  --on-accent:#04141c;

  /* Semantik. Erfolg ist Mint, nicht Orange: sonst waeren Marke und
     Betriebszustand dieselbe Farbe und eine Statusseite unlesbar. */
  --success:#7fd4c1;
  --healthy:#7fd4c1;
  --warning:#ffb35c;
  --advisory:#ffb35c;
  --error:#ff7a6b;
  --incident:#ff7a6b;

  --healthy-bg:rgba(127,212,193,.10);
  --healthy-border:rgba(127,212,193,.34);
  --advisory-bg:rgba(255,179,92,.10);
  --advisory-border:rgba(255,179,92,.34);
  --incident-bg:rgba(255,122,107,.10);
  --incident-border:rgba(255,122,107,.34);

  /* Karten */
  --glass-bg:#072430;
  --glass-border:rgba(234,243,245,.14);
  --glass-shadow:0 1px 2px rgba(0,0,0,.3);
  --shadow-card:0 1px 2px rgba(0,0,0,.3);
  --shadow-pop:0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(234,243,245,.08);

  /* Schriftfamilien */
  --font-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Form. global.css war konsequent eckig (alle Radien 0), die Startseite ist
     rund - das ist der sichtbarste Unterschied zwischen beiden Welten. */
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --radius-pille:999px;
}

/* ---------------------------------------------------------------- Bauteile
 *
 * Ab hier ist jeder Selektor mit "html " vorangestellt. Das ist kein Zierrat:
 * die Werkzeugseiten tragen ihre eigenen Regeln in einem <style>-Block, der im
 * Quelltext NACH dieser Datei steht. Bei gleicher Spezifitaet gewinnt der
 * spaetere - also verloere hier sonst jede Regel. Ein vorangestelltes html hebt
 * die Spezifitaet um eine Stufe und dreht das um, ohne irgendwo !important.
 */

html body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans)}

/* Ueberschriften tragen die Marke: Sora, schwer, sehr eng gesetzt. */
html h1,html h2,html h3,html h4{font-family:var(--font-display);letter-spacing:-.032em}
html h1{font-weight:800;letter-spacing:-.038em}
html h2,html h3{font-weight:700}

html ::selection{background:var(--accent);color:var(--on-accent)}

/* Karten und Panele bekommen die Rundung der Startseite. */
html .glass,html .card,html .panel,html .tool-card,html .box{border-radius:var(--radius)}

/* Schaltflaechen: durchgehend Pillenform. */
html .btn-accent,html .text-btn,html .btn,html .btn-secondary,
html .icon-btn,html .ghost-btn{border-radius:var(--radius-pille)}
html .btn-accent{font-weight:700;color:var(--on-accent)}
html .btn-accent:hover{color:var(--on-accent)}

/*
 * Die Toolbox hatte eine eigene Haupthandlung: eckig, nur Kontur, Monospace in
 * Kapitaelchen - der Terminal-Anklang der hellen Fassung. Auf der Startseite ist
 * die Haupthandlung eine gefuellte Pille. Der Text steht dunkel auf Orange,
 * nicht weiss: weiss auf diesem Orange ist nicht lesbar.
 */
html .btn-primary{
  background:var(--accent);border:1px solid var(--accent);color:var(--on-accent);
  font-family:var(--font-sans);font-size:.85rem;font-weight:700;letter-spacing:0;
  padding:.7rem 1.6rem;border-radius:var(--radius-pille);text-shadow:none}
html .btn-primary:hover{background:var(--accent2);border-color:var(--accent2);
  color:var(--on-accent);box-shadow:none;text-shadow:none}

/* Eingaben: gleiche Rundung wie Karten. */
html .input,html .settings-input,html input[type="text"],html input[type="search"],
html input[type="email"],html input[type="password"],html input[type="number"],
html select,html textarea{border-radius:var(--radius-sm)}

/* Kennzeichen als Pille, in Kapitaelchen und Monospace - die einzige Stelle mit
   gesperrtem Satz, genau wie auf der Startseite. */
html .badge{border-radius:var(--radius-pille);font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .6rem}

/* Navigation: aktiver Punkt ruhig hervorgehoben statt farbig ueberstrahlt. */
html .header-nav a{border-radius:var(--radius-pille)}
html .header-nav a.active{background:var(--bg-secondary)}

/* Der Punkt am Logo geht auf dunklem Grund sonst unter. */
html .logo-dot{box-shadow:0 0 0 3px var(--accent-dim)}

/*
 * Hinweiskaesten. In den Seiten stehen dafuer noch helle Festwerte
 * (#FFFBEB, #FEF2F2, #F0FDF4 und Verwandte) aus der hellen Fassung. Auf
 * dunklem Grund waeren das weisse Bloecke - hier werden sie eingefangen.
 */
html .note-box,html .notice,html .hint,html .warning-box,html .info-box,html .alert{
  border-radius:var(--radius);border:1px solid var(--border);
  background:rgba(234,243,245,.03);color:var(--text-secondary)}
html .note-box.warn,html .notice.warn,html .alert.warn{
  background:var(--advisory-bg);border-color:var(--advisory-border)}
html .note-box.err,html .notice.err,html .alert.err,html .alert.danger{
  background:var(--incident-bg);border-color:var(--incident-border)}
html .note-box.tip,html .notice.tip,html .alert.ok{
  background:var(--healthy-bg);border-color:var(--healthy-border)}

/* Tabellen: Zeile unter dem Zeiger angehoben statt eingefaerbt. */
html tbody tr:hover{background:var(--bg-card-hover)}

/* Lucide-Symbole geraten auf dunklem Grund schnell zu duenn. */
html svg.lucide{stroke-width:1.9}

/* Mobile Fussnavigation */
html .mobile-nav{background:color-mix(in srgb,var(--bg-card) 92%,transparent);
  border-top:1px solid var(--border)}
html .mobile-nav-item.active{color:var(--accent)}

/*
 * Themen- und Akzentwahl haben keine Wirkung mehr, seit hier alle Varianten
 * dieselben Werte bekommen. Sie auszublenden ist ehrlicher, als Schaltflaechen
 * anzubieten, die nichts tun.
 */
html .settings-row[data-setting="theme"],
html .settings-row[data-setting="accent"],
html #themeRow,html #accentRow,
html .theme-presets,html .accent-presets{display:none!important}

/* Die Theme-Umschaltung im Kopf jeder Werkzeugseite ist ohne Wirkung, seit die
   Palette hier festgelegt wird. Sie stehen zu lassen hiesse, eine Schaltflaeche
   anzubieten, die nichts tut. */
html #themeToggle{display:none!important}

/* ================================================== Anmelde-Schranke
 *
 * Gehoert zu mi-gate.js. Die Klasse wird blockierend im Kopf gesetzt, damit der
 * Inhalt nicht kurz aufblitzt, bevor die Pruefung durch ist.
 */
html.mi-gate-zu body > *:not(.mi-gate){display:none!important}
html.mi-gate-zu body{background:var(--bg-primary)}

html .mi-gate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  padding:24px;background:var(--bg-primary)}
html .mi-gate-karte{max-width:440px;width:100%;text-align:center;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:clamp(28px,5vw,44px)}
html .mi-gate-schloss{width:26px;height:26px;color:var(--accent);margin:0 auto 18px;display:block}
html .mi-gate-karte h1{font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  letter-spacing:-.035em;color:var(--text-primary);margin-bottom:12px}
html .mi-gate-karte p{font-size:.9rem;line-height:1.6;color:var(--text-secondary);
  max-width:36ch;margin:0 auto 22px}
html .mi-gate-karte button{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:700;font-size:.95rem;line-height:1;
  padding:15px 26px;border:1px solid var(--accent);border-radius:var(--radius-pille);
  background:var(--accent);color:var(--on-accent);cursor:pointer;transition:background .15s}
html .mi-gate-karte button:hover{background:var(--accent2)}
html .mi-gate-fehler{min-height:1.2em;margin:16px auto 0;font-size:.8rem;color:var(--error)}
html .mi-gate-wege{margin:22px auto 0;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.06em;color:var(--text-tertiary)}
html .mi-gate-wege a{color:var(--text-tertiary)}
html .mi-gate-wege a:hover{color:var(--text-primary)}