* { box-sizing: border-box; }

/*
 * Einheitlicher Basis-Stil für alle Aktions-Buttons im Projekt (Speichern,
 * Bearbeiten, Anlegen usw.) - schwarz mit weißem Text, wie .knopf und
 * .formular-aktionen button es bereits vorgeben. Bewusst als einfacher
 * Element-Selektor mit niedriger Spezifität gehalten: Menü-/Tab-/
 * Umschalt-Elemente (.knopf-umschalter, .kartei-tab-knopf,
 * .rechnungen-umschalter-knopf, .widget-zeitraum-filter-knopf,
 * .knopf-pille, .kopfleiste-menuknopf) sowie kleine Icon-only-Buttons
 * (.icon-knopf, .kartei-icon-knopf usw.) haben eigene, spezifischere
 * Klassen-Regeln und überschreiben diese Basis automatisch - dort ist
 * bewusst keine Änderung gewünscht.
 */
button {
    background: #1f2937;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}

button:hover { background: #111827; }

body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: #f5f6f8;
    color: #1f2430;
}

.kopfleiste {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1f2937;
    color: #fff;
    padding: 0.75rem 1.5rem;
}

.kopfleiste-marke { font-weight: 600; flex-shrink: 0; }

.kopfleiste-menuknopf {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.kopfleiste-menuknopf span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.kopfleiste-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.25rem;
}

.kopfleiste-nav a {
    color: #cbd5e1;
    text-decoration: none;
    white-space: nowrap;
}

.kopfleiste-nav a:hover { color: #fff; }

.nav-dropdown {
    position: relative;
}

.nav-dropdown summary {
    display: flex;
    align-items: center;
    color: #cbd5e1;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: ' ▾'; font-size: 0.7em; }
.nav-dropdown summary:hover { color: #fff; }
.nav-dropdown[open] summary { color: #fff; }

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.6rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    padding: 0.4rem 0;
    min-width: 160px;
    z-index: 500;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.55rem 1rem;
    color: #1f2937 !important;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover { background: #f3f4f6; }

.inhalt {
    width: 90%;
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.login-seite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 100vh;
    margin: 0;
    background: #f5f6f8;
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.meldung-schwebend {
    width: 100%;
    max-width: 360px;
    margin: 0;
}

.login-box {
    background: #fff;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 360px;
}

.login-box h1 { margin-top: 0; font-size: 1.4rem; }

.login-box form { display: flex; flex-direction: column; }

.login-box label { margin-top: 0.75rem; font-size: 0.9rem; color: #4b5563; }

.login-box input {
    padding: 0.55rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-top: 0.25rem;
    font-size: 1rem;
}

.login-box button {
    margin-top: 1.5rem;
    padding: 0.65rem;
    background: #1f2937;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}

.login-box button:hover { background: #111827; }

.meldung {
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.meldung-fehler {
    background: #fee2e2;
    color: #991b1b;
}

.meldung-erfolg {
    background: #dcfce7;
    color: #166534;
}

.setup-box { max-width: 420px; }

.hinweis {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: -0.5rem;
}

/* --- Fachmodule (ab Fahrschüler-Verwaltung) --- */

.seiten-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.seiten-kopf h1 { margin: 0; }

.knopf, .knopf-sekundaer {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
}

.knopf {
    background: #1f2937;
    color: #fff;
}

.knopf:hover { background: #111827; }

.knopf-sekundaer {
    background: #1f2937;
    color: #fff;
}

.knopf-sekundaer:hover { background: #111827; }

.suchleiste {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.suchleiste input[type="text"] {
    padding: 0.5rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    min-width: 240px;
}

/* Fahrschüler-Filter: kompakter Kasten, alle Felder dauerhaft horizontal nebeneinander */
.filter-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    padding: 0.8rem 1rem;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 8px;
}

.filter-box-feld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-box-feld label {
    font-size: 0.78rem;
    color: #6b7280;
    white-space: nowrap;
}

.filter-box-feld input[type="text"],
.filter-box-feld input[type="date"],
.filter-box-feld select {
    padding: 0.45rem 0.55rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.88rem;
    min-width: 140px;
}

.filter-lade-hinweis {
    font-size: 0.82rem;
    color: #6b7280;
}

/* Kompakte Inline-Aktionen in Tabellenzeilen (z.B. Termine: schnell abschließen) */
.tabellen-aktionen {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tabellen-aktionen form {
    display: inline-flex;
}

.icon-knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.icon-knopf-gruen {
    background: #dcfce7;
    color: #166534;
}

.icon-knopf-gruen:hover {
    background: #bbf7d0;
}

.icon-knopf-rot {
    background: #fee2e2;
    color: #991b1b;
}

.icon-knopf-rot:hover {
    background: #fecaca;
}

.filter-box-aktionen {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.link-dezent {
    color: #6b7280;
    font-size: 0.9rem;
    text-decoration: none;
}

.link-dezent:hover { text-decoration: underline; }

.text-dezent { color: #9ca3af; font-size: 0.85rem; }

.leer-hinweis { color: #6b7280; }

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.tabelle th, .tabelle td {
    text-align: left;
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid #eef0f2;
}

.tabelle th {
    color: #6b7280;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.status-abzeichen {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #e5e7eb;
    color: #374151;
}

.status-aktiv { background: #dcfce7; color: #166534; }
.status-interessent { background: #dbeafe; color: #1e40af; }
.status-pruefung_bestanden { background: #ede9fe; color: #5b21b6; }
.status-abgebrochen { background: #fee2e2; color: #991b1b; }
.status-ruhend { background: #fef3c7; color: #92400e; }

.formular { max-width: 720px; }

.formular-zeile {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.formular-zeile > div { flex: 1; }

.formular label {
    display: block;
    font-size: 0.85rem;
    color: #4b5563;
    margin-bottom: 0.3rem;
}

.formular input, .formular select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
}

.formular-aktionen {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.formular-aktionen button {
    padding: 0.6rem 1.2rem;
    background: #1f2937;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.formular-aktionen button:hover { background: #111827; }

/* "Abbrechen"-Buttons (z.B. in Popup-Formularen) nutzen bewusst die
   .link-dezent-Klasse statt des Haupt-Button-Stils - ohne diese Regel
   gewinnt ".formular-aktionen button" (spezifischer als ".link-dezent"
   allein) und macht sie fälschlich zu einem weißen Text auf weißem
   Popup-Hintergrund, also unsichtbar. */
.formular-aktionen button.link-dezent {
    padding: 0;
    background: none;
    color: #6b7280;
    border: none;
}

.formular-aktionen button.link-dezent:hover {
    background: none;
    text-decoration: underline;
}

.buchungslink-box {
    max-width: 720px;
    margin-top: 2rem;
    padding: 1.25rem;
    background: #f9fafb;
    border: 1px solid #eef0f2;
    border-radius: 8px;
}

.seiten-abschnitt {
    max-width: 720px;
    margin-top: 1.5rem;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    overflow: hidden;
}

.seiten-abschnitt-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    cursor: pointer;
    list-style: none;
    background: #f9fafb;
    user-select: none;
}

.seiten-abschnitt-kopf::-webkit-details-marker { display: none; }

.seiten-abschnitt-kopf h2 {
    margin: 0;
    font-size: 1.1rem;
}

.seiten-abschnitt-pfeil {
    font-size: 0.8em;
    color: #6b7280;
    transition: transform 0.15s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.seiten-abschnitt[open] .seiten-abschnitt-pfeil { transform: rotate(180deg); }

.seiten-abschnitt-inhalt {
    padding: 1.4rem;
    border-top: 1px solid #eef0f2;
}

/* Kompaktes Akkordeon für "Nächste Schritte" - jeder Fahrschüler einzeln
   auf-/zuklappbar, deutlich kleiner dimensioniert als .seiten-abschnitt
   (dort für eine ganze Seite gedacht, hier für viele Zeilen in einem
   Dashboard-Widget). */
.naechste-schritte-eintrag {
    border-bottom: 1px solid #eef0f2;
}

.naechste-schritte-eintrag:last-child {
    border-bottom: none;
}

.naechste-schritte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
    gap: 0.6rem;
}

.naechste-schritte-kopf::-webkit-details-marker { display: none; }

.naechste-schritte-pfeil {
    font-size: 0.72em;
    color: #9ca3af;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.naechste-schritte-eintrag[open] .naechste-schritte-pfeil { transform: rotate(180deg); }

.naechste-schritte-inhalt {
    padding: 0 0 0.7rem;
}

.hinweis-box {
    padding: 1rem 1.2rem;
    background: #f9fafb;
    border-left: 4px solid #6b7280;
    border-radius: 4px;
    font-size: 0.92rem;
}

.hinweis-box p { margin: 0; }

.fortschritt-mini {
    max-width: 400px;
    margin-bottom: 1.2rem;
}

.fortschritt-mini-kopf {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: #4b5563;
    margin-bottom: 0.3rem;
}

.fortschritt-mini-balken {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.fortschritt-mini-fuellung {
    height: 100%;
    background: #16a34a;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.termine-umschalter {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}

.knopf-umschalter {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    font-size: 0.9rem;
}

.knopf-umschalter.ist-aktiv {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

.buchungslink-box h2 { margin-top: 0; font-size: 1.05rem; }

.buchungslink {
    display: block;
    padding: 0.6rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    word-break: break-all;
}

.buchungslink-zeile {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.buchungslink-zeile > div:first-child {
    flex: 1;
    min-width: 240px;
}

.buchungslink-qrcode {
    flex-shrink: 0;
    width: 128px;
    height: 128px;
    padding: 4px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buchungslink-qrcode img {
    width: 100%;
    height: 100%;
    display: block;
}

.buchungslink-qrcode-gross {
    width: 208px;
    height: 208px;
}

.buchungslink-qrcode-bereich {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.mindestanzahl-erfuellt {
    color: #16a34a;
    font-weight: 700;
    margin-left: 0.2rem;
}

.voraussetzungen-zelle {
    white-space: nowrap;
}

.voraussetzung-zeile {
    display: block;
    font-size: 0.78rem;
}

.voraussetzung-ja {
    color: #166534;
}

.voraussetzung-nein {
    color: #9ca3af;
}

.voraussetzung-ausstehend {
    color: #c2410c;
    font-weight: 600;
    white-space: normal;
}

/* Zeile leicht orange hinterlegen, wenn etwas die Aufmerksamkeit des
   Büros braucht - ein hochgeladener Nachweis wartet auf Bestätigung,
   oder ein Fahrschüler ist bereit für eine Prüfung. Siehe
   .voraussetzung-ausstehend und das Dashboard-Widget "Nachweise zu
   bestätigen". */
tr.aufmerksamkeit-noetig td {
    background: #fff7ed;
}

.theorie-checkbox-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
}

.theorie-checkbox {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
}

.theorie-checkbox:has(input:checked) {
    background: #f0fdf4;
    border-color: #86efac;
}

.buchungslink-drucken-knopf {
    font-size: 0.82rem;
    padding: 0.4rem 0.9rem;
}

.checkbox-gruppe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    padding: 0.6rem 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: #374151;
    font-weight: 400;
}

.checkbox-label input { width: auto; }

.status-verfuegbar { background: #dcfce7; color: #166534; }
.status-in_wartung { background: #fef3c7; color: #92400e; }
.status-ausser_betrieb { background: #fee2e2; color: #991b1b; }
.status-ausgemustert { background: #e5e7eb; color: #4b5563; }

.tuev-ampel {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.tuev-ok { background: #dcfce7; color: #166534; }
.tuev-warnung { background: #fef3c7; color: #92400e; }
.tuev-abgelaufen { background: #fee2e2; color: #991b1b; }
.tuev-unbekannt { background: #e5e7eb; color: #4b5563; }

.tuev-ampel-gross {
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1.25rem;
}

.tabelle-kompakt { font-size: 0.85rem; margin-bottom: 1.5rem; }

.buchungslink-box h3 { font-size: 0.95rem; margin-top: 1.5rem; }

.status-offen { background: #dbeafe; color: #1e40af; }
.status-angefragt { background: #fef3c7; color: #92400e; }
.status-bestaetigt { background: #dcfce7; color: #166534; }
.status-abgelehnt { background: #fee2e2; color: #991b1b; }
.status-storniert { background: #fee2e2; color: #991b1b; }
.status-durchgefuehrt { background: #e0e7ff; color: #3730a3; }
.status-nicht_erschienen { background: #f3e8ff; color: #6b21a8; }

.hinweis-feld {
    font-size: 0.78rem;
    color: #9ca3af;
    margin: 0.3rem 0 0;
}

.logo-vorschau {
    margin-bottom: 0.6rem;
}

.logo-vorschau img {
    max-height: 80px;
    max-width: 240px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.4rem;
    background: #fff;
}

.formular textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
}

.farbwahl-zeile {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.farbwahl-zeile input[type="color"] {
    width: 46px;
    height: 38px;
    padding: 2px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
}

.rechnungsdesign-vorschau {
    max-width: 640px;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    padding: 1.4rem 1.6rem 1.1rem;
    margin: 0.8rem 0 0.6rem;
}

.rd-vorschau-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.rd-vorschau-absender {
    display: flex;
    flex-direction: column;
    font-size: 0.82rem;
}

.rd-vorschau-absender strong {
    font-size: 0.92rem;
    margin-bottom: 0.15rem;
}

.rd-vorschau-titel-bereich {
    text-align: right;
}

.rd-vorschau-ueberschrift {
    display: block;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
    text-transform: uppercase;
}

.rd-vorschau-logo {
    max-height: 34px;
    max-width: 110px;
    display: block;
    margin-bottom: 0.3rem;
    margin-left: auto;
}

.rd-vorschau-absender .rd-vorschau-logo {
    margin-left: 0;
}

.rd-vorschau-trennlinie {
    border-top: 2px solid;
    margin: 0.9rem 0 0.7rem;
}

.rd-vorschau-fusstext {
    font-size: 0.78rem;
}

.detail-box {
    max-width: 560px;
    background: #f9fafb;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-box p { margin: 0.4rem 0; }

.aktionen-box {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

.inline-form button {
    padding: 0.6rem 1.1rem;
    background: #1f2937;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.inline-form .knopf-sekundaer, .aktionen-box .knopf-sekundaer { background: #e5e7eb; color: #1f2937; }

.formular-schmal {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}

.formular-schmal label { display: block; font-size: 0.8rem; color: #6b7280; margin-bottom: 0.25rem; }

.formular-schmal input {
    padding: 0.5rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    min-width: 220px;
}

.formular-schmal button {
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #e5e7eb;
}

.slot-liste {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.slot-karte {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
}

.slot-karte-auswahl {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
}

.slot-karte-auswahl label {
    color: #6b7280;
}

.slot-karte button {
    padding: 0.5rem 1.1rem;
    background: #1f2937;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.slot-karte button.knopf-sekundaer { background: #e5e7eb; color: #1f2937; }

.status-abw-beantragt { background: #fef3c7; color: #92400e; }
.status-abw-genehmigt { background: #dcfce7; color: #166534; }
.status-abw-abgelehnt { background: #fee2e2; color: #991b1b; }

.warn-box {
    max-width: 640px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.warn-box h2 { margin-top: 0; font-size: 1rem; color: #9a3412; }
.warn-box ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.warn-box li { margin-bottom: 0.3rem; }

.status-pr-ausstehend { background: #dbeafe; color: #1e40af; }
.status-pr-bestanden { background: #dcfce7; color: #166534; }
.status-pr-nicht_bestanden { background: #fee2e2; color: #991b1b; }

.status-re-entwurf { background: #e5e7eb; color: #4b5563; }
.status-re-offen { background: #dbeafe; color: #1e40af; }
.status-re-teilweise_bezahlt { background: #fef3c7; color: #92400e; }
.status-re-bezahlt { background: #dcfce7; color: #166534; }
.status-re-storniert { background: #fee2e2; color: #991b1b; }

/* Überfälligkeits-Kennzeichnung für Rechnungszeilen - abgestuft nach
   Anzahl Tage seit Fälligkeit (siehe View::ueberfaelligkeitsKlasse()). */
tr.ueberfaellig-leicht td { background: #fef2f2; }
tr.ueberfaellig-mittel td { background: #fecaca; }
tr.ueberfaellig-stark td { background: #f87171; color: #7f1d1d; }
tr.ueberfaellig-stark td a { color: #7f1d1d; text-decoration: underline; }

.tabelle tfoot td { padding-top: 0.6rem; border-top: 2px solid #e5e7eb; border-bottom: none; }

.tabelle th.zahl, .tabelle td.zahl { text-align: right; }

.text-fehler { color: #991b1b; font-weight: 600; }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    grid-auto-rows: minmax(160px, auto);
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.dashboard-widget {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 1.25rem 1.4rem;
}

.paket-auslastung-balken {
    width: 100%;
    height: 8px;
    background: #eef0f2;
    border-radius: 4px;
    overflow: hidden;
}

.paket-auslastung-fuellung {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.dashboard-widget h2 {
    margin: 0 0 0.8rem;
    font-size: 1.05rem;
    color: #1f2937;
}

.dashboard-widget .tabelle-kompakt td {
    padding: 0.4rem 0.5rem;
    font-size: 0.88rem;
}

/* Begrenzt lange Widget-Tabellen (Nächste Fahrstunden, Anstehende
   Rechnungen, Angefragte Termine) auf ca. 10 sichtbare Zeilen - darüber
   hinausgehende Einträge bleiben über eine Scrollbar innerhalb des
   Widgets erreichbar, statt das Dashboard-Raster beliebig hoch werden
   zu lassen. */
.widget-tabelle-scroll {
    max-height: 33rem;
    overflow-y: auto;
}

.dashboard-widget-warnung {
    border-color: #fecaca;
    background: #fef9f9;
}

.dashboard-widget-spalten-1 { grid-column: span 1; }
.dashboard-widget-spalten-2 { grid-column: span 2; }
.dashboard-widget-spalten-3 { grid-column: span 3; }
.dashboard-widget-spalten-4 { grid-column: span 4; }

.dashboard-widget-zeilen-1 { grid-row: span 1; }
.dashboard-widget-zeilen-2 { grid-row: span 2; }
.dashboard-widget-zeilen-3 { grid-row: span 3; }

/* Bei mehrzeiligen Widgets darf der Inhalt die zusätzliche Höhe auch
   tatsächlich ausfüllen (z.B. eine längere Liste), statt oben
   abgeschnitten in der überschüssigen Fläche zu "schweben". */
.dashboard-widget-zeilen-2, .dashboard-widget-zeilen-3 {
    display: flex;
    flex-direction: column;
}

/* Umsatz-Widget */
.umsatz-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
}

/* Erfolgsquote im Prüfungen-Widget - ganz rechts im Kopfbereich, neben
   der Gesamtzahl/Veränderung. */
.pruefungen-erfolgsquote {
    margin-left: auto;
    text-align: right;
    font-size: 1.05rem;
    line-height: 1.3;
    color: #111827;
}

.umsatz-summe {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
}

.umsatz-veraenderung {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.umsatz-veraenderung-positiv { background: #dcfce7; color: #166534; }
.umsatz-veraenderung-negativ { background: #fee2e2; color: #991b1b; }

.widget-balken-reihe {
    display: flex;
    align-items: flex-end;
    gap: 0.7rem;
    height: 150px;
    margin: 1.3rem 0 0.4rem;
}

.widget-balken-spalte {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 0;
}

.widget-balken-wert {
    font-size: 0.7rem;
    color: #6b7280;
    margin-bottom: 0.3rem;
    white-space: nowrap;
}

.widget-balken {
    width: 100%;
    max-width: 46px;
    background: #93c5fd;
    border-radius: 4px 4px 0 0;
    min-height: 3px;
    transition: height 0.2s ease;
}

.widget-balken-aktuell {
    background: #1e40af;
}

/* Gestapelte, mehrfarbige Balken (Anmeldungen je Klasse, Prüfungen je
   Typ) - jede Kategorie ein eigenes Segment mit fester Farbe und der
   Anzahl als Text direkt im Segment. */
.widget-balken-gestapelt {
    width: 100%;
    max-width: 46px;
    display: flex;
    flex-direction: column;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    min-height: 3px;
    transition: height 0.2s ease;
}

.widget-balken-gestapelt.widget-balken-aktuell {
    background: none;
    box-shadow: 0 0 0 2px #111827;
}

.widget-balken-segment {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    min-height: 11px;
}

.widget-balken-label {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.55rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.widget-zeitraum-steuerung {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 0.6rem;
}

.widget-zeitraum-pfeil {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: #4b5563;
    flex-shrink: 0;
}

.widget-zeitraum-pfeil:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.widget-zeitraum-filter {
    display: flex;
    gap: 0.3rem;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0.2rem;
}

.widget-zeitraum-filter-knopf {
    border: none;
    background: transparent;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
    color: #4b5563;
}

.widget-zeitraum-filter-knopf.ist-aktiv {
    background: #fff;
    color: #111827;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.widget-liste {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    max-width: 640px;
}

.widget-liste-eintrag {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    margin-bottom: 0.6rem;
    cursor: grab;
}

.widget-liste-eintrag.wird-gezogen {
    opacity: 0.4;
}

.widget-liste-griff {
    color: #9ca3af;
    font-size: 1.1rem;
    line-height: 1;
}

.widget-liste-name {
    font-weight: 600;
    flex: 1;
}

.widget-liste-eintrag-inaktiv {
    opacity: 0.55;
}

.widget-liste-aktiv-haken {
    display: flex;
    align-items: center;
}

.widget-liste-aktiv-haken input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.widget-liste-groesse {
    display: flex;
    gap: 0.8rem;
    font-size: 0.85rem;
    color: #4b5563;
    white-space: nowrap;
}

.widget-liste-groesse label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.widget-liste-groesse input[type="number"] {
    width: 3.2rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 0.85rem;
}

.widget-liste-pfeile {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.knopf-pfeil-hoch, .knopf-pfeil-runter {
    padding: 0.1rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1.4;
}

.terminvorschlaege-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.terminvorschlag-chip {
    padding: 0.45rem 0.9rem;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    color: #1f2937;
}

.terminvorschlag-chip:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

.terminvorschlag-chip.ist-aktiv {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
}

.modal-box {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    max-width: 640px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.modal-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.modal-schliessen {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 0 0.3rem;
}

.modal-schliessen:hover {
    color: #1f2937;
}

.knopf-icon {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    flex-shrink: 0;
}

.knopf-icon:hover {
    background: #f3f4f6;
    color: #1f2937;
    border-color: #9ca3af;
}

/* Kleine Icon-Links für Tabellen-Aktionen (z.B. Bearbeiten/Konto in der
   Fahrschüler-Liste) - bewusst deutlich kompakter als .knopf-icon, damit
   die Aktionen-Spalte schmal bleibt. */
.tabelle-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 5px;
    border: 1px solid #e2e5ea;
    background: #fff;
    color: #4b5563;
    text-decoration: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.tabelle-icon-link:hover {
    background: #f3f4f6;
    color: #1f2937;
    border-color: #9ca3af;
}

.tabelle-icon-links {
    display: flex;
    gap: 0.35rem;
}

.popup-hintergrund {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem;
    z-index: 1000;
    overflow-y: auto;
}

.popup-hintergrund[hidden] {
    display: none;
}

.popup-fenster {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.popup-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.popup-schliessen {
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 0.2rem 0.4rem;
}

.popup-schliessen:hover {
    color: #1f2937;
}

@media (max-width: 640px) {
    .popup-hintergrund { padding: 0; align-items: stretch; }
    .popup-fenster { border-radius: 0; max-width: none; min-height: 100%; }
    /* Die 90%-Breite ist für größere Bildschirme gedacht - auf schmalen
       Mobilgeräten würde sie zusätzlich zum Innenabstand unnötig Platz
       wegnehmen, den es dort ohnehin schon wenig gibt. */
    .inhalt { width: auto; margin: 1rem; padding: 1.25rem; }
}

/* Kalender */
.kalender-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.kalender-kopf h1 {
    margin: 0;
}

.kalender-nav {
    display: flex;
    gap: 0.5rem;
}

.kalender-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 1.2rem;
    font-size: 0.82rem;
    color: #4b5563;
}

.kalender-legende-eintrag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.kalender-farbpunkt {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.kalender-raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.kalender-wochentag {
    background: #f9fafb;
    padding: 0.5rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b7280;
}

.kalender-tag {
    background: #fff;
    min-height: 110px;
    max-height: 170px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.kalender-tag-ausserhalb {
    background: #fafafa;
}

.kalender-tag-ausserhalb .kalender-tag-nummer {
    color: #d1d5db;
}

.kalender-tag-heute {
    background: #fffbeb;
}

.kalender-tag-nummer {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.3rem;
}

.kalender-tag-heute .kalender-tag-nummer {
    color: #b45309;
}

.kalender-tag-eintraege {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kalender-eintrag {
    display: block;
    font-size: 0.72rem;
    line-height: 1.3;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    border-left: 3px solid;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kalender-eintrag:hover {
    filter: brightness(0.95);
}

@media (max-width: 900px) {
    .kalender-raster { grid-template-columns: repeat(7, minmax(70px, 1fr)); overflow-x: auto; }

    /* Navigation: statt alle Punkte in eine (zu breite) Zeile zu zwingen,
       hinter einem Hamburger-Knopf einklappen. Das war die Hauptursache
       dafür, dass bisher JEDE Seite auf schmalen Bildschirmen seitlich
       scrollen musste - die Kopfzeile ist auf jeder Seite vorhanden und
       bestimmte dadurch die Mindestbreite der ganzen Seite. */
    .kopfleiste-menuknopf {
        display: flex;
    }

    .kopfleiste-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #1f2937;
        padding: 0.5rem 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        z-index: 100;
    }

    .kopfleiste-nav.kopfleiste-nav-offen {
        display: flex;
    }

    .kopfleiste { position: relative; }

    .kopfleiste-nav a {
        padding: 0.75rem 1.5rem;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .nav-dropdown { width: 100%; }

    .nav-dropdown summary {
        padding: 0.75rem 1.5rem;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        background: rgba(0,0,0,0.15);
        border-radius: 0;
        padding: 0;
        min-width: 0;
    }

    .nav-dropdown-menu a {
        padding-left: 2.5rem;
        border-top-color: rgba(255,255,255,0.06);
        color: #cbd5e1 !important;
    }

    .nav-dropdown-menu a:hover { background: rgba(255,255,255,0.06); }

    /* Mehrspaltige Formularzeilen (z.B. Vorname/Nachname nebeneinander)
       auf schmalen Bildschirmen untereinander stapeln statt zu quetschen */
    .formular-zeile {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Breite Tabellen bekommen ihren eigenen, in sich scrollbaren Rahmen,
       statt dass die ganze Seite seitlich rutscht */
    table.tabelle {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* Tagesauswahl im öffentlichen Buchungsformular */
.tagesauswahl-kopf, .tagesauswahl-raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.tagesauswahl-kopf {
    margin-top: 0.6rem;
}

.tagesauswahl-kopfzelle {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
}

.tagesauswahl-tag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    background: #fff;
    color: #1f2937;
}

.tagesauswahl-tag input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tagesauswahl-tag:has(input:checked) {
    background: #1f2937;
    color: #fff;
    border-color: #1f2937;
}

.tagesauswahl-tag-gesperrt {
    background: #f3f4f6;
    color: #d1d5db;
    border-color: #f3f4f6;
    cursor: not-allowed;
    text-decoration: line-through;
}

.tagesauswahl-tag-leer {
    border: none;
    cursor: default;
}

.status-z-anzahlung { background: #dbeafe; color: #1e40af; }
.status-z-zahlung { background: #dcfce7; color: #166534; }
.status-z-erstattung { background: #fee2e2; color: #991b1b; }

.status-fs-aktiv { background: #dcfce7; color: #166534; }
.status-fs-testphase { background: #dbeafe; color: #1e40af; }
.status-fs-gesperrt { background: #fef3c7; color: #92400e; }
.status-fs-gekuendigt { background: #fee2e2; color: #991b1b; }

.einstellungen-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 700px;
}

.einstellungen-karte {
    display: block;
    flex: 1 1 280px;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.einstellungen-karte:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.einstellungen-karte strong {
    display: block;
    margin-bottom: 0.3rem;
    color: #1f2937;
}

.einstellungen-karte span {
    font-size: 0.85rem;
    color: #6b7280;
}

/* ==========================================================================
   Fahrschülerkartei
   ========================================================================== */

.kartei-layout {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

.kartei-seitenleiste {
    width: 290px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 1.4rem;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.kartei-profilbild {
    width: 100%;
    aspect-ratio: 35 / 45;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e5ea;
    display: block;
}

.kartei-profilbild-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #1e40af;
    font-size: 1.8rem;
    font-weight: 700;
}

.kartei-klassen-abzeichen {
    display: inline-block;
    align-self: center;
    width: fit-content;
    margin-top: 0.7rem;
    padding: 0.2rem 0.6rem;
    background: #111827;
    color: #fff;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.kartei-seitenleiste-titel {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    margin: 1.4rem 0 0.6rem;
}

.kartei-kontakt-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.kartei-kontakt-liste li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #374151;
}

.kartei-kontakt-liste svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: #9ca3af;
}

.kartei-kontakt-liste a {
    word-break: break-word;
}

.kartei-notizen-feld {
    width: 100%;
    flex: 1;
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

.kartei-notizen-speichern {
    margin-top: 0.5rem;
    width: 100%;
}

.kartei-hauptbereich {
    flex: 1;
    min-width: 0;
}

.kartei-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.kartei-kopf h1 {
    margin: 0;
    font-size: 1.5rem;
}

.kartei-tabs {
    display: flex;
    gap: 0.5rem;
}

.kartei-tab-knopf {
    padding: 0.45rem 1.1rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    background: #fff;
}

.kartei-tab-knopf:hover {
    background: #f3f4f6;
    text-decoration: none;
}

.kartei-kopf-rechts {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-left: auto;
}

.kartei-nachweis-hinweis {
    flex: 1;
    text-align: center;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    max-width: 320px;
    margin: 0 1rem;
}

.kartei-nachweis-hinweis:hover {
    background: #ffedd5;
}

.kartei-mini-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    padding: 0.15rem;
}

.kartei-mini-avatar:hover {
    background: #f3f4f6;
}

.kartei-mini-avatar img,
.kartei-mini-avatar-platzhalter {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e2e5ea;
}

.kartei-mini-avatar-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #1e40af;
    font-weight: 700;
    font-size: 0.75rem;
}

.kartei-icon-knopf {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #e2e5ea;
    background: #fff;
    color: #4b5563;
    cursor: pointer;
    flex-shrink: 0;
}

.kartei-icon-knopf svg {
    width: 20px;
    height: 20px;
}

.kartei-icon-knopf:hover {
    background: #f3f4f6;
    color: #1e40af;
    border-color: #c7d2e0;
}

.kartei-icon-knopf-punkt {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc2626;
    border: 2px solid #fff;
}

.kartei-spalten {
    display: flex;
    gap: 1.3rem;
    align-items: flex-start;
}

/* Ausbildung-Seite: exakt 50/50 Spalten, beide auf gleicher (voller)
   Höhe - im Unterschied zu .kartei-spalten (die nur für Restinhalte ohne
   Höhenkopplung zur oberen Zeile gedacht ist), hier bewusst EINE
   durchgehende Spaltenstruktur für Theoretische/Praktische Ausbildung
   UND die darunterliegenden Karten in derselben Spalte. */
.ausbildung-hauptspalten {
    display: flex;
    gap: 1.3rem;
    align-items: stretch;
}

.ausbildung-hauptspalte {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.kartei-spalte {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.kartei-karte {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
}

.kartei-karte h2 {
    margin: 0 0 0.9rem;
    font-size: 1.02rem;
}

/* Ausbildungsplan */
.ausbildungsplan-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ausbildungsplan-schritt {
    display: flex;
    gap: 0.8rem;
    padding-bottom: 1.1rem;
    position: relative;
}

.ausbildungsplan-schritt:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}

.ausbildungsplan-punkt {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 3px;
    flex-shrink: 0;
    background: #ef4444;
}

.ausbildungsplan-erledigt .ausbildungsplan-punkt { background: #16a34a; }

.ausbildungsplan-inhalt { flex: 1; min-width: 0; }

.ausbildungsplan-kopf {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
}

.ausbildungsplan-detail {
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

.ausbildungsplan-detail-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ausbildungsplan-detail-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}

.ausbildungsplan-detail-erledigt {
    color: #166534;
}

.ausbildungsplan-detail-erledigt .ausbildungsplan-detail-zeichen {
    background: #dcfce7;
    color: #16a34a;
}

.ausbildungsplan-detail-offen {
    color: #9ca3af;
}

.ausbildungsplan-detail-offen .ausbildungsplan-detail-zeichen {
    background: #f3f4f6;
    color: #9ca3af;
}

/* Lernstand-Halbkreis-Bogen (SVG-basiert, wie lernstand.jpg) */
.kartei-lernstand-karte { text-align: center; }

.lernstand-bogen-bereich {
    position: relative;
    max-width: 260px;
    margin: 0 auto;
}

.lernstand-bogen-svg {
    width: 100%;
    height: auto;
    display: block;
}

.lernstand-bogen-label-0,
.lernstand-bogen-label-100 {
    position: absolute;
    bottom: 4%;
    font-size: 0.75rem;
    color: #9ca3af;
}

.lernstand-bogen-label-0 { left: 2%; }
.lernstand-bogen-label-100 { right: 2%; }

.lernstand-bogen-mitte {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    text-align: center;
}

.lernstand-prozent-zahl {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.lernstand-text {
    margin: 0.2rem 0 0;
    color: #1e40af;
    font-weight: 600;
    font-size: 0.88rem;
}

.lernstand-meilensteine {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 1.1rem;
}

.lernstand-meilenstein {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 82px;
    flex-shrink: 0;
}

/* Standard: noch nicht erreicht - dezent/grau. */
.lernstand-meilenstein-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lernstand-meilenstein span {
    font-size: 0.68rem;
    text-align: center;
    color: #6b7280;
    line-height: 1.2;
}

/* Erreicht: farbig hervorgehoben. */
.lernstand-meilenstein-erledigt .lernstand-meilenstein-icon {
    background: #1e40af;
    color: #fff;
}

.lernstand-meilenstein-erledigt span {
    color: #1e293b;
    font-weight: 600;
}

.lernstand-meilenstein-linie {
    flex: 0 0 18px;
    height: 1px;
    background: #d1d5db;
    margin-top: 15px;
}

.lernstand-meilenstein-linie-erledigt {
    background: #1e40af;
}

.kartei-fortschritt-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.kartei-fortschritt-box {
    flex: 1;
    min-width: 90px;
    background: #f9fafb;
    border: 1px solid #eef0f2;
    border-radius: 7px;
    padding: 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow-wrap: break-word;
}

.kartei-fortschritt-box strong { font-size: 1rem; }

.kartei-kontostand-box {
    background: #dbeafe;
    border-radius: 8px;
    padding: 1.6rem 1rem;
    min-height: 90px;
    text-align: center;
    margin-bottom: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.kartei-kontostand-box strong {
    font-size: 1.6rem;
    color: #1e3a8a;
    word-break: break-word;
}

/* Übersicht-Seite: Grid statt einfacher Flex-Spalten, damit Lernstand +
   Umsatz sowie Theoretische/Praktische Ausbildung + Buchungslink in
   Summe exakt so hoch werden wie der Ausbildungsplan (siehe Absprache:
   Boxen sollen sich gegenseitig auf gleiche Gesamthöhe ausweiten). */
.uebersicht-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr 1.15fr;
    grid-template-rows: auto auto auto;
    gap: 1.3rem;
    align-items: stretch;
}

.uebersicht-ausbildungsplan { grid-column: 1; grid-row: 1 / 4; }
.uebersicht-lernstand { grid-column: 2; grid-row: 1 / 3; }
.uebersicht-theorie { grid-column: 3; grid-row: 1; }
.uebersicht-praxis { grid-column: 3; grid-row: 2; }
.uebersicht-umsatz { grid-column: 2; grid-row: 3; }
.uebersicht-buchungslink { grid-column: 3; grid-row: 3; }

.uebersicht-grid .kartei-karte {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.buchungslink-qrcode-bereich-kartei {
    display: flex;
    justify-content: center;
    margin: 0.9rem 0;
}

.buchungslink-qrcode-kartei {
    width: 160px;
    height: 160px;
    padding: 6px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buchungslink-qrcode-kartei img {
    width: 100%;
    height: 100%;
    display: block;
}

.buchungslink-knopf-reihe {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.buchungslink-knopf-reihe form { margin: 0; }

@media (max-width: 1100px) {
    .uebersicht-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .uebersicht-ausbildungsplan,
    .uebersicht-lernstand,
    .uebersicht-theorie,
    .uebersicht-praxis,
    .uebersicht-umsatz,
    .uebersicht-buchungslink {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 900px) {
    .kartei-layout { flex-direction: column; }
    .kartei-seitenleiste { width: 100%; }
    .kartei-spalten { flex-direction: column; }
}

/* ==========================================================================
   Fahrlehrerkartei
   ========================================================================== */

.fahrlehrer-uebersicht-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.1fr 1.1fr;
    grid-template-rows: auto auto;
    gap: 1.3rem;
    align-items: stretch;
}

.fahrlehrer-schuelerliste { grid-column: 1; grid-row: 1 / 3; }
.fahrlehrer-arbeitszeiten { grid-column: 2; grid-row: 1; }
.fahrlehrer-abwesenheiten { grid-column: 3; grid-row: 1; }
.fahrlehrer-qrcode { grid-column: 2 / 4; grid-row: 2; }

.fahrlehrer-uebersicht-grid .kartei-karte {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.fahrlehrer-schuelerliste,
.fahrlehrer-abwesenheiten {
    min-height: 0;
}

.fahrlehrer-schueler-liste,
.fahrlehrer-abwesenheiten-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.fahrlehrer-abwesenheiten-liste li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f1f2f4;
}

.fahrlehrer-abwesenheiten-liste li:last-child {
    border-bottom: none;
}

.standort-uebersicht-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2.2fr;
    gap: 1.3rem;
    align-items: stretch;
}

.standort-uebersicht-grid .kartei-karte {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.standort-uebersicht-spalte {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    min-width: 0;
}

.standort-scroll-inhalt {
    overflow-y: auto;
}

.standort-theorie-lektionen .tabelle-scroll-3 {
    overflow-y: auto;
    max-height: none;
}

@media (max-width: 1100px) {
    .standort-uebersicht-grid {
        grid-template-columns: 1fr;
    }
    .standort-scroll-inhalt,
    .standort-theorie-lektionen .tabelle-scroll-3 {
        flex: none;
        max-height: 165px;
    }
}

@media (max-width: 1100px) {
    .fahrlehrer-uebersicht-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .fahrlehrer-schuelerliste,
    .fahrlehrer-arbeitszeiten,
    .fahrlehrer-abwesenheiten,
    .fahrlehrer-qrcode {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ==========================================================================
   Fahrschulkartei
   ========================================================================== */

.fahrschulkartei-logo {
    width: calc(100% + 2.8rem);
    margin: -1.4rem -1.4rem 0 -1.4rem;
    aspect-ratio: 35 / 45;
    object-fit: contain;
    display: block;
    background: #fff;
    border-radius: 10px 10px 0 0;
}

.fahrschulkartei-logo-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 1rem;
    font-weight: 600;
    background: #f9fafb;
}

.fahrschulkartei-klassen-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.fahrschulkartei-klassen-abzeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.knopf-pille {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #1f2937;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
}

.knopf-pille:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.knopf-pille-aktiv {
    background: #1e293b;
    color: #fff;
    border-color: #1e293b;
}

.knopf-pille-aktiv:hover {
    background: #1e293b;
    border-color: #1e293b;
}

.kartei-pille-dropdown {
    position: relative;
    display: inline-block;
}

.kartei-pille-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* Padding statt Margin: ueberbrueckt den Zwischenraum zur Pille
       LUECKENLOS im Hover-Bereich, sonst faellt das Dropdown weg sobald
       die Maus den kleinen Abstand zwischen Pille und Menue quert. */
    padding-top: 0.4rem;
    z-index: 30;
}

.kartei-pille-dropdown:hover .kartei-pille-dropdown-menu {
    display: block;
}

.kartei-pille-dropdown-menu-inhalt {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    padding: 0.4rem;
    min-width: 160px;
}

.kartei-pille-dropdown-menu-inhalt a {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    color: #1f2937;
    text-decoration: none;
    font-size: 0.88rem;
}

.kartei-pille-dropdown-menu-inhalt a:hover {
    background: #f3f4f6;
}

.kartei-karte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.kartei-karte-kopf h2 {
    margin: 0;
}

.kartei-icon-knopf-klein {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.kartei-icon-knopf-klein svg {
    width: 15px;
    height: 15px;
}

.fahrschulkartei-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.3rem;
    align-items: stretch;
}

.fahrschulkartei-abwesenheiten { grid-column: 1; grid-row: 1; }
.fahrschulkartei-fahrzeuge { grid-column: 2 / 4; grid-row: 1; }
.fahrschulkartei-standorte { grid-column: 1; grid-row: 2; }
.fahrschulkartei-fahrlehrer { grid-column: 2 / 4; grid-row: 2; }

.fahrschulkartei-grid .kartei-karte {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow-y: auto;
    max-height: 420px;
}

.fahrschulkartei-abwesenheiten-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    flex-shrink: 0;
}

.fahrschulkartei-abwesenheiten-filter select {
    flex: 1;
    min-width: 100px;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
}

.preisliste-matrix-wrapper {
    overflow-x: auto;
}

.preisliste-matrix {
    white-space: nowrap;
    margin-bottom: 0;
}

.preisliste-matrix th,
.preisliste-matrix td {
    padding: 0.35rem 0.6rem;
    text-align: right;
}

.preisliste-matrix th:first-child,
.preisliste-matrix td:first-child {
    text-align: left;
    white-space: normal;
    max-width: 180px;
}

.preisliste-matrix-gruppenzeile th {
    text-align: left;
    background: #f8f9fb;
    color: #5a6472;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding-top: 0.6rem;
}

.preisliste-matrix-editierbar td:first-child {
    max-width: none;
    white-space: nowrap;
}

.preisliste-matrix-uebergreifend-spalte {
    background: #f8f9fb;
    border-right: 2px solid #d7dbe0;
}

.preisliste-matrix-eingabe {
    width: 70px;
    padding: 0.3rem 0.4rem;
    text-align: right;
    border: 1px solid #d7dbe0;
    border-radius: 4px;
    font-size: 0.85rem;
}

.preisliste-matrix-eingabe:focus {
    outline: none;
    border-color: #1e293b;
}

.preisliste-seite-box {
    /* Bewusst KEINE max-height/overflow-y wie die kleine Vorschau-Box im
       Fahrschulkartei-Grid - hier soll die komplette Tabelle Platz haben. */
    max-width: 100%;
}

.preisliste-seite-box .preisliste-matrix-wrapper {
    max-width: 100%;
}

.einstellungen-seite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 1.3rem;
}

.einstellungen-seite-grid .kartei-karte {
    margin: 0;
    min-height: 140px;
}

.einstellungen-sonstiges-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
}

.einstellungen-sonstiges-grid .kartei-karte {
    margin: 0;
    min-height: 140px;
}

/* Explizite Positionen noetig, da zwischen den Boxen liegende Popup-Divs
   (Neu-/Bearbeiten-Popups) sonst vom automatischen Grid-Placement
   faelschlich als eigene Grid-Zellen mitgezaehlt wuerden. */
.einstellungen-sonstiges-grid .einstellungen-seite-benutzer { grid-column: 1; grid-row: 1; }
.einstellungen-sonstiges-grid .einstellungen-seite-export { grid-column: 2; grid-row: 1; }
.einstellungen-sonstiges-grid .einstellungen-seite-email { grid-column: 1; grid-row: 2; }

/* Kleinunternehmerregelung und Voranmeldungsfrist teilen sich gemeinsam
   die Hoehe von E-Mail-Versand (dieselbe Grid-Zeile) - Kleinunternehmer-
   regelung behaelt ihre natuerliche, kompakte Hoehe, Voranmeldungsfrist
   waechst mit flex:1, um den verbleibenden Platz auszufuellen. */
.einstellungen-sonstiges-grid .einstellungen-sonstiges-kleinunternehmer-voranmeldung-spalte {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    min-height: 0;
}

.einstellungen-sonstiges-kleinunternehmer-voranmeldung-spalte .einstellungen-seite-kleinunternehmer {
    flex: 0 0 auto;
}

.einstellungen-sonstiges-kleinunternehmer-voranmeldung-spalte .einstellungen-seite-voranmeldungsfrist {
    flex: 1;
    min-height: 0;
}

@media (max-width: 1100px) {
    .einstellungen-sonstiges-grid {
        grid-template-columns: 1fr;
    }
    .einstellungen-sonstiges-grid .einstellungen-seite-benutzer,
    .einstellungen-sonstiges-grid .einstellungen-sonstiges-kleinunternehmer-voranmeldung-spalte,
    .einstellungen-sonstiges-grid .einstellungen-seite-export,
    .einstellungen-sonstiges-grid .einstellungen-seite-email {
        grid-column: 1;
        grid-row: auto;
    }
}

.einstellungen-rechnungen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 1.3rem;
}

.einstellungen-rechnungen-grid .kartei-karte {
    margin: 0;
    min-height: 140px;
}

/* Explizite Positionen noetig, da das automatische Grid-Placement die
   zwischen den Boxen liegenden Elemente sonst falsch mitzaehlen wuerde. */
.einstellungen-rechnungen-grid .einstellungen-seite-nummernkreis { grid-column: 1; grid-row: 1; }
.einstellungen-rechnungen-grid .einstellungen-seite-rechnungsdesign { grid-column: 1; grid-row: 2; }
.einstellungen-rechnungen-grid .einstellungen-seite-mahnfrist { grid-column: 1; grid-row: 3; }
.einstellungen-rechnungen-grid .einstellungen-seite-vorschau {
    grid-column: 2;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.einstellungen-rechnungen-grid .einstellungen-seite-vorschau .rechnungsvorschau-rahmen {
    flex: 1;
    min-height: 400px;
}

@media (max-width: 1100px) {
    .einstellungen-rechnungen-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .einstellungen-rechnungen-grid .einstellungen-seite-nummernkreis,
    .einstellungen-rechnungen-grid .einstellungen-seite-rechnungsdesign,
    .einstellungen-rechnungen-grid .einstellungen-seite-mahnfrist,
    .einstellungen-rechnungen-grid .einstellungen-seite-vorschau {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Mahnfrist und Benutzer teilen sich gemeinsam die Hoehe von
   Rechnungsdesign (dieselbe Grid-Zeile) - Mahnfrist behaelt ihre
   natuerliche, kompakte Hoehe, Benutzer waechst mit flex:1, um den
   verbleibenden Platz auszufuellen, statt dass beide Boxen zusammen
   ueber die Zeilenhoehe hinausragen. */
.einstellungen-seite-mahnfrist-benutzer-spalte {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    min-height: 0;
}

.einstellungen-seite-mahnfrist-benutzer-spalte .einstellungen-seite-mahnfrist {
    flex: 0 0 auto;
}

.einstellungen-seite-mahnfrist-benutzer-spalte .einstellungen-seite-benutzer {
    flex: 1;
    min-height: 0;
}

.einstellungen-seite-email { grid-column: 1; grid-row: 2; }
.einstellungen-seite-export { grid-column: 1; grid-row: 3; }
.einstellungen-seite-rechnungsdesign { grid-column: 2; grid-row: 1; }
.einstellungen-seite-nummernkreis { grid-column: 3; grid-row: 1; }
.einstellungen-seite-vorschau {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    min-height: 300px;
    /* Flex-Spalte, damit der Vorschau-Rahmen unten den kompletten
       verbleibenden Platz der Box einnehmen kann, statt einer festen
       Pixel-Höhe die nicht zur tatsächlichen Boxhöhe passt. */
    display: flex;
    flex-direction: column;
}

.einstellungen-seite-vorschau .rechnungsvorschau-rahmen {
    flex: 1;
    min-height: 400px;
}

.rechnungsvorschau-rahmen {
    border: 1px solid #e2e5ea;
    border-radius: 6px;
    overflow: hidden;
    background: #e5e7eb;
}

.rechnungsvorschau-rahmen iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

@media (max-width: 1100px) {
    .einstellungen-seite-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .einstellungen-seite-mahnfrist-benutzer-spalte,
    .einstellungen-seite-email,
    .einstellungen-seite-export,
    .einstellungen-seite-rechnungsdesign,
    .einstellungen-seite-nummernkreis,
    .einstellungen-seite-vorschau {
        grid-column: 1;
        grid-row: auto;
    }
}

.fahrschulkartei-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fahrschulkartei-liste li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f2f4;
}

.fahrschulkartei-liste li:last-child {
    border-bottom: none;
}

@media (max-width: 1100px) {
    .fahrschulkartei-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .fahrschulkartei-standorte,
    .fahrschulkartei-fahrzeuge,
    .fahrschulkartei-abwesenheiten,
    .fahrschulkartei-fahrlehrer {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ===== Fahrschüler-Portal (mobile Ansicht) ===== */

.portal-mobil-body {
    background: #f3f4f6;
    margin: 0;
    padding-bottom: 5rem;
}

.portal-mobil-inhalt {
    max-width: 480px;
    margin: 0 auto;
    padding: 1.3rem 1rem;
}

.portal-mobil-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.3rem;
}

.portal-mobil-profil {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.portal-mobil-profilbild {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.portal-mobil-profilbild-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: #1e40af;
    font-size: 1.6rem;
    font-weight: 700;
}

.portal-mobil-name {
    margin: 0 0 0.3rem;
    font-size: 1.4rem;
}

.portal-mobil-klassen-abzeichen {
    display: inline-flex;
    padding: 0.25rem 0.8rem;
    border: 1.5px solid #1a1a1a;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
}

/* Mehrere parallele Ausbildungen (z.B. gleichzeitig B und A) im mobilen
   Fahrschueler-Portal - analog zum Umschalter in der Buero-Kartei. */
.portal-mobil-klassen-umschalter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.portal-mobil-klassen-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    padding: 0.25rem 0.7rem;
    background: #fff;
    color: #1a1a1a;
    border: 1.5px solid #1a1a1a;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

.portal-mobil-klassen-chip-aktiv {
    background: #1a1a1a;
    color: #fff;
}

.portal-mobil-zahnrad {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #7c3aed;
    flex-shrink: 0;
}

.portal-mobil-lernstand,
.portal-mobil-ausbildungsplan {
    margin-bottom: 1.3rem;
}

/* Die Meilenstein-Reihe unter dem Lernstand-Bogen hat auf Desktop eine
   feste Breite pro Meilenstein (siehe .lernstand-meilenstein weiter oben),
   die zusammen mit den Verbindungslinien deutlich breiter als ein
   schmales Handy-Display ist und dadurch aus der Box überlief. Nur im
   mobilen Portal-Kontext auf flexible, schrumpfbare Breite umgestellt -
   die Fahrschülerkartei (Desktop) bleibt davon unberührt. */
.portal-mobil-lernstand .lernstand-bogen-bereich {
    max-width: 100%;
}

.portal-mobil-lernstand .lernstand-meilensteine {
    width: 100%;
}

.portal-mobil-lernstand .lernstand-meilenstein {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.portal-mobil-lernstand .lernstand-meilenstein span {
    font-size: 0.64rem;
    overflow-wrap: break-word;
    hyphens: none;
}

.portal-mobil-lernstand .lernstand-meilenstein-icon {
    width: 26px;
    height: 26px;
}

.portal-mobil-lernstand .lernstand-meilenstein-linie {
    flex: 1 1 8px;
    min-width: 4px;
    margin-top: 13px;
}

.portal-mobil-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e2e5ea;
    display: flex;
    justify-content: space-around;
    padding: 0.6rem 0.3rem calc(0.6rem + env(safe-area-inset-bottom));
    z-index: 50;
}

.portal-mobil-nav-eintrag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    flex: 1;
}

/* Die fünf Icons haben unterschiedliche native Größen (14-20px), je
   nachdem wo sie sonst im Projekt noch verwendet werden (z.B. iconSchloss
   auch in der Fahrschülerkartei-Seitenleiste). Hier im Navigationskontext
   auf eine einheitliche Größe und einen festen, mittig ausgerichteten
   Container überschrieben, damit Icons und Beschriftungen bei allen fünf
   Einträgen auf exakt gleicher Höhe stehen. */
.portal-mobil-nav-eintrag svg {
    width: 20px !important;
    height: 20px !important;
}

.portal-mobil-nav-eintrag > svg,
.portal-mobil-nav-eintrag > *:first-child {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-mobil-nav-aktiv {
    color: #1a1a1a;
}

.portal-mobil-nav-deaktiviert {
    opacity: 0.4;
    cursor: default;
}

.portal-mobil-seitentitel {
    font-size: 1.4rem;
    margin: 0 0 1rem;
}

.portal-mobil-abschnitt {
    margin-bottom: 1.3rem;
}

.portal-mobil-abschnitt h2 {
    margin-top: 0;
}

/* Terminkarten im Fahrschüler-Portal (Termine-Unterseite) */
.termin-karten-liste {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.termin-karte {
    border: 1px solid #e2e5ea;
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.termin-karte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.termin-karte-kopf strong {
    font-size: 1rem;
}

.termin-karte-status {
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
}

.termin-karte-typ {
    color: #4b5563;
    margin: 0.15rem 0 0.7rem;
}

.termin-karte-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #4b5563;
    margin-bottom: 0.45rem;
}

.termin-karte-zeile:last-child {
    margin-bottom: 0;
}

.termin-karte-zeile svg {
    flex-shrink: 0;
    color: #9ca3af;
}

.termin-karte-zeile-unten {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.termin-karte-auto-icon {
    color: #1a1a1a;
    display: flex;
    flex-shrink: 0;
}

/* Rechnungen-Seite im Fahrschüler-Portal (Kontostand + Posten-Karten) */
.rechnungen-kontostand-zahl {
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0.3rem 0 0;
    color: #16a34a;
}

.rechnungen-kontostand-negativ {
    color: #dc2626;
}

.rechnungen-umschalter {
    display: flex;
    gap: 0.6rem;
    margin: 1.1rem 0;
}

.rechnungen-umschalter-knopf {
    flex: 1;
    padding: 0.55rem 0.7rem;
    border: 1.5px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

.rechnungen-umschalter-knopf.ist-aktiv {
    border-color: #1a1a1a;
    color: #1a1a1a;
}

.rechnungen-posten-karte {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border: 1px solid #e2e5ea;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.8rem;
    color: #9ca3af;
}

.rechnungen-posten-karte-abgerechnet {
    color: #1a1a1a;
}

.rechnungen-posten-typ {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.rechnungen-posten-datum {
    font-size: 0.88rem;
}

.rechnungen-posten-betraege {
    text-align: right;
}

.rechnungen-posten-preis {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
}

.rechnungen-posten-preis-dunkel {
    color: #1a1a1a;
}

.rechnungen-posten-saldo {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-top: 0.15rem;
}

.rechnungen-abschnitt-titel {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 1.3rem 0 0.8rem;
}

/* Fahrlehrer-Portal: einfacher Monatsraster auf der Kalender-Unterseite */
.fl-kalender-kopf {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.fl-kalender-kopfzelle {
    text-align: center;
    font-size: 0.72rem;
    color: #9ca3af;
    font-weight: 600;
}

.fl-kalender-raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.fl-kalender-tag {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.82rem;
    background: #f9fafb;
    gap: 2px;
}

.fl-kalender-tag-ausserhalb {
    color: #d1d5db;
}

.fl-kalender-tag-heute {
    border: 1.5px solid #1a1a1a;
    font-weight: 700;
}

.fl-kalender-punkt {
    background: #1a1a1a;
    color: #fff;
    border-radius: 999px;
    font-size: 0.62rem;
    min-width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* Arbeitszeiten-Popup im Fahrlehrer-Portal - ein Kartenblock pro Wochentag
   mit Toggle-Switch statt einer rohen Tabellenzeile. */
.arbeitszeit-liste {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.arbeitszeit-tag {
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    background: #f9fafb;
    transition: background-color 0.15s, border-color 0.15s;
}

.arbeitszeit-tag-aktiv {
    background: #fff;
    border-color: #1a1a1a;
}

.arbeitszeit-tag-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.arbeitszeit-tag-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.arbeitszeit-tag-frei-hinweis {
    display: block;
    color: #9ca3af;
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

.arbeitszeit-tag-aktiv .arbeitszeit-tag-frei-hinweis {
    display: none;
}

.arbeitszeit-tag-zeiten {
    display: none;
    align-items: flex-end;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.arbeitszeit-tag-aktiv .arbeitszeit-tag-zeiten {
    display: flex;
}

.arbeitszeit-zeit-feld {
    flex: 1;
}

.arbeitszeit-zeit-feld label {
    display: block;
    font-size: 0.72rem;
    color: #9ca3af;
    margin-bottom: 0.2rem;
}

.arbeitszeit-zeit-feld input {
    width: 100%;
}

.arbeitszeit-zeit-trenner {
    color: #9ca3af;
    padding-bottom: 0.55rem;
}

/* Toggle-Switch: Checkbox visuell versteckt, Schiene+Knopf stattdessen */
.arbeitszeit-schalter {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.arbeitszeit-schalter input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.arbeitszeit-schalter-schiene {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: background-color 0.15s;
    pointer-events: none;
}

.arbeitszeit-schalter-knopf {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform 0.15s;
}

.arbeitszeit-schalter input:checked + .arbeitszeit-schalter-schiene {
    background: #16a34a;
}

.arbeitszeit-schalter input:checked + .arbeitszeit-schalter-schiene .arbeitszeit-schalter-knopf {
    transform: translateX(18px);
}

/* "Meine Infos"-Popup im Fahrlehrer-Portal - Abschnitte im selben Karten-
   Stil wie das Arbeitszeiten-Popup, statt eines einzelnen, unstrukturierten
   Formulars. */
.infoabschnitt {
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    background: #f9fafb;
    margin-bottom: 0.8rem;
}

.infoabschnitt-titel {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.infoabschnitt-klassen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.infoabschnitt-klassen-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1.5px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.infoabschnitt-klassen-chip input {
    width: auto;
    margin: 0;
}

.infoabschnitt-klassen-chip:has(input:checked) {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

/* Filter-Formular fuer "Vergangene Termine" im Fahrlehrer-Portal */
.fl-termine-filter {
    background: #f9fafb;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    margin-bottom: 1rem;
}

/* Fahrschuelerkartei: Klassen-Umschalter (mehrere parallele Ausbildungen
   pro Fahrschueler, z.B. gleichzeitig B und A) */
.kartei-klassen-umschalter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.kartei-klassen-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.2rem 0.6rem;
    background: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.kartei-klassen-chip:hover {
    background: #d1d5db;
}

.kartei-klassen-chip-aktiv {
    background: #111827;
    color: #fff;
}

.kartei-klassen-chip-aktiv:hover {
    background: #111827;
}

.kartei-klassen-chip-hinzufuegen {
    background: #fff;
    border: 1.5px dashed #9ca3af;
    color: #6b7280;
}

.kartei-klassen-chip-hinzufuegen:hover {
    background: #f9fafb;
    border-color: #6b7280;
}

/* Fahrzeugkartei: Statistik-Bereich mit vier Balkendiagrammen
   (gefahrene Kilometer, Anzahl Fahrten, Auslastungsrate, Kosten) sowie
   die Wartungshistorie-/Fahrzeugkosten-/Unfallhistorie-Boxen daneben. */
.fahrzeug-statistik-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
}

@media (max-width: 900px) {
    .fahrzeug-statistik-raster { grid-template-columns: 1fr; }
}

.statistik-diagramm {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.statistik-diagramm h3 {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
}

.statistik-diagramm-kennzahl {
    margin: -0.6rem 0 1rem;
    font-size: 0.85rem;
}

.statistik-diagramm-kennzahl strong {
    margin-left: 0.3rem;
    color: #111827;
}

.statistik-diagramm-kennzahl-hinweis {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: #9ca3af;
}

.statistik-balken-reihe {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6rem;
    flex: 1;
    min-height: 80px;
    margin-bottom: 0.6rem;
}

.statistik-balken-spalte {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}

.statistik-balken-summe {
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 0.3rem;
    min-height: 1.1em;
}

.statistik-balken-saeule {
    width: 100%;
    max-width: 34px;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.statistik-balken-segment-a { background: #1e3a8a; }
.statistik-balken-segment-b { background: #0d9488; }

.statistik-balken-segment-a,
.statistik-balken-segment-b {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    min-height: 0;
}

.statistik-balken-label {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: #6b7280;
    text-align: center;
}

.statistik-diagramm-fuss {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.statistik-nav-pfeil {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid #e2e5ea;
    background: #fff;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.statistik-nav-pfeil:hover { background: #f9fafb; }

.statistik-zeitraum-umschalter {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0.2rem;
    gap: 0.15rem;
}

.statistik-zeitraum-btn {
    padding: 0.3rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #6b7280;
    font-size: 0.78rem;
    cursor: pointer;
}

.statistik-zeitraum-btn-aktiv {
    background: #1a1a1a;
    color: #fff;
}

.fahrzeug-info-box-leer {
    color: #9ca3af;
    font-size: 0.9rem;
}

/* Fahrzeugkartei: Kilometerstände/Wartungshistorie/Unfallhistorie zeigen
   nur die letzten drei Zeilen sichtbar, weitere Einträge per Scrollbar -
   der Tabellenkopf bleibt dabei sichtbar (sticky). */
.tabelle-scroll-3 {
    max-height: 165px;
    overflow-y: auto;
}

.tabelle-scroll-3 table {
    margin-bottom: 0;
}

.tabelle-scroll-3 thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

/* Mobiles Portal: "Heute Theorieunterricht"-Abschnitt in der
   "Theoretische Ausbildung"-Box (Einchecken zum heutigen Termin). */
.portal-mobil-theorie-heute {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eef0f2;
}

.portal-mobil-theorie-heute h3 {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.portal-mobil-theorie-heute-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.portal-mobil-theorie-heute-zeile form {
    margin: 0;
}

/* Rechnungsvorlagen-Auswahl (Meine Fahrschule -> Rechnungen). */
.rechnungsvorlagen-auswahl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
}

.rechnungsvorlage-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
}

.rechnungsvorlage-kachel .kachel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rechnungsvorlage-kachel input {
    margin: 0;
    flex: none;
}

.rechnungsvorlage-kachel strong {
    font-size: 0.9rem;
}

.rechnungsvorlage-kachel span {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}

.rechnungsvorlage-kachel:has(input:checked) {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 1px #1a1a1a;
}

@media (max-width: 640px) {
    .rechnungsvorlagen-auswahl {
        grid-template-columns: 1fr;
    }
}