/* Fertigungsplanung (Modul MPH) - Erscheinungsbild nach den Beispielansichten des Angebots (docs/pdf-bilder/mockups.py).
   Die Fachpakete (Plantafel, Projekt, Import, Wareneingang, Einstellungen) nutzen diese Klassen und Variablen und legen eigene
   Regeln nur in ihre eigenen Dateien (plantafel.css, projekt.css ...).

   Schrift: Open Sans, lokal (static/fonts, Apache-Lizenz 2.0 liegt dort), keine Abrufe bei Google (Datenschutz).
   Masse: die Beispielansichten sind auf eine Zeichenflaeche von 840 x 540 Einheiten (E) gezeichnet, 1 E = rund 1,714 px bei
   1440 px Breite = 0,107 rem. Alle Masse stehen hier in rem (Schriftgroesse der Seite 16 px), damit sie mit der Schrift des
   Geraets mitwachsen und von 375 px bis 1920 px tragen.
   Farben (exakt aus den Beispielansichten): Seite #f3f5f7, Flaeche weiss, Rand #dde2e8, kraeftiger Rand #b7c0cb, Text #3c424f,
   gedaempft #5d6c82, Akzent #03a9f4 (Linien, Reiterbalken, Ablageziel), gefuellte Knoepfe #0277bd (Weiss darauf 4,8:1; auf
   #03a9f4 nur 2,6:1), zweiter Akzent #ff9800. Die AMPEL ist funktional und unabhaengig von der Marke und nie allein
   Informationstraeger (Text steht im aria-label und im title der Kachel, die Legende der Plantafel erklaert die Farben).

   Klassen fuer die Fachpakete (Praefix mph-):
     Rahmen      .mph-kopf (.mph-marke .mph-nav .mph-reiter .mph-zaehlpunkt .mph-kopf-rechts .mph-avatar-menue .mph-avatar) .mph-seite
                 .mph-seitenkopf (h1 + .mph-untertitel) .mph-brotkrumen .mph-flash(.fehler|.erfolg|.hinweis) .mph-fuss .mph-demo-band
     Bedienung   .mph-btn(.mph-btn-sekundaer|.mph-btn-klein|.mph-btn-gefahr) .mph-chip(.aktiv) .mph-form .mph-feld .mph-feld-zeile .mph-suche
     Inhalt      .mph-karte(.mph-karte-breit) .mph-schritt .mph-pille(.neu|.warn|.ok|.fehler|.da) .mph-tabelle .mph-tabelle-wrapper
                 .mph-kacheln .mph-badge(.ok|.warnung|.fehler) .mph-hinweis .mph-balken(.voll) .mph-leer .mph-dateiliste .mph-zweispaltig
     Ampelkachel .mph-kachel + .ampel-gruen|.ampel-gelb|.ampel-rot|.ampel-grau; darin .mph-kachel-kopf .mph-kachel-titel .mph-kachel-stk
                 .mph-kachel-bez .mph-kachel-meta .mph-kachel-fuss .mph-kachel-termin .mph-kachel-extra .mph-kachel-material;
                 .mph-ampel (.mph-ampel-symbol, .mph-ampel-text) fuer Ampel mit Text ausserhalb der Plantafel
     Ziehen      .mph-zieht (angehobene Kachel) .mph-gegriffen (mit der Tastatur gegriffen)
     Hilfen      .mph-nur-leser (nur fuer Screenreader sichtbar) .mph-zeigerziel (mind. 44 px Zielgroesse)
   Die Spalten, das Ziehen und der Ablageplatz der Plantafel stehen in plantafel.css. */

@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans_Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans_Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Marke und Flaechen */
    --mph-akzent: #03a9f4;
    --mph-akzent-dunkel: #0277bd;
    --mph-akzent-hell: #e1f4fd;
    --mph-akzent2: #ff9800;
    --mph-akzent2-hell: #fff1db;
    --mph-text: #3c424f;
    --mph-ueberschrift: #3c424f;
    --mph-flaeche: #f3f5f7;
    --mph-weiss: #ffffff;
    --mph-rand: #dde2e8;
    --mph-rand-kraeftig: #b7c0cb;
    --mph-gedaempft: #5d6c82;
    --mph-avatar-flaeche: #3a4856;

    /* Spalten der Plantafel */
    --mph-spalte: #e6ebf0;
    --mph-spalte-dunkel: #343a40;
    --mph-spalte-untertitel: #c9d1da;
    --mph-weiterbearbeitung: #0277bd;
    --mph-weiterbearbeitung-untertitel: #d6ecf8;
    --mph-fremdarbeit: #ff9800;

    /* Ampel: Flaeche, Balken (und Rand), dunkle Schrift */
    --mph-ampel-gruen-flaeche: #d6f0de;
    --mph-ampel-gruen-balken: #2e9e4f;
    --mph-ampel-gruen-text: #1b6b34;
    --mph-ampel-gelb-flaeche: #fff0b8;
    --mph-ampel-gelb-balken: #f0b400;
    --mph-ampel-gelb-text: #6b4e00;
    --mph-ampel-rot-flaeche: #ffd5d1;
    --mph-ampel-rot-balken: #d93025;
    --mph-ampel-rot-text: #9c1b12;
    --mph-ampel-grau-flaeche: #e6ebf0;
    --mph-ampel-grau-balken: #b7c0cb;
    --mph-ampel-grau-text: #5d6c82;
    /* alte Namen: die Balkenfarben (andere Seiten nutzen sie weiter) */
    --mph-ampel-gruen: var(--mph-ampel-gruen-balken);
    --mph-ampel-gelb: var(--mph-ampel-gelb-balken);
    --mph-ampel-rot: var(--mph-ampel-rot-balken);
    --mph-ampel-grau: var(--mph-ampel-grau-balken);
    --mph-tint-gruen: var(--mph-ampel-gruen-flaeche);
    --mph-tint-gelb: var(--mph-ampel-gelb-flaeche);
    --mph-tint-rot: var(--mph-ampel-rot-flaeche);
    --mph-tint-grau: var(--mph-ampel-grau-flaeche);

    /* Statuspillen: Schrift auf Flaeche */
    --mph-pille-neu-text: #0b5f93;
    --mph-pille-neu-flaeche: #e1f4fd;
    --mph-pille-warn-text: #8a5200;
    --mph-pille-warn-flaeche: #fff1db;
    --mph-pille-ok-text: #1b6b34;
    --mph-pille-ok-flaeche: #d6f0de;
    --mph-pille-fehler-text: #9c1b12;
    --mph-pille-fehler-flaeche: #ffd5d1;
    --mph-pille-da-text: #5d6c82;
    --mph-pille-da-flaeche: #e6ebf0;

    --mph-fehler: #b3261e;
    --mph-fehler-flaeche: #fdecea;
    --mph-erfolg-flaeche: #e8f5e9;
    --mph-hinweis-flaeche: var(--mph-akzent-hell);
    --mph-kopf-hoehe: 4.9rem;
    --mph-ziel: 44px;
}

* { box-sizing: border-box; }

html { background: var(--mph-flaeche); }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Open Sans", "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--mph-text);
    background: var(--mph-flaeche);
    overflow-wrap: break-word;
}

h1, h2, h3 { color: var(--mph-ueberschrift); font-weight: 700; line-height: 1.25; margin: 0 0 0.6em; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
a { color: var(--mph-akzent-dunkel); }
img { max-width: 100%; height: auto; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; }

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

/* Nur fuer Screenreader. `left: 0` ist Pflicht: ein absolut positioniertes Element ohne positionierten Vorfahren behaelt seine statische
   Position, und in der rechten Spalte einer breiten Tabelle verlaengerte es sonst die Seite waagerecht (gemessen bei 375 px, Benutzerliste). */
.mph-nur-leser {
    position: absolute; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Kopfzeile (kopf() und Bild 1) ---------------------------------------------------------------------------- */
.mph-demo-band { background: var(--mph-akzent2); color: #1d1d1d; text-align: center; font-size: 0.8rem; font-weight: 600; line-height: 1.4; padding: 2px 12px; }

.mph-kopf {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 2.4rem;
    min-height: var(--mph-kopf-hoehe);
    padding: 0 1.5rem;
    background: var(--mph-weiss);
    border-bottom: 1px solid var(--mph-rand);
}

.mph-marke { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; text-decoration: none; color: var(--mph-ueberschrift); }
.mph-marke img { display: block; height: 3.4rem; width: auto; max-width: 11rem; }
/* Ohne Logo: Wortzeichen im Stil des Bildes - Name gross in der Akzentfarbe, darunter klein und weit gesperrt in Grossbuchstaben. */
.mph-marke-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; line-height: 1.05; }
.mph-marke-text .haupt {
    max-width: 16rem; white-space: normal; overflow-wrap: anywhere;
    font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.75rem); font-weight: 700; letter-spacing: 0.03em; color: var(--mph-akzent-dunkel);
}
.mph-marke-text .sub { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mph-gedaempft); white-space: nowrap; }

.mph-nav { display: flex; align-self: stretch; align-items: stretch; gap: 2.75rem; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mph-nav::-webkit-scrollbar { display: none; }
.mph-reiter {
    position: relative; display: inline-flex; align-items: center; gap: 0.55rem; flex: 0 0 auto;
    font-size: 1.1rem; color: var(--mph-gedaempft); text-decoration: none; white-space: nowrap;
}
.mph-reiter:hover { color: var(--mph-text); }
.mph-reiter:focus-visible { outline-offset: -3px; }
.mph-reiter.aktiv { color: var(--mph-text); font-weight: 700; }
/* der Balken unter dem aktiven Reiter: etwas breiter als der Text, sitzt auf der Linie der Kopfzeile */
.mph-reiter.aktiv::after { content: ""; position: absolute; left: -0.25rem; right: -0.25rem; bottom: 0; height: 0.375rem; background: var(--mph-akzent); }
.mph-zaehlpunkt {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.65rem; height: 1.65rem; padding: 0 0.4rem;
    font-size: 0.9rem; font-weight: 700; line-height: 1; color: var(--mph-text); background: var(--mph-akzent2); border-radius: 999px;
}

.mph-kopf-rechts { display: flex; align-items: center; gap: 1.4rem; flex: 0 0 auto; margin-left: auto; }
.mph-kopf-datum { display: none; font-size: 1rem; color: var(--mph-gedaempft); white-space: nowrap; }

/* Avatar mit kleinem Menue: <details>, geht ohne Skript; app.js ergaenzt Escape und Klick daneben. */
.mph-avatar-menue { position: relative; }
.mph-avatar-menue > summary { list-style: none; }
.mph-avatar-menue > summary::-webkit-details-marker { display: none; }
.mph-avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem;
    font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em; color: var(--mph-weiss); background: var(--mph-avatar-flaeche);
    border-radius: 50%; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.mph-avatar-liste {
    position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 300; min-width: 15rem; max-width: calc(100vw - 1.5rem); padding: 0.4rem 0;
    background: var(--mph-weiss); border: 1px solid var(--mph-rand); border-radius: 0.75rem; box-shadow: 0 0.5rem 1.5rem rgba(35, 45, 60, 0.18);
}
.mph-avatar-name { margin: 0; padding: 0.4rem 1.1rem 0.5rem; font-size: 0.9rem; color: var(--mph-gedaempft); border-bottom: 1px solid var(--mph-rand); overflow-wrap: anywhere; }
.mph-avatar-liste a, .mph-avatar-liste button {
    display: flex; align-items: center; width: 100%; min-height: var(--mph-ziel); padding: 0.5rem 1.1rem;
    font: inherit; color: var(--mph-text); text-decoration: none; text-align: left; background: none; border: 0; cursor: pointer;
}
.mph-avatar-liste a:hover, .mph-avatar-liste button:hover { background: var(--mph-flaeche); }
.mph-avatar-liste form { margin: 0; border-top: 1px solid var(--mph-rand); }
.mph-avatar-liste .mph-nur-schmal { display: none; }

main.mph-seite { flex: 1 0 auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.1rem 1.5rem 3.5rem; }
main.mph-seite.mph-breit { max-width: none; }

.mph-fuss { padding: 18px 20px; text-align: center; color: var(--mph-gedaempft); font-size: 0.8rem; }

/* Seitenkopf (seitenkopf() im Bild): Titel gross und fett, darunter eine graue Zeile */
.mph-seitenkopf { min-width: 0; margin: 0 0 0.9rem; }
.mph-seitenkopf h1 { margin: 0; }
.mph-untertitel { margin: 0.15rem 0 0; font-size: 1rem; color: var(--mph-gedaempft); }

/* Brotkrumen: Uebersicht > Bereich > Projekt */
.mph-brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; margin: 0 0 0.9rem; padding: 0; list-style: none; font-size: 1rem; color: var(--mph-gedaempft); }
.mph-brotkrumen li + li::before { content: "\203A"; margin-right: 0.5rem; }
.mph-brotkrumen a { color: inherit; text-decoration: none; }
.mph-brotkrumen a:hover { text-decoration: underline; }
.mph-brotkrumen [aria-current="page"] { font-weight: 700; color: var(--mph-text); overflow-wrap: anywhere; }

.mph-flash { padding: 12px 16px; margin: 0 0 16px; border-left: 4px solid var(--mph-akzent-dunkel); background: var(--mph-hinweis-flaeche); border-radius: 0 0.5rem 0.5rem 0; }
.mph-flash.fehler { border-color: var(--mph-fehler); background: var(--mph-fehler-flaeche); }
.mph-flash.erfolg { border-color: var(--mph-ampel-gruen); background: var(--mph-erfolg-flaeche); }

/* ---- Bedienung ------------------------------------------------------------------------------------------------- */
/* Gefuellte Pille, 41 px hoch (24 E). Die Trefferflaeche reicht ueber ::after auf 45 px (Zielgroesse mindestens 44 px). */
.mph-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 2.56rem; padding: 0 1.5rem;
    font: inherit; font-weight: 700; font-size: 1.03rem; line-height: 1.2; text-decoration: none; cursor: pointer;
    color: var(--mph-weiss); background: var(--mph-akzent-dunkel); border: 1.5px solid var(--mph-akzent-dunkel); border-radius: 999px;
}
.mph-btn::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.mph-btn:hover { background: #01579b; border-color: #01579b; }
.mph-btn[disabled], .mph-btn:disabled { opacity: 0.55; cursor: default; }
.mph-btn-sekundaer { color: var(--mph-text); background: var(--mph-weiss); border-color: var(--mph-rand-kraeftig); }
.mph-btn-sekundaer:hover { background: var(--mph-flaeche); border-color: var(--mph-gedaempft); }
.mph-btn-gefahr { background: var(--mph-ampel-rot-text); border-color: var(--mph-ampel-rot-text); }
.mph-btn-gefahr:hover { background: #7a130c; border-color: #7a130c; }
.mph-btn-klein { min-height: var(--mph-ziel); padding: 4px 1rem; font-size: 0.9rem; }
.mph-btn-klein::after { display: none; }

/* Filterchips: weiss mit Rand, der aktive dunkel. Sichtbar 36 px hoch, die Trefferflaeche reicht auf 44 px. */
.mph-chip {
    position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; padding: 0 1rem;
    font: inherit; font-size: 0.94rem; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
    color: var(--mph-text); background: var(--mph-weiss); border: 1.5px solid var(--mph-rand-kraeftig); border-radius: 999px;
}
.mph-chip::after { content: ""; position: absolute; left: 0; right: 0; top: -0.25rem; bottom: -0.25rem; }
.mph-chip:hover { background: var(--mph-flaeche); }
.mph-chip.aktiv, .mph-chip[aria-pressed="true"], .mph-chip[aria-current="true"] {
    font-weight: 700; color: var(--mph-weiss); background: var(--mph-spalte-dunkel); border-color: var(--mph-spalte-dunkel);
}

/* Statuspille: Punkt in der Schriftfarbe, fette Schrift auf der Flaeche der Stufe (27 px hoch) */
.mph-pille {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 1.7rem; padding: 0 0.8rem 0 0.6rem;
    font-size: 0.88rem; font-weight: 700; line-height: 1.2; white-space: nowrap; border-radius: 999px;
    color: var(--mph-pille-da-text); background: var(--mph-pille-da-flaeche);
}
.mph-pille::before { content: ""; flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.mph-pille.neu { color: var(--mph-pille-neu-text); background: var(--mph-pille-neu-flaeche); }
.mph-pille.warn { color: var(--mph-pille-warn-text); background: var(--mph-pille-warn-flaeche); }
.mph-pille.ok { color: var(--mph-pille-ok-text); background: var(--mph-pille-ok-flaeche); }
.mph-pille.fehler { color: var(--mph-pille-fehler-text); background: var(--mph-pille-fehler-flaeche); }
.mph-pille.da { color: var(--mph-pille-da-text); background: var(--mph-pille-da-flaeche); }

/* Schritt: dunkler Kreis mit weisser Zahl vor dem Titel einer Karte (Bild 3) */
.mph-schritt {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem;
    font-size: 1.1rem; font-weight: 700; line-height: 1; color: var(--mph-weiss); background: var(--mph-spalte-dunkel); border-radius: 50%;
}

.mph-form { max-width: 560px; }
.mph-feld { margin-bottom: 16px; }
.mph-feld label { display: block; margin-bottom: 4px; font-weight: 700; font-size: 0.9rem; color: var(--mph-gedaempft); }
.mph-feld input, .mph-feld select, .mph-feld textarea,
.mph-suche input, .mph-suche select {
    width: 100%; min-height: var(--mph-ziel); padding: 9px 12px;
    font: inherit; color: var(--mph-text); background: var(--mph-weiss);
    border: 1.5px solid var(--mph-rand-kraeftig); border-radius: 0.5rem;
}
.mph-feld input:focus-visible, .mph-feld select:focus-visible, .mph-feld textarea:focus-visible { border-color: var(--mph-akzent-dunkel); outline-offset: 0; }
.mph-feld textarea { min-height: 96px; }
.mph-feld .mph-hinweis { margin: 4px 0 0; }
.mph-feld-zeile { display: flex; gap: 12px; flex-wrap: wrap; }
.mph-feld-zeile > .mph-feld { flex: 1 1 200px; }
.mph-suche { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mph-suche input, .mph-suche select { width: auto; flex: 1 1 180px; }

.mph-hinweis { color: var(--mph-gedaempft); font-size: 0.9rem; }
.mph-leer { padding: 24px; text-align: center; color: var(--mph-gedaempft); background: var(--mph-weiss); border: 1px dashed var(--mph-rand-kraeftig); border-radius: 0.75rem; }

/* ---- Inhalt ---------------------------------------------------------------------------------------------------- */
.mph-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mph-kopfzeile h1 { margin: 0; }

.mph-karte { background: var(--mph-weiss); border: 1px solid var(--mph-rand); border-radius: 0.75rem; padding: 1rem 1.25rem; margin-bottom: 20px; max-width: 720px; }
.mph-karte > :last-child { margin-bottom: 0; }
.mph-karte-breit { max-width: none; }

.mph-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
.mph-kachel-link {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-height: 76px; padding: 14px 16px; text-decoration: none; color: inherit;
    background: var(--mph-weiss); border: 1px solid var(--mph-rand); border-left: 4px solid var(--mph-akzent); border-radius: 0.75rem;
}
.mph-kachel-link:hover { background: var(--mph-akzent-hell); }
.mph-kachel-link .label { font-size: 0.72rem; color: var(--mph-gedaempft); text-transform: uppercase; letter-spacing: 0.05em; }
.mph-kachel-link .wert { font-weight: 700; color: var(--mph-ueberschrift); }

.mph-badge { display: inline-block; padding: 2px 10px; font-size: 0.78rem; font-weight: 600; color: var(--mph-text); background: var(--mph-tint-grau); border: 1px solid var(--mph-rand); border-radius: 10px; }
.mph-badge.ok { background: var(--mph-tint-gruen); border-color: var(--mph-ampel-gruen); }
.mph-badge.warnung { background: var(--mph-tint-gelb); border-color: var(--mph-ampel-gelb); }
.mph-badge.fehler { background: var(--mph-tint-rot); border-color: var(--mph-ampel-rot); }

.mph-tabelle-wrapper { position: relative; overflow-x: auto; margin-bottom: 20px; background: var(--mph-weiss); border: 1px solid var(--mph-rand); border-radius: 0.75rem; }
.mph-tabelle-wrapper table { margin: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--mph-spalte); vertical-align: top; }
th { font-size: 0.9rem; font-weight: 700; color: var(--mph-gedaempft); background: var(--mph-flaeche); }
tbody tr:hover td { background: #fafbfc; }
tbody tr:last-child td { border-bottom: 0; }
/* .mph-tabelle (auf <table>, Bild 3 und 4): Kopfzeile #f3f5f7, graue fette Spaltenkoepfe, Zeilen mit Trennlinie #e6ebf0, jede zweite Zeile ganz leicht abgesetzt */
.mph-tabelle { width: 100%; border-collapse: collapse; background: var(--mph-weiss); }
.mph-tabelle thead th { background: var(--mph-flaeche); color: var(--mph-gedaempft); font-weight: 700; }
.mph-tabelle td { border-bottom: 1px solid var(--mph-spalte); }
.mph-tabelle tbody tr:nth-child(even) td { background: #fafbfc; }

.mph-balken { height: 14px; max-width: 420px; background: var(--mph-flaeche); border: 1px solid var(--mph-rand); border-radius: 7px; overflow: hidden; }
.mph-balken > span { display: block; height: 100%; background: var(--mph-akzent-dunkel); }
.mph-balken.voll > span { background: var(--mph-akzent2); }

.mph-dateiliste { list-style: none; padding: 0; margin: 0 0 16px; border: 1px solid var(--mph-rand); background: var(--mph-weiss); border-radius: 0.75rem; overflow: hidden; }
.mph-dateiliste li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--mph-spalte); }
.mph-dateiliste li:last-child { border-bottom: 0; }

.mph-zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

.mph-anmeldebox { max-width: 440px; margin: 24px auto; background: var(--mph-weiss); border: 1px solid var(--mph-rand); border-top: 4px solid var(--mph-akzent); border-radius: 0.75rem; padding: 24px; }
.mph-anmeldebox .mph-form { max-width: none; }

/* Mit Ampel-Text ausserhalb der Plantafel (Projektseite, Listen): Symbol und Text, nie nur Farbe */
.mph-ampel { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.mph-ampel-symbol { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 0.8rem; font-weight: 700; color: var(--mph-weiss); border-radius: 50%; background: var(--mph-ampel-grau-text); }
.ampel-gruen .mph-ampel-symbol { background: var(--mph-ampel-gruen-text); }
.ampel-gelb .mph-ampel-symbol { background: var(--mph-ampel-gelb-text); }
.ampel-rot .mph-ampel-symbol { background: var(--mph-ampel-rot-text); }

/* ---- Ampelkachel (kachel() und Bild 1): Flaeche und Rand in der Ampelfarbe, Balken links, Text nach der Naehe zum Termin ---- */
.mph-kachel {
    --mph-k-flaeche: var(--mph-ampel-grau-flaeche); --mph-k-balken: var(--mph-ampel-grau-balken); --mph-k-text: var(--mph-ampel-grau-text);
    position: relative; display: flex; flex-direction: column; min-height: 7.7rem; margin: 0 0 0.75rem; padding: 0.62rem 0.85rem 0.55rem 1.2rem;
    color: var(--mph-text); background: var(--mph-k-flaeche); border: 1.4px solid var(--mph-k-balken); border-radius: 0.5rem;
    cursor: grab; touch-action: manipulation;
}
.mph-kachel.ampel-gruen { --mph-k-flaeche: var(--mph-ampel-gruen-flaeche); --mph-k-balken: var(--mph-ampel-gruen-balken); --mph-k-text: var(--mph-ampel-gruen-text); }
.mph-kachel.ampel-gelb { --mph-k-flaeche: var(--mph-ampel-gelb-flaeche); --mph-k-balken: var(--mph-ampel-gelb-balken); --mph-k-text: var(--mph-ampel-gelb-text); }
.mph-kachel.ampel-rot { --mph-k-flaeche: var(--mph-ampel-rot-flaeche); --mph-k-balken: var(--mph-ampel-rot-balken); --mph-k-text: var(--mph-ampel-rot-text); }
.mph-kachel.ampel-grau { --mph-k-flaeche: var(--mph-ampel-grau-flaeche); --mph-k-balken: var(--mph-ampel-grau-balken); --mph-k-text: var(--mph-ampel-grau-text); }
/* der Balken links: 7 px breit, oben und unten 8 px eingerueckt */
.mph-kachel::before { content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 0.44rem; background: var(--mph-k-balken); }
.mph-kachel-kopf { display: flex; align-items: baseline; gap: 0.4rem; }
.mph-kachel-titel { min-width: 0; font-size: 1.03rem; font-weight: 700; line-height: 1.25; color: var(--mph-text); text-decoration: none; overflow-wrap: anywhere; }
.mph-kachel-stk { margin-left: auto; padding-left: 0.4rem; font-size: 0.9rem; white-space: nowrap; color: var(--mph-gedaempft); }
.mph-kachel-bez {
    margin-top: 0.2rem; font-size: 1.06rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mph-kachel-meta { margin-top: 0.2rem; font-size: 0.9rem; line-height: 1.3; color: var(--mph-gedaempft); overflow-wrap: anywhere; }
.mph-kachel-fuss { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; min-height: 1.9rem; }
.mph-kachel-termin { font-size: 0.96rem; font-weight: 700; color: var(--mph-k-text); white-space: nowrap; }
.mph-kachel-extra { min-width: 0; margin-left: auto; font-size: 0.86rem; font-style: italic; color: var(--mph-gedaempft); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Material fehlt: orange Kasten mit Ausrufezeichen (die Erklaerung steht in der Legende, im aria-label und im title) */
.mph-kachel-material {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.7rem; height: 1.7rem; margin-left: auto;
    font-size: 1.06rem; font-weight: 700; line-height: 1; color: var(--mph-text); background: var(--mph-akzent2); border-radius: 0.3rem;
}
.mph-kachel-material.verspaetet { box-shadow: 0 0 0 2px var(--mph-weiss), 0 0 0 4px var(--mph-ampel-rot-balken); }

/* angehobene Kachel (beim Ziehen am Zeiger) und mit der Tastatur gegriffene Kachel: Versatzschatten und 2-px-Rand */
.mph-zieht { border-width: 2px; box-shadow: 0.5rem 0.62rem 0 #aeb8c3; cursor: grabbing; z-index: 200; }
.mph-gegriffen { border-width: 2px; box-shadow: 0.5rem 0.62rem 0 #aeb8c3; outline: 3px solid var(--mph-akzent-dunkel); outline-offset: 2px; }

/* ---- Schmale Bildschirme (375 px ohne seitliches Ueberlaufen auf Seitenebene) --------------------------------- */
/* Tablet (Bild 5): kompakte Leiste, der Knopf "Projekte einlesen" entfaellt (Import ist eine Bueroarbeit), das Datum steht neben dem Avatar */
@media (max-width: 1100px) {
    :root { --mph-kopf-hoehe: 4rem; }
    .mph-kopf { gap: 1.6rem; padding: 0 1.1rem; }
    .mph-marke img { height: 2.6rem; max-width: 8.5rem; }
    .mph-nav { gap: 1.8rem; }
    .mph-reiter { font-size: 1rem; }
    .mph-kopf-rechts { gap: 1rem; }
    .mph-kopf-einlesen { display: none; }
    .mph-kopf-datum { display: inline; }
    .mph-avatar-liste .mph-nur-schmal { display: flex; }
}

@media (max-width: 760px) {
    main.mph-seite { padding: 1rem 1rem 3rem; }
    .mph-zweispaltig { grid-template-columns: minmax(0, 1fr); }
    h1 { font-size: 1.4rem; }
}

/* Telefon: die Reiter scrollen waagerecht, das Datum entfaellt */
@media (max-width: 600px) {
    .mph-kopf { gap: 0.9rem; padding: 0 0.75rem; }
    .mph-marke-text .haupt { max-width: 11rem; font-size: 1.15rem; overflow-wrap: normal; }
    .mph-marke-text .sub { letter-spacing: 0.16em; }
    .mph-marke img { max-width: 6.5rem; }
    .mph-nav { gap: 1.3rem; flex: 1 1 auto; }
    .mph-kopf-datum { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }