/* ISMS-Suite. Keine externen Ressourcen, keine Webfonts.
   Schriften kommen vom System des Anwenders. */

:root {
  --grund:      #e9ecee;
  --flaeche:    #ffffff;
  --tinte:      #1b2430;
  --tinte-hell: #5c6a78;
  --linie:      #ccd5da;
  --petrol:     #14495c;
  --petrol-hell:#e3edf1;

  --gering:     #3f7a5e;
  --mittel:     #b08312;
  --hoch:       #c0632a;
  --sehr-hoch:  #97202c;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --rand: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--petrol); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
}

/* --- Rahmen ------------------------------------------------------------- */

.rahmen { display: flex; min-height: 100vh; }

.navigation {
  width: 232px;
  flex: 0 0 232px;
  background: var(--tinte);
  color: #cfd8de;
  padding: 20px 0;
}

.marke {
  padding: 0 20px 18px;
  border-bottom: 1px solid #2c3846;
  margin-bottom: 14px;
}
.marke strong { display: block; color: #fff; font-size: 15px; letter-spacing: .02em; }
.marke span { font-size: 12px; color: #8b9aa8; }

.navigation a {
  display: block;
  padding: 8px 20px;
  color: #cfd8de;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.navigation a:hover { background: #232e3b; color: #fff; }
.navigation a.aktiv { border-left-color: #5fa8c4; background: #232e3b; color: #fff; }

.nav-gruppe {
  padding: 16px 20px 6px;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7b8b99;
}

.abmelden { margin-top: 24px; border-top: 1px solid #2c3846; padding-top: 12px; }
.abmelden .wer { padding: 0 20px 8px; font-size: 12px; color: #8b9aa8; }

.inhalt { flex: 1; padding: 26px 30px 60px; max-width: 1240px; }

.kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
h1 { font-size: 21px; margin: 0; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 10px; font-weight: 600; }
.beiwort { color: var(--tinte-hell); font-size: 13px; margin: 2px 0 0; }

/* --- Bausteine ---------------------------------------------------------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.raster { display: grid; gap: 16px; }
.raster.vier { grid-template-columns: repeat(4, 1fr); }
.raster.zwei { grid-template-columns: 1.6fr 1fr; }

.kennzahl { text-align: left; }
.kennzahl .wert { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kennzahl .titel { font-size: 12px; color: var(--tinte-hell); text-transform: uppercase; letter-spacing: .07em; margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinte-hell); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--linie);
}
td { padding: 8px 10px; border-bottom: 1px solid #eef1f3; vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.nr { font-family: var(--mono); font-size: 12.5px; color: var(--tinte-hell); white-space: nowrap; }

.stufe {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap;
}
.stufe.gering    { background: var(--gering); }
.stufe.mittel    { background: var(--mittel); }
.stufe.hoch      { background: var(--hoch); }
.stufe.sehr_hoch { background: var(--sehr-hoch); }
.stufe.leer      { background: #9aa7b2; }

.marke-kw {
  display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 2px;
  background: var(--petrol-hell); color: var(--petrol); border: 1px solid #bcd4de; white-space: nowrap;
}

.status { font-size: 12px; color: var(--tinte-hell); }

/* --- Formulare ---------------------------------------------------------- */

label { display: block; font-size: 12px; color: var(--tinte-hell); margin-bottom: 3px; letter-spacing: .02em; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 7px 9px; border: 1px solid var(--linie); border-radius: var(--rand);
  font: inherit; background: #fff; color: var(--tinte);
}
textarea { min-height: 80px; resize: vertical; }
.feld { margin-bottom: 12px; }
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kontrollkasten { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--tinte); margin-bottom: 6px; }
.kontrollkasten input { width: auto; }

.knopf {
  display: inline-block; padding: 8px 16px; border: 1px solid var(--petrol); border-radius: var(--rand);
  background: var(--petrol); color: #fff; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none;
}
.knopf:hover { background: #0f3a4a; }
.knopf.leise { background: #fff; color: var(--petrol); }
.knopf.leise:hover { background: var(--petrol-hell); }
.knopf.klein { padding: 4px 10px; font-size: 13px; }

.hinweis {
  background: var(--petrol-hell); border: 1px solid #bcd4de; border-left: 3px solid var(--petrol);
  padding: 9px 14px; border-radius: var(--rand); margin-bottom: 16px; font-size: 14px;
}
.warnung { background: #fdf1e8; border-color: #e8c3a8; border-left-color: var(--hoch); }
.leerhinweis { color: var(--tinte-hell); font-size: 14px; padding: 6px 0; }

/* --- Risikomatrix, das Kernstueck der Ansicht --------------------------- */

.matrix { display: grid; grid-template-columns: 130px repeat(5, 1fr); gap: 3px; margin-top: 8px; }
.matrix .achse {
  font-size: 11px; color: var(--tinte-hell); display: flex; align-items: center;
  justify-content: flex-end; padding-right: 8px; text-align: right; line-height: 1.25;
}
.matrix .kopfzelle { font-size: 11px; color: var(--tinte-hell); text-align: center; padding-bottom: 4px; }
.matrix .zelle {
  min-height: 76px; border: 1px solid var(--linie); border-radius: var(--rand);
  padding: 5px; display: flex; flex-direction: column; gap: 3px;
}
.matrix .zelle.gering    { background: #eef5f1; border-color: #cfe2d8; }
.matrix .zelle.mittel    { background: #fbf4e2; border-color: #ecdcb4; }
.matrix .zelle.hoch      { background: #fbeee5; border-color: #eccfb8; }
.matrix .zelle.sehr_hoch { background: #f9e6e8; border-color: #e8bfc4; }
.matrix .chip {
  font-family: var(--mono); font-size: 11.5px; background: #fff; border: 1px solid var(--linie);
  border-radius: 2px; padding: 1px 5px; text-decoration: none; color: var(--tinte); display: block;
}
.matrix .chip:hover { border-color: var(--petrol); }
.achsentitel { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinte-hell); margin-top: 8px; text-align: center; }

/* --- Brutto nach Netto -------------------------------------------------- */

.wirkung { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wirkung .block { text-align: center; min-width: 92px; }
.wirkung .zahl { font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wirkung .pfeil { font-size: 20px; color: var(--tinte-hell); }
.wirkung .titel { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinte-hell); }

.paar { display: flex; gap: 6px; font-size: 13px; padding: 3px 0; border-bottom: 1px solid #eef1f3; }
.paar dt { color: var(--tinte-hell); flex: 0 0 168px; }
.paar dd { margin: 0; flex: 1; }

.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 16px; }
.reiter a {
  padding: 7px 14px; text-decoration: none; color: var(--tinte-hell); font-size: 14px;
  border: 1px solid transparent; border-bottom: none; border-radius: var(--rand) var(--rand) 0 0;
}
.reiter a.aktiv { background: var(--flaeche); border-color: var(--linie); color: var(--tinte); font-weight: 600; margin-bottom: -1px; }

.filter { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.filter .feld { margin-bottom: 0; min-width: 150px; }

/* --- Anmeldung ---------------------------------------------------------- */

.anmeldung { max-width: 380px; margin: 12vh auto; }
.anmeldung .karte { padding: 26px; }
.anmeldung h1 { margin-bottom: 4px; }

/* --- Kleine Bildschirme ------------------------------------------------- */

@media (max-width: 900px) {
  .rahmen { flex-direction: column; }
  .navigation { width: 100%; flex: none; padding: 12px 0; }
  .navigation a { display: inline-block; border-left: none; border-bottom: 3px solid transparent; }
  .navigation a.aktiv { border-left: none; border-bottom-color: #5fa8c4; }
  .nav-gruppe { display: none; }
  .inhalt { padding: 18px 16px 50px; }
  .raster.vier, .raster.zwei { grid-template-columns: 1fr; }
  .matrix { grid-template-columns: 64px repeat(5, 1fr); }
  .matrix .achse { font-size: 10px; }
  table { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}