/* ==========================================================================
   Lean Desk -- Erscheinungsbild
   --------------------------------------------------------------------------
   Ein Gerüst für zwei Situationen: dichter Schreibtischgebrauch und die
   Bedienung mit dem Finger am großen Touchscreen im Stehen. Deshalb sind
   alle Bedienelemente mindestens 44 px hoch, auch dort, wo am Schreibtisch
   weniger reichen würde.

   Farbe trägt nie allein eine Aussage: Jeder Ampelzustand hat zusätzlich ein
   Symbol und eine Richtung. Rot-Grün-Sehschwäche betrifft rund 8 % der
   Männer -- in jedem Shopfloor-Meeting sitzt jemand, der sonst dauerhaft
   falsch liest, ohne es zu sagen.
   ========================================================================== */

:root {
    --akzent: #1C5D7D;
    --akzent-dunkel: #14465e;
    --akzent-hell: #e8f1f5;

    --grund: #f4f5f7;
    --flaeche: #ffffff;
    --rand: #dcdfe4;
    --rand-stark: #b9bfc7;

    --text: #1d2329;
    --text-leise: #5c6672;
    --text-still: #8a929c;

    --gruen: #1D6E3C;
    --gruen-hell: #e6f2ea;
    --gelb: #96700B;
    --gelb-hell: #fbf2dd;
    --rot: #A82A2A;
    --rot-hell: #fbeaea;
    --grau-hell: #eceef1;

    --radius: 4px;
    --radius-gross: 6px;
    --schatten: 0 1px 2px rgba(20, 30, 40, .08);
    --schatten-hoch: 0 6px 18px rgba(20, 30, 40, .16);

    --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --schrift-zahl: "SF Mono", "Segoe UI Mono", "Roboto Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

h1, h2, h3, h4 {
    margin: 0 0 .6rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
}

h1 { font-size: 1.75rem; font-weight: 300; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 .8rem; }

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }

/* --- Aufbau ------------------------------------------------------------ */

.huelle { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.huelle--schmal { max-width: 720px; }

.kopf {
    background: var(--akzent);
    color: #fff;
    box-shadow: var(--schatten);
    position: relative;
    z-index: 30;
}

/* Drei Zonen: links Lean Desk, in der Mitte der frei belegbare Balken,
   rechts das Firmenlogo. Die Navigation ist in die Seitenleiste gewandert --
   die Kopfzeile gehoert damit dem Haus, das die Anwendung benutzt. */
.kopf__innen {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 0 .5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 56px;
}

.kopf__menue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
}
.kopf__menue:hover { background: rgba(255, 255, 255, .14); }
.kopf__menue:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kopf__menue .icon { width: 22px; height: 22px; }

/* Das Symbol wechselt mit dem Zustand -- geschlossen der Balkenstapel,
   geoeffnet das Kreuz. Ohne den Wechsel weiss niemand, dass derselbe
   Knopf auch wieder zumacht. */
.kopf__menue-zu { display: none; }
.menue-schalter:checked ~ .kopf .kopf__menue-auf { display: none; }
.menue-schalter:checked ~ .kopf .kopf__menue-zu { display: inline-flex; }

.kopf__marke {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 300;
    letter-spacing: .01em;
    padding: .6rem 0;
    flex: 0 0 auto;
}
.kopf__marke:hover { text-decoration: none; opacity: .9; }
.kopf__marke strong { font-weight: 600; }

/* Der Mittelbalken. Er nimmt den ganzen freien Platz und ist unsichtbar,
   solange nichts eingestellt ist -- wer nichts hinterlegt hat, soll keinen
   Fremdkoerper in der Kopfzeile sehen. */
.kopf__balken {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    margin: .5rem 0;
    border-radius: var(--radius);
    /* Eingepasst statt beschnitten: ein halbes Firmenlogo ist schlimmer
       als gar keins. */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.kopf__balken--sichtbar { background-color: var(--kopfbalken, transparent); }

.kopf__firma {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    max-width: 240px;
}

/* Das Logo wird in der Hoehe begrenzt, nicht in der Breite: Ein breites
   Wort-Bild-Zeichen darf lang sein, aber es darf die Kopfzeile nicht
   aufblaehen. */
.kopf__firma img {
    max-height: 38px;
    max-width: 240px;
    width: auto;
    display: block;
}

.kopf__firma-text {
    font-size: .95rem;
    color: rgba(255, 255, 255, .9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Seitenleiste --------------------------------------------------------- */

/* Der Schalter ist ein verstecktes Kontrollkaestchen. Damit geht die
   Leiste auch ohne JavaScript auf -- an einem Hallenterminal laesst sich
   nicht voraussetzen, dass alles laeuft, und ein Menue, das dann nicht
   aufgeht, sperrt die ganze Anwendung aus. */
.menue-schalter { position: absolute; opacity: 0; pointer-events: none; }

.leiste {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 86vw;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--flaeche);
    border-right: 1px solid var(--rand);
    box-shadow: var(--schatten-hoch);
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    overflow: hidden;
}

.menue-schalter:checked ~ .leiste { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .leiste { transition: none; }
}

.leiste__schleier {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(20, 30, 40, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease-out;
}

.menue-schalter:checked ~ .leiste__schleier { opacity: 1; pointer-events: auto; }

.leiste__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .75rem;
    min-height: 56px;
    background: var(--akzent);
    color: #fff;
}

.leiste__titel {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
}

.leiste__zu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
}
.leiste__zu:hover { background: rgba(255, 255, 255, .16); }
.leiste__zu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.leiste__inhalt {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .5rem;
}

.leiste__punkt {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border-radius: var(--radius);
    color: var(--text);
    font-size: .95rem;
    min-height: 44px;
}
.leiste__punkt:hover { background: var(--grund); text-decoration: none; }
.leiste__punkt[aria-current="page"] {
    background: var(--akzent-hell);
    color: var(--akzent);
    font-weight: 500;
}
.leiste__punkt .icon { flex: 0 0 auto; color: var(--text-leise); }
.leiste__punkt[aria-current="page"] .icon { color: var(--akzent); }

.leiste__punkt--still { color: var(--text-still); cursor: default; }
.leiste__punkt--still:hover { background: none; }

.leiste__gruppe {
    padding: 1rem .7rem .3rem;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-still);
}

.leiste__fuss {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .75rem;
    border-top: 1px solid var(--rand);
    background: var(--grund);
}

.leiste__konto {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    color: var(--text-leise);
    min-width: 0;
}
.leiste__konto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leiste__konto .icon { flex: 0 0 auto; }

/* Anzeigemodus: das Board zeigt nur an. Der Streifen muss sofort erklären,
   warum nichts geändert werden kann -- sonst hält man es für kaputt. */
.anzeigestreifen {
    background: #2c3742;
    color: #fff;
    font-size: .9rem;
    padding: .5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}
.anzeigestreifen--frei { background: var(--gruen); }
.anzeigestreifen button {
    background: rgba(255, 255, 255, .18);
    border: 0;
    color: #fff;
    border-radius: var(--radius);
    padding: .35rem .8rem;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    min-height: 34px;
}
.anzeigestreifen button:hover { background: rgba(255, 255, 255, .3); }

.seitenkopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2rem 0 1.25rem;
}
.seitenkopf__text { min-width: 0; }
.seitenkopf__hinweis { color: var(--text-leise); font-size: .95rem; margin: 0; }
.seitenkopf__werkzeuge { display: flex; gap: .5rem; flex-wrap: wrap; }

.brotkrumen {
    font-size: .85rem;
    color: var(--text-leise);
    margin-bottom: .35rem;
}
.brotkrumen a { color: var(--text-leise); }

/* --- Kachelwand -------------------------------------------------------- */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 1rem;
}

.kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 190px;
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: var(--radius-gross);
    color: #fff;
    text-decoration: none;
    background: var(--kachel-farbe, var(--akzent));
    box-shadow: var(--schatten);
    transition: transform .12s ease, box-shadow .12s ease;
    overflow: hidden;
}

.kachel:hover,
.kachel:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--schatten-hoch);
}

/* Ein sehr großes, sehr blasses Symbol als Grundmuster -- gibt der Kachel
   Tiefe, ohne mit der Beschriftung um Aufmerksamkeit zu ringen. */
.kachel__grund {
    position: absolute;
    right: -18px;
    bottom: -26px;
    width: 132px;
    height: 132px;
    opacity: .14;
    pointer-events: none;
}
.kachel__grund .icon { width: 100%; height: 100%; stroke-width: 1.1; }

.kachel__symbol {
    width: 40px;
    height: 40px;
    margin-bottom: .85rem;
}
.kachel__symbol .icon { width: 100%; height: 100%; stroke-width: 1.5; }

.kachel__titel {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .35rem;
    position: relative;
}

.kachel__zeile {
    font-size: .88rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .82);
    position: relative;
    margin-top: auto;
}

.kachel__zahl {
    position: relative;
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1;
    margin-top: auto;
    margin-bottom: .3rem;
    font-variant-numeric: tabular-nums;
}

/* Geplante Module: sichtbar, aber nicht anklickbar. Eine Kachel, die ins
   Leere führt, wäre schlimmer als keine. */
.kachel--geplant {
    background: #e4e7ea;
    color: var(--text-leise);
    box-shadow: none;
    cursor: default;
}
.kachel--geplant:hover { transform: none; box-shadow: none; }
.kachel--geplant .kachel__zeile { color: var(--text-still); }
.kachel--geplant .kachel__grund { opacity: .07; color: var(--text); }

.kachel__marke {
    position: absolute;
    top: .9rem;
    right: .9rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .2rem .45rem;
    border-radius: 3px;
    background: rgba(0, 0, 0, .16);
    color: rgba(255, 255, 255, .9);
}
.kachel--geplant .kachel__marke { background: rgba(0, 0, 0, .07); color: var(--text-leise); }

/* --- Flächen ----------------------------------------------------------- */

.tafel {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
}
.tafel + .tafel { margin-top: 1.25rem; }
.tafel__kopf {
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--rand);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.tafel__kopf h2 { margin: 0; font-size: 1.05rem; }
.tafel__koerper { padding: 1.25rem; }
.tafel__fuss {
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--rand);
    background: #fafbfc;
    border-radius: 0 0 var(--radius-gross) var(--radius-gross);
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.raster { display: grid; gap: 1.25rem; }
.raster--zwei { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.raster--drei { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.raster--vier { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* --- Meldungen --------------------------------------------------------- */

.meldungen { margin: 1.25rem 0 0; display: grid; gap: .5rem; }

.meldung {
    padding: .8rem 1rem;
    border-radius: var(--radius);
    border-left: 4px solid;
    font-size: .95rem;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}
.meldung--success { background: var(--gruen-hell); border-color: var(--gruen); color: #14502b; }
.meldung--notice  { background: var(--akzent-hell); border-color: var(--akzent); color: #123c50; }
.meldung--error   { background: var(--rot-hell); border-color: var(--rot); color: #7d1d1d; }

.hinweiskasten {
    background: var(--akzent-hell);
    border-left: 4px solid var(--akzent);
    padding: .9rem 1.1rem;
    border-radius: var(--radius);
    font-size: .93rem;
    color: #123c50;
}
.hinweiskasten--warnung { background: var(--gelb-hell); border-color: var(--gelb); color: #6b4f06; }

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

.feld { margin-bottom: 1.1rem; }
.feld:last-child { margin-bottom: 0; }

.feld > label,
.feld__beschriftung {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: .3rem;
    color: var(--text);
}

.feld__hilfe { font-size: .82rem; color: var(--text-leise); margin: .3rem 0 0; }
.feld__fehler { font-size: .85rem; color: var(--rot); margin: .3rem 0 0; font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="tel"],
select, textarea {
    width: 100%;
    min-height: 44px;
    padding: .5rem .7rem;
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }

input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}

input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--rot); }

.feld--schalter {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.feld--schalter input[type="checkbox"] {
    width: 22px; height: 22px; margin: .1rem 0 0; flex: none; accent-color: var(--akzent);
}
.feld--schalter label { font-weight: 500; margin: 0; }

.feldreihe { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --- Schaltflächen ----------------------------------------------------- */

/* 'hidden' muss staerker sein als jede Anzeigeart, die wir hier setzen:
   Ein .knopf ist inline-flex, und das schlaegt das display:none aus dem
   Browser -- ein per Skript verstecktes Element stuende sonst weiter da.
   Die Ausnahme fuer den Diagramm-Rueckfall weiter unten bleibt bewusst
   bestehen; sie steht spaeter in der Datei. */
[hidden] { display: none !important; }

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .55rem 1.1rem;
    font: inherit;
    font-size: .95rem;
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid var(--rand-stark);
    background: #fff;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.knopf:hover { background: #f2f4f6; text-decoration: none; }

.knopf--haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf--haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }

.knopf--gefahr { background: #fff; border-color: var(--rot); color: var(--rot); }
.knopf--gefahr:hover { background: var(--rot-hell); }

.knopf--still { border-color: transparent; background: transparent; color: var(--akzent); }
.knopf--still:hover { background: var(--akzent-hell); }

.knopf--gross { min-height: 56px; font-size: 1.05rem; padding: .7rem 1.6rem; }
.knopf--klein { min-height: 36px; font-size: .85rem; padding: .35rem .7rem; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

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

.tabellenrahmen { overflow-x: auto; }

/* Geht die Tabelle rechts weiter, liegt dort ein Schatten -- sonst sieht
   eine abgeschnittene Tabelle am Tablet aus wie eine vollständige. Die
   Klasse setzt das Skript; ohne Skript rollt die Tabelle trotzdem. */
.tabellenrahmen--rollt { box-shadow: inset -16px 0 14px -14px rgba(20, 30, 40, .45); }

table.liste {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}
table.liste th, table.liste td {
    padding: .65rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--rand);
    vertical-align: top;
}
table.liste th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-leise);
    font-weight: 600;
    background: #fafbfc;
    white-space: nowrap;
}
table.liste tbody tr:hover { background: #fafbfc; }
table.liste td.zahl, table.liste th.zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--schrift-zahl);
    white-space: nowrap;
}

/* --- Zustände: immer Farbe UND Symbol UND Richtung --------------------- */

.ampel {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.ampel--gruen { background: var(--gruen-hell); color: var(--gruen); }
.ampel--gelb  { background: var(--gelb-hell);  color: var(--gelb); }
.ampel--rot   { background: var(--rot-hell);   color: var(--rot); }
.ampel--grau  { background: var(--grau-hell);  color: var(--text-leise); }
.ampel__zeichen { font-size: 1em; line-height: 1; }

.marke {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 3px;
    background: var(--grau-hell);
    color: var(--text-leise);
    white-space: nowrap;
}
.marke--offen     { background: var(--akzent-hell); color: var(--akzent); }
.marke--in_arbeit { background: var(--gelb-hell); color: var(--gelb); }
.marke--wartet    { background: var(--grau-hell); color: var(--text-leise); }
.marke--erledigt  { background: var(--gruen-hell); color: var(--gruen); }
.marke--verworfen { background: var(--grau-hell); color: var(--text-still); text-decoration: line-through; }

/* Für Einträge, die keinen Status, aber Gewicht haben -- etwa der Unfall
   unter den Sicherheitsmeldungen. */
.marke--rot { background: var(--rot-hell); color: var(--rot); }
.marke--hoch      { background: var(--rot-hell); color: var(--rot); }
.marke--gruen { background: var(--gruen-hell); color: var(--gruen); }

/* --- Kleinkram --------------------------------------------------------- */

.leise { color: var(--text-leise); }
.still { color: var(--text-still); }
.klein { font-size: .85rem; }
.zahl  { font-variant-numeric: tabular-nums; font-family: var(--schrift-zahl); }
.rechts { text-align: right; }
.mittig { text-align: center; }
.abstand-oben { margin-top: 1.25rem; }
.nowrap { white-space: nowrap; }
.nur-lesegeraet { display: none; }

.leerzustand {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-leise);
}
.leerzustand .icon { width: 44px; height: 44px; color: var(--rand-stark); margin-bottom: .8rem; }

.trennlinie { border: 0; border-top: 1px solid var(--rand); margin: 1.5rem 0; }

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

/* --- Anmelde- und Einrichtungsseite ------------------------------------ */

.schlicht {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(160deg, #eef1f4 0%, #e2e7ec 100%);
}
.schlicht__karte {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: var(--radius-gross);
    box-shadow: 0 10px 40px rgba(20, 30, 40, .13);
    overflow: hidden;
}
.schlicht__karte--breit { max-width: 640px; }
.schlicht__kopf {
    background: var(--akzent);
    color: #fff;
    padding: 1.5rem 1.75rem;
}
.schlicht__kopf h1 { margin: 0; font-size: 1.5rem; font-weight: 300; }
.schlicht__kopf p { margin: .3rem 0 0; color: rgba(255, 255, 255, .82); font-size: .92rem; }
.schlicht__koerper { padding: 1.75rem; }

/* --- Druck -------------------------------------------------------------- */

@media print {
    body { background: #fff; font-size: 11pt; }
    .kopf, .leiste, .leiste__schleier, .seitenkopf__werkzeuge, .anzeigestreifen,
    .meldungen, .tafel__fuss, .nicht-drucken { display: none !important; }
    .huelle { max-width: none; padding: 0; }
    .tafel { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
    .kachel { break-inside: avoid; }
    a { color: inherit; text-decoration: none; }
    table.liste th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ampel { border: 1px solid #999; }
}

/* --- Kleine Bildschirme ------------------------------------------------- */

@media (max-width: 720px) {
    .huelle { padding: 0 1rem 3rem; }
    .kopf__innen { padding: 0 .75rem 0 .25rem; gap: .5rem; }
    /* Auf schmalen Geräten weicht zuerst der Schriftzug: Das Symbol allein
       genügt zur Wiedererkennung, das Firmenlogo nicht. */
    .kopf__marke span { display: none; }
    .kopf__firma, .kopf__firma img { max-width: 130px; }
    .kacheln { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
    .kachel { min-height: 140px; padding: .9rem; }
    .kachel__titel { font-size: 1rem; }
    .kachel__zeile { display: none; }
    .kachel__symbol { width: 30px; height: 30px; margin-bottom: .5rem; }
    h1 { font-size: 1.4rem; }
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --- Auswahl aus Farben und Symbolen ------------------------------------
   Farben und Symbole werden gezeigt, nicht benannt. Eine Auswahlliste mit
   Wörtern wie „Petrol“ zwingt zum Ausprobieren; die Fläche selbst ist die
   Beschriftung. Der Name steht trotzdem für Screenreader daneben. */

.wahl {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .5rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: #fafbfc;
}
.wahl--symbole { max-height: 132px; overflow-y: auto; }

/* Der Strukturbaum als eine durchgehende Liste.
   .wahl bricht um, und in Spaltenrichtung heisst Umbruch: eine zweite Spalte.
   Der Baum wurde dadurch mitten in einem Bereich zerschnitten -- die Dreherei
   stand neben ihrer eigenen Ueberschrift. Lieber lang und am Stueck. */
.punktwahl {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .15rem;
    max-height: 60vh;
    overflow-y: auto;
}

.wahl__punkt { position: relative; display: block; cursor: pointer; line-height: 0; }
.wahl__punkt input { position: absolute; opacity: 0; width: 0; height: 0; }

.wahl__farbe {
    display: block;
    width: 34px;
    height: 34px;
    /* Platz fuer den Auswahlring ist immer da -- sonst springt die ganze
       Reihe, sobald jemand eine Farbe anklickt. */
    margin: 4px;
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.wahl__symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    border: 1px solid var(--rand);
    background: #fff;
    color: var(--text-leise);
}
.wahl__symbol .icon { width: 22px; height: 22px; }

.wahl__punkt:hover .wahl__symbol { border-color: var(--akzent); color: var(--akzent); }

/* Der gewählte Punkt trägt einen Ring UND ein Häkchen -- ein Ring allein
   ist auf einem farbigen Feld schwer zu sehen. */
/* Der Ring liegt AUSSEN. Ein weisser Ring innen macht kleine Farbfelder
   blass und damit genau das unkenntlich, worum es hier geht. */
.wahl__punkt input:checked + .wahl__farbe {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--flaeche), 0 0 0 4px var(--text);
}
.wahl__punkt input:checked + .wahl__farbe::after,
.wahl__punkt input:checked + .wahl__symbol::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.wahl__punkt input:checked + .wahl__symbol {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--akzent);
}
.wahl__punkt input:focus-visible + .wahl__farbe,
.wahl__punkt input:focus-visible + .wahl__symbol {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.kachel-editor .tafel__koerper { align-items: start; }

@media (max-width: 720px) {
    .kachel-editor .tafel__koerper { grid-template-columns: 1fr !important; }
}

/* --- Maßnahmentafel -----------------------------------------------------
   Waagerecht scrollende Spalten statt Umbruch: Auf dem Board am Touchscreen
   soll man wischen können, ohne dass die Spalten untereinander rutschen und
   der Zusammenhang verlorengeht. */

.brett {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    align-items: start;
}

.brett__spalte {
    background: #eaecef;
    border-radius: var(--radius-gross);
    min-height: 120px;
}

.brett__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-leise);
}

.brett__zahl {
    background: var(--flaeche);
    border-radius: 999px;
    padding: .05rem .5rem;
    font-size: .85rem;
    letter-spacing: 0;
    color: var(--text);
}

.brett__inhalt { padding: 0 .55rem .55rem; display: grid; gap: .55rem; }

.karte {
    background: var(--flaeche);
    border-radius: var(--radius);
    border: 1px solid var(--rand);
    border-left: 3px solid var(--rand-stark);
    padding: .7rem .8rem;
    box-shadow: var(--schatten);
}
.karte--ueberfaellig { border-left-color: var(--rot); }

.karte__titel {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: .4rem;
}
.karte__titel:hover { color: var(--akzent); }

.karte__zeile { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem; }

/* Der Daumennagel auf der Karte: breit wie die Karte, aber flach. Ein
   hochkant fotografiertes Handybild wuerde die Karte sonst doppelt so hoch
   machen wie ihre Nachbarn, und die Spalte verliert ihren Rhythmus. */
.karte__bild {
    position: relative;
    display: block;
    margin: 0 0 .5rem;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--grund);
}

.karte__bild img {
    display: block;
    width: 100%;
    height: 92px;
    object-fit: cover;
}

/* Sind es mehrere, steht die Zahl in der Ecke -- sonst sieht die Karte
   aus, als haenge genau ein Bild daran. */
.karte__bildzahl {
    position: absolute;
    right: .3rem;
    bottom: .3rem;
    padding: .05rem .35rem;
    border-radius: 3px;
    background: rgba(17, 20, 26, .72);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}

.karte__fuss {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
}

/* Überfälliges trägt Farbe UND ein Zeichen -- die Farbe allein erreicht
   nicht jeden. */
.karte__frist { color: var(--rot); font-weight: 600; }

@media print {
    .brett { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
    .brett__spalte { background: #fff; border: 1px solid #999; }
}

/* --- Kennzahlenkacheln --------------------------------------------------- */

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.kennzahl {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.1rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
    color: var(--text);
    min-height: 148px;
}
.kennzahl:hover { text-decoration: none; border-color: var(--akzent); }

.kennzahl__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.kennzahl__name { font-weight: 600; font-size: .95rem; line-height: 1.3; }

.kennzahl__wert {
    font-size: 2.3rem;
    font-weight: 300;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    margin-top: auto;
}

.kennzahl__trend { font-size: 1rem; color: var(--text-still); vertical-align: .55em; }

.kennzahl__fuss {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
}

.kennzahl__verlauf { color: var(--rand-stark); flex: none; }
.verlauf { width: 110px; height: 28px; display: block; }

/* Herkunftsmarke und Ampel stehen rechts untereinander. Vorher lag die
   Marke absolut oben rechts -- und damit auf der Ampel. */
.kennzahl__marken {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    flex: none;
}

.kennzahl__herkunft {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-still);
    white-space: nowrap;
}

/* --- Diagramm ------------------------------------------------------------
   Serverseitig erzeugtes SVG. Farben kommen aus denselben Ampel-Tokens wie
   überall sonst; jeder Balken trägt zusätzlich seinen Wert als <title>. */

.diagramm { width: 100%; height: auto; display: block; }

.diagramm__gitter    { stroke: var(--rand); stroke-width: 1; }
.diagramm__achslinie { stroke: var(--rand-stark); stroke-width: 1; }
.diagramm__achse     { font-size: 10px; fill: var(--text-leise); font-family: var(--schrift); }

.diagramm__ziel        { stroke: var(--text-leise); stroke-width: 1.5; stroke-dasharray: 6 4; }
.diagramm__zielschrift { font-size: 9px; fill: var(--text-leise); font-family: var(--schrift); }

.diagramm__balken            { fill: var(--akzent); }
.diagramm__balken--gruen     { fill: var(--gruen); }
.diagramm__balken--gelb      { fill: var(--gelb); }
.diagramm__balken--rot       { fill: var(--rot); }
.diagramm__balken--neutral   { fill: var(--akzent); }

.diagramm__linie  { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.diagramm__punkt          { fill: var(--akzent); stroke: #fff; stroke-width: 1.5; }
.diagramm__punkt--gruen   { fill: var(--gruen); }
.diagramm__punkt--gelb    { fill: var(--gelb); }
.diagramm__punkt--rot     { fill: var(--rot); }
.diagramm__punkt--neutral { fill: var(--akzent); }

.diagramm__luecke    { fill: var(--grau-hell); opacity: .5; }
.diagramm__korrektur { font-size: 10px; fill: var(--text-leise); }

/* --- Beschreibungsliste --------------------------------------------------- */

.beschreibung { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; }
.beschreibung dt { font-size: .82rem; color: var(--text-leise); font-weight: 600; }
.beschreibung dd { margin: 0; font-size: .92rem; }

@media print {
    .kennzahl { break-inside: avoid; }
    .diagramm { max-width: 100%; }
}

/* --- Meeting-Durchführung -------------------------------------------------
   Links die Agenda mit Budgets, rechts der laufende Punkt. Am Board wird
   diese Seite im Stehen bedient: Die Agendaknöpfe sind ganze Zeilen, damit
   man sie mit dem Daumen trifft. */

.meeting {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.meeting__agenda {
    position: sticky;
    top: 1rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
    overflow: hidden;
}

.agenda { list-style: none; margin: 0; padding: 0; }
.agenda__punkt { border-bottom: 1px solid var(--rand); }
.agenda__punkt:last-child { border-bottom: 0; }

.agenda__knopf {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 56px;
    padding: .6rem .8rem;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--text);
}
.agenda__knopf:hover:not([disabled]) { background: #f5f7f8; }
.agenda__knopf[disabled] { cursor: default; opacity: .75; }

.agenda__punkt--aktiv .agenda__knopf {
    background: var(--akzent-hell);
    border-left-color: var(--akzent);
}

.agenda__nummer {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--grau-hell);
    color: var(--text-leise);
    font-size: .78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agenda__punkt--aktiv .agenda__nummer { background: var(--akzent); color: #fff; }

.agenda__text { flex: 1; min-width: 0; }
.agenda__titel { display: block; font-size: .92rem; font-weight: 500; line-height: 1.25; }
.agenda__art   { display: block; font-size: .75rem; color: var(--text-still); }

.agenda__zeit {
    flex: none;
    font-family: var(--schrift-zahl);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    padding: .1rem .4rem;
    border-radius: 3px;
}
.agenda__zeit--gruen   { color: var(--gruen); background: var(--gruen-hell); }
.agenda__zeit--gelb    { color: var(--gelb);  background: var(--gelb-hell); }
.agenda__zeit--rot     { color: var(--rot);   background: var(--rot-hell); }
.agenda__zeit--neutral { color: var(--text-leise); background: var(--grau-hell); }

.agenda__gesamt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .9rem;
    border-top: 2px solid var(--rand);
    font-size: .85rem;
    font-weight: 600;
    background: #fafbfc;
}
.agenda__gesamt--gruen { color: var(--gruen); }
.agenda__gesamt--gelb  { color: var(--gelb); background: var(--gelb-hell); }
.agenda__gesamt--rot   { color: var(--rot);  background: var(--rot-hell); }

/* --- Die Uhr --------------------------------------------------------------
   Aus drei Metern lesbar, weil im Meeting alle mitschauen. Die Farbe trägt
   die Aussage nicht allein: Bei Überschreitung springt die Zeit auf ein
   Pluszeichen um, und der Balken läuft sichtbar voll. */

.uhr {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    padding: 1rem 1.25rem 1.3rem;
    border-radius: var(--radius-gross);
    background: var(--gruen-hell);
    border: 1px solid var(--gruen);
    color: var(--gruen);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.uhr--gelb    { background: var(--gelb-hell); border-color: var(--gelb); color: var(--gelb); }
.uhr--rot     { background: var(--rot-hell);  border-color: var(--rot);  color: var(--rot); }
.uhr--neutral { background: var(--grau-hell); border-color: var(--rand-stark); color: var(--text-leise); }

.uhr__zeit {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: var(--schrift-zahl);
    letter-spacing: -.02em;
}

.uhr__text { color: var(--text); }
.uhr__text strong { display: block; font-size: 1.1rem; line-height: 1.25; }
.uhr__text span { color: var(--text-leise); }

.uhr__balken {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: rgba(0, 0, 0, .07);
}
.uhr__balken span {
    display: block;
    height: 100%;
    background: currentColor;
    transition: width 1s linear;
}

/* --- Agendazeilen im Vorlagen-Editor -------------------------------------- */

.agendazeile td { padding: .35rem .4rem; }
.agendazeile input, .agendazeile select { min-height: 38px; font-size: .9rem; }
.agendazeile__griff { color: var(--text-still); cursor: default; user-select: none; }

/* --- Protokoll ------------------------------------------------------------ */

.protokoll { list-style: none; margin: 0; padding: 0; counter-reset: punkt; }

.protokoll__punkt {
    padding: .8rem 0;
    border-bottom: 1px solid var(--rand);
    break-inside: avoid;
}
.protokoll__punkt:last-child { border-bottom: 0; }

.protokoll__kopf { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .3rem; }
.protokoll__notiz { font-size: .93rem; color: var(--text); white-space: pre-line; }

@media (max-width: 900px) {
    .meeting { grid-template-columns: 1fr; }
    .meeting__agenda { position: static; }
    .uhr { flex-wrap: wrap; gap: .8rem; }
    .uhr__zeit { font-size: 2.4rem; }
}

@media print {
    .meeting { grid-template-columns: 1fr; }
    .meeting__agenda, .uhr { display: none; }
}

/* --- Sichtwahl im Cockpit ------------------------------------------------
   Eine Zeile, die sich bei Platzmangel umbricht. Der Bereich bekommt den
   Rest der Breite, die Datumsfelder behalten eine feste Größe — sonst
   springt die Leiste bei jedem Wechsel des Bereichsnamens. */

.sichtwahl {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.sichtwahl .feld { margin: 0; }
/* Der Bereichsname ist der längste Text der Leiste -- er bekommt den
   Vorrang, wenn der Platz eng wird. */
.sichtwahl__bereich { flex: 2 1 280px; min-width: 240px; }
.sichtwahl .feld input[type="date"] { width: 160px; }
.sichtwahl .feld select { min-width: 140px; }
.sichtwahl__schnell { flex: 0 0 auto; }

.schnellwahl { display: flex; gap: .25rem; flex-wrap: wrap; }

.schnellwahl__knopf {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .4rem .7rem;
    font-size: .85rem;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    white-space: nowrap;
}
.schnellwahl__knopf:hover { background: #f2f4f6; text-decoration: none; }

.schnellwahl__knopf--aktiv {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
}
.schnellwahl__knopf--aktiv:hover { background: var(--akzent-dunkel); }

@media (max-width: 720px) {
    .sichtwahl .feld input[type="date"] { width: 100%; }
    .sichtwahl__bereich, .sichtwahl__schnell { flex-basis: 100%; }
}

/* --- Strukturbaum in der Verwaltung ---------------------------------------
   Eingerückt über echten Abstand statt über Zeichen: In einer Tabelle darf
   die Tiefe nicht davon abhängen, wie breit ein Leerzeichen gerendert wird.
   Die Farbe des Randes trennt die drei Arten zusätzlich zum Symbol. */

.baumliste td { vertical-align: middle; }

.baumzeile__name { display: inline-flex; align-items: center; gap: .5rem; }

.baumzeile__symbol {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--text-still);
}
.baumzeile__symbol .icon { width: 18px; height: 18px; }

.baumzeile--organisation .baumzeile__symbol { color: var(--akzent); }
.baumzeile--funktion     .baumzeile__symbol { color: var(--gelb); }
.baumzeile--anlage       .baumzeile__symbol { color: var(--text-leise); }

/* Funktionsbereiche bekommen einen eigenen Grundton: Sie stehen im selben
   Baum, sind aber kein Teil des Wertstroms. */
.baumzeile--funktion { background: #fdfaf1; }
.baumzeile--funktion td:first-child { box-shadow: inset 3px 0 0 var(--gelb); }
.baumzeile--organisation td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }

/* --- Kennzahlgruppen ------------------------------------------------------
   Übergreifende und anlagenspezifische Kennzahlen stehen auf derselben
   Seite, beantworten aber verschiedene Fragen. Die Überschrift trennt sie,
   ohne sie auf zwei Seiten zu verteilen. */

.kennzahlgruppe { margin-top: 1.75rem; }

.kennzahlgruppe__kopf {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .7rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--rand);
}
.kennzahlgruppe__kopf h2 { margin: 0; font-size: 1.05rem; }
.kennzahlgruppe__kopf .klein { flex: 1 1 320px; }

/* --- Zuordnungsmatrix -----------------------------------------------------
   Kennzahlennamen sind lang, Spalten mit Ankreuzfeldern sind schmal. Die
   Kopfzeile wird deshalb gedreht — sonst wäre die Tabelle dreimal so breit
   wie der Bildschirm, und man verlöre beim Waagerechtscrollen die Zeile. */

.matrix { border-collapse: separate; border-spacing: 0; }

.matrix thead th { background: #fafbfc; vertical-align: bottom; }

.matrix__kopf {
    height: 150px;
    width: 42px;
    min-width: 42px;
    padding: .4rem 0 .5rem;
    text-align: center;
    border-bottom: 2px solid var(--rand-stark);
}

.matrix__drehung {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    max-height: 140px;
    overflow: hidden;
}

.matrix__kopf--uebergreifend { box-shadow: inset 0 -3px 0 var(--gelb); }
.matrix__kopf--anlage        { box-shadow: inset 0 -3px 0 var(--akzent); }

/* Die Bereichsspalte bleibt beim Waagerechtscrollen stehen. Ohne das weiß
   man nach der fünften Spalte nicht mehr, in welcher Zeile man ankreuzt. */
.matrix__ecke, .matrix__zeile {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--flaeche);
    text-align: left;
    min-width: 230px;
    box-shadow: 1px 0 0 var(--rand);
}

/* Zeilenköpfe sind <th> und erben sonst die Versalien der Spaltenköpfe --
   Maschinennamen wie "MA-1" werden dadurch unleserlich. Der Selektor muss
   `table.liste th` überbieten, sonst gewinnt die allgemeine Regel. */
table.liste th.matrix__zeile {
    font-weight: 400;
    font-size: .93rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    white-space: nowrap;
}
.matrix__ecke { background: #fafbfc; z-index: 2; }
.matrix tbody tr:hover .matrix__zeile { background: #fafbfc; }
.baumzeile--funktion .matrix__zeile { background: #fdfaf1; }

.matrix__zelle { text-align: center; padding: .3rem 0; }
.matrix__zelle--gesperrt { background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 4px, #f2f4f6 4px, #f2f4f6 8px); }

.matrix__haken { display: block; cursor: pointer; padding: .4rem 0; }
.matrix__haken input {
    width: 20px;
    height: 20px;
    accent-color: var(--akzent);
    cursor: pointer;
}

/* --- Karten schieben ------------------------------------------------------
   Der Griff ist die ganze Karte, nicht ein kleines Anfasser-Symbol: Am
   Touchscreen im Stehen trifft niemand zuverlässig einen 20-Pixel-Punkt. */

/* Eine leere Spalte muss groß genug sein, um sie mit dem Finger zu
   treffen. 60 Pixel wären etwa eine Fingerkuppe -- zu wenig, wenn man im
   Stehen über eine ganze Tafel hinweg zielt. */
.brett__inhalt { min-height: 150px; }

.karte { cursor: grab; touch-action: manipulation; }
.karte:active { cursor: grabbing; }

/* Karten ohne Schreibrecht sehen fest aus und lassen sich nicht anfassen. */
.karte--fest { cursor: default; }
.karte--fest:active { cursor: default; }

/* Der Platzhalter an der Stelle, wo die Karte landen würde. */
.karte--geist {
    opacity: .45;
    background: var(--akzent-hell);
    border-style: dashed;
    border-left-color: var(--akzent);
}

.karte--gewaehlt { border-color: var(--akzent); }

.karte--zieht {
    box-shadow: var(--schatten-hoch);
    transform: rotate(1.5deg);
    opacity: .95;
}

/* Solange der Server noch nicht geantwortet hat, ist die Karte gedämpft --
   sonst sieht ein fehlgeschlagener Wechsel eine Sekunde lang wie ein
   gelungener aus. */
.karte--wartet { opacity: .55; }

.brett__leer {
    padding: .8rem 0 1rem;
    margin: 0;
    text-align: center;
    font-size: .85rem;
    color: var(--text-still);
}

.brett__spalte--still { background: #f0f2f4; }

/* --- Kurze Rückmeldung ----------------------------------------------------
   Unten am Rand statt oben: Beim Schieben ist der Blick unten, und eine
   Meldung am oberen Seitenrand sieht dort niemand. */

.melder {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translate(-50%, 1.5rem);
    z-index: 60;
    max-width: min(90vw, 520px);
    padding: .7rem 1.1rem;
    border-radius: var(--radius);
    font-size: .92rem;
    color: #fff;
    background: var(--text);
    box-shadow: var(--schatten-hoch);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.melder--sichtbar { opacity: 1; transform: translate(-50%, 0); }
.melder--success  { background: var(--gruen); }
.melder--error    { background: var(--rot); }

@media print { .melder { display: none; } }

/* --- Diagrammfläche -------------------------------------------------------
   Im HTML steht zuerst ein serverseitig gezeichnetes SVG. ApexCharts
   ersetzt es beim Laden; ohne Skript bleibt es stehen. Beide Fassungen
   brauchen dieselbe Höhe, sonst springt die Seite beim Laden. */

.diagramm-halter { min-height: 260px; }

/* Kein negativer Rand: ApexCharts rechnet seine Breite aus dem Elternteil
   und ragte dadurch über die Tafel hinaus. */
.diagramm-flaeche { margin: 0; }

/* ApexCharts bringt eigene Schriftgrößen mit; die Familie erbt es von uns. */
.apexcharts-canvas { font-family: var(--schrift) !important; }
.apexcharts-tooltip {
    box-shadow: var(--schatten-hoch) !important;
    border: 1px solid var(--rand) !important;
    border-radius: var(--radius) !important;
}
.apexcharts-tooltip-title {
    background: #fafbfc !important;
    border-bottom: 1px solid var(--rand) !important;
    font-weight: 600 !important;
}

@media print {
    /* Gedruckt wird das SVG: Es steht ohne Skript da, hat keine Animation
       und keine Schwebehilfen -- also genau das, was auf Papier gebraucht
       wird. Die Bibliotheksfassung bliebe sonst mit halb gezeichneter
       Animation im Ausdruck stehen. */
    .diagramm-flaeche { display: none !important; }
    .diagramm-rueckfall { display: block !important; }
    .diagramm-rueckfall[hidden] { display: block !important; }
}

/* --- Erfassungsmaske ------------------------------------------------------
   Eine Zeile je Kennzahl, eine Spalte je Schicht. Die Eingabefelder sind
   das Wichtigste auf der Seite und deshalb breiter und ruhiger als sonst. */

.erfassung__kopf { text-align: center; }
.erfassung__kopf .still { font-weight: 400; letter-spacing: 0; text-transform: none; }

.erfassung__kopf--jetzt { background: var(--akzent-hell); color: var(--akzent); }

.erfassung__jetzt {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--akzent);
}

table.liste th.erfassung__zeile {
    font-weight: 400;
    font-size: .95rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    background: transparent;
    text-align: left;
    min-width: 200px;
}

.erfassung__zelle { padding: .35rem .4rem; min-width: 120px; }
.erfassung__zelle input { text-align: right; font-variant-numeric: tabular-nums; }

/* Ein leeres Feld ist kein Fehler, aber es soll auffallen: Wer eine Schicht
   nachträgt, sieht so auf einen Blick, was noch aussteht. */
.erfassung__offen { background: #fffdf5; border-color: var(--gelb); }
.erfassung__offen:focus { background: #fff; }

/* --- Anklickbarer Pfad ----------------------------------------------------
   Die Glieder sind echte Ziele, also müssen sie auch wie Ziele aussehen --
   und am Touchscreen groß genug sein, um sie zu treffen. */

.brotkrumen a {
    display: inline-block;
    padding: .2rem .15rem;
    min-height: 24px;
}
.brotkrumen a:hover { text-decoration: underline; }
.brotkrumen [aria-current="page"] { color: var(--text); font-weight: 500; }
.brotkrumen__trenner { color: var(--text-still); padding: 0 .1rem; }

@media (max-width: 720px) {
    /* Am Handy zählt die Fingerfläche mehr als die Zeilenhöhe. */
    .brotkrumen a { padding: .35rem .25rem; }
}

/* --- Anlagenportfolio -----------------------------------------------------
   Die drei OEE-Bänder liegen flächig hinter dem Raster, die neun Felder
   sind durch Linien getrennt. Anders als auf dem Papierbogen überlagern
   sich die Flächen nicht — wer Farben übereinanderlegt, muss erklären,
   welche gilt. */

.portfolio { width: 100%; height: auto; display: block; }

.portfolio__zone--halten     { fill: var(--gruen); opacity: .10; }
.portfolio__zone--pruefen    { fill: var(--gelb);  opacity: .12; }
.portfolio__zone--optimieren { fill: var(--rot);   opacity: .10; }

.portfolio__zonentext {
    font-size: 12px;
    font-weight: 600;
    font-family: var(--schrift);
}
.portfolio__zonentext--halten     { fill: var(--gruen); }
.portfolio__zonentext--pruefen    { fill: var(--gelb); }
.portfolio__zonentext--optimieren { fill: var(--rot); }

.portfolio__grenze  { stroke: var(--rand-stark); stroke-width: 1; stroke-dasharray: 5 4; }
.portfolio__rahmen  { fill: none; stroke: var(--rand-stark); stroke-width: 1; }
/* Die Hundert-Prozent-Linie: durchgezogen und dunkler als das Feldraster --
   sie trennt nicht zwei Felder, sondern geplant von mehr als geplant. */
.portfolio__voll    { stroke: var(--text-still); stroke-width: 1; }
.portfolio__achse   { font-size: 10px; fill: var(--text-leise); font-family: var(--schrift); }
.portfolio__achsentitel { font-size: 12px; fill: var(--text-leise); font-weight: 600; font-family: var(--schrift); }

.portfolio__feldnummer {
    font-size: 11px;
    fill: var(--text-still);
    font-family: var(--schrift);
    text-anchor: end;
}

/* Der Punkt trägt die laufende Nummer aus der Liste darunter -- so findet
   man eine Anlage in beiden Darstellungen wieder. */
.portfolio__anlage circle { stroke: #fff; stroke-width: 2; }
.portfolio__anlage text   { font-size: 11px; font-weight: 600; fill: #fff; font-family: var(--schrift); }

.portfolio__anlage--gruen circle { fill: var(--gruen); }
.portfolio__anlage--gelb  circle { fill: var(--gelb); }
.portfolio__anlage--rot   circle { fill: var(--rot); }
.portfolio__anlage--grau  circle { fill: var(--text-still); }

/* --- Feld- und Notenmarken ------------------------------------------------ */

/* Das Feld ist ein Quadrat, die Anlage ein Kreis.
   Beide tragen kleine Zahlen und dieselben Ampelfarben -- ohne
   unterschiedliche Form liest man im Portfolio die Anlage 4 und in der
   Liste das Feld 4 als dasselbe. Dazu das Kürzel "F" vor der Zahl: Die
   Form trennt auf den ersten Blick, das Kürzel beim Nachlesen. */
.feldmarke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 .35rem;
    border-radius: var(--radius);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
    background: var(--text-still);
}
/* Die Anlage: ein Kreis, in der Farbe ihres Handlungsbedarfs -- genau der
   Punkt aus dem Portfolio, nur klein und in der Liste. */
.anlagenmarke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
    background: var(--text-still);
}

.anlagenmarke--gruen { background: var(--gruen); }
.anlagenmarke--gelb  { background: var(--gelb); }
.anlagenmarke--rot   { background: var(--rot); }
.anlagenmarke--grau  { background: var(--text-still); }

.feldmarke--halten     { background: var(--gruen); }
.feldmarke--pruefen    { background: var(--gelb); }
.feldmarke--optimieren { background: var(--rot); }

.note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius);
    font-size: .85rem;
    font-weight: 600;
    background: var(--grau-hell);
    color: var(--text-leise);
}
.note--gruen { background: var(--gruen-hell); color: var(--gruen); }
.note--gelb  { background: var(--gelb-hell);  color: var(--gelb); }
.note--rot   { background: var(--rot-hell);   color: var(--rot); }

/* Die Notenwahl ist am Touchscreen zu treffen: fünf Felder mit Abstand,
   kein Schieberegler. */
.notenwahl { display: flex; gap: .3rem; flex-wrap: wrap; }
.notenwahl__punkt { position: relative; cursor: pointer; line-height: 0; }
.notenwahl__punkt input { position: absolute; opacity: 0; width: 0; height: 0; }
.notenwahl__punkt .note { width: 40px; height: 40px; font-size: 1rem; border: 2px solid transparent; }
.notenwahl__punkt input:checked + .note { border-color: currentColor; box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px currentColor; }
.notenwahl__punkt input:focus-visible + .note { outline: 2px solid var(--akzent); outline-offset: 3px; }

@media print {
    .portfolio { max-width: 100%; }
}

/* --- Normstrategien in der Verwaltung ------------------------------------- */

/* Dieselbe Anordnung wie im Portfoliobild: gute OEE oben, hohe Auslastung
   rechts. Wer die Texte bearbeitet, soll sehen, wo im Bild sie erscheinen. */
.strategieraster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.strategiefeld {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .75rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
}

.strategiefeld__kopf {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 500;
}

.strategiefeld__lage {
    font-size: .8rem;
    font-weight: 400;
    color: var(--text-still);
}

.strategiefeld textarea {
    width: 100%;
    resize: vertical;
    font-size: .85rem;
}

.strategiefeld__vorgabe {
    margin: 0;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--text-still);
}

.strategiefeld__vorgabe span { font-style: italic; }

@media (max-width: 900px) {
    .strategieraster { grid-template-columns: minmax(0, 1fr); }
}

/* --- Schichtübergabe ------------------------------------------------------ */

/* Die Protokolltabelle folgt dem Papierbogen: Zeile je Größe, Spalten
   Geplant / Ist / Grund. Auf dem Bogen ist das eine Tabelle, und das ist
   sie hier auch -- ein Stapel Formularfelder läse sich schlechter. */
.protokoll th[scope="row"] {
    width: 22%;
    min-width: 170px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    color: var(--text);
    vertical-align: middle;
}

.protokoll td input[type="text"] { width: 100%; max-width: 240px; }
.protokoll td:last-child input   { max-width: none; }

.protokoll__einheit {
    display: block;
    margin-top: .3rem;
    max-width: 100px;
    font-size: .8rem;
}

.wahlreihe {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.wahlreihe__punkt {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
}

.wahlreihe__punkt input { margin: 0; }

/* Die Checkliste in zwei Spalten -- wie auf dem Bogen. Dass zwei Punkte
   nebeneinanderstehen, hat keine Bedeutung; es passt nur mehr auf einen
   Blick, und darum geht es an einem Terminal an der Anlage. */
.checkliste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1rem;
}

.punkt {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .8rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
}

.punkt--fehlt { border-color: var(--gelb); background: var(--gelb-hell); }

.punkt__kopf {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.punkt__nr {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--akzent-hell);
    color: var(--akzent);
    font-size: .8rem;
    font-weight: 600;
}

.punkt__titel { flex: 1 1 auto; font-weight: 600; }

/* Auf dem Papierbogen steht die Art senkrecht am Rand. Hier reicht eine
   Marke oben rechts -- senkrechte Schrift liest niemand freiwillig. */
.punkt__typ {
    flex: 0 0 auto;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-still);
}

.punkt__inhalt { font-size: .88rem; color: var(--text-leise); }

.punkt__soll {
    font-size: .85rem;
    padding: .4rem .55rem;
    border-left: 3px solid var(--rand-stark);
    background: var(--grund);
    color: var(--text-leise);
}

.punkt__antwort {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: auto;
}

.punkt__antwort input[type="text"] { width: 100%; }

.punkt__massnahme { margin-top: .2rem; }
.punkt__massnahme summary { cursor: pointer; color: var(--akzent); }

/* Die beiden Unterschriftenfelder vom Bogen. */
.unterschrift {
    padding: .9rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
}

.unterschrift__rolle {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-still);
    margin-bottom: .4rem;
}

.unterschrift__name { font-size: 1.15rem; font-weight: 500; }
.unterschrift .feld { max-width: 260px; }

/* Vorlagenpflege: ein Formular je Punkt. */
.punktform {
    padding: .8rem;
    margin-bottom: .8rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
}

.punktform--still { opacity: .6; }

.punktform__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
}

.punktform__fuss label { display: inline-flex; align-items: center; gap: .3rem; }
.punktform__fuss button { margin-left: auto; }
.punktform__fuss button + button { margin-left: 0; }

@media print {
    .checkliste { grid-template-columns: repeat(2, 1fr); }
    .punkt { break-inside: avoid; }
    .unterschrift { min-height: 90px; }
}

/* --- Bildauswahl in den Einstellungen ------------------------------------- */

.bildwahl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

/* Die Vorschau zeigt das Logo auf der Akzentfarbe -- dort steht es später,
   und ein weisses Logo auf weissem Grund sähe hier aus wie ein Fehler. */
.bildwahl__vorschau {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .6rem .9rem;
    border-radius: var(--radius);
    background: var(--akzent);
    min-height: 56px;
}

.bildwahl__vorschau--logo { min-width: 180px; }
.bildwahl__vorschau--banner { margin-top: .6rem; }

.bildwahl__vorschau img { max-height: 38px; max-width: 100%; width: auto; display: block; }
.bildwahl__vorschau--banner img { max-height: 40px; }

.bildwahl__steuerung { flex: 1 1 260px; min-width: 240px; }
.bildwahl__steuerung label { display: inline-flex; align-items: center; gap: .35rem; }

input[type="file"] {
    font: inherit;
    font-size: .88rem;
    max-width: 100%;
}

/* --- Vorhaben ------------------------------------------------------------- */

.fortschritt {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--grau-hell);
    overflow: hidden;
    min-width: 90px;
}

.fortschritt--breit { min-width: 180px; max-width: 260px; }

.fortschritt__balken {
    display: block;
    height: 100%;
    background: var(--akzent);
    border-radius: 999px;
}

/* Eine Phase ist ein Kasten mit Leitfrage und Ergebnisfeld. Die Leitfrage
   steht ueber dem Feld und nicht als Platzhalter darin: Ein Platzhalter
   verschwindet beim ersten Zeichen, und genau dann wird er gebraucht. */
.phase {
    display: block;
    padding: .8rem;
    margin-bottom: .8rem;
    border: 1px solid var(--rand);
    border-left: 3px solid var(--rand-stark);
    border-radius: var(--radius);
    background: var(--flaeche);
}

.phase--laufend  { border-left-color: var(--gelb); }
.phase--erledigt { border-left-color: var(--gruen); background: var(--grund); }
.phase--entfaellt { border-left-color: var(--rand); opacity: .55; }

.phase__kopf {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .5rem;
}

.phase__nr {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--akzent-hell);
    color: var(--akzent);
    font-size: .8rem;
    font-weight: 600;
}

.phase__titel { flex: 1 1 auto; font-weight: 600; min-width: 0; }

.phase__leitfrage {
    font-weight: 400;
    font-size: .85rem;
    color: var(--text-leise);
    margin-top: .15rem;
}

.phase__steuerung { display: flex; gap: .4rem; flex: 0 0 auto; flex-wrap: wrap; }
.phase__steuerung select { max-width: 170px; font-size: .85rem; }

.phase__ergebnis { width: 100%; min-height: 70px; }

.phase__fuss {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .5rem;
}
.phase__fuss button:first-of-type { margin-left: auto; }

/* Der Analysebaum: 5-Why geht in die Tiefe, Ishikawa in die Breite --
   dieselbe Darstellung traegt beides. */
.knotenbaum, .knoten__kinder { list-style: none; margin: 0; padding: 0; }
.knoten__kinder { margin-left: 1.4rem; padding-left: .8rem; border-left: 2px solid var(--rand); }

.knoten { margin-bottom: .5rem; }

.knoten__zeile,
.knoten__anhang {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.knoten__anhang { margin: .3rem 0 .3rem 1.4rem; }
.knoten__anhang input { flex: 1 1 200px; font-size: .85rem; }

.knoten__zeile input[type="text"] { flex: 1 1 240px; }

.knoten__nr {
    flex: 0 0 auto;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-still);
    min-width: 62px;
}

.knoten__ursache { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }

.knoten--ursache > .knoten__zeile input[type="text"] {
    border-color: var(--rot);
    background: var(--rot-hell);
}

.knoten__massnahme { margin-left: 1.4rem; }

/* Ishikawa: das Bild darf breiter sein als die Tafel und scrollt dann. */
.ishikawa__rahmen { overflow-x: auto; }
.ishikawa { display: block; min-width: 760px; width: 100%; height: auto; }

.ishikawa__kategorie {
    font-family: var(--schrift);
    font-size: 13px;
    font-weight: 600;
    fill: var(--text);
}

.ishikawa__ursache { font-family: var(--schrift); font-size: 11px; fill: #5c6672; }
.ishikawa__ursache--belegt { fill: #A82A2A; font-weight: 600; }
.ishikawa__leer { font-family: var(--schrift); font-size: 11px; fill: #b9bfc7; font-style: italic; }
.ishikawa__wirkung { font-family: var(--schrift); font-size: 13px; font-weight: 600; fill: #A82A2A; }

/* Die Fusszeilen der Tafeln tragen hier ganze Minieingaben. */
.tafel__fuss input[type="text"], .tafel__fuss select { max-width: 100%; }

/* --- Qualifikation -------------------------------------------------------- */

.stufe { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

.legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--rand);
}
.legende:last-child { border-bottom: 0; }

.legende__name {
    flex: 0 0 auto;
    min-width: 150px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-still);
}

.legende__punkt {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
}

/* Die Zelle der Matrix. Der Soll-Rahmen liegt um das Symbol: erfuellt
   gruen, offen gelb -- so ist auf einen Blick zu sehen, wo eine
   Anforderung noch nicht erreicht ist, ohne dass man die Stufen
   vergleichen muss. */
.matrixzelle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 3px;
    line-height: 0;
}

.matrixzelle--erfuellt { border-color: var(--gruen); }
.matrixzelle--offen    { border-color: var(--gelb); background: var(--gelb-hell); }
.matrixzelle--geplant  { border-style: dashed; }
.matrixzelle--gesperrt { opacity: .8; }

.qualmatrix { table-layout: auto; }

.qualmatrix th.qualmatrix__zeile {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--flaeche);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-size: .88rem;
    font-weight: 400;
    color: var(--text);
    padding-right: .75rem;
}

/* Die Breite steht am inneren Element, nicht an der Zelle: Ein max-width
   auf einer Tabellenzelle ist für den Browser nur ein Vorschlag -- der
   Text lief sonst in die Nachbarspalte und legte sich über die
   Anspruchspunkte. */
.qualmatrix__text {
    display: block;
    min-width: 200px;
    max-width: 300px;
    /* table.liste th setzt nowrap -- hier muss der Text umbrechen, sonst
       hilft die Breitenbegrenzung nichts. */
    white-space: normal;
}

.qualmatrix tbody tr:hover th.qualmatrix__zeile { background: #fafbfc; }

/* Die Namen stehen senkrecht -- anders passen vierzig Spalten nicht auf
   einen Bildschirm, und genau das ist der Zweck einer Matrix. */
.qualmatrix__person {
    height: 150px;
    width: 34px;
    padding: 0;
    vertical-align: bottom;
}

.qualmatrix__person a {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    padding: .4rem .2rem;
    font-size: .8rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}

.qualmatrix__zelle { text-align: center; padding: 3px; width: 34px; }
.qualmatrix__anspruch { white-space: nowrap; width: 1%; text-align: center; }
.qualmatrix__kpi { white-space: nowrap; width: 1%; text-align: right; }

.qualmatrix__gruppe th {
    background: var(--grund);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .74rem;
    color: var(--text-leise);
    position: sticky;
    left: 0;
}

.punktampel {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--grau-hell);
}
.punktampel--gruen { background: var(--gruen); }
.punktampel--gelb  { background: var(--gelb); }
.punktampel--rot   { background: var(--rot); }
.punktampel--grau  { background: var(--rand-stark); }

/* Ohne Mindestbreite drueckt die Tabelle die Auswahlfelder auf die Breite
   des Pfeils zusammen -- man sieht dann nicht mehr, was eingestellt ist. */
.qualwahl { min-width: 170px; width: 100%; font-size: .88rem; }

.qualzeile--gesperrt { background: var(--grau-hell); }
/* Gesperrte Zeilen werden gedaempft, aber nicht abgeschaltet -- siehe
   Kommentar in der Ansicht. */
.qualzeile--gesperrt select { opacity: .55; }

.qualdetails { margin-top: .35rem; }
.qualdetails summary { cursor: pointer; color: var(--akzent); }

.qualdetails__inhalt {
    margin-top: .5rem;
    padding: .6rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
}

.qualdetails__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.qualdetails__fuss label { display: inline-flex; align-items: center; gap: .3rem; }
.qualdetails__fuss button { margin-left: auto; }

/* Eine Zeile je Datensatz in der Verwaltung -- einzeln speicherbar, damit
   ein Tippfehler in Zeile 12 nicht die Arbeit an Zeile 1 bis 11 kostet. */
.zeilenform {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .5rem;
    margin-bottom: .4rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
}

.zeilenform--still { opacity: .55; }

/* Die Auskunft an der Stelle, an der vorher der Knopf stand. Sie haelt
   ihren Platz frei, auch wenn sie nichts sagt -- sonst huepft die ganze
   Zeile bei jeder Aenderung um ein paar Pixel. */
.zeilenstand {
    min-width: 6.5rem;
    font-size: .8rem;
    text-align: right;
    white-space: nowrap;
}

.zeilenstand--laeuft   { color: var(--text-leise); }
.zeilenstand--gut      { color: var(--gruen); }
.zeilenstand--schlecht { color: var(--rot); font-weight: 600; }
.zeilenform__symbol { flex: 0 0 auto; line-height: 0; }
.zeilenform input, .zeilenform select { font-size: .88rem; }

.besetzung {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .4rem;
}

.besetzung__punkt {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    padding: .4rem .5rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    cursor: pointer;
}
.besetzung__punkt:hover { background: var(--grund); }
.besetzung__punkt span { display: block; font-size: .9rem; }
.besetzung__punkt .klein { display: block; }

/* --- Glossar -------------------------------------------------------------- */

.az {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: 0 0 1rem;
}

.az a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 .4rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--text);
    font-weight: 600;
    font-size: .88rem;
}
.az a:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; text-decoration: none; }

.glossar__anzahl { margin: 0 0 .5rem; }

.glossar__abschnitt { margin: 1.5rem 0 2rem; }

.glossar__thema {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 0 0 .8rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.glossar__thema::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--akzent);
    flex: 0 0 auto;
    align-self: center;
}

.glossar__raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: .8rem;
}

/* Eine Karte je Begriff. Sprungziel der A–Z-Leiste: der Abstand oben
   hält die Karte unter dem Kopfbalken sichtbar. */
.begriffkarte {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    background: var(--flaeche);
    color: var(--text);
    scroll-margin-top: 80px;
    transition: border-color .12s ease-out, box-shadow .12s ease-out;
}

.begriffkarte:hover {
    border-color: var(--akzent);
    box-shadow: var(--schatten-hoch);
    text-decoration: none;
}

.begriffkarte:target { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }

.begriffkarte__symbol { flex: 0 0 auto; color: var(--text-leise); line-height: 0; }
.begriffkarte:hover .begriffkarte__symbol { color: var(--akzent); }

.glossar-symbol { width: 30px; height: 30px; display: block; }

.begriffkarte__text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.begriffkarte__titel { font-weight: 600; }
.begriffkarte__zeile { font-size: .85rem; line-height: 1.45; color: var(--text-leise); }

.begriffkarte--klein { padding: .6rem .7rem; }
.begriffkarte--klein .glossar-symbol { width: 24px; height: 24px; }

/* Der einzelne Begriff: Text links, Werkzeug und Verwandtes rechts. */
.begriff__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .begriff__raster { grid-template-columns: minmax(0, 1fr); }
}

.begriff__kurz { max-width: 70ch; font-size: 1.02rem; }

.begriff__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    background: var(--flaeche);
    color: var(--akzent);
}
.begriff__symbol .glossar-symbol { width: 38px; height: 38px; }

.begriff__text { line-height: 1.65; max-width: 75ch; }
.begriff__text > :first-child { margin-top: 0; }
.begriff__text h2 { font-size: 1.12rem; font-weight: 600; margin: 1.6rem 0 .5rem; }
.begriff__text h3 { font-size: 1rem; font-weight: 600; margin: 1.2rem 0 .4rem; }
.begriff__text p { margin: 0 0 .8rem; }
.begriff__text ul, .begriff__text ol { margin: 0 0 .9rem; padding-left: 1.35rem; }
.begriff__text li { margin: 0 0 .35rem; }
.begriff__text strong { font-weight: 600; }
.begriff__text .tabellenrahmen { margin: .4rem 0 1rem; }
.begriff__text table.liste th { white-space: normal; }

.begriff__verwandt { display: flex; flex-direction: column; gap: .5rem; }

.begriff__werkzeug .knopf { display: inline-flex; align-items: center; gap: .45rem; }

/* --- Kombidiagramm: Komponenten, Hauptkennzahl, Datentabelle --------------- */

/* Bild und Tabelle rollen gemeinsam. Unter der Mindestbreite würde die Tabelle
   umbrechen, das Bild aber nur schrumpfen -- und die Spalten stünden nicht
   mehr unter ihren Säulen. */
.kombi { overflow-x: auto; }
.kombi__innen { min-width: 900px; }

.kombidiagramm { display: block; width: 100%; height: auto; }

.kombi__gitter     { stroke: var(--rand); stroke-width: 1; }
.kombi__achslinie  { stroke: var(--rand-stark); stroke-width: 1; }
.kombi__achse      { font-size: 11px; fill: var(--text-leise); font-family: var(--schrift); }
.kombi__panel      { font-size: 11px; fill: var(--text-leise); font-family: var(--schrift); font-weight: 600; }
.kombi__linie      { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.kombi__ziel       { stroke-width: 3; stroke-linecap: round; }

/* Werte an den Linien: ein weisser Rand um die Schrift hält sie lesbar,
   wo sie eine andere Linie kreuzt. */
.kombi__wert {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--schrift);
    stroke: #fff;
    stroke-width: 3px;
    paint-order: stroke;
}

/* Dunkler Rand in Säulenfarbe: Wo die Ziellinie doch durch die Zahl läuft,
   bleibt sie lesbar. */
.kombi__balkenwert {
    font-size: 11px;
    font-weight: 600;
    fill: #fff;
    font-family: var(--schrift);
    stroke: #37424D;
    stroke-width: 3px;
    paint-order: stroke;
}

.kombitabelle {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: .35rem;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.kombitabelle th,
.kombitabelle td {
    border: 1px solid var(--rand);
    padding: .3rem .15rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kombitabelle thead th { background: var(--grund); font-weight: 600; color: var(--text); }

.kombitabelle tbody th,
.kombitabelle__kopf {
    text-align: left !important;
    padding-left: .45rem !important;
    font-weight: 600;
    color: var(--text);
    background: var(--flaeche);
}

.kombitabelle__marke {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: .4rem;
    vertical-align: -1px;
}

.kombitabelle__haupt td { font-weight: 700; }
.kombitabelle__leer { color: var(--text-still); }

.kombitabelle__trenner {
    background: repeating-linear-gradient(45deg, var(--grau-hell) 0 3px, #fff 3px 7px);
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.komponentenwahl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .5rem;
}

@media print {
    .kombi { overflow: visible; }
    .kombi__innen { min-width: 0; }
}

/* --- Datentabelle unter jedem Diagramm ------------------------------------ */

/* Über dem Diagramm und rechtsbündig: Das Bild wächst nach unten, ein Knopf
   darunter wanderte beim Drücken unter der Maus weg. */
.diagramm-hoehe {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
    margin-bottom: .3rem;
}

.diagramm-hoehe button {
    min-width: 2rem;
    font-size: 1rem;
    line-height: 1;
    padding: .25rem .5rem;
}
.diagramm-hoehe button[disabled] { opacity: .4; cursor: not-allowed; }

.diagramm-tabelle { margin-top: .4rem; }

/* Als Knopf und nicht als Textzeile: Ein graues "▶ Datentabelle" unter einem
   großen Diagramm übersieht man. */
.diagramm-tabelle > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--text);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.diagramm-tabelle > summary::-webkit-details-marker { display: none; }
.diagramm-tabelle > summary::before { content: '▸'; color: var(--akzent); }
.diagramm-tabelle[open] > summary::before { content: '▾'; }
.diagramm-tabelle > summary:hover { border-color: var(--akzent); }
.diagramm-tabelle > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.diagramm-tabelle__verbergen,
.diagramm-tabelle[open] .diagramm-tabelle__zeigen { display: none; }
.diagramm-tabelle[open] .diagramm-tabelle__verbergen { display: inline; }

.diagramm-tabelle__rahmen { overflow-x: auto; }

/* Die Zeilenköpfe stehen unter der Werteachse und sind schmal. */
.diagrammtabelle tbody th,
.diagrammtabelle .kombitabelle__kopf { padding-left: .3rem !important; }

.diagrammtabelle__rand { border: 0 !important; background: transparent; }

/* Zu viele Zeitscheiben: eigene Spaltenbreiten, seitlich rollen. */
.diagrammtabelle--frei,
.diagrammtabelle--eng { table-layout: auto; }
.diagrammtabelle--frei th, .diagrammtabelle--frei td,
.diagrammtabelle--eng th,  .diagrammtabelle--eng td { min-width: 3.4rem; padding: .3rem .45rem; overflow: visible; }
.diagrammtabelle--eng .diagrammtabelle__rand { display: none; }

.diagrammtabelle__wert--gruen { color: var(--gruen); }
.diagrammtabelle__wert--gelb  { color: #7a5a06; }
.diagrammtabelle__wert--rot   { color: var(--rot); }

/* Drilldown: Die Lupe zeigt, dass hier noch etwas darunter liegt. Kein
   Markieren beim Doppelklick -- sonst leuchtet die Achsenbeschriftung auf. */
/* Kein Markieren beim Doppelklick -- sonst leuchtet die Achsenbeschriftung
   auf, auch dort, wo es nichts aufzuschlüsseln gibt. */
.diagramm-flaeche { user-select: none; -webkit-user-select: none; }
.diagramm-flaeche--drill .apexcharts-bar-area,
.diagramm-flaeche--drill .apexcharts-marker,
.diagramm-flaeche--drill .apexcharts-grid { cursor: zoom-in; }

.diagramm-drill {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin: .5rem 0 0;
}

@media print {
    /* Zugeklappt bleibt sie auch auf Papier zu: gedruckt wird, was man sieht. */
    .diagramm-tabelle:not([open]) { display: none; }
    .diagramm-tabelle > summary { display: none; }
    .diagramm-hoehe { display: none; }
}

/* Schnellwahl, die für diese Kennzahl zu fein wäre. */
.schnellwahl__knopf--aus { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* --- Quote und Gegenstueck: gestapelte Saeulen ----------------------------- */

.quotendiagramm { display: block; width: 100%; height: auto; }

.quote__gitter  { stroke: var(--rand); stroke-width: 1; }
.quote__achse   { font-size: 11px; fill: var(--text-leise); font-family: var(--schrift); }
.quote__panel   { font-size: 11px; fill: var(--text-leise); font-family: var(--schrift); font-weight: 600; }
.quote__legende { font-size: 11px; fill: var(--text); font-family: var(--schrift); }
.quote__leer    { font-size: 12px; fill: var(--text-still); font-family: var(--schrift); }
.quote__ziel    { stroke-width: 2; stroke-dasharray: 7 5; fill: none; }

.quote__wert { font-size: 11px; font-weight: 600; font-family: var(--schrift); }

/* Weiss auf Gruen und auf Rot -- beides traegt genug Kontrast. */
.quote__wert--hell { fill: #fff; }

/* --- Bilder an einem Vorgang ---------------------------------------------- */

.anhaenge {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .7rem;
    margin: 0 0 1rem;
}

.anhang { margin: 0; }

.anhang img {
    display: block;
    width: 100%;
    height: 110px;
    /* Ausschnitt statt Verzerrung: Ein Beleg darf beschnitten sein, aber
       nicht falsche Proportionen zeigen. In voller Größe steht er einen
       Klick weiter. */
    object-fit: cover;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
}

.anhang figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .3rem;
    margin-top: .25rem;
}

.anhang figcaption span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media print {
    .anhang figcaption form { display: none; }
}

/* --- Bild aus der Mediathek waehlen ---------------------------------------
   Karten zum Anhaken. Das Haekchen sitzt in der Ecke des Bildes und nicht
   davor: Angeklickt wird ohnehin das Bild, und ein Kaestchen daneben waere
   auf dem Tablet die kleinere Haelfte. */

.bildwahl { margin-top: 1rem; }
.bildwahl > summary { cursor: pointer; color: var(--text-leise); }

.bildwahl__raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .6rem;
    margin-top: .4rem;
    /* Hundert Bilder sollen den Vorgang nicht nach unten schieben. */
    max-height: 420px;
    overflow-y: auto;
    padding: .2rem;
}

.bildwahl__karte {
    position: relative;
    display: block;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 2px;
}

.bildwahl__karte img {
    display: block;
    width: 100%;
    height: 90px;
    object-fit: cover;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
}

.bildwahl__karte span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bildwahl__karte input {
    position: absolute;
    top: .4rem;
    left: .4rem;
    width: 20px;
    height: 20px;
    margin: 0;
    /* Auf dem Bild, also mit eigenem Grund -- ein weisses Kaestchen auf
       einem weissen Typenschild sieht man nicht. */
    box-shadow: 0 0 0 2px #fff;
    border-radius: 3px;
}

/* Angehakt: Der Rahmen sagt es auf einen Blick, auch wenn das Kaestchen
   im hellen Teil des Bildes sitzt. */
.bildwahl__karte:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.bildwahl__karte:focus-within { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* --- Bildschau ------------------------------------------------------------
   Das Bild ueber der Seite statt in einem neuen Reiter. Dunkler Grund,
   damit das Foto zaehlt und nicht der Rahmen; das Kreuz oben rechts, wo es
   jeder sucht. Der Kasten ist ein Raster aus drei Spalten: Blaettern links,
   Bild in der Mitte, Blaettern rechts. */

.bildschau {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: .5rem;
    padding: .6rem;
    background: rgba(17, 20, 26, .92);
}

.bildschau[hidden] { display: none; }

/* Die Seite darunter soll nicht mitrollen, waehrend oben ein Bild steht. */
body.bildschau-offen { overflow: hidden; }

.bildschau__kopf {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    font-size: .85rem;
}

.bildschau__name {
    /* Ohne min-width schrumpft ein Flex-Kind nicht unter seinen Inhalt --
       ein langer Dateiname schoebe sonst das Kreuz aus dem Bild. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bildschau__zaehler { color: rgba(255, 255, 255, .7); white-space: nowrap; }

/* Das Kreuz rutscht ganz nach rechts, der Rest bleibt links. */
.bildschau__kopf [data-bildschau-original] { margin-left: auto; }

.bildschau__knopf {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: .3rem;
    padding: .35rem .6rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--radius);
    background: transparent;
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.bildschau__knopf:hover { background: rgba(255, 255, 255, .14); }
.bildschau__knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.bildschau__bild {
    grid-column: 2;
    justify-self: center;
    max-width: 100%;
    /* Kopfzeile und Rand abgezogen: Das Bild soll ganz zu sehen sein, auch
       auf einem flachen Bildschirm. */
    max-height: calc(100vh - 5rem);
    object-fit: contain;
    border-radius: var(--radius);
    background: #fff;
}

.bildschau__blatt {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2.4rem;
    line-height: 1;
    padding: .4rem .6rem;
    cursor: pointer;
    opacity: .75;
}

.bildschau__blatt:hover { opacity: 1; }
.bildschau__blatt[hidden] { display: none; }
.bildschau__blatt--zurueck { grid-column: 1; }
.bildschau__blatt--weiter  { grid-column: 3; }

@media print {
    .bildschau { display: none !important; }
}

/* --- Mediathek ------------------------------------------------------------
   Dieselben Karten wie an einem Vorgang, nur mit zwei Zusaetzen: den Marken
   darunter (woher kommt das Bild, wo erscheint es) und dem eingeklappten
   Umbenennen. Eingeklappt, weil die Ablage zum Ansehen da ist -- ein
   Textfeld unter jedem Bild waere eine Tastatur voller Versehen. */

.medien__karte { display: flex; flex-direction: column; }

.medien__marken {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .3rem;
}

.medien__marken a.marke { text-decoration: none; }
.medien__marken a.marke:hover { text-decoration: underline; }

.medien__aendern { margin-top: .4rem; }
.medien__aendern summary { cursor: pointer; color: var(--text-leise); }
.medien__aendern input[type="text"] { width: 100%; }
.medien__aendern form { margin-top: .3rem; }

.medien__knoepfe { margin-top: .3rem; }

.medien__namen { margin-top: 1rem; }
.medien__namen summary { cursor: pointer; color: var(--text-leise); }
.medien__namen .marke { margin-right: .2rem; }

/* --- Hallenlayout --------------------------------------------------------- */

/* Der Plan ist ein Bild, die Markierungen liegen in Prozentabstaenden
   darueber. Deshalb ist der Behaelter nur so gross wie das Bild: Ein
   Prozentwert bezieht sich auf ihn. */
.layout {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

.layout__bild {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: #fff;
}

.layout--setzen { cursor: crosshair; }

/* Jede Marke sitzt mit ihrer Mitte auf dem Punkt -- sonst zeigt sie
   daneben, und zwar je nach Zoomstufe unterschiedlich weit. */
.layoutmarke {
    position: absolute;
    transform: translate(-50%, -50%);
    line-height: 0;
    /* Klicks gehen an den Plan darunter: Beim Setzen soll eine vorhandene
       Marke nicht im Weg stehen. */
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

.layoutmarke svg { display: block; }

/* Nur fuer Vorlesegeraete -- die Marke selbst ist ein Bild. */
.ld-nur-lesbar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.layout__liste { display: grid; gap: .3rem; }

.layout__zeile {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .45rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
}

.layout__zeile--aktiv { border-color: var(--akzent); background: var(--akzent-hell); }
.layout__zeile__name { flex: 1 1 auto; }

.layout__punkt {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* Noch nicht auf dem Plan: leerer Umriss statt Farbe. */
.layout__punkt--leer {
    background: transparent;
    box-shadow: none;
    border: 1px dashed var(--rand-stark);
}

@media print {
    .layout--setzen { cursor: default; }
}

/* --- Deutung durch ein Sprachmodell --------------------------------------- */

/* Abgesetzt und nicht wie eigener Inhalt: Der Text ist ein Vorschlag von
   aussen, keine Aussage der Anwendung. */
.kideutung {
    padding: .8rem 1rem;
    border-left: 4px solid var(--akzent);
    border-radius: var(--radius);
    background: var(--grund);
    font-size: .95rem;
    line-height: 1.55;
}

/* Die Zeilen, für die der Leser dieser Seite selbst zuständig ist. Nicht
   farbig unterlegt -- auf dem Anlagenblatt stehen schon Ampeln, und zwei
   Signale nebeneinander heben sich auf. */
.zeile--betont > td { background: var(--grund); font-weight: 600; }

/* Symbol und Auswahlfeld einer Stufe stehen nebeneinander und gehören
   zusammen -- deshalb dieselbe Zeile und ein gemeinsamer Fokusrahmen. */
.stufenwahl { display: flex; align-items: center; gap: .4rem; }
.stufenwahl .qualwahl { min-width: 8.5rem; }
.stufenwahl select[disabled] { background: var(--grund); color: var(--text-leise); cursor: not-allowed; }

.stufenwahl__knopf {
    border: 0;
    padding: 1px;
    background: none;
    cursor: pointer;
    border-radius: 3px;
    line-height: 0;
    flex: none;
}

.stufenwahl__knopf:hover { background: var(--akzent-hell); }
.stufenwahl__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.stufenwahl__fest { line-height: 0; flex: none; padding: 1px; }

/* Die drei Spalten sollen gleich breit sein -- sonst wandert das Auge beim
   Vergleich von Ist und Soll über verschiedene Abstände. */
.qualspalte { width: 14rem; }

@media (max-width: 900px) {
    .qualspalte { width: auto; }
    .stufenwahl .qualwahl { min-width: 6.5rem; }
}

/* --- Gemba Walk ----------------------------------------------------------
   Der Weg durch die Halle als Liste: Wo man steht, ist die einzige Frage,
   die diese Seite im Gehen beantworten muss. Deshalb traegt die aktuelle
   Station einen farbigen Balken und alles Erledigte verblasst. */

.gemba__fokus {
    margin: 0 0 .9rem;
    padding: .7rem .9rem;
    border-left: 4px solid var(--akzent);
    border-radius: var(--radius);
    background: var(--akzent-hell);
    font-size: 1.02rem;
}

.gemba__liste { margin: 0 0 .9rem; padding-left: 1.1rem; }
.gemba__liste li { margin-bottom: .25rem; }

.gemba__weg { margin: 0; padding: 0; list-style: none; counter-reset: station; }

.gemba__station {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    padding: .7rem 1rem .7rem 2.6rem;
    border-bottom: 1px solid var(--rand);
    position: relative;
    counter-increment: station;
}

.gemba__station:last-child { border-bottom: 0; }

/* Die Nummer ist der Weg -- sie steht vor der Station, nicht daneben. */
.gemba__station::before {
    content: counter(station);
    position: absolute;
    left: .9rem;
    top: .72rem;
    width: 1.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-still);
    font-size: .82rem;
}

.gemba__station--hier {
    background: var(--akzent-hell);
    box-shadow: inset 3px 0 0 var(--akzent);
}

.gemba__station--fertig { color: var(--text-leise); }
.gemba__station--fertig strong { font-weight: 500; }

/* --- Erfassung: Bestandteile unter ihrer Summe --------------------------
   Die Einrückung ist die ganze Erklärung: Was eingerückt steht, zählt zur
   Zeile darüber. Das gerechnete Feld bleibt sichtbar, aber unbeschreibbar --
   ausgegraut und ohne Tabstopp. */

.erfassung__teil > th { padding-left: 1.6rem !important; font-weight: 500; }
.erfassung__summe > th { font-weight: 700; }

.erfassung__summe input[readonly] {
    background: var(--grund);
    color: var(--text-leise);
    font-weight: 600;
    cursor: default;
}

/* --- Gestapelte Bestandteile und ihre Rangfolge -------------------------
   Der farbige Punkt ist die Verbindung zwischen Bild, Tabelle und Liste:
   Wer im Stapel eine Farbe sieht, findet sie in der Zeile darunter wieder,
   ohne eine Legende zu lesen. */

.stapel__punkt {
    display: inline-block;
    width: .62rem;
    height: .62rem;
    margin-right: .45rem;
    border-radius: 2px;
    vertical-align: baseline;
}

/* Die Zeilenköpfe tragen hier Namen statt "Ziel" und "Wert". Sie dürfen
   deshalb umbrechen: Zwei Zeilen sind lesbar, "Mech…" ist es nicht. */
.stapeltabelle tbody th {
    white-space: normal;
    overflow: visible;
    line-height: 1.15;
    font-size: .72rem;
    font-weight: 500;
}

.stapeltabelle tbody tr:last-child th,
.stapeltabelle .kombitabelle__haupt th { font-weight: 700; }

/* Die Werteblase des Stapels: sieben Zeilen und eine Summe. Die Blase von
   ApexCharts steckt in dessen eigenem Rahmen, deshalb nur Innenleben. */
.blase { padding: .45rem .6rem; font-size: .78rem; min-width: 12rem; }
.blase__kopf { font-weight: 600; margin-bottom: .3rem; }
.blase__zeile { display: flex; align-items: center; gap: .4rem; padding: .08rem 0; }
.blase__name { flex: 1 1 auto; color: var(--text-leise); }
.blase__punkt { width: .55rem; height: .55rem; border-radius: 2px; flex: none; }

.blase__summe {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    margin-top: .3rem;
    padding-top: .25rem;
    border-top: 1px solid var(--rand);
    font-weight: 600;
}

.rangliste__balken { width: 42%; white-space: nowrap; }

.rangliste__spur {
    position: relative;
    display: inline-block;
    width: calc(100% - 4.2rem);
    height: .52rem;
    vertical-align: middle;
    border-radius: 3px;
    background: var(--grau-hell);
    overflow: hidden;
}

/* Die Achtzig-Prozent-Marke: Was links davon liegt, ist die Arbeit, die
   sich lohnt. Ohne sie muss jeder die Prozente im Kopf aufaddieren. */
.rangliste__spur::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80%;
    width: 1px;
    background: var(--text-still);
}

.rangliste__anteil { display: block; height: 100%; }
.rangliste__zahl { display: inline-block; width: 3.6rem; text-align: right; }

@media (max-width: 700px) {
    /* Auf dem Handy weicht der Balken: Zahl und Anteil tragen die Aussage,
       die Spur ist die Zugabe. */
    .rangliste__spur { display: none; }
    .rangliste__balken { width: auto; }
}

/* --- Deutung: Symbol und Warten ----------------------------------------
   Der Funke markiert, was nicht aus dem Werk kommt, sondern von einem
   Sprachmodell -- an der Ueberschrift, am Knopf und am Ergebnis. Wer im
   Shopfloor-Meeting auf den Bildschirm sieht, soll die gedeutete Passage
   nicht fuer eine gemessene halten. */

.kititel { display: flex; align-items: center; gap: .45rem; }
.kifunke { color: var(--akzent); }
.knopf .icon { margin-right: .4rem; }

/* Das Warten ist kein Nebenzustand, sondern der Normalfall: Die Anfrage
   geht ueber das Internet an einen fremden Dienst und darf 30 Sekunden
   brauchen. Gezeigt wird deshalb die Form der kommenden Antwort, nicht nur
   ein Kringel -- das nimmt die Ungewissheit und verhindert den Sprung im
   Layout, wenn der Text eintrifft. */
.kiwarten {
    padding: .8rem 1rem;
    border-left: 4px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
}

.kiwarten__kopf { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .95rem; }

.kiwarten__rad {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    border: 2px solid var(--rand-stark);
    border-top-color: var(--akzent);
    border-radius: 50%;
    animation: ld-dreht .7s linear infinite;
}

.kiwarten__zeile {
    display: block;
    height: .62rem;
    margin-bottom: .42rem;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--rand-stark) 0%, var(--flaeche) 50%, var(--rand-stark) 100%);
    background-size: 200% 100%;
    animation: ld-wandert 1.4s ease-in-out infinite;
}

.kiwarten__zeile:last-child { margin-bottom: 0; }
.kiwarten__zeile:nth-child(4) { animation-delay: .1s; }
.kiwarten__zeile:nth-child(5) { animation-delay: .2s; }
.kiwarten__zeile:nth-child(6) { animation-delay: .3s; }

@keyframes ld-dreht { to { transform: rotate(360deg); } }
@keyframes ld-wandert {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Ohne Bewegung bleibt der Platzhalter ruhig sichtbar -- die Aussage steckt
   im Text daneben, nicht in der Animation. Die allgemeine Regel weiter
   unten schaltet beides ab. */

/* --- Rechtstexte -----------------------------------------------------------
   Impressum und Datenschutz sind Fliesstext und kein Werkzeug: schmale
   Spalte, ruhige Abstaende, keine Kacheln. Wer hier liest, sucht eine
   Angabe und nicht eine Bedienung. */

.rechtstext {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 2rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
}

.rechtstext h1 { margin: 0 0 .4rem; }

.rechtstext section { margin-top: 1.4rem; }

.rechtstext h2 {
    font-size: 1rem;
    margin: 0 0 .25rem;
    color: var(--text);
}

.rechtstext p { margin: 0 0 .6rem; line-height: 1.65; }
.rechtstext ul { margin: .3rem 0 .6rem 1.1rem; line-height: 1.6; }
.rechtstext li { margin-bottom: .35rem; }

/* Die Fusszeile der Anwendung: klein, ruhig, immer da. */
.fusszeile {
    display: flex;
    justify-content: center;
    gap: .5rem;
    padding: 1.5rem 1rem 2rem;
    font-size: .82rem;
    color: var(--text-leise);
}

.fusszeile a { color: var(--text-leise); }
.fusszeile a:hover { color: var(--akzent); }