/*
 * Bausteine
 * ---------
 * Jeder Baustein ist einmal definiert und wird überall verwendet.
 * Werte kommen ausschließlich aus grundwerte.css.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: swap;
  src: url("../schrift/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 500;
  font-display: swap;
  src: url("../schrift/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: swap;
  src: url("../schrift/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format("woff2");
}

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

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

a { color: var(--akzent); }
a:hover { color: var(--akzent-dunkel); }

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; }

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

.zum-inhalt {
  position: absolute; left: var(--abstand-4); top: -60px;
  padding: var(--abstand-2) var(--abstand-4);
  background: var(--flaeche); border-radius: var(--rund-klein); z-index: 20;
}
.zum-inhalt:focus { top: var(--abstand-2); }

/* --- Knöpfe ------------------------------------------------------------ */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2);
  min-height: var(--mindestgroesse);
  padding: 0 18px;
  border: 1px solid var(--rahmen-eingabe);
  border-radius: var(--rund-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit; font-size: 15px; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: var(--flaeche-leise); color: var(--text); }
.knopf--haupt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); font-weight: 600; }
.knopf--haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: var(--auf-akzent); }
.knopf--zweit { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.knopf--zweit:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.knopf--aktiv { background: var(--akzent-hell); border-color: var(--akzent); }
.knopf--breit { width: 100%; }
.knopf--text {
  border: 0; background: transparent; padding: 0 var(--abstand-2);
  color: var(--akzent); font-weight: 600;
}
.knopf--text:hover { background: transparent; text-decoration: underline; color: var(--akzent-dunkel); }
.knopf--leise { color: var(--text-leise); font-weight: 500; }
.knopf--leise:hover { color: var(--text); }
.knopf--gefahr-text:hover { color: var(--fehler-text); }
.knopf--gefahr { background: var(--fehler-text); border-color: var(--fehler-text); color: var(--auf-fehler); font-weight: 600; }
.knopf--gefahr:hover { background: color-mix(in srgb, var(--fehler-text) 80%, var(--text)); border-color: color-mix(in srgb, var(--fehler-text) 80%, var(--text)); color: var(--auf-fehler); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.knopf--gefahr:disabled:hover { background: var(--fehler-text); }

/* --- Dialogfenster für Rückfragen (Archivieren, Löschen) ------------------ */

.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: var(--abstand-5);
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  background: var(--flaeche);
  color: var(--text);
  box-shadow: 0 18px 48px var(--schatten);
}
.dialog::backdrop { background: rgba(20, 30, 40, 0.45); }
.dialog__titel { margin: 0 0 var(--abstand-3); font-size: var(--groesse-abschnitt); }
.rueckfrage { gap: var(--abstand-3); }
.rueckfrage p { margin: 0; }
.rueckfrage .zeile { margin-top: var(--abstand-2); }
.rueckfrage-seite { padding: var(--abstand-5); max-width: 640px; }

/* --- Kennzeichen (Status) ---------------------------------------------- */

.kennzeichen {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px;
  border-radius: var(--rund-voll);
  font-size: var(--groesse-meta); font-weight: 500;
  background: var(--neutral-hell); color: var(--text-mittel);
  white-space: nowrap;
}
.kennzeichen--entwurf { background: var(--neutral-hell); color: var(--text-mittel); }
.kennzeichen--in_pruefung { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; }
.kennzeichen--freigegeben { background: var(--gut-hell); color: var(--gut-text); font-weight: 600; }
.kennzeichen--archiviert { background: var(--neutral-hell); color: var(--text-leise); }
.kennzeichen--achtung { background: var(--achtung-hell); color: var(--achtung-text); font-weight: 600; }
.kennzeichen--zahl { min-width: 24px; justify-content: center; background: var(--akzent); color: var(--auf-akzent); font-weight: 600; }

/* --- Karten und Listen ------------------------------------------------------ */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  padding: 20px;
}
.karte__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2);
  margin-bottom: var(--abstand-2);
}
.karte__titel { font-size: var(--groesse-kartentitel); }

.liste { margin: 0; padding: 0; list-style: none; }
.liste__eintrag {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--abstand-3) 0;
  border-top: 1px solid var(--linie-leise);
  text-decoration: none; color: var(--text);
}
.liste__eintrag:hover { color: var(--akzent-dunkel); }
.liste__titel { font-size: 15px; font-weight: 500; }
.liste__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2);
  font-size: var(--groesse-meta); color: var(--text-leise);
}
.liste__leer { margin: var(--abstand-2) 0; color: var(--text-leise); font-size: var(--groesse-klein); }

.hinweisband {
  display: flex; gap: var(--abstand-3); align-items: flex-start;
  padding: var(--abstand-4) 20px;
  border-radius: var(--rund-karte);
  background: var(--akzent-hell);
}
.hinweisband--gut { background: var(--gut-hell); color: var(--gut-text); }
.hinweisband--fehler { background: var(--fehler-hell); color: var(--fehler-text); }

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

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label, .feld legend { font-size: var(--groesse-klein); font-weight: 600; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="date"], .feld input[type="password"],
.feld input[type="search"], .feld input[type="time"], .feld input[type="number"], .feld select, .feld textarea, .eingabe {
  min-height: var(--mindestgroesse);
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--rahmen-eingabe);
  border-radius: var(--rund-klein);
  background: var(--flaeche);
  color: var(--text);
  font: inherit; font-size: 15px;
}
.feld textarea { resize: vertical; line-height: 1.55; }
.feld__hilfe { font-size: var(--groesse-meta); color: var(--text-leise); margin: 0; }
.feld__fehler { font-size: var(--groesse-klein); color: var(--fehler-text); font-weight: 600; margin: 0; }
.feld input[type="checkbox"], .feld input[type="radio"] { width: 20px; height: 20px; accent-color: var(--akzent); }
.feld ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--abstand-2); }
.feld label:has(input[type="radio"]), .feld label:has(input[type="checkbox"]) {
  display: flex; align-items: center; gap: var(--abstand-3); min-height: var(--mindestgroesse);
  font-weight: 400; font-size: 15px;
}
.feld ul label { display: flex; align-items: center; gap: var(--abstand-3); font-weight: 400; font-size: 15px; min-height: var(--mindestgroesse); }
::placeholder { color: var(--text-leise); opacity: 1; }

.formular-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--abstand-4); }

/* --- Anhänge ------------------------------------------------------------------ */

.anhang {
  display: flex; gap: var(--abstand-3); align-items: flex-start;
  padding: var(--abstand-3) 0; border-top: 1px solid var(--linie-leise);
  text-decoration: none; color: var(--text);
}
.anhang__symbol {
  flex: none; width: 46px; padding: 4px 0; border-radius: 6px;
  font-size: 11px; font-weight: 600; text-align: center;
  background: var(--neutral-hell); color: var(--text-mittel);
}
.anhang__symbol--pdf { background: var(--fehler-hell); color: var(--fehler-text); }
.anhang__symbol--word { background: #E2E9F6; color: #1F3F7A; }
.anhang__symbol--excel, .anhang__symbol--calc, .anhang__symbol--tabelle { background: var(--gut-hell); color: var(--gut-text); }
.anhang__name {
  /* Der volle Dateiname bleibt immer sichtbar: umbrechen statt abschneiden.
     Bevorzugt nach _ und - (siehe Filter "umbruchstellen"), notfalls überall. */
  font-size: var(--groesse-klein); font-weight: 500; line-height: 1.4;
  overflow-wrap: anywhere;
}
.anhang__meta { font-size: 12px; color: var(--text-leise); }
.anhang-zeile { display: flex; align-items: flex-start; gap: var(--abstand-2); border-top: 1px solid var(--linie-leise); }
.anhang-zeile .anhang { flex: 1; min-width: 0; border-top: 0; }
.anhang__entfernen { flex: none; margin-top: 6px; font-size: 14px; }

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

.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabelle th, .tabelle td { padding: var(--abstand-3); border-bottom: 1px solid var(--linie-leise); text-align: left; vertical-align: middle; }
.tabelle thead th { font-size: var(--groesse-meta); color: var(--text-leise); border-bottom-color: var(--linie); }
.tabelle .mitte { text-align: center; }

.angaben { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px var(--abstand-4); font-size: var(--groesse-klein); }
.angaben dt { color: var(--text-leise); }
.angaben dd { margin: 0; }