/* GENERIERT von api/design_generate.py -- nicht von Hand aendern.
   Quelle: frontend/design-defaults.json
   Gepflegt wird das im Design Center unter #/admin/design. */


@font-face {
  font-family: 'Space Grotesk';
  src: url("fonts/space-grotesk-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url("fonts/ibm-plex-sans-variable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url("fonts/source-sans-3-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url("fonts/atkinson-hyperlegible-next-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("fonts/jetbrains-mono-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Schriftstapel -- ausgewaehlt im Design Center (T-01 bis T-03) */
  --ws-font-heading: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ws-font-text: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ws-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ws-sans: var(--ws-font-text);
  --ws-mono: var(--ws-font-mono);

  /* ===== F · Farben ===== */
  /* F-01 Ink */
  --ws-ink: #0D0807;
  --ws-ink-80: #2A2523;
  --ws-ink-60: #5C5451;
  --ws-ink-40: #8E8784;
  --ws-ink-20: #C9C4C1;
  --ws-ink-10: #E6E2DF;
  /* F-02 Papier */
  --ws-paper: #F6F3EE;
  --ws-paper-2: #EEE9E0;
  --ws-paper-3: #E4DDD0;
  --ws-white: #FDFBF7;
  --ws-bg: var(--ws-paper);
  --ws-surface: var(--ws-white);
  /* F-03 Amber */
  --ws-amber: #CC5130;
  --ws-amber-dark: #A83E22;
  --ws-amber-soft: #F5D7C8;
  /* F-04 Holz */
  --ws-wood: #B5895C;
  --ws-wood-dark: #7A5935;
  /* F-05 Forest */
  --ws-forest: #2D3A29;
  /* F-06 Status */
  --ws-success: #2D6A4F;
  --ws-warning: #D48806;
  --ws-error: #B91C1C;
  --ws-info: #2F5F7A;
  /* F-07 Rahmen */
  --ws-border: rgba(13, 8, 7, 0.12);
  --ws-border-strong: rgba(13, 8, 7, 0.32);
  /* F-08 Bereichsfarben */
  --ws-area-bauleitung: #082E27;
  --ws-area-einkauf: #F1C88A;
  --ws-area-finance: #CB4F2E;
  --ws-area-kvp: #0D0807;
  --ws-area-logistik: #7A7171;
  --ws-area-personal: #E6EEF2;
  --ws-area-produktion: #3A241E;
  --ws-area-verkauf: #D57258;

  /* ===== T · Typografie ===== */
  /* T-10 Ueberschrift 0 (Hero) */
  --ws-h0: clamp(56px, 8vw, 128px);
  --ws-h0-weight: 500;
  --ws-h0-lh: 1.05;
  --ws-h0-ls: -0.02em;
  /* T-11 Ueberschrift 1 */
  --ws-h1: clamp(40px, 5.4vw, 80px);
  --ws-h1-weight: 500;
  --ws-h1-lh: 1.05;
  --ws-h1-ls: -0.02em;
  /* T-12 Ueberschrift 2 */
  --ws-h2: clamp(30px, 3.4vw, 48px);
  --ws-h2-weight: 500;
  --ws-h2-lh: 1.05;
  --ws-h2-ls: -0.02em;
  /* T-13 Ueberschrift 3 */
  --ws-h3: clamp(22px, 2.2vw, 30px);
  --ws-h3-weight: 500;
  --ws-h3-lh: 1.05;
  --ws-h3-ls: -0.02em;
  /* T-14 Ueberschrift 4 */
  --ws-h4: 18px;
  --ws-h4-weight: 500;
  --ws-h4-lh: 1.05;
  --ws-h4-ls: -0.02em;
  /* T-20 Fliesstext */
  --ws-body: 17px;
  --ws-body-lh: 1.5;
  /* T-21 Klein */
  --ws-small: 14px;
  /* T-22 Mikro */
  --ws-micro: 12px;
  /* T-30 Eyebrow */
  --ws-eyebrow-fs: 12px;
  --ws-eyebrow-ls: 0.12em;
  --ws-eyebrow-color: var(--ws-ink-60);
  /* T-31 Tabellenkopf-Label */
  --ws-th-fs: 11px;
  --ws-th-ls: 0.1em;
  --ws-th-color: var(--ws-ink-60);
  /* T-40 Akzentwort im Titel */
  --ws-accent-word-color: var(--ws-amber-dark);
  --ws-accent-word-weight: 300;

  /* ===== A · Abstaende, Radien, Raster ===== */
  /* A-01 Abstandsraster */
  --ws-space-1: 4px;
  --ws-space-2: 8px;
  --ws-space-3: 12px;
  --ws-space-4: 16px;
  --ws-space-5: 24px;
  --ws-space-6: 32px;
  --ws-space-7: 48px;
  --ws-space-8: 64px;
  /* A-02 Radien */
  --ws-r-sm: 6px;
  --ws-r-md: 12px;
  --ws-r-lg: 20px;
  --ws-r-pill: 999px;
  /* A-03 Seitenbreite und Rand */
  --ws-max: 1760px;
  --ws-gutter: clamp(20px, 4vw, 56px);
  /* A-04 Rahmenstaerken */
  --ws-border-w: 1px;
  --ws-border-w-strong: 2px;
  /* A-05 Fokus-Ring */
  --ws-focus-color: var(--ws-amber);
  --ws-focus-w: 2px;
  --ws-focus-offset: 2px;

  /* ===== B · Buttons ===== */
  /* B-00 Button-Grundmasse */
  --ws-btn-h-sm: 34px;
  --ws-btn-h-md: 44px;
  --ws-btn-h-lg: 52px;
  --ws-btn-px-sm: 14px;
  --ws-btn-px-md: 22px;
  --ws-btn-px-lg: 28px;
  --ws-btn-fs-sm: 13px;
  --ws-btn-fs-md: 15px;
  --ws-btn-fs-lg: 16px;
  --ws-btn-radius: var(--ws-r-pill);
  --ws-btn-weight: 500;
  --ws-btn-gap: 10px;
  /* B-01 Button Primaer */
  --ws-btn-primary-bg: var(--ws-ink);
  --ws-btn-primary-fg: var(--ws-white);
  --ws-btn-primary-hover-bg: var(--ws-amber-dark);
  /* B-02 Button Amber */
  --ws-btn-amber-bg: var(--ws-amber);
  --ws-btn-amber-fg: var(--ws-ink);
  --ws-btn-amber-hover-bg: var(--ws-amber-dark);
  /* B-03 Button Rahmen */
  --ws-btn-ghost-fg: var(--ws-ink);
  --ws-btn-ghost-border: var(--ws-border-strong);
  --ws-btn-ghost-hover-bg: var(--ws-ink);
  --ws-btn-ghost-hover-fg: var(--ws-white);
  /* B-04 Button Gefaehrlich */
  --ws-btn-danger-fg: var(--ws-error);
  --ws-btn-danger-border: var(--ws-error);
  --ws-btn-danger-hover-bg: var(--ws-error);
  --ws-btn-danger-hover-fg: var(--ws-white);
  /* B-05 Button Text */
  --ws-btn-text-fg: var(--ws-ink-60);
  --ws-btn-text-hover-fg: var(--ws-amber-dark);
  /* B-06 Button Symbol */
  --ws-btn-icon-size: 38px;

  /* ===== E · Eingaben ===== */
  /* E-00 Eingabe-Grundmasse */
  --ws-input-h: 42px;
  --ws-input-px: 14px;
  --ws-input-radius: var(--ws-r-md);
  --ws-input-bg: var(--ws-surface);
  --ws-input-fg: var(--ws-ink);
  --ws-input-border: var(--ws-border-strong);
  --ws-input-border-focus: var(--ws-amber);
  --ws-input-error: var(--ws-error);
  --ws-input-fs: 15px;
  --ws-label-fs: 13px;
  --ws-help-fs: 12.5px;
  --ws-required-color: var(--ws-amber);
  /* E-02 Textbereich */
  --ws-textarea-minh: 120px;
  /* E-05 Auswahlfeld */
  --ws-select-arrow: var(--ws-ink-60);
  /* E-06 Suchfeld */
  --ws-search-h: 40px;
  --ws-search-w: 280px;
  /* E-07 Datei-Upload */
  --ws-dropzone-minh: 120px;
  /* E-08 Formular-Layout */
  --ws-form-gap: var(--ws-space-5);
  --ws-form-col-gap: var(--ws-space-5);

  /* ===== S · Schalter und Auswahl ===== */
  /* S-01 Schalter */
  --ws-switch-w: 42px;
  --ws-switch-h: 24px;
  --ws-switch-knob: 18px;
  --ws-switch-on-bg: var(--ws-amber);
  --ws-switch-off-bg: var(--ws-ink-20);
  --ws-switch-knob-bg: var(--ws-white);
  /* S-02 Kontrollkaestchen */
  --ws-check-size: 18px;
  --ws-check-radius: var(--ws-r-sm);
  --ws-check-bg: var(--ws-ink);
  --ws-check-mark: var(--ws-white);
  /* S-03 Optionsfeld */
  --ws-radio-size: 18px;
  --ws-radio-dot: var(--ws-amber);
  /* S-04 Segment-Umschalter */
  --ws-segment-h: 34px;
  --ws-segment-px: 16px;
  --ws-segment-bg: var(--ws-paper-2);
  --ws-segment-active-bg: var(--ws-ink);
  --ws-segment-active-fg: var(--ws-white);

  /* ===== N · Navigation und Rahmen ===== */
  /* N-01 Kopfzeile */
  --ws-header-py: 22px;
  --ws-header-logo-h: 26px;
  /* N-02 Fusszeile */
  --ws-footer-fs: 11px;
  --ws-footer-color: var(--ws-ink-40);
  /* N-03 Tabs */
  --ws-tab-h: 38px;
  --ws-tab-active: var(--ws-amber);
  /* N-04 Brotkrumen */
  --ws-crumb-fs: 12px;
  --ws-crumb-color: var(--ws-ink-60);
  /* N-06 Avatar-Pill */
  --ws-avatar-size: 32px;
  --ws-avatar-bg: var(--ws-amber);
  --ws-avatar-fg: var(--ws-white);
  --ws-avatar-fs: 13px;
  /* N-07 Textlink */
  --ws-link-color: var(--ws-ink);
  --ws-link-underline: var(--ws-border-strong);
  --ws-link-hover: var(--ws-amber-dark);

  /* ===== K · Karten und Flaechen ===== */
  /* K-01 Karte */
  --ws-card-bg: var(--ws-surface);
  --ws-card-border: var(--ws-border);
  --ws-card-radius: var(--ws-r-md);
  --ws-card-p: 22px;
  /* K-03 Sektion mit Kopf */
  --ws-section-gap: var(--ws-space-6);
  --ws-section-head-gap: var(--ws-space-4);
  /* K-05 Trennlinie */
  --ws-rule-color: var(--ws-border);
  /* K-06 Kennzahl */
  --ws-stat-fs: 34px;
  --ws-stat-label-fs: 12px;
  --ws-stat-label-color: var(--ws-ink-60);

  /* ===== L · Listen und Tabellen ===== */
  /* L-01 Tabelle */
  --ws-row-h: 44px;
  --ws-cell-px: 12px;
  --ws-table-line: var(--ws-border);
  --ws-table-zebra: transparent;
  /* L-02 Tabellenzeile Zustaende */
  --ws-row-hover: var(--ws-paper-2);
  --ws-row-selected: var(--ws-amber-soft);
  /* L-03 Definitionsliste */
  --ws-dl-label-w: 180px;
  /* L-04 Leerer Zustand */
  --ws-empty-py: 40px;
  --ws-empty-color: var(--ws-ink-60);

  /* ===== Z · Status und Kennzeichen ===== */
  /* Z-01 Chip */
  --ws-chip-fs: 12px;
  --ws-chip-py: 6px;
  --ws-chip-px: 12px;
  --ws-chip-bg: var(--ws-paper-2);
  --ws-chip-fg: var(--ws-ink-80);
  --ws-chip-dot: 6px;
  /* Z-02 Zaehler-Badge */
  --ws-badge-size: 20px;
  --ws-badge-fs: 11px;
  --ws-badge-bg: var(--ws-ink);
  --ws-badge-fg: var(--ws-white);
  /* Z-03 Ampel-Punkt */
  --ws-dot-size: 10px;
  --ws-dot-off: var(--ws-ink-40);
  /* Z-04 Bereichs-Tag */
  --ws-area-tag-size: 28px;
  --ws-area-tag-fs: 11px;

  /* ===== M · Meldungen ===== */
  /* M-01 Hinweis-Banner */
  --ws-notice-p: 14px;
  --ws-notice-bar-w: 3px;
  --ws-notice-bg: var(--ws-paper-2);
  /* M-02 Toast */
  --ws-toast-w: 320px;
  --ws-toast-bg: var(--ws-ink);
  --ws-toast-fg: var(--ws-white);
  /* M-03 Laden */
  --ws-spinner-size: 20px;
  --ws-spinner-color: var(--ws-amber);
  --ws-skeleton-bg: var(--ws-ink-10);
  /* M-04 Umgebungs-Banner */
  --ws-envbanner-h: 28px;
  --ws-envbanner-bg: var(--ws-warning);
  --ws-envbanner-fg: var(--ws-ink);

  /* ===== D · Dialoge und Overlays ===== */
  /* D-01 Dialog */
  --ws-dialog-w: 480px;
  --ws-dialog-radius: var(--ws-r-lg);
  --ws-dialog-p: 24px;
  --ws-scrim: rgba(13, 8, 7, 0.45);

  /* ===== I · Identitaet ===== */
  /* I-03 Das OS */
  --ws-os-fs: 26px;
  --ws-os-weight: 600;
  --ws-os-color: var(--ws-amber);
  /* I-05 Icon-Set */
  --ws-icon-stroke: 1.75;
  --ws-icon-sm: 16px;
  --ws-icon-md: 20px;
  --ws-icon-lg: 24px;
}

/* Element-Reset in @layer base -- Utility-Klassen der Tools (Tailwind) gewinnen dagegen. */
@layer base {
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--ws-sans);
    font-size: var(--ws-body);
    line-height: var(--ws-body-lh);
    color: var(--ws-ink);
    background: var(--ws-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1 { font-family: var(--ws-font-heading); font-weight: var(--ws-h1-weight); letter-spacing: var(--ws-h1-ls); margin: 0; line-height: var(--ws-h1-lh); text-wrap: balance; }
  h2 { font-family: var(--ws-font-heading); font-weight: var(--ws-h2-weight); letter-spacing: var(--ws-h2-ls); margin: 0; line-height: var(--ws-h2-lh); text-wrap: balance; }
  h3 { font-family: var(--ws-font-heading); font-weight: var(--ws-h3-weight); letter-spacing: var(--ws-h3-ls); margin: 0; line-height: var(--ws-h3-lh); text-wrap: balance; }
  h4 { font-family: var(--ws-font-heading); font-weight: var(--ws-h4-weight); letter-spacing: var(--ws-h4-ls); margin: 0; line-height: var(--ws-h4-lh); text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  a { color: inherit; text-decoration: none; }
}