/* Alle Elemente innerhalb des Formulars auf border-box zwingen, damit
   Theme-Vorgaben (Padding/Border) die Breitenberechnung nicht durcheinander
   bringen. */
.vm-wrap,
.vm-wrap *,
.vm-wrap *::before,
.vm-wrap *::after {
    box-sizing: border-box;
}

.vm-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. */
.vm-wrap h2,
.vm-wrap h3,
.vm-wrap h4 {
    color: var(--zp-text, #ffffff);
}

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

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

.vm-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. */
.vm-wrap .vm-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;
}

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

.vm-wrap .vm-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). */
.vm-wrap .vm-field-row.vm-row-hidden {
    display: none !important;
}

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

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

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

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

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

.vm-wrap .vm-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. */
.vm-wrap .vm-field-row > .vm-field {
    margin-bottom: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.vm-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. */
.vm-fe-filter-row .vm-fe-link-small,
.vm-fe-export-row .vm-fe-link-small {
    color: var(--zp-text, #ffffff);
}

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

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

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

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

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

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

/* Labels sitzen standardmässig (siehe ".vm-wrap label"/.vm-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. */
.vm-slots-group label,
.vm-verein-existing label,
.vm-fe-reg-form label {
    color: #222;
}

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

/* ---------------------------------------------------------------
   VIP-Formulare (seit 1.3.0): Raster über die ganze
   Breite, gleich hohe Felder, gleichmässige Abstände. Bewusst mit
   eigenen Klassen und !important, damit Theme-Vorgaben für Eingabe-
   felder (Breite, Ränder, Schriftgrösse) das Raster nicht stören.
   --------------------------------------------------------------- */

.vipm-wrap .vm-fe-admin,
.vipm-wrap .vipm-form {
    max-width: none !important;
    width: 100% !important;
}

.vipm-wrap .vipm-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 22px 24px !important;
    width: 100% !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
}

.vipm-wrap .vipm-feld {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: span 6;
}

.vipm-wrap .vipm-span-2 { grid-column: span 2; }
.vipm-wrap .vipm-span-3 { grid-column: span 3; }
.vipm-wrap .vipm-span-4 { grid-column: span 4; }
.vipm-wrap .vipm-span-6 { grid-column: span 6; }

/* Tablet: Name/Vorname nebeneinander, Funktion darunter */
@media (max-width: 900px) {
    .vipm-wrap .vipm-span-2 { grid-column: span 3; }
    .vipm-wrap .vipm-span-4 { grid-column: span 6; }
}

/* Handy: alles untereinander */
@media (max-width: 600px) {
    .vipm-wrap .vipm-feld { grid-column: span 6 !important; }
}

.vipm-wrap .vipm-feld label {
    display: block !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--zp-text, #ffffff);
}

.vipm-wrap .vipm-pflicht {
    color: color-mix(in srgb, #ffcf5c, #000 var(--zp-dunkel, 0%));
    font-weight: 700;
}

.vipm-wrap .vipm-feld input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: #1d2327 !important;
    background: #ffffff !important;
    border: 1px solid #c3cad6 !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.vipm-wrap .vipm-feld input::placeholder {
    color: #9aa3b0;
    opacity: 1;
}

.vipm-wrap .vipm-feld input:focus {
    outline: none !important;
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.25) !important;
}

.vipm-wrap .vipm-feld input[disabled] {
    background: #eef1f5 !important;
    color: #50575e !important;
    cursor: not-allowed;
}

.vipm-wrap .vipm-hinweis {
    margin-top: 6px;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--zp-link, #d7e0ff);
}

.vipm-wrap .vipm-einleitung {
    margin: 0 0 22px !important;
    font-size: 1rem;
    line-height: 1.5;
}

.vipm-wrap .vipm-knoepfe {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 !important;
}

.vipm-wrap .vipm-knopf {
    width: auto !important;
    min-width: 180px;
    height: 48px;
    padding: 0 28px !important;
    font-size: 1rem !important;
    font-weight: 600;
    border-radius: 7px !important;
}

.vipm-wrap .vipm-abbrechen {
    color: var(--zp-text, #ffffff) !important;
    font-weight: 600;
    text-decoration: underline;
}

/* Helle Karte (Übersicht und Erfassung über den Firmen-Link) */
.vipm-wrap .vipm-karte {
    background: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 28px 32px 30px !important;
    margin: 20px 0 28px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    color: #1d2327;
}

.vipm-wrap .vipm-karte .vipm-karte-titel {
    color: #17335c !important;
    font-size: 1.3rem !important;
    margin: 0 0 22px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #e3e7ee;
}

.vipm-wrap .vipm-karte .vipm-feld label { color: #1d2327; }
.vipm-wrap .vipm-karte .vipm-pflicht { color: #c0392b; }
.vipm-wrap .vipm-karte .vipm-hinweis { color: #646970; }
.vipm-wrap .vipm-karte .vipm-abbrechen { color: #2271b1 !important; }

@media (max-width: 600px) {
    .vipm-wrap .vipm-karte { padding: 20px 18px 22px !important; }
    .vipm-wrap .vipm-knopf { width: 100% !important; }
}

/* Volle Breite (seit 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. */
.vm-wrap {
    box-sizing: border-box;
}
.vm-wrap .vm-fe-table {
    width: 100% !important;
}
@media (max-width: 640px) {
    .vm-wrap { padding: 22px 16px; }
}

/* ---------------------------------------------------------------
   Anlass-Verwaltung (Anlass Management 2.0.0)
   --------------------------------------------------------------- */

/* WP-Admin */
.vipm-anlass-auswahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; padding: 10px 14px; background: #fff; border: 1px solid #c3c4c7; border-left: 4px solid #2271b1; }
.vipm-anlass-auswahl select { min-width: 280px; max-width: 100%; }
.vipm-badge-label { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 10px; background: #e7f0fa; color: #135e96; font-size: 11px; font-weight: 600; }
.vipm-anlass-tabelle code { font-size: 11px; }
.vipm-aktionen { white-space: nowrap; }

.vipm-badges-layout { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 24px; align-items: start; margin-top: 12px; }
.vipm-badges-steuerung { background: #fff; border: 1px solid #c3c4c7; padding: 4px 16px 16px; }
.vipm-badges-scroll { max-height: 260px; overflow: auto; border: 1px solid #dcdcde; padding: 6px 8px; background: #fbfbfc; }
.vipm-badges-scroll label { display: block; padding: 2px 0; }
.vipm-badges-info { font-weight: 600; }
.vipm-badges-vorschau { background: #fff; border: 1px solid #c3c4c7; padding: 10px; position: sticky; top: 46px; }
.vipm-badges-vorschau-kopf { margin-bottom: 8px; }
.vipm-badges-vorschau iframe { width: 100%; height: 78vh; min-height: 520px; border: 0; background: #d5d9df; }
@media (max-width: 1100px) { .vipm-badges-layout { grid-template-columns: 1fr; } .vipm-badges-vorschau { position: static; } }

.vipm-etikette-edit { background: #fff; border: 1px solid #c3c4c7; padding: 4px 18px 10px; margin: 16px 0 24px; }
.vipm-etikette-raster { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
@media (max-width: 900px) { .vipm-etikette-raster { grid-template-columns: 1fr; } }

.vipm-praesenz-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 12px 0 18px; }
.vipm-praesenz-karte { background: #fff; border: 1px solid #c3c4c7; padding: 2px 16px 12px; }
.vipm-praesenz-karte h2 { font-size: 15px; }
.vipm-praesenz-karte .button { margin: 0 4px 6px 0; }
.vipm-zaehler { font-size: 15px; }
@media (max-width: 1100px) { .vipm-praesenz-karten { grid-template-columns: 1fr; } }
.vipm-praesenz-werkzeug { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; }
.vipm-praesenz-werkzeug input[type=search] { min-width: 260px; }
.vipm-praesenz-werkzeug .vipm-filter label { margin-right: 10px; }
.vipm-praesenz-tabelle input[type=checkbox] { transform: scale(1.3); margin-left: 8px; }

/* Direktanmeldung [anlass_anmeldung] */
.vipm-wrap .vipm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.vipm-wrap .vipm-anlass-info { background: #ffffff; color: #1d2327; border-radius: 10px; padding: 18px 22px; margin: 0 0 20px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); line-height: 1.5; }
.vipm-wrap .vipm-anlass-name { font-size: 1.35rem; font-weight: 700; color: #17335c; margin-bottom: 4px; }
.vipm-wrap .vipm-anlass-schluss { margin-top: 6px; font-size: 0.9rem; color: #646970; }
.vipm-wrap .vipm-anlass-wahl .vipm-anlass-option { display: flex !important; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0 0 10px !important; border: 1px solid #dcdfe5; border-radius: 8px; cursor: pointer; color: #1d2327 !important; font-weight: normal !important; }
.vipm-wrap .vipm-anlass-wahl .vipm-anlass-option:hover { border-color: #2271b1; }
.vipm-wrap .vipm-anlass-wahl .vipm-anlass-option input { margin-top: 4px; transform: scale(1.2); }
.vipm-wrap .vipm-person { margin: 0 0 18px !important; padding-top: 20px !important; }
.vipm-wrap .vipm-person-kopf { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #e3e7ee; margin: 0 0 18px; }
.vipm-wrap .vipm-person-kopf .vipm-karte-titel { border: 0 !important; margin: 0 !important; padding: 0 0 10px !important; }
.vipm-wrap .vipm-entfernen { color: #b32d2e; font-size: 0.9rem; }
.vipm-wrap .vipm-person .vipm-grid { margin-bottom: 0 !important; }
.vipm-wrap .vipm-weitere { height: 48px; padding: 0 22px; border-radius: 7px; border: 2px dashed #ffffff; background: transparent; color: var(--zp-text, #ffffff); font-size: 1rem; font-weight: 600; cursor: pointer; }
.vipm-wrap .vipm-weitere:hover { background: var(--zp-soft, rgba(255, 255, 255, 0.12)); }
.vipm-wrap .vipm-direkt-hinweis { margin-top: 12px; }
.vipm-wrap.vipm-direkt .vm-fe-table { background: #fff; color: #1d2327; }

/* Check-in [anlass_checkin] */
.vipm-checkin .vipm-ci-wahl select { width: 100%; height: 44px; font-size: 1rem; margin-bottom: 10px; }
.vipm-checkin .vipm-ci-zaehler { font-size: 1.6rem; font-weight: 700; margin: 6px 0 12px; }
.vipm-checkin .vipm-ci-scan { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vipm-checkin .vipm-ci-scan input { flex: 1 1 200px; height: 48px; font-size: 1.1rem; padding: 0 12px; border-radius: 7px; border: 1px solid #c3cad6; }
.vipm-checkin video { width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; background: #000; }
.vipm-checkin .vipm-ci-meldung { min-height: 1.6em; padding: 0; margin-bottom: 8px; font-weight: 600; border-radius: 7px; }
.vipm-checkin .vipm-ci-meldung.ok { background: #d4edda; color: #155724; padding: 10px 12px; }
.vipm-checkin .vipm-ci-meldung.hinweis { background: #fff3cd; color: #6b4e00; padding: 10px 12px; }
.vipm-checkin .vipm-ci-meldung.fehler { background: #f8d7da; color: #721c24; padding: 10px 12px; }
.vipm-checkin .vipm-ci-filter { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.vipm-checkin .vipm-ci-filter input[type=search] { flex: 1 1 200px; height: 42px; padding: 0 12px; border-radius: 7px; border: 1px solid #c3cad6; }
.vipm-checkin .vipm-ci-liste { list-style: none; margin: 0; padding: 0; background: #fff; color: #1d2327; border-radius: 10px; overflow: hidden; }
.vipm-checkin .vipm-ci-liste li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #eceff3; }
.vipm-checkin .vipm-ci-liste li.da { background: #eefaf0; }
.vipm-checkin .vipm-ci-liste li.leer { color: #646970; }
.vipm-checkin .ci_knopf { flex: 0 0 44px; height: 44px; border-radius: 8px; border: 2px solid #8c8f94; background: #fff; font-size: 1.4rem; font-weight: 700; color: #1e7e34; cursor: pointer; }
.vipm-checkin li.da .ci_knopf { border-color: #1e7e34; background: #d4edda; }
.vipm-checkin .ci_text { flex: 1 1 auto; min-width: 0; }
.vipm-checkin .ci_text small { display: block; color: #646970; }
.vipm-checkin .ci_nr { font-family: "Courier New", monospace; font-size: 0.85rem; text-align: right; color: #50575e; }
.vipm-wrap.vipm-direkt > p > a { color: var(--zp-text, #ffffff) !important; font-weight: 600; }

/* Übersicht: Anlass-Auswahl gross und gut lesbar (2.0.1) */
.vipm-wrap .vm-fe-filter-row .vipm-anlass-label { font-weight: 600; color: var(--zp-text, #ffffff); margin: 0; }
.vipm-wrap .vm-fe-filter-row select.vipm-anlass-select {
    flex: 1 1 340px;
    width: 100% !important;
    max-width: 640px !important;
    min-width: 0;
    height: 48px !important;
    padding: 0 14px !important;
    font-size: 1rem !important;
    color: #1d2327 !important;
    background-color: #ffffff !important;
    border: 1px solid #c3cad6 !important;
    border-radius: 7px !important;
}

/* ---------------------------------------------------------------
   Frontend-Verwaltung [anlass_verwaltung] / [anlass_badges] (2.1.0)
   Die Masken sind dieselben wie im WP-Admin; hier bekommen sie ein
   eigenes, vom Theme unabhängiges Aussehen auf einer weissen Fläche.
   --------------------------------------------------------------- */
.vipm-fe-verwaltung .vipm-fe-reiter { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; }
.vipm-fe-verwaltung .vipm-fe-reiter a { padding: 10px 18px; border-radius: 8px 8px 0 0; background: var(--zp-soft, rgba(255,255,255,.15)); color: var(--zp-text, #fff) !important; text-decoration: none; font-weight: 600; }
.vipm-fe-verwaltung .vipm-fe-reiter a.aktiv { background: #fff; color: #17335c !important; }
.vipm-fe-verwaltung .vipm-fe-panel { background: #fff; color: #1d2327; border-radius: 0 10px 10px 10px; padding: 22px 26px 26px; box-shadow: 0 4px 18px rgba(0,0,0,.18); font-size: 15px; line-height: 1.5; overflow-x: auto; }
.vipm-fe-panel .wrap { margin: 0; }
.vipm-fe-panel h1, .vipm-fe-panel .wp-heading-inline { display: inline-block; font-size: 1.4rem !important; color: #17335c !important; margin: 0 12px 14px 0 !important; }
.vipm-fe-panel h2 { font-size: 1.15rem !important; color: #17335c !important; margin: 24px 0 10px !important; }
.vipm-fe-panel hr.wp-header-end { display: none; }
.vipm-fe-panel a { color: #2271b1; }
.vipm-fe-panel label { color: #1d2327 !important; }
.vipm-fe-panel code { background: #f0f2f5; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.vipm-fe-panel .description { color: #646970; font-size: 13px; }
.vipm-fe-panel .clear { clear: both; }
.vipm-fe-panel .subsubsub { list-style: none; margin: 0 0 10px; padding: 0; display: flex; gap: 6px; font-size: 14px; }
.vipm-fe-panel .subsubsub li { margin: 0; }
.vipm-fe-panel .subsubsub a.current { font-weight: 700; color: #1d2327; text-decoration: none; }
.vipm-fe-panel .page-title-action, .vipm-fe-panel .button {
    display: inline-block; padding: 7px 14px; border: 1px solid #2271b1; border-radius: 6px; background: #f6f7f7;
    color: #2271b1 !important; font-size: 14px; line-height: 1.4; text-decoration: none; cursor: pointer; vertical-align: middle; }
.vipm-fe-panel .button-primary { background: #2271b1; color: #fff !important; }
.vipm-fe-panel .button-hero { padding: 12px 22px; font-size: 16px; }
.vipm-fe-panel .button-link, .vipm-fe-panel .button-link-delete { background: none; border: 0; padding: 0; color: #2271b1; text-decoration: underline; cursor: pointer; font: inherit; }
.vipm-fe-panel .button-link-delete { color: #b32d2e; }
.vipm-fe-panel table.widefat { width: 100%; border-collapse: collapse; border: 1px solid #dcdcde; margin: 6px 0 10px; }
.vipm-fe-panel table.widefat th, .vipm-fe-panel table.widefat td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #eceff3; font-size: 14px; }
.vipm-fe-panel table.widefat thead th { background: #f6f7f7; font-weight: 600; }
.vipm-fe-panel table.striped tbody tr:nth-child(odd) { background: #fbfbfc; }
.vipm-fe-panel table.form-table { width: 100%; border-collapse: collapse; }
.vipm-fe-panel table.form-table th { width: 210px; padding: 14px 12px 14px 0; text-align: left; vertical-align: top; font-weight: 600; }
.vipm-fe-panel table.form-table td { padding: 10px 0; }
.vipm-fe-panel input[type=text], .vipm-fe-panel input[type=number], .vipm-fe-panel input[type=date], .vipm-fe-panel input[type=time],
.vipm-fe-panel input[type=search], .vipm-fe-panel input[type=email], .vipm-fe-panel select {
    height: 40px; padding: 0 10px; border: 1px solid #c3cad6; border-radius: 6px; background: #fff; color: #1d2327; font-size: 15px; max-width: 100%; box-sizing: border-box; }
.vipm-fe-panel .regular-text { width: 26em; }
.vipm-fe-panel .large-text { width: 100%; }
.vipm-fe-panel .notice { border-left: 4px solid #2271b1; background: #f0f6fc; padding: 4px 14px; margin: 0 0 14px; border-radius: 4px; }
.vipm-fe-panel .notice p { margin: 8px 0; }
.vipm-fe-panel .notice-success { border-left-color: #00a32a; background: #edfaef; }
.vipm-fe-panel .notice-error { border-left-color: #d63638; background: #fcf0f1; }
.vipm-fe-panel .notice-warning { border-left-color: #dba617; background: #fcf9e8; }
.vipm-fe-panel .vipm-badges-steuerung, .vipm-fe-panel .vipm-badges-vorschau, .vipm-fe-panel .vipm-etikette-edit { border-color: #dcdcde; border-radius: 8px; }
.vipm-fe-panel .vipm-badges-vorschau { top: 10px; }
.vipm-fe-panel .vipm-korrektur { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.vipm-fe-panel .vipm-korrektur input { width: 90px; }
.vipm-fe-panel .vipm-fe-anlass-auswahl label { color: #1d2327 !important; }
.vipm-fe-anlass-auswahl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; padding: 10px 14px; background: #f0f6fc; border-left: 4px solid #2271b1; border-radius: 4px; }
.vipm-fe-anlass-auswahl label { font-weight: 600; margin: 0; }
.vipm-fe-anlass-auswahl select.vipm-anlass-select { flex: 1 1 340px; max-width: 640px; height: 44px; font-size: 1rem; }
@media (max-width: 700px) {
    .vipm-fe-verwaltung .vipm-fe-panel { padding: 16px 14px; }
    .vipm-fe-panel table.form-table th, .vipm-fe-panel table.form-table td { display: block; width: auto; padding: 6px 0; }
    .vipm-fe-panel .regular-text { width: 100%; }
}
.vipm-fe-panel, .vipm-fe-panel p, .vipm-fe-panel strong, .vipm-fe-panel td, .vipm-fe-panel th, .vipm-fe-panel li, .vipm-fe-panel span:not(.vipm-badge-label) { color: #1d2327; }
.vipm-fe-panel .description, .vipm-fe-panel span.description { color: #646970; }

/* Einladungslink mit «Link kopieren» (2.2.0) */
.vipm-link { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; max-width: 100%; }
.vipm-link input { width: 30em; max-width: 100%; font-family: Consolas, Monaco, monospace; font-size: 12.5px; height: 32px; padding: 0 8px; border: 1px solid #c3cad6; border-radius: 5px; background: #f6f7f7; color: #1d2327; }
.vipm-link-kurz input { width: 17em; }
.vipm-link-kopieren { height: 32px; padding: 0 12px; border: 1px solid #2271b1; border-radius: 5px; background: #2271b1; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vipm-link-kopieren:hover { background: #135e96; }
.vipm-link-fehlt { color: #b32d2e; font-size: 13px; }
.vipm-link-box .vipm-link input { width: 40em; }

/* ---------------------------------------------------------------
   Admin-Seite [anlass_admin] (2.2.0) – wie [volunteer_admin]
   --------------------------------------------------------------- */
.vipm-fe-adminseite .vm-fe-tab-content { color: var(--zp-text, #fff); }
.vipm-fe-adminseite .vm-fe-tab-content > p, .vipm-fe-adminseite .vm-fe-tab-content h3 { color: var(--zp-text, #fff); }
.vipm-fe-adminseite h3 { margin: 22px 0 10px; font-size: 1.15rem; }
.vipm-fe-adminseite .vipm-fe-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; }
.vipm-fe-adminseite .vipm-fe-breit { grid-column: 1 / -1; }
@media (max-width: 700px) { .vipm-fe-adminseite .vipm-fe-raster { grid-template-columns: 1fr; } }
.vipm-fe-adminseite .vm-field select, .vipm-fe-adminseite .vm-field textarea,
.vipm-fe-adminseite .vm-field input[type=date], .vipm-fe-adminseite .vm-field input[type=time] {
    width: 100% !important; padding: 7px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; background: #fff; color: #1d2327; box-sizing: border-box; }
.vipm-fe-adminseite .vm-field textarea { font-family: inherit; line-height: 1.4; }
.vipm-fe-adminseite .vm-hint { color: var(--zp-link, #d7e0ff); font-size: 0.85rem; margin-top: 3px; }
.vipm-fe-adminseite .vm-hint a, .vipm-fe-adminseite .vm-fe-tab-content > p a { color: var(--zp-text, #ffffff); }
.vipm-fe-adminseite .vm-field code, .vipm-fe-adminseite .vm-hint code, .vipm-fe-adminseite .vm-fe-tab-content > p code { background: var(--zp-soft, rgba(255,255,255,.15)); color: var(--zp-text, #fff); padding: 0 4px; border-radius: 3px; }
.vipm-fe-adminseite .vipm-optional { font-weight: 400; opacity: .8; }
.vipm-fe-adminseite .vm-fe-form-inline input[type=email] { padding: 7px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
.vipm-fe-adminseite .vipm-fe-filter { display: flex; gap: 14px; margin: -4px 0 8px; }
.vipm-fe-adminseite .vipm-fe-filter a { color: var(--zp-link, #e7ecff); }
.vipm-fe-adminseite .vipm-fe-filter a.aktiv { color: var(--zp-text, #fff); font-weight: 700; text-decoration: none; }
.vipm-fe-adminseite .vm-fe-table a { color: #2271b1; }
.vipm-fe-adminseite .vm-fe-table code { background: #f0f2f5; color: #1d2327; padding: 0 4px; border-radius: 3px; }
.vipm-fe-adminseite .vipm-fe-id { color: #8c8f94; font-size: 0.8rem; }
.vipm-fe-adminseite .vipm-fe-anlaesse td { vertical-align: top; }
.vipm-fe-adminseite .vipm-fe-anlaesse .vipm-link input { width: 13em; }
.vipm-fe-adminseite .vipm-link-box-fe { background: #fff; color: #1d2327; border-left: 5px solid #00a32a; border-radius: 6px; padding: 12px 16px; margin: 0 0 18px; }
.vipm-fe-adminseite .vipm-link-box-fe .vipm-link { margin-top: 8px; }
.vipm-fe-adminseite .vipm-link-box-fe .vipm-link input { width: 36em; }
.vipm-fe-adminseite .vipm-fe-linkzeile { background: var(--zp-soft, rgba(255,255,255,.1)); padding: 10px 12px; border-radius: 6px; }
.vipm-fe-adminseite .vipm-fe-linkzeile .vipm-link-fehlt, .vipm-fe-adminseite .vipm-link-box-fe .vipm-link-fehlt { color: color-mix(in srgb, #ffd2cc, #000 var(--zp-dunkel, 0%)); }
.vipm-fe-adminseite .vipm-link-box-fe .vipm-link-fehlt { color: #b32d2e; }
.vipm-fe-adminseite .vipm-fe-logo { max-width: 140px; height: auto; margin-top: 8px; background: #fff; padding: 6px; border-radius: 4px; }
.vipm-fe-adminseite .vipm-fe-panel { border-radius: 10px; }
.vipm-fe-adminseite .vipm-fe-panel { background: #fff; color: #1d2327; border-radius: 10px; padding: 22px 26px 26px; box-shadow: 0 4px 18px rgba(0,0,0,.18); font-size: 15px; line-height: 1.5; overflow-x: auto; }
.vipm-fe-adminseite .vipm-fe-panel h1 { display: none; }   /* Titel steht schon im Reiter */
@media (max-width: 700px) { .vipm-fe-adminseite .vipm-fe-panel { padding: 16px 14px; } }

/* Reiter Teilnehmende (2.3.0) */
.vipm-fe-adminseite .vipm-fe-anlassinfo { color: var(--zp-text, #fff); margin: -6px 0 10px; }
.vipm-fe-adminseite .vipm-fe-unterreiter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.vipm-fe-adminseite .vipm-fe-unterreiter a { padding: 7px 16px; border-radius: 18px; background: var(--zp-soft, rgba(255,255,255,.15)); color: var(--zp-text, #fff); text-decoration: none; font-weight: 600; }
.vipm-fe-adminseite .vipm-fe-unterreiter a.aktiv { background: #fff; color: #17335c; }
.vipm-fe-adminseite .vipm-fe-badgeexport { margin: 0 0 6px; }
.vipm-fe-adminseite .vipm-fe-badgeexport .vm-fe-link-small { color: var(--zp-text, #fff); }
.vipm-fe-adminseite .vipm-fe-anzahl input[type=number] { width: 64px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; }
.vipm-fe-adminseite .vipm-ov-tab .vm-fe-filter-row select, .vipm-fe-adminseite .vipm-ov-tab .vm-fe-filter-row input[type=text] { background: #fff; color: #1d2327; }

/* Offene Check-in-Seite [anlass_checkin] (2.3.0) */
.vipm-scan { max-width: 720px; margin-left: auto !important; margin-right: auto !important; text-align: center; }
.vipm-scan h2 { margin-bottom: 14px; }
.vipm-scan .vipm-scan-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.vipm-scan .vipm-scan-form label { width: 100%; font-weight: 600; color: var(--zp-text, #fff); }
.vipm-scan .vipm-scan-form input { flex: 1 1 320px; height: 64px; font-size: 1.6rem; text-align: center; letter-spacing: 1px; border-radius: 10px; border: 2px solid #c3cad6; padding: 0 14px; font-family: "Courier New", monospace; }
.vipm-scan .vipm-scan-form button { height: 64px; min-width: 90px; font-size: 1.1rem; border-radius: 10px; }
.vipm-scan .vipm-scan-ergebnis { margin-top: 22px; border-radius: 14px; padding: 0; min-height: 0; }
.vipm-scan .vipm-scan-ergebnis.ok, .vipm-scan .vipm-scan-ergebnis.hinweis, .vipm-scan .vipm-scan-ergebnis.fehler { padding: 22px 20px; color: #1d2327; }
.vipm-scan .vipm-scan-ergebnis.ok { background: #d4edda; border: 3px solid #1e7e34; }
.vipm-scan .vipm-scan-ergebnis.hinweis { background: #fff3cd; border: 3px solid #b8860b; }
.vipm-scan .vipm-scan-ergebnis.fehler { background: #f8d7da; border: 3px solid #b32d2e; }
.vipm-scan .vipm-scan-status { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.vipm-scan .vipm-scan-anlass { font-size: 1rem; text-transform: uppercase; letter-spacing: .5px; color: #50575e; margin-bottom: 6px; }
.vipm-scan .vipm-scan-name { font-size: 2.2rem; font-weight: 700; line-height: 1.15; }
.vipm-scan .vipm-scan-zeile { font-size: 1.25rem; margin-top: 4px; }
.vipm-scan .vipm-scan-nr { font-family: "Courier New", monospace; color: #50575e; margin-top: 10px; }
.vm-wrap .vipm-fe-anlass-auswahl label { color: #17335c !important; }