/*
  enes10-Theme für Radzen (Basis: Radzen "standard", im dunklen Modus "standard-dark" – siehe index.html). Farben, Schrift und Formen aus DESIGN.md
  von enesTen/website. Die Schriften liefern die statischen Seiten unter /assets/fonts aus.
*/
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

:root {
  --bm-deep-teal: #0a6563;
  --bm-deep-teal-hover: #0d5452;
  --bm-signal-teal: #1de4d4;
  --bm-paper: #f6f7f7;
  --bm-slate-100: #e0e7e5;
  --bm-slate-500: #5b716f;
  --bm-slate-800: #323d3c;
  --bm-slate-950: #171c1c;

  --rz-primary: var(--bm-deep-teal);
  --rz-primary-light: #05807c;
  --rz-primary-lighter: rgba(10, 101, 99, 0.12);
  --rz-primary-dark: var(--bm-deep-teal-hover);
  --rz-primary-darker: #003233;
  --rz-on-primary: #ffffff;
  --rz-base-background-color: #ffffff;
  --rz-text-color: var(--bm-slate-800);
  --rz-text-secondary-color: var(--bm-slate-500);
  --rz-text-font-family: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --rz-border-radius: 0;
  --rz-border-radius-1: 0;
  --rz-border-radius-2: 0;
  --rz-border-radius-3: 0;
  --rz-border-radius-4: 0;
  --rz-border-radius-5: 0;
  --rz-border-radius-6: 0;
  --rz-border-radius-7: 0;
  --rz-border-radius-10: 0;
  --rz-input-border-radius: 0;
  --rz-button-border-radius: 0;
}

html, body {
  margin: 0;
  font-family: var(--rz-text-font-family);
  color: var(--rz-text-color);
  background: var(--bm-paper);
}

a { color: var(--bm-deep-teal); }
a:focus-visible, button:focus-visible { outline: 2px solid #00a099; outline-offset: 2px; }

.bm-header { background: #ffffff; border-bottom: 1px solid var(--bm-slate-100); }
.bm-header nav { max-width: 64rem; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.bm-brand { font-weight: 700; font-size: 1.125rem; color: var(--bm-deep-teal); text-decoration: none; }
.bm-nav { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.bm-nav a { text-decoration: none; color: var(--bm-slate-800); }
.bm-nav a.active, .bm-nav a:hover { color: var(--bm-deep-teal); text-decoration: underline; }
.bm-main { max-width: 64rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.bm-footer { background: var(--bm-slate-800); color: #f6f7f7; font-size: 0.875rem; }
.bm-footer div { max-width: 64rem; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.bm-footer a { color: #f6f7f7; }
.bm-kicker { font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bm-slate-500); margin: 0 0 0.25rem; }
.bm-address { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 1.125rem; }
.bm-loading { max-width: 64rem; margin: 2rem auto; padding: 0 1.5rem; }
.bm-form { display: grid; gap: 1rem; max-width: 32rem; }
.bm-form label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.bm-field-error { color: #a4231c; font-size: 0.875rem; margin-top: 0.25rem; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 0.75rem 1.5rem; background: #fff3cd; color: #3c4948; z-index: 1000; }

@media (prefers-color-scheme: dark) {
  :root {
    --rz-base-background-color: var(--bm-slate-950);
    --rz-text-color: #e0e7e5;
    --rz-text-secondary-color: #9badab;
    --rz-primary: var(--bm-signal-teal);
    --rz-primary-light: #4debdf;
    --rz-primary-lighter: rgba(29, 228, 212, 0.16);
    --rz-primary-dark: #17b8ab;
    --rz-primary-darker: #0f8a80;
    --rz-on-primary: var(--bm-slate-950);
    --rz-on-primary-lighter: var(--bm-signal-teal);
  }
  html, body { background: #2d3434; }
  .bm-header { background: var(--bm-slate-950); border-color: #3c4948; }
  .bm-nav a { color: #e0e7e5; }
  .bm-kicker, small { color: #9badab; }
  .bm-field-error { color: #ffb4a9; }
  a, .bm-brand, .bm-nav a.active { color: var(--bm-signal-teal); }
}