* { box-sizing: border-box; }

body.eh-app-shell {
    margin: 0;
    padding: 0;
    background: #f3f4f6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #222;
}

.eh-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 16px;
}

/* Eigenständige App-Shell: konstanter Wellen-Header auf allen /event/{slug}/*-Seiten */
.eh-app-header {
    position: relative;
    /* Kein overflow:hidden hier — sonst würde das Login-Popover darunter mit abgeschnitten.
       Die Wellen-SVG braucht es nicht: sie füllt den Container exakt via inset:0. */
}
.eh-app-header > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.eh-app-header-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(4, 44, 83, 0.15);
}
.eh-app-header-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}
.eh-app-header-title .eh-icon { font-size: 18px; flex-shrink: 0; }
.eh-app-header-title .eh-name {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eh-app-header-login {
    flex-shrink: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}
.eh-lang-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.eh-lang-btn svg:first-child { width: 16px; height: 12px; border-radius: 2px; display: block; flex-shrink: 0; }
.eh-lang-btn { cursor: pointer; }
.eh-lang-chevron { width: 10px; height: 10px; flex-shrink: 0; }

/* Sprach-Popover — gleicher Checkbox-Mechanismus wie .eh-login-popover, eigene Liste statt Formular */
.eh-lang-popover { padding: 30px 10px 10px; max-width: 220px; }
.eh-lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.eh-lang-option:hover { background: #f1efe8; }
.eh-lang-option.is-active { background: #e6f1fb; color: #0c447c; font-weight: 600; }
.eh-lang-flag { width: 18px; height: 13px; border-radius: 2px; display: block; flex-shrink: 0; }

/* Eingeloggt: Name + Logout */
.eh-app-header-user { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: #fff; }
.eh-user-name { font-size: 12px; font-weight: 600; }
.eh-logout-btn { display: flex; color: #fff; opacity: 0.85; }
.eh-logout-btn svg { width: 16px; height: 16px; display: block; }
.eh-login-hint { font-size: 11px; color: #888; margin: -2px 0 2px; }
.eh-forgot-link {
    font-size: 11px;
    color: #185fa5;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
}
.eh-forgot-form { display: none; margin-top: 10px; }
.eh-forgot-toggle-cb:checked ~ .eh-forgot-form { display: flex; }

/* Login-Popover: reine CSS-Checkbox-Lösung, kein JS */
.eh-login-toggle-cb { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.eh-login-popover {
    display: none;
    position: absolute;
    top: 100%;
    right: 14px;
    left: 14px;
    max-width: 320px;
    margin-left: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.10);
    padding: 16px 16px 14px;
    z-index: 20;
}
/* Bugfix Produktion 2026-08-17: war ein allgemeiner Sibling-Selektor (~), der ALLE
   .eh-login-popover-Elemente nach IRGENDEINem angehakten Toggle gleichzeitig anzeigte — Klick auf
   den Sprach-Umschalter öffnete dadurch zusätzlich (und sichtbar darüber) das Login-/E-Mail-Popover,
   User-Report: "Sprache lässt sich nicht einstellen, wird stattdessen zur E-Mail-Eingabe
   aufgefordert". Jeder Toggle steht im Markup direkt vor seinem EIGENEN Popover (keine Elemente
   dazwischen) — der direkte Sibling-Selektor (+) bindet deshalb exakt 1:1, kein Markup-Umbau nötig. */
.eh-login-toggle-cb:checked + .eh-login-popover { display: block; }
.eh-login-popover-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    color: #888;
    cursor: pointer;
}
.eh-login-popover-close svg { width: 16px; height: 16px; }

.eh-login-form { display: flex; flex-direction: column; gap: 8px; }
.eh-login-label { font-size: 12px; font-weight: 600; color: #444; margin-bottom: 2px; }
.eh-login-form select,
.eh-login-form input[type=text],
.eh-login-form input[type=email],
.eh-login-form input[type=password] {
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 100%;
}
.eh-login-error { color: #a32d2d; font-size: 12px; margin: 0; }
.eh-datum-jetzt-row { display: flex; gap: 6px; align-items: center; }
.eh-datum-jetzt-row input[type=datetime-local] { width: 170px; }

.eh-btn-primary {
    background: #185fa5;
    color: #fff;
    border: none;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.eh-btn-secondary {
    background: #f1efe8;
    color: #444;
    border: none;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.eh-login-secondary {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

/* Nachrichten-Chip-Zeile */
.eh-messages-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
    max-width: 640px;
    margin: 0 auto;
}
.eh-msg-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.eh-msg-chip .eh-msg-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.eh-msg-dringend { background: #fcebeb; color: #791f1f; }
.eh-msg-dringend .eh-msg-dot { background: #e24b4a; }
.eh-msg-wichtig { background: #fbf1e0; color: #7a4e0a; }
.eh-msg-wichtig .eh-msg-dot { background: #d99a2b; }
.eh-msg-info { background: #e6f1fb; color: #0c447c; }
.eh-msg-info .eh-msg-dot { background: #378add; }

/* Hamburger + Titel + Filter */
.eh-subnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
    max-width: 640px;
    margin: 0 auto;
}
.eh-subnav-left,
.eh-subnav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.eh-subnav-right { justify-content: flex-end; }
.eh-subnav-burger svg,
.eh-subnav-home svg,
.eh-subnav-back svg,
.eh-subnav-filter svg,
.eh-subnav-filter-clear svg { width: 18px; height: 18px; display: block; }
.eh-subnav-burger,
.eh-subnav-filter { color: #333; }
.eh-subnav-home,
.eh-subnav-back {
    color: #185fa5;
    display: flex;
    text-decoration: none;
}
.eh-subnav-filter-clear { color: #a32d2d; display: flex; }
.eh-subnav-title { font-size: 14px; font-weight: 600; white-space: nowrap; }

.eh-app-body {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px;
}

/* Sand-Kachel (Events, Gruppen, ...) */
.eh-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.eh-tile-sand {
    background: #faeeda;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(65, 36, 2, 0.18), 0 2px 6px rgba(65, 36, 2, 0.12);
    padding: 1.25rem 1rem;
    text-align: center;
    text-decoration: none;
    display: block;
    color: inherit;
}
.eh-tile-sand .eh-tile-icon { font-size: 32px; margin-bottom: 8px; }
.eh-tile-sand .eh-tile-title { font-weight: 600; font-size: 15px; color: #633806; }
.eh-tile-sand .eh-tile-sub { font-size: 12px; color: #854f0b; margin-top: 4px; }

/* Gruppen-Liste: 2 Spalten, linksbündig (wie Mockup) statt zentriertem Icon-Layout, kompakt */
.eh-tile-grid-2col { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.eh-tile-grid-2col .eh-tile-sand { text-align: left; padding: 9px 10px; border-radius: 12px; }
.eh-tile-grid-2col .eh-tile-title-row { display: flex; align-items: center; gap: 6px; }
.eh-tile-grid-2col .eh-tile-flag { width: 16px; height: 12px; border-radius: 2px; flex-shrink: 0; display: block; }
.eh-tile-grid-2col .eh-tile-title { font-size: 13.5px; line-height: 1.25; }
.eh-tile-grid-2col .eh-tile-sub { display: block; margin-top: 3px; font-size: 11px; }

/* Kachel mit Extra-Aktion (z.B. Löschen) obendrauf, ohne die Karte als Ganzes klickbar zu machen —
   äußeres Element wird zum <div>, der eigentliche Link liegt innen (eh-tile-sand-link übernimmt
   die bisherigen Anker-Stile von .eh-tile-sand 1:1, damit die Karte optisch identisch bleibt). */
.eh-tile-sand-with-actions { position: relative; }
.eh-tile-sand-link { text-decoration: none; display: block; color: inherit; }
.eh-tile-delete-form { position: absolute; top: 6px; right: 6px; margin: 0; }
.eh-tile-delete-btn {
    background: rgba(255, 255, 255, 0.65);
    border: none;
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.eh-tile-delete-btn:hover { background: rgba(255, 255, 255, 0.95); }

/* Gruppen-Detailansicht */
.eh-detail-title { margin: 0 0 4px; font-size: 19px; }
.eh-detail-meta { margin: 0 0 16px; color: #666; font-size: 13px; }
.eh-member-list { border-radius: 10px; overflow: hidden; margin-top: 16px; }
.eh-member-row {
    padding: 8px 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.eh-member-row.is-even { background: #fff; }
.eh-member-row.is-odd { background: #f4f3ef; }
.eh-member-name { flex: 1; min-width: 100px; }
.eh-member-pin-badge { font-size: 11px; color: #888; }
.eh-kapitaen-form { margin: 0; }
.eh-kapitaen-radio { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #888; cursor: pointer; white-space: nowrap; }
.eh-kapitaen-badge { margin-left: 4px; }

.eh-pin-form { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.eh-pin-form input[type=text] {
    width: 64px;
    font-size: 13px;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align: center;
}
.eh-btn-xs {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 999px;
    border: none;
    background: #185fa5;
    color: #fff;
    cursor: pointer;
}

.eh-detail-header-row { display: flex; align-items: center; gap: 8px; }
.eh-detail-flag { width: 22px; height: 16px; border-radius: 2px; flex-shrink: 0; display: block; }

.eh-notice { font-size: 13px; padding: 8px 12px; border-radius: 8px; margin: 8px 0; }
.eh-notice-ok { background: #eaf3de; color: #27500a; }
.eh-notice-error { background: #fcebeb; color: #791f1f; }
.eh-notice-flat { border-radius: 0; margin: 0; text-align: center; }

.eh-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #eef0f2; color: #444; white-space: nowrap; }
.eh-einheit-tag { display: inline-block; font-size: 11px; color: #666; background: #eef0f2; border-radius: 4px; padding: 0 5px; margin-left: 4px; white-space: nowrap; }

/* Druckansicht Beschaffungsliste (User-Vorgabe 2026-08-18, "nur Druckansicht" statt PDF-Download) —
   .eh-print-only ist auf dem Bildschirm unsichtbar, im Druckdialog wird ALLES ANDERE ausgeblendet
   und nur dieser Block gezeigt (robuster als jedes interaktive Element einzeln zu verstecken). */
.eh-print-only { display: none; }
@media print {
    body * { display: none !important; }
    .eh-print-only, .eh-print-only * { display: revert !important; }
    .eh-print-only { padding: 24px; }
    .eh-print-only table { border-collapse: collapse; width: 100%; margin-top: 12px; }
    .eh-print-only th, .eh-print-only td { border: 1px solid #999; padding: 6px 8px; text-align: left; font-size: 13px; }
}
.eh-beschaffung-expand summary {
    display: inline-block;
    cursor: pointer;
    font-size: 11px;
    color: #185fa5;
    background: #eaf3fb;
    border: 1px solid #b7d4ec;
    border-radius: 12px;
    padding: 1px 9px;
    margin-top: 3px;
    user-select: none;
    list-style: none;
}
.eh-beschaffung-expand summary::-webkit-details-marker { display: none; }
.eh-beschaffung-expand summary:hover { background: #d8e9f7; }
.eh-beschaffung-expand[open] summary { background: #185fa5; color: #fff; border-color: #185fa5; }
.eh-badge-warn { background: #fdf0d5; color: #7a4a05; }

/* Steckbrief (Kollaps via <details>) */
.eh-collapse {
    background: #fff;
    border-radius: 12px;
    margin: 14px 0;
    /* Kein overflow:hidden hier — sonst würde das absolut positionierte Picker-Popover
       (z.B. Rollen-Zuweisung) unten abgeschnitten, sobald es über den Rand hinausragt.
       Gleiches Prinzip wie beim Login-Popover im Header. Inhalt hat ohnehin Padding,
       braucht also keine Kantenclipping für den border-radius. */
}
.eh-collapse summary {
    padding: 16px 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.eh-collapse summary::-webkit-details-marker { display: none; }
.eh-collapse summary::before { content: "▸ "; color: #888; }
.eh-collapse[open] summary::before { content: "▾ "; }
.eh-collapse-body { padding: 0 14px 14px; }

/* Modifier für "Zur Kasse"/"Zahlung erfassen" (User-Vorgabe 2026-08-14: gerne als Button statt
   Text+Dreieck) — bleibt technisch ein <details>/<summary>-Collapse, sieht aber wie ein
   vollflächiger, farbiger Button aus. */
.eh-collapse-btn { background: transparent; box-shadow: none; margin: 10px 0; }
.eh-collapse-btn summary {
    background: #185fa5;
    color: #fff;
    border-radius: 999px;
    padding: 10px 16px;
    text-align: center;
}
.eh-collapse-btn summary::before, .eh-collapse-btn[open] summary::before { content: none; }
.eh-collapse-btn[open] summary { border-radius: 12px 12px 0 0; }
.eh-collapse-btn .eh-collapse-body { background: #fff; border-radius: 0 0 12px 12px; padding-top: 14px; }

.eh-group-photo {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin-bottom: 10px;
}
.eh-group-photo-empty {
    background: #f1efe8;
    color: #a4a297;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.eh-photo-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.eh-photo-form input[type=file] { font-size: 12px; max-width: 180px; }
.eh-btn-sm {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    border: none;
    background: #185fa5;
    color: #fff;
    cursor: pointer;
}

.eh-fact-list { margin: 0; font-size: 13px; }
.eh-fact-list dt { color: #888; margin-top: 8px; }
.eh-fact-list dd { margin: 2px 0 0; font-weight: 500; }

.eh-motivation { font-size: 13px; font-style: italic; color: #444; margin-top: 12px; }

.eh-tile-empty {
    background: #f5f3ee;
    border: 1px dashed #b4b2a9;
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    color: #888780;
    font-size: 12px;
}

/* Event-Hub-Kacheln (Startseite nach Event-Auswahl) — responsiv 2/3-er Reihen statt starrer Breakpoints */
.eh-hub-grid {
    display: grid;
    /* Feste 3 Spalten statt auto-fit: minmax(84px,1fr) passte je nach echter Handy-Breite
       (375px vs. 430px) mal 3, mal 4 Kacheln rein — instabil. User-Vorgabe war "2er/3er-Reihen". */
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.eh-hub-grid:last-child { margin-bottom: 0; }
.eh-hub-tile {
    border-radius: 14px;
    padding: 12px 4px 10px;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: transform 0.12s ease;
}
.eh-hub-tile.is-active {
    /* Wärmer getönter Schatten statt neutralem Schwarz (User-Vorgabe 2026-08-18: "kalt und
       langweilig") — passt farblich zu .eh-hub-c-warm und wirkt dadurch als EIN stimmiger Effekt,
       nicht wie zwei unabhängige Stilentscheidungen. Deutlich kräftiger als vorher (mehr Blur/Spread)
       für spürbar mehr Tiefe. */
    box-shadow: 0 10px 22px rgba(180, 95, 35, 0.16), 0 3px 9px rgba(180, 95, 35, 0.12);
}
.eh-hub-tile.is-active .eh-hub-label { font-weight: 600; }
.eh-hub-tile.is-active:active { transform: scale(0.96); }
.eh-hub-tile.is-later {
    background: #f1efe8;
    color: #a4a297;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}
.eh-hub-tile.is-later .eh-hub-label { color: #a4a297; }

/* Farbvarianten — ursprünglich "bunter statt einheitlich blau" (2026-08-16), dann auf eine
   einheitliche Farbe reduziert (2026-08-17, User-Feedback zu willkürlicher Zuordnung ohne
   erkennbare Logik). Bleiben hier erhalten, weil die Kalender-Legende (event-kalender.php) sie
   weiterhin ECHT bedeutungstragend braucht (Farbe = Termin-Typ) — nur die Hub-/Intro-Kacheln selbst
   nutzen sie nicht mehr direkt. */
.eh-hub-c-amber  { background: #faeeda; color: #633806; }
.eh-hub-c-blue   { background: #e6f1fb; color: #0c447c; }
.eh-hub-c-teal   { background: #e1f5ee; color: #085041; }
.eh-hub-c-purple { background: #eeedfe; color: #26215c; }
.eh-hub-c-green  { background: #e8f5e0; color: #2e5a1c; }

/* Hub-/Intro-Kacheln (User-Vorgabe 2026-08-18): warmer Farbverlauf statt des vorherigen kühlen
   Einheitsblaus ("kalt und langweilig") — bewusst weiterhin EINE Familie statt bunt gemischter
   Töne (s. Kommentar oben), aber warm statt kühl, mit sichtbarem Verlauf für mehr Tiefe zusätzlich
   zum kräftigeren Schatten. */
.eh-hub-c-warm { background: linear-gradient(135deg, #fff2e2, #ffdfb0); color: #7a3e0a; }

.eh-hub-icon {
    font-size: 22px;
    line-height: 1;
    display: block;
}
.eh-hub-label { font-size: 10.5px; margin-top: 6px; display: block; line-height: 1.2; }

.eh-intro-text { line-height: 1.55; margin-bottom: 16px; }
.eh-intro-links { margin: 16px 0; }

/* Event-Kopf */
.eh-event-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.eh-event-header .eh-icon { font-size: 28px; }
.eh-event-header h1 { margin: 0; font-size: 22px; }
.eh-event-header .eh-date { color: #666; font-size: 13px; }

.eh-section-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

/* Rollen-Liste (Gruppen-Detailansicht) */
.eh-empty-hint { font-size: 13px; color: #888; }
.eh-role-list { margin-bottom: 12px; }
.eh-role-row {
    padding: 8px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid #eee;
}
.eh-role-row:last-child { border-bottom: none; }
.eh-role-name { font-weight: 600; min-width: 110px; }
.eh-role-person { flex: 1; color: #444; display: inline-flex; align-items: center; gap: 6px; }
.eh-role-remove-form { flex-shrink: 0; }
.eh-btn-danger { background: #b3382c; }
.eh-btn-success { background: #2f7d3c; }
.eh-btn-warning { background: #c97a1f; }
.eh-btn-gray { background: #8a8578; }
.eh-picker-trigger { background: #8a8578; }

.eh-role-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
}
.eh-role-form select {
    font-size: 13px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

/* Generischer Picker (Personen-/Material-Wähler) */
.eh-picker { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.eh-picker-selected { font-size: 13px; font-weight: 500; color: #185fa5; display: inline-flex; align-items: center; gap: 6px; }

/* Kleines rundes Profilfoto-Thumbnail — wiederverwendet in Picker-Ergebnissen/-Auswahl,
   Dauerjobs-Zuweisungen, Gruppen-Rollenliste. */
.eh-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.eh-picker-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    padding: 10px;
    width: 240px;
}
.eh-picker-search {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    margin-bottom: 6px;
}
.eh-picker-results { max-height: 180px; overflow-y: auto; }
.eh-picker-item {
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.eh-picker-item:hover { background: #f0f4fa; }
.eh-picker-empty { padding: 6px 8px; font-size: 12px; color: #888; }
.eh-picker-create {
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 500;
    color: #185fa5;
    border-radius: 6px;
    border-top: 1px solid #eee;
    margin-top: 4px;
    cursor: pointer;
}
.eh-picker-create:hover { background: #f0f4fa; }
.eh-picker-busy { opacity: 0.6; pointer-events: none; }
.eh-picker-cancel { margin-top: 6px; }

/* Material "+ Neu anlegen"-Mini-Formular (User-Vorgabe 2026-08-17, alle Material-Picker-Stellen) */
.eh-picker-material-form { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.eh-picker-material-form label { font-size: 11px; color: #888; display: flex; flex-direction: column; gap: 2px; }
.eh-picker-material-form input {
    font-size: 13px;
    padding: 5px 7px;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.eh-picker-material-form-btns { display: flex; gap: 6px; margin-top: 2px; }

/* Gruppe anlegen/bearbeiten/löschen (Admin/EventManager) */
.eh-new-group-btn { display: inline-block; margin: 0; }
.eh-gruppen-kopf-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.eh-gruppen-summe { font-size: 13px; color: #555; }
.eh-edit-link { margin-left: auto; font-size: 12px; color: #185fa5; text-decoration: underline; }
.eh-detail-header-row { display: flex; align-items: center; gap: 8px; }

.eh-gruppe-form { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.eh-form-label { font-size: 13px; color: #666; display: flex; flex-direction: column; gap: 4px; }
.eh-form-label input {
    font-size: 14px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid #ccc;
    color: #222;
}
.eh-gruppe-form-actions { margin-top: 4px; }
.eh-liste-kopf-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.eh-liste-kopf-row .eh-form-label { flex: 0 0 auto; }
.eh-liste-kopf-titel input { width: 140px; }
.eh-liste-kopf-typ { font-size: 13px; color: #666; padding-bottom: 9px; }
/* Kompakte Wagen-Summe rechtsbündig in derselben Zeile wie die Bulk-Aktion-Buttons (User-Vorgabe
   2026-08-14: eine eigene Zeile darüber kostete auf dem Handy zu viel Höhe). */
.eh-wagen-summe-compact { font-size: 13px; white-space: nowrap; margin-left: auto; }
.eh-gruppe-delete-form { margin-top: 18px; }

/* Mitglied hinzufügen */
.eh-member-add-form {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}
.eh-member-add-form input {
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    flex: 1;
    min-width: 110px;
}

.eh-manage-members-btn { display: inline-block; margin-top: 10px; }

/* Mitglieder-Detailansicht (Formular) */
.eh-mitglied-form { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.eh-existing-person-block {
    background: #f4f3ef;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 6px;
    max-width: 320px;
}
.eh-existing-person-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eh-form-checkbox, .eh-form-radio {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.eh-form-hint { font-size: 11px; color: #888; margin: -6px 0 0; }
.eh-form-fieldset { border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.eh-form-fieldset legend { font-size: 12px; color: #666; padding: 0 4px; }

/* Mitglieder verwalten (Filter + Bulk + Tabelle) */

/* Filter-Form + "+Neues Mitglied"/CSV-Import-Toolbar optisch zu EINER Zeile verschmolzen
   (User-Vorgabe 2026-08-17) — display:contents lässt die Kind-Elemente beider ursprünglich
   getrennten Container direkt in den Flex-Wrapper durchreichen, ohne die Formulare selbst
   ineinander verschachteln zu müssen (separate <form>-Tags bleiben technisch getrennt). */
.eh-member-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.eh-member-toolbar-row > .eh-member-filter,
.eh-member-toolbar-row > .eh-material-toolbar {
    display: contents;
}

.eh-member-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.eh-member-filter input[type=text], .eh-member-filter select {
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
}
.eh-new-member-btn { display: inline-block; }

/* Bulk-Bar: äußere Karte mit Schatten, INNEN in Gruppen-Kärtchen aufgeteilt (User-Vorgabe Runde 1+2)
   — jede Karte fasst nur inhaltlich zusammengehörige Aktionen (Alter / Ernährung / PIN /
   Anwesenheit / Team), damit die Logik auf den ersten Blick erkennbar ist. Löschen bekommt bewusst
   eine EIGENE kleine Karte statt in der Team-Karte mitzulaufen — Mitglied löschen ist inhaltlich
   keine Team-Aktion. Runde 3 (User-Vorgabe): die Kärtchen waren zunächst pro Gruppe unterschiedlich
   eingefärbt ("bunt"), das wurde explizit verworfen zugunsten EINER einheitlichen Kartenfarbe — die
   Gruppierung selbst bleibt durch die getrennten Kärtchen sichtbar, nur die Farbe ist jetzt neutral
   (angelehnt an cc-tournament: dort ist die ganze Bulk-Leiste EIN einfarbiges helles Blau, nur die
   Buttons selbst tragen Signalfarben wie .eh-btn-danger — gleiches Prinzip hier). */
.eh-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 12px;
    background: #f4f3ef;
    border: 1px solid #e6e3d8;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.eh-bulk-bar-buttons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.eh-bulk-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #eaf2fb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}
.eh-bulk-select, .eh-bulk-date {
    font-size: 12px;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
/* Icon-only Bulk-Buttons (Alkohol erlauben/verbieten) — größere Schrift für das Emoji, schmaleres
   Padding als Text-Buttons, sichtbarer Titel-Tooltip übernimmt die Beschriftung. */
.eh-btn-icon { font-size: 15px; padding: 3px 10px; line-height: 1.3; }

/* Spalten-Toggles als Checkbox-Chips (User-Vorgabe Runde 2: "dynamisch", man soll sehen was
   aktiviert ist) statt reiner Klick-Buttons — natives Checkbox-Häkchen bleibt sichtbar, :has()
   hebt den ganzen Chip hervor, wenn die Spaltengruppe gerade eingeblendet ist. Vier Gruppen:
   Ernährung (U18+Alkohol+Ernährung), Team(s) — Icon 🎽 bewusst identisch zur Teams-Hub-Kachel für
   Wiedererkennung —, PIN, Anwesenheit. Gleiches Grundprinzip wie die Kollaps-Mechanik der
   Catering-Übersicht, hier aber flach (keine Verschachtelung), deshalb reine CSS-Klassen auf der
   Tabelle statt data-lvl/data-toggle. */
.eh-col-toggle-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.eh-col-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 20px;
    line-height: 1;
    padding: 5px 12px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}
.eh-col-toggle-chip input[type=checkbox] { width: 14px; height: 14px; margin: 0; accent-color: #185fa5; cursor: pointer; }
.eh-col-toggle-chip:has(input:checked) { background: #eaf3fb; border-color: #185fa5; }
.eh-member-table.eh-hide-diet-cols .col-diet { display: none; }
.eh-member-table.eh-hide-team-col .col-team { display: none; }
.eh-member-table.eh-hide-pin-col .col-pin { display: none; }
.eh-member-table.eh-hide-attendance-col .col-attendance { display: none; }
.eh-member-table.eh-hide-gruppe-col .col-gruppe { display: none; }
.eh-member-table.eh-hide-bestand-col .col-bestand { display: none; }
.eh-member-table.eh-hide-planung-col .col-planung { display: none; }
.eh-member-table.eh-hide-bedarf-col .col-bedarf { display: none; }
.eh-member-table.eh-hide-beschaffung-col .col-beschaffung { display: none; }
.eh-member-table .col-kosten { display: none; }
.eh-member-table tfoot.eh-kosten-footer { display: none; }
.eh-member-table.eh-show-kosten .col-kosten { display: table-cell; }
.eh-member-table.eh-show-kosten tfoot.eh-kosten-footer { display: table-row-group; }

.eh-member-table-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; border-radius: 10px; }
.eh-member-table { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
.eh-member-table th, .eh-member-table td {
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #eee;
}
.eh-member-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    box-shadow: 0 1px 0 #ddd;
    font-weight: 600;
}
.eh-member-table thead th a { color: #185fa5; text-decoration: none; }
/* Zeilen dezent alternierend eingefärbt ("Excel-like", User-Vorgabe 2026-08-17, Vorbild
   cc-tournament) — vor der :hover-Regel deklariert, damit Hover beim Überfahren einer geraden
   Zeile trotzdem gewinnt (gleiche Spezifität, Reihenfolge entscheidet). */
.eh-member-table tbody tr:nth-child(even) { background: #f7f6f1; }
.eh-member-table tbody tr:hover { background: #f9f8f5; }
.eh-member-table tbody tr.is-inactive { opacity: 0.5; }
.eh-clickable-row { cursor: pointer; }

/* "Material nachbestellen"-Formular im Kopf der Bedarf-Seite (User-Vorgabe 2026-08-18). */
.eh-nachbestellung-form {
    background: #f4f3ef;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.eh-nachbestellung-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eh-nachbestellung-menge { width: 90px; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid #ccc; }

/* Beleg-Detailmaske: Foto möglichst groß, aber begrenzt (Handy-Fotos oft sehr hochauflösend). */
.eh-beleg-foto { display: block; max-width: 100%; max-height: 70vh; border-radius: 10px; margin-bottom: 14px; object-fit: contain; }

/* Finanzübersicht (Belege-Kachel): Σ Ausgaben/Einnahmen/Saldo als kompakte Kennzahlen-Zeile. */
.eh-belege-saldo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    background: #f4f3ef;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 10px 0;
}
.eh-belege-saldo dt { color: #888; margin: 0; }
.eh-belege-saldo dd { margin: 0 0 0 4px; font-weight: 600; display: inline; }
.eh-saldo-positiv { color: #2e5a1c; }
.eh-saldo-negativ { color: #b3382c; }

/* Feedback-Kachel: kompaktes Plus/Minus-Toggle im Formular (eh-feedback-typ-toggle, Konzept
   vereinfacht 2026-08-25 — EIN Typ+Titel+Inhalt pro Eintrag statt dynamischer Zeilen) und der
   Typ-Badge in Liste/Detailsicht — gleiche Grün-/Rottöne wie der Saldo oben, damit Plus/Minus im
   ganzen Plugin konsistent wirkt. :has() für den aktiven Zustand (kein extra JS nötig). */
.eh-feedback-typ-toggle { display: inline-flex; gap: 8px; margin: 2px 0 4px; }
.eh-feedback-typ-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #f6f6f4;
    color: #777;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.eh-feedback-typ-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eh-feedback-typ-option:has(input:checked) { border-color: transparent; }
.eh-feedback-typ-option.is-plus:has(input:checked)  { background: #eef6e6; color: #2e5a1c; }
.eh-feedback-typ-option.is-minus:has(input:checked) { background: #fbebe8; color: #b3382c; }

.eh-feedback-typ-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.eh-feedback-typ-badge-plus  { background: #eef6e6; color: #2e5a1c; }
.eh-feedback-typ-badge-minus { background: #fbebe8; color: #b3382c; }

.eh-feedback-text { font-size: 14px; margin: 12px 0; }

.eh-feedback-antworten-liste { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 16px; }
.eh-feedback-antwort { padding: 8px 12px; border-radius: 10px; background: #f6f6f4; font-size: 14px; }

/* Spaltenkopf-Gruppen als Kachel/Chip (User-Vorgabe Runde 4: der Rahmen aus Runde 3 "sieht nicht
   gut aus") — EINE einheitliche helle Füllfarbe (gleicher Ton wie .eh-bulk-group) statt Rahmenlinie,
   bewusst weiterhin nur eine Farbe für alle Gruppen (nicht "bunt", s. Runde-3-Feedback zu den
   Bulk-Kärtchen). col-group-frame liefert die Füllfarbe für alle betroffenen Header-Zellen;
   col-group-frame-start/-end runden NUR die äußeren Ecken einer Mehrspalten-Gruppe (Ernährung:
   U18+Alkohol+Ernährung) ab — PIN/Anwesenheit/Team(s) sind je eine einspaltige Gruppe und bekommen
   deshalb direkt über ihre eigene Spaltenklasse alle vier Ecken gerundet. */
.eh-member-table thead th.col-group-frame { background: #eaf2fb; }
.eh-member-table thead th.col-pin,
.eh-member-table thead th.col-attendance,
.eh-member-table thead th.col-team { border-radius: 8px; }
.eh-member-table thead th.col-group-frame-start { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.eh-member-table thead th.col-group-frame-end { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* Beschaffungsliste-Positionstabelle: Gruppe/Titel schmaler mit Umbruch statt nowrap (überschreibt
   die generische .eh-member-table-Regel nur für diese beiden Spalten), Einheit schmal fix. Gruppe
   steht bewusst als letzte Spalte (User-Vorgabe 2026-08-14, "ganz nach rechts schieben") — auf
   Handybreite verschwindet sie ohne horizontales Scrollen, ohne die wichtigeren Spalten davor zu
   verdrängen. TK/Kühlung-Icons zwischen Titel und Einheit statt in der Gruppen-Zelle. */
.eh-pos-gruppe, .eh-pos-titel { white-space: normal; max-width: 90px; }
.eh-pos-einheit { white-space: normal; max-width: 24px; }
.eh-pos-icons { white-space: nowrap; text-align: center; padding-left: 2px; padding-right: 2px; }

/* Zellenabstand insgesamt enger (User-Vorgabe 2026-08-14/-15, "in den Wagen"-Knopf soll ohne
   Scrollen sichtbar sein) — nur für die Beschaffungsliste-Positionstabelle, NICHT die generische
   .eh-member-table-Regel global ändern (die wird auch von Mitglieder-/Materialstamm-Listen genutzt). */
.eh-pos-table th, .eh-pos-table td { padding-left: 5px; padding-right: 5px; }
.eh-pos-table th:first-child, .eh-pos-table td:first-child { padding-right: 2px; }
.eh-pos-table th:nth-child(2), .eh-pos-table td:nth-child(2) { padding-left: 2px; }

/* Der "geh zur Detailseite"-Link jeder Tabellen-Liste als farbiger Pill-Button/"Kachel" statt
   Fließtext-Hyperlink (User-Vorgabe 2026-08-18: "hässliche Hyperlink-Einträge... durch Kacheln
   ersetzen", analog zur Mitglieder-Liste). War vorher ein reiner Chevron-Zeilen-Look (dunkler Text
   + "›"), jetzt derselbe Pill wie .eh-name-btn — EIN gemeinsamer Style für beide Fälle:
   - Tabellen OHNE Checkbox-Spalte (Personen, Mahlzeiten, Spiele, Programm, Jobs, Belege-Übersicht):
     der Link ist automatisch td:first-child, die generische Regel greift ohne Markup-Änderung.
   - Tabellen MIT Checkbox-Spalte davor (Materialstamm, Planung, Mitglieder verwalten): dort ist
     die Checkbox td:first-child, der Titel-Link braucht deshalb explizit class="eh-name-btn" im
     Markup (gleiche Klasse, gleiches Aussehen — nur der Selektor-Weg unterscheidet sich). */
.eh-member-table tbody td:first-child a,
.eh-name-btn {
    display: inline-block;
    background: #eaf3fb;
    color: #185fa5;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s ease;
}
.eh-member-table tbody td:first-child a:hover,
.eh-name-btn:hover { background: #d3e7f7; }
.eh-inline-form { display: inline-block; margin-left: 4px; }

/* PIN-Anzeige als dunkles Monospace-Badge (User-Vorgabe 2026-08-17, Vorbild cc-tournament-Plugin —
   dort werden PINs/Codes als dunkle "Digitalanzeige"-Chips dargestellt statt als Klartext). */
.eh-pin-badge {
    display: inline-block;
    background: #1f2937;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
}

/* Kalender — Tagesspalten scrollen gemeinsam horizontal, gleiches Prinzip wie .eh-member-table-wrap,
   nur auf ein Grid statt eine Tabelle angewandt. Positionierung (top/height/left_px/width_px/
   day_width) kommt fertig berechnet aus PHP (EH_Public::build_kalender_tage()). Typ-/Eigene-Filter
   laufen clientseitig (eh-kalender.js, User-Vorgabe 2026-08-17) — .is-kalender-hidden blendet
   Kacheln rein per CSS aus, ohne die inline gesetzten Positions-Styles anzufassen. */
.eh-kalender-legende { display: flex; gap: 14px; font-size: 12px; color: #555; margin: 4px 0 10px; flex-wrap: wrap; }
.eh-kalender-legende-item { display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.eh-kalender-legende-item input { margin: 0; }
.eh-kalender-eigene-toggle { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; cursor: pointer; }
.eh-kalender-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.eh-kalender-scroll { overflow-x: auto; border-radius: 10px; background: #fff; }
.eh-kalender-grid { display: flex; min-width: min-content; }
.eh-kalender-day-header {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 4px;
    border-bottom: 1px solid #eee;
}
.eh-kalender-axis { flex-shrink: 0; width: 34px; position: sticky; left: 0; background: #fff; z-index: 2; box-shadow: 1px 0 0 #eee; }
.eh-kalender-axis-body { position: relative; }
.eh-kalender-hour-label { position: absolute; right: 4px; transform: translateY(-50%); font-size: 10px; color: #999; }
.eh-kalender-day { flex-shrink: 0; border-left: 1px solid #eee; }
.eh-kalender-day-body { position: relative; }
.eh-kalender-hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid #f1efe8; }
.eh-kalender-allday-row { display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 4px; }
.eh-kalender-tile {
    position: absolute;
    border-radius: 6px;
    padding: 3px 5px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}
.eh-kalender-tile.is-kalender-hidden { display: none; }
.eh-kalender-tile-titel { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-kalender-tile-zeit { font-size: 10px; opacity: 0.85; white-space: nowrap; }

/* Materialstamm */
.eh-material-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
}
.eh-material-toolbar input[type=text] {
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    flex: 1;
    min-width: 140px;
}
.eh-material-groupfilter select {
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
}
.eh-csv-import-block {
    background: #f4f3ef;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
}

/* Mahlzeiten / Menüs */
.eh-menue-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.eh-menue-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: #f9f8f5;
    border-radius: 8px;
}
.eh-menue-row-title { flex: 1; min-width: 120px; font-size: 13px; font-weight: 600; color: #222; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.eh-menue-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #e1f5ee;
    color: #085041;
    font-size: 10.5px;
    font-weight: 500;
}
.eh-anzahl-form { display: flex; align-items: center; gap: 4px; }
.eh-anzahl-form input[type=number] {
    width: 56px;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
.eh-add-menue-form { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.eh-add-menue-form select {
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
}
.eh-csv-import-block form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eh-csv-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: monospace;
    font-size: 12px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    resize: vertical;
}

/* Menükarte — mehr Design-Investment als die Verwaltungs-Masken, User-Wunsch: "farbenfroh,
   stilvoll, professionell". Warme, appetitanregende Palette statt der neutralen Sand-Kacheln. */
.eh-mk { display: flex; flex-direction: column; gap: 28px; }

.eh-mk-day-heading {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: #7a3d10;
    padding-bottom: 6px;
    border-bottom: 2px solid #f0cfa0;
}

.eh-mk-mahlzeiten-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.eh-mk-mahlzeit-box {
    flex: 1 1 260px;
    min-width: 240px;
    background: #fffaf3;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(122, 61, 16, 0.10), 0 2px 6px rgba(122, 61, 16, 0.06);
    overflow: hidden;
}
.eh-mk-mahlzeit-header {
    background: linear-gradient(135deg, #e8a33d, #d9822a);
    color: #fff;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.eh-mk-mahlzeit-titel { font-size: 15px; font-weight: 700; }
.eh-mk-mahlzeit-zeit { font-size: 12px; opacity: 0.92; white-space: nowrap; }
.eh-mk-empty { padding: 14px; font-size: 13px; color: #a4886a; font-style: italic; margin: 0; }

.eh-mk-menue-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}
.eh-mk-menue-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 10px 12px;
}
.eh-mk-menue-titel { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: #3a2313; }
.eh-mk-menue-body {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    align-items: center;
}
.eh-mk-menue-photo {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: #f4ead9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.eh-mk-menue-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eh-mk-menue-photo-fallback { font-size: 24px; opacity: 0.5; }
.eh-mk-menue-text { font-size: 12.5px; line-height: 1.4; color: #4a4038; }
.eh-mk-menue-hint { margin: 8px 0 0; font-size: 11px; color: #a4886a; font-style: italic; }

/* Mobil/schmal: Mahlzeiten eines Tages untereinander statt nebeneinander */
@media (max-width: 640px) {
    .eh-mk-mahlzeiten-row { flex-direction: column; }
    /* flex-basis 260px greift bei column-direction als Höhen- statt Breiten-Vorgabe und
       quetscht die Box (mit overflow:hidden) unter ihre Inhaltshöhe — daher hier auf
       auto/0 zurücksetzen und Breite explizit auf 100% stellen. */
    .eh-mk-mahlzeit-box { min-width: 0; width: 100%; flex: 0 0 auto; }
}

/* Jobs/Task */
.eh-task-row { flex-direction: column; align-items: flex-start; text-decoration: none; }
.eh-task-meta { font-size: 11px; color: #888; margin-top: 2px; }
.eh-task-done { background: #eaf3de; color: #27500a; }

/* Rezept / Mengen-Berechnung */
.eh-rezept-mengen-titel { font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.eh-rezept-mengen-titel:first-of-type { margin-top: 0; }
.eh-anzahl-form label { font-size: 12px; color: #666; display: flex; align-items: center; gap: 6px; }

/* Pagination */
.eh-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
    padding-top: 12px;
}
.eh-pagination-info { font-size: 12px; color: #888; }
.eh-btn-disabled { opacity: 0.4; pointer-events: none; }

/* Galerie (Media-Hub) */
.eh-galerie-upload {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 12px;
    margin-bottom: 14px;
}
.eh-galerie-upload form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eh-galerie-upload-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eeedfe;
    color: #26215c;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.eh-galerie-upload-btn input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.eh-galerie-tag-input {
    flex: 1 1 140px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 13px;
}

.eh-galerie-filterbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.eh-galerie-filterbar select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 12.5px;
    background: #fff;
    color: #333;
}

.eh-galerie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
}
.eh-galerie-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.eh-galerie-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Grundriss — größer als die Galerie-Kacheln und ungecroppt (User-Vorgabe 2026-08-16: Referenzmaterial
   muss lesbar bleiben, Fotofeed-Kachelgröße war dafür zu klein und object-fit:cover schnitt Pläne an). */
.eh-grundriss-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.eh-grundriss-grid .eh-galerie-item { aspect-ratio: auto; background: #f4f3ef; }
.eh-grundriss-grid .eh-galerie-item img { height: auto; object-fit: contain; }

/* Mehrfach-Upload-Vorschau (eh-multi-photo-preview.js) — Thumbnails der AUSGEWÄHLTEN, noch nicht
   hochgeladenen Dateien, direkt unter dem Datei-Feld. */
.eh-multi-photo-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eh-multi-photo-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; }
.eh-multi-photo-preview:empty { display: none; margin: 0; }

.eh-galerie-tag-chip {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eh-galerie-delete-form { position: absolute; top: 4px; right: 4px; margin: 0; }
.eh-galerie-delete-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eh-galerie-delete-btn:active { transform: scale(0.9); }

.eh-galerie-like-form { position: absolute; bottom: 4px; left: 4px; margin: 0; }
.eh-galerie-like-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
}
.eh-galerie-like-btn:active { transform: scale(0.92); }
.eh-galerie-like-btn.is-liked { background: rgba(226, 75, 74, 0.85); }

/* Lightbox — Vollbild-Zoom + Diashow (eh-lightbox.js) */
.eh-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eh-lightbox[hidden] { display: none; }
.eh-lightbox-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 4px; }
.eh-lightbox-caption {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 13px;
    opacity: 0.85;
}
.eh-lightbox button {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eh-lightbox button:hover { background: rgba(255, 255, 255, 0.25); }
.eh-lightbox-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 18px; }
.eh-lightbox-play { top: 14px; right: 62px; width: 40px; height: 40px; font-size: 16px; }
.eh-lightbox-prev, .eh-lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 26px; }
.eh-lightbox-prev { left: 14px; }
.eh-lightbox-next { right: 14px; }

/* Catering-Übersicht — breite Matrix, horizontal UND vertikal kollabierbar (eh-catering-uebersicht.js).
   Gleiches .eh-member-table-Grundgerüst wie andere Listen, hier zusätzlich sticky erste Spalte
   (Name/Gruppe bleibt beim horizontalen Scrollen sichtbar, analog .eh-kalender-axis) und enge
   Zellen, weil sehr viele Spalten (Tag×Tagesteil×Ernährung) nebeneinanderstehen. */
.eh-catering-hint { font-size: 12px; color: #666; margin-bottom: 8px; }
.eh-catering-wrap { max-height: 75vh; }
.eh-catering-table { font-size: 12px; }
.eh-catering-table th, .eh-catering-table td { padding: 5px 7px; text-align: center; }
.eh-catering-name-col {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 3;
    text-align: left !important;
    white-space: nowrap;
    box-shadow: 1px 0 0 #ddd;
}
.eh-catering-table thead th.eh-catering-name-col { z-index: 6; }
.eh-cc { border-left: 1px solid #f1efe8; }
.eh-cc-tag { background: #f7f6f2; font-weight: 600; }
.eh-cc-teil { background: #fbfaf7; }
.eh-cc-diet-label { font-weight: 400; color: #666; }
.eh-cc-alkohol { background: #fdfaf5; }
/* Fester, nicht kollabierbarer Spaltenblock direkt hinter dem Namen (absolute Summen/Häkchen je
   Eigenschaft, s. event-catering-uebersicht.php $static_cells_from_sum()/_from_member()) — eigene,
   etwas dunklere Tönung, damit er sich optisch von den kollabierbaren Tag-Spalten abhebt. */
.eh-catering-static-col { background: #f0eee7; }
.eh-catering-table thead th.eh-catering-static-col { background: #e9e6dc; }
/* Aggregations-Spalten (Summe je Tagesteil/Eigenschaft über ALLE Tage) — eigener Farbton, damit
   sie sich von den absoluten Kopfzahl-Spalten links daneben unterscheiden lassen. */
.eh-catering-agg-col { background: #eef2f0; }
.eh-catering-table thead th.eh-catering-agg-col { background: #e2e9e5; }
/* Preisfaktoren-Kopfformular + Inline-Beträge in den Mitglieder-/Summenzeilen (Einnahmen-Teil). */
.eh-catering-preise-form { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 12px; }
.eh-form-label-inline { font-size: 13px; color: #666; display: inline-flex; align-items: center; gap: 6px; }
.eh-form-label-inline input { font-size: 13px; padding: 5px 7px; border-radius: 6px; border: 1px solid #ccc; }
.eh-catering-tage-form, .eh-catering-bezahlt-form { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 2px; }
.eh-catering-tage-form input, .eh-catering-bezahlt-form input { font-size: 12px; padding: 2px 4px; border-radius: 4px; border: 1px solid #ccc; }
.eh-catering-betrag { display: block; font-size: 11px; color: #666; }
.eh-catering-toggle { cursor: pointer; user-select: none; white-space: nowrap; }
.eh-catering-toggle:hover { color: #185fa5; }
.eh-catering-arrow { display: inline-block; width: 10px; color: #888; }
.eh-catering-group-row { cursor: pointer; background: #f4f3ef; font-weight: 600; }
.eh-catering-group-row:hover { background: #efece4; }
.eh-catering-count { font-weight: 400; color: #888; font-size: 11px; }
.eh-catering-member-row .eh-catering-name-col { padding-left: 22px; font-weight: 400; }
.eh-catering-grand-row { font-weight: 700; background: #f4f3ef; }
.eh-catering-table tfoot td { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -1px 0 #ddd; }
.eh-catering-table tfoot td.eh-catering-name-col { z-index: 4; }

/* Nachrichten (Messaging) — Kartendesign überarbeitet (User-Vorgabe 2026-08-17: "wirkt plump"):
   weicherer Schatten statt harter Kontur, Kategorie als farbige Pille statt reinem Text, mehr Luft,
   dezenter Hover. .eh-nachricht-kompakt für die Sendbox (User-Vorgabe: dort reicht "Stichwort als
   Reminder", kein voller Zeilenabstand nötig, weil man den Inhalt schon kennt). */
.eh-nachricht-compose { margin-bottom: 10px; }
.eh-nachricht-gruppenwahl { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.eh-nachricht-gruppenwahl[hidden] { display: none; }
.eh-nachrichten-liste { display: flex; flex-direction: column; gap: 10px; }
.eh-nachricht-zeile {
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    border-left: 3px solid #ccc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow .15s ease;
}
.eh-nachricht-zeile:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.09), 0 1px 2px rgba(0,0,0,0.04); }
.eh-nachricht-zeile.eh-msg-cat-info { border-left-color: #378add; }
.eh-nachricht-zeile.eh-msg-cat-wichtig { border-left-color: #d99a2b; }
.eh-nachricht-zeile.eh-msg-cat-dringend { border-left-color: #e24b4a; }
.eh-nachricht-zeile.is-unread { background: #fefdf9; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(217,154,43,0.18); }
.eh-nachricht-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eh-nachricht-kopf strong { font-size: 14px; font-weight: 600; color: #23211d; }
.eh-nachricht-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef0f2;
    color: #667;
    flex-shrink: 0;
}
.eh-msg-cat-info .eh-nachricht-badge { background: #e6f1fb; color: #0c447c; }
.eh-msg-cat-wichtig .eh-nachricht-badge { background: #fbf1e0; color: #7a4e0a; }
.eh-msg-cat-dringend .eh-nachricht-badge { background: #fcebeb; color: #791f1f; }
.eh-nachricht-meta { font-size: 12px; color: #999; margin-left: auto; white-space: nowrap; }
.eh-nachricht-body { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: #4a4740; }
.eh-nachricht-aktionen { display: flex; gap: 6px; margin-top: 10px; }
.eh-nachricht-storniert { font-size: 12px; color: #999; font-style: italic; }
.eh-nachricht-zeile.eh-nachricht-kompakt { padding: 9px 14px; border-radius: 10px; box-shadow: none; border: 1px solid #f0efe9; }
.eh-nachricht-zeile.eh-nachricht-kompakt .eh-nachricht-kopf strong { font-size: 13px; font-weight: 500; }

/* Lost & Found — zwei <tr> pro Eintrag (User-Vorgabe 2026-08-16: Aktionen-Spalte immer sichtbar
   ohne horizontales Scrollen), Beschreibung/Ablage in einer schmaleren Unterzeile statt eigener
   Spalten, weil dafür keine Sortierfunktion gebraucht wird.
   Kartendesign 2026-08-17 (analog Nachrichten, "wirkt plump"): weicherer Tabellenrahmen, dezenter
   Header, sanfter Hover — bewusst auf .eh-fund-table beschränkt, nicht die generische
   .eh-member-table-Regel global geändert (die tragen auch Materialstamm/Personen/Mahlzeiten). */
.eh-fund-table { border-radius: 12px; overflow: hidden; }
.eh-fund-table thead th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    color: #8a8578;
    background: #faf9f5;
}
.eh-fund-table tbody tr:not(.eh-fund-sub-row):hover { background: #fafaf6; }
.eh-fund-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.eh-fund-aktionen { display: flex; flex-direction: column; gap: 4px; white-space: normal; }
.eh-fund-titel, .eh-fund-ort { white-space: normal; max-width: 90px; overflow-wrap: break-word; }
.eh-fund-table th, .eh-fund-table td { padding-left: 6px; padding-right: 6px; }
.eh-fund-datum { line-height: 1.3; }
.eh-fund-datum span { display: block; }
.eh-fund-datum-zeit { font-size: 11px; color: #888; }
tr.is-eigener { background: #fbfaf5; }
.eh-fund-table tr:has(+ .eh-fund-sub-row) td { border-bottom: none; padding-bottom: 2px; }
.eh-fund-sub-row td { padding-top: 0; font-size: 12px; color: #666; }
.eh-fund-sub-row span { margin-right: 14px; }
.eh-ablage-ort-feld { margin-top: 6px; }