/*
 * The organiser area (prototype export-veranstalter, 2026-09-11).
 *
 * Every rule starts with .lea-organizer: all lea stylesheets load on every page,
 * so the prototype's global body, * and a rules were left out and its :root
 * tokens live on the wrapper instead. StylesheetScopeTest holds that.
 */

.lea-organizer {
    --lea-org-navy: #0a1b3e;
    --lea-org-navy-light: #13285a;
    --lea-org-red: #e22225;
    --lea-org-coral: #ff7a5c;
    --lea-org-red-dark: #b63032;
    --lea-org-ground: #f2f5fa;
    --lea-org-card: #ffffff;
    --lea-org-line: #e3e8f2;
    --lea-org-line-input: #d8dfeb;
    --lea-org-text: #0a1b3e;
    --lea-org-text-2: #3d4757;
    --lea-org-text-3: #5b6570;
    --lea-org-text-light: #8c95a5;
    --lea-org-gradient: linear-gradient(90deg, #e22225, #ff7a5c);
    --lea-org-gradient-navy: linear-gradient(160deg, #0a1b3e, #13285a);
    --lea-org-radius-card: 18px;
    background: var(--lea-org-ground);
    color: var(--lea-org-text);
}

.lea-organizer *,
.lea-organizer *::before,
.lea-organizer *::after {
    box-sizing: border-box;
}

/* A class with display:flex outweighs the browser's own [hidden] rule. */
.lea-organizer [hidden] {
    display: none !important;
}

/* ── Shell: navigation left, content right ── */

.lea-organizer__shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 28px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 4vw 64px;
}

/*
 * A page without the sidebar (an account that is not an organiser) has one column, not an empty 248px slot.
 * Capped at the width the main column has beside the sidebar — a 1200px wide address field reads badly.
 */
.lea-organizer__shell--solo {
    grid-template-columns: minmax(0, 960px);
}

.lea-organizer__main {
    min-width: 0;
}

/* The wrapper is the grid cell and carries the stickiness; the nav itself sits inside it. */
.lea-organizer__nav-shell {
    position: sticky;
    top: 20px;
    align-self: start;
}

/* Only the phone layout knows the toggle; here the list is simply there. */
.lea-organizer__nav-toggle,
.lea-organizer__nav-current {
    display: none;
}

.lea-organizer__nav {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: start;
}

.lea-organizer__nav-title {
    padding: 6px 14px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--lea-org-text-light);
}

/* `a.` is needed: link colours of the theme weigh more than one class. */
.lea-organizer a.lea-organizer__nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lea-org-navy);
    text-decoration: none;
    transition: background 0.15s;
}

.lea-organizer a.lea-organizer__nav-item:hover,
.lea-organizer a.lea-organizer__nav-item:focus {
    background: var(--lea-org-card);
    color: var(--lea-org-navy);
}

.lea-organizer a.lea-organizer__nav-item--active,
.lea-organizer a.lea-organizer__nav-item--active:hover,
.lea-organizer a.lea-organizer__nav-item--active:focus {
    background: var(--lea-org-navy);
    color: #ffffff;
}

.lea-organizer__nav-badge {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: #b91c1c;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
}

/* Same place as the badge, but calm: a top-up left in the basket is a reminder, not a fault. */
.lea-organizer__nav-dot {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b63032;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* Wie der Punkt daneben, nur mit Zahl: wie viele Entscheidungen warten. */
.lea-organizer__nav-count {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #b63032;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.lea-organizer__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.lea-organizer__icon svg {
    display: block;
}

/* ── Typography ── */

.lea-organizer__eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--lea-org-red-dark);
}

/* Set here, not inherited: the theme colours headings on its own. */
.lea-organizer .lea-organizer__title {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--lea-org-text);
}

.lea-organizer .lea-organizer__title strong {
    font-weight: 700;
}

.lea-organizer__card-title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lea-org-text);
}

/* ── Buttons ── */

.lea-organizer a.lea-organizer__button,
.lea-organizer button.lea-organizer__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    border: none;
    border-radius: 999px;
    background: var(--lea-org-gradient);
    color: #ffffff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

/*
 * Luft nach oben, wo ein Knopf einem Text oder einem Feld folgt — er klebte sonst daran.
 *
 * Angesetzt wird am VORGAENGER, nicht am Knopf selbst: dieselbe Klasse steht in
 * Dialogzeilen, in der Logo-Reihe, in der Editor-Seitenleiste und bei den
 * Gast-Knoepfen. Dort ist der Knopf Kind einer Flex-Reihe und hat keinen solchen
 * Vorgaenger — ein pauschaler margin-top haette jede dieser Reihen verschoben.
 * 18px ist der Abstand, den auch `__label` nach oben haelt.
 */
.lea-organizer__help + .lea-organizer__button,
.lea-organizer__input + .lea-organizer__button,
.lea-organizer__intro + .lea-organizer__button,
.lea-organizer__profile-status + .lea-organizer__button,
.lea-organizer__intro + form > .lea-organizer__button {
    margin-top: 18px;
}

.lea-organizer a.lea-organizer__button:hover,
.lea-organizer a.lea-organizer__button:focus,
.lea-organizer button.lea-organizer__button:hover,
.lea-organizer button.lea-organizer__button:focus {
    background: var(--lea-org-gradient-navy);
    color: #ffffff;
}

.lea-organizer a.lea-organizer__button--secondary {
    background: none;
    border: 1.5px solid var(--lea-org-navy);
    color: var(--lea-org-navy);
}

.lea-organizer a.lea-organizer__button--secondary:hover,
.lea-organizer a.lea-organizer__button--secondary:focus {
    background: var(--lea-org-navy);
    color: #ffffff;
}

/* ── Notice: profile incomplete ── */

.lea-organizer__notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid #fdba74;
    border-radius: 16px;
    background: #fff7ed;
    color: #7c3e0e;
    font-size: 13.5px;
    line-height: 1.5;
}

.lea-organizer__notice .lea-organizer__icon {
    color: #b45309;
}

.lea-organizer__notice-text {
    flex: 1;
    min-width: 220px;
}

.lea-organizer__notice-text p {
    margin: 0;
}
.lea-organizer__notice-text ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.lea-organizer a.lea-organizer__notice-button {
    padding: 9px 20px;
    border-radius: 999px;
    background: #b45309;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
}

.lea-organizer a.lea-organizer__notice-button:hover,
.lea-organizer a.lea-organizer__notice-button:focus {
    background: #92400e;
    color: #ffffff;
}

/* ── Key figures ── */

.lea-organizer__kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.lea-organizer__kpi {
    padding: 20px 22px;
    border: 1px solid var(--lea-org-line);
    border-radius: var(--lea-org-radius-card);
    background: var(--lea-org-card);
}

.lea-organizer__kpi-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lea-org-text-light);
}

.lea-organizer__kpi--published .lea-organizer__icon { color: #15803d; }
.lea-organizer__kpi--pending .lea-organizer__icon { color: #b45309; }
.lea-organizer__kpi--drafts .lea-organizer__icon { color: #475569; }
.lea-organizer__kpi--money .lea-organizer__icon { color: var(--lea-org-red-dark); }

.lea-organizer__kpi-value {
    margin-top: 10px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.lea-organizer__kpi-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--lea-org-text-light);
}

/* ── Upcoming dates and the call to action ── */

.lea-organizer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 16px;
}

.lea-organizer__card {
    flex: 2;
    min-width: 280px;
    padding: 22px 24px;
    border: 1px solid var(--lea-org-line);
    border-radius: var(--lea-org-radius-card);
    background: var(--lea-org-card);
}

/* Cards below one another instead of side by side; minmax keeps the card's min-width from widening the page. */
.lea-organizer__stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

/* Deleting an account is the one step nothing undoes — it may look different from saving a phone number. */
.lea-organizer__card--danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.lea-organizer__dates {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lea-organizer__date {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid #eef1f7;
}

.lea-organizer__date-day {
    width: 46px;
    flex-shrink: 0;
    padding: 6px 0;
    border-radius: 10px;
    background: var(--lea-org-ground);
    text-align: center;
}

.lea-organizer__date-number {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.lea-organizer__date-month {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lea-org-text-light);
}

.lea-organizer__date-text {
    flex: 1;
    min-width: 0;
}

.lea-organizer__date-title {
    /* A span is inline, and overflow/text-overflow do nothing there: the title ran straight over the status badge. */
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lea-organizer__date-place {
    display: block;
    font-size: 12px;
    color: var(--lea-org-text-light);
}

.lea-organizer__empty {
    margin: 0;
    padding: 16px 0;
    font-size: 13px;
    color: var(--lea-org-text-light);
}

.lea-organizer__cta {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 240px;
    padding: 24px;
    border-radius: var(--lea-org-radius-card);
    background: var(--lea-org-gradient-navy);
    color: #ffffff;
}

.lea-organizer__cta .lea-organizer__icon {
    color: var(--lea-org-coral);
}

.lea-organizer__cta-text {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.35;
}

.lea-organizer__cta-text strong {
    font-weight: 700;
}

.lea-organizer__cta .lea-organizer__button {
    align-self: flex-start;
    margin-top: 6px;
}

/* ── Status badges; the modifier is the state value ── */

.lea-organizer-status {
    display: inline-block;
    flex-shrink: 0;
    padding: 4px 11px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.lea-organizer-status--draft { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
.lea-organizer-status--pending_review { color: #b45309; background: #fff7ed; border-color: #fdba74; }
.lea-organizer-status--approved { color: #0e7490; background: #ecfeff; border-color: #67e8f9; }
.lea-organizer-status--published { color: #15803d; background: #f0fdf4; border-color: #86efac; }
.lea-organizer-status--paused { color: #6d28d9; background: #f5f3ff; border-color: #c4b5fd; }
.lea-organizer-status--rejected { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
/* Orange, not red: called off by the organiser or the editors, not turned down. */
.lea-organizer-status--cancelled { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.lea-organizer-status--expired { color: #94a3b8; background: #f8fafc; border-color: #e2e8f0; }

/* ── Guest and visitor: one card in the middle ── */

.lea-organizer__welcome {
    max-width: 640px;
    margin: 0 auto;
    padding: 56px 4vw 72px;
    text-align: center;
}

.lea-organizer__welcome-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 32px;
    border: 1px solid var(--lea-org-line);
    border-radius: 22px;
    background: var(--lea-org-card);
}

.lea-organizer__welcome-card .lea-organizer__icon {
    color: var(--lea-org-red-dark);
}

.lea-organizer__welcome-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--lea-org-text-3);
}

.lea-organizer__welcome-card form {
    margin: 0;
}

.lea-organizer__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

/* ── My events: head and toolbar ── */

.lea-organizer__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.lea-organizer__head .lea-organizer__title {
    margin-bottom: 0;
}

/* [Word] in the heading: bold like the prototype, not the theme's gradient (gradient and fill both reset). */
.lea-organizer .lea-organizer__title .headline-word-color {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
    font-weight: 700;
}

.lea-organizer__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.lea-organizer__toolbar-spacer {
    flex: 1;
}

.lea-organizer button.lea-organizer__chip {
    padding: 8px 16px;
    border: 1.5px solid var(--lea-org-line-input);
    border-radius: 999px;
    background: var(--lea-org-card);
    color: var(--lea-org-text-3);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.lea-organizer button.lea-organizer__chip[aria-pressed="true"] {
    border-color: var(--lea-org-navy);
    background: var(--lea-org-navy);
    color: #ffffff;
}

.lea-organizer .lea-organizer__field {
    max-width: 220px;
    padding: 9px 14px;
    border: 1.5px solid var(--lea-org-line-input);
    border-radius: 999px;
    background: #ffffff;
    color: var(--lea-org-text);
    font: inherit;
    font-size: 14px;
}

.lea-organizer .lea-organizer__field:focus {
    border-color: var(--lea-org-navy);
    outline: none;
}

/* ── My events: rows ── */

.lea-organizer__rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lea-organizer__event {
    padding: 16px 20px;
    border: 1px solid var(--lea-org-line);
    border-radius: var(--lea-org-radius-card);
    background: var(--lea-org-card);
}

/*
 * DIE KNOPFSPALTE HAT EINE OBERGRENZE. Als `auto` war sie so breit wie alle Knoepfe
 * nebeneinander und brach nie um: ab fuenf Knoepfen (Entwurf, und seit der Absage auch
 * Veroeffentlicht) nahm sie den Infospalten den Platz, der Titel schrumpfte auf ein Wort und
 * "Sichtbar bis" lag ueber dem Ort. Vier Knoepfe passen in die Grenze, der fuenfte bricht um.
 */
.lea-organizer__event-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) fit-content(460px);
    align-items: center;
    gap: 16px;
}

.lea-organizer__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 48px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--lea-org-gradient-navy);
    color: rgba(255, 255, 255, 0.9);
}

.lea-organizer__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lea-organizer__event-title {
    overflow: hidden;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lea-organizer__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.lea-organizer__category {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid var(--lea-org-line-input);
    border-radius: 999px;
    background: #ffffff;
    color: var(--lea-org-text-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.lea-organizer__meta-main {
    font-size: 13px;
    font-weight: 600;
}

.lea-organizer__meta-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--lea-org-text-light);
}

.lea-organizer__meta-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lea-org-text-light);
}

.lea-organizer__actions-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.lea-organizer__actions-row form {
    margin: 0;
}

.lea-organizer a.lea-organizer__action,
.lea-organizer button.lea-organizer__action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--lea-org-line-input);
    border-radius: 999px;
    background: #ffffff;
    color: var(--lea-org-navy);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.lea-organizer a.lea-organizer__action:hover,
.lea-organizer button.lea-organizer__action:hover,
.lea-organizer a.lea-organizer__action:focus,
.lea-organizer button.lea-organizer__action:focus {
    border-color: var(--lea-org-navy);
    color: var(--lea-org-navy);
}

.lea-organizer button.lea-organizer__action--primary,
.lea-organizer button.lea-organizer__action--primary:hover,
.lea-organizer button.lea-organizer__action--primary:focus {
    border-color: transparent;
    background: var(--lea-org-gradient);
    color: #ffffff;
}

.lea-organizer button.lea-organizer__action:disabled {
    cursor: wait;
    opacity: 0.6;
}

.lea-organizer__reason {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: #7f1d1d;
    font-size: 13px;
}

.lea-organizer__reason .lea-organizer__icon {
    color: #b91c1c;
}

.lea-organizer__hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--lea-org-text-light);
}

/* ── Empty states and notices ── */

.lea-organizer__blank {
    padding: 64px 24px;
    border: 1.5px dashed #c9d2e3;
    border-radius: 20px;
    background: #ffffff;
    text-align: center;
}

.lea-organizer__blank .lea-organizer__icon {
    color: #c9d2e3;
}

.lea-organizer__blank-title {
    margin: 14px 0 6px;
    font-size: 19px;
    font-weight: 600;
}

.lea-organizer__blank-text {
    max-width: 380px;
    margin: 0 auto 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lea-org-text-light);
}

.lea-organizer__flash {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 20px;
    border-radius: 999px;
    background: var(--lea-org-navy);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 500;
}

.lea-organizer__flash .lea-organizer__icon {
    color: var(--lea-org-coral);
}

.lea-organizer__flash--error {
    background: #7f1d1d;
}

/* ── Dialogs: native <dialog>, filled and opened by organizer.js ── */

.lea-organizer dialog.lea-organizer__dialog {
    width: min(480px, calc(100vw - 40px));
    max-height: 86vh;
    padding: 30px;
    border: none;
    border-radius: 22px;
    background: #ffffff;
    color: var(--lea-org-text);
}

.lea-organizer dialog.lea-organizer__dialog::backdrop {
    background: rgba(10, 27, 62, 0.55);
    backdrop-filter: blur(3px);
}

.lea-organizer__dialog-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.lea-organizer__dialog-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.lea-organizer__dialog-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--lea-org-text-2);
}

.lea-organizer__dialog-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--lea-org-ground);
}

.lea-organizer__dialog-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.lea-organizer__dialog-line dt {
    color: var(--lea-org-text-3);
}

.lea-organizer__dialog-line dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.lea-organizer__checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.lea-organizer__checklist li {
    padding: 5px 14px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
}

.lea-organizer__dialog-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.lea-organizer button.lea-organizer__button--quiet,
.lea-organizer a.lea-organizer__button--quiet {
    border: 1.5px solid var(--lea-org-line-input);
    background: none;
    color: var(--lea-org-navy);
}

.lea-organizer button.lea-organizer__button--quiet:hover,
.lea-organizer button.lea-organizer__button--quiet:focus {
    border-color: var(--lea-org-navy);
    background: none;
    color: var(--lea-org-navy);
}

.lea-organizer button.lea-organizer__button--danger,
.lea-organizer button.lea-organizer__button--danger:hover,
.lea-organizer button.lea-organizer__button--danger:focus {
    background: #b91c1c;
}

.lea-organizer__dialog--pending .lea-organizer__dialog-head .lea-organizer__icon { color: #b45309; }
.lea-organizer__dialog--done .lea-organizer__dialog-head .lea-organizer__icon { color: #15803d; }
.lea-organizer__dialog--danger .lea-organizer__dialog-head .lea-organizer__icon { color: #b91c1c; }
.lea-organizer__dialog--calm .lea-organizer__dialog-head .lea-organizer__icon { color: var(--lea-org-navy); }

/* ── Breakpoints of the prototype ── */

@media (max-width: 1100px) {
    .lea-organizer__kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* On phones the navigation becomes one scrolling row above the content. */
@media (max-width: 980px) {
    .lea-organizer__shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    /*
     * DIE LEISTE KLAPPT AUF, SIE SCROLLT NICHT.
     *
     * Vorher stand sie als waagerecht scrollende Zeile ueber dem Inhalt: bei
     * sechs Eintraegen lagen die letzten ausserhalb des Bildschirms, und dass
     * dort noch etwas kommt, sah man nicht. Sichtbar ist jetzt nur die
     * aktuelle Seite; ein Tipp faltet die ganze Liste darunter auf.
     */
    .lea-organizer__nav-shell {
        position: static;
    }

    .lea-organizer__nav-current {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border: 1px solid var(--lea-org-line);
        border-radius: 14px;
        background: #ffffff;
        font-size: 14px;
        font-weight: 600;
        color: var(--lea-org-navy);
        cursor: pointer;
    }

    /* Der Pfeil dreht sich, wenn die Liste offen ist — die einzige Rueckmeldung, die es braucht. */
    .lea-organizer__nav-chevron {
        width: 9px;
        height: 9px;
        margin-left: auto;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.2s;
    }

    /* Sichtbar fuer die Tastatur, unsichtbar fuer das Auge: das Feld traegt den Fokus. */
    .lea-organizer__nav-toggle {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .lea-organizer__nav-toggle:focus-visible + .lea-organizer__nav-current {
        outline: 2px solid var(--lea-org-navy);
        outline-offset: 2px;
    }

    .lea-organizer__nav-toggle:checked + .lea-organizer__nav-current .lea-organizer__nav-chevron {
        transform: translateY(2px) rotate(225deg);
    }

    .lea-organizer__nav {
        display: none;
        /* Ohne dies bliebe die Liste so schmal wie ihr laengster Eintrag: die Leiste ist eine Flex-Spalte mit align-self: start. */
        align-self: stretch;
        margin-top: 8px;
        padding: 8px;
        border: 1px solid var(--lea-org-line);
        border-radius: 14px;
        background: #ffffff;
    }

    .lea-organizer__nav-toggle:checked ~ .lea-organizer__nav {
        display: flex;
    }

    .lea-organizer__nav-title {
        display: none;
    }

    .lea-organizer__event-row {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    /* The column shrinks, a fixed width does not: at 64px the picture overhangs and pushes the text column. */
    .lea-organizer__thumb {
        width: 56px;
        height: 42px;
    }

    .lea-organizer__event-meta {
        display: none;
    }

    .lea-organizer__event-mobile {
        display: block;
    }

    .lea-organizer__actions-row {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* The date and place line only shows once the columns are gone. */
.lea-organizer__event-mobile {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: var(--lea-org-text-light);
}

@media (max-width: 560px) {
    /*
     * The status badge moves under the title instead of squeezing it.
     * Beside a badge a title keeps about 120px on a phone — an ellipsis after
     * two words says nothing. Indented to the date box so the column stays.
     */
    .lea-organizer__date {
        flex-wrap: wrap;
    }

    /* Titles may use two lines here; a phone column cut them after two words. */
    .lea-organizer__date-title,
    .lea-organizer__event-title {
        white-space: normal;
    }

    /*
     * Ein eigenes Umbruch-Element schiebt das Abzeichen in die naechste Zeile.
     * `flex-basis: 100%` am Abzeichen selbst geht nicht: eine `max-width`, die
     * die Pille auf ihre Groesse zurueckholt, begrenzt auch die Basisgroesse —
     * dann passt sie wieder daneben und der Umbruch bleibt aus.
     */
    .lea-organizer__date::after {
        content: "";
        order: 1;
        flex-basis: 100%;
        height: 0;
    }

    .lea-organizer__date .lea-organizer-status {
        order: 2;
        margin-left: 60px;
    }

    /* Two columns leave ~129px for a 30px number and an uppercase label; one column reads. */
    .lea-organizer__kpis {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .lea-organizer .lea-organizer__title {
        font-size: 26px;
    }

    /* Search and sorting wrap onto their own rows anyway; capped at 220px they leave dead space beside them. */
    .lea-organizer .lea-organizer__field {
        max-width: none;
        flex: 1 1 100%;
    }

    /* Nothing left to push apart once everything is stacked. */
    .lea-organizer__toolbar-spacer {
        display: none;
    }
}

/* ── Event editor: long form left, sticky sidebar right ── */

.lea-organizer__editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 24px;
}

.lea-organizer__editor-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.lea-organizer__section {
    padding: 24px;
    border: 1px solid var(--lea-org-line);
    border-radius: var(--lea-org-radius-card);
    background: var(--lea-org-card);
}

.lea-organizer__section .lea-organizer__card-title {
    margin-bottom: 16px;
}

.lea-organizer__reason--editor {
    margin: 0 0 18px;
}

.lea-organizer__label {
    display: block;
    margin: 18px 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lea-org-text);
}

.lea-organizer__card-title + .lea-organizer__label,
.lea-organizer__pair > div > .lea-organizer__label:first-child {
    margin-top: 0;
}

/* Zip and city sit one level deeper, so the rule above misses them: their labels started 18px below the street's. */
.lea-organizer__pair > .lea-organizer__zip-city > div > .lea-organizer__label:first-child {
    margin-top: 0;
}

.lea-organizer__pair + .lea-organizer__label,
.lea-organizer__pair + .lea-organizer__pair {
    margin-top: 14px;
}

.lea-organizer__required {
    color: #b91c1c;
}

.lea-organizer__optional {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lea-org-text-light);
}

.lea-organizer .lea-organizer__input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--lea-org-line-input);
    border-radius: 12px;
    background: #ffffff;
    color: var(--lea-org-text);
    font: inherit;
    font-size: 14px;
    transition: border-color 0.15s;
}

.lea-organizer .lea-organizer__input:focus {
    border-color: var(--lea-org-navy);
    outline: none;
}

.lea-organizer .lea-organizer__input::placeholder {
    color: var(--lea-org-text-light);
}

.lea-organizer textarea.lea-organizer__input {
    resize: vertical;
}

.lea-organizer select.lea-organizer__input {
    max-width: 280px;
    cursor: pointer;
}

.lea-organizer .lea-organizer__input--error {
    border-color: #b91c1c;
    background: #fef6f6;
}

.lea-organizer__error {
    margin: 5px 0 0;
    font-size: 12px;
    color: #b91c1c;
}

.lea-organizer__help {
    display: flex;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--lea-org-text-light);
}

.lea-organizer__counter {
    margin: 4px 0 0;
    font-size: 11px;
    text-align: right;
    color: var(--lea-org-text-light);
}

.lea-organizer__intro {
    margin: -10px 0 16px;
    font-size: 12.5px;
    color: var(--lea-org-text-light);
}

.lea-organizer__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/*
 * The address row only: a street name is longer than a city, and the zip keeps its fixed 110px either way.
 *
 * Behind min-width, not bare: `:has()` carries the weight of its argument, so this selector counts two
 * classes and would beat the one-class rule that collapses every pair on a phone — a media query adds no
 * specificity. Bare, it kept the address row two-column at 390px, with the city wrapping under the zip.
 */
@media (min-width: 561px) {
    .lea-organizer__pair:has(> .lea-organizer__zip-city) {
        grid-template-columns: 1.4fr 1fr;
    }
}

.lea-organizer__pair--narrow {
    max-width: 460px;
}

.lea-organizer__pair--prices {
    max-width: 420px;
}

.lea-organizer__zip-city {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 14px;
}

.lea-organizer__divider {
    height: 1px;
    margin: 22px 0;
    border: 0;
    background: #eef1f7;
}

.lea-organizer__info,
.lea-organizer__info-box {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.6;
}

.lea-organizer__info {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f0f9fb;
    color: #0e7490;
}

.lea-organizer__info-box {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--lea-org-ground);
    color: var(--lea-org-text-3);
}

.lea-organizer__info-box .lea-organizer__icon {
    color: var(--lea-org-navy);
}

/* ── Editor: switches are real checkboxes, so the form works without JavaScript ── */

.lea-organizer__switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 13.5px;
    cursor: pointer;
}

.lea-organizer__switch--first {
    margin: 0 0 14px;
}

.lea-organizer__switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.lea-organizer__switch-track {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--lea-org-line-input);
    transition: background 0.2s;
}

.lea-organizer__switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(10, 27, 62, 0.25);
    transition: transform 0.2s;
}

.lea-organizer__switch input:checked + .lea-organizer__switch-track {
    background: var(--lea-org-gradient);
}

.lea-organizer__switch input:checked + .lea-organizer__switch-track::after {
    transform: translateX(20px);
}

.lea-organizer__switch input:focus-visible + .lea-organizer__switch-track {
    outline: 2px solid var(--lea-org-navy);
    outline-offset: 2px;
}

.lea-organizer__switch-note {
    color: var(--lea-org-text-light);
}

/* ── Editor: category tiles and chips ── */

.lea-organizer__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.lea-organizer__tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--lea-org-line-input);
    border-radius: 14px;
    background: #ffffff;
    color: var(--lea-org-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.lea-organizer__tile input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lea-organizer__tile-icon,
.lea-organizer__tile-check {
    display: inline-flex;
    color: var(--tile-accent, var(--lea-org-navy));
}

/*
 * DIE FARBE KOMMT AUS DER KACHEL, nicht aus der Datei — wie auf der Detailseite.
 *
 * Die hochgeladenen Kategorie-Icons tragen ein hartes `fill="#FFFFFF"` im
 * SVG-Element. Das ist ein Praesentations-ATTRIBUT und wiegt weniger als jede
 * CSS-Regel, `fill: currentColor` gewinnt also ohne Zutun an den Dateien. Ohne
 * diese Zeile stehen weisse Icons auf weissen Kacheln: sie sind da, man sieht
 * sie nur nicht.
 */
.lea-organizer__tile-icon svg,
.lea-organizer__tile-icon svg path {
    fill: currentColor;
}

.lea-organizer__tile-label {
    flex: 1;
}

.lea-organizer__tile-check {
    visibility: hidden;
}

.lea-organizer__tile:has(input:checked) {
    border-color: var(--tile-accent, var(--lea-org-navy));
    box-shadow: 0 0 0 1px var(--tile-accent, var(--lea-org-navy));
}

.lea-organizer__tile:has(input:checked) .lea-organizer__tile-check {
    visibility: visible;
}

.lea-organizer__tile:has(input:focus-visible) {
    outline: 2px solid var(--lea-org-navy);
    outline-offset: 2px;
}

.lea-organizer__tiles--error .lea-organizer__tile {
    border-color: #b91c1c;
}

/* The colour alone first: an empty second accent would void the gradient, and the band must never go white. */
.lea-organizer__category-preview {
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    background-color: var(--tile-accent, var(--lea-org-navy));
    background-image: linear-gradient(135deg, var(--tile-accent, #0a1b3e), var(--tile-accent2, var(--tile-accent, #13285a)));
    color: #ffffff;
}

.lea-organizer__category-preview-eyebrow {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.8;
}

.lea-organizer__category-preview-title {
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 300;
}

.lea-organizer__category-preview-title strong {
    font-weight: 700;
}

.lea-organizer__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lea-organizer__choice {
    position: relative;
}

.lea-organizer__choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lea-organizer__choice span {
    display: inline-block;
    padding: 8px 16px;
    border: 1.5px solid var(--lea-org-line-input);
    border-radius: 999px;
    background: #ffffff;
    color: var(--lea-org-text-3);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.lea-organizer__choice input:checked + span {
    border-color: var(--lea-org-navy);
    background: var(--lea-org-navy);
    color: #ffffff;
}

.lea-organizer__choice input:focus-visible + span {
    outline: 2px solid var(--lea-org-navy);
    outline-offset: 2px;
}

/* ── Editor: rich text (Trix, loaded by organizer-editor.js); only heading, bold, list and link stay ── */

/* Trix pushes its groups apart with space-between; with four buttons left that reads as three loose islands. */
.lea-organizer trix-toolbar .trix-button-row {
    justify-content: flex-start;
    gap: 10px;
    padding: 6px 8px;
    border: 1.5px solid var(--lea-org-line-input);
    border-bottom: 1px solid var(--lea-org-line);
    border-radius: 12px 12px 0 0;
    background: #f7f9fc;
}

.lea-organizer trix-toolbar .trix-button-group {
    margin-bottom: 0;
    border: none;
}

/* Trix's own gap is 1.5vw — it grows with the window, so the toolbar looks different on every screen. */
.lea-organizer trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
}

.lea-organizer trix-toolbar .trix-button-group--file-tools,
.lea-organizer trix-toolbar .trix-button-group-spacer,
.lea-organizer trix-toolbar .trix-button--icon-italic,
.lea-organizer trix-toolbar .trix-button--icon-strike,
.lea-organizer trix-toolbar .trix-button--icon-quote,
.lea-organizer trix-toolbar .trix-button--icon-code,
.lea-organizer trix-toolbar .trix-button--icon-number-list,
.lea-organizer trix-toolbar .trix-button--icon-decrease-nesting-level,
.lea-organizer trix-toolbar .trix-button--icon-increase-nesting-level {
    display: none;
}

.lea-organizer trix-editor.lea-organizer__trix {
    min-height: 160px;
    padding: 12px 14px;
    border: 1.5px solid var(--lea-org-line-input);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: #ffffff;
    color: var(--lea-org-text);
    font-size: 14px;
    line-height: 1.6;
}

.lea-organizer trix-editor.lea-organizer__trix:focus {
    border-color: var(--lea-org-navy);
    outline: none;
}

.lea-organizer trix-editor.lea-organizer__trix h1 {
    margin: 0.4em 0 0.2em;
    font-size: 17px;
    font-weight: 700;
}

/* ── Editor: price calculator ── */

.lea-organizer__pricebox {
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid var(--lea-org-line);
    border-radius: 14px;
}

.lea-organizer__pricebox-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    background: var(--lea-org-navy);
    color: #ffffff;
}

.lea-organizer__pricebox-head span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
}

.lea-organizer__pricebox-head strong {
    font-size: 22px;
    font-weight: 700;
}

.lea-organizer__pricebox-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    font-size: 13px;
}

.lea-organizer__pricebox-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    color: var(--lea-org-text-3);
}

.lea-organizer__pricebox-line > span:last-child:not(:first-child) {
    font-weight: 600;
    color: var(--lea-org-text);
}

.lea-organizer__pricebox-line strong {
    color: var(--lea-org-navy);
}

.lea-organizer .lea-organizer__pricebox-line--free,
.lea-organizer .lea-organizer__pricebox-line--free > span:last-child:not(:first-child) {
    color: #15803d;
}

.lea-organizer__pricebox-rule {
    height: 1px;
    background: #eef1f7;
}

.lea-organizer__pricebox-warning {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #7f1d1d;
    font-size: 12.5px;
}

.lea-organizer__pricebox-warning .lea-organizer__icon {
    color: #b91c1c;
}

/* ── Editor: sidebar ── */

.lea-organizer__editor-side {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lea-organizer__side-card {
    padding: 20px;
    border: 1px solid var(--lea-org-line);
    border-radius: var(--lea-org-radius-card);
    background: var(--lea-org-card);
}

.lea-organizer__side-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.lea-organizer__side-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lea-org-text-light);
}

.lea-organizer__side-text {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--lea-org-text-3);
}

.lea-organizer__progress {
    height: 8px;
    margin-bottom: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef1f7;
}

.lea-organizer__progress-bar {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--lea-org-gradient);
    transition: width 0.3s;
}

.lea-organizer__side-note {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--lea-org-text-light);
}

.lea-organizer__side-cost {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid #eef1f7;
    font-size: 13px;
    color: var(--lea-org-text-3);
}

.lea-organizer__side-cost strong {
    color: var(--lea-org-text);
}

.lea-organizer__side-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.lea-organizer .lea-organizer__side-buttons .lea-organizer__button {
    width: 100%;
    padding: 11px;
}

.lea-organizer button.lea-organizer__button--outline {
    border: 1.5px solid var(--lea-org-navy);
    background: none;
    color: var(--lea-org-navy);
}

.lea-organizer button.lea-organizer__button--outline:hover,
.lea-organizer button.lea-organizer__button--outline:focus {
    background: var(--lea-org-navy);
    color: #ffffff;
}

.lea-organizer button.lea-organizer__button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.lea-organizer__dirty {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 10px 0 0;
    font-size: 11.5px;
    color: #b45309;
}

.lea-organizer__toast {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 12px;
    font-weight: 600;
}

.lea-organizer__toast--error {
    background: #fef2f2;
    color: #b91c1c;
}

.lea-organizer__side-hint {
    padding: 14px 16px;
    border: 1px solid #fdba74;
    border-radius: 16px;
    background: #fff7ed;
    color: #7c3e0e;
    font-size: 12.5px;
    line-height: 1.5;
}

.lea-organizer .lea-organizer__side-hint a {
    color: #b45309;
    text-decoration: underline;
}

/* On narrow screens the sidebar moves above the form and stops sticking, like the prototype. */
@media (max-width: 980px) {
    .lea-organizer__editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lea-organizer__editor-side {
        position: static;
        order: -1;
    }
}

@media (max-width: 560px) {
    .lea-organizer__pair,
    .lea-organizer__zip-city {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Editor: repeat groups; the tools show only once organizer-editor.js runs ── */

.lea-organizer__group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.lea-organizer__group-head .lea-organizer__card-title {
    margin-bottom: 0;
}

.lea-organizer__group-head + .lea-organizer__intro {
    margin-top: 0;
}

.lea-organizer button.lea-organizer__group-add {
    display: none;
    padding: 7px 16px;
    border: 1.5px solid var(--lea-org-navy);
    border-radius: 999px;
    background: none;
    color: var(--lea-org-navy);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
}

.lea-organizer__editor--live button.lea-organizer__group-add {
    display: inline-flex;
}

.lea-organizer button.lea-organizer__group-add:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.lea-organizer__group-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: lea-row;
}

.lea-organizer__group-row {
    padding: 14px 16px;
    border: 1px solid var(--lea-org-line);
    border-radius: 14px;
    background: #fafbfd;
    counter-increment: lea-row;
}

.lea-organizer__row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.lea-organizer__row-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lea-org-text-light);
}

.lea-organizer__row-label::after {
    content: ' ' counter(lea-row);
}

.lea-organizer__row-tools {
    display: none;
    gap: 2px;
}

.lea-organizer__editor--live .lea-organizer__row-tools {
    display: flex;
}

.lea-organizer button.lea-organizer__row-tool {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    border: none;
    background: none;
    color: var(--lea-org-text-light);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.lea-organizer button.lea-organizer__row-tool:hover,
.lea-organizer button.lea-organizer__row-tool:focus {
    color: var(--lea-org-navy);
}

.lea-organizer button.lea-organizer__row-tool--remove,
.lea-organizer button.lea-organizer__row-tool--remove:hover {
    color: #b91c1c;
}

.lea-organizer__row-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.lea-organizer__row-field {
    display: block;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lea-org-text-3);
}

.lea-organizer__row-field--wide {
    grid-column: 1 / -1;
}

.lea-organizer__row-field > span {
    display: block;
    margin-bottom: 5px;
}

.lea-organizer .lea-organizer__row-field .lea-organizer__input {
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 400;
}

.lea-organizer__group-empty {
    margin: 0;
    padding: 16px;
    border: 1.5px dashed var(--lea-org-line);
    border-radius: 12px;
    font-size: 13px;
    text-align: center;
    color: var(--lea-org-text-light);
}

/* ── Veranstalterprofil: Formular links, die echte Karte rechts ── */

.lea-organizer__profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1100px) {
    .lea-organizer__profile {
        grid-template-columns: 1fr;
    }

    /* Nothing to stick to once the preview sits below the form — the navigation and the editor sidebar let go here too. */
    .lea-organizer__profile-preview {
        position: static;
    }
}

.lea-organizer__profile-readonly {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--lea-org-text);
}

.lea-organizer a.lea-organizer__profile-readonly-link {
    color: var(--lea-org-navy);
    font-weight: 600;
}

.lea-organizer__logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.lea-organizer__logo-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(135deg, #e22225, #ff7a5c);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

.lea-organizer__logo-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 64px;
    padding: 8px 12px;
    border: 1px solid var(--lea-org-line);
    border-radius: 12px;
    background: #ffffff;
}

.lea-organizer__logo-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.lea-organizer__logo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.lea-organizer__profile-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 18px;
    font-size: 12px;
    color: var(--lea-org-text-light);
}

.lea-organizer-status--identity-none {
    background: #f1f5f9;
    color: #475569;
}

.lea-organizer-status--identity-pending {
    background: #fff7ed;
    color: #b45309;
}

.lea-organizer-status--identity-verified {
    background: #f0fdf4;
    color: #15803d;
}

.lea-organizer-status--identity-rejected {
    background: #fef2f2;
    color: #b91c1c;
}

.lea-organizer__profile-overline {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lea-org-text-light);
}

.lea-organizer__profile-preview {
    position: sticky;
    top: 24px;
}

/* ── Guthaben: Kontostand, Freikontingent, Buchungen ── */

.lea-organizer__balance {
    border: none;
    background: linear-gradient(160deg, var(--lea-org-navy), #13285a);
    color: #ffffff;
}

.lea-organizer__balance .lea-organizer__card-title {
    color: rgba(255, 255, 255, 0.7);
}

.lea-organizer__balance-value {
    margin: 6px 0 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
}

.lea-organizer__balance-sub {
    margin: 4px 0 0;
    font-size: 12.5px;
    opacity: 0.75;
}

/* ── Aufladen: die Pakete auf der dunklen Kontostand-Karte ── */

.lea-organizer__topup {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.lea-organizer__topup-pending {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 13px;
    line-height: 1.5;
    color: #ffffff;
}

.lea-organizer a.lea-organizer__topup-pending-link {
    margin-left: 4px;
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

.lea-organizer__topup-title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.lea-organizer__topup-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Jede Kachel ist ein eigenes Formular; ohne das faende der Rahmen seinen Platz nicht. */
.lea-organizer__topup-tiles form {
    margin: 0;
}

/* Hell auf dunkel: die uebliche Knopfregel ist fuer helle Karten gebaut. */
.lea-organizer button.lea-organizer__topup-tile {
    padding: 10px 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.lea-organizer button.lea-organizer__topup-tile:hover,
.lea-organizer button.lea-organizer__topup-tile:focus {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.lea-organizer__topup-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
}

.lea-organizer__balance-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 18px 0 0;
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.75;
}

.lea-organizer__quota-count {
    margin: 6px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--lea-org-text);
}

.lea-organizer__quota-dots {
    display: flex;
    gap: 6px;
    margin: 10px 0;
}

.lea-organizer__quota-dot {
    width: 26px;
    height: 8px;
    border-radius: 999px;
    background: #eef1f7;
}

.lea-organizer__quota-dot--used {
    background: linear-gradient(90deg, #e22225, #ff7a5c);
}

.lea-organizer__quota-text {
    margin: 0;
    font-size: 12.5px;
    color: var(--lea-org-text-light);
}

.lea-organizer__bookings {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lea-organizer__booking {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--lea-org-line);
}

.lea-organizer__booking:first-child {
    border-top: none;
}

.lea-organizer__booking-text {
    flex: 1;
    min-width: 0;
}

.lea-organizer__booking-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lea-org-text);
}

.lea-organizer__booking-meta {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--lea-org-text-light);
}

.lea-organizer__booking-amount {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.lea-organizer__booking-amount--plus {
    color: #15803d;
}

.lea-organizer__booking-amount--minus {
    color: #b91c1c;
}

.lea-organizer__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    font-size: 12.5px;
}

.lea-organizer__pager-page {
    color: var(--lea-org-text-light);
}

.lea-organizer a.lea-organizer__pager-link {
    color: var(--lea-org-navy);
    font-weight: 600;
    text-decoration: none;
}

.lea-organizer a.lea-organizer__pager-link:hover,
.lea-organizer a.lea-organizer__pager-link:focus {
    text-decoration: underline;
}

/* ── Editor: pictures; an upload is stored at once, texts and order go with the form ── */

.lea-organizer__subtitle {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--lea-org-text);
}

.lea-organizer__image-area {
    padding: 16px;
    border: 1.5px dashed var(--lea-org-line);
    border-radius: 14px;
    transition: border-color 0.15s, background-color 0.15s;
}

.lea-organizer__image-area + .lea-organizer__image-area {
    margin-top: 16px;
}

.lea-organizer__image-area .lea-organizer__help {
    margin: 0 0 12px;
}

.lea-organizer__image-area--drop {
    border-color: var(--lea-org-navy);
    background: #f4f6fb;
}

.lea-organizer__image-area--busy {
    opacity: 0.55;
    pointer-events: none;
}

.lea-organizer__title-figure,
.lea-organizer__gallery-figure,
.lea-organizer__performer-figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #eef1f6;
}

.lea-organizer__title-figure img,
.lea-organizer__gallery-figure img,
.lea-organizer__performer-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lea-organizer__title-figure {
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 10px;
    border-radius: 12px;
}

.lea-organizer button.lea-organizer__image-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(10, 27, 62, 0.18);
    color: #b91c1c;
    cursor: pointer;
}

.lea-organizer button.lea-organizer__image-remove:hover,
.lea-organizer button.lea-organizer__image-remove:focus {
    background: #ffffff;
}

.lea-organizer__image-texts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.lea-organizer__image-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #92400e;
}

.lea-organizer__title-image .lea-organizer__image-hint {
    margin: 0 0 10px;
}

.lea-organizer__picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.lea-organizer__picker[data-needs-script] {
    display: none;
}

.lea-organizer__editor--live .lea-organizer__picker[data-needs-script] {
    display: flex;
}

.lea-organizer__picker-button {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1.5px solid var(--lea-org-navy);
    border-radius: 999px;
    color: var(--lea-org-navy);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.lea-organizer__picker-button:focus-within {
    outline: 2px solid var(--lea-org-navy);
    outline-offset: 2px;
}

.lea-organizer__editor--live .lea-organizer__file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.lea-organizer button.lea-organizer__picker-send {
    padding: 8px 14px;
    border: none;
    border-radius: 999px;
    background: var(--lea-org-navy);
    color: #ffffff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.lea-organizer__editor--live button.lea-organizer__picker-send {
    display: none;
}

.lea-organizer__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: lea-picture;
}

.lea-organizer__gallery-item {
    min-width: 0;
    counter-increment: lea-picture;
}

.lea-organizer__gallery-item--dragging {
    opacity: 0.4;
}

.lea-organizer__gallery-figure {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
}

.lea-organizer__editor--live .lea-organizer__gallery-figure {
    cursor: grab;
}

.lea-organizer__gallery-label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(10, 27, 62, 0.72);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lea-organizer__gallery-label::after {
    content: ' ' counter(lea-picture);
}

.lea-organizer__gallery-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 6px;
}

.lea-organizer__gallery-position {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--lea-org-text-light);
}

.lea-organizer .lea-organizer__gallery-position .lea-organizer__input {
    width: 64px;
    padding: 5px 8px;
    font-size: 12px;
}

.lea-organizer__editor--live .lea-organizer__gallery-position {
    display: none;
}

.lea-organizer__image-details {
    margin-top: 6px;
    font-size: 12px;
}

.lea-organizer__image-details > summary {
    color: var(--lea-org-navy);
    font-weight: 600;
    cursor: pointer;
}

.lea-organizer__image-details[open] > summary {
    margin-bottom: 8px;
}

.lea-organizer__image-details .lea-organizer__image-texts {
    grid-template-columns: 1fr;
}

.lea-organizer__row-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    border-radius: 12px;
}

.lea-organizer__row-photo .lea-organizer__picker {
    margin-top: 0;
}

.lea-organizer__row-photo .lea-organizer__error {
    flex-basis: 100%;
}

.lea-organizer__performer-image {
    width: 200px;
    max-width: 100%;
}

.lea-organizer__performer-figure {
    width: 96px;
    height: 96px;
    border-radius: 12px;
}

.lea-organizer__performer-figure button.lea-organizer__image-remove {
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
}

/* ── Preview: the detail page inside the area, under a bar that says what it is ── */

.lea-organizer__preview-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--lea-org-navy);
    color: #ffffff;
}

.lea-organizer__preview-bar .lea-organizer__icon {
    color: var(--lea-org-coral);
}

.lea-organizer__preview-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lea-organizer__preview-text {
    font-size: 12px;
    opacity: 0.7;
}

.lea-organizer a.lea-organizer__preview-back {
    margin-left: auto;
    padding: 8px 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;
}

.lea-organizer a.lea-organizer__preview-back:hover,
.lea-organizer a.lea-organizer__preview-back:focus {
    border-color: #ffffff;
    color: #ffffff;
}

.lea-organizer .lea-organizer__preview-page {
    overflow: hidden;
    border: 1px solid var(--lea-org-line);
    border-radius: 20px;
}

/* ── Two-factor setup on the account page ── */

.lea-organizer__mfa-setup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin: 4px 0 18px;
}

/* White ground and a quiet zone: scanners need contrast around the code, also on a tinted card. */
.lea-organizer__mfa-qr {
    flex: 0 0 auto;
    padding: 10px;
    border: 1px solid var(--lea-org-line);
    border-radius: 12px;
    background: #ffffff;
    line-height: 0;
}

.lea-organizer__mfa-qr svg {
    width: 180px;
    height: 180px;
}

.lea-organizer__mfa-secret {
    margin: 6px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    word-break: break-word;
}

.lea-organizer__mfa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* ═══════════════════════════════════════════════════ Firmenkarte im Profil */

/*
 * NACH DEM ENTWURF `veranstalterprofil-firma.html` (17.09.).
 *
 * Seine Palette ist wertgleich mit den Variablen oben — deshalb stehen hier
 * keine Literale, wo es eine Variable gibt. Die Klassennamen sind NICHT die
 * des Entwurfs (`vp-*`): jede Regel dieser Datei muss mit `.lea-organizer`
 * beginnen, sonst beansprucht sie einen Namensraum, den sich zwei Stylesheets
 * teilen (`StylesheetScopeTest`).
 */

.lea-organizer__card-section {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lea-org-text);
}

.lea-organizer__card-note {
    margin: 0 0 18px;
    font-size: 12.5px;
    color: var(--lea-org-text-light);
}

/* ── Kopfzeile der Firma ── */

.lea-organizer__company-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef1f7;
    margin-bottom: 18px;
}

.lea-organizer__company-logo {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--lea-org-red), var(--lea-org-coral));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
}

.lea-organizer__company-name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.lea-organizer__badge-row {
    margin: 5px 0 0;
}

.lea-organizer__company-credit {
    margin: 0 0 0 auto;
    text-align: right;
}

.lea-organizer__company-credit-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
}

.lea-organizer__company-credit-label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--lea-org-text-light);
}

.lea-organizer__company-pending {
    margin-top: -8px;
    margin-bottom: 16px;
}

/* ── Abzeichen ── */

.lea-organizer__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 11px;
}

.lea-organizer__badge--ok {
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #86efac;
}

/* In Pruefung ist kein Fehler, nur noch nicht fertig — Bernstein, nicht Rot. */
.lea-organizer__badge--wait {
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fdba74;
}

.lea-organizer__badge--role {
    color: var(--lea-org-navy);
    background: var(--lea-org-ground);
    border: 1px solid var(--lea-org-line-input);
}

/* ── Abteilungszeilen ── */

.lea-organizer__dept {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--lea-org-line);
    border-radius: 14px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    background: #fafbfd;
}

.lea-organizer__dept-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--lea-org-gradient-navy);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lea-organizer__dept-name {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
}

.lea-organizer__dept-credit {
    margin: 0 0 0 auto;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.lea-organizer__dept-credit small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--lea-org-text-light);
    letter-spacing: 1px;
    text-align: right;
}

.lea-organizer__dept-actions {
    display: flex;
    gap: 6px;
}

/* ── Icon-Knoepfe mit Sprechblase ── */

.lea-organizer__iconbtn {
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--lea-org-line-input);
    background: var(--lea-org-card);
    border-radius: 999px;
    color: var(--lea-org-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.2s ease;
}

.lea-organizer__iconbtn:hover {
    border-color: var(--lea-org-navy);
    color: var(--lea-org-navy);
}

/*
 * Die Blase haengt am Knopf und ist bis zum Zeigen durchsichtig statt
 * ausgeblendet: `display: none` liesse den Uebergang ausfallen.
 */
.lea-organizer__iconbtn-tip {
    position: absolute;
    right: 50%;
    bottom: calc(100% + 8px);
    transform: translate(50%, 4px);
    background: var(--lea-org-navy);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
    padding: 6px 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}

.lea-organizer__iconbtn:hover .lea-organizer__iconbtn-tip,
.lea-organizer__iconbtn:focus-visible .lea-organizer__iconbtn-tip {
    opacity: 1;
    transform: translate(50%, 0);
}

/* ── Aufklappbare Formulare ── */

.lea-organizer__fold {
    border: 1px solid var(--lea-org-line);
    border-radius: 14px;
    margin-top: 10px;
    overflow: hidden;
}

.lea-organizer__fold summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    background: var(--lea-org-card);
    transition: background 0.15s ease;
}

.lea-organizer__fold summary::-webkit-details-marker {
    display: none;
}

.lea-organizer__fold summary:hover {
    background: var(--lea-org-ground);
}

.lea-organizer__fold-plus {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1.5px solid var(--lea-org-line-input);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lea-org-red-dark);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.lea-organizer__fold[open] .lea-organizer__fold-plus {
    transform: rotate(45deg);
}

.lea-organizer__fold-body {
    padding: 4px 16px 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.lea-organizer__fold-body .lea-organizer__input {
    flex: 1;
    min-width: 180px;
    margin: 0;
}

.lea-organizer__fold-body .lea-organizer__input--pick {
    flex: 0 1 190px;
}

.lea-organizer__fold-hint {
    flex-basis: 100%;
    margin: -2px 0 0;
    font-size: 12px;
    color: var(--lea-org-text-light);
}

/*
 * Das Sprungziel der Icon-Knoepfe. Es liegt IM <details>, nicht daran: ein
 * Browser klappt den Kasten auf, in dem das Ziel steht — waere die id am
 * <details> selbst, verliesse man sich auf ein Verhalten, das nicht jeder
 * Browser gleich handhabt.
 */
.lea-organizer__anchor {
    display: block;
    width: 0;
    height: 0;
    scroll-margin-top: 90px;
}

.lea-organizer__invite-open {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: -4px 0 10px 52px;
    font-size: 12.5px;
    color: var(--lea-org-text-3);
}

@media (max-width: 700px) {
    .lea-organizer__company-credit,
    .lea-organizer__dept-credit {
        margin-left: 0;
        flex-basis: 100%;
        text-align: left;
    }

    .lea-organizer__dept-credit small {
        text-align: left;
    }

    .lea-organizer__dept-actions {
        margin-left: auto;
    }

    .lea-organizer__invite-open {
        margin-left: 0;
    }
}

/*
 * DIE VORSCHAU IST ENGER ALS DIE ECHTE KARTE.
 *
 * Sie ist dieselbe Karte wie auf der Eventseite (bewusst kein Nachbau), dort
 * hat ihre Beschriftungszeile 18 px Luft nach unten. In der schmalen Spalte
 * des Profils riss das eine Lücke auf, die der Entwurf nicht hat — er zeigt
 * dort ueberhaupt keine Zeile "Veranstalter".
 *
 * Geaendert wird nur die Vorschau: auf der Eventseite bleibt der Abstand.
 */
.lea-organizer__profile-preview .lea-detail__card-title {
    margin-bottom: 8px;
}

.lea-organizer__profile-preview .lea-detail__organizer-head {
    margin-bottom: 12px;
}

/*
 * IN DER AUFKLAPP-ZEILE STEHT DER KNOPF NEBEN DEM FELD, nicht darunter.
 *
 * `.lea-organizer__input + .lea-organizer__button` gibt ihm sonst 18 px Luft
 * nach oben — richtig, wo ein Knopf einem Feld FOLGT, falsch in einer Flex-
 * Reihe: dort schob es ihn gegenueber den Feldern nach unten. Der Kommentar
 * an jener Regel nennt genau diese Gefahr; diese Reihe kam erst danach dazu.
 */
.lea-organizer__fold-body .lea-organizer__button {
    margin-top: 0;
}

/*
 * DIE AUFLADE-BESCHRIFTUNG STEHT AUF DER DUNKLEN KARTE.
 *
 * `__label` ist fuer helle Karten gebaut und schreibt Navy. Auf dem
 * Kontostand-Block stand "Guthaben fuer" damit dunkel auf dunkel — es sah aus,
 * als laege die Zeile unter der Auswahl, dabei war sie nur unlesbar.
 * Dieselbe Ueberlegung wie bei den Kacheln daneben.
 */
.lea-organizer__topup .lea-organizer__label {
    margin-top: 0;
    color: rgba(255, 255, 255, 0.65);
}

/* Die Auswahl bleibt hell, braucht auf dem dunklen Grund aber etwas Luft. */
.lea-organizer__topup .lea-organizer__input {
    margin-bottom: 14px;
}

/* Der Hinweis klebte am unteren Rand der Karte. */
.lea-organizer__topup-note {
    margin-bottom: 4px;
}

/* Mehr Luft unten auf der Guthabenkarte — der Hinweis sass auf der Kante. */
.lea-organizer__balance {
    padding-bottom: 28px;
}