/* ==========================================================================
   AUC Design System - Zertifizierung Workflow
   Zentrales Stylesheet für alle Seiten des Prototyps.
   Basiert auf: Styleguide/AUC_Styleguide.html
   Schriften: assets/fonts.css (Jost Data-URI, Material Icons woff2, self-hosted)
   ========================================================================== */

@import url("fonts.css");

/* --------------------------------------------------------------------------
   Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  --auc-dunkelblau: #0a283c;
  --auc-blau: #0f427a;
  --auc-hellblau: #14beed;
  --auc-graublau: #9aa8b9;
  --auc-gruen: #6ed7a0;
  --auc-warning: #f7d66d;
  --auc-rot: #e63c4b;

  --auc-bg: #ffffff;
  --auc-surface: #f4f6f8;
  --auc-border: #e2e6ea;
  --auc-text: #0a283c;
  --auc-text-muted: #9aa8b9;

  --auc-font: 'Jost', Arial, sans-serif;
  /* Rundungen: bewusste Kurskorrektur gegenüber der frühen 0px-Auslegung.
     Das Referenzprojekt (TraumaNetzwerk-Demo) arbeitet mit 8px und 12px und
     wirkt dadurch deutlich ruhiger und app-artiger. Karten werden hier etwas
     großzügiger gerundet als im Original. */
  --auc-radius: 8px;         /* Standard: Buttons, Eingabefelder, Steps, kleine Flächen */
  --auc-radius-karte: 14px;  /* Karten, Kacheln, Panels, Listencontainer, Modal-Sheet */
  --auc-radius-badge: 10px;  /* Datums-Badges und quadratische Icon-Badges */

  /* --------------------------------------------------------------------------
     Abstandsskala (4er-Schritte)
     -------------------------------------------------------------------------- */
  --auc-space-1: 4px;
  --auc-space-2: 8px;
  --auc-space-3: 12px;
  --auc-space-4: 16px;
  --auc-space-5: 24px;
  --auc-space-6: 32px;
  --auc-space-7: 48px;

  /* --------------------------------------------------------------------------
     Typografieskala (bewusst reduziert, Styleguide erlaubt nur drei
     Überschriftengrößen)
     -------------------------------------------------------------------------- */
  --auc-fs-eyebrow: 11px;
  --auc-fs-small: 12px;
  --auc-fs-body: 14px;
  --auc-fs-body-lg: 16px;
  --auc-fs-h3: 18px;
  --auc-fs-h2: 20px;
  --auc-fs-h1: 24px;
  --auc-lh-tight: 1.25;
  --auc-lh-body: 1.55;

  /* --------------------------------------------------------------------------
     Rundungen: Karten, Kacheln und Badges sind bewusst gerundet, damit die
     Oberfläche ruhiger und app-artiger wirkt. Tabellenzellen und die
     Reiterleiste bleiben dagegen kantig. Pille und Kreis (.chip, .chip-dot)
     bleiben eigenständige Ausnahmen.
     -------------------------------------------------------------------------- */
  --auc-radius-pill: 999px;
  --auc-radius-circle: 50%;

  /* --------------------------------------------------------------------------
     Erhoehung/Schatten
     -------------------------------------------------------------------------- */
  --auc-shadow-karte: 0 1px 3px rgba(10, 40, 60, .06);
  --auc-shadow-erhoben: 0 6px 20px rgba(10, 40, 60, .12);

  /* Kontrast-Token: Styleguide schreibt vor, dass Text auf Hellblau immer
     weiss sein muss. */
  --auc-auf-hellblau: #fff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--auc-font);
  color: var(--auc-text);
  background: var(--auc-surface);
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Icons nur in AUC Blau oder Hellblau verwenden */
.icon-blau { color: var(--auc-blau); }
.icon-hellblau { color: var(--auc-hellblau); }

/* --------------------------------------------------------------------------
   Grundlayout: Karten
   -------------------------------------------------------------------------- */
.auc-card {
  background: var(--auc-bg);
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius-karte);
  box-shadow: var(--auc-shadow-karte);
  padding: 20px 24px;
}

.auc-card h2, .auc-card h3 {
  color: var(--auc-blau);
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--auc-font);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--auc-radius);
  padding: 11px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
@media (min-width: 600px) {
  .btn { width: auto; }
}
.btn-primary { background: var(--auc-hellblau); border-color: var(--auc-hellblau); color: #fff; }
.btn-primary:hover { background: #fff; color: var(--auc-hellblau); border-color: var(--auc-hellblau); }
.btn-blue { background: var(--auc-blau); border-color: var(--auc-blau); color: #fff; }
.btn-blue:hover { background: #fff; color: var(--auc-blau); border-color: var(--auc-blau); }
.btn-secondary { background: transparent; color: var(--auc-blau); border-color: var(--auc-blau); }
.btn-secondary:hover { background: var(--auc-blau); color: #fff; border-color: var(--auc-blau); }
.btn-danger { background: var(--auc-rot); border-color: var(--auc-rot); color: #fff; }
.btn-danger:hover { background: #fff; color: var(--auc-rot); border-color: var(--auc-rot); }
.btn-dark { background: var(--auc-dunkelblau); border-color: var(--auc-dunkelblau); color: #fff; }
.btn-dark:hover { background: #fff; color: var(--auc-dunkelblau); border-color: var(--auc-dunkelblau); }
.btn[disabled] { background: var(--auc-graublau); border-color: var(--auc-graublau); color: #fff; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--auc-hellblau); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Tabellen
   -------------------------------------------------------------------------- */
/* Bewusst ohne Rundung: Tabellen sind fachlich sinnvoll eckig, nicht "korrigieren" */
.auc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.auc-table thead th {
  text-align: left;
  color: var(--auc-graublau);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--auc-border);
}
.auc-table tbody td { padding: 10px; border-bottom: 1px solid var(--auc-border); }

/* --------------------------------------------------------------------------
   Stepper
   -------------------------------------------------------------------------- */
.auc-stepper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auc-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--auc-text-muted);
  padding: 8px 14px;
  border: 1px solid var(--auc-border);
  border-radius: var(--auc-radius);
  background: var(--auc-bg);
}
.auc-step .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--auc-graublau);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.auc-step.is-active { color: var(--auc-blau); border-color: var(--auc-blau); font-weight: 500; }
.auc-step.is-active .num { background: var(--auc-blau); }
.auc-step.is-done { color: var(--auc-gruen); border-color: var(--auc-gruen); }
.auc-step.is-done .num { background: var(--auc-gruen); }
.auc-step-sep { color: var(--auc-border); }

/* --------------------------------------------------------------------------
   Ampel-Tags
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--auc-radius-pill);
  border: 1px solid;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.tag-ok { background: rgba(110, 215, 160, .18); color: #1f7a4d; border-color: var(--auc-gruen); }
.tag-partial { background: rgba(247, 214, 109, .32); color: #7a5b00; border-color: var(--auc-warning); }
.tag-err { background: rgba(230, 60, 75, .12); color: #b32230; border-color: var(--auc-rot); }
.tag-info { background: rgba(20, 190, 237, .16); color: #0b6f8c; border-color: var(--auc-hellblau); }
.tag-neutral { background: rgba(154, 168, 185, .18); color: #566677; border-color: var(--auc-graublau); }

/* --------------------------------------------------------------------------
   Banner
   -------------------------------------------------------------------------- */
.banner { padding: 14px 18px; border-left: 5px solid; border-radius: 0 var(--auc-radius) var(--auc-radius) 0; }
.banner b { display: block; font-weight: 700; margin-bottom: 2px; }
.banner-warn { background: var(--auc-warning); color: var(--auc-dunkelblau); border-left-color: var(--auc-warning); }
.banner-err { background: rgba(230, 60, 75, .12); color: #b32230; border-left-color: var(--auc-rot); }
.banner-err b { color: #b32230; }
.banner-ok { background: rgba(110, 215, 160, .18); color: #1f7a4d; border-left-color: var(--auc-gruen); }
.banner-ok b { color: #1f7a4d; }
.banner-note { background: var(--auc-surface); color: var(--auc-text); border-left-color: var(--auc-graublau); }
.banner-note b { color: var(--auc-dunkelblau); }

/* --------------------------------------------------------------------------
   Kennzeichen: KI-generiert vs. Regelbasiert
   Damit im gesamten Prototyp sofort erkennbar ist, wo eine KI-Komponente
   wirkt und wo klassische, deterministische Orchestrierung ablaeuft.
   -------------------------------------------------------------------------- */
.marker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--auc-radius-pill);
  border: 1px solid;
  white-space: nowrap;
}
.marker .material-icons { font-size: 14px; }

/* KI-Kennzeichen: Hellblau, Sparkle-Icon */
.marker-ki {
  background: rgba(20, 190, 237, .16);
  color: #0b6f8c;
  border-color: var(--auc-hellblau);
}
.marker-ki .material-icons { color: var(--auc-hellblau); }

/* Regel-Kennzeichen: Blau, Zahnrad-Icon */
.marker-regel {
  background: rgba(15, 66, 122, .10);
  color: var(--auc-blau);
  border-color: var(--auc-blau);
}
.marker-regel .material-icons { color: var(--auc-blau); }

/* Human-in-the-loop-Kennzeichen: Gruen, Personen-Icon */
.marker-hitl {
  background: rgba(110, 215, 160, .18);
  color: #1f7a4d;
  border-color: var(--auc-gruen);
}
.marker-hitl .material-icons { color: #1f7a4d; }