/*
 * EZplus Live Kursportal
 *
 * Bewusst eine einzelne, abhängigkeitsfreie Stylesheet-Datei: kein CDN, kein
 * Build-Schritt, keine Webfonts (die Content-Security-Policy lässt externe
 * Quellen ohnehin nicht zu).
 */

/*
 * Farben aus der Wortmarke: Petrol (EZ / "Live"-Kachel) und Blau ("plus").
 *
 * Träger der Interaktion ist das dunklere Petrol - das hellere Blau der
 * Wortmarke erreicht auf Weiß nur 4,0:1 und damit nicht die 4,5:1, die
 * WCAG AA für normalen Text verlangt. Es wird deshalb nur flächig
 * (Rahmen, Badges) eingesetzt, nie als Textfarbe auf hellem Grund.
 */
:root {
    --petrol: #1f6180;
    --petrol-dunkel: #16495f;
    --petrol-kachel: #2d6781;
    --blau: #0982ad;
    --blau-dunkel: #076a8d;
    --text: #1f2933;
    --text-leise: #52606d;
    --linie: #d7e2e8;
    --flaeche: #ffffff;
    --hintergrund: #f3f7f9;
    --warn-bg: #fff8e6;
    --warn-linie: #f0b429;
    --fehler-bg: #fdecec;
    --fehler-linie: #cf1124;
    --ok-bg: #e8f6ef;
    --ok-linie: #22884c;
    --info-bg: #edf4f8;
    --radius: 8px;
}

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

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

body {
    margin: 0;
    background: var(--hintergrund);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--petrol);
    color: #fff;
    padding: 10px 16px;
    z-index: 10;
}
.skip-link:focus { left: 0; }

/* --- Kopfbereich: Logo, daneben "Kursportal" --- */

.site-header {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    /* Luft zwischen Wortmarke und Trennlinie - die Kopfzeile soll atmen,
       nicht auf der Linie sitzen. */
    padding-top: 30px;
    padding-bottom: 30px;
}

/* Logo und "Kursportal" stehen nebeneinander, getrennt durch eine
   senkrechte Linie - so bleibt die Kopfzeile flach und die Wortmarke
   bekommt mehr Höhe. */
.brand {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* Höhe vorgeben, Breite mitlaufen lassen: so passt jedes Logo-Seiten-
   verhältnis, ohne dass am CSS etwas nachgezogen werden muss. */
.brand__logo {
    display: block;
    height: 68px;
    width: auto;
    max-width: 100%;
}

/* Ersatz, falls gar keine Logodatei vorliegt. */
.brand__name {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--petrol);
}

.brand__app {
    margin: 0;
    padding-left: 16px;
    border-left: 2px solid var(--linie);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-leise);
    white-space: nowrap;
}

/* --- Navigation --- */

.site-nav {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.site-nav__link {
    display: inline-block;
    padding: 12px 14px;
    color: var(--text-leise);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}

.site-nav__link:hover { color: var(--petrol); }

.site-nav__link.is-active {
    color: var(--petrol);
    border-bottom-color: var(--petrol);
}

/* --- Roter Hinweisbalken (offene Rückfragen) --- */

.hinweisbalken {
    background: #b3121f;
    color: #fff;
}

.hinweisbalken__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.hinweisbalken p { margin: 0; font-weight: 600; }

.hinweisbalken__link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

/* --- Inhalt --- */

/* Luft nach der Navigationsleiste und vor der Fußzeile: Der Inhalt soll als
   eigener Block wirken, nicht an den Trennlinien kleben.

   Der Wert steht bewusst auf `main.container`: `main` allein wäre ein
   Elementselektor und würde von `.container` (Klasse) überstimmt - genau das
   war der Grund, warum die Begrüßung bisher unmittelbar unter der
   Navigation klebte. */
main { flex: 1 0 auto; }
main.container { padding: 44px 20px 56px; }

/* Anmeldeseiten: Karte senkrecht mittig im verbleibenden Raum. Nur dort -
   auf der Kursliste soll der Inhalt oben beginnen. */
.main--zentriert {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ohne feste Breite würde die Karte in der Flex-Spalte auf ihren Inhalt
   schrumpfen; max-width und die auto-Ränder halten sie waagerecht mittig. */
.main--zentriert > .panel { width: 100%; margin-top: 0; }

.greeting {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
}

h1 {
    font-size: 1.35rem;
    margin: 18px 0 16px;
}

h2 { font-size: 1.1rem; margin: 0 0 6px; }

.lead { color: var(--text-leise); margin-top: 0; }

a { color: var(--petrol); }

/* --- Panel (Anmeldeseiten) --- */

.panel {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 28px;
}

.panel--narrow { max-width: 460px; margin: 8px auto 0; }

.panel h1 { margin-top: 0; }


/* Nummerierte Kurzanleitung (Passwortvergabe in drei Schritten). */
.steps {
    margin: 0 0 14px;
    padding-left: 22px;
    font-size: 0.95rem;
    color: var(--text-leise);
}

.steps li { margin-bottom: 4px; }
.steps li:last-child { margin-bottom: 0; }

/* --- Formulare --- */

.form__field { margin-bottom: 18px; }

.form__field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.form__field input {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    color: inherit;
    background: #fff;
    border: 1px solid #9aa5b1;
    border-radius: 6px;
}

.form__field input:focus-visible,
.button:focus-visible,
a:focus-visible {
    outline: 3px solid #5aa9c9;
    outline-offset: 2px;
}

.form__help { margin: 6px 0 0; font-size: 0.87rem; color: var(--text-leise); }

.form__aside { margin: 16px 0 0; font-size: 0.92rem; text-align: center; }
.form__aside--muted { color: var(--text-leise); }

/* --- Buttons --- */

.button {
    display: inline-block;
    padding: 11px 18px;
    border: 1px solid var(--linie);
    border-radius: 6px;
    background: #fff;
    color: var(--petrol);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.button:hover { border-color: var(--petrol); }

.button--primary {
    background: var(--petrol);
    border-color: var(--petrol);
    color: #fff;
}

.button--primary:hover { background: var(--petrol-dunkel); border-color: var(--petrol-dunkel); }

.button--block { width: 100%; }

/* Kleiner Knopf innerhalb einer Zeile, etwa "Kurs übernehmen". */
.button--klein { padding: 6px 12px; font-size: 0.9rem; margin-right: 8px; }

.button--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--text-leise);
    padding: 8px 10px;
}
.button--quiet:hover { color: var(--petrol); border-color: var(--linie); }

.button--disabled {
    background: #f0f4f8;
    border-color: var(--linie);
    color: #9aa5b1;
    cursor: not-allowed;
}
.button--disabled:hover { border-color: var(--linie); }

/* --- Hinweise --- */

.notice {
    background: var(--info-bg);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--petrol);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 0 0 20px;
}

.notice p { margin: 0 0 8px; }
.notice p:last-child { margin-bottom: 0; }
.notice__title { font-weight: 700; }

/* Ein Hinweis, der zwischen Überschrift und Formular für sich stehen soll. */
.notice--luft { margin: 24px 0 32px; }

.notice--warning { background: var(--warn-bg); border-left-color: var(--warn-linie); }
.notice--error { background: var(--fehler-bg); border-left-color: var(--fehler-linie); }
.notice--success { background: var(--ok-bg); border-left-color: var(--ok-linie); }
.notice--info { background: var(--info-bg); border-left-color: var(--petrol); }

/* --- "Heutige Einwahlprotokolle aktualisieren" --- */

.aktualisierung { margin-bottom: 24px; }

.aktualisierung__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.aktualisierung__zeile h2 { margin-bottom: 4px; }

.aktualisierung__hinweis {
    margin: 0;
    color: var(--text-leise);
    font-size: 0.92rem;
    max-width: 52ch;
}

/* Der graue Knopf: Solange der Auftrag laeuft, ist er nicht zu druecken -
   sichtbar und tatsaechlich (das Attribut disabled steht im Formular). */
.button[disabled] {
    background: var(--linie);
    border-color: var(--linie);
    color: var(--text-leise);
    cursor: default;
}

.button[disabled]:hover { background: var(--linie); border-color: var(--linie); }

.aktualisierung__stand { margin: 16px 0 0; }

/* --- Kursliste --- */

.course-list { list-style: none; margin: 0; padding: 0; }

.course {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 14px;
}

.course--running { border-left: 4px solid var(--ok-linie); }
.course--upcoming { border-left: 4px solid var(--blau); }
.course--ended { border-left: 4px solid var(--linie); }

.course__main { flex: 1 1 320px; min-width: 0; }
.course__title { overflow-wrap: anywhere; }

.course__dates, .course__times, .course__status { margin: 4px 0 0; color: var(--text-leise); font-size: 0.93rem; }
.course__label { font-weight: 600; }

.course__action { flex: 0 0 auto; text-align: right; }
.course__hint { margin: 6px 0 0; font-size: 0.83rem; color: var(--text-leise); max-width: 260px; }
.course__hint--praesenz { font-size: 0.9rem; font-weight: 600; }

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: #f0f4f8;
    color: var(--text-leise);
}

.badge--live { background: var(--ok-bg); color: #0f6b39; }
.badge--soon { background: var(--info-bg); color: var(--blau-dunkel); }
.badge--past { background: #f0f4f8; color: var(--text-leise); }

/* --- Hilfe zum Videokonferenzsystem --- */

.hilfe {
    margin-top: 32px;
    padding: 20px 22px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}

.hilfe__titel {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.hilfe__liste { margin: 0; padding-left: 20px; }
.hilfe__liste li { margin-bottom: 6px; }
.hilfe__hinweis { margin: 10px 0 0; font-size: 0.85rem; color: var(--text-leise); }

/* --- Bearbeitungsstände --- */

.badge--abgesendet { background: var(--info-bg); color: var(--blau-dunkel); }
.badge--rueckfrage { background: var(--fehler-bg); color: #8a0f19; }
.badge--bearbeitet { background: var(--ok-bg); color: #0f6b39; }

/* --- Akte des Teilnehmers --- */

.akte { list-style: none; margin: 0 0 24px; padding: 0; }

.akte__eintrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--linie);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
}

.akte__eintrag--rueckfrage { border-left-color: var(--fehler-linie); }
.akte__eintrag--abgesendet { border-left-color: var(--blau); }
.akte__eintrag--bearbeitet { border-left-color: var(--ok-linie); }

.akte__haupt { flex: 1 1 320px; min-width: 0; }
.akte__zeitraum { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.akte__zeile { margin: 2px 0 0; font-size: 0.92rem; color: var(--text-leise); }
.akte__label { font-weight: 600; margin-right: 4px; }
.akte__label:not(:first-child) { margin-left: 12px; }
.akte__stand { flex: 0 0 auto; text-align: right; }
.akte__hinweis { margin: 6px 0 0; font-size: 0.9rem; font-weight: 600; }

/* --- Nachrichtenverlauf --- */

.verlauf { list-style: none; margin: 0 0 28px; padding: 0; }

.verlauf__eintrag {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
}

/* Nachrichten von EZplus abgesetzt, damit die Richtung auf einen Blick
   erkennbar ist - ohne Farbe allein als Träger der Aussage. */
.verlauf__eintrag--ezplus { background: var(--info-bg); border-left: 4px solid var(--petrol); }
.verlauf__eintrag--teilnehmer { border-left: 4px solid var(--linie); }

.verlauf__kopf { margin: 0 0 6px; font-size: 0.92rem; }
.verlauf__zeit { color: var(--text-leise); margin-left: 8px; font-weight: 400; }
.verlauf__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.verlauf__text--leer { color: var(--text-leise); font-style: italic; }
.verlauf__dateien { margin: 8px 0 0; font-size: 0.9rem; }

/* --- Tabellen (Verwaltung) --- */

.tabelle-huelle { overflow-x: auto; margin: 0 0 28px; }

.tabelle {
    width: 100%;
    border-collapse: collapse;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    font-size: 0.94rem;
}

.tabelle th, .tabelle td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

.tabelle th { background: var(--grund, #f3f7f9); font-size: 0.88rem; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle__leise { display: block; font-size: 0.85rem; color: var(--text-leise); }
.tabelle__zeile--offen td { background: #fffaf5; }

/*
 * Ein Handgriff, der in der Zeile steht.
 *
 * Er muss ein Knopf sein - ausgeblendet wird per POST, mit Formularschlüssel -,
 * aber er soll auf derselben Zeile sitzen wie der Link daneben. Ein Knopf mit
 * Rahmen und Polsterung säße mehrere Pixel tiefer als der Rest der Zeile.
 */
.tabelle__form { display: inline; margin: 0; }
.tabelle__aktion {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--petrol);
    text-decoration: underline;
    cursor: pointer;
}
.tabelle__aktion:hover { color: var(--petrol-dunkel); }

/* Der Spaltenkopf ist ein Link - sortiert wird über die Adresszeile. */
.tabelle th a { color: inherit; text-decoration: none; }
.tabelle th a:hover { text-decoration: underline; }
.tabelle th[aria-sort] a { color: var(--petrol); }

/* --- Filter (Verwaltung) --- */

.filter { margin-bottom: 24px; }
.filter__reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 16px;
    margin-bottom: 12px;
}
.filter__check { display: flex; align-items: flex-end; padding-bottom: 8px; }

/* Zwei Felder, die zusammengehören - "Zeitraum ab" und "Zeitraum bis". Sie
   stehen nebeneinander und nehmen nicht die ganze Breite ein; ein Datumsfeld
   über die halbe Seite sieht aus wie ein Textfeld. */
.filter__reihe--paar {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: 620px;
}

/* Schalter, die das PDF verändern: untereinander statt im Spaltenraster -
   ihre Beschriftungen sind unterschiedlich lang und sollen lesbar bleiben. */
.filter__reihe--schalter { display: block; }
.filter__reihe--schalter .form__check { margin-bottom: 6px; }

.page-head__meta { margin: 0; color: var(--text-leise); font-weight: 600; }

/* --- Stammdaten (Einstellungen) --- */

.data-list {
    margin: 0 0 24px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
}

.data-list__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--linie);
}

.data-list__row:last-child { border-bottom: 0; }

.data-list dt {
    flex: 0 0 190px;
    font-weight: 600;
    color: var(--text-leise);
}

.data-list dd { margin: 0; flex: 1 1 220px; overflow-wrap: anywhere; }

/* --- Fußzeile --- */

.site-footer {
    flex-shrink: 0;
    background: var(--flaeche);
    border-top: 1px solid var(--linie);
    padding: 30px 0;
    font-size: 0.87rem;
    color: var(--text-leise);
}

.site-footer p { margin: 0; }
.site-footer__trenner { margin: 0 6px; color: var(--linie); }

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

@media (max-width: 560px) {
    main.container { padding-top: 28px; padding-bottom: 36px; }
    .site-header__inner { padding-top: 20px; padding-bottom: 20px; }
    .site-footer { padding: 22px 0; }
    .brand { gap: 12px; }
    .brand__logo { height: 48px; }
    .brand__app { padding-left: 12px; font-size: 1.05rem; }
    .course { flex-direction: column; align-items: stretch; }
    .course__action { text-align: left; }
    .course__hint { max-width: none; }
    .data-list dt { flex-basis: 100%; }
    .panel { padding: 22px 18px; }
}

/* --- Leiste des Verwaltungszugangs --- */

/* Deutlich abgesetzt: Wer hier arbeitet, soll jederzeit sehen, dass er nicht
   die eigene Ansicht vor sich hat. */
.adminbar {
    background: #24303a;
    color: #f0f4f8;
    padding: 12px 0;
}

.adminbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.adminbar__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1 1 420px;
}

.adminbar__label { font-weight: 600; white-space: nowrap; }

.adminbar__input {
    flex: 1 1 260px;
    min-width: 0;
    padding: 9px 12px;
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid #9aa5b1;
    border-radius: 6px;
}

.adminbar__status { margin: 10px 0 0; font-size: 0.92rem; }
.adminbar__fehler { margin: 10px 0 0; font-size: 0.92rem; color: #ffd0d0; font-weight: 600; }

/* --- Tabellen (Fehlzeitenkatalog) --- */

.section-title {
    font-size: 1.15rem;
    margin: 26px 0 10px;
}

/* Breite Tabellen scrollen in sich selbst, statt die Seite waagerecht
   zu sprengen - auf dem Telefon der Unterschied zwischen lesbar und nicht. */
.table-scroll {
    overflow-x: auto;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.table th, .table td {
    text-align: left;
    vertical-align: top;
    padding: 11px 14px;
    border-bottom: 1px solid var(--linie);
}

.table thead th {
    background: var(--info-bg);
    font-weight: 700;
    white-space: nowrap;
}

.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }

.table tbody th { font-weight: 600; }

.table-note { margin: 8px 0 20px; font-size: 0.87rem; color: var(--text-leise); }

/* Amtlicher Kleingedruckter Text unter der Tabelle - vollständig, aber
   optisch nachgeordnet. */
.fine-print {
    font-size: 0.87rem;
    color: var(--text-leise);
    margin: 0 0 10px;
}

.download { margin: 20px 0; font-weight: 600; }

/* --- Untermenü --------------------------------------------------------- */
/*
   Aufklappen ohne JavaScript: :hover und :focus-within genügen, und die
   Content-Security-Policy des Portals lässt ohnehin kein Skript zu. Wer sich
   im Bereich befindet, sieht das Untermenü dauerhaft (.is-open) - sonst wäre
   der zweite Punkt nur per Zufallstreffer mit der Maus erreichbar.
*/

.site-nav__item { position: relative; }

.site-nav__item.has-sub .subnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    min-width: 220px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 20px rgba(20, 40, 55, 0.12);
}

.site-nav__item.has-sub:hover .subnav,
.site-nav__item.has-sub:focus-within .subnav { display: block; }

.subnav__link {
    display: block;
    padding: 9px 16px;
    color: var(--text-leise);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.subnav__link:hover { color: var(--petrol); background: var(--grund); }
.subnav__link.is-active { color: var(--petrol); }

/* Eine zweite, dauerhaft sichtbare Menüzeile gibt es bewusst nicht: Das
   Aufklappmenü beim Überfahren genügt, und im aktiven Bereich ist der Punkt
   ohnehin schon markiert. */
.subnav__link.is-active { font-weight: 700; }

/* --- Seitenkopf mit Handlungsknopf ------------------------------------- */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-head h1 { margin-bottom: 0; }
.page-head__action { flex: none; }

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

/* Das Formular hebt sich deutlich vom Hintergrund ab: eigene Fläche,
   Rahmen und ein weicher Schatten. Es ist der eigentliche Zweck der Seite,
   also soll es auch danach aussehen. */
.form--melden {
    max-width: 720px;
    box-shadow: 0 10px 30px rgba(20, 40, 55, 0.10);
    border-color: #d6dee5;
}

.form__row { margin: 0 0 18px; }

.form__row--paar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* Anschrift: Straße breit, Hausnummer bzw. PLZ schmal - auf dem Handy untereinander */
.form__row--strasse { grid-template-columns: minmax(0, 3fr) minmax(90px, 1fr); }
.form__row--ort { grid-template-columns: minmax(110px, 1fr) minmax(0, 3fr); }
@media (max-width: 480px) {
    .form__row--strasse, .form__row--ort { grid-template-columns: 1fr; }
}

.form__label {
    display: block;
    font-weight: 600;
    margin: 0 0 6px;
}

.form__input {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 6px;
    box-sizing: border-box;
}

.form__input:focus {
    outline: 2px solid var(--petrol);
    outline-offset: 1px;
}

.form__input[readonly],
.form__input:disabled {
    background: var(--grund);
    color: var(--text-leise);
    cursor: not-allowed;
}

.form__input.has-error {
    border-color: var(--fehler-linie, #cf1124);
    border-width: 2px;
    background: var(--fehler-bg);
}

textarea.form__input { resize: vertical; min-height: 120px; }

.form__hint {
    margin: 6px 0 0;
    font-size: 0.9rem;
    color: var(--text-leise);
}

.form__hint--weit { margin-top: -8px; margin-bottom: 18px; }

.form__check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
}

.form__check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--petrol);
    flex: none;
}

/* Fehler sollen auffallen, nicht nur dastehen: roter Grund, roter Rand,
   und daneben das Feld selbst mit rotem Rahmen. Wer ein Formular abschickt
   und es unverändert zurückbekommt, sucht sonst zu lange nach dem Grund. */
.form__error {
    margin: 8px 0 0;
    padding: 10px 12px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #8a0f19;
    background: var(--fehler-bg);
    border: 1px solid var(--fehler-linie);
    border-left: 4px solid var(--fehler-linie);
    border-radius: 6px;
}

/* Aufzählung im Formular, etwa die Anlässe mit Nachweispflicht. */
.form__liste {
    margin: 6px 0 0;
    padding-left: 20px;
    font-size: 0.9rem;
    color: var(--text-leise);
}

.form__liste li { margin: 0 0 4px; }
.form__liste li:last-child { margin-bottom: 0; }

.form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

/* ---------------------------------------------------------------------------
 * Teilnehmerinformationen
 *
 * Der Kasten steht über der Kursliste und muss auffallen, ohne wie eine
 * Fehlermeldung zu wirken: heller Grund, kräftige Kante in Petrol.
 * ------------------------------------------------------------------------ */

.infoliste { display: flex; flex-direction: column; gap: 16px; }
.infoliste--start { margin: 0 0 32px; }

.infobox {
    background: var(--info-bg);
    border: 1px solid var(--linie);
    border-left: 5px solid var(--petrol);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.infobox__titel { margin: 0 0 4px; font-size: 1.1rem; }

.infobox__meta {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: var(--text-leise);
}

.infobox__text > *:first-child { margin-top: 0; }
.infobox__text > *:last-child { margin-bottom: 0; }
.infobox__text p { margin: 0 0 10px; }
.infobox__text ul, .infobox__text ol { margin: 0 0 10px; padding-left: 22px; }
.infobox__text h3, .infobox__text h4 { margin: 14px 0 6px; font-size: 1rem; }
.infobox__text blockquote {
    margin: 0 0 10px;
    padding-left: 12px;
    border-left: 3px solid var(--linie);
    color: var(--text-leise);
}

.infobox__aktion { margin: 14px 0 0; }

/* ---------------------------------------------------------------------------
 * Formular der Teilnehmerinformationen
 * ------------------------------------------------------------------------ */

.form__gruppe {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}

.form__gruppe legend { padding: 0 6px; }
.form__gruppe .form__check { margin: 6px 0; font-weight: 400; }
.form__gruppe .form__check strong { font-weight: 700; }

.form__block {
    margin: 0 0 18px;
    padding: 16px;
    background: var(--hintergrund);
    border-radius: var(--radius);
}

.form__block-titel {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-leise);
}

.form__kaesten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px 18px;
    margin-top: 6px;
}

.form__kaesten .form__check { font-weight: 400; }
.form__hint-inline { color: var(--text-leise); font-size: 0.85rem; }

/* Nur der zur gewählten Art passende Block bleibt stehen. Rein mit CSS - das
   Portal kommt ohne Skripte aus, und ein Browser ohne :has() zeigt eben
   beides, was niemanden am Speichern hindert. */
.form--info:has(#typ-wiederkehrend:checked) .nur-einmalig { display: none; }
.form--info:has(#typ-einmalig:checked) .nur-wiederkehrend { display: none; }

/* ---------------------------------------------------------------------------
 * Editor (einzige Seite des Portals mit JavaScript)
 * ------------------------------------------------------------------------ */

.editor { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }

.editor__leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--linie);
    background: var(--hintergrund);
    border-radius: var(--radius) var(--radius) 0 0;
}

.editor__knopf {
    font: inherit;
    font-size: 0.85rem;
    padding: 5px 10px;
    background: var(--flaeche);
    color: var(--text);
    border: 1px solid var(--linie);
    border-radius: 6px;
    cursor: pointer;
}

.editor__knopf:hover { border-color: var(--petrol); color: var(--petrol-dunkel); }
.editor__knopf:focus-visible { outline: 2px solid var(--petrol); outline-offset: 1px; }

.editor__flaeche {
    min-height: 220px;
    padding: 14px 16px;
    line-height: 1.55;
}

.editor__flaeche:focus { outline: 2px solid var(--petrol); outline-offset: -2px; }
.editor__flaeche > *:first-child { margin-top: 0; }
.editor__flaeche ul, .editor__flaeche ol { padding-left: 22px; }

.editor .form__input { border: 0; border-radius: 0 0 var(--radius) var(--radius); }
.editor__quelle--versteckt { display: none; }

/* ---------------------------------------------------------------------------
 * Kleinigkeiten in den Verwaltungslisten
 * ------------------------------------------------------------------------ */

.tabelle__zeile--leise td { color: var(--text-leise); background: #fbfcfd; }

.panel--warnung {
    border-left: 4px solid var(--warn-linie);
    background: var(--warn-bg);
    margin-top: 24px;
}

/* Einwahlprotokoll: Folgezeilen gehören zum Teilnehmer darüber. */
.tabelle__zeile--folge td { border-top: 0; color: var(--text-leise); }

/* Solange dieselbe Person weitergeht, kein Strich: Ein Teilnehmer mit drei
   Einwahlen ist ein Eintrag mit drei Zeilen, kein Block aus drei Kästchen. */
.tabelle__zeile--weiter td { border-bottom: 0; }


/* Absatz zwischen Moderation und Teilnehmern im Einwahlprotokoll. */
.tabelle__zeile--absatz td { border-top: 8px solid var(--hintergrund); }

/* Ausgabe als PDF: ankreuzen, dann erzeugen. */
.pdf-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* Zielgruppe: Nur der Block zur gewählten Auswahl bleibt stehen - wie bei der
   Art der Information rein mit CSS. */
.form--info:has(#ziel-alle:checked) .nur-ziel-kurse,
.form--info:has(#ziel-format:checked) .nur-ziel-kurse,
.form--info:has(#ziel-alle:checked) .nur-ziel-format,
.form--info:has(#ziel-kurse:checked) .nur-ziel-format { display: none; }

/* Lange Kurslisten: eine Spalte, dafür scrollbar statt seitenfüllend. */
.form__kaesten--lang {
    grid-template-columns: 1fr;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 10px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}

/* Pfad (Brotkrumen): Alle Kurse › Kurs › Tag. */
.pfad { margin: 0 0 8px; }

.pfad__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--text-leise);
}

.pfad__stufe + .pfad__stufe::before {
    content: "›";
    margin-right: 6px;
    color: var(--linie);
}

.pfad__stufe span { font-weight: 700; color: var(--text); }

.pdf-form__feld { display: flex; align-items: center; gap: 10px; }
.pdf-form__feld .form__label { margin: 0; }
.pdf-form__feld .form__input { width: auto; }

/* Laufende Nummer im Einwahlprotokoll - schmal und zurückhaltend. */
.tabelle__nummer {
    /* Breit genug fuer "Dozent" in der Zeile der Moderation; bei 3.5em
       brach das Wort um. white-space verhindert den Umbruch auch auf
       schmalen Geraeten. */
    width: 5.5em;
    white-space: nowrap;
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Dokumente
 * ------------------------------------------------------------------------ */

.dokumente { margin: 0 0 18px; }
.dokumente__kurs { margin: 0 0 4px; font-size: 1.05rem; }
.dokumente__liste { list-style: none; margin: 8px 0 0; padding: 0; }
.dokumente__eintrag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--linie);
}
.dokumente__eintrag:last-child { border-bottom: 0; }
.dokumente__eintrag .button { margin-right: 0; }

/* ---------------------------------------------------------------------------
 * Hinweisfenster "Adressüberprüfung" (ohne JavaScript)
 * ------------------------------------------------------------------------ */

.hinweisfenster {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 30, 40, 0.55);
}
.hinweisfenster__kasten {
    max-width: 520px;
    width: 100%;
    padding: 24px;
    background: #fff;
    border-radius: var(--radius);
    border-top: 4px solid var(--warn-linie);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.hinweisfenster__titel { margin: 0 0 12px; font-size: 1.25rem; }
.hinweisfenster__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}
.hinweisfenster__aktionen form { margin: 0; }
.hinweisfenster__kasten--adresse { max-width: 600px; max-height: calc(100vh - 32px); overflow-y: auto; }
.hinweisfenster__aktionen--unten { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie, #d9dde2); }
.hinweisfenster__form { margin-top: 8px; }

/* Anschrift wie im Kontakt: Straße Nr / PLZ Ort (Bundesland); unklare Angaben rot */
.adressanzeige {
    margin: 12px 0 8px;
    padding: 12px 14px;
    background: var(--flaeche, #f4f6f8);
    border-radius: var(--radius);
    font-size: 1.05rem;
    line-height: 1.5;
}
.adressanzeige__legende { margin: 8px 0 4px; font-size: .9rem; }
.adressanzeige__gruende { margin: 0 0 12px; padding-left: 20px; font-size: .9rem; color: var(--fehler-linie, #cf1124); }
.unklar {
    color: var(--fehler-linie, #cf1124);
    font-weight: 600;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.unklar--leer { font-style: italic; font-weight: 400; }