/*
 * fonts.css – Webfont-Einbindung des ProzessPlaners
 *
 * Der ProzessPlaner nutzt Inter (UI), IBM Plex Sans (Fallback) und
 * IBM Plex Mono (Zahlen/IDs). Alle drei liegen auf Google Fonts.
 * HINWEIS: Im Original-Repo sind keine Font-Binaries eingecheckt – die
 * Schriften werden hier über die Google-Fonts-CDN geladen. Für einen
 * vollständig offline-fähigen Build bitte die .woff2-Dateien beilegen
 * und die @font-face-src-URLs hier lokal ersetzen.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');


/* === tokens/colors.css === */
/*
 * colors.css – Farb-Token des ProzessPlaners
 *
 * Kühle, augenschonende Fläche; hoher Textkontrast; Blau für Vertrauen/Technik,
 * technisches Teal als Akzent, Semantikfarben nur für ihre Bedeutung.
 * Übernommen 1:1 aus public/css/tokens.css des Quell-Repos.
 */

:root {
  /* --- Flächen / Hintergründe --- */
  --color-bg:            #F5F7FA;  /* App-Hintergrund, leicht kühl */
  --color-surface:       #FFFFFF;  /* Karten, Panels, Formularflächen */
  --color-surface-alt:   #EEF2F7;  /* abgesetzte Bereiche, Zebrastreifen */

  /* --- Struktur / Text --- */
  --color-border:        #CBD5E1;  /* Rahmen, Trennlinien, Input-Border */
  --color-text:          #0F172A;  /* Haupttext, hoher Kontrast */
  --color-text-muted:    #64748B;  /* sekundärer Text, Labels, Captions */
  --color-text-inverse:  #FFFFFF;  /* Text auf farbigen Flächen */

  /* --- Primär: Vertrauen / Technik --- */
  --color-primary:       #1D4ED8;  /* Hauptaktionen, Navigation, aktiv */
  --color-primary-hover: #1E40AF;  /* Hover/aktiv */
  --color-primary-deep:  #1E3A5F;  /* dunkles Stahlblau: Kopfzeile, Rail */

  /* --- Akzent --- */
  --color-accent:        #0D9488;  /* technisches Teal: Hervorhebungen */
  --color-accent-hover:  #0B7C71;

  /* --- Semantik --- */
  --color-success:       #16A34A;  /* berechnet / gültig / ok */
  --color-warning:       #D97706;  /* Bernstein: Prüfung nötig */
  --color-error:         #DC2626;  /* gedecktes Rot: Fehler */
  --color-success-bg:    #DCFCE7;
  --color-warning-bg:    #FEF3C7;
  --color-error-bg:      #FEE2E2;

  /* --- Fokus (Barrierefreiheit) --- */
  --color-focus-ring:    #2563EB;

  /* --- Semantische Aliase --- */
  --surface-page:        var(--color-bg);
  --surface-card:        var(--color-surface);
  --surface-sunken:      var(--color-surface-alt);
  --text-body:           var(--color-text);
  --text-secondary:      var(--color-text-muted);
  --border-default:      var(--color-border);
}


/* === tokens/typography.css === */
/*
 * typography.css – Schrift-Token des ProzessPlaners
 *
 * Hierarchie entsteht über Größe und Gewicht, nicht über Farbe.
 * Zahlen laufen tabellarisch (font-variant-numeric: tabular-nums).
 */

:root {
  /* --- Familien --- */
  --font-sans:  'Inter', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;

  /* --- Type-Scale (rem) --- */
  --text-xs:    0.75rem;   /* 12px – Captions, Hilfetext */
  --text-sm:    0.875rem;  /* 14px – sekundärer Text, Labels */
  --text-base:  1rem;      /* 16px – Standard-Fließtext */
  --text-lg:    1.125rem;  /* 18px – Hervorhebung */
  --text-xl:    1.375rem;  /* 22px – Sektionsüberschrift */
  --text-2xl:   1.75rem;   /* 28px – Seitentitel */

  /* --- Gewichte --- */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* --- Zeilenhöhen --- */
  --line-height-tight:  1.25;
  --line-height-normal: 1.5;

  /* --- Semantische Aliase --- */
  --text-page-title:    var(--text-2xl);
  --text-section:       var(--text-xl);
  --text-label:         var(--text-sm);
  --text-caption:       var(--text-xs);
}


/* === tokens/spacing.css === */
/*
 * spacing.css – Abstände, Radien, Schatten, Layout des ProzessPlaners
 *
 * 4px-Basis-Skala. Radien dezent/technisch. Schatten sparsam, nur zur
 * Ebenentrennung. Breakpoints als dokumentierte Referenz (in @media
 * müssen die Pixelwerte direkt geschrieben werden).
 */

:root {
  /* --- Abstands-Skala (4px-Basis) --- */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */

  /* --- Radien – dezent, technisch --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* --- Schatten – sparsam --- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);

  /* --- Layout / Breakpoints (Referenz) --- */
  --bp-tablet:     768px;
  --bp-desktop:    1024px;
  --container-max: 1280px;
  --topbar-height: 49px;
}


/* === tokens/ordeo-brand.css === */
/*
 * ordeo-brand.css – Dachmarken-Token der Ordeo GmbH (Ordeo Software Solutions).
 *
 * Baut auf der kühlen, professionellen Farbwelt des ProzessPlaners auf
 * (Stahlblau dominiert) und ergänzt das warme Bäckerei-Erbe der
 * Kaisersemmel-Wirbelmarke (Gold-Akzent, Mokka). „ordo" = Ordnung/Klarheit.
 *
 * Hierarchie: Stahlblau = Prim\u00e4r/Vertrauen · Gold = warmer Akzent (sparsam) ·
 * Mokka = Handwerk/Herkunft · Creme = warme Flächen.
 */

:root {
  /* --- Primär: Stahlblau (Dachmarke) --- */
  --ordeo-blue:        #1E3A5F;  /* Kernfarbe der Marke, Hero/Kopf/Footer */
  --ordeo-blue-700:    #16304F;  /* dunkler, Tiefe */
  --ordeo-blue-600:    #274B79;  /* Hover/Flächen */
  --ordeo-blue-500:    #1D4ED8;  /* helles Aktionsblau (aus ProzessPlaner) */
  --ordeo-blue-100:    #E3EAF3;  /* zarte blaue Fläche */

  /* --- Akzent: Semmel-Gold (Bäckerei-Erbe) --- */
  --ordeo-gold:        #E19A00;  /* Kaisersemmel-Gold, Akzent/CTA-Highlight */
  --ordeo-gold-600:    #C4850B;  /* Hover */
  --ordeo-gold-300:    #F5C542;  /* helleres Gold */
  --ordeo-gold-bg:     #FCF3DE;  /* warme Gold-Tönung für Flächen */

  /* --- Warm: Mokka & Creme (Handwerk) --- */
  --ordeo-mokka:       #3E2E23;  /* Semmel-Mokka, warme Textur/Text auf Creme */
  --ordeo-mokka-600:   #5A4437;
  --ordeo-cream:       #F7F2E9;  /* warme Sektionsfläche */
  --ordeo-cream-line:  #E9DFCE;  /* Trennlinie auf Creme */

  /* --- Neutrale (aus ProzessPlaner geteilt) --- */
  --ordeo-ink:         #0F172A;  /* Haupttext */
  --ordeo-slate:       #64748B;  /* sekundärer Text */
  --ordeo-surface:     #FFFFFF;
  --ordeo-bg:          #F5F7FA;  /* kühler App-/Seiten-Hintergrund */

  /* --- Semantische Marken-Aliase --- */
  --brand-primary:     var(--ordeo-blue);
  --brand-accent:      var(--ordeo-gold);
  --brand-on-dark:     #FFFFFF;
  --brand-heading:     var(--ordeo-blue);
  --brand-cta:         var(--ordeo-gold);

  /* --- Marken-Typografie (Wortmarke) --- */
  --ordeo-wordmark-font:    var(--font-sans); /* Inter, konsistent mit den Apps */
  --ordeo-wordmark-tracking: -0.02em;         /* enge Laufweite = kompakt, seriös */

  /* --- Marken-Radien/Schatten (etwas großzügiger als App-UI) --- */
  --ordeo-radius:      12px;
  --ordeo-shadow:      0 8px 30px rgba(15, 23, 42, 0.10);
  --ordeo-shadow-sm:   0 2px 10px rgba(15, 23, 42, 0.06);
}


/* === base/base.css === */
/*
 * base.css – Grundstile & wiederverwendbare Klassen des ProzessPlaners
 *
 * Setzt die Token als schlanke Basis um: Body, Typografie, Fokus, Karten,
 * Buttons, Formulare, Tabellen, Badges, Statusmeldungen.
 * Bewusst schlank (YAGNI). Übernommen aus base.css + app.css des Quell-Repos,
 * nur Token-Variablen, keine rohen Hexwerte.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* --- Überschriften: Hierarchie über Größe & Gewicht --- */
h1 { font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); margin: 0 0 var(--space-6); }
h2 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); margin: 0 0 var(--space-4); }
h3 { font-size: var(--text-lg); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); margin: 0 0 var(--space-3); }

.seite-titel { font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-1); }
.seite-untertitel { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-6); }

/* --- Fokus: immer sichtbar --- */
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Zahlen: Tabellenziffern --- */
.num, td.num, input[type="number"], .kalkulation {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Karten / Panels --- */
.karte, .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* --- Buttons: Touch-Ziel min. 44px --- */
.btn, button.btn {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn-primaer, .btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.btn-primaer:hover, .btn-primary:hover { background: var(--color-primary-hover); }
.btn-sekundaer, .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-sekundaer:hover, .btn-secondary:hover { background: var(--color-surface-alt); }
.btn-gefahr { background: var(--color-surface); color: var(--color-error); border-color: var(--color-border); }
.btn-gefahr:hover { background: var(--color-error-bg); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.aktionen { display: flex; gap: var(--space-3); align-items: center; }

/* --- Formulare --- */
label { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.feld { display: flex; flex-direction: column; }
.feld label { font-weight: var(--font-weight-medium); }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
}
textarea { min-height: 88px; }
.feld input:focus, .feld select:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--color-focus-ring); outline-offset: 1px; border-color: var(--color-focus-ring);
}
.feld.hat-fehler input, .feld.hat-fehler select { border-color: var(--color-error); }
.feld .fehler { color: var(--color-error); font-size: var(--text-xs); margin-top: var(--space-1); min-height: 1em; }
.feld .hilfe { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: var(--space-1); }
.feld.breit { grid-column: span 2; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6); }

/* --- Tabellen: Zebrastreifen, Zahlen rechts --- */
table.liste { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--color-surface); }
table.liste th {
  text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-muted); font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--color-border);
}
table.liste td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-surface-alt); }
table.liste tr:nth-child(even) td { background: var(--color-surface-alt); }
table.liste td.num, table.liste th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Badges --- */
.badge {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--font-weight-medium);
  padding: 1px var(--space-2); border-radius: 999px;
  background: var(--color-surface-alt); color: var(--color-text-muted);
}
.badge-warn { background: var(--color-error); color: var(--color-surface); }
.badge-ok { background: var(--color-success-bg); color: var(--color-success); }
.badge-info { background: var(--color-surface-alt); color: var(--color-primary); }

/* --- Toolbar --- */
.toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.toolbar input[type="search"], .toolbar select.liste-filter {
  padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); min-height: 38px; width: auto;
}
.toolbar input[type="search"] { min-width: 220px; }
.toolbar .liste-anzahl { color: var(--color-text-muted); font-size: var(--text-xs); }

/* --- Statusmeldungen --- */
.status-success, .status-warning, .status-error, .melde {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.status-success, .melde-erfolg { background: var(--color-success-bg); color: var(--color-success); }
.status-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.status-error, .melde-fehler { background: var(--color-error-bg); color: #7f1d1d; }
.leer { color: var(--color-text-muted); padding: var(--space-8); text-align: center; }