/* =====================================================================
   Stenger Projektplanung — Stylesheet
   ---------------------------------------------------------------------
   Einsatzumgebung: Desktop im Büro UND Tablets in der Produktionshalle.
   Bedienung teilweise mit Arbeitshandschuhen, helles Streulicht,
   kein Hover. Daraus folgt alles Weitere:

     - Tippflächen mindestens 56 × 56 px, Abstand mindestens 12 px
     - Fließtext 18 px, Eingabefelder 18 px und mindestens 56 px hoch
     - Tabellenzeilen mindestens 48 px, Seitenrand mindestens 20 px
     - Kontrast mindestens 4.5:1, keine Aussage allein über Farbe
     - Sichtbarer :active-Zustand, sichtbare Fokusringe
     - Keine Abhängigkeit von :hover — auf dem Tablet gibt es keinen

   Technik: reines CSS, keine Frameworks, keine Web-Fonts, kein Build.
   Strenge CSP: kein `style`-Attribut im Markup. Alles, was aussieht wie
   ein dynamischer Wert (Fortschrittsbalken), läuft deshalb über
   vorbereitete Stufenklassen — siehe Abschnitt "Fortschritt".
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Farb- und Maßwerte
   --------------------------------------------------------------------- */

:root {
  /* Leitfarben (Hausfarben — nicht verändern) */
  --navy:        #1B2A4A;   /* Kopfzeilen, Überschriften */
  --navy-dark:   #121D33;   /* Kopfzeile, aktive Zustände */
  --navy-light:  #2E4370;   /* Akzente, Rahmen */
  --bg:          #FFFFFF;   /* Grundfläche */
  --bg-alt:      #F4F6FA;   /* Abschnittshintergrund, Tabellenzeilen */
  --text:        #14181F;   /* Fließtext */
  --text-muted:  #4A5568;   /* Hilfstext – nicht heller als das */
  --border:      #C6CEDC;
  /* Rahmen von EINGABEFELDERN. Deutlich dunkler als --border: der
     2px-Rahmen ist die einzige Feldabgrenzung (weiss auf weiss), und
     #C6CEDC erreicht auf Weiss nur 1.58:1 — unter dem Blendlicht der
     Halle verschwinden die Feldgrenzen. #6B7788 = 4.55:1, erfuellt die
     3:1-Anforderung fuer Bedienelement-Grenzen. Zier-Rahmen (Karten,
     Linien) bleiben bewusst hell. */
  --feld-rahmen: #6B7788;
  /*
   * AKZENT DER IDENTITAET - dieselbe Farbe wie --warn, aber eine andere
   * BEDEUTUNG. Bisher stand die Kennzeichnung des aktiven Reiters auf
   * var(--warn); damit hiess dieselbe Farbe an einer Stelle "hier bist
   * du" und an der anderen "Achtung". Wer die Statusfarbe spaeter
   * anpasst, verschiebt sonst unbemerkt die Markenfarbe mit.
   */
  --akzent:      #B25E00;   /* Stenger-Akzent: Marke, aktive Seite */

  --ok:          #1E7A3E;   /* erledigt, vollbesetzt */
  --warn:        #B25E00;   /* in Arbeit, teilbesetzt, Warnung */
  --error:       #B3261E;   /* überfällig, nicht besetzbar, Fehler */

  /* Abgeleitete Flächen- und Textfarben für Plaketten und Banner.
     Alle Kombinationen sind auf mindestens 4.5:1 geprüft. */
  --ok-flaeche:      #E4F1E9;
  --ok-text:         #14602F;
  --warn-flaeche:    #FBEEDF;
  --warn-text:       #8A4900;
  --error-flaeche:   #FBE9E7;
  --error-text:      #8C1D18;
  --info-flaeche:    #E3EAF7;
  --info-text:       #2E4370;
  --neutral-flaeche: #EEF1F7;
  --neutral-text:    #1B2A4A;
  --grau-flaeche:    #EDEFF2;
  --grau-text:       #4A5568;

  /* Maße */
  --tippflaeche:  56px;   /* Mindestgröße jeder Tippfläche */
  --tippabstand:  12px;   /* Mindestabstand zwischen Tippflächen */
  --zeilenhoehe:  48px;   /* Mindesthöhe einer Tabellenzeile */
  --seitenrand:   20px;   /* Mindestrand der Seite */
  --radius:        6px;
  --radius-gross: 10px;
  --kante-akzent:  8px;   /* linke Akzentkante von Karten und Befunden */

  /* Abstandsraster */
  --abstand-xs:  4px;
  --abstand-s:   8px;
  --abstand-m:  16px;
  --abstand-l:  24px;
  --abstand-xl: 40px;

  /* Schrift */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fokusring — nie entfernen, höchstens ersetzen */
  --fokus-farbe: #1B2A4A;
  --fokus-farbe-hell: #FFFFFF;
  --fokus-breite: 3px;
  --fokus-abstand: 2px;

  --schatten: 0 1px 2px rgba(18, 29, 51, .12), 0 2px 8px rgba(18, 29, 51, .08);
  --uebergang: 120ms ease-out;
}

/* ---------------------------------------------------------------------
   2. Grundgerüst / Reset
   --------------------------------------------------------------------- */

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

html {
  /* 112.5 % von 16 px = 18 px Grundschrift. Prozent statt px, damit die
     Schriftgröße aus den Browsereinstellungen weiter greift. */
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--schrift);
  font-size: 1rem;              /* = 18 px */
  line-height: 1.6;             /* im Korridor 1.5–1.75 */
  color: var(--text);
  background: var(--bg-alt);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--abstand-s);
  color: var(--navy);
  line-height: 1.3;
  font-weight: 700;
}

h1 { font-size: 1.72rem; }
h2 { font-size: 1.33rem; }
h3 { font-size: 1.11rem; }
h4 { font-size: 1rem; text-transform: none; }

p { margin: 0 0 var(--abstand-m); }

/* Fließtext auf lesbare Zeilenlänge begrenzen (65–75 Zeichen). */
.fliesstext { max-width: 68ch; }

a {
  color: var(--navy-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:active { color: var(--navy-dark); }

img { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 var(--abstand-m); padding-left: 1.4em; }
li { margin-bottom: var(--abstand-xs); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--abstand-l) 0;
}

code, .einheit-technisch {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .89em;
}

[hidden] { display: none !important; }

/* Nur im Ausdruck sichtbar (siehe Abschnitt "Druck"). */
.nur-druck, .druck-kopf { display: none; }

/* ---------------------------------------------------------------------
   3. Fokus — sichtbar, überall, in beiden Kontrastwelten
   --------------------------------------------------------------------- */

/* Die Reihenfolge in diesem Abschnitt ist wichtig:
   1. Grundring
   2. Sonderfälle für dunkle Flächen (höhere Spezifität)
   3. Zurücknahme bei Mausbedienung — MUSS zuletzt stehen, weil sie
      dieselbe Spezifität hat wie die Sonderfälle und nur über die
      Quellreihenfolge gewinnt. */

:focus {
  outline: var(--fokus-breite) solid var(--fokus-farbe);
  outline-offset: var(--fokus-abstand);
}

/* (2a) Element liegt AUF einer navyfarbenen Fläche: heller Ring außen. */
.kopfleiste a:focus,
.kopfleiste button:focus,
.reiter-link:focus,
.knopf--abmelden:focus {
  outline-color: var(--fokus-farbe-hell);
}

/* (2b) Element IST dunkel und liegt auf hellem Grund. Ein weißer Ring
   wäre auf der Seite unsichtbar, ein navyfarbener auf dem Knopf.
   Deshalb beides: heller Ring innen, dunkler Ring außen. */
.knopf--primaer:focus,
.knopf--gefahr:focus {
  outline-color: var(--fokus-farbe-hell);
  outline-offset: calc(-2px - var(--fokus-breite));
  box-shadow: 0 0 0 var(--fokus-breite) var(--navy-dark);
}

/* (3) Wo :focus-visible unterstützt wird, den Ring nur bei Tastatur- und
   Stiftbedienung zeigen — aber niemals ersatzlos entfernen. */
@supports selector(:focus-visible) {
  :focus:not(:focus-visible) {
    outline: none;
    /* box-shadow mit zurücknehmen, sonst bliebe bei den dunklen Knöpfen
       nach einem Mausklick ein Ring stehen. */
    box-shadow: none;
  }
  /* Kein eigener :focus-visible-Block nötig: wer :focus-visible ist, ist
     auch :focus — die Ringe aus (1), (2a) und (2b) greifen also weiter. */
}

/* Sprungmarke für Tastaturbedienung */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--bg);
  color: var(--navy);
  padding: var(--abstand-m) var(--abstand-l);
  min-height: var(--tippflaeche);
  font-weight: 700;
  border: 3px solid var(--navy);
  border-radius: 0 0 var(--radius) 0;
}
.sprungmarke:focus { left: 0; }

/* Nur für Screenreader */
.nur-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   4. TESTSYSTEM-Banner
   Muss unübersehbar sein und auch im Ausdruck stehen bleiben, damit ein
   ausgedrucktes Testblatt nie mit dem Echtsystem verwechselt wird.
   --------------------------------------------------------------------- */

.testsystem-banner {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-m);
  min-height: 52px;
  padding: var(--abstand-s) var(--seitenrand);
  background:
    repeating-linear-gradient(
      135deg,
      var(--error) 0 22px,
      #8C1D18 22px 44px
    );
  color: #FFFFFF;
  font-size: 1.11rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 4px solid #6E1712;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.testsystem-banner::before,
.testsystem-banner::after {
  content: "\26A0";     /* Warndreieck, rein dekorativ */
  font-size: 1.3em;
  line-height: 1;
}

.testsystem-banner-zusatz {
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
}

/* ---------------------------------------------------------------------
   5. Kopfleiste
   --------------------------------------------------------------------- */

/*
 * KOPFHOEHE.
 *
 * Kopf, Bereichszeile und Navigation nahmen zusammen so viel Platz, dass
 * die Ueberschrift der Seite auf einem 1024er Tablet erst bei y=301
 * begann - auf einem 900 px hohen Bildschirm war ein Drittel weg, bevor
 * etwas Inhalt kam. Auf schmalen Geraeten brachte die umgebrochene
 * Navigation allein rund 540 px.
 *
 * Die Tippflaechen bleiben 44 px hoch (Handschuhbedienung), aber die
 * Polsterung ringsum wird knapper und die Marke einzeilig.
 */
.kopfleiste {
  background: var(--navy-dark);
  color: #FFFFFF;
  padding: 6px var(--seitenrand);
}

.kopfleiste-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tippabstand);
  max-width: 1600px;
  margin: 0 auto;
  min-height: 68px;
}

.kopf-marke {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: auto;
  text-decoration: none;
  color: #FFFFFF;
  padding: var(--abstand-xs) 0;
}
.kopf-marke:active { color: #FFFFFF; }

/*
 * Die Wortmarke uebernimmt die Behandlung des A4-Belegs
 * (bestellung-druck.css): gesperrte Versalien, versaler Zusatz, ein
 * Akzent an der Kante. Der warn-Ton zitiert die aktive-Reiter-Linie —
 * kein neuer Zustandston, derselbe Akzent an zwei Stellen.
 */
.kopf-marke {
  padding-left: var(--abstand-m);
  border-left: 4px solid var(--warn);
}

.kopf-marke-name {
  font-size: 1.17rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.2;
}

.kopf-marke-zusatz {
  font-size: .78rem;
  color: #C3CEE4;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Der eigene Name oben rechts fuehrt zu "Meine Daten" — als Verweis
   erkennbar durch die Unterstreichung, im Kopfweiss gehalten. */
.kopf-benutzer-name--verweis {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: #C3CEE4;
  text-underline-offset: 3px;
  border-radius: var(--radius);
}
.kopf-benutzer-name--verweis:hover,
.kopf-benutzer-name--verweis:focus-visible {
  text-decoration-color: #FFFFFF;
}

.kopf-benutzer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
  padding: 0 var(--abstand-s);
  min-height: var(--tippflaeche);
}

.kopf-benutzer-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.kopf-benutzer-rolle {
  font-size: .83rem;
  color: #C3CEE4;
  line-height: 1.3;
}

/* Abmelden ist immer sichtbar und erfüllt die 56-px-Regel. */
.abmelden-formular { margin: 0; display: flex; }

.knopf--abmelden {
  background: transparent;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
}
.knopf--abmelden:active {
  background: #FFFFFF;
  color: var(--navy-dark);
}

/* ---------------------------------------------------------------------
   6. Reiternavigation
   --------------------------------------------------------------------- */

.reiter {
  background: var(--navy);
  border-bottom: 4px solid var(--navy-dark);
  /*
   * Zwei Gruppen in einer Leiste: Arbeitsflaechen links, Werkzeuge
   * rechts. Auf breiten Bildschirmen nebeneinander, auf schmalen
   * untereinander - beides ohne dass etwas verschwindet.
   */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--abstand-l);
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--seitenrand);
}

.reiter-liste {
  /*
   * UMBRECHEN, nicht scrollen.
   *
   * Vorher stand hier nowrap mit overflow-x: auto. Auf einem schmalen
   * Bildschirm verschwanden dadurch die letzten Reiter — "Verwaltung" war
   * schlicht nicht da, ohne jeden Hinweis, dass man seitwaerts wischen
   * muesste. Auf einem Hallen-Tablet, das mit Handschuhen bedient wird,
   * findet das niemand.
   *
   * Mit Umbruch wird die Leiste auf schmalen Geraeten zwei- oder dreizeilig.
   * Das kostet Platz, versteckt aber nichts.
   */
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.reiter-liste li { margin: 0; flex: 0 0 auto; }

/*
 * Die Werkzeuggruppe wird LEISER gesetzt, nicht kleiner: dieselbe
 * Trefferflaeche, dieselbe Schriftgroesse, nur weniger Kontrast und
 * normale statt halbfetter Schrift. Ein Hallen-Tablet wird mit
 * Handschuhen bedient - eine zurueckgenommene Schaltflaeche darf nicht
 * auch eine kleinere sein.
 */
.reiter-liste--werkzeug { margin-left: auto; }

.reiter-link--werkzeug {
  color: #A9B6CE;
  font-weight: 500;
}

.reiter-link--werkzeug:hover { color: #FFFFFF; }

.reiter-link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44 px ist die Untergrenze fuer eine Tippflaeche (WCAG 2.5.5 / Apple
     HIG). 56 px waren komfortabel, kosteten aber bei drei Reihen 168 px
     allein fuer die Navigation. */
  min-height: 44px;
  padding: 0 var(--abstand-s);
  border-radius: var(--radius);
  border: 2px solid transparent;
  color: #E4EAF6;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}

.reiter-link:active {
  background: var(--navy-dark);
  color: #FFFFFF;
}

/* Aktiver Reiter: nicht nur farblich, sondern auch über Fläche,
   Rahmen und Schriftschnitt erkennbar. */
.reiter-link[aria-current="page"] {
  background: var(--bg);
  color: var(--navy-dark);
  border-color: var(--bg);
  font-weight: 800;
  box-shadow: inset 0 -4px 0 var(--akzent);
}

/* ---------------------------------------------------------------------
   7. Seitenaufbau
   --------------------------------------------------------------------- */

.inhalt {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--abstand-l) var(--seitenrand) var(--abstand-xl);
}

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tippabstand);
  margin-bottom: var(--abstand-l);
}

.seitenkopf-text { min-width: 0; }

.seitenkopf-hinweis {
  margin: var(--abstand-xs) 0 0;
  color: var(--text-muted);
  font-size: .94rem;
}

.abschnitt {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-gross);
  padding: var(--abstand-l);
  margin-bottom: var(--abstand-l);
}

.abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tippabstand);
  margin-bottom: var(--abstand-m);
}

.abschnitt-kopf h2, .abschnitt-kopf h3 { margin: 0; }

.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tippabstand);
  margin-bottom: var(--abstand-l);
}

.knopfleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tippabstand);
}

.knopfleiste--rechts { justify-content: flex-end; }

.fussleiste {
  flex: 0 0 auto;
  background: var(--navy-dark);
  color: #C3CEE4;
  padding: var(--abstand-m) var(--seitenrand);
  font-size: .89rem;
}

.fussleiste-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  max-width: 1600px;
  margin: 0 auto;
}

.fussleiste a { color: #FFFFFF; }

/* ---------------------------------------------------------------------
   8. Schaltflächen
   --------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-s);
  min-height: var(--tippflaeche);
  min-width: var(--tippflaeche);
  padding: 0 var(--abstand-l);
  border-radius: var(--radius);
  border: 2px solid var(--navy);
  background: var(--bg);
  color: var(--navy);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--uebergang), transform var(--uebergang);
}

.knopf:active { transform: translateY(1px); }

.knopf--primaer {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}
.knopf--primaer:active { background: var(--navy-dark); border-color: var(--navy-dark); }

.knopf--sekundaer {
  background: var(--bg);
  border-color: var(--navy-light);
  color: var(--navy);
}
.knopf--sekundaer:active { background: var(--neutral-flaeche); }

.knopf--gefahr {
  background: var(--error);
  border-color: var(--error);
  color: #FFFFFF;
}
.knopf--gefahr:active { background: #8C1D18; border-color: #8C1D18; }

.knopf--still {
  background: transparent;
  border-color: transparent;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.knopf--still:active { background: var(--neutral-flaeche); }

.knopf--klein {
  min-height: var(--tippflaeche);   /* Höhe bleibt — nur schmaler */
  padding: 0 var(--abstand-m);
  font-size: .94rem;
}

.knopf--breit { width: 100%; }

.knopf[disabled],
.knopf[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* Ladezustand: verhindert Doppelklick und zeigt den Status an. */
.knopf.laedt { pointer-events: none; opacity: .75; }
.knopf.laedt::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: kreisel 700ms linear infinite;
}

@keyframes kreisel { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   9. Formulare — Beschriftung immer ÜBER dem Feld
   --------------------------------------------------------------------- */

.formular {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-l);
  /*
   * 720px halten Fliesstext-Formulare lesbar: ein Eingabefeld ueber
   * die ganze Breite eines 1600px-Bildschirms zu ziehen, macht das
   * Ausfuellen anstrengender, nicht leichter.
   */
  max-width: 720px;
}

/*
 * Ausnahme fuer Formulare mit einer breiten Tabelle darin.
 *
 * Die Bestellerfassung hat sieben Artikelspalten. An der 720px-Grenze
 * musste man dafuer seitwaerts scrollen, waehrend daneben ueber 600px
 * ungenutzt blieben — auf einem 1440px-Bildschirm bekam die Tabelle
 * gerade 718px ab. Die Kopffelder bleiben trotzdem lesbar schmal:
 * das Kachelfeld begrenzt sich unten selbst.
 */
.formular--breit { max-width: none; }

.formular-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-l);
}
.formular-reihe > .feld { flex: 1 1 260px; }

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  min-width: 0;
}

.feld-beschriftung {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}

.pflicht-zeichen {
  color: var(--error-text);
  font-weight: 800;
  margin-left: .2em;
}

.feld-hilfe {
  font-size: .89rem;
  color: var(--text-muted);
  line-height: 1.5;
}

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"],
input[type="time"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%;
  min-height: var(--tippflaeche);
  padding: var(--abstand-s) var(--abstand-m);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--feld-rahmen);
  border-radius: var(--radius);
}

/* appearance:none nur dort, wo es gebraucht wird. Bei date/time würde es
   auf iOS die native Auswahl unbrauchbar machen — und genau die ist auf
   dem Tablet die einzige vernünftige Art, ein Datum einzugeben. */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="tel"],
input[type="url"], textarea {
  -webkit-appearance: none;
  appearance: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  /* Pfeil als Hintergrund-SVG (data-URI, kein externer Zugriff). */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%231B2A4A' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--abstand-m) center;
  background-size: 20px 20px;
  padding-right: calc(var(--abstand-m) * 2 + 20px);
}

textarea { min-height: 132px; resize: vertical; }

input:active, select:active, textarea:active { border-color: var(--navy-light); }

input[readonly], input[disabled],
select[disabled], textarea[disabled] {
  background: var(--grau-flaeche);
  color: var(--text-muted);
  cursor: not-allowed;
}

::placeholder { color: var(--text-muted); opacity: 1; }

/* Fehlerhaftes Feld: Rahmen UND Meldung im Klartext direkt darunter. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--error);
  border-width: 3px;
  background: var(--error-flaeche);
}

.feld-fehler {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
  font-size: .94rem;
  font-weight: 700;
  color: var(--error-text);
}
.feld-fehler::before { content: "\26A0"; font-size: 1.1em; line-height: 1.4; }

/* Kontrollkästchen und Auswahlknöpfe als große Tippflächen */
.ankreuzfeld {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  min-height: var(--tippflaeche);
  padding: var(--abstand-s) var(--abstand-m);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
}

.ankreuzfeld:active { background: var(--neutral-flaeche); }

.ankreuzfeld input[type="checkbox"],
.ankreuzfeld input[type="radio"] {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0;
  accent-color: var(--navy);
  cursor: pointer;
}

.ankreuzfeld-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tippabstand);
}

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--abstand-m);
  margin: 0;
}

legend {
  padding: 0 var(--abstand-s);
  font-weight: 700;
  color: var(--navy);
}

/* ---------------------------------------------------------------------
   10. Statusplaketten
   Regel: Ein Status wird NIE allein über die Farbe transportiert.
   Jede Plakette trägt ein Zeichen (Form) und den Klartext.
   --------------------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-s);
  padding: 5px var(--abstand-m) 5px var(--abstand-s);
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: .89rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.status::before {
  font-size: 1.05em;
  line-height: 1;
  font-weight: 800;
}

/* Vorgangsstatus */
.status--offen {
  background: var(--neutral-flaeche);
  color: var(--neutral-text);
}
.status--offen::before { content: "\25CB"; }        /* ○ leerer Kreis */

.status--in-arbeit {
  background: var(--info-flaeche);
  color: var(--info-text);
}
.status--in-arbeit::before { content: "\25D0"; }    /* ◐ halb gefüllt */

.status--erledigt {
  background: var(--ok-flaeche);
  color: var(--ok-text);
}
.status--erledigt::before { content: "\2713"; }     /* ✓ Haken */

.status--ueberfaellig {
  background: var(--error-flaeche);
  color: var(--error-text);
  border-width: 3px;
}
.status--ueberfaellig::before { content: "\25B2"; } /* ▲ Dreieck */

.status--nicht-relevant {
  background: var(--grau-flaeche);
  color: var(--grau-text);
  border-style: dashed;
}

/* Urlaub ist kein Fehlerzustand. Die Teamtabelle nutzte dafuer das
   Alarm-Rot der ueberfaelligen Fristen — bei sechs Wochen mal allen
   Personen wird die Tabelle laut, und das echte Rot verliert seinen
   Wert. Grau, gestrichelt, eigenes Zeichen. */
.status--abwesend {
  background: var(--grau-flaeche);
  color: var(--grau-text);
  border-style: dashed;
}
.status--abwesend::before { content: "\2715"; }    /* ✕ */
.status--nicht-relevant::before { content: "\2715"; } /* ✕ */

/* Besetzungsstatus */
.status--vollbesetzt {
  background: var(--ok-flaeche);
  color: var(--ok-text);
}
.status--vollbesetzt::before { content: "\2713"; }

.status--teilbesetzt {
  background: var(--warn-flaeche);
  color: var(--warn-text);
}
.status--teilbesetzt::before { content: "\25D0"; }

.status--nicht-besetzbar {
  background: var(--error-flaeche);
  color: var(--error-text);
  border-width: 3px;
}
.status--nicht-besetzbar::before { content: "\2715"; }

/* Projektphase / neutrale Marke ohne Wertung */
.marke {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--abstand-s);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--navy);
  font-size: .83rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.markenreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
}

/* ---------------------------------------------------------------------
   11. Datenlücke
   Ein Feld ohne erfassten Wert. Muss sich deutlich von einer echten
   Null unterscheiden — deshalb gestrichelter Rahmen und Gedankenstrich,
   niemals "0".
   --------------------------------------------------------------------- */

.datenluecke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 32px;
  padding: 0 var(--abstand-s);
  border: 2px dashed var(--warn);
  border-radius: var(--radius);
  background: repeating-linear-gradient(
    45deg,
    transparent 0 6px,
    rgba(178, 94, 0, .09) 6px 12px
  );
  color: var(--warn-text);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
}

/* Wird als Tabellenzelle verwendet, hilft ein Klartext für Screenreader:
   <td><span class="datenluecke" title="Kein Wert erfasst">–<span
   class="nur-screenreader">kein Wert erfasst</span></span></td> */

td > .datenluecke, th > .datenluecke { min-width: 48px; }

/* ---------------------------------------------------------------------
   12. Fortschritt — "Stand Vorbereitung" / "Stand Erledigung"
   Der Prozentwert steht IMMER auch als Text da, nicht nur als Balken.
   Die Breite läuft über Stufenklassen in 5er-Schritten, weil die CSP
   kein style-Attribut erlaubt. dom.js:setzeFortschritt() setzt sie.
   --------------------------------------------------------------------- */

.fortschritt-gruppe {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.fortschritt-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-s);
  margin-bottom: 6px;
}

.fortschritt-name {
  font-size: .94rem;
  font-weight: 700;
  color: var(--navy);
}

.fortschritt-wert {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.fortschritt-bahn {
  position: relative;
  height: 20px;
  border: 2px solid var(--navy-light);
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}

.fortschritt-balken {
  display: block;
  height: 100%;
  width: 0;
  background: var(--navy-light);
  border-radius: 999px 0 0 999px;
  transition: width 200ms ease-out;
}

/* Der Erledigungsbalken bekommt zusätzlich eine Schraffur, damit sich
   die beiden Balken auch im Graustufendruck unterscheiden lassen. */
.fortschritt--erledigung .fortschritt-balken {
  background:
    repeating-linear-gradient(
      45deg,
      var(--ok) 0 7px,
      #176935 7px 14px
    );
}
.fortschritt--erledigung .fortschritt-bahn { border-color: var(--ok); }

.fortschritt--geschaetzt .fortschritt-bahn { border-style: dashed; }

.fortschritt-fussnote {
  margin-top: 4px;
  font-size: .83rem;
  color: var(--text-muted);
}

/* Stufenklassen 0–100 in 5er-Schritten */
.fortschritt-balken--0   { width: 0; }
.fortschritt-balken--5   { width: 5%; }
.fortschritt-balken--10  { width: 10%; }
.fortschritt-balken--15  { width: 15%; }
.fortschritt-balken--20  { width: 20%; }
.fortschritt-balken--25  { width: 25%; }
.fortschritt-balken--30  { width: 30%; }
.fortschritt-balken--35  { width: 35%; }
.fortschritt-balken--40  { width: 40%; }
.fortschritt-balken--45  { width: 45%; }
.fortschritt-balken--50  { width: 50%; }
.fortschritt-balken--55  { width: 55%; }
.fortschritt-balken--60  { width: 60%; }
.fortschritt-balken--65  { width: 65%; }
.fortschritt-balken--70  { width: 70%; }
.fortschritt-balken--75  { width: 75%; }
.fortschritt-balken--80  { width: 80%; }
.fortschritt-balken--85  { width: 85%; }
.fortschritt-balken--90  { width: 90%; }
.fortschritt-balken--95  { width: 95%; }
.fortschritt-balken--100 { width: 100%; border-radius: 999px; }

/* ---------------------------------------------------------------------
   13. Projektkarten
   --------------------------------------------------------------------- */

.projektgitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--abstand-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.projektkarte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: var(--kante-akzent) solid var(--navy-light);
  border-radius: var(--radius-gross);
  padding: var(--abstand-l);
  box-shadow: var(--schatten);
  margin: 0;
}

/* Randfarbe nach Projektstatus — zusätzlich zur Statusplakette,
   nie als alleiniger Träger der Information. */
.projektkarte--geplant       { border-left-color: var(--navy-light); }
.projektkarte--vorbereitung  { border-left-color: var(--warn); }
.projektkarte--laufend       { border-left-color: var(--navy); }
.projektkarte--abgeschlossen { border-left-color: var(--ok); }
.projektkarte--abgesagt      { border-left-color: var(--text-muted); }
.projektkarte--kritisch      { border-left-color: var(--error); }

.projektkarte-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--abstand-s);
}

.projektkarte-titel {
  margin: 0;
  font-size: 1.17rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
}

.projektkarte-titel a { color: inherit; text-decoration: none; }
.projektkarte-titel a:active { text-decoration: underline; }

.projektkarte-code {
  display: block;
  font-size: .83rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .04em;
}

.projektkarte-zeitraum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-s);
  font-size: .94rem;
  color: var(--text);
  font-weight: 600;
}

/* Kein Emoji als Zeitraum-Marke: Emoji werden je nach Gerät farbig und
   im Ausdruck grau. Ein schlichter Balken bleibt überall gleich. */
.projektkarte-zeitraum::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--navy-light);
}

.projektkarte-daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--abstand-m);
  margin: 0;
  font-size: .94rem;
}

.projektkarte-daten dt { color: var(--text-muted); font-weight: 600; }
.projektkarte-daten dd { margin: 0; font-weight: 600; }

.projektkarte-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tippabstand);
  margin-top: auto;
  padding-top: var(--abstand-m);
  border-top: 1px solid var(--border);
}

.projektkarte-besetzung {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  font-size: .94rem;
}

/* ---------------------------------------------------------------------
   14. Tabellen
   --------------------------------------------------------------------- */

.tabellen-huelle {
  /*
   * position: relative ist hier KEINE Kosmetik.
   *
   * Ohne sie ist die Huelle kein Bezugsrahmen fuer absolut positionierte
   * Nachfahren — und .nur-screenreader IST absolut positioniert. Ein
   * Vorleser-Text weit rechts in einer breiten Tabelle wird dann nicht
   * mitgerollt, sondern entkommt der Huelle und verbreitert das ganze
   * Dokument. Ergebnis: die Seite laesst sich seitwaerts schieben,
   * obwohl sichtbar nichts zu breit ist — auf einem Tablet in der Halle
   * sehr laestig und sehr schwer zu erklaeren.
   *
   * Gemessen auf /bestellliste bei 768 px: 919 px Dokumentbreite ohne,
   * 768 px mit dieser Zeile.
   */
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-gross);
  background: var(--bg);
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.tabelle caption {
  text-align: left;
  padding: var(--abstand-m) var(--abstand-m) var(--abstand-s);
  font-weight: 700;
  color: var(--navy);
}

.tabelle th, .tabelle td {
  padding: var(--abstand-m) var(--abstand-m);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

.tabelle thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--navy);
  color: #FFFFFF;
  font-size: .89rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--navy-dark);
  white-space: nowrap;
}

.tabelle tbody tr { min-height: var(--zeilenhoehe); }
.tabelle tbody td { height: var(--zeilenhoehe); }

.tabelle tbody tr:nth-child(even) { background: var(--bg-alt); }
.tabelle tbody tr:last-child td { border-bottom: 0; }

.tabelle tbody tr:active { background: var(--info-flaeche); }

.tabelle tbody tr[aria-selected="true"] {
  background: var(--info-flaeche);
  box-shadow: inset 4px 0 0 var(--navy);
}

.tabelle .spalte-zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabelle .spalte-aktionen {
  text-align: right;
  white-space: nowrap;
}

.tabelle .spalte-schmal { width: 1%; white-space: nowrap; }

/* Zeile mit Befund hervorheben — plus Symbol in der ersten Zelle. */
.tabelle tbody tr.zeile--warnung { background: var(--warn-flaeche); }
.tabelle tbody tr.zeile--fehler  { background: var(--error-flaeche); }
.tabelle tbody tr.zeile--erledigt td { color: var(--text-muted); }

/* ---------------------------------------------------------------------
   15. Befund-Banner (Doppelbelegung, Datenlücke, Fristüberschreitung)
   --------------------------------------------------------------------- */

.befund {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--abstand-m);
  padding: var(--abstand-m) var(--abstand-l);
  border: 2px solid var(--border);
  border-left-width: 10px;
  border-radius: var(--radius-gross);
  background: var(--bg);
  margin-bottom: var(--abstand-m);
}

.befund-zeichen {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 800;
}

.befund-text-block { flex: 1 1 320px; min-width: 0; }

.befund-titel {
  margin: 0 0 var(--abstand-xs);
  font-size: 1.11rem;
  font-weight: 800;
  line-height: 1.35;
}

.befund-text { margin: 0; line-height: 1.6; }

.befund-vorschlag {
  margin: var(--abstand-s) 0 0;
  padding: var(--abstand-s) var(--abstand-m);
  background: var(--bg-alt);
  border-left: 4px solid var(--navy-light);
  border-radius: var(--radius);
  font-size: .94rem;
}

.befund-vorschlag::before {
  content: "Vorschlag: ";
  font-weight: 800;
  color: var(--navy);
}

.befund-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tippabstand);
  align-items: center;
}

.befund--info {
  border-color: var(--navy-light);
  background: var(--info-flaeche);
  color: var(--info-text);
}
.befund--info .befund-zeichen::before { content: "\2139"; }

.befund--warnung {
  border-color: var(--warn);
  background: var(--warn-flaeche);
  color: var(--warn-text);
}
.befund--warnung .befund-zeichen::before { content: "\26A0"; }

.befund--fehler {
  border-color: var(--error);
  background: var(--error-flaeche);
  color: var(--error-text);
}
.befund--fehler .befund-zeichen::before { content: "\2715"; }

.befund--erfolg {
  border-color: var(--ok);
  background: var(--ok-flaeche);
  color: var(--ok-text);
}
.befund--erfolg .befund-zeichen::before { content: "\2713"; }

.befund .befund-titel, .befund .befund-text { color: inherit; }

/* ---------------------------------------------------------------------
   16. Liste "Zu klären"
   --------------------------------------------------------------------- */

.zu-klaeren {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tippabstand);
}

.zu-klaeren-punkt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--abstand-m);
  margin: 0;
  padding: var(--abstand-m);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: var(--kante-akzent) solid var(--warn);
  border-radius: var(--radius);
}

.zu-klaeren-punkt--fehler { border-left-color: var(--error); }
.zu-klaeren-punkt--info   { border-left-color: var(--navy-light); }

.zu-klaeren-punkt.ist-quittiert {
  background: var(--bg-alt);
  border-left-color: var(--text-muted);
}
.zu-klaeren-punkt.ist-quittiert .zu-klaeren-titel {
  text-decoration: line-through;
  color: var(--text-muted);
}

.zu-klaeren-haupt { flex: 1 1 300px; min-width: 0; }

.zu-klaeren-titel {
  margin: 0 0 var(--abstand-xs);
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}

.zu-klaeren-text {
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
}

.zu-klaeren-herkunft {
  margin-top: var(--abstand-xs);
  font-size: .83rem;
  color: var(--text-muted);
}

.zu-klaeren-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tippabstand);
  align-items: center;
}

/* ---------------------------------------------------------------------
   17. Meldungen (Toasts)
   --------------------------------------------------------------------- */

.meldungen {
  position: fixed;
  right: var(--seitenrand);
  bottom: var(--seitenrand);
  /* Der zweite (dringende) Behaelter stapelt ueber dem ersten, damit
     sich Fehler und Erfolgsmeldungen nicht ueberdecken. */
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--tippabstand);
  width: min(460px, calc(100vw - 2 * var(--seitenrand)));
  pointer-events: none;
}

.meldungen--dringend { bottom: calc(var(--seitenrand) + 180px); }

.meldung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-m);
  padding: var(--abstand-m);
  border: 2px solid var(--navy);
  border-left-width: 10px;
  border-radius: var(--radius-gross);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 6px 20px rgba(18, 29, 51, .28);
  pointer-events: auto;
  animation: meldung-ein 160ms ease-out;
}

.meldung.geht { animation: meldung-aus 160ms ease-in forwards; }

@keyframes meldung-ein {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes meldung-aus {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(12px); }
}

.meldung-zeichen {
  flex: 0 0 auto;
  font-size: 1.33rem;
  line-height: 1.35;
  font-weight: 800;
}

.meldung-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.meldung-titel {
  display: block;
  font-weight: 800;
  margin-bottom: 2px;
}

.meldung-schliessen {
  flex: 0 0 auto;
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  margin: calc(-1 * var(--abstand-s)) calc(-1 * var(--abstand-s)) 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 1.33rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.meldung-schliessen:active { background: rgba(18, 29, 51, .12); }

.meldung--erfolg  { border-color: var(--ok);         background: var(--ok-flaeche);    color: var(--ok-text); }
.meldung--erfolg  .meldung-zeichen::before { content: "\2713"; }
.meldung--warnung { border-color: var(--warn);       background: var(--warn-flaeche);  color: var(--warn-text); }
.meldung--warnung .meldung-zeichen::before { content: "\26A0"; }
.meldung--fehler  { border-color: var(--error);      background: var(--error-flaeche); color: var(--error-text); }
.meldung--fehler  .meldung-zeichen::before { content: "\2715"; }
.meldung--info    { border-color: var(--navy-light); background: var(--info-flaeche);  color: var(--info-text); }
.meldung--info    .meldung-zeichen::before { content: "\2139"; }

/* ---------------------------------------------------------------------
   18. Leerzustand
   --------------------------------------------------------------------- */

.leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-m);
  text-align: center;
  padding: var(--abstand-xl) var(--abstand-l);
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: var(--radius-gross);
  color: var(--text-muted);
}

.leer-zeichen {
  font-size: 2.7rem;
  line-height: 1;
  color: var(--navy-light);
}

.leer-titel {
  margin: 0;
  font-size: 1.17rem;
  font-weight: 800;
  color: var(--navy);
}

.leer-text {
  margin: 0;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.6;
}

.leer-aktion { margin-top: var(--abstand-s); }

/* ---------------------------------------------------------------------
   19. Kleinteile
   --------------------------------------------------------------------- */

.kennzahl-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--abstand-m);
  margin-bottom: var(--abstand-l);
}

/*
 * KENNZAHLEN — ruhiger und anklickbar.
 *
 * Vorher: 6 px farbiger Balken oben auf jeder Kachel, dazu Schlagschatten
 * und grosszuegige Polsterung. Sechs davon in einer Reihe ergaben ein
 * unruhiges Band aus farbigen Streifen, das mehr Aufmerksamkeit zog als
 * die Zahlen darin - und beim Anklicken passierte nichts.
 *
 * Jetzt: eine ruhige Flaeche mit feiner Linie, der Status als schmaler
 * Streifen LINKS (in Leserichtung neben der Zahl, nicht als Deckel
 * darueber), kein Schatten. Jede Kachel ist ein Verweis auf die Liste,
 * die sie zaehlt.
 */
.kennzahl {
  position: relative;
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--abstand-m) var(--abstand-l);
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease, background-color .12s ease;
}

a.kennzahl:hover {
  background: var(--bg-alt);
  border-color: var(--navy);
}

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

.kennzahl--warnung { border-left-color: var(--warn); }
.kennzahl--fehler  { border-left-color: var(--error); }
.kennzahl--ok      { border-left-color: var(--ok); }

/* Datumskacheln tragen keine Anzahl - die Zahl darf dort nicht so
   schwer wirken wie eine Stueckzahl. */
.kennzahl--datum { border-left-color: var(--border); }
.kennzahl--datum .kennzahl-wert { font-size: 1.5rem; font-weight: 700; }

.kennzahl-wert {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.kennzahl-name {
  display: block;
  font-size: .94rem;
  color: var(--text-muted);
  font-weight: 600;
}

.kw-marke {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--abstand-s);
  border: 2px solid var(--navy-light);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--navy);
  font-size: .89rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.laedt-hinweis {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  padding: var(--abstand-l);
  color: var(--text-muted);
  font-weight: 600;
}

.laedt-hinweis::before {
  content: "";
  width: 24px;
  height: 24px;
  border: 3px solid var(--navy-light);
  border-right-color: transparent;
  border-radius: 50%;
  animation: kreisel 700ms linear infinite;
}

/* ---------------------------------------------------------------------
   20. Kleine Bildschirme
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
  :root { --seitenrand: 16px; }

  .kopfleiste-innen { align-items: stretch; }
  .kopf-marke { margin-right: 0; flex: 1 1 100%; }
  .kopf-benutzer { text-align: left; padding: 0; flex: 1 1 auto; min-height: 0; }
  .abmelden-formular { flex: 0 0 auto; }

  .projektgitter { grid-template-columns: 1fr; }
  .formular-reihe { flex-direction: column; gap: var(--abstand-m); }
  .meldungen {
    right: var(--seitenrand);
    left: var(--seitenrand);
    width: auto;
  }
  h1 { font-size: 1.45rem; }
}

/* Sehr breite Bildschirme: Tabellenschrift bleibt, Gitter wird weiter. */
@media (min-width: 1500px) {
  .projektgitter { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

/* ---------------------------------------------------------------------
   21. Reduzierte Bewegung
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .knopf:active { transform: none; }
}

/* Leermeldung INNERHALB einer Tabelle: ruhig, zentriert, ohne die
   Warn-Optik der .datenluecke — "hier ist nichts" ist kein Befund. */
.tabelle .zelle-leermeldung {
  padding: var(--abstand-l);
  color: var(--text-muted);
  text-align: center;
}

/* Generisches Kleingedrucktes. Vorher wurde dafuer quer durch die
   Seiten .fortschritt-fussnote zweckentfremdet. */
.text-klein {
  font-size: .83rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   Hover — nur fuer echte Zeiger.
   Auf dem Hallen-Tablet gibt es kein Hover, und ein "klebender"
   Hover-Zustand nach dem Tippen sieht kaputt aus. Deshalb liegt diese
   ganze Ebene hinter (hover: hover) and (pointer: fine): am Schreibtisch
   antwortet die Oberflaeche, das Tablet bleibt unveraendert.
   --------------------------------------------------------------------- */
.reiter-link, .ankreuzfeld, input, select, textarea {
  transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang);
}

@media (hover: hover) and (pointer: fine) {
  .knopf:hover            { background: var(--neutral-flaeche); }
  .knopf--primaer:hover   { background: var(--navy-light); border-color: var(--navy-light); }
  .knopf--gefahr:hover    { background: var(--error-flaeche); }
  .reiter-link:hover:not([aria-current="page"]) { background: var(--navy-dark); color: #FFFFFF; }
  .tabelle tbody tr:hover { background: var(--info-flaeche); }
  a:hover { text-decoration-thickness: 2px; }
}

/* ---------------------------------------------------------------------
   22. Erhöhter Kontrast
   --------------------------------------------------------------------- */

@media (prefers-contrast: more) {
  :root {
    --border: #6B7788;
    --text-muted: #333C4A;
  }
  .knopf, .status, .marke { border-width: 3px; }
}

/* ---------------------------------------------------------------------
   23. Druck
   Die Terminliste und die Projektblätter werden für die Halle gedruckt.
   Bedienelemente verschwinden, der TESTSYSTEM-Hinweis bleibt stehen.
   --------------------------------------------------------------------- */

@media print {
  @page { size: A4; margin: 14mm; }

  html { font-size: 100%; }

  body {
    background: #FFFFFF !important;
    color: #000000;
    display: block;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Alles, was nur der Bedienung dient, fliegt raus. */
  .reiter,
  .kopf-benutzer,
  .abmelden-formular,
  .sprungmarke,
  .meldungen,
  .werkzeugleiste,
  .knopf,
  .knopfleiste,
  .befund-aktionen,
  .zu-klaeren-aktionen,
  .spalte-aktionen,
  .meldung-schliessen,
  .kein-druck,
  .nicht-druck {
    display: none !important;
  }

  /* Der Testsystem-Hinweis MUSS mitgedruckt werden, sonst wird ein
     Testausdruck in der Halle für echt gehalten. */
  .testsystem-banner {
    position: static;
    display: block !important;
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 4px solid #000000 !important;
    text-shadow: none;
    padding: 4mm;
    margin-bottom: 6mm;
    font-size: 16pt;
  }

  .nur-druck { display: block !important; }

  .druck-kopf {
    display: block !important;
    border-bottom: 2px solid #000000;
    padding-bottom: 3mm;
    margin-bottom: 6mm;
    font-size: 10pt;
  }

  .kopfleiste {
    background: #FFFFFF !important;
    color: #000000;
    padding: 0 0 3mm;
    border-bottom: 2px solid #000000;
    margin-bottom: 6mm;
  }
  .kopf-marke, .kopf-marke-name, .kopf-marke-zusatz { color: #000000 !important; }

  .fussleiste {
    background: #FFFFFF !important;
    color: #000000;
    border-top: 1px solid #000000;
    padding: 3mm 0 0;
    margin-top: 6mm;
  }
  .fussleiste a { color: #000000; }

  .inhalt { max-width: none; padding: 0; }

  .abschnitt, .projektkarte, .tabellen-huelle, .kennzahl, .leer {
    border: 1px solid #000000;
    border-radius: 0;
    box-shadow: none;
    background: #FFFFFF !important;
    padding: 4mm;
  }

  .projektkarte { border-left-width: 3pt; border-left-color: #000000; }

  /* Umbrüche */
  .projektkarte,
  .kennzahl,
  .befund,
  .zu-klaeren-punkt,
  .fortschritt,
  tr, thead, tfoot, figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  .druck-umbruch-vorher { break-before: page; page-break-before: always; }
  .druck-umbruch-nachher { break-after: page; page-break-after: always; }

  /* Tabellen: Kopfzeile auf jeder Seite wiederholen. */
  .tabellen-huelle { overflow: visible; }
  .tabelle { font-size: 10pt; }
  .tabelle thead { display: table-header-group; }
  .tabelle tfoot { display: table-footer-group; }
  .tabelle thead th {
    position: static;
    background: #FFFFFF !important;
    color: #000000 !important;
    border-bottom: 2px solid #000000;
  }
  .tabelle th, .tabelle td {
    padding: 2mm 3mm;
    height: auto;
    border-bottom: 1px solid #666666;
  }
  .tabelle tbody tr:nth-child(even) { background: #FFFFFF !important; }

  /* Status im Graustufendruck: Zeichen und Text tragen die Aussage,
     der Rahmen bleibt sichtbar, die Fläche verschwindet. */
  .status, .marke, .kw-marke {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-color: #000000 !important;
    border-width: 1pt !important;
  }

  .befund {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1pt solid #000000;
    border-left-width: 3pt;
  }
  .befund-vorschlag { background: #FFFFFF !important; border-left-color: #000000; }

  .zu-klaeren-punkt {
    background: #FFFFFF !important;
    border: 1pt solid #000000;
    border-left-width: 3pt;
  }

  /* Fortschritt bleibt im Druck aussagekräftig: Prozentzahl als Text,
     Balken als Umriss mit Füllung. */
  .fortschritt-bahn {
    border: 1pt solid #000000;
    height: 5mm;
    background: #FFFFFF !important;
  }
  .fortschritt-balken {
    background: #000000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .fortschritt--erledigung .fortschritt-balken {
    background: repeating-linear-gradient(45deg, #000000 0 1.2mm, #FFFFFF 1.2mm 2.4mm) !important;
  }

  .datenluecke {
    background: #FFFFFF !important;
    border: 1pt dashed #000000;
    color: #000000 !important;
  }

  /* Verweise im Ausdruck auflösen, damit ein Papierblatt nutzbar bleibt. */
  a[href^="/"]::after,
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #333333;
  }
  .kopf-marke::after, .reiter-link::after { content: ""; }
}


/* =====================================================================
   Roadmap / Gantt
   ---------------------------------------------------------------------
   Die strenge Content-Security-Policy verbietet style-Attribute im HTML.
   Deshalb bekommt jeder Balken seine Position ueber Klassen
   (.gantt-s<Woche> und .gantt-d<Dauer>) statt ueber grid-column im
   style-Attribut. Der Server kann damit ein vollstaendiges, funktionierendes
   Gantt ausliefern, auch wenn JavaScript nicht laeuft.

   Waehrend des Ziehens setzt gantt.js die Position ueber die CSSOM
   (element.style.setProperty) - das ist von der CSP nicht betroffen,
   nur das style-ATTRIBUT im Quelltext waere es.
   ===================================================================== */

.gantt-huelle {
  /*
   * Siehe die ausfuehrliche Begruendung bei .tabellen-huelle: ohne
   * position: relative entkommen die absolut positionierten
   * .nur-screenreader-Texte dem rollenden Behaelter und ziehen das
   * Dokument auf die volle Gantt-Breite auf. Gemessen auf dem
   * Dashboard bei 768 px: 1803 px ohne, 768 px mit dieser Zeile.
   *
   * Unbedenklich, weil die Gantt-Balken selbst NICHT absolut
   * positioniert sind (sie liegen im Raster) — der Bezugsrahmen
   * aendert also nur die Vorleser-Texte, und die sollen genau hier
   * haengen bleiben.
   */
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  padding-bottom: 4px;
}

.gantt {
  display: grid;
  /*
   * Die Spaltenzahl kommt aus der Klasse .gantt--w<N> weiter unten. Sie
   * stand hier fest auf 23 - genau die Zahl der Wochen zwischen
   * Saisonbeginn und Saisonende. Sobald ein Projekt davor oder danach
   * liegt, braucht das Raster mehr Spalten. Ein style-Attribut ist per
   * Inhaltsrichtlinie verboten, deshalb eine Klasse je Wochenzahl.
   *
   * Der Rueckfallwert hier gilt nur, wenn keine Variantenklasse gesetzt
   * ist - dann sieht man ein zu enges Raster, statt gar keins.
   */
  grid-template-columns: 300px repeat(23, minmax(64px, 1fr));
  min-width: 1780px;
  gap: 2px;
  padding: 0;
}

/* Kopfzeile mit den Kalenderwochen */
.gantt-kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--navy);
  color: #fff;
  font-size: .78rem;
  line-height: 1.3;
  text-align: center;
  padding: 8px 2px;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gantt-kopf--titel {
  text-align: left;
  padding-left: 12px;
  align-items: flex-start;
}

.gantt-kopf-datum {
  font-size: .67rem;
  opacity: 0.85;
}

.gantt-kopf--monatswechsel {
  border-left: 2px solid #fff;
}

/* Zeilenbeschriftung links */
.gantt-name {
  grid-column: 1;
  padding: 6px 12px;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-alt);
  border-right: 2px solid var(--border);
  font-size: .83rem;
  position: sticky;
  left: 0;
  z-index: 1;
}

.gantt-name-titel {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-name a { color: inherit; text-decoration: none; }
.gantt-name a:hover, .gantt-name a:focus-visible { text-decoration: underline; }
.gantt-name-zusatz { font-size: .72rem; color: var(--text-muted); }

/* Rasterzelle als Hintergrund */
.gantt-zelle {
  min-height: 40px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.gantt-zelle--wochenende { background: var(--bg-alt); }
/* Die aktuelle Woche muss auf 1780px Rasterbreite auffindbar sein:
   ganze Spalte leicht getoent plus kraeftige Kante, im Kopf zusaetzlich
   eine Unterstreichung. Ein 2px-Strich allein ging unter. */
.gantt-zelle--heute { background: var(--warn-flaeche); box-shadow: inset 3px 0 0 var(--warn); }
.gantt-kopf--heute  { box-shadow: inset 0 -4px 0 var(--warn); }

/* Der Balken */
.gantt-balken {
  min-height: 44px;
  margin: 6px 1px;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--navy-light);
  color: #fff;
  font-size: .78rem;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 2px solid transparent;
  text-decoration: none;
}

.gantt-balken:focus-visible {
  outline: 3px solid var(--warn);
  outline-offset: 2px;
}

.gantt-balken-titel {
  font-weight: 600;
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-balken-zusatz {
  font-size: .67rem;
  /* Keine opacity: 0.9 mehr — auf dem warn-orangen Balken drueckte sie
     Weiss auf 4.10:1 und damit unter die 4.5:1-Grenze. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zustaende - nie nur ueber Farbe: jeder Balken traegt zusaetzlich Text */
/*
 * Besetzungszustand NIE nur ueber Farbe: im Kompakt-Gantt (Dashboard)
 * traegt der Balken keinen Text, und ok-Gruen gegen warn-Orange liegt
 * bei Rot-Gruen-Schwaeche bei 1.15:1 Leuchtdichteunterschied — faktisch
 * dieselbe Farbe. Deshalb je Zustand ein eigenes Muster:
 *   vollbesetzt = voll        teilbesetzt = schraffiert
 *   offen       = hohl        nicht besetzbar = gestrichelter Rand
 * Die Legende in gantt.php nutzt dieselben Klassen und zeigt die
 * Muster damit automatisch mit.
 */
.gantt-balken--vollbesetzt     { background: var(--ok); }
.gantt-balken--teilbesetzt {
  background: repeating-linear-gradient(
    135deg,
    var(--warn) 0, var(--warn) 8px,
    #9A5200 8px, #9A5200 12px
  );
}
.gantt-balken--offen {
  background: var(--bg);
  border: 2px solid var(--navy-light);
  color: var(--navy);
}
.gantt-balken--offen .gantt-balken-titel { color: var(--navy); }
.gantt-balken--nicht-besetzbar {
  background: var(--error);
  border-color: #fff;
  border-style: dashed;
}

/*
 * pan-x pan-y statt none: ein kurzer Wisch ueber einen Balken scrollt
 * das Gantt, wie man es erwartet. Das Ziehen beginnt erst nach kurzem
 * Halten (siehe gantt.js) — waehrenddessen verhindert die Insel das
 * Scrollen selbst per touchmove/preventDefault.
 */
.gantt-balken--ziehbar { cursor: grab; touch-action: pan-x pan-y; }
.gantt-balken--ziehbar:active { cursor: grabbing; }

.gantt-balken--zieht {
  opacity: 0.85;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.gantt-balken--ziel {
  outline: 3px dashed var(--warn);
  outline-offset: 1px;
}

/* Hinweiszeile unter dem Gantt */
.gantt-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  margin-top: var(--tippabstand);
  font-size: .83rem;
}

.gantt-legende-punkt { display: flex; align-items: center; gap: 6px; }

.gantt-legende-farbe {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex: none;
}

/* Die Kaestchen tragen dieselben Muster wie die Balken — nur so kann
   die Legende bei Farbschwaeche ueberhaupt etwas zuordnen. */
.gantt-legende-farbe--vollbesetzt     { background: var(--ok); }
.gantt-legende-farbe--teilbesetzt {
  background: repeating-linear-gradient(
    135deg,
    var(--warn) 0, var(--warn) 8px,
    #9A5200 8px, #9A5200 12px
  );
}
.gantt-legende-farbe--offen {
  background: var(--bg);
  border: 2px solid var(--navy-light);
}
.gantt-legende-farbe--nicht-besetzbar {
  background: var(--error);
  border: 2px dashed #fff;
  outline: 1px solid var(--error);
}

@media print {
  .gantt-huelle { overflow: visible; border: none; }
  .gantt { min-width: 0; }
  .gantt-balken--ziehbar { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
  .gantt-balken { transition: none !important; }
}

/* --- Erzeugte Positionsklassen ------------------------------------- */

.gantt-s1 { grid-column-start: 2; }
.gantt-s2 { grid-column-start: 3; }
.gantt-s3 { grid-column-start: 4; }
.gantt-s4 { grid-column-start: 5; }
.gantt-s5 { grid-column-start: 6; }
.gantt-s6 { grid-column-start: 7; }
.gantt-s7 { grid-column-start: 8; }
.gantt-s8 { grid-column-start: 9; }
.gantt-s9 { grid-column-start: 10; }
.gantt-s10 { grid-column-start: 11; }
.gantt-s11 { grid-column-start: 12; }
.gantt-s12 { grid-column-start: 13; }
.gantt-s13 { grid-column-start: 14; }
.gantt-s14 { grid-column-start: 15; }
.gantt-s15 { grid-column-start: 16; }
.gantt-s16 { grid-column-start: 17; }
.gantt-s17 { grid-column-start: 18; }
.gantt-s18 { grid-column-start: 19; }
.gantt-s19 { grid-column-start: 20; }
.gantt-s20 { grid-column-start: 21; }
.gantt-s21 { grid-column-start: 22; }
.gantt-s22 { grid-column-start: 23; }
.gantt-s23 { grid-column-start: 24; }

.gantt-d1 { grid-column-end: span 1; }
.gantt-d2 { grid-column-end: span 2; }
.gantt-d3 { grid-column-end: span 3; }
.gantt-d4 { grid-column-end: span 4; }
.gantt-d5 { grid-column-end: span 5; }
.gantt-d6 { grid-column-end: span 6; }
/* 7 bis 23: die Daueraufgabe laeuft ueber die ganze Saison. */
.gantt-d7 { grid-column-end: span 7; }
.gantt-d8 { grid-column-end: span 8; }
.gantt-d9 { grid-column-end: span 9; }
.gantt-d10 { grid-column-end: span 10; }
.gantt-d11 { grid-column-end: span 11; }
.gantt-d12 { grid-column-end: span 12; }
.gantt-d13 { grid-column-end: span 13; }
.gantt-d14 { grid-column-end: span 14; }
.gantt-d15 { grid-column-end: span 15; }
.gantt-d16 { grid-column-end: span 16; }
.gantt-d17 { grid-column-end: span 17; }
.gantt-d18 { grid-column-end: span 18; }
.gantt-d19 { grid-column-end: span 19; }
.gantt-d20 { grid-column-end: span 20; }
.gantt-d21 { grid-column-end: span 21; }
.gantt-d22 { grid-column-end: span 22; }
.gantt-d23 { grid-column-end: span 23; }

.gantt-z1 { grid-row-start: 2; }
.gantt-z2 { grid-row-start: 3; }
.gantt-z3 { grid-row-start: 4; }
.gantt-z4 { grid-row-start: 5; }
.gantt-z5 { grid-row-start: 6; }
.gantt-z6 { grid-row-start: 7; }
.gantt-z7 { grid-row-start: 8; }
.gantt-z8 { grid-row-start: 9; }
.gantt-z9 { grid-row-start: 10; }
.gantt-z10 { grid-row-start: 11; }
.gantt-z11 { grid-row-start: 12; }
.gantt-z12 { grid-row-start: 13; }
.gantt-z13 { grid-row-start: 14; }
.gantt-z14 { grid-row-start: 15; }
.gantt-z15 { grid-row-start: 16; }
.gantt-z16 { grid-row-start: 17; }
.gantt-z17 { grid-row-start: 18; }
.gantt-z18 { grid-row-start: 19; }
.gantt-z19 { grid-row-start: 20; }
.gantt-z20 { grid-row-start: 21; }
.gantt-z21 { grid-row-start: 22; }
.gantt-z22 { grid-row-start: 23; }
.gantt-z23 { grid-row-start: 24; }
.gantt-z24 { grid-row-start: 25; }
.gantt-z25 { grid-row-start: 26; }
.gantt-z26 { grid-row-start: 27; }
.gantt-z27 { grid-row-start: 28; }
.gantt-z28 { grid-row-start: 29; }
.gantt-z29 { grid-row-start: 30; }
.gantt-z30 { grid-row-start: 31; }
.gantt-z31 { grid-row-start: 32; }
.gantt-z32 { grid-row-start: 33; }
.gantt-z33 { grid-row-start: 34; }
.gantt-z34 { grid-row-start: 35; }
.gantt-z35 { grid-row-start: 36; }
.gantt-z36 { grid-row-start: 37; }
.gantt-z37 { grid-row-start: 38; }
.gantt-z38 { grid-row-start: 39; }
.gantt-z39 { grid-row-start: 40; }
.gantt-z40 { grid-row-start: 41; }


/* --- Kompaktes Gantt auf der Startseite ---------------------------- */

.gantt-huelle--kompakt {
  max-height: 26rem;
  overflow-y: auto;
}

.gantt--kompakt .gantt-name,
.gantt--kompakt .gantt-zelle { min-height: 30px; }

.gantt--kompakt .gantt-name { padding: 3px 12px; font-size: .78rem; }
.gantt--kompakt .gantt-name-zusatz { font-size: .67rem; }

.gantt--kompakt .gantt-balken {
  min-height: 32px;
  margin: 5px 1px;
  padding: 0;
}

.gantt--kompakt .gantt-kopf { min-height: 38px; font-size: .67rem; padding: 4px 2px; }

/* --- Aufklapper für die weniger dringenden Hinweise ---------------- */

.zu-klaeren-mehr {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-alt);
}

.zu-klaeren-mehr > summary {
  cursor: pointer;
  padding: 14px 18px;
  min-height: 56px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 17px;
  color: var(--navy);
  list-style: none;
}

.zu-klaeren-mehr > summary::-webkit-details-marker { display: none; }

.zu-klaeren-mehr > summary::before {
  content: "▸";
  margin-right: 10px;
  color: var(--navy-light);
}

.zu-klaeren-mehr[open] > summary::before { content: "▾"; }

.zu-klaeren-mehr > summary:focus-visible {
  outline: 3px solid var(--warn);
  outline-offset: -3px;
}

.zu-klaeren-mehr > summary:active { background: var(--border); }

.zu-klaeren-mehr .zu-klaeren { margin: 0 14px 14px; }

/* =====================================================================
   BESTELLWESEN
   ---------------------------------------------------------------------
   Zwei Blöcke auf der Bestellliste: oben der Bedarf je Projekt, unten —
   durch eine kräftige Linie getrennt — die Bestellung, die das Haus
   verlässt. Die Trennung ist inhaltlich, nicht dekorativ: wer sie
   übersieht, verwechselt einen internen Merkposten mit einem Beleg an
   einen Lieferanten.
   ===================================================================== */

.trenner-stark {
  border: 0;
  border-top: 3px solid var(--navy-light);
  margin: var(--abstand-xl) 0 var(--abstand-l);
}

.abschnitt-hinweis {
  margin: var(--abstand-xs) 0 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 68ch;
}

.unterabschnitt {
  margin: var(--abstand-xl) 0 var(--abstand-s);
  font-size: 1.17rem;
  color: var(--navy);
}

.feld-hilfe--block {
  margin: 0 0 var(--abstand-m);
  max-width: 68ch;
}

/* --- Kopfdaten als Kachelfeld ---------------------------------------
   Acht Angaben, die man vor dem Absenden auf einen Blick prüfen können
   muss. Zweispaltig, sobald Platz da ist; auf dem Tablet einspaltig. */
.kachelfeld {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-m) var(--abstand-l);
}

@media (min-width: 760px) {
  .kachelfeld { grid-template-columns: 1fr 1fr; }
  .kachelfeld .feld--breit { grid-column: 1 / -1; }
}

/*
 * Im breiten Formular bleiben die KOPFFELDER auf lesbarer Breite —
 * sonst zieht ein Feld "Bestellnummer" ueber einen halben Meter
 * Bildschirm. Die Artikeltabelle darunter nutzt die volle Breite.
 */
.formular--breit .kachelfeld { max-width: 1100px; }

@media (min-width: 1240px) {
  .formular--breit .kachelfeld { grid-template-columns: 1fr 1fr 1fr; }
  .formular--breit .kachelfeld .feld--breit { grid-column: 1 / -1; }
}

.kachelfeld .feld { margin: 0; }

/* --- Artikelzeilen --------------------------------------------------- */

.bestellzeilen { margin-top: var(--abstand-s); }

.tabelle--eng th,
.tabelle--eng td {
  padding: var(--abstand-s) var(--abstand-s);
}

.bestellzeilen-tabelle {
  /* Ohne feste Breiten springen die Spalten beim Tippen. */
  table-layout: fixed;
  /*
   * 780 statt 900: das ist die Breite, unter der die Nummernfelder
   * wirklich zu eng werden. Alles darueber verteilt sich auf die
   * Bezeichnung — die einzige Spalte, in der lange Texte stehen.
   */
  min-width: 780px;
}

.bestellzeilen-tabelle .spalte-nr    { width: 3.5rem; }
.bestellzeilen-tabelle .spalte-zahl  { width: 6rem; }
/* Schmal, aber linksbuendig — "Stueck" ist kein Zahlenwert. */
.bestellzeilen-tabelle .spalte-einheit { width: 6.5rem; }
.bestellzeilen-tabelle .spalte-nummer  { width: 12rem; }
/* 4.5rem: der 56px-Loeschknopf muss samt Zellpolster hineinpassen,
   sonst ragt er neben das Lagernummer-Feld (Fehltipp-Risiko). */
.bestellzeilen-tabelle .spalte-knopf { width: 4.5rem; }

.spalte-nr,
.spalte-zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bestellzeile td { vertical-align: top; }

.bestellzeile input {
  width: 100%;
  /*
   * 48px statt der 56px-Hausregel — dokumentierte Ausnahme: bei bis zu
   * 100 Artikelzeilen untereinander machen volle 56px die Tabelle einen
   * halben Bildschirm laenger, und die Zeilen liegen nicht zwischen
   * anderen Zielen, sondern in einem eigenen Raster. 48px entspricht
   * der Mindesthoehe der Tabellenzeilen.
   */
  min-height: 48px;
}

.bestellzeile .feld-fehler {
  display: block;
  margin-top: var(--abstand-xs);
}

/* Auf breiten Schirmen traegt die Kopfzeile die Beschriftung. */
.zeilen-beschriftung { display: none; }

/* ---------------------------------------------------------------------
   Artikelzeilen auf schmalen Geraeten: gestapelte Karten statt Tabelle.

   Unter etwa 900px passen sieben Spalten nicht mehr nebeneinander. Statt
   die Tabelle seitwaerts scrollen zu lassen — auf einem Hallen-Tablet mit
   Handschuhen die unangenehmste aller Gesten — wird jede Artikelzeile zu
   einem eigenen Block mit sichtbaren Feldbeschriftungen. Die Kopfzeile
   entfaellt dabei; deshalb tragen die Zellen ihre eigene Beschriftung.
   --------------------------------------------------------------------- */
@media (max-width: 899px) {
  .bestellzeilen .tabellen-huelle {
    overflow-x: visible;        /* nichts mehr zu rollen */
    border: 0;
    background: transparent;
  }

  .bestellzeilen-tabelle {
    display: block;
    min-width: 0;
    table-layout: auto;
  }

  .bestellzeilen-tabelle thead { display: none; }
  .bestellzeilen-tabelle tbody { display: block; }

  .bestellzeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-s) var(--abstand-m);
    align-items: start;
    border: 1px solid var(--border);
    border-left: var(--kante-akzent) solid var(--navy-light);
    border-radius: var(--radius);
    background: var(--bg);
    padding: var(--abstand-m);
    margin-bottom: var(--tippabstand);
  }

  /*
   * Die Selektoren muessen hier spezifischer sein als die Tabellen-
   * Grundregeln (.tabelle .spalte-zahl setzt rechtsbuendig, und die
   * festen Spaltenbreiten oben gelten fuer Rasterzellen weiter) —
   * sonst bleibt das Anzahl-Feld 6rem schmal und rechtsbuendig,
   * mitten in einer Karte, die die volle Breite haette.
   */
  .bestellzeilen-tabelle .bestellzeile td {
    display: block;
    width: auto;
    /*
     * height: auto hebt .tabelle tbody td { height: 48px } auf. In der
     * Tabelle ist das die Mindestzeilenhoehe; in der Karte steckt in
     * der Zelle aber Beschriftung PLUS Eingabefeld (22 + 56 px) — die
     * feste Hoehe liess den Inhalt in die naechste Zeile ragen.
     */
    height: auto;
    border: 0;
    padding: 0;
    text-align: left;
  }

  /* Zebrastreifen sind in gestapelten Karten nur Unruhe. */
  .bestellzeilen-tabelle tbody tr:nth-child(even) { background: var(--bg); }

  /* Reihenfolge: Position und Loeschknopf in die Kopfzeile der Karte,
     danach Bezeichnung ueber die volle Breite, dann paarweise. */
  .bestellzeile td:nth-child(1) { order: 1; }
  .bestellzeile td:nth-child(7) { order: 2; justify-self: end; }
  .bestellzeile td:nth-child(2) { order: 3; grid-column: 1 / -1; }
  .bestellzeile td:nth-child(3) { order: 4; }
  .bestellzeile td:nth-child(4) { order: 5; }
  .bestellzeile td:nth-child(5) { order: 6; }
  .bestellzeile td:nth-child(6) { order: 7; }

  /* Die Positionsnummer als Plakette — sie ersetzt die Kopfzeile. */
  .bestellzeilen-tabelle .bestellzeile .spalte-nr,
  .bestellzeilen-tabelle .bestellzeile .spalte-knopf {
    width: auto;
  }

  .bestellzeile .spalte-nr {
    align-self: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
  }
  .bestellzeile .spalte-nr::before {
    content: "Position ";
    font-size: .83rem;
    font-weight: 600;
    color: var(--text-muted);
  }

  .zeilen-beschriftung {
    display: block;
    margin-bottom: 2px;
    font-size: .83rem;
    font-weight: 600;
    color: var(--text-muted);
  }

  .bestellzeile input { min-height: var(--tippflaeche); }
}

/*
 * Sehr schmal (Telefon): auch Anzahl/Einheit und die beiden Nummern
 * untereinander. Zwei Felder nebeneinander waeren bei 375px je gut
 * 150px breit — eine Lagernummer passt da nicht mehr sichtbar hinein.
 * Position und Loeschknopf bleiben nebeneinander, das ist die
 * Kopfzeile der Karte.
 */
@media (max-width: 520px) {
  .bestellzeilen-tabelle .bestellzeile td:nth-child(3),
  .bestellzeilen-tabelle .bestellzeile td:nth-child(4),
  .bestellzeilen-tabelle .bestellzeile td:nth-child(5),
  .bestellzeilen-tabelle .bestellzeile td:nth-child(6) {
    grid-column: 1 / -1;
  }
}

.bestellzeilen-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-m);
  margin-top: var(--abstand-m);
}

.bestellzeilen-stand {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Abschlussknöpfe: nebeneinander, aber umbrechend — drei lange
   Beschriftungen passen auf einem Tablet nicht in eine Zeile. */
.knopfleiste--abschluss {
  flex-wrap: wrap;
  gap: var(--tippabstand);
}

/* --- Alle Bestellungen ----------------------------------------------
   Je Bestellnummer ein abgesetzter Block mit den Artikeln darunter —
   dieselbe Gliederung wie in der Excel-Ausgabe. */

.bestellgruppe {
  border: 1px solid var(--border);
  border-left: var(--kante-akzent) solid var(--navy-light);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
  padding: var(--abstand-m);
  margin-bottom: var(--abstand-l);
  background: var(--bg);
}

.bestellgruppe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-s) var(--abstand-m);
  padding-bottom: var(--abstand-s);
  border-bottom: 2px solid var(--navy);
  margin-bottom: var(--abstand-m);
}

.bestellgruppe-nummer {
  margin: 0;
  font-size: 1.33rem;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.bestellgruppe-daten {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-s) var(--abstand-m);
  color: var(--text-muted);
}

.bestellgruppe-firma {
  font-weight: 700;
  color: var(--text);
}

.bestellgruppe-datum { font-variant-numeric: tabular-nums; }

.bestellgruppe-felder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m) var(--abstand-xl);
  margin: 0 0 var(--abstand-m);
}

.bestellgruppe-feld dt {
  font-size: .94rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.bestellgruppe-feld dd {
  margin: 0;
  font-weight: 600;
}

.bestellgruppe-bemerkung {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: var(--abstand-s) var(--abstand-m);
  margin: 0 0 var(--abstand-m);
  max-width: 80ch;
}

/* Ruhige Plakette für den Bestellzustand — nie Farbe allein, der Text
   steht immer daneben. */
.marke--still {
  background: var(--grau-flaeche);
  color: var(--grau-text);
}

@media print {
  .bestellgruppe {
    break-inside: avoid;
    border-left-width: 2px;
  }
}

/* =====================================================================
   BEREICHE — Eingangsseite und Bereichszeile
   ---------------------------------------------------------------------
   Die Startseite ist eine Auswahl von Unterprojekten (Wartungswochen,
   Lager, Produktion, IT). Innerhalb eines Bereichs zeigt eine schmale
   Zeile zwischen Kopf und Reitern, wo man ist, und fuehrt zurueck.
   ===================================================================== */

/* --- Bereichszeile ---------------------------------------------------- */

.bereich-zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
  background: var(--navy);
  border-bottom: 1px solid var(--navy-light);
  padding: 0 var(--seitenrand);
  color: #E4EAF6;
}

.bereich-zeile-zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  /* Bewusst niedriger als die 56px-Tippflaeche der Reiter: die Zeile ist
     Orientierung, kein Hauptweg. 44px bleiben gut treffbar. */
  min-height: 44px;
  padding: 0 var(--abstand-s);
  color: #E4EAF6;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.bereich-zeile-zurueck:hover,
.bereich-zeile-zurueck:focus-visible {
  background: var(--navy-light);
  text-decoration: underline;
}

.bereich-zeile-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

@media print { .bereich-zeile { display: none; } }

/* --- Bereichskarten --------------------------------------------------- */

/* Einleitung untereinander — .abschnitt-kopf wuerde die Zeile per
   space-between neben die Ueberschrift schieben. */
.bereiche-einleitung { margin-bottom: var(--abstand-m); }

.bereiche-titel {
  margin: 0 0 var(--abstand-xs);
  font-size: 1.7rem;
  color: var(--navy);
}

.bereichskarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--abstand-l);
  margin-top: var(--abstand-l);
}

.bereichskarte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-gross);
  background: var(--bg);
  padding: var(--abstand-l);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.bereichskarte:hover,
a.bereichskarte:focus-visible {
  transform: translateY(-2px);
  border-color: var(--navy-light);
  box-shadow: 0 8px 20px rgba(27, 42, 74, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .bereichskarte { transition: none; }
  a.bereichskarte:hover,
  a.bereichskarte:focus-visible { transform: none; }
}

/* Noch ohne Inhalt: gedaempft, aber lesbar — der Bereich ist eine
   Ankuendigung, kein Fehler. */
.bereichskarte--wartet {
  background: var(--bg-alt);
}

.bereichskarte--wartet .bereichskarte-titel { color: var(--text-muted); }

.bereichskarte-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--abstand-m);
  margin-bottom: var(--abstand-m);
}

.bereichskarte-emblem {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--info-flaeche);
  color: var(--navy);
  font-size: 1.33rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.bereichskarte--wartet .bereichskarte-emblem {
  background: var(--grau-flaeche);
  color: var(--grau-text);
}

.bereichskarte-titel {
  margin: 0 0 var(--abstand-s);
  font-size: 1.35rem;
  color: var(--navy);
  text-wrap: balance;
}

.bereichskarte-text {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 60ch;
}

.bereichskarte-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s) var(--abstand-xl);
  margin: var(--abstand-l) 0 0;
  padding-top: var(--abstand-m);
  border-top: 1px solid var(--border);
}

.bereichskarte-zahl dt {
  font-size: .94rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.bereichskarte-zahl dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bereichskarte-auf {
  margin: var(--abstand-l) 0 0;
  font-weight: 700;
  color: var(--navy-light);
}

/* Schnellzugriff unter den Karten: die drei haeufigsten Ziele des
   Schichttechnikers, ohne Umweg ueber das Planer-Dashboard. */
.bereiche-schnellzugriff {
  margin: var(--abstand-l) 0 0;
  color: var(--text-muted);
}
.bereiche-schnellzugriff a {
  display: inline-block;
  padding: var(--abstand-s) var(--abstand-xs);
  font-weight: 600;
}

.bereichskarte-hinweis {
  margin: var(--abstand-l) 0 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}


/* ---------------------------------------------------------------------
 * Gantt-Raster: eine Klasse je Wochenzahl
 *
 * Erzeugt, weil die Anzahl der Wochen aus den Daten kommt und ein
 * style-Attribut per Inhaltsrichtlinie ausgeschlossen ist. 300 px fuer
 * die Namensspalte, 64 px Mindestbreite je Woche, 2 px Abstand.
 * ------------------------------------------------------------------ */
.gantt--w12 {
  grid-template-columns: 300px repeat(12, minmax(64px, 1fr));
  min-width: 1092px;
}
.gantt--w13 {
  grid-template-columns: 300px repeat(13, minmax(64px, 1fr));
  min-width: 1158px;
}
.gantt--w14 {
  grid-template-columns: 300px repeat(14, minmax(64px, 1fr));
  min-width: 1224px;
}
.gantt--w15 {
  grid-template-columns: 300px repeat(15, minmax(64px, 1fr));
  min-width: 1290px;
}
.gantt--w16 {
  grid-template-columns: 300px repeat(16, minmax(64px, 1fr));
  min-width: 1356px;
}
.gantt--w17 {
  grid-template-columns: 300px repeat(17, minmax(64px, 1fr));
  min-width: 1422px;
}
.gantt--w18 {
  grid-template-columns: 300px repeat(18, minmax(64px, 1fr));
  min-width: 1488px;
}
.gantt--w19 {
  grid-template-columns: 300px repeat(19, minmax(64px, 1fr));
  min-width: 1554px;
}
.gantt--w20 {
  grid-template-columns: 300px repeat(20, minmax(64px, 1fr));
  min-width: 1620px;
}
.gantt--w21 {
  grid-template-columns: 300px repeat(21, minmax(64px, 1fr));
  min-width: 1686px;
}
.gantt--w22 {
  grid-template-columns: 300px repeat(22, minmax(64px, 1fr));
  min-width: 1752px;
}
.gantt--w23 {
  grid-template-columns: 300px repeat(23, minmax(64px, 1fr));
  min-width: 1818px;
}
.gantt--w24 {
  grid-template-columns: 300px repeat(24, minmax(64px, 1fr));
  min-width: 1884px;
}
.gantt--w25 {
  grid-template-columns: 300px repeat(25, minmax(64px, 1fr));
  min-width: 1950px;
}
.gantt--w26 {
  grid-template-columns: 300px repeat(26, minmax(64px, 1fr));
  min-width: 2016px;
}
.gantt--w27 {
  grid-template-columns: 300px repeat(27, minmax(64px, 1fr));
  min-width: 2082px;
}
.gantt--w28 {
  grid-template-columns: 300px repeat(28, minmax(64px, 1fr));
  min-width: 2148px;
}
.gantt--w29 {
  grid-template-columns: 300px repeat(29, minmax(64px, 1fr));
  min-width: 2214px;
}
.gantt--w30 {
  grid-template-columns: 300px repeat(30, minmax(64px, 1fr));
  min-width: 2280px;
}
.gantt--w31 {
  grid-template-columns: 300px repeat(31, minmax(64px, 1fr));
  min-width: 2346px;
}
.gantt--w32 {
  grid-template-columns: 300px repeat(32, minmax(64px, 1fr));
  min-width: 2412px;
}
.gantt--w33 {
  grid-template-columns: 300px repeat(33, minmax(64px, 1fr));
  min-width: 2478px;
}
.gantt--w34 {
  grid-template-columns: 300px repeat(34, minmax(64px, 1fr));
  min-width: 2544px;
}
.gantt--w35 {
  grid-template-columns: 300px repeat(35, minmax(64px, 1fr));
  min-width: 2610px;
}
.gantt--w36 {
  grid-template-columns: 300px repeat(36, minmax(64px, 1fr));
  min-width: 2676px;
}
.gantt--w37 {
  grid-template-columns: 300px repeat(37, minmax(64px, 1fr));
  min-width: 2742px;
}
.gantt--w38 {
  grid-template-columns: 300px repeat(38, minmax(64px, 1fr));
  min-width: 2808px;
}
.gantt--w39 {
  grid-template-columns: 300px repeat(39, minmax(64px, 1fr));
  min-width: 2874px;
}
.gantt--w40 {
  grid-template-columns: 300px repeat(40, minmax(64px, 1fr));
  min-width: 2940px;
}

/* Spaltenanfang und Balkenlaenge fuer die zusaetzlichen Wochen.
   .gantt-s1 bis s23 und .gantt-d1 bis d23 stehen weiter oben. */
.gantt-s24 { grid-column-start: 25; }
.gantt-s25 { grid-column-start: 26; }
.gantt-s26 { grid-column-start: 27; }
.gantt-s27 { grid-column-start: 28; }
.gantt-s28 { grid-column-start: 29; }
.gantt-s29 { grid-column-start: 30; }
.gantt-s30 { grid-column-start: 31; }
.gantt-s31 { grid-column-start: 32; }
.gantt-s32 { grid-column-start: 33; }
.gantt-s33 { grid-column-start: 34; }
.gantt-s34 { grid-column-start: 35; }
.gantt-s35 { grid-column-start: 36; }
.gantt-s36 { grid-column-start: 37; }
.gantt-s37 { grid-column-start: 38; }
.gantt-s38 { grid-column-start: 39; }
.gantt-s39 { grid-column-start: 40; }
.gantt-s40 { grid-column-start: 41; }
.gantt-d24 { grid-column-end: span 24; }
.gantt-d25 { grid-column-end: span 25; }
.gantt-d26 { grid-column-end: span 26; }
.gantt-d27 { grid-column-end: span 27; }
.gantt-d28 { grid-column-end: span 28; }
.gantt-d29 { grid-column-end: span 29; }
.gantt-d30 { grid-column-end: span 30; }
.gantt-d31 { grid-column-end: span 31; }
.gantt-d32 { grid-column-end: span 32; }
.gantt-d33 { grid-column-end: span 33; }
.gantt-d34 { grid-column-end: span 34; }
.gantt-d35 { grid-column-end: span 35; }
.gantt-d36 { grid-column-end: span 36; }
.gantt-d37 { grid-column-end: span 37; }
.gantt-d38 { grid-column-end: span 38; }
.gantt-d39 { grid-column-end: span 39; }
.gantt-d40 { grid-column-end: span 40; }


/* =====================================================================
 * „Jetzt zu erledigen“ — der Arbeitsstart auf dem Dashboard
 *
 * Eine Liste, keine Kacheln: die Eintraege sind untereinander lesbar,
 * unterschiedlich lang und werden von oben nach unten abgearbeitet. Ein
 * Kachelgitter wuerde sie in gleich grosse Kaesten pressen und die
 * Reihenfolge verwischen.
 * ================================================================== */

.abschnitt--jetzt {
  border-left: 4px solid var(--akzent);
  padding-left: var(--abstand-l);
}

.aufgabenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tippabstand);
}

.aufgabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-m);
  padding: var(--abstand-m);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
}

.aufgabe--dringend { border-left-color: var(--error); }

.aufgabe-marke {
  flex: 0 0 auto;
  min-width: 86px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.aufgabe--dringend .aufgabe-marke { color: var(--error); }

.aufgabe-text {
  flex: 1 1 22rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.aufgabe-grund {
  font-size: .9rem;
  color: var(--text-muted);
}

.aufgabe-ziel { flex: 0 0 auto; margin-left: auto; }

/* Ein zurueckgenommener Knopf: gleiche Trefferflaeche, weniger Gewicht. */
.knopf--leise {
  background: var(--bg);
  color: var(--navy);
  border: 1px solid var(--border);
}

.knopf--leise:hover { border-color: var(--navy); background: var(--bg-alt); }

@media (max-width: 640px) {
  .abschnitt--jetzt { padding-left: var(--abstand-m); }
  .aufgabe-ziel { margin-left: 0; width: 100%; }
}


/* =====================================================================
 * Kopfbereich verdichten
 * ================================================================== */

/* Die Marke einzeilig: Name und Zusatz nebeneinander statt uebereinander. */
.kopf-marke { flex-direction: row; align-items: baseline; gap: var(--abstand-s); }
.kopf-marke-zusatz { margin: 0; }

/* Die Bereichszeile ist eine Ortsangabe, keine Ueberschrift. */
.bereich-zeile { padding-top: 4px; padding-bottom: 4px; }

/*
 * Statusleiste des Projekts: die Zustandsuebergaenge in einer Zeile,
 * direkt unter dem Seitenkopf. Kein eigener Abschnitt mit Ueberschrift -
 * es sind Schaltflaechen, kein Kapitel.
 */
.statusleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-m);
  margin: 0 0 var(--abstand-l);
  padding: var(--abstand-s) var(--abstand-m);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.statusleiste-stand { margin: 0; font-size: .95rem; }
.statusleiste-stand strong { color: var(--navy); }

.statusleiste-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tippabstand);
  margin-left: auto;
}

.statusleiste-knoepfe form { margin: 0; }

@media (max-width: 640px) {
  .statusleiste-knoepfe { margin-left: 0; width: 100%; }
}


/* =====================================================================
 * Werkzeugmenue „Mehr“ in der Navigationsleiste
 *
 * Ohne JavaScript (die Inhaltsrichtlinie verbietet Skripte im
 * Dokument): <details>/<summary> koennen Aufklappen, Tastatur und
 * Vorleser von Haus aus.
 * ================================================================== */

.reiter-mehr { position: relative; margin-left: auto; }

.reiter-mehr > summary {
  cursor: pointer;
  list-style: none;
  gap: 6px;
}

.reiter-mehr > summary::-webkit-details-marker { display: none; }

.reiter-mehr-pfeil { font-size: .7em; opacity: .8; }
.reiter-mehr[open] .reiter-mehr-pfeil { transform: rotate(180deg); }

.reiter-mehr-liste {
  position: absolute;
  right: 0;
  z-index: 30;
  min-width: 14rem;
  margin: 4px 0 0;
  padding: 6px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(18, 29, 51, .22);
}

.reiter-mehr-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--abstand-m);
  border-radius: var(--radius);
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
}

.reiter-mehr-link:hover { background: var(--bg-alt); }

.reiter-mehr-link[aria-current="page"] {
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--akzent);
}

/*
 * Auf schmalen Geraeten klappt das Menue nicht ueber den Inhalt,
 * sondern schiebt ihn - ein ueberlagerndes Menue laesst sich mit
 * Handschuhen schlecht wieder schliessen.
 */
@media (max-width: 720px) {
  .reiter-mehr { margin-left: 0; }
  .reiter-mehr-liste {
    position: static;
    min-width: 0;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
}


/* =====================================================================
 * Dashboard: flache Kennzahlenzeile und zwei Arbeitsspalten
 *
 * Ziel ist messbar: Uebersicht UND Arbeitsinhalt muessen bei 900 px
 * Bildschirmhoehe gemeinsam sichtbar sein. Vorher belegte ein einziger
 * Block den ganzen ersten Bildschirm.
 * ================================================================== */

.seitenkopf--zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-m);
}

.seitenkopf--zeile h1 { margin-bottom: 2px; }
.seitenkopf--zeile .seitenkopf-text { margin: 0; }
.seitenkopf-aktion { flex: 0 0 auto; }

/* Flache Variante: kleinere Zahl, engere Polsterung, sechs in eine Zeile. */
.kennzahl-gitter--flach {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--tippabstand);
  margin-bottom: var(--abstand-l);
}

.kennzahl-gitter--flach .kennzahl { padding: 10px var(--abstand-m); }
.kennzahl-gitter--flach .kennzahl-wert { font-size: 1.5rem; }
.kennzahl-gitter--flach .kennzahl--datum .kennzahl-wert { font-size: 1.2rem; }
.kennzahl-gitter--flach .kennzahl-name { font-size: .8rem; }

/*
 * Zwei Spalten ab 1000 px: links die liegen gebliebene Arbeit, rechts
 * die kommenden Termine. Darunter einspaltig - nebeneinander waeren
 * beide Spalten zu schmal fuer die Projektnamen.
 */
.arbeitsspalten {
  display: grid;
  gap: var(--abstand-l);
  margin-bottom: var(--abstand-l);
}

@media (min-width: 1000px) {
  .arbeitsspalten { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

.arbeitsspalten .abschnitt { margin-bottom: 0; }

.fliesstext--fussnote {
  margin: var(--abstand-s) 0 0;
  font-size: .9rem;
}

/* Kommende Termine: Datum und Sache, nichts weiter. */
.terminliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.termin-zeile {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-m);
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.termin-zeile:last-child { border-bottom: none; }

.termin-datum {
  flex: 0 0 4.6rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.termin-was { min-width: 0; }

/* Planungswerkzeuge: bewusst zurueckgenommen, kein Alltagsknopf. */
.planwerkzeug {
  margin-top: var(--abstand-l);
  padding-top: var(--abstand-m);
  border-top: 1px solid var(--border);
}

.planwerkzeug-titel {
  margin: 0 0 var(--abstand-s);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.planwerkzeug form { margin: 0; }

.planwerkzeug-hinweis {
  margin: var(--abstand-s) 0 0;
  font-size: .85rem;
  color: var(--text-muted);
}


/* =====================================================================
 * Kopfzeile: Marke, Bereich und Benutzer in EINER Zeile
 *
 * Gemessen bei 1024 px begann die Seitenueberschrift vorher auf y=301.
 * Ziel: Kopf plus Navigation zusammen unter 160 px.
 * ================================================================== */

.kopf-bereich {
  display: inline-flex;
  align-items: baseline;
  gap: var(--abstand-s);
  margin-left: var(--abstand-l);
  padding-left: var(--abstand-l);
  border-left: 1px solid rgba(255, 255, 255, .22);
  min-width: 0;
}

.kopf-bereich-zurueck {
  color: #A9B6CE;
  text-decoration: none;
  font-size: .85rem;
  white-space: nowrap;
}

.kopf-bereich-zurueck:hover { color: #FFFFFF; text-decoration: underline; }

.kopf-bereich-name {
  color: #FFFFFF;
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Auf schmalen Geraeten entfaellt der Markenzusatz. "Produktion &
 * Instandhaltung" ist Zierde; der Bereichsname ist Information und
 * bleibt.
 */
@media (max-width: 900px) {
  .kopf-marke-zusatz { display: none; }
  .kopf-bereich {
    margin-left: var(--abstand-m);
    padding-left: var(--abstand-m);
  }
}

@media (max-width: 560px) {
  /* Ganz schmal: der Bereich rutscht unter die Marke, aber die Zeile
     bleibt eine Zeile hoch statt eines eigenen Streifens. */
  .kopf-bereich { margin-left: 0; padding-left: 0; border-left: none; }
}


/* =====================================================================
 * Vorläufige Termine und Planungsfenster
 *
 * Ein abgeleiteter Termin sieht in der Zeitleiste genauso aus wie ein
 * bestätigter — wer ihn dort liest, plant danach. Gekennzeichnet wird
 * über die FORM (gestrichelter Rand, Schraffur), nicht über die Farbe:
 * die trägt schon den Besetzungsstand.
 * ================================================================== */

.marke--vorlaeufig {
  border-color: var(--warn-text);
  color: var(--warn-text);
  background: var(--warn-flaeche);
  font-weight: 700;
}

.gantt-balken--vorlaeufig {
  border: 2px dashed var(--navy-dark);
}

.gantt-balken--fenster {
  /* Ein Fenster ist kein Vorgang: nur Umriss und Schraffur, keine
     gefüllte Fläche, die eine Auslastung behaupten würde. */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, .55) 0 6px,
    rgba(255, 255, 255, 0) 6px 12px
  );
}

@media (prefers-contrast: more) {
  .gantt-balken--vorlaeufig { border-width: 3px; }
}


/* =====================================================================
 * Tablet: Kennzahlen 3x2 statt 5+1, Aktionen weiter oben
 *
 * Gemessen bei 1024 px: die sechs Kacheln brachen in eine Reihe von
 * fuenf plus eine einzelne, die Aktionen begannen erst bei y=520 und
 * der Gantt bei y=1403. Ein Raster von 3x2 haelt die Zeile geschlossen
 * und spart eine Reihe.
 * ================================================================== */

@media (min-width: 700px) and (max-width: 1100px) {
  .kennzahl-gitter--flach { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kennzahl-gitter--flach .kennzahl { padding: 8px var(--abstand-s); }
  .kennzahl-gitter--flach .kennzahl-wert { font-size: 1.35rem; }

  /* Aufgabenzeilen kompakter: das Ziel rutscht neben den Text statt
     darunter, die Marke wird schmaler. */
  .aufgabe { padding: 8px var(--abstand-s); gap: var(--abstand-s); }
  .aufgabe-marke { min-width: 70px; font-size: .72rem; }
  .aufgabe-text { flex: 1 1 14rem; }
}

/* Der Zusatz unter einer Kennzahl: die Differenz benennen, nicht als
   Fussnote verstecken. */
.kennzahl-zusatz {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  color: var(--text-muted);
}

/* Formen in der Gantt-Legende — Farben allein erklaeren sie nicht. */
.gantt-legende-form {
  display: inline-block;
  width: 22px;
  height: 12px;
  border-radius: 3px;
  background: var(--bg-alt);
  vertical-align: -1px;
}

.gantt-legende-form--vorlaeufig { border: 2px dashed var(--navy-dark); }

.gantt-legende-form--fenster {
  border: 2px dashed var(--navy-dark);
  background-image: repeating-linear-gradient(
    45deg,
    var(--border) 0 4px,
    transparent 4px 8px
  );
}

/* Die Marke im Zeilenlabel des Gantt darf die Zeile nicht aufblaehen. */
.gantt .marke--vorlaeufig {
  padding: 0 5px;
  font-size: .68rem;
  margin-left: 4px;
}


/* Anlagenauswahl: mehrere Kästchen, mit Tippfläche für Handschuhe. */
.anlagenwahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tippabstand);
}

.anlagenwahl-punkt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 var(--abstand-m) 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-weight: 500;
  cursor: pointer;
}

.anlagenwahl-punkt:hover { border-color: var(--navy); background: var(--bg-alt); }
.anlagenwahl-punkt input { width: 20px; height: 20px; }
.anlagenwahl-punkt:has(input:checked) {
  border-color: var(--navy);
  background: var(--info-flaeche);
  font-weight: 700;
}

.feldhinweis {
  margin: 4px 0 0;
  font-size: .85rem;
  color: var(--text-muted);
}


/* Anlagenauswahl: Kästchen für „gehört dazu“, Funkknopf für „ist die
   Hauptanlage“. Zwei Fragen, zwei Bedienelemente — HTML schickt
   Kästchen in Dokumentreihenfolge, die Klickreihenfolge steht nicht
   zur Verfügung. */
.anlagenwahl-paar {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.anlagenwahl-paar .anlagenwahl-punkt {
  border: none;
  border-radius: 0;
  background: transparent;
}

.anlagenwahl-haupt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 10px;
  border-left: 1px solid var(--border);
  background: var(--bg-alt);
  font-size: .78rem;
  color: var(--text-muted);
  cursor: pointer;
}

.anlagenwahl-haupt input { width: 18px; height: 18px; }

.anlagenwahl-paar:has(input[type="radio"]:checked) {
  border-color: var(--navy);
}

.anlagenwahl-paar:has(input[type="radio"]:checked) .anlagenwahl-haupt {
  background: var(--navy);
  color: #FFFFFF;
  font-weight: 700;
}


/* =====================================================================
 * Vorbehalt am Datum: kurz sichtbar, Begründung im Aufklapp
 * ================================================================== */

.vorbehalt { display: inline-block; margin-left: var(--abstand-s); }

.vorbehalt > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 8px;
  border-radius: var(--radius);
  color: var(--warn-text);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.vorbehalt > summary::-webkit-details-marker { display: none; }
.vorbehalt > summary:hover { background: var(--warn-flaeche); }

.vorbehalt-text {
  margin: var(--abstand-s) 0 0;
  padding: var(--abstand-s) var(--abstand-m);
  max-width: 62ch;
  border-left: 3px solid var(--akzent);
  background: var(--bg-alt);
  font-size: .9rem;
  line-height: 1.5;
}

/*
 * Phase und Rollen nebeneinander, sobald Platz ist: zwei kurze Felder
 * untereinander verschenken eine ganze Zeile.
 */
@media (min-width: 900px) {
  .feldreihe { display: flex; flex-wrap: wrap; gap: var(--abstand-m); }
  .feldreihe > .feld { flex: 1 1 12rem; min-width: 0; }
  .feldreihe > .feld--breit { flex: 3 1 22rem; }
}

/* Codex: Arbeitsoberfläche für schnelle Orientierung auf Laptop und Tablet. */
.status--geplant { background: #edf1f7; color: #334565; }
.status--geplant::before { content: '○'; }
.status--vorbereitung { background: #fff0d9; color: #825100; }
.status--vorbereitung::before { content: '◐'; }
.status--laufend { background: #e2edff; color: #214ea0; }
.status--laufend::before { content: '▶'; }
.status--abgeschlossen { background: #e4f1e9; color: #14602f; }
.status--abgeschlossen::before { content: '✓'; }
.status--abgesagt { background: #edeff2; color: #4a5568; }
.status--abgesagt::before { content: '×'; }
.pm-eyebrow { margin: 0 0 4px; color: #59677e; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.pm-muted { color: #59677e; }
.pm-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 0 0 24px; }
.pm-metric { color: var(--navy); text-decoration: none; background: white; border: 1px solid #dce2eb; border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pm-metric strong { font-size: 2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pm-metric-label { font-size: .86rem; font-weight: 600; }
.pm-metric-label > span { display: block; color: #62718b; margin-bottom: 5px; }
.pm-metric--laufend { background: #edf3ff; border-color: #c5d8f8; }
.pm-metric--laufend .pm-metric-label > span { color: #214ea0; }
.pm-metric--abgeschlossen .pm-metric-label > span { color: #14602f; }
.pm-focus-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.pm-focus { min-width: 0; padding: 20px; border-color: #dce2eb; border-radius: 12px; }
.pm-focus h2, .pm-project-section h2 { font-size: 1.1rem; }
.pm-text-link { font-size: .83rem; font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.pm-action-list, .pm-event-list { list-style: none; padding: 0; margin: 0; }
.pm-action-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #e9edf3; }
.pm-action-list li:first-child, .pm-event-list li:first-child { border-top: 0; }
.pm-action-list li > div { min-width: 0; flex: 1; }
.pm-action-list li > div > a { font-size: .88rem; line-height: 1.4; font-weight: 650; text-decoration: none; display: block; }
.pm-action-list small { display: block; font-size: .74rem; color: #59677e; margin-top: 3px; }
.pm-action-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; background: #edf1f7; color: #334565; font-weight: 800; }
.pm-action-icon--urgent { color: #962f24; background: #fcebe8; }
.pm-arrow { display: grid; place-items: center; width: 44px; min-height: 44px; flex-shrink: 0; text-decoration: none; border-radius: 8px; }
.pm-arrow:hover, .pm-open:hover { background: #edf3ff; }
.pm-event-list li { display: flex; align-items: center; gap: 14px; border-top: 1px solid #e9edf3; padding: 10px 0; }
.pm-event-list time { flex: 0 0 54px; background: #f0f3f8; border-radius: 8px; text-align: center; padding: 4px; }
.pm-event-list time strong { display: block; font-size: 1.12rem; }
.pm-event-list time span { display: block; color: #59677e; font-size: .62rem; }
.pm-event-list a { font-weight: 600; font-size: .86rem; text-decoration: none; line-height: 1.4; }
.pm-project-section { margin-bottom: 24px; }
.pm-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.pm-card { min-width: 0; background: #fff; border: 1px solid #dce2eb; border-radius: 12px; padding: 18px; display: flex; flex-direction: column; box-shadow: 0 2px 5px #18284405; }
.pm-card:hover { border-color: #9fb1cb; box-shadow: 0 4px 18px #18284409; }
.pm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.pm-code { font-size: .74rem; letter-spacing: .06em; font-weight: 700; color: #62718b; }
.pm-card .status { font-size: .72rem; min-height: 28px; padding: 3px 9px; }
.pm-card-title { font-size: 1.02rem; line-height: 1.35; margin-bottom: 7px; overflow-wrap: anywhere; }
.pm-card-title a { color: var(--navy); text-decoration: none; }
.pm-card-date { color: #59677e; font-size: .79rem; margin-bottom: 10px; }
.pm-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pm-card-tags:empty { display: none; }
.pm-tag { display: inline-flex; align-items: center; font-size: .72rem; padding: 3px 8px; border-radius: 5px; background: #eef1f6; color: #4b5a70; font-weight: 550; }
.pm-tag--amber { background: #fff0d9; color: #825100; }
.pm-card-progress { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; font-size: .73rem; color: #59677e; gap: 6px; }
.pm-card-progress strong { color: #334565; }
.pm-card-progress progress { appearance: none; width: 100%; height: 6px; border: 0; border-radius: 4px; overflow: hidden; background: #e9eef5; accent-color: #4265a0; }
.pm-card-progress progress::-webkit-progress-bar { background: #e9eef5; }
.pm-card-progress progress::-webkit-progress-value { background: #4265a0; border-radius: 4px; }
.pm-card-progress progress::-moz-progress-bar { background: #4265a0; border-radius: 4px; }
.pm-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #e9edf3; margin-top: 14px; padding-top: 5px; }
.pm-team { color: #59677e; font-size: .78rem; }
.pm-team > span { color: #62718b; margin-right: 4px; }
.pm-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 8px; font-size: .78rem; font-weight: 650; gap: 16px; text-decoration: none; }
.pm-empty { text-align: center; border: 1px dashed #b9c6d8; border-radius: 12px; padding: 35px 20px; background: #fff; }
.pm-empty p { color: #59677e; }
.pm-empty-small { display: flex; align-items: center; gap: 16px; padding: 20px 0; color: #59677e; }
.pm-empty-small > span { font-size: 1.5rem; color: #14602f; }
.pm-empty-small p { margin: 0; }
.pm-secondary { padding: 16px 20px; }
.pm-secondary > summary { cursor: pointer; font-weight: 650; min-height: 36px; }
.pm-secondary[open] > summary { margin-bottom: 16px; }
.pm-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.pm-filter-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 8px; padding: 8px 14px; color: #4b5a70; text-decoration: none; background: #e8edf5; font-size: .84rem; font-weight: 600; }
.pm-filter-tabs a[aria-current="page"] { background: #1b2a4a; color: white; }
.pm-filter-tabs b { font-size: .72rem; opacity: .9; }
@media screen and (min-width: 900px) and (pointer: fine) {
  html { font-size: 100%; }
  :root { --tippflaeche: 44px; }
  .kopfleiste-innen { min-height: 70px; padding: 10px 26px; }
  .kopf-marke-name { font-size: 1rem; letter-spacing: .035em; }
  .kopf-marke-zusatz { display: none; }
  .kopf-bereich { font-size: .78rem; }
  .reiter { padding-top: 0; padding-bottom: 0; min-height: 52px; margin: 0; border-radius: 0; }
  .reiter-link { min-height: 48px; padding: 8px 18px; font-size: .88rem; }
  .inhalt { padding: 26px 32px 40px; max-width: 1520px; }
  .seitenkopf { margin-bottom: 22px; }
  .seitenkopf h1 { font-size: 1.9rem; }
  .abschnitt { padding: 20px; }
  .filterleiste { gap: 12px; padding: 16px; }
}
@media screen and (max-width: 1100px) {
  .pm-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pm-metrics { gap: 10px; }
  .pm-metric { padding: 14px; }
  .pm-metric-label { font-size: .75rem; }
  .pm-focus-grid { grid-template-columns: 1fr; gap: 0; }
}
@media screen and (max-width: 600px) {
  .pm-card-grid { grid-template-columns: 1fr; }
  .pm-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pm-card { padding: 16px; }
  .pm-focus { padding: 16px; }
  .pm-action-list small { font-size: .77rem; }
  .pm-card .status { font-size: .78rem; }
  .pm-filter-tabs a { min-height: 48px; }
}
@media print {
  .pm-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pm-card { break-inside: avoid; }
  .pm-open, .pm-arrow, .pm-filter-tabs { display: none; }
}

.pm-relevance-bar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; }
.pm-relevance-bar form { margin-left:auto; }
.pm-card-relevance { margin-top:14px; }
.pm-relevance-button { width:100%; border:1px solid #c6d2e3; background:#f1f5fa; color:#334565; min-height:44px; padding:8px; border-radius:8px; font:inherit; font-size:.78rem; font-weight:650; cursor:pointer; }
.pm-relevance-button:hover { background:#e2ebf9; }
.pm-welcome { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; border:1px solid #c5d8f8; background:#edf3ff; border-radius:12px; margin-bottom:20px; }
.pm-welcome h2 { font-size:1.2rem; }
.pm-welcome p { margin:0; font-size:.88rem; color:var(--text-muted); max-width:65ch; }
.pm-welcome .knopf { flex-shrink:0; }
.pm-operation-note { font-size:.8rem; color:#825100; padding:10px 14px; background:#fff4e3; border-radius:8px; }
.pm-operation-note > span { font-weight:800; margin-right:8px; }
@media(max-width:700px) { .pm-welcome { flex-direction:column; align-items:stretch; } }

.pm-card .status { font-size: .875rem; min-height: 30px; }
.pm-card-relevance + .pm-card-bottom { margin-top: 8px; }

/* Die Filterleiste hatte bisher kein Layout und stapelte jedes Feld. */
.filterleiste { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) minmax(140px, 1fr) auto; align-items:end; gap:14px; margin-bottom:22px; padding:16px; border:1px solid #dce2eb; border-radius:12px; background:white; }
.filterleiste .feld { margin:0; min-width:0; }
.filterleiste label { font-size:.8rem; margin-bottom:5px; }
.filterleiste input, .filterleiste select { min-height:44px; font-size:.88rem; }
.filterleiste-knoepfe { display:flex; flex-wrap:wrap; gap:8px; }
.pm-workspace .seitenkopf > .knopf, .pm-welcome .knopf, .seitenkopf-aktion > .knopf { background:var(--navy); color:white; }
@media(max-width:850px) { .filterleiste { grid-template-columns:1fr 1fr; } .filterleiste .feld--breit { grid-column:1/-1; } }
@media(max-width:520px) { .filterleiste { grid-template-columns:1fr; } .filterleiste .feld--breit { grid-column:auto; } }

@media screen and (min-width:900px) and (pointer:fine) {
 .kopfleiste-innen { min-height:64px; padding:8px 24px; }
 .kopf-benutzer { min-height:44px; padding:0; }
 .reiter { padding:0 24px; gap:8px; align-items:center; }
 .reiter-liste { margin:0; padding:0; gap:4px; }
 .pm-card { padding:16px; }
 .pm-card-top { margin-bottom:9px; }
 .pm-card-tags { margin-bottom:8px; }
 .pm-card-bottom { padding-top:2px; }
}
@media screen and (max-width:720px) {
 .kopfleiste-innen { min-height:0; padding:8px 16px; gap:8px; align-items:center; }
 .kopf-marke { min-height:34px; padding:0; }
 .kopf-marke-name { font-size:.9rem; }
 .kopf-bereich { display:none; }
 .kopf-benutzer { min-height:36px; padding:0; }
 .kopf-benutzer-name { font-size:.85rem; }
 .kopf-benutzer-rolle { display:none; }
 .knopf--abmelden { min-height:40px; padding:0 12px; font-size:.8rem; }
 .reiter { display:flex; width:100%; max-width:100%; min-width:0; flex-wrap:wrap; padding:2px 8px; gap:4px; align-items:center; }
 .reiter-liste { display:flex; flex:1 1 100%; flex-wrap:wrap; min-width:0; gap:2px; padding:0; margin:0; }
 .reiter-link { white-space:nowrap; min-height:46px; padding:6px 10px; font-size:.84rem; }
 .reiter-mehr { flex:0 0 auto; margin-left:0; }
 .reiter-mehr-liste { position:absolute; top:100%; right:0; min-width:180px; flex-direction:column; box-shadow:var(--schatten); z-index:20; }
 .pm-filter-tabs { flex-wrap:nowrap; overflow-x:auto; gap:6px; }
 .pm-filter-tabs a { white-space:nowrap; flex-shrink:0; font-size:.76rem; padding:8px 10px; }
 .filterleiste { grid-template-columns:1fr 1fr; gap:10px; padding:12px; }
 .filterleiste .feld--breit { grid-column:1/-1; }
 .filterleiste-knoepfe { grid-column:1/-1; }
 .filterleiste > button { grid-column:1/-1; }
 .filterleiste input, .filterleiste select { font-size:.82rem; padding-left:10px; padding-right:25px; }
}
.pm-detail-nav { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; }
.pm-detail-nav a { padding:8px 14px; border-radius:8px; min-height:44px; display:flex; align-items:center; text-decoration:none; font-size:.85rem; font-weight:600; background:#e8edf5; color:#334565; }
.pm-detail-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.pm-detail-summary > div { background:white; padding:14px 18px; border:1px solid #dce2eb; border-radius:10px; }
.pm-detail-summary span { display:block; color:#59677e; font-size:.78rem; }
.pm-detail-summary strong { display:block; color:#1b2a4a; font-size:1.4rem; }
.pm-detail-summary progress { width:100%; height:6px; accent-color:#4265a0; }
@media(max-width:600px) { .pm-detail-summary { grid-template-columns:1fr; } }

.reiter-mobil { display:none; }
@media screen and (max-width:720px) {
 .reiter > .reiter-liste, .reiter > .reiter-mehr { display:none; }
 .reiter-mobil { display:block; width:100%; color:white; }
 .reiter-mobil summary { min-height:48px; display:flex; align-items:center; justify-content:space-between; padding:8px 12px; cursor:pointer; font-weight:650; font-size:.88rem; }
 .reiter-mobil summary::-webkit-details-marker { display:none; }
 .reiter-mobil ul { display:grid; grid-template-columns:1fr 1fr; list-style:none; margin:0; padding:0 0 8px; gap:4px; }
 .reiter-mobil a { display:flex; align-items:center; min-height:48px; padding:8px 12px; color:white; text-decoration:none; border-radius:6px; font-size:.82rem; }
 .reiter-mobil a[aria-current="page"] { background:white; color:var(--navy); font-weight:700; }
 .reiter-mobil a:hover { background:#334565; color:white; }
 .pm-filter-tabs { display:grid; grid-template-columns:1fr 1.25fr 1.3fr; overflow:visible; }
 .pm-filter-tabs a { justify-content:center; font-size:.69rem; padding:6px; gap:4px; }
}

.pm-detail-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 18px; }
.pm-detail-header > .seitenkopf-hinweis { grid-column:1/-1; margin:0; font-size:.8rem; }
.pm-detail-header > h1 { grid-column:1; margin:0; }
.pm-detail-header > .status { grid-column:2; font-size:.9rem; justify-self:end; }
.pm-detail-header > .seitenkopf-text { grid-column:1/-1; margin:6px 0 0; font-size:.9rem; }
.pm-status-change { padding:12px 18px; }
.pm-status-change summary { min-height:28px; cursor:pointer; font-size:.86rem; font-weight:650; }
.pm-status-change[open] summary { margin-bottom:12px; }
.pm-status-change .statusleiste-knoepfe { margin-left:0; }
@media(max-width:600px) {
 .pm-detail-header { gap:8px; }
 .pm-detail-header > .status { grid-column:1/-1; justify-self:start; }
 .pm-detail-header > h1 { grid-column:1/-1; }
 .pm-detail-summary { grid-template-columns:1fr 1fr; gap:8px; }
 .pm-detail-summary > div { padding:12px; }
 .pm-detail-summary > div:last-child { grid-column:1/-1; }
}

#checkliste > .formular { width:100%; max-width:none; }
.pm-checklist-table { width:100%; }
.pm-checklist-table th:first-child { width:30%; }
.pm-checklist-table td:nth-child(4) { min-width:170px; }
.pm-checklist-table td:nth-child(5) { width:25%; }
.pm-checklist-table select.feld { margin:0; min-height:44px; width:100%; }
.pm-checklist-table textarea.feld { margin:0; min-height:48px; height:48px; width:100%; resize:vertical; }
.pm-checklist-table textarea.feld:focus { min-height:90px; }
@media(max-width:720px) {
 .pm-checklist-table, .pm-checklist-table tbody { display:block; min-width:0; }
 .pm-checklist-table thead { display:none; }
 .pm-checklist-table tbody tr { display:grid; grid-template-columns:1fr 1fr; border-bottom:2px solid #dce2eb; padding:10px 0; }
 .pm-checklist-table tbody th { grid-column:1/-1; width:auto; padding:8px 12px; }
 .pm-checklist-table tbody td { display:block; width:auto; border:0; padding:6px 12px; min-width:0; }
 .pm-checklist-table td::before { content:attr(data-label); display:block; font-size:.7rem; font-weight:600; color:#59677e; margin-bottom:4px; }
 .pm-checklist-table td:nth-child(4), .pm-checklist-table td:nth-child(5) { grid-column:1/-1; }
 .pm-checklist-table td:nth-child(4) { max-width:100%; }
}

.pm-card-notice { display:flex; gap:8px; align-items:center; min-height:36px; margin-bottom:6px; font-size:.8rem; font-weight:650; color:#825100; text-decoration:none; }
.pm-card-notice > span { background:#fff0d9; border-radius:50%; width:24px; height:24px; display:grid; place-items:center; }

@media(max-width:720px) { .pm-filter-tabs--two { grid-template-columns:1fr 1fr; } .pm-filter-tabs--two a { white-space:normal; text-align:center; } }

/* Auch kleine Laptops zeigen Aktionen und Termine nebeneinander. */
@media screen and (min-width:900px) {
 .pm-focus-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px; }
}
.pm-focus-grid--single { grid-template-columns:1fr; }
.pm-focus-grid--single .pm-focus { max-width:none; }

.pm-progress-edit { margin-top:8px; }
.pm-progress-edit summary { min-height:40px; display:flex; align-items:center; cursor:pointer; font-size:.78rem; font-weight:650; color:#334565; }
.pm-progress-edit summary::after { content:' +'; margin-left:6px; }
.pm-progress-edit[open] summary::after { content:' −'; }
.pm-progress-edit label { font-size:.78rem; }
.pm-progress-edit input { min-height:44px; max-width:140px; }
.pm-progress-edit p { margin:6px 0 10px; font-size:.72rem; color:#59677e; }
@media print { .pm-progress-edit { display:none; } }

.pm-detail-summary progress { appearance:none; border:0; border-radius:4px; overflow:hidden; background:#e9eef5; }
.pm-detail-summary progress::-webkit-progress-bar { background:#e9eef5; }
.pm-detail-summary progress::-webkit-progress-value { background:#4265a0; border-radius:4px; }
.pm-detail-summary progress::-moz-progress-bar { background:#4265a0; border-radius:4px; }
.pm-detail-summary .pm-detail-team-names { margin-top:10px; font-size:.86rem; color:#334565; }

/* Gemeinsame Arbeitsfläche: Kopf, Navigation und Inhalt bleiben ausgerichtet. */
:root { --arbeitsbreite: 1760px; --arbeitsrand: clamp(16px, 2.3vw, 32px); }
.pm-fixed-shifts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.pm-fixed-shifts article { display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--bg-alt); }
.pm-fixed-shifts span { color:var(--text-muted); font-size:.9rem; }
@media screen and (min-width:900px) {
  .kopfleiste { padding:0; }
  .kopfleiste-innen { width:100%; max-width:var(--arbeitsbreite); margin-inline:auto; padding:14px var(--arbeitsrand); }
  .reiter { width:100%; max-width:none; margin:0; padding-inline:max(var(--arbeitsrand),calc((100% - var(--arbeitsbreite))/2 + var(--arbeitsrand))); }
  .inhalt { width:100%; max-width:var(--arbeitsbreite); margin-inline:auto; padding:28px var(--arbeitsrand) 48px; }
  .fussleiste { padding-inline:max(var(--arbeitsrand),calc((100% - var(--arbeitsbreite))/2 + var(--arbeitsrand))); }
  .pm-card-grid--projects { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:stretch; }
  .pm-card { min-width:0; }
  .pm-card-title { line-height:1.4; }
  #bearbeiten .formular { width:100%; max-width:none; }
  .tabellen-huelle { max-width:100%; }
  .fliesstext { max-width:78ch; }
}
@media screen and (min-width:2300px) {
  :root { --arbeitsbreite:2080px; }
  .pm-card-grid--projects { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pm-focus-grid { gap:24px; }
  .pm-card-grid { gap:24px; }
}

/* Kleine Datumsangaben behalten auf dunklen Tabellenköpfen den hellen Kontrast. */
.tabelle thead .text-klein { color:inherit; }

/* Kompakte Einteilung: Namen bleiben beim seitlichen Scrollen sichtbar. */
.pm-team-table { min-width:1080px; table-layout:fixed; }
.pm-team-table th:first-child { width:165px; }
.pm-team-table td, .pm-team-table th { padding:12px 10px; }
.pm-team-table tbody th { position:sticky; left:0; z-index:1; background:var(--bg); box-shadow:1px 0 var(--border); }
.pm-team-table thead th:first-child { left:0; z-index:3; }
.pm-team-assignment { display:block; padding:8px 10px; margin-bottom:7px; border-left:3px solid var(--navy-light); border-radius:5px; background:var(--info-flaeche); text-decoration:none; }
.pm-team-assignment span { display:block; font-size:.74rem; color:var(--text-muted); }
.pm-team-assignment strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:.85rem; line-height:1.35; color:var(--navy); }
.pm-team-free { color:var(--text-muted); font-size:.8rem; }
.pm-team-table .status, .pm-team-table .marke { margin-top:4px; }

.pm-team-period { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:auto; }
.pm-team-period label { margin:0; font-size:.85rem; }
.pm-team-period input { width:auto; min-width:0; max-width:100%; }
.pm-team-assignment--pruefen { border-left-color:var(--error); background:var(--error-flaeche); }
.pm-team-assignment--pruefen strong, .pm-team-assignment .pm-team-assignment-warning { color:var(--error-text); }
@media (max-width:600px) { .pm-team-period { margin-left:0; width:100%; } }

/* Die Hauptaktion bleibt sichtbar; die Relevanzauswahl tritt zurück. */
.pm-card-relevance { margin-top:8px; }
.pm-relevance-button { width:auto; border-color:transparent; background:transparent; color:var(--text-muted); padding:4px 0; font-weight:400; text-align:left; }
.pm-relevance-button:hover { color:var(--navy); background:transparent; text-decoration:underline; }
.pm-open { color:var(--navy); background:var(--info-flaeche); padding-inline:14px; font-size:.85rem; font-weight:700; }
.pm-team-table--12 { min-width:2100px; }
.pm-team-navigation { gap:8px; }
.pm-team-period select { width:auto; min-width:0; }
@media screen and (min-width:2300px) { body.pm-workspace-wide { --arbeitsbreite:3000px; } }
@media screen and (max-width:600px) {
  .pm-team-navigation > a.knopf { width:auto; flex:1 1 0; justify-content:center; }
}
@media print {
  .pm-team-table { min-width:0; table-layout:fixed; font-size:7pt; }
  .pm-team-table th:first-child { width:20mm; }
  .pm-team-table tbody th { position:static; box-shadow:none; }
  .pm-team-table td, .pm-team-table th { padding:2mm 1mm; }
  .pm-team-assignment { padding:1mm; border-left-width:1mm; }
  .pm-team-assignment span, .pm-team-assignment strong, .pm-team-table .status { font-size:6pt; white-space:normal; }
  .pm-team-assignment strong { display:block; overflow:visible; }
  .pm-team-navigation { display:none; }
}

.pm-planning-alert { margin:0 0 20px; border:1px solid var(--error); border-left-width:4px; border-radius:8px; background:var(--error-flaeche); padding:8px 16px; color:var(--error-text); }
.pm-planning-alert summary { cursor:pointer; padding:10px 0; font-weight:700; }
.pm-planning-alert ul { margin:4px 0 12px; padding-left:24px; }
.pm-planning-alert a { color:inherit; }
.pm-planning-alert--warnung { border-color:var(--warn); background:var(--warn-flaeche); color:var(--warn-text); }

/* Breite Einsatzpläne haben ein eigenes Papierformat und keine Bedienlinks. */
@media print {
  @page team-sechs { size:A4 landscape; margin:10mm; }
  @page team-zwoelf { size:A3 landscape; margin:10mm; }
  body.pm-team-page--6 { page:team-sechs; }
  body.pm-team-page--12 { page:team-zwoelf; }
  .pm-team-page .inhalt, .pm-team-page .kopfleiste-innen { width:100%; max-width:none; margin:0; padding:0; }
  .pm-team-page .kopfleiste { margin-bottom:3mm; }
  .pm-team-page .kopf-marke-zusatz, .pm-team-page .kopf-bereich { display:none; }
  .pm-team-page .seitenkopf { display:block; margin-bottom:3mm; }
  .pm-team-page .seitenkopf h1 { font-size:16pt; margin:0; }
  .pm-team-page .seitenkopf p { font-size:9pt; margin:1mm 0; }
  .pm-team-page .abschnitt, .pm-team-page .tabellen-huelle { padding:0; border:0; margin:0 0 3mm; }
  .pm-team-page h2 { font-size:11pt; margin:2mm 0; }
  .pm-team-page a[href]::after { content:none; }
  .pm-team-page .pm-team-table { font-size:7pt; width:100%; }
  .pm-team-page .pm-team-table .status { max-width:100%; min-width:0; padding:1mm; overflow-wrap:anywhere; }
  .pm-team-page .pm-team-table .pm-team-shift-label { font-size:6pt; }
  .pm-team-page .pm-team-assignment { margin-bottom:1mm; }
}
@media print {
  .pm-team-page .testsystem-banner { padding:2mm; margin-bottom:2mm; font-size:9pt; border-width:1pt !important; }
  .pm-team-page .kopfleiste-innen { min-height:0; }
  .pm-team-page .kopf-marke-name { font-size:10pt; }
  .pm-team-page .kopfleiste { padding-bottom:2mm; }
  .pm-team-page .pm-team-table th { white-space:normal; overflow-wrap:anywhere; }
  .pm-team-page .pm-team-table th .text-klein { display:block; font-size:6pt; line-height:1.2; }
  .pm-team-page .pm-team-table .marke, .pm-team-page .pm-team-table .datenluecke { min-width:0; min-height:0; padding:.5mm 1mm; font-size:7pt; }
  .pm-team-page .tabelle tbody td { height:auto; }
  .pm-team-page .fliesstext { font-size:8pt; margin:2mm 0; }
}

.pm-relevance-button { text-decoration:underline; text-underline-offset:3px; }
.pm-shift-unavailable { border-style:dashed; color:var(--text-muted); text-decoration:line-through; }
@media print { .pm-shift-unavailable { border-style:dashed !important; text-decoration:line-through; } }

/* Die Schichten lassen sich auch in einer langen Zeile sofort unterscheiden. */
.pm-shift-badge { font-weight:700; min-width:28px; }
.pm-shift-badge--f { background:#fff0d9; color:#825100; border-color:#b77d25; }
.pm-shift-badge--s { background:#e2edff; color:#214ea0; border-color:#527bbb; }
.pm-shift-badge--n { background:#ece4f6; color:#5a3e78; border-color:#84669f; }
.pm-shift-badge.pm-shift-unavailable { background:#edf0f5; color:#59677e; border-color:#8995a8; border-style:dashed; }
@media screen and (max-width:600px) {
  .testsystem-banner { display:block; min-height:0; padding:7px 12px; font-size:.85rem; line-height:1.3; }
  .testsystem-banner::before, .testsystem-banner::after { display:none; }
  .testsystem-banner-zusatz { display:block; margin-top:2px; font-size:.75rem; letter-spacing:0; }
}
@media print { .testsystem-banner { min-height:0; } }

/* Leere Zeiträume einmal benennen, statt zwölf identische Zellen. */
.pm-team-table td.pm-team-empty-period{font-size:.85rem;color:var(--text-muted);font-style:italic;}

/* Eine Woche passt ohne Querscrollen auch auf schmale Bildschirme. */
.pm-team-table--1 {min-width:0;}
.pm-team-table--1 th:first-child {width:36%;}
.pm-team-table--1 .status {max-width:100%;white-space:normal;overflow-wrap:anywhere;}

.pm-team.pm-team--offen{color:var(--warn-text);background:var(--warn-flaeche);border-radius:6px;padding:5px 8px;font-weight:700;}
.pm-team--offen > span{color:inherit;}

/* Nächste Schritte: kompakte Übersicht, Formulare erst beim Öffnen. */
.pm-task-intro { color:var(--text-muted); font-size:.86rem; margin:0 0 18px; max-width:75ch; }
.pm-task-intro span { display:inline-block; }
.pm-task-list { display:grid; gap:10px; }
.pm-task { border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden; }
.pm-task > summary { display:grid; grid-template-columns:34px minmax(0,1fr) 130px 112px 20px; align-items:center; gap:14px; padding:16px 18px; cursor:pointer; list-style:none; min-height:76px; }
.pm-task > summary::-webkit-details-marker { display:none; }
.pm-task > summary::marker { content:''; }
.pm-task > summary:hover { background:var(--bg-alt); }
.pm-task > summary:focus-visible { outline:3px solid var(--fokus-farbe); outline-offset:-4px; border-radius:10px; }
.pm-task-symbol { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; font-size:1.12rem; color:var(--navy); background:var(--neutral-flaeche); }
.pm-task-name { min-width:0; display:grid; gap:4px; }
.pm-task-name strong { font-size:.96rem; font-weight:650; line-height:1.4; overflow-wrap:anywhere; }
.pm-task-name small,.pm-task-date small { display:block; color:var(--text-muted); font-size:.76rem; font-weight:450; line-height:1.45; }
.pm-task-date { font-variant-numeric:tabular-nums; font-weight:650; font-size:.88rem; }
.pm-task-state { font-size:.76rem; font-weight:650; justify-self:start; border-radius:999px; padding:6px 10px; background:var(--neutral-flaeche); color:var(--neutral-text); }
.pm-task-chevron { justify-self:end; font-size:1.25rem; color:var(--text-muted); }
.pm-task[open] .pm-task-chevron { transform:rotate(180deg); }
.pm-task[open] > summary { background:var(--bg-alt); border-bottom:1px solid var(--border); }
.pm-task--erledigt .pm-task-symbol,.pm-task--erledigt .pm-task-state { color:var(--ok-text); background:var(--ok-flaeche); }
.pm-task--in_arbeit .pm-task-symbol,.pm-task--in_arbeit .pm-task-state { color:var(--info-text); background:var(--info-flaeche); }
.pm-task--nicht_relevant { background:var(--bg-alt); }
.pm-task--nicht_relevant .pm-task-name { color:var(--text-muted); }
.pm-task--overdue { border-left:4px solid var(--error); }
.pm-task--overdue .pm-task-date,.pm-task--overdue .pm-task-date small { color:var(--error-text); }
.pm-task-body { padding:20px; }
.pm-task-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pm-task-fields > div { min-width:0; }
.pm-task-wide { grid-column:1/-1; }
.pm-task-fields .feld { width:100%; min-width:0; }
.pm-task-context,.pm-task-warning { font-size:.86rem; line-height:1.5; margin:0 0 18px; }
.pm-task-context { color:var(--text-muted); }
.pm-task-warning { padding:12px 16px; border-radius:8px; color:var(--warn-text); background:var(--warn-flaeche); }
.pm-task-reset { border-top:1px solid var(--border); margin-top:16px; padding-top:16px; }
@media (max-width:900px) {
 .pm-task > summary { grid-template-columns:30px minmax(0,1fr) 112px 16px; gap:10px; padding:14px; }
 .pm-task-state { grid-column:2; grid-row:2; }
 .pm-task-chevron { grid-column:4; grid-row:1; }
 .pm-task-date { grid-column:3; grid-row:1/3; align-self:center; }
}
@media (max-width:580px) {
 .pm-task > summary { grid-template-columns:28px minmax(0,1fr) 16px; gap:8px 10px; }
 .pm-task-name { grid-column:2; }
 .pm-task-chevron { grid-column:3; }
 .pm-task-date { grid-column:2; grid-row:2; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
 .pm-task-state { grid-column:2; grid-row:3; }
 .pm-task-fields { grid-template-columns:1fr; }
 .pm-task-wide { grid-column:auto; }
 .pm-task-body { padding:16px; }
}
@media print {
 .pm-task { break-inside:avoid; }
 .pm-task-body { display:none; }
 .pm-task > summary { grid-template-columns:24px minmax(0,1fr) 100px 92px; padding:8px; }
 .pm-task-chevron { display:none; }
}

.pm-card-next { display:grid; gap:5px; text-decoration:none; color:var(--navy); padding:14px 0; border-top:1px solid var(--border); }
.pm-card-next span { font-size:.73rem; font-weight:650; color:var(--text-muted); }
.pm-card-next strong { font-size:.87rem; font-weight:650; line-height:1.45; }
.pm-card-next small { font-size:.73rem; color:var(--text-muted); }
.pm-card-next--urgent span { color:var(--error-text); }
.pm-card-next:focus-visible { outline:3px solid var(--fokus-farbe); outline-offset:4px; border-radius:3px; }

/* Persönliche Fristen: drei lesbare Angaben, auf schmalen Geräten eine Karte. */
.pm-my-deadlines td:first-child { width:24%; }
.pm-my-deadlines td:nth-child(2) { width:48%; }
.pm-my-deadlines td:nth-child(3) { width:28%; }
.pm-my-deadlines td { overflow-wrap:anywhere; }
.pm-my-deadlines .status { margin:6px 6px 0 0; }
.pm-task { scroll-margin-top:80px; }
.pm-task:target { box-shadow:0 0 0 3px var(--info-text); }
@media screen and (max-width:650px) {
 .pm-my-deadlines, .pm-my-deadlines tbody { display:block; width:100%; }
 .pm-my-deadlines thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .pm-my-deadlines tbody tr { display:grid; grid-template-columns:1fr; padding:14px; border-bottom:1px solid var(--border); gap:10px; }
 .pm-my-deadlines td, .pm-my-deadlines td:first-child, .pm-my-deadlines td:nth-child(2), .pm-my-deadlines td:nth-child(3) { display:block; width:100%; height:auto; padding:0; border:0; }
 .pm-my-deadlines td:nth-child(2) { grid-row:1; }
 .pm-my-deadlines td:nth-child(3) a { display:inline-flex; align-items:center; min-height:44px; }
 .pm-my-deadlines td:nth-child(3) br { display:none; }
 .pm-my-deadlines td:nth-child(3) .fortschritt-fussnote { margin-left:8px; }
}

/* Häufige Eingaben stehen vorn; Erläuterungen sind bei Bedarf erreichbar. */
.pm-task-history { margin-bottom:16px; font-size:.85rem; }
.pm-task-history summary,.pm-task-more summary { cursor:pointer; color:var(--navy); min-height:44px; display:flex; align-items:center; gap:8px; }
.pm-task-history summary::before,.pm-task-more summary::before { content:'+'; font-weight:700; }
.pm-task-history[open] summary::before,.pm-task-more[open] summary::before { content:'−'; }
.pm-task-history summary::-webkit-details-marker,.pm-task-more summary::-webkit-details-marker { display:none; }
.pm-task-history p { margin-top:8px; }
.pm-task-more { border-top:1px solid var(--border); margin:4px 0 16px; padding-top:4px; }
.pm-task-more .pm-task-fields { margin:12px 0; }
.pm-task-fields .feld { margin-bottom:0; }
.pm-task-fields [hidden] { display:none; }
.pm-my-intro { margin-bottom:16px; color:var(--text-muted); }
.pm-my-intro summary { min-height:44px; cursor:pointer; display:flex; align-items:center; font-size:.9rem; font-weight:600; }
.pm-my-intro p { max-width:80ch; margin:0 0 16px; }
.pm-my-overview { display:grid; gap:22px; align-items:start; }
.pm-my-overview > .abschnitt { min-width:0; margin-top:0; }
.pm-my-shifts .kennzahl-gitter { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.pm-my-shifts .kennzahl { min-width:0; }
.pm-my-shifts .kennzahl-wert { font-size:1.7rem; }
@media screen and (min-width:1100px) {
 .pm-my-overview { grid-template-columns:minmax(280px,.7fr) minmax(0,1.8fr); }
 .pm-my-shifts .kennzahl-gitter { grid-template-columns:1fr; }
}
@media screen and (max-width:500px) {
 .pm-my-shifts .kennzahl { padding:14px; }
 .pm-my-shifts .kennzahl-name { font-size:.8rem; }
 .pm-my-shifts .kennzahl-wert { font-size:1.2rem; }
}

/* Alte offene Punkte bleiben auffällig, die nächste Handlung ist direkt sichtbar. */
.pm-my-overdue { border:1px solid var(--error); border-left-width:4px; border-radius:9px; margin:0 0 20px; overflow:hidden; }
.pm-my-overdue > summary { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; min-height:56px; padding:12px 16px; cursor:pointer; background:var(--error-flaeche); color:var(--error-text); }
.pm-my-overdue > summary::before { content:'+'; font-size:1.2rem; font-weight:700; }
.pm-my-overdue[open] > summary::before { content:'−'; }
.pm-my-overdue > summary::-webkit-details-marker { display:none; }
.pm-my-overdue > summary span { font-size:.82rem; }
.pm-my-overdue .tabellen-huelle { border:0; border-radius:0; margin:0; }
.pm-my-deadline-heading { font-size:.9rem; margin:0 0 12px; color:var(--text-muted); }

/* =====================================================================
   Projektaufgaben quer über alle Projekte (/termine?ansicht=aufgaben).
   Zwei Ansichten desselben Reiters, deshalb keine eigene Navigation —
   die Umschaltung steht als Paar oben auf der Seite.
   ===================================================================== */
.pm-af-views { display:grid; gap:12px; margin:0 0 22px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.pm-af-view { display:flex; flex-direction:column; gap:4px; min-height:var(--tippflaeche); padding:12px 16px; border:1px solid var(--border); border-left:4px solid transparent; border-radius:9px; background:var(--bg); color:var(--text); text-decoration:none; }
.pm-af-view:hover { border-color:var(--navy-light); border-left-color:var(--navy-light); }
.pm-af-view:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
/* --akzent heisst in diesem Stil "hier bist du", nicht "Achtung". */
.pm-af-view--aktiv { border-left-color:var(--akzent); background:var(--bg-alt); }
.pm-af-view-name { font-weight:700; color:var(--navy); }
.pm-af-view--aktiv .pm-af-view-name { color:var(--navy-dark); }
.pm-af-view-hint { font-size:.85rem; color:var(--text-muted); }

/* -----------------------------------------------------------------
   Kopfzeile: Ueberschrift und Ansichtsumschaltung teilen sich eine
   Zeile. Die leere Flaeche rechts neben "Termine" war der teuerste
   Platz der Seite - dort stehen jetzt die Reiter.
   ----------------------------------------------------------------- */
.pm-af-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px; margin:0 0 16px; }
.pm-af-head h1 { margin:0; }

.pm-af-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.pm-af-tab { display:inline-flex; align-items:center; min-height:44px; padding:6px 15px; border:1px solid var(--border); border-radius:999px; background:var(--bg); color:var(--text-muted); font-size:.92rem; font-weight:600; line-height:1.3; text-decoration:none; }
.pm-af-tab:hover { border-color:var(--navy-light); color:var(--navy); }
.pm-af-tab:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
/* --akzent heisst in diesem Stil "hier bist du", nicht "Achtung". */
.pm-af-tab--aktiv { border-color:var(--akzent); background:var(--bg-alt); color:var(--navy-dark); font-weight:700; }

/* -----------------------------------------------------------------
   Bedienfeld ohne eigene Karte: der Stand bleibt immer sichtbar, alles
   Weitere steckt in einem zunaechst geschlossenen <details>. Kein
   JavaScript noetig.
   ----------------------------------------------------------------- */
.pm-af-controls { display:grid; gap:10px; margin:0 0 18px; }
.pm-af-states { display:flex; flex-wrap:wrap; gap:8px; }

.pm-af-filter { border:1px solid var(--border); border-radius:9px; background:var(--bg); }
.pm-af-filter > summary { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-height:44px; padding:8px 14px; cursor:pointer; font-size:.92rem; }
.pm-af-filter > summary::-webkit-details-marker { display:none; }
.pm-af-filter > summary::before { content:'+'; font-weight:700; color:var(--navy); }
.pm-af-filter[open] > summary::before { content:'−'; }
.pm-af-filter > summary:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.pm-af-filter-wort { font-weight:700; color:var(--navy); }
.pm-af-filter-wahl { color:var(--text-muted); }
.pm-af-filter-felder { display:grid; gap:14px; padding:4px 14px 0; }
.pm-af-filter-knoepfe { display:flex; flex-wrap:wrap; gap:10px; padding:14px; }
@media screen and (min-width:1000px) {
  .pm-af-filter-felder { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* -----------------------------------------------------------------
   Die Liste ist der Inhalt: Titel und Anzahl in einer Zeile, direkt
   darueber nichts mehr als Bedienung.
   ----------------------------------------------------------------- */
.pm-af-list { margin-top:0; }
.pm-af-list-kopf { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin:0 0 12px; }
.pm-af-list-kopf h2 { margin:0; }
.pm-af-count { margin:0; color:var(--text-muted); font-size:.9rem; font-variant-numeric:tabular-nums; }

/* Im Druck faellt das Bedienfeld weg. Diese Zeile sagt dann, welcher
   Ausschnitt auf dem Blatt steht - sonst ist ein Ausdruck nicht
   nachvollziehbar. */
.pm-af-printinfo { display:none; }

.pm-af-table { table-layout:fixed; width:100%; }
.pm-af-table th:nth-child(1), .pm-af-table td:nth-child(1) { width:20%; }
.pm-af-table th:nth-child(2), .pm-af-table td:nth-child(2) { width:44%; }
.pm-af-table th:nth-child(3), .pm-af-table td:nth-child(3) { width:18%; }
.pm-af-table th:nth-child(4), .pm-af-table td:nth-child(4) { width:18%; }
.pm-af-table td { overflow-wrap:anywhere; }
.pm-af-table time { font-variant-numeric:tabular-nums; }
.pm-af-link { display:inline-block; min-height:32px; font-weight:700; color:var(--navy); }
.pm-af-project { display:block; margin-top:2px; font-size:.85rem; color:var(--text-muted); }
.pm-af-nodate { color:var(--text-muted); }

/* Unter 600 px wird jede Zeile eine Karte. Bei 390 px bleiben Frist,
   Handlung, Zuständigkeit und Friststand untereinander lesbar, ohne dass
   die Seite seitwaerts geschoben werden muss. */
@media screen and (max-width:600px) {
  .pm-af-table, .pm-af-table tbody, .pm-af-table tr, .pm-af-table td { display:block; width:auto; }
  .pm-af-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .pm-af-table tr { border:1px solid var(--border); border-radius:9px; margin-bottom:12px; padding:10px 14px; background:var(--bg); }
  .pm-af-table tr.zeile--warnung { border-left:4px solid var(--error); }
  .pm-af-table td:nth-child(n) { width:auto; height:auto; border-bottom:0; padding:4px 0; }
  .pm-af-table td::before { content:attr(data-spalte); display:block; font-size:.78rem; font-weight:700; color:var(--text-muted); }
  .pm-af-table td:nth-child(1)::before { content:''; display:none; }
  .pm-af-table td:nth-child(1) { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding-top:0; }
  .pm-af-table td:nth-child(1) br { display:none; }

  /* Vier Staende in zwei Reihen zu zweit statt in einer unruhigen
     Flatterzeile. */
  .pm-af-states { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pm-af-states .knopf { width:100%; justify-content:center; text-align:center; }
  .pm-af-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pm-af-tab { justify-content:center; text-align:center; border-radius:9px; padding:8px 10px; font-size:.85rem; }
  .pm-af-head { gap:10px; }
}

@media print {
  .pm-af-printinfo { display:block; margin:0 0 10px; font-size:9pt; }
  .pm-af-list-kopf { display:block; }
  .pm-af-table { max-width:none; }
}

/* Aufgabenlisten als Arbeitsblatt: lesbare Zeilen ohne lange Bedienadressen. */
@media print {
  .pm-af-page .testsystem-banner { padding:2mm; margin-bottom:3mm; font-size:10pt; border-width:1pt !important; }
  .pm-af-page .kopfleiste { padding-bottom:2mm; margin-bottom:3mm; }
  .pm-af-page .kopfleiste-innen { min-height:0; }
  .pm-af-page .kopf-marke-name { font-size:10pt; }
  .pm-af-page .kopf-marke-zusatz, .pm-af-page .kopf-bereich { display:none; }
  .pm-af-page a[href]::after { content:none; }
  .pm-af-page .pm-af-head { margin-bottom:3mm; }
  .pm-af-page h1 { font-size:16pt; }
  .pm-af-page h2 { font-size:12pt; }
  .pm-af-page .abschnitt, .pm-af-page .tabellen-huelle { border:0; padding:0; margin:0; }
  .pm-af-page .pm-af-count { font-size:9pt; }
  .pm-af-page .pm-af-printinfo { font-size:8.5pt; margin-bottom:3mm; }
  .pm-af-page .pm-af-table { font-size:9pt; }
  .pm-af-page .pm-af-table th, .pm-af-page .pm-af-table td { height:auto; padding:1.8mm 2mm; line-height:1.3; }
  .pm-af-page .pm-af-table th { font-size:8pt; white-space:normal; }
  .pm-af-page .pm-af-link { min-height:0; }
  .pm-af-page .pm-af-project { font-size:8pt; line-height:1.3; }
  .pm-af-page .status { padding:.5mm 1.5mm; min-height:0; font-size:8pt; }
  .pm-af-page .fussleiste { font-size:8pt; padding-top:2mm; margin-top:3mm; }
}

/* Kurze Alltagshilfe: klare Schritte, auch ohne JavaScript. */
.pm-hilfe-start{list-style:none;counter-reset:hilfeschritt;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-m);padding:0;margin:0}
.pm-hilfe-start li{counter-increment:hilfeschritt;position:relative;padding:var(--abstand-m) var(--abstand-m) var(--abstand-m) 3.6rem;border:1px solid var(--border);border-radius:8px}
.pm-hilfe-start li::before{content:counter(hilfeschritt);position:absolute;left:1rem;top:1rem;font-weight:800;font-size:1.3rem;color:var(--text)}
.pm-hilfe-start strong,.pm-hilfe-start span{display:block}
.pm-hilfe-start span{margin-top:.4rem;line-height:1.55}
.pm-hilfe-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:1rem 0 2rem}
.pm-hilfe-links a{display:inline-flex;align-items:center;min-height:44px}
.pm-hilfe-begriffe{margin:0}
.pm-hilfe-begriffe>div{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--border)}
.pm-hilfe-begriffe dt{font-weight:700}
.pm-hilfe-begriffe dd{margin:0;line-height:1.55}
@media(max-width:650px){.pm-hilfe-start{grid-template-columns:1fr}.pm-hilfe-begriffe>div{grid-template-columns:1fr;gap:.25rem}}
@media print{.pm-hilfe-start li,.pm-hilfe-begriffe>div{break-inside:avoid}.pm-hilfe-start{gap:3mm}.pm-hilfe-links{display:none}}

.pm-abo-adresse{overflow-wrap:anywhere;word-break:break-word}

/* Überfällige Termine sind eine sichtbare, direkt bedienbare Handlung. */
.pm-overdue-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.45rem .7rem;background:var(--error-flaeche);color:var(--error-text);border:1px solid currentColor;border-radius:var(--radius);font-size:.87rem;font-weight:700;text-decoration:none}
.pm-overdue-link:hover{text-decoration:underline}
@media print{.pm-overdue-link{min-height:0;padding:1mm 2mm}}

/* Drei Schichtkennzahlen nutzen auch breite Monitore ohne leere Rasterplätze. */
.pm-schicht-kennzahlen{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* Anmeldung und Passwortvergabe bleiben auf jedem Monitor gut lesbar. */
.zugangsbereich { max-width: 36rem; margin: clamp(0rem, 3vh, 2rem) auto; }
.zugangsbereich .seitenkopf { display: block; }
.zugangsbereich .seitenkopf-text { margin-top: .75rem; max-width: none; }
.zugangsbereich .formular + .formular,
.zugangsbereich .formular + .knopfleiste { margin-top: 1rem; }