/* Odin Laborsuite – gemeinsame Gestaltung aller Anwendungen.
 *
 * Wird vor dem Stylesheet der jeweiligen Anwendung geladen. Enthält die
 * Farbwerte (Schema „dunkles Stahlblau“, seit 29.09.2026; davor Ohm-Grün),
 * die Hausschrift sowie Kopf- und Fußzeile. Die Regeln für Kopf- und
 * Fußzeile sind bewusst spezifischer als die allgemeinen Regeln der
 * Anwendungen für nav a, button und footer, damit sie unabhängig von der
 * Reihenfolge gewinnen.
 *
 * Gestaltungsregeln: Radius 2 px, Linien statt Schatten, Festbreitenschrift
 * für Nummern und Adressen, kein Ohm-Rot als Fläche; Rot bleibt Warnungen
 * und dem Löschen vorbehalten. Das Ohm-Logo steht weiß auf der dunklen
 * Kopfzeile, wie es das Corporate Design für dunkle Flächen vorsieht.
 */

@font-face { font-family: "Public Sans"; src: url("/gemeinsam/PublicSans-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/gemeinsam/PublicSans-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/gemeinsam/PublicSans-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/gemeinsam/PublicSans-Bold.otf") format("opentype"); font-weight: 700 800; font-display: swap; }

:root {
  --odin-kopf: #1b2f42;        /* Kopfzeile */
  --odin-kopf-linie: #7fb0d6;  /* Linie unter der Kopfzeile, Akzent auf Dunkel */
  --odin-kopf-text-2: #b4c6d6;
  --odin-kopf-rand: rgb(255 255 255 / .22);
  --odin-grund: #eef2f5;       /* Seitenhintergrund */
  --odin-flaeche: #ffffff;
  --odin-linie: #d2dbe3;
  --odin-linie-hell: #e3e9ef;
  --odin-text: #132433;
  --odin-text-2: #4a5d6e;
  --odin-akzent: #255d8a;      /* 7,0:1 auf Weiß */
  --odin-akzent-dunkel: #1d4a70;
  --odin-akzent-tint: #ecf2f8;
  --odin-gefahr: #a51d20;      /* nur für Warnungen und Löschen */
  --odin-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --odin-radius: 2px;
  font-family: "Public Sans", Arial, sans-serif;
  color: var(--odin-text);
  background: var(--odin-grund);
}
body { background: var(--odin-grund); }
:focus-visible { outline: 2px solid var(--odin-akzent); outline-offset: 2px; }

/* Handy: Safari vergrößert sonst im Querformat einzelne Textblöcke. Lange
 * Wörter und Dateinamen ohne Leerzeichen brechen um, statt die Seite zu
 * verbreitern – ein einziges zu breites Element lässt den Handybrowser die
 * ganze Seite verkleinern. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
/* Seitenköpfe der Anwendungen (Titel links, Knöpfe rechts): Ein langer
 * Dateiname im Titel darf den Kopf nicht auf seine eigene Breite aufblähen. */
.headline > * { min-width: 0; max-width: 100%; }
/* Scrollrahmen um Tabellen: Absolut gesetzte Bildschirmleser-Texte (.sr-only)
 * in Tabellenköpfen beziehen sich sonst auf die Seite und verbreitern sie. */
.table-wrap { position: relative; }

/* --- Kopfzeile ------------------------------------------------------------ */
.odin-kopf { position: relative; z-index: 2; color: #fff; }
.odin-kopf .odin-leiste {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 8px max(16px, 4vw);
  background: var(--odin-kopf); border-bottom: 3px solid var(--odin-kopf-linie);
}
.odin-kopf .odin-marken { display: flex; align-items: center; gap: 18px; min-width: 0; }
.odin-kopf .home-logo { border-radius: var(--odin-radius); }
.odin-kopf .home-logo img { width: 112px; }
.odin-kopf .home-logo:focus-visible, .odin-kopf :focus-visible { outline: 2px solid var(--odin-kopf-linie); outline-offset: 3px; }
.odin-kopf .odin-marke {
  display: inline-flex; align-items: center; gap: 12px; padding-left: 18px;
  border-left: 1px solid var(--odin-kopf-rand); color: #fff; text-decoration: none;
}
.odin-kopf a.odin-marke:hover .odin-name { text-decoration: underline; text-decoration-color: var(--odin-kopf-linie); text-underline-offset: 3px; }
.odin-kopf .odin-zeichen { display: block; width: 40px; height: 40px; flex: none; }
.odin-kopf .odin-wortmarke { display: grid; line-height: 1; }
.odin-kopf .odin-name { font-weight: 700; font-size: 1.45rem; letter-spacing: .02em; }
.odin-kopf .odin-zusatz { margin-top: 3px; color: var(--odin-kopf-text-2); font-size: .74rem; font-weight: 500; letter-spacing: .08em; }
.odin-kopf .odin-version {
  align-self: flex-start; margin-top: 2px; padding: 1px 6px; border: 1px solid var(--odin-kopf-rand);
  color: var(--odin-kopf-text-2); font: 600 .7rem/1.5 var(--odin-mono); letter-spacing: .04em;
}
.odin-kopf .odin-abmelden { margin: 0; }
.odin-kopf .odin-abmelden button {
  display: inline-flex; align-items: center; width: auto; min-height: 34px; padding: 4px 14px;
  border: 1px solid var(--odin-kopf-rand); border-radius: var(--odin-radius);
  color: #fff; background: transparent; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
}
.odin-kopf .odin-abmelden button:hover { border-color: var(--odin-kopf-linie); background: transparent; }

/* Zweite Leiste: Name der Anwendung und ihre Navigation */
.odin-kopf .odin-appleiste {
  display: flex; align-items: stretch; gap: 8px 28px; flex-wrap: wrap;
  padding: 0 max(16px, 4vw); background: var(--odin-flaeche); border-bottom: 1px solid var(--odin-linie);
  color: var(--odin-text);
}
.odin-kopf .odin-anwendung { display: flex; align-items: center; min-height: 52px; font-weight: 700; font-size: 1.05rem; }
.odin-kopf nav { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; width: auto; }
.odin-kopf nav a {
  display: inline-flex; flex: none; align-items: center; min-height: 52px; padding: 0 12px;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  color: var(--odin-text-2); background: transparent; font-weight: 600; text-decoration: none;
}
.odin-kopf nav a:hover { color: var(--odin-text); background: var(--odin-akzent-tint); }
.odin-kopf nav a[aria-current="page"],
.odin-kopf nav a[aria-current="page"]:hover { color: var(--odin-akzent); background: transparent; border-bottom-color: var(--odin-akzent); }
.odin-kopf nav a:focus-visible { outline: 2px solid var(--odin-akzent); outline-offset: -2px; }

/* --- Fußzeile ------------------------------------------------------------- */
.odin-fuss {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 6px 18px; flex-wrap: wrap;
  padding: 14px max(16px, 4vw); border-top: 1px solid var(--odin-linie);
  color: var(--odin-text-2); background: var(--odin-flaeche);
  font: .78rem/1.5 var(--odin-mono); text-align: left;
}
.odin-fuss a { color: var(--odin-akzent); text-underline-offset: 2px; }

@media (max-width: 640px) {
  .odin-kopf .odin-leiste { min-height: 64px; padding: 8px 16px; }
  .odin-kopf .home-logo img { width: 84px; }
  .odin-kopf .odin-marken { gap: 12px; }
  .odin-kopf .odin-marke { padding-left: 12px; gap: 9px; }
  .odin-kopf .odin-zeichen { width: 34px; height: 34px; }
  .odin-kopf .odin-name { font-size: 1.2rem; }
  .odin-kopf .odin-version { display: none; }
  .odin-kopf .odin-appleiste { padding: 0 8px; gap: 0; }
  .odin-kopf .odin-anwendung { min-height: 40px; padding: 0 8px; width: 100%; }
  /* Alle Menüpunkte sichtbar, notfalls in zwei Reihen – seitlich scrollend
   * sah die Leiste abgeschnitten aus („Bericht erste…“). */
  .odin-kopf nav { width: 100%; flex-wrap: wrap; column-gap: 0; }
  .odin-kopf nav a { min-height: 42px; padding: 0 9px; flex: none; }
}

/* Schmale Handys (viele Android-Geräte haben 360 px): Kopfzeile enger
 * setzen. Sie war mindestens 377 px breit; jede Seite wurde dadurch etwas
 * herausgezoomt und ließ sich seitlich verschieben. Das Ohm-Logo behält seine
 * Größe, unter 350 px entfällt das Odin-Zeichen neben dem Schriftzug. */
@media (max-width: 400px) {
  .odin-kopf .odin-leiste { gap: 10px; padding: 8px 12px; }
  .odin-kopf .odin-marken { gap: 10px; }
  .odin-kopf .odin-marke { padding-left: 10px; gap: 8px; }
  .odin-kopf .odin-zeichen { width: 30px; height: 30px; }
  .odin-kopf .odin-abmelden button { padding: 4px 10px; font-size: .9rem; }
}
@media (max-width: 350px) {
  .odin-kopf .odin-zeichen { display: none; }
}

/* --- Listen auf schmalen Bildschirmen -------------------------------------
 * Tabellen mit der Klasse odin-liste werden auf dem Handy zu Karten: eine
 * Karte je Zeile, links die Spaltenüberschrift aus data-label, rechts der
 * Wert. Die Zelle mit odin-titel steht oben als Überschrift, odin-auswahl
 * (Ankreuzfeld) oben rechts, odin-aktion (Knöpfe) unten über die ganze
 * Breite; Zellen ohne data-label stehen ohne Beschriftung. Matrizen mit
 * vielen Zahlenspalten bleiben Tabellen und scrollen seitlich.
 * Die Selektoren sind absichtlich lang: Sie müssen die Tabellenregeln der
 * Anwendungen schlagen, deren Stylesheets nach diesem geladen werden. */
@media (max-width: 640px) {
  .table-wrap:has(> table.odin-liste), .tabelle:has(> table.odin-liste) {
    overflow: visible; padding: 0; border: 0; background: none;
  }
  table.odin-liste, table.odin-liste > tbody { display: block; width: 100%; min-width: 0; }
  table.odin-liste > thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  table.odin-liste > tbody > tr {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
    margin: 0 0 10px; padding: 12px 14px; background: var(--odin-flaeche);
    border: 1px solid var(--odin-linie); border-radius: var(--odin-radius);
  }
  table.odin-liste > tbody > tr:nth-child(n), table.odin-liste > tbody > tr:hover { background: var(--odin-flaeche); }
  table.odin-liste > tbody > tr > td, table.odin-liste > tbody > tr > th {
    display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: 12px; align-items: baseline;
    width: auto; min-width: 0; max-width: none; padding: 3px 0; border: 0; background: none;
    color: inherit; font-size: .95rem; font-weight: inherit; text-align: left; white-space: normal;
  }
  table.odin-liste > tbody > tr > td::before, table.odin-liste > tbody > tr > th::before {
    content: attr(data-label); color: var(--odin-text-2); font-size: .82rem; font-weight: 600;
  }
  /* Alles nach der Beschriftung steht in der Wertespalte, auch Zusatzzeilen (<small>) */
  table.odin-liste > tbody > tr > [data-label] > * { grid-column: 2; }
  table.odin-liste > tbody > tr > :not([data-label]) { display: block; }
  table.odin-liste > tbody > tr > :not([data-label])::before { content: none; }
  table.odin-liste > tbody > tr > .odin-titel { order: -1; padding: 0 2.6rem 6px 0; font-size: 1.05rem; font-weight: 700; }
  table.odin-liste > tbody > tr > .odin-auswahl { position: absolute; top: 10px; right: 10px; padding: 0; }
  table.odin-liste > tbody > tr > .odin-auswahl input { width: 1.5rem; height: 1.5rem; margin: 0; }
  table.odin-liste > tbody > tr > .odin-aktion { padding-top: 8px; }
  table.odin-liste > tbody > tr > .odin-aktion button, table.odin-liste > tbody > tr > .odin-aktion .button { width: auto; }
  /* Leere Liste: die Zeile mit dem Hinweis über alle Spalten */
  table.odin-liste > tbody > tr > td[colspan] { padding: 14px 0; color: var(--odin-text-2); text-align: center; }
  table.odin-liste small { display: block; }
}

/* Dateiauswahl (Gemeinsam/static/dateiwahl.js): Das Browserfeld ist
 * unsichtbar, ein Knopf im Odin-Stil öffnet es, daneben stehen die gewählten
 * Dateien. position: relative am Rahmen, damit das 1-px-Feld keine Seite
 * verbreitert. */
.datei-feld { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.dateiwahl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.datei-knopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; cursor: pointer;
  color: var(--odin-text); background: #e3e9ef; border: 1px solid var(--odin-linie); border-radius: var(--odin-radius);
  font-weight: 650;
}
.datei-knopf:hover { background: #d5e0ea; }
.dateiwahl:focus-visible + .datei-knopf { outline: 2px solid var(--odin-akzent); outline-offset: 2px; }
.datei-knopf svg { flex: none; }
.dateiwahl-anzeige { min-width: 0; color: var(--odin-text-2); font-size: .9rem; font-weight: 400; overflow-wrap: anywhere; }