/* IHK-Notenrechner — gebündeltes Stylesheet (Design-Tokens + Layout).
   Quelle: Infoblox PDS 2.5 (Lato fällt auf System-Sans zurück, wenn nicht installiert).
   In dieser Datei sind Tokens und App-Styles zusammengeführt — keine externen CSS-Importe nötig. */

/* Infoblox Design System — colors_and_type.css
   PDS 2.5 — Source-of-truth tokens extracted from the Component Library v2.0 Figma file.
   Pair with fonts.css, which @font-face declares the local Lato TTF kit (sole brand family). */

:root {
  /* ---------- BRAND CORE ---------- */
  --ib-black:        #101820;   /* Infoblox Black — primary brand neutral */
  --ib-blue:         #0057D1;   /* Tokens / link blue (Poppins headings in tokens) */
  --ib-blue-bright: #1976D2;   /* Primary button gradient top */
  --ib-blue-deep:   #0257AB;   /* Primary button gradient bottom */
  --ib-cyan:         #01E2EC;   /* Brand accent cyan */
  --ib-yellow:       #FDDD01;   /* Brand accent yellow */
  --ib-magenta:      #E100E5;   /* Brand accent magenta */
  --ib-violet:       #8A38F5;   /* Brand accent violet */
  --ib-violet-2:     #9747FF;   /* Brand accent violet (alt) */
  --ib-success:      #00BD4D;   /* Brand semantic green */

  /* ---------- STEEL (PRIMARY NEUTRAL RAMP) ---------- */
  --steel-50:  #F4F6F7;
  --steel-100: #E8EDEE;
  --steel-200: #BAC0C1;
  --steel-300: #5D5F5F;
  --steel-400: #455058;
  --steel-700: #202C36;
  --steel-800: #18212C;
  --steel-900: #101820;

  /* ---------- GRAY RAMP (Material-derived) ---------- */
  --gray-50:  #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-150: #F1F1F1;
  --gray-200: #EEEEEE;
  --gray-300: #E0E0E0;
  --gray-400: #BDBDBD;
  --gray-500: #9E9E9E;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #212121;

  /* ---------- SLATE (Tailwind-style; used in tokens / docs) ---------- */
  --slate-50:  #F8FAFC;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-500: #475569;
  --slate-900: #0F172A;

  /* ---------- SEMANTIC: SUCCESS ---------- */
  --success-50:  #DFF3E0;
  --success-100: #DBEDFF;
  --success-700: #004C1F;
  --success-strong: #00BD4D;

  /* ---------- SEMANTIC: ALERT (CRITICAL/DANGER) ---------- */
  --alert-50:  #FBE2E2;
  --alert-700: #AC3538;

  /* ---------- SEMANTIC: WARNING ---------- */
  --warning-50:  #FEF0CA;
  --warning-700: #9A8600;

  /* ---------- SEMANTIC: CAUTION (orange) ---------- */
  --caution-50:  #FCD2AF;
  --caution-700: #995700;

  /* ---------- TOKENS — TEXT ---------- */
  --color-text:               var(--steel-900);   /* default body */
  --color-text-subtle:        var(--steel-400);
  --color-text-muted:         var(--gray-700);
  --color-text-disabled:      var(--gray-400);
  --color-text-invert:        #FFFFFF;
  --color-text-link:          var(--ib-blue);
  --color-text-brand:         var(--ib-blue);

  /* ---------- TOKENS — BACKGROUND ---------- */
  --color-bg-page:                 #FFFFFF;
  --color-bg-app:                  var(--gray-150);     /* app canvas behind content */
  --color-bg-container-subtle:     #FFFFFF;             /* lightest card surface */
  --color-bg-container-medium:     var(--gray-50);
  --color-bg-container-bold:       var(--steel-100);    /* #E8EDEE — emphasized card */
  --color-bg-container-extrabold:  var(--steel-100);
  --color-bg-input:                #FFFFFF;
  --color-bg-brand-subtle:         #EBF5FF;             /* light blue tint */
  --color-bg-disabled:             var(--gray-200);
  --color-bg-navbar:               #F0EFE9;             /* warm off-white nav */
  --color-bg-navbar-dark:          var(--steel-700);    /* dark mode nav */
  --color-bg-overlay:              rgba(16, 24, 32, 0.6);

  /* ---------- TOKENS — BORDER ---------- */
  --color-border-subtle:    var(--gray-300);    /* default card / divider */
  --color-border-medium:    var(--gray-400);
  --color-border-strong:    var(--gray-600);
  --color-border-input:     #BDBDBD;
  --color-border-focus:     var(--ib-blue);
  --color-border-brand:     var(--ib-blue);

  /* ---------- TOKENS — GRAPHICS / ICONS ---------- */
  --color-graphics:           var(--steel-900);
  --color-graphics-invert:    #FFFFFF;
  --color-graphics-disabled:  var(--gray-400);
  --color-graphics-subtle:    var(--gray-700);
  --color-graphics-success:   #004C1F;
  --color-graphics-alert:     #AC3538;
  --color-graphics-warning:   #9A8600;
  --color-graphics-caution:   #995700;

  /* ---------- SPACING (8px base, 9 tokens) ---------- */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;

  /* ---------- CORNER RADIUS ---------- */
  --radius-xs:    2px;   /* table cell, inputs */
  --radius-sm:    4px;   /* buttons, cards (default) */
  --radius-md:    8px;   /* modals, large cards */
  --radius-lg:    16px;  /* feature surfaces */
  --radius-xl:    20px;
  --radius-pill:  22px;  /* pills / tags */
  --radius-full:  9999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0px 1px 2px  0px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0px 2px 4px  0px rgba(0, 0, 0, 0.08);
  --shadow-md: 0px 4px 8px  0px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0px 8px 16px 0px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0px 16px 24px 0px rgba(0, 0, 0, 0.20);

  /* Header band shadow used on dark app header */
  --shadow-header: 0px 3px 8px 0px rgba(0, 0, 0, 0.28);

  /* ---------- TYPE FAMILIES ----------
     PDS 2.5: Lato is the only brand family. UI / docs / tokens all use Lato.
     Mono falls back to platform monospace; no separate brand mono face. */
  --font-sans:   "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui:     var(--font-sans);
  --font-docs:   var(--font-sans);
  --font-token-headings: var(--font-sans);
  --font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE — BASE (Lato, Infoblox app UI) ---------- */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;   /* default body / table / form */
  --fs-md:   16px;   /* page section heading */
  --fs-lg:   20px;   /* H3 / large emphasis */
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-display: 48px;

  --lh-tight:  100%;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   900;

  /* letter-spacing tokens (from Figma — Lato 0.003em, Inter normal) */
  --tracking-tight:  -0.005em;
  --tracking-normal: 0.003em;
  --tracking-wide:   0.04em;

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

html { font-family: var(--font-sans); color: var(--color-text); }

.ib-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.ib-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);   /* 32px */
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.ib-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);    /* 24px */
  line-height: 1.2;
  color: var(--color-text);
}

.ib-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);    /* 20px */
  line-height: 1.25;
  color: var(--color-text);
}

.ib-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);    /* 16px */
  line-height: 1.3;
  color: var(--color-text);
}

.ib-eyebrow {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--steel-400);
}

.ib-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);  /* 14px — Infoblox UI default */
  line-height: 20px;
  color: var(--color-text);
}

.ib-body-md {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  line-height: 24px;
  color: var(--color-text);
}

.ib-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);    /* 12px */
  line-height: 16px;
  color: var(--color-text-subtle);
}

.ib-overline {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-700);
}

.ib-button {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  letter-spacing: var(--tracking-normal);
  line-height: 20px;
}

.ib-link {
  color: var(--color-text-link);
  text-decoration: none;
}
.ib-link:hover { text-decoration: underline; }

.ib-code, code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}


/* IHK-Notenrechner — App-Styles (Infoblox PDS 2.5).
   Erwartet, dass assets/colors_and_type.css + fonts.css vorher geladen sind. */

:root {
  --accent: #0057D1;
  --accent-deep: #0257AB;
  --accent-soft: #EBF5FF;
  /* Dichte: per [data-density] umgeschaltet */
  --pad-card: 24px;
  --pad-field: 12px;
  --row-gap: 14px;
  --field-h: 40px;
}
[data-density="kompakt"] {
  --pad-card: 16px;
  --pad-field: 8px;
  --row-gap: 8px;
  --field-h: 34px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  letter-spacing: var(--tracking-normal);
}

/* ============================================================ APP SHELL */
.app-root { min-height: 100vh; display: flex; flex-direction: column; }

.app-header {
  background: linear-gradient(180deg, var(--steel-900) 0%, var(--steel-800) 100%);
  color: #fff;
  padding: 0 clamp(16px, 4vw, 40px);
  height: 60px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow-header);
  position: sticky; top: 0; z-index: 50;
}
.app-header .logo { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.app-header .title { font-weight: 900; font-size: 16px; letter-spacing: .01em; }
.app-header .title small { font-weight: 400; opacity: .65; margin-left: 8px; font-size: 13px; }
.app-header .spacer { flex: 1; }
.app-header .ghost-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.app-header .ghost-btn:hover { background: rgba(255,255,255,.20); }
.app-header .ghost-btn svg { width: 15px; height: 15px; }

/* ============================================================ INTRO BAR */
.intro {
  padding: clamp(18px, 3vw, 28px) clamp(16px, 4vw, 40px) 0;
  max-width: 1680px; margin: 0 auto; width: 100%;
}
.intro h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 900; margin: 0 0 6px; letter-spacing: -.01em; }
.intro p { margin: 0; color: var(--color-text-muted); font-size: 15px; max-width: 70ch; line-height: 1.5; }
.intro .legal { margin-top: 8px; font-size: 12.5px; color: var(--color-text-subtle); }

/* control bar: Fachrichtung + Projektmodus */
.controlbar {
  padding: 18px clamp(16px, 4vw, 40px) 0; max-width: 1680px; margin: 0 auto; width: 100%;
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end;
}
.field-block { display: flex; flex-direction: column; gap: 6px; }
.field-block > label { font-size: 12px; font-weight: 700; color: var(--color-text-subtle);
  text-transform: uppercase; letter-spacing: .04em; }
.select-wrap { position: relative; }
.select-wrap select {
  appearance: none; font: inherit; font-size: 15px; font-weight: 700;
  height: 44px; padding: 0 40px 0 14px; min-width: 280px;
  border: 1px solid var(--color-border-input); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text); cursor: pointer;
}
.select-wrap::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--steel-400); border-bottom: 2px solid var(--steel-400);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.select-wrap select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fr-meta { font-size: 13px; color: var(--color-text-subtle); align-self: center; text-align: center; }
.fr-meta b { color: var(--color-text); font-weight: 700; }

.seg {
  display: inline-flex; background: var(--gray-150); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm); padding: 3px; gap: 2px;
}
.seg button {
  font: inherit; font-size: 13px; font-weight: 700; border: 0; background: transparent;
  color: var(--color-text-muted); padding: 7px 14px; border-radius: 3px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}
.seg button[aria-pressed="true"] { background: #fff; color: var(--accent); box-shadow: var(--shadow-xs); }

/* ============================================================ COMPARE RAIL */
.compare {
  padding: 22px clamp(16px, 4vw, 40px) 56px; margin: 0 auto; width: 100%; max-width: 1680px;
}
.compare-hint { font-size: 13px; color: var(--color-text-subtle); margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px; }
.compare-hint .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rail {
  display: flex; gap: 22px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 18px; scroll-snap-type: x proximity;
}
.rail::-webkit-scrollbar { height: 10px; }
.rail::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }

.variant { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.variant-head { display: flex; align-items: center; gap: 10px; }
.variant-tag {
  font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--steel-400); border-radius: 3px; padding: 3px 8px;
}
.variant-name { font-weight: 700; font-size: 15px; }
.variant-desc { font-size: 12.5px; color: var(--color-text-subtle); }
.variant-head .focus-btn {
  margin-left: auto; font: inherit; font-size: 12px; font-weight: 700; color: var(--accent);
  background: none; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
  padding: 5px 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.variant-head .focus-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.variant-head .focus-btn svg { width: 13px; height: 13px; }

.card {
  background: var(--color-bg-container-subtle); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.va { width: 408px; }   /* Gestapelt */
.vb { width: 760px; }   /* Split */
.vc { width: 560px; }   /* Kompakt */

/* focus overlay */
.focus-overlay {
  position: fixed; inset: 0; z-index: 80; background: var(--color-bg-overlay);
  display: flex; flex-direction: column; padding: clamp(12px, 3vw, 36px);
  overflow: auto;
}
.focus-overlay .focus-inner { margin: auto; width: 100%; max-width: 920px; }
.focus-overlay .focus-bar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.focus-overlay .close-btn {
  font: inherit; font-weight: 700; font-size: 13px; color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer;
}
.focus-overlay .close-btn:hover { background: rgba(255,255,255,.26); }

/* ============================================================ CALC INNARDS */
.calc { padding: var(--pad-card); }
.calc h2.section-title,
.section-title {
  font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-subtle); margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.calc h2.section-title .num,
.section-title .num {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900;
}

/* input row */
.inputs { display: flex; flex-direction: column; gap: var(--row-gap); }
.inputrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; }
.inputrow .lbl { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.inputrow .sub { grid-column: 1; font-size: 11.5px; color: var(--color-text-subtle); font-weight: 400; }
.inputrow .ctrl { grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; }

.numbox {
  width: 78px; height: var(--field-h); text-align: center; font: inherit; font-weight: 700; font-size: 15px;
  border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: #fff; color: var(--color-text);
}
.numbox:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.numbox.invalid { border-color: var(--alert-700); box-shadow: 0 0 0 3px var(--alert-50); }
.unit { font-size: 12px; color: var(--color-text-subtle); min-width: 30px; }

input[type="range"].slider {
  -webkit-appearance: none; appearance: none; width: 150px; height: 5px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) var(--pct, 0%), var(--gray-300) var(--pct, 0%));
  cursor: pointer;
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 3px solid var(--accent); box-shadow: var(--shadow-xs); cursor: pointer;
}
input[type="range"].slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); cursor: pointer;
}
.notesel {
  height: var(--field-h); font: inherit; font-weight: 700; font-size: 14px; padding: 0 8px;
  border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: #fff;
}

/* divider */
.calc hr { border: 0; border-top: 1px solid var(--color-border-subtle); margin: 18px 0; }

/* note badge */
.note-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  padding: 0 7px; border-radius: var(--radius-pill); font-weight: 900; font-size: 14px; color: #fff;
}
.nb1 { background: #00875A; } .nb2 { background: #1E8E3E; } .nb3 { background: #2A6FDB; }
.nb4 { background: #B07003; } .nb5 { background: #C2410C; } .nb6 { background: #AC3538; }
.note-word { font-size: 12.5px; color: var(--color-text-muted); font-weight: 700; }

/* result table */
.restable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.restable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-subtle); font-weight: 700; padding: 0 8px 8px; border-bottom: 1px solid var(--color-border-subtle); }
.restable th.num, .restable td.num { text-align: right; }
.restable td { padding: 9px 8px; border-bottom: 1px solid var(--gray-150); vertical-align: middle; }
.restable .bz { font-weight: 700; line-height: 1.25; }
.restable .gw { color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.restable .pk { font-weight: 700; font-variant-numeric: tabular-nums; }
.restable tr.sumrow td { border-top: 2px solid var(--color-border-medium); border-bottom: none;
  padding-top: 11px; font-weight: 900; }
.restable tr.sumrow.total td { background: var(--accent-soft); }

/* verdict */
.verdict { border-radius: var(--radius-md); padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; }
.verdict .vicon { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; }
.verdict .vicon svg { width: 19px; height: 19px; color: #fff; }
.verdict h3 { margin: 0 0 3px; font-size: 16px; font-weight: 900; }
.verdict p { margin: 0; font-size: 13px; line-height: 1.45; }
.verdict.pass { background: var(--success-50); } .verdict.pass .vicon { background: #00875A; } .verdict.pass h3 { color: #004C1F; }
.verdict.maybe { background: var(--warning-50); } .verdict.maybe .vicon { background: #B07003; } .verdict.maybe h3 { color: #5c4a00; }
.verdict.fail { background: var(--alert-50); } .verdict.fail .vicon { background: #AC3538; } .verdict.fail h3 { color: #7a1f22; }

/* big score chip (stacked/compact hero) */
.scorehero { display: flex; gap: 14px; flex-wrap: wrap; }
.scorechip { flex: 1 1 120px; background: var(--gray-50); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm); padding: 12px 14px; }
.scorechip .k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); font-weight: 700; }
.scorechip .v { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.scorechip .v .big { font-size: 30px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.scorechip .v .pts { font-size: 12px; color: var(--color-text-subtle); }

/* kriterien */
.kriterien { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kriterien li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 13px; line-height: 1.4; }
.kriterien .mark { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-size: 12px; font-weight: 900; margin-top: 1px; }
.kriterien .mark.ok { background: #00875A; } .kriterien .mark.no { background: #AC3538; }
.kriterien .detail { font-size: 11.5px; color: var(--color-text-subtle); margin-top: 1px; }

/* ergänzung box */
.ergbox { background: var(--accent-soft); border: 1px solid #BBD9FF; border-radius: var(--radius-md); padding: 14px 16px; }
.ergbox h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 900; }
.ergbox .small { font-size: 11.5px; color: var(--color-text-muted); margin: 0 0 10px; line-height: 1.4; }
.ergopt { font-size: 12.5px; line-height: 1.45; padding: 8px 0; border-top: 1px dashed #BBD9FF; }
.ergopt:first-of-type { border-top: 0; }
.ergopt b { font-weight: 900; }
.ergopt .ok { color: #004C1F; } .ergopt .no { color: #7a1f22; }

/* split layout */
.split { display: grid; grid-template-columns: 320px 1fr; gap: 0; }
.split .left { padding: var(--pad-card); border-right: 1px solid var(--color-border-subtle); }
.split .right { padding: var(--pad-card); background: var(--gray-50); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.split .right > * + * { margin-top: 16px; }

/* compact dashboard */
.compact .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.compact .kpi { border-radius: var(--radius-sm); padding: 12px; border: 1px solid var(--color-border-subtle); background: var(--gray-50); }
.compact .kpi.status.pass { background: var(--success-50); border-color: #9bd3a6; }
.compact .kpi.status.maybe { background: var(--warning-50); border-color: #e6cf7a; }
.compact .kpi.status.fail { background: var(--alert-50); border-color: #e3a3a4; }
.compact .kpi .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); font-weight: 700; }
.compact .kpi .v { font-size: 22px; font-weight: 900; margin-top: 4px; line-height: 1.1; }
.compact .kpi .v small { font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.compact .editrow .numbox { width: 64px; height: 32px; font-size: 14px; }

/* stacked spacing */
.va .calc > * + * { margin-top: 16px; }
.vc .calc > * + * { margin-top: 14px; }

/* ============================================================ NIEDERSCHRIFT */
.ns-overlay {
  position: fixed; inset: 0; z-index: 90; background: var(--color-bg-overlay);
  display: flex; flex-direction: column; overflow: auto; padding: 0;
}
.ns-toolbar {
  position: sticky; top: 0; z-index: 2; background: var(--steel-800); color: #fff;
  display: flex; align-items: center; gap: 12px; padding: 12px clamp(14px, 3vw, 28px);
  box-shadow: var(--shadow-md);
}
.ns-toolbar .t { font-weight: 900; font-size: 15px; }
.ns-toolbar .t small { font-weight: 400; opacity: .7; margin-left: 8px; }
.ns-toolbar .spacer { flex: 1; }
.ns-toolbar button {
  font: inherit; font-weight: 700; font-size: 13px; border-radius: var(--radius-sm); cursor: pointer;
  padding: 8px 14px; border: 1px solid transparent; display: inline-flex; gap: 7px; align-items: center;
}
.ns-toolbar button svg { width: 15px; height: 15px; }
.ns-toolbar .b-print { background: var(--accent); color: #fff; }
.ns-toolbar .b-print:hover { background: var(--accent-deep); }
.ns-toolbar .b-close { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.ns-toolbar .b-close:hover { background: rgba(255,255,255,.24); }

.ns-scroll { padding: clamp(14px, 3vw, 32px); }
.ns-sheet {
  background: #fff; width: 100%; max-width: 900px; margin: 0 auto; padding: 40px 44px;
  box-shadow: var(--shadow-lg); border-radius: 4px; color: #111;
}
.ns-sheet .ns-head { display: flex; align-items: flex-start; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 14px; }
.ns-sheet .ns-head .logo { height: 22px; }
.ns-sheet .ns-head h2 { margin: 0; font-size: 18px; font-weight: 900; }
.ns-sheet .ns-head .meta { font-size: 12px; color: #555; margin-top: 2px; }
.ns-sheet .ns-head .right { margin-left: auto; text-align: right; font-size: 11.5px; color: #555; }

.ns-fill-hint {
  background: #FEF8E3; border: 1px solid #E6D27A; border-radius: 6px; padding: 10px 14px;
  font-size: 12px; line-height: 1.5; margin: 16px 0; color: #4a3d00;
}
.ns-fill-hint b { font-weight: 900; }

.ns-block-title { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
  color: #333; margin: 22px 0 8px; }

table.ns-table { width: 100%; border-collapse: collapse; font-size: 12px; }
table.ns-table th, table.ns-table td { border: 1px solid #bbb; padding: 5px 6px; text-align: center; }
table.ns-table th { background: #f0f0f0; font-size: 10px; text-transform: uppercase; letter-spacing: .02em; font-weight: 700; }
table.ns-table td.fach { text-align: left; font-weight: 700; width: 30%; }
table.ns-table td.muted { color: #999; }
table.ns-table td.op { color: #777; font-weight: 700; width: 22px; }
table.ns-table .pkt { font-weight: 700; }
table.ns-table tr.sum td { background: #f7f7f7; font-weight: 900; }
table.ns-table tr.grand td { background: #eef4ff; font-weight: 900; }
table.ns-table .nn { font-weight: 900; }
table.ns-table .mepr-col { background: #FFFCEF; }

.ns-verdict { margin-top: 20px; padding: 12px 16px; border: 2px solid #111; border-radius: 4px;
  font-size: 15px; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.ns-verdict.pass { border-color: #00875A; color: #00532f; background: #f1faf2; }
.ns-verdict.fail { border-color: #AC3538; color: #7a1f22; background: #fdf3f3; }
.ns-verdict.maybe { border-color: #B07003; color: #5c4a00; background: #fffaef; }

.ns-sign { display: flex; gap: 40px; margin-top: 44px; }
.ns-sign .sig { flex: 1; border-top: 1px solid #111; padding-top: 5px; font-size: 11px; color: #555; }

.ns-legend { font-size: 11px; color: #555; margin-top: 18px; line-height: 1.5; }
.ns-legend b { color: #111; }

/* gate */
.gate { max-width: 420px; margin: 8vh auto; background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl); padding: 28px; }
.gate .lock { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.gate .lock svg { width: 22px; height: 22px; color: var(--accent); }
.gate h2 { margin: 0 0 6px; font-size: 19px; font-weight: 900; }
.gate p { margin: 0 0 16px; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.gate input[type="password"] { width: 100%; height: 44px; font: inherit; font-size: 15px; padding: 0 14px;
  border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); }
.gate input[type="password"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gate .err { color: var(--alert-700); font-size: 12.5px; margin: 8px 0 0; font-weight: 700; }
.gate .actions { display: flex; gap: 10px; margin-top: 18px; }
.gate button { font: inherit; font-weight: 700; font-size: 14px; border-radius: var(--radius-sm); padding: 11px 18px; cursor: pointer; border: 1px solid transparent; }
.gate .primary { background: var(--accent); color: #fff; flex: 1; }
.gate .primary:hover { background: var(--accent-deep); }
.gate .secondary { background: #fff; color: var(--color-text); border-color: var(--color-border-subtle); }
.gate .env-note { font-size: 11px; color: var(--color-text-subtle); margin-top: 14px; line-height: 1.5;
  background: var(--gray-100); border-radius: var(--radius-sm); padding: 9px 11px; }
.gate .env-note code { font-size: 11px; }

/* ============================================================ DASHBOARD (final) */
.dash { max-width: 1140px; margin: 0 auto; width: 100%; padding: 6px clamp(16px, 4vw, 40px) 64px; display: flex; flex-direction: column; gap: 18px; }
.dash .kpis3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash .kpis3 .scorechip { background: #fff; box-shadow: var(--shadow-xs); }
.dash .kpis3 .scorechip.status.pass { background: var(--success-50); border-color: #9bd3a6; }
.dash .kpis3 .scorechip.status.maybe { background: var(--warning-50); border-color: #e6cf7a; }
.dash .kpis3 .scorechip.status.fail { background: var(--alert-50); border-color: #e3a3a4; }
.dash-card { background: var(--color-bg-container-subtle); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.utcard { padding: 0; overflow: hidden; }

/* Unified input/output table */
.ut-lbl { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.ut-sub { display: block; font-size: 11px; color: var(--color-text-subtle); margin-top: 2px; }
.ut-inp-cell { white-space: nowrap; }
.ut-inp-cell .numbox { width: 70px; height: 32px; font-size: 14px; }
.restable tr.ut-proj td { background: var(--gray-50); border-top: 1px dashed var(--color-border-subtle); font-weight: 500; color: var(--color-text-muted); }
.restable tr.ut-proj .bz { font-style: italic; }
.restable tr.ut-proj .sumrow { border-top: none; }
#extra-out > * + * { margin-top: 16px; }

@media (max-width: 880px) { .dash .kpis3 { grid-template-columns: 1fr; } }

/* ============================================================ RESPONSIVE */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split .left { border-right: 0; border-bottom: 1px solid var(--color-border-subtle); }
  .split .right { border-radius: 0 0 var(--radius-md) var(--radius-md); }
  .va, .vb, .vc { width: 86vw; max-width: 460px; }
}

/* ============================================================ PRINT */
@media print {
  html.ns-open .app-root, html.ns-open .tweaks-host, html.ns-open .ns-toolbar { display: none !important; }
  html.ns-open .ns-overlay { position: static; background: #fff; overflow: visible; }
  html.ns-open .ns-scroll { padding: 0; }
  html.ns-open .ns-sheet { box-shadow: none; max-width: none; padding: 0; }
  @page { size: A4 portrait; margin: 14mm; }
}