/* Signika – selbst gehostete WOFF2-Schriften, fuer Website und MES. */
@font-face {
    font-family: "Signika";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/Signika-Light.woff2") format("woff2");
}
@font-face {
    font-family: "Signika";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Signika-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Signika";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/Signika-Medium.woff2") format("woff2");
}
@font-face {
    font-family: "Signika";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/Signika-SemiBold.woff2") format("woff2");
}
@font-face {
    font-family: "Signika";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/Signika-Bold.woff2") format("woff2");
}

:root {

    /*
    |--------------------------------------------------------------------------
    | MES Grundpalette
    |--------------------------------------------------------------------------
    */

    --mes-bg: #f7f8f4;
    --mes-header: #dce6fb;

    --mes-primary: #2e4f35;
    --mes-accent: #6c5dac;

    --mes-text: #1f2a1e;
    --mes-text-secondary: #88113e;

    --mes-soft-green: #eef1e8;

    --mes-pastel-violet: #e6ddfa;
    --mes-pastel-green: #dff3e7;
    --mes-pastel-pink: #fce7f1;


    /*
    |--------------------------------------------------------------------------
    | MES Bereichsfarben
    |--------------------------------------------------------------------------
    */

    --mes-addresses: #7d7da3;
    --mes-addresses-sub: #b4afd5;

    --mes-club: #8b94df;
    --mes-club-sub: #a3b3ea;

    --mes-events: #6fdfb4;
    --mes-events-sub: #97f1c9;

    --mes-settings: #dfa7b0;
    --mes-settings-sub: #ecb6ba;


    /*
    |--------------------------------------------------------------------------
    | MES Funktionsfarben
    |--------------------------------------------------------------------------
    */

    --mes-action: #ffffb2;
    --mes-confirm: #ceffc0;
    --mes-info: #ffdee0;
    --mes-reserve: #d4d1ff;
    --mes-danger: #ffdee0;


    /*
    |--------------------------------------------------------------------------
    | Neutrale UI-Farben
    |--------------------------------------------------------------------------
    */

    --mes-white: #ffffff;

    --mes-border: #dde2d8;
    --mes-border-strong: #c8cec2;

    --mes-shadow:
        0 1px 2px rgba(31, 42, 30, 0.03),
        0 12px 35px rgba(31, 42, 30, 0.06);

    --mes-radius-small: 8px;
    --mes-radius: 14px;
    --mes-radius-large: 20px;

    --mes-content-width: 1380px;
}


/* ==========================================================================
   Reset / Base
   ========================================================================== */

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

html {
    min-height: 100%;
    background: var(--mes-bg);
}

body {
    min-width: 0;
    min-height: 100vh;

    margin: 0;

    font-family:
        "Signika",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16.96px;
    line-height: 1.5;

    color: var(--mes-text);
    background: var(--mes-bg);

    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

svg {
    display: block;
}

:focus-visible {
    outline: 3px solid rgba(108, 93, 172, 0.28);
    outline-offset: 3px;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.mes-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 9px 15px;

    border: 1px solid transparent;
    border-radius: 10px;

    font-size: 14.84px;
    font-weight: 650;
    line-height: 1.2;

    color: var(--mes-text);

    transition:
        transform 120ms ease,
        background-color 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.mes-button:active {
    transform: translateY(1px);
}

.mes-button-quiet {
    border-color: rgba(46, 79, 53, 0.22);
    background: rgba(255, 255, 255, 0.66);
}

.mes-button-quiet:hover {
    border-color: rgba(46, 79, 53, 0.42);
    background: var(--mes-white);
}

.mes-button-action {
    border-color: rgba(31, 42, 30, 0.18);
    background: var(--mes-action);
}

.mes-button-confirm {
    border-color: rgba(31, 42, 30, 0.18);
    background: var(--mes-confirm);
}

.mes-button-danger {
    border-color: rgba(120, 25, 30, 0.22);
    background: var(--mes-danger);
}


/* ==========================================================================
   Application Header – MOBILE FIRST
   ========================================================================== */

.mes-shell-header {
    position: relative;

    width: 100%;
    min-width: 0;

    background: var(--mes-header);

    border-bottom: 1px solid rgba(46, 79, 53, 0.18);
}

.mes-shell-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    width: 100%;
    max-width: var(--mes-content-width);

    margin: 0 auto;

    padding:
        max(9px, env(safe-area-inset-top))
        12px
        7px;
}


/* ==========================================================================
   Brand – MOBILE FIRST
   ========================================================================== */

.mes-shell-brand {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    gap: 8px;

    text-decoration: none;
}

.mes-shell-brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    border-radius: 10px;

    font-size: 18.02px;
    font-weight: 750;

    color: var(--mes-white);
    background: var(--mes-primary);
}

.mes-shell-brand-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.mes-shell-brand-copy strong {
    font-size: 18.02px;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.mes-shell-brand-copy small {
    display: none;
}


/* ==========================================================================
   User – MOBILE FIRST
   ========================================================================== */

.mes-shell-user {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 7px;
}

.mes-shell-user-copy {
    display: flex;
    min-width: 0;
}

.mes-user-label {
    display: none;
}

.mes-user-name {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 6px;

    font-size: 13.78px;
    font-weight: 680;
}

.mes-user-status {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: #38a169;

    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.72);
}

.mes-user-name-text {
    display: block;
    overflow: hidden;

    max-width: 116px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mes-logout-form {
    flex: 0 0 auto;
}

.mes-logout-button {
    width: 38px;
    height: 38px;
    min-height: 38px;

    padding: 0;

    border-radius: 10px;
}

.mes-logout-icon {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mes-logout-text {
    display: none;
}


/* ==========================================================================
   Main Area Navigation – MOBILE FIRST
   ========================================================================== */

.mes-area-nav {
    width: 100%;
    overflow: hidden;
}

.mes-area-nav-inner {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 0.9fr)
        minmax(0, 0.9fr)
        48px;

    align-items: end;

    gap: 3px;

    width: 100%;
    max-width: var(--mes-content-width);

    margin: 0 auto;

    padding: 4px 8px 0;
}

.mes-area-tab {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 43px;

    padding: 8px 6px;

    border: 1px solid transparent;
    border-bottom: 0;

    border-radius:
        10px
        10px
        0
        0;

    font-size: 13.78px;
    font-weight: 680;
    line-height: 1.1;

    text-align: center;
    text-decoration: none;

    color: var(--mes-text);

    white-space: nowrap;

    transition:
        background-color 120ms ease,
        transform 120ms ease,
        opacity 120ms ease;
}

.mes-nav-label-desktop {
    display: none;
}

.mes-nav-label-mobile {
    display: inline;
}

.mes-settings-icon {
    display: block;

    font-size: 23.32px;
    line-height: 1;
}

.mes-settings-label {
    display: none;
}

.mes-area-tab-dashboard:hover {
    background: rgba(255, 255, 255, 0.42);
}

.mes-area-tab-addresses:hover {
    background: rgba(125, 125, 163, 0.44);
}

.mes-area-tab-club:hover {
    background: rgba(139, 148, 223, 0.70);
}

.mes-area-tab-events:hover {
    background: rgba(111, 223, 180, 0.44);
}

.mes-area-tab-settings:hover {
    background: rgba(223, 167, 176, 0.44);
}


/*
 * Aktiver Hauptbereich:
 * optisch angehoben und mit der Subnavigation verbunden.
 */

.mes-area-tab.is-active {
    position: relative;
    z-index: 2;

    min-height: 46px;

    margin-bottom: -1px;

    transform: translateY(1px);
}

.mes-area-tab-dashboard.is-active {
    background: var(--mes-bg);
    border-color: var(--mes-border);
}

.mes-area-tab-addresses.is-active {
    background: var(--mes-addresses);
    border-color: rgba(70, 78, 160, 0.18);
}

.mes-area-tab-club.is-active {
    background: var(--mes-club);
    border-color: rgba(108, 93, 172, 0.16);
}

.mes-area-tab-events.is-active {
    background: var(--mes-events);
    border-color: rgba(37, 126, 93, 0.18);
}

.mes-area-tab-settings.is-active {
    background: var(--mes-settings);
    border-color: rgba(150, 89, 99, 0.18);
}


/* ==========================================================================
   Context / Sub Navigation – MOBILE FIRST
   ========================================================================== */

.mes-subnav {
    width: 100%;
    min-width: 0;

    border-top: 1px solid rgba(31, 42, 30, 0.10);
    border-bottom: 1px solid rgba(31, 42, 30, 0.13);
}

.mes-subnav-addresses {
    background: var(--mes-addresses-sub);
}

.mes-subnav-club {
    background: var(--mes-club-sub);
}

.mes-subnav-events {
    background: var(--mes-events-sub);
}

.mes-subnav-settings {
    background: var(--mes-settings-sub);
}

.mes-subnav-inner {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 5px;

    width: 100%;
    max-width: var(--mes-content-width);

    margin: 0 auto;

    padding: 7px 8px;
}

.mes-subnav a,
.mes-subnav span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 38px;

    padding: 7px 8px;

    border-radius: 8px;

    font-size: 13.25px;
    font-weight: 640;
    line-height: 1.18;

    text-align: center;
    text-decoration: none;

    overflow-wrap: anywhere;
}

.mes-subnav a:hover {
    background: rgba(255, 255, 255, 0.34);
}

.mes-subnav a.is-active,
.mes-subnav span.is-active {
    background: rgba(255, 255, 255, 0.64);
}


/* ==========================================================================
   Main Content
   ========================================================================== */

.mes-main {
    width: 100%;
    max-width: var(--mes-content-width);

    margin: 0 auto;

    padding:
        24px
        14px
        max(56px, env(safe-area-inset-bottom));
}

.mes-page-heading {
    margin-bottom: 24px;
}

.mes-kicker {
    margin: 0 0 7px;

    font-size: 11.66px;
    font-weight: 720;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--mes-primary);
}

.mes-page-heading h1 {
    margin: 0;

    font-size: clamp(33.92px, 10.6vw, 46.64px);
    line-height: 1.05;

    letter-spacing: -0.045em;
}

.mes-page-intro {
    max-width: 720px;

    margin: 10px 0 0;

    color: var(--mes-text-secondary);
}


/* ==========================================================================
   Dashboard
   ========================================================================== */

.mes-dashboard-layout {
    display: grid;
    grid-template-columns: 1fr;

    gap: 16px;
}

.mes-dashboard-side {
    display: grid;

    gap: 16px;
}


/* ==========================================================================
   Cards
   ========================================================================== */

.mes-card {
    padding: 19px;

    border: 1px solid var(--mes-border);

    border-radius: var(--mes-radius);

    background: var(--mes-white);

    box-shadow: var(--mes-shadow);
}

.mes-card-large {
    min-height: 230px;
}

.mes-card-soft {
    background: var(--mes-soft-green);
}

.mes-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;
}

.mes-card-overline {
    display: block;

    margin-bottom: 5px;

    font-size: 11.13px;
    font-weight: 720;

    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--mes-text-secondary);
}

.mes-card h2 {
    margin: 0;

    font-size: 23.32px;
    line-height: 1.2;

    letter-spacing: -0.025em;
}

.mes-card p {
    color: var(--mes-text-secondary);
}


/* ==========================================================================
   Chips
   ========================================================================== */

.mes-chip {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    min-height: 27px;

    padding: 4px 9px;

    border-radius: 999px;

    font-size: 12.19px;
    font-weight: 700;
}

.mes-chip-addresses {
    background: var(--mes-addresses-sub);
}

.mes-chip-club {
    background: var(--mes-club-sub);
}

.mes-chip-events {
    background: var(--mes-events-sub);
}

.mes-chip-settings {
    background: var(--mes-settings-sub);
}


/* ==========================================================================
   Process
   ========================================================================== */

.mes-process {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px;

    margin-top: 24px;

    font-size: 13.78px;
    font-weight: 660;
}

.mes-process-arrow {
    color: var(--mes-text-secondary);
}


/* ==========================================================================
   Login
   ========================================================================== */

.mes-login-page {
    background:
        radial-gradient(
            circle at top left,
            rgba(220, 230, 251, 0.75),
            transparent 36rem
        ),
        var(--mes-bg);
}

.mes-login {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;

    padding:
        max(20px, env(safe-area-inset-top))
        14px
        max(20px, env(safe-area-inset-bottom));
}

.mes-login-card {
    width: 100%;
    max-width: 440px;

    padding: 24px;

    border: 1px solid var(--mes-border);

    border-radius: var(--mes-radius-large);

    background: rgba(255, 255, 255, 0.96);

    box-shadow: var(--mes-shadow);
}

.mes-brand {
    display: flex;
    align-items: center;

    gap: 11px;
}

.mes-brand-login {
    margin-bottom: 36px;
}

.mes-brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 12px;

    font-size: 21.2px;
    font-weight: 750;

    color: var(--mes-white);
    background: var(--mes-primary);
}

.mes-brand-text {
    display: flex;
    flex-direction: column;
}

.mes-brand-text strong {
    font-size: 18.02px;
    line-height: 1.1;
}

.mes-brand-text span {
    margin-top: 3px;

    font-size: 12.72px;

    color: var(--mes-text-secondary);
}

.mes-login-heading {
    margin-bottom: 28px;
}

.mes-eyebrow {
    margin: 0 0 7px;

    font-size: 12.72px;
    font-weight: 720;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--mes-primary);
}

.mes-login-heading h1 {
    margin: 0;

    font-size: clamp(31.8px, 8.48vw, 42.4px);
    line-height: 1.08;

    letter-spacing: -0.045em;
}

.mes-login-heading p:last-child {
    margin: 12px 0 0;

    color: var(--mes-text-secondary);
}


/* ==========================================================================
   Forms
   ========================================================================== */

.mes-form {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

.mes-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.mes-field label {
    font-size: 14.84px;
    font-weight: 650;
}

.mes-field input,
.mes-field select,
.mes-field textarea {
    width: 100%;

    min-height: 48px;

    padding: 11px 13px;

    border: 1px solid var(--mes-border-strong);
    border-radius: var(--mes-radius-small);

    color: var(--mes-text);
    background: var(--mes-white);

    transition:
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.mes-field textarea {
    min-height: 120px;

    resize: vertical;
}

.mes-field input:focus,
.mes-field select:focus,
.mes-field textarea:focus {
    border-color: var(--mes-accent);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(108, 93, 172, 0.11);
}

.mes-checkbox {
    display: inline-flex;
    align-items: center;

    align-self: flex-start;

    gap: 9px;

    font-size: 14.84px;

    color: var(--mes-text-secondary);

    cursor: pointer;
}

.mes-checkbox input {
    width: 17px;
    height: 17px;

    margin: 0;

    accent-color: var(--mes-primary);
}


/* ==========================================================================
   Login Buttons
   ========================================================================== */

.mes-button-primary {
    color: var(--mes-white);
    background: var(--mes-primary);
}

.mes-button-primary:hover {
    background: #233f2a;
}

.mes-button-secondary {
    border-color: var(--mes-border);

    background: var(--mes-white);
}

.mes-button-full {
    width: 100%;
    min-height: 50px;

    margin-top: 4px;
}


/* ==========================================================================
   Alerts
   ========================================================================== */

.mes-alert {
    display: flex;
    flex-direction: column;

    gap: 3px;

    margin-bottom: 22px;
    padding: 12px 14px;

    border: 1px solid rgba(31, 42, 30, 0.14);

    border-radius: var(--mes-radius-small);

    font-size: 14.84px;
}

.mes-alert-error {
    background: var(--mes-danger);
}

.mes-alert-success {
    background: var(--mes-confirm);
}

.mes-login-footer {
    margin-top: 34px;

    font-size: 12.72px;
    text-align: center;

    color: var(--mes-text-secondary);
}


/* ==========================================================================
   Small Mobile
   ========================================================================== */

@media (max-width: 365px) {

    .mes-shell-brand-copy strong {
        font-size: 16.96px;
    }

    .mes-user-name-text {
        max-width: 86px;
    }

    .mes-area-tab {
        padding-left: 4px;
        padding-right: 4px;

        font-size: 12.72px;
    }

    .mes-subnav-inner {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================================
   Tablet / Desktop
   ========================================================================== */

@media (min-width: 760px) {

    .mes-shell-top {
        gap: 24px;

        padding:
            max(14px, env(safe-area-inset-top))
            28px
            10px;
    }

    .mes-shell-brand {
        gap: 11px;
    }

    .mes-shell-brand-mark {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        border-radius: 12px;

        font-size: 20.14px;
    }

    .mes-shell-brand-copy strong {
        font-size: 19.08px;
    }

    .mes-shell-brand-copy small {
        display: block;

        margin-top: 3px;

        font-size: 12.72px;
        line-height: 1.2;

        color: #4d6172;
    }

    .mes-shell-user {
        gap: 14px;
    }

    .mes-shell-user-copy {
        display: flex;
        flex-direction: column;
    }

    .mes-user-label {
        display: block;

        font-size: 11.66px;

        color: var(--mes-text-secondary);
    }

    .mes-user-name {
        margin-top: 1px;
    }

    .mes-user-name-text {
        max-width: 220px;
    }

    .mes-user-status {
        display: none;
    }

    .mes-logout-button {
        width: auto;
        height: auto;
        min-height: 42px;

        padding: 9px 15px;
    }

    .mes-logout-icon {
        display: none;
    }

    .mes-logout-text {
        display: inline;
    }

    .mes-area-nav-inner {
        display: flex;
        align-items: end;

        gap: 5px;

        width: max-content;
        min-width: 100%;

        padding:
            4px
            28px
            0;
    }

    .mes-area-tab {
        min-height: 48px;

        padding: 10px 18px;

        border-radius:
            12px
            12px
            0
            0;

        font-size: 14.84px;
    }

    .mes-area-tab.is-active {
        min-height: 52px;
    }

    .mes-nav-label-mobile {
        display: none;
    }

    .mes-nav-label-desktop {
        display: inline;
    }

    .mes-settings-icon {
        display: none;
    }

    .mes-settings-label {
        display: inline;
    }

    .mes-subnav-inner {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        gap: 4px;

        padding: 7px 28px;
    }

    .mes-subnav a,
    .mes-subnav span {
        min-height: 38px;

        padding: 7px 11px;

        font-size: 13.78px;

        text-align: left;
    }

    .mes-main {
        padding:
            44px
            28px
            80px;
    }

    .mes-dashboard-layout {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(290px, 0.8fr);

        gap: 22px;
    }

    .mes-card {
        padding: 28px;
    }

    .mes-login-card {
        padding: 36px;
    }

}


/* ==========================================================================
   Wide Desktop
   ========================================================================== */

@media (min-width: 1180px) {

    .mes-area-tab {
        padding-left: 22px;
        padding-right: 22px;

        font-size: 15.9px;
    }

}

/* ==========================================================================
   MES v0.0.2 – Organisationen
   ========================================================================== */

.mes-visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

.mes-flash {
    margin-bottom: 18px;
    padding: 12px 14px;

    border: 1px solid rgba(31, 42, 30, 0.13);
    border-radius: var(--mes-radius-small);

    font-size: 14.84px;
    font-weight: 620;
}

.mes-flash-success {
    background: var(--mes-confirm);
}

.mes-page-heading-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 18px;
}

.mes-button-page-action {
    align-self: flex-start;
}

.mes-button-small {
    min-height: 36px;

    padding: 7px 11px;

    font-size: 13.78px;
}


/* Search
   -------------------------------------------------------------------------- */

.mes-organization-search-card {
    margin-bottom: 16px;

    padding: 14px;

    box-shadow: none;
}

.mes-search-form {
    display: grid;
    grid-template-columns: 1fr;

    gap: 9px;
}

.mes-search-field {
    min-width: 0;
}

.mes-search-field input {
    width: 100%;
    min-height: 46px;

    padding: 10px 12px;

    border: 1px solid var(--mes-border-strong);
    border-radius: 10px;

    color: var(--mes-text);
    background: var(--mes-white);

    appearance: none;
}

.mes-search-field input:focus {
    border-color: var(--mes-accent);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(108, 93, 172, 0.11);
}


/* Organization list – MOBILE FIRST
   -------------------------------------------------------------------------- */

.mes-organization-list {
    display: grid;

    gap: 10px;
}

.mes-org-list-head {
    display: none;
}

.mes-org-row {
    display: grid;

    gap: 12px;

    padding: 16px;

    border: 1px solid var(--mes-border);
    border-radius: var(--mes-radius);

    background: var(--mes-white);

    box-shadow:
        0 1px 2px rgba(31, 42, 30, 0.025);
}

.mes-org-main {
    min-width: 0;
}

.mes-org-title-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.mes-org-title-line strong {
    min-width: 0;

    font-size: 16.96px;
    line-height: 1.25;
}

.mes-org-secondary {
    display: block;

    margin-top: 4px;

    font-size: 12.72px;

    color: var(--mes-text-secondary);
}

.mes-status-dot-label {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 5px;

    font-size: 11.66px;
    font-weight: 700;

    color: var(--mes-primary);
}

.mes-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #38a169;
}

.mes-status-text {
    flex: 0 0 auto;

    font-size: 11.66px;
    font-weight: 700;

    color: var(--mes-text-secondary);
}

.mes-org-cell {
    min-width: 0;

    font-size: 13.78px;

    color: var(--mes-text-secondary);

    overflow-wrap: anywhere;
}

.mes-org-cell::before {
    content: attr(data-label);

    display: block;

    margin-bottom: 2px;

    font-size: 10.6px;
    font-weight: 720;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: var(--mes-text-secondary);
}

.mes-org-cell a {
    text-decoration-color: rgba(46, 79, 53, 0.32);
    text-underline-offset: 2px;
}

.mes-org-actions {
    display: flex;
    justify-content: flex-end;
}

.mes-empty-state {
    padding: 32px 20px;

    border: 1px dashed var(--mes-border-strong);
    border-radius: var(--mes-radius);

    text-align: center;

    background: rgba(255, 255, 255, 0.48);
}

.mes-empty-state h2 {
    margin: 0;

    font-size: 21.2px;
}

.mes-empty-state p {
    margin: 8px auto 18px;

    max-width: 520px;

    color: var(--mes-text-secondary);
}


/* Pagination
   -------------------------------------------------------------------------- */

.mes-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 18px;

    font-size: 12.72px;

    color: var(--mes-text-secondary);
}

.mes-pagination a {
    padding: 7px 9px;

    border-radius: 8px;

    font-weight: 650;
    text-decoration: none;

    color: var(--mes-text);
    background: var(--mes-white);
}

.mes-pagination-disabled {
    opacity: 0.45;
}


/* Record form – MOBILE FIRST
   -------------------------------------------------------------------------- */

.mes-main-form {
    max-width: 1040px;
}

.mes-record-form {
    display: grid;

    gap: 16px;
}

.mes-form-section {
    padding: 18px;

    border: 1px solid var(--mes-border);
    border-radius: var(--mes-radius);

    background: var(--mes-white);

    box-shadow:
        0 1px 2px rgba(31, 42, 30, 0.025);
}

.mes-form-section-heading {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-bottom: 20px;
}

.mes-form-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    border-radius: 9px;

    font-size: 13.78px;
    font-weight: 800;

    background: var(--mes-soft-green);
}

.mes-form-section-heading h2 {
    margin: 0;

    font-size: 20.14px;
    line-height: 1.2;
}

.mes-form-section-heading p {
    margin: 4px 0 0;

    font-size: 13.78px;

    color: var(--mes-text-secondary);
}

.mes-form-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 16px;
}

.mes-field-span-2 {
    grid-column: auto;
}

.mes-field-help {
    margin-top: -1px;

    font-size: 11.66px;
    line-height: 1.35;

    color: var(--mes-text-secondary);
}

.mes-required {
    color: #9b3135;
}

.mes-checkbox-panel {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid var(--mes-border);
    border-radius: 10px;

    background: var(--mes-bg);
}

.mes-info-box {
    margin-top: 18px;
    padding: 12px 14px;

    border: 1px solid rgba(31, 42, 30, 0.12);
    border-radius: 10px;

    font-size: 12.72px;
    line-height: 1.5;

    background: var(--mes-info);
}

.mes-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;

    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap: 9px;

    margin-top: 2px;
    padding:
        10px
        0
        max(10px, env(safe-area-inset-bottom));

    background:
        linear-gradient(
            to bottom,
            rgba(247, 248, 244, 0),
            var(--mes-bg) 25%
        );
}

.mes-button-save {
    min-height: 48px;

    font-weight: 720;
}

.mes-error-list {
    margin: 7px 0 0;
    padding-left: 19px;
}


/* Tablet / Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 620px) {

    .mes-page-heading-actions {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .mes-search-form {
        grid-template-columns:
            minmax(240px, 1fr)
            auto
            auto;

        align-items: center;
    }

    .mes-form-grid-2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mes-field-span-2 {
        grid-column: 1 / -1;
    }

    .mes-form-grid-address {
        grid-template-columns:
            minmax(0, 1fr)
            100px;
    }

    .mes-address-street {
        grid-column: 1;
    }

    .mes-address-number {
        grid-column: 2;
    }

    .mes-address-postal {
        grid-column: 1;
    }

    .mes-address-city {
        grid-column: 2;
    }

    .mes-address-country {
        grid-column: 1;
        max-width: 120px;
    }

}


@media (min-width: 860px) {

    .mes-organization-list {
        gap: 0;

        overflow: hidden;

        border: 1px solid var(--mes-border);
        border-radius: var(--mes-radius);

        background: var(--mes-white);
    }

    .mes-org-list-head,
    .mes-org-row {
        display: grid;
        grid-template-columns:
            minmax(220px, 1.45fr)
            minmax(190px, 1.2fr)
            minmax(200px, 1.25fr)
            80px
            100px;

        gap: 18px;
        align-items: center;
    }

    .mes-org-list-head {
        padding: 10px 16px;

        border-bottom: 1px solid var(--mes-border);

        font-size: 10.6px;
        font-weight: 720;

        letter-spacing: 0.06em;
        text-transform: uppercase;

        color: var(--mes-text-secondary);

        background: var(--mes-soft-green);
    }

    .mes-org-row {
        padding: 14px 16px;

        border: 0;
        border-bottom: 1px solid var(--mes-border);
        border-radius: 0;

        box-shadow: none;
    }

    .mes-org-row:last-child {
        border-bottom: 0;
    }

    .mes-org-row:hover {
        background: rgba(163, 179, 234, 0.11);
    }

    .mes-org-cell::before {
        display: none;
    }

    .mes-org-actions {
        justify-content: flex-end;
    }

    .mes-form-section {
        padding: 24px;
    }

}


.mes-person-fieldset {
    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;
}

.mes-person-fieldset:disabled {
    opacity: 0.72;
}

.mes-person-fieldset:disabled input,
.mes-person-fieldset:disabled textarea {
    cursor: not-allowed;
}


/* ==========================================================================
   MES Alpha – DEV
   ========================================================================== */

:root {
    --mes-dev: #34383d;
    --mes-dev-dark: #262a2e;
    --mes-dev-mid: #454a50;
    --mes-dev-sub: #50565d;
    --mes-dev-border: #666d75;
    --mes-dev-text: #f7f8f4;
    --mes-dev-text-soft: #c9ced3;
}


/*
 * Mobile:
 * Start | Adressen | Verein | Events | Settings | DEV
 *
 * Ohne DEV bleiben fünf Ziele. Mit DEV sechs. Alles bleibt innerhalb
 * der Viewport-Breite; kein horizontales Hauptmenü-Scrolling.
 */

@media (max-width: 759px) {

    .mes-area-nav-inner {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

    .mes-area-nav-inner.has-dev {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

    .mes-area-tab {
        padding-left: 3px;
        padding-right: 3px;

        font-size: 12.19px;
    }

    .mes-area-tab-dev {
        font-size: 12.19px;
        letter-spacing: 0.02em;
    }

    .mes-settings-icon {
        font-size: 21.2px;
    }

}


.mes-area-tab-dev:hover {
    color: var(--mes-dev-text);
    background: rgba(52, 56, 61, 0.82);
}

.mes-area-tab-dev.is-active {
    color: var(--mes-dev-text);
    background: var(--mes-dev);
    border-color: var(--mes-dev-border);
}

.mes-subnav-dev {
    color: var(--mes-dev-text);
    background: var(--mes-dev-sub);

    border-color: var(--mes-dev-border);
}

.mes-subnav-dev a {
    color: var(--mes-dev-text);
}

.mes-subnav-dev a:hover {
    background: rgba(255, 255, 255, 0.10);
}

.mes-subnav-dev a.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.17);
}


/* DEV page
   -------------------------------------------------------------------------- */

.mes-dev-page {
    background: var(--mes-dev-dark);
}

.mes-dev-page .mes-shell-header {
    /* Header bleibt bewusst MES-weit identisch. */
}

.mes-dev-main {
    color: var(--mes-dev-text);
    background: var(--mes-dev-dark);
}

.mes-dev-heading {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.mes-dev-heading h1 {
    color: #ffffff;
}

.mes-dev-heading .mes-page-intro {
    color: var(--mes-dev-text-soft);
}

.mes-dev-kicker {
    color: #ffffff;
}

.mes-dev-badge {
    align-self: flex-start;

    padding: 5px 9px;

    border: 1px solid var(--mes-dev-border);
    border-radius: 999px;

    font-size: 10.6px;
    font-weight: 800;

    letter-spacing: 0.08em;

    color: #ffffff;
    background: var(--mes-dev-mid);
}

.mes-dev-tools-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 14px;
}

.mes-dev-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    gap: 18px;

    min-height: 238px;

    padding: 18px;

    border: 1px solid var(--mes-dev-border);
    border-radius: var(--mes-radius);

    color: var(--mes-dev-text);
    background: var(--mes-dev);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.14);
}

.mes-dev-card h2 {
    margin: 0 0 8px;

    font-size: 21.2px;

    color: #ffffff;
}

.mes-dev-card p {
    margin: 0;

    color: var(--mes-dev-text-soft);
}

.mes-dev-card code {
    color: #ffffff;
}

.mes-dev-card-overline {
    display: block;

    margin-bottom: 5px;

    font-size: 10.6px;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--mes-dev-text-soft);
}

.mes-dev-card-log {
    background: #3d4248;
}

.mes-dev-command {
    overflow-x: auto;

    padding: 9px 11px;

    border: 1px solid var(--mes-dev-border);
    border-radius: 8px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 11.66px;
    line-height: 1.45;

    white-space: nowrap;

    color: #ffffff;
    background: var(--mes-dev-dark);
}

.mes-dev-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 45px;

    padding: 9px 14px;

    border: 1px solid #8b9299;
    border-radius: 10px;

    font-size: 13.78px;
    font-weight: 720;

    text-decoration: none;

    color: #ffffff;
    background: var(--mes-dev-mid);

    cursor: pointer;

    transition:
        background 120ms ease,
        border-color 120ms ease,
        transform 120ms ease;
}

.mes-dev-button:hover {
    border-color: #b8bec4;
    background: #555b62;
}

.mes-dev-button:active {
    transform: translateY(1px);
}

.mes-dev-button-link {
    text-align: center;
}

.mes-dev-result {
    margin-bottom: 16px;
    padding: 14px;

    border: 1px solid var(--mes-dev-border);
    border-radius: var(--mes-radius);

    color: var(--mes-dev-text);
    background: var(--mes-dev);
}

.mes-dev-result.is-success {
    border-left: 5px solid #78d591;
}

.mes-dev-result.is-error {
    border-left: 5px solid var(--mes-danger);
}

.mes-dev-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}

.mes-dev-result-head span {
    padding: 3px 8px;

    border-radius: 999px;

    font-size: 10.6px;
    font-weight: 800;

    color: #ffffff;
    background: var(--mes-dev-mid);
}

.mes-dev-output {
    overflow: auto;

    max-height: 420px;

    margin: 10px 0 0;
    padding: 12px;

    border: 1px solid var(--mes-dev-border);
    border-radius: 8px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 11.66px;
    line-height: 1.45;

    white-space: pre;

    color: #ffffff;
    background: #1d2023;
}

.mes-dev-security-note {
    margin-top: 16px;
    padding: 12px 14px;

    border: 1px solid var(--mes-dev-border);
    border-radius: 10px;

    font-size: 12.72px;
    line-height: 1.55;

    color: var(--mes-dev-text-soft);
    background: var(--mes-dev);
}

.mes-dev-security-note strong,
.mes-dev-security-note code {
    color: #ffffff;
}


/* DEV logfile
   -------------------------------------------------------------------------- */

.mes-dev-refresh {
    width: auto;

    align-self: flex-start;
}

.mes-dev-log-meta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 14px;
}

.mes-dev-log-meta > div {
    min-width: 0;

    padding: 10px;

    border: 1px solid var(--mes-dev-border);
    border-radius: 9px;

    background: var(--mes-dev);
}

.mes-dev-log-meta span {
    display: block;

    margin-bottom: 2px;

    font-size: 9.54px;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--mes-dev-text-soft);
}

.mes-dev-log-meta strong {
    display: block;

    overflow-wrap: anywhere;

    font-size: 11.66px;
    font-weight: 650;

    color: #ffffff;
}

.mes-dev-log-panel {
    overflow: hidden;

    border: 1px solid var(--mes-dev-border);
    border-radius: var(--mes-radius);

    background: #1b1e21;
}

.mes-dev-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 10px 12px;

    border-bottom: 1px solid var(--mes-dev-border);

    color: #ffffff;
    background: var(--mes-dev);
}

.mes-dev-log-head span {
    font-size: 10.6px;
    font-weight: 750;

    color: var(--mes-dev-text-soft);
}

.mes-dev-log-content {
    overflow: auto;

    min-height: 300px;
    max-height: 68vh;

    margin: 0;
    padding: 13px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 11.13px;
    line-height: 1.5;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    color: #eeeeee;
    background: #1b1e21;
}


@media (min-width: 760px) {

    .mes-dev-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .mes-dev-tools-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    .mes-dev-card-log {
        grid-column: 1 / -1;

        min-height: 190px;
    }

    .mes-dev-button {
        width: auto;
    }

    .mes-dev-log-meta {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


@media (min-width: 1100px) {

    .mes-dev-tools-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .mes-dev-card-log {
        grid-column: auto;

        min-height: 238px;
    }

}

/* ==========================================================================
   MES – Collapsible Form Sections / Accordion
   Systemweiter UX-Standard für lange Formulare und Dialoge.
   ========================================================================== */

.mes-collapsible-section {
    padding: 0;
    overflow: hidden;
}

.mes-form-section-summary {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 18px 58px 18px 18px;

    list-style: none;

    cursor: pointer;
    user-select: none;

    transition:
        background-color 120ms ease,
        border-color 120ms ease;
}

.mes-form-section-summary::-webkit-details-marker {
    display: none;
}

.mes-form-section-summary::marker {
    content: "";
    font-size: 0;
}

.mes-form-section-summary:hover {
    background: rgba(163, 179, 234, 0.10);
}

.mes-form-section-summary:focus-visible {
    outline: 3px solid rgba(108, 93, 172, 0.28);
    outline-offset: -3px;
}

.mes-form-section-summary .mes-form-section-heading {
    display: flex;
    align-items: flex-start;

    flex: 1 1 auto;

    min-width: 0;

    gap: 11px;

    margin: 0;
}

.mes-form-section-title {
    display: block;
    min-width: 0;
}

.mes-form-section-summary::after {
    content: "🔽";

    position: absolute;
    top: 50%;
    right: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    transform: translateY(-50%);

    font-size: 18.02px;
    line-height: 1;

    border-radius: 8px;

    background: var(--mes-bg);
}

.mes-collapsible-section[open] > .mes-form-section-summary::after {
    content: "🔼";
}

.mes-collapsible-section[open] > .mes-form-section-summary {
    border-bottom: 1px solid var(--mes-border);
    background: rgba(163, 179, 234, 0.08);
}

.mes-collapsible-content {
    padding: 18px;
}

.mes-collapsible-section:not([open]) > .mes-form-section-summary {
    border-bottom: 0;
}

@media (min-width: 860px) {

    .mes-form-section.mes-collapsible-section {
        padding: 0;
    }

    .mes-form-section-summary {
        padding: 22px 64px 22px 24px;
    }

    .mes-form-section-summary::after {
        right: 24px;
    }

    .mes-collapsible-content {
        padding: 24px;
    }

}


/* ==========================================================================
   MES DEV – Code-Backup + Chatty-Handoff
   ========================================================================== */

.mes-dev-card-backup {
    background: #384039;
}

.mes-dev-card-chatty {
    background: #363a44;
}

.mes-dev-button-backup {
    border-color: #87a98c;
    background: #485d4b;
}

.mes-dev-button-backup:hover {
    border-color: #a9c8ad;
    background: #536b57;
}

.mes-dev-button-chatty {
    border-color: #8993ac;
    background: #4b5368;
}

.mes-dev-button-chatty:hover {
    border-color: #aeb6ca;
    background: #565f77;
}

.mes-dev-card-note {
    display: block;

    margin-top: -8px;

    font-size: 10.6px;
    line-height: 1.45;

    color: var(--mes-dev-text-soft);
}

.mes-dev-result-download {
    margin-top: 14px;
}

.mes-dev-package-latest {
    display: grid;

    gap: 7px;

    margin-top: 2px;
    padding-top: 13px;

    border-top: 1px solid var(--mes-dev-border);

    font-size: 10.6px;
    line-height: 1.4;

    color: var(--mes-dev-text-soft);
}

.mes-dev-package-latest strong {
    color: #ffffff;
}

.mes-dev-button-download {
    margin-top: 5px;
}


/*
 * Fünf Werkzeuge bleiben auf großen Screens bewusst bei maximal
 * drei Spalten. So bleiben die Karten lesbar und die Buttons groß genug.
 */

@media (min-width: 1100px) {

    .mes-dev-tools-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .mes-dev-card-log {
        grid-column: auto;
    }

}


/* ==========================================================================
   MES v0.0.2-11 – Adress- & Kontaktfundament / UX Foundation
   ========================================================================== */

.mes-area-tab.is-disabled {
    cursor: default;
    opacity: 0.70;
}

.mes-addresses-page .mes-form-step {
    background: var(--mes-addresses-sub);
}


/* Live-Suche – progressive Enhancement */

.mes-live-search-status {
    min-height: 20px;

    margin: -3px 0 8px;

    font-size: 11.66px;
    font-weight: 650;

    color: var(--mes-text-secondary);
}

[data-mes-live-results] {
    transition: opacity 100ms ease;
}

[data-mes-live-results].is-loading {
    opacity: 0.58;
}

.mes-search-reset.is-hidden {
    display: none;
}

.mes-js .mes-search-submit {
    display: none;
}

@media (min-width: 620px) {

    .mes-js .mes-search-form {
        grid-template-columns:
            minmax(240px, 1fr)
            auto;
    }

}


/* Sticky Actions – MES-weiter Formularstandard */

.mes-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;

    padding:
        12px
        0
        max(12px, env(safe-area-inset-bottom));

    border-top: 1px solid rgba(31, 42, 30, 0.08);

    background: rgba(247, 248, 244, 0.96);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mes-button-save:disabled {
    cursor: not-allowed;

    color: #667065;
    background: #d8dfd5;
    border-color: #c5cdc2;

    opacity: 1;
}

.mes-button-save:not(:disabled) {
    background: var(--mes-confirm);
}

@media (min-width: 620px) {

    .mes-form-actions {
        display: flex;
        justify-content: flex-end;

        padding-top: 12px;
    }

}


/* Accordion im Adressbereich */

.mes-addresses-page .mes-form-section-summary:hover {
    background: rgba(163, 179, 234, 0.10);
}

.mes-addresses-page .mes-collapsible-section[open] > .mes-form-section-summary {
    background: rgba(163, 179, 234, 0.08);
}


/* ==========================================================================
   MES – Kontakt-Metadaten / Mehrfach-Funktionen
   ========================================================================== */

.mes-function-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;

    border: 0;
}

.mes-function-fieldset > legend {
    margin-bottom: 8px;

    font-size: 13.78px;
    font-weight: 720;

    color: var(--mes-text);
}

.mes-option-chip-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 8px;
}

.mes-option-chip {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 44px;
    padding: 9px 11px;

    border: 1px solid var(--mes-border);
    border-radius: 10px;

    background: var(--mes-bg);

    cursor: pointer;
}

.mes-option-chip input {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;

    accent-color: var(--mes-confirm);
}

.mes-option-chip:has(input:checked) {
    border-color: rgba(46, 79, 53, 0.30);

    background: rgba(206, 255, 192, 0.42);
}


/* Einstellungen – Adressen & Kontakte */

.mes-settings-meta-intro {
    margin-bottom: 18px;
}

.mes-settings-meta-note {
    margin-top: 10px;

    font-size: 12.72px;
}

.mes-settings-catalogs {
    display: grid;

    gap: 14px;
}

.mes-settings-catalog {
    padding: 0;

    overflow: hidden;
}

.mes-settings-catalog[open] > .mes-form-section-summary {
    background: rgba(236, 182, 186, 0.18);
}

.mes-settings-catalog > .mes-form-section-summary:hover {
    background: rgba(236, 182, 186, 0.24);
}

.mes-meta-list {
    display: grid;

    gap: 10px;
}

.mes-meta-row {
    display: grid;
    grid-template-columns: 1fr;

    gap: 10px;

    padding: 12px;

    border: 1px solid var(--mes-border);
    border-radius: 12px;

    background: var(--mes-bg);
}

.mes-meta-row-new {
    margin-top: 6px;

    border-style: dashed;

    background: rgba(255, 255, 178, 0.16);
}

.mes-meta-active {
    display: flex;
    align-items: end;
}

.mes-meta-active .mes-checkbox-panel {
    min-height: 44px;
}

.mes-meta-save {
    display: flex;
    align-items: end;
}

.mes-meta-save .mes-button {
    width: 100%;
    min-height: 44px;
}

.mes-meta-code {
    font-size: 10.6px;

    color: var(--mes-text-secondary);
}

.mes-meta-help {
    margin-top: 14px;
}


@media (min-width: 620px) {

    .mes-option-chip-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mes-meta-row {
        grid-template-columns:
            minmax(220px, 1fr)
            120px
            130px
            140px;

        align-items: end;
    }

    .mes-meta-code {
        grid-column: 1 / -1;
    }

    .mes-meta-row-new {
        grid-template-columns:
            minmax(220px, 1fr)
            120px
            140px;
    }

}


@media (min-width: 980px) {

    .mes-option-chip-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* ==========================================================================
   MES v0.0.2-14 – kompakte Funktionen, Detailansicht, Dashboard-Infos
   ========================================================================== */

/* Organisationsfunktionen: kompakt statt großer Kacheln */

.mes-option-chip-grid {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.mes-option-chip {
    width: auto;
    min-height: 34px;

    padding: 5px 9px;

    border-radius: 9px;
}

.mes-option-chip input {
    width: 16px;
    height: 16px;
}

@media (min-width: 620px) {

    .mes-option-chip-grid {
        display: flex;
    }

}

@media (min-width: 980px) {

    .mes-option-chip-grid {
        display: flex;
    }

}


/* Organisationsliste */

.mes-org-title-link {
    color: inherit;

    text-decoration: none;
}

.mes-org-title-link:hover {
    text-decoration: underline;

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (min-width: 860px) {

    .mes-org-list-head,
    .mes-org-row {
        grid-template-columns:
            minmax(220px, 1.55fr)
            minmax(190px, 1.25fr)
            minmax(200px, 1.3fr)
            80px;
    }

}


/* Read-only Detailansicht */

.mes-detail-stack {
    display: grid;

    gap: 14px;
}

.mes-detail-section {
    padding: 18px;
}

.mes-detail-section-heading {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-bottom: 18px;
}

.mes-detail-section-heading h2 {
    margin: 0;

    font-size: 21.2px;
}

.mes-detail-section-heading p {
    margin: 4px 0 0;

    font-size: 12.72px;

    color: var(--mes-text-secondary);
}

.mes-detail-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 13px;

    margin: 0;
}

.mes-detail-grid > div {
    min-width: 0;
}

.mes-detail-grid dt {
    margin-bottom: 3px;

    font-size: 10.6px;
    font-weight: 720;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: var(--mes-text-secondary);
}

.mes-detail-grid dd {
    margin: 0;

    font-size: 14.84px;
    line-height: 1.45;

    overflow-wrap: anywhere;
}

.mes-detail-grid a {
    text-decoration-color: rgba(46, 79, 53, 0.34);
    text-underline-offset: 2px;
}

.mes-detail-preline {
    white-space: pre-line;
}

.mes-detail-internal {
    padding: 10px 12px;

    border-radius: 9px;

    background: rgba(255, 193, 173, 0.18);
}

.mes-detail-badges {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.mes-detail-badge {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 4px 8px;

    border: 1px solid rgba(46, 79, 53, 0.13);
    border-radius: 999px;

    font-size: 12.72px;
    font-weight: 650;

    background: rgba(206, 255, 192, 0.38);
}

.mes-detail-empty {
    margin: 0;

    font-size: 13.78px;

    color: var(--mes-text-secondary);
}

.mes-detail-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;

    display: grid;
    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 4px;
    padding:
        12px
        0
        max(12px, env(safe-area-inset-bottom));

    border-top: 1px solid rgba(31, 42, 30, 0.16);

    background: rgba(238, 241, 232, 0.98);

    box-shadow:
        0 -8px 22px rgba(31, 42, 30, 0.045);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mes-detail-actions-back {
    width: 100%;
}

.mes-detail-actions-group {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.mes-detail-actions-group form,
.mes-detail-actions-group .mes-button {
    width: 100%;
}

@media (min-width: 620px) {

    .mes-detail-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .mes-detail-span-2 {
        grid-column: 1 / -1;
    }

    .mes-detail-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 12px;
    }

    .mes-detail-actions-back {
        width: auto;
        flex: 0 0 auto;
    }

    .mes-detail-actions-group {
        display: flex;
        justify-content: flex-end;

        margin-left: auto;
    }

    .mes-detail-actions-group form,
    .mes-detail-actions-group .mes-button {
        width: auto;
    }

}


/* Dashboard-Kennzahlen */

.mes-dashboard-stats {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 16px;
}

.mes-dashboard-stat {
    min-width: 0;

    padding: 14px;

    border: 1px solid var(--mes-border);
    border-radius: 12px;

    background: var(--mes-white);

    box-shadow:
        0 1px 2px rgba(31, 42, 30, 0.025);
}

.mes-dashboard-stat.is-pending {
    background: rgba(238, 241, 232, 0.58);
}

.mes-dashboard-stat-label {
    display: block;

    margin-bottom: 5px;

    font-size: 10.6px;
    font-weight: 720;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: var(--mes-text-secondary);
}

.mes-dashboard-stat-value {
    display: block;

    font-size: clamp(21.2px, 5.3vw, 31.8px);
    line-height: 1.1;

    overflow-wrap: anywhere;
}

.mes-dashboard-stat small {
    display: block;

    margin-top: 5px;

    font-size: 10.6px;
    line-height: 1.35;

    color: var(--mes-text-secondary);
}

@media (min-width: 760px) {

    .mes-dashboard-stats {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 12px;
    }

}


/* ==========================================================================
   MES v0.0.2-16 – UX Density
   Platin UX: touch-sicher, aber platzökonomisch.
   ========================================================================== */

/*
 * Die Bereichs-Subnavigation ist ein eigener Sticky-Layer.
 * Sie liegt bewusst außerhalb von .mes-shell-header, damit sie beim
 * Scrollen nicht durch das Ende des Header-Containers begrenzt wird.
 */

.mes-subnav {
    position: sticky;
    top: 0;
    z-index: 55;

    box-shadow:
        0 4px 12px rgba(31, 42, 30, 0.055);
}

.mes-subnav-inner {
    padding-top: 5px;
    padding-bottom: 5px;
}


/* --------------------------------------------------------------------------
   Systemweite Dichte für Verwaltungsoberflächen
   -------------------------------------------------------------------------- */

.mes-app-page .mes-main {
    padding-top: 20px;
}

.mes-app-page .mes-page-heading {
    margin-bottom: 18px;
}

.mes-app-page .mes-page-intro {
    margin-top: 7px;
}

.mes-app-page .mes-form {
    gap: 14px;
}

.mes-app-page .mes-form-grid {
    gap: 12px;
}

.mes-app-page .mes-field {
    gap: 5px;
}

.mes-app-page .mes-field input,
.mes-app-page .mes-field select,
.mes-app-page .mes-field textarea {
    min-height: 44px;

    padding: 9px 11px;
}

.mes-app-page .mes-field textarea {
    min-height: 96px;
}

.mes-app-page .mes-button {
    min-height: 44px;
}

.mes-app-page .mes-card:not(.mes-collapsible-section):not(.mes-settings-catalog) {
    padding: 15px;
}

.mes-app-page .mes-card-heading {
    gap: 12px;

    margin-bottom: 12px;
}

.mes-app-page .mes-form-section-summary {
    gap: 10px;

    padding:
        14px
        54px
        14px
        16px;
}

.mes-app-page .mes-form-section-summary::after {
    right: 16px;
}

.mes-app-page .mes-collapsible-content {
    padding: 14px 16px;
}

.mes-app-page .mes-form-section-heading p {
    margin-top: 2px;
}

.mes-app-page .mes-checkbox-panel {
    padding: 8px 10px;
}

.mes-app-page .mes-info-box {
    margin-top: 12px;

    padding: 9px 11px;
}

.mes-app-page .mes-form-actions {
    padding:
        8px
        0
        max(8px, env(safe-area-inset-bottom));
}

.mes-app-page .mes-detail-actions {
    padding:
        8px
        0
        max(8px, env(safe-area-inset-bottom));
}


/* --------------------------------------------------------------------------
   Organisationsfunktionen
   WICHTIG: Checkboxen dürfen nicht die globale Input-Höhe erben.
   -------------------------------------------------------------------------- */

.mes-function-fieldset > legend {
    margin-bottom: 6px;
}

.mes-function-fieldset .mes-option-chip-grid {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 6px;
}

.mes-function-fieldset .mes-option-chip {
    display: inline-flex;
    align-items: center;

    width: auto;
    min-height: 44px;

    gap: 7px;

    padding: 6px 10px;

    border-radius: 9px;
}

.mes-function-fieldset .mes-option-chip input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;

    flex: 0 0 18px;

    margin: 0;
    padding: 0;
}

.mes-function-fieldset .mes-field-help {
    margin-top: 4px;
}


/* --------------------------------------------------------------------------
   Einstellungen → Adressen & Kontakte
   Meta-Pflege deutlich kompakter.
   -------------------------------------------------------------------------- */

.mes-settings-page .mes-settings-meta-intro {
    margin-bottom: 12px;
}

.mes-settings-page .mes-settings-meta-note {
    margin-top: 6px;
}

.mes-settings-page .mes-settings-catalogs {
    gap: 10px;
}

.mes-settings-page .mes-meta-list {
    gap: 6px;
}

.mes-settings-page .mes-meta-row {
    gap: 8px;

    padding: 8px 10px;

    border-radius: 10px;
}

.mes-settings-page .mes-meta-row-new {
    margin-top: 2px;
}

.mes-settings-page .mes-meta-label-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 10px;
}

.mes-settings-page .mes-meta-code {
    flex: 0 1 auto;

    margin: 0;

    font-size: 10.07px;
    line-height: 1.2;

    white-space: nowrap;

    color: var(--mes-text-secondary);
}

.mes-settings-page .mes-meta-active .mes-checkbox-panel,
.mes-settings-page .mes-meta-save .mes-button {
    min-height: 44px;
}

.mes-settings-page .mes-meta-help {
    margin-top: 10px;
}


/* Kleinere Displays: kompakt, aber keine Fummel-Bedienung */

@media (max-width: 619px) {

    .mes-app-page .mes-main {
        padding-top: 18px;
    }

    .mes-app-page .mes-form-section-summary {
        padding:
            12px
            50px
            12px
            14px;
    }

    .mes-app-page .mes-collapsible-content {
        padding: 12px 14px;
    }

    .mes-settings-page .mes-meta-label-head {
        align-items: flex-start;
    }

}


/* Tablet/Desktop: noch etwas dichter, Touch-Ziele bleiben 44px. */

@media (min-width: 860px) {

    .mes-app-page .mes-main {
        padding-top: 22px;
    }

    .mes-app-page .mes-form-section-summary {
        padding:
            14px
            56px
            14px
            18px;
    }

    .mes-app-page .mes-form-section-summary::after {
        right: 18px;
    }

    .mes-app-page .mes-collapsible-content {
        padding: 16px 18px;
    }

    .mes-settings-page .mes-meta-row {
        padding: 8px 10px;
    }

}


/* ==========================================================================
   MES v0.0.2-17 – DEV Update-Paket
   ========================================================================== */

.mes-dev-update-panel {
    margin-bottom: 18px;
}

.mes-dev-card-updater {
    display: grid;

    gap: 16px;

    padding: 18px;

    border-color: #6f7b6f;

    background:
        linear-gradient(
            135deg,
            rgba(75, 93, 75, 0.72),
            rgba(54, 61, 68, 0.96)
        );
}

.mes-dev-update-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}

.mes-dev-update-head h2 {
    margin-bottom: 6px;
}

.mes-dev-update-head p {
    max-width: 760px;
}

.mes-dev-update-safe-badge {
    display: none;

    flex: 0 0 auto;

    padding: 5px 9px;

    border: 1px solid rgba(206, 255, 192, 0.40);
    border-radius: 999px;

    font-size: 9.54px;
    font-weight: 760;

    letter-spacing: 0.08em;

    color: #e3ffda;

    background: rgba(206, 255, 192, 0.08);
}

.mes-dev-update-form {
    display: grid;
    grid-template-columns: 1fr;

    gap: 12px;
}

.mes-dev-upload-field {
    display: grid;

    gap: 6px;
}

.mes-dev-upload-field label {
    font-size: 11.66px;
    font-weight: 720;

    color: #ffffff;
}

.mes-dev-upload-field input[type="file"] {
    width: 100%;
    min-height: 44px;

    padding: 7px 9px;

    border: 1px solid var(--mes-dev-border);
    border-radius: 9px;

    font: inherit;
    font-size: 11.66px;

    color: var(--mes-dev-text);

    background: rgba(23, 27, 30, 0.50);
}

.mes-dev-upload-field input[type="file"]::file-selector-button {
    min-height: 32px;

    margin-right: 9px;
    padding: 5px 9px;

    border: 1px solid #768078;
    border-radius: 7px;

    font: inherit;
    font-weight: 680;

    color: #ffffff;

    background: #4d5850;

    cursor: pointer;
}

.mes-dev-update-options {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.mes-dev-update-option {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 44px;

    padding: 8px 10px;

    border: 1px solid var(--mes-dev-border);
    border-radius: 9px;

    background: rgba(23, 27, 30, 0.32);

    cursor: pointer;
}

.mes-dev-update-option input {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin: 0;

    accent-color: #8ee0a4;
}

.mes-dev-update-option span {
    display: grid;

    gap: 1px;
}

.mes-dev-update-option strong {
    font-size: 11.66px;
}

.mes-dev-update-option small {
    font-size: 9.54px;

    color: var(--mes-dev-text-soft);
}

.mes-dev-button-update {
    width: 100%;

    border-color: #8eb398;

    background: #4e6a55;
}

.mes-dev-button-update:hover {
    border-color: #afd0b6;

    background: #5a7962;
}

.mes-dev-update-note {
    margin-top: -3px;
}


@media (min-width: 760px) {

    .mes-dev-update-safe-badge {
        display: inline-flex;
    }

    .mes-dev-update-form {
        grid-template-columns:
            minmax(260px, 1fr)
            minmax(280px, 0.75fr)
            auto;

        align-items: end;
    }

    .mes-dev-button-update {
        width: auto;
        min-width: 170px;
    }

}


@media (max-width: 480px) {

    .mes-dev-update-options {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================================
   MES v0.0.3-01 – Event Foundation
   ========================================================================== */

.mes-events-page .mes-page-heading {
    margin-bottom: 16px;
}

.mes-subnav-events .is-disabled {
    opacity: 0.52;

    cursor: default;
}

.mes-event-list {
    overflow: hidden;

    border: 1px solid var(--mes-border);
    border-radius: 13px;

    background: var(--mes-white);
}

.mes-event-list-head {
    display: none;
}

.mes-event-row {
    display: grid;
    grid-template-columns: 1fr;

    gap: 8px;

    padding: 12px 14px;

    border-bottom: 1px solid var(--mes-border);
}

.mes-event-row:last-child {
    border-bottom: 0;
}

.mes-event-main,
.mes-event-time,
.mes-event-location {
    display: grid;

    gap: 2px;

    min-width: 0;
}

.mes-event-main > strong,
.mes-event-location > strong,
.mes-event-time > strong {
    font-size: 13.78px;
}

.mes-event-main small,
.mes-event-time span,
.mes-event-location span {
    font-size: 11.66px;

    color: var(--mes-text-secondary);
}

.mes-event-title-link {
    color: inherit;

    text-decoration: none;
}

.mes-event-title-link:hover {
    text-decoration: underline;

    text-underline-offset: 3px;
}

.mes-event-segment-count {
    width: fit-content;

    margin-top: 3px;
    padding: 2px 6px;

    border-radius: 999px;

    font-size: 9.54px;
    font-weight: 700;

    color: #315943;

    background: rgba(111, 223, 180, 0.18);
}

.mes-event-status {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    min-height: 25px;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 10.6px;
    font-weight: 720;
}

.mes-event-status-draft {
    background: var(--mes-soft-green);
}

.mes-event-status-planned {
    background: var(--mes-events-sub);
}

.mes-event-status-active {
    background: var(--mes-confirm);
}

.mes-event-status-completed {
    background: var(--mes-reserve);
}

.mes-event-status-cancelled {
    background: var(--mes-danger);
}

.mes-event-time-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.mes-event-subsection-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;

    margin-top: 16px;
    margin-bottom: 8px;
}

.mes-event-subsection-head h3 {
    margin: 0;

    font-size: 15.9px;
}

.mes-event-subsection-head p {
    max-width: 760px;

    margin: 3px 0 0;

    font-size: 10.6px;

    color: var(--mes-text-secondary);
}

.mes-event-segment-list {
    display: grid;

    gap: 8px;
}

.mes-event-segment-row {
    padding: 10px;

    border: 1px solid var(--mes-border);
    border-radius: 10px;

    background: rgba(111, 223, 180, 0.055);
}

.mes-event-segment-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;
}

.mes-event-segment-row-head > strong {
    font-size: 11.66px;
}

.mes-event-segment-time {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 8px;
}

.mes-event-segment-public {
    grid-column: 1 / -1;

    min-height: 44px;
}

.mes-event-map-editor {
    margin-top: 14px;
}

.mes-event-map-toolbar {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 7px;
}

.mes-event-map-toolbar .is-active {
    border-color: #3f7f66;

    background: var(--mes-events-sub);
}

.mes-event-map {
    width: 100%;
    min-height: 320px;

    overflow: hidden;

    border: 1px solid var(--mes-border);
    border-radius: 11px;

    background: var(--mes-soft-green);
}

.mes-event-map-readonly {
    margin-top: 12px;
}

.mes-event-map-meta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 8px;
}

.mes-event-segment-summary-list {
    display: grid;

    gap: 6px;
}

.mes-event-segment-summary {
    display: grid;

    gap: 4px;

    padding: 9px 10px;

    border: 1px solid var(--mes-border);
    border-radius: 9px;

    background: rgba(111, 223, 180, 0.055);
}

.mes-event-segment-summary > div:first-child {
    display: grid;

    gap: 1px;
}

.mes-event-segment-summary strong {
    font-size: 12.72px;
}

.mes-event-segment-summary span,
.mes-event-segment-summary-time,
.mes-event-segment-summary small {
    font-size: 10.6px;

    color: var(--mes-text-secondary);
}

.mes-event-map-empty {
    margin-top: 10px;
}


@media (min-width: 700px) {

    .mes-event-time-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .mes-event-segment-time {
        grid-template-columns:
            repeat(4, minmax(0, 1fr))
            auto;

        align-items: end;
    }

    .mes-event-segment-public {
        grid-column: auto;

        min-width: 120px;
    }

    .mes-event-segment-summary {
        grid-template-columns:
            minmax(180px, 1fr)
            minmax(220px, 0.8fr)
            auto;

        align-items: center;
    }

}


@media (min-width: 900px) {

    .mes-event-list-head,
    .mes-event-row {
        display: grid;
        grid-template-columns:
            minmax(240px, 1.6fr)
            minmax(170px, 0.9fr)
            minmax(180px, 0.9fr)
            110px;

        gap: 14px;

        align-items: center;
    }

    .mes-event-list-head {
        padding: 9px 14px;

        font-size: 9.54px;
        font-weight: 760;

        letter-spacing: 0.08em;
        text-transform: uppercase;

        color: var(--mes-text-secondary);

        background: var(--mes-soft-green);
    }

    .mes-event-row {
        padding: 11px 14px;
    }

}


/* ==========================================================================
   MES v0.0.3-02 – Eventflächen: Öffentlich | Offiziell
   ========================================================================== */

.mes-event-area-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 8px;
}

.mes-event-area-switch {
    display: inline-grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    padding: 3px;

    border: 1px solid var(--mes-border);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.68);
}

.mes-event-area-switch-button {
    min-height: 38px;

    padding: 6px 12px;

    border: 1px solid transparent;
    border-radius: 8px;

    font: inherit;
    font-size: 11.66px;
    font-weight: 720;

    color: var(--mes-text-secondary);

    background: transparent;

    cursor: pointer;
}

.mes-event-area-switch-button[data-event-area-mode-button="public"].is-active {
    border-color: rgba(63, 143, 99, 0.34);

    color: #315c40;

    background: rgba(223, 243, 231, 0.94);
}

.mes-event-area-switch-button[data-event-area-mode-button="official"].is-active {
    border-color: rgba(201, 79, 79, 0.34);

    color: #7d3434;

    background: rgba(253, 228, 228, 0.96);
}

.mes-event-area-mode-label {
    font-size: 10.6px;
    font-weight: 680;

    color: var(--mes-text-secondary);
}


/*
 * Ein Werkzeugset, zwei Modi.
 * Die Buttons werden kontextuell eingefärbt; es gibt keine
 * doppelte Werkzeugleiste.
 */

.mes-event-map-editor[data-event-area-mode="public"]
.mes-event-map-toolbar
.mes-button {
    border-color: rgba(63, 143, 99, 0.25);

    background: rgba(223, 243, 231, 0.62);
}

.mes-event-map-editor[data-event-area-mode="public"]
.mes-event-map-toolbar
.mes-button:hover,
.mes-event-map-editor[data-event-area-mode="public"]
.mes-event-map-toolbar
.mes-button.is-active {
    border-color: rgba(63, 143, 99, 0.46);

    background: rgba(206, 255, 192, 0.72);
}

.mes-event-map-editor[data-event-area-mode="official"]
.mes-event-map-toolbar
.mes-button {
    border-color: rgba(201, 79, 79, 0.24);

    background: rgba(253, 228, 228, 0.68);
}

.mes-event-map-editor[data-event-area-mode="official"]
.mes-event-map-toolbar
.mes-button:hover,
.mes-event-map-editor[data-event-area-mode="official"]
.mes-event-map-toolbar
.mes-button.is-active {
    border-color: rgba(201, 79, 79, 0.46);

    background: rgba(255, 193, 173, 0.58);
}

.mes-event-official-area-panel {
    margin-top: 9px;

    padding: 10px 11px;

    border: 1px solid rgba(201, 79, 79, 0.18);
    border-radius: 10px;

    background: rgba(253, 228, 228, 0.36);
}

.mes-event-official-area-panel[hidden] {
    display: none;
}

.mes-event-area-legend {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 8px;
}

.mes-event-area-legend-item {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    min-height: 36px;

    padding: 5px 10px;

    border: 1px solid var(--mes-border);
    border-radius: 999px;

    font: inherit;
    font-size: 10.6px;
    font-weight: 680;

    color: var(--mes-text-secondary);

    background: rgba(255, 255, 255, 0.82);

    cursor: pointer;

    transition:
        opacity 140ms ease,
        background 140ms ease,
        border-color 140ms ease;
}

.mes-event-area-legend-item:hover {
    background: #ffffff;
}

.mes-event-area-legend-item.is-off {
    border-color: rgba(119, 128, 111, 0.28);

    color: #8b9187;

    background: #e7e9e4;

    opacity: 0.72;
}

.mes-event-area-legend-item.is-off > span {
    border-color: #9da39a !important;

    background: #cfd3cc !important;
}

.mes-event-area-legend-item > span {
    width: 10px;
    height: 10px;

    border-radius: 3px;
}

.mes-event-area-legend-item.is-public > span {
    border: 2px solid #3f8f63;

    background: rgba(146, 216, 173, 0.45);
}

.mes-event-area-legend-item.is-official > span {
    border: 2px solid #c94f4f;

    background: rgba(237, 139, 139, 0.38);
}

.mes-event-official-comment {
    margin-top: 9px;
}

.mes-event-official-comment > strong {
    display: block;

    margin-bottom: 4px;

    font-size: 10.6px;
    font-weight: 740;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mes-event-official-comment > p {
    margin: 0;
}


@media (max-width: 520px) {

    .mes-event-area-switch {
        width: 100%;
    }

    .mes-event-area-mode-label {
        width: 100%;
    }

}


/* ==========================================================================
   MES v0.0.3-04 – Read-only Eventdetails als Accordion
   ========================================================================== */

.mes-event-detail-section.mes-collapsible-section {
    padding: 0;

    overflow: hidden;
}

.mes-event-detail-section > .mes-form-section-summary {
    padding:
        13px
        54px
        13px
        14px;
}

.mes-event-detail-section > .mes-form-section-summary
.mes-form-section-heading {
    margin: 0;
}

.mes-event-detail-section > .mes-form-section-summary
.mes-form-section-title {
    display: block;

    min-width: 0;
}

.mes-event-detail-section > .mes-form-section-summary h2 {
    margin: 0;

    font-size: 20.14px;
    line-height: 1.2;
}

.mes-event-detail-section > .mes-form-section-summary p {
    margin: 3px 0 0;

    font-size: 12.72px;
}

.mes-event-detail-section > .mes-collapsible-content {
    padding: 14px;
}

.mes-event-detail-section[open]
> .mes-form-section-summary {
    background: rgba(111, 223, 180, 0.075);
}

.mes-event-detail-section > .mes-form-section-summary:hover {
    background: rgba(111, 223, 180, 0.105);
}


@media (min-width: 860px) {

    .mes-event-detail-section > .mes-form-section-summary {
        padding:
            15px
            58px
            15px
            18px;
    }

    .mes-event-detail-section > .mes-collapsible-content {
        padding: 16px 18px;
    }

}

/* ========================================================================== 
   MES v0.0.4-01 – Adressen / Mitgliedschaft / Import
   ========================================================================== */

.mes-page-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mes-search-form-with-filter {
    grid-template-columns: minmax(0, 1fr);
}

.mes-search-filter select {
    width: 100%;
    min-height: 44px;
}

.mes-membership-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10.6px;
    font-weight: 720;
    white-space: nowrap;
}

.mes-membership-badge.is-active {
    background: rgba(206, 255, 192, 0.62);
    color: #294d2d;
}

.mes-membership-badge.is-resigned {
    background: rgba(220, 224, 217, 0.85);
    color: #687066;
}

.mes-list-edit-link {
    display: block;
    margin-top: 4px;
    font-size: 10.6px;
}

.mes-fieldset-clean {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.mes-fieldset-clean > legend {
    margin-bottom: 8px;
    font-size: 11.66px;
    font-weight: 760;
}

.mes-import-start-card,
.mes-import-recent,
.mes-import-source-card,
.mes-import-target-card,
.mes-import-preview-card {
    padding: 16px;
}

.mes-import-start-form {
    display: grid;
    gap: 14px;
}

.mes-import-profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.mes-import-profile-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid var(--mes-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.76);
    cursor: pointer;
}

.mes-import-profile-option input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
}

.mes-import-profile-option span {
    display: grid;
    gap: 1px;
}

.mes-import-profile-option strong {
    font-size: 14.84px;
}

.mes-import-profile-option small {
    font-size: 12.72px;
    color: var(--mes-text-secondary);
}

.mes-import-profile-option.is-disabled {
    opacity: 0.48;
    cursor: default;
}

.mes-import-profile-placeholder {
    display: inline-flex !important;
    width: 18px;
    flex: 0 0 18px;
    font-size: 19.08px;
}

.mes-import-batch-list {
    display: grid;
    gap: 6px;
}

.mes-import-batch-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid var(--mes-border);
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
}

.mes-import-batch-row span {
    font-size: 12.72px;
    color: var(--mes-text-secondary);
}

.mes-import-mapping-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

.mes-import-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.mes-import-section-head h2 {
    margin: 0;
    font-size: 19.08px;
}

.mes-import-section-head p {
    margin: 3px 0 0;
    font-size: 12.72px;
    color: var(--mes-text-secondary);
}

.mes-import-count {
    flex: 0 0 auto;
    font-size: 12.72px;
    font-weight: 700;
    color: var(--mes-text-secondary);
}

.mes-import-source-list,
.mes-import-target-list,
.mes-import-preview-list {
    display: grid;
    gap: 6px;
}

.mes-import-source-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 8px 9px;
    border: 1px solid var(--mes-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.75);
}

.mes-import-source-row.is-dragging {
    opacity: 0.45;
}

.mes-import-source-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mes-import-source-copy strong {
    font-size: 13.78px;
}

.mes-import-source-copy small {
    overflow: hidden;
    font-size: 11.66px;
    color: var(--mes-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mes-import-map-select select {
    min-height: 44px !important;
    font-size: 12.72px;
}

.mes-import-target-card {
    max-height: 70vh;
    overflow: auto;
}

.mes-import-target {
    padding: 7px 9px;
    border: 1px dashed rgba(46, 79, 53, 0.22);
    border-radius: 8px;
    background: rgba(238, 241, 232, 0.52);
}

.mes-import-target strong,
.mes-import-target small {
    display: block;
}

.mes-import-target strong {
    font-size: 12.72px;
}

.mes-import-target small {
    margin-top: 2px;
    font-size: 10.6px;
    color: var(--mes-text-secondary);
}

.mes-import-target.is-used {
    border-style: solid;
    background: rgba(206, 255, 192, 0.30);
}

.mes-import-target.is-drag-over {
    border-color: var(--mes-primary);
    background: rgba(206, 255, 192, 0.65);
}

.mes-import-preview-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.mes-import-preview-stats article {
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--mes-border);
    border-radius: 9px;
    background: #fff;
}

.mes-import-preview-stats strong {
    font-size: 21.2px;
}

.mes-import-preview-stats span {
    font-size: 11.66px;
    color: var(--mes-text-secondary);
}

.mes-import-preview-stats .is-ok { background: rgba(206, 255, 192, 0.30); }
.mes-import-preview-stats .is-warning { background: rgba(255, 243, 200, 0.62); }
.mes-import-preview-stats .is-error { background: rgba(255, 141, 145, 0.18); }

.mes-import-preview-row {
    border: 1px solid var(--mes-border);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.mes-import-preview-row > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 5px 8px;
    min-height: 44px;
    padding: 7px 10px;
    cursor: pointer;
    list-style: none;
}

.mes-import-preview-row > summary::-webkit-details-marker { display: none; }
.mes-import-preview-row > summary > span:not(.mes-import-quality-dot) { font-size: 11.66px; color: var(--mes-text-secondary); }

.mes-import-quality-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #7c8777;
}

.mes-import-preview-row.is-ok .mes-import-quality-dot { background: #56a86a; }
.mes-import-preview-row.is-warning .mes-import-quality-dot { background: #c79a31; }
.mes-import-preview-row.is-error .mes-import-quality-dot { background: #c55559; }

.mes-import-duplicate {
    justify-self: start;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef0ec;
}

.mes-import-duplicate.is-existing { background: rgba(212, 209, 255, 0.62); }
.mes-import-duplicate.is-unclear { background: rgba(255, 243, 200, 0.75); }

.mes-import-preview-detail {
    padding: 10px 12px 13px 27px;
    border-top: 1px solid var(--mes-border);
    font-size: 12.72px;
}

.mes-import-preview-detail p { margin: 0 0 6px; }

.mes-import-issue-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mes-import-issue-list li {
    display: grid;
    gap: 1px;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(255, 243, 200, 0.55);
}

.mes-import-issue-list li.is-error { background: rgba(255, 141, 145, 0.18); }
.mes-import-ok-text { color: #3c7048; }
.mes-import-real-disabled { margin-top: 12px; }

@media (min-width: 680px) {
    .mes-search-form-with-filter {
        grid-template-columns: minmax(220px, 1fr) minmax(180px, auto) auto auto;
        align-items: center;
    }

    .mes-import-profile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mes-import-batch-row {
        grid-template-columns: minmax(220px, 1.5fr) minmax(130px, 0.8fr) minmax(130px, 0.8fr) auto;
        align-items: center;
    }

    .mes-import-source-row {
        grid-template-columns: minmax(180px, 1fr) minmax(210px, 0.95fr);
        align-items: center;
    }

    .mes-import-preview-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mes-import-preview-row > summary {
        grid-template-columns: auto minmax(240px, 1.6fr) minmax(110px, 0.7fr) auto;
    }
}

@media (min-width: 980px) {
    .mes-import-mapping-layout {
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
    }

    .mes-import-target-card {
        position: sticky;
        top: 64px;
    }

    .mes-import-preview-stats {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}


.mes-import-template-link {
    margin: 10px 0 0;
}

.mes-import-template-link .mes-button {
    width: auto;
}


.mes-import-real-message {
    margin-top: 14px;
    font-size: 13.78px;
    line-height: 1.45;
}

.mes-import-real-message strong {
    font-size: 13.78px;
}

.mes-import-result-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mes-import-result-card {
    margin-top: 14px;
    padding: 16px;
}

.mes-import-result-list {
    display: grid;
    gap: 7px;
}

.mes-import-result-row {
    display: grid;
    gap: 3px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--mes-border);
    border-radius: 9px;
    background: rgba(206, 255, 192, 0.20);
    color: inherit;
    text-decoration: none;
}

.mes-import-result-row strong {
    font-size: 13.78px;
}

.mes-import-result-row span {
    font-size: 12.72px;
    color: var(--mes-text-secondary);
}

.mes-import-result-row.is-skipped {
    background: rgba(255, 243, 200, 0.42);
}

.mes-import-result-notes {
    margin: 8px 0 0 18px;
}


/* ==========================================================================
   MES v0.0.4-06 – Mitgliederliste / Adressformular UX
   ========================================================================== */

.mes-member-list-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
}

.mes-member-list-mode {
    font-size: 12.72px;
    font-weight: 650;
    color: var(--mes-text-secondary);
}

.mes-member-page-size select {
    min-width: 140px;
}

.mes-pagination-rich {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "prev pages next"
        ". summary .";
    align-items: center;
    gap: 8px 12px;
    font-size: 13.78px;
}

.mes-pagination-edge:first-child {
    grid-area: prev;
}

.mes-pagination-edge-next {
    grid-area: next;
    justify-self: end;
}

.mes-pagination-pages {
    grid-area: pages;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.mes-pagination-summary {
    grid-area: summary;
    justify-self: center;
    font-size: 12.72px;
}

.mes-pagination-pages a,
.mes-pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 5px 8px;
    border: 1px solid var(--mes-border);
    border-radius: 8px;
    text-decoration: none;
    background: var(--mes-white);
    color: var(--mes-text);
}

.mes-pagination-current {
    border-color: rgba(108, 93, 172, 0.30);
    background: var(--mes-pastel-violet);
    font-weight: 760;
}

.mes-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 2px;
}

.mes-address-locality {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 620px) {
    .mes-search-form-with-filter {
        grid-template-columns:
            minmax(260px, 1fr)
            minmax(190px, auto)
            minmax(140px, auto)
            auto;
    }

    .mes-address-locality {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .mes-address-postal,
    .mes-address-city {
        grid-column: auto;
        max-width: none;
    }
}

@media (max-width: 619px) {
    .mes-pagination-rich {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "prev next"
            "pages pages"
            "summary summary";
    }

    .mes-pagination-pages {
        margin-top: 2px;
    }

    .mes-pagination-edge,
    .mes-pagination-edge a,
    .mes-pagination-edge span {
        width: 100%;
    }

    .mes-pagination-edge a,
    .mes-pagination-edge span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
}


/* ==========================================================================
   MES v0.0.4-07 – Konsistente Listensteuerung
   ========================================================================== */

/*
 * Listenprinzip:
 * - oben: ausschließlich Suche + fachliche Filter, sticky unter der Subnav
 * - unten: kompakte, dauerhaft sichtbare Seitengröße + Zurück/Weiter
 *
 * Die Höhe der mehrzeiligen mobilen Subnav wird per JS gemessen.
 */
.mes-list-filter-sticky {
    position: sticky;
    top: var(--mes-subnav-sticky-height, 52px);
    z-index: 48;

    margin-bottom: 14px;

    background: rgba(247, 248, 244, 0.97);

    box-shadow:
        0 8px 16px rgba(31, 42, 30, 0.055);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mes-card.mes-list-filter-sticky {
    padding: 10px 12px;
}

.mes-search-panel.mes-list-filter-sticky {
    padding: 10px 12px;

    border: 1px solid var(--mes-border);
    border-radius: var(--mes-radius);
}

/* Oben bleibt nur Search + fachlicher Filter; kein Zeilen-Pulldown. */
@media (min-width: 620px) {
    .mes-list-filter-form.mes-search-form-with-filter {
        grid-template-columns:
            minmax(280px, 1fr)
            minmax(190px, auto)
            auto;
    }
}

/*
 * Persistente Joomla-artige Bottom-Bar.
 * Die max. Breite folgt dem MES-Content und liegt nicht über dem gesamten
 * Desktop-Fenster.
 */
.mes-list-bottom-controls {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 52;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    gap: 10px 16px;

    width: min(
        calc(100% - 20px),
        var(--mes-content-width)
    );

    padding:
        9px
        12px
        max(9px, env(safe-area-inset-bottom));

    border: 1px solid rgba(31, 42, 30, 0.13);
    border-bottom: 0;
    border-radius: 13px 13px 0 0;

    background: rgba(247, 248, 244, 0.97);

    box-shadow:
        0 -8px 22px rgba(31, 42, 30, 0.09);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transform: translateX(-50%);
}

.mes-list-page .mes-main {
    padding-bottom:
        max(112px, calc(86px + env(safe-area-inset-bottom)));
}

.mes-list-page-size {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mes-list-page-size-label {
    font-size: 12.72px;
    font-weight: 700;
    color: var(--mes-text-secondary);
}

.mes-list-page-size select {
    width: 82px;
    min-height: 42px;

    padding: 7px 30px 7px 10px;

    border: 1px solid var(--mes-border-strong);
    border-radius: 9px;

    font-size: 15.9px;
    font-weight: 650;

    color: var(--mes-text);
    background: var(--mes-white);
}

.mes-list-page-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 3px 10px;

    min-width: 0;

    font-size: 12.72px;
    color: var(--mes-text-secondary);
}

.mes-list-range {
    font-weight: 700;
    color: var(--mes-text);
}

.mes-list-page-arrows {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.mes-list-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 7px 11px;

    border: 1px solid var(--mes-border);
    border-radius: 9px;

    font-size: 13.78px;
    font-weight: 700;

    text-decoration: none;

    color: var(--mes-text);
    background: var(--mes-white);
}

.mes-list-page-button.is-disabled {
    opacity: 0.42;
}

/*
 * Die alte v0.0.4-06 Seitennummern-Navigation wird nicht mehr ausgegeben.
 * Die CSS-Regeln dürfen aus Rückwärtskompatibilität im Stylesheet bleiben.
 */
.mes-member-page-size {
    display: none;
}

@media (max-width: 619px) {
    .mes-list-bottom-controls {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "size arrows"
            "summary summary";

        gap: 7px 10px;

        width: calc(100% - 10px);

        padding-left: 9px;
        padding-right: 9px;
    }

    .mes-list-page-size {
        grid-area: size;
    }

    .mes-list-page-summary {
        grid-area: summary;
    }

    .mes-list-page-arrows {
        grid-area: arrows;
    }

    .mes-list-page-button {
        min-width: 44px;
        min-height: 44px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .mes-list-page-number {
        display: none;
    }

    .mes-list-page-size-label {
        display: none;
    }
}

@media (max-width: 390px) {
    .mes-list-page-button {
        font-size: 0;
    }

    .mes-list-page-button::first-letter {
        font-size: 0;
    }

    .mes-list-page-arrows a:first-child::after,
    .mes-list-page-arrows span:first-child::after {
        content: "←";
        font-size: 19.08px;
    }

    .mes-list-page-arrows a:last-child::after,
    .mes-list-page-arrows span:last-child::after {
        content: "→";
        font-size: 19.08px;
    }
}


/* ==========================================================================
   MES v0.0.4-10 – Organisationsliste: Rollen-/Verwendungszeile
   ========================================================================== */

.mes-org-role-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;

    min-height: 26px;
    margin-top: 5px;
}

.mes-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 25px;
    padding: 3px 9px;

    border-radius: 999px;

    font-size: 11.66px;
    font-weight: 720;
    line-height: 1.15;

    white-space: nowrap;
}

.mes-role-badge.is-member {
    background: rgba(206, 255, 192, 0.62);
    color: #294d2d;
}

.mes-role-badge.is-resigned {
    background: rgba(220, 224, 217, 0.85);
    color: #687066;
}

/*
 * Der Firmenzusatz bleibt Stammdatum, wird in der Listenansicht aber
 * bewusst nicht mehr als zweite Zeile verwendet. Diese Zeile gehört
 * künftig ausschließlich Rollen/Verwendungen.
 */


/* ==========================================================================
   MES v0.0.4-11 – Konsistente Listenzeilen Adressen / Verein
   ========================================================================== */

/*
 * Zeile 1 ist die eigentliche Listeninformation:
 * Name | Adresse | Kontakt | ...
 * Zeile 2 gehört Rollen, Stati und künftigen Metainformationen.
 */
.mes-list-row-two-line {
    align-items: start;
}

.mes-list-row-two-line > * {
    align-self: start;
}

.mes-list-row-two-line .mes-org-cell {
    padding-top: 0;
}

/*
 * Verein → Mitglieder:
 * Status steht nicht mehr in der Aktionsspalte, sondern in derselben
 * Meta-Zeile unter dem Namen wie Rollen in Adressen → Organisationen.
 */
.mes-member-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.mes-list-edit-button {
    min-height: 40px;
    padding: 7px 13px;

    font-size: 13.78px;
    font-weight: 700;

    white-space: nowrap;
}

/* Archivansicht: eindeutige Wiederherstellungsaktion mit ausgeschriebenem Text. */
.mes-organization-list .mes-list-restore-button {
    min-height: 40px;
    max-width: 100%;
    padding: 7px 5px;
    font-size: 12.72px;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
}

@media (max-width: 859px) {
    .mes-organization-list .mes-list-restore-button {
        min-height: 44px;
        padding: 8px 12px;
        font-size: 13.78px;
    }
}

/*
 * Auf Desktop stehen Name und Adresse obenbündig.
 * Die Grundstruktur bleibt absichtlich dieselbe wie in der Organisationsliste.
 */
@media (min-width: 860px) {
    .mes-list-row-two-line {
        align-items: start;
    }

    .mes-list-row-two-line .mes-org-main,
    .mes-list-row-two-line .mes-org-cell {
        padding-top: 0;
    }
}

@media (max-width: 859px) {
    .mes-member-actions {
        justify-content: flex-start;
    }

    .mes-list-edit-button {
        min-height: 44px;
    }
}


/* ==========================================================================
   MES v0.0.5-01 – ACL / Benutzer / operative Eventinfos
   ========================================================================== */

.mes-shell-user-link {
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
}

.mes-shell-user-link:hover,
.mes-shell-user-link:focus-visible {
    background: rgba(255, 255, 255, 0.42);
    outline: none;
}

@media (max-width: 759px) {
    /*
     * Rechteabhängige Hauptnavigation nutzt die vorhandene Breite vollständig.
     * Ein externer Eventzugang bekommt z. B. Start | Events statt leerer Tabs.
     */
    .mes-area-nav-inner,
    .mes-area-nav-inner.has-dev {
        grid-template-columns:
            repeat(var(--mes-area-count, 5), minmax(0, 1fr));
    }
}

.mes-user-temporary-password {
    margin-bottom: 16px;
    border: 2px solid rgba(108, 93, 172, 0.28);
}

.mes-user-temporary-password code {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 10px 0;
    padding: 9px 12px;
    overflow-wrap: anywhere;
    border-radius: 8px;
    background: var(--mes-bg);
    font-size: 15.9px;
    font-weight: 750;
}

.mes-user-list-card {
    padding: 0;
    overflow: hidden;
}

.mes-user-list-head,
.mes-user-row {
    display: grid;
    grid-template-columns:
        minmax(190px, 1.45fr)
        minmax(190px, 1.35fr)
        110px
        135px
        110px;
    gap: 12px;
    align-items: center;
}

.mes-user-list-head {
    padding: 10px 14px;
    background: rgba(31, 42, 30, 0.045);
    font-size: 12.72px;
    font-weight: 750;
}

.mes-user-row {
    padding: 11px 14px;
    border-top: 1px solid var(--mes-border);
}

.mes-user-row:first-child {
    border-top: 0;
}

.mes-user-row > div:first-child {
    min-width: 0;
}

.mes-user-row strong,
.mes-user-row small {
    display: block;
}

.mes-user-row small {
    margin-top: 2px;
    color: var(--mes-text-soft);
    overflow-wrap: anywhere;
}

.mes-user-row-action {
    display: flex;
    justify-content: flex-end;
}

.mes-user-status-badge,
.mes-role-security-note {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.66px;
    font-weight: 720;
}

.mes-user-status-badge.is-active {
    background: rgba(206, 255, 192, 0.62);
    color: #294d2d;
}

.mes-user-status-badge.is-disabled {
    background: rgba(220, 224, 217, 0.85);
    color: #687066;
}

.mes-role-security-note {
    background: rgba(212, 209, 255, 0.72);
    color: #463c7b;
}

.mes-role-security-note.is-sensitive {
    background: rgba(255, 193, 173, 0.62);
    color: #713b2c;
}

.mes-settings-role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.mes-settings-role-card h2 {
    margin-bottom: 6px;
    font-size: 18.02px;
}

.mes-settings-role-card p {
    margin: 0 0 10px;
}

.mes-user-form,
.mes-account-security-form {
    display: grid;
    gap: 16px;
}

.mes-account-security-form {
    max-width: 720px;
}

.mes-event-ops-card {
    margin-bottom: 14px;
}

.mes-event-notice-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.mes-event-notice {
    padding: 10px 12px;
    border: 1px solid var(--mes-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.58);
}

.mes-event-notice.is-active {
    border-left: 4px solid var(--mes-violet);
}

.mes-event-notice.is-resolved {
    opacity: 0.72;
}

.mes-event-notice-head,
.mes-event-notice-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mes-event-notice-head {
    font-size: 12.72px;
}

.mes-event-notice-audience {
    font-weight: 760;
}

.mes-event-notice p {
    margin: 7px 0;
    white-space: pre-line;
}

.mes-event-notice-form,
.mes-event-access-form {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--mes-border);
}

.mes-event-notice-message textarea {
    min-height: 68px;
}

.mes-event-access-card {
    margin-bottom: 14px;
}

.mes-event-access-list {
    display: grid;
    gap: 7px;
    margin-bottom: 12px;
}

.mes-event-access-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--mes-border);
}

.mes-event-access-row:last-child {
    border-bottom: 0;
}

.mes-event-access-row strong,
.mes-event-access-row small {
    display: block;
}

.mes-event-access-row small {
    color: var(--mes-text-soft);
}

@media (max-width: 880px) {
    .mes-user-list-head {
        display: none;
    }

    .mes-user-row {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
    }

    .mes-user-row > div {
        grid-column: 1 / -1;
    }

    .mes-user-row > div[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 740;
        color: var(--mes-text-soft);
    }

    .mes-user-row-action {
        justify-content: flex-start;
    }

    .mes-settings-role-grid {
        grid-template-columns: 1fr;
    }

    .mes-event-notice-form,
    .mes-event-access-form {
        grid-template-columns: 1fr;
    }

    .mes-event-access-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .mes-event-notice-head,
    .mes-event-notice-foot {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================================
   MES v0.0.5-03 – Benutzer: Startpasswort neu erzeugen
   ========================================================================== */

.mes-user-password-reset-card {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
}

.mes-user-password-reset-card h2 {
    margin-bottom: 5px;
    font-size: 18.02px;
}

.mes-user-password-reset-card p {
    margin: 0;
    max-width: 760px;
}

@media (max-width: 700px) {
    .mes-user-password-reset-card {
        align-items: stretch;
        flex-direction: column;
    }

    .mes-user-password-reset-card .mes-button {
        width: 100%;
    }
}


/* ==========================================================================
   MES v0.0.5-04 – Dashboard Presence / Settings List UX
   ========================================================================== */

.mes-dashboard-presence {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 11px 14px;
}

.mes-dashboard-presence-heading {
    flex: 0 0 auto;
}

.mes-dashboard-presence-heading h2 {
    margin: 1px 0 0;
    font-size: 16.96px;
}

.mes-dashboard-presence-heading > small {
    display: block;
    margin-top: 2px;
    color: var(--mes-text-soft);
    font-size: 11.66px;
}

.mes-dashboard-presence-list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.mes-dashboard-presence-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 5px 9px;
    border: 1px solid var(--mes-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.55);
}

.mes-dashboard-presence-user strong,
.mes-dashboard-presence-user small {
    display: block;
    line-height: 1.2;
}

.mes-dashboard-presence-user strong {
    font-size: 12.72px;
}

.mes-dashboard-presence-user small {
    margin-top: 2px;
    color: var(--mes-text-soft);
    font-size: 10.6px;
}

.mes-settings-role-overview {
    margin-bottom: 12px;
    padding: 0;
    overflow: hidden;
}

.mes-settings-role-overview > summary {
    min-height: 42px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 720;
}

.mes-settings-role-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    padding: 0 14px 14px;
}

.mes-settings-role-overview-grid > div {
    padding-top: 8px;
    border-top: 1px solid var(--mes-border);
}

.mes-settings-role-overview-grid strong,
.mes-settings-role-overview-grid small {
    display: block;
}

.mes-settings-role-overview-grid small {
    margin-top: 2px;
    color: var(--mes-text-soft);
}

.mes-user-search-card {
    padding: 10px 12px;
}

.mes-user-search-form {
    display: grid;
    grid-template-columns:
        minmax(240px, 1fr)
        minmax(190px, 0.62fr)
        minmax(145px, 0.38fr)
        auto
        auto;
    gap: 9px;
    align-items: center;
}

.mes-user-list-head > a {
    color: inherit;
    text-decoration: none;
}

.mes-user-list-head > a:hover,
.mes-user-list-head > a:focus-visible,
.mes-user-list-head > a.is-sorted {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 900px) {
    .mes-user-search-form {
        grid-template-columns: 1fr 1fr;
    }

    .mes-user-search-form .mes-search-field {
        grid-column: 1 / -1;
    }

    .mes-user-search-form .mes-search-submit,
    .mes-user-search-form .mes-search-reset {
        width: 100%;
    }

    .mes-settings-role-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .mes-dashboard-presence {
        align-items: stretch;
        flex-direction: column;
    }

    .mes-dashboard-presence-list {
        justify-content: flex-start;
    }

    .mes-dashboard-presence-user {
        flex: 1 1 100%;
    }

    .mes-user-search-form {
        grid-template-columns: 1fr;
    }

    .mes-user-search-form .mes-search-field {
        grid-column: auto;
    }
}


/* ==========================================================================
   MES v0.0.5-05 – Benutzerfilter kompakt
   ========================================================================== */

/*
 * Die ältere globale Live-Search-Regel
 *   .mes-js .mes-search-form { grid-template-columns: ... }
 * ist absichtlich spezifischer überschrieben.
 *
 * Desktop:
 * [ Suche ................................ ] [ Rolle ] [ Status ] [ Reset ]
 */
@media (min-width: 901px) {
    .mes-js .mes-user-search-form {
        grid-template-columns:
            minmax(320px, 1fr)
            minmax(180px, 230px)
            minmax(145px, 180px)
            auto;
        align-items: center;
    }

    .mes-user-search-form .mes-search-field {
        grid-column: auto;
    }

    .mes-user-search-form .mes-search-filter {
        min-width: 0;
    }

    .mes-user-search-form .mes-search-filter select {
        width: 100%;
        min-width: 0;
    }

    .mes-user-search-form .mes-search-reset {
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
}

/*
 * Tablet:
 * Suche oben, beide Filter kompakt nebeneinander darunter.
 * Dadurch wird kein einzelnes Select künstlich bildschirmbreit.
 */
@media (min-width: 621px) and (max-width: 900px) {
    .mes-js .mes-user-search-form {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .mes-user-search-form .mes-search-field {
        grid-column: 1 / -1;
    }

    .mes-user-search-form .mes-search-filter {
        min-width: 0;
    }

    .mes-user-search-form .mes-search-filter select {
        width: 100%;
        min-width: 0;
    }

    .mes-user-search-form .mes-search-reset {
        grid-column: 1 / -1;
        width: fit-content;
    }
}

/*
 * Mobile:
 * Eine Spalte ist hier bewusst richtig – keine gequetschten Pulldowns,
 * mindestens volle Touchbreite.
 */
@media (max-width: 620px) {
    .mes-js .mes-user-search-form {
        grid-template-columns: 1fr;
    }

    .mes-user-search-form .mes-search-field,
    .mes-user-search-form .mes-search-filter,
    .mes-user-search-form .mes-search-reset {
        grid-column: auto;
        width: 100%;
    }
}


/* ==========================================================================
   MES v0.0.5-06 – Personeneingabe: Direkt / aus Adressen
   ========================================================================== */

.mes-person-mode {
    margin-bottom: 16px;
}

.mes-person-mode-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    width: min(100%, 620px);
    padding: 3px;
    border: 1px solid var(--mes-border);
    border-radius: 12px;
    background: rgba(31, 42, 30, 0.045);
}

.mes-person-mode-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 9px;
    cursor: pointer;
    color: var(--mes-text-soft);
    font-weight: 720;
    text-align: center;
}

.mes-person-mode-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mes-person-mode-option.is-active {
    background: #ffffff;
    color: var(--mes-text);
    box-shadow: 0 1px 4px rgba(31, 42, 30, 0.12);
}

.mes-person-mode-switch-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border: 2px solid currentColor;
    border-radius: 999px;
}

.mes-person-mode-option.is-active .mes-person-mode-switch-dot {
    background: currentColor;
}

.mes-person-mode-panel {
    max-width: 920px;
    margin-top: 12px;
    padding: 13px;
    border: 1px solid var(--mes-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.42);
}

.mes-person-mode-panel[hidden] {
    display: none;
}

.mes-person-mode-panel .mes-field + .mes-field {
    margin-top: 10px;
}

.mes-person-result-count {
    margin-top: 5px;
    color: var(--mes-text-soft);
    font-size: 11.66px;
    font-weight: 680;
}

@media (max-width: 620px) {
    .mes-person-mode-toggle {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .mes-person-mode-option {
        justify-content: flex-start;
        text-align: left;
    }

    .mes-person-mode-panel {
        padding: 11px;
    }
}


/* ==========================================================================
   MES v0.0.5-07 – Personenauswahl: visuelles Trefferfeedback
   ========================================================================== */

/*
 * Suche und Auswahl sollen sich wie normale MES-Formfelder anfühlen.
 * Browser-Sonderdarstellungen werden nicht komplett entfernt; wir gleichen
 * Höhe, Radius, Typografie und Innenabstände an die übrigen Controls an.
 */
.mes-person-picker-control {
    width: 100%;
    min-height: 48px;
    padding: 10px 13px;

    border: 1px solid var(--mes-border);
    border-radius: 10px;

    background: #ffffff;
    color: var(--mes-text);

    font: inherit;
    line-height: 1.3;

    transition:
        border-color 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease;
}

.mes-person-picker-control:focus {
    outline: none;
    border-color: var(--mes-violet);
    box-shadow: 0 0 0 3px rgba(108, 93, 172, 0.14);
}

/* Treffer vorhanden: ruhig, aber eindeutig sichtbar. */
.mes-person-picker-control.has-results {
    border-color: rgba(65, 132, 80, 0.52);
    background: rgba(223, 243, 231, 0.52);
}

/* Keine Treffer: keine Alarmfarbe, sondern dezentes Fehlersignal. */
.mes-person-picker-control.has-no-results {
    border-color: rgba(174, 78, 83, 0.50);
    background: rgba(255, 230, 231, 0.58);
}

.mes-person-picker-panel.has-results {
    border-color: rgba(65, 132, 80, 0.30);
}

.mes-person-picker-panel.has-no-results {
    border-color: rgba(174, 78, 83, 0.34);
}

.mes-person-picker-panel.has-results
    .mes-person-result-count {
    color: #355f3d;
}

.mes-person-picker-panel.has-no-results
    .mes-person-result-count {
    color: #8a4145;
}

@media (max-width: 620px) {
    .mes-person-picker-control {
        min-height: 46px;
    }
}


/* ==========================================================================
   MES v0.0.5-08 – Martins UX-Farbschlüssel
   ========================================================================== */

/*
 * Verbindliche MES-Semantik:
 *
 * GELB:
 * Benutzer muss etwas tun / eingeben / auswählen / drücken.
 *
 * RÖTLICH:
 * Eingabe fehlt, ist falsch oder Prüfung/Suche liefert kein gültiges Ergebnis.
 *
 * GRÜNLICH:
 * Zustand ist gültig, Treffer vorhanden oder Aktion kann fortgesetzt werden.
 */

/* Handlungsbedarf */
.mes-person-picker-control.is-action-needed {
    border-color: rgba(178, 165, 61, 0.62);
    background: rgba(255, 255, 178, 0.62);
}

.mes-person-picker-panel.is-action-needed {
    border-color: rgba(178, 165, 61, 0.36);
}

.mes-person-picker-panel.is-action-needed
    .mes-person-result-count {
    color: #756c24;
}

/* Negativer Zustand */
.mes-person-picker-control.has-no-results {
    border-color: rgba(174, 78, 83, 0.58);
    background: rgba(255, 225, 227, 0.68);
}

.mes-person-picker-panel.has-no-results {
    border-color: rgba(174, 78, 83, 0.42);
}

.mes-person-picker-panel.has-no-results
    .mes-person-result-count {
    color: #8a4145;
}

/* Positiver Zustand */
.mes-person-picker-control.has-results {
    border-color: rgba(65, 132, 80, 0.58);
    background: rgba(223, 243, 231, 0.68);
}

.mes-person-picker-panel.has-results {
    border-color: rgba(65, 132, 80, 0.38);
}

.mes-person-picker-panel.has-results
    .mes-person-result-count {
    color: #355f3d;
}

/*
 * Ein deaktiviertes Auswahlfeld im Start-/0-Treffer-Zustand soll trotzdem
 * die MES-Zustandsfarbe zeigen und nicht browsergrau alles überdecken.
 */
.mes-person-picker-control:disabled {
    opacity: 1;
    cursor: not-allowed;
    color: var(--mes-text);
}


/* ==========================================================================
   MES v0.0.5-09 – Login-E-Mail aus Adressstamm
   ========================================================================== */

.mes-user-email-source {
    display: block;
    margin-top: 5px;
    color: var(--mes-text-soft);
    font-size: 11.66px;
}


/* ==========================================================================
   MES v0.0.5-10 – Zugangs-E-Mail / kompakte Person-Verknüpfung
   ========================================================================== */

.mes-access-mail-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    padding: 11px 12px;
    border: 1px solid rgba(178, 165, 61, 0.42);
    border-radius: 10px;
    background: rgba(255, 255, 178, 0.45);
    cursor: pointer;
}

.mes-access-mail-option input {
    margin-top: 3px;
}

.mes-access-mail-option span,
.mes-access-mail-option small {
    display: block;
}

.mes-access-mail-option span {
    font-weight: 720;
}

.mes-access-mail-option small {
    margin-top: 3px;
    color: var(--mes-text-soft);
    font-weight: 400;
}

.mes-user-row-action {
    flex-wrap: wrap;
    gap: 6px;
}

.mes-list-access-button {
    min-height: 40px;
    padding: 7px 11px;
    font-size: 12.72px;
    white-space: nowrap;
}

.mes-user-person-relation {
    margin-bottom: 16px;
}

.mes-user-person-relation-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(65, 132, 80, 0.34);
    border-radius: 11px;
    background: rgba(223, 243, 231, 0.40);
}

.mes-user-person-relation-summary.is-unlinked {
    border-color: rgba(178, 165, 61, 0.40);
    background: rgba(255, 255, 178, 0.36);
}

.mes-user-person-relation-summary strong,
.mes-user-person-relation-summary small {
    display: block;
}

.mes-user-person-relation-summary small {
    margin-top: 2px;
    color: var(--mes-text-soft);
}

.mes-user-person-relation-editor {
    margin-top: 10px;
    padding: 11px;
    border: 1px solid var(--mes-border);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.45);
}

.mes-user-person-relation-editor[hidden] {
    display: none;
}

.mes-user-person-relation-editor .mes-field + .mes-field {
    margin-top: 10px;
}

@media (max-width: 650px) {
    .mes-user-person-relation-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .mes-user-person-relation-summary .mes-button {
        width: 100%;
    }
}


/* ==========================================================================
   MES v0.0.5-11 – Kontaktlisten + kompaktere Buttons
   ========================================================================== */

/*
 * Listenwerte müssen im Alltag schnell lesbar sein.
 * Adresse/Kontakt bewusst etwas größer und dunkler als bisher.
 */
.mes-org-row .mes-org-cell {
    font-size: 14.84px;
    line-height: 1.38;
    color: #566052;
}

/*
 * Kontakt ohne Präfixe, einfach die Inhalte untereinander:
 * Telefonnummer
 * E-Mail
 */
.mes-contact-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.mes-contact-line {
    display: block;
    max-width: 100%;
    color: #4f5a4d;
    overflow-wrap: anywhere;
}

.mes-contact-stack a {
    text-decoration-color: rgba(46, 79, 53, 0.38);
    text-underline-offset: 2px;
}

.mes-contact-stack a:hover,
.mes-contact-stack a:focus-visible {
    color: var(--mes-primary);
}

/*
 * Desktop darf dichter sein.
 * Mobil bleibt die 44px-Touchhöhe erhalten.
 */
@media (min-width: 760px) {
    .mes-app-page .mes-button {
        min-height: 36px;
        padding: 6px 12px;
    }

    .mes-app-page .mes-button-small {
        min-height: 32px;
        padding: 5px 10px;
    }

    .mes-list-edit-button,
    .mes-list-access-button {
        min-height: 36px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/*
 * Benutzerliste:
 * „Bearbeiten“ und „Zugang senden“ optisch gleichwertig und gleich breit.
 */
.mes-user-row-action {
    align-items: stretch;
}

.mes-user-row-action .mes-list-edit-button,
.mes-user-row-action .mes-list-access-button {
    width: 122px;
    min-width: 122px;
}

@media (min-width: 881px) {
    .mes-user-list-head,
    .mes-user-row {
        grid-template-columns:
            minmax(190px, 1.45fr)
            minmax(190px, 1.35fr)
            110px
            135px
            132px;
    }
}

/*
 * Auf Mobilgeräten: volle Touchhöhe, aber keine unnötige Zusatzhöhe.
 */
@media (max-width: 759px) {
    .mes-app-page .mes-button {
        min-height: 44px;
        padding: 8px 12px;
    }

    .mes-user-row-action .mes-list-edit-button,
    .mes-user-row-action .mes-list-access-button {
        width: 100%;
        min-width: 0;
    }
}


/* ==========================================================================
   MES v0.0.5-12 – Verbindlicher MES-Listenstandard
   ========================================================================== */

/*
 * STANDARD:
 * Suche | Filter(s)
 * sortierbare Spaltenköpfe
 * Content | Aktion
 * Suche/Filter + Spaltenkopf sticky
 * Bottom-Control persistent
 */

/* Sortierbare Überschriften */
.mes-list-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    width: fit-content;

    color: inherit;
    text-decoration: none;
}

.mes-list-sort-link:hover,
.mes-list-sort-link:focus-visible,
.mes-list-sort-link.is-sorted {
    color: var(--mes-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * Der Spaltenkopf klebt direkt unter Suche/Filtern.
 * Höhe der Filterleiste wird per JS gemessen.
 */
@media (min-width: 860px) {
    .mes-list-column-head {
        position: sticky !important;
        top: calc(
            var(--mes-subnav-sticky-height, 52px)
            + var(--mes-list-filter-sticky-height, 64px)
        );
        z-index: 47;

        box-shadow:
            0 7px 12px rgba(31, 42, 30, 0.055);
    }

    /*
     * overflow:hidden auf den Listencontainern würde sticky verhindern.
     * Die Rundung bleibt visuell über Border/Background bestehen.
     */
    .mes-organization-list,
    .mes-event-list,
    .mes-user-list-card {
        overflow: visible;
    }
}

/* --------------------------------------------------------------
   Adressen → Organisationen
   -------------------------------------------------------------- */

@media (min-width: 860px) {
    .mes-organization-list
        .mes-org-list-head:not(.mes-member-list-head),
    .mes-organization-list
        .mes-org-row:not(.mes-member-row) {
        grid-template-columns:
            minmax(220px, 1.45fr)
            minmax(190px, 1.15fr)
            minmax(210px, 1.20fr)
            72px
            108px;
    }
}

/* --------------------------------------------------------------
   Verein → Mitglieder
   -------------------------------------------------------------- */

@media (min-width: 860px) {
    .mes-member-list-head,
    .mes-member-row {
        grid-template-columns:
            minmax(220px, 1.45fr)
            minmax(190px, 1.15fr)
            minmax(210px, 1.20fr)
            108px;
    }
}

/* --------------------------------------------------------------
   Events
   -------------------------------------------------------------- */

@media (min-width: 900px) {
    .mes-event-list-head,
    .mes-event-row {
        grid-template-columns:
            minmax(240px, 1.50fr)
            minmax(170px, 0.88fr)
            minmax(180px, 0.92fr)
            110px
            108px;
    }
}

/* Einheitliche Aktionsspalte */
.mes-list-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
}

/*
 * Users nutzt bereits denselben Sortier-/Filter-/Bottom-Mechanismus.
 * Nur der Kopf wird nun ebenfalls sticky.
 */
@media (min-width: 881px) {
    .mes-user-list-head.mes-list-column-head {
        top: calc(
            var(--mes-subnav-sticky-height, 52px)
            + var(--mes-list-filter-sticky-height, 64px)
        );
    }
}

/*
 * Mobile: Spaltenköpfe bleiben bewusst weg.
 * Dort sind data-label/Kartenzeilen besser lesbar.
 */
@media (max-width: 859px) {
    .mes-org-list-head.mes-list-column-head {
        position: static !important;
    }
}

@media (max-width: 899px) {
    .mes-event-list-head.mes-list-column-head {
        position: static !important;
    }
}

@media (max-width: 880px) {
    .mes-user-list-head.mes-list-column-head {
        position: static !important;
    }

    .mes-list-actions {
        justify-content: flex-start;
    }
}


/* ==========================================================================
   MES v0.0.6-01 – Verein → Beiträge, Stufe 1
   Leitprinzip:
   Arbeit abnehmen / erleichtern / Überblick schaffen – keine zweite Buchhaltung.
   ========================================================================== */

.mes-contribution-page .mes-main {
    padding-bottom:
        max(
            188px,
            calc(164px + env(safe-area-inset-bottom))
        );
}

.mes-contribution-action-choice {
    margin-bottom: 14px;
    border-color: rgba(178, 165, 61, 0.42);
    background: rgba(255, 255, 178, 0.30);
}

.mes-contribution-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.mes-contribution-step-heading h2,
.mes-contribution-step-heading p {
    margin: 0;
}

.mes-contribution-step-heading p {
    margin-top: 2px;
    color: var(--mes-text-secondary);
    font-size: 13.78px;
}

.mes-contribution-selection-heading {
    margin: 18px 0 9px;
}

.mes-contribution-action-options {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.mes-contribution-action-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 10px 11px;

    border: 1px solid rgba(31, 42, 30, 0.14);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.60);

    cursor: pointer;
}

.mes-contribution-action-option:has(input:checked) {
    border-color: rgba(46, 79, 53, 0.42);
    background: rgba(206, 255, 192, 0.55);
}

.mes-contribution-action-option input {
    margin-top: 3px;
}

.mes-contribution-action-option span,
.mes-contribution-action-option small {
    display: block;
}

.mes-contribution-action-option small {
    margin-top: 2px;
    color: var(--mes-text-secondary);
    font-weight: 400;
}

.mes-contribution-filter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: end;
}

.mes-contribution-year-filter label {
    display: block;
    margin-bottom: 3px;
    font-size: 10.6px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mes-text-secondary);
}

.mes-contribution-year-filter input {
    width: 100%;
}

@media (min-width: 760px) {
    .mes-contribution-filter-form {
        grid-template-columns:
            minmax(260px, 1fr)
            126px
            minmax(180px, auto)
            auto;
    }

    .mes-contribution-action-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

.mes-contribution-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin: 0 0 8px;
}

.mes-contribution-list-meta > div {
    min-width: 0;
}

.mes-contribution-list-meta strong,
.mes-contribution-list-meta span {
    display: block;
}

.mes-contribution-list-meta span {
    margin-top: 2px;
    font-size: 12.72px;
    color: var(--mes-text-secondary);
}

.mes-contribution-select-all {
    flex: 0 0 auto;
}

.mes-contribution-list {
    border: 1px solid var(--mes-border);
    border-radius: var(--mes-radius);
    background: var(--mes-white);
}

.mes-contribution-list-head,
.mes-contribution-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px 12px;
}

.mes-contribution-list-head {
    padding: 9px 11px;
    border-bottom: 1px solid var(--mes-border);
    background: rgba(238, 241, 232, 0.94);

    font-size: 11.66px;
    font-weight: 760;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--mes-text-secondary);
}

.mes-contribution-row {
    padding: 10px 11px;
    border-bottom: 1px solid rgba(31, 42, 30, 0.09);
    transition:
        background 140ms ease,
        box-shadow 140ms ease;
}

.mes-contribution-row:last-child {
    border-bottom: 0;
}

.mes-contribution-row.is-selected {
    background: rgba(206, 255, 192, 0.30);
    box-shadow:
        inset 3px 0 0 rgba(46, 79, 53, 0.55);
}

.mes-contribution-member strong,
.mes-contribution-member small {
    display: block;
}

.mes-contribution-member small {
    margin-top: 2px;
    color: var(--mes-text-secondary);
}

.mes-contribution-status {
    display: inline-flex;
    align-items: center;

    min-height: 24px;
    padding: 3px 8px;

    border-radius: 999px;

    font-size: 11.66px;
    font-weight: 760;
}

.mes-contribution-status.is-paid {
    color: #294a30;
    background: rgba(206, 255, 192, 0.82);
}

.mes-contribution-status.is-open {
    color: #5b4b13;
    background: rgba(255, 255, 178, 0.90);
}

.mes-contribution-paid-on-value {
    font-size: 14.84px;
    color: #4f5a4d;
}

.mes-row-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    min-height: 36px;

    cursor: pointer;
}

.mes-row-checkbox input {
    width: 18px;
    height: 18px;
}

@media (min-width: 900px) {
    .mes-contribution-list-head,
    .mes-contribution-row {
        grid-template-columns:
            54px
            minmax(220px, 1.35fr)
            minmax(210px, 1.20fr)
            104px
            116px
            108px;

        align-items: center;
    }

    .mes-contribution-list-head {
        position: sticky;
        top: calc(
            var(--mes-subnav-sticky-height, 52px)
            + var(--mes-list-filter-sticky-height, 64px)
        );
        z-index: 47;
    }
}

@media (max-width: 899px) {
    .mes-contribution-list-head {
        display: none;
    }

    .mes-contribution-row > [data-label]::before {
        display: block;
        margin-bottom: 2px;

        content: attr(data-label);

        font-size: 10.6px;
        font-weight: 760;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--mes-text-secondary);
    }

    .mes-contribution-select-cell {
        display: flex;
        justify-content: flex-start;
    }
}

/* Sammelaktion bleibt oberhalb der normalen Listensteuerung sichtbar. */
.mes-contribution-batch-bar {
    position: fixed;
    left: 50%;
    bottom: var(
        --mes-list-bottom-controls-height,
        62px
    );
    z-index: 53;

    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;

    width: min(
        calc(100% - 20px),
        var(--mes-content-width)
    );

    padding: 9px 12px;

    border: 1px solid rgba(31, 42, 30, 0.16);
    border-bottom: 0;
    border-radius: 13px 13px 0 0;

    background: rgba(255, 255, 178, 0.98);

    box-shadow:
        0 -8px 22px rgba(31, 42, 30, 0.08);

    transform: translateX(-50%);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mes-contribution-selection-summary {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mes-link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mes-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.mes-link-button:disabled {
    color: var(--mes-text-secondary);
    cursor: default;
    opacity: 0.55;
}

.mes-contribution-paid-date label,
.mes-contribution-batch-action-copy span {
    display: block;
    margin-bottom: 2px;

    font-size: 10.6px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mes-text-secondary);
}

.mes-contribution-paid-date input {
    min-height: 36px;
}

.mes-contribution-batch-action-copy strong {
    display: block;
    font-size: 13.78px;
}

@media (min-width: 780px) {
    .mes-contribution-batch-bar {
        grid-template-columns:
            minmax(155px, 1fr)
            158px
            minmax(170px, auto)
            auto;

        align-items: center;
    }
}

/* Einzelbearbeitung im Organisationsdatensatz. */
.mes-contribution-inline-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid rgba(31, 42, 30, 0.12);
}

@media (min-width: 760px) {
    .mes-contribution-inline-form {
        grid-template-columns:
            126px
            minmax(150px, 190px)
            170px
            auto;

        align-items: end;
    }
}

/* Ergebnisbericht */
.mes-contribution-result-summary,
.mes-contribution-result-list-card {
    margin-bottom: 14px;
}

.mes-contribution-result-number {
    display: flex;
    align-items: baseline;
    gap: 8px;

    margin-bottom: 14px;
}

.mes-contribution-result-number strong {
    font-size: clamp(33.92px, 6.36vw, 53px);
    line-height: 1;
    color: var(--mes-primary);
}

.mes-contribution-result-number span {
    font-weight: 720;
}

.mes-contribution-result-list {
    margin: 0;
    padding-left: 24px;
}

.mes-contribution-result-list li {
    padding: 7px 0;
    border-bottom: 1px solid rgba(31, 42, 30, 0.08);
}

.mes-contribution-result-list li:last-child {
    border-bottom: 0;
}

.mes-contribution-result-list strong,
.mes-contribution-result-list span {
    display: block;
}

.mes-contribution-result-list span {
    margin-top: 1px;
    font-size: 12.72px;
    color: var(--mes-text-secondary);
}

@media print {
    .mes-shell-header,
    .mes-subnav,
    .mes-contribution-result-actions {
        display: none !important;
    }

    .mes-contribution-result-page {
        background: #fff !important;
    }

    .mes-contribution-result-page .mes-main {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .mes-contribution-result-page .mes-card {
        box-shadow: none;
        break-inside: avoid;
    }

    .mes-contribution-result-list li {
        break-inside: avoid;
    }
}


/* ==========================================================================
   MES v0.0.6-02 – Optionales Buchungsdatum im Beitrags-Batch
   ========================================================================== */

.mes-contribution-booking-option {
    min-width: 0;
}

.mes-contribution-booking-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 36px;

    font-size: 13.78px;
    font-weight: 720;
    color: var(--mes-text);

    cursor: pointer;
}

.mes-contribution-booking-toggle input {
    width: 17px;
    height: 17px;
    margin: 0;
}

.mes-contribution-booking-option
    .mes-contribution-paid-date {
    margin-top: 5px;
}

.mes-contribution-booking-option
    .mes-contribution-paid-date[hidden] {
    display: none !important;
}

@media (min-width: 780px) {
    .mes-contribution-batch-bar {
        grid-template-columns:
            minmax(155px, 0.90fr)
            minmax(220px, 1.05fr)
            minmax(170px, auto)
            auto;
    }
}


/* ==========================================================================
   MES v0.0.6-03 – Mobile Density / Platzökonomie
   ========================================================================== */

/* DEV ist absichtlich nur noch ein kompaktes Werkzeug-Symbol. */
.mes-dev-icon {
    display: inline-block;
    font-size: 20.14px;
    line-height: 1;
}

/* Zeilen-Aktionsicon: Desktop Text, Mobile Icon. */
.mes-row-action-icon {
    display: none;
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Mobile / Tablet: Navigation und Seitentitel
   -------------------------------------------------------------------------- */

@media (max-width: 859px) {
    /*
     * Hauptmenüs müssen als Hauptmenüs wirken:
     * größer und deutlich fett. Settings + DEV bleiben Icons.
     */
    .mes-area-nav-inner,
    .mes-area-nav-inner.has-dev {
        gap: 1px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .mes-area-tab {
        min-height: 45px;
        padding: 7px 2px;

        font-size: 14.84px;
        font-weight: 780;
        letter-spacing: -0.015em;
    }

    .mes-area-tab.is-active {
        min-height: 48px;
    }

    .mes-settings-icon,
    .mes-dev-icon {
        font-size: 22.26px;
    }

    /*
     * Subnavigation: grundsätzlich EINE Zeile.
     * Bei vielen Fachpunkten horizontal scrollen statt zweizeilig aufzublähen.
     */
    .mes-subnav-inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;

        gap: 2px;

        padding: 4px 6px;

        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mes-subnav-inner::-webkit-scrollbar {
        display: none;
    }

    .mes-subnav a,
    .mes-subnav span {
        flex: 1 0 auto;

        min-height: 34px;
        padding: 5px 9px;

        border-radius: 7px;

        font-size: 13.78px;
        font-weight: 720;

        white-space: nowrap;
        overflow-wrap: normal;
    }

    /*
     * Bereich steht bereits im Hauptmenü.
     * Kicker deshalb mobil ausblenden; Titel kleiner und kompakter.
     */
    .mes-list-page .mes-kicker,
    .mes-contribution-page .mes-kicker {
        display: none;
    }

    .mes-app-page .mes-main {
        padding-top: 12px;
    }

    .mes-app-page .mes-page-heading {
        margin-bottom: 11px;
    }

    .mes-app-page .mes-page-heading h1 {
        font-size: clamp(29.68px, 8.48vw, 38.16px);
        line-height: 1;
        letter-spacing: -0.035em;
    }

    /*
     * In Verwaltungslisten ist der Introtext auf Mobile kein Primärinhalt.
     * Desktop behält ihn.
     */
    .mes-list-page .mes-page-intro {
        display: none;
    }

    /* Neue Organisation / Neues Mitglied: nur das gelbe + neben dem Titel. */
    .mes-list-page .mes-page-heading-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .mes-list-page .mes-page-heading-actions > div:first-child {
        min-width: 0;
    }

    .mes-list-page .mes-page-action-group {
        flex: 0 0 auto;
    }

    .mes-list-page .mes-button-page-action {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
        height: 42px;

        padding: 0;

        border-radius: 10px;

        font-size: 25.44px;
        line-height: 1;
    }

    .mes-list-page .mes-page-action-text {
        display: none;
    }

    .mes-list-page .mes-page-action-icon {
        line-height: 1;
    }
}

/* Sehr kleines Mobile: immer noch lesbare Hauptnavigation. */
@media (max-width: 365px) {
    .mes-area-tab {
        font-size: 13.25px;
        font-weight: 780;
    }

    .mes-subnav a,
    .mes-subnav span {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13.25px;
    }
}

/* --------------------------------------------------------------------------
   Such-/Filterleisten mobil: Platz nebeneinander nutzen
   -------------------------------------------------------------------------- */

@media (max-width: 619px) {
    .mes-card.mes-list-filter-sticky {
        padding: 7px 8px;
        border-radius: 11px;
    }

    .mes-list-filter-form.mes-search-form-with-filter {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(112px, 34%);
        gap: 6px;
        align-items: center;
    }

    .mes-list-filter-form .mes-search-field input,
    .mes-list-filter-form .mes-search-filter select {
        min-height: 44px;
        height: 44px;
        padding-top: 7px;
        padding-bottom: 7px;

        font-size: 14.84px;
    }

    .mes-list-filter-form .mes-search-field input {
        padding-left: 11px;
        padding-right: 9px;
    }
}

/* --------------------------------------------------------------------------
   Adressen / Mitglieder: Mobile Karten stark verdichten
   -------------------------------------------------------------------------- */

@media (max-width: 859px) {
    .mes-organization-list {
        gap: 6px;
    }

    .mes-org-row {
        grid-template-columns:
            minmax(0, 1fr)
            42px;

        gap: 4px 8px;

        padding: 9px 10px;

        border-radius: 10px;
    }

    .mes-org-main {
        grid-column: 1;
        grid-row: 1;
    }

    .mes-org-title-line strong {
        font-size: 15.9px;
        line-height: 1.16;
    }

    .mes-org-role-line {
        min-height: 0;
        margin-top: 3px;
    }

    .mes-role-badge {
        min-height: 20px;
        padding: 2px 7px;
        font-size: 10.07px;
    }

    /*
     * Keine ausgeschriebenen Mobil-Präfixe wie ADRESSE / KONTAKT.
     * Symbole reichen und sparen Höhe.
     */
    .mes-org-cell::before {
        display: none !important;
    }

    .mes-org-cell[data-label="Adresse"] {
        grid-column: 1 / -1;

        display: flex;
        align-items: baseline;
        gap: 6px;

        margin-top: 1px;

        font-size: 13.25px;
        line-height: 1.2;
    }

    .mes-org-cell[data-label="Adresse"]::after {
        content: none;
    }

    .mes-org-cell[data-label="Adresse"] {
        position: relative;
        padding-left: 19px;
    }

    .mes-org-cell[data-label="Adresse"]::before {
        content: "⌖" !important;
        display: block !important;

        position: absolute;
        left: 0;
        top: 0;

        margin: 0;

        font-size: 14.84px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;

        color: var(--mes-primary);
    }

    .mes-contact-stack {
        grid-column: 1 / -1;

        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;

        gap: 2px 12px;

        margin-top: 1px;

        font-size: 13.25px;
        line-height: 1.2;
    }

    .mes-contact-line {
        position: relative;
        padding-left: 18px;
    }

    .mes-contact-line[href^="tel:"]::before {
        content: "☎";
    }

    .mes-contact-line[href^="mailto:"]::before {
        content: "✉";
    }

    .mes-contact-line[href^="tel:"]::before,
    .mes-contact-line[href^="mailto:"]::before {
        position: absolute;
        left: 0;
        top: 0;

        width: 15px;

        color: var(--mes-primary);
        text-decoration: none;
    }

    .mes-org-cell[data-label="Personen"] {
        display: none;
    }

    .mes-list-actions,
    .mes-member-actions {
        grid-column: 2;
        grid-row: 1;

        align-self: start;
        justify-content: flex-end;
    }

    .mes-list-edit-button {
        width: 38px;
        min-width: 38px;
        min-height: 36px;
        height: 36px;

        padding: 0;

        border-radius: 9px;
    }

    .mes-row-action-icon {
        display: block;
    }

    .mes-row-action-text {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Verein → Beiträge: Auswahl statt UI-Zirkus
   -------------------------------------------------------------------------- */

.mes-contribution-action-choice {
    display: grid;
    grid-template-columns: auto minmax(190px, 280px) minmax(0, 1fr);
    align-items: center;
    gap: 7px 10px;

    margin: 0 0 9px;
    padding: 0;

    border: 0;
    background: transparent;
}

.mes-contribution-action-label {
    font-size: 11.66px;
    font-weight: 780;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mes-text-secondary);
}

.mes-contribution-action-choice select {
    width: 100%;
    min-height: 40px;
    padding: 6px 32px 6px 10px;

    border: 1px solid var(--mes-border-strong);
    border-radius: 9px;

    font-size: 14.84px;
    font-weight: 740;

    color: var(--mes-text);
    background: var(--mes-action);
}

.mes-contribution-action-current {
    min-width: 0;
    font-size: 12.72px;
    color: var(--mes-text-secondary);
}

.mes-contribution-action-current strong {
    color: var(--mes-text);
}

.mes-contribution-selection-heading,
.mes-contribution-action-options,
.mes-contribution-step-heading {
    display: none;
}

@media (max-width: 619px) {
    .mes-contribution-action-choice {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        gap: 5px 7px;
    }

    .mes-contribution-action-current {
        grid-column: 1 / -1;
        margin-left: 49px;

        font-size: 11.66px;
    }

    /* Beiträge: Suche erste Zeile, Jahr + Status kompakt darunter. */
    .mes-contribution-filter-form {
        grid-template-columns:
            84px
            minmax(0, 1fr);

        gap: 5px 6px;
    }

    .mes-contribution-filter-form .mes-search-field {
        grid-column: 1 / -1;
    }

    .mes-contribution-year-filter {
        grid-column: 1;
    }

    .mes-contribution-filter-form .mes-search-filter:not(.mes-contribution-year-filter) {
        grid-column: 2;
    }

    .mes-contribution-year-filter label {
        margin-bottom: 2px;
    }

    .mes-contribution-year-filter input,
    .mes-contribution-filter-form select {
        min-height: 40px;
        height: 40px;
        font-size: 14.31px;
    }

    .mes-contribution-filter-form .mes-search-field input {
        min-height: 42px;
        height: 42px;
        font-size: 14.84px;
    }
}

/*
 * Beitragsliste mobil:
 * Vorstand/Kassenwart kennt die Betriebe.
 * Deshalb nur Auswahl + Firmenname + Status + Aktion.
 */
@media (max-width: 899px) {
    .mes-contribution-list {
        border-radius: 10px;
    }

    .mes-contribution-row {
        display: grid;
        grid-template-columns:
            34px
            minmax(0, 1fr)
            auto
            38px;

        align-items: center;

        gap: 5px 7px;

        min-height: 48px;
        padding: 6px 8px;
    }

    .mes-contribution-row > [data-label]::before {
        display: none !important;
    }

    .mes-contribution-select-cell {
        grid-column: 1;
        grid-row: 1;

        display: flex;
        align-items: center;
    }

    .mes-row-checkbox {
        width: 32px;
        min-height: 34px;
    }

    .mes-row-checkbox input {
        width: 18px;
        height: 18px;
    }

    .mes-contribution-member {
        grid-column: 2;
        grid-row: 1;

        min-width: 0;
    }

    .mes-contribution-member strong {
        min-width: 0;

        font-size: 14.84px;
        line-height: 1.15;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mes-contribution-member a {
        display: block;
        min-width: 0;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mes-contribution-member small,
    .mes-contribution-row > .mes-contact-stack,
    .mes-contribution-paid-on-value {
        display: none !important;
    }

    .mes-contribution-row > div[data-label="Status"] {
        grid-column: 3;
        grid-row: 1;
    }

    .mes-contribution-status {
        min-height: 21px;
        padding: 2px 6px;

        font-size: 10.07px;
    }

    .mes-contribution-row > .mes-list-actions {
        grid-column: 4;
        grid-row: 1;
    }

    .mes-contribution-row .mes-list-edit-button {
        width: 34px;
        min-width: 34px;
        min-height: 34px;
        height: 34px;
    }

    .mes-contribution-list-meta {
        margin-bottom: 5px;
    }

    .mes-contribution-list-meta span {
        display: none;
    }

    .mes-contribution-select-all {
        min-height: 34px;
        padding: 5px 8px;
        font-size: 11.66px;
    }
}

/* --------------------------------------------------------------------------
   Sticky Batchbar: 2–3 kompakte Zeilen statt großer gelber Karte
   -------------------------------------------------------------------------- */

.mes-contribution-booking-option {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 6px 8px;
}

.mes-contribution-booking-toggle {
    min-height: 34px;
}

.mes-contribution-booking-option .mes-contribution-paid-date {
    margin: 0;
}

.mes-contribution-paid-date input {
    width: 150px;
    min-height: 34px;
    height: 34px;
    padding: 4px 7px;

    font-size: 13.78px;
}

@media (max-width: 779px) {
    .mes-contribution-page .mes-main {
        padding-bottom:
            max(
                126px,
                calc(110px + env(safe-area-inset-bottom))
            );
    }

    .mes-contribution-batch-bar {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "summary summary"
            "booking booking"
            "action submit";

        gap: 4px 8px;

        width: calc(100% - 10px);
        padding: 6px 9px;

        border-radius: 11px 11px 0 0;
    }

    .mes-contribution-selection-summary {
        grid-area: summary;
        gap: 8px;
    }

    .mes-contribution-selection-summary strong {
        font-size: 13.78px;
    }

    .mes-contribution-booking-option {
        grid-area: booking;
    }

    .mes-contribution-booking-toggle {
        min-width: 0;
        font-size: 12.72px;
        line-height: 1.1;
    }

    .mes-contribution-booking-toggle input {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
    }

    .mes-contribution-batch-action-copy {
        grid-area: action;
        min-width: 0;
    }

    .mes-contribution-batch-action-copy span {
        display: inline;
        margin-right: 4px;
    }

    .mes-contribution-batch-action-copy strong {
        display: inline;

        font-size: 12.72px;
    }

    .mes-contribution-batch-bar
        > .mes-button-confirm {
        grid-area: submit;

        min-height: 36px;
        padding: 5px 10px;

        font-size: 12.72px;
    }
}

@media (max-width: 390px) {
    .mes-contribution-booking-toggle {
        font-size: 12.19px;
    }

    .mes-contribution-paid-date input {
        width: 136px;
        font-size: 12.72px;
    }
}

/* --------------------------------------------------------------------------
   Sticky Bottom-Control mobil: EINE Zeile.
   -------------------------------------------------------------------------- */

.mes-page-arrow-icon {
    display: inline;
}

@media (max-width: 619px) {
    .mes-list-bottom-controls {
        grid-template-columns:
            64px
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "size summary arrows";

        gap: 6px;

        width: calc(100% - 8px);

        padding:
            6px
            7px
            max(6px, env(safe-area-inset-bottom));
    }

    .mes-list-page-size select {
        width: 64px;
        min-height: 38px;
        height: 38px;

        padding: 5px 24px 5px 8px;

        font-size: 14.84px;
    }

    .mes-list-page-summary {
        justify-content: center;
        font-size: 11.66px;
        white-space: nowrap;
    }

    .mes-list-page-number {
        display: none;
    }

    .mes-list-page-arrows {
        gap: 4px;
    }

    .mes-list-page-button {
        width: 38px;
        min-width: 38px;
        min-height: 38px;
        height: 38px;

        padding: 0;

        font-size: 16.96px;
    }

    .mes-page-arrow-text {
        display: none;
    }

    /*
     * Alte Pseudo-Pfeile aus älteren Breakpoints ausschalten.
     */
    .mes-list-page-button::after {
        content: none !important;
    }

    .mes-list-page .mes-main {
        padding-bottom:
            max(
                78px,
                calc(66px + env(safe-area-inset-bottom))
            );
    }
}

/* Desktop / Tablet: Buttontexte bleiben sichtbar. */
@media (min-width: 860px) {
    .mes-page-action-text {
        display: inline;
    }

    .mes-row-action-text {
        display: inline;
    }
}


/* ==========================================================================
   MES v0.0.6-04 – Mobile/Tablet Density Pass 2
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile + Tablet: Seitentitel wirklich kompakt.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .mes-app-page .mes-page-heading h1 {
        font-size: 27.56px !important;
        line-height: 1.02;
        letter-spacing: -0.025em;
    }

    .mes-app-page .mes-page-heading {
        margin-bottom: 8px;
    }
}

/* --------------------------------------------------------------------------
   Verein → Beiträge: Aktion nur einmal zeigen.
   Pulldown selbst zeigt klar, was gewählt ist.
   -------------------------------------------------------------------------- */

.mes-contribution-action-choice {
    grid-template-columns:
        auto
        minmax(190px, 1fr);

    gap: 6px 8px;
}

.mes-contribution-action-current {
    display: none !important;
}

@media (max-width: 1024px) {
    .mes-contribution-action-choice {
        margin-bottom: 6px;
    }

    .mes-contribution-action-choice select {
        min-height: 38px;
        height: 38px;

        padding-top: 4px;
        padding-bottom: 4px;

        font-size: 14.31px;
    }
}

/* --------------------------------------------------------------------------
   Beitragsfilter:
   1. Beitragsjahr + Status
   2. Suche
   Auf Mobile/Tablet also genau die Reihenfolge aus dem Praxisablauf.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .mes-contribution-filter-form {
        display: grid;

        grid-template-columns:
            92px
            minmax(0, 1fr);

        grid-template-areas:
            "year status"
            "search search";

        gap: 5px 6px;
    }

    .mes-contribution-year-filter {
        grid-area: year !important;
    }

    .mes-contribution-filter-form
        .mes-search-filter:not(.mes-contribution-year-filter) {
        grid-area: status !important;
    }

    .mes-contribution-filter-form .mes-search-field {
        grid-area: search !important;
    }

    .mes-contribution-filter-form
        .mes-search-submit {
        display: none;
    }

    .mes-contribution-year-filter label {
        margin-bottom: 2px;
    }

    .mes-contribution-year-filter input,
    .mes-contribution-filter-form select {
        min-height: 38px;
        height: 38px;

        padding-top: 4px;
        padding-bottom: 4px;

        font-size: 13.78px;
    }

    .mes-contribution-filter-form
        .mes-search-field input {
        min-height: 40px;
        height: 40px;

        padding-top: 5px;
        padding-bottom: 5px;

        font-size: 14.31px;
    }

    .mes-card.mes-list-filter-sticky {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* --------------------------------------------------------------------------
   Sticky Batchbar:
   links = Auswahl / Buchungsdatum
   rechts = Aktion direkt über Status setzen
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .mes-contribution-page .mes-main {
        padding-bottom:
            max(
                104px,
                calc(92px + env(safe-area-inset-bottom))
            );
    }

    .mes-contribution-batch-bar {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(150px, 210px);

        grid-template-areas:
            "summary action"
            "booking submit";

        align-items: center;

        gap: 4px 10px;

        padding: 6px 9px;

        border-radius: 10px 10px 0 0;
    }

    .mes-contribution-selection-summary {
        grid-area: summary;

        display: flex;
        align-items: center;
        gap: 7px;

        min-width: 0;
    }

    .mes-contribution-selection-summary strong {
        font-size: 13.25px;
        white-space: nowrap;
    }

    .mes-contribution-selection-summary
        .mes-link-button {
        font-size: 12.19px;
        white-space: nowrap;
    }

    .mes-contribution-booking-option {
        grid-area: booking;

        display: flex;
        align-items: center;
        gap: 8px;

        min-width: 0;
    }

    .mes-contribution-booking-toggle {
        flex: 0 1 auto;

        min-height: 30px;

        font-size: 12.19px;
        line-height: 1.05;
        white-space: nowrap;
    }

    .mes-contribution-booking-toggle input {
        width: 15px;
        height: 15px;
    }

    .mes-contribution-paid-date {
        flex: 0 0 auto;
    }

    .mes-contribution-paid-date input {
        width: 136px;
        min-height: 32px;
        height: 32px;

        padding: 3px 6px;

        font-size: 12.72px;
    }

    .mes-contribution-batch-action-copy {
        grid-area: action;

        align-self: end;

        min-width: 0;
        text-align: left;
    }

    .mes-contribution-batch-action-copy span {
        display: block;

        margin: 0 0 1px;

        font-size: 9.54px;
        line-height: 1;
    }

    .mes-contribution-batch-action-copy strong {
        display: block;

        font-size: 12.19px;
        line-height: 1.1;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mes-contribution-batch-bar
        > .mes-button-confirm {
        grid-area: submit;

        width: 100%;
        min-height: 34px;
        height: 34px;

        padding: 4px 8px;

        font-size: 12.72px;
    }
}

/*
 * Sehr schmale Geräte:
 * Layout bleibt zweispaltig; rechte Aktionsspalte wird nur etwas schmaler.
 */
@media (max-width: 430px) {
    .mes-contribution-batch-bar {
        grid-template-columns:
            minmax(0, 1fr)
            132px;

        column-gap: 7px;
    }

    .mes-contribution-booking-toggle {
        font-size: 11.448px;
    }

    .mes-contribution-paid-date input {
        width: 122px;
        font-size: 11.66px;
    }

    .mes-contribution-batch-action-copy strong {
        font-size: 11.448px;
    }
}


/* ==========================================================================
   MES v0.0.6-05 – Event-Hinweise Accordion + Ergebnisdichte
   ========================================================================== */

/* Event-Hinweise sind jetzt ein normaler Detailbereich 6. */
.mes-event-detail-section.mes-event-ops-card {
    margin-top: 0;
}

.mes-event-detail-section.mes-event-ops-card
    .mes-event-notice-list {
    margin-top: 0;
}

.mes-event-detail-section.mes-event-ops-card
    .mes-event-notice-form {
    margin-top: 12px;
}

/*
 * Beitragsaktion: Label + Wert gehören zusammen.
 * Mobile: eine kompakte Zeile je Fakt.
 * Tablet/Desktop: mehrere Fakten nebeneinander.
 */
.mes-contribution-result-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 14px;

    margin: 0;
}

.mes-contribution-result-facts > div {
    display: flex;
    align-items: baseline;
    gap: 5px;

    min-width: 0;
}

.mes-contribution-result-facts dt,
.mes-contribution-result-facts dd {
    margin: 0;
}

.mes-contribution-result-facts dt {
    flex: 0 0 auto;

    font-size: 11.66px;
    font-weight: 760;
    letter-spacing: 0.025em;
    text-transform: none;

    color: var(--mes-text-secondary);
}

.mes-contribution-result-facts dd {
    min-width: 0;

    font-size: 14.84px;
    font-weight: 620;

    color: var(--mes-text);
}

@media (min-width: 620px) {
    .mes-contribution-result-facts {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .mes-contribution-result-facts {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

/* Ergebnis-Summary insgesamt kompakter. */
.mes-contribution-result-summary {
    padding-top: 14px;
    padding-bottom: 14px;
}

.mes-contribution-result-number {
    margin-bottom: 10px;
}

@media (max-width: 1024px) {
    .mes-contribution-result-number strong {
        font-size: 36.04px;
    }

    .mes-contribution-result-number span {
        font-size: 16.96px;
    }

    .mes-contribution-result-summary {
        padding: 12px;
    }
}


/* ==========================================================================
   MES v0.0.6-06 – Event-Hinweise: Empfänger + obere Ausrichtung
   ========================================================================== */

/*
 * Empfänger und Neuer Hinweis beginnen oben auf derselben Linie.
 * Nur der Aktionsbutton sitzt weiterhin sinnvoll unten am Textfeld.
 */
@media (min-width: 881px) {
    .mes-event-notice-form {
        align-items: start;
    }

    .mes-event-notice-form > .mes-button {
        align-self: end;
    }
}


/* ==========================================================================
   MES v0.0.6-07 – System-Metadaten / Branding
   ========================================================================== */

.mes-shell-brand-mark img,
.mes-brand-mark img,
.mes-system-preview-mark img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.mes-system-settings-form {
    display: grid;
    gap: 14px;
}

.mes-system-brand-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.mes-system-brand-fields {
    display: grid;
    gap: 10px;
}

.mes-system-brand-preview {
    padding: 12px;

    border: 1px solid var(--mes-border);
    border-radius: 11px;

    background: rgba(238, 241, 232, 0.52);
}

.mes-system-brand-preview-row {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 7px;
}

.mes-system-preview-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;
    flex: 0 0 64px;

    border-radius: 15px;

    overflow: hidden;

    background: var(--mes-primary);
    color: #fff;

    font-size: 31.8px;
    font-weight: 800;
}

.mes-system-preview-copy {
    min-width: 0;
}

.mes-system-preview-copy strong,
.mes-system-preview-copy small {
    display: block;
}

.mes-system-preview-copy strong {
    font-size: 21.2px;
    line-height: 1.05;
}

.mes-system-preview-copy small {
    margin-top: 3px;

    color: var(--mes-text-secondary);
    font-size: 12.72px;
}

.mes-system-remove-logo {
    margin-top: 1px;
}

.mes-system-operator-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.mes-system-settings-actions {
    position: sticky;
    bottom: 8px;
    z-index: 45;

    justify-content: flex-end;

    padding: 7px;

    border: 1px solid rgba(31, 42, 30, 0.12);
    border-radius: 11px;

    background: rgba(247, 248, 244, 0.94);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (min-width: 720px) {
    .mes-system-brand-layout {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(240px, 0.7fr);

        align-items: start;
    }

    .mes-system-operator-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .mes-system-field-company {
        grid-column: 1 / -1;
    }

    .mes-system-field-street {
        grid-column: span 2;
    }

    .mes-system-field-postal {
        grid-column: span 1;
    }

    .mes-system-field-city {
        grid-column: span 2;
    }
}

@media (max-width: 719px) {
    .mes-system-settings-page .mes-main {
        padding-bottom: 82px;
    }

    .mes-system-settings-actions {
        bottom:
            max(
                6px,
                env(safe-area-inset-bottom)
            );
    }

    .mes-system-settings-actions .mes-button {
        width: 100%;
    }
}


/* ==========================================================================
   MES v0.0.6-09 – System-Accordions / Betreiberlogo / Druckaktion
   ========================================================================== */

/* Einstellungen → System: dieselbe Accordion-Sprache wie Eventdetails. */
.mes-system-settings-page
    .mes-collapsible-content {
    padding-top: 12px;
}

.mes-system-operator-logo-block {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 12px;

    padding-bottom: 10px;

    border-bottom:
        1px
        solid
        rgba(31, 42, 30, 0.09);
}

.mes-system-operator-logo-preview {
    display: grid;
    align-content: start;
    gap: 5px;

    width: 150px;
    min-height: 90px;

    padding: 8px;

    border:
        1px
        solid
        var(--mes-border);
    border-radius: 10px;

    background: rgba(
        238,
        241,
        232,
        0.45
    );
}

.mes-system-operator-logo-preview img {
    display: block;

    width: 100%;
    height: 70px;

    object-fit: contain;
}

/* Beiträge: Drucken sekundär, aber leicht erreichbar. */
.mes-contribution-print-button {
    gap: 6px;
}

.mes-contribution-print-icon {
    line-height: 1;
}

@media (max-width: 1024px) {
    .mes-contribution-page
        .mes-page-heading-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 8px;
    }

    .mes-contribution-print-button {
        width: 40px;
        min-width: 40px;
        min-height: 38px;
        height: 38px;

        padding: 0;

        border-radius: 9px;
    }

    .mes-contribution-print-text {
        display: none;
    }
}

@media (max-width: 620px) {
    .mes-system-operator-logo-block {
        grid-template-columns: 1fr;
    }

    .mes-system-operator-logo-preview {
        width: 100%;
    }
}


/* ==========================================================================
   MES v0.0.6-10 – Druckaktion Mitglieder
   ========================================================================== */

.mes-member-print-button {
    gap: 6px;
}

.mes-member-print-icon {
    line-height: 1;
}

@media (max-width: 1024px) {
    .mes-member-print-button {
        width: 40px;
        min-width: 40px;
        min-height: 38px;
        height: 38px;

        padding: 0;

        border-radius: 9px;
    }

    .mes-member-print-text {
        display: none;
    }

    .mes-list-page
        .mes-page-action-group {
        display: flex;
        align-items: center;
        gap: 5px;
    }
}


/* ==========================================================================
   MES v0.0.6-13 – Mitgliedsart / Adressdruck
   ========================================================================== */

.mes-membership-badge.is-type {
    background: var(--mes-pastel-violet, #e6ddfa);
    color: #4e416f;
}

.mes-address-print-button {
    gap: 6px;
}

.mes-address-print-icon {
    line-height: 1;
}

@media (max-width: 1024px) {
    .mes-address-print-button {
        width: 40px;
        min-width: 40px;
        min-height: 38px;
        height: 38px;

        padding: 0;

        border-radius: 9px;
    }

    .mes-address-print-text {
        display: none;
    }
}

/* Organisationen – Kategorien, Logo und PLZ/Ort
   -------------------------------------------------------------------------- */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.mes-organization-logo-editor {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

.mes-organization-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 12px;
    border: 1px solid var(--mes-border);
    border-radius: 12px;
    background: var(--mes-white);
}

.mes-organization-logo-preview img {
    display: block;
    max-width: min(320px, 100%);
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.mes-organization-logo-controls {
    display: grid;
    gap: 9px;
}

.mes-organization-remove-logo {
    width: fit-content;
}

.mes-category-fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

.mes-category-fieldset > legend {
    margin-bottom: 8px;
    font-weight: 720;
}

.mes-category-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 46px;
    padding: 8px;
    border: 1px solid var(--mes-border);
    border-radius: 12px 12px 0 0;
    background: var(--mes-white);
}

.mes-category-empty {
    align-self: center;
    padding: 4px 6px;
    color: var(--mes-text-secondary);
    font-size: 13.78px;
}

.mes-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--mes-border);
    border-radius: 999px;
    background: var(--mes-bg);
    color: var(--mes-text);
    font: inherit;
    font-size: 13.78px;
    cursor: pointer;
}

.mes-category-chip small {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(206, 255, 192, 0.55);
    font-size: 10.6px;
    font-weight: 760;
}

.mes-category-chip:hover,
.mes-category-chip:focus-visible {
    border-color: var(--mes-text-secondary);
}

.mes-category-picker {
    border: 1px solid var(--mes-border);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: var(--mes-bg);
}

.mes-category-picker > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 10px 13px;
    cursor: pointer;
    font-weight: 720;
    list-style: none;
}

.mes-category-picker > summary::-webkit-details-marker {
    display: none;
}

.mes-category-picker > summary small {
    color: var(--mes-text-secondary);
    font-size: 11.66px;
    font-weight: 650;
}

.mes-category-picker[open] > summary {
    border-bottom: 1px solid var(--mes-border);
}

.mes-category-picker-body {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.mes-category-search input {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--mes-border);
    border-radius: 10px;
    background: var(--mes-white);
    color: var(--mes-text);
    font: inherit;
}

.mes-category-options {
    display: grid;
    gap: 6px;
    max-height: 320px;
    overflow: auto;
    overscroll-behavior: contain;
}

.mes-category-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 42px;
    padding: 7px 9px;
    border: 1px solid var(--mes-border);
    border-radius: 9px;
    background: var(--mes-white);
}

.mes-category-option-select,
.mes-category-primary {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.mes-category-option-select input,
.mes-category-primary input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--mes-confirm);
}

.mes-category-option-select small {
    color: var(--mes-text-secondary);
}

.mes-category-primary {
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--mes-bg);
    font-size: 12.72px;
    font-weight: 700;
}

.mes-category-option:has([data-mes-category-checkbox]:checked) {
    border-color: rgba(46, 79, 53, 0.30);
    background: rgba(206, 255, 192, 0.24);
}

.mes-category-option:has([data-mes-category-primary]:checked)
.mes-category-primary {
    background: rgba(255, 250, 169, 0.72);
}

.mes-category-no-results {
    margin: 0;
    padding: 14px;
    text-align: center;
    color: var(--mes-text-secondary);
}

.mes-category-field-help {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 7px;
}

.mes-category-field-help a {
    font-size: 12.72px;
    font-weight: 700;
}

.mes-category-admin-intro,
.mes-category-admin-create {
    margin-bottom: 16px;
}

.mes-category-admin-create h2 {
    margin-top: 0;
}

.mes-category-admin-list {
    display: grid;
    gap: 12px;
}

.mes-category-admin-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 10px 20px;
}

.mes-category-admin-list-head h2,
.mes-category-admin-list-head p {
    margin: 0;
}

.mes-category-admin-row.is-inactive {
    opacity: 0.72;
}

@media (min-width: 620px) {
    .mes-organization-logo-editor {
        grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    }

    .mes-address-locality {
        grid-template-columns: 140px minmax(0, 1fr);
    }
}

.mes-organization-logo-preview-detail {
    width: min(360px, 100%);
}

.mes-category-option-select input[type="checkbox"],
.mes-category-primary input[type="radio"] {
    min-height: 18px;
    padding: 0;
    border-radius: 4px;
    box-shadow: none;
}

/* ==========================================================================
   MES v0.0.7-10 – Kategorienverwaltung: ein gemeinsamer Speichervorgang
   ========================================================================== */

.mes-category-admin-form {
    display: grid;
    gap: 16px;
}

.mes-category-admin-create-help {
    margin: -4px 0 10px;

    color: var(--mes-text-secondary);
}

.mes-category-admin-actions {
    margin-top: 4px;
}

@media (min-width: 620px) {
    .mes-category-admin-row {
        grid-template-columns:
            minmax(220px, 1fr)
            120px
            140px;
    }
}


/* ========================================================================== 
   MES v0.0.7-12 – Organisationen: Kategorien in Liste + Export-Aktion
   ========================================================================== */

.mes-inline-form {
    display: inline-flex;
    margin: 0;
}

.mes-category-cell {
    overflow-wrap: anywhere;
}

@media (min-width: 860px) {
    .mes-organization-list
        .mes-org-list-head:not(.mes-member-list-head),
    .mes-organization-list
        .mes-org-row:not(.mes-member-row) {
        grid-template-columns:
            minmax(220px, 1.35fr)
            minmax(185px, 1.08fr)
            minmax(205px, 1.15fr)
            minmax(175px, 0.95fr)
            108px;
    }
}

/* ==========================================================================
   MES v0.0.7-16 – Vereinsfilter, Beitragsregeln, Dokumente & Notiz-Historie · Legacy-Snapshot-Schutz
   ========================================================================== */

.mes-role-badge.is-neutral {
    background: rgba(232, 235, 228, 0.92);
    color: #4f5a4d;
}

.mes-money-input-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.mes-money-input-wrap input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.mes-money-input-wrap > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 44px;
    padding: 0 12px;

    border: 1px solid var(--mes-border);
    border-left: 0;
    border-radius: 0 10px 10px 0;

    background: rgba(238, 241, 232, 0.94);
    color: var(--mes-text-secondary);
    font-weight: 760;
}

.mes-contribution-rate-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.mes-contribution-rate-card {
    display: grid;
    gap: 5px;
    padding: 14px 15px;

    border: 1px solid var(--mes-border);
    border-radius: 12px;

    background: rgba(247, 248, 244, 0.78);
}

.mes-contribution-rate-card strong,
.mes-contribution-rate-card small {
    display: block;
}

.mes-contribution-rate-card small {
    color: var(--mes-text-secondary);
}

.mes-contribution-rate-amount {
    font-size: clamp(23.32px, 3.18vw, 33.92px);
    font-weight: 820;
    line-height: 1;
    color: var(--mes-text);
}

.mes-club-settings-new-rate,
.mes-club-rate-history {
    margin-top: 18px;
}

.mes-club-rate-form {
    margin-top: 18px;
}

.mes-form-actions-inline {
    justify-content: flex-end;
    margin-top: 18px;
}

.mes-rate-history-table-wrap {
    overflow-x: auto;
    margin-top: 14px;
}

.mes-rate-history-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

.mes-rate-history-table th,
.mes-rate-history-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mes-border);
    text-align: left;
    vertical-align: top;
}

.mes-rate-history-table th {
    font-size: 11.66px;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--mes-text-secondary);
}

.mes-organization-repository-card {
    margin-top: 18px;
    padding: 22px;
}

.mes-repository-heading {
    margin-bottom: 18px;
}

.mes-repository-upload-form,
.mes-note-history-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;

    padding: 14px;
    border: 1px solid var(--mes-border);
    border-radius: 12px;
    background: rgba(247, 248, 244, 0.68);
}

.mes-note-history-form {
    align-items: end;
}

.mes-repository-list,
.mes-note-history-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.mes-repository-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;

    padding: 11px 12px;
    border: 1px solid rgba(31, 42, 30, 0.10);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.mes-repository-file-main {
    min-width: 0;
}

.mes-repository-file-main strong,
.mes-repository-file-main small {
    display: block;
}

.mes-repository-file-main strong {
    overflow-wrap: anywhere;
}

.mes-repository-file-main small {
    margin-top: 3px;
    color: var(--mes-text-secondary);
}

.mes-repository-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.mes-repository-actions form {
    margin: 0;
}

.mes-repository-empty {
    margin: 0;
    padding: 10px 2px 2px;
}

.mes-note-history-entry {
    padding: 12px 14px;
    border: 1px solid rgba(31, 42, 30, 0.10);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
}

.mes-note-history-entry header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12.72px;
    color: var(--mes-text-secondary);
}

.mes-note-history-text {
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mes-contribution-amount strong,
.mes-contribution-amount small {
    display: block;
}

.mes-contribution-amount small {
    margin-top: 2px;
    color: var(--mes-text-secondary);
    font-size: 10.6px;
}

@media (min-width: 900px) {
    .mes-club-page #membership-list-filter.mes-search-form-with-filter {
        grid-template-columns:
            minmax(280px, 1fr)
            minmax(170px, 0.55fr)
            minmax(190px, 0.65fr)
            minmax(210px, 0.70fr)
            auto;
    }

    .mes-contribution-list-head,
    .mes-contribution-row {
        grid-template-columns:
            54px
            minmax(210px, 1.25fr)
            minmax(190px, 1.05fr)
            126px
            92px
            108px
            100px;
    }
}

@media (max-width: 899px) {
    .mes-contribution-rate-cards {
        grid-template-columns: 1fr;
    }

    .mes-repository-upload-form,
    .mes-note-history-form,
    .mes-repository-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .mes-repository-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 619px) {
    .mes-club-page #membership-list-filter.mes-search-form-with-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mes-club-page #membership-list-filter .mes-search-field {
        grid-column: 1 / -1;
    }

    .mes-club-page #membership-list-filter .mes-search-submit {
        grid-column: 1 / -1;
    }

    .mes-organization-repository-card {
        padding: 15px;
    }
}

/* ==========================================================================
   MES v0.1.0 BETA 1 – Mitgliedskontext + konsolidierte Beitragsaktionen
   ========================================================================== */

.mes-context-fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.mes-context-fieldset:disabled,
.mes-person-fieldset:disabled {
    opacity: 0.72;
}

.mes-context-fieldset:disabled input,
.mes-context-fieldset:disabled select,
.mes-context-fieldset:disabled textarea,
.mes-context-fieldset:disabled button,
.mes-person-fieldset:disabled select,
.mes-person-fieldset:disabled button {
    cursor: not-allowed;
}

/* Die Aktion wird ausschließlich in der gelben Sammelleiste gewählt. */
.mes-contribution-action-choice {
    display: none !important;
}

.mes-contribution-list-meta {
    grid-template-columns: 1fr !important;
}

.mes-contribution-batch-bar {
    grid-template-columns:
        minmax(170px, 0.8fr)
        minmax(250px, 1.15fr)
        minmax(210px, 0.95fr)
        minmax(130px, auto) !important;
    grid-template-areas: "selection action booking submit" !important;
    align-items: center;
    gap: 10px 16px;
}

.mes-contribution-selection-summary {
    grid-area: selection;
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 3px;
    min-width: 0;
}

.mes-contribution-selection-summary strong {
    white-space: nowrap;
}

.mes-contribution-selection-actions {
    display: grid;
    justify-items: start;
    gap: 2px;
}

.mes-contribution-selection-actions .mes-link-button {
    font-size: 12.19px;
    line-height: 1.2;
    text-align: left;
}

.mes-contribution-batch-action-select {
    grid-area: action;
    min-width: 0;
}

.mes-contribution-batch-action-select label {
    display: block;
    margin-bottom: 2px;
    font-size: 10.6px;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mes-text-secondary);
}

.mes-contribution-batch-action-select select {
    width: 100%;
    min-height: 36px;
}

.mes-contribution-batch-action-select small {
    display: block;
    margin-top: 3px;
    color: var(--mes-text-secondary);
    font-size: 10.6px;
    line-height: 1.25;
}

.mes-contribution-booking-option {
    grid-area: booking;
    min-width: 0;
}

.mes-contribution-batch-submit {
    grid-area: submit;
    width: 100%;
}

@media (max-width: 1024px) {
    .mes-contribution-page .mes-main {
        padding-bottom:
            max(
                156px,
                calc(144px + env(safe-area-inset-bottom))
            );
    }

    .mes-contribution-batch-bar {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(190px, 0.9fr) !important;
        grid-template-areas:
            "selection action"
            "booking submit" !important;
        gap: 7px 12px;
    }
}

@media (max-width: 619px) {
    .mes-contribution-page .mes-main {
        padding-bottom:
            max(
                250px,
                calc(238px + env(safe-area-inset-bottom))
            );
    }

    .mes-contribution-batch-bar {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "selection"
            "action"
            "booking"
            "submit" !important;
        gap: 7px;
    }

    .mes-contribution-selection-summary {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 10px;
        align-items: start;
    }

    .mes-contribution-selection-actions {
        justify-self: start;
    }
}

/* ==========================================================================
   MES v0.1.1 BETA 1 – Vereinsdashboard + Beitragsfilter UX
   ========================================================================== */

.mes-club-dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.mes-club-dashboard-finance-note {
    max-width: 760px;
}

.mes-club-dashboard-finance-note p {
    margin: 5px 0 0;
}

/*
 * Beiträge: Suche links, kompakter Filterblock rechts.
 * Beitragsjahr steht bewusst oberhalb des Status-Pulldowns.
 */
.mes-contribution-filter-form {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(190px, 220px) !important;
    grid-template-areas: "search controls" !important;
    align-items: end;
    gap: 10px 12px;
}

.mes-contribution-search-field {
    grid-area: search !important;
    min-width: 0;
    align-self: end;
}

.mes-contribution-filter-side {
    grid-area: controls;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    min-width: 0;
}

.mes-contribution-filter-side .mes-contribution-year-filter,
.mes-contribution-filter-side .mes-contribution-status-filter {
    grid-area: auto !important;
    min-width: 0;
}

.mes-contribution-filter-side input,
.mes-contribution-filter-side select {
    width: 100%;
}

.mes-contribution-filter-form > .mes-search-submit {
    display: none;
}

@media (max-width: 619px) {
    .mes-contribution-filter-form {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "controls"
            "search" !important;
        gap: 6px;
    }

    .mes-contribution-filter-side {
        grid-template-columns:
            minmax(92px, 0.38fr)
            minmax(0, 1fr);
        align-items: end;
        gap: 6px;
    }
}

/* ========================================================================== 
   MES v0.1.3 BETA 1 – Jahresanteil + nachvollziehbare Beitragskorrektur
   ========================================================================== */

.mes-contribution-submit-wrap {
    grid-area: submit;
    display: grid;
    gap: 4px;
    align-content: center;
    min-width: 0;
}

.mes-contribution-submit-year {
    font-size: 10.6px;
    line-height: 1.2;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mes-text-secondary);
    white-space: nowrap;
}

.mes-contribution-submit-year strong {
    color: inherit;
}

.mes-contribution-batch-submit {
    width: 100%;
}

.mes-contribution-partial-year-block {
    margin-top: 18px;
}

.mes-contribution-partial-year-heading {
    margin: 16px 0 12px;
}

.mes-contribution-partial-year-heading h3 {
    margin: 0;
}

.mes-contribution-partial-year-heading p {
    margin: 4px 0 0;
}

.mes-contribution-correction-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.mes-contribution-correction-card {
    display: grid;
    gap: 18px;
}

.mes-contribution-correction-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.mes-contribution-correction-summary > div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--mes-border, #d8ddd4);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
}

.mes-contribution-correction-summary span {
    font-size: 11.66px;
    color: var(--mes-text-secondary);
}

.mes-contribution-correction-summary strong {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .mes-contribution-correction-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 619px) {
    .mes-contribution-correction-hint {
        align-items: stretch;
        flex-direction: column;
    }

    .mes-contribution-correction-hint .mes-button {
        width: 100%;
    }

    .mes-contribution-correction-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .mes-contribution-submit-year {
        font-size: 10.07px;
    }
}

.mes-contribution-submit-wrap .mes-contribution-batch-submit {
    grid-area: auto;
}

.mes-row-action-symbol {
    align-items: center;
    justify-content: center;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 880px) {
    .mes-row-action-symbol {
        display: inline-flex;
    }
}

/* ========================================================================== 
   MES v0.1.4 BETA – GUI / Darstellungs-Fixes
   - Beiträge: Bezahlt-am unter Status, kompakter Filter
   - Hauptnavigation: Einstellungen nur als Zahnrad
   - Noch nicht aktive Subnav-Einträge optisch zurücknehmen
   ========================================================================== */

/* Einstellungen im Hauptmenü bewusst nur als Icon darstellen. */
.mes-area-tab-settings .mes-settings-icon {
    display: block;
    font-size: 23.32px;
    line-height: 1;
}

.mes-area-tab-settings .mes-settings-label {
    display: none !important;
}

/* Noch nicht verfügbare Fachreiter klar von klickbaren Reitern trennen. */
.mes-subnav .is-disabled {
    color: #707770;
    opacity: 0.48;
    cursor: default;
    filter: grayscale(1);
    pointer-events: none;
}

/* Beiträge: Filter wie in der Mitgliederliste in einer kompakten Zeile. */
.mes-contribution-filter-form {
    grid-template-columns:
        minmax(360px, 1.45fr)
        minmax(430px, 1fr) !important;
    grid-template-areas: "search controls" !important;
    align-items: end;
    gap: 8px 12px !important;
}

.mes-contribution-search-field {
    width: 100%;
    min-width: 0;
}

.mes-contribution-filter-side {
    width: 100%;
    justify-self: stretch;
    display: grid;
    grid-template-columns:
        minmax(130px, 0.38fr)
        minmax(240px, 0.62fr);
    align-items: end;
    gap: 8px;
}

.mes-contribution-filter-side .mes-contribution-year-filter,
.mes-contribution-filter-side .mes-contribution-status-filter {
    min-width: 0;
}

.mes-contribution-filter-side input,
.mes-contribution-filter-side select {
    width: 100%;
}

/* Beiträge: Status und Zahlungsdatum bilden eine gemeinsame Spalte. */
.mes-contribution-status-head,
.mes-contribution-status-cell {
    display: grid;
    align-content: center;
    justify-items: start;
    min-width: 0;
}

.mes-contribution-status-head {
    gap: 2px;
}

.mes-contribution-status-head .mes-list-sort-link {
    width: fit-content;
}

.mes-contribution-paid-sort {
    font-size: 10.07px;
    letter-spacing: 0.025em;
}

.mes-contribution-status-cell {
    gap: 5px;
}

.mes-contribution-status-cell .mes-contribution-paid-on-value {
    display: block;
    margin: 0;
    font-size: 12.19px;
    line-height: 1.25;
    color: #596159;
    white-space: nowrap;
}

@media (min-width: 900px) {
    .mes-contribution-list.has-selection .mes-contribution-list-head,
    .mes-contribution-list.has-selection .mes-contribution-row {
        grid-template-columns:
            54px
            minmax(170px, 1.25fr)
            minmax(160px, 1.05fr)
            112px
            minmax(126px, 0.78fr)
            minmax(216px, auto);
    }

    .mes-contribution-list.without-selection .mes-contribution-list-head,
    .mes-contribution-list.without-selection .mes-contribution-row {
        grid-template-columns:
            minmax(180px, 1.30fr)
            minmax(170px, 1.08fr)
            112px
            minmax(126px, 0.78fr)
            minmax(216px, auto);
    }

    .mes-contribution-row > .mes-list-actions {
        min-width: 0;
        flex-wrap: nowrap;
    }
}

@media (max-width: 899px) {
    .mes-contribution-list.without-selection .mes-contribution-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            38px;
    }

    .mes-contribution-list.without-selection .mes-contribution-member {
        grid-column: 1;
    }

    .mes-contribution-list.without-selection .mes-contribution-row > div[data-label="Status"] {
        grid-column: 2;
    }

    .mes-contribution-list.without-selection .mes-contribution-row > .mes-list-actions {
        grid-column: 3;
    }
}

@media (max-width: 899px) {
    .mes-contribution-filter-form {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "search"
            "controls" !important;
        align-items: stretch;
    }

    .mes-contribution-filter-side {
        width: 100%;
        justify-self: stretch;
        grid-template-columns:
            minmax(120px, 0.38fr)
            minmax(0, 0.62fr);
        gap: 8px;
    }
}

@media (max-width: 619px) {
    .mes-contribution-filter-side {
        grid-template-columns:
            minmax(92px, 0.36fr)
            minmax(0, 0.64fr);
        gap: 6px;
    }
}


/* ========================================================================== 
   MES v0.1.4 BETA 3 – Mobile-Feinschliff Beitragsfilter
   Verhindert, dass ältere grid-area-Regeln den Status-Filter auf schmalen
   Viewports in eine implizite Mini-Spalte verschieben.
   ========================================================================== */

.mes-contribution-filter-form
    .mes-contribution-filter-side
    .mes-contribution-year-filter,
.mes-contribution-filter-form
    .mes-contribution-filter-side
    .mes-contribution-status-filter {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0;
}

@media (max-width: 899px) {
    .mes-contribution-filter-form .mes-contribution-filter-side {
        grid-template-areas: none !important;
        grid-template-columns:
            minmax(116px, 0.34fr)
            minmax(220px, 0.66fr) !important;
        width: 100%;
        gap: 8px;
    }

    .mes-contribution-filter-form
        .mes-contribution-filter-side
        .mes-contribution-year-filter,
    .mes-contribution-filter-form
        .mes-contribution-filter-side
        .mes-contribution-status-filter {
        width: 100%;
    }
}

@media (max-width: 619px) {
    .mes-contribution-filter-form .mes-contribution-filter-side {
        grid-template-columns:
            minmax(104px, 0.34fr)
            minmax(0, 0.66fr) !important;
        gap: 6px;
    }

    .mes-contribution-filter-form
        .mes-contribution-filter-side
        .mes-contribution-status-filter select {
        min-width: 0;
        width: 100%;
    }
}

/* ========================================================================== 
   MES v0.1.4 BETA 4 – Mobile-Feinschliff Beitragsliste
   Erste Zeile bewusst nur Auswahl + Mitgliedsname. Beitragsdaten, Status und
   Aktionen folgen darunter, damit Name, Status und Buttons nicht konkurrieren.
   ========================================================================== */

@media (max-width: 899px) {
    .mes-contribution-list.has-selection .mes-contribution-row {
        grid-template-columns:
            34px
            minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto;
        align-items: start;
        gap: 7px 9px;
        padding: 10px 12px;
    }

    .mes-contribution-list.has-selection .mes-contribution-select-cell {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .mes-contribution-list.has-selection .mes-contribution-member {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .mes-contribution-list.has-selection .mes-contribution-amount {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
    }

    .mes-contribution-list.has-selection .mes-contribution-status-cell {
        grid-column: 2 !important;
        grid-row: 3 !important;
        justify-items: start;
        min-width: 0;
    }

    .mes-contribution-list.has-selection .mes-contribution-status-cell
        .mes-contribution-paid-on-value {
        display: block !important;
    }

    .mes-contribution-list.has-selection .mes-list-actions {
        grid-column: 2 !important;
        grid-row: 4 !important;
        justify-content: flex-start;
        min-width: 0;
    }

    .mes-contribution-list.without-selection .mes-contribution-row {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto;
        align-items: start;
        gap: 7px;
        padding: 10px 12px;
    }

    .mes-contribution-list.without-selection .mes-contribution-member {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .mes-contribution-list.without-selection .mes-contribution-amount {
        grid-column: 1;
        grid-row: 2;
    }

    .mes-contribution-list.without-selection .mes-contribution-status-cell {
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-items: start;
    }

    .mes-contribution-list.without-selection .mes-contribution-status-cell
        .mes-contribution-paid-on-value {
        display: block !important;
    }

    .mes-contribution-list.without-selection .mes-list-actions {
        grid-column: 1 !important;
        grid-row: 4 !important;
        justify-content: flex-start;
    }

    .mes-contribution-row .mes-contribution-member strong,
    .mes-contribution-row .mes-contribution-member a {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    .mes-contribution-row .mes-contribution-amount strong {
        font-size: 18.02px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .mes-contribution-row .mes-contribution-status-cell {
        gap: 3px;
    }

    .mes-contribution-row .mes-list-actions {
        padding-top: 1px;
    }
}

/* ========================================================================== 
   MES v0.1.4 BETA 5 – Mobile Beitragsliste platzoptimiert
   Zeile 1: Checkbox + Mitgliedsname
   Zeile 2: Betrag + Status + Aktionen
   ========================================================================== */

@media (max-width: 899px) {
    .mes-contribution-list.has-selection .mes-contribution-row {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            auto
            auto !important;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 7px;
        row-gap: 7px;
        padding: 9px 10px;
    }

    .mes-contribution-list.has-selection .mes-contribution-select-cell {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .mes-contribution-list.has-selection .mes-contribution-member {
        grid-column: 2 / -1;
        grid-row: 1;
        align-self: center;
        min-width: 0;
    }

    .mes-contribution-list.has-selection .mes-contribution-amount {
        grid-column: 1 / 3;
        grid-row: 2;
        align-self: center;
        min-width: 0;
    }

    .mes-contribution-list.has-selection .mes-contribution-status-cell {
        grid-column: 3 !important;
        grid-row: 2 !important;
        align-self: center;
        justify-items: start;
        min-width: 0;
    }

    .mes-contribution-list.has-selection .mes-list-actions {
        grid-column: 4 !important;
        grid-row: 2 !important;
        align-self: center;
        justify-content: flex-end;
        gap: 5px;
        min-width: 0;
        padding-top: 0;
    }

    .mes-contribution-list.without-selection .mes-contribution-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto !important;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 7px;
        row-gap: 7px;
        padding: 9px 10px;
    }

    .mes-contribution-list.without-selection .mes-contribution-member {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        min-width: 0;
    }

    .mes-contribution-list.without-selection .mes-contribution-amount {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
        min-width: 0;
    }

    .mes-contribution-list.without-selection .mes-contribution-status-cell {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: center;
        justify-items: start;
        min-width: 0;
    }

    .mes-contribution-list.without-selection .mes-list-actions {
        grid-column: 3 !important;
        grid-row: 2 !important;
        align-self: center;
        justify-content: flex-end;
        gap: 5px;
        padding-top: 0;
    }

    .mes-contribution-row .mes-contribution-amount strong {
        display: inline;
        font-size: 16.96px;
        line-height: 1.15;
        white-space: nowrap;
    }

    .mes-contribution-row .mes-contribution-amount small {
        display: inline;
        margin-left: 5px;
        font-size: 10.6px;
        line-height: 1.1;
        white-space: nowrap;
    }

    .mes-contribution-row .mes-contribution-status-cell {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .mes-contribution-row .mes-contribution-status-cell
        .mes-contribution-paid-on-value {
        display: inline !important;
        margin: 0;
        font-size: 10.07px;
        line-height: 1.1;
        white-space: nowrap;
    }

    .mes-contribution-row .mes-list-edit-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
    }
}

@media (max-width: 619px) {
    /* Auf echten Handybreiten zählt die kompakte Übersicht mehr als die
       Berechnungsquelle. Diese bleibt in Desktop/Tablet vollständig sichtbar. */
    .mes-contribution-row .mes-contribution-amount small {
        display: none;
    }

    .mes-contribution-row .mes-contribution-status-cell
        .mes-contribution-paid-on-value {
        display: none !important;
    }

    .mes-contribution-row .mes-contribution-status {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* ========================================================================== 
   MES v0.1.5 BETA 2 – Deployment-Diagnose: lange Serverpfade umbrechen
   ========================================================================== */

.mes-dev-command.mes-dev-command-wrap {
    overflow-x: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ========================================================================== 
   MES v0.1.6 BETA 1 – DEV → PROD Systemtransfer
   ========================================================================== */

.mes-transfer-grid {
    align-items: stretch;
}

.mes-transfer-count-grid,
.mes-transfer-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mes-transfer-count-grid > div,
.mes-transfer-result-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--mes-dev-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
}

.mes-transfer-count-grid span,
.mes-transfer-result-grid span {
    min-width: 0;
    color: var(--mes-dev-text-soft);
    overflow-wrap: anywhere;
}

.mes-transfer-count-grid strong,
.mes-transfer-result-grid strong {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.mes-transfer-upload-form,
.mes-transfer-apply-form {
    display: grid;
    gap: 10px;
}

.mes-transfer-upload-form label {
    font-weight: 700;
}

.mes-transfer-upload-form input[type="file"] {
    width: 100%;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--mes-dev-border);
    border-radius: 9px;
    color: var(--mes-dev-text);
    background: var(--mes-dev-dark);
}

.mes-transfer-analysis {
    margin-top: 18px;
}

.mes-transfer-analysis.is-ready {
    box-shadow: inset 4px 0 0 rgba(142, 209, 140, 0.78);
}

.mes-transfer-analysis.is-blocked {
    box-shadow: inset 4px 0 0 rgba(255, 130, 135, 0.82);
}

.mes-transfer-count-grid-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mes-transfer-message {
    padding: 12px 14px;
    border: 1px solid var(--mes-dev-border);
    border-radius: 10px;
    color: var(--mes-dev-text);
    background: var(--mes-dev-dark);
}

.mes-transfer-message strong {
    display: block;
    margin-bottom: 7px;
}

.mes-transfer-message ul {
    margin: 0;
    padding-left: 20px;
}

.mes-transfer-message li + li {
    margin-top: 4px;
}

.mes-transfer-message.is-warning {
    box-shadow: inset 3px 0 0 rgba(246, 220, 113, 0.88);
}

.mes-transfer-message.is-error {
    box-shadow: inset 3px 0 0 rgba(255, 130, 135, 0.82);
}

.mes-transfer-confirm {
    width: 100%;
}

.mes-transfer-apply-button {
    justify-self: start;
    border-color: rgba(142, 209, 140, 0.72);
}

.mes-transfer-hash {
    display: block;
    overflow-wrap: anywhere;
}

.mes-transfer-hash code {
    overflow-wrap: anywhere;
}

@media (max-width: 799px) {
    .mes-transfer-count-grid,
    .mes-transfer-count-grid-wide,
    .mes-transfer-result-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ========================================================================== 
   MES v0.3.0 BETA – globale Adresstypen / fachliche Beziehungen
   ========================================================================== */

.mes-addresses-page #organization-list-filter {
    align-items: center;
}

.mes-address-type-filter,
.mes-address-subtype-filter {
    min-width: 0;
}

.mes-address-type-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mes-address-type-card {
    display: grid;
    align-content: start;
    gap: 8px;

    min-width: 0;
    padding: 14px;

    border: 1px solid var(--mes-border);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.48);
}

.mes-address-type-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mes-address-type-card p,
.mes-address-type-card small {
    margin: 0;
}

.mes-address-type-card small {
    color: var(--mes-text-secondary);
    line-height: 1.35;
}

.mes-address-type-card form {
    margin-top: 2px;
}

.mes-role-badge.is-exhibitor,
.mes-role-badge.is-exhibitor-state,
.mes-role-badge.is-listed,
.mes-role-badge.is-accepted {
    background: rgba(151, 241, 201, 0.56);
    color: #24543f;
}

.mes-role-badge.is-supplier {
    background: rgba(255, 255, 178, 0.72);
    color: #5b5626;
}

.mes-role-badge.is-sponsor {
    background: rgba(240, 170, 177, 0.42);
    color: #6b2d35;
}

.mes-role-badge.is-cooperation-partner {
    background: rgba(179, 210, 244, 0.45);
    color: #284c70;
}

.mes-exhibitor-pool-row {
    cursor: default;
}

.mes-exhibitor-pool-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mes-exhibitor-pool-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

@media (min-width: 1000px) {
    .mes-addresses-page #organization-list-filter.mes-search-form-with-filter {
        grid-template-columns:
            minmax(280px, 1fr)
            minmax(165px, 0.46fr)
            minmax(220px, 0.62fr)
            auto
            auto;
    }
}

@media (min-width: 620px) and (max-width: 999px) {
    .mes-addresses-page #organization-list-filter.mes-search-form-with-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mes-addresses-page #organization-list-filter .mes-search-field {
        grid-column: 1 / -1;
    }

    .mes-addresses-page #organization-list-filter .mes-search-submit,
    .mes-addresses-page #organization-list-filter .mes-search-reset {
        justify-self: start;
    }
}

@media (max-width: 619px) {
    .mes-addresses-page #organization-list-filter.mes-search-form-with-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mes-addresses-page #organization-list-filter .mes-search-field,
    .mes-addresses-page #organization-list-filter .mes-search-submit,
    .mes-addresses-page #organization-list-filter .mes-search-reset {
        grid-column: 1 / -1;
    }

    .mes-address-type-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .mes-exhibitor-pool-secondary {
        align-items: flex-start;
        flex-direction: column;
    }

    .mes-exhibitor-pool-actions {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   MES v0.3.2 BETA – kompakte Adresstypen + inaktiver Vereinskontext
   ========================================================================== */

.mes-address-type-panel {
    margin: 0 0 16px;
    padding: 14px 16px;
}

.mes-address-type-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.mes-address-type-panel-head h2 {
    margin: 0;
    font-size: 19.08px;
    line-height: 1.25;
}

.mes-address-type-panel-head span {
    color: var(--mes-text-secondary);
    font-size: 13.78px;
}

.mes-address-type-checklist {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
}

.mes-address-type-checkbox {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.mes-address-type-checkbox input[type="checkbox"] {
    box-sizing: border-box;
    inline-size: 18px !important;
    block-size: 18px !important;
    min-inline-size: 18px !important;
    min-block-size: 18px !important;
    max-inline-size: 18px !important;
    max-block-size: 18px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    accent-color: var(--mes-primary);
}

.mes-address-type-checkbox > span {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mes-address-type-checkbox strong {
    font-size: 15.9px;
    line-height: 1.25;
}

.mes-address-type-checkbox small {
    color: var(--mes-text-secondary);
    font-size: 12.72px;
    line-height: 1.25;
}

.mes-address-type-panel.is-readonly {
    background: rgba(255, 255, 255, 0.72);
}

.mes-address-type-panel.is-readonly .mes-address-type-checkbox {
    cursor: default;
}

.mes-address-type-panel.is-readonly input[type="checkbox"] {
    opacity: 1;
}

.mes-form-section.is-inactive {
    opacity: 0.58;
    background: rgba(235, 237, 233, 0.44);
}

.mes-form-section.is-inactive > .mes-form-section-summary {
    cursor: not-allowed;
    pointer-events: none;
}

.mes-membership-context-fieldset:disabled {
    opacity: 0.64;
}

.mes-address-subtype-filter select:disabled {
    opacity: 0.56;
    cursor: not-allowed;
}

@media (min-width: 901px) and (max-width: 1240px) {
    .mes-address-type-checklist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .mes-address-type-checklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .mes-address-type-panel-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .mes-address-type-checklist {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   v0.3.4 – Organisations-Edit: eindeutige Sticky-Aktionsleiste
   ========================================================================== */

.mes-form-actions-editor {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
}

.mes-form-actions-editor > .mes-form-actions-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

@media (max-width: 619px) {
    .mes-form-actions-editor {
        grid-template-columns: 1fr;
    }

    .mes-form-actions-editor > .mes-form-actions-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mes-form-actions-editor > .mes-form-actions-group > :only-child {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   v0.3.5 – kompakte UX: gekoppelte Felder, Formulartexte, Repository
   ========================================================================== */

.mes-linked-field-group {
    min-inline-size: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--mes-border);
    border-radius: 12px;
    background: rgba(247, 248, 244, 0.70);
}

.mes-linked-field-group > legend {
    padding: 0 7px;
    font-weight: 750;
    color: var(--mes-text);
}

.mes-linked-field-group > .mes-form-grid {
    margin: 0;
}

.mes-linked-field-group > .mes-field-help {
    display: block;
    margin-top: 9px;
}

.mes-exhibitor-editor-text-options {
    display: grid;
    gap: 10px;
}

.mes-inline-editor-disclosure {
    overflow: hidden;
    border: 1px solid var(--mes-border);
    border-radius: 12px;
    background: rgba(247, 248, 244, 0.70);
}

.mes-inline-editor-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    list-style: none;
    cursor: pointer;
    font-weight: 750;
}

.mes-inline-editor-disclosure > summary::-webkit-details-marker {
    display: none;
}

.mes-inline-editor-disclosure > summary::marker {
    content: "";
    font-size: 0;
}

.mes-inline-editor-disclosure > summary::after {
    content: "▾";
    flex: 0 0 auto;
    color: var(--mes-text-secondary);
}

.mes-inline-editor-disclosure[open] > summary::after {
    content: "▴";
}

.mes-inline-editor-disclosure > summary small {
    margin-left: auto;
    color: var(--mes-text-secondary);
    font-size: 12.72px;
    font-weight: 650;
}

.mes-inline-editor-disclosure[open] > summary {
    border-bottom: 1px solid var(--mes-border);
    background: rgba(163, 179, 234, 0.08);
}

.mes-inline-editor-disclosure-body {
    padding: 14px;
}

.mes-character-counter {
    display: block;
    margin-top: 5px;
    text-align: right;
    color: var(--mes-text-secondary);
    font-variant-numeric: tabular-nums;
}

.mes-repository-collapsible {
    padding: 0;
}

.mes-repository-collapsible > .mes-form-section-summary {
    padding-block: 16px;
}

.mes-repository-collapsible .mes-repository-heading {
    margin-bottom: 0;
}

.mes-repository-summary-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--mes-bg);
    color: var(--mes-text-secondary);
    font-size: 12.72px;
    font-weight: 750;
    vertical-align: middle;
}

@media (max-width: 619px) {
    .mes-linked-field-group {
        padding: 11px;
    }

    .mes-inline-editor-disclosure > summary {
        align-items: flex-start;
        padding: 11px 12px;
    }

    .mes-inline-editor-disclosure > summary small {
        font-size: 11.66px;
    }

    .mes-inline-editor-disclosure-body {
        padding: 12px;
    }

    .mes-repository-collapsible > .mes-form-section-summary {
        padding-top: 13px;
        padding-bottom: 13px;
    }
}

/* ==========================================================================
   MES v0.3.6-beta – UX: Platzoptimierung, Kategorie-Suche, Edit-Footer
   ========================================================================== */

/*
 * Verein → Mitglieder:
 * Auf ausreichend breiten Displays passen die drei Kopfaktionen bewusst
 * in eine Zeile. Unterhalb der Schwelle bleibt das vorhandene flexible
 * Umbrechen erhalten.
 */
@media (min-width: 1180px) {
    .mes-memberships-index-page .mes-page-heading-actions {
        align-items: flex-start;
    }

    .mes-memberships-index-page
    .mes-page-heading-actions > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mes-memberships-index-page .mes-page-action-group {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        align-items: center;
        white-space: nowrap;
    }

    .mes-memberships-index-page
    .mes-page-action-group .mes-inline-form {
        display: flex;
        margin: 0;
    }
}

/*
 * Kategorie-Livesuche:
 * .mes-category-option besitzt ein eigenes display-Layout. Dadurch konnte
 * das HTML-hidden-Attribut vom Author-CSS überstimmt werden. Hidden muss
 * hier deshalb explizit gewinnen.
 */
.mes-category-option[hidden],
.mes-category-no-results[hidden] {
    display: none !important;
}

/*
 * Organisation/Mitglied bearbeiten:
 * Die Aktionsleiste liegt im Hauptformular, Dokumente und Notizen liegen
 * aus guten Gründen außerhalb dieses Formulars (eigene POST-Formulare).
 * position: sticky endet deshalb am Formularende. Für den Edit-Kontext wird
 * die Leiste kontrolliert am Viewport verankert; der Seiteninhalt reserviert
 * unten ausreichend Platz, damit nichts dauerhaft verdeckt wird.
 */
.mes-organization-edit-page .mes-main-form,
.mes-member-edit-page .mes-main-form {
    padding-bottom:
        max(
            96px,
            calc(74px + env(safe-area-inset-bottom))
        );
}

.mes-organization-edit-page .mes-form-actions-editor,
.mes-member-edit-page .mes-form-actions-editor {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 80;

    width:
        min(
            calc(100% - 28px),
            var(--mes-content-width)
        );

    transform: translateX(-50%);

    margin: 0;
    padding:
        10px
        12px
        max(10px, env(safe-area-inset-bottom));

    border: 1px solid rgba(31, 42, 30, 0.10);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;

    background: rgba(247, 248, 244, 0.97);

    box-shadow:
        0 -10px 28px rgba(31, 42, 30, 0.08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 619px) {
    .mes-organization-edit-page .mes-main-form,
    .mes-member-edit-page .mes-main-form {
        padding-bottom:
            max(
                148px,
                calc(126px + env(safe-area-inset-bottom))
            );
    }

    .mes-organization-edit-page .mes-form-actions-editor,
    .mes-member-edit-page .mes-form-actions-editor {
        width: calc(100% - 16px);
        padding-left: 8px;
        padding-right: 8px;
    }
}



/* ========================================================================== 
   MES v0.3.7 BETA 3 – kompakte Read-only-Adressansicht + Release-Precheck
   ========================================================================== */

/* Adressen → Organisation → Nur-Anzeige:
   Desktopfläche sinnvoll nutzen, ohne lange Freitextfelder zu quetschen. */
.mes-organization-show-page .mes-detail-section {
    padding: 20px 22px;
}

.mes-organization-show-page .mes-detail-section-heading {
    margin-bottom: 14px;
}

.mes-organization-show-page .mes-detail-section-heading h2 {
    font-size: 23.32px;
    line-height: 1.2;
}

.mes-organization-show-page .mes-detail-section-heading p {
    margin-top: 3px;
    font-size: 13.25px;
}

.mes-organization-show-page .mes-detail-grid {
    gap: 10px 18px;
}

.mes-organization-show-page .mes-detail-grid > div {
    min-width: 0;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--mes-border);
}

.mes-organization-show-page .mes-detail-grid dt {
    margin-bottom: 4px;
    font-size: 11.66px;
    line-height: 1.2;
    letter-spacing: 0.055em;
}

.mes-organization-show-page .mes-detail-grid dd {
    font-size: 16.96px;
    line-height: 1.32;
}

.mes-organization-show-page .mes-detail-grid .mes-detail-internal {
    padding: 10px 12px;
    border-bottom: 0;
}

.mes-organization-show-page .mes-detail-span-all {
    grid-column: 1 / -1;
}

@media (min-width: 620px) {
    .mes-organization-show-page .mes-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mes-organization-show-page .mes-detail-span-2,
    .mes-organization-show-page .mes-detail-span-all {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1120px) {
    .mes-organization-show-page .mes-detail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mes-organization-show-page .mes-detail-span-2 {
        grid-column: span 2;
    }

    .mes-organization-show-page .mes-detail-span-all {
        grid-column: 1 / -1;
    }
}

/* DEV/PROD Release-Precheck:
   Lange Detailtexte dürfen nicht mehr die Beschriftung auf einzelne Zeichen
   zusammenschieben. In den breiten Prüfkarten steht die Bezeichnung oben,
   der Wert darunter und nutzt die volle Kartenbreite. */
.mes-transfer-count-grid-wide > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-content: stretch;
    gap: 5px;
}

.mes-transfer-count-grid-wide > div > span,
.mes-transfer-count-grid-wide > div > strong {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

.mes-transfer-count-grid-wide > div > span {
    line-height: 1.25;
}

.mes-transfer-count-grid-wide > div > strong {
    flex: none;
    line-height: 1.35;
}

@media (min-width: 800px) and (max-width: 1199px) {
    .mes-transfer-count-grid-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========================================================================== 
   Einstellungen · Activity-Log
   ========================================================================== */

.mes-activity-log-page .mes-main {
    padding-bottom:
        max(96px, calc(74px + env(safe-area-inset-bottom)));
}

.mes-activity-log-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.mes-activity-log-toolbar .mes-filter-inline {
    display: flex;
    align-items: end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mes-activity-log-toolbar label {
    display: block;
    font-weight: 700;
}

.mes-activity-log-toolbar select {
    min-width: 8rem;
}

.mes-activity-log-page .mes-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.mes-activity-log-table {
    width: 100%;
    border-collapse: collapse;
}

.mes-activity-log-table th,
.mes-activity-log-table td {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--mes-border, #d8ddd9);
    text-align: left;
    vertical-align: top;
}

.mes-activity-log-table th {
    white-space: nowrap;
}

.mes-activity-log-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mes-activity-log-page .mes-pagination-wrap {
    margin-top: 1rem;
}

/*
 * Die Löschfunktion sitzt wie die übrigen Listenaktionen in einer schmalen,
 * dauerhaft sichtbaren Bottom-Bar. Die Activity-Liste nutzt damit dasselbe
 * Bedienprinzip wie Mitglieder-, Adress- und Beitragslisten.
 */
.mes-activity-log-bottom-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding-top: 7px;
    padding-bottom: max(7px, env(safe-area-inset-bottom));
}

.mes-activity-log-bottom-year {
    min-width: 0;

    font-size: 11.66px;
    font-weight: 720;
    letter-spacing: 0.04em;

    color: var(--mes-text-secondary);
}

.mes-activity-log-bottom-year strong {
    color: var(--mes-text);
}

.mes-activity-log-bottom-controls form {
    margin: 0;
}

.mes-activity-log-bottom-controls .mes-button {
    min-height: 38px;
    padding: 7px 12px;
    font-size: 13.78px;
}

@media (max-width: 720px) {
    .mes-activity-log-toolbar {
        align-items: stretch;
    }

    .mes-activity-log-toolbar > form {
        width: 100%;
    }

    .mes-activity-log-toolbar .mes-button {
        width: 100%;
    }

    .mes-activity-log-bottom-controls {
        display: flex;
        width: calc(100% - 10px);
    }

    .mes-activity-log-bottom-year {
        display: none;
    }

    .mes-activity-log-bottom-controls form,
    .mes-activity-log-bottom-controls .mes-button {
        width: 100%;
    }
}

/* ========================================================================== 
   MES v0.3.9-beta.1 – Mitgliedschaft „Neu / Zahlungseingang“ + Beitrags-UX
   ========================================================================== */

.mes-role-badge.is-pending,
.mes-membership-badge.is-pending {
    background: rgba(255, 231, 149, 0.58);
    color: #6c5412;
}

.mes-contribution-membership-status {
    width: fit-content;
    margin-top: 4px;
}

.mes-contribution-activation-toggle {
    margin-top: 6px;
}

.mes-contribution-activation-help {
    display: block;
    margin-top: 2px;
    color: var(--mes-text-secondary);
    font-size: 10.6px;
    line-height: 1.25;
}

.mes-contribution-member-address {
    margin: 0 0 14px;
    padding: 0;
    overflow: hidden;
}

.mes-contribution-member-address > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    list-style: none;
}

.mes-contribution-member-address > summary::-webkit-details-marker {
    display: none;
}

.mes-contribution-member-address > summary strong {
    flex: 0 0 auto;
}

.mes-contribution-member-address > summary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mes-text-secondary);
}

.mes-contribution-member-address-content {
    padding: 0 14px 11px;
    line-height: 1.45;
}

.mes-contribution-member-address-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
}

/* Gewünschter kompakter Zeilenabstand der Beitragsliste. */
.mes-contribution-row {
    padding: 4px 7px;
}

/* ========================================================================== 
   MES v0.3.9-beta.2 – Beitrags-Sammelleiste UX-Feinschliff
   ========================================================================== */

/*
 * Auswahl links kompakter, damit Aktion und Aktivierungsoption mehr nutzbare
 * Breite erhalten. Der rechte Aktivierungsblock bekommt bewusst den größeren
 * Anteil innerhalb der Buchungsoption.
 */
@media (min-width: 1025px) {
    .mes-contribution-batch-bar {
        grid-template-columns:
            minmax(150px, 0.55fr)
            minmax(250px, 0.95fr)
            minmax(390px, 1.35fr)
            minmax(130px, auto) !important;
        gap: 10px 14px;
    }
}

.mes-contribution-selection-summary {
    gap: 6px;
}

.mes-contribution-selection-summary strong {
    font-size: 14.84px;
    line-height: 1.2;
}

.mes-contribution-selection-actions {
    gap: 5px;
}

.mes-contribution-selection-button {
    min-height: 30px;
    padding: 4px 9px;
    font-size: 13.78px;
    line-height: 1.15;
    white-space: nowrap;
}

.mes-contribution-booking-option {
    display: grid;
    grid-template-columns:
        minmax(165px, 0.72fr)
        minmax(245px, 1.28fr);
    align-items: start;
    gap: 6px 14px;
}

.mes-contribution-booking-date-option,
.mes-contribution-activation-option {
    min-width: 0;
}

.mes-contribution-activation-toggle {
    margin-top: 0;
}

.mes-contribution-activation-help {
    margin-top: 2px;
    margin-left: 24px;
    font-size: 11.13px;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .mes-contribution-booking-option {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        align-items: start;
    }
}

@media (max-width: 619px) {
    .mes-contribution-selection-summary {
        row-gap: 6px;
    }

    .mes-contribution-selection-actions {
        gap: 4px;
    }

    .mes-contribution-selection-button {
        min-height: 29px;
        padding: 4px 8px;
        font-size: 12.72px;
    }
}


/* ========================================================================== 
   MES v0.3.9-beta.3 – Mobile Auswahlbuttons platzsparend
   ========================================================================== */

/*
 * Die beiden Auswahlaktionen bleiben auch auf kleinen Displays bewusst in
 * einer Zeile. So nutzt der Auswahlblock die Breite statt unnötig Höhe.
 */
.mes-contribution-selection-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.mes-contribution-selection-button {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 26px;
    padding: 2.5px 7px;
    font-size: 13.25px;
    line-height: 1.15;
    white-space: nowrap;
}

@media (max-width: 619px) {
    .mes-contribution-selection-summary {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 8px;
        align-items: center;
    }

    .mes-contribution-selection-actions {
        justify-self: start;
        gap: 4px;
    }

    .mes-contribution-selection-button {
        min-height: 25px;
        padding: 2.5px 6px;
        font-size: 12.19px;
    }
}


/* ========================================================================== 
   MES v0.3.9-beta.4 – Desktop-Layout + mobile Beitragsdichte
   ========================================================================== */

/*
 * Desktop: klare horizontale Werkzeugleiste ohne Überlappungen.
 * Mobil bleibt die bewährte gestapelte Bedienung erhalten.
 */
@media (min-width: 1280px) {
    .mes-contribution-batch-bar {
        grid-template-columns:
            minmax(250px, 0.72fr)
            minmax(285px, 0.92fr)
            minmax(420px, 1.28fr)
            minmax(135px, 0.40fr) !important;
        grid-template-areas: "selection action booking submit" !important;
        align-items: center;
        gap: 8px 12px;
    }

    .mes-contribution-selection-summary {
        min-width: 0;
        gap: 5px;
    }

    .mes-contribution-selection-actions {
        width: 100%;
        max-width: 100%;
        gap: 4px;
    }

    .mes-contribution-selection-button {
        min-height: 25px;
        padding: 2.5px 6px;
        font-size: 12.19px;
        line-height: 1.15;
    }

    /*
     * Aktions-Pulldown und Hilfetext stehen bewusst auf derselben 78-%-Flucht.
     */
    .mes-contribution-batch-action-select select,
    .mes-contribution-batch-action-select small {
        width: 78%;
        max-width: 78%;
    }

    /* Buchungsdatum und Aktivierungsoption erhalten exakt gleich viel Raum. */
    .mes-contribution-booking-option {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 14px;
        align-items: start;
    }

    .mes-contribution-booking-date-option,
    .mes-contribution-activation-option {
        width: 100%;
        min-width: 0;
    }

    .mes-contribution-booking-toggle {
        white-space: normal;
    }

    .mes-contribution-activation-help {
        max-width: 100%;
    }
}

/*
 * Mobil: Beitragszeilen möglichst einzeilig und informationsdicht.
 * Sichtbar bleiben Auswahl, Name, Beitrag, Zahlungsstatus und Bearbeiten.
 * Kontakt/Adresse bleiben wie bisher ausgeblendet.
 */
@media (max-width: 899px) {
    .mes-contribution-row {
        grid-template-columns:
            27px
            minmax(0, 1fr)
            auto
            auto
            32px;
        gap: 2px 5px;
        min-height: 38px;
        padding: 3px 5px;
    }

    .mes-contribution-select-cell {
        grid-column: 1;
        grid-row: 1;
    }

    .mes-row-checkbox {
        width: 27px;
        min-height: 30px;
    }

    .mes-row-checkbox input {
        width: 16px;
        height: 16px;
    }

    .mes-contribution-member {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
    }

    .mes-contribution-member strong {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13.25px;
        line-height: 1.05;
    }

    .mes-contribution-member a {
        display: block;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Der lange Neumitglied-Status wird mobil platzsparend als „Neu“ gezeigt. */
    .mes-contribution-membership-status {
        flex: 0 0 auto;
        margin: 0;
        padding: 1px 4px;
        max-width: 32px;
        overflow: hidden;
        white-space: nowrap;
        font-size: 0;
        line-height: 1;
    }

    .mes-contribution-membership-status::after {
        content: "Neu";
        font-size: 8.48px;
        line-height: 1.1;
    }

    .mes-contribution-amount {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
        white-space: nowrap;
    }

    .mes-contribution-amount strong {
        font-size: 12.72px;
        line-height: 1;
    }

    .mes-contribution-amount small {
        display: none !important;
    }

    .mes-contribution-row > div[data-label="Status"] {
        grid-column: 4;
        grid-row: 1;
    }

    .mes-contribution-status {
        min-height: 18px;
        padding: 1px 5px;
        font-size: 9.01px;
        line-height: 1.05;
    }

    .mes-contribution-row > .mes-list-actions {
        grid-column: 5;
        grid-row: 1;
    }

    .mes-contribution-row .mes-list-edit-button {
        width: 30px;
        min-width: 30px;
        min-height: 30px;
        height: 30px;
        padding: 4px;
    }

    .mes-contribution-row .mes-row-action-icon {
        width: 16px;
        height: 16px;
    }
}

/* Auf sehr schmalen Geräten bleibt der Betrag erhalten; der Name gibt Platz ab. */
@media (max-width: 390px) {
    .mes-contribution-row {
        grid-template-columns:
            25px
            minmax(72px, 1fr)
            auto
            auto
            30px;
        gap: 2px 4px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .mes-contribution-member strong {
        font-size: 12.72px;
    }

    .mes-contribution-amount strong {
        font-size: 12.19px;
    }
}


/* ========================================================================== 
   MES v0.3.9-beta.5 – Beitrags-UX Desktop-Feinschliff + mobile Verdichtung
   ========================================================================== */

/*
 * Desktop: Den Aktionsblock leicht nach rechts rücken, ohne die bestehende
 * Spaltenaufteilung oder die 78-%-Breite von Select und Hilfetext zu ändern.
 */
@media (min-width: 1280px) {
    .mes-contribution-batch-bar .mes-contribution-batch-action-select {
        box-sizing: border-box;
        padding-left: 14px;
    }
}

/*
 * Mobil/Tablet: Mitgliedsname und Betrag bilden links einen kompakten
 * Zweizeiler. Status und Bearbeiten bleiben rechts. Dadurch sinkt die
 * Zeilenhöhe deutlich, ohne die Auswahlbuttons der Sammelleiste anzufassen.
 */
@media (max-width: 899px) {
    .mes-contribution-list.has-selection .mes-contribution-row {
        grid-template-columns:
            32px
            minmax(0, 1fr)
            auto
            32px !important;
        grid-template-rows: auto auto !important;
        align-items: center;
        column-gap: 6px;
        row-gap: 2px;
        min-height: 0;
        padding: 5.75px 10px !important;
    }

    .mes-contribution-list.has-selection .mes-contribution-select-cell {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .mes-contribution-list.has-selection .mes-contribution-member {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        min-width: 0;
    }

    .mes-contribution-list.has-selection .mes-contribution-amount {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        min-width: 0;
    }

    .mes-contribution-list.has-selection .mes-contribution-status-cell {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        align-self: center;
        justify-items: start;
        min-width: 0;
    }

    .mes-contribution-list.has-selection .mes-list-actions {
        grid-column: 4 !important;
        grid-row: 1 / span 2 !important;
        align-self: center;
        justify-content: flex-end;
        min-width: 0;
        padding-top: 0;
    }

    .mes-contribution-list.without-selection .mes-contribution-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            32px !important;
        grid-template-rows: auto auto !important;
        align-items: center;
        column-gap: 6px;
        row-gap: 2px;
        min-height: 0;
        padding: 5.75px 10px !important;
    }

    .mes-contribution-list.without-selection .mes-contribution-member {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: end;
        min-width: 0;
    }

    .mes-contribution-list.without-selection .mes-contribution-amount {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        min-width: 0;
    }

    .mes-contribution-list.without-selection .mes-contribution-status-cell {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: center;
        justify-items: start;
        min-width: 0;
    }

    .mes-contribution-list.without-selection .mes-list-actions {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        align-self: center;
        justify-content: flex-end;
        min-width: 0;
        padding-top: 0;
    }

    .mes-contribution-list.has-selection .mes-contribution-member strong,
    .mes-contribution-list.has-selection .mes-contribution-member a,
    .mes-contribution-list.without-selection .mes-contribution-member strong,
    .mes-contribution-list.without-selection .mes-contribution-member a {
        display: block;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
    }

    .mes-contribution-row .mes-contribution-member small {
        display: none;
    }

    .mes-contribution-row .mes-contribution-amount strong {
        display: block;
        font-size: 15.9px;
        line-height: 1.05;
        white-space: nowrap;
    }

    .mes-contribution-row .mes-contribution-amount small {
        display: none;
    }

    .mes-contribution-row .mes-contribution-status-cell
        .mes-contribution-paid-on-value {
        display: none !important;
    }
}


/* ========================================================================== 
   MES v0.3.9-beta.7 – Auswahlbuttons nur auf Mobilgeräten nebeneinander
   ========================================================================== */

/*
 * Tablet und Desktop: Auswahlaktionen bewusst untereinander. Das verhindert
 * Überlappungen mit dem Aktionsblock bei mittleren Desktop-/Fensterbreiten.
 */
.mes-contribution-selection-actions {
    display: grid;
    grid-template-columns: max-content;
    align-items: center;
    justify-items: start;
    gap: 5px;
    min-width: 0;
}

/*
 * Breiter Desktop: der vom Nutzer abgestimmte Abstand des Aktionsblocks.
 * Unter 1280 px greift dieser Zusatzabstand bewusst nicht.
 */
@media (min-width: 1280px) {
    .mes-contribution-batch-bar .mes-contribution-batch-action-select {
        box-sizing: border-box;
        padding-left: 48px;
    }
}

/*
 * Nur auf Handys: beide Auswahlbuttons nebeneinander, weil dort die
 * horizontale Anordnung platzsparender ist und im getesteten Layout passt.
 */
@media (max-width: 619px) {
    .mes-contribution-selection-actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-self: start;
        gap: 4px;
        min-width: 0;
    }
}

/* MES beta.2.4 – kompakte mobile Navigation und Beitragsaktionen. */
.mes-mobile-only { display: none; }
@media (max-width: 619px) {
    .mes-desktop-only { display: none; }
    .mes-mobile-only { display: inline; }
    .mes-organization-top-back { display: none; }
    .mes-organization-detail-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }
    .mes-organization-detail-actions .mes-detail-actions-group {
        display: flex;
        flex: 0 0 auto;
        order: -1;
        margin: 0;
    }
    .mes-organization-detail-actions .mes-button { width: auto; }
    .mes-contribution-page .mes-contribution-selection-button {
        min-height: 28px;
        display: inline-block;
        padding-top: 5.4px;
        padding-bottom: 5.4px;
    }
    .mes-contribution-booking-option {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        gap: 6px;
    }
    .mes-contribution-booking-toggle {
        font-size: 14.84px;
        white-space: normal;
        align-items: center;
    }
}

/* MES v0.3.10-beta.2.8 – Empfängerübersicht bei Event-Benachrichtigungen. */
.mes-bne-recipient-overview {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border: 1px solid #dbe1d7;
    border-radius: 12px;
    background: #f8faf7;
}
.mes-bne-recipient-overview > strong {
    display: block;
    margin-bottom: .5rem;
}
.mes-bne-recipient-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    padding: .35rem 0;
    overflow-wrap: anywhere;
}
.mes-bne-recipient-row + .mes-bne-recipient-row {
    border-top: 1px solid #e5eae1;
}
.mes-bne-recipient-row a { overflow-wrap:anywhere; }

/* Formularoptionen abhängig vom ausgewählten Event */
[data-mes-form-type][hidden] { display:none !important; }
/* LFR-Editor: neue/spezialisierte Optionen beim Typwechsel zuverlässig ausblenden. */
[data-mes-lfr-only][hidden],
[data-mes-standard-only][hidden],
[data-mes-lfr-option-hint][hidden],
[data-mes-standard-option-hint][hidden],
[data-mes-form-type-locked-hint][hidden] { display: none !important; }


/* MES v0.3.10-beta.2.11: Save/Confirm-Buttons auf hellem Grün lesbar. */
.mes-button-confirm,
.mes-button-confirm:hover,
.mes-button-save:not(:disabled),
.mes-button-save:not(:disabled):hover {
    color: #1f2a1e;
    border-color: #8cbd81;
}
.mes-button-save:not(:disabled) {
    background-color: #ceffc0;
}
.mes-button-save:not(:disabled):hover,
.mes-button-confirm:hover {
    background-color: #b6ecaa;
}
.mes-button-save:focus-visible,
.mes-button-confirm:focus-visible {
    outline: 3px solid #674da1;
    outline-offset: 3px;
}
[data-mes-bne-panel][hidden] { display: none !important; }
.mes-exhibitor-bne-general { margin-top: 1rem; }
.mes-form-actions.mes-exhibitor-single-save {
    position: sticky;
    bottom: 0;
    z-index: 25;
}

/* MES v0.3.10-beta.2.13: Mitgliedschaft – Datumsfelder und kompakter Beitragsbereich. */
.mes-membership-dates {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}
.mes-membership-dates > .mes-field { min-width: 0; }
[data-mes-membership-left-date][hidden] { display: none !important; }

@media (min-width: 760px) {
    .mes-membership-dates:not(.is-single-date) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mes-membership-contributions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: clamp(14px, 2vw, 22px);
    border: 1px solid var(--mes-border);
    border-radius: var(--mes-radius);
    background: #f8faf6;
}
.mes-membership-contributions > h3 {
    margin: 0;
    font-size: 1.166rem;
    line-height: 1.3;
}

.mes-membership-contributions .mes-field .mes-membership-free-label {
    width: fit-content;
    max-width: 100%;
    padding: 2px 0;
    color: var(--mes-text);
    font-size: 1.007rem;
    font-weight: 500;
}
.mes-membership-free-label span { font-weight: inherit; }
.mes-membership-contributions .mes-membership-free-label input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-height: 0;
    padding: 0;
}
.mes-contribution-individual-grid { width: 100%; }
.mes-membership-contributions .mes-contribution-partial-year-block {
    width: 100%;
    min-width: 0;
    margin-top: 18px;
}
.mes-membership-contributions .mes-contribution-partial-year-block > .mes-form-grid {
    width: 100%;
}
/* Beitragsfrei: Alle Beitragseingaben gemeinsam ausblenden. */
[data-mes-free-contribution-fields] { display: block; width: 100%; min-width: 0; }
[data-mes-free-contribution-fields][hidden] { display: none !important; }

/* Mitglieder: optionale, reduzierte Zeitraumauswertung ohne Änderung der Standardliste. */
.mes-membership-compact-scroll { overflow-x: auto; }
.mes-membership-compact-table { width: 100%; border-collapse: collapse; min-width: 740px; }
.mes-membership-compact-table th, .mes-membership-compact-table td { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--mes-border-color, #dce1d8); text-align: left; vertical-align: top; }
.mes-membership-compact-table th { background: #f4f6f2; font-weight: 700; }
.mes-membership-compact-table a { color: inherit; text-underline-offset: 2px; }
.mes-membership-compact-table tbody tr:hover { background: #f6f8f4; }
.mes-muted-date { display: block; color: #667363; margin-top: 0.25rem; }

/* v0.3.10-beta.2.14: Jahresbezogene Begründung der Beitragsbefreiung */
.mes-membership-free-reason { width: 100%; min-width: 0; margin-block: 10px 4px; }
.mes-membership-free-reason textarea { width: 100%; max-width: 100%; }
[data-mes-free-contribution-reason][hidden] { display: none !important; }

/* MES v0.3.10-beta.2.15: Individueller Beitragsstatus, Beitragsfrei-Kennzeichnung */
.mes-contribution-single-editor {
    border: 1px solid var(--mes-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 2px 0 18px;
    background: rgba(255, 255, 255, 0.62);
}
.mes-contribution-single-editor .mes-checkbox {
    margin: 8px 0;
}
.mes-contribution-single-editor [data-mes-single-contribution-date-wrap] {
    margin-top: 8px;
}
.mes-contribution-single-editor [data-mes-single-contribution-date-wrap] label {
    display: block;
    font-weight: 650;
    margin-bottom: 5px;
}
.mes-contribution-single-editor [data-mes-single-contribution-activate-wrap] {
    margin-top: 12px;
}
.mes-contribution-amount .mes-contribution-free-label {
    font-weight: 750;
    color: #315e3f;
}

/* MES beta.1.3.4: Kleine UX-Vereinheitlichungen, nur betroffene Listen. */
/* Organisationen: Suchfeld 50%; danach Adresstyp und Archivstatus. */
.mes-addresses-page #organization-list-filter .mes-address-subtype-filter:has(select:disabled) {
    display: none;
}
@media (min-width: 620px) {
    .mes-addresses-page #organization-list-filter.mes-search-form-with-filter {
        display: grid;
        grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
        align-items: center;
    }
    /* Ist der zusätzliche Untertyp aktiv, bleibt das Suchfeld bei 50%. */
    .mes-addresses-page #organization-list-filter.mes-search-form-with-filter:has(.mes-address-subtype-filter select:not(:disabled)) {
        grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 619px) {
    .mes-addresses-page #organization-list-filter.mes-search-form-with-filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mes-addresses-page #organization-list-filter .mes-address-type-filter { grid-column: 1; grid-row: 1; }
    .mes-addresses-page #organization-list-filter .mes-search-filter:has(> #organization-archive) { grid-column: 2; grid-row: 1; }
    .mes-addresses-page #organization-list-filter .mes-search-field { grid-column: 1 / -1; grid-row: 2; }
    .mes-addresses-page #organization-list-filter .mes-address-subtype-filter:not(:has(select:disabled)) { grid-column: 1 / -1; grid-row: 3; }
}
/* Die Eventliste war mit 13px / 11px kleiner als andere Verwaltungslisten. */
.mes-events-page .mes-event-row .mes-event-main > strong,
.mes-events-page .mes-event-row .mes-event-location > strong,
.mes-events-page .mes-event-row .mes-event-time > strong { font-size: 15.9px; }
.mes-events-page .mes-event-row .mes-event-main small,
.mes-events-page .mes-event-row .mes-event-time span,
.mes-events-page .mes-event-row .mes-event-location span { font-size: 13.78px; }
.mes-events-page .mes-event-row .mes-event-segment-count { font-size: 11.66px; }
.mes-events-page .mes-event-row .mes-event-status { font-size: 12.72px; }

/* Formular-Zusatzoption: Author-CSS darf HTML hidden nicht uebersteuern. */
[data-custom-option-config-fields][hidden] { display:none !important; }


/* MES beta.2.0.17 – Pflichtbereiche in der Organisationsbearbeitung */
.mes-record-form .mes-required-section > .mes-form-section-summary {
    background: rgba(174, 51, 70, .065);
}
.mes-record-form .mes-required-section-marker {
    display: inline-block;
    margin-left: .4em;
    padding: .16em .54em;
    border-radius: .6em;
    font-size: .62em;
    font-weight: 700;
    vertical-align: middle;
    color: #8c3444;
    background: rgba(174, 51, 70, .11);
}
.mes-record-form .mes-required-section.is-incomplete {
    border: 2px solid #bb4455;
}
.mes-record-form .mes-required-section.is-incomplete > .mes-form-section-summary {
    background: rgba(201, 56, 74, .135);
}
.mes-record-form .mes-required-section.is-incomplete .mes-required-section-marker {
    color: #822132;
    background: rgba(201, 56, 74, .19);
}
.mes-record-form .mes-required-section.is-incomplete .mes-required-section-marker::before {
    content: "⚠ ";
}
.mes-record-form .mes-required-section-help {
    color: #9b273b;
    font-weight: 650;
    margin: .2rem 0 1.1rem;
}
.mes-record-form .mes-required-field-missing input {
    border-color: #c43f55;
    background: rgba(201, 56, 74, .045);
}
@media (prefers-reduced-motion: reduce) {
    .mes-record-form .mes-required-section > .mes-form-section-summary { transition: none; }
}


/* MES beta.2.0.23: Dashboard-Schnellzugriff mit den bestehenden Rollenrechten. */
.mes-dashboard-quickaccess { margin: 0 0 1.5rem; }
.mes-dashboard-quickaccess-title { margin: 0 0 1rem; font-size: clamp(1.378rem, 3.18vw, 1.802rem); }
.mes-dashboard-quickaccess-group { margin: 0 0 1.1rem; }
.mes-dashboard-quickaccess-group-title { margin: 0 0 .25rem; font-size: 1.06rem; font-weight: 700; }
.mes-dashboard-quickaccess-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 180px));
    align-items: start;
    justify-content: start;
    gap: .6rem;
}
.mes-dashboard-quickaccess-grid-events { grid-template-columns: repeat(4, minmax(0, 180px)); }
.mes-dashboard-quickaccess-link {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    text-decoration: none;
    border-radius: 1.5rem;
    transition: transform .16s ease, filter .16s ease;
}
.mes-dashboard-quickaccess-link img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mes-dashboard-quickaccess-link:hover { transform: translateY(-3px); filter: brightness(1.025); }
.mes-dashboard-quickaccess-link:focus-visible { outline: 3px solid var(--mes-primary); outline-offset: 3px; }
.mes-dashboard-separator { height: 1px; border: 0; background: var(--mes-border); margin: 1.6rem 0; }
@media (max-width: 850px) {
    .mes-dashboard-quickaccess-grid-events { grid-template-columns: repeat(2, minmax(0, 180px)); }
}
@media (max-width: 430px) {
    .mes-dashboard-quickaccess-grid,
    .mes-dashboard-quickaccess-grid-events { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mes-dashboard-quickaccess-link { transition: none; }
    .mes-dashboard-quickaccess-link:hover { transform: none; }
}


/* MES beta.2.0.24: Startseite als kompakter Navigationseinstieg. */
.mes-dashboard-page .mes-page-heading { margin-bottom: .65rem; }
.mes-dashboard-page .mes-dashboard-quickaccess { margin-bottom: .65rem; }
.mes-dashboard-page .mes-dashboard-quickaccess-title { margin-bottom: .45rem; }
.mes-dashboard-page .mes-dashboard-quickaccess-group { margin-bottom: .55rem; }
.mes-dashboard-page .mes-dashboard-quickaccess-group-title { margin-bottom: .08rem; }
.mes-dashboard-page .mes-dashboard-separator { margin: 1rem 0; }

@media (max-width: 640px) {
    /* Auf Smartphones zählen die Bildbuttons statt erklärender Zwischenzeilen. */
    .mes-dashboard-page .mes-page-intro,
    .mes-dashboard-page .mes-dashboard-quickaccess-title { display: none; }
    .mes-dashboard-page .mes-page-heading { margin-bottom: .35rem; }
    .mes-dashboard-page .mes-dashboard-quickaccess-group { margin-bottom: .35rem; }
    .mes-dashboard-page .mes-dashboard-quickaccess-group-title { margin-bottom: 0; }
    .mes-dashboard-page .mes-dashboard-quickaccess { margin-bottom: .4rem; }
    .mes-dashboard-page .mes-dashboard-separator { margin: .7rem 0; }
}

/* MES beta.2.0.26: Adressen und Settings nebeneinander, auch mobil. */
.mes-dashboard-quickaccess-grid-management {
    grid-template-columns: repeat(2, minmax(0, 180px));
}
@media (max-width: 430px) {
    .mes-dashboard-quickaccess-grid-management {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Fahrradrallye: manuelle Meldung innerhalb des bestehenden Erfassungsformulars. */
.mes-exhibitor-manual-page .mes-manual-lfr-answers {
    margin: 1rem 0 1.2rem; padding: 1rem 1.1rem;
    border: 1px solid var(--mes-border-strong); border-radius: 14px;
    background: var(--mes-white);
}
.mes-exhibitor-manual-page .mes-manual-lfr-answers.mes-manual-lfr-pending {
    border-color: #dfa4a8; background: var(--mes-danger);
}
.mes-exhibitor-manual-page .mes-manual-lfr-answers legend { padding: 0 .4rem; font-weight: 750; }
.mes-exhibitor-manual-page .mes-manual-lfr-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.mes-exhibitor-manual-page .mes-manual-lfr-label { display:block; font-weight:700; margin-bottom:.3rem; }
.mes-exhibitor-manual-page [data-manual-lfr-donation-text] { margin-top:1rem; }
.mes-exhibitor-manual-page [data-manual-lfr-answer-hint] { display:block; margin-top:.6rem; color:var(--mes-text-secondary); }
.mes-exhibitor-manual-page [data-manual-lfr-answer-hint][hidden] { display:none !important; }
@media (max-width:560px) {
    .mes-exhibitor-manual-page .mes-manual-lfr-grid { grid-template-columns: minmax(0,1fr); }
}


/* MES beta.2.0.28 R13: Presse-Mitglieder – kompakter Kurzbeschreibungstoggle.
   Bestehende Mitgliederliste, Druckansichten und AJAX-Suche bleiben erhalten. */
@media (min-width: 860px) {
    .mes-memberships-index-page .mes-member-list-head.mes-member-press-head,
    .mes-memberships-index-page .mes-member-row.mes-member-press-row {
        grid-template-columns: minmax(220px, 1.45fr) minmax(190px, 1.15fr) minmax(210px, 1.2fr);
    }
}
.mes-memberships-index-page .mes-member-press-row .mes-member-press-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 36px;
    margin: .2rem 0;
    padding: .25rem .4rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #2b573c;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}
.mes-memberships-index-page .mes-member-press-toggle:hover { background: #edf6ee; }
.mes-memberships-index-page .mes-member-press-toggle:focus-visible { outline: 3px solid #436c48; outline-offset: 2px; }
.mes-memberships-index-page .mes-member-press-arrow-up { display: none; }
.mes-memberships-index-page .mes-member-press-toggle[aria-expanded="true"] .mes-member-press-arrow-up { display: inline; }
.mes-memberships-index-page .mes-member-press-toggle[aria-expanded="true"] .mes-member-press-arrow-down { display: none; }
.mes-memberships-index-page .mes-member-press-row .mes-member-press-description {
    grid-column: 1 / -1;
    min-width: 0;
    padding: .1rem 0 .2rem;
    overflow-wrap: anywhere;
}
.mes-memberships-index-page .mes-member-press-row .mes-member-press-description[hidden] { display: none !important; }
.mes-memberships-index-page .mes-member-press-description p {
    margin: 0;
    white-space: pre-line;
}
@media (max-width: 859px) {
    .mes-memberships-index-page .mes-member-row.mes-member-press-row .mes-member-press-description {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}