/* ======================================================================================================
   Eventplaner (docs/Eventplaner/README.md, Mockup docs/ui/eventplaner-mockup/index.html, 4. Fassung).
   Aufbau wie die abgenommene Kochplanung (ProduktionKochplan.razor.css, Abschnitt „Neue Oberflaeche“):
   Kopf (Titel | Felder | Aktionen), Kennzahlkarten, Band, Arbeitsliste + Leiste 380 px.
   Nur --vdm-*-Tokens, damit alle acht Farbschemata passen; Fettung nur fuer Titel und Zahlen.
   Global statt scoped, weil drei Seiten (Events, Event, Partner) dieselben Bausteine nutzen.
   ====================================================================================================== */

.evp {
    --evp-blau: var(--vdm-blau, #2563eb);
    --evp-rand: var(--vdm-border-card);
    --evp-rand-stark: color-mix(in srgb, var(--vdm-border-card) 55%, var(--vdm-text-strong));
    --evp-leise: color-mix(in srgb, var(--vdm-text-muted) 70%, var(--vdm-text-strong));
    --evp-flaeche: var(--vdm-surface-card);
    --evp-flaeche-leise: var(--vdm-surface-card-muted);
    color: var(--vdm-text-strong);
    background: var(--vdm-surface-app);
    font-variant-numeric: tabular-nums;
    min-height: 100%;
    padding-bottom: 20px;
}
.evp button { cursor: pointer; font: inherit; }
.evp button:disabled, .evp input:disabled, .evp select:disabled, .evp textarea:disabled { opacity: .55; cursor: not-allowed; }
.evp-spacer { flex: 1 1 auto; }
.evp-leise { color: var(--evp-leise); font-size: 0.8rem; }
.evp-eyebrow { font-size: 0.73333rem; letter-spacing: .1em; text-transform: uppercase; color: var(--evp-leise); }

/* ---------- Knoepfe, Marken, Chips ---------- */
.evp-knopf {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
    border: 1px solid var(--evp-rand); border-radius: 8px; background: var(--evp-flaeche);
    color: var(--vdm-text-strong); font-size: 0.83333rem; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.evp-knopf:hover:not(:disabled) { border-color: var(--vdm-accent); color: var(--vdm-text-strong); }
.evp-knopf.is-klein { height: 28px; padding: 0 10px; font-size: 0.8rem; }
.evp-knopf.is-ghost { background: transparent; }
.evp-knopf.is-primaer { background: var(--vdm-accent); border-color: var(--vdm-accent); color: var(--vdm-on-ink, #fff); }
.evp-knopf.is-primaer:hover:not(:disabled) { background: var(--vdm-accent-green-hover, var(--vdm-accent)); color: var(--vdm-on-ink, #fff); }
.evp-knopf.is-gefahr { color: var(--vdm-danger-text); border-color: var(--vdm-danger-border); }
.evp-knopf > span { color: inherit; }

.evp-marke {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; border: 1px solid transparent;
    font-size: 0.76667rem; font-weight: 400; white-space: nowrap; line-height: 1.5;
}
.evp-marke.is-ok { color: var(--vdm-ok-text); background: var(--vdm-ok-bg); border-color: var(--vdm-ok-border); }
.evp-marke.is-warn { color: var(--vdm-warn-text); background: var(--vdm-warn-bg); border-color: var(--vdm-warn-border); }
.evp-marke.is-rot { color: var(--vdm-danger-text); background: var(--vdm-danger-bg); border-color: var(--vdm-danger-border); }
.evp-marke.is-info { color: color-mix(in srgb, var(--evp-blau) 62%, var(--vdm-text-strong)); background: color-mix(in srgb, var(--evp-blau) 10%, var(--evp-flaeche)); border-color: color-mix(in srgb, var(--evp-blau) 35%, transparent); }
.evp-marke.is-grau { color: var(--vdm-text-strong); background: var(--evp-flaeche-leise); border-color: var(--evp-rand); }

.evp-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
    border: 1px solid var(--evp-rand); background: var(--evp-flaeche); color: var(--vdm-text-strong);
    font-size: 0.8rem; font-weight: 400; white-space: nowrap;
}
.evp-chip small { font-size: 0.73333rem; color: var(--evp-leise); }
.evp-chip.is-an { background: var(--vdm-text-strong); border-color: var(--vdm-text-strong); color: var(--evp-flaeche); }
.evp-chip.is-an small { color: inherit; opacity: .8; }

/* ---------- Kopf ---------- */
.evp-kopf {
    display: grid; grid-template-columns: minmax(14.66667rem, auto) 1fr auto; grid-template-areas: "titel felder rechts";
    align-items: end; gap: 18px; padding: 16px 20px 4px;
}
@media (max-width: 1499px) {
    /* minmax(0, auto): Die Knopfgruppe darf umbrechen, statt dem Titel die ganze Breite zu nehmen (D1: ein Knopf mehr). */
    .evp-kopf { grid-template-columns: minmax(12rem, 1fr) minmax(0, auto); grid-template-areas: "titel rechts" "felder felder"; row-gap: 10px; }
    .evp-kopf-felder { justify-content: flex-start !important; }
}
.evp-kopf-titel { grid-area: titel; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evp-kopf-titel h1 { margin: 2px 0 0; font-size: 1.46667rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.evp-unter { font-size: 0.8rem; color: var(--evp-leise); }
.evp-kopf-felder { grid-area: felder; display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap; }
.evp-kopf-rechts { grid-area: rechts; display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.evp-feld { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.evp-feld-label { font-size: 0.7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--evp-leise); }
.evp-feld-label.is-pflicht::after { content: " *"; color: var(--vdm-warn-text); }
.evp-seg { display: inline-flex; height: 34px; border: 1px solid var(--evp-rand); border-radius: 8px; overflow: hidden; background: var(--evp-flaeche); }
.evp-seg button { padding: 0 14px; border: 0; border-left: 1px solid var(--evp-rand); background: transparent; color: var(--evp-leise); font-size: 0.83333rem; font-weight: 600; }
.evp-seg button:first-child { border-left: 0; }
.evp-seg button.is-an { background: var(--vdm-text-strong); color: var(--evp-flaeche); }
.evp-seg button:disabled { opacity: .5; }
.evp-seg.is-klein { height: 26px; }
.evp-seg.is-klein button { padding: 0 9px; font-size: 0.76667rem; }

/* ---------- Stammdatenleiste unter dem Kopf (Mockup Blatt 3) ---------- */
.evp-stamm {
    display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 20px 0; padding: 10px 14px; font-size: 0.83333rem;
    background: var(--evp-flaeche); border: 1px solid var(--evp-rand); border-radius: 12px;
}
.evp-stamm > span { min-width: 0; overflow-wrap: anywhere; }
.evp-stamm small { display: block; font-size: 0.7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--evp-leise); }
.evp-pruefen { color: var(--vdm-warn-text) !important; }

/* ---------- Kennzahlen ---------- */
.evp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 12px 20px 0; }
@media (max-width: 1100px) { .evp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evp-kpi { padding: 10px 14px; background: var(--evp-flaeche); border: 1px solid var(--evp-rand); border-radius: 12px; min-width: 0; }
.evp-kpi b { display: block; font-size: 1.4rem; font-weight: 600; line-height: 1.15; }
.evp-kpi small { display: block; margin-top: 2px; font-size: 0.76667rem; color: var(--evp-leise); overflow-wrap: anywhere; }
.evp-kpi.is-ok b { color: var(--vdm-ok-text); }
.evp-kpi.is-warn { background: var(--vdm-warn-bg); border-color: var(--vdm-warn-border); }
.evp-kpi.is-warn b { color: var(--vdm-warn-text); }
.evp-mini { display: block; height: 5px; margin-top: 6px; border-radius: 4px; background: var(--evp-flaeche-leise); border: 1px solid var(--evp-rand); overflow: hidden; }
.evp-mini i { display: block; height: 100%; background: var(--vdm-accent); }

/* ---------- Band (Termine bzw. Tage) ---------- */
.evp-band { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px 0; }
.evp-band-label { font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--evp-leise); }
.evp-band-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.66667rem, 1fr)); gap: 10px; }
.evp-blk {
    position: relative; display: flex; flex-direction: column; padding: 10px 12px 11px; text-align: left; min-width: 0;
    background: var(--evp-flaeche); border: 1px solid var(--evp-rand); border-radius: 12px; color: var(--vdm-text-strong);
}
.evp-blk:hover { border-color: var(--evp-rand-stark); }
.evp-blk.is-an { border: 2px solid var(--vdm-text-strong); padding: 9px 11px 10px; box-shadow: var(--vdm-shadow-card, 0 4px 14px rgba(15,23,42,.08)); }
.evp-blk.is-leise { opacity: .72; }
.evp-blk strong { font-size: 0.96667rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.evp-blk-unter { margin-top: 1px; font-size: 0.73333rem; color: var(--evp-leise); overflow-wrap: anywhere; }
.evp-blk-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 8px; font-size: 0.8rem; flex-wrap: wrap; }
.evp-blk-zeile b { font-size: 0.86667rem; font-weight: 600; }

/* ---------- Arbeitsflaeche: Liste + Leiste ---------- */
.evp-arbeit { display: grid; grid-template-columns: minmax(0, 1fr) 25.33333rem; gap: 14px; align-items: start; padding: 14px 20px 0; }
@media (max-width: 1100px) { .evp-arbeit { grid-template-columns: minmax(0, 1fr); } }
.evp-liste { background: var(--evp-flaeche); border: 1px solid var(--evp-rand); border-radius: 12px; min-width: 0; overflow: hidden; }
.evp-liste + .evp-liste { margin-top: 14px; }
.evp-liste-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--evp-rand); flex-wrap: wrap; }
.evp-liste-titel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.evp-liste-titel h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.evp-liste-titel span { font-size: 0.76667rem; color: var(--evp-leise); }
.evp-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--evp-rand); background: var(--evp-flaeche-leise); }
.evp-filter-trenner { width: 1px; height: 18px; margin: 0 2px; background: var(--evp-rand); }
.evp-suche {
    height: 28px; min-width: 16rem; padding: 0 10px; border: 1px solid var(--evp-rand); border-radius: 8px;
    background: var(--evp-flaeche); color: var(--vdm-text-strong); font-size: 0.8rem;
}
.evp-tabelle-rahmen { overflow-x: auto; }
.evp-tabelle { width: 100%; border-collapse: collapse; font-size: 0.83333rem; }
/* Eventliste: Mindestbreite in rem, damit sie bei grosser Schrift horizontal scrollt statt stark umzubrechen (Standard: kein Unterschied). */
.evp-tabelle.is-waehlbar { min-width: 53.33333rem; }
.evp-tabelle th {
    padding: 8px 10px; text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--evp-leise); border-bottom: 1px solid var(--evp-rand); background: var(--evp-flaeche); white-space: nowrap;
}
.evp-tabelle td { padding: 9px 10px; border-bottom: 1px solid color-mix(in srgb, var(--evp-rand) 60%, transparent); vertical-align: middle; }
.evp-tabelle tbody tr:last-child td { border-bottom: 0; }
.evp-tabelle.is-waehlbar tbody tr { cursor: pointer; }
.evp-tabelle.is-waehlbar tbody tr:hover td { background: var(--evp-flaeche-leise); }
.evp-tabelle tbody tr:focus-visible { outline: 2px solid var(--vdm-accent); outline-offset: -2px; }
.evp-tabelle tr.is-gewaehlt td { background: color-mix(in srgb, var(--vdm-accent) 8%, var(--evp-flaeche)); }
.evp-tabelle tr.is-gewaehlt td:first-child { box-shadow: inset 3px 0 0 var(--vdm-accent); }
.evp-tabelle tr.is-leise td { color: var(--evp-leise); }
.evp-tabelle tr.is-eingabe td { background: var(--evp-flaeche-leise); }
.evp-tabelle .is-r { text-align: right; }
.evp-tabelle .is-eng { white-space: nowrap; width: 1%; }
/* Unter 1500 px (Liste + 380-px-Leiste) enger setzen, damit die Statusspalte ohne Querscrollen sichtbar bleibt. */
@media (max-width: 1499px) {
    .evp-tabelle th { white-space: normal; }
    .evp-tabelle th, .evp-tabelle td { padding-left: 7px; padding-right: 7px; }
    .evp-arbeit { grid-template-columns: minmax(0, 1fr) 21.33333rem; }
}
.evp-nr { color: var(--evp-leise); white-space: nowrap; }
.evp-rz strong { display: block; font-size: 0.86667rem; font-weight: 600; }
.evp-rz small { display: block; margin-top: 2px; font-size: 0.73333rem; color: var(--evp-leise); }
.evp-leer { padding: 22px; text-align: center; color: var(--evp-leise); }
.evp-liste-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--evp-rand); background: var(--evp-flaeche-leise); font-size: 0.76667rem; color: var(--evp-leise); }

/* ---------- Eingaben ---------- */
.evp-eingabe, .evp-auswahl, .evp-text {
    height: 34px; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--evp-rand); border-radius: 8px;
    background: var(--evp-flaeche); color: var(--vdm-text-strong); font-size: 0.83333rem;
}
.evp-text { height: auto; min-height: 64px; padding: 7px 10px; resize: vertical; }
.evp-eingabe.is-klein, .evp-auswahl.is-klein { height: 28px; font-size: 0.8rem; padding: 0 8px; }
.evp-eingabe.is-zahl { text-align: right; }
.evp-eingabe:focus, .evp-auswahl:focus, .evp-text:focus { outline: 2px solid color-mix(in srgb, var(--vdm-accent) 45%, transparent); outline-offset: 0; border-color: var(--vdm-accent); }
.evp-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.evp-raster .is-breit { grid-column: 1 / -1; }
.evp-zeile { display: flex; gap: 6px; align-items: center; }
.evp-zeile > * { min-width: 0; }
.evp-zeile .evp-flex { flex: 1 1 auto; }
.evp-check { display: flex; align-items: center; gap: 7px; font-size: 0.83333rem; }

/* ---------- Leiste ---------- */
.evp-leiste {
    position: sticky; top: calc(var(--vdm-topbar-h, 60px) + 12px);
    display: flex; flex-direction: column; max-height: calc(100dvh - var(--vdm-topbar-h, 60px) - 24px);
    background: var(--evp-flaeche); border: 1px solid var(--evp-rand); border-radius: 12px; min-width: 0;
}
@media (max-width: 1100px) { .evp-leiste { position: static; max-height: none; } }
.evp-leiste-kopf { padding: 12px 14px; border-bottom: 1px solid var(--evp-rand); }
.evp-leiste-kopf h3 { margin: 2px 0 0; font-size: 0.93333rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.evp-leiste-rumpf { padding: 12px 14px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.evp-leiste-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--evp-rand); background: var(--evp-flaeche-leise); border-radius: 0 0 12px 12px; }
.evp-summe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.evp-summe > div { padding: 7px 9px; border: 1px solid var(--evp-rand); border-radius: 8px; background: var(--evp-flaeche-leise); min-width: 0; }
.evp-summe b { display: block; font-size: 1rem; font-weight: 600; }
.evp-summe small { display: block; font-size: 0.73333rem; color: var(--evp-leise); }
.evp-abschnitt { display: flex; flex-direction: column; gap: 6px; }
.evp-abschnitt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--evp-leise); }
.evp-kv { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 6px 10px; font-size: 0.83333rem; }
.evp-kv > span:nth-child(odd) { color: var(--evp-leise); }
.evp-kv > span:nth-child(even) { overflow-wrap: anywhere; }
.evp-hinweis {
    padding: 8px 10px; border-radius: 10px; border: 1px solid var(--evp-rand); font-size: 0.76667rem; line-height: 1.45;
    background: var(--evp-flaeche-leise); color: var(--vdm-text-strong);
}
.evp-hinweis.is-warn { background: var(--vdm-warn-bg); border-color: var(--vdm-warn-border); }
.evp-hinweis.is-rot { background: var(--vdm-danger-bg); border-color: var(--vdm-danger-border); }
.evp-hinweis.is-ok { background: var(--vdm-ok-bg); border-color: var(--vdm-ok-border); }
.evp-meldung { margin: 12px 20px 0; }
.evp-link { padding: 0; border: 0; background: transparent; color: var(--vdm-accent); font-size: 0.8rem; text-decoration: underline; }
.evp-kontakt { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--evp-rand) 60%, transparent); font-size: 0.83333rem; }
.evp-kontakt:last-child { border-bottom: 0; }
.evp-kontakt small { display: block; color: var(--evp-leise); font-size: 0.73333rem; overflow-wrap: anywhere; }
.evp-kontakt.is-leise { color: var(--evp-leise); }

/* ---------- Stufe 3: Einkauf, Lager, Auswertung, Speisekarte (Mockup Blatt 4–7) ---------- */
/* Signalfarben wie in der Kochplanung: Grün erledigt, Bernstein offen/zu klären, Blau bestellt, Türkis gesperrt. */
.evp { --evp-tuerkis: #14b8a6; }
.evp-tabelle tr.is-gruppe td {
    padding: 6px 10px; font-size: 0.7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--evp-leise);
    background: var(--evp-flaeche-leise); border-bottom: 1px solid var(--evp-rand);
}
.evp-tabelle tfoot td { padding: 9px 10px; border-top: 1px solid var(--evp-rand); background: var(--evp-flaeche-leise); font-size: 0.8rem; }
.evp-marke.is-tuerkis {
    color: color-mix(in srgb, var(--evp-tuerkis) 60%, var(--vdm-text-strong));
    background: color-mix(in srgb, var(--evp-tuerkis) 12%, var(--evp-flaeche));
    border-color: color-mix(in srgb, var(--evp-tuerkis) 40%, transparent);
}
.evp-legende { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76667rem; color: var(--evp-leise); }
.evp-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.evp-legende i.is-gesp, .evp-bilanz i.is-gesp { background: var(--evp-tuerkis); }
.evp-legende i.is-aus, .evp-bilanz i.is-aus { background: color-mix(in srgb, var(--vdm-text-muted) 55%, var(--evp-flaeche)); }
.evp-legende i.is-frei, .evp-bilanz i.is-frei { background: var(--vdm-accent); }
.evp-legende i.is-klar, .evp-bilanz i.is-klar { background: var(--vdm-warn-border); }
.evp-bilanz {
    display: flex; height: 8px; border-radius: 4px; overflow: hidden; min-width: 6rem;
    background: var(--evp-flaeche-leise); border: 1px solid var(--evp-rand);
}
.evp-bilanz i { display: block; height: 100%; }
/* Korbleiste (380 px): enger setzen, Menge und „sperren“ untereinander statt nebeneinander. */
.evp-korb th, .evp-korb td { padding-left: 5px; padding-right: 5px; }
.evp-korb td.evp-rz strong { font-size: 0.83333rem; }
.evp-leiste-rumpf > .evp-check { align-items: flex-start; line-height: 1.45; }
.evp-check-mark {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border-radius: 50%; font-size: 0.73333rem; font-weight: 600; border: 1px solid var(--evp-rand); background: var(--evp-flaeche-leise);
}
.evp-check-mark.is-ok { color: var(--vdm-ok-text); background: var(--vdm-ok-bg); border-color: var(--vdm-ok-border); }
.evp-check-mark.is-warn { color: var(--vdm-warn-text); background: var(--vdm-warn-bg); border-color: var(--vdm-warn-border); }
.evp-check-mark.is-grau { color: var(--evp-leise); }

/* Speisekarte: Karte als Papier auf ruhiger Fläche; Druck zeigt nur die Karte. */
.evp-karte-rahmen { padding: 22px; background: var(--evp-flaeche-leise); }
.evp-karte {
    max-width: 620px; margin: 0 auto; padding: 36px 40px; background: #fff; color: #1f2937;
    border: 1px solid var(--evp-rand); border-radius: 6px; font-family: Georgia, "Times New Roman", serif; text-align: center;
}
.evp-karte h2 { margin: 0; font-size: 1.73333rem; font-weight: 600; }
.evp-karte h3 { margin: 26px 0 2px; font-size: 1.06667rem; font-weight: 600; letter-spacing: .04em; }
.evp-karte-meta { margin-top: 6px; font-size: 0.86667rem; color: #6b7280; }
.evp-karte-gaeste { font-size: 0.8rem; color: #6b7280; margin-bottom: 8px; }
.evp-karte-gericht { margin: 9px 0; font-size: 1rem; }
.evp-karte-gericht small { display: block; font-size: 0.73333rem; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; }
.evp-karte-allergene { font-size: 0.8rem; color: #5b6470; }
.evp-je-portion { display: block; font-size: 0.73333rem; color: var(--vdm-text-muted); font-weight: 400; }
.evp-karte-fuss { margin-top: 30px; font-size: 0.73333rem; color: #5b6470; }
@media print {
    body * { visibility: hidden !important; }
    .evp-karte, .evp-karte * { visibility: visible !important; }
    .evp-karte { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: 0; }
}

/* Einkauf: Warenwert je Portion (Kalkulation, nicht auf der Speisekarte) */
.evp-portionswerte { margin-top: 16px; }

/* Symbole (EvIcon, Entwurf icons-vorschlag.html, 27.09.2026): Linie in Textfarbe, passt zu allen Farbschemata */
.ev-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.evp-knopf .ev-i, .evp-seg button .ev-i, .evp-marke .ev-i, .evp-kontakt-weg .ev-i, .evp-leer-zeile .ev-i { margin-right: 6px; }
.evp-knopf { display: inline-flex; align-items: center; }
.evp-marke .ev-i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.evp-seg button { display: inline-flex; align-items: center; }
/* Kennzahl-Kacheln: Symbol links auf getönter Fläche */
.evp-kpi.has-ico { position: relative; padding-left: 60px; }
.evp-kpi-ico { position: absolute; left: 14px; top: 12px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--vdm-accent) 12%, transparent); color: var(--vdm-accent); }
.evp-kpi-ico .ev-i { width: 20px; height: 20px; vertical-align: 0; }
.evp-kpi.is-warn .evp-kpi-ico { background: color-mix(in srgb, var(--vdm-warn-text, #b45309) 16%, transparent); color: var(--vdm-warn-text, #b45309); }
.evp-kpi.is-ok .evp-kpi-ico { background: color-mix(in srgb, var(--vdm-ok-text, #1f9d45) 14%, transparent); color: var(--vdm-ok-text, #1f9d45); }
/* Symbolknöpfe in Tabellen */
.evp-ikon { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--vdm-border-card, #d9dde2); background: transparent; color: var(--vdm-text-strong);
  display: inline-grid; place-items: center; cursor: pointer; margin-left: 4px; }
.evp-ikon:hover:not(:disabled) { background: color-mix(in srgb, var(--vdm-text-strong) 7%, transparent); }
.evp-ikon.is-gefahr { color: var(--vdm-danger-text); border-color: var(--vdm-danger-border); }
.evp-ikon:disabled { opacity: .45; cursor: default; }
.evp-ikon .ev-i { vertical-align: 0; }
/* Kontakte */
.evp-kontakt-wege { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 3px; }
.evp-kontakt-weg { display: inline-flex; align-items: center; font-size: 0.8rem; color: var(--vdm-accent); text-decoration: none; }
.evp-kontakt-weg:hover { text-decoration: underline; }
/* Leerzustände */
.evp-leer.is-gross { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; }
.evp-leer.is-gross b { font-weight: 600; color: var(--vdm-text-strong); }
.evp-leer-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--vdm-accent) 10%, transparent); color: var(--vdm-accent); }
.evp-leer-ico .ev-i { width: 30px; height: 30px; stroke-width: 1.5; vertical-align: 0; }
.evp-leer.is-gross.is-klein { padding: 14px 8px; }
.evp-leer.is-gross.is-klein .evp-leer-ico { width: 48px; height: 48px; }
.evp-leer.is-gross.is-klein .evp-leer-ico .ev-i { width: 24px; height: 24px; }
.evp-leer-zeile { display: inline-flex; align-items: center; }
/* Eingabe + Knopf in einer Zeile: das Feld gibt nach, der Knopf (jetzt mit Symbol) behält seine Breite */
.evp-zeile > .evp-eingabe { min-width: 0; flex: 1 1 60px; }
.evp-zeile > .evp-knopf { flex: none; }

/* D1: Schloss vor dem Namen privater Events (nur Abstand, Farbe folgt dem Text). */
.evp-privat { margin-right: 4px; vertical-align: -2px; }

/* ---------- D2: Gang -> Gericht -> Komponenten (Menü des Tages) ---------- */
.evp-gaeste .evp-liste-kopf { border-bottom: 0; }
.evp-gericht { margin: 12px 14px 0; border: 1px solid var(--evp-rand); border-radius: 10px; background: var(--evp-flaeche); overflow: hidden; }
.evp-gericht-kopf { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--evp-flaeche-leise); flex-wrap: wrap; }
.evp-gericht-name { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.evp-gericht-name strong { font-size: 0.93333rem; font-weight: 600; overflow-wrap: anywhere; }
.evp-gericht-zahlen { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.evp-gericht-zahlen span { display: flex; flex-direction: column; align-items: flex-end; }
.evp-gericht-zahlen b { font-weight: 600; font-size: 0.93333rem; }
.evp-gericht-zahlen small { font-size: 0.73333rem; color: var(--evp-leise); }
.evp-gericht-hinweis { margin: 8px 12px 0; }
.evp-gericht-form { padding: 10px 14px; border-top: 1px solid var(--evp-rand); display: flex; flex-direction: column; gap: 8px; background: var(--evp-flaeche); }
.evp-liste > .evp-gericht-form { border-top: 0; border-bottom: 1px solid var(--evp-rand); }
.evp-formzeile { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.evp-anteil { display: inline-flex; align-items: center; gap: 8px; }
.evp-regler { width: 110px; accent-color: var(--vdm-accent); }
.evp-gang-summe { margin: 6px 16px 0; font-size: 0.8rem; }
.evp-komponenten td.evp-leise { padding: 10px 12px; }
.evp-liste > .evp-liste-fuss { margin-top: 12px; }

/* ---------- D4b: Hinweise an der Komponente (neue Version, Menge offen, Allergene ungeprüft) ---------- */
.evp small.is-warn-text { color: var(--vdm-warn-text); }

/* Papier: Der Akzent der Palette ist hell (Textlinks nur 2,68:1 auf Papier, gemessen 03.10.2026). Im Eventplaner (Vorlage-Link im
   Eventkopf, Eventnamen im Partnerdialog) wird der Akzent zur Tinte hin abgedunkelt; der Akzent selbst und alle anderen Seiten bleiben
   unverändert. Gleiche Ausnahmen wie die allgemeine Linkregel in vdm-papier.css, deren Spezifität dieser Selektor übertrifft. */
html[data-vdm-palette="papier"] .evp a:not(.btn):not(.dxbl-btn):not(.nav-link):not(.vdm-launcher-tile):not(.vdm-brand):not([class*="tab"]):not(.evp-knopf):not([class*="fpn-"]) {
    color: color-mix(in srgb, var(--accent) 55%, var(--vdm-ink));
}


/* ---------- Drawer von rechts (04.10.2026, Mockup index-ablauf.html): Erfassen nebenbei, ohne die Eventseite zu verlassen ---------- */
.evp-drawer-dim { position: fixed; inset: 0; background: color-mix(in srgb, var(--vdm-ink, #0f172a) 38%, transparent); z-index: 1990; }
.evp-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); z-index: 1991; display: flex; flex-direction: column;
    background: var(--vdm-surface-card, var(--surface, #fff)); color: var(--vdm-text, inherit); border-left: 1px solid var(--vdm-border, #d9dde2); box-shadow: -10px 0 30px rgba(15, 23, 42, .18); }
.evp-drawer-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--vdm-border, #e8ebef); }
.evp-drawer-kopf h3 { margin: 2px 0 0; font-size: 1.05rem; font-weight: 600; }
.evp-drawer-rumpf { flex: 1; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.evp-drawer-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--vdm-border, #e8ebef); }

/* ---------- Organisation als Akkordeon, zweiter Drawer (04.10.2026, Mockup index-ablauf.html Blatt 2 und 3) ---------- */
.evp-acc-kopf { display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex-wrap: wrap; }
.evp-acc-knopf { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.evp-acc-knopf h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.evp-acc-pfeil { width: 1em; color: var(--evp-leise); }
.evp-acc-info { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.83333rem; color: var(--evp-leise); }
.evp-acc-info b { color: var(--vdm-text-strong); font-weight: 600; }
.evp-acc-rumpf { border-top: 1px solid var(--evp-rand); }
.evp-tagfilter .evp-eyebrow { margin-right: 4px; }
.evp-drawer-dim.is-zweite { z-index: 1992; }
.evp-drawer.is-zweite { right: min(440px, 100vw); width: min(380px, calc(100vw - 440px)); z-index: 1993; }
@media (max-width: 900px) { .evp-drawer.is-zweite { right: 0; width: min(380px, 100vw); } }

.evp-karte-blatttrenner { border: 0; border-top: 2px dashed var(--evp-rand); margin: 28px 0 8px; }

/* ---------- Tagesleiste und Ergebnisleiste (Entwurf „Tageslage“, 04.10.2026) ---------- */
.evp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.evp-tl { padding: 4px 20px 0; }
.evp-tl-reihe { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding-bottom: 12px; }
.evp-tl-tag { flex: none; min-width: 12.5rem; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; padding: 8px 12px; text-align: left;
    border: 1px solid var(--evp-rand); border-radius: 8px; background: var(--evp-flaeche); color: var(--vdm-text-strong); }
.evp-tl-tag:hover { background: var(--evp-flaeche-leise); }
.evp-tl-tag.is-an { border-color: var(--vdm-text-strong); box-shadow: inset 0 0 0 1px var(--vdm-text-strong); background: var(--evp-flaeche-leise); }
.evp-tl-kopf { display: flex; align-items: baseline; gap: 8px; }
.evp-tl-kopf strong { font-size: 0.8rem; font-weight: 600; }
.evp-tl-zahl { font-size: 1.25rem; font-weight: 600; line-height: 1; }
.evp-tl-tag small { font-size: 0.73333rem; color: var(--evp-leise); }
.evp-tl-symbole { display: flex; gap: 4px; }
.evp-tl-sym { display: grid; place-items: center; width: 1.6rem; height: 1.35rem; border-radius: 4px; border: 1px solid transparent; }
.evp-tl-sym .ev-i { width: 0.95rem; height: 0.95rem; }
.evp-tl-sym.is-ok { color: var(--vdm-ok-text); background: var(--vdm-ok-bg); }
.evp-tl-sym.is-warn { color: var(--vdm-warn-text); background: var(--vdm-warn-bg); border-color: var(--vdm-warn-border); }
.evp-tl-sym.is-offen { color: var(--evp-leise); background: transparent; border: 1px dashed var(--evp-rand); }
.evp-tl-plus { min-width: 4.5rem; justify-content: center; align-items: center; border-style: dashed; color: var(--evp-leise); }
.evp-tl-legende { margin-left: auto; align-self: center; display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.73333rem; color: var(--evp-leise); padding-left: 10px; }
.evp-tl-legende span { display: inline-flex; align-items: center; gap: 4px; }
.evp-tl-legende .ev-i { width: 0.9rem; height: 0.9rem; }
.evp-erg { position: sticky; bottom: 0; z-index: 4; margin: 14px 20px 0; background: var(--evp-flaeche); border: 1px solid var(--evp-rand); border-radius: 10px; box-shadow: 0 -4px 14px rgba(15, 23, 42, .06); }
.evp-erg-zeile { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 9px 16px; font-size: 0.86667rem; }
.evp-erg-art { font-size: 0.73333rem; color: var(--evp-leise); }
.evp-erg-zeile small { color: var(--evp-leise); }
.evp-erg-zeile b { font-weight: 600; }
.evp-erg-marge { font-size: 1.06667rem; }
.evp-erg-knopf { margin-left: auto; }
.evp-erg .is-warn b { color: var(--vdm-danger-text); }
.evp-erg-detail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 6px 16px 14px; border-top: 1px solid var(--evp-rand); font-size: 0.8rem; }
.evp-erg-detail b { display: block; font-size: 0.93333rem; font-weight: 600; }
.evp-erg-gruende { grid-column: 1 / -1; }
.evp-erg-gruende ul { margin: 4px 0 0 18px; padding: 0; }
@media (max-width: 900px) { .evp-erg-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .evp-tl-legende { display: none; } }

/* ---------- Menü „Mehr“ im Kopf (Entwurf Tageslage) ---------- */
.evp-mehr { position: relative; display: inline-flex; }
.evp-mehr-zu { position: fixed; inset: 0; z-index: 40; }
.evp-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 41; min-width: 13rem; display: flex; flex-direction: column; padding: 5px;
    background: var(--vdm-surface-card, var(--evp-flaeche)); border: 1px solid var(--evp-rand); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.evp-pop button { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 5px; font-size: 0.83333rem; color: var(--vdm-text-strong); }
.evp-pop button:hover { background: var(--evp-flaeche-leise); }
.evp-pop button.is-gefahr { color: var(--vdm-danger-text); }

/* ---------- „Noch zu klären“ mit Erledigt (Entwurf Tageslage) ---------- */
.evp-rechts { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.evp-auf-liste { padding: 8px 14px 12px; display: grid; gap: 6px; }
.evp-auf-zeile { display: flex; align-items: flex-start; gap: 9px; padding: 7px 9px; border: 1px solid var(--evp-rand); border-radius: 7px; font-size: 0.83333rem; }
.evp-auf-zeile.is-fertig { opacity: .78; border-style: dashed; }
.evp-auf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.evp-auf-mark { flex: none; width: 1rem; text-align: center; font-weight: 700; }
.evp-auf-mark.is-warn { color: var(--vdm-warn-text); }
.evp-auf-mark.is-hinweis { color: var(--evp-leise); }
.evp-auf-mark.is-ok { color: var(--vdm-ok-text); }

.evp-arbeit > div > .evp-arbeit { padding: 0; }

.evp-tl.is-aus { opacity: .5; }
.evp-tl.is-aus .evp-tl-tag { cursor: default; }

/* ---------- Eckdaten in einer Zeile, Reiter darunter, Tagesleiste als Fläche (Entwurf Tageslage) ---------- */
.evp-eck { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; padding: 10px 20px 12px; margin: 0 0 4px; font-size: 0.83333rem; border-bottom: 1px solid var(--evp-rand); }
.evp-eck small { margin-right: 5px; color: var(--evp-leise); font-size: 0.73333rem; }
.evp-eck b { font-weight: 500; }
.evp-eck-mehr { border: 0; background: none; padding: 0; color: var(--evp-blau); font-size: 0.83333rem; cursor: pointer; }
.evp-eck-extra { display: flex; flex-wrap: wrap; gap: 6px 26px; width: 100%; }
.evp-reiter { padding: 8px 20px 4px; }
.evp-tl { margin: 4px 20px 0; padding: 12px 14px 0; background: var(--evp-flaeche); border: 1px solid var(--evp-rand); border-radius: 10px; }
.evp-erg-zeile { padding-right: 72px; }

.evp-liste.evp-stand { margin: 14px 20px 0; }

/* ---------- Handy (unter 768 px): Inhalt zuerst, Ergebnisleiste schmal (docs/ui/mobil-konzept.md) ---------- */
@media (max-width: 767.98px) {
    .evp-eck { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 8px 12px 10px; font-size: 0.8rem; }
    .evp-eck > span:nth-of-type(4), .evp-eck-extra { grid-column: 1 / -1; }
    .evp-eck-mehr { grid-column: 1 / -1; justify-self: start; min-height: 32px; }
    .evp-reiter { padding: 6px 12px 2px; overflow-x: auto; }
    .evp-tl { margin: 4px 8px 0; padding: 8px 8px 0; }
    .evp-tl-tag { min-width: 9.5rem; padding: 6px 9px; }
    .evp-erg { margin: 8px 8px 0; border-radius: 8px; }
    .evp-erg-zeile { gap: 2px 12px; padding: 6px 10px; font-size: 0.8rem; }
    .evp-erg-art { display: none; }
    .evp-erg-marge { font-size: 0.93333rem; }
    .evp-erg-knopf { min-height: 32px; padding: 0 10px; }
    .evp-erg-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 10px 10px; }
}

@media (max-width: 767.98px) {
    .evp-kopf { gap: 6px; padding: 10px 12px 4px; }
    .evp-kopf-titel h1 { font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .evp-kopf-titel .evp-unter { display: none; }
    .evp-kopf-rechts { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
    .evp-mob-icon { font-size: 0; min-width: 40px; min-height: 40px; padding: 0 10px; justify-content: center; }
    .evp-mob-icon .ev-i { width: 1.15rem; height: 1.15rem; font-size: 1rem; }
    .evp-eck:not(.is-auf) > span:nth-of-type(n+3) { display: none; }
    .evp-eck > span { min-width: 0; }
}
@media (max-width: 767.98px) {
    .evp-kopf { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "rechts" "felder"; }
    .evp-kopf-rechts { justify-content: flex-start; }
    .evp-arbeit { padding: 8px 8px 0; }
    .evp-arbeit > *, .evp-rechts > *, .evp-leiste { min-width: 0; max-width: 100%; }
}

/* ---------- Kalkulation an der Seite (Organisation), Kopfzeile mit Tag ---------- */
.evp-org-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 2px 0 12px; }
.evp-org-kopf h2 { margin: 0; font-size: 1.2rem; font-weight: 600; }
.evp-kseite-rumpf { padding: 8px 14px 14px; display: grid; gap: 2px; }
.evp-kseite-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 0.83333rem; color: var(--evp-leise); }
.evp-kseite-zeile b { color: var(--vdm-text-strong); font-weight: 600; }
.evp-kseite-zeile.is-summe { border-top: 1px solid var(--evp-rand); margin-top: 4px; padding-top: 8px; color: var(--vdm-text-strong); }
.evp-kseite-zeile.is-summe b { font-size: 1.06667rem; }
.evp-kseite-zeile.is-warn b { color: var(--vdm-danger-text); }
.evp-kseite-gruende { margin-top: 8px; }
.evp-kseite-gruende ul { margin: 4px 0 0 18px; padding: 0; }
@media (min-width: 1100.02px) { .evp-erg.is-mit-seite { display: none; } .evp-kseite { position: sticky; top: 12px; } }
@media (max-width: 1100px) { .evp-kseite { display: none; } }

/* ---------- Planung: Seitenspalte wie in der Organisation, Artikelvorschlag unter dem Tag ---------- */
.evp-vorschlag-unten { margin-top: 14px; }
.evp-vorschlag-unten .evp-leiste { position: static; max-height: none; width: auto; }
.evp-tb-rumpf { padding: 8px 14px 14px; display: grid; gap: 6px; }

/* Tagesblatt-Drawer (Entwurf Arbeitsfläche) und Eventzettel-Optionen */
.evp-drawer.is-breit { width: min(520px, 100vw); }
.evp-tbd-event { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--evp-rand); }
.evp-tbd-event h4, .evp-tbd-tag h4 { margin: 2px 0 0; font-size: 1rem; font-weight: 600; }
.evp-tbd-tag { display: grid; gap: 6px; padding-top: 12px; }
.evp-tbd-liste { display: grid; gap: 2px; font-size: 0.86667rem; }
.evz .evp-knopf, .evz .evp-chip, .evz .evp-seg button { font-size: 0.83333rem; }

/* ---------- Kennzahlen schlank (Einkauf, Lager, Auswertung; Entwurf Arbeitsfläche: keine Kennzahlenkarten) ---------- */
.evp-kpis.is-schlank { display: flex; flex-wrap: wrap; gap: 6px 34px; padding: 10px 20px 14px; }
.evp-kpis.is-schlank .evp-kpi { display: flex; align-items: baseline; gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; }
.evp-kpis.is-schlank .evp-kpi.has-ico { padding-left: 0; }
.evp-kpis.is-schlank .evp-kpi-ico, .evp-kpis.is-schlank .evp-mini { display: none; }
.evp-kpis.is-schlank .evp-kpi b { display: inline; font-size: 1.13333rem; }
.evp-kpis.is-schlank .evp-kpi small { display: inline; margin: 0; }
.evp-kpis.is-schlank .evp-kpi.is-warn { background: none; border: 0; }

/* Der Schmalbereich unter 1100 px muss nach der 1499-px-Regel stehen, sonst bleibt die zweite Spalte (Fund Handymessung 05.10.2026). */
@media (max-width: 1100px) { .evp-arbeit { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) {
    .evp-kopf-rechts .evp-mob-icon { font-size: 0 !important; }
    .evp-stand .evp-gericht-hinweis { display: none; }
}

/* Links und „weitere Angaben“ in Textfarbe: der Akzent kann frei gewählt werden (z. B. Weiß) und reicht dann nicht für Text (Farbschema-Prüfung 05.10.2026). */
.evp-link { color: var(--vdm-text-strong); }
.evp-eck-mehr { color: var(--vdm-text-strong); text-decoration: underline; text-decoration-style: dotted; }

/* ---------- Entwurf „Ruhig“ (Mockup docs/ui/eventplaner-mockup/v2/index-event.html, 05.10.2026) ----------
   Kopf in einer Zeile, Eckdaten als Metazeile, Reiter und Tage in einem Band, Tage als schmale Chips mit fünf Punkten,
   Status als Punkt mit Text, Tabellen nur mit Haarlinien. Reine Darstellung; Farben nur über Themetokens. */
.evp-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 18px; padding: 16px 20px 2px; }
.evp-kopf-titel { flex: 1 1 22rem; }
.evp-kopf-felder:empty { display: none; }
.evp-kopf-rechts { align-items: center; margin-left: auto; }
.evp-eck { padding: 2px 20px 10px; margin: 0; background: none; border: 0; gap: 4px 20px; color: var(--evp-leise); }
.evp-eck b { color: var(--vdm-text-strong); font-weight: 400; }
.evp-eck small { margin-right: 4px; }
.evp-kband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 20px; padding: 8px 0 10px; border-bottom: 1px solid var(--evp-rand); }
.evp-kband .evp-reiter { padding: 0; }
.evp-kband .evp-tl { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.evp-kband .evp-tl-reihe { padding: 0; gap: 6px; align-items: center; }
.evp-kband .evp-tl-tag { min-width: 0; padding: 4px 10px; gap: 3px; border-radius: 8px; min-height: 40px; justify-content: center; }
.evp-kband .evp-tl-kopf strong { font-weight: 400; }
.evp-kband .evp-tl-zahl { font-size: 0.93333rem; font-weight: 600; }
.evp-kband .evp-tl-tag small { font-size: 0.73333rem; }
.evp-kband .evp-tl-plus { min-height: 40px; }
.evp-tl-symbole { gap: 3px; }
.evp-tl-sym { width: 6px; height: 6px; border-radius: 50%; border: 0; background: var(--evp-rand-stark); display: block; }
.evp-tl-sym.is-ok { background: var(--vdm-ok-text); }
.evp-tl-sym.is-warn { background: var(--vdm-warn-text); border: 0; }
.evp-tl-sym.is-offen { background: var(--evp-rand-stark); border: 0; opacity: .55; }
.evp-tl-hilfe { position: relative; display: inline-flex; }
.evp-tl-pop { right: 0; left: auto; min-width: 15rem; padding: 12px 14px; font-size: 0.8rem; }
.evp-tl-pop p { margin: 0 0 6px; }
.evp-tl-pop ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 3px; }
.evp-tl-pop li { display: flex; gap: 6px; align-items: center; }
.evp-tl-pop .ev-i { width: 0.9rem; height: 0.9rem; }
.evp-marke { background: none !important; border: 0 !important; padding: 0 !important; display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.evp-marke::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .85; }
.evp-marke .ev-i { display: none; }
.evp-liste, .evp-kpi { border-radius: 10px; }
.evp-tabelle th { background: none; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.evp-tabelle tr.is-gruppe td, .evp-tabelle tfoot td { background: none; }
.evp-erg-formel p { margin: 3px 0; font-size: 0.8rem; }
.evp-erg-formel .evp-erg-rechnung { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: var(--evp-flaeche-leise); }
@media (max-width: 760px) {
    .evp-kband { margin: 0 12px; }
    .evp-kband .evp-tl-reihe { overflow-x: auto; }
    .evp-kopf { padding: 12px 12px 2px; }
    .evp-eck { padding: 2px 12px 8px; }
}
/* Zahlenleisten ohne Kästen (Entwurf „Ruhig“): Zahl groß, Beschriftung leise */
.evp-summe { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.evp-summe > div { padding: 0; border: 0; background: none; border-radius: 0; }
/* Entwurf „Ruhig“, Nacharbeit: Reiter ohne Rahmen, Tage umbrechen statt scrollen (Legende bleibt sichtbar), einheitliche Kopfknöpfe */
.evp-kband .evp-seg { border: 0; background: none; height: auto; gap: 2px; overflow: visible; }
.evp-kband .evp-seg button { border: 0; border-radius: 8px; height: 34px; padding: 0 12px; color: var(--evp-leise); gap: 6px; }
.evp-kband .evp-seg button:hover:not(:disabled):not(.is-an) { background: var(--evp-flaeche-leise); color: var(--vdm-text-strong); }
.evp-kband .evp-seg button.is-an { color: var(--evp-flaeche); }
.evp-kband .evp-tl-reihe { overflow: visible; flex-wrap: wrap; justify-content: flex-end; }
.evp-kband .evp-tl-tag { align-items: flex-start; text-align: left; }
.evp-kband .evp-tl-tag.evp-tl-plus { align-items: center; }
.evp-kopf-rechts .evp-knopf { font-size: 0.86667rem; font-weight: 400; }
@media (max-width: 760px) { .evp-kband .evp-tl-reihe { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; } .evp-kband .evp-seg { overflow-x: auto; } }
/* Entwurf „Ruhig“, weniger Kästen: Hinweise ohne Rahmen, Fußzeilen ohne graue Fläche, Listen auf Inhaltsbreite */
.evp-hinweis { border: 0; border-radius: 8px; }
.evp-liste-fuss { background: none; border-top: 1px solid var(--evp-rand); }
.evp-liste, .evp-leiste { box-shadow: none; }
.evp > .evp-liste, .evp > .evp-meldung { margin-left: 20px; margin-right: 20px; }
.evp > .evp-liste { margin-top: 14px; }
.evp-tabelle-rahmen { border: 0; }
.evp-tabelle td { padding: 10px 14px; }
.evp-tabelle th { padding: 8px 14px; }
@media (max-width: 760px) { .evp > .evp-liste, .evp > .evp-meldung { margin-left: 12px; margin-right: 12px; } }

/* Entwurf „Ruhig“: Gästezeile und Menü der Tagesplanung bilden eine Karte; Erlöse-Block unter den Kosten */
.evp-gaeste { margin-bottom: 0 !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.evp-gaeste + .evp-liste { margin-top: 0 !important; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.evp-gaeste .evp-liste-kopf { border-bottom: 1px solid var(--evp-rand); }
.evp-erloese .evp-summe { padding: 12px 14px 14px; }
.evp-erloese .evp-summe b { font-size: 1.1rem; }
/* Hinweiszeilen unter Tabellen: Text statt grauer Balken (Entwurf „Ruhig“) */
.evp-acc-rumpf > .evp-hinweis, .evp-liste > .evp-hinweis { background: none; border-top: 1px solid var(--evp-rand); border-radius: 0; padding: 9px 14px; color: var(--evp-leise); font-size: 0.8rem; }
.evp-kopf-titel-klein { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.evp-kopf-titel-klein h3 { margin: 0; font-size: 1rem; font-weight: 600; }
/* Handy: Kopf und Band laufen nicht über den Rand (Entwurf „Ruhig“) */
@media (max-width: 760px) {
    .evp-kopf-titel { flex-basis: 100%; }
    .evp-kopf-rechts { margin-left: 0; width: 100%; justify-content: flex-start; }
    .evp-kband { display: block; }
    .evp-kband .evp-reiter { overflow-x: auto; max-width: 100%; }
    .evp-kband .evp-tl { max-width: 100%; margin-top: 8px; }
    .evp-kband .evp-tl-reihe { max-width: 100%; }
}
@media (max-width: 760px) { .evp-leiste-rumpf, .evp-leiste { max-width: 100%; overflow-x: auto; } }
/* Seitenspalte: alle Karten gleich breit und bündig, Punkte nur mit Haarlinien (Entwurf „Ruhig“) */
.evp-rechts > *, .evp-rechts > .evp-liste, .evp-rechts .evp-liste.evp-stand { margin-left: 0; margin-right: 0; }
.evp-rechts > * + * { margin-top: 14px; }
.evp-rechts > :first-child { margin-top: 0; }
.evp-auf-liste { gap: 0; padding: 0 14px 10px; }
.evp-auf-zeile { border: 0; border-top: 1px solid var(--evp-rand); border-radius: 0; padding: 10px 0; }
.evp-auf-zeile:first-child { border-top: 0; }
.evp-auf-zeile.is-fertig { border-style: solid; opacity: .85; }

/* ---------- Events-Übersicht nach Entwurf „Ruhig“ (index-uebersicht.html): Zahlenzeile als Filter, Terminband als Karte ---------- */
.evp-kpis:not(.is-schlank) { display: flex; flex-wrap: wrap; gap: 8px 34px; padding: 14px 20px 2px; }
.evp-kpis:not(.is-schlank) .evp-kpi { display: block; border: 0; background: none; padding: 2px 0; border-radius: 0; border-bottom: 2px solid transparent; min-width: 0; }
.evp-kpis:not(.is-schlank) .evp-kpi b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.evp-kpis:not(.is-schlank) .evp-kpi small { display: block; margin-top: 0; }
.evp-kpis:not(.is-schlank) .evp-kpi-ico, .evp-kpis:not(.is-schlank) .evp-mini { display: none; }
.evp-kpi.is-filter { cursor: pointer; }
.evp-kpi.is-filter.is-an { border-bottom-color: var(--vdm-text-strong) !important; }
.evp-kpi.is-filter:focus-visible { outline: 2px solid var(--vdm-accent); outline-offset: 2px; }
.evp-band { margin: 14px 20px 0; padding: 12px 14px 14px; background: var(--evp-flaeche); border: 1px solid var(--evp-rand); border-radius: 10px; gap: 8px; }
.evp-band-label { font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--vdm-text-strong); }
.evp-band-reihe { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.evp-blk { flex: none; min-width: 10.5rem; max-width: 14rem; padding: 8px 10px; border-radius: 8px; gap: 2px; }
.evp-blk.is-an { border-color: var(--vdm-text-strong); box-shadow: inset 0 0 0 1px var(--vdm-text-strong); }
@media (max-width: 760px) { .evp-kpis:not(.is-schlank) { padding: 10px 12px 2px; gap: 6px 22px; } .evp-band { margin: 10px 12px 0; } }
/* Filterleisten in Karten: Chips ohne graue Fläche (Entwurf „Ruhig“) */
.evp-filter { background: none; }
.evp-filter-label { font-size: 0.73333rem; letter-spacing: .05em; text-transform: uppercase; color: var(--evp-leise); }
.evp-liste-kopf .evp-suche { min-width: 14rem; }
/* Auswahllisten (DevExpress) müssen über Drawer und Abdunklung liegen (Drawer 1991–1993), sonst liegen sie dahinter */
.dxbl-popup-cell, .dxbl-dropdown { z-index: 2200 !important; } /* der Popup-Container (z 1050) bildet den Stapelkontext und begrenzt sonst die Liste */

/* ---------- Einsatzplan E1 (Entwurf index-einsatzplan.html) ---------- */
.evp-org-umschalter { padding: 8px 20px 0; }
.evp-es-seite { padding: 10px 14px 14px; display: grid; gap: 8px; }
.evp-es-bed { display: grid; gap: 4px; }
.evp-kv-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.86667rem; }
.evp-es-balken { height: 6px; border-radius: 3px; background: var(--evp-flaeche-leise); overflow: hidden; }
.evp-es-balken i { display: block; height: 100%; background: var(--vdm-ok-text); }
.evp-es-balken i.is-warn { background: var(--vdm-warn-text); }
.evp-es-hinweis { display: flex; gap: 8px; align-items: flex-start; font-size: 0.86667rem; }
.evp-tabelle tr.is-klick { cursor: pointer; }
.evp-tabelle tr.is-klick:hover td { background: var(--evp-flaeche-leise); }
@media (max-width: 760px) { .evp-org-umschalter { padding: 8px 12px 0; } }
/* Handy: absolut positionierter Screenreader-Text (evp-sr) in den Tages-Chips hatte einen Bezugsrahmen außerhalb des Scrollbereichs und
   machte die Seite 93 px zu breit (Drawer saßen dadurch verschoben). Eigener Bezugsrahmen hält ihn im Chip. */
.evp-tl-tag, .evp-tl-reihe { position: relative; }

/* ---------- Einsatzplan E4: Zeitachse und Personenansicht (Entwurf index-einsatzplan.html) ---------- */
.evp-es-achse { padding: 8px 14px 10px; overflow-x: auto; }
.evp-es-achse + .evp-es-achse { border-top: 1px solid var(--evp-rand); }
.evp-es-achse-tag { font-weight: 600; padding: 4px 0 8px; }
.evp-es-zeile { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); border-top: 1px solid var(--evp-rand); }
.evp-es-zeile.is-kopf { border-top: 0; }
.evp-es-name { padding: 12px 8px 8px 0; font-size: 0.86667rem; display: flex; gap: 6px; align-items: flex-start; }
.evp-es-punkt { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.evp-es-stunden { display: grid; font-size: 0.73333rem; color: var(--evp-leise); }
.evp-es-stunden span { border-left: 1px solid var(--evp-rand); padding: 2px 0 2px 4px; }
.evp-es-spur { position: relative; background-image: linear-gradient(to right, var(--evp-rand) 1px, transparent 1px); }
.evp-es-balken-el { position: absolute; height: 40px; padding: 2px 8px; border: 2px solid transparent; border-radius: 8px; color: #fff; font-size: 0.73333rem; line-height: 1.25; overflow: hidden; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: center; }
.evp-es-balken-el:disabled { cursor: default; opacity: 1; }
.evp-es-balken-el small { opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evp-es-balken-el b { font-weight: 600; }
.evp-es-balken-el.is-offen { background: repeating-linear-gradient(45deg, var(--evp-flaeche), var(--evp-flaeche) 6px, var(--evp-flaeche-leise) 6px, var(--evp-flaeche-leise) 12px) !important; color: var(--vdm-text-strong); border: 1px dashed var(--vdm-danger-text); }
.evp-es-balken-el.is-konflikt { border-color: var(--vdm-danger-text); box-shadow: 0 0 0 2px var(--vdm-danger-bg); }
.evp-es-ohnezeit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 8px; }
.evp-es-pzeile { padding: 1px 0; font-size: 0.83333rem; }
.evp-es-c0 { background: #b45309; } .evp-es-c1 { background: #1a7f4b; } .evp-es-c2 { background: #2459a6; } .evp-es-c3 { background: #7a3e9d; }
.evp-es-c4 { background: #5b6470; } .evp-es-c5 { background: #0e7490; } .evp-es-c6 { background: #9a3412; }
@media (max-width: 760px) { .evp-es-zeile { grid-template-columns: 6rem minmax(0, 1fr); } .evp-es-achse { padding: 6px 8px; } }

/* Tag entfernen (05.10.2026): Liste der mitgelöschten Einträge in der Sicherheitsabfrage */
.evp-tag-ent-liste { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }

/* Einsatzplan: Bedarf-Checkliste (05.10.2026) */
.evp-es-check-kopf { display: flex; gap: 6px; align-items: center; font-size: 0.8667rem; }
.evp-es-check-kopf.is-ok { color: var(--vdm-ok-text); }
.evp-es-check-kopf.is-warn { color: var(--vdm-warn-text); }
.evp-es-check.is-ok { color: var(--vdm-ok-text); }
.evp-es-check.is-fehlt { color: var(--vdm-danger-text); }
.evp-es-check.is-zuviel { color: var(--vdm-warn-text); }

/* Mobilansicht Eventübersicht (06.10.2026, docs/ui/mobil-konzept.md): Karten statt Tabelle, Inhalt zuerst, Tippflächen >= 40 px */
.evp-karten { display: none; }
@media (max-width: 1199.98px) {
    .evp .evp-suche { min-height: 40px; font-size: 1rem; }
    .evp .evp-filter .evp-chip { min-height: 40px; }
    .evp-uebersicht .evp-seg { height: 40px; }
    .evp-uebersicht .evp-kopf .evp-knopf { min-height: 40px; }
}
@media (max-width: 767.98px) {
    .evp-uebersicht .evp-kpis, .evp-uebersicht .evp-band { display: none !important; }
}
@media (max-width: 1199.98px) {
    .evp-uebersicht .evp-leiste { display: none !important; }
    .evp-uebersicht .evp-tabelle-rahmen { display: none; }
    .evp-uebersicht .evp-karten { display: grid; gap: 8px; padding: 8px 12px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .evp-uebersicht .evp-karten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1199.98px) {
    .evp-evkarte { display: grid; gap: 3px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--evp-rand); border-radius: 12px; background: var(--evp-flaeche); color: var(--vdm-text); min-width: 0; }
    .evp-evkarte:active { background: var(--evp-flaeche-leise); }
    .evp-evkarte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .evp-evkarte-kopf strong { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
    .evp-evkarte-kopf .evp-marke { flex: none; }
    .evp-evkarte-zeile { font-size: 0.86667rem; overflow-wrap: anywhere; }
    .evp-evkarte .is-leise, .evp-evkarte.is-leise .evp-evkarte-zeile { color: var(--evp-leise); }
    .evp-uebersicht .evp-filter { flex-wrap: wrap; gap: 8px; }
    .evp-uebersicht .evp-filter .evp-suche { flex: 1 1 100%; min-width: 0; }
    .evp-uebersicht .evp-filter-trenner { display: none; }
}
@media (max-width: 767.98px) {
    .evp-uebersicht .evp-kopf-felder .evp-feld-label, .evp-uebersicht .evp-kopf-titel .evp-eyebrow { display: none; }
    .evp-uebersicht .evp-kopf-felder { gap: 8px; width: 100%; }
    .evp-uebersicht .evp-kopf-felder .evp-feld { flex: 1 1 100%; min-width: 0; }
    .evp-uebersicht .evp-liste-kopf { display: none; }
}

/* Tippflächen der Event-Seite (06.10.2026): mindestens 40 px auf Handy und Tablet */
@media (max-width: 1199.98px) {
    .evp .evp-reiter button, .evp .evp-knopf.is-klein, .evp .evp-erg-knopf, .evp .evp-eck-mehr { min-height: 40px; }
    .evp .evp-ikon { min-width: 40px; min-height: 40px; }
}
@media (max-width: 1199.98px) {
    .evp .evp-acc-knopf, .evp .evp-knopf, .evp .evp-chip, .evp .evp-seg button, .evp .evp-eingabe, .evp .evp-eingabe.is-klein { min-height: 40px; }
    .evp .evp-seg, .evp .evp-seg.is-klein { height: auto; min-height: 40px; }
    .evp .evp-eingabe { font-size: 1rem; }
    .evp input[type=checkbox], .evp input[type=radio] { width: 22px; height: 22px; }
}
@media (max-width: 767.98px) {
    .evp .evp-kopf-rechts { flex-wrap: wrap; max-width: 100%; }
    .evp .evp-kopf-rechts .evp-knopf { max-width: 100%; white-space: normal; text-align: left; }
}
@media (max-width: 1199.98px) {
    .evp .evp-auswahl, .evp-drawer .evp-auswahl, .evp-drawer .evp-eingabe { min-height: 40px; }
}
@media (max-width: 767.98px) {
    .evp .evp-eingabe, .evp .evp-auswahl, .evp-drawer .evp-eingabe, .evp-drawer .evp-auswahl, .evp .evp-suche { font-size: 1.06667rem; }
}

/* Zeitachse (06.10.2026, Abgleich mit index-einsatzplan.html): `.evp button { font: inherit }` (Spezifität 0,1,1) überstimmte die Balkenschrift und ließ die Tätigkeit aus dem Balken laufen; Zeile 1 (Zeit, Person) bleibt einzeilig. */
.evp .evp-es-balken-el { font-size: 0.73333rem; line-height: 1.25; }
.evp-es-balken-el .evp-es-b1 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Zeitachse: Konflikt besser sichtbar (06.10.2026) – roter Ring außerhalb des Balkens, auch auf rotbraunem Balken erkennbar */
.evp-es-balken-el.is-konflikt { border-color: var(--evp-flaeche, #fff); box-shadow: 0 0 0 2px var(--vdm-danger-text); }

/* Zeitachse (06.10.2026): Stationsname bleibt beim Wischen stehen, wenn die Achse zum ersten Konflikt gescrollt wird */
@media (max-width: 1199.98px) {
    .evp-es-name { position: sticky; left: 0; z-index: 2; background: var(--evp-flaeche); }
}

/* Besetzung bei „Alle Tage“: Tagesüberschrift über den Funktionen eines Tages (06.10.2026) */
.evp-es-bed-tag { margin-top: 10px; font-size: 0.8rem; color: var(--evp-leise); letter-spacing: .02em; }
.evp-es-bed-tag:first-of-type { margin-top: 2px; }

/* Personal-Pool (06.10.2026): Zeile schimmert, bis die Änderung gespeichert und der Plan neu geladen ist (Muster des Tipp-Schimmers in site.css) */
.evp-kontakt.is-schimmer {
    background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--vdm-accent, #2563eb) 14%, transparent) 50%, transparent 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: vdm-tipp-schimmer 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .evp-kontakt.is-schimmer { animation: none; background-image: none; background-color: color-mix(in srgb, var(--vdm-accent, #2563eb) 8%, transparent); } }

/* Drawer (06.10.2026, Rückmeldung Dennis): In der Spalte des Drawer-Rumpfs schrumpften Elemente bei knapper Höhe (Intern/Extern-Umschalter auf wenige Pixel) –
   Kinder behalten ihre Höhe, der Rumpf scrollt. Der Umschalter im Personal-Pool bleibt beim Scrollen oben stehen. */
.evp-drawer-rumpf > * { flex-shrink: 0; }
.evp-drawer-rumpf > .evp-seg-fest { position: sticky; top: 0; z-index: 3; background: var(--evp-flaeche, var(--vdm-surface, #fff)); align-self: flex-start; box-shadow: 0 6px 6px -6px rgba(0,0,0,.18); }