/* Grundstil – ohne externe Quellen.
   Team-Oberfläche: sachlich, freundlich, klar. Ein einziges Gestaltungsmotiv trägt die Seiten:
   die Schrittleiste als „Linie mit Haltestellen“ – erledigt (gefüllt), jetzt dran (Signalgelb),
   offen (leer), folgt (gestrichelt). Alles andere bleibt ruhig. */
:root {
    --text: #1d2733; --hinter: #f3f5f6; --flaeche: #fff; --akzent: #203755; --akzent-tief: #15253a;
    --akzent-hell: #e5eaf1; --leise: #55606e; --linie: #d3dae0; --linie-kraeftig: #aab5bf;
    --signal: #f2b632; --signal-hell: #fdf3d9; --erledigt: #2c7a4b; --erledigt-hell: #e3f1e8;
    --fehler: #a4161a; --fehler-hell: #fbe9e9; --ok-hell: #e6f2ea; --warn-hell: #fff4d6;
    --fokus: #3a88d2; --radius: .35rem;
}
* { box-sizing: border-box; }
body { margin: 0; font: 1.05rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color: var(--text); background: var(--hinter); }
main { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1rem; }
h1 { font-size: 1.5rem; color: var(--akzent); }
h2 { font-size: 1.2rem; margin-top: 2rem; }
a { color: var(--akzent); }
.hinweis { color: var(--leise); font-size: .9rem; }
.klein { font-size: .85rem; }
footer { max-width: 40rem; margin: 0 auto; padding: 1rem; font-size: .85rem; color: var(--leise); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Formulare */
.feld { margin: 0 0 1rem; }
.feld label { display: block; font-weight: 600; margin-bottom: .25rem; }
.feld label:has(input[type=checkbox]) { font-weight: normal; }
input, select, button { font: inherit; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=number], select, textarea {
    width: 100%; max-width: 28rem; padding: .55rem .7rem; border: 1px solid var(--linie-kraeftig); border-radius: var(--radius); background: var(--flaeche); color: var(--text); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--fokus); outline-offset: 1px; }
button, .knopf { display: inline-block; padding: .55rem 1.1rem; border: 1px solid var(--akzent); border-radius: var(--radius); background: var(--akzent);
    color: #fff; text-decoration: none; cursor: pointer; font-weight: 600; line-height: 1.3; }
button:hover, .knopf:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }
.knopf.zweitrangig, button.zweitrangig { background: var(--flaeche); color: var(--akzent); }
.knopf.zweitrangig:hover, button.zweitrangig:hover { background: var(--akzent-hell); }
button.leise { background: transparent; color: var(--akzent); border: 1px solid var(--linie); padding: .2rem .6rem; font-weight: normal; }
button.leise:hover { background: var(--akzent-hell); }
button.gefahr { background: var(--fehler); border-color: var(--fehler); }
form.inline { display: inline; }
form.zeile, div.zeile { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
form.zeile .feld, div.zeile .feld { margin: 0; flex: 1 1 14rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.feldhilfe { display: block; color: var(--leise); font-size: .875rem; margin-top: .3rem; max-width: 46rem; line-height: 1.4; }
fieldset > .feldhilfe { margin: 0 0 .6rem; }

textarea { max-width: 48rem; font: inherit; }
fieldset { border: 1px solid var(--linie); border-radius: var(--radius); padding: .6rem 1rem; max-width: 60rem; background: var(--flaeche); }
fieldset.nur-lesen { border: 0; padding: 0; background: none; }
legend { font-weight: 600; padding: 0 .3rem; }
label.wahl { margin-right: 1rem; white-space: nowrap; }
[hidden] { display: none !important; }
.frage-block { border-top: 1px dashed var(--linie); padding-top: .5rem; }
.frage-block ol.optionen { margin: 0 0 .8rem; }
.frage-block ol.optionen li { margin-bottom: .3rem; }
.frage-block ol.optionen input[type=text] { max-width: 22rem; padding: .35rem .5rem; }
.frage-block .mehrfach { margin: .1rem 0 .5rem; }
.frage-block .mehrfach label { font-weight: 600; }
.entwuerfe-hinweis { margin-top: .8rem; }
.entwuerfe-hinweis p { margin: .2rem 0; }
ul.personen { list-style: none; padding-left: 1.5rem; columns: 2 16rem; }
img.vorschau { max-width: 16rem; max-height: 10rem; vertical-align: middle; border: 1px solid var(--linie); }
audio { vertical-align: middle; max-width: 100%; }

/* Status-Marken */
.status { display: inline-block; padding: .05rem .55rem; border-radius: 1rem; font-size: .85rem; background: var(--linie); color: var(--text); }
.status-offen, .abgabe-abgegeben { background: var(--ok-hell); }
.status-entwurf, .abgabe-begonnen { background: var(--warn-hell); }
.status-abgelaufen, .status-geschlossen { color: var(--leise); }
.abgabe-ueberfaellig { background: var(--fehler-hell); color: var(--fehler); }
.abgabe-offen { background: var(--hinter); border: 1px solid var(--linie); }
tr.schon-verwendet td { background: var(--warn-hell); }
.warnung-text { font-size: .85rem; }
.nie { color: var(--fehler); font-weight: 600; }
.auswahl-zaehler { font-weight: 600; margin: .2rem 0 .6rem; }
.auswahl-zaehler.zu-viele { color: var(--fehler); }

/* Meldungen */
.meldung { padding: .7rem 1rem; border-radius: var(--radius); background: var(--ok-hell); border-left: 4px solid var(--erledigt); }
.meldung-fehler { background: var(--fehler-hell); color: var(--fehler); border-left-color: var(--fehler); }
.warnung { padding: .7rem 1rem; border-radius: var(--radius); background: var(--warn-hell); border-left: 4px solid var(--signal); }

/* Teilnehmende: groß und gut tippbar */
.bereich-tn form.anmeldung input { font-size: 1.3rem; }
.bereich-tn form.anmeldung button, .bereich-tn .knopf { font-size: 1.15rem; padding: .8rem 1.4rem; }
.bereich-tn #f_zugangscode { text-transform: uppercase; letter-spacing: .1em; }
.hilfe { display: block; color: var(--leise); font-size: .95rem; margin-top: .2rem; }

/* ------------------------------------------------------------ Team (Laptop, bis Tablet) */
.bereich-team main { max-width: 74rem; padding: 1.25rem 1.5rem 3rem; }
.bereich-team h1 { color: var(--text); font-size: 1.75rem; line-height: 1.2; letter-spacing: -.01em; margin: .2rem 0 .3rem; }
.bereich-team h2 { font-size: 1.15rem; margin: 2.2rem 0 .7rem; }
.bereich-team h3 { font-size: 1.05rem; margin: 0; }

/* Kopf mit Arbeitsbereichen */
.team-kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf-zeile { display: flex; align-items: stretch; gap: 1.25rem; padding: 0 1.5rem; flex-wrap: wrap; max-width: 86rem; margin: 0 auto; }
.marke { display: flex; align-items: center; gap: .4rem; padding: .8rem 0; font-weight: 700; color: var(--akzent); text-decoration: none; letter-spacing: -.01em; }
.marke span { font-weight: 400; color: var(--leise); border-left: 1px solid var(--linie); padding-left: .6rem; margin-left: .2rem; line-height: 1.2; font-size: .95rem; }
.marke .logo { display: block; height: 1.75rem; width: auto; }
.logo-zeile { margin: 0 0 1.2rem; }
.logo-zeile .logo { display: block; height: 3rem; width: auto; max-width: 100%; }
.team-kopf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.bereiche { flex: 1 1 auto; display: flex; }
.bereiche a { display: block; padding: .95rem .65rem .8rem; color: var(--text); text-decoration: none; border-bottom: 3px solid transparent;
    max-width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bereiche a:hover { color: var(--akzent); border-bottom-color: var(--linie); }
.bereiche a.aktiv { color: var(--akzent); font-weight: 600; border-bottom-color: var(--akzent); }
.konto { display: flex; align-items: center; gap: .6rem; font-size: .9rem; margin-left: auto; padding: .5rem 0; }
.konto .rolle { color: var(--leise); }
/* Kontozeile kompakt (Laptop 1180–1366 px): Zusatz „Sprachstand aktuell“ und Rolle ausblenden (Rolle bleibt für Vorleser
   und im Titel des Links), lange Namen kürzen – so bleibt die Kopfzeile einzeilig. Ab 1400 px (87.5rem) wieder voll. */
@media (max-width: 87.4375rem) {
    .konto .rolle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .konto .name { display: inline-block; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
    .marke span { display: none; }
    .kopf-zeile { gap: .9rem; }
}
.unter-nav { background: var(--akzent-hell); }
.unter-nav ul { max-width: 86rem; margin: 0 auto; padding: 0 1.5rem; gap: .25rem; }
.unter-nav a { display: block; padding: .45rem .8rem; color: var(--akzent-tief); text-decoration: none; font-size: .95rem; border-radius: var(--radius); margin: .3rem 0; }
.unter-nav a:hover { background: rgba(255, 255, 255, .6); }
.unter-nav a.aktiv { background: var(--flaeche); font-weight: 600; }

/* Brotkrumen und Seitenkopf */
.brotkrumen ol { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-wrap: wrap; font-size: .9rem; color: var(--leise); }
.brotkrumen li + li::before { content: "/"; margin: 0 .5rem; color: var(--linie-kraeftig); }
.brotkrumen a { color: var(--leise); }
.brotkrumen a:hover { color: var(--akzent); }
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.unterzeile { margin: 0; color: var(--leise); max-width: 50rem; }
.unterzeile .status { margin-left: .3rem; }
.trenner { color: var(--linie-kraeftig); }
.kopf-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2.2rem 0 .7rem; }
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf .aktionen { margin: 0; }
.anzahl { display: inline-block; min-width: 1.6rem; padding: 0 .45rem; border-radius: 1rem; background: var(--akzent-hell); color: var(--akzent-tief);
    font-size: .85rem; font-weight: 600; text-align: center; vertical-align: .1em; }
.anzahl-warnung { background: var(--warn-hell); color: var(--text); }

/* Erläuterung (details/summary) */
.erklaerung { background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--akzent); border-radius: var(--radius); margin: 0 0 1.5rem; }
.erklaerung summary { cursor: pointer; padding: .55rem 1rem; font-weight: 600; color: var(--akzent-tief); list-style: none; display: flex; align-items: center; gap: .55rem; }
.erklaerung summary::-webkit-details-marker { display: none; }
.erklaerung summary::before { content: "?"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--akzent-hell); color: var(--akzent-tief); font-size: .85rem; }
.erklaerung summary::after { content: "▾"; margin-left: auto; color: var(--leise); transition: transform .15s; }
.erklaerung:not([open]) summary::after { transform: rotate(-90deg); }
.erklaerung-inhalt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; padding: 0 1rem .9rem; }
.erklaerung-inhalt h2 { font-size: .9rem; margin: .2rem 0 .25rem; color: var(--leise); font-weight: 600; }
.erklaerung-inhalt p { margin: 0; font-size: .95rem; line-height: 1.45; }

/* Schrittleiste: Linie mit Haltestellen */
.ablauf { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; margin: .5rem 0 1rem; }
.schrittleiste { list-style: none; margin: 0; padding: 1.1rem 1.2rem 1rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); counter-reset: none; }
.schritt { position: relative; padding-right: .75rem; }
.schritt::before { content: ""; position: absolute; top: 1.05rem; left: 2.4rem; right: 0; border-top: 4px dashed var(--linie-kraeftig); }
.schritt:last-child::before { display: none; }
.schritt-erledigt::before { border-top-style: solid; border-top-color: var(--erledigt); }
.schritt-punkt { position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    border: 3px solid var(--linie-kraeftig); background: var(--flaeche); font-weight: 700; color: var(--leise); font-variant-numeric: tabular-nums; }
.schritt-erledigt .schritt-punkt { background: var(--erledigt); border-color: var(--erledigt); color: #fff; }
.schritt-naechster .schritt-punkt { background: var(--signal); border-color: var(--text); color: var(--text); box-shadow: 0 0 0 5px var(--signal-hell); }
.schritt-folgt .schritt-punkt { border-style: dashed; color: var(--linie-kraeftig); background: var(--hinter); }
.schritt-text { display: block; margin-top: .55rem; }
.schritt-titel { display: block; font-weight: 600; line-height: 1.25; }
.schritt-titel a { color: var(--text); text-decoration-color: var(--linie-kraeftig); text-underline-offset: .18em; }
.schritt-titel a:hover { color: var(--akzent); }
.schritt-status { display: block; font-size: .8rem; color: var(--leise); margin-top: .1rem; }
.schritt-naechster .schritt-status { color: var(--text); font-weight: 600; }
.schritt-erledigt .schritt-status { color: var(--erledigt); }
.schritt-info { display: block; font-size: .85rem; color: var(--leise); margin-top: .2rem; line-height: 1.35; }
.schritt-folgt .schritt-titel { color: var(--leise); font-weight: 500; }

/* Kompakte Leiste (Kurslisten) */
.schrittleiste.kompakt { display: flex; padding: 0; border: 0; background: none; gap: 0; }
.kompakt .schritt { padding: 0; width: 2.1rem; }
.kompakt .schritt:last-child { width: auto; }
.kompakt .schritt::before { top: .5rem; left: 1.1rem; right: 0; border-top-width: 3px; }
.kompakt .schritt-punkt { width: 1.15rem; height: 1.15rem; border-width: 2px; font-size: 0; }
.kompakt .schritt-naechster .schritt-punkt { box-shadow: 0 0 0 3px var(--signal-hell); }

/* Nächster Schritt */
.naechster { background: var(--signal-hell); border: 1px solid #e9cf8d; border-left: 6px solid var(--signal); border-radius: var(--radius); padding: .9rem 1.1rem; }
.naechster h2 { margin: 0; font-size: .95rem; color: var(--leise); }
.naechster-schritt { font-size: 1.15rem; font-weight: 700; margin: .15rem 0 .3rem; }
.naechster p { margin: .3rem 0 .6rem; }
.naechster .knopf { margin-top: .2rem; }

/* Abschnitte im Cockpit (mit Schrittnummer) */
.schritt-abschnitt { border-top: 1px solid var(--linie); }
.schritt-abschnitt > h2, .schritt-abschnitt > .abschnitt-kopf { margin-top: 1.4rem; }
.schritt-nr { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid var(--akzent);
    color: var(--akzent); font-size: .9rem; margin-right: .3rem; vertical-align: .05em; font-variant-numeric: tabular-nums; }

/* Übersichten */
.raster-zwei { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.raster-zwei h2 { margin-top: .5rem; }
.todos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.todo { padding: .6rem .9rem .6rem 2.2rem; border-top: 1px solid var(--linie); position: relative; }
.todo:first-child { border-top: 0; }
.todo::before { content: ""; position: absolute; left: .9rem; top: 1.05rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--akzent); }
.todo-warnung::before { background: var(--signal); box-shadow: 0 0 0 2px var(--text); }
.todo a { font-weight: 600; }
.todo-kurs { display: block; font-size: .85rem; color: var(--leise); }
.alles-erledigt { padding: .8rem 1rem; background: var(--erledigt-hell); border-radius: var(--radius); margin: 0; }
.grundlagen-liste { list-style: none; margin: 0; padding: 0; }
.grundlagen-liste li { padding: .55rem 0; border-top: 1px solid var(--linie); }
.grundlagen-liste li:first-child { border-top: 0; padding-top: 0; }
.grundlagen-liste a { font-weight: 600; display: block; }
.grundlagen-liste span { font-size: .9rem; color: var(--leise); }
.kursliste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.kurszeile { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem 2rem; padding: 1rem 1.2rem; border-top: 1px solid var(--linie); }
.kurszeile:first-child { border-top: 0; }
.kurszeile .unterzeile { font-size: .9rem; }
.kurs-zahlen { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; margin: .4rem 0 0; font-size: .9rem; }
.kurs-zahlen div { display: flex; gap: .4rem; }
.kurs-zahlen dt { color: var(--leise); }
.kurs-zahlen dd { margin: 0; font-weight: 600; }
.kurs-stand { display: flex; flex-direction: column; gap: .45rem; justify-content: center; }
.kurs-naechster { margin: 0; font-size: .95rem; }
.kurs-naechster span { color: var(--leise); }
.kurszeile.beendet h3 a { color: var(--leise); }
details.beendete { margin-top: 1.5rem; }
details.beendete summary { cursor: pointer; color: var(--leise); margin-bottom: .6rem; }

/* Leere Zustände */
.leer { border: 2px dashed var(--linie-kraeftig); border-radius: var(--radius); padding: 1.1rem 1.3rem; background: var(--flaeche); max-width: 52rem; }
.leer p { margin: 0 0 .6rem; }
.leer p:last-child { margin-bottom: 0; }
.leer-kurz { color: var(--leise); }

/* Tabellen */
table { border-collapse: collapse; width: 100%; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: .85rem; color: var(--leise); font-weight: 600; background: #f8fafb; }
tr.inaktiv td { color: var(--leise); }
tr.import-fehler td { background: var(--fehler-hell); }
tr.import-vorhanden td, tr.import-im_kurs td { background: var(--warn-hell); }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; }
.liste { padding-left: 1.2rem; }
.liste li { margin: .2rem 0; }
pre.beispiel { background: var(--flaeche); border: 1px solid var(--linie); padding: .6rem; overflow-x: auto; }
.filter { color: var(--leise); }
.filter-formular { margin-bottom: 1rem; }

/* Tablet: Leiste senkrecht, Spalten untereinander */
@media (max-width: 62rem) {
    .ablauf, .raster-zwei, .kurszeile { grid-template-columns: minmax(0, 1fr); }
    .erklaerung-inhalt { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
}
@media (max-width: 48rem) {
    .bereich-team main { padding: 1rem; }
    .kopf-zeile { padding: 0 1rem; gap: .5rem; }
    .schrittleiste:not(.kompakt) { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
    .schrittleiste:not(.kompakt) .schritt { display: flex; gap: .8rem; }
    .schrittleiste:not(.kompakt) .schritt::before { top: 2.25rem; bottom: -.9rem; left: 1.05rem; right: auto; border-top: 0; border-left: 4px dashed var(--linie-kraeftig); }
    .schrittleiste:not(.kompakt) .schritt-erledigt::before { border-left-style: solid; border-left-color: var(--erledigt); }
    .schrittleiste:not(.kompakt) .schritt-punkt { flex: 0 0 2.25rem; }
    .schrittleiste:not(.kompakt) .schritt-text { margin-top: .2rem; }
    table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Zugangsblatt */
.bereich-druck main { max-width: 60rem; }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 1rem; }
.karte { background: var(--flaeche); border: 1px dashed #888; padding: 1rem; page-break-inside: avoid; break-inside: avoid; }
.karte h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.karte-kopf .logo { height: 1.6rem; width: auto; flex: none; }
.karte-inhalt { display: flex; gap: 1rem; align-items: flex-start; }
.karte-qr { flex: 0 0 9.5rem; text-align: center; font-size: .8rem; }
.karte-qr p { margin: .2rem 0 0; }
svg.qr { width: 9.5rem; height: 9.5rem; display: block; }
.karte dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: .5rem 0; }
.karte dt { color: var(--leise); }
.karte dd { margin: 0; font-size: 1.35rem; font-weight: 700; }
.karte .link { font-size: .65rem; color: var(--leise); word-break: break-all; margin: .5rem 0 0; }
@media print {
    body { background: #fff; }
    .nicht-drucken, footer, .team-kopf, .brotkrumen, .erklaerung, .kopf-aktionen { display: none; }
    main { max-width: none; padding: 0; }
    .karten { grid-template-columns: 1fr 1fr; gap: 0; }
    .karte { border-color: #999; }
}
.bereich-team footer { max-width: 74rem; padding: 1rem 1.5rem; }
form.zeile .feld { flex: 0 1 28rem; }
form.inline select, td select { width: auto; max-width: 12rem; padding: .3rem .5rem; }
td form.inline { white-space: nowrap; }
.feld label:has(input[type=radio]) { font-weight: normal; }
div.zeile.filter-js .feld { flex: 1 1 9rem; }
.aufgaben-auswahl label { display: inline; font-weight: 600; }
.aufgaben-auswahl td:nth-child(7) { white-space: nowrap; }
.aufgaben-auswahl td:first-child { width: 2.5rem; }
/* Vorschau je Aufgabe beim Zusammenstellen (details/summary) */
.aufgabe-vorschau { margin-top: .25rem; font-size: .92rem; }
.aufgabe-vorschau > summary { cursor: pointer; color: var(--akzent); width: max-content; }
.aufgabe-vorschau[open] > summary { margin-bottom: .4rem; }
.aufgaben-auswahl td:has(> details.aufgabe-vorschau[open]) { min-width: 26rem; }   /* aufgeklappt: Spalte breiter statt schmaler Kasten */
.aufgabe-vorschau-inhalt { max-width: 40rem; padding: .7rem .9rem; background: var(--hinter); border: 1px solid var(--linie); border-radius: var(--radius); }
.aufgabe-vorschau-inhalt .anweisung-text { margin: 0 0 .6rem; white-space: normal; }
.aufgabe-vorschau-inhalt audio { width: 100%; max-width: 24rem; }
.vorschau-fragen { margin: .5rem 0 0; padding-left: 1.3rem; }
.vorschau-fragen ul { margin: .2rem 0 .5rem; padding-left: 1.1rem; }
.vorschau-fragen li.richtig { font-weight: 600; color: var(--erledigt); }
.vorschau-fragen li.richtig::marker { content: "✓ "; }
.nachtermin-hinweis { margin: 1rem 0; }
.nachtermin-hinweis h2, .nachtermin-hinweis h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.nachtermin-hinweis p { margin: 0 0 .4rem; }
.nachtermin-hinweis ul { margin: 0; padding-left: 1.2rem; }
.nachtermin-hinweis a { font-weight: 600; margin-left: .3rem; }
form.filter-formular .feld { flex: 1 1 12rem; }
.aufnahme-zeile { margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; font-size: .9rem; }
.aufnahme-zeile audio { height: 2.2rem; max-width: 18rem; }

/* ------------------------------------------------------------------ Bewertung (Stufe 5)
   Links Aufgabe und Antwort, rechts das Raster (bleibt beim Scrollen stehen). Je Kriterium eine
   Reihe großer Segmente – das gleiche Motiv wie die Schrittleiste: eine Linie mit Haltestellen,
   hier unter A2 … B2+. Gewählt: gefüllt (Akzent); Zwischenstufen sichtbar gleichwertig. */
.bewertung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(27rem, 1.05fr); gap: 1.5rem; align-items: start; margin-top: .5rem; }
.bewertung-links { display: grid; gap: 1rem; }
.karte-block { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1.1rem 1rem; }
.bereich-team .karte-block h2, .bereich-team .bewertung-raster h2 { margin: 0 0 .6rem; font-size: 1rem; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.angaben { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: 0 0 .7rem; font-size: .92rem; }
.angaben div { display: flex; gap: .4rem; }
.angaben dt { color: var(--leise); }
.angaben dd { margin: 0; font-weight: 600; }
.anweisung-text { margin: 0; font-size: 1.05rem; line-height: 1.55; border-left: 4px solid var(--akzent); padding-left: .8rem; }
.material-lk { margin-top: .8rem; }
.material-lk .klein { margin: 0 0 .3rem; color: var(--leise); }
img.material-bild { max-width: 100%; max-height: 18rem; border: 1px solid var(--linie); border-radius: var(--radius); }
.antwort-lk { border-left: 4px solid var(--erledigt); }
.spieler audio { width: 100%; }
.spieler-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }
.spieler-knoepfe button { padding: .5rem .85rem; }
.spieler-haupt { min-width: 7.5rem; }
.tempo { display: inline-flex; gap: 0; margin-left: .3rem; }
.tempo button { border-radius: 0; margin-left: -1px; }
.tempo button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.tempo button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.tempo button[aria-pressed="true"] { background: var(--akzent); color: #fff; }
.spieler-zeit { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--leise); font-size: .9rem; }
blockquote.abgabe-text { margin: 0 0 .4rem; padding: .7rem .9rem; background: var(--hinter); border-radius: var(--radius); font-size: 1.05rem; line-height: 1.55; white-space: normal; }
.treffer { margin: 0 0 .7rem; padding: .55rem .8rem; background: var(--akzent-hell); border-radius: var(--radius); }
.treffer strong { font-size: 1.1rem; }
.treffer .feldhilfe { margin-top: .15rem; }
ol.auswahl-lk { margin: 0; padding-left: 1.3rem; }
ol.auswahl-lk > li { margin-bottom: .7rem; }
.frage-lk { margin: 0 0 .25rem; font-weight: 600; }
.frage-lk .status { font-weight: 400; margin-left: .3rem; }
ul.optionen-lk { list-style: none; margin: 0; padding: 0; }
ul.optionen-lk li { padding: .15rem .5rem; border-radius: var(--radius); }
ul.optionen-lk li.gewaehlt { background: var(--hinter); font-weight: 600; }
ul.optionen-lk .wahl-marke { color: var(--leise); }
.etikett { display: inline-block; font-size: .78rem; font-weight: 600; padding: 0 .45rem; border-radius: 1rem; background: var(--linie); margin-left: .25rem; }
.etikett-richtig { background: var(--erledigt-hell); color: var(--erledigt); }
details.selbst-lk, details.vergleich { background: var(--flaeche); border: 1px dashed var(--linie-kraeftig); border-radius: var(--radius); padding: .5rem .9rem; font-size: .93rem; }
details.vergleich { border-style: solid; border-color: var(--linie); margin-top: .8rem; }
details.selbst-lk summary, details.vergleich summary { cursor: pointer; color: var(--leise); font-weight: 600; }
details.selbst-lk ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.bewertung-raster { position: sticky; top: 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--akzent); border-radius: var(--radius); padding: .9rem 1.1rem 1rem; }
.bewertung-raster > .feldhilfe { margin: 0 0 .4rem; }
.bewertet-info { margin: 0 0 .5rem; font-size: .88rem; color: var(--erledigt); }
.fertigkeit-block { border-top: 1px solid var(--linie); padding-top: .4rem; margin-top: .5rem; }
.bereich-team .fertigkeit-block h3 { font-size: 1rem; margin: .2rem 0 .1rem; }
.kriterium { padding: .4rem .6rem .5rem; margin: 0 -.6rem; border-left: 4px solid transparent; }
.kriterium.aktiv { border-left-color: var(--signal); background: var(--signal-hell); }
.kriterium-kopf { margin: 0 0 .3rem; line-height: 1.3; }
.kriterium-name { font-weight: 600; }
.kriterium-beschreibung { font-weight: 400; font-size: .84rem; color: var(--leise); }
.segmente { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linie-kraeftig); border-radius: var(--radius); overflow: hidden; }
.segment { position: relative; margin: 0; cursor: pointer; }
.segment + .segment { border-left: 1px solid var(--linie-kraeftig); }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment span { display: grid; place-items: center; min-height: 2.6rem; padding: .25rem .1rem; font-weight: 600; font-size: .9rem; white-space: nowrap; color: var(--text); background: var(--flaeche); }
.segment:hover span { background: var(--akzent-hell); }
.segment input:checked + span { background: var(--akzent); color: #fff; }
.segment input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: -3px; }
.stufe-ergebnis { margin: .35rem 0 .3rem; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; font-size: .95rem; }
.stufe-ergebnis output { font-size: 1.35rem; font-weight: 800; color: var(--akzent-tief); min-width: 2.5rem; }
.bewertung-raster textarea { width: 100%; max-width: none; }
.tastatur { margin: .3rem 0 0; font-size: .82rem; }
.bewertung-leiste { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; margin: 0 0 1rem;
    padding: .55rem .9rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); font-size: .92rem; }
.bewertung-leiste p { margin: 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.bewertung-leiste progress { width: 8rem; height: .65rem; accent-color: var(--erledigt); }
.umschalter { display: inline-flex; border: 1px solid var(--linie-kraeftig); border-radius: 2rem; overflow: hidden; }
.umschalter > * { padding: .2rem .8rem; text-decoration: none; }
.umschalter strong { background: var(--akzent); color: #fff; font-weight: 600; }
.umschalter a:hover { background: var(--akzent-hell); }
.blaettern a { font-weight: 600; }

/* Abgabe-Übersicht: Filter und Matrix */
.abgaben-summe { margin: 0 0 .6rem; }
.filter-chips ul { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-chips a { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .4rem .25rem .75rem; border: 1px solid var(--linie-kraeftig); border-radius: 2rem;
    background: var(--flaeche); color: var(--text); text-decoration: none; font-size: .9rem; }
.filter-chips a:hover { border-color: var(--akzent); }
.filter-chips a[aria-current] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.filter-chips a[aria-current] .anzahl { background: rgba(255, 255, 255, .25); color: #fff; }
table.matrix th[scope="row"] { font-weight: 600; color: var(--text); background: var(--flaeche); font-size: 1rem; white-space: nowrap; }
.th-zusatz { display: block; font-weight: 400; font-size: .78rem; }
td.zelle { min-width: 9rem; }
.zelle-stufen { display: block; font-size: .85rem; font-weight: 600; margin-top: .2rem; }
.zelle-link { display: block; margin-top: .2rem; font-size: .9rem; font-weight: 600; }
.zelle-datum { display: block; font-size: .78rem; color: var(--leise); }
td.zelle-ueberfaellig { background: #fdf5f5; }
td.zelle-eingereicht { background: var(--signal-hell); }
td.stand { white-space: nowrap; color: var(--leise); }
.abgabe-entwurf { background: var(--warn-hell); }
.abgabe-eingereicht { background: var(--signal); color: var(--text); }
.abgabe-bewertet { background: var(--erledigt); color: #fff; }
.erinnern { margin-top: 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--signal); border-radius: var(--radius); padding: .6rem 1rem .8rem; }
.bereich-team .erinnern h3 { margin: 0 0 .2rem; }
.erinnern p { margin: .2rem 0 .4rem; }
.erinnern-liste { margin: 0 0 .5rem; padding-left: 1.2rem; }
.erinnern textarea { width: 100%; font-size: .9rem; }
.quote-kurz { margin: 0 0 .7rem; }
table.quote td { white-space: nowrap; font-size: .92rem; }
.quote-fristgerecht .quote-zeichen { color: var(--erledigt); font-weight: 700; }
.quote-verpasst { background: #fdf5f5; }
.quote-verpasst .quote-zeichen, .quote-verspaetet .quote-zeichen { color: var(--fehler); font-weight: 700; }
.quote-kein_ziel, .quote-laeuft, .quote-laeuft_abgegeben { color: var(--leise); }
td.quote-laeuft, td.quote-laeuft_abgegeben, th.quote-spalte-laeuft { background: repeating-linear-gradient(135deg, transparent 0 6px, #f1f4f6 6px 8px); }
.quote-laufend { color: var(--leise); }
.kommentar-einfach { display: block; margin-top: .35rem; padding: .3rem .55rem; background: var(--signal-hell); border-left: 3px solid var(--signal); font-size: .9rem; font-weight: 600; max-width: 46rem; }
td.quote-wert { white-space: nowrap; }
td.quote-wert.unter-ziel strong { color: var(--fehler); }
table.quote tfoot th, table.quote tfoot td { background: #f8fafb; }
@media (max-width: 62rem) {
    .bewertung { grid-template-columns: minmax(0, 1fr); }
    .bewertung-raster { position: static; }
}

/* ------------------------------------------------------------ Fortschritt (Stufe 6)
   Verlauf je Fertigkeit als Inline-SVG (nur Klassen, keine style-Attribute): Stufen als waagrechte Bänder,
   Haarlinien, eine dünne blaue Linie, je Aufgabe ein Punkt mit weißem Ring; der neueste Punkt trägt den
   gelben Ring der „Haltestelle jetzt“ und ist direkt beschriftet. Ein Rückgang bekommt keine Warnfarbe. */
.verlauf-svg { display: block; width: 100%; height: auto; max-width: 40rem; overflow: visible; }
.verlauf-svg .band { fill: #f2f5f7; }
.verlauf-svg .raster { stroke: #dde4ea; stroke-width: 1; }
.verlauf-svg .achse { fill: #5b6775; font-size: 11px; font-family: inherit; }
.verlauf-svg .achse-haupt { fill: #1d2733; font-weight: 600; }
.verlauf-svg .linie, .sparkline .linie { fill: none; stroke: #203755; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.verlauf-svg .punkt { fill: #203755; stroke: #fff; stroke-width: 2; }
.verlauf-svg .punkt-letzt { fill: #203755; stroke: #f2b632; stroke-width: 3; }
.verlauf-svg .wert { fill: #15253a; font-size: 13px; font-weight: 700; font-family: inherit; }
.sparkline { width: 6rem; height: 2.1rem; vertical-align: middle; flex: none; }
.sparkline .raster { stroke: #dde4ea; stroke-width: 1; }
.sparkline .linie { stroke-width: 1.6; }
.sparkline .punkt-letzt { fill: #203755; stroke: #f2b632; stroke-width: 1.5; }
.verlauf-bild { margin: .2rem 0 .3rem; }
.verlauf-tabelle summary { cursor: pointer; color: var(--akzent); font-weight: 600; padding: .35rem 0; }
.verlauf-tabelle table { width: 100%; margin-top: .3rem; font-size: .95rem; }
.verlauf-tabelle .stufe-zelle { font-weight: 700; white-space: nowrap; }

/* Team: Kurs-Übersicht und Personen-Profil */
.bereich-team .verlauf-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1rem; }
.bereich-team .verlauf-karte, .bereich-team .verlauf-ohne, .bereich-team .vergleich-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1.1rem 1rem; }
.bereich-team .verlauf-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.bereich-team .verlauf-kopf h2, .bereich-team .vergleich-karte h2, .bereich-team .verlauf-ohne h2 { margin: 0; font-size: 1.05rem; }
.verlauf-zuletzt { margin: 0; display: flex; align-items: baseline; gap: .45rem; text-align: end; }
.verlauf-stufe { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--akzent-tief); }
.verlauf-zuletzt-text { color: var(--leise); font-size: .85rem; }
.verlauf-hinweis { color: var(--leise); font-size: .9rem; margin: .2rem 0; }
.verlauf-ohne ul { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .3rem; }
.verlauf-ohne-name { font-weight: 600; margin-inline-end: .5rem; }
.verlauf-ohne-text { color: var(--leise); }
.fortschritt-matrix td.fortschritt-zelle { white-space: nowrap; }
.fortschritt-letzt { font-weight: 800; margin-inline-start: .45rem; font-size: 1.05rem; color: var(--akzent-tief); }
.fortschritt-punkte { display: block; color: var(--leise); font-size: .8rem; }
.fortschritt-matrix .leer-zelle { color: var(--leise); }
.fortschritt-matrix td.fortschritt-anzahl { text-align: end; font-variant-numeric: tabular-nums; }
.sprungmarken { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 1rem; }
.profil-abschnitt { margin: 0 0 2rem; }
.profil-abschnitt > h2 { margin: 1.5rem 0 .7rem; }
.bewertungen-liste td { vertical-align: top; }
.bewertungen-liste td:last-child { max-width: 34rem; }

/* Vorher-Nachher: zwei Spalten nebeneinander, auf schmalen Bildschirmen untereinander */
.vergleich-karte { margin: 0 0 1rem; }
.vergleich-paar { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: .6rem; }
@media (min-width: 40rem) { .vergleich-paar:not(.vergleich-einzeln) { grid-template-columns: 1fr 1fr; } }
.vergleich-spalte { border: 1px solid var(--linie); border-radius: .6rem; padding: .75rem .85rem; background: #fff; }
.vergleich-nachher { border-color: #203755; box-shadow: inset 0 3px 0 #f2b632; }
.vergleich-marke { margin: 0; font-weight: 800; color: var(--akzent-tief); }
.vergleich-datum { margin: .1rem 0 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vergleich-aufgabe { margin: .15rem 0 .4rem; }
.vergleich-check { display: block; color: var(--leise); font-size: .85rem; }
.vergleich-stufen { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; }
.stufe-marke { display: inline-block; padding: .1rem .55rem; border-radius: 1rem; background: var(--akzent-hell); font-size: .9rem; }
.stufe-marke strong { color: var(--akzent-tief); }
.vergleich-ohne-stufe { color: var(--leise); font-size: .9rem; }
.vergleich-spalte audio { width: 100%; display: block; }
.vergleich-text { margin: 0; padding: .6rem .8rem; background: var(--hinter); border-radius: .5rem; white-space: normal; }
.vergleich-warten { color: var(--leise); margin: .4rem 0 0; }
.vergleich-wahl { margin-top: .7rem; }
.vergleich-wahl label { display: block; font-weight: 600; margin-bottom: .25rem; }
.vergleich-wahl-zeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; }
.vergleich-wahl select { flex: 1 1 14rem; width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }

/* Zugangsblatt: kurze Anleitung mit Hilfesprache */
.karte-anleitung { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--linie); font-size: .85rem; }
.karte-anleitung h3 { margin: 0 0 .25rem; font-size: .9rem; }
.karte-anleitung ol { margin: 0; padding-inline-start: 1.2rem; }
.karte-anleitung li { margin: 0 0 .25rem; }
.karte-anleitung .hilfe { display: block; color: var(--leise); font-size: .95em; }
.karte-anleitung .hilfe[dir="rtl"] { text-align: right; font-size: 1em; }

@media print {
    .verlauf-tabelle summary { color: #000; }
    .verlauf-svg .band { fill: #f4f4f4; }
    .vergleich-wahl, .sprungmarken { display: none; }
    .verlauf-karte, .vergleich-karte { break-inside: avoid; }
}

/* Auswertung je Kurs: Kennzahlen, Ampel (Farbe immer mit Text), Tabellen mit Zahlen rechtsbündig */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin: 0 0 .6rem; max-width: 60rem; }
.kennzahlen div { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .55rem .8rem; }
.kennzahlen dt { color: var(--leise); font-size: .85rem; }
.kennzahlen dd { margin: .1rem 0 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
table.auswertung { max-width: 60rem; }
table.auswertung td { font-variant-numeric: tabular-nums; }
table.auswertung th[scope="row"] { color: var(--text); background: var(--flaeche); font-size: .95rem; }
table.auswertung tr.laeuft td, table.auswertung tr.laeuft th { background: repeating-linear-gradient(135deg, transparent 0 6px, #f1f4f6 6px 8px); }
table.auswertung tfoot th, table.auswertung tfoot td { background: #f8fafb; font-weight: 600; }
.ampel { display: inline-flex; align-items: center; gap: .35rem; padding: .05rem .55rem .05rem .4rem; border-radius: 1rem; font-size: .85rem; white-space: nowrap; }
.ampel-punkt { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.ampel-gruen { background: var(--erledigt-hell); color: var(--erledigt); }
.ampel-gruen .ampel-punkt { background: var(--erledigt); }
.ampel-gelb { background: var(--signal-hell); color: #6b4a00; }
.ampel-gelb .ampel-punkt { background: var(--signal); }
.ampel-rot { background: var(--fehler-hell); color: var(--fehler); }
.ampel-rot .ampel-punkt { background: var(--fehler); }
.kurs-links { margin: .3rem 0 0; font-size: .9rem; }
.export { margin-top: 2rem; padding: .2rem 1.1rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); max-width: 60rem; }
.export h2 { margin-top: 1rem; }
@media print { .export { display: none; } }
.karte-datenschutz { margin: .35rem 0 0; font-size: .8rem; color: var(--leise); }
.karte-datenschutz .hilfe { display: block; }
/* Löschen/Anonymisieren und Datenschutzseiten */
.loeschen-dialog fieldset { margin-bottom: 1rem; }
.loeschen-dialog .unterpunkt { margin-left: 1.6rem; }
.entwurf-vermerk { font-size: 1.05rem; }
.ds-abschnitt h2 { font-size: 1.1rem; margin: 1.4rem 0 .3rem; }
.ds-abschnitt p { margin: 0 0 .5rem; max-width: 46rem; }
/* Konto: Name im Kopf führt zu „Mein Konto“; Rücksetz-Link zum Kopieren */
.konto > a { color: var(--text); text-decoration: none; padding: .2rem .3rem; border-radius: var(--radius); }
.konto > a:hover, .konto > a[aria-current] { text-decoration: underline; }
.link-anzeige code { display: block; padding: .7rem .9rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); word-break: break-all; user-select: all; }
.konto-daten { display: flex; flex-wrap: wrap; }
.konto-daten div { flex: 0 1 auto; min-width: 11rem; }
.konto-daten dd { font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
/* CSV-Import: mögliche Dubletten mit Wahl je Zeile */
tr.import-dublette td { background: var(--warn-hell); }
.dublette-wahl { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .35rem; }
.dublette-wahl label { white-space: nowrap; font-weight: 600; }

/* Zertifikatsprüfung (Phase 3a): Prüfungsablauf im Cockpit, Übersicht, Abgleich, Gesprächsimpulse.
   Abweichungen im Abgleich immer mit Text, Farbe nur zusätzlich. */
.pruefung-cockpit { margin-top: 2.5rem; border-top: 3px solid var(--akzent-hell); padding-top: .5rem; }
.status-pruefung { background: var(--akzent); color: #fff; font-weight: 600; }
.pruefung-info { background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--akzent); border-radius: var(--radius); padding: .4rem 1.1rem .8rem; margin: 1rem 0; }
.pruefung-info h2 { margin-top: .6rem; }
.pruefung-info ul { margin: .4rem 0; padding-left: 1.2rem; }
.pruefung-schaetzung { margin: .2rem 0 .8rem; padding: .45rem .8rem; border-radius: var(--radius); background: var(--akzent-hell); font-size: .92rem; max-width: 46rem; }
.pruefung-schaetzung.warnung { background: var(--warn-hell); }
.pruefung-liste table, .abgleich-tabelle { width: 100%; }
.pruefung-rolle { background: var(--akzent-hell); border-radius: var(--radius); padding: .5rem 1rem; margin: .8rem 0; }
.pruefung-rolle p { margin: .3rem 0; }
.tafel-team { padding: .8rem 1rem; border-radius: var(--radius); background: var(--flaeche); border: 1px dashed var(--linie-kraeftig); }
.tafel-team.verborgen::before { content: "🔒 "; }
.bewertende-liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.abgleich-tabelle th, .abgleich-tabelle td { vertical-align: top; }
.abgleich-tabelle .stufe-zelle { font-weight: 700; font-size: 1.1rem; text-align: center; white-space: nowrap; }
.abweichung { display: inline-block; padding: .1rem .55rem; border-radius: 1rem; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.abw-gleich { background: var(--erledigt-hell); color: var(--erledigt); }
.abw-eins { background: var(--signal-hell); color: #7a5500; border: 1px solid #e9cf8d; }
.abw-mehr { background: var(--fehler-hell); color: var(--fehler); border: 1px solid #e5b3b5; }
.abgleich-tabelle tr.abgleich-festgelegt { background: var(--ok-hell); }
.abgleich-form { margin: .3rem 0; }
.abgleich-form textarea { min-height: 3.2rem; }
.abgleich-form .nur-lesen { margin: 0 0 .4rem; }
.ergebnis-stufe { font-size: 1.15rem; margin-right: .3rem; }
.ergebnis-box { margin: 1rem 0; padding: .6rem 1.1rem; border-radius: var(--radius); background: var(--erledigt-hell); border-left: 5px solid var(--erledigt); }
.ergebnis-box.ergebnis-gesperrt { background: var(--signal-hell); border-left-color: var(--signal); }
.ergebnis-liste { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .25rem; }
.ergebnis-liste li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.ergebnis-liste li > span:first-child { min-width: 7rem; }
.abgleich-aufgabe h3 { margin: .2rem 0 .5rem; }
.stufen-je-aufgabe { margin: .5rem 0; padding-left: 1.2rem; }
.bewertung-raster.gesperrt .segment { opacity: .75; }
.impuls-aufgabe h3 { margin: .2rem 0 .6rem; }
.impuls-liste { padding-left: 0; list-style: none; display: grid; gap: .45rem; }
.impuls-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.impuls-nr { font-weight: 700; min-width: 5rem; }
.impuls-rekorder { border: 1px dashed var(--linie-kraeftig); border-radius: var(--radius); padding: .4rem 1rem; margin: .6rem 0; background: var(--hinter); }
.hoertext-rekorder { border: 1px dashed var(--linie-kraeftig); border-radius: var(--radius); padding: .4rem 1rem; margin: .6rem 0; background: var(--hinter); }
.sprechskript { font-size: 1.2rem; line-height: 1.7; max-width: 46rem; }
.sprechskript p { margin: 0 0 1.2rem; }
.sprechskript .satz { display: block; margin-bottom: .45rem; }
.sprechhinweise { border-left: 4px solid var(--linie-kraeftig); padding: .2rem 0 .2rem .8rem; margin: 0 0 1rem; }
.sprechhinweise h3 { margin: 0 0 .3rem; font-size: .95rem; }
.sprechhinweise p { margin: 0; }
.hoertext-block + .hoertext-block { margin-top: 1rem; }
.hoertext-hochladen { margin: .5rem 0; }
.hoertext-hochladen summary { cursor: pointer; color: var(--akzent); }
.impuls-hochladen { margin: .5rem 0; }
.impuls-hochladen summary { cursor: pointer; color: var(--akzent); }
.gespraech-liste { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .6rem; }
.gespraech-liste li { border-left: 3px solid var(--linie); padding-left: .8rem; }
.gespraech-impuls, .gespraech-antwort { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin: .2rem 0; }
.gespraech-wer { font-weight: 700; min-width: 6.5rem; font-size: .92rem; }
.gespraech-antwort .gespraech-wer { color: var(--erledigt); }
.gespraech audio { max-width: 100%; height: 2.2rem; }

/* ------------------------------------------------------------------ Zertifikat (Phase 3b): Vorschau und Angaben (Team) */
.zert-vorschau { background: var(--flaeche); border: 1px solid var(--linie); border-top: 5px solid var(--akzent); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.zert-vorschau-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .8rem; color: var(--leise); }
.zert-vorschau-kopf .logo { height: 2rem; width: auto; }
.zert-vorschau-titel { font-size: 1.45rem; font-weight: 800; color: var(--akzent); margin: 1rem 0 .1rem; }
.zert-vorschau-unter { color: var(--leise); margin: 0 0 .8rem; font-size: .95rem; }
.zert-vorschau-name { font-size: 1.3rem; font-weight: 700; margin: .4rem 0 .1rem; }
table.zert-niveaus { margin: .6rem 0 .9rem; }
table.zert-niveaus td strong { color: var(--akzent); }
.zert-angaben { display: grid; gap: .4rem; }
.zert-angaben div { display: grid; grid-template-columns: 11rem 1fr; gap: .8rem; }
.zert-angaben dt { color: var(--leise); }
.zert-angaben dd { margin: 0; }

/* ------------------------------------------------------------------ Öffentliche Seiten: Prüfseite, Freigabelink (ohne Anmeldung) */
.bereich-oeffentlich main { max-width: 46rem; padding: 1.25rem 1rem 2.5rem; }
.oe-kopf { background: var(--flaeche); border-bottom: 4px solid var(--akzent); }
.oe-kopf-innen { max-width: 46rem; margin: 0 auto; padding: .9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.oe-kopf .logo { height: 2.4rem; width: auto; display: block; }
.oe-marke { color: var(--akzent); font-weight: 700; }
.bereich-oeffentlich h1 { color: var(--text); font-size: 1.6rem; line-height: 1.2; margin: .5rem 0 1rem; }
.bereich-oeffentlich h2 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; }
.oe-status { border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-left: 6px solid var(--linie-kraeftig); }
.oe-status p { margin: .3rem 0 0; }
.oe-status-titel { font-size: 1.25rem; font-weight: 800; margin: 0 !important; }
.oe-gueltig { border-left-color: var(--erledigt); background: var(--erledigt-hell); }
.oe-gueltig .oe-status-titel { color: var(--erledigt); }
.oe-haken { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--erledigt); color: #fff; font-size: 1rem; vertical-align: .1em; }
.oe-abgelaufen, .oe-ersetzt { border-left-color: var(--signal); background: var(--signal-hell); }
.oe-widerrufen { border-left-color: var(--fehler); background: var(--fehler-hell); }
.oe-widerrufen .oe-status-titel { color: var(--fehler); }
.oe-unbekannt, .oe-anonymisiert { border-left-color: var(--linie-kraeftig); }
.oe-angaben { display: grid; gap: .5rem; margin: 0 0 1rem; }
.oe-angaben div { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: .8rem; }
.oe-angaben dt { color: var(--leise); }
.oe-angaben dd { margin: 0; }
.oe-name { font-size: 1.25rem; font-weight: 700; }
table.oe-niveaus { display: table; width: 100%; }
table.oe-niveaus caption { text-align: left; font-weight: 600; padding: 0 0 .4rem; }
table.oe-niveaus td strong { color: var(--akzent); font-size: 1.15rem; }
.oe-ohne { background: var(--flaeche); border: 1px dashed var(--linie-kraeftig); border-radius: var(--radius); padding: .8rem 1rem; }
.oe-id { color: var(--leise); }
.oe-muster { margin: 0 0 1rem; }
.oe-abgrenzung { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .2rem 1.1rem .8rem; margin-top: 2rem; font-size: .95rem; }
.oe-probe { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1rem; }
.oe-probe h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.oe-aufgabe { background: var(--akzent-hell); border-radius: var(--radius); padding: .6rem .8rem; margin: .6rem 0; }
.oe-aufgabe p { margin: .2rem 0 .4rem; }
.oe-aufgabe-titel, .oe-sprecher { font-weight: 600; font-size: .92rem; color: var(--akzent-tief); }
.oe-sprecher { margin: .5rem 0 .2rem; }
.oe-impuls-text { margin: 0 0 .4rem; padding: .3rem .7rem; border-inline-start: 3px solid var(--linie-kraeftig); font-style: italic; }
.impuls-wortlaut { font-style: italic; }
.oe-probe audio { width: 100%; }
.oe-gespraech { padding-left: 1.2rem; margin: .4rem 0 0; }
.oe-gespraech li { margin: 0 0 .7rem; }
.oe-einleitung { font-size: 1.05rem; }
.oe-fuss { max-width: 46rem; margin: 0 auto; padding: 1rem; border-top: 1px solid var(--linie); }
.oe-fuss p { margin: .2rem 0; }
@media (max-width: 30rem) {
    .oe-angaben div { grid-template-columns: 1fr; gap: 0; }
    .oe-kopf .logo { height: 2rem; }
}
@media print {
    .oe-kopf { border-bottom-width: 2px; }
}

/* Sprunglink „Zum Inhalt“ (Tastatur, Bildschirmleser): erst bei Fokus sichtbar */
.sprunglink { position: absolute; left: .5rem; top: -5rem; z-index: 100; background: var(--flaeche); color: var(--akzent); padding: .6rem 1rem;
    border-radius: var(--radius); font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.sprunglink:focus { top: .5rem; outline: 3px solid var(--fokus); outline-offset: 2px; }
main:focus { outline: none; }
.tastatur-schalter { display: inline-flex; gap: .4rem; align-items: center; font-size: .9rem; color: var(--leise); }

/* ------------------------------------------------------------------ Handbuch (/hilfe)
   Links das Inhaltsverzeichnis (bleibt beim Scrollen stehen), rechts der Text in angenehmer Zeilenlänge.
   Hinweiskästen in den Farben der Oberfläche; Druckansicht mit Seitenumbruch je Kapitel. */
.konto .hilfe-link { font-weight: 600; text-decoration: none; padding: .2rem .55rem; border: 1px solid var(--linie); border-radius: var(--radius); }
.konto .hilfe-link:hover, .konto .hilfe-link[aria-current] { background: var(--akzent-hell); }
.erklaerung-mehr { grid-column: 1 / -1; margin: .7rem 0 0; font-size: .95rem; }
.erklaerung-mehr a { font-weight: 600; }
.erklaerung-mehr a::after { content: " →"; }
.hilfe { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.hilfe-navi { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: var(--radius); padding: .9rem 1rem; font-size: .93rem; }
.hilfe-navi-titel { font-weight: 700; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; margin: 1rem 0 .4rem; }
.hilfe-kapitelliste, .hilfe-abschnitte { list-style: none; margin: 0; padding: 0; }
.hilfe-kapitelliste > li { margin: .1rem 0; }
.hilfe-kapitelliste a { display: block; padding: .3rem .45rem; border-radius: var(--radius); text-decoration: none; color: var(--text); line-height: 1.3; }
.hilfe-kapitelliste a:hover { background: var(--akzent-hell); }
.hilfe-kapitelliste a.aktiv { background: var(--akzent); color: #fff; font-weight: 600; }
.hilfe-kapitelliste .nr { display: inline-block; min-width: 1.3rem; color: inherit; opacity: .75; font-variant-numeric: tabular-nums; }
.hilfe-abschnitte { margin: .25rem 0 .5rem .9rem; border-left: 2px solid var(--linie); }
.hilfe-abschnitte a { padding: .2rem .55rem; color: var(--akzent-tief); font-size: .88rem; border-radius: 0 var(--radius) var(--radius) 0; }
.hilfe-navi-druck { margin: 1rem 0 0; padding-top: .7rem; border-top: 1px solid var(--linie); }
.hilfe-navi-klapp > summary { display: none; }
.hilfe-suche label { display: block; font-weight: 600; margin-bottom: .3rem; }
.hilfe-suche-zeile { display: flex; gap: .35rem; }
.hilfe-suche-zeile input { min-width: 0; flex: 1 1 auto; padding: .4rem .55rem; }
.hilfe-suche-zeile button { padding: .4rem .7rem; }
.hilfe-text { max-width: 48rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem 2rem 2rem; line-height: 1.6; }
.hilfe-text > h1:first-child, .hilfe-kopf h1 { margin-top: 0; }
.hilfe-kopf { border-bottom: 1px solid var(--linie); margin-bottom: 1.2rem; padding-bottom: .4rem; }
.kapitel-nr { margin: 0; color: var(--leise); font-weight: 600; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.bereich-team .hilfe-text h2 { font-size: 1.35rem; color: var(--akzent); margin: 2.4rem 0 .6rem; padding-top: .3rem; scroll-margin-top: 1rem; }
.bereich-team .hilfe-text h3 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; scroll-margin-top: 1rem; }
.hilfe-text h4 { font-size: 1rem; margin: 1.2rem 0 .3rem; scroll-margin-top: 1rem; }
.hilfe-text h2:target, .hilfe-text h3:target, .hilfe-text h4:target { background: var(--signal-hell); box-shadow: -.6rem 0 0 var(--signal-hell), .6rem 0 0 var(--signal-hell); }
.hilfe-text ol, .hilfe-text ul { padding-left: 1.5rem; }
.hilfe-text li { margin: .25rem 0; }
.hilfe-text ol > li::marker { font-weight: 700; color: var(--akzent); }
.hilfe-text kbd, .hilfe-druck kbd { font: .85em/1 ui-monospace, Menlo, Consolas, monospace; padding: .15rem .4rem; border: 1px solid var(--linie-kraeftig);
    border-bottom-width: 2px; border-radius: .25rem; background: var(--hinter); white-space: nowrap; }
.hilfe-text pre, .hilfe-druck pre { background: var(--hinter); border: 1px solid var(--linie); border-radius: var(--radius); padding: .7rem 1rem; overflow-x: auto; font-size: .9rem; }
.hilfe-text table, .hilfe-druck table { border-collapse: collapse; width: 100%; font-size: .95rem; line-height: 1.4; }
.hilfe-text th, .hilfe-text td, .hilfe-druck th, .hilfe-druck td { border: 1px solid var(--linie); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.hilfe-text th, .hilfe-druck th { background: var(--akzent-hell); color: var(--akzent-tief); }
.tabelle-rahmen { overflow-x: auto; margin: .8rem 0 1.2rem; }
.hilfe-text figure, .hilfe-druck figure { margin: 1.2rem 0 1.5rem; }
.hilfe-text figure img, .hilfe-druck figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linie); border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(32, 55, 85, .12); }
.hilfe-text figcaption, .hilfe-druck figcaption { font-size: .88rem; color: var(--leise); margin-top: .45rem; }
.kasten { border: 1px solid var(--linie); border-left: 5px solid var(--akzent); border-radius: var(--radius); background: var(--akzent-hell); padding: .7rem 1rem .2rem; margin: 1rem 0 1.3rem; }
.kasten p, .kasten li { margin: 0 0 .5rem; }
.kasten-titel { font-weight: 700; color: var(--akzent-tief); }
.kasten-gut { background: var(--erledigt-hell); border-left-color: var(--erledigt); }
.kasten-gut .kasten-titel { color: var(--erledigt); }
.kasten-achtung { background: var(--signal-hell); border-left-color: var(--signal); }
.kasten-achtung .kasten-titel { color: var(--text); }
.kasten-beispiel { background: var(--flaeche); border-left-color: var(--linie-kraeftig); }
.hilfe-blaettern { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.hilfe-blaettern .weiter { margin-left: auto; text-align: right; }
.hilfe-einleitung { max-width: 48rem; }
.hilfe-karten { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; }
.hilfe-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; }
.hilfe-karte-titel { font-weight: 700; font-size: 1.08rem; text-decoration: none; }
.hilfe-karte-titel .nr { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--akzent); color: #fff; font-size: .9rem; margin-right: .3rem; }
.hilfe-karte p { margin: .4rem 0 .5rem; color: var(--leise); font-size: .93rem; }
.hilfe-karte ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.hilfe-treffer { padding-left: 1.3rem; }
.hilfe-treffer li { margin: 0 0 1rem; }
.hilfe-treffer a { font-weight: 600; }
.hilfe-treffer p { margin: .2rem 0 0; font-size: .93rem; }
.hilfe-treffer mark, .hilfe-text mark { background: var(--signal-hell); border-bottom: 2px solid var(--signal); color: inherit; }
@media (max-width: 62rem) {
    .hilfe { grid-template-columns: minmax(0, 1fr); }
    .hilfe-navi { position: static; max-height: none; padding: .6rem 1rem; }
    .hilfe-navi-klapp > summary { display: list-item; cursor: pointer; font-weight: 700; color: var(--akzent); padding: .2rem 0; }
    .hilfe-navi-klapp[open] > summary { margin-bottom: .6rem; }
    .hilfe-text { padding: 1.1rem 1.1rem 1.5rem; }
}

/* Druckansicht des Handbuchs */
.bereich-hilfedruck { background: var(--hinter); }
.bereich-hilfedruck main { max-width: 50rem; background: var(--flaeche); padding: 1.5rem 2.2rem 3rem; line-height: 1.55; }
.druck-leiste { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; background: var(--akzent-hell); padding: .7rem 1rem; border-radius: var(--radius); }
.druck-titel { margin: 1.5rem 0 2rem; padding-bottom: 1rem; border-bottom: 3px solid var(--akzent); }
.druck-dachzeile { margin: 0; color: var(--leise); font-weight: 600; }
.druck-haupttitel { margin: .2rem 0 .3rem; font-size: 1.9rem; font-weight: 700; color: var(--akzent); line-height: 1.2; }
.druck-inhalt ol { padding-left: 1.4rem; }
.druck-inhalt > ol > li { font-weight: 600; margin-top: .4rem; }
.druck-inhalt > ol > li ol { font-weight: 400; font-size: .92rem; columns: 2 18rem; column-gap: 2rem; }
.druck-inhalt > ol > li, .druck-inhalt > ol > li ol li { break-inside: avoid; }
.druck-inhalt ol:empty { display: none; }
.druck-kapitel { margin-top: 2.5rem; }
.druck-kapitel h1 { margin-top: .1rem; }
.druck-kapitel h2 { color: var(--akzent); font-size: 1.3rem; margin: 2rem 0 .5rem; }
.druck-kapitel h3 { font-size: 1.08rem; margin: 1.4rem 0 .3rem; }
@media print {
    @page { margin: 18mm 16mm; }
    .bereich-hilfedruck, .bereich-hilfedruck main { background: #fff; }
    .druck-leiste { display: none !important; }
    .hilfe-druck .tabelle-rahmen { overflow: visible; }
    .hilfe-druck table { display: table; width: 100%; overflow: visible; }
    .hilfe-druck thead { display: table-header-group; }
    .bereich-hilfedruck main { max-width: none; padding: 0; font-size: 10.5pt; }
    .druck-titel { margin-top: 0; }
    .druck-inhalt { break-after: page; }
    .druck-kapitel { break-before: page; margin-top: 0; }
    .druck-titel + .druck-kapitel { break-before: avoid; }
    .druck-kapitel h2, .druck-kapitel h3, .druck-kapitel h4 { break-after: avoid; }
    .druck-kapitel figure, .kasten, .druck-kapitel tr { break-inside: avoid; }
    .druck-kapitel figure img { max-height: 120mm; width: auto; box-shadow: none; }
    .kasten { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .hilfe-druck a { color: inherit; text-decoration: none; }
}

/* Inhaltspakete (Grundlagen › Inhalte importieren). Das eine kräftige Element ist das „Gleis“ je Inhaltsart: ein Balken
   in vier Abschnitten (neu grün, geändert gelb, wird zugeordnet blau, unverändert grau) – Farbe immer mit Zahl und Text. */
.import-ablauf .schrittleiste { margin-bottom: 1.5rem; }
@media (min-width: 48.0625rem) { .import-ablauf .schrittleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.schritt-fehler .schritt-punkt { background: var(--fehler); border-color: var(--fehler); color: #fff; box-shadow: 0 0 0 5px var(--fehler-hell); }
.schritt-fehler .schritt-status { color: var(--fehler); font-weight: 600; }
.import-start { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
.import-start section { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 0 1.2rem 1rem; }
.import-start h2 { margin-top: 1rem; }
.import-hochladen { border-left: 4px solid var(--akzent) !important; }
.import-hochladen input[type=file] { display: block; width: 100%; max-width: 28rem; padding: 1.1rem .8rem; border: 2px dashed var(--linie-kraeftig); border-radius: var(--radius); background: var(--hinter); }
.import-protokoll { margin-top: 1rem; }
ul.protokoll-ergebnis { margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.paket-hinweis { max-width: 52rem; padding: .6rem .9rem; border-left: 4px solid var(--linie-kraeftig); background: var(--flaeche); color: var(--leise); }

.abgleich-uebersicht { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.gleis { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .2rem 1rem .9rem; }
.gleis h2 { margin: .7rem 0 .6rem; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.gleis h2 a { color: var(--text); text-decoration-color: var(--linie-kraeftig); text-underline-offset: .18em; }
.gleis-summe { font-size: .85rem; font-weight: 400; color: var(--leise); }
.gleis-balken { display: block; width: 100%; height: .85rem; border-radius: .45rem; background: var(--hinter); }
.gleis-balken .status-neu { fill: var(--erledigt); }
.gleis-balken .status-geaendert { fill: var(--signal); }
.gleis-balken .status-zugeordnet { fill: var(--akzent); }
.gleis-balken .status-unveraendert { fill: var(--linie); }
.gleis > div { border-radius: .45rem; overflow: hidden; }
.gleis-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: .7rem 0 0; }
.gleis-zahlen div { border-top: 3px solid var(--linie); padding-top: .25rem; display: flex; flex-direction: column; }
.gleis-zahlen dt { flex: 1 0 auto; }
.gleis-zahlen .status-neu { border-top-color: var(--erledigt); }
.gleis-zahlen .status-geaendert { border-top-color: var(--signal); }
.gleis-zahlen .status-zugeordnet { border-top-color: var(--akzent); }
.gleis-zahlen dt { font-size: .78rem; color: var(--leise); line-height: 1.2; }
.gleis-zahlen dd { margin: 0; font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.gleis-zahlen .null dd { color: var(--linie-kraeftig); font-weight: 500; }
.gleis-zahlen div.null { border-top-color: var(--linie); }

.abgleich-liste { margin-top: 2rem; }
ol.abgleich-eintraege { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.abgleich-eintraege > li { background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--linie-kraeftig); border-radius: var(--radius); padding: .55rem .9rem .6rem; }
.abgleich-eintraege > li.status-neu { border-left-color: var(--erledigt); }
.abgleich-eintraege > li.status-geaendert { border-left-color: var(--signal); }
.abgleich-eintraege > li.status-zugeordnet { border-left-color: var(--akzent); }
.eintrag-kopf { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; }
.eintrag-titel { font-weight: 600; }
.status-marke { font-size: .78rem; font-weight: 600; padding: .05rem .5rem; border-radius: 1rem; background: var(--hinter); color: var(--text); white-space: nowrap; }
.status-neu .status-marke { background: var(--erledigt-hell); color: var(--erledigt); }
.status-geaendert .status-marke { background: var(--signal-hell); }
.status-zugeordnet .status-marke { background: var(--akzent-hell); color: var(--akzent-tief); }
.abgleich-eintraege .status-marke.marke-geaendert { background: var(--signal-hell); color: var(--text); }
.schluessel { font-size: .82rem; color: var(--leise); }
table.aenderungen { margin: .45rem 0 .2rem; font-size: .9rem; border: 0; background: none; }
table.aenderungen th, table.aenderungen td { padding: .25rem .6rem .25rem 0; border-bottom: 1px dotted var(--linie); }
table.aenderungen thead th { background: none; font-size: .78rem; }
table.aenderungen th[scope="row"] { width: 11rem; color: var(--leise); font-weight: 600; background: none; font-size: .85rem; }
table.aenderungen td.alt { color: var(--leise); width: 40%; }
table.aenderungen td.neu { font-weight: 600; }
.abgleich-eintraege .warnung { margin: .45rem 0 0; padding: .4rem .7rem; }
details.unveraendert { margin-top: .7rem; }
details.unveraendert summary { cursor: pointer; color: var(--leise); }
details.unveraendert ul { columns: 2 22rem; column-gap: 2rem; font-size: .92rem; padding-left: 1.1rem; }
.import-bestaetigen { margin-top: 2.2rem; padding: .2rem 1.2rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--akzent); border-radius: var(--radius); }
.import-bestaetigen .aktionen form { display: inline; }

.import-fehler { background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--fehler); border-radius: var(--radius); padding: .2rem 1.2rem 1rem; }
.import-fehler h2 { color: var(--fehler); margin-top: .9rem; }
ol.fehlerliste { margin: 0; padding: 0; list-style: none; counter-reset: fehler; }
.fehlerliste li { counter-increment: fehler; display: grid; grid-template-columns: 2rem minmax(10rem, 18rem) minmax(0, 1fr); gap: .2rem .9rem; padding: .5rem 0; border-top: 1px solid var(--linie); }
.fehlerliste li::before { content: counter(fehler) "."; color: var(--leise); font-variant-numeric: tabular-nums; text-align: right; }
.fehlerliste .fundstelle { font-weight: 600; color: var(--fehler); }
.fehlerliste li:not(:has(.fundstelle)) .fehlertext { grid-column: 2 / -1; }
@media (max-width: 62rem) {
    .import-start { grid-template-columns: minmax(0, 1fr); }
    .fehlerliste li { grid-template-columns: 2rem minmax(0, 1fr); }
    .fehlerliste .fehlertext { grid-column: 2; }
}
@media (max-width: 48rem) {
    .gleis-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    table.aenderungen, table.aenderungen tbody, table.aenderungen tr, table.aenderungen th, table.aenderungen td { display: block; width: auto !important; }
    table.aenderungen thead { display: none; }
    table.aenderungen tr { padding: .3rem 0; border-bottom: 1px dotted var(--linie); }
    table.aenderungen th, table.aenderungen td { border: 0; padding: .1rem 0; }
    table.aenderungen td::before { content: attr(data-titel) ": "; color: var(--leise); font-weight: 400; }
}

/* Druckansicht eines Pakets (Lesefassung für Lehrkräfte) */
.druck-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.paket-druck h1 { margin-bottom: .2rem; }
.paket-druck h2 { color: var(--akzent); border-bottom: 2px solid var(--akzent); padding-bottom: .2rem; margin-top: 2.2rem; }
.druck-aufgabe { padding: .3rem 0 .8rem; border-bottom: 1px solid var(--linie); break-inside: avoid; }
.druck-aufgabe h3 { margin: .8rem 0 .2rem; font-size: 1.1rem; }
.druck-aufgabe .angaben { margin: 0 0 .5rem; color: var(--leise); font-size: .9rem; }
.druck-aufgabe .anweisung { margin: 0 0 .5rem; max-width: 46rem; }
.druck-aufgabe.inaktiv h3 { color: var(--leise); }
ol.druck-fragen { padding-left: 1.4rem; max-width: 46rem; }
.druck-fragen > li > p { margin: .4rem 0 .15rem; font-weight: 600; }
.druck-fragen ul { margin: 0; padding-left: 1.2rem; list-style: circle; }
.druck-fragen li.richtig { list-style: disc; }
.druck-fragen li.richtig strong { color: var(--erledigt); font-size: .85rem; margin-left: .3rem; }
table.raster-druck { font-size: .82rem; margin-bottom: 1rem; }
table.raster-druck th[scope="row"] { width: 13rem; color: var(--text); background: var(--flaeche); font-size: .85rem; }
table.raster-druck th[scope="row"] .schluessel { display: block; font-size: .72rem; font-weight: 400; }
table.raster-druck th[scope="row"] .kriterium-beschreibung { display: block; font-weight: 400; font-size: .78rem; color: var(--leise); margin-top: .2rem; }
table.raster-druck th[scope="col"] { text-align: center; }
.druck-aussagen dl.uebersetzungen { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .1rem .5rem; font-size: .85rem; }
.druck-aussagen dl.uebersetzungen dt { color: var(--leise); }
.druck-aussagen dl.uebersetzungen dd { margin: 0; }
.druck-aussagen dd[dir="rtl"] { text-align: right; }
@media print {
    .paket-druck { font-size: 10pt; }
    .paket-druck h2 { break-after: avoid; break-before: auto; }
    .druck-raster, .druck-aussagen { break-before: page; }
    .druck-raster h3 { break-after: avoid; }
    table.raster-druck { display: table; font-size: 7.5pt; }
    table.raster-druck th, table.raster-druck td { padding: .2rem .3rem; }
    table.raster-druck tr, .druck-aussagen tr { break-inside: avoid; }
    .druck-aussagen table { display: table; }
    .druck-aussagen thead, table.raster-druck thead { display: table-header-group; }
    .druck-fragen li.richtig strong { color: #000; }
    .druck-kopf .logo { height: 1.4rem; width: auto; }
}

/* Stufenbeschreibungen: Kriterien-Formular und Bewertung */
.stufen-felder .stufe-feld { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .6rem; align-items: start; margin: 0 0 .5rem; }
.stufen-felder .stufe-feld label { margin: .45rem 0 0; font-weight: 700; }
.stufen-felder textarea { min-height: 2.6rem; }
.stufe-hilfe { display: flex; gap: .3rem 1rem; align-items: flex-start; flex-wrap: wrap; margin-top: .3rem; }
.stufe-beschreibung { flex: 1 1 22rem; margin: 0; font-size: .88rem; line-height: 1.4; padding: .25rem .6rem; border-left: 3px solid var(--akzent); background: var(--akzent-hell); }
.stufe-beschreibung strong { margin-right: .3rem; }
details.alle-stufen { margin-left: auto; font-size: .85rem; }
details.alle-stufen > summary { cursor: pointer; color: var(--akzent); padding: .2rem 0; }
details.alle-stufen[open] { flex: 1 1 100%; }
table.stufen-tabelle { margin-top: .3rem; font-size: .85rem; }
table.stufen-tabelle th[scope="row"] { width: 5rem; color: var(--text); background: var(--flaeche); }
table.stufen-tabelle tr.gewaehlt th, table.stufen-tabelle tr.gewaehlt td { background: var(--akzent-hell); }
.raster-aenderungen ol.aenderungsliste { padding-left: 0; list-style: none; }
.aenderungsliste summary { cursor: pointer; padding: .3rem 0; }
.aenderungsliste .zeit { font-variant-numeric: tabular-nums; }
.aenderungsliste .fassungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: .4rem 0 .8rem; font-size: .9rem; }
.aenderungsliste .fassungen h3 { font-size: .9rem; margin: 0 0 .2rem; color: var(--leise); }
.aenderungsliste dl.stufen-liste { display: grid; grid-template-columns: 4.5rem 1fr; gap: .15rem .5rem; margin: 0; }
.aenderungsliste dl.stufen-liste dd { margin: 0; }
.aenderungsliste dl.stufen-liste .geaendert { font-weight: 600; background: var(--signal-hell); }
.schluessel-feld { font-family: ui-monospace, Menlo, Consolas, monospace; max-width: 16rem !important; }
.themen-liste .thema-zeile { align-items: center; gap: .4rem; margin: 0; }
.themen-liste .thema-zeile input[type="text"] { min-width: 14rem; }
.vorschlag-tabelle .begruendung { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--leise); }
.vorschlag-tabelle tr.gewaehlt { background: var(--signal-hell); }
.sprachstand-kurz { list-style: none; padding: 0; margin: .3rem 0 .6rem; display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.sprachstand-kurz .sprachstand-fertigkeit { color: var(--leise); }
table.sprachstand .stufe-zelle { font-weight: 600; }

.verlauf-svg .punkt-uebung { fill: #fff; stroke: #203755; stroke-width: 2.5; }
.verlauf-svg .punkt-uebung.punkt-letzt { fill: #fff; stroke: #f2b632; stroke-width: 3; }
.verlauf-legende { color: var(--leise); font-size: .9rem; margin: .2rem 0; }
.marke-uebung { font-size: .85em; color: var(--leise); }
/* Eingangstest: Bericht (druckbar) */
.et-kopf { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: 1rem 0; }
.et-kopf dt { font-weight: 600; }
.et-kopf dd { margin: 0; }
.et-teil { margin: 1.5rem 0; }
.et-stufe { font-size: 1.1rem; font-weight: 600; }
.et-leiter { max-width: 34rem; }
.et-umfang { max-width: 40rem; }
.et-umfang tr.et-fehlt td { background: var(--warn-hell); font-weight: 600; }
details.et-reserve { margin: .6rem 0; }
details.et-reserve summary { cursor: pointer; font-weight: 600; }
details.et-reserve fieldset { border: 0; padding: .3rem 0 0; margin: 0; }
.et-reserve-frage { display: block; margin: .35rem 0; }
.et-fragen ol { margin: .4rem 0; padding-left: 1.4rem; }
.et-fragen li { margin-bottom: .4rem; }
.et-fragen ol > li { margin-bottom: 1rem; }
.et-fragen ul.et-optionen { margin: .2rem 0; padding-left: 1.2rem; list-style: circle; }
.et-fragen ul.et-optionen li { margin-bottom: 0; }
.et-fragen .et-stimulus { margin: 0 0 .4rem; padding: .6rem .8rem; background: var(--hinter); border-radius: var(--radius); line-height: 1.5; }
.et-fragen .sprechskript { font-size: 1rem; line-height: 1.5; margin-bottom: .4rem; }
.et-fragen .sprechskript p { margin: 0 0 .5rem; }
.et-fragen .sprechskript .satz { margin-bottom: .1rem; }
@media print {
    .et-teil, .et-empfehlung, .et-einstufen { break-inside: avoid; }
}
/* Eingangstest: Bestandsampel der Fragenbank (Farbe plus Text, nicht nur Farbe) und auffällige Lösungsquote; .ampel-* gibt es global (Kurs-Ampel) */
.et-ampel td { text-align: center; white-space: nowrap; }
.et-ampel .ampel-text { font-size: .8rem; }
.et-ampel td.ampel-rot { background: var(--fehler-hell); }
.et-ampel td.ampel-gelb { background: var(--warn-hell); }
.et-ampel td.ampel-gruen { background: var(--ok-hell); }
.et-fragen td.auffaellig { background: var(--warn-hell); font-weight: 600; }
.et-frage-formular .option-zeile { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.et-frage-formular .option-zeile label.option-richtig { font-weight: normal; }

/* Personenseite des Teams (/team/personen/{id}) */
.person-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem 2rem; align-items: start; }
.person-kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 1rem; }
.person-kasten h3 { margin: 0 0 .5rem; font-size: 1.05rem; }

/* Phasen-Tafel (Team › Tafel) */
.tafel { display: grid; grid-template-columns: repeat(6, minmax(8.2rem, 1fr)); gap: .7rem; overflow-x: auto; padding-bottom: .5rem; }
.spalte { background: #e9edf0; border-radius: var(--radius); padding: .4rem; min-height: 14rem; min-width: 0; }
.spalte > h2 { font-size: .92rem; display: flex; justify-content: space-between; align-items: baseline; gap: .3rem; margin: .1rem .2rem .5rem; color: var(--akzent); }
.spalte > h2 .n { color: var(--leise); font-weight: 600; }
.spalte.braucht { background: var(--signal-hell); outline: 1px solid var(--signal); }
.person-karte { display: block; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: .5rem .5rem; margin-bottom: .5rem;
    text-decoration: none; color: var(--text); }
.person-karte:hover, .person-karte.gewaehlt { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-hell); }
.person-karte.handeln { border-left: 5px solid var(--signal); }
.person-karte b { display: block; overflow-wrap: break-word; hyphens: auto; font-size: .95rem; }
.person-karte span { display: block; font-size: .82rem; color: var(--leise); }
.person-karte .alt { color: var(--text); font-weight: 600; }
.leer-spalte { font-size: .85rem; padding: .4rem .5rem; margin: 0; color: var(--leise); }
.mit-panel { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem; align-items: start; }
.panel { background: #fff; border: 1px solid var(--akzent); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(21, 37, 58, .15); position: sticky; top: 1rem; }
.panel header { padding: .8rem 1rem; border-bottom: 1px solid var(--linie); }
.panel header h2 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.panel header p { margin: .1rem 0 0; color: var(--leise); }
.panel .innen { padding: .8rem 1rem; }
.panel .innen h3 { color: var(--leise); font-size: .82rem; margin: .9rem 0 .3rem; }
.panel .naechster { margin-top: .8rem; padding: .6rem .8rem; }
.panel .naechster .knopf { display: block; text-align: center; }
.panel-aktionen { display: grid; gap: .4rem; }
.panel-aktionen .knopf { text-align: center; }
.panel-liste { margin: 0 0 .4rem; padding-left: 1.1rem; font-size: .9rem; }
@media (max-width: 60rem) {
    .tafel { display: block; overflow: visible; }
    .spalte { min-height: 0; margin-bottom: .7rem; }
    .mit-panel { display: block; }
    .panel { position: static; margin-top: 1rem; }
}

/* Teilnehmenden-Liste (/team/liste) */
.liste-suche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .7rem; }
.liste-suche input[type="search"] { flex: 1 1 14rem; max-width: 24rem; }
.liste-summe { margin: 0 0 .5rem; color: var(--leise); font-size: .9rem; }
.tabelle-rahmen { overflow-x: auto; }
table.liste th, table.liste td { text-align: left; vertical-align: middle; }
table.liste tr.handeln th { border-left: 5px solid var(--signal); }
table.liste .alt { display: block; font-size: .82rem; font-weight: 600; }
.liste-seiten { display: flex; gap: .8rem; align-items: center; justify-content: center; margin: .8rem 0; }

/* KI-Hörtexte prüfen (Sammelfreigabe) */
.kihoertexte { list-style: none; padding: 0; margin: 1rem 0; }
.kihoertexte > li + li { margin-top: .8rem; }
.kihoertexte details { margin-top: .4rem; }

/* Liste: Tage seit der letzten Anmeldung */
.tage-zelle { text-align: center; }
.tage { font-weight: 700; }
.tage-gruen { color: var(--erledigt); }
.tage-orange { color: #b45309; }
.tage-rot { color: var(--fehler); }
.tage-grau { color: var(--leise); }

/* Zähler „Zu bewerten“ am Reiter Übersicht der Lehrkräfte (neutral, keine Warnfarbe) */
.bereiche .hinweis-zahl { margin-inline-start: .35rem; min-width: 1.25rem; padding: 0 .3rem; border-radius: 1rem; background: var(--akzent); color: #fff;
    font-size: .75rem; font-weight: 700; line-height: 1.25rem; text-align: center; vertical-align: .1em; }

/* Benachrichtigungen (Web-Push): Geräteliste und Knöpfe, gemeinsam für App und Team (src/push_seiten.php) */
.push-aktionen { display: grid; gap: .6rem; margin: 1rem 0; }
.push-aktionen button { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.push-geraete { list-style: none; margin: .4rem 0 1rem; padding: 0; }
.push-geraete li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .6rem 0; border-top: 1px solid var(--linie); }
.push-geraete li:first-child { border-top: 0; }
.push-geraet-name { font-weight: 600; display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.push-geraete button { margin-inline-start: auto; }
.push-zustand, .push-meldung { margin: .6rem 0; padding: .6rem .8rem; border-radius: var(--radius); background: var(--akzent-hell); }
.konto-push { margin: 0 0 1rem; }