/* Schulungshub - Oberflaechengestaltung.
   Modern, aber zurueckhaltend: Das Programm wird von Menschen benutzt, die
   keine Software-Schulung bekommen - Klarheit schlaegt Effekt. */

:root {
    --farbe-grund: #eef2f7;
    --farbe-flaeche: #ffffff;
    --farbe-text: #16212e;
    --farbe-gedaempft: #5c6b7c;
    --farbe-akzent: #1f6fd6;
    --farbe-akzent-dunkel: #1558ae;
    --farbe-akzent-hell: #e8f1fc;
    --farbe-rand: #dbe3ec;
    --farbe-gut: #1e7d3c;
    --farbe-warnung: #b7791f;
    --farbe-gefahr: #c22f27;
    --nav-grund: #101d2c;
    --nav-grund2: #16283c;
    --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
    --schatten-hoch: 0 8px 28px rgba(16, 24, 40, .14);
    --rundung: 12px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    color: var(--farbe-text);
    background: var(--farbe-grund);
}

h1 { font-size: 1.55rem; margin: 0 0 .35rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; letter-spacing: -.005em; }
h3 { font-size: 1.02rem; margin: 1.1rem 0 .4rem; }
a { color: var(--farbe-akzent); }

.seite { display: flex; min-height: 100vh; }

/* Sprungmarke: Wer mit der Tastatur bedient, soll nicht durch das ganze
   Menue tabben muessen, um an den Inhalt zu kommen. Sichtbar nur bei Fokus. */
.zum-inhalt {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--farbe-akzent);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 9px 0;
    text-decoration: none;
}

.zum-inhalt:focus { left: 0; }

/* Sichtbarer Fokus fuer alle bedienbaren Elemente - ohne ihn ist die
   Tastaturbedienung ein Blindflug. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--farbe-akzent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------- Menue ---------- */
.hauptmenue {
    width: 248px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--nav-grund2) 0%, var(--nav-grund) 100%);
    color: #cfdbe7;
    padding: 0 .55rem 1rem;
    display: flex;
    flex-direction: column;
}

.marke {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.1rem .6rem .95rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: .6rem;
}

/* Das Zeichen ist das Sinnbild aus icon.svg - drei Speichen, die auf einen
   Punkt zulaufen: die Themen des Betriebs an einer Stelle. Es steckt als
   Hintergrundbild darin, damit Menue, Anmeldeseite und Browserreiter
   dasselbe Zeichen zeigen und es nur EINMAL gepflegt werden muss. */
.marke-zeichen {
    display: inline-block;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: url("icon.svg") center / contain no-repeat;
    box-shadow: 0 2px 8px rgba(31, 111, 214, .45);
    vertical-align: middle;
}

/* Das hochgeladene Firmenlogo an derselben Stelle. Weisser Grund, weil viele
   Logos fuer helle Briefboegen gemacht sind und auf dem dunklen Menue sonst
   verschwinden. object-fit haelt die Seitenverhaeltnisse. */
.marke-logo {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: #fff;
    object-fit: contain;
    padding: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.marke-name { font-weight: 650; font-size: 1.12rem; color: #fff; letter-spacing: .01em; }

.menue-gruppe { display: flex; flex-direction: column; padding: .3rem 0; }

.menue-titel {
    padding: .55rem .6rem .3rem;
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7e93a9;
    font-weight: 600;
}

.hauptmenue a {
    color: #cfdbe7;
    text-decoration: none;
    padding: .48rem .65rem;
    border-radius: 8px;
    margin: 1px 0;
    transition: background .12s ease, color .12s ease;
}

.hauptmenue a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.hauptmenue a.active {
    background: linear-gradient(90deg, rgba(47, 134, 234, .28), rgba(47, 134, 234, .1));
    color: #fff;
    font-weight: 600;
}

.menue-fuss { margin-top: auto; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; }

.abmelde-formular { padding: .45rem .6rem; }
.abmelden {
    background: none;
    border: 1px solid rgba(255,255,255,.28);
    color: #cfdbe7;
    border-radius: 8px;
    padding: .4rem .7rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background .12s ease;
}
.abmelden:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- Inhalt ---------- */
.inhalt { flex: 1; padding: 1.7rem 2.2rem 3rem; max-width: 1180px; }

.untertitel { color: var(--farbe-gedaempft); margin: 0 0 1.3rem; max-width: 860px; }

/* Karten und Kennzahlen */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .9rem; margin: 1rem 0; }

.karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    padding: 1rem 1.1rem;
    transition: transform .12s ease, box-shadow .12s ease;
}

.karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }

/* Breitere Kacheln fuer Kurse: dort steht Text, keine Kennzahl. */
.karten-breit { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.karten-breit .karte { display: flex; flex-direction: column; }
.karten-breit .karte h3 { margin: 0 0 .35rem; font-size: 1.02rem; line-height: 1.3; }
.karten-breit .karte p { margin: .2rem 0; }
.karten-breit .karte .knopfleiste { margin-top: auto; padding-top: .6rem; }

/* Such- und Filterzeile ueber langen Listen */
.filterleiste {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    align-items: flex-end;
    margin: 1rem 0 .4rem;
}

.filterleiste > div { display: flex; flex-direction: column; gap: .2rem; }
.filterleiste label { font-size: .82rem; color: var(--farbe-gedaempft); margin: 0; }
.filterleiste input, .filterleiste select { margin: 0; min-width: 15rem; }

.karte .zahl { font-size: 2rem; font-weight: 750; line-height: 1.15; letter-spacing: -.02em; }
.karte .zahl.gut { color: var(--farbe-gut); }
.karte .zahl.warnung { color: var(--farbe-warnung); }
.karte .zahl.gefahr { color: var(--farbe-gefahr); }
.karte .beschriftung { color: var(--farbe-gedaempft); font-size: .86rem; margin-top: .15rem; }

.kasten {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    padding: 1.15rem 1.35rem;
    margin: .9rem 0;
}

/* Tabellen */
table.liste {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    overflow: hidden;
}
table.liste th, table.liste td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--farbe-rand); vertical-align: top; }
table.liste th {
    background: #f3f6fa;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #46586c;
}
table.liste tr:last-child td { border-bottom: none; }
table.liste tbody tr { transition: background .1s ease; }
table.liste tbody tr:hover td { background: #f6f9fc; }

/* Abzeichen */
.abzeichen { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .77rem; font-weight: 600; white-space: nowrap; }
.abzeichen.grau { background: #e8edf2; color: #45566a; }
.abzeichen.blau { background: #dcebfd; color: #12489a; }
.abzeichen.gruen { background: #d9f2e1; color: #14602e; }
.abzeichen.gelb { background: #fdf0d2; color: #8a5310; }
.abzeichen.rot { background: #fde1df; color: #96201a; }

/* Formulare */
label { display: block; font-weight: 600; margin: .85rem 0 .3rem; font-size: .92rem; }
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"],
select, textarea {
    width: 100%;
    max-width: 560px;
    padding: .55rem .7rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 9px;
    font: inherit;
    background: #fff;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 130px; }
textarea.gross { min-height: 260px; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--farbe-akzent);
    box-shadow: 0 0 0 3px rgba(31, 111, 214, .18);
}

.hilfetext { color: var(--farbe-gedaempft); font-size: .84rem; margin-top: .3rem; max-width: 560px; }

button, .knopf {
    display: inline-block;
    background: linear-gradient(180deg, #2a7de0, var(--farbe-akzent-dunkel));
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: .55rem 1.1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(21, 88, 174, .3);
    transition: filter .12s ease, transform .08s ease, box-shadow .12s ease;
}
button:hover, .knopf:hover { filter: brightness(1.07); box-shadow: 0 3px 10px rgba(21, 88, 174, .35); }
button:active, .knopf:active { transform: translateY(1px); }
button:disabled { background: #a9bccf; box-shadow: none; cursor: not-allowed; filter: none; }

button.zweitrangig, .knopf.zweitrangig {
    background: #fff;
    color: var(--farbe-akzent-dunkel);
    border: 1px solid #b9d0ee;
    box-shadow: none;
}
button.zweitrangig:hover, .knopf.zweitrangig:hover { background: var(--farbe-akzent-hell); filter: none; }
button.gefahr { background: linear-gradient(180deg, #d43a31, #a8241d); box-shadow: 0 1px 2px rgba(168, 36, 29, .3); }

/* Ein Knopf, der wie ein Verweis aussieht. Fuer Nebenaktionen mitten im Text
   ("Bearbeiten", "Loeschen") - ein voller Knopf wuerde die Zeile erschlagen,
   und ein echter Verweis darf keine Aenderung ausloesen. */
button.alsverweis {
    background: none; border: none; padding: 0; margin: 0; box-shadow: none;
    color: var(--farbe-akzent); text-decoration: underline; cursor: pointer;
    font: inherit; min-height: 0; width: auto;
}
button.alsverweis:hover { background: none; text-decoration: none; }
button.alsverweis.gefahr { background: none; color: var(--farbe-gefahr); box-shadow: none; }
button.klein, .knopf.klein { padding: .28rem .65rem; font-size: .84rem; font-weight: 550; border-radius: 8px; }

.knopfleiste { display: flex; gap: .6rem; margin: 1rem 0; flex-wrap: wrap; align-items: center; }

/* Meldungen */
.meldung { border-radius: var(--rundung); padding: .75rem 1rem; margin: .8rem 0; max-width: 780px; white-space: pre-line; border: 1px solid transparent; }
.meldung.erfolg { background: #ddf3e4; color: #124a26; border-color: #a9dcbb; }
.meldung.fehler { background: #fde3e1; color: #791713; border-color: #f3b6b1; }
.meldung.hinweis { background: #e2eefc; color: #17376e; border-color: #bcd4f2; }

/* ---------- Lernansicht ---------- */
.lernseite { max-width: 800px; }
.lernseite .kapiteltext { font-size: 1.04rem; line-height: 1.7; }
.lernseite .kapiteltext p { margin: .85rem 0; }
.lernseite .kapiteltext ul, .lernseite .kapiteltext ol { margin: .85rem 0; padding-left: 1.4rem; }
.lernseite .kapiteltext li { margin: .35rem 0; }
.lernseite .kapiteltext h3 { margin-top: 1.5rem; }

.hinweis { border-radius: 10px; padding: .85rem 1.05rem; margin: 1rem 0; }
.hinweis-marke { font-weight: 700; }
.hinweis-warnung { background: #fdeae8; border-left: 4px solid var(--farbe-gefahr); }
.hinweis-warnung .hinweis-marke { color: var(--farbe-gefahr); }
.hinweis-merke { background: #e6effc; border-left: 4px solid var(--farbe-akzent); }
.hinweis-merke .hinweis-marke { color: var(--farbe-akzent-dunkel); }

.merksatz {
    margin: 1.4rem 0 0;
    padding: .85rem 1.05rem;
    background: #eef7ea;
    border-left: 4px solid var(--farbe-gut);
    border-radius: 10px;
    font-weight: 600;
}

.fortschrittsleiste { display: flex; gap: .3rem; margin: .8rem 0 1.2rem; }
.fortschrittsleiste .schritt { flex: 1; height: 7px; border-radius: 4px; background: #d7e0ea; transition: background .2s ease; }
.fortschrittsleiste .schritt.fertig { background: var(--farbe-gut); }
.fortschrittsleiste .schritt.aktuell { background: var(--farbe-akzent); }

/* Testfragen */
.frage { margin: 1.3rem 0; }
.frage .fragetext { font-weight: 600; margin-bottom: .5rem; }
.antwort {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem .8rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 10px;
    margin: .4rem 0;
    cursor: pointer;
    background: #fff;
    max-width: 640px;
    transition: border-color .12s ease, background .12s ease;
}
.antwort:hover { border-color: var(--farbe-akzent); background: #fbfdff; }
.antwort input { margin-top: .2rem; width: auto; }
.antwort.richtig { border-color: var(--farbe-gut); background: #f2faf4; }
.antwort.falsch { border-color: var(--farbe-gefahr); background: #fdf4f3; }

.erlaeuterung { background: #f2f6fa; border-radius: 9px; padding: .65rem .95rem; margin: .5rem 0 1rem; max-width: 640px; font-size: .92rem; }

/* ---------- Zuordnen und Reihenfolge per Ziehen ----------
   Alle Ziele sind mindestens 44 Punkte hoch. Das ist die Groesse, die die
   Richtlinie fuer barrierefreie Oberflaechen (WCAG 2.2, 2.5.8) fuer
   Bedienelemente nennt - darunter trifft man auf dem Handy daneben. */
.zuordnung { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .6rem 0; }
.zuordnung-ziele { flex: 1 1 320px; min-width: 260px; }
.zuordnung-zeile { display: flex; align-items: stretch; gap: .6rem; margin: .45rem 0; }
.zuordnung-begriff {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    background: #f2f6fa;
    border-radius: 9px;
    font-weight: 600;
    font-size: .93rem;
}
.zuordnung-schlitz {
    flex: 1 1 55%;
    min-height: 44px;
    text-align: left;
    padding: .5rem .75rem;
    border: 2px dashed var(--farbe-rand);
    border-radius: 9px;
    background: #fff;
    color: var(--farbe-gedaempft);
    font-size: .9rem;
    cursor: pointer;
}
.zuordnung-schlitz.gefuellt { border-style: solid; border-color: var(--farbe-akzent); background: #f4f9ff; color: inherit; font-weight: 600; }
.zuordnung-karten { flex: 0 1 260px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .45rem; }
.zieh-karte {
    min-height: 44px;
    padding: .5rem .85rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 999px;
    background: #fff;
    font-size: .9rem;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.zieh-karte.gewaehlt { border-color: var(--farbe-akzent); background: var(--farbe-akzent); color: #fff; font-weight: 600; }
.zieh-ueber { border-color: var(--farbe-akzent) !important; background: #e8f2ff !important; }
.zieh-herkunft { opacity: .4; }
.zieh-abbild {
    position: fixed;
    z-index: 4000;
    /* Ohne das faende die Zielsuche unter dem Finger immer nur das Abbild. */
    pointer-events: none;
    opacity: .9;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    margin: 0;
}

.reihenliste { list-style: none; padding: 0; margin: .5rem 0; max-width: 640px; }
.reihen-zeile {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .45rem .7rem;
    margin: .35rem 0;
    border: 1px solid var(--farbe-rand);
    border-radius: 9px;
    background: #fff;
    touch-action: none;
    user-select: none;
}
.reihen-zeile .reihen-nummer { font-weight: 700; color: var(--farbe-akzent); min-width: 1.6rem; }
.reihen-zeile .reihen-text { flex: 1; font-size: .93rem; }
.reihen-knoepfe { display: flex; gap: .25rem; }
.reihen-knoepfe button {
    width: 34px;
    min-height: 34px;
    padding: 0;
    background: #f2f6fa;
    color: var(--farbe-text);
    border: 1px solid var(--farbe-rand);
    border-radius: 7px;
    font-size: .8rem;
}
.reihen-knoepfe button:disabled { opacity: .35; }
.zieh-griff { cursor: grab; color: var(--farbe-gedaempft); letter-spacing: -2px; }

/* ---------- Bildmarkierung ---------- */
.bildmarkierung { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.bildmarkierung img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.markierpunkt {
    position: absolute;
    padding: 0;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: crosshair;
    min-height: 0;
}
.markierpunkt:focus-visible { outline: 3px solid var(--farbe-akzent); outline-offset: 2px; }
.markierpunkt.gesetzt {
    border-color: var(--farbe-gefahr);
    background: rgba(200, 40, 30, .22);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .75);
}
.markierpunkt.gesetzt::after {
    content: "\2715";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    line-height: 1;
}
.bildmarkierung.bereiche-sichtbar .markierpunkt { border-color: rgba(47, 134, 234, .85); border-style: dashed; }

/* ---------- Anmeldeseite ---------- */
.anmeldeseite {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(47, 134, 234, .35), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(30, 125, 60, .18), transparent 55%),
        linear-gradient(160deg, #0d1a2b 0%, #14263c 55%, #0f2033 100%);
    padding: 2rem 1rem;
}

.anmeldekasten {
    background: #fff;
    border-radius: 18px;
    padding: 2.4rem 2.6rem 2rem;
    width: 400px;
    max-width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.anmeldekasten h1 { display: flex; align-items: center; gap: .65rem; margin-bottom: .2rem; }
.anmeldekasten .marke-zeichen { width: 40px; height: 40px; border-radius: 11px; }
.anmeldekasten button, .anmeldekasten .knopf { width: 100%; text-align: center; padding: .65rem 1rem; }
.anmeldekasten form { margin-top: .4rem; }

.trenner {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--farbe-gedaempft);
    font-size: .8rem;
    margin: 1.1rem 0 .9rem;
}
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--farbe-rand); }

/* ---------- Kleinkram ---------- */
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; max-width: 1160px; }
@media (max-width: 1000px) { .zweispaltig { grid-template-columns: 1fr; } }
.rechtsbuendig { text-align: right; }
.gedaempft { color: var(--farbe-gedaempft); }
.klein { font-size: .84rem; }
details { margin: .5rem 0; }
summary { cursor: pointer; font-weight: 600; padding: .2rem 0; }
summary:hover { color: var(--farbe-akzent-dunkel); }

/* Risikomatrix-Farben */
.risiko-gering { background: #d9f2e1; color: #14602e; }
.risiko-mittel { background: #fdf0d2; color: #8a5310; }
.risiko-hoch { background: #fde3cd; color: #93400f; }
.risiko-sehrhoch { background: #fde1df; color: #96201a; }

/* Vorschau-Banner */
.vorschau-banner {
    background: linear-gradient(90deg, #fdf0d2, #fdf5e3);
    border: 1px solid #ecd9a8;
    border-radius: var(--rundung);
    padding: .6rem 1rem;
    margin: 0 0 1rem;
    font-weight: 600;
    color: #7a4b0d;
}

/* ---------- Kopfleiste und Menue auf kleinen Bildschirmen ----------
   Die Unterweisung wird oft am Tablet in der Werkstatt gemacht. Dort ist
   ein festes 248-Pixel-Menue die Haelfte des Bildschirms - deshalb wird es
   unterhalb von 900 Pixeln zum ausklappbaren Menue. */
.kopfleiste {
    display: none;
    align-items: center;
    gap: .7rem;
    padding: .55rem .8rem;
    background: var(--nav-grund);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 40;
}

.menueknopf {
    background: none;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    border-radius: 9px;
    padding: .45rem .7rem;
    font: inherit;
    cursor: pointer;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
}

.menueknopf:hover { background: rgba(255, 255, 255, .12); }
.menue-schatten { display: none; }

@media (max-width: 900px) {
    .seite { flex-direction: column; }
    .kopfleiste { display: flex; }

    .hauptmenue {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 270px;
        max-width: 84vw;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .18s ease;
        overflow-y: auto;
        box-shadow: var(--schatten-hoch);
    }

    .seite.menue-offen .hauptmenue { transform: translateX(0); }

    .seite.menue-offen .menue-schatten {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(8, 16, 26, .5);
        z-index: 45;
        border: 0;
        padding: 0;
    }

    /* Groessere Beruehrungsflaechen am Bildschirm ohne Maus. */
    .hauptmenue a { padding: .72rem .8rem; }

    .inhalt { padding: 1.1rem 1rem 2.5rem; max-width: 100%; }

    .tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    button, .knopf { min-height: 44px; }
    input[type="text"], input[type="password"], input[type="number"], input[type="date"],
    input[type="email"], input[type="search"], select, textarea { max-width: 100%; font-size: 16px; }
    .filterleiste input, .filterleiste select { min-width: 0; width: 100%; }
    .filterleiste > div { flex: 1 1 100%; }
    h1 { font-size: 1.35rem; }
}

/* ---------- Handy ----------
   Unterhalb von 760px zaehlt jeder Millimeter. Die wichtigste Regel:
   Die SEITE darf nie waagerecht scrollen. Breite Inhalte scrollen in
   ihrem eigenen Kasten - sonst rutscht beim Wischen der ganze Text
   davon, und man findet den Anfang nicht wieder. */
@media (max-width: 760px) {
    html, body { overflow-x: hidden; }

    .inhalt { padding: .9rem .7rem 2.2rem; }
    .kasten, .karte { padding: .85rem .8rem; }
    h1 { font-size: 1.28rem; }
    h2 { font-size: 1.08rem; }
    .untertitel { font-size: .92rem; }

    /* Eine Tabelle als Block scrollt in sich selbst. Das rettet ALLE
       Listen auf einen Schlag - auch die, die noch keinen Rahmen haben. */
    table.liste {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    table.liste td, table.liste th { padding: .5rem .55rem; }

    /* Knoepfe in Listenzeilen brauchen Platz und duerfen umbrechen. */
    table.liste .knopf, table.liste button { margin-bottom: .25rem; }

    .knopfleiste { flex-wrap: wrap; gap: .4rem; }
    .knopfleiste > button, .knopfleiste > .knopf { flex: 1 1 auto; }

    .karten, .karten-breit { grid-template-columns: 1fr; }

    /* Bilder und eingebettete Inhalte nie ueber den Rand hinaus. */
    img, video, iframe { max-width: 100%; height: auto; }
}

/* ---------- Listen als Karten auf dem Handy ----------
   Fuer die Seiten, die Beschaeftigte tatsaechlich am Telefon oeffnen,
   ist eine seitwaerts scrollende Tabelle zu wenig. Traegt die Tabelle
   die Klasse "karten-liste" und jede Zelle ein data-spalte-Merkmal,
   wird jede Zeile zu einem lesbaren Block. */
@media (max-width: 760px) {
    table.liste.karten-liste { display: block; white-space: normal; overflow: visible; }
    table.liste.karten-liste thead { display: none; }
    table.liste.karten-liste tbody,
    table.liste.karten-liste tr,
    table.liste.karten-liste td { display: block; width: auto; }

    table.liste.karten-liste tr {
        border: 1px solid var(--rand);
        border-radius: var(--radius);
        margin-bottom: .7rem;
        padding: .5rem .6rem;
        background: var(--flaeche);
    }

    table.liste.karten-liste td {
        border: 0;
        padding: .28rem 0;
        display: flex;
        gap: .6rem;
        align-items: baseline;
        justify-content: space-between;
    }

    table.liste.karten-liste td::before {
        content: attr(data-spalte);
        font-size: .78rem;
        color: var(--farbe-gedaempft);
        flex: 0 0 40%;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

    /* Eine Zelle ohne Beschriftung (Knopfspalte) nimmt die volle Breite. */
    table.liste.karten-liste td:not([data-spalte])::before { content: none; }
    table.liste.karten-liste td:not([data-spalte]) { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- Ablaufleiste ----------
   Zeigt bei mehrschrittigen Vorgaengen, wo man steht. Ohne sie sitzt man
   vor einem langen Formular und weiss nicht, ob man am Anfang oder kurz
   vor dem Ziel ist. */
.ablauf {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.ablauf li {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border: 1px solid var(--rand);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--farbe-gedaempft);
    background: var(--flaeche);
}

.ablauf .ablauf-nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--rand);
    color: var(--farbe-text);
    font-size: .78rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.ablauf li.erledigt { color: var(--farbe-gut); border-color: var(--farbe-gut); }
.ablauf li.erledigt .ablauf-nummer { background: var(--farbe-gut); color: #fff; }

.ablauf li.aktuell {
    color: var(--farbe-text);
    border-color: var(--farbe-akzent);
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(29, 78, 137, .12);
}

.ablauf li.aktuell .ablauf-nummer { background: var(--farbe-akzent); color: #fff; }

/* ---------- Faktoren-Durchgang ---------- */
.faktor { border-left: 4px solid var(--rand); padding-left: .7rem; margin: .5rem 0; }
.faktor-offen { border-left-color: var(--farbe-warnung); }
.faktor-erledigt { border-left-color: var(--farbe-gut); }
.faktor > summary { font-weight: 600; }

/* ---------- Startseite ---------- */
.begruessung { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .2rem; }
.begruessung .datum { color: var(--farbe-gedaempft); font-size: .9rem; }

/* Die naechste faellige Unterweisung - der wichtigste Knopf der Anwendung. */
.naechster-schritt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.4rem;
    background: linear-gradient(120deg, #123b70, #1f6fd6);
    color: #fff;
    border-radius: var(--rundung);
    padding: 1.15rem 1.35rem;
    margin: 1rem 0 1.4rem;
    box-shadow: var(--schatten-hoch);
}

.naechster-schritt .text { flex: 1 1 260px; }
.naechster-schritt .titel { font-size: 1.18rem; font-weight: 650; margin: .15rem 0 .3rem; }
.naechster-schritt .zusatz { color: #cfe1f8; font-size: .89rem; }
.naechster-schritt .marke-oben { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: #a9c9f0; font-weight: 650; }

.naechster-schritt .knopf {
    background: #fff;
    color: var(--farbe-akzent-dunkel);
    border: none;
    font-weight: 650;
    padding: .7rem 1.3rem;
}

.naechster-schritt .knopf:hover { background: #eaf2fd; color: var(--farbe-akzent-dunkel); }

/* Kennzahlkacheln, die irgendwohin fuehren: Eine Zahl ohne Weg ist eine
   Sackgasse - man sieht das Problem und kann nichts tun. */
a.karte { display: block; text-decoration: none; color: inherit; }
a.karte:hover { border-color: var(--farbe-akzent); }
a.karte .beschriftung { text-decoration: none; }
.karte .weiter { color: var(--farbe-akzent); font-size: .82rem; font-weight: 600; margin-top: .45rem; }

/* Fortschrittsbalken fuer den eigenen Stand */
.balken { background: #dde5ee; border-radius: 999px; height: 9px; overflow: hidden; max-width: 420px; }
.balken > span { display: block; height: 100%; background: var(--farbe-gut); border-radius: 999px; transition: width .3s ease; }

.aufgabenliste { display: flex; flex-direction: column; gap: .55rem; margin: .8rem 0 1.2rem; }

.aufgabe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-left: 4px solid var(--farbe-akzent);
    border-radius: 10px;
    padding: .7rem .95rem;
    box-shadow: var(--schatten);
}

.aufgabe.ueberfaellig { border-left-color: var(--farbe-gefahr); }
.aufgabe .name { flex: 1 1 220px; font-weight: 600; }
.aufgabe .frist { color: var(--farbe-gedaempft); font-size: .87rem; }

/* Leerer Zustand mit klarem naechsten Schritt statt blankem "keine Daten". */
.leerzustand {
    background: var(--farbe-flaeche);
    border: 1px dashed var(--farbe-rand);
    border-radius: var(--rundung);
    padding: 1.6rem 1.4rem;
    text-align: center;
    color: var(--farbe-gedaempft);
    margin: 1rem 0;
}

.leerzustand .zeichen { font-size: 1.9rem; display: block; margin-bottom: .35rem; }
.leerzustand p { margin: .2rem 0 .8rem; }

/* Zaehler am Menuepunkt */
.menue-zaehler {
    display: inline-block;
    margin-left: .4rem;
    background: var(--farbe-akzent);
    color: #fff;
    border-radius: 999px;
    padding: 0 .45rem;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.5;
}

.menue-zaehler.dringend { background: var(--farbe-gefahr); }

/* Wer Bewegung im Bild nicht vertraegt, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- Drucken ---------- */
@media print {
    .hauptmenue, .kopfleiste, .knopfleiste, .menue-schatten, .zum-inhalt { display: none !important; }
    .inhalt { padding: 0; max-width: 100%; }
    .karte, .kasten, table.liste { box-shadow: none; break-inside: avoid; }
    a[href]::after { content: ""; }
}

/* ---------- Arbeitsanweisungen ---------- */
.anleitung-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 2rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    padding: .9rem 1.2rem;
    margin: 1rem 0;
}

.anleitung-kopf .beschriftung {
    display: block;
    color: var(--farbe-gedaempft);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.schrittliste { list-style: none; margin: 1.2rem 0; padding: 0; }

.schritt {
    display: flex;
    gap: 1rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--rundung);
    box-shadow: var(--schatten);
    padding: 1.1rem 1.25rem;
    margin-bottom: .9rem;
    break-inside: avoid;
}

.schritt-nummer {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--farbe-akzent);
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schritt-inhalt { flex: 1; min-width: 0; }
.schritt-inhalt h2 { margin: .1rem 0 .4rem; font-size: 1.08rem; }
.schritt-text { white-space: pre-line; margin: .3rem 0 .6rem; }

/* Bilder gross genug, um an der Maschine etwas zu erkennen - aber nie
   breiter als die Karte. */
.schritt-bild, .schritt-video {
    display: block;
    max-width: 100%;
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--farbe-rand);
    background: #f3f6fa;
    margin: .6rem 0;
}

.schritt-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    margin-bottom: .4rem;
}

@media print {
    /* Ausdruck fuer den Aushang an der Maschine: Videos koennen nicht
       gedruckt werden, die Schrittnummern bleiben erkennbar. */
    .schritt-video, details { display: none !important; }
    .schritt { box-shadow: none; border: 1px solid #999; }
    .schritt-nummer { border: 1px solid #000; background: #fff !important; color: #000 !important; }
}

/* ---------- QR-Aushaenge ----------
   Die Landeseite eines Aushangs wird fast ausschliesslich am Handy
   geoeffnet - haeufig einhaendig, oft mit Handschuhen und selten in
   Ruhe. Deshalb sind die Ziele grosse Flaechen und keine Textlinks. */
.aushang-ziele { display: flex; flex-direction: column; gap: .7rem; margin: 1.2rem 0; }

.aushang-ziele .knopf.gross {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: 1rem 1.1rem;
    min-height: 64px;
    text-align: left;
    line-height: 1.35;
}

.aushang-ziele .ziel-titel { font-size: 1.06rem; font-weight: 650; }
.aushang-ziele .ziel-erklaerung { font-size: .86rem; opacity: .85; font-weight: 450; }

/* Die Zweckauswahl beim Erzeugen: Kacheln statt Auswahlfeld, damit die
   Erklaerung mitsteht - "ba" sagt niemandem etwas. */
.zweckliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .7rem;
    margin-top: .6rem;
}

.zweckliste .zweck {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    text-align: left;
    padding: .8rem .9rem;
    background: var(--flaeche);
    color: inherit;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: none;
    font-weight: 450;
}

.zweckliste .zweck:hover { border-color: var(--farbe-akzent); filter: none; box-shadow: none; }

.zweckliste .zweck.gewaehlt {
    border-color: var(--farbe-akzent);
    box-shadow: inset 0 0 0 1px var(--farbe-akzent);
}

.zweckliste .zweck-titel { font-weight: 650; font-size: 1rem; }
.zweckliste .zweck-text { font-size: .84rem; color: var(--farbe-gedaempft); line-height: 1.35; }

/* Vorschau: Bild und Erklaerung nebeneinander, am Handy untereinander. */
.qr-vorschau {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rand);
}

.qr-vorschau .qr-bild {
    flex: 0 0 auto;
    background: #fff;
    padding: 6px;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    line-height: 0;
}

.qr-vorschau > div:last-child { flex: 1 1 260px; }
.qr-vorschau code { word-break: break-all; }

.hinweisliste { line-height: 1.55; padding-left: 1.15rem; }
.hinweisliste li { margin-bottom: .45rem; }

/* Ein Kaestchen mit Beschriftung daneben. Die ganze Zeile ist anklickbar -
   ein 13 Pixel grosses Kaestchen trifft am Handy niemand. */
.ankreuz {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .5rem 0 .2rem;
    font-weight: 500;
    cursor: pointer;
    min-height: 34px;
}

.ankreuz input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }

/* Zwei Felder nebeneinander, am Handy untereinander. */
.feldpaar { display: flex; gap: 1rem; flex-wrap: wrap; }
.feldpaar > div { flex: 1 1 220px; min-width: 0; }
.feldpaar input, .feldpaar select { width: 100%; }

/* Die Seite "App holen": Symbol und Beschreibung nebeneinander wie in einem
   App-Store, damit sofort erkennbar ist, worum es geht. */
.app-holen { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }

.app-holen .app-symbol {
    flex: 0 0 auto;
    border-radius: 22%;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    line-height: 0;
}

.app-holen > div:last-child { flex: 1 1 260px; min-width: 0; }