* { 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; }
.status-inaktiv { background: #fef3c7; color: #92400e; }
.status-ausgetreten { background: #e5e7eb; color: #4b5563; }

.formular { max-width: 720px; }
/* Ausnahme für Formulare, die wie das Willkommenstext-Formular über die
   volle Breite ihrer Karte gehen sollen (z.B. für ein 50/50-Spaltenpaar
   wie .willkommenstext-grid) statt auf die sonst übliche Popup-Breite begrenzt zu sein. */
.formular-volle-breite { max-width: none; }

.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;
}

/* Kalender-Einträge (Termine, Schichten, Raumbuchungen): kompakte
   Chip-Darstellung mit Titel/Zweck, optionaler Person und Zeitspanne,
   plus ein beim Hover eingeblendetes Tooltip mit allen Details. */
.kalender-chip {
    position: relative;
    display: block;
    text-align: left;
    color: #fff;
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    border: none;
    width: 100%;
    cursor: pointer;
    line-height: 1.3;
}
.kalender-chip-titel { font-weight: 600; display: block; }
.kalender-chip-person { display: block; opacity: 0.85; font-size: 0.9em; }
.kalender-chip-zeit { display: block; opacity: 0.85; font-size: 0.85em; margin-top: 0.1rem; }

.kalender-chip-tooltip {
    display: none;
    position: fixed;
    z-index: 1000;
    background: #fff;
    color: #1f2937;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 0.75rem 0.9rem;
    min-width: 220px;
    max-width: 300px;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: normal;
}
.kalender-chip-tooltip.kalender-chip-tooltip-sichtbar { display: block; }
.kalender-chip-tooltip strong { display: block; font-size: 0.95rem; margin-bottom: 0.3rem; }
.kalender-chip-tooltip .kalender-chip-tooltip-zeile { color: #4b5563; }
.kalender-chip-tooltip .kalender-chip-tooltip-zeile + .kalender-chip-tooltip-zeile { margin-top: 0.15rem; }

.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;
}

/* Größere Popup-Variante für Formulare mit viel Platzbedarf (z.B. das
   Nachricht-verfassen-Popup mit An/Cc/Bcc-Feldern und Rich-Text-Editor) -
   80% der Bildschirmbreite/-höhe statt der sonst üblichen, kompakteren
   Popup-Größe. Eigene Klasse statt die allgemeine .popup-fenster-Regel zu
   ändern, damit andere Popups im Projekt unverändert bleiben. */
.popup-fenster-gross {
    max-width: 80vw;
    width: 80vw;
    height: 80vh;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.popup-fenster-gross form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* Bei kleinen Bildschirmen scrollt das Formular im Popup, statt den Inhalt
       (z.B. den Editor) auf Null zusammenzuquetschen - Kopfzeile bleibt stehen. */
    overflow-y: auto;
}

@media (max-width: 800px) {
    .popup-fenster-gross { max-width: 96vw; width: 96vw; height: 92vh; max-height: 92vh; }
}

@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;
}

/* Mitgliederkartei: 2-spaltiges Raster. Reihenfolge der Boxen ergibt sich aus
   dem Aufbau der View: Mitgliedsbeitrag | Personenverknüpfungen, darunter
   Stammdaten | Zusätzliche Informationen; weitere (modulabhängige) Boxen
   wie Fotoerlaubnis und Zugehörigkeiten laufen darunter weiter. Boxen einer
   Reihe sind gleich hoch. */
.kartei-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem;
    align-items: stretch;
}

.kartei-raster .kartei-karte {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    box-sizing: border-box;
}

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

/* Sponsoren & Kontakte */
.kontakt-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.kontakt-chip {
    display: inline-block; padding: 0.25rem 0.85rem; border-radius: 999px; background: #f1f3f5; color: #4b5563;
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.kontakt-chip:hover { background: #e5e7eb; }
.kontakt-chip-aktiv, .kontakt-chip-aktiv:hover { background: #1e293b; color: #fff; }
.kontakt-suche { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.kontakt-suche input[type=search], .kontakt-suche select {
    padding: 0.5rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.95rem; background: #fff;
}
.kontakt-suche input[type=search] { width: auto; flex: 1 1 16rem; min-width: 14rem; max-width: 30rem; }
.kontakt-suche select { width: auto; }
.kontakt-kategorie {
    display: inline-block; padding: 0.05rem 0.6rem; border-radius: 999px; background: #e0e7ff; color: #3730a3;
    font-size: 0.72rem; font-weight: 600; margin: 0 0.2rem 0.15rem 0;
}
.kontakt-kategorie-system { background: #dcfce7; color: #166534; }
.kontakt-kategorie-wahl { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 1rem; }
.kontakt-kategorie-wahl label { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; }
.kontakt-kategorie-wahl input { width: auto; margin: 0; }
.kontakt-feldgruppe-titel { font-weight: 600; margin: 1rem 0 0.1rem; }
/* Dezente Text-Knöpfe (z.B. "Kontakt löschen", "Vorschläge ergänzen") außerhalb von .formular-aktionen:
   dort würde sonst der dunkle Standard-Knopf gelten. */
.kontakt-raster button.link-dezent, #kategorienPopup button.link-dezent {
    padding: 0; background: none; border: none; color: #6b7280; cursor: pointer; text-align: left;
}
.kontakt-raster button.link-dezent:hover, #kategorienPopup button.link-dezent:hover { background: none; text-decoration: underline; }
/* Felder im Umhüllungs-Element (Art Person/Organisation) bekommen denselben Abstand wie direkte Formularfelder */
.formular .feld-person > div, .formular .feld-organisation > div { margin-bottom: 1rem; }
/* Detailseite: zwei Spalten, jede Box nur so hoch wie ihr Inhalt */
.kontakt-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; align-items: start; }
.kontakt-raster-spalte { display: flex; flex-direction: column; gap: 1.3rem; min-width: 0; }
.kontakt-raster .kartei-karte { height: auto; max-height: none; overflow: visible; margin: 0; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } }

.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; }

/* Grid für die Einstellungen-Unterseiten (E-Mail, Rechnung, Benutzer und
   Rollen, Mitglieder, Vereinsinfos, Struktur) - bewusst eigenständig statt
   .fahrschulkartei-grid, da dessen .kartei-karte-Regel eine für kompakte
   Übersicht-Kacheln gedachte max-height mit Scrollbalken mitbringt, die
   hier nur bei kurzem Inhalt zufällig nicht auffällt. */
.einstellungen-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.3rem;
}
.einstellungen-grid .kartei-karte {
    height: auto;
    max-height: none;
    overflow: visible;
    margin: 0;
}
/* Zusatzfelder/Mitgliedsnummernkreis (und ggf. weitere Kartenpaare) nebeneinander,
   je 50% Breite, gleiche Höhe (die kürzere Karte streckt sich auf die Höhe der höheren). */
.einstellungen-doppelbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
    align-items: stretch;
}
.einstellungen-doppelbox .kartei-karte {
    height: 100%;
    display: flex;
    flex-direction: column;
}
@media (max-width: 1000px) {
    .einstellungen-doppelbox { grid-template-columns: 1fr; }
}
.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;
    }
}

/* ============================================================
 * Neues App-Layout: Kopfzeile mit Vereinsname/Lizenz, Tab-Leiste
 * statt flacher Nav-Liste, persistente linke Seitenleiste
 * (Logo, optionales Submenü, Vereinsinformationen unten) auf
 * jeder Seite.
 * ============================================================ */

.kopfleiste-lizenz {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.tableiste {
    display: flex;
    flex-wrap: wrap;
    background: #4b5a63;
    padding: 0 1rem;
}

.tableiste-tab {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 0.92rem;
    background: transparent;
    border-right: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}

.tableiste-tab:hover { background: rgba(255,255,255,0.08); color: #fff; }

.tableiste-tab-aktiv {
    background: #fff;
    color: #1f2430;
    font-weight: 600;
}

.tableiste-tab-aktiv:hover { background: #fff; color: #1f2430; }

.tableiste-tab-abmelden { margin-left: auto; border-right: none; }

html { height: 100%; }

body.app-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    width: 90%;
    margin: 2rem auto;
    flex: 1 1 auto;
    min-height: 0;
}

.app-layout > .inhalt {
    width: auto;
    flex: 1;
    min-width: 0;
    margin: 0;
    /* Dieselbe feste Höhe wie die Seitenleiste (siehe dortiger
       Kommentar zu --kopf-hoehe) - der Bereich wächst NICHT mit
       seinem Inhalt, sondern bekommt bei zu langem Inhalt eine eigene,
       interne Scrollbar, statt die ganze Seite länger zu machen. */
    height: calc(100vh - var(--kopf-hoehe, 0px) - 4rem);
    overflow-y: auto;
}

.app-seitenleiste {
    width: 260px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    /* Fest am Sichtfenster verankert (nicht am Seiteninhalt): reicht
       immer bis knapp vor den unteren Bildschirmrand und behält diese
       Größe bei, auch wenn der Hauptinhalt länger als der Bildschirm
       ist (dann bleibt die Seitenleiste beim Scrollen stehen). Die
       exakten Werte für --kopf-hoehe kommen aus dem kleinen Script
       weiter unten, das Kopfzeile+Tableiste tatsächlich vermisst statt
       eine Pixelzahl zu raten. */
    position: sticky;
    top: calc(var(--kopf-hoehe, 0px) + 2rem);
    height: calc(100vh - var(--kopf-hoehe, 0px) - 4rem);
}

.app-seitenleiste-fuss { margin-top: auto; }

.app-submenu-liste {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.app-submenu-link {
    display: block;
    padding: 0.6rem 0.7rem;
    margin: 0 -0.7rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    border-left: 3px solid transparent;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    background: none;
    width: calc(100% + 1.4rem);
    text-align: left;
}

.app-submenu-link:hover { background: #f5f6f8; color: #111827; }

.app-submenu-link-aktiv {
    border-left-color: #22c55e;
    background: #f5f6f8;
    color: #111827;
}


@media (max-width: 900px) {
    .kopfleiste-menuknopf { display: flex; }
    .tableiste {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .tableiste.tableiste-offen { display: flex; }
    .tableiste-tab { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .tableiste-tab-abmelden { margin-left: 0; }
    .app-layout { flex-direction: column; width: 92%; }
    .app-layout > .inhalt { height: auto; overflow-y: visible; }
    .app-seitenleiste { width: 100%; height: auto; position: static; }
}

/* ============================================================
 * Lizenz-Popup: Modul-Auswahl als sauberes, zweispaltiges
 * Karten-Grid statt einer schmucklosen, unstrukturierten Liste.
 * ============================================================ */
.lizenz-modul-liste {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    max-height: 340px;
    overflow-y: auto;
    padding: 0.2rem;
}

.lizenz-modul-karte {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-weight: 400;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.lizenz-modul-karte:hover { border-color: #9ca3af; background: #f9fafb; }

/* Drei Zustände, alle im selben dezenten Ton (heller 50er-Hintergrund
 * + zurückhaltender 300er-Rahmen): aktiv (grün, war schon gebucht und
 * bleibt es), gewünscht (gelb, neu angehakt) und inaktiv (rot, nicht
 * angehakt) - Klick irgendwo auf die Karte schaltet um (siehe JS). */
.lizenz-modul-karte-aktiv {
    background: #f0fdf4;
    border-color: #86efac;
}

.lizenz-modul-karte-gewuenscht {
    background: #fffbeb;
    border-color: #fcd34d;
}

.lizenz-modul-karte-inaktiv {
    background: #fef2f2;
    border-color: #fca5a5;
}

.lizenz-modul-karte-aktiv:hover { border-color: #4ade80; }
.lizenz-modul-karte-gewuenscht:hover { border-color: #fbbf24; }
.lizenz-modul-karte-inaktiv:hover { border-color: #f87171; }

.lizenz-modul-checkbox, .lizenz-paket-radio {
    /* Die Karte selbst ist die Checkbox/das Radio (Klick überall drauf
       schaltet um, siehe JS) - das native Eingabeelement bleibt nur für
       die Formularübermittlung erhalten, visuell aber unsichtbar. */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lizenz-modul-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.lizenz-modul-name { font-weight: 600; font-size: 0.92rem; }

.lizenz-modul-laufzeit {
    display: block;
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.35;
}

.lizenz-modul-beschreibung {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .lizenz-modul-liste { grid-template-columns: 1fr; }
}

/* Darstellung des vom Rich-Text-Editor (TinyMCE) erzeugten, bereits
   serverseitig bereinigten HTML - z.B. in der Nachrichten-Vorschau und
   im Postausgang-Verlauf. */
.nachricht-html-inhalt { line-height: 1.5; }
.nachricht-html-inhalt p { margin: 0 0 0.75em; }
.nachricht-html-inhalt p:last-child { margin-bottom: 0; }
.nachricht-html-inhalt ul, .nachricht-html-inhalt ol { margin: 0 0 0.75em; padding-left: 1.4em; }
.nachricht-html-inhalt table { border-collapse: collapse; margin-bottom: 0.75em; }
.nachricht-html-inhalt td, .nachricht-html-inhalt th { border: 1px solid #d8dce1; padding: 0.35em 0.6em; }

/* Empfänger-Eingabe (An/Cc/Bcc) im Nachricht-verfassen-Popup: Chips für
   ausgewählte Empfänger plus ein "+"-Button, der das Auswahl-Dropdown
   öffnet (Gruppen, Mitglieder-Suche, freie E-Mail-Adresse). */
.empfaenger-zeile { display: flex; align-items: flex-start; border-bottom: 1px solid #eef0f2; padding: 0.5rem 0; gap: 0.75rem; }
.empfaenger-zeile label { flex: 0 0 3.5rem; padding-top: 0.35rem; color: #6b7280; font-weight: 600; }
.empfaenger-eingabe { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-height: 2rem; }
.empfaenger-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: #eef2f7; border-radius: 999px; padding: 0.2rem 0.3rem 0.2rem 0.7rem; font-size: 0.9rem; }
.empfaenger-chip[data-typ="gruppe"] { background: #e6f4ea; }
.empfaenger-chip[data-typ="alle"] { background: #e6f4ea; }
.empfaenger-chip[data-typ="email"] { background: #fef3e2; }
.empfaenger-chip-entfernen { border: none; background: none; cursor: pointer; color: #6b7280; font-size: 1rem; line-height: 1; padding: 0.15rem 0.4rem; border-radius: 999px; }
.empfaenger-chip-entfernen:hover { background: rgba(0,0,0,0.08); }
.empfaenger-hinzufuegen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #eef0f2;
    color: #4b5563;
    border-radius: 999px;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.empfaenger-hinzufuegen:hover { background: #1f2937; color: #fff; }
.empfaenger-hinzufuegen svg { display: block; width: 15px; height: 15px; flex-shrink: 0; }

.empfaenger-dropdown { position: absolute; z-index: 1010; background: #fff; border: 1px solid #d8dce1; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); width: 320px; max-height: 360px; display: flex; flex-direction: column; }
.empfaenger-dropdown[hidden] { display: none; }
.empfaenger-dropdown input[type="text"] { margin: 0.6rem; width: calc(100% - 1.2rem); }
.empfaenger-dropdown-liste { overflow-y: auto; padding: 0 0.3rem 0.5rem; }
.empfaenger-dropdown-gruppe-titel { font-size: 0.75rem; text-transform: uppercase; color: #9ca3af; padding: 0.4rem 0.6rem 0.2rem; }
.empfaenger-dropdown-eintrag { display: flex; flex-direction: column; padding: 0.4rem 0.6rem; border-radius: 6px; cursor: pointer; }
.empfaenger-dropdown-eintrag:hover, .empfaenger-dropdown-eintrag.aktiv { background: #f3f4f6; }
.empfaenger-dropdown-eintrag .name { font-weight: 500; }
.empfaenger-dropdown-eintrag .details { font-size: 0.8rem; color: #6b7280; }
.empfaenger-dropdown-leer { padding: 0.6rem; color: #9ca3af; font-size: 0.9rem; }

/* Mitgliederliste: Auswahl-Checkboxen und Massenbearbeitung */
.mitglieder-auswahl-spalte, .nachrichten-auswahl-spalte { width: 2rem; text-align: center; }
.mitglieder-auswahl-spalte input, .nachrichten-auswahl-spalte input { width: auto; cursor: pointer; }
/* .knopf-sekundaer setzt display:inline-block und würde das hidden-Attribut sonst aushebeln */
#massenBearbeitenKnopf[hidden], #massenEmailKnopf[hidden], #nachrichtenLoeschenKnopf[hidden] { display: none; }
.tabelle tbody tr.mitglied-ausgewaehlt, .tabelle tbody tr.nachricht-ausgewaehlt { background: #eef2ff; }
#massenBearbeitenSpeichern:disabled { opacity: 0.45; cursor: not-allowed; }

.meldung-hinweis { background: #fef9c3; color: #713f12; border: 1px solid #fde68a; }
#alteLoeschenSpeichern:disabled { opacity: 0.45; cursor: not-allowed; }

/* Kartei eines Inventar-Gegenstands: Stammdaten | Reservierungen | Zugriffsberechtigungen in einer Reihe */
.inventar-kartei-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3rem;
    align-items: stretch;
}
.inventar-kartei-grid .kartei-karte { height: 100%; margin: 0; }
@media (max-width: 1100px) {
    .inventar-kartei-grid { grid-template-columns: 1fr; }
}
/* Von/Bis-Felder in den schmalen Kartei-Boxen: nebeneinander wenn Platz ist, sonst untereinander (statt über den Rand zu ragen) */
.inventar-kartei-grid .formular-zeile { flex-wrap: wrap; }
.inventar-kartei-grid .formular-zeile > div { flex: 1 1 9.5rem; min-width: 0; }

/* Einstellungen > Vereinsregeln: Willkommensschreiben und Vereinsregeln mit Live-Vorschau.
   Beide Spalten sind nur so hoch wie ihr Inhalt: das Textfeld wächst per Skript mit dem
   Text mit (siehe textfeldAnpassen() in der View), die Vorschau hat kein festes Seitenformat. */
.willkommenstext-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
.willkommenstext-grid > div { display: flex; flex-direction: column; }
.willkommenstext-grid textarea { width: 100%; min-height: 5rem; font-family: inherit; resize: vertical; overflow-y: auto; }
.willkommen-vorschau {
    background: #fff;
    border: 1px solid #d8dbe0;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 1.1rem 1.2rem;
}
.willkommen-vorschau-briefkopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.4rem; }
.willkommen-vorschau-absender { font-size: 0.8rem; line-height: 1.4; }
.willkommen-vorschau-absender strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.willkommen-vorschau-absender div { color: #5a5a5a; }
.willkommen-vorschau-qr-bereich { flex-shrink: 0; text-align: center; }
.willkommen-vorschau-qr-bereich svg { width: 72px; height: 72px; }
.willkommen-vorschau-qr-text { font-size: 0.55rem; color: #787878; margin-top: 0.2rem; }
.willkommen-vorschau-datum { text-align: right; font-size: 0.72rem; color: #5a5a5a; margin-bottom: 1.1rem; }
.willkommen-vorschau-ueberschrift { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.9rem; color: #141414; }
.willkommen-vorschau-text { font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap; color: #27272a; margin: 0; }
@media (max-width: 900px) {
    .willkommenstext-grid { grid-template-columns: 1fr; }
}

/* ===================== Online-Bestellung (/bestellen) ===================== */
body.bestellung-seite { background: #f4f6f9; margin: 0; color: #1f2937; }
.bestellung-breite { width: min(100% - 2rem, 1080px); margin-inline: auto; }
.bestellung-kopf { background: #1e293b; color: #fff; padding: 0.95rem 0; }
.bestellung-kopf .bestellung-breite { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.bestellung-marke { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; }
.bestellung-marke b { color: #34d399; }
.bestellung-unterzeile { color: #a9b6cb; font-size: 0.95rem; }
main.bestellung-breite { padding: 2rem 0 3rem; }
main.bestellung-breite h1 { margin: 0 0 0.5rem; }
.bestellung-intro { max-width: 52rem; color: #566275; margin: 0 0 1.5rem; }
.bestellung-fuss { padding: 1.5rem 0 2.5rem; text-align: center; color: #6b7280; font-size: 0.9rem; }
.bestellung-fuss a { color: #4b5563; }
.bestell-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.bestell-block { background: #fff; border: 1px solid #e2e6ec; border-radius: 12px; padding: 1.4rem 1.5rem; margin-bottom: 1.2rem; }
.bestell-block h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.bestell-optional { font-weight: 400; color: #6b7280; font-size: 0.9rem; }
.bestell-mitte { max-width: 640px; margin-inline: auto; }
.bestell-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.paket-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin-top: 1rem; }
.paket-karte { position: relative; display: block; cursor: pointer; }
.paket-karte input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; margin: 0; }
.paket-inhalt { display: block; height: 100%; border: 2px solid #e2e6ec; border-radius: 12px; padding: 1rem; background: #fff; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s; }
.paket-karte:hover .paket-inhalt { border-color: #8fd6bb; transform: translateY(-2px); }
.paket-karte input:checked + .paket-inhalt { border-color: #047857; background: #ecfdf5; box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.15); }
.paket-karte input:focus-visible + .paket-inhalt { outline: 3px solid #f59e0b; outline-offset: 2px; }
.paket-name { display: block; font-size: 1.1rem; }
.paket-preis { display: block; font-size: 1.35rem; font-weight: 800; margin: 0.3rem 0 0.5rem; color: #047857; }
.paket-preis small { font-size: 0.8rem; font-weight: 400; color: #6b7280; }
.paket-inhalt ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; color: #4b5563; }
.modul-zeile { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.8rem 0.9rem; border: 1px solid #e2e6ec; border-radius: 10px; margin-top: 0.6rem; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.modul-zeile:hover { background: #f8fafc; border-color: #8fd6bb; }
.modul-zeile:has(input:checked) { background: #ecfdf5; border-color: #047857; }
.modul-zeile input[type=checkbox], .erklaerung input[type=checkbox] { width: auto; margin: 0.25rem 0 0; padding: 0; flex: none; }
.modul-text { flex: 1; display: block; }
.modul-text small { display: block; color: #6b7280; font-size: 0.85rem; }
.modul-preis { font-weight: 700; white-space: nowrap; color: #047857; }
.bestell-summe { position: sticky; top: 1rem; background: #fff; border: 1px solid #e2e6ec; border-radius: 12px; padding: 1.3rem 1.4rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08); }
.bestell-summe h2 { margin: 0 0 0.8rem; font-size: 1.1rem; }
.summe-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; font-size: 0.95rem; }
.bestell-summe-gesamt { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid #1e293b; margin-top: 0.7rem; padding-top: 0.6rem; font-size: 1.05rem; }
.bestell-summe-gesamt strong { font-size: 1.35rem; }
.bestell-knopf { display: block; width: 100%; margin-top: 1rem; padding: 0.9rem 1.2rem; background: #047857; color: #fff; border: none; border-radius: 10px; font-size: 1.05rem; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
.bestell-knopf:hover { background: #065f46; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(4, 120, 87, 0.3); }
.bestell-knopf-link { display: inline-block; width: auto; }
.bestell-tabelle { width: 100%; border-collapse: collapse; margin: 0.6rem 0; }
.bestell-tabelle td { padding: 0.5rem 0; border-bottom: 1px solid #eef1f5; vertical-align: top; }
.bestell-tabelle td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.bestell-tabelle small { display: block; color: #6b7280; font-weight: 400; }
.bestell-tabelle-summe td { border-top: 2px solid #1e293b; border-bottom: none; font-weight: 800; }
.bestell-liste { display: grid; grid-template-columns: 11rem 1fr; gap: 0.35rem 1rem; margin: 0.6rem 0 1rem; }
.bestell-liste dt { color: #6b7280; }
.bestell-liste dd { margin: 0; }
.mandat-text { background: #f8fafc; border: 1px solid #e2e6ec; border-radius: 8px; padding: 1rem; font-size: 0.9rem; line-height: 1.55; }
.erklaerung { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.7rem 0; font-size: 0.92rem; cursor: pointer; }
@media (max-width: 900px) {
    .bestell-raster { grid-template-columns: 1fr; }
    .bestell-summe { position: static; }
    .bestell-liste { grid-template-columns: 1fr; gap: 0; }
    .bestell-liste dd { margin-bottom: 0.5rem; }
}
/* Bestellung: Spalten dürfen auf kleinen Bildschirmen schrumpfen (kein seitliches Scrollen) */
.bestell-raster > div, .bestell-raster > aside { min-width: 0; }
.bestell-block .formular-zeile > div { min-width: 0; }
@media (max-width: 900px) { .bestell-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .bestell-block .formular-zeile { flex-direction: column; gap: 0; } .bestell-liste dd { overflow-wrap: anywhere; } }
/* Hinweistexte in der Bestellung: normaler Abstand statt der globalen Verschiebung nach oben */
.bestell-block .hinweis, .bestell-summe .hinweis, .bestellung-intro { margin: 0.4rem 0 0.9rem; }
.bestell-summe .hinweis { font-size: 0.85rem; }

.bestellung-anmelden { margin-left: auto; color: #dbe4f2; font-size: 0.95rem; }
.bestellung-anmelden:hover { color: #fff; }