@import url('/fonts/fonts.css');

/* ==========================================================================
   STARIS Ordner — Theme über Bootstrap 5.3
   --------------------------------------------------------------------------
   Richtung: ruhig und dicht. Die Aktionsfarbe ist Tinte, nicht Blau — das passt
   zum schwarz-weißen STARIS-Zeichen und lässt dem Status die einzige Farbe auf
   der Seite. Wer auf diesen Seiten Farbe sieht, sieht einen Zustand.

   Die Statusfarben folgen weiter der Logik der Sicherheitskennzeichnung
   (ISO 7010): grün sicher, gelb Achtung, rot verboten, blau Gebot. Die Werte
   sind moderner und lesbarer als die reinen Normfarben — #F9A800 ist als
   Textfarbe unbrauchbar.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  /* Neutrale — das Rückgrat. Leicht warm, damit Weiß nicht klinisch wirkt. */
  --n-0:   #FFFFFF;
  --n-25:  #FCFCFB;
  --n-50:  #F7F7F5;
  --n-100: #F1F1EE;
  --n-200: #E6E6E2;
  --n-300: #D6D6D1;
  --n-400: #A9A9A2;
  --n-500: #6E6E65;   /* 4.80:1 auf der Seitenfläche — WCAG AA für Fließtext */
  --n-600: #57574F;
  --n-700: #3D3D37;
  --n-900: #1B1B18;

  --tinte: var(--n-900);
  --tinte-hover: #33332E;

  /* Status — ISO-7010-Logik in lesbaren Werten */
  --gruen: #0F7A4D;  --gruen-flaeche: #E9F5EE;  --gruen-linie: #B4DFC7;
  --amber: #A15C00;  --amber-flaeche: #FDF3E4;  --amber-linie: #F0D8A6;
  --rot:   #B42318;  --rot-flaeche:   #FDECEA;  --rot-linie:   #F5C3BD;
  --blau:  #15489E;  --blau-flaeche:  #EBF1FB;  --blau-linie:  #C2D5F0;

  --radius-s: 6px;
  --radius:   8px;
  --radius-l: 12px;

  --schatten-schwebend: 0 1px 2px rgba(20,20,18,.04), 0 8px 24px rgba(20,20,18,.08);

  /* --- Bootstrap darauf legen --- */
  --bs-primary: var(--tinte);       --bs-primary-rgb: 27, 27, 24;
  --bs-success: var(--gruen);       --bs-success-rgb: 15, 122, 77;
  --bs-warning: var(--amber);       --bs-warning-rgb: 161, 92, 0;
  --bs-danger:  var(--rot);         --bs-danger-rgb: 180, 35, 24;

  --bs-body-color: var(--n-900);         --bs-body-color-rgb: 27, 27, 24;
  --bs-body-bg: var(--n-50);             --bs-body-bg-rgb: 247, 247, 245;
  --bs-emphasis-color: var(--n-900);
  --bs-secondary-color: var(--n-500);
  --bs-tertiary-color: var(--n-400);
  --bs-border-color: var(--n-200);
  --bs-border-color-translucent: var(--n-200);

  --bs-link-color: var(--blau);           --bs-link-color-rgb: 21, 72, 158;
  --bs-link-hover-color: #0F3778;

  --bs-font-sans-serif: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --bs-font-monospace: 'IBM Plex Mono', ui-monospace, monospace;

  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-s);
  --bs-border-radius-lg: var(--radius-l);
  --bs-box-shadow-sm: none;
  --bs-box-shadow: var(--schatten-schwebend);
}

[data-bs-theme="dark"] {
  --n-0:   #17171A;
  --n-25:  #1B1B1E;
  --n-50:  #121214;
  --n-100: #232327;
  --n-200: #2E2E33;
  --n-300: #3C3C42;
  --n-400: #6C6C74;
  --n-500: #9A9AA2;
  --n-600: #B6B6BD;
  --n-700: #D2D2D7;
  --n-900: #F2F2F4;

  --tinte: #F2F2F4;
  --tinte-hover: #FFFFFF;

  --gruen: #4ADE9A;  --gruen-flaeche: #10281D;  --gruen-linie: #1F5B3F;
  --amber: #F0B354;  --amber-flaeche: #2A2010;  --amber-linie: #6B4E1C;
  --rot:   #F98A80;  --rot-flaeche:   #2C1512;  --rot-linie:   #6E2A24;
  --blau:  #8AB4FF;  --blau-flaeche:  #14203A;  --blau-linie:  #2C4880;

  --schatten-schwebend: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);

  --bs-primary: var(--tinte);       --bs-primary-rgb: 242, 242, 244;
  --bs-success: var(--gruen);       --bs-success-rgb: 74, 222, 154;
  --bs-warning: var(--amber);       --bs-warning-rgb: 240, 179, 84;
  --bs-danger:  var(--rot);         --bs-danger-rgb: 249, 138, 128;

  --bs-body-color: var(--n-900);         --bs-body-color-rgb: 242, 242, 244;
  --bs-body-bg: var(--n-50);             --bs-body-bg-rgb: 18, 18, 20;
  --bs-emphasis-color: var(--n-900);
  --bs-secondary-color: var(--n-500);
  --bs-tertiary-color: var(--n-400);
  --bs-border-color: var(--n-200);
  --bs-border-color-translucent: var(--n-200);
  --bs-link-color: var(--blau);           --bs-link-color-rgb: 138, 180, 255;
  --bs-link-hover-color: #B3CDFF;
}

/* ==========================================================================
   Grundlage
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  font-size: .875rem;
  line-height: 1.55;
  letter-spacing: -0.003em;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}

body[dir="rtl"] { font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif; }

h1, .h1 { font-size: 1.625rem; letter-spacing: -0.022em; }
h2, .h2 { font-size: 1.125rem; letter-spacing: -0.016em; }
h3, .h3 { font-size: .9375rem; letter-spacing: -0.011em; }
h1, h2, h3, h4, h5 { font-weight: 600; line-height: 1.25; }

/* Zahlen sollen untereinander stehen — Fristen liest man spaltenweise. */
.table, .zahl, .zahlenfeld .wert, .plakette, time { font-variant-numeric: tabular-nums; }

code, .mono, .hash, .seriennr {
  font-family: var(--bs-font-monospace);
  font-size: .8125rem;
  letter-spacing: -0.01em;
}

hr { border-color: var(--n-200); opacity: 1; }

:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* ==========================================================================
   Bootstrap-Komponenten nachziehen
   ========================================================================== */

.card {
  --bs-card-bg: var(--n-0);
  --bs-card-border-color: var(--n-200);
  --bs-card-border-radius: var(--radius-l);
  --bs-card-inner-border-radius: calc(var(--radius-l) - 1px);
  --bs-card-spacer-y: 1.15rem;
  --bs-card-spacer-x: 1.25rem;
}

.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--n-200);
  --bs-list-group-item-padding-y: .8rem;
  --bs-list-group-item-padding-x: 0;
}
.card .list-group { --bs-list-group-item-padding-x: 1.25rem; }
.list-group-item-action:hover, .list-group-item.hoverbar:hover { background: var(--n-25); }

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--n-200);
  --bs-table-hover-bg: var(--n-25);
  margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table > thead th {
  font-size: .75rem; font-weight: 600; color: var(--n-500);
  letter-spacing: 0; border-bottom-color: var(--n-200);
}
.table > tbody > tr:last-child > * { border-bottom-width: 0; }

/* Schaltflächen: Tinte statt Blau. Dunkle Knöpfe hellen beim Hover auf. */
.btn {
  --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .85rem;
  --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--radius);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8125rem; }
.btn-lg { --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.1rem; --bs-btn-font-size: .9375rem; }

.btn-primary {
  --bs-btn-bg: var(--tinte); --bs-btn-border-color: var(--tinte); --bs-btn-color: var(--n-0);
  --bs-btn-hover-bg: var(--tinte-hover); --bs-btn-hover-border-color: var(--tinte-hover); --bs-btn-hover-color: var(--n-0);
  --bs-btn-active-bg: var(--tinte-hover); --bs-btn-active-border-color: var(--tinte-hover); --bs-btn-active-color: var(--n-0);
  --bs-btn-disabled-bg: var(--n-300); --bs-btn-disabled-border-color: var(--n-300); --bs-btn-disabled-color: var(--n-0);
}
.btn-outline-secondary {
  --bs-btn-color: var(--n-700); --bs-btn-border-color: var(--n-300); --bs-btn-bg: var(--n-0);
  --bs-btn-hover-bg: var(--n-50); --bs-btn-hover-color: var(--n-900); --bs-btn-hover-border-color: var(--n-300);
  --bs-btn-active-bg: var(--n-100); --bs-btn-active-color: var(--n-900); --bs-btn-active-border-color: var(--n-300);
}
.btn-danger {
  --bs-btn-bg: var(--rot); --bs-btn-border-color: var(--rot);
  --bs-btn-hover-bg: #9A1C13; --bs-btn-hover-border-color: #9A1C13;
  --bs-btn-active-bg: #85180F; --bs-btn-active-border-color: #85180F;
}
.btn-link { --bs-btn-color: var(--blau); --bs-btn-hover-color: var(--bs-link-hover-color); --bs-btn-font-weight: 500; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* Formulare: 40px hoch, ruhige Rahmen, sichtbarer Fokus ohne Leuchten */
.form-control, .form-select {
  --bs-border-radius: var(--radius);
  background-color: var(--n-0);
  border-color: var(--n-300);
  padding: .45rem .7rem;
  font-size: .875rem;
}
.form-control:focus, .form-select:focus {
  background-color: var(--n-0);
  border-color: var(--n-400);
  box-shadow: 0 0 0 3px rgba(21, 72, 158, .12);
}
.form-control::placeholder { color: var(--n-400); }
.form-label { font-weight: 500; font-size: .8125rem; margin-bottom: .3rem; color: var(--n-700); }
.form-text { margin-top: 0; margin-bottom: .4rem; font-size: .8125rem; color: var(--n-500); }
.form-check-input { border-color: var(--n-300); }
.form-check-input:checked { background-color: var(--tinte); border-color: var(--tinte); }
.form-check-input:focus { border-color: var(--n-400); box-shadow: 0 0 0 3px rgba(21, 72, 158, .12); }
fieldset legend { font-size: .8125rem; font-weight: 500; color: var(--n-700); }

/* Hinweise: Fläche + feine Linie, kein Rahmen ringsum */
.alert {
  --bs-alert-border-radius: var(--radius-l);
  border: 1px solid transparent;
  padding: .85rem 1rem;
  font-size: .875rem;
}
.alert-success { background: var(--gruen-flaeche); border-color: var(--gruen-linie); color: var(--gruen); }
.alert-warning { background: var(--amber-flaeche); border-color: var(--amber-linie); color: var(--amber); }
.alert-danger  { background: var(--rot-flaeche);   border-color: var(--rot-linie);   color: var(--rot); }
.alert-primary { background: var(--blau-flaeche);  border-color: var(--blau-linie);  color: var(--blau); }
.alert .alert-link { color: inherit; text-decoration: underline; }
.alert strong, .alert .fw-semibold { color: inherit; }

/* Status als kleine Pille — nicht als Farbklotz */
.badge {
  --bs-badge-padding-x: .5rem; --bs-badge-padding-y: .22em;
  --bs-badge-font-size: .75rem; --bs-badge-font-weight: 500;
  --bs-badge-border-radius: 999px;
  border: 1px solid transparent;
}
.badge.text-bg-success { background: var(--gruen-flaeche) !important; color: var(--gruen) !important; border-color: var(--gruen-linie); }
.badge.text-bg-warning { background: var(--amber-flaeche) !important; color: var(--amber) !important; border-color: var(--amber-linie); }
.badge.text-bg-danger  { background: var(--rot-flaeche) !important;   color: var(--rot) !important;   border-color: var(--rot-linie); }
.badge.border { background: var(--n-50); color: var(--n-600) !important; border-color: var(--n-200) !important; }

.progress { --bs-progress-bg: var(--n-200); --bs-progress-bar-bg: var(--tinte); border-radius: 999px; }

/* ==========================================================================
   App-Rahmen
   ========================================================================== */

.kopf {
  background: var(--n-0);
  border-bottom: 1px solid var(--n-200);
  position: sticky; top: 0; z-index: 1020;
}
.kopf-innen { display: flex; align-items: center; gap: 1rem; height: 3.25rem; }
.kopf .marke img { height: 1.0625rem; width: auto; display: block; }
.kopf-betrieb {
  font-size: .8125rem; color: var(--n-600);
  padding-left: 1rem; border-left: 1px solid var(--n-200);
}


.seite { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; padding: 1.75rem 0 4rem; align-items: start; }

/* Register: Pillen statt Reiter. Der Ordner steckt im Namen, nicht im Rahmen. */
.register { position: sticky; top: 4.75rem; }
.register .nav { gap: 1px; }
.register .nav-link {
  color: var(--n-600); font-size: .875rem; font-weight: 450;
  padding: .4rem .6rem; border-radius: var(--radius);
  display: flex; align-items: center; gap: .5rem;
  transition: background-color .12s ease, color .12s ease;
}
.register .nav-link:hover { background: var(--n-100); color: var(--n-900); }
.register .nav-link.active { background: var(--n-100); color: var(--n-900); font-weight: 550; }
.register .zahl {
  margin-left: auto; font-size: .75rem; font-weight: 550;
  min-width: 1.35rem; text-align: center; padding: .05rem .3rem;
  border-radius: 999px; background: var(--n-200); color: var(--n-600);
}
.register .zahl-rot { background: var(--rot-flaeche); color: var(--rot); }
.register-titel {
  font-size: .75rem; color: var(--n-400); font-weight: 500;
  padding: 0 .6rem .5rem;
}

@media (max-width: 991.98px) {
  .seite { grid-template-columns: 1fr; gap: 1rem; padding-top: 1rem; }
  .register { position: static; margin: 0 -1rem; padding: 0 1rem; }
  .register .nav { flex-direction: row !important; overflow-x: auto; gap: .25rem; padding-bottom: .5rem; }
  .register .nav-link { white-space: nowrap; }
  .register-titel { display: none; }
}

/* ==========================================================================
   Eigene Bauteile
   ========================================================================== */

/* --- Prüfplakette --------------------------------------------------------
   Der runde Aufkleber vom Feuerlöscher, schlanker gefasst: dünner Ring,
   Monat über Jahr. Das Statuswort steht daneben als Pille, nicht in der
   Plakette — dadurch bleibt sie klein und der Zustand trotzdem lesbar.
   ------------------------------------------------------------------------ */

.plakette {
  --pf: var(--gruen); --pfl: var(--gruen-flaeche); --pfr: var(--gruen-linie);
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1.5px solid var(--pfr); background: var(--pfl); color: var(--pf);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.05; text-align: center;
}
.plakette .monat { font-size: .8125rem; font-weight: 600; }
.plakette .jahr  { font-size: .625rem; font-weight: 500; opacity: .8; }
.plakette .zeichen { font-size: .9375rem; font-weight: 600; }
.plakette.gelb { --pf: var(--amber); --pfl: var(--amber-flaeche); --pfr: var(--amber-linie); }
.plakette.rot  { --pf: var(--rot);   --pfl: var(--rot-flaeche);   --pfr: var(--rot-linie); border-width: 2px; }
.plakette.gross { width: 3.5rem; height: 3.5rem; }
.plakette.gross .monat { font-size: 1rem; }
.plakette.gross .jahr { font-size: .6875rem; }

/* Statuszeile: Punkt + Wort. Der Punkt trägt die Farbe, das Wort die Bedeutung —
   damit bleibt es auch schwarzweiß und für Farbenblinde eindeutig. */
.status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 500; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status.gruen { color: var(--gruen); }
.status.gelb  { color: var(--amber); }
.status.rot   { color: var(--rot); }

/* --- Kennzahlen: nackte Zahlen, keine Kästen ----------------------------- */

.zahlenreihe { display: flex; flex-wrap: wrap; gap: 2.5rem; padding: .25rem 0 1.5rem; }
.zahlenfeld .wert { font-size: 1.875rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.zahlenfeld .was { font-size: .8125rem; color: var(--n-500); margin-top: .1rem; }
.zahlenfeld.rot .wert { color: var(--rot); }
.zahlenfeld.gelb .wert { color: var(--amber); }
.zahlenfeld.grau .wert { color: var(--n-400); }

/* --- Pflichthinweise aus Kapitel 4 --------------------------------------- */

.rechtshinweis {
  background: var(--blau-flaeche); border: 1px solid var(--blau-linie);
  border-radius: var(--radius-l); padding: .7rem .9rem;
  font-size: .8125rem; color: var(--blau);
}
.rechtshinweis p:last-child { margin-bottom: 0; }

/* --- Marke ----------------------------------------------------------------
   Die Quelldatei ist die dunkle Fassung. Im Dark Mode wird sie umgekehrt statt
   eine zweite Datei zu laden — das Zeichen ist reines Schwarz auf Transparenz,
   die Umkehrung ergibt exakt die weiße Fassung.
   ------------------------------------------------------------------------ */

.marke img { display: block; width: auto; }
.marke-gross img { height: 1.75rem; }
.marke-klein img { height: .9375rem; opacity: .7; }
[data-bs-theme="dark"] .marke img { filter: invert(1); }

/* --- Gastansicht: Handy, kein Konto, eine Handlung je Bildschirm ---------- */

.gast { background: var(--n-0); min-height: 100vh; }
.gast-rahmen { max-width: 32rem; margin: 0 auto; padding: 1.5rem 1.15rem 7rem; font-size: 1rem; }
.gast-kopf { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--n-200); }
.gast h1 { font-size: 1.375rem; }
.gast .form-control, .gast .form-select { font-size: 1rem; padding: .6rem .75rem; }
.gast-fuss {
  position: fixed; inset: auto 0 0 0; background: var(--n-0);
  border-top: 1px solid var(--n-200); padding: .75rem 1.15rem; z-index: 1030;
  box-shadow: var(--schatten-schwebend);
}
.gast-fuss-innen { max-width: 32rem; margin: 0 auto; display: flex; gap: .6rem; }
.gast-fuss .btn { flex: 1; }

.unterschriftfeld {
  border: 1px solid var(--n-300); border-radius: var(--radius);
  background: var(--n-0); touch-action: none;
  width: 100%; height: 170px; display: block;
}

/* --- Modultext ------------------------------------------------------------ */

.modultext { max-width: 38rem; font-size: .9375rem; line-height: 1.65; }
.modultext h2 { margin-top: 2rem; font-size: 1.0625rem; }
.modultext h2:first-child { margin-top: 0; }
.modultext .betriebsangabe {
  background: var(--gruen-flaeche); border: 1px solid var(--gruen-linie);
  border-radius: var(--radius); padding: .6rem .8rem; margin: .8rem 0;
  color: var(--gruen);
}
.modultext .betriebsangabe .feldname { font-size: .75rem; opacity: .8; margin-bottom: .1rem; }

/* --- Kleinigkeiten -------------------------------------------------------- */

.min-w-0 { min-width: 0; }   /* Bootstrap 5.3 bringt das nicht mit */
.trennlinie { border-top: 1px solid var(--n-200); }

/* ==========================================================================
   Druck — der Ausdruck landet im Ordner des BG-Prüfers
   ========================================================================== */

@media print {
  :root { --bs-body-bg: #fff; }
  body { background: #fff; font-size: 10.5pt; }
  .kopf, .register, .gast-fuss, .btn, .sprachwahl, .d-print-none { display: none !important; }
  .seite { display: block; padding: 0; }
  .card { border: 0 !important; page-break-inside: avoid; }
  .card-body { padding: 0 !important; }
  .plakette { border-color: #000 !important; color: #000 !important; background: #fff !important; }
  .status, .badge { color: #000 !important; background: #fff !important; border-color: #000 !important; }
  .alert, .rechtshinweis { background: #fff !important; border-color: #000 !important; color: #000 !important; }
  .zahlenfeld .wert { color: #000 !important; }
  a { text-decoration: none; color: #000; }
  .list-group-item { page-break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}