/* Fahrzeug Management 2.1.0 – Gestaltung (Basis: Volunteer Management, gleiche Optik) */
/* Alle Elemente innerhalb des Formulars auf border-box zwingen, damit
   Theme-Vorgaben (Padding/Border) die Breitenberechnung nicht durcheinander
   bringen. */
.fm-wrap,
.fm-wrap *,
.fm-wrap *::before,
.fm-wrap *::after {
    box-sizing: border-box;
}

.fm-wrap {
    margin-left: 0;
    width: auto;
    max-width: 100%;
    overflow-x: auto;   /* nie breiter als die Seite: kein waagrechter Scrollbalken */
    background: var(--zp-bg, linear-gradient(135deg, rgb(34, 80, 227) 0%, rgb(0, 25, 61) 100%));
    color: var(--zp-text, #ffffff);
    padding: 28px 32px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* Überschriften, Labels und freier Fliesstext liegen direkt auf dem
   Gradient-Hintergrund und brauchen deshalb helle, kontrastierende
   Textfarben. Helle Boxen (Tabellen, Hinweis-Kästen, Einsatzorte-Liste
   usw.) setzen ihre Textfarbe weiter unten gezielt wieder auf dunkel. */
.fm-wrap h2,
.fm-wrap h3,
.fm-wrap h4 {
    color: var(--zp-text, #ffffff);
}

.fm-wrap label {
    color: var(--zp-text, #ffffff);
}

.fm-wrap p {
    color: var(--zp-text, #ffffff);
}

.fm-form {
    max-width: none;
}

/* CSS Grid statt Flexbox für die Zeilen: dadurch überlappen sich die
   Felder nie, auch nicht bei unterschiedlich hohen Inhalten. !important
   bewusst gesetzt, damit generische Theme-/Page-Builder-Regeln (z.B.
   "display:block" oder "width:100%" auf Formular-Elementen) unsere
   Zeilen-Anordnung nicht zunichtemachen. */
.fm-wrap .fm-field-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    margin-bottom: 18px;
}

.fm-wrap .fm-field-row-contact {
    grid-template-columns: minmax(220px, 2fr) minmax(180px, 1fr) !important;
}

.fm-wrap .fm-field-row-einsatz {
    grid-template-columns: minmax(200px, 1fr) minmax(220px, 1.3fr) !important;
}

/* Zum Ein-/Ausblenden einer ganzen Zeile per JavaScript: eine Klasse statt
   eines Inline-Styles, da unser eigenes "display:grid !important" oben
   sonst ein per JS gesetztes "style.display = 'none'" überstimmen würde
   (ein !important aus dem Stylesheet schlägt ein normales Inline-Style). */
.fm-wrap .fm-field-row.fm-row-hidden {
    display: none !important;
}

.fm-field-narrow input {
    max-width: none;
}

.fm-verein-existing {
    margin-top: 6px;
    padding: 8px 12px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    color: #222;
}

.fm-verein-existing .fm-hint {
    margin: 0 0 4px;
    color: #666;
}

.fm-verein-existing ul {
    margin: 0;
    padding-left: 18px;
}

.fm-message-standalone {
    text-align: center;
    max-width: 560px;
    margin: 32px auto;
    padding: 20px 28px;
    font-size: 1.05rem;
}

.fm-wrap .fm-field {
    margin-bottom: 16px;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    min-width: 0;
}

/* Innerhalb einer Grid-Zeile übernimmt bereits row-gap den Abstand nach
   unten zur nächsten Zeile - dort keinen zusätzlichen Abstand, sonst wäre
   er doppelt so gross. */
.fm-wrap .fm-field-row > .fm-field {
    margin-bottom: 0;
}

.fm-field label {
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--zp-text, #ffffff);
}

.fm-field input,
.fm-field select {
    width: 100% !important;
    padding: 7px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

.fm-submit {
    background: #2271b1;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.fm-submit:hover {
    background: #135e96;
}

.fm-radio-group {
    display: flex;
    gap: 16px;
    padding-top: 4px;
}

.fm-radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

.fm-radio-item input[type="radio"] {
    width: auto !important;
}

.fm-slots-group {
    display: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fafafa;
    color: #222;
}

.fm-slots-group .fm-hint {
    color: #666;
}

.fm-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    padding: 2px 0;
}

.fm-checkbox-item input[type="checkbox"] {
    width: auto !important;
}

.fm-slot-capacity {
    color: #666;
    font-size: 0.9em;
}

.fm-slot-full {
    color: #999;
}

.fm-slot-full .fm-slot-capacity {
    color: #b32d2e;
    font-weight: 600;
}

.fm-hint {
    color: var(--zp-link, #d7e0ff);
    font-style: italic;
    margin: 3px 0 6px;
}

.fm-message {
    padding: 10px 16px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.fm-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.fm-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.fm-add-another {
    margin-left: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.fm-readonly {
    background: #f0f0f1;
    color: #555;
}

.fm-group-progress {
    background: #eef3fc;
    border: 1px solid #cfe0fb;
    color: #17335c;
    padding: 8px 16px;
    border-radius: 4px;
    margin-bottom: 14px;
    font-size: 1rem;
}

.fm-group-form .fm-hint {
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------
   Frontend-Verwaltungsseite [fahrzeug_admin] und Übersicht
   [fahrzeug_uebersicht] – passwortgeschützte Seiten unabhängig vom
   WordPress-Login.
   --------------------------------------------------------------- */

.fm-fe-login {
    max-width: 380px;
    margin: 24px auto;
    background: var(--zp-soft, rgba(255, 255, 255, 0.07));
    border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.25));
    border-radius: 8px;
    padding: 24px 28px;
}

.fm-fe-login h2 {
    margin-bottom: 14px;
}

.fm-fe-admin {
    max-width: none;
}

.fm-fe-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.fm-fe-header h2 {
    margin: 0;
}

.fm-fe-logout {
    font-size: 0.9rem;
    color: var(--zp-link, #e7ecff);
}

.fm-fe-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

.fm-fe-tab {
    display: inline-block;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--zp-link, #e7ecff);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.fm-fe-tab:hover {
    background: var(--zp-soft, rgba(255, 255, 255, 0.15));
}

.fm-fe-tab-active {
    background: #fff;
    color: #17335c;
    border-color: #ddd;
    font-weight: 600;
    position: relative;
    top: 2px;
}

.fm-fe-form {
    max-width: none;
    margin-bottom: 24px;
}

.fm-fe-form-inline {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: none;
}

.fm-fe-form-inline input[type="email"] {
    flex: 1 1 260px;
}

.fm-field-checkbox label {
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fm-field-checkbox input[type="checkbox"] {
    width: auto !important;
    flex: none;
}

.fm-fe-cancel {
    margin-left: 8px;
    color: var(--zp-link, #e7ecff);
}

.fm-fe-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    color: #222;
    background: #ffffff;
}

.fm-fe-table th,
.fm-fe-table td {
    border: 1px solid #ddd;
    padding: 6px 8px;
    text-align: left;
    font-size: 0.92rem;
}

.fm-fe-table th {
    background: #f5f5f5;
}

.fm-fe-table tr:nth-child(even) {
    background: #fafafa;
}

.fm-fe-link-delete,
.fm-fe-link-small {
    background: none;
    border: none;
    color: #2271b1;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
    text-decoration: underline;
}

.fm-fe-link-delete {
    color: #b32d2e;
}

.fm-fe-filter-form {
    margin-bottom: 14px;
}

.fm-fe-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.fm-fe-filter-row select,
.fm-fe-filter-row input[type="text"] {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 220px;
}

.fm-fe-export-row {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 12px 0 20px;
}

/* "Suchen"/"Export"/"Hinzufügen"-Aktionen in Filter- und Export-Zeile
   liegen direkt auf dem Gradient-Hintergrund - dort die sonst für helle
   Tabellen gedachten Blau-/Rot-Töne durch helle, gut lesbare Varianten
   ersetzen. */
.fm-fe-filter-row .fm-fe-link-small,
.fm-fe-export-row .fm-fe-link-small {
    color: var(--zp-text, #ffffff);
}

.fm-fe-export-row .fm-fe-link-delete {
    color: color-mix(in srgb, #ffb4a8, #000 var(--zp-dunkel, 0%));
}

.fm-fe-bereich-heading {
    margin-top: 28px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--zp-line, rgba(255, 255, 255, 0.4));
}

.fm-fe-slot-heading {
    margin-top: 16px;
    margin-bottom: 6px;
}

.fm-fe-slot-count {
    font-weight: 400;
    color: var(--zp-link, #d7e0ff);
    font-size: 0.85em;
}

.fm-fe-reg-form {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 16px 0 28px;
    background: #fafafa;
    color: #222;
}

.fm-fe-reg-form .fm-form {
    max-width: none;
}

/* Labels sitzen standardmässig (siehe ".fm-wrap label"/.fm-field label"
   weiter oben) hell auf dem Gradient-Hintergrund. Innerhalb der eigenen
   hellen Boxen (Einsatzorte-Checkboxen, Einsatzorte-/Vereinsliste,
   Inline-Bearbeitungsformular der Übersicht) müssen sie dafür wieder
   dunkel sein - diese Regeln stehen bewusst nach den obigen, damit sie
   bei gleicher Spezifität (Klasse + Element) den Vorrang bekommen. */
.fm-slots-group label,
.fm-verein-existing label,
.fm-fe-reg-form label {
    color: #222;
}

/* Volunteer-ID (ab Version 1.18.0) */
.fm-nr { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ===============================================================
   Ab Version 1.20.0
   =============================================================== */

/* ---------------------------------------------------------------
   Formulare ohne Überschneidungen: Eingabefelder bleiben immer in
   ihrer Spalte, egal welche Breiten, Ränder oder Abstände das Theme
   für Eingabefelder vorgibt.
   --------------------------------------------------------------- */
.fm-wrap .fm-field input:not([type="checkbox"]):not([type="radio"]),
.fm-wrap .fm-field select,
.fm-wrap .fm-field textarea,
.fm-wrap .fm-fe-form input:not([type="checkbox"]):not([type="radio"]),
.fm-wrap .fm-fe-form select,
.fm-wrap .fm-fe-form textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-family: inherit;
    font-size: 1rem;
}

.fm-wrap .fm-field-narrow input:not([type="checkbox"]):not([type="radio"]) {
    max-width: 100% !important;
}

.fm-wrap input[type="checkbox"],
.fm-wrap input[type="radio"] {
    width: auto !important;
    min-width: 0 !important;
    flex: none;
}

/* Spalten dürfen nie breiter als die Zeile werden */
.fm-wrap .fm-field-row {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important;
}
.fm-wrap .fm-field-row-contact {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
}
.fm-wrap .fm-field-row-einsatz {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) !important;
}
@media (max-width: 640px) {
    .fm-wrap .fm-field-row,
    .fm-wrap .fm-field-row-contact,
    .fm-wrap .fm-field-row-einsatz {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .fm-wrap { margin-left: 0; padding: 22px 18px; }
}

.fm-wrap .fm-fe-form .fm-field {
    margin-bottom: 18px;
}

/* Breite Tabellen scrollen auf kleinen Bildschirmen statt zu überlaufen */
.fm-fe-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.fm-hint-dark {
    color: #666;
    font-size: 0.85em;
}

/* Treffpunkt im Anmeldeformular und in der Übersicht */
.fm-slot-treffpunkt {
    display: block;
    margin-left: 0;
    color: #2d5a9e;
    font-size: 0.88em;
}
.fm-checkbox-item {
    flex-wrap: wrap;
}
.fm-fe-slot-treffpunkt {
    font-weight: 400;
    color: color-mix(in srgb, #ffe7a3, #000 var(--zp-dunkel, 0%));
    font-size: 0.85em;
}

/* «Link vergessen?» auf der Gruppen-Anmeldeseite */
.fm-link-vergessen {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--zp-line, rgba(255, 255, 255, 0.3));
    max-width: none;
}
.fm-link-vergessen summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--zp-text, #ffffff);
}
.fm-link-vergessen-form {
    margin-top: 12px;
}
.fm-link-vergessen-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.fm-link-vergessen-zeile input[type="email"] {
    flex: 1 1 260px;
    min-width: 0;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    margin: 0;
}
.fm-link-vergessen-zeile .fm-submit {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   Erinnerungen (WP-Admin und Frontend-Verwaltung)
   --------------------------------------------------------------- */
.fm-rem {
    max-width: none;
}
.fm-rem-intro p {
    margin: 0 0 8px;
}
.fm-rem-klein {
    font-size: 0.9em;
    opacity: 0.85;
}
.fm-rem-karte {
    display: block;
    background: #ffffff;
    color: #1d2327;
    border: 1px solid #dcdfe4;
    border-radius: 10px;
    padding: 24px 28px 26px;
    margin: 22px 0;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}
.fm-wrap .fm-rem-karte p,
.fm-wrap .fm-rem-karte label,
.fm-wrap .fm-rem-karte h3,
.fm-rem-karte p,
.fm-rem-karte label,
.fm-rem-karte h3 {
    color: #1d2327;
}
.fm-rem-karte .fm-rem-titel {
    margin: 0 0 10px !important;
    padding: 0 0 10px;
    font-size: 1.15rem;
    border-bottom: 1px solid #e3e7ee;
    color: #17335c !important;
}
.fm-rem-beschreibung {
    margin: 0 0 14px;
    font-size: 0.92rem;
    line-height: 1.5;
}
.fm-rem-status {
    background: #f6f7f9;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 0 18px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #1d2327;
}
.fm-rem-badge {
    display: inline-block;
    padding: 1px 9px;
    margin-right: 6px;
    border-radius: 10px;
    background: #dcdfe4;
    color: #1d2327;
    font-size: 0.8rem;
    font-weight: 600;
}
.fm-rem-badge-geplant { background: #dbe8fb; color: #17335c; }
.fm-rem-badge-laeuft  { background: #fff0c2; color: #7a5b00; }
.fm-rem-badge-ok      { background: #d4edda; color: #155724; }
.fm-rem-badge-warn    { background: #f8d7da; color: #721c24; }

.fm-rem-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 18px 22px !important;
    margin: 0 0 20px !important;
}
.fm-rem-feld {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    margin: 0 !important;
    grid-column: span 6;
}
.fm-rem-span-2 { grid-column: span 2; }
.fm-rem-span-3 { grid-column: span 3; }
.fm-rem-span-4 { grid-column: span 4; }
.fm-rem-span-6 { grid-column: span 6; }
@media (max-width: 760px) {
    .fm-rem-feld { grid-column: span 6 !important; }
    .fm-rem-karte { padding: 18px 16px 20px; }
}
.fm-rem-feld label {
    display: block !important;
    margin: 0 0 6px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}
.fm-rem-feld input,
.fm-rem-feld textarea {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    font-family: inherit !important;
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
    color: #1d2327 !important;
    background: #ffffff !important;
    border: 1px solid #c3cad6 !important;
    border-radius: 6px !important;
}
.fm-rem-feld input {
    height: 42px !important;
}
.fm-rem-feld textarea {
    resize: vertical;
    min-height: 90px;
}
.fm-rem-feld input:focus,
.fm-rem-feld textarea:focus {
    outline: none !important;
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.2) !important;
}
.fm-rem-hinweis {
    margin-top: 5px;
    font-size: 0.83rem;
    color: #646970;
    font-style: italic;
}
.fm-rem-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
}
.fm-rem-knoepfe .fm-rem-knopf,
.fm-rem-knoepfe .fm-rem-knopf-zweit {
    height: 40px;
    line-height: 1.2;
    padding: 0 18px;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    width: auto !important;
}
.fm-rem-knopf-zweit {
    background: #ffffff;
    color: #2271b1;
    border: 1px solid #2271b1;
}
.fm-rem-knopf-zweit:hover {
    background: #f0f6fc;
}
.fm-rem-knopf-senden {
    color: #8a2424;
    border-color: #c9a2a2;
}
.fm-rem-link {
    background: none;
    border: none;
    padding: 0;
    color: #646970;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9rem;
}
.fm-rem .fm-message p {
    margin: 0;
    color: inherit;
}

/* ===============================================================
   Ab Version 1.21.0
   =============================================================== */

/* Übersicht Helferbedarf (WP-Admin, Frontend-Verwaltung, öffentlich) */
.fm-bedarf {
    max-width: none;
}
.fm-bedarf-export {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    margin: 4px 0 18px;
}
.fm-bedarf-link {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.95rem;
}
.fm-wrap .fm-bedarf-link {
    color: var(--zp-text, #ffffff);
}
.fm-bedarf-kacheln {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 20px;
}
@media (max-width: 760px) {
    .fm-bedarf-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fm-bedarf-kachel {
    background: #ffffff;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid #dcdfe4;
    color: #1d2327;
    min-width: 0;
}
.fm-bedarf-zahl {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: #17335c;
}
.fm-bedarf-kachel-offen .fm-bedarf-zahl {
    color: #b32d2e;
}
.fm-bedarf-label {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
    color: #50575e;
    line-height: 1.3;
}
.fm-bedarf-karte {
    background: #ffffff;
    color: #1d2327;
    border: 1px solid #dcdfe4;
    border-radius: 10px;
    padding: 20px 24px;
    margin: 0 0 18px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}
.fm-wrap .fm-bedarf-karte p,
.fm-bedarf-karte p {
    color: #50575e;
}
.fm-bedarf-karte .fm-bedarf-titel,
.fm-wrap .fm-bedarf-karte .fm-bedarf-titel {
    margin: 0 0 12px !important;
    font-size: 1.1rem;
    color: #17335c !important;
}
.fm-bedarf-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    color: #1d2327;
    background: #ffffff;
}
.fm-bedarf-tabelle th,
.fm-bedarf-tabelle td {
    border-bottom: 1px solid #e3e7ee;
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}
.fm-bedarf-tabelle thead th {
    border-bottom: 2px solid #c3cad6;
    background: #f6f7f9;
}
.fm-bedarf-tabelle tfoot th {
    background: #eef3fc;
    border-top: 2px solid #c3cad6;
}
.fm-bedarf-tabelle .zahl {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}
.fm-bedarf-rot   { color: #b32d2e; font-weight: 700; }
.fm-bedarf-gruen { color: #1e7e34; font-weight: 700; }
.fm-bedarf-klein {
    font-size: 0.85rem;
    color: #646970;
    font-weight: 400;
}

/* Umschalter Volunteers / Helferbedarf in der öffentlichen Übersicht */
.fm-ov-ansicht {
    margin-bottom: 16px;
}

/* Abschnittstitel in der Frontend-Verwaltung (z.B. Kontaktperson) */
.fm-wrap .fm-fe-abschnitt {
    margin: 26px 0 6px;
    padding-top: 14px;
    border-top: 1px solid var(--zp-line, rgba(255, 255, 255, 0.3));
}
@media (max-width: 600px) {
    .fm-bedarf-karte { padding: 14px 12px; }
    .fm-bedarf-tabelle { font-size: 0.82rem; }
    .fm-bedarf-tabelle th,
    .fm-bedarf-tabelle td { padding: 6px 6px; }
    .fm-bedarf-zahl { font-size: 1.5rem; }
}

/* Volle Breite (ab VM 1.21.1 / VIPM 1.3.1): Felder, Tabellen und Karten
   nutzen die ganze verfügbare Breite. Der blaue Rahmen hat keinen
   Einzug mehr und wird nie breiter als die Seite. */
.fm-wrap {
    box-sizing: border-box;
}
.fm-wrap .fm-fe-table {
    width: 100% !important;
}
@media (max-width: 640px) {
    .fm-wrap { padding: 22px 16px; }
}

/* ---------------------------------------------------------------
   Ab 1.22.0: Stammdaten, Mindestalter/Skills pro Einsatz
   --------------------------------------------------------------- */
.fm-wrap [hidden],
.fm-admin-wrap [hidden] {
    display: none !important;
}
.fm-slot-info {
    display: block;
    color: #555;
    font-size: 0.88em;
}
.fm-hint-einsatz-alter {
    color: #8a5a00;
}
.fm-sd-block {
    margin-bottom: 28px;
}
.fm-sd-block .fm-field-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
}
@media (max-width: 640px) {
    .fm-sd-block .fm-field-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Totale T-Shirts & Verpflegung in der Volunteers-Übersicht (ab 1.22.1) */
.fm-ov-totale {
    margin: 18px 0 26px;
}
.fm-ov-totale-auswahl {
    font-weight: normal;
    font-size: 0.8em;
    opacity: 0.8;
}
.fm-ov-totale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 18px;
}
.fm-wrap .fm-ov-totale-tabelle {
    margin: 0;
}
.fm-ov-totale-tabelle .fm-zahl {
    text-align: right;
    width: 90px;
}
.fm-ov-totale-summe td {
    font-weight: 700;
    border-top: 2px solid currentColor;
}
.fm-ov-totale-ohne td {
    opacity: 0.7;
    font-style: italic;
}

/* ---------------------------------------------------------------
   Helferanfragen (ab 1.23.0)
   --------------------------------------------------------------- */
.fm-hr .fm-hr-abschnitt {
    margin: 22px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--zp-line, rgba(255, 255, 255, 0.25));
    font-size: 1.05em;
}
.fm-hr .fm-field {
    margin-bottom: 14px;
}
.fm-hr .fm-hr-combo {
    position: relative;
}
/* Combobox (ab 1.23.4): frei tippen oder kompakt aus der Liste wählen */
.fm-hr .fm-hr-combo-feld {
    position: relative;
    width: 100%;
}
.fm-hr .fm-hr-combo-feld input[type="text"] {
    padding-right: 34px !important;
}
.fm-hr .fm-hr-combo-knopf {
    all: unset;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #5a6270;
    font-size: 14px;
    line-height: 1;
    border-left: 1px solid #e2e5ea;
    border-radius: 0 4px 4px 0;
    background: transparent;
}
.fm-hr .fm-hr-combo-knopf:hover {
    background: #eef2fa;
    color: #1d2327;
}
.fm-hr ul.fm-hr-liste {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    list-style: none;
    margin: 2px 0 0;
    padding: 2px 0;
    max-height: 196px;      /* ca. 7 Einträge, danach scrollen */
    overflow-y: auto;
    background: #ffffff;
    color: #1d2327;
    border: 1px solid #b8c2d6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    font-size: 0.92rem;
    text-align: left;
}
.fm-hr ul.fm-hr-liste[hidden] {
    display: none;
}
.fm-hr ul.fm-hr-liste li.fm-hr-option {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 5px 10px;
    list-style: none;
    line-height: 1.35;
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    color: #1d2327;
}
.fm-hr ul.fm-hr-liste li.fm-hr-option::before,
.fm-hr ul.fm-hr-liste li.fm-hr-option::marker {
    content: none;
}
.fm-hr ul.fm-hr-liste li.fm-hr-aktiv {
    background: #e8efff;
}
.fm-hr .fm-hr-opt-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fm-hr .fm-hr-opt-name mark {
    background: transparent;
    color: inherit;
    font-weight: 700;
    padding: 0;
}
.fm-hr .fm-hr-opt-meta {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85em;
    color: #6b7280;
}
.fm-hr ul.fm-hr-liste li.fm-hr-leer {
    margin: 0;
    padding: 6px 10px;
    list-style: none;
    color: #5a6270;
    font-style: italic;
    white-space: normal;
}
.fm-hr .fm-hr-warnung {
    margin-top: 8px;
    padding: 9px 12px;
    background: #fff4d1;
    color: #5c4400;
    border: 1px solid #f0d27a;
    border-radius: 6px;
    line-height: 1.45;
}
.fm-hr .fm-hr-warnung[hidden] {
    display: none;
}
.fm-hr .fm-hr-fehler {
    background: #fde8e8;
    color: #8a1f1f;
    border-color: #f2b8b8;
}
.fm-hr .fm-hr-vorschau {
    background: #ffffff;
    color: #222222;
    border-radius: 6px;
    padding: 16px 20px;
    overflow-x: auto;
}
.fm-hr .fm-hr-vorschau p {
    color: #222222;
}
.fm-hr textarea {
    padding: 7px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.fm-hr .fm-hr-filter input[type="text"] {
    flex: 1 1 260px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.fm-hr .fm-hr-tabelle td {
    vertical-align: top;
}
.fm-hr .fm-hr-einstellungen {
    margin-top: 30px;
    padding-top: 16px;
    border-top: 1px solid var(--zp-line, rgba(255, 255, 255, 0.3));
}
.fm-hr .fm-hr-einstellungen summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05em;
}
.fm-hr .fm-hr-einstellungen form {
    margin-top: 10px;
}
/* WP-Admin: heller Hintergrund, daher dunkle Hinweise und Trennlinien */
.fm-admin-wrap .fm-hr .fm-hint {
    color: #646970;
}
.fm-admin-wrap .fm-hr .fm-hr-abschnitt,
.fm-admin-wrap .fm-hr .fm-hr-einstellungen {
    border-top-color: #dcdcde;
}
.fm-admin-wrap .fm-hr .fm-hr-vorschau {
    border: 1px solid #dcdcde;
}
.fm-admin-wrap .fm-hr .fm-field input:not([type="checkbox"]),
.fm-admin-wrap .fm-hr .fm-field textarea {
    width: 100%;
    max-width: 720px;
}

.fm-hr .fm-hr-alle-loeschen {
    background: #ffffff;
    color: #b32d2e;
    border: 1px solid #b32d2e;
    border-radius: 4px;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.9em;
    cursor: pointer;
}
.fm-hr .fm-hr-alle-loeschen:hover {
    background: #b32d2e;
    color: #ffffff;
}
/* Absenderfelder: Person aus dem Personenverzeichnis übernommen (ab 1.23.5) */
.fm-hr .fm-field input.fm-hr-gewaehlt {
    border-color: #4caf50 !important;
    box-shadow: inset 3px 0 0 #4caf50;
}
/* Absender-Suchfelder (type="search", damit der Browser keine eigenen Adressvorschläge zeigt) */
.fm-hr .fm-hr-combo-feld input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.fm-hr .fm-hr-combo-feld input[type="search"]::-webkit-search-cancel-button,
.fm-hr .fm-hr-combo-feld input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}

/* ---------------------------------------------------------------
   Ab 1.25.0: Registration offen/geschlossen und Reset
   --------------------------------------------------------------- */
.fm-info {
    background: #fff8e1;
    border: 1px solid #f0d27a;
    border-left: 4px solid #f0b400;
    color: #5c4400;
}
.fm-registration-box {
    border: 1px solid #ddd;
    border-left: 6px solid #d63638;
    border-radius: 4px;
    padding: 12px 14px;
    margin: 0 0 18px;
    background: #fff;
    color: #222;
}
.fm-registration-box.fm-registration-offen {
    border-left-color: #00a32a;
}
.fm-registration-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
}
.fm-registration-status {
    font-size: 15px;
}
.fm-registration-box .fm-submit {
    margin: 0;
}
.fm-reset-box {
    margin-top: 28px;
    border: 1px solid #e6b3b3;
    border-radius: 4px;
    padding: 10px 14px;
    background: #fff6f6;
    color: #222;
}
.fm-reset-box summary {
    cursor: pointer;
    font-weight: 600;
    color: #b32d2e;
}
.fm-reset-box ul {
    margin: 4px 0 10px 20px;
    list-style: disc;
}
.fm-reset-box .fm-registration-zeile {
    justify-content: flex-start;
    margin-top: 6px;
}
.fm-reset-knopf {
    background: #d63638;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
}
.fm-reset-knopf:hover {
    background: #b32d2e;
}
.fm-wrap select:disabled,
.fm-wrap .fm-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.fm-wrap .fm-registration-box p,
.fm-wrap .fm-registration-box .fm-hint,
.fm-wrap .fm-registration-box label,
.fm-wrap .fm-reset-box p,
.fm-wrap .fm-reset-box li,
.fm-wrap .fm-reset-box label,
.fm-wrap .fm-reset-box .fm-hint,
.fm-wrap .fm-info,
.fm-wrap .fm-info strong {
    color: #222;
    font-style: normal;
}
.fm-wrap .fm-info { color: #5c4400; }
.fm-wrap .fm-registration-box .fm-hint-dark { color: #555; }
.fm-wrap .fm-reset-box input[type="text"] {
    background: #fff;
    color: #222;
    border: 1px solid #c3c4c7;
}
.fm-wrap .fm-registration-box .fm-hint { font-size: 13px; line-height: 1.45; }

/* ---------------------------------------------------------------
   Fahrzeug Management: Fahrzeugliste, Filter, Formular, Totale
   --------------------------------------------------------------- */

.fm-field textarea {
    width: 100% !important;
    padding: 7px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

.fm-wrap .fm-filter-zeile {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
    align-items: end !important;
}

.fm-wrap .fm-filter-zeile > .fm-field {
    margin-bottom: 0;
}

.fm-filter {
    background: var(--zp-soft, rgba(255, 255, 255, 0.07));
    border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.2));
    border-radius: 8px;
    padding: 14px 16px 4px;
    margin-bottom: 16px;
}

.fm-wrap p.fm-filter-knoepfe {
    margin: 12px 0 10px;
}

.fm-liste-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 10px;
}

.fm-hint-inline {
    margin-left: 8px;
    color: var(--zp-link, #d7e0ff);
    font-size: 0.9rem;
}

.fm-knopfgruppe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.fm-wrap a.fm-knopf {
    display: inline-block;
    text-decoration: none;
    color: var(--zp-text, #fff);
}

.fm-wrap a.fm-knopf-leise {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.6));
    border-radius: 4px;
    color: var(--zp-text, #fff);
    text-decoration: none;
    font-size: 0.95rem;
}

.fm-wrap a.fm-knopf-leise:hover {
    background: var(--zp-soft, rgba(255, 255, 255, 0.15));
}

.fm-totale {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.fm-totale-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.fm-totale-titel {
    color: var(--zp-link, #d7e0ff);
    font-size: 0.9rem;
    min-width: 120px;
}

.fm-totale-chip {
    background: var(--zp-soft, rgba(255, 255, 255, 0.14));
    border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.25));
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.88rem;
    color: var(--zp-text, #fff);
}

.fm-formular-karte {
    background: var(--zp-soft, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.3));
    border-radius: 8px;
    padding: 16px 20px 4px;
    margin-bottom: 20px;
}

.fm-formular-karte h3 {
    margin-top: 0;
}

.fm-fahrzeug-tabelle td {
    vertical-align: top;
}

.fm-fe-table tr.fm-zeile-aktiv,
.fm-fe-table tr.fm-zeile-aktiv:nth-child(even) {
    background: #fff6d6;
}

.fm-fe-table a {
    color: #2271b1;
}

.fm-fe-user {
    color: var(--zp-link, #e7ecff);
    font-size: 0.9rem;
}

.fm-pflicht-stern {
    color: color-mix(in srgb, #ffd166, #000 var(--zp-dunkel, 0%));
}

.fm-version {
    color: #777;
    font-size: 12px;
}

/* WP-Admin setzt eigene Breiten für Auswahlfelder – hier volle Breite */
.fm-wrap .fm-field select {
    max-width: none !important;
    width: 100% !important;
}

/* ---------------------------------------------------------------
   Reservationen (ab 1.1.0)
   --------------------------------------------------------------- */
.fm-wrap .fm-res-zeile-fahrzeug {
    grid-template-columns: minmax(220px, 2fr) minmax(90px, 0.6fr) minmax(200px, 1.6fr) !important;
}

.fm-bestaetigung {
    font-size: 1rem;
}

.fm-bestaetigung-tabelle {
    margin-top: 8px;
    border-collapse: collapse;
}

.fm-bestaetigung-tabelle th,
.fm-bestaetigung-tabelle td {
    text-align: left;
    padding: 2px 14px 2px 0;
    vertical-align: top;
    border: 0;
    background: none;
}

.fm-bestaetigung-tabelle th {
    font-weight: 600;
    white-space: nowrap;
}

.fm-fe-table .fm-zahl,
.fm-zahl {
    text-align: right;
}

.fm-fe-table td.fm-fehlt {
    color: #b32d2e;
    font-weight: 700;
}

.fm-fe-table tr.fm-summe td {
    font-weight: 700;
    border-top: 2px solid #555;
}

.fm-bedarf .fm-bedarf-tabelle {
    width: auto;
    min-width: 420px;
    margin-bottom: 6px;
}

.fm-bedarf {
    margin-bottom: 18px;
}

.fm-fe-table td.fm-klein {
    font-size: 0.82rem;
    color: #666;
}

.fm-wrap table.fm-fe-table.fm-bedarf-tabelle {
    width: auto !important;
    min-width: 420px;
    max-width: 100%;
}

/* ---------------------------------------------------------------
   1.2.0: Fahrzeugbild, Gruppierung nach Garage
   --------------------------------------------------------------- */
.fm-fe-table tr.fm-gruppe td,
.fm-fe-table tr.fm-gruppe:nth-child(even) td {
    background: #e8eef8;
    border-top: 2px solid #2250e3;
    color: #17335c;
}

.fm-gruppe-meta {
    margin-left: 12px;
    color: #4a5a78;
    font-size: 0.86rem;
}

.fm-gruppe-anzahl {
    float: right;
    color: #4a5a78;
    font-size: 0.86rem;
}

.fm-bild-zelle {
    width: 76px;
}

.fm-bild-klein {
    display: block;
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.fm-bild-aktuell {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.fm-bild-aktuell img {
    max-width: 160px;
    max-height: 120px;
    border-radius: 6px;
    border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.4));
    display: block;
}

.fm-wrap .fm-bild-feld input[type="file"] {
    color: var(--zp-text, #fff);
    padding: 6px 0;
}

.fm-wrap label.fm-bild-entfernen {
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fm-garage-fahrzeuge summary {
    cursor: pointer;
    color: #2271b1;
}

.fm-garage-fahrzeuge ul {
    margin: 4px 0 6px 18px;
    padding: 0;
}

/* ---------- 2.0.0: Zuordnungen und Bestätigungen ---------- */
.fm-mail-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--zp-soft, rgba(255, 255, 255, 0.10));
    border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.25));
    border-radius: 6px;
}
.fm-mail-leiste label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: normal; }
.fm-mail-leiste .fm-hint-inline { margin-left: 0; }
.fm-zu-fahrzeug { display: flex; align-items: center; gap: 8px; }
.fm-zu-fahrzeug img { width: 56px; height: 42px; object-fit: cover; border-radius: 3px; }
.fm-fe-table .fm-klein-text { font-size: 0.82rem; color: #666; }
.fm-fe-table .fm-fehlt-text { color: #b32d2e; font-weight: 700; }
.fm-fe-table .fm-offen { color: #9a6700; font-weight: 700; }
.fm-zu-tabelle td { vertical-align: top; }

/* ---------- 2.1.0: Reservation mit Personenverzeichnis, Bestellungen, Reminder ---------- */
.fm-falle { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.fm-pv-block { border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.3)); border-radius: 6px; padding: 10px 14px 4px; margin: 0 0 14px; }
.fm-pv-block legend { padding: 0 6px; font-weight: 700; }
.fm-pv-suche-feld { position: relative; }
.fm-pv-liste { display: none; position: absolute; z-index: 50; left: 0; right: 0; top: 100%; max-height: 280px; overflow-y: auto; background: #fff; color: #222; border: 1px solid #b8c4dc; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.fm-pv-liste.fm-offen-liste { display: block; }
.fm-pv-option { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid #eef1f6; background: #fff; color: #222; cursor: pointer; font-size: 0.95rem; }
.fm-pv-option:hover, .fm-pv-option:focus { background: #e8f0ff; }
.fm-pv-option span { display: block; font-size: 0.82rem; color: #666; }
.fm-pv-leer { padding: 8px 10px; color: #666; font-size: 0.9rem; }
.fm-wrap input.fm-readonly { background: #e9edf5 !important; color: #333; }
.fm-hint-klein { display: block; font-size: 0.8rem; opacity: 0.85; margin-top: 3px; }
.fm-fe-table .fm-ok-text { color: #2e7d32; font-weight: 700; }
.fm-mail-block { border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.25)); border-radius: 6px; padding: 8px 12px; margin: 10px 0; }
.fm-mail-block summary { cursor: pointer; font-weight: 700; }
.fm-abschnitt { margin: 18px 0 8px; font-size: 1.05rem; }
.fm-status-karte { background: var(--zp-soft, rgba(255, 255, 255, 0.12)); border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.25)); border-radius: 6px; padding: 10px 12px; margin: 0 0 12px; }
.fm-bestellung { background: var(--zp-soft, rgba(255, 255, 255, 0.06)); border: 1px solid var(--zp-line, rgba(255, 255, 255, 0.25)); border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
.fm-bestellung-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.fm-bestellung-kopf h4 { margin: 0 0 2px; font-size: 1.15rem; }
.fm-bestellung-kopf .fm-klein-text { color: var(--zp-link, #d7e0ff); font-size: 0.85rem; }
.fm-bestellung-status { text-align: right; }
.fm-bestellung-status .fm-offen, .fm-bestellung-status .fm-fehlt-text { color: color-mix(in srgb, #ffd479, #000 var(--zp-dunkel, 0%)); font-weight: 700; }
.fm-bestellung-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; }