/* ============================================================
   Ergänzungen zum UMG Admin Design System
   ------------------------------------------------------------
   Setzt colors_and_type.css und admin-components.css voraus und
   verwendet ausschließlich deren Token – keine eigenen Farben,
   Abstände oder Schriftgrößen.

   Hier steht nur, was das Design-System noch nicht hat.
   ============================================================ */

/* ------------------------------------------------------------
   1. Hilfetext hinter einem (i)
   ------------------------------------------------------------
   Ein Erfassungsformular hat zwei Dutzend Felder, und jedes trägt
   eine Erläuterung mit Normbezug. Stünde sie durchgehend unter dem
   Feld, wäre das Formular eine Textwand und niemand läse sie.

   Deshalb: Label und ein (i) in einer Zeile, der Text erscheint auf
   Zuruf darunter. Umgesetzt mit <details>/<summary> – ohne
   JavaScript, damit es auch unter der strengen Content-Security-
   Policy funktioniert, und mit der Tastaturbedienung, die das
   Element von Haus aus mitbringt.
   ------------------------------------------------------------ */

.field__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hint {
  display: inline-flex;
}

.hint > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-content: center;
  width: 20px;
  height: 20px;
  color: var(--umg-punkteblau);
  font-size: 15px;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.hint > summary::-webkit-details-marker { display: none; }
.hint > summary::marker { content: ""; }

.hint > summary:hover        { color: var(--umg-logoblau); background: var(--umg-grey-100); }
.hint[open] > summary        { color: var(--umg-logoblau); background: var(--umg-grey-100); }
.hint > summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Der Text legt sich als Blatt über das darunterliegende Feld –
   scharfkantig und mit dem Popover-Schatten des Design-Systems. */
.hint__body {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-popover);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

/* ------------------------------------------------------------
   2. Zweispaltiges Formularraster
   ------------------------------------------------------------
   Kurze Felder nebeneinander, alles Mehrzeilige über die volle
   Breite. Die Zuordnung passiert über :has() am Bedienelement –
   so muss keine Vorlage wissen, wie lang ihr Feld ist.
   ------------------------------------------------------------ */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-5);
  align-items: start;
}

.form-grid > .field + .field { margin-top: 0; }
.form-grid > .fehleruebersicht { grid-column: 1 / -1; margin-bottom: 0; }
.pflichthinweis { margin: 0 0 var(--space-4); }
.frage__text .req { color: var(--umg-red-notfall); }

.form-grid > .field:has(.textarea),
/* Ankreuzlisten brauchen die volle Breite. Vorher stand hier
   `select[multiple]` – seit die Mehrfachauswahl ankreuzbar ist, griff die
   Regel nicht mehr und die Listen wurden in eine halbe Spalte gequetscht. */
.form-grid > .field:has(div.kreuzliste) {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   3. Fragebogen
   ------------------------------------------------------------
   Eine Frage besteht aus Text, Erläuterung und drei Antworten in
   einer Zeile. Die Erläuterung steht hier ausnahmsweise offen und
   nicht hinter einem (i): Sie ist der eigentliche Inhalt der
   Ausfüllhilfe – wer sie erst aufklappen muss, liest sie nicht,
   und dann rät er bei „Emotionserkennung am Arbeitsplatz“.
   ------------------------------------------------------------ */

.frage { padding: var(--space-4) 0; }
fieldset.frage { border: 0; margin: 0; min-width: 0; padding-left: 0; padding-right: 0; }
legend.frage__text { padding: 0; }
.frage:first-child { padding-top: 0; }
.frage--trenner { border-bottom: 1px solid var(--border-1); }

.frage__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
  max-width: 70ch;
}

.frage__hilfe {
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
  max-width: 70ch;
  line-height: var(--lh-normal);
}

.frage__antworten { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* Normbezug neben der Frage. */
.norm { margin-top: var(--space-3); max-width: 70ch; }
.norm > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--fs-meta);
  color: var(--umg-logoblau);
  padding: var(--space-1) 0;
}
.norm > summary::-webkit-details-marker { display: none; }
.norm > summary::marker { content: ""; }
.norm > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.norm > summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.norm__body {
  border-left: 3px solid var(--border-2);
  padding: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}
.norm__body p { font-size: var(--fs-body-sm); color: var(--fg-2); margin: 0 0 var(--space-2); }
.norm__meta { font-size: var(--fs-meta); color: var(--fg-3); margin: 0; }

/* Kachelreihe der Übersicht. Das Design-System liefert die Kachel,
   nicht ihre Anordnung. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.kacheln .stat { text-decoration: none; }

/* Die gegebenen Antworten auf Zuruf – wer bestätigt, muss sie sehen können,
   ohne dass sie die Zusammenfassung erschlagen. */
.antworten { margin: var(--space-4) 0; }
.antworten > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--fs-body-sm);
  color: var(--umg-logoblau); padding: var(--space-1) 0;
}
.antworten > summary::-webkit-details-marker { display: none; }
.antworten > summary::marker { content: ""; }
.antworten > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.antworten > summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.antworten__body { margin-top: var(--space-3); }
.antworten__kopf {
  font-family: var(--font-display); font-size: var(--fs-overline);
  letter-spacing: var(--letter-overline); text-transform: uppercase;
  color: var(--fg-3); margin: var(--space-4) 0 var(--space-2);
}
.antworten .data-table td { font-size: 13px; padding: 8px 10px; }

/* Beschreibungsliste für Fließtext.
   `.kv dd` des Design-Systems setzt Festbreitenschrift und `word-break:
   break-all` – richtig für Kennungen und Codes, falsch für einen
   Verwendungszweck: Der bricht dann mitten im Wort um und liest sich wie ein
   Protokollauszug. Diese Abwandlung ist für die erklärenden Felder. */
.kv--text dd {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Mehrfachauswahl als Ankreuzliste statt als Mehrfach-Auswahlfeld.
   Ein <select multiple> verlangt Strg-Klick, zeigt fünf von neunundzwanzig
   Einträgen und verliert die Auswahl beim Verklicken. Wer daran scheitert,
   wählt nichts aus, und im Register fehlt die Angabe. */
div.kreuzliste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: var(--space-1) var(--space-4);
  max-height: 260px; overflow-y: auto;
  padding: var(--space-3);
  border: 1px solid var(--border-1); border-radius: var(--radius-md);
  background: var(--bg-1);
}
div.kreuzliste > div { min-width: 0; }
div.kreuzliste label {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--fs-body-sm); line-height: 1.35;
  padding: var(--space-1) 0; cursor: pointer;
}
div.kreuzliste input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; }
div.kreuzliste label:hover { color: var(--umg-logoblau); }
div.kreuzliste input:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Die vier Sichten auf einen Eintrag. Kein Reiter-Baustein im Design-System,
   deshalb hier – aber mit dessen Farben, Abständen und Fokusring. */
.reiter {
  display: flex; gap: var(--space-1); flex-wrap: wrap; margin-left: calc(-1 * var(--space-4));
  background: #fff; border-image: conic-gradient(#fff 0 0) fill 0 / / 0 100vmax;
}
.reiter__punkt {
  padding: 12px var(--space-4) 9px;
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 16px;
  color: var(--fg-nav); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.reiter__punkt:hover { color: var(--umg-logoblau); }
.reiter__punkt:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.reiter__punkt.is-active {
  color: var(--umg-logoblau); border-bottom-color: var(--umg-logoblau);
}
@media (forced-colors: active) {
  .reiter { border-image: none; }
  .reiter__punkt { border-bottom-color: Canvas; }
  .reiter__punkt.is-active { border-bottom-color: Highlight; }
}

/* Adresse eines Eintrags weitergeben. Aufklapper statt Dauerzustand: Der Link
   wird selten gebraucht und würde sonst in jeder Kopfzeile Platz belegen. */
.teilen { position: relative; display: inline-block; }
.teilen > summary { list-style: none; cursor: pointer; }
.teilen > summary::-webkit-details-marker { display: none; }
.teilen > summary::marker { content: ""; }
.teilen__body {
  position: absolute; right: 0; z-index: 30; margin-top: var(--space-2);
  width: min(46ch, 88vw); padding: var(--space-4);
  background: var(--bg-1); border: 1px solid var(--border-1);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2);
}
.teilen__zeile { display: flex; gap: var(--space-2); margin: var(--space-2) 0; }
.teilen__zeile .input { flex: 1 1 auto; min-width: 0; font-size: 12px; }

/* Auf schmalen Fenstern hat das schwebende Blatt keinen Platz und liefe über
   den linken Rand hinaus. Dann klappt es einfach darunter auf. */
@media (max-width: 640px) {
  .teilen { position: static; display: block; }
  .teilen__body { position: static; width: auto; margin-top: var(--space-3); }
}

/* Nur einblenden, wenn teilen.js tatsächlich geladen hat – ein Knopf ohne
   Wirkung ist schlechter als kein Knopf. Das Feld daneben bleibt immer da. */
.nur-mit-js { display: none; }
.hat-js .nur-mit-js { display: inline-flex; }

/* Herleitung einer Empfehlung – ohne sie ist die Empfehlung eine Behauptung. */
.gruende { margin: var(--space-2) 0 0; padding-left: var(--space-4); }
.gruende li { font-size: var(--fs-body-sm); color: var(--fg-2); margin-bottom: var(--space-1); }
.gruende__norm { color: var(--fg-3); font-size: var(--fs-meta); white-space: nowrap; }
@media (max-width: 640px) { .gruende__norm { white-space: normal; } }

/* Seitenraster aus Haupt- und Randspalte. Unter 960 px stehen beide untereinander. */
.raster { display: grid; gap: var(--space-6); margin-top: var(--space-5); }
.raster--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.raster--3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.raster--1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 960px) {
  .raster--2-1, .raster--3-2, .raster--1-1 { grid-template-columns: minmax(0, 1fr); }
}

/* Breite Tabellen rollen in ihrem Rahmen, die Seite selbst bleibt schmal.
   Der Rahmen ist per Tastatur erreichbar, damit er sich auch ohne Maus rollen lässt. */
.tabelle { overflow-x: auto; }
.tabelle:has(> .data-table--card) { box-shadow: var(--shadow-card-rest); }
.tabelle > .data-table--card { box-shadow: none; }
.tabelle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Schritte von der Meldung bis zur Freigabe. Unter 720 px untereinander. */
.schritte { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.schritte__punkt {
  flex: 1; min-width: 0; position: relative; text-align: center; padding: 0 var(--space-2);
}
.schritte__punkt + .schritte__punkt::before {
  content: ""; position: absolute; top: 11px; left: -50%; width: 100%;
  border-top: 2px solid var(--border-1);
}
.schritte__punkt > .badge { position: relative; z-index: 1; }
.schritte__text { margin-top: var(--space-2); }
.schritte__text .field__hint { margin-top: 2px; }
.schritte__text .btn { margin-top: var(--space-2); }
@media (max-width: 720px) {
  .schritte { flex-direction: column; gap: var(--space-4); }
  .schritte__punkt {
    display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--space-3);
    text-align: left; padding: 0;
  }
  .schritte__punkt + .schritte__punkt::before { content: none; }
  .schritte__punkt > .badge { justify-self: start; align-self: start; }
  .schritte__text { margin-top: 0; }
}

/* Knöpfe und Eingaben in einer Zeile, die bei Platzmangel umbricht. */
.knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }