/* =====================================================================
   IST-Analyse — Oberfläche

   Gestaltungsgrundsätze:

   - Ein Blatt, nicht viele Karten. Hierarchie entsteht durch Typografie,
     Abstände und Haarlinien, nicht durch Rahmen, Schatten und Radien.
   - Radius 3 px, Schatten nur dort, wo etwas wirklich über dem Blatt
     liegt (Kopfleiste, Aufklappmenüs, Meldungen).
   - Signalfarben gehören der Risikobewertung. Interaktives ist blau,
     die Hauptaktion trägt das Lemongrün des Hauses.
   - Heller und dunkler Modus sind gleichwertig — nicht der dunkle als
     nachträglich umgefärbte Fassung des hellen.

   Inter liegt lokal unter assets/schrift. Kein fremder Server: die
   Anwendung hält Infrastrukturdaten von Kunden, da ist eine Schriftart
   vom Google-Server ein unnötiges Datenschutzthema.
   ===================================================================== */

@font-face {
  font-family: "Inter";
  src: url("schrift/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("schrift/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("schrift/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("schrift/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Hausfarben Data at Work */
  --marine:       #031E2F;   /* Dunkelblau der Website */
  --marine-tief:  #021624;
  --marine-hell:  #0A3348;
  --limette:      #C0D904;   /* Lemongrün */
  --limette-tief: #A8BE03;

  --tinte:        #08283C;
  --tinte-weich:  #5A7183;
  --tinte-zart:   #8CA0AF;

  --flaeche:      #FFFFFF;
  --grund:        #F1F6F9;
  --getoent:      #E8F2F8;
  --linie:        #DCE6EC;
  --linie-zart:   #E9F0F4;
  --linie-stark:  #C2D2DC;
  --misch:        #FFFFFF;

  /* Blau trägt alles Interaktive. Das Lemongrün bleibt der
     Hauptaktion vorbehalten — sonst läse es sich als Bewertung. */
  --aktion:       #0E6EA8;
  --aktion-tief:  #0A5482;
  --aktion-hell:  #E1EFF8;

  --kritisch:     #7B241C;
  --rot:          #C0392B;
  --gelb:         #C08416;
  --gruen:        #1F7A46;   /* satter als zuvor, damit es sich vom Lemon absetzt */

  /* Getönte Flächen — hier gebündelt, damit der dunkle Modus sie
     geschlossen austauschen kann */
  --ton-gruen:        #E4F1E9;
  --ton-gruen-rand:   #BFDDCB;
  --ton-gelb:         #FAF3E3;
  --ton-gelb-zart:    #FFFCF5;
  --ton-rot:          #FBEDEB;
  --ton-rot-zart:     #FDF7F6;
  --ton-rot-rand:     #EBC9C4;
  --ton-kritisch:     #F6E7E5;
  --ton-warn-rand:    #E9DCC2;
  --ton-aktion-rand:  #BEDCEE;

  --radius:       4px;
  --radius-klein: 3px;
  --kopfhoehe:    52px;
  --randbreite:   224px;
  --schatten:     0 1px 2px rgba(3, 30, 47, .06);
  --schatten-hoch:0 6px 20px rgba(3, 30, 47, .16);

  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  font-feature-settings: "cv05" 1, "ss03" 1, "tnum" 1;
  -webkit-font-smoothing: antialiased;
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--aktion); }

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

.ikon { flex: 0 0 auto; vertical-align: -.15em; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Kopfzeile
   ===================================================================== */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--kopfhoehe);
  padding: 0 1.25rem;
  background: var(--marine);
  border-bottom: 3px solid var(--limette);
  position: sticky;
  top: 0;
  z-index: 40;
}

.kopf__marke {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}

/* Firmenlogo, sofern hinterlegt — sonst greift das Ersatzzeichen */
.kopf__logo {
  height: 34px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
}

.kopf__zeichen {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--limette);
  color: var(--marine);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
  font-weight: 700;
}

.kopf__name {
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kopf__nav { display: flex; align-items: center; gap: .25rem; font-size: .88rem; }

.kopf__nav a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border-radius: var(--radius-klein);
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
}

.kopf__nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.kopf__user {
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
  padding-left: .7rem;
  margin-left: .3rem;
  border-left: 1px solid rgba(255, 255, 255, .2);
  white-space: nowrap;
}

/* =====================================================================
   Grundlayout
   ===================================================================== */

.inhalt {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 5rem;
}

.brotkrumen {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--tinte-zart);
  margin-bottom: 1.1rem;
}

.brotkrumen a { color: var(--tinte-weich); text-decoration: none; }
.brotkrumen a:hover { color: var(--aktion); }
.brotkrumen .trenner { opacity: .5; }

.seitenkopf {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.5rem;
}

.seitenkopf__ikon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--radius);
  background: var(--getoent);
  color: var(--aktion);
}

h1 { font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 .1rem; line-height: 1.3; }

h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  margin: 2.2rem 0 .85rem;
}

h2 .ikon { color: var(--tinte-zart); }

.unterzeile { color: var(--tinte-weich); margin: 0; font-size: .92rem; }

/* =====================================================================
   Meldungen
   ===================================================================== */

.meldung {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  max-width: 1120px;
  margin: 1rem auto 0;
  padding: .8rem 1rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gruen);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  font-size: .9rem;
}

.meldung--ok .ikon     { color: var(--gruen); }
.meldung--fehler       { border-left-color: var(--rot); }
.meldung--fehler .ikon { color: var(--rot); }
.meldung--warn         { border-left-color: var(--gelb); }
.meldung--warn .ikon   { color: var(--gelb); }

/* =====================================================================
   Karten und Listen
   ===================================================================== */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
}

.karte > h2:first-child { margin-top: 0; }

.listenhuelle {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

.liste { width: 100%; border-collapse: collapse; }

.liste th {
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-zart);
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}

.liste td {
  padding: .85rem .9rem;
  border-bottom: 1px solid var(--linie-zart);
  vertical-align: middle;
}

.liste tbody tr:last-child td { border-bottom: 0; }
.liste tbody tr:hover td { background: var(--getoent); }
.liste a { font-weight: 600; text-decoration: none; }
.liste a:hover { text-decoration: underline; }

.leerzustand {
  display: grid;
  justify-items: center;
  gap: .7rem;
  background: var(--flaeche);
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
  padding: 2.6rem 1.5rem;
  text-align: center;
  color: var(--tinte-weich);
}

.leerzustand .ikon { color: var(--tinte-zart); }
.leerzustand p { margin: 0; }

/* =====================================================================
   Schaltflächen
   ===================================================================== */

/* Die Hauptaktion trägt das Lemongrün — mit dunkelblauer Schrift,
   denn auf Weiß wäre der Ton nicht lesbar (Kontrast rund 1,6:1). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 1.05rem;
  min-height: 42px;
  border: 1px solid var(--limette);
  border-radius: var(--radius-klein);
  background: var(--limette);
  color: var(--marine);
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  background: var(--limette-tief);
  border-color: var(--limette-tief);
  color: var(--marine);
}

.btn .ikon { color: var(--marine); }

.btn--sekundaer {
  background: var(--flaeche);
  color: var(--tinte);
  border-color: var(--linie);
  font-weight: 500;
}

.btn--sekundaer .ikon { color: var(--tinte-weich); }
.btn--sekundaer:hover { background: var(--getoent); color: var(--aktion); border-color: var(--linie); }
.btn--sekundaer:hover .ikon { color: var(--aktion); }

.btn--still {
  background: transparent;
  color: var(--tinte-weich);
  border-color: var(--linie);
  font-weight: 500;
}

.btn--still:hover { background: var(--flaeche); color: var(--tinte); }

.btn--klein { padding: .4rem .8rem; min-height: 36px; font-size: .84rem; }

.btn--ikon { padding: 0; width: 38px; min-height: 38px; }

.btnzeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.btnzeile form { margin: 0; }

/* =====================================================================
   Formulare
   ===================================================================== */

label { display: block; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], textarea, select {
  width: 100%;
  padding: .6rem .8rem;
  min-height: 42px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  font: inherit;
  font-size: .92rem;
  color: var(--tinte);
}

textarea { resize: vertical; line-height: 1.55; }

input::placeholder, textarea::placeholder { color: var(--tinte-zart); }

input:hover, textarea:hover, select:hover { border-color: var(--linie-stark); }

input:focus, textarea:focus, select:focus {
  border-color: var(--aktion);
  box-shadow: 0 0 0 3px var(--aktion-hell);
}

.feld--kurz { max-width: 15rem; }

.feldgruppe { margin-bottom: 1.1rem; }

.feldgruppe > label {
  font-weight: 600;
  font-size: .84rem;
  color: var(--tinte-weich);
  margin-bottom: .35rem;
}

.raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.1rem; }

/* Suchfeld mit eingelegtem Symbol */
.suchfeld { position: relative; flex: 0 1 22rem; }

.suchfeld .ikon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tinte-zart);
  pointer-events: none;
}

.suchfeld input { padding-left: 2.35rem; max-width: none; }

/* =====================================================================
   Fortschritt
   ===================================================================== */

.balken {
  height: 6px;
  background: var(--linie-zart);
  border-radius: 99px;
  overflow: hidden;
}

.balken__fuellung { height: 100%; background: var(--aktion); border-radius: 99px; transition: width .3s ease; }
.balken__fuellung--fertig { background: var(--gruen); }

.zahl-gross { font-size: 1.95rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }

/* =====================================================================
   Kennzahlenband — eine Karte, innen durch Linien geteilt
   ===================================================================== */

.kennzahlen, .risikoleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  margin-bottom: 1rem;
}

.kennzahl, .risikozahl {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 1.1rem 1.25rem;
  border-right: 1px solid var(--linie-zart);
}

.kennzahl:last-child, .risikozahl:last-child { border-right: 0; }

.kennzahl span:last-child, .risikozahl span:last-child {
  font-size: .78rem;
  color: var(--tinte-weich);
}

.kennzahl__euro { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }

.risikozahl--kritisch .zahl-gross { color: var(--kritisch); }
.risikozahl--hoch     .zahl-gross { color: var(--rot); }
.risikozahl--mittel   .zahl-gross { color: var(--gelb); }
.risikozahl--niedrig  .zahl-gross { color: var(--gruen); }

/* Zusatzinhalt rechts im Band (Schaltflächen) */
.bandaktion {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.25rem;
  grid-column: 1 / -1;
  border-top: 1px solid var(--linie-zart);
}

/* =====================================================================
   Regal — die Themenbereiche als Bücher

   Jede Sektion ist eine Kachel mit farbigem Rücken. Der Zustand steckt
   im Rücken und im Ring, nicht in einer Textzeile: leer, angefangen,
   fertig. Beim Überfahren tritt das Buch leicht hervor, als zöge man
   es aus dem Regal.
   ===================================================================== */

.regal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .85rem;
}

.buch {
  display: flex;
  min-height: 10.5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.buch:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--linie);
}

/* --- Buchrücken ------------------------------------------------------ */

.buch__ruecken {
  flex: 0 0 2.1rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: .85rem;
  background: var(--grund);
  border-right: 1px solid var(--linie-zart);
  transition: flex-basis .16s ease, background .16s ease;
}

.buch:hover .buch__ruecken { flex-basis: 2.5rem; }

.buch__nr {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--tinte-zart);
}

.buch--begonnen .buch__ruecken { background: var(--aktion-hell); border-right-color: var(--ton-aktion-rand); }
.buch--begonnen .buch__nr      { color: var(--aktion); }
.buch--fertig   .buch__ruecken { background: var(--ton-gruen); border-right-color: var(--ton-gruen-rand); }
.buch--fertig   .buch__nr      { color: var(--gruen); }

/* --- Buchinhalt ------------------------------------------------------ */

.buch__inhalt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .95rem 1rem .85rem;
}

.buch__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .15rem;
}

.buch__ikon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-klein);
  background: var(--getoent);
  color: var(--aktion);
}

.buch--fertig .buch__ikon { background: var(--ton-gruen); color: var(--gruen); }
.buch--leer   .buch__ikon { background: var(--grund); color: var(--tinte-zart); }

.ring { color: var(--tinte-weich); flex: 0 0 auto; }

.buch__titel {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.buch__ziel {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--tinte-weich);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.buch__fuss {
  margin-top: auto;
  padding-top: .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  border-top: 1px solid var(--linie-zart);
}

.buch__zahl { font-size: .78rem; color: var(--tinte-zart); margin-right: auto; }

.punktmarke {
  display: inline-grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 .35rem;
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 600;
  color: #fff;
}

.punktmarke--offen  { background: var(--gelb); }
.punktmarke--risiko { background: var(--rot); }

/* =====================================================================
   Wegkacheln — was nach dem Erfassen kommt
   ===================================================================== */

.wegkacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .85rem;
}

.wegkachel {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 1.1rem 1.15rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}

.wegkachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }

.wegkachel__ikon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-klein);
  background: var(--grund);
  color: var(--tinte-zart);
  margin-bottom: .5rem;
}

.wegkachel--aktiv .wegkachel__ikon { background: var(--getoent); color: var(--aktion); }

.wegkachel__zahl {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--tinte-zart);
}

.wegkachel--aktiv .wegkachel__zahl { color: var(--tinte); }
.wegkachel__zahl .ikon { color: var(--aktion); }

.wegkachel__titel { font-weight: 600; font-size: .92rem; }
.wegkachel__text { font-size: .78rem; color: var(--tinte-weich); }

/* =====================================================================
   Ausklappbereich
   ===================================================================== */

.ausklapp {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  margin-top: 1.5rem;
}

.ausklapp summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

.ausklapp summary::-webkit-details-marker { display: none; }
.ausklapp summary .ikon { color: var(--tinte-zart); }
.ausklapp summary:hover { background: var(--getoent); }
.ausklapp[open] summary { border-bottom: 1px solid var(--linie-zart); }
.ausklapp[open] .finding__pfeil { transform: rotate(90deg); }
.ausklapp__titel { font-weight: 600; font-size: .94rem; margin-right: auto; }

/* Kopfzeile mit Aktion rechts */
.seitenkopf__aktion {
  margin-left: auto;
  display: flex;
  gap: .5rem;
  align-items: center;
}

.seitenkopf__aktion select { width: auto; min-width: 11rem; }

/* Kennzahl mit Ring statt Zahl */
.kennzahl--ring { flex-direction: row; align-items: center; gap: .8rem; }
.kennzahl--ring .ring { color: var(--tinte); }

/* =====================================================================
   Erfassungsmaske
   ===================================================================== */

.erfassung__kopf {
  position: sticky;
  top: var(--kopfhoehe);
  z-index: 30;
  background: var(--grund);
  padding: .75rem 0;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 1.2rem;
}

.erfassung__zeile { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

.erfassung__titel {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .9rem;
  min-width: 0;
}

.erfassung__titel .ikon { color: var(--aktion); }
.erfassung__titel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erfassung__balken { flex: 1 1 8rem; min-width: 5rem; }

/* Prozentangabe in der Sticky-Leiste */
.sektion__stand { font-size: .8rem; font-weight: 600; color: var(--tinte-weich); white-space: nowrap; }

.frage {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1.15rem 1.3rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  margin-bottom: .6rem;
}

.frage:focus-within { border-color: var(--linie-stark); box-shadow: var(--schatten-hoch); }
.frage--fertig { border-left-color: var(--gruen); }
.frage--offen  { border-left-color: var(--gelb); }
.frage--nz     { opacity: .5; }

/* Ohne min-width:0 sprengt eine breite Inventartabelle die Karte:
   Grid-Items haben von Haus aus min-width:auto. */
.frage__body { min-width: 0; }

.frage__rail { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; min-width: 0; }

.frage__key {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--tinte-zart);
  word-break: break-all;
  line-height: 1.3;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  padding: .3rem .55rem;
  border: 1px solid var(--linie);
  border-radius: 99px;
  background: var(--flaeche);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.chip input { margin: 0; width: 12px; height: 12px; accent-color: var(--tinte); }
.chip:hover { border-color: var(--tinte-zart); }
.chip:has(input:checked) { border-color: var(--tinte); background: var(--tinte); color: #fff; }
.chip--offen:has(input:checked) { border-color: var(--gelb); background: var(--gelb); color: #fff; }
.chip:has(input:checked) input { accent-color: #fff; }

.frage__label { font-weight: 600; font-size: .96rem; margin-bottom: .4rem; line-height: 1.4; }

.pflicht {
  display: inline-block;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rot);
  background: var(--ton-rot);
  border-radius: 4px;
  padding: .1rem .35rem;
  vertical-align: 2px;
  font-weight: 600;
}

.frage__hinweis {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: 0 0 .65rem;
  font-size: .83rem;
  color: var(--tinte-weich);
}

.frage__hinweis .ikon { color: var(--tinte-zart); margin-top: .12rem; }

.notiz {
  margin-top: .7rem;
  min-height: 38px !important;
  padding: .45rem .7rem !important;
  font-size: .85rem !important;
  background: var(--grund) !important;
  border-color: transparent !important;
  opacity: .7;
  transition: opacity .15s;
}

.notiz:hover, .notiz:focus, .notiz:not(:placeholder-shown) { opacity: 1; }
.notiz:focus { background: var(--flaeche) !important; border-color: var(--aktion) !important; }

.hinweisblock {
  display: flex;
  gap: .65rem;
  padding: .95rem 1.1rem;
  background: var(--aktion-hell);
  border-radius: var(--radius);
  margin-bottom: .6rem;
  font-size: .88rem;
}

.hinweisblock .ikon { color: var(--aktion); flex-shrink: 0; margin-top: .15rem; }

/* --- Auswahl --------------------------------------------------------- */

.optionen { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }

.option {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  cursor: pointer;
  font-size: .88rem;
  min-height: 40px;
  user-select: none;
}

.option:hover { border-color: var(--tinte-zart); }

/* Eigenes Auswahlfeld statt Systemsteuerelement — gleiche Größe auf
   allen Plattformen, aber weiterhin ein echtes input für Tastatur
   und Screenreader. */
.option input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--linie-stark);
  background: #fff;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
}

.option input[type=radio] { border-radius: 50%; }
.option input[type=checkbox] { border-radius: 5px; }

.option input::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: inherit;
  transform: scale(0);
  transition: transform .12s ease;
  background: #fff;
}

.option input:checked { border-color: var(--aktion); background: var(--aktion); }
.option input:checked::before { transform: scale(1); }

.option:has(input:checked) { border-color: var(--aktion); background: var(--aktion-hell); font-weight: 600; }

.leeren {
  border: 0;
  background: none;
  color: var(--tinte-zart);
  font: inherit;
  font-size: .78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: .3rem .2rem;
  visibility: hidden;
}

.optionen:has(input:checked) .leeren { visibility: visible; }

/* --- Tabellen -------------------------------------------------------- */

.tabelle { max-width: 100%; }

.tabelle__scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  overscroll-behavior-x: contain;
}

.tabelle table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }

.tabelle th {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinte-zart);
  text-align: left;
  padding: .55rem .65rem;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}

.tabelle td { padding: 0; border-bottom: 1px solid var(--linie-zart); background: var(--flaeche); }
.tabelle tbody tr:last-child td { border-bottom: 0; }

.tabelle td input {
  border: 0;
  border-radius: 0;
  padding: .5rem .65rem;
  min-height: 38px;
  width: 11rem;
  background: transparent;
  box-shadow: none;
}

.tabelle td input:focus { background: var(--aktion-hell); box-shadow: none; outline-offset: -2px; }

/* Erste Spalte bleibt beim seitlichen Scrollen stehen — bei neun
   Spalten weiß man sonst nicht mehr, zu welchem Gerät die Zelle gehört. */
.tabelle th:first-child, .tabelle td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid var(--linie);
}

.tabelle td:first-child input { width: 9rem; font-weight: 600; }

.tabelle .sp-aktion {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 2.6rem;
  text-align: center;
  background: var(--flaeche);
  border-left: 1px solid var(--linie);
}

.tabelle th.sp-aktion { background: var(--grund); }

.zeile-minus {
  border: 0;
  background: none;
  color: var(--tinte-zart);
  cursor: pointer;
  padding: .45rem;
  display: inline-flex;
  border-radius: var(--radius-klein);
}

.zeile-minus:hover { color: var(--rot); background: var(--ton-rot); }

.tabelle__fuss { display: flex; align-items: center; gap: .85rem; margin-top: .6rem; flex-wrap: wrap; }

.tabelle__scrollhinweis {
  display: none;
  align-items: center;
  gap: .3rem;
  font-size: .76rem;
  color: var(--tinte-zart);
}

.tabelle--breit .tabelle__scrollhinweis { display: inline-flex; }

.foto-platzhalter {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  border: 1px dashed var(--linie);
  border-radius: var(--radius-klein);
  font-size: .85rem;
  color: var(--tinte-weich);
}

/* =====================================================================
   Speicherstand
   ===================================================================== */

.speicherstand {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 500;
  padding: .6rem 1rem;
  border-radius: 99px;
  background: var(--tinte);
  color: #fff;
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .22s, transform .22s;
  pointer-events: none;
  box-shadow: var(--schatten-hoch);
}

.speicherstand.sichtbar { opacity: 1; transform: translateY(0); }
.speicherstand.fehler { background: var(--rot); }

/* =====================================================================
   Feststellungen
   ===================================================================== */

.risikomarke {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .25rem .5rem;
  border-radius: 99px;
  color: #fff;
  white-space: nowrap;
}

.risikomarke--kritisch { background: var(--kritisch); }
.risikomarke--hoch     { background: var(--rot); }
.risikomarke--mittel   { background: var(--gelb); }
.risikomarke--niedrig  { background: var(--gruen); }

.finding {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  margin-bottom: .55rem;
}

.finding--kritisch { border-left-color: var(--kritisch); }
.finding--hoch     { border-left-color: var(--rot); }
.finding--mittel   { border-left-color: var(--gelb); }
.finding--niedrig  { border-left-color: var(--gruen); }
.finding--weg      { opacity: .5; }

.finding summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  padding: .9rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

.finding summary::-webkit-details-marker { display: none; }
.finding summary:hover { background: var(--getoent); }
.finding[open] summary { border-bottom: 1px solid var(--linie-zart); }

.finding__pfeil { color: var(--tinte-zart); transition: transform .18s; display: flex; }
.finding[open] .finding__pfeil { transform: rotate(90deg); }

.finding__titel { font-weight: 600; font-size: .95rem; flex: 1 1 18rem; min-width: 0; }
.finding__meta { font-size: .78rem; color: var(--tinte-weich); }

.finding__form { padding: 1.2rem 1.1rem; }

.prio {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 99px;
  white-space: nowrap;
}

.prio--sofort        { background: var(--ton-kritisch); color: var(--kritisch); }
.prio--kurzfristig   { background: var(--ton-rot); color: var(--rot); }
.prio--mittelfristig { background: var(--ton-gelb); color: var(--gelb); }
.prio--langfristig   { background: var(--grund); color: var(--tinte-weich); }

/* =====================================================================
   Bewertung
   ===================================================================== */

.reifegrad {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1rem 1.2rem;
}

.reifezeile {
  display: grid;
  grid-template-columns: 1.6rem 1.3rem minmax(6rem, 13rem) minmax(0, 1fr) 2.4rem;
  align-items: center;
  gap: .7rem;
  padding: .3rem 0;
}

.reifezeile__nr { font-size: .76rem; color: var(--tinte-zart); text-align: right; }
.reifezeile__ikon { color: var(--tinte-zart); display: flex; }

.reifezeile__titel {
  font-size: .86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reifezeile__spur { height: 8px; background: var(--linie-zart); border-radius: 99px; overflow: hidden; }
.reifezeile__wert { display: block; height: 8px; border-radius: 99px; }

.reifezeile__wert--gruen { background: var(--gruen); }
.reifezeile__wert--gelb  { background: var(--gelb); }
.reifezeile__wert--rot   { background: var(--rot); }
.reifezeile__wert--na    { background: var(--linie); }

.reifezeile__zahl { font-size: .78rem; color: var(--tinte-weich); text-align: right; }

.bewertzeile {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1rem 1.15rem;
  margin-bottom: .55rem;
}

.bewertzeile__kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.bewertzeile__titel { font-weight: 600; font-size: .94rem; }
.bewertzeile__stand { font-size: .78rem; color: var(--tinte-weich); margin-left: auto; }

/* Die Ampelauswahl ist die einzige Stelle, an der die Signalfarben
   als Bedienelement erscheinen — hier bedeuten sie genau das, wofür
   sie reserviert sind. */
.option--gruen:has(input:checked) { border-color: var(--gruen); background: var(--ton-gruen); }
.option--gruen input:checked      { border-color: var(--gruen); background: var(--gruen); }
.option--gelb:has(input:checked)  { border-color: var(--gelb); background: var(--ton-gelb); }
.option--gelb input:checked       { border-color: var(--gelb); background: var(--gelb); }
.option--rot:has(input:checked)   { border-color: var(--rot); background: var(--ton-rot); }
.option--rot input:checked        { border-color: var(--rot); background: var(--rot); }

.vorschlag { font-size: .8rem; color: var(--tinte-weich); padding-left: .3rem; }

.reihenfolge { display: inline-flex; gap: .1rem; }
.reihenfolge .zeile-minus { transform: rotate(-90deg); }
.reihenfolge .zeile-minus:hover { color: var(--aktion); background: var(--aktion-hell); }

/* =====================================================================
   Anmeldung und Fußzeile
   ===================================================================== */

.anmeldung { max-width: 24rem; margin: 4rem auto; }
.anmeldung h1 { text-align: center; }
.anmeldung .unterzeile { text-align: center; margin-bottom: 1.5rem; }

.fuss {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--tinte-zart);
  border-top: 1px solid var(--linie);
}

.fuss__hinweis { display: inline-flex; align-items: center; gap: .35rem; }

/* =====================================================================
   Schmale Bildschirme
   ===================================================================== */

@media (max-width: 760px) {
  .frage { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .frage__rail { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .45rem; }
  .raster2 { grid-template-columns: minmax(0, 1fr); }
  .regal { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  .seitenkopf { flex-wrap: wrap; }
  .seitenkopf__aktion { margin-left: 0; width: 100%; }
  .kopf__name, .kopf__user { display: none; }
  .kopf__nav a span { display: none; }
  .bewertzeile__stand { margin-left: 0; width: 100%; }
  .reifezeile { grid-template-columns: 1.5rem 1.2rem minmax(0, 1fr) 2.2rem; }
  .reifezeile__spur { grid-column: 1 / -1; }
  h1 { font-size: 1.3rem; }
}

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

/* =====================================================================
   Fotos
   ===================================================================== */

.fotos { display: grid; gap: .7rem; }

.fotoliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .7rem;
}

.fotoliste:empty { display: none; }

.foto {
  margin: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  overflow: hidden;
  background: var(--flaeche);
}

.foto__bild { display: block; background: var(--grund); }

.foto__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.foto__fuss {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .45rem;
  border-top: 1px solid var(--linie-zart);
  flex-wrap: wrap;
}

.foto__text {
  flex: 1 1 6rem;
  min-height: 32px !important;
  padding: .3rem .45rem !important;
  font-size: .8rem !important;
  border-color: transparent !important;
  background: var(--grund) !important;
}

.foto__text:focus { background: var(--flaeche) !important; border-color: var(--aktion) !important; }

.foto__fuss .chip { font-size: .68rem; padding: .22rem .45rem; }
.foto__weg { padding: .3rem; }

.fotozone {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .8rem .9rem;
  border: 1px dashed var(--linie);
  border-radius: var(--radius-klein);
  background: var(--grund);
}

.fotos--ziel .fotozone { border-color: var(--aktion); background: var(--aktion-hell); }
.fotos--laedt .fotozone { opacity: .55; pointer-events: none; }

.fotoknopf {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  min-height: 38px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.fotoknopf:hover { border-color: var(--aktion); color: var(--aktion); }
.fotoknopf .ikon { color: var(--tinte-weich); }
.fotoknopf:hover .ikon { color: var(--aktion); }

/* Die Kameraschaltfläche ergibt nur mit Kamera Sinn */
.fotoknopf--kamera { display: none; }

@media (pointer: coarse) {
  .fotoknopf--kamera { display: inline-flex; }
}

.fotohinweis { font-size: .76rem; color: var(--tinte-zart); }

/* =====================================================================
   Verwaltungs- und Löschbereiche

   Bewusst hinter einem Ausklapper und optisch abgesetzt: löschen soll
   möglich sein, aber nicht versehentlich passieren.
   ===================================================================== */

.ausklapp--warnung { margin-top: 2.5rem; border-color: var(--ton-warn-rand); }
.ausklapp--warnung summary .ikon { color: var(--gelb); }

.ausklapp__nebentext { font-size: .78rem; color: var(--tinte-zart); }
.ausklapp__inhalt { padding: 1.2rem 1.2rem 1.4rem; }

.gefahr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 1rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  margin-bottom: .8rem;
}

.gefahr > div { flex: 1 1 20rem; min-width: 0; }
.gefahr strong { display: block; font-size: .94rem; margin-bottom: .2rem; }
.gefahr .unterzeile { font-size: .84rem; margin-bottom: .5rem; }
.gefahr .unterzeile:last-child { margin-bottom: 0; }
.gefahr form { flex: 0 0 auto; }

.gefahr--rot { border-color: var(--ton-rot-rand); background: var(--ton-rot-zart); }

.gefahr__form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.gefahr__form input { width: 14rem; }

.btn--gefahr { background: var(--rot); border-color: var(--rot); color: #fff; }
.btn--gefahr:hover { background: var(--kritisch); border-color: var(--kritisch); color: #fff; }
.btn--gefahr .ikon { color: #fff; }

/* =====================================================================
   Kundenkacheln

   Ersetzt die sechsspaltige Tabelle. Auf dem Telefon war davon nie
   alles sichtbar; als Kachel trägt sich der Inhalt in jeder Breite.
   ===================================================================== */

.kundenraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .85rem;
}

.kundenkachel {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.1rem 1.15rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}

.kundenkachel:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }

.kundenkachel__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .6rem;
}

.kundenlogo {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: var(--radius-klein);
  background: var(--grund);
  border: 1px solid var(--linie-zart);
  overflow: hidden;
}

.kundenlogo img { width: 100%; height: 100%; object-fit: contain; padding: .25rem; }

.kundenlogo--text {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--aktion);
  background: var(--getoent);
}

.kundenlogo--gross { width: 3.6rem; height: 3.6rem; font-size: 1.2rem; }

.kundenkachel__name {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin-bottom: .2rem;
}

.kundenkachel__zeile {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--tinte-weich);
  min-height: 1.2rem;
}

.kundenkachel__zeile:empty { display: none; }
.kundenkachel__zeile .ikon { color: var(--tinte-zart); }

.kundenkachel__fuss {
  margin-top: auto;
  padding-top: .7rem;
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--linie-zart);
  font-size: .78rem;
  color: var(--tinte-zart);
}

.kundenkachel__fuss span { display: inline-flex; align-items: center; gap: .3rem; }

.statusmarke {
  font-size: .68rem;
  font-weight: 600;
  padding: .22rem .5rem;
  border-radius: 99px;
  white-space: nowrap;
  background: var(--grund);
  color: var(--tinte-weich);
}

.statusmarke--analyse { background: var(--getoent); color: var(--aktion); }
.statusmarke--kunde   { background: var(--ton-gruen); color: var(--gruen); }

/* =====================================================================
   Vor-Ort-Hinweise
   ===================================================================== */

.hinweisliste { display: grid; gap: .5rem; }

.hinweiskarte {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
}

.hinweiskarte--wichtig { border-left-color: var(--gelb); background: var(--ton-gelb-zart); }

.hinweiskarte__ikon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: var(--radius-klein);
  background: var(--grund);
  color: var(--tinte-weich);
}

.hinweiskarte--wichtig .hinweiskarte__ikon { background: var(--ton-gelb); color: var(--gelb); }

.hinweiskarte__inhalt { flex: 1; min-width: 0; }

.hinweiskarte__art {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinte-zart);
  margin-bottom: .1rem;
}

.hinweiskarte__inhalt p { margin: 0; font-size: .92rem; line-height: 1.5; }
.hinweiskarte form { margin: 0; }

.ausklapp--hinweis { margin: 0 0 1.25rem; border-color: var(--ton-warn-rand); }
.ausklapp--hinweis summary .ikon { color: var(--gelb); }

/* =====================================================================
   Grundrisse und Dokumente
   ===================================================================== */

.planliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

.plan {
  margin: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  overflow: hidden;
  background: var(--flaeche);
}

.plan__vorschau { display: block; background: var(--grund); }

.plan__vorschau img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.plan__pdf {
  display: grid;
  place-items: center;
  gap: .2rem;
  aspect-ratio: 4 / 3;
  color: var(--tinte-zart);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.plan__fuss {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .55rem;
  border-top: 1px solid var(--linie-zart);
}

.plan__titel {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan__fuss form { margin: 0; }

input[type=file] {
  padding: .45rem .6rem;
  font-size: .85rem;
  background: var(--grund);
}

input[type=file]::file-selector-button {
  margin-right: .7rem;
  padding: .35rem .7rem;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: var(--flaeche);
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  color: var(--tinte);
  cursor: pointer;
}

/* =====================================================================
   Tabellen auf schmalen Bildschirmen

   Statt seitlich zu scrollen wird jede Zeile zu einem Block, die
   Spaltenüberschrift steht als Beschriftung davor.
   ===================================================================== */

@media (max-width: 620px) {
  .liste thead { display: none; }
  .liste, .liste tbody, .liste tr, .liste td { display: block; width: 100%; }

  .liste tr {
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--linie-zart);
  }

  .liste tr:last-child { border-bottom: 0; }

  .liste td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    padding: .2rem 0;
    border: 0;
    text-align: right;
  }

  .liste td::before {
    content: attr(data-spalte);
    flex: 0 0 auto;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinte-zart);
    text-align: left;
  }

  .liste td:first-child { font-size: 1rem; padding-bottom: .35rem; }
  .liste tbody tr:hover td { background: transparent; }
  .liste td:empty { display: none; }
}

/* =====================================================================
   Geräteerfassung

   Eine Karte je Gerät statt neun Spalten nebeneinander. Auf dem Tablet
   war die Tabellenform die unangenehmste Stelle der ganzen Aufnahme.
   ===================================================================== */

.typfilter {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.typknopf {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  min-height: 36px;
  border: 1px solid var(--linie);
  border-radius: 99px;
  background: var(--flaeche);
  font-size: .85rem;
  text-decoration: none;
  color: var(--tinte);
  white-space: nowrap;
}

.typknopf .ikon { color: var(--tinte-zart); }
.typknopf:hover { border-color: var(--aktion); color: var(--aktion); }
.typknopf:hover .ikon { color: var(--aktion); }

.typknopf--aktiv {
  background: var(--aktion);
  border-color: var(--aktion);
  color: #fff;
  font-weight: 600;
}

.typknopf--aktiv .ikon { color: #fff; }

/* Der aktive Knopf braucht einen eigenen Hover-Zustand: die allgemeine
   Regel setzt die Schriftfarbe auf Türkis — auf türkisem Grund wäre der
   Text damit unsichtbar. */
.typknopf--aktiv:hover {
  background: var(--aktion-tief);
  border-color: var(--aktion-tief);
  color: #fff;
}

.typknopf--aktiv:hover .ikon { color: #fff; }

.typknopf__zahl {
  font-size: .74rem;
  padding: 0 .35rem;
  border-radius: 99px;
  background: var(--grund);
  color: var(--tinte-weich);
  min-width: 1.3rem;
  text-align: center;
}

.typknopf--aktiv .typknopf__zahl { background: rgba(255,255,255,.22); color: #fff; }

.geraeteraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

.geraet {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem .8rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.geraet--warnung { border-left-color: var(--rot); }

.geraet__kopf { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .7rem; }

.geraet__ikon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  border-radius: var(--radius-klein);
  background: var(--getoent);
  color: var(--aktion);
}

.geraet--warnung .geraet__ikon { background: var(--ton-rot); color: var(--rot); }

.geraet__typ {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinte-zart);
}

.geraet__name { display: block; font-weight: 600; font-size: .98rem; line-height: 1.3; }

.geraet__anzahl {
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 99px;
  background: var(--getoent);
  color: var(--aktion);
}

.geraet__daten { margin: 0; display: grid; gap: .2rem; }

.geraet__daten > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .6rem;
  font-size: .84rem;
}

.geraet__daten dt { color: var(--tinte-zart); }
.geraet__daten dd { margin: 0; overflow-wrap: anywhere; }

.mono { font-family: var(--mono); font-size: .82rem; }

.warnzeichen {
  font-size: .72rem;
  font-weight: 600;
  padding: .05rem .35rem;
  border-radius: 99px;
  background: var(--ton-gelb);
  color: var(--gelb);
}

.geraet__eol {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: .6rem 0 0;
  font-size: .8rem;
  color: var(--tinte-weich);
}

.geraet__eol--bald { color: var(--gelb); font-weight: 600; }
.geraet__eol--aus  { color: var(--rot); font-weight: 600; }

.geraet__notiz {
  margin: .55rem 0 0;
  padding-top: .55rem;
  border-top: 1px solid var(--linie-zart);
  font-size: .84rem;
  color: var(--tinte-weich);
}

.geraet__fuss {
  margin-top: auto;
  padding-top: .75rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}

.geraet__fuss form { margin: 0; }
.geraet__fuss .zeile-minus { margin-left: auto; }

.herkunft {
  font-size: .7rem;
  padding: .18rem .45rem;
  border-radius: 99px;
  background: var(--grund);
  color: var(--tinte-zart);
}

/* Verweis auf die Geräteerfassung im Fragenkatalog */
.geraetefeld {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--grund);
}

.geraetefeld__ikon {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 auto;
  border-radius: var(--radius-klein);
  background: var(--getoent);
  color: var(--aktion);
}

.geraetefeld__text { flex: 1; min-width: 8rem; }
.geraetefeld__text strong { display: block; font-size: .94rem; }
.geraetefeld__text span { font-size: .8rem; color: var(--tinte-weich); }

/* Seriennummernfeld mit Scanner */
.scanfeld { display: flex; gap: .4rem; align-items: center; }
.scanfeld input { flex: 1; min-width: 0; }

.scanner {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(22, 33, 44, .9);
}

.scanner video {
  width: min(92vw, 30rem);
  border-radius: var(--radius);
  background: #000;
}

.scanner__text { color: #fff; font-size: .9rem; text-align: center; }

/* =====================================================================
   Schrankbelegung

   Frontansicht als CSS-Gitter: eine Zeile je Höheneinheit, HE 1 unten
   wie am echten Schrank. Geräte liegen als Gitterelemente über den
   freien Plätzen und überspannen mehrere Zeilen.
   ===================================================================== */

.rackbereich {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.rackspalte { min-width: 0; }

.rackkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  padding: 0 .2rem .6rem;
}

.rackkopf strong { font-size: .98rem; }
.rackkopf span { font-size: .8rem; color: var(--tinte-weich); }

.rack {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  grid-template-rows: repeat(var(--he), 1.55rem);
  gap: 0 .5rem;
  padding: .8rem .9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.rack__nr {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--tinte-zart);
  padding-right: .2rem;
}

/* Freie Höheneinheit — als Schaltfläche, damit sie tastaturbedienbar ist */
.rack__frei, .rack__leer {
  grid-column: 2;
  border: 0;
  border-bottom: 1px dashed var(--linie-zart);
  background: repeating-linear-gradient(
      90deg, var(--grund) 0 3px, transparent 3px 9px);
  padding: 0;
}

.rack__frei { cursor: default; }

body.rack-waehlt .rack__frei { cursor: pointer; }
body.rack-waehlt .rack__frei:hover { background: var(--aktion-hell); }
.rack__frei--vorschau { background: var(--aktion-hell) !important; }

.rack__leer { background: none; border-bottom-color: transparent; }

/* Eingebautes Gerät */
.rack__geraet {
  grid-column: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .05rem;
  padding: .15rem 1.9rem .15rem .55rem;
  border-radius: 4px;
  border-left: 4px solid var(--farbe);
  background: color-mix(in srgb, var(--farbe) 12%, var(--misch));
  overflow: hidden;
  z-index: 2;
}

.rack__geraetname {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rack__geraetname .ikon { color: var(--farbe); flex: 0 0 auto; }

.rack__geraetmeta {
  font-size: .68rem;
  color: var(--tinte-weich);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bei 1 HE ist für die zweite Zeile kein Platz */
.rack__geraet--flach .rack__geraetmeta { display: none; }

.rack__weg {
  position: absolute;
  top: 50%;
  right: .3rem;
  transform: translateY(-50%);
  border: 0;
  background: none;
  color: var(--tinte-zart);
  cursor: pointer;
  padding: .25rem;
  border-radius: 4px;
  display: inline-flex;
}

.rack__weg:hover { color: var(--rot); background: var(--ton-rot); }

.rackhinweis {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .7rem .2rem 0;
  font-size: .82rem;
  color: var(--tinte-weich);
}

.rackhinweis .ikon { color: var(--tinte-zart); flex: 0 0 auto; }
.rackhinweis--warnung { color: var(--rot); font-weight: 600; }
.rackhinweis--warnung .ikon { color: var(--rot); }

.versteckt { display: none; }

/* Geräte, die noch nicht eingebaut sind */
.teileliste { display: grid; gap: .4rem; }

.teil {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--farbe);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.teil:hover { border-color: var(--aktion); border-left-color: var(--farbe); }

.teil--gewaehlt {
  background: var(--aktion-hell);
  border-color: var(--aktion);
  box-shadow: 0 0 0 2px var(--aktion-hell);
}

.teil__ikon {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--grund);
  color: var(--farbe);
}

.teil__text { flex: 1; min-width: 0; }

.teil__name {
  display: block;
  font-weight: 600;
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teil__meta {
  display: block;
  font-size: .76rem;
  color: var(--tinte-weich);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teil__he {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .45rem;
  border-radius: 99px;
  background: var(--grund);
  color: var(--tinte-weich);
}

@media (max-width: 900px) {
  .rackbereich { grid-template-columns: minmax(0, 1fr); }
}


/* =====================================================================
   Dunkler Modus

   Wird über die Klasse .dunkel am <html>-Element gesetzt — serverseitig
   aus einem Cookie, damit beim Laden nichts weiß aufblitzt.

   Die Flächen sind bewusst nicht schwarz, sondern ein sehr dunkles
   Blaugrau: reines Schwarz mit hellem Text erzeugt bei längerem Lesen
   Nachbilder. Die Signalfarben werden aufgehellt, weil gesättigtes Rot
   auf dunklem Grund schlecht lesbar ist.
   ===================================================================== */

:root.dunkel {
  color-scheme: dark;

  --tinte:        #E4EDF3;
  --tinte-weich:  #94AAB9;
  --tinte-zart:   #64808F;

  --flaeche:      #072B41;
  --grund:        #031E2F;
  --getoent:      #0E3B55;
  --linie:        #12405C;
  --linie-zart:   #0D3449;
  --linie-stark:  #1D5677;
  --misch:        #072B41;

  --aktion:       #48A8DD;
  --aktion-tief:  #6BBDE9;
  --aktion-hell:  #0C3A55;

  --kritisch:     #E0685A;
  --rot:          #E07668;
  --gelb:         #D9A441;
  --gruen:        #4FAE78;

  --ton-gruen:        #10352370;
  --ton-gruen-rand:   #1F4A34;
  --ton-gelb:         #33291380;
  --ton-gelb-zart:    #2A2317;
  --ton-rot:          #331F1C;
  --ton-rot-zart:     #241A19;
  --ton-rot-rand:     #4A2F2A;
  --ton-kritisch:     #3A231F;
  --ton-warn-rand:    #4A3C24;
  --ton-aktion-rand:  #1B5476;

  --schatten:      0 1px 2px rgba(0, 0, 0, .35);
  --schatten-hoch: 0 4px 16px rgba(0, 0, 0, .5);
}

/* Getönte Symbolflächen brauchen im Dunkeln etwas mehr Substanz */
:root.dunkel .seitenkopf__ikon,
:root.dunkel .geraet__ikon,
:root.dunkel .geraetefeld__ikon,
:root.dunkel .buch__ikon,
:root.dunkel .kundenlogo--text {
  background: var(--getoent);
}

/* Im Dunkeln liegt der Grund bereits auf dem Hausblau — die Kopfleiste
   setzt sich über die Lemon-Kante ab, nicht über die Fläche. */
:root.dunkel .kopf { background: var(--marine-tief); }

/* Eingabefelder sollen sichtbar tiefer liegen als ihre Karte */
:root.dunkel input[type=text], :root.dunkel input[type=email],
:root.dunkel input[type=password], :root.dunkel input[type=number],
:root.dunkel input[type=date], :root.dunkel input[type=search],
:root.dunkel textarea, :root.dunkel select {
  background: var(--grund);
}

:root.dunkel .btn { color: var(--marine); }
:root.dunkel .btn .ikon { color: var(--marine); }
:root.dunkel .btn--sekundaer, :root.dunkel .btn--still { color: var(--tinte); }
:root.dunkel .btn--sekundaer:hover, :root.dunkel .btn--still:hover { color: var(--aktion); }
:root.dunkel .btn--gefahr { color: #fff; }
:root.dunkel .typknopf--aktiv,
:root.dunkel .typknopf--aktiv:hover { color: var(--marine); }
:root.dunkel .typknopf--aktiv .ikon,
:root.dunkel .typknopf--aktiv:hover .ikon { color: var(--marine); }
:root.dunkel .risikomarke, :root.dunkel .marke { color: #08202E; }
:root.dunkel .speicherstand { background: var(--limette); color: var(--marine); }
:root.dunkel .speicherstand.fehler { background: var(--rot); color: #fff; }
:root.dunkel .option input:checked::before { background: var(--marine); }

/* Logos und Fotos liegen oft auf weißem Grund — heller Sockel behalten */
:root.dunkel .kundenlogo img,
:root.dunkel .plan__vorschau,
:root.dunkel .foto__bild { background: #E6EDF1; }

:root.dunkel .rack__frei {
  background: repeating-linear-gradient(90deg, var(--linie-zart) 0 3px, transparent 3px 9px);
}

/* Umschalter in der Kopfzeile */
.themawahl {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border: 0;
  border-radius: var(--radius-klein);
  background: none;
  color: var(--tinte-weich);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}

.themawahl { color: rgba(255, 255, 255, .82); }
.themawahl:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.themawahl__sonne, .themawahl__mond { display: none; }
:root:not(.dunkel) .themawahl__mond { display: inline-flex; }
:root.dunkel .themawahl__sonne { display: inline-flex; }

/* =====================================================================
   Vergleich zweier Analysen
   ===================================================================== */

.ampelpunkt {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  margin-left: .35rem;
  vertical-align: baseline;
  background: var(--linie);
}

.ampelpunkt--gruen { background: var(--gruen); }
.ampelpunkt--gelb  { background: var(--gelb); }
.ampelpunkt--rot   { background: var(--rot); }

.delta {
  display: inline-block;
  font-weight: 600;
  font-size: .84rem;
  padding: .18rem .5rem;
  border-radius: 99px;
}

.delta--plus  { background: var(--ton-gruen); color: var(--gruen); }
.delta--minus { background: var(--ton-rot); color: var(--rot); }

.aenderung {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 1.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--linie-zart);
  font-size: .86rem;
}

.aenderung:last-child { border-bottom: 0; }
.aenderung__frage { color: var(--tinte-weich); }
.aenderung__vorher { text-decoration: line-through; color: var(--tinte-zart); overflow-wrap: anywhere; }
.aenderung__pfeil { color: var(--tinte-zart); display: flex; }
.aenderung__nachher { font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .aenderung { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .aenderung__pfeil { display: none; }
}

/* =====================================================================
   Passive Einbauten im Schrank
   ===================================================================== */

.zubehoerleiste {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .7rem .8rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--grund);
  margin-bottom: .9rem;
}

.zubehoerleiste__titel {
  width: 100%;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinte-zart);
  margin-bottom: .15rem;
}

.zubehoer {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  min-height: 34px;
  border: 1px solid var(--linie);
  border-radius: 99px;
  background: var(--flaeche);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  color: var(--tinte);
  white-space: nowrap;
}

.zubehoer .ikon { color: var(--farbe); }
.zubehoer:hover { border-color: var(--aktion); }

.zubehoer--gewaehlt {
  border-color: var(--aktion);
  background: var(--aktion-hell);
  font-weight: 600;
}

/* Einbauteile treten im Schrank zurück — sie sind Rahmen, nicht Inhalt */
.rack__geraet--zubehoer {
  background: repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--farbe) 9%, var(--misch)) 0 6px,
      color-mix(in srgb, var(--farbe) 5%, var(--misch)) 6px 12px);
}

.rack__geraet--zubehoer .rack__geraetname { font-weight: 500; opacity: .85; }

/* =====================================================================
   Portmatrix eines Patchfelds

   Zwölf Ports je Reihe, wie am echten Feld. Bei 24 Ports ergibt das
   zwei Reihen, bei 48 vier — die Anordnung entspricht dem, was man
   vor sich hat, statt einer beliebigen Kachelfläche.
   ===================================================================== */

.portmatrix {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .3rem;
  padding: .9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  margin-bottom: .7rem;
}

.port {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .05rem;
  min-height: 2.9rem;
  padding: .25rem .15rem;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--linie);
  border-radius: 5px;
  background: var(--grund);
  text-decoration: none;
  color: var(--tinte);
  overflow: hidden;
}

.port:hover { border-color: var(--aktion); background: var(--getoent); }

.port__nr { font-family: var(--mono); font-size: .76rem; font-weight: 600; }

.port__dose {
  font-size: .62rem;
  color: var(--tinte-weich);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.port--frei       { border-top-color: var(--linie); }
.port--belegt     { border-top-color: var(--aktion); background: var(--flaeche); }
.port--reserviert { border-top-color: var(--gelb); background: var(--ton-gelb); }
.port--defekt     { border-top-color: var(--rot); background: var(--ton-rot); }

.port--aktiv,
.port--aktiv:hover {
  border-color: var(--aktion);
  box-shadow: 0 0 0 2px var(--aktion-hell);
  background: var(--aktion-hell);
}

.portlegende {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--tinte-weich);
  margin-bottom: 1rem;
}

.portlegende span { display: inline-flex; align-items: center; gap: .35rem; }

.portpunkt {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 2px;
}

/* Verweis auf die Matrix am Patchfeld im Schrank */
.rack__matrix {
  position: absolute;
  top: 50%;
  right: 1.75rem;
  transform: translateY(-50%);
  display: inline-flex;
  padding: .25rem;
  border-radius: 4px;
  color: var(--tinte-zart);
}

.rack__matrix:hover { color: var(--aktion); background: var(--aktion-hell); }
.rack__geraet--zubehoer { padding-right: 3.4rem; }

@media (max-width: 760px) {
  .portmatrix { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .portmatrix { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* =====================================================================
   Halbe Breite und Montagearten

   Eine Höheneinheit ist zweigeteilt: zwei schmale Geräte nebeneinander
   auf einem Fachboden sind der Normalfall, nicht die Ausnahme.
   ===================================================================== */

.rack__reihe {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.rack__reihe .rack__frei,
.rack__reihe .rack__leer { grid-column: auto; }

/* Solange nichts Halbbreites gewählt ist, wirken beide Hälften als eine
   Fläche — die Teilung soll nicht ablenken. */
body:not(.rack-halb) .rack__reihe { gap: 0; }

body.rack-halb .rack__frei:hover { outline: 1px solid var(--aktion); outline-offset: -1px; }

.rack__geraet--halb { width: calc(50% - 1px); }
.rack__geraet--links  { justify-self: start; }
.rack__geraet--rechts { justify-self: end; }

/* Gestellt statt eingebaut: gestrichelter Rahmen und ein angedeuteter
   Boden. Beim Umbau ist der Unterschied praktisch relevant — das eine
   zieht man heraus, das andere hebt man hoch. */
.rack__geraet--boden {
  border-left-style: dashed;
  box-shadow: inset 0 -2px 0 -1px var(--farbe);
}

.rack__geraet--boden .rack__geraetname::after {
  content: "auf Boden";
  font-size: .6rem;
  font-weight: 500;
  padding: 0 .25rem;
  border-radius: 3px;
  background: var(--grund);
  color: var(--tinte-weich);
  margin-left: .3rem;
  flex: 0 0 auto;
}

.geraet--frei { border-left-style: dashed; }

/* =====================================================================
   Einmalpasswort

   Bewusst auffällig: es wird genau einmal angezeigt und nirgends
   gespeichert. Wer es überliest, muss es neu erzeugen.
   ===================================================================== */

.einmalblock {
  border: 2px solid var(--limette);
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
}

.einmalblock__kopf {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .9rem;
}

.einmalblock__kopf .ikon { color: var(--aktion); flex: 0 0 auto; }
.einmalblock__kopf strong { display: block; font-size: .98rem; }
.einmalblock__kopf span { font-size: .82rem; color: var(--tinte-weich); }

.einmalblock__wert {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: .06em;
  text-align: center;
  padding: .9rem 1rem;
  margin: 0 0 .9rem;
  background: var(--marine);
  color: #fff;
  border-radius: var(--radius-klein);
  user-select: all;
  overflow-wrap: anywhere;
}

.einmalblock__hinweis {
  margin: 0 0 .4rem;
  font-size: .85rem;
  color: var(--tinte-weich);
}

.einmalblock__hinweis:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
  .einmalblock__wert { font-size: 1.15rem; letter-spacing: .03em; }
}

/* =====================================================================
   Standorte
   ===================================================================== */

.standortliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

.standort {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem .8rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.standort--haupt { border-left-color: var(--aktion); }

.standort__kopf { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .7rem; }

.standort__ikon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  border-radius: var(--radius-klein);
  background: var(--getoent);
  color: var(--aktion);
}

.standort__name { display: block; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.standort__adresse { display: block; font-size: .82rem; color: var(--tinte-weich); }

.standort__zahlen {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid var(--linie-zart);
  font-size: .78rem;
  color: var(--tinte-zart);
}

.standort__zahlen span { display: inline-flex; align-items: center; gap: .3rem; }

/* =====================================================================
   Seitlich montierte Einbauten

   Senkrechte Steckdosenleisten sitzen im hinteren Rahmen und belegen
   keine Höheneinheit. Sie stehen deshalb neben dem Gitter, nicht darin —
   sonst rechnete sich der Schrank künstlich voll.
   ===================================================================== */

.seitenleiste {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .7rem;
  padding: .6rem .7rem;
  border: 1px dashed var(--linie);
  border-radius: var(--radius-klein);
  background: var(--grund);
}

.seitenleiste__titel {
  width: 100%;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinte-zart);
}

.seitenteil {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .5rem .3rem .55rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--farbe);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  font-size: .8rem;
}

.seitenteil .ikon { color: var(--farbe); }
.seitenteil .zeile-minus { padding: .15rem; }

/* =====================================================================
   Kapitelnavigation am linken Rand

   26 Sektionen. Ohne diese Leiste führt jeder Wechsel über die
   Übersicht und zurück — bei einer Aufnahme, die zwei Stunden dauert,
   sind das Dutzende unnötiger Wege.

   Einklappbar, der Zustand liegt in einem Cookie und wird serverseitig
   gesetzt, damit beim Laden nichts springt.
   ===================================================================== */

/* Ohne Seitenleiste bleibt die Seite einspaltig. Ein Raster mit fester
   erster Spalte, dem die Leiste fehlt, quetscht den Inhalt in 224 px —
   genau das ist passiert, weil nur die Erfassungsmaske eine Leiste
   liefert, die Regel aber für jede Seite galt. */
.arbeitsflaeche { display: block; }

.arbeitsflaeche--mit-rand {
  display: grid;
  grid-template-columns: var(--randbreite) minmax(0, 1fr);
  align-items: start;
}

body.randweg .arbeitsflaeche--mit-rand { grid-template-columns: 0 minmax(0, 1fr); }

.kapitelrand {
  position: sticky;
  top: var(--kopfhoehe);
  height: calc(100vh - var(--kopfhoehe));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .8rem .5rem 2rem;
  border-right: 1px solid var(--linie);
  background: var(--flaeche);
}

body.randweg .kapitelrand { display: none; }

.kapitelrand__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 0 .55rem .6rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-zart);
}

.kapitel {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr) .5rem;
  align-items: center;
  gap: .1rem;
  padding: .32rem .55rem;
  border-radius: var(--radius-klein);
  color: var(--tinte-weich);
  text-decoration: none;
  font-size: .84rem;
  line-height: 1.3;
}

.kapitel:hover { background: var(--getoent); color: var(--tinte); }

.kapitel--aktiv {
  background: var(--aktion-hell);
  color: var(--tinte);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--aktion);
}

.kapitel__nr {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--tinte-zart);
  font-variant-numeric: tabular-nums;
}

.kapitel--aktiv .kapitel__nr { color: var(--aktion); }
.kapitel__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fortschritt als schmaler Balken am rechten Rand des Eintrags —
   ein Ring je Kapitel wäre 26-mal dieselbe Dekoration. */
.kapitel__stand {
  width: 3px;
  height: 1.1rem;
  border-radius: 2px;
  background: var(--linie);
  position: relative;
  overflow: hidden;
}

.kapitel__stand i {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--aktion);
}

.kapitel--fertig .kapitel__stand i { background: var(--gruen); }

.randschalter {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .8);
  font: inherit;
  font-size: .84rem;
  padding: .4rem .55rem;
  border-radius: var(--radius-klein);
  cursor: pointer;
}

.randschalter:hover { background: rgba(255, 255, 255, .12); color: #fff; }

@media (max-width: 1100px) {
  .arbeitsflaeche--mit-rand { grid-template-columns: minmax(0, 1fr); }
  .kapitelrand { display: none; }
  .randschalter { display: none; }
}

/* =====================================================================
   Formularbogen

   Eine Sektion ist ein zusammenhängendes Blatt. Fragen werden durch
   Haarlinien getrennt, nicht durch Abstände und Schatten — ein Stapel
   gleicher Karten ist das, was Oberflächen billig aussehen lässt.
   ===================================================================== */

.bogen {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.bogen__gruppe {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .5rem 1.1rem;
  background: var(--grund);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}

.bogen__gruppe:first-child { border-top: 0; }

.bogen__gruppe em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: .76rem;
  color: var(--tinte-zart);
}

.zeile {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr) 6rem;
  align-items: start;
  gap: 1.1rem;
  padding: .65rem 1.1rem;
  border-bottom: 1px solid var(--linie-zart);
  border-left: 3px solid transparent;
}

.zeile:last-child { border-bottom: 0; }
.zeile:hover { background: color-mix(in srgb, var(--getoent) 35%, var(--flaeche)); }
.zeile:focus-within { background: var(--aktion-hell); }

.zeile--beantwortet { border-left-color: var(--gruen); }
.zeile--offen       { border-left-color: var(--gelb); }
.zeile--nz          { border-left-color: var(--linie-stark); opacity: .72; }

.zeile__frage { display: flex; gap: .5rem; padding-top: .28rem; min-width: 0; }

.zeile__nr {
  flex: 0 0 2.4rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-zart);
  padding-top: .12rem;
}

.zeile__label {
  font-weight: 500;
  font-size: .92rem;
  line-height: 1.4;
  cursor: pointer;
}

.zeile__hilfe {
  display: block;
  margin-top: .12rem;
  font-weight: 400;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--tinte-zart);
}

/* Die Feld-Kennung bleibt erreichbar, drängt sich aber nicht auf —
   sie wird gebraucht, wenn etwas gemeldet werden muss. */
.zeile__kennung {
  display: block;
  margin-top: .15rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--tinte-zart);
  opacity: 0;
  transition: opacity .12s;
  user-select: all;
}

.zeile:hover .zeile__kennung,
.zeile:focus-within .zeile__kennung { opacity: .8; }

.zeile__feld { min-width: 0; }

.zeile__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .15rem;
  padding-top: .3rem;
}

.statusknopf { position: relative; }
.statusknopf input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }

.statusknopf {
  border: 1px solid var(--linie);
  background: var(--flaeche);
  border-radius: var(--radius-klein);
  font: inherit;
  font-size: .68rem;
  padding: .16rem .38rem;
  color: var(--tinte-zart);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s, border-color .12s;
}

.zeile:hover .statusknopf,
.zeile:focus-within .statusknopf,
.statusknopf[aria-pressed="true"] { opacity: 1; }

.statusknopf:has(input:checked) {
  opacity: 1;
  border-color: var(--gelb);
  background: var(--ton-gelb);
  color: var(--gelb);
  font-weight: 600;
}

.statusknopf--nz:has(input:checked) {
  border-color: var(--linie-stark);
  background: var(--grund);
  color: var(--tinte-weich);
}

.statusknopf[aria-pressed="true"] {
  border-color: var(--gelb);
  background: var(--ton-gelb);
  color: var(--gelb);
  font-weight: 600;
}

.statusknopf--nz[aria-pressed="true"] {
  border-color: var(--linie-stark);
  background: var(--grund);
  color: var(--tinte-weich);
}

.notizschalter {
  border: 0;
  background: none;
  color: var(--tinte-zart);
  font: inherit;
  font-size: .68rem;
  padding: .16rem .3rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}

.zeile:hover .notizschalter,
.zeile:focus-within .notizschalter,
.notizschalter[aria-expanded="true"] { opacity: 1; }
.notizschalter[aria-expanded="true"] { color: var(--aktion); }

.notizzeile { margin-top: .4rem; display: none; }
.notizzeile.auf { display: block; }

.notizzeile input {
  font-size: .84rem;
  background: var(--grund);
  border-style: dashed;
}

.notizzeile__marke {
  display: block;
  font-size: .68rem;
  color: var(--tinte-zart);
  margin-bottom: .15rem;
}

/* Zusammenhängende Auswahl statt einzelner Kapseln */
.segment {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  overflow: hidden;
  background: var(--flaeche);
  max-width: 100%;
}

.segment label {
  position: relative;
  padding: .38rem .75rem;
  font-size: .87rem;
  line-height: 1.3;
  cursor: pointer;
  border-right: 1px solid var(--linie);
  white-space: nowrap;
}

.segment label:last-child { border-right: 0; }
.segment label:hover { background: var(--getoent); }
.segment input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.segment input:focus-visible + span {
  outline: 2px solid var(--aktion);
  outline-offset: -3px;
  border-radius: 2px;
}

.segment label:has(input:checked) {
  background: var(--aktion);
  color: #fff;
  font-weight: 600;
}

.segment label:has(input:checked):hover { background: var(--aktion-tief); }

/* Mehrfachauswahl bleibt als Kästchen erkennbar — eine Mehrfachauswahl,
   die wie eine Einfachauswahl aussieht, wird falsch bedient. */
.hakenfeld { display: flex; flex-wrap: wrap; gap: .12rem 1.05rem; }

.hakenfeld label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .87rem;
  cursor: pointer;
  padding: .18rem 0;
}

.hakenfeld input { accent-color: var(--aktion); width: 1rem; height: 1rem; }

@media (max-width: 900px) {
  .zeile { grid-template-columns: minmax(0, 1fr) 5rem; }
  .zeile__frage { padding-top: 0; margin-bottom: .3rem; }
  .zeile__feld { grid-column: 1; }
  .zeile__status { grid-row: 1; grid-column: 2; padding-top: 0; }
  .statusknopf, .notizschalter, .zeile__kennung { opacity: 1; }
}

/* =====================================================================
   Dunkler Modus — Ergänzungen für Bogen und Kapitelrand

   Auf dunklem Grund tragen Linien weniger als im Hellen. Die Trennung
   zwischen Fragen läuft deshalb zusätzlich über einen minimal helleren
   Blattgrund, sonst zerfließt der Bogen zu einer Fläche.
   ===================================================================== */

:root.dunkel .bogen { border-color: var(--linie); background: var(--flaeche); }
:root.dunkel .bogen__gruppe { background: var(--marine-tief); border-color: var(--linie); }
:root.dunkel .zeile { border-bottom-color: var(--linie-zart); }
:root.dunkel .zeile:hover { background: var(--getoent); }
:root.dunkel .zeile:focus-within { background: var(--aktion-hell); }
:root.dunkel .kapitelrand { background: var(--flaeche); border-right-color: var(--linie); }
:root.dunkel .segment { background: var(--grund); border-color: var(--linie-stark); }
:root.dunkel .segment label { border-right-color: var(--linie-stark); }
:root.dunkel .segment label:has(input:checked) { color: var(--marine); }
:root.dunkel .statusknopf { background: var(--grund); border-color: var(--linie-stark); }
:root.dunkel .notizzeile input { background: var(--grund); }

/* =====================================================================
   Kundenzugang — Ergänzungen im Beraterbereich
   ===================================================================== */

.zaehler {
  display: inline-block;
  min-width: 1.4rem;
  padding: .05rem .4rem;
  margin-left: .5rem;
  border-radius: 99px;
  background: var(--aktion);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: 2px;
}

/* Der gerade erzeugte Zugang soll auffallen — sein Link ist das
   Einzige, was man in diesem Moment wirklich braucht. */
.karte--hervor {
  border-color: var(--limette);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--limette) 30%, transparent);
}

.klein { font-size: .84rem; }

/* Eine Kachel, die auf etwas Wartendes hinweist — deutlicher als
   „aktiv", aber kein Alarm. */
.wegkachel--warnt {
  border-color: var(--gelb);
  background: var(--ton-gelb);
}

.wegkachel--warnt .wegkachel__ikon,
.wegkachel--warnt .wegkachel__zahl { color: var(--gelb); }

/* =====================================================================
   Angabe des Kunden neben der Frage

   Sitzt sichtbar unter der Zeile, aber klar abgesetzt: es ist noch
   keine Antwort, sondern ein Vorschlag, den erst ein Klick übernimmt.
   ===================================================================== */

.kundenangabe {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 1.1rem .65rem;
  padding: .6rem .8rem;
  border: 1px dashed var(--aktion);
  border-radius: var(--radius-klein);
  background: var(--aktion-hell);
}

.kundenangabe__ikon { color: var(--aktion); flex: 0 0 auto; margin-top: .15rem; }
.kundenangabe__inhalt { flex: 1; min-width: 0; }

.kundenangabe__quelle {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--aktion);
}

.kundenangabe__wert { margin: .15rem 0 0; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }

.kundenangabe__notiz {
  margin: .2rem 0 0;
  font-size: .85rem;
  font-style: italic;
  color: var(--tinte-weich);
  overflow-wrap: anywhere;
}

.kundenangabe__aktion { display: flex; gap: .3rem; flex: 0 0 auto; flex-wrap: wrap; }

@media (max-width: 700px) {
  .kundenangabe { flex-wrap: wrap; margin-left: .9rem; margin-right: .9rem; }
  .kundenangabe__aktion { width: 100%; }
}