/*
 * MampfPlan
 * Mobile-first Stylesheet.
 * Das visuelle Design wird spaeter bewusst neu aufgebaut.
 */

:root {
    color-scheme: light;
    --mp-bg: #f7f1e7;
    --mp-surface: #ffffff;
    --mp-text: #1b2230;
    --mp-text-soft: #667085;
    --mp-border: #e4e7ec;
    --mp-border-strong: #d6dae1;
    --mp-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
    --mp-accent: #ff8a3d;
    --mp-accent-strong: #ea6b17;
    --mp-accent-soft: #fff1e6;
    --mp-day-header-bg: #f9f0e3;
    --mp-day-body-top: #f9f0e3;
    --mp-day-body-bottom: #f2e4d2;
    --mp-day-footer-bg: #eedcc8;
    --mp-sat-header-bg: #edf4ff;
    --mp-sat-body-top: #edf4ff;
    --mp-sat-body-bottom: #e1ecfb;
    --mp-sat-footer-bg: #d7e5f8;
    --mp-sun-header-bg: #fbeeee;
    --mp-sun-body-top: #fbeeee;
    --mp-sun-body-bottom: #f4e1e1;
    --mp-sun-footer-bg: #edd5d5;
    --mp-scroll-top-overflow: 50px;
}

html,
body {
    min-height: 100%;
}

body.mp-app {
    margin: 0;
    background: var(--mp-bg);
    color: var(--mp-text);
    font-family: "Open Sans", Arial, sans-serif;
}

.mp-shell {
    min-height: 100vh;
    min-height: 100dvh;
    padding:
        max(0.75rem, env(safe-area-inset-top))
        env(safe-area-inset-right)
        max(1rem, env(safe-area-inset-bottom))
        env(safe-area-inset-left);
}

.mp-layout {
    width: 100%;
}

.mp-topbar {
    top: 0;
    z-index: 1030;
    margin-bottom: 0;
}

.mp-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-height: 3.9rem;
    padding: 0.2rem 0.2rem 0.2rem 0.1rem;
    border-bottom: 1px solid var(--mp-border);
    background: rgba(247, 241, 231, 0.96);
    backdrop-filter: blur(10px);
}

.mp-menu-button,
.mp-avatar-button {
    width: 3.4rem;
    height: 3.4rem;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--mp-text);
    text-decoration: none;
}

.mp-topbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.1rem;
}

.mp-menu-button i,
.mp-avatar-button i {
    font-size: 1.95rem;
}

.mp-family-switch-button {
    position: relative;
    width: 3.4rem;
    height: 3.4rem;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--mp-text);
}

.mp-family-switch-button i {
    font-size: 1.75rem;
}

.mp-family-switch-icon {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.mp-family-switch-button span {
    position: absolute;
    right: calc(0.4rem - 5px);
    bottom: calc(0.45rem - 5px);
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mp-accent-strong);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 3px 9px rgba(234, 107, 23, 0.25);
}

.mp-family-switch-dropdown {
    position: fixed !important;
    top: 4.25rem !important;
    right: auto !important;
    left: 50% !important;
    width: 90vw;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 0.45rem;
    padding: 0.65rem;
    border: 1px solid rgba(27, 34, 48, 0.08);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
    transform: translateX(-50%) !important;
}

.mp-family-switch-dropdown-title {
    padding: 0 0.25rem 0.45rem;
    color: var(--mp-text-soft);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mp-family-switch-dropdown-list {
    display: grid;
    gap: 0.45rem;
}

.mp-family-switch-dropdown-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.35rem 0.4rem;
    border-radius: 0.95rem;
    background: #f8fafc;
    border: 1px solid #edf2f7;
}

.mp-family-switch-dropdown-row.is-active {
    background: var(--mp-accent-soft);
    border-color: rgba(234, 107, 23, 0.22);
}

.mp-family-switch-count {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--mp-accent-strong);
    font-size: 0.92rem;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(234, 107, 23, 0.18);
}

.mp-family-switch-name {
    min-width: 0;
    overflow: hidden;
    color: var(--mp-text);
    font-size: 0.94rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-family-switch-visit {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent-strong));
    color: #ffffff;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 0 7px 16px rgba(246, 111, 22, 0.2);
}

.mp-family-switch-visit:hover,
.mp-family-switch-visit:focus {
    color: #ffffff;
}

.mp-topbar-avatar-image {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 16px rgba(27, 34, 48, 0.12);
}

.mp-topbar-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    margin-right: auto;
    margin-left: 0.5rem;
    text-decoration: none;
}

.mp-topbar-logo img {
    display: block;
    width: auto;
    max-width: min(9.75rem, 100%);
    height: 2.8rem;
    object-fit: contain;
}

.mp-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    max-width: min(14.5rem, calc(100% - 8.5rem));
    margin-right: auto;
    margin-left: 0.35rem;
    text-decoration: none;
    color: inherit;
}

.mp-topbar-brand-logo {
    display: block;
    flex: 0 0 auto;
    width: 2.85rem;
    height: 2.85rem;
    object-fit: contain;
}

.mp-topbar-family {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
    line-height: 1.15;
}

.mp-topbar-family-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mp-text-soft);
}

.mp-topbar-family-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--mp-accent-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-branding {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
    padding-inline: 0.15rem 0.35rem;
}

.mp-branding strong {
    order: 1;
    font-size: 1.45rem;
    font-weight: 700;
}

.mp-branding-kicker,
.mp-offcanvas-kicker,
.mp-day-date,
.mp-meal-type {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mp-branding-kicker,
.mp-offcanvas-kicker,
.mp-day-date,
.mp-meal-type {
    color: var(--mp-text-soft);
}

.mp-branding-kicker {
    order: 2;
    margin-top: 0.15rem;
}

.mp-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: var(--mp-scroll-top-overflow);
}

.mp-page-header {
    padding: 1rem 1rem 0.65rem;
}

.mp-page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mp-page-header h1 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
}

.mp-page-header-inner--gericht-neu {
    justify-content: space-between;
    align-items: center;
}

.mp-gratis-credits-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-height: 2.85rem;
    padding: 0.4rem 0.85rem 0.4rem 0.65rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd54f 0%, #ffb300 38%, #f59e0b 72%, #ea6b17 100%);
    color: #4a2800;
    font-weight: 800;
    line-height: 1.15;
    box-shadow:
        0 0.4rem 1rem rgba(245, 158, 11, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mp-gratis-credits-button:hover,
.mp-gratis-credits-button:focus {
    color: #3d2000;
    transform: translateY(-1px);
    box-shadow:
        0 0.55rem 1.2rem rgba(245, 158, 11, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mp-gratis-credits-button:disabled {
    opacity: 0.65;
    transform: none;
}

.mp-gratis-credits-button .mp-wallet-icon-gratis-credits-button {
    width: 2.35rem;
    height: 2.35rem;
    flex-shrink: 0;
}

.mp-gratis-credits-button-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    text-align: left;
}

.mp-gratis-credits-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mp-gratis-credits-modal-hero {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.mp-gratis-credits-modal-hero .mp-wallet-icon-gratis-credits-hero {
    flex-shrink: 0;
}

.mp-gratis-credits-modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mp-text);
    flex: 1;
    min-width: 0;
}

.mp-gratis-credits-modal-body {
    padding-bottom: 0.75rem;
}

.mp-gratis-credits-absenden {
    margin-bottom: 50px;
}

.mp-gratis-credits-copy .mp-card-copy {
    font-size: 0.84rem;
    line-height: 1.45;
}

.mp-gratis-credits-copy .mp-card-copy + .mp-card-copy {
    margin-top: 0.5rem;
}

#mpGratisCreditsModal .modal-dialog {
    width: calc(100% - 1.5rem);
    max-width: 32rem;
    margin-inline: auto;
}

.mp-gratis-credits-modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
}

.mp-gratis-credits-modal-content .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.mp-gericht-form-credits {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    border-radius: 999px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mp-gericht-form-credits:hover,
.mp-gericht-form-credits:focus {
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}

.mp-gericht-form-credits:focus-visible {
    outline: 2px solid var(--mp-accent-strong);
    outline-offset: 3px;
}

.mp-gericht-form-credits .mp-wallet-icon-gericht-form-header {
    width: 3.3rem;
    height: 3.3rem;
    flex-shrink: 0;
    display: block;
}

.mp-gericht-form-credits-amount {
    position: absolute;
    top: -0.35rem;
    right: calc(-0.45rem - 10px);
    min-width: 1.45rem;
    padding: 0.12rem 0.35rem;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid var(--mp-accent-strong);
    box-shadow: 0 0.15rem 0.45rem rgba(234, 107, 23, 0.2);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    color: #5c3200;
    text-align: center;
}

.mp-offcanvas {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--mp-shadow);
}

.mp-toolbar {
    padding: 0.75rem 1rem 0.9rem;
    border-bottom: 1px solid var(--mp-border-strong);
    background: var(--mp-surface);
}

.mp-toolbar-plain {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.9rem 1.1rem;
    border-bottom: 0;
    background: transparent;
}

.mp-gericht-filter-wrap {
    position: sticky;
    top: calc(max(0.75rem, env(safe-area-inset-top)) + 4rem);
    z-index: 1020;
    padding: 0 0.85rem 1rem;
    overflow: hidden;
    background: transparent;
}

.mp-gericht-filter-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.mp-gericht-filter-list {
    display: flex;
    gap: 0.65rem;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    padding-bottom: 0;
    background: transparent;
}

.mp-gericht-filter-scroll::-webkit-scrollbar {
    display: none;
}

.mp-gericht-filter-button {
    flex: 0 0 auto;
    min-height: 2.45rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(234, 107, 23, 0.18);
    background: rgba(255, 255, 255, 0.82);
    color: var(--mp-text);
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: none;
}

.mp-gericht-filter-button i {
    color: var(--mp-accent-strong);
}

.mp-gericht-filter-count {
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
}

.mp-gericht-filter-button.is-active {
    background: var(--mp-accent-soft);
    border-color: rgba(234, 107, 23, 0.42);
    color: var(--mp-accent-strong);
    box-shadow: none;
}

.mp-gericht-filter-button.is-active i {
    color: var(--mp-accent-strong);
}

.mp-gericht-filter-button:hover,
.mp-gericht-filter-button:focus,
.mp-gericht-filter-button:active {
    box-shadow: none;
}

.mp-gericht-filter-search {
    flex: 0 0 100px;
    width: 100px;
    min-height: 2.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(234, 107, 23, 0.18);
    background: rgba(255, 255, 255, 0.82);
    color: var(--mp-text);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: none;
}

.mp-gericht-filter-search::placeholder {
    color: var(--mp-text-soft);
    font-weight: 600;
}

.mp-gericht-filter-search:focus {
    outline: none;
    box-shadow: none;
}

.mp-gericht-filter-search:focus:placeholder-shown {
    border-color: rgba(234, 107, 23, 0.18);
    background: rgba(255, 255, 255, 0.82);
    color: var(--mp-text);
}

.mp-gericht-filter-search:not(:placeholder-shown) {
    outline: none;
    border-color: rgba(234, 107, 23, 0.42);
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
}

.mp-toolbar-actions {
    display: grid;
    gap: 0.65rem;
}

.mp-primary-button,
.mp-secondary-button,
.mp-outline-button,
.mp-footer-button {
    border-radius: 1.15rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.15rem;
}

.mp-primary-button {
    background: linear-gradient(135deg, #ff9d4d 0%, var(--mp-accent) 42%, var(--mp-accent-strong) 100%);
    color: #ffffff;
    border: 0;
    box-shadow: 0 12px 22px rgba(234, 107, 23, 0.24);
}

.mp-primary-button:hover,
.mp-primary-button:focus {
    color: #ffffff;
}

.mp-primary-button i {
    font-size: 1.1rem;
}

.mp-primary-button .mp-menu-icon,
.mp-secondary-button .mp-menu-icon {
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 2.2rem;
}

.mp-secondary-button,
.mp-footer-button {
    background: var(--mp-surface);
    color: var(--mp-text);
    border: 1px solid var(--mp-border);
}

.mp-outline-button {
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
    border: 2px solid var(--mp-accent);
    box-shadow: none;
}

.mp-outline-button:hover,
.mp-outline-button:focus,
.mp-outline-button:focus-visible {
    background: #fff3e8;
    color: var(--mp-accent-strong);
    border-color: var(--mp-accent-strong);
}

.mp-ghost-button {
    width: 2.8rem;
    min-width: 2.8rem;
    height: 2.8rem;
    min-height: 2.8rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 1rem;
    border: 1px solid var(--mp-border);
    background: rgba(255, 255, 255, 0.9);
    color: var(--mp-text);
    box-shadow: 0 8px 18px rgba(16, 19, 26, 0.05);
}

.mp-ghost-button-danger {
    color: #8a2d15;
}

.mp-day-list {
    display: grid;
    gap: 1rem;
    padding: 0.3rem 0.85rem 1rem;
    background: transparent;
}

.mp-day-section {
    width: 100%;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 1.5rem;
    background: linear-gradient(180deg, #fffaf4 0%, var(--mp-day-body-bottom) 100%);
    box-shadow:
        0 20px 40px rgba(27, 34, 48, 0.09),
        0 6px 14px rgba(27, 34, 48, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.mp-day-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 30%, transparent 52%);
    pointer-events: none;
}

.mp-day-header,
.mp-day-body,
.mp-day-footer {
    position: relative;
    z-index: 1;
}

.mp-day-section:last-child {
    margin-bottom: 0;
}

.mp-day-samstag {
    background: linear-gradient(180deg, #f8fbff 0%, var(--mp-sat-body-bottom) 100%);
}

.mp-day-sonntag {
    background: linear-gradient(180deg, #fff9f9 0%, var(--mp-sun-body-bottom) 100%);
}

.mp-day-header {
    padding: 1.05rem 1rem 0.8rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, var(--mp-day-header-bg) 100%);
    border-bottom: 1px solid rgba(27, 34, 48, 0.05);
}

.mp-day-samstag .mp-day-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, var(--mp-sat-header-bg) 100%);
}

.mp-day-sonntag .mp-day-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, var(--mp-sun-header-bg) 100%);
}

.mp-day-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mp-day-header-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.mp-day-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
}

.mp-day-header h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.mp-day-date {
    margin: 0;
    white-space: nowrap;
}

.mp-day-header-copy .mp-day-date {
    font-size: 1.35rem;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 700;
}

.mp-day-body {
    display: block;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, var(--mp-day-body-bottom) 100%);
}

.mp-day-samstag .mp-day-body {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, var(--mp-sat-body-bottom) 100%);
}

.mp-day-sonntag .mp-day-body {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, var(--mp-sun-body-bottom) 100%);
}

.mp-meal-entry {
    margin: 0.65rem 0.75rem;
    border: 1px solid var(--mp-border);
    border-radius: 1.15rem;
    background: var(--mp-surface);
    overflow: hidden;
}

.mp-meal-head {
    display: grid;
    gap: 0.65rem;
    padding: 0.95rem 1rem;
    background: var(--mp-surface);
}

.mp-meal-head-row {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.mp-meal-meta-stack {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    justify-items: start;
}

.mp-meal-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.mp-meal-time-row .mp-meal-type {
    min-width: 0;
}

.mp-meal-meta-stack .mp-gericht-kategorie-badge {
    width: fit-content;
    max-width: 100%;
}

.mp-meal-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.mp-meal-icon {
    width: 5.25rem;
    height: 5.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    color: var(--mp-accent-strong);
    box-shadow: inset 0 0 0 1px rgba(234, 107, 23, 0.14);
}

.mp-meal-icon-wrap {
    position: relative;
    flex-shrink: 0;
    overflow: visible;
}

.mp-mitessen-preview-badge {
    position: absolute;
    top: 5px;
    left: 3px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 4px rgba(27, 34, 48, 0.16);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.mp-mitessen-preview-badge i {
    font-size: 0.95rem;
    line-height: 1;
}

.mp-mitessen-preview-badge.is-offen {
    color: #8b95a7;
}

.mp-mitessen-preview-badge.is-ja {
    color: #2f7a47;
}

.mp-mitessen-preview-badge.is-unklar {
    color: #3b6fd8;
}

.mp-mitessen-preview-badge.is-nein {
    color: #c0392b;
}

.mp-meal-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-meal-icon i {
    font-size: 2.2rem;
}

.mp-meal-copy {
    min-width: 0;
}

.mp-meal-meta {
    margin-bottom: 0.15rem;
}

.mp-meal-type {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mp-meal-type i {
    font-size: 0.9rem;
}

.mp-uhrzeit-text {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
}

.mp-uhrzeit-text-hero {
    font-size: 2.4rem;
}

.mp-uhrzeit-suffix {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

.mp-meal-icon-trigger {
    cursor: pointer;
    padding: 0;
    border: 0;
}

.mp-meal-icon-trigger:focus-visible {
    outline: 2px solid var(--mp-accent-strong);
    outline-offset: 2px;
}

.mp-meal-details {
    display: grid;
    gap: 0.85rem;
    padding: 0.85rem 1rem 1rem;
    background: var(--mp-surface);
}

.mp-meal-entry--buffet {
    padding-bottom: 0.35rem;
}

.mp-meal-buffet-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.95rem 1rem 0.75rem;
    border-bottom: 1px solid var(--mp-border);
    color: var(--mp-text-soft);
}

.mp-meal-buffet-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--mp-border);
}

.mp-meal-buffet-item:last-child {
    border-bottom: 0;
    padding-bottom: 0.65rem;
}

.mp-meal-buffet-item-head {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.mp-meal-buffet-item-copy {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.mp-meal-buffet-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.mp-meal-buffet-item-meta .mp-gericht-kategorie-badge {
    width: fit-content;
    max-width: calc(100% - 1.75rem);
}

.mp-meal-buffet-item-title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.mp-body-wochenplan .mp-gericht-kategorie-badge {
    min-height: 1.55rem;
    padding: 0.28rem 0.55rem;
    font-size: calc(0.78rem - 1px);
}

.mp-body-wochenplan .mp-meal-title,
.mp-body-wochenplan .mp-meal-buffet-item-title {
    font-size: 0.95rem;
}

.mp-meal-buffet-details {
    display: grid;
    gap: 0.85rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.65rem 0 0;
    margin: 0;
    box-sizing: border-box;
    background: var(--mp-surface);
}

.mp-detail-block + .mp-detail-block {
    margin-top: 0.9rem;
}

.mp-detail-block h4 {
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    font-size: 0.95rem;
}

.mp-planung-delete-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.9rem;
}

.mp-planung-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(138, 45, 21, 0.35);
    border-radius: 0.9rem;
    background: rgba(138, 45, 21, 0.05);
    color: #8a2d15;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: none;
}

.mp-planung-delete-button:hover,
.mp-planung-delete-button:focus {
    border-color: rgba(138, 45, 21, 0.5);
    background: rgba(138, 45, 21, 0.08);
    color: #8a2d15;
}

.mp-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mp-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.2rem 0.7rem;
    background: #f7f8fa;
    border: 1px solid var(--mp-border);
    font-size: 0.9rem;
}

.mp-chip-muted {
    background: rgba(255, 255, 255, 0.55);
    color: var(--mp-text-soft);
}

.mp-plan-termine-list {
    display: grid;
    gap: 0.35rem;
}

.mp-plan-termin-eintrag {
    color: #2f7a47;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.45;
}

.mp-rating-list {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(27, 34, 48, 0.08);
}

.mp-rating-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(27, 34, 48, 0.08);
}

.mp-rating-name {
    font-weight: 600;
    min-width: 0;
}

.mp-stars {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    color: var(--mp-accent-strong);
    white-space: nowrap;
}

.mp-mitessen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1rem 0 0.5rem;
}

.mp-mitessen-head h3,
.mp-mitessen-head h4 {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 0;
}

.mp-mitessen-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.mp-mitessen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    line-height: 1;
    transition: box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.mp-mitessen-btn i {
    font-size: 1.45rem;
    line-height: 1;
}

.mp-mitessen-btn.is-ja {
    color: #2f7a47;
    border-color: rgba(47, 122, 71, 0.35);
}

.mp-mitessen-btn.is-unklar {
    color: #3b6fd8;
    border-color: rgba(59, 111, 216, 0.35);
}

.mp-mitessen-btn.is-nein {
    color: #c0392b;
    border-color: rgba(192, 57, 43, 0.35);
}

.mp-mitessen-btn.is-selected.is-ja {
    background: rgba(47, 122, 71, 0.12);
    box-shadow: 0 0 0 2px rgba(47, 122, 71, 0.22), 0 0 10px rgba(47, 122, 71, 0.32);
}

.mp-mitessen-btn.is-selected.is-unklar {
    background: rgba(59, 111, 216, 0.12);
    box-shadow: 0 0 0 2px rgba(59, 111, 216, 0.2), 0 0 10px rgba(59, 111, 216, 0.28);
}

.mp-mitessen-btn.is-selected.is-nein {
    background: rgba(192, 57, 43, 0.1);
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.2), 0 0 10px rgba(192, 57, 43, 0.28);
}

.mp-mitessen-btn:active {
    transform: scale(0.96);
}

.mp-mitessen-btn.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

.mp-mitessen-list .mp-rating-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.35rem 0.6rem;
}

.mp-mitessen-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    flex-shrink: 0;
}

.mp-mitessen-status-icon i {
    font-size: 1.1rem;
    line-height: 1;
}

.mp-mitessen-status-icon.is-offen {
    color: #8b95a7;
}

.mp-mitessen-status-icon.is-ja {
    color: #2f7a47;
}

.mp-mitessen-status-icon.is-unklar {
    color: #3b6fd8;
}

.mp-mitessen-status-icon.is-nein {
    color: #c0392b;
}

.mp-page-subtitle {
    margin: 0.35rem 0 0;
    color: var(--mp-text-soft);
}

.mp-inline-alert {
    margin: 0;
}

.mp-gericht-grid {
    display: grid;
    gap: 1rem;
    padding: 0.4rem 0.3rem 1rem;
}

.mp-gericht-card {
    display: grid;
    gap: 1rem;
    padding: 0.9rem 0.85rem;
}

.mp-gericht-head {
    display: grid;
    gap: 0.3rem;
}

.mp-gericht-head-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mp-gericht-title {
    margin: 0;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.mp-gericht-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.mp-gericht-actions form {
    margin: 0;
}

.mp-gericht-image-wrap {
    position: relative;
    overflow: visible;
    border-radius: 1.2rem;
    background: #f3f5f8;
    border: 1px solid var(--mp-border);
}

.mp-gericht-image-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    text-align: left;
    overflow: hidden;
    border-radius: 1.2rem;
}

.mp-gericht-image-trigger:focus-visible {
    outline: 2px solid var(--mp-accent-strong);
    outline-offset: 2px;
}

.mp-gericht-image-chevron {
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--mp-accent-strong);
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(27, 34, 48, 0.12);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.mp-gericht-image-trigger[aria-expanded="true"] .mp-gericht-image-chevron {
    transform: rotate(180deg);
}

.mp-gericht-rating-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.04rem;
    min-height: 1.25rem;
    padding: 0.15rem 0.42rem;
    border-radius: 999px;
    background: var(--mp-accent-soft);
    border: 1px solid rgba(234, 107, 23, 0.14);
    color: var(--mp-accent-strong);
    font-size: 0.72rem;
    line-height: 1;
    pointer-events: none;
}

.mp-gericht-rating-badge i {
    font-size: 0.72rem;
}

.mp-gericht-rate-hint-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 1.25rem;
    padding: 0.1rem calc(0.38rem + 5px);
    border-radius: 999px;
    background: var(--mp-accent-soft);
    border: 1px solid rgba(234, 107, 23, 0.14);
    color: var(--mp-accent-strong);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.mp-gericht-rate-hint-badge i {
    font-size: 0.68rem;
    color: var(--mp-accent-strong);
}

.mp-gericht-body {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.15rem;
}

.mp-gericht-card .mp-detail-block h3 {
    font-size: 0.82rem;
    font-weight: 800;
    margin: 0 0 0.15rem;
}

.mp-gericht-card .mp-detail-block .mp-card-copy,
.mp-gericht-card .mp-plan-termine-list {
    margin-top: 0;
}

.mp-gericht-card .mp-detail-block + .mp-detail-block {
    margin-top: 0.55rem;
}

.mp-rating-row-dishes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(27, 34, 48, 0.08);
}

.mp-rating-row-dishes:last-child {
    border-bottom: 0;
}

.mp-rating-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.mp-rating-row-head .mp-member-role-badge {
    flex: 0 0 auto;
}

.mp-rating-row-body {
    min-width: 0;
}

.mp-rating-row-dishes .mp-rating-control {
    justify-items: stretch;
    min-width: 0;
    width: 100%;
}

.mp-rating-static-stars {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    color: var(--mp-accent-strong);
    font-size: 1.35rem;
    line-height: 1;
}

.mp-gericht-image-wrap-empty {
    min-height: 12rem;
    display: block;
}

.mp-gericht-image-wrap-empty .mp-gericht-image-trigger {
    min-height: 12rem;
    display: grid;
    place-items: center;
}

.mp-gericht-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    pointer-events: none;
}

.mp-gericht-image-placeholder {
    display: grid;
    gap: 0.45rem;
    justify-items: center;
    color: var(--mp-text-soft);
    text-align: center;
    pointer-events: none;
}

.mp-gericht-image-placeholder i {
    font-size: 2rem;
}

.mp-accordion-card {
    border: 0;
    border-radius: 1.15rem;
    background: transparent;
    overflow: visible;
    box-shadow:
        0 0 0 1.5px rgba(234, 107, 23, 0.52),
        0 0 10px rgba(234, 107, 23, 0.34);
    transition: box-shadow 0.2s ease;
}

.mp-accordion-card:has(.mp-accordion-trigger[aria-expanded="true"]) {
    box-shadow:
        0 0 0 1.5px rgba(234, 107, 23, 0.72),
        0 0 12px rgba(234, 107, 23, 0.42);
}

.mp-accordion-card:has(.mp-accordion-trigger:hover),
.mp-accordion-card:has(.mp-accordion-trigger:focus-visible) {
    box-shadow:
        0 0 0 1.5px rgba(234, 107, 23, 0.72),
        0 0 12px rgba(234, 107, 23, 0.42);
}

.mp-accordion-trigger {
    width: 100%;
    border: 0;
    padding: 0.95rem 1.05rem;
    min-height: 3.15rem;
    background: var(--mp-surface);
    border-radius: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mp-text);
    cursor: pointer;
    transition: background 0.15s ease;
}

.mp-accordion-trigger:hover,
.mp-accordion-trigger:focus-visible {
    background: #ffffff;
    outline: none;
}

.mp-accordion-trigger:active {
    background: #f8f9fb;
}

.mp-accordion-trigger .mp-pro-accordion-title {
    flex: 1;
    min-width: 0;
}

.mp-accordion-trigger i.bi-chevron-down {
    flex: 0 0 auto;
    font-size: 1.35rem;
    color: var(--mp-accent-strong);
    -webkit-text-stroke: 0.55px var(--mp-accent-strong);
    transition: transform 0.2s ease;
}

.mp-accordion-trigger[aria-expanded="true"] i.bi-chevron-down {
    transform: rotate(180deg);
}

.mp-accordion-card:has(.collapse.show) .mp-accordion-trigger {
    border-radius: 1.15rem 1.15rem 0 0;
}

.mp-accordion-body {
    padding: 0.85rem 0.95rem 0.95rem;
    border-top: 1px solid rgba(27, 34, 48, 0.08);
    background: var(--mp-surface);
    border-radius: 0 0 1.15rem 1.15rem;
}

.mp-rating-list-dishes {
    border-top: 0;
}

.mp-rating-row-rich {
    align-items: start;
}

.mp-rating-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.mp-rating-role {
    color: var(--mp-text-soft);
    font-size: 0.85rem;
}

.mp-rating-static {
    display: grid;
    justify-items: end;
    gap: 0.25rem;
}

.mp-open-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #f7f8fa;
    border: 1px solid var(--mp-border);
    color: var(--mp-text-soft);
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: lowercase;
}

.mp-open-badge-with-star {
    gap: 0.3rem;
}

.mp-open-badge-with-star i {
    font-size: 0.82rem;
    color: var(--mp-accent-strong);
}

.mp-rating-control {
    display: grid;
    justify-items: end;
    gap: 0.5rem;
    min-width: 14rem;
}

.mp-rating-stars-visual {
    display: inline-flex;
    gap: 0.2rem;
    color: var(--mp-accent-strong);
    pointer-events: none;
}

.mp-rating-star {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    font-size: 1.2rem;
}

.mp-rating-main {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.mp-rating-none-button {
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 34, 48, 0.08);
    color: var(--mp-text-soft);
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
    justify-self: center;
}

.mp-rating-none-button i {
    font-size: 1.1rem;
}

.mp-rating-none-button.is-active {
    background: rgba(231, 76, 60, 0.12);
    color: #d94736;
    box-shadow: inset 0 0 0 1px rgba(217, 71, 54, 0.22);
}

.mp-rating-stars-visual-large {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
    grid-column: 2 / span 5;
}

.mp-rating-star-large {
    width: 100%;
    height: 2.35rem;
    font-size: 2rem;
}

.mp-rating-slider {
    width: 100%;
    accent-color: var(--mp-accent-strong);
}

.mp-rating-value {
    color: var(--mp-text-soft);
    font-size: 0.88rem;
}

.mp-rating-row-rich.is-current-user .mp-rating-value {
    font-size: 0.94rem;
    font-weight: 600;
}

.mp-rating-control.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

.mp-gericht-upload-panel {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.mp-gericht-preview,
.mp-dashboard-next-meal-empty {
    background:
        linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
        url('../img/essen_hintergrund.png') center / cover no-repeat,
        #f7f8fa;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.mp-gericht-preview {
    position: relative;
    overflow: hidden;
    border-radius: 1.3rem;
    border: 1px dashed rgba(19, 94, 203, 0.36);
}

.mp-dashboard-next-meal-empty {
    aspect-ratio: 16 / 9;
    border-radius: 1.3rem;
    border: 1px dashed rgba(19, 94, 203, 0.36);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.25rem;
    text-align: center;
    overflow: hidden;
}

.mp-dashboard-next-meal-empty p {
    margin: 0;
    max-width: 28rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--mp-text-soft);
}

.mp-gericht-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.mp-gericht-preview-placeholder {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 0;
    background: transparent;
    color: var(--mp-text);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.mp-gericht-preview-placeholder:hover,
.mp-gericht-preview-placeholder:focus {
    background: rgba(255, 255, 255, 0.22);
    outline: none;
}

.mp-gericht-upload-camera {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.75rem;
    height: 5.75rem;
    font-size: 3.85rem;
    line-height: 1;
    color: var(--mp-accent-strong);
    border: 3px solid var(--mp-accent-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.42),
        0 0.35rem 1rem rgba(234, 107, 23, 0.2);
}

.mp-gericht-upload-hint {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mp-text-soft);
}

.mp-croppie-wrap-gericht {
    display: flex;
    justify-content: center;
}

.mp-crop-control {
    display: grid;
    gap: 0.55rem;
    width: min(100%, 15.5rem);
    margin: 1rem auto 0;
}

.mp-crop-rotate-actions {
    display: flex;
    justify-content: center;
    gap: 1.85rem;
    margin: 2.0rem auto 0;
}

.mp-crop-rotate-actions-profile {
    margin-top: -0.3rem;
}

.mp-crop-icon-button {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--mp-accent);
    box-shadow: 0 0.45rem 1.1rem rgba(27, 34, 48, 0.12);
}

.mp-crop-icon-button i {
    font-size: 1.35rem;
}

.mp-ingredient-builder {
    display: grid;
    gap: 0.85rem;
}

.mp-pro-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    padding: 1.05rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(19, 94, 203, 0.34);
    background: linear-gradient(135deg, rgba(235, 244, 255, 0.96), rgba(255, 255, 255, 0.9));
    box-shadow: 0 0.75rem 1.8rem rgba(19, 94, 203, 0.12), 0 0 0 0.18rem rgba(19, 94, 203, 0.06);
    cursor: pointer;
}

.mp-pro-toggle .form-check-input {
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    border: 2px solid #135ecb;
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(19, 94, 203, 0.12);
    cursor: pointer;
}

.mp-pro-toggle .form-check-input:checked {
    border-color: #0d6efd;
    background-color: #0d6efd;
    box-shadow: 0 0 0 0.26rem rgba(13, 110, 253, 0.2), 0 0 1.15rem rgba(13, 110, 253, 0.62);
}

.mp-pro-toggle .form-check-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.28rem rgba(13, 110, 253, 0.24);
}

.mp-pro-toggle-copy {
    display: grid;
}

.mp-pro-toggle-copy strong {
    color: #0b4fb3;
    font-size: 1.08rem;
    line-height: 1.25;
}

.mp-foto-upload-button {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.35rem 1.05rem;
    border-radius: 1.2rem;
    border: 0;
    min-height: auto;
    background: linear-gradient(135deg, #ff9d4d 0%, var(--mp-accent) 42%, var(--mp-accent-strong) 100%);
    color: #ffffff;
    box-shadow: 0 12px 22px rgba(234, 107, 23, 0.24);
    font-weight: 700;
    text-align: left;
}

.mp-foto-upload-button:hover,
.mp-foto-upload-button:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #ff9d4d 0%, var(--mp-accent) 42%, var(--mp-accent-strong) 100%);
}

.mp-foto-upload-button span {
    font-size: 1.28rem;
    line-height: 1.25;
}

.mp-foto-upload-button-icon {
    font-size: 2.0rem;
    line-height: 1;
    flex-shrink: 0;
    color: #ffffff;
}

.mp-essen-vorschlagen-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.35rem;
    padding: 0.85rem 1.1rem;
    border-radius: 1.15rem;
    border: 2px solid var(--mp-accent-strong);
    background: linear-gradient(180deg, #ffffff 0%, #fff8f1 100%);
    color: var(--mp-accent-strong);
    box-shadow:
        0 0 0 1px rgba(234, 107, 23, 0.14),
        0 0 1rem rgba(255, 138, 61, 0.42),
        0 0 1.85rem rgba(234, 107, 23, 0.2);
    animation: mp-essen-vorschlagen-glow 2.4s ease-in-out infinite;
}

.mp-essen-vorschlagen-button-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
}

.mp-essen-vorschlagen-button-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.mp-essen-vorschlagen-button-title {
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.15;
}

.mp-essen-vorschlagen-button-sub {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mp-text-soft);
}

.mp-ki-credit-cost-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    line-height: 1;
}

.mp-ki-credit-cost-inline-amount {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--mp-accent-strong);
}

.mp-essen-vorschlagen-button:hover,
.mp-essen-vorschlagen-button:focus {
    color: var(--mp-accent-strong);
    background: linear-gradient(180deg, #fff8f1 0%, #ffeede 100%);
    border-color: var(--mp-accent-strong);
    box-shadow:
        0 0 0 1px rgba(234, 107, 23, 0.2),
        0 0 1.25rem rgba(255, 138, 61, 0.55),
        0 0 2.2rem rgba(234, 107, 23, 0.28);
}

.mp-essen-vorschlagen-button:hover .mp-essen-vorschlagen-button-sub,
.mp-essen-vorschlagen-button:focus .mp-essen-vorschlagen-button-sub {
    color: #8a4d18;
}

@keyframes mp-essen-vorschlagen-glow {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(234, 107, 23, 0.14),
            0 0 0.85rem rgba(255, 138, 61, 0.34),
            0 0 1.55rem rgba(234, 107, 23, 0.16);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(234, 107, 23, 0.22),
            0 0 1.35rem rgba(255, 138, 61, 0.58),
            0 0 2.35rem rgba(234, 107, 23, 0.3);
    }
}

.mp-essen-vorschlag-frage {
    margin: 0 0 0.85rem;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--mp-text);
}

.mp-essen-vorschlag-intro {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    padding: 0.8rem 0.9rem;
    border-radius: 1rem;
    background: rgba(255, 241, 230, 0.9);
    color: var(--mp-text);
}

.mp-essen-vorschlag-intro i {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: var(--mp-accent-strong);
}

.mp-essen-vorschlag-hinweis {
    margin: -0.35rem 0 0.85rem;
    font-size: 0.92rem;
}

.mp-essen-vorschlag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.mp-essen-vorschlag-chip {
    border: 1px solid rgba(234, 107, 23, 0.34);
    background: rgba(255, 255, 255, 0.92);
    color: var(--mp-accent-strong);
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.mp-essen-vorschlag-chip:hover,
.mp-essen-vorschlag-chip:focus {
    border-color: var(--mp-accent-strong);
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
}

.mp-essen-vorschlag-chip.is-active {
    border-color: var(--mp-accent-strong);
    background: linear-gradient(135deg, #ff9d4d 0%, var(--mp-accent) 42%, var(--mp-accent-strong) 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(234, 107, 23, 0.22);
}

.mp-essen-vorschlag-laden {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 1.25rem 0.5rem;
    text-align: center;
}

.mp-essen-vorschlag-laden .mp-page-loader-spinner {
    width: 2.4rem;
    height: 2.4rem;
}

.mp-essen-vorschlag-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.mp-essen-vorschlag-footer .btn {
    min-width: 7.5rem;
}

.mp-pro-hint {
    grid-column: 1 / -1;
    margin-top: -0.05rem;
    padding: 0;
    color: var(--mp-text-soft);
    display: grid;
    gap: 0.35rem;
    line-height: 1.5;
}

.mp-pro-hint-credits {
    color: #0b4fb3;
    font-size: 1rem;
}

.mp-pro-hint-phase {
    color: #0b4fb3;
    font-size: 0.82rem;
    font-weight: 700;
}

.mp-pro-credits-kaufen-button {
    width: 100%;
    margin-top: 0.45rem;
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.95rem;
    background: linear-gradient(135deg, #1a7cff 0%, #0d6efd 48%, #0b4fb3 100%);
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 0.55rem 1.25rem rgba(13, 110, 253, 0.32);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mp-pro-credits-kaufen-button:hover,
.mp-pro-credits-kaufen-button:focus {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0.7rem 1.45rem rgba(13, 110, 253, 0.38);
}

.mp-card-pro {
    grid-column: 1 / -1;
}

.mp-pro-vorschlaege-copy {
    margin-bottom: 1rem;
}

.mp-pro-vorschlaege-copy-warn {
    margin: 0 0 0.7rem;
    color: #8a2d15;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

.mp-pro-accordion-list--essen-start {
    margin-top: 0.85rem;
}

.mp-pro-accordion-list {
    display: grid;
    gap: 0.85rem;
}

.mp-pro-accordion-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.mp-pro-accordion-body {
    display: grid;
    gap: 1rem;
}

.mp-pro-vorschlag-bild {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--mp-border);
    background: #f7f8fa;
}

.mp-pro-vorschlag-bild img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.mp-pro-vorschlaege-copy-hinweis {
    display: block;
    margin-top: 0.45rem;
    font-weight: 400;
    color: var(--mp-text-soft);
    line-height: 1.45;
}

.mp-pro-vorschlag-hinweis {
    margin-bottom: 0;
    color: var(--mp-text-soft);
}

.mp-pro-vorschlag-quelle-button {
    margin-bottom: 0.35rem;
}

.mp-pro-vorschlag-quelle-button i {
    margin-right: 0.35rem;
}

.mp-pro-vorschlag-quelle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    color: var(--mp-text-soft);
}

.mp-pro-vorschlag-quelle i {
    color: var(--mp-accent-strong);
}

.mp-pro-vorschlag-quelle a {
    color: var(--mp-accent-strong);
    font-weight: 700;
    text-decoration: none;
}

.mp-pro-vorschlag-quelle a:hover,
.mp-pro-vorschlag-quelle a:focus {
    text-decoration: underline;
}

.mp-preline {
    white-space: pre-line;
    line-height: 1.5;
}

.mp-ingredient-add-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border-radius: 1.1rem;
    background: var(--mp-accent-soft);
    border: 1px solid rgba(234, 107, 23, 0.22);
}

.mp-ingredient-add-title {
    color: var(--mp-text);
    font-size: 0.95rem;
    font-weight: 700;
}

.mp-ingredient-list {
    display: grid;
    gap: 0.65rem;
}

.mp-ingredient-item {
    display: grid;
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
    border-radius: 1rem;
    background: #fafbfd;
    border: 1px solid var(--mp-border);
}

.mp-ingredient-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
}

.mp-ingredient-meta {
    display: grid;
    grid-template-columns: minmax(0, 33.33%) minmax(0, 1fr);
    gap: 0.4rem;
    min-width: 0;
}

.mp-zutat-input {
    display: block;
    width: 100%;
    min-height: 2.4rem;
    padding-inline: 0.6rem;
    border-radius: 0.7rem;
    border: 1px solid var(--mp-border-strong);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: none;
    color: var(--mp-text);
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.4;
}

.mp-zutat-input:focus {
    outline: none;
    border-color: rgba(234, 107, 23, 0.5);
    box-shadow: 0 0 0 0.18rem rgba(255, 138, 61, 0.14);
}

select.mp-zutat-input {
    padding-inline: 0.45rem;
}

.mp-ingredient-builder input[type="number"]::-webkit-outer-spin-button,
.mp-ingredient-builder input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mp-ingredient-builder input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.mp-ingredient-item.is-removed {
    background: #f6f7f9;
    border-style: dashed;
}

.mp-ingredient-removed-copy {
    min-width: 0;
    font-size: 0.82rem;
    color: var(--mp-text-soft);
    line-height: 1.4;
}

.mp-ingredient-add-button {
    box-shadow: 0 12px 22px rgba(234, 107, 23, 0.18);
}

.mp-gericht-ohne-bild-hinweis {
    margin-bottom: 0.2rem;
    color: #c94b2a;
    font-size: 0.82rem;
    font-weight: 700;
}

.mp-gericht-form-titel {
    margin-bottom: 0.35rem;
    color: var(--mp-accent-strong);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mp-kategorie-picker {
    position: relative;
}

.mp-kategorie-picker-trigger {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--mp-border);
    border-radius: 1rem;
    background: var(--mp-surface);
    color: var(--mp-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

.mp-kategorie-picker-trigger:hover:not(:disabled),
.mp-kategorie-picker-trigger:focus-visible {
    border-color: rgba(234, 107, 23, 0.45);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(234, 107, 23, 0.12);
}

.mp-kategorie-picker-trigger:disabled {
    opacity: 0.65;
}

.mp-kategorie-picker-trigger-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(234, 107, 23, 0.1);
    color: var(--mp-accent-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mp-kategorie-picker-trigger-icon i {
    font-size: 1rem;
}

.mp-kategorie-picker-trigger-label {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.mp-kategorie-picker-trigger-chevron {
    color: var(--mp-muted);
    flex-shrink: 0;
}

.mp-kategorie-picker-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    z-index: 30;
    border: 1px solid var(--mp-border);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(31, 41, 55, 0.14);
    overflow: hidden;
}

.mp-kategorie-picker-search {
    position: sticky;
    top: 0;
    z-index: 1;
    border: 0;
    border-bottom: 1px solid var(--mp-border);
    border-radius: 0;
    box-shadow: none;
}

.mp-kategorie-picker-list {
    max-height: 18.5rem;
    overflow-y: auto;
}

.mp-kategorie-picker-item {
    width: 100%;
    padding: 0.85rem 0.95rem;
    border: 0;
    border-bottom: 1px solid var(--mp-border);
    background: transparent;
    color: var(--mp-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

.mp-kategorie-picker-item:last-child {
    border-bottom: 0;
}

.mp-kategorie-picker-item:hover,
.mp-kategorie-picker-item:focus-visible {
    background: rgba(234, 107, 23, 0.08);
    outline: 0;
}

.mp-kategorie-picker-item.is-selected {
    background: rgba(234, 107, 23, 0.12);
}

.mp-kategorie-picker-item-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: rgba(19, 94, 203, 0.08);
    color: #135ecb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mp-kategorie-picker-item-icon i {
    font-size: 0.95rem;
}

.mp-kategorie-picker-item-name {
    font-size: 1rem;
    line-height: 1.3;
}

.mp-kategorie-picker-item.is-hervorgehoben .mp-kategorie-picker-item-name {
    font-weight: 800;
}

.mp-kategorie-picker-empty {
    padding: 1rem 0.95rem;
    color: var(--mp-muted);
    font-size: 0.95rem;
}

.mp-ingredient-remove {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(234, 107, 23, 0.1);
    color: var(--mp-accent-strong);
    flex-shrink: 0;
}

.mp-ingredient-remove i {
    font-size: 0.9rem;
}

.mp-ingredient-item.is-removed .mp-ingredient-remove {
    background: rgba(27, 34, 48, 0.08);
    color: var(--mp-text-soft);
}

.mp-auto-textarea {
    min-height: 3.3rem;
    padding-block: 0.65rem;
    resize: none;
    overflow-y: hidden;
    line-height: 1.5;
    font-weight: 400;
}

.mp-gericht-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.1rem;
}

.mp-gericht-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    padding: 0.18rem 0.62rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.mp-gericht-badge.is-draft {
    background: #eef4ff;
    color: #315ea8;
}

.mp-gericht-badge.is-pro {
    background: #fff1e6;
    color: var(--mp-accent-strong);
}

.mp-gericht-badge-premium {
    align-self: flex-start;
    min-height: 2.35rem;
    padding: 0.38rem 0.95rem;
    border: 1px solid rgba(161, 107, 18, 0.34);
    background: linear-gradient(135deg, #fff3bf 0%, #ffd36b 45%, #f3b63f 100%);
    color: #6f4700;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 10px 22px rgba(161, 107, 18, 0.2);
}

.mp-gericht-kategorie-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    background: #f5f7fb;
    border: 1px solid rgba(27, 34, 48, 0.08);
    color: var(--mp-text);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.mp-gericht-kategorie-badge i {
    color: var(--mp-accent-strong);
}

.mp-gericht-kategorie-badge.is-group {
    min-height: 2rem;
    padding-inline: 0.85rem;
    background: #fff4ea;
    border-color: rgba(234, 107, 23, 0.2);
}

.mp-gericht-gruppen {
    display: grid;
    gap: 1rem;
}

.mp-gericht-gruppe {
    display: grid;
    gap: 0.8rem;
}

.mp-gericht-gruppe-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.mp-empty-day {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    border-top: 1px solid var(--mp-border);
    text-align: center;
}

.mp-empty-day-icon {
    position: relative;
    width: 5.25rem;
    height: 5.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    box-shadow: inset 0 0 0 1px rgba(234, 107, 23, 0.14);
    color: rgba(27, 34, 48, 0.42);
}

.mp-empty-day-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/essen_hintergrund.png') center / cover no-repeat;
    opacity: 0.38;
}

.mp-empty-day-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.58) 100%);
}

.mp-empty-day-icon i {
    position: relative;
    z-index: 1;
    font-size: 2.2rem;
    color: rgba(27, 34, 48, 0.72);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
}

.mp-empty-day-copy p {
    margin: 0.2rem 0 0;
    color: var(--mp-text-soft);
    font-size: 0.92rem;
}

.mp-day-footer {
    display: flex;
    justify-content: center;
    padding: 0.7rem 0.75rem 0.8rem;
    background: transparent;
    border-top: 1px solid rgba(27, 34, 48, 0.05);
}

.mp-day-samstag .mp-day-footer {
    background: transparent;
}

.mp-day-sonntag .mp-day-footer {
    background: transparent;
}

.mp-day-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 0.35rem;
}

.mp-day-action-button {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 1.15rem;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}

.mp-day-action-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0 8px 14px rgba(27, 34, 48, 0.16));
}

.mp-day-action-button--notify {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
    border: 1.5px solid rgba(234, 107, 23, 0.55);
    background: linear-gradient(160deg, #fff8f1 0%, var(--mp-accent-soft) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 8px 14px rgba(27, 34, 48, 0.12);
    color: var(--mp-accent-strong);
}

.mp-day-action-button--notify i {
    font-size: 1.35rem;
    line-height: 1;
}

.mp-day-action-button:hover,
.mp-day-action-button:focus-visible {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.03);
}

.mp-day-action-button:active {
    transform: scale(0.96);
}

.mp-footer-button {
    width: 100%;
    border-color: rgba(27, 34, 48, 0.08);
    background: rgba(255, 255, 255, 0.48);
    color: rgba(27, 34, 48, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 8px 18px rgba(27, 34, 48, 0.05);
}

.mp-footer-button i {
    color: rgba(234, 107, 23, 0.72);
}

.mp-footer-button:hover,
.mp-footer-button:focus {
    color: rgba(27, 34, 48, 0.82);
    background: rgba(255, 255, 255, 0.62);
}

.mp-abstimmung-entry {
    margin: 0.95rem 1rem 0;
    margin-bottom: 1.2rem;
    padding: 0.95rem;
    scroll-margin-top: 6.5rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(234, 107, 23, 0.16);
    box-shadow: 0 12px 22px rgba(27, 34, 48, 0.07);
}

.mp-abstimmung-entry-open {
    background: linear-gradient(180deg, #fff4ea 0%, #ffe6d0 100%);
}

.mp-abstimmung-entry-done {
    background: linear-gradient(180deg, #f4fbf7 0%, #eaf7ee 100%);
    border-color: rgba(47, 122, 71, 0.2);
}

.mp-abstimmung-entry-closed {
    background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
    border-color: rgba(27, 34, 48, 0.08);
}

.mp-abstimmung-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mp-abstimmung-entry-kicker {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mp-accent-strong);
}

.mp-abstimmung-entry-top {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    margin-top: 0.75rem;
}

.mp-abstimmung-entry-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    color: var(--mp-accent-strong);
    box-shadow: inset 0 0 0 1px rgba(234, 107, 23, 0.12);
}

.mp-abstimmung-entry-icon i {
    font-size: 1.7rem;
}

.mp-abstimmung-entry-icon-image {
    display: block;
    width: 2.55rem;
    height: 2.55rem;
    object-fit: contain;
}

.mp-abstimmung-entry-copy {
    display: grid;
    gap: 0.2rem;
}

.mp-abstimmung-entry-copy h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.mp-abstimmung-entry-copy p,
.mp-abstimmung-entry-copy small {
    color: var(--mp-text-soft);
}

.mp-abstimmung-entry-text {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.8rem;
}

.mp-abstimmung-entry-text p,
.mp-abstimmung-entry-text small {
    color: var(--mp-text-soft);
}

.mp-abstimmung-entry-actions {
    margin-top: 0.95rem;
    display: grid;
    gap: 0.65rem;
}

.mp-abstimmung-entry-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 3.1rem;
    padding: 0.7rem 1rem;
    border-radius: 1.15rem;
}

.mp-abstimmung-entry-button-icon {
    display: block;
    width: 1.85rem;
    height: 1.85rem;
    flex-shrink: 0;
    object-fit: contain;
}

.mp-abstimmung-entry-button-outline {
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
    border: 2px solid var(--mp-accent);
    box-shadow: none;
    font-weight: 700;
}

.mp-abstimmung-entry-button-outline:hover,
.mp-abstimmung-entry-button-outline:focus,
.mp-abstimmung-entry-button-outline:focus-visible {
    background: #fff3e8;
    color: var(--mp-accent-strong);
    border-color: var(--mp-accent-strong);
}

.mp-abstimmung-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.14rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(27, 34, 48, 0.06);
}

.mp-abstimmung-status-badge.is-open {
    background: var(--mp-accent-strong);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
}

.mp-abstimmung-status-badge.is-done {
    background: #2f7a47;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
}

.mp-abstimmung-status-badge.is-closed {
    background: #eef1f5;
    color: var(--mp-text-soft);
    border-color: rgba(27, 34, 48, 0.1);
    box-shadow: none;
}

.mp-offcanvas {
    border-right: 0;
}

.mp-offcanvas .offcanvas-header {
    align-items: center;
    padding: 0.75rem 0.75rem 0.5rem;
}

.mp-offcanvas-title {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mp-text);
}

.mp-offcanvas-close {
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid #000;
    border-radius: 50%;
    background-color: #eef0f3;
    opacity: 0.85;
}

.mp-offcanvas-close:hover,
.mp-offcanvas-close:focus {
    background-color: #e3e6ea;
    opacity: 1;
}

.mp-offcanvas .offcanvas-body {
    padding: 0.65rem 0.75rem 0.9rem;
}

.mp-menu-list {
    display: grid;
    gap: 0.4rem;
}

.mp-menu-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.40rem 0.6rem;
    border-radius: 1rem;
    color: var(--mp-text);
    text-decoration: none;
    font-size: 1.14rem;
    font-weight: 700;
    background: #f8fafc;
    border: 1px solid #edf2f7;
}

.mp-menu-icon {
    display: block;
    width: 2.85rem;
    height: 2.85rem;
    flex: 0 0 2.85rem;
    box-sizing: border-box;
    border: 1px solid rgba(46, 61, 48, 0.16);
    border-radius: 50%;
}

.mp-menu-link i.mp-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.05rem;
}

.mp-menu-link-button {
    width: 100%;
    text-align: left;
}

.mp-menu-link.active {
    background: var(--mp-accent-soft);
    border-color: rgba(234, 107, 23, 0.2);
    color: var(--mp-accent-strong);
}

.mp-body-dashboard .mp-content {
    padding: 0 0.85rem calc(1rem + var(--mp-scroll-top-overflow));
}

.mp-body-gerichte .mp-content {
    padding: 0 0.55rem calc(1rem + var(--mp-scroll-top-overflow));
}

.mp-dashboard-grid {
    display: grid;
    gap: 1rem;
}

.mp-card {
    padding: 1rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(27, 34, 48, 0.06);
    box-shadow: var(--mp-shadow);
}

.mp-card-accent {
    background: linear-gradient(180deg, rgba(255, 241, 230, 0.98) 0%, rgba(255, 228, 205, 0.96) 100%);
    border-color: rgba(234, 107, 23, 0.14);
}

.mp-card-warning-soft {
    background: linear-gradient(180deg, rgba(255, 240, 240, 0.98) 0%, rgba(255, 226, 226, 0.96) 100%);
    border-color: rgba(217, 45, 32, 0.14);
}

.mp-card h1,
.mp-card h2 {
    margin: 0;
}

.mp-card p {
    margin: 0;
}

.mp-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    font-size: 1.0rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mp-accent-strong);
}

.mp-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.mp-card-copy {
    color: var(--mp-text-soft);
    line-height: 1.5;
}

.mp-card-copy-danger {
    color: #8a2d15;
    font-weight: 600;
}

.mp-welcome-card p {
    margin-top: 0.65rem;
    color: rgba(27, 34, 48, 0.78);
    line-height: 1.5;
}

.mp-welcome-card-status {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mp-text);
}

.mp-status-list {
    display: grid;
    gap: 0.8rem;
}

.mp-status-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.85rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid var(--mp-border);
    background: #fafbfd;
}

.mp-status-item.is-done {
    border-color: rgba(47, 122, 71, 0.16);
    background: #f2fbf5;
}

.mp-status-item.is-open {
    border-color: rgba(234, 107, 23, 0.14);
    background: #fff7f1;
}

.mp-status-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    color: var(--mp-accent-strong);
}

.mp-status-item.is-done .mp-status-icon {
    color: #2f7a47;
}

.mp-status-copy strong {
    display: block;
    margin-bottom: 0.15rem;
}

.mp-status-copy p {
    color: var(--mp-text-soft);
    line-height: 1.45;
}

.mp-action-grid {
    display: grid;
    gap: 0.75rem;
}

.mp-abstimmung-hero-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
}

body.mp-body-abstimmung {
    overflow-x: hidden;
}

.mp-body-abstimmung .mp-content,
.mp-abstimmung-content {
    overflow-x: hidden;
    max-width: 100%;
    min-width: 0;
    padding-top: 1rem;
}

.mp-abstimmung-dashboard,
.mp-abstimmung-dashboard .mp-card {
    min-width: 0;
    max-width: 100%;
}

.mp-abstimmung-detail-hero {
    padding: 0.95rem;
    border-radius: 1.25rem;
    box-shadow: 0 12px 22px rgba(27, 34, 48, 0.07);
}

.mp-abstimmung-detail-hero-open {
    background: linear-gradient(180deg, #fff4ea 0%, #ffe6d0 100%);
    border-color: rgba(234, 107, 23, 0.16);
}

.mp-abstimmung-detail-hero-done {
    background: linear-gradient(180deg, #f4fbf7 0%, #eaf7ee 100%);
    border-color: rgba(47, 122, 71, 0.2);
}

.mp-abstimmung-detail-hero-closed {
    background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
    border-color: rgba(27, 34, 48, 0.08);
}

.mp-abstimmung-detail-hero .mp-abstimmung-entry-top {
    margin-top: 0.75rem;
}

.mp-abstimmung-detail-hero .mp-abstimmung-entry-copy h2 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mp-abstimmung-detail-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
}

.mp-abstimmung-detail-head-actions form {
    display: inline-flex;
}

.mp-abstimmung-detail-actions {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.mp-abstimmung-auswahl-card.is-auswahl-summary {
    padding: 0;
    overflow: hidden;
    background: #f4fbf7;
    border-color: rgba(47, 122, 71, 0.2);
}

.mp-abstimmung-auswahl-card.is-auswahl-summary .mp-abstimmung-detail-actions {
    margin-top: 0;
    padding: 0.85rem 0.95rem 1rem;
    background: #f4fbf7;
}

.mp-abstimmung-auswahl-summary {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem 0.85rem 0.85rem;
}

.mp-abstimmung-auswahl-summary-head {
    display: flex;
    justify-content: center;
}

.mp-abstimmung-auswahl-head {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.mp-abstimmung-auswahl-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mp-abstimmung-auswahl-title-row .mp-card-kicker {
    margin-bottom: 0;
}

.mp-abstimmung-auswahl-hinweis {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mp-text);
}

.mp-abstimmung-auswahl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    background: #2f7a47;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 12px rgba(47, 122, 71, 0.22);
}

.mp-abstimmung-auswahl-liste {
    display: grid;
    gap: 0.55rem;
}

.mp-abstimmung-auswahl-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    border-radius: 1rem;
    background: rgba(47, 122, 71, 0.14);
    border: 1px solid rgba(47, 122, 71, 0.24);
}

.mp-abstimmung-auswahl-thumb {
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;
    border-radius: 0.65rem;
    overflow: hidden;
    background: linear-gradient(135deg, #dff1e5 0%, #f4fbf7 100%);
}

.mp-abstimmung-auswahl-thumb img,
.mp-abstimmung-auswahl-thumb .mp-abstimmung-wahl-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-abstimmung-auswahl-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #2f7a47;
    font-size: 1.35rem;
}

.mp-abstimmung-auswahl-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: #1f5d34;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mp-abstimmung-content .mp-abstimmung-option-picker,
.mp-abstimmung-content .mp-abstimmung-special-grid,
.mp-abstimmung-content .mp-abstimmung-wahl-liste,
.mp-abstimmung-content .mp-abstimmung-chart-wrap,
.mp-abstimmung-content .mp-abstimmung-stat-grid {
    min-width: 0;
    max-width: 100%;
}

.mp-abstimmung-content .mp-plan-picker-card,
.mp-abstimmung-content .mp-plan-picker-card-inner {
    min-width: 0;
    max-width: 100%;
}

.mp-abstimmung-content .mp-plan-picker-card.is-selected .mp-plan-picker-card-inner {
    border: 3px solid #2f7a47;
    box-shadow: none;
    transform: none;
}

.mp-abstimmung-content .mp-abstimmung-special-card input:checked + .mp-abstimmung-special-card-inner {
    border: 3px solid #2f7a47;
    box-shadow: none;
}

.mp-abstimmung-hero-title {
    display: grid;
    gap: 0.3rem;
}

.mp-abstimmung-hero-title h2,
.mp-abstimmung-hero-time {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mp-text);
}

.mp-abstimmung-hero-time,
.mp-abstimmung-hero-deadline {
    color: var(--mp-text-soft);
}

.mp-abstimmung-hero-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}

.mp-abstimmung-edit-button {
    width: 3rem;
    min-width: 3rem;
    padding: 0;
}

.mp-icon-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: 0;
}

.mp-icon-action-button:hover,
.mp-icon-action-button:focus,
.mp-icon-action-button:focus-visible {
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 0.82;
}

.mp-icon-action-button-icon {
    display: block;
    width: 1.65rem;
    height: 1.65rem;
    object-fit: contain;
}

.mp-abstimmung-hero-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.mp-abstimmung-hero-actions form {
    display: inline-flex;
}

.mp-abstimmung-edit-button span {
    display: none;
}

.mp-family-header-copy {
    min-width: 0;
}

.mp-card-family-head {
    border-color: rgba(47, 122, 71, 0.24);
    box-shadow:
        0 10px 30px rgba(16, 24, 40, 0.06),
        inset 0 0 0 1px rgba(47, 122, 71, 0.12);
}

.mp-family-header-copy h2 {
    min-width: 0;
    line-height: 1.15;
    word-break: normal;
    overflow-wrap: break-word;
}

.mp-family-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.95rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.mp-family-role-badge.is-head {
    background: #eef8f1;
    color: #2f7a47;
    font-weight: 800;
}

.mp-family-role-badge.is-admin {
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
}

.mp-card-toggle {
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mp-surface);
    color: var(--mp-accent-strong);
    box-shadow:
        0 0 0 1.5px rgba(234, 107, 23, 0.52),
        0 0 8px rgba(234, 107, 23, 0.28);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.mp-card-toggle:hover,
.mp-card-toggle:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 1.5px rgba(234, 107, 23, 0.72),
        0 0 10px rgba(234, 107, 23, 0.38);
}

.mp-card-toggle i {
    font-size: 1.2rem;
    -webkit-text-stroke: 0.55px var(--mp-accent-strong);
    transition: transform 0.2s ease;
}

.mp-card-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.mp-buffet-item-toggle {
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--mp-surface);
    color: var(--mp-accent-strong);
    box-shadow:
        0 0 0 1.5px rgba(234, 107, 23, 0.52),
        0 0 8px rgba(234, 107, 23, 0.28);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.mp-buffet-item-toggle:hover,
.mp-buffet-item-toggle:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 1.5px rgba(234, 107, 23, 0.72),
        0 0 10px rgba(234, 107, 23, 0.38);
}

.mp-buffet-item-toggle i {
    font-size: 1.08rem;
    -webkit-text-stroke: 0.55px var(--mp-accent-strong);
    transition: transform 0.2s ease;
}

.mp-buffet-item-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.mp-family-meta {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mp-family-meta-item {
    padding: 0.85rem 0.9rem;
    border-radius: 1rem;
    background: #fafbfd;
    border: 1px solid var(--mp-border);
}

.mp-family-meta-label {
    display: block;
    margin-bottom: 0.28rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mp-text-soft);
}

.mp-family-share {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mp-border);
}

.mp-family-members-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mp-border);
}

.mp-family-share-grid {
    display: grid;
    gap: 0.85rem;
    align-items: center;
    justify-items: center;
}

.mp-family-qr-card {
    width: min(12rem, 100%);
    padding: 0.75rem;
    border-radius: 1.2rem;
    background: #ffffff;
    border: 1px solid var(--mp-border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.mp-family-qr-card img {
    display: block;
    width: 100%;
    height: auto;
}

.mp-family-code-card {
    width: min(12rem, 100%);
    padding: 0.85rem 0.9rem;
    border-radius: 1rem;
    background: #fafbfd;
    border: 1px solid var(--mp-border);
    text-align: center;
}

.mp-family-code-card strong {
    display: block;
    font-size: 1.2rem;
    letter-spacing: 0.12em;
}

.mp-family-switch-list {
    display: grid;
    gap: 0.8rem;
}

.mp-family-switch-card {
    padding: 0.9rem;
    border-radius: 1.1rem;
    background: #fafbfd;
    border: 1px solid var(--mp-border);
}

.mp-section-head-tight {
    margin-bottom: 0;
}

.mp-family-overview-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
}

.mp-family-visit-icon {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent-strong));
    color: #ffffff;
    font-size: 1.35rem;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(246, 111, 22, 0.22);
}

.mp-family-visit-icon:hover,
.mp-family-visit-icon:focus {
    color: #ffffff;
    transform: translateY(-1px);
}

.mp-family-overview-copy {
    min-width: 0;
}

.mp-family-switch-title {
    margin: 0;
    font-size: 1.05rem;
}

.mp-family-switch-subtitle {
    margin-top: 0.2rem;
    color: var(--mp-text-soft);
    font-size: 0.9rem;
}

.mp-family-switch-actions {
    margin-top: 0.9rem;
}

.mp-family-leave-form {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-start;
}

.mp-family-leave-button {
    min-height: 0;
    padding: 0.15rem 0.2rem;
    border: 0;
    background: transparent;
    color: #9f2f1d;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}

.mp-family-leave-button:hover,
.mp-family-leave-button:focus {
    color: #7f2415;
}

.mp-family-leave-button.is-disabled {
    opacity: 0.55;
}

.mp-family-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.mp-role-badge,
.mp-inline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.mp-role-badge {
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
}

.mp-role-badge.is-head {
    background: #eef8f1;
    color: #2f7a47;
}

.mp-role-badge.is-admin {
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
}

.mp-inline-badge {
    background: #eef4ff;
    color: #315ea8;
}

.mp-inline-badge.is-active {
    background: #eef8f1;
    color: #2f7a47;
}

.mp-member-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 0.78rem;
    font-weight: 700;
    margin-left: auto;
}

.mp-member-role-badge.is-head {
    background: #eef8f1;
    color: #2f7a47;
}

.mp-member-role-badge.is-admin {
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
}

.mp-member-list {
    display: grid;
    gap: 0.8rem;
}

.mp-member-row {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    padding: 0.8rem 0.85rem;
    border-radius: 1rem;
    background: #fafbfd;
    border: 1px solid var(--mp-border);
}

.mp-member-avatar {
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    color: var(--mp-accent-strong);
}

.mp-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-member-avatar i {
    font-size: 1.35rem;
}

.mp-member-copy {
    min-width: 0;
}

.mp-member-title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.mp-member-title-row strong {
    min-width: 0;
}

.mp-member-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    color: var(--mp-text-soft);
    font-size: 0.9rem;
}

.mp-family-admin-list {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
}

.mp-family-admin-entry {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--mp-border);
    border-radius: 1rem;
    background: #fafbfd;
    color: var(--mp-text);
    text-align: left;
    box-shadow: none;
}

.mp-family-admin-copy {
    min-width: 0;
}

.mp-family-admin-copy .mp-member-title-row,
.mp-family-admin-copy .mp-member-meta {
    display: flex;
}

.mp-family-admin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: #fff1e6;
    color: var(--mp-accent-strong);
    font-size: 1rem;
}

.mp-family-admin-action-form {
    margin: 0;
    grid-column: 2;
}

.mp-family-admin-action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    min-height: 1.6rem;
    padding: 0.11rem 0.55rem;
    border-radius: 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    margin-top: 0.15rem;
}

.mp-family-admin-action-button i {
    font-size: 0.95rem;
}

.mp-family-admin-action-button-danger {
    background: #fff0eb;
    color: #8a2d15;
    border: 1px solid rgba(162, 43, 21, 0.16);
}

.mp-family-admin-action-button-danger:hover,
.mp-family-admin-action-button-danger:focus {
    color: #8a2d15;
    background: #ffe5dc;
    border-color: rgba(162, 43, 21, 0.24);
}

.mp-empty-card {
    background: rgba(255, 255, 255, 0.82);
}

.mp-dashboard-highlight-card {
    grid-column: 1 / -1;
    padding: 0;
    overflow: visible;
}

.mp-dashboard-meal-item {
    display: grid;
    gap: 1rem;
}

.mp-dashboard-meal-item.is-following-meal {
    margin-top: 1.75rem;
}

.mp-dashboard-meal-visual {
    display: grid;
    gap: 0.65rem;
}

.mp-dashboard-meal-copy {
    display: grid;
    gap: 0.35rem;
}

.mp-dashboard-meal-kategorie-badge {
    width: fit-content;
    max-width: 100%;
}

.mp-dashboard-meal-item-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.mp-dashboard-highlight-image,
.mp-dashboard-highlight-image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1.1rem;
}

.mp-dashboard-highlight-image-wrap {
    position: relative;
    overflow: visible;
}

.mp-dashboard-highlight-image-wrap .mp-mitessen-preview-badge {
    width: 1.85rem;
    height: 1.85rem;
}

.mp-dashboard-highlight-image-wrap .mp-mitessen-preview-badge i {
    font-size: 1.05rem;
}

.mp-dashboard-highlight-image {
    background: #f3f5f8;
    overflow: hidden;
}

.mp-dashboard-highlight-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.mp-dashboard-highlight-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    color: var(--mp-accent-strong);
}

.mp-dashboard-highlight-image-placeholder i {
    font-size: clamp(2.4rem, 6vw, 3.4rem);
}

.mp-dashboard-highlight-body {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.mp-dashboard-highlight-body .mp-section-head,
.mp-dashboard-highlight-body .mp-detail-block h3 {
    margin-bottom: 0;
}

.mp-dashboard-highlight-body .mp-mitessen-head h3 {
    margin-bottom: 0;
}

.mp-dashboard-highlight-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    color: var(--mp-text-soft);
    line-height: 1.45;
}

.mp-dashboard-highlight-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.mp-dashboard-highlight-body .mp-rating-list {
    border-top: 0;
}

.mp-empty-state {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
}

.mp-empty-state-icon {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.15rem;
    background: #f7f8fa;
    border: 1px dashed var(--mp-border-strong);
    color: var(--mp-text-soft);
}

.mp-empty-state-icon i {
    font-size: 1.7rem;
}

.mp-empty-state p {
    color: var(--mp-text);
    line-height: 1.45;
}

.mp-empty-state h2 {
    margin: 0 0 0.85rem;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--mp-text);
}

.mp-empty-state .mp-action-grid {
    margin-top: 0.15rem;
}

.mp-empty-state-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
}

.mp-empty-state-centered .mp-action-grid {
    width: 100%;
    max-width: 18rem;
    margin-top: 0.25rem;
}

.mp-empty-state small {
    display: block;
    margin-top: 0.35rem;
    color: var(--mp-text-soft);
    line-height: 1.45;
}

.mp-modal-content {
    border: 0;
    border-radius: 1.5rem;
    background: #fffdfa;
    box-shadow: 0 20px 40px rgba(27, 34, 48, 0.18);
}

.mp-bild-lightbox-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.15rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.mp-plan-modal-form {
    display: grid;
    gap: 0.95rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

#mpGerichtPlanenModal .modal-dialog {
    width: calc(100% - 1.5rem);
    max-width: 32rem;
    margin-inline: auto;
}

#mpGerichtPlanenModal .modal-content,
#mpGerichtPlanenModal .modal-body {
    min-width: 0;
    max-width: 100%;
}

#mpGerichtPlanenModal .modal-body {
    overflow-x: hidden;
}

#mpGerichtPlanenModal .modal-header {
    min-width: 0;
}

#mpGerichtPlanenModal .modal-title {
    overflow-wrap: anywhere;
}

.mp-plan-modal-form .mp-field {
    min-width: 0;
    max-width: 100%;
}

.mp-plan-datetime-field,
.mp-plan-gericht-field {
    gap: 0.45rem;
}

.mp-plan-datetime-wrap {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.mp-plan-datetime-trigger {
    pointer-events: none;
    user-select: none;
}

.mp-plan-datetime-native {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0.001;
    cursor: pointer;
    background: transparent;
    color: transparent;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
}

.mp-plan-modal-trigger {
    width: 100%;
    min-height: 3.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    border-radius: 1rem;
    border: 1px solid var(--mp-border-strong);
    background: rgba(255, 255, 255, 0.92);
    color: var(--mp-text);
    cursor: pointer;
    text-align: left;
    box-shadow: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.mp-plan-modal-trigger:hover:not(:disabled),
.mp-plan-modal-trigger:focus-visible {
    border-color: rgba(234, 107, 23, 0.5);
    box-shadow: 0 0 0 0.18rem rgba(255, 138, 61, 0.14);
    outline: 0;
}

.mp-plan-modal-trigger:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.mp-plan-modal-trigger-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.mp-plan-modal-trigger-kicker {
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--mp-text-soft);
}

.mp-plan-modal-trigger-value {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--mp-text);
}

.mp-plan-datetime-display.mp-plan-modal-trigger-value {
    display: grid;
    gap: 0.1rem;
    align-items: start;
    min-width: 0;
}

.mp-plan-datetime-date-line,
.mp-plan-datetime-time-line {
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--mp-text);
}

.mp-plan-datetime-date-line {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-plan-datetime-date-line strong,
.mp-plan-datetime-time-value {
    font-weight: 800;
}

.mp-plan-datetime-time-line {
    cursor: pointer;
}

.mp-plan-modal-trigger-icon,
.mp-plan-datetime-icon {
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    line-height: 1;
    color: var(--mp-accent-strong);
}

.mp-plan-modal-trigger-media,
.mp-plan-gericht-waehlen-icon {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mp-plan-gericht-waehlen-icon img {
    width: 1.9rem;
    height: 1.9rem;
    object-fit: contain;
    display: block;
}

.mp-plan-modal-form .mp-input,
.mp-plan-modal-form .mp-input.form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.mp-plan-modal-form input[type="date"],
.mp-plan-modal-form input[type="time"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.mp-plan-modal-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.mp-plan-modal-field-head > span {
    font-weight: 600;
}

.mp-plan-select-wrap {
    position: relative;
}

.mp-plan-select {
    padding-right: 2.8rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.mp-plan-select-chevron {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--mp-text-soft);
    pointer-events: none;
    font-size: 0.95rem;
}

.mp-plan-gericht-picker {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.mp-plan-gericht-picker-trigger {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.55rem 2.8rem 0.55rem 0.75rem;
    border: 1px solid var(--mp-border);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--mp-text);
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mp-plan-gericht-picker-trigger:hover:not(:disabled),
.mp-plan-gericht-picker-trigger:focus-visible {
    border-color: rgba(234, 107, 23, 0.45);
    box-shadow: 0 0 0 0.2rem rgba(234, 107, 23, 0.12);
    outline: none;
}

.mp-plan-gericht-picker-trigger:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.mp-plan-gericht-picker-trigger-thumb {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    border-radius: 0.65rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    color: var(--mp-accent-strong);
    box-shadow: inset 0 0 0 1px rgba(234, 107, 23, 0.14);
}

.mp-plan-gericht-picker-trigger-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-plan-gericht-picker-trigger-thumb i {
    font-size: 1.1rem;
}

.mp-plan-gericht-picker-trigger-label {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-plan-gericht-picker-trigger-chevron {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--mp-text-soft);
    pointer-events: none;
    font-size: 0.95rem;
}

.mp-plan-gericht-picker-modal-content {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    border-radius: 0;
}

.mp-plan-gericht-picker-modal-content .modal-header {
    flex: 0 0 auto;
    padding-bottom: 0.35rem;
}

.mp-plan-gericht-picker-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0 1rem 1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.mp-plan-gericht-picker-search {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--mp-border-strong);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.98);
}

.mp-plan-gericht-picker-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.mp-plan-gericht-picker-group + .mp-plan-gericht-picker-group {
    margin-top: 0.15rem;
}

.mp-plan-gericht-picker-group-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.45rem 0 0.35rem;
}

.mp-plan-gericht-picker-group-title.mp-gericht-kategorie-badge {
    font-size: 1rem;
    line-height: 1.2;
}

.mp-plan-gericht-picker-group-title.mp-gericht-kategorie-badge i {
    font-size: 1rem;
}

.mp-plan-gericht-picker-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--mp-text);
    text-align: left;
    transition: background-color 0.15s ease;
}

.mp-plan-gericht-picker-item:hover,
.mp-plan-gericht-picker-item:focus-visible {
    background: rgba(234, 107, 23, 0.08);
    outline: none;
}

.mp-plan-gericht-picker-item.is-selected {
    background: rgba(234, 107, 23, 0.12);
}

.mp-plan-gericht-picker-thumb {
    width: 3.75rem;
    height: 3.75rem;
    flex: 0 0 3.75rem;
    border-radius: 0.75rem;
    object-fit: cover;
    display: block;
}

.mp-plan-gericht-picker-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    color: var(--mp-accent-strong);
    box-shadow: inset 0 0 0 1px rgba(234, 107, 23, 0.14);
}

.mp-plan-gericht-picker-thumb-fallback i {
    font-size: 1.35rem;
}

.mp-plan-gericht-picker-item-name {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 600;
}

.mp-plan-gericht-picker-empty {
    padding: 0.9rem;
    color: var(--mp-text-soft);
    font-size: 0.84rem;
    text-align: center;
}

.mp-plan-gericht-waehlen-button {
    width: 100%;
}

.mp-plan-gericht-picker-footer {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(27, 34, 48, 0.1);
    background: #fff;
}

.mp-plan-gericht-picker-footer-button {
    width: 100%;
    max-width: 24rem;
    min-height: 2.75rem;
    font-weight: 800;
}

.mp-plan-picker-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0 0 0.85rem;
}

.mp-plan-picker-card {
    display: block;
    width: 100%;
}

.mp-plan-picker-card-inner {
    display: grid;
    gap: 0;
    overflow: hidden;
    border-radius: 1rem;
    border: 2px solid var(--mp-border);
    background: #fff;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.mp-plan-picker-hero {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    cursor: pointer;
}

.mp-plan-picker-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(15, 20, 28, 0.72) 0%, rgba(15, 20, 28, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.mp-plan-picker-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-plan-picker-hero-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--mp-accent-strong);
}

.mp-plan-picker-hero-fallback i {
    font-size: 2.4rem;
}

.mp-plan-picker-card .mp-plan-picker-rating {
    position: absolute;
    top: calc(0.55rem - 5px);
    left: calc(0.55rem - 5px);
    right: auto;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-height: auto;
    max-width: calc(100% - 3.4rem);
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(27, 34, 48, 0.1);
    pointer-events: none;
}

.mp-plan-picker-card .mp-plan-picker-rating-kategorie {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    min-width: 0;
}

.mp-plan-picker-card .mp-plan-picker-rating-kategorie i {
    flex: 0 0 auto;
    font-size: 0.58rem;
    line-height: 1;
    color: var(--mp-accent-strong);
}

.mp-plan-picker-card .mp-plan-picker-rating-kategorie-name {
    font-size: 0.55rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--mp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-plan-picker-card .mp-plan-picker-rating-schnitt {
    display: inline-flex;
    align-items: center;
    gap: 0.02rem;
    flex: 0 0 auto;
    padding-left: 0.32rem;
    border-left: 1px solid rgba(27, 34, 48, 0.12);
}

.mp-plan-picker-card .mp-plan-picker-rating .mp-stars {
    font-size: 0.58rem;
    line-height: 1;
    color: var(--mp-accent-strong);
    justify-content: center;
    gap: 0.02rem;
}

.mp-plan-picker-card .mp-plan-picker-rating .mp-stars .bi-star,
.mp-plan-picker-card .mp-plan-picker-rating .mp-stars .bi-star-half,
.mp-plan-picker-card .mp-plan-picker-rating .mp-stars .bi-star-fill {
    font-size: 0.58rem;
    line-height: 1;
    color: var(--mp-accent-strong);
}

.mp-plan-picker-card .mp-plan-picker-rating .mp-open-badge {
    min-height: auto;
    padding: 0;
    font-size: 0.58rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.mp-plan-picker-card .mp-plan-picker-rating .mp-open-badge-with-star i {
    font-size: 0.58rem;
    line-height: 1;
}

.mp-plan-picker-card .mp-plan-picker-rating-stimmen {
    margin-left: 0.22rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--mp-text-soft);
    letter-spacing: -0.02em;
}

.mp-plan-picker-expand {
    position: absolute;
    top: calc(0.55rem - 5px);
    right: calc(0.55rem - 5px);
    z-index: 4;
}

.mp-plan-picker-check-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 999px;
    border: 3px solid rgba(47, 122, 71, 0.85);
    background: rgba(255, 255, 255, 0.92);
    color: transparent;
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(15, 20, 28, 0.22);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}

.mp-plan-picker-check-center i {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.mp-plan-picker-card.is-selected .mp-plan-picker-card-inner {
    border: 3px solid rgba(47, 122, 71, 0.82);
    box-shadow:
        0 14px 26px rgba(47, 122, 71, 0.18),
        inset 0 0 0 1px rgba(47, 122, 71, 0.22);
    transform: translateY(-1px);
}

.mp-plan-picker-card.is-selected .mp-plan-picker-check-center {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: #2f7a47;
    border-color: #2f7a47;
    color: #fff;
}

.mp-plan-picker-title {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.65rem;
    z-index: 3;
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    pointer-events: none;
}

.mp-plan-picker-body {
    display: grid;
    gap: 0;
    padding: 0;
    background: #fff;
}

.mp-plan-picker-ratings-block {
    padding: 0.85rem 1rem 0.95rem;
    border-top: 1px solid rgba(27, 34, 48, 0.08);
}

.mp-plan-picker-rating-list {
    display: grid;
    gap: 0;
}

.mp-plan-picker-rating-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.45rem 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(27, 34, 48, 0.06);
}

.mp-plan-picker-rating-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mp-plan-picker-rating-name {
    font-size: 0.92rem;
    font-weight: 600;
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mp-plan-picker-rating-row .mp-stars {
    padding-top: 0.05rem;
}

.mp-plan-picker-accordion {
    border-top: 1px solid rgba(27, 34, 48, 0.08);
    background: #fff;
}

.mp-plan-picker-accordion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: #fff;
}

.mp-plan-picker-accordion-label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mp-text);
}

.mp-plan-picker-accordion-toggle {
    flex: 0 0 auto;
}

.mp-plan-picker-accordion-body {
    padding: 0 1rem 0.95rem;
    background: #fff;
    border-top: 1px solid rgba(27, 34, 48, 0.06);
    padding-top: 0.95rem;
}

.mp-plan-picker-card.is-selected .mp-plan-picker-ratings-block,
.mp-plan-picker-card.is-selected .mp-plan-picker-accordion,
.mp-plan-picker-card.is-selected .mp-plan-picker-accordion-body {
    border-top-color: rgba(47, 122, 71, 0.16);
}

.mp-plan-auswahl-liste {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
    margin-top: 0.7rem;
}

.mp-plan-auswahl-leer {
    margin: 0;
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    border: 1px dashed var(--mp-border);
    background: rgba(255, 255, 255, 0.55);
    color: var(--mp-text-soft);
    font-size: 0.86rem;
    text-align: center;
}

.mp-plan-auswahl-card {
    display: block;
    width: 100%;
}

.mp-plan-auswahl-hero {
    cursor: default;
    pointer-events: none;
}

.mp-plan-auswahl-card .mp-plan-picker-rating {
    max-width: calc(100% - 1.1rem);
}

.mp-plan-auswahl-card:not(.is-selected) .mp-plan-picker-card-inner {
    border-color: var(--mp-border);
    box-shadow: none;
    transform: none;
}

.mp-plan-gericht-preview {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    margin-top: 0.7rem;
    padding: 0.8rem 0.9rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--mp-border);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.mp-plan-gericht-preview.is-selected {
    grid-template-columns: 3.75rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
}

.mp-plan-gericht-preview.is-selected .mp-plan-gericht-preview-image {
    width: 3.75rem;
    height: 3.75rem;
}

.mp-plan-gericht-preview-image {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 0.95rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    color: var(--mp-accent-strong);
    box-shadow: inset 0 0 0 1px rgba(234, 107, 23, 0.14);
}

.mp-plan-gericht-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-plan-gericht-preview-image i {
    font-size: 1.9rem;
}

.mp-plan-gericht-preview-copy {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.mp-plan-gericht-preview-copy strong {
    font-size: 0.98rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.mp-plan-gericht-preview.is-selected .mp-plan-gericht-preview-copy strong {
    font-size: 0.95rem;
    -webkit-line-clamp: 3;
}

.mp-plan-gericht-preview-copy span {
    color: var(--mp-text-soft);
    font-size: 0.76rem;
    line-height: 1.35;
}

.mp-plan-gericht-preview-rating {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-height: 1.2rem;
    max-width: 100%;
    min-width: 0;
}

.mp-plan-gericht-preview-rating .mp-stars {
    font-size: 0.92rem;
}

.mp-plan-gericht-preview-rating-label {
    color: var(--mp-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
}

.mp-plan-gericht-preview-ratings {
    grid-column: 1 / -1;
    display: grid;
    gap: 0;
    margin-top: 0.15rem;
    border-top: 1px solid rgba(27, 34, 48, 0.08);
    max-height: 8.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mp-plan-gericht-preview-rating-row .mp-open-badge {
    min-height: 1.65rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.8rem;
}

.mp-plan-gericht-preview-rating-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(27, 34, 48, 0.08);
    min-width: 0;
}

.mp-plan-gericht-preview-rating-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mp-plan-gericht-preview-rating-row:first-child {
    padding-top: 0.7rem;
}

.mp-plan-gericht-preview-rating-name {
    font-size: 0.92rem;
    font-weight: 600;
    min-width: 0;
}

.mp-plan-modal-hint {
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mp-plan-modal-actions {
    display: grid;
    gap: 0.75rem;
}

.mp-notify-modal-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
}

.mp-notify-modal-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.mp-notify-modal-top-row .mp-card-kicker {
    margin-bottom: 0;
}

.mp-notify-modal-top-row .mp-card-kicker i {
    font-size: 1.05rem;
}

.mp-notify-modal-top-row .btn-close {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.55rem;
    opacity: 0.7;
}

.mp-notify-modal-intro {
    color: var(--mp-text-soft);
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.45;
}

.mp-notify-modal-intro strong {
    color: var(--mp-text);
    font-weight: 700;
}

.mp-notify-modal-form {
    display: grid;
    gap: 0.95rem;
    margin-top: 0.35rem;
}

.mp-notify-auswahl-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mp-text);
    text-align: center;
}

.mp-notify-mitglieder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 0.85rem;
}

.mp-notify-person {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    width: 100%;
    max-width: 6.2rem;
    margin: 0;
    cursor: pointer;
    text-align: center;
}

.mp-notify-person-avatar {
    position: relative;
    width: 3.6rem;
    height: 3.6rem;
    overflow: visible;
    border: 2px solid rgba(47, 61, 79, 0.12);
    box-shadow: 0 6px 14px rgba(27, 34, 48, 0.08);
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.mp-notify-person-avatar > img,
.mp-notify-person-avatar > .bi-person-fill {
    border-radius: 50%;
}

.mp-notify-person-avatar > img {
    overflow: hidden;
}

.mp-notify-person-check {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    left: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    background: transparent;
    color: #2f9e44;
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity 0.16s ease,
        transform 0.16s ease;
    pointer-events: none;
    z-index: 2;
}

.mp-notify-person-check i {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 1.5px #2f9e44;
    paint-order: stroke fill;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
}

.mp-notify-person.is-selected .mp-notify-person-avatar {
    border-color: #2f9e44;
    box-shadow: 0 8px 16px rgba(47, 158, 68, 0.22);
}

.mp-notify-person.is-selected .mp-notify-person-check {
    opacity: 1;
    transform: scale(1);
}

.mp-notify-person-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mp-text);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mp-notify-mitglied-hint {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--mp-text-soft);
    line-height: 1.25;
}

.mp-notify-person.is-disabled {
    opacity: 0.72;
    cursor: default;
}

.mp-notify-person.is-disabled .mp-notify-person-avatar {
    filter: grayscale(0.35);
}

.mp-notify-nachricht-hint {
    opacity: 0.6;
    font-weight: 500;
}

.mp-notify-nachricht {
    resize: none;
    overflow: hidden;
    min-height: 4.75rem;
    margin-top: 0.35rem;
    padding: 0.75rem 1rem 1rem;
    border-radius: 1rem;
    border: 1.5px solid rgba(47, 61, 79, 0.16);
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 6px 14px rgba(27, 34, 48, 0.04);
    line-height: 1.45;
    font-weight: 500;
}

.mp-notify-nachricht:focus {
    border-color: rgba(234, 107, 23, 0.55);
    box-shadow: 0 0 0 0.18rem rgba(255, 138, 61, 0.16);
}

.mp-notify-zeichen {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--mp-text-soft);
    text-align: right;
}

.mp-abstimmung-option-picker,
.mp-abstimmung-option-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
}

.mp-abstimmung-option-picker [data-mp-abstimmung-gericht-option][aria-disabled="true"] {
    cursor: default;
}

.mp-abstimmung-picker-item,
.mp-abstimmung-option-card,
.mp-abstimmung-special-card {
    display: block;
}

.mp-abstimmung-picker-item input,
.mp-abstimmung-option-card input,
.mp-abstimmung-special-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mp-abstimmung-picker-card,
.mp-abstimmung-option-card-inner,
.mp-abstimmung-special-card-inner {
    display: grid;
    gap: 0.35rem;
    padding: 0.95rem 1rem;
    border-radius: 1.15rem;
    background: #fafbfd;
    border: 1px solid var(--mp-border);
    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.mp-abstimmung-picker-item input:checked + .mp-abstimmung-picker-card,
.mp-abstimmung-option-card input:checked + .mp-abstimmung-option-card-inner,
.mp-abstimmung-special-card input:checked + .mp-abstimmung-special-card-inner {
    border-color: rgba(47, 122, 71, 0.52);
    background: #eef8f1;
    box-shadow:
        0 14px 26px rgba(47, 122, 71, 0.18),
        inset 0 0 0 1px rgba(47, 122, 71, 0.18);
    transform: translateY(-1px);
}

.mp-abstimmung-picker-item:has(.mp-abstimmung-picker-input:checked) .mp-abstimmung-picker-card--hero {
    border-color: rgba(47, 122, 71, 0.82);
    background: #eef8f1;
    box-shadow:
        0 14px 26px rgba(47, 122, 71, 0.18),
        inset 0 0 0 2px rgba(47, 122, 71, 0.28);
    transform: translateY(-1px);
}

.mp-abstimmung-picker-name,
.mp-abstimmung-option-copy strong,
.mp-abstimmung-special-card-inner strong {
    font-size: 1rem;
    line-height: 1.25;
}

.mp-abstimmung-picker-name {
    display: grid;
    gap: 0.45rem;
}

.mp-abstimmung-picker-name strong {
    font-size: 1rem;
}

.mp-abstimmung-picker-meta,
.mp-abstimmung-option-copy span,
.mp-abstimmung-special-card-inner span {
    color: var(--mp-text-soft);
}

.mp-abstimmung-picker-head {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.35rem;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#mpAbstimmungModal .modal-dialog {
    width: calc(100% - 1.5rem);
    max-width: 32rem;
    margin-inline: auto;
}

.mp-abstimmung-modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
}

.mp-abstimmung-modal-content .mp-abstimmung-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    gap: 0;
}

.mp-abstimmung-modal-content .modal-body {
    display: grid;
    gap: 0.95rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.mp-abstimmung-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
    padding: 0.4rem 0.85rem 0.45rem;
    border-top: 1px solid rgba(27, 34, 48, 0.1);
    background: #fff;
}

.mp-abstimmung-modal-footer-auswahl {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    min-width: 2.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mp-text);
}

.mp-abstimmung-modal-footer-auswahl i {
    font-size: 1.1rem;
    color: var(--mp-accent-strong);
}

.mp-abstimmung-modal-footer-submit {
    min-height: 2.1rem;
    margin-left: auto;
    padding: 0.28rem 0.75rem;
    width: auto;
    gap: 0.28rem;
    font-size: 0.88rem;
    white-space: nowrap;
    box-shadow: 0 8px 16px rgba(234, 107, 23, 0.2);
}

.mp-abstimmung-modal-footer-submit .mp-abstimmung-submit-icon {
    font-size: 0.95rem;
}

@media (max-width: 340px) {
    .mp-abstimmung-modal-footer-submit .mp-abstimmung-submit-icon {
        display: none;
    }

    .mp-abstimmung-modal-footer-submit {
        gap: 0;
        padding-inline: 0.7rem;
    }
}

.mp-abstimmung-suche-group {
    margin-bottom: 0.75rem;
}

.mp-abstimmung-suche-input {
    border-right: 0;
}

.mp-abstimmung-suche-group .mp-abstimmung-filter-toggle.input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 3.3rem;
    width: 3.3rem;
    min-width: 3.3rem;
    padding: 5px;
    border: 1px solid var(--mp-border);
    border-left: 0;
    background: var(--mp-accent-soft);
    color: var(--mp-text-soft);
    cursor: pointer;
    overflow: hidden;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.mp-abstimmung-suche-group .mp-abstimmung-filter-toggle.input-group-text:hover,
.mp-abstimmung-suche-group .mp-abstimmung-filter-toggle.input-group-text:focus-visible,
.mp-abstimmung-suche-group .mp-abstimmung-filter-toggle.input-group-text.is-active {
    color: var(--mp-accent-strong);
    background: var(--mp-accent-soft);
    border-color: rgba(234, 107, 23, 0.35);
}

.mp-abstimmung-filter-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mp-abstimmung-filter-panel {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
    padding: 0.85rem;
    border: 1px solid rgba(234, 107, 23, 0.25);
    border-radius: 1rem;
    background: var(--mp-accent-soft);
    box-shadow: 0 10px 24px rgba(234, 107, 23, 0.08);
}

.mp-abstimmung-filter-field {
    margin: 0;
}

.mp-abstimmung-star-select {
    position: relative;
}

.mp-abstimmung-star-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.85rem;
    padding: 0.55rem 2.6rem 0.55rem 0.85rem;
    border: 1px solid var(--mp-border);
    border-radius: 0.85rem;
    background: #fff;
    color: var(--mp-text);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.mp-abstimmung-star-select-placeholder {
    color: var(--mp-text-soft);
}

.mp-abstimmung-star-select-chevron {
    position: absolute;
    top: 50%;
    right: 0.95rem;
    transform: translateY(-50%);
    color: var(--mp-text-soft);
    pointer-events: none;
    font-size: 0.95rem;
}

.mp-abstimmung-star-select-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 20;
    display: grid;
    gap: 0.25rem;
    padding: 0.45rem;
    border: 1px solid rgba(27, 34, 48, 0.12);
    border-radius: 0.9rem;
    background: #fff;
    box-shadow: 0 16px 32px rgba(15, 20, 28, 0.14);
}

.mp-abstimmung-star-select-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mp-abstimmung-star-select-option:hover,
.mp-abstimmung-star-select-option:focus-visible,
.mp-abstimmung-star-select-option.is-active {
    background: var(--mp-accent-soft);
}

.mp-abstimmung-star-select-stars {
    justify-content: flex-start;
}

.mp-abstimmung-star-select-stars .bi-star {
    color: rgba(27, 34, 48, 0.22);
}

.mp-abstimmung-person-select {
    position: relative;
}

.mp-abstimmung-person-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.85rem;
    padding: 0.55rem 2.6rem 0.55rem 0.85rem;
    border: 1px solid var(--mp-border);
    border-radius: 0.85rem;
    background: #fff;
    color: var(--mp-text);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.mp-abstimmung-person-select-value {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.mp-abstimmung-person-select-avatar,
.mp-abstimmung-person-select-option-avatar {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.mp-abstimmung-person-select-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-abstimmung-person-select-chevron {
    position: absolute;
    top: 50%;
    right: 0.95rem;
    transform: translateY(-50%);
    color: var(--mp-text-soft);
    pointer-events: none;
    font-size: 0.95rem;
}

.mp-abstimmung-person-select-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 20;
    display: grid;
    gap: 0.25rem;
    padding: 0.45rem;
    border: 1px solid rgba(27, 34, 48, 0.12);
    border-radius: 0.9rem;
    background: #fff;
    box-shadow: 0 16px 32px rgba(15, 20, 28, 0.14);
}

.mp-abstimmung-person-select-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    color: var(--mp-text);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mp-abstimmung-person-select-option:hover,
.mp-abstimmung-person-select-option:focus-visible,
.mp-abstimmung-person-select-option.is-active {
    background: var(--mp-accent-soft);
}

.mp-abstimmung-picker-card--hero {
    padding: 0;
    overflow: hidden;
    gap: 0;
    border: 3px solid var(--mp-border);
    background: #fafbfd;
}

.mp-abstimmung-picker-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
}

.mp-abstimmung-picker-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(15, 20, 28, 0.72) 0%, rgba(15, 20, 28, 0) 100%);
    pointer-events: none;
}

.mp-abstimmung-picker-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-abstimmung-picker-hero-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--mp-accent-strong);
}

.mp-abstimmung-picker-hero-fallback i {
    font-size: 2.4rem;
}

.mp-abstimmung-picker-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.mp-abstimmung-picker-kategorie {
    position: absolute;
    top: calc(0.55rem - 5px);
    left: calc(0.55rem - 5px);
    min-height: auto;
    padding: 0.18rem 0.42rem;
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(27, 34, 48, 0.1);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.32rem;
    max-width: calc(100% - 4rem);
}

.mp-abstimmung-picker-kategorie i {
    font-size: 0.62rem;
}

.mp-abstimmung-picker-kategorie-schnitt {
    display: inline-flex;
    align-items: center;
    gap: 0.02rem;
    padding-left: 0.32rem;
    margin-left: 0.02rem;
    border-left: 1px solid rgba(27, 34, 48, 0.12);
    font-size: 0.58rem;
    color: var(--mp-accent-strong);
}

.mp-abstimmung-picker-kategorie-schnitt i {
    font-size: 0.58rem;
}

.mp-abstimmung-picker-kategorie-stimmen {
    margin-left: 0.22rem;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--mp-text-soft);
    letter-spacing: -0.02em;
}

.mp-abstimmung-picker-check-label {
    position: absolute;
    top: calc(0.55rem - 5px);
    right: calc(0.55rem - 5px);
    z-index: 4;
    width: 2.4rem;
    height: 2.4rem;
    margin: 0;
    cursor: pointer;
}

.mp-abstimmung-picker-check-label .mp-abstimmung-picker-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: auto;
    cursor: pointer;
}

.mp-abstimmung-picker-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 0.65rem;
    border: 2px solid rgba(47, 122, 71, 0.78);
    background: rgba(255, 255, 255, 0.88);
    color: transparent;
    box-shadow: 0 8px 18px rgba(15, 20, 28, 0.18);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.mp-abstimmung-picker-check i {
    font-size: 1.35rem;
    font-weight: 800;
}

.mp-abstimmung-picker-item:has(.mp-abstimmung-picker-input:checked) .mp-abstimmung-picker-check {
    background: #2f7a47;
    border-color: #2f7a47;
    color: #fff;
}

.mp-abstimmung-picker-title {
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.65rem;
    z-index: 3;
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.mp-abstimmung-picker-body {
    display: grid;
    gap: 0;
    padding: 0;
    background: inherit;
}

.mp-abstimmung-picker-accordion {
    border-top: 1px solid rgba(27, 34, 48, 0.08);
    background: inherit;
}

.mp-abstimmung-picker-accordion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: inherit;
}

.mp-abstimmung-picker-accordion-label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mp-text);
}

.mp-abstimmung-picker-rating-list {
    display: grid;
    gap: 0;
}

.mp-abstimmung-picker-rating-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.45rem 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(27, 34, 48, 0.06);
}

.mp-abstimmung-picker-rating-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mp-abstimmung-picker-rating-name {
    font-size: 0.92rem;
    font-weight: 600;
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mp-abstimmung-picker-rating-row .mp-stars {
    padding-top: 0.05rem;
}

.mp-abstimmung-picker-accordion-toggle {
    flex: 0 0 auto;
}

.mp-abstimmung-picker-accordion-body {
    padding: 0 1rem 0.95rem;
    background: inherit;
    border-top: 1px solid rgba(27, 34, 48, 0.06);
    padding-top: 0.95rem;
}

.mp-abstimmung-picker-item:has(.mp-abstimmung-picker-input:checked) .mp-abstimmung-picker-accordion,
.mp-abstimmung-picker-item:has(.mp-abstimmung-picker-input:checked) .mp-abstimmung-picker-accordion-body {
    border-top-color: rgba(47, 122, 71, 0.16);
}

.mp-abstimmung-option-card-inner {
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
}

.mp-abstimmung-option-image {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    color: var(--mp-accent-strong);
}

.mp-abstimmung-option-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-abstimmung-option-image i {
    font-size: 2rem;
}

.mp-abstimmung-option-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.mp-abstimmung-rating-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.2rem;
}

.mp-abstimmung-special-grid {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
}

.mp-plan-modal-actions-abstimmung {
    margin-top: 2rem;
}

.mp-abstimmung-chart-wrap {
    position: relative;
    min-height: 18rem;
    margin-bottom: 1rem;
    max-width: 100%;
    overflow: hidden;
}

.mp-abstimmung-chart-wrap canvas {
    max-width: 100%;
}

.mp-abstimmung-stat-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mp-abstimmung-stat-section {
    margin-top: 1.75rem;
}

.mp-abstimmung-stat-section h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
}

.mp-abstimmung-teilnahme-liste {
    display: grid;
    gap: 0.55rem;
}

.mp-abstimmung-teilnahme-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.mp-abstimmung-teilnahme-row.is-pending {
    opacity: 0.48;
}

.mp-abstimmung-teilnahme-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    color: var(--mp-accent-strong);
}

.mp-abstimmung-teilnahme-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-abstimmung-teilnahme-avatar i {
    font-size: 1.15rem;
}

.mp-abstimmung-teilnahme-name {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mp-abstimmung-teilnahme-row.is-done .mp-abstimmung-teilnahme-name {
    color: var(--mp-text);
}

.mp-abstimmung-teilnahme-row.is-pending .mp-abstimmung-teilnahme-name {
    color: var(--mp-text-soft);
}

.mp-abstimmung-teilnahme-check {
    font-size: 1.4rem;
    font-weight: 900;
    color: #2f7a47;
    line-height: 1;
}

.mp-abstimmung-festlegen-title {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.mp-festlegen-modal-subtitle {
    margin-top: 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mp-text-soft);
}

.mp-festlegen-modal-dialog {
    overflow-x: hidden;
    max-width: calc(100vw - 1.5rem);
}

.mp-festlegen-modal-content {
    overflow-x: hidden;
}

.mp-festlegen-modal-content .modal-body {
    padding-top: 0.5rem;
    overflow-x: hidden;
}

.mp-festlegen-modal-footer {
    display: flex;
    justify-content: stretch;
    padding: 0.4rem 1rem 0.85rem;
    border-top: 1px solid rgba(27, 34, 48, 0.1);
    background: #fff;
}

.mp-festlegen-modal-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 3.1rem;
    padding: 0.7rem 1rem;
    border-radius: 1.15rem;
    font-weight: 700;
}

.mp-abstimmung-festlegen-section {
    scroll-margin-top: 6rem;
}

.mp-abstimmung-festlegen-grid {
    display: grid;
    gap: 0.95rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.mp-abstimmung-festlegen-option-card {
    display: grid;
    gap: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 1px solid rgba(234, 107, 23, 0.18);
    border-radius: 1.15rem;
    background: #fffaf5;
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}

.mp-abstimmung-festlegen-option-card:hover,
.mp-abstimmung-festlegen-option-card:focus-visible {
    border-color: rgba(234, 107, 23, 0.35);
    background: #fff;
}

.mp-abstimmung-festlegen-option-card:hover .mp-abstimmung-festlegen-card-header,
.mp-abstimmung-festlegen-option-card:focus-visible .mp-abstimmung-festlegen-card-header {
    background: #fff3e8;
}

.mp-abstimmung-festlegen-option-card.is-selected {
    border: 3px solid #2f7a47;
    background: rgba(47, 122, 71, 0.06);
    box-shadow: none;
}

.mp-abstimmung-festlegen-option-card.is-selected .mp-abstimmung-festlegen-card-header {
    background: rgba(47, 122, 71, 0.16);
}

.mp-abstimmung-festlegen-option-card:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.mp-abstimmung-festlegen-voters {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem 0.85rem;
}

.mp-abstimmung-festlegen-voter-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.mp-abstimmung-festlegen-voter-row .mp-member-avatar {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
}

.mp-abstimmung-festlegen-voter-name {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mp-text);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mp-abstimmung-festlegen-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid rgba(234, 107, 23, 0.16);
    background: var(--mp-accent-soft);
    pointer-events: none;
    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}

.mp-abstimmung-festlegen-option-card.is-selected .mp-abstimmung-festlegen-card-header {
    border-bottom-color: rgba(47, 122, 71, 0.22);
}

.mp-abstimmung-festlegen-count {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 1.4rem;
    height: 1.4rem;
    margin-left: auto;
    padding: 0 0.25rem;
    border: 2px solid var(--mp-accent-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--mp-accent-strong);
    box-sizing: border-box;
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.mp-abstimmung-festlegen-name {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 0.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mp-text);
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.mp-abstimmung-festlegen-option-card.is-selected .mp-abstimmung-festlegen-count {
    border-color: #2f7a47;
    color: #2f7a47;
    background: rgba(47, 122, 71, 0.08);
}

.mp-abstimmung-festlegen-option-card.is-selected .mp-abstimmung-festlegen-name {
    color: #1f5d34;
}

.mp-abstimmung-festlegen-voters-empty {
    margin: 0;
    padding: 0.7rem 0.9rem 0.85rem;
    text-align: left;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--mp-text-soft);
}

.mp-abstimmung-wahl-liste {
    margin-top: 0.25rem;
}

.mp-abstimmung-wahl-trenner {
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(27, 34, 48, 0.12);
    opacity: 1;
}

.mp-abstimmung-wahl-zeile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 0;
}

.mp-abstimmung-wahl-thumb {
    width: 3.25rem;
    height: 3.25rem;
    flex-shrink: 0;
    border-radius: 0.65rem;
    overflow: hidden;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
}

.mp-abstimmung-wahl-thumb img,
.mp-abstimmung-wahl-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-abstimmung-wahl-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #c94b2a;
    font-size: 1.35rem;
}

.mp-abstimmung-wahl-text {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--mp-text);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mp-empty-state-compact {
    padding: 0.85rem 0.95rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.6);
}

.mp-empty-state p.mp-plan-gericht-empty-hint {
    color: #c62828;
}

.mp-empty-state-compact .mp-empty-state-action {
    margin-top: 0.75rem;
}

.mp-confirm-modal-content {
    overflow: hidden;
}

.mp-confirm-modal-body {
    color: var(--mp-text);
    line-height: 1.55;
}

.mp-confirm-modal-body p + p {
    margin-top: 0.75rem;
}

.mp-confirm-modal-body .mp-confirm-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.mp-confirm-modal-body .mp-confirm-list li + li {
    margin-top: 0.35rem;
}

.mp-confirm-modal-content .modal-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.mp-confirm-button-danger {
    background: linear-gradient(135deg, #df6b4d 0%, #c94b2a 100%);
    color: #ffffff;
    border: 0;
    box-shadow: 0 12px 22px rgba(201, 75, 42, 0.24);
}

.mp-confirm-button-danger:hover,
.mp-confirm-button-danger:focus {
    color: #ffffff;
}

.mp-confirm-choice-list {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

.mp-confirm-choice-card {
    display: block;
    cursor: pointer;
}

.mp-confirm-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mp-confirm-choice-card-body {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid var(--mp-border);
    background: #fafbfd;
    color: var(--mp-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mp-confirm-choice-card-body strong {
    font-size: 0.95rem;
}

.mp-confirm-choice-card-body span {
    color: var(--mp-text-soft);
    font-size: 0.9rem;
}

.mp-confirm-choice-card input:checked + .mp-confirm-choice-card-body {
    border-color: rgba(234, 107, 23, 0.35);
    background: var(--mp-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(234, 107, 23, 0.08);
}

.mp-profile-content {
    padding: 0 0.85rem 1rem;
}

.mp-profile-content .mp-page-header {
    padding-left: 0;
    padding-right: 0;
}

.mp-profile-grid {
    grid-template-columns: 1fr;
}

.mp-profile-name-row {
    gap: 1rem;
}

.mp-profile-name-copy {
    min-width: 0;
}

.mp-profile-name-copy h2 {
    font-size: clamp(2rem, 6vw, 2.65rem);
    line-height: 1.05;
    word-break: break-word;
}

.mp-profile-name-copy p {
    margin-top: 0.7rem;
}

.mp-profile-edit-button {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    margin-top: 0.1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(234, 107, 23, 0.18);
    color: var(--mp-accent-strong);
    box-shadow: 0 12px 22px rgba(234, 107, 23, 0.12);
}

.mp-profile-avatar-block {
    display: grid;
    gap: 1rem;
}

.mp-profile-avatar {
    width: min(11rem, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    color: var(--mp-accent-strong);
    box-shadow:
        0 20px 30px rgba(27, 34, 48, 0.08),
        inset 0 0 0 3px rgba(255, 255, 255, 0.72);
}

.mp-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-profile-avatar i {
    font-size: 4rem;
}

.mp-profile-avatar-copy {
    display: grid;
    gap: 1rem;
}

.mp-profile-avatar-copy .mp-card-copy {
    text-align: center;
}

.mp-danger-zone-card {
    border-color: rgba(159, 47, 29, 0.18);
    background: linear-gradient(180deg, #fffaf8 0%, #fff4f0 100%);
}

.mp-danger-zone-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.4rem;
}

.mp-croppie-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
}

.mp-croppie-wrap.mp-croppie-wrap-gericht {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    padding: 0 !important;
}

#mp-croppie {
    width: 100%;
}

#mpGerichtCroppie {
    width: auto !important;
    height: auto !important;
}

#mp-croppie .cr-boundary,
#mpGerichtCroppie .cr-boundary {
    border-radius: 1.3rem;
    background: linear-gradient(180deg, #fff7f1 0%, #fff1e6 100%);
}

#mpGerichtCroppie .cr-boundary {
    background: transparent !important;
    border: none !important;
}

#mp-croppie .cr-viewport,
#mpGerichtCroppie .cr-viewport {
    box-shadow:
        0 0 0 2000px rgba(27, 34, 48, 0.42),
        0 0 0 3px rgba(255, 255, 255, 0.9),
        0 12px 26px rgba(27, 34, 48, 0.22);
}

#mpGerichtCroppie .cr-viewport {
    border: 2px solid #fff !important;
    border-radius: 1.15rem !important;
    box-shadow: 0 0 0 2000px rgba(27, 34, 48, 0.42) !important;
}

.mp-croppie-wrap .cr-slider-wrap {
    width: min(100%, 15.5rem);
    margin: 1.2rem auto 0;
    padding: 0.45rem 0.1rem 0;
}

#mpGerichtCroppie .cr-slider-wrap {
    display: none;
}

.mp-croppie-wrap .cr-slider,
.mp-crop-range {
    width: 100%;
    height: 2.6rem;
    cursor: pointer;
    accent-color: var(--mp-accent);
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    touch-action: pan-x;
}

.mp-croppie-wrap .cr-slider::-webkit-slider-runnable-track,
.mp-crop-range::-webkit-slider-runnable-track {
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(27, 34, 48, 0.34);
}

.mp-croppie-wrap .cr-slider::-webkit-slider-thumb,
.mp-crop-range::-webkit-slider-thumb {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: -0.65rem;
    border: 0.25rem solid #fff;
    border-radius: 50%;
    background: var(--mp-accent);
    box-shadow: 0 0.45rem 1rem rgba(234, 107, 23, 0.38);
    appearance: none;
    -webkit-appearance: none;
}

.mp-croppie-wrap .cr-slider::-moz-range-track,
.mp-crop-range::-moz-range-track {
    height: 0.5rem;
    border: 0;
    border-radius: 999px;
    background: rgba(27, 34, 48, 0.34);
}

.mp-croppie-wrap .cr-slider::-moz-range-thumb,
.mp-crop-range::-moz-range-thumb {
    width: 1.35rem;
    height: 1.35rem;
    border: 0.25rem solid #fff;
    border-radius: 50%;
    background: var(--mp-accent);
    box-shadow: 0 0.45rem 1rem rgba(234, 107, 23, 0.38);
}

#mp-croppie .cr-overlay,
#mpGerichtCroppie .cr-overlay {
    background: rgba(255, 138, 61, 0.05);
}

.mp-auth-screen {
    min-height: calc(100vh - max(1rem, env(safe-area-inset-bottom)));
    min-height: calc(100dvh - max(1rem, env(safe-area-inset-bottom)));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding:
        max(1.35rem, env(safe-area-inset-top))
        max(0.95rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom))
        max(0.95rem, env(safe-area-inset-left));
}

.mp-auth-card {
    width: min(100%, 32rem);
    padding: 0.6rem 0.5rem 0.75rem;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.mp-auth-screen-card {
    display: grid;
    gap: 1.1rem;
}

.mp-auth-card-compact {
    display: grid;
    gap: 1rem;
}

.mp-auth-logo-wrap {
    display: flex;
    justify-content: center;
    padding: 0.45rem 0 0.1rem;
}

.mp-auth-brand {
    padding: 1.15rem;
    border-radius: 1.45rem;
    background: linear-gradient(180deg, rgba(255, 233, 214, 0.98) 0%, rgba(255, 224, 195, 0.94) 100%);
    border: 1px solid rgba(234, 107, 23, 0.18);
    box-shadow:
        0 10px 22px rgba(234, 107, 23, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.mp-auth-brand-compact {
    margin-bottom: 0.15rem;
}

.mp-auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mp-accent-strong);
    margin-bottom: 0.45rem;
}

.mp-auth-logo {
    display: block;
    width: min(100%, 19rem);
    height: auto;
    margin: 0;
}

.mp-auth-brand h1 {
    margin: 0;
    font-size: 1.75rem;
}

.mp-auth-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0.35rem;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(234, 107, 23, 0.12);
    box-shadow:
        0 12px 26px rgba(27, 34, 48, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.mp-auth-toggle-button {
    min-height: 3.2rem;
    border: 0;
    border-radius: 1.1rem;
    background: transparent;
    color: var(--mp-text-soft);
    font-size: 1rem;
    font-weight: 800;
    transition:
        transform 0.18s ease,
        color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.mp-auth-toggle-button.is-active {
    background: linear-gradient(135deg, #ffb067 0%, var(--mp-accent) 45%, var(--mp-accent-strong) 100%);
    color: #ffffff;
    box-shadow:
        0 16px 28px rgba(234, 107, 23, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
    transform: translateY(-1px);
}

.mp-auth-brand p,
.mp-auth-copy {
    margin: 0.55rem 0 0;
    color: var(--mp-text-soft);
    line-height: 1.45;
}

.mp-auth-panel {
    padding: 0.2rem 0.1rem 0;
}

.mp-auth-panel-header h1,
.mp-auth-panel-header h2 {
    margin: 0;
    font-size: 1.4rem;
}

.mp-auth-panel-header p {
    margin: 0.45rem 0 0;
    color: var(--mp-text-soft);
    line-height: 1.45;
}

.mp-auth-panel-header-success {
    margin-bottom: 0.1rem;
}

.mp-auth-form {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
}

.mp-field {
    display: grid;
    gap: 0.38rem;
    font-weight: 600;
}

.mp-field span:first-child {
    font-size: 0.95rem;
}

.mp-input,
.mp-input.form-control {
    min-height: 3.3rem;
    border-radius: 1rem;
    border: 1px solid var(--mp-border-strong);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: none;
    padding-inline: 1rem;
}

.mp-input:focus,
.mp-input.form-control:focus {
    border-color: rgba(234, 107, 23, 0.5);
    box-shadow: 0 0 0 0.18rem rgba(255, 138, 61, 0.14);
}

.mp-password-wrap {
    position: relative;
    display: block;
}

.mp-password-wrap .mp-input {
    padding-right: 3.5rem;
}

.mp-input-icon {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mp-text-soft);
}

.mp-input-icon i {
    font-size: 1.15rem;
}

.mp-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0.1rem 0;
    color: var(--mp-text-soft);
}

.mp-check .form-check-input {
    margin-top: 0.22rem;
}

.mp-check .form-check-label {
    line-height: 1.4;
}

.mp-auth-actions {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.mp-auth-register-copy {
    margin-top: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 241, 230, 0.72);
    border: 1px solid rgba(234, 107, 23, 0.12);
}

.mp-text-button {
    border: 0;
    background: transparent;
    color: var(--mp-accent-strong);
    font-weight: 700;
    text-align: center;
    padding: 0.35rem 0;
}

.mp-alert {
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    margin: 1rem 0 0.85rem;
    border: 1px solid transparent;
    line-height: 1.4;
}

.mp-alert-error {
    color: #8a2d15;
    background: #fff0eb;
    border-color: #ffd7c9;
}

.mp-alert-success {
    color: #1e5b34;
    background: #eefaf1;
    border-color: #cfe9d8;
}

.mp-alert-info {
    color: #22476d;
    background: #eef5ff;
    border-color: #d2e4ff;
}

.mp-alert-inline-form {
    margin-top: 0.6rem;
}

.mp-alert-danger-button {
    min-height: 2rem;
    padding: 0.22rem 0.7rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(162, 43, 21, 0.16);
    background: #fff0eb;
    color: #8a2d15;
    font-size: 0.88rem;
    font-weight: 600;
}

.mp-auth-inline-action {
    margin-top: -0.1rem;
    margin-bottom: 0.8rem;
}

.mp-password-hinweis {
    margin-top: -0.1rem;
    font-size: 0.88rem;
    color: var(--mp-text-soft);
}

.mp-password-hinweis.is-valid {
    color: #1e5b34;
}

.mp-password-hinweis.is-invalid {
    color: #8a2d15;
}

.mp-input-valid,
.mp-input-valid.form-control {
    border-color: #67b27c;
}

.mp-input-invalid,
.mp-input-invalid.form-control {
    border-color: #ea8b72;
}

.mp-input-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mp-scanner-frame {
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background: #10131a;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mp-scanner-video {
    display: block;
    width: 100%;
    min-height: 15rem;
    object-fit: cover;
}

.mp-scanner-status {
    margin-top: 0.9rem;
    color: var(--mp-text-soft);
    line-height: 1.45;
}

.mp-toast-host {
    position: fixed;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 2000;
    display: grid;
    gap: 0.55rem;
    width: min(calc(100% - 1.5rem), 28rem);
}

.mp-toast-host-center {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    pointer-events: none;
}

.mp-toast-host-center .mp-toast {
    pointer-events: auto;
    width: min(100%, 16rem);
    text-align: center;
    transform: scale(0.96) translateY(0.35rem);
}

.mp-toast-host-center .mp-toast.is-visible {
    transform: scale(1) translateY(0);
}

.mp-toast {
    opacity: 0;
    transform: translateY(0.5rem);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    color: #fff;
    box-shadow: 0 16px 30px rgba(27, 34, 48, 0.16);
}

.mp-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mp-toast-info {
    background: #425466;
}

.mp-toast-success {
    background: #2f7a47;
}

.mp-toast-error {
    background: #a9442b;
}

.mp-page-loader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(1.25rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1.25rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    background:
        radial-gradient(circle at top, rgba(255, 138, 61, 0.12) 0%, rgba(16, 19, 26, 0) 34%),
        rgba(16, 19, 26, 0.18);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.mp-page-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mp-page-loader-spinner {
    width: 3.8rem;
    height: 3.8rem;
    border: 0.34rem solid rgba(255, 255, 255, 0.32);
    border-top-color: #ffffff;
    border-right-color: var(--mp-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 0.5rem rgba(255, 138, 61, 0.08);
    animation: mp-loader-spin 0.85s linear infinite;
}

.mp-scroll-top-button {
    position: fixed;
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 2100;
    width: 3.35rem;
    height: 3.35rem;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff9d4d 0%, var(--mp-accent) 42%, var(--mp-accent-strong) 100%);
    color: #ffffff;
    box-shadow: 0 18px 28px rgba(234, 107, 23, 0.26);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.6rem);
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

.mp-scroll-top-button.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

body.modal-open .mp-scroll-top-button,
body.modal-open .mp-scroll-top-button.is-visible {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.6rem);
}

.mp-scroll-top-button i {
    font-size: 1.2rem;
}

@keyframes mp-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 768px) {
    .mp-shell {
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    .mp-body-dashboard .mp-content {
        padding-inline: 1rem;
    }

    .mp-gericht-filter-wrap {
        padding-inline: 1rem;
    }

    .mp-profile-content {
        padding-inline: 1rem;
    }

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

    .mp-profile-avatar-block {
        grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
        align-items: center;
    }

    .mp-profile-avatar-copy .mp-card-copy {
        text-align: left;
    }

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

    .mp-family-share-grid {
        justify-items: center;
    }

    .mp-family-switch-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-family-header-copy h2 {
        max-width: 100%;
    }

    .mp-toolbar-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .mp-gericht-upload-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .mp-auth-card {
        padding: 0.8rem 0.65rem 0.9rem;
    }

    .mp-confirm-modal-content .modal-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .mp-empty-state {
        grid-template-columns: 1fr;
    }

    .mp-day-title-row {
        align-items: center;
        gap: 0.45rem;
    }

    .mp-day-header-copy .mp-day-date {
        font-size: 1.15rem;
    }

    .mp-day-header h2 {
        font-size: 1.15rem;
    }

    .mp-meal-head-row {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .mp-meal-buffet-item-head {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .mp-meal-icon {
        width: 4.5rem;
        height: 4.5rem;
    }

    .mp-empty-day-icon {
        width: 4.5rem;
        height: 4.5rem;
    }

    .mp-meal-details {
        padding-left: 1rem;
    }

    .mp-rating-row-rich {
        grid-template-columns: 1fr;
    }

    .mp-rating-static,
    .mp-rating-control {
        justify-items: start;
        min-width: 0;
    }

    .mp-auth-screen {
        padding:
            max(1rem, env(safe-area-inset-top))
            max(0.55rem, env(safe-area-inset-right))
            max(0.8rem, env(safe-area-inset-bottom))
            max(0.55rem, env(safe-area-inset-left));
    }

    .mp-auth-card {
        padding: 0.45rem 0.3rem 0.6rem;
    }
}

/* Android WebView: Safe-Area kommt aus Native-Padding (MainActivity/WindowInsets), nicht aus CSS */
.mp-android-app .mp-shell {
    padding: 0;
}

.mp-android-app .mp-gericht-filter-wrap {
    top: 4rem;
}

.mp-android-app .mp-scroll-top-button,
.mp-ios-app .mp-scroll-top-button {
    bottom: 10px;
}

/* iOS WebView: Safe-Area kommt aus WKWebView-Bridge + env()-Fallback */
.mp-ios-app {
    --mp-safe-top: var(--mp-app-safe-top, env(safe-area-inset-top, 0px));
    --mp-safe-right: var(--mp-app-safe-right, env(safe-area-inset-right, 0px));
    --mp-safe-bottom: var(--mp-app-safe-bottom, env(safe-area-inset-bottom, 0px));
    --mp-safe-left: var(--mp-app-safe-left, env(safe-area-inset-left, 0px));
}

.mp-ios-app .mp-shell {
    padding:
        0
        max(0rem, var(--mp-safe-right))
        max(1rem, var(--mp-safe-bottom))
        max(0rem, var(--mp-safe-left));
}

.mp-ios-app .mp-gericht-filter-wrap {
    top: calc(max(0.75rem, var(--mp-safe-top)) + 4rem);
}

.mp-ios-app .mp-topbar {
    top: 0;
    padding-top: max(0.75rem, var(--mp-safe-top));
    background: var(--mp-bg);
}

.mp-ios-app .mp-topbar-inner {
    background: rgba(247, 241, 231, 0.96);
    backdrop-filter: blur(10px);
}

.mp-ios-app .mp-scroll-top-button {
    right: max(0.75rem, var(--mp-safe-right));
}

/* Modals liegen außerhalb .mp-shell — Safe-Area für Schließen-Button unter Statusleiste */
.mp-ios-app .modal {
    box-sizing: border-box;
    padding:
        max(0.75rem, var(--mp-safe-top))
        max(0rem, var(--mp-safe-right))
        max(0.5rem, var(--mp-safe-bottom))
        max(0rem, var(--mp-safe-left));
}

.mp-ios-app .modal-dialog-centered {
    min-height: calc(100% - var(--mp-safe-top) - var(--mp-safe-bottom));
}

.mp-ios-app .mp-abstimmung-modal-content {
    max-height: calc(100dvh - 2rem - var(--mp-safe-top) - var(--mp-safe-bottom));
}

.mp-ios-app .mp-plan-gericht-picker-modal-content {
    min-height: auto;
    height: 100%;
}

.mp-ios-app .mp-gratis-credits-modal-content {
    max-height: calc(100dvh - 2rem - var(--mp-safe-top) - var(--mp-safe-bottom));
}

/* Offcanvas: Hintergrund volle Höhe — Header (Navigation + Schließen) unter Statusleiste */
.mp-ios-app .mp-offcanvas .offcanvas-header {
    padding-top: max(0.75rem, var(--mp-safe-top));
    padding-right: max(0.75rem, var(--mp-safe-right));
    padding-left: max(0.75rem, var(--mp-safe-left));
}

.mp-app-debug {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: rgba(234, 107, 23, 0.08);
    border: 1px dashed rgba(234, 107, 23, 0.35);
    font-size: 0.82rem;
    color: #425466;
}

.mp-app-debug-title {
    margin-bottom: 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ea6b17;
}

.mp-app-debug-list {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.mp-app-debug-list div {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.5rem;
}

.mp-app-debug-list dt {
    margin: 0;
    font-weight: 600;
    color: #667085;
}

.mp-app-debug-list dd {
    margin: 0;
}

.mp-app-debug-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    word-break: break-all;
}

.mp-app-debug-hint {
    margin: 0.65rem 0 0;
    font-size: 0.74rem;
    color: #667085;
}

.mp-legal-card {
    max-width: 42rem;
    width: 100%;
    text-align: left;
}

.mp-legal-header {
    margin-bottom: 1.25rem;
}

.mp-legal-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    color: var(--mp-accent-strong);
    font-weight: 700;
    text-decoration: none;
}

.mp-legal-back:hover {
    text-decoration: underline;
}

.mp-legal-header h1 {
    margin: 0.75rem 0 0.35rem;
    font-size: 1.55rem;
}

.mp-legal-meta {
    margin: 0;
    color: var(--mp-text-soft);
    font-size: 0.9rem;
}

.mp-legal-content {
    color: var(--mp-text);
    line-height: 1.6;
    font-size: 0.95rem;
}

.mp-legal-content h2 {
    margin: 1.35rem 0 0.55rem;
    font-size: 1.05rem;
}

.mp-legal-content p,
.mp-legal-content ul {
    margin: 0 0 0.85rem;
}

.mp-legal-content ul {
    padding-left: 1.2rem;
}

.mp-legal-content li + li {
    margin-top: 0.35rem;
}

.mp-legal-content a {
    color: var(--mp-accent-strong);
    font-weight: 600;
}

.mp-legal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(16, 19, 26, 0.08);
    font-size: 0.9rem;
}

.mp-legal-footer a {
    color: var(--mp-accent-strong);
    font-weight: 700;
    text-decoration: none;
}

.mp-legal-footer a:hover {
    text-decoration: underline;
}

.mp-check .form-check-label a {
    color: var(--mp-accent-strong);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

@media (min-width: 768px) {
    .mp-legal-card {
        padding: 2rem 2.1rem;
    }
}

.mp-toolbar-plain {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.mp-einkaufsliste-section + .mp-einkaufsliste-section {
    margin-top: 1rem;
}

.mp-einkaufsliste-gespeichert-list {
    display: grid;
    gap: 0.75rem;
}

.mp-einkaufsliste-gespeichert-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(16, 19, 26, 0.08);
}

.mp-einkaufsliste-gespeichert-meta {
    flex: 1 1 100%;
    min-width: 0;
}

.mp-einkaufsliste-gespeichert-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.mp-einkaufsliste-gespeichert-datum {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--mp-text-soft);
}

.mp-einkaufsliste-gespeichert-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 1 1 100%;
    width: 100%;
}

.mp-einkaufsliste-gespeichert-fortschritt {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--mp-text-soft);
    white-space: nowrap;
}

.mp-einkaufsliste-gespeichert-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.mp-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mp-einkaufsliste-neu-form .mp-field {
    min-width: 0;
}

.mp-einkaufsliste-datum-row {
    gap: 0.55rem;
}

.mp-einkaufsliste-datum-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 2.75rem;
    padding-inline: 0.55rem;
    font-size: 0.84rem;
    letter-spacing: -0.01em;
}

.mp-einkaufsliste-datum-input::-webkit-date-and-time-value {
    text-align: left;
}

.mp-einkaufsliste-datum-input::-webkit-datetime-edit {
    padding: 0;
}

.mp-einkaufsliste-datum-input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.mp-einkaufsliste-datum-input::-webkit-datetime-edit-text,
.mp-einkaufsliste-datum-input::-webkit-datetime-edit-month-field,
.mp-einkaufsliste-datum-input::-webkit-datetime-edit-day-field,
.mp-einkaufsliste-datum-input::-webkit-datetime-edit-year-field {
    padding: 0 0.08rem;
}

.mp-einkaufsliste-datum-input::-webkit-calendar-picker-indicator {
    margin-inline-start: 0.1rem;
    padding: 0;
    opacity: 0.72;
}

.mp-einkaufsliste-meals {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.mp-page-header--einkauf-builder .mp-page-header-inner,
.mp-page-header--einkauf-view .mp-page-header-inner {
    display: block;
}

.mp-einkaufsliste-zeitraum {
    margin: 0.35rem 0 0;
    font-size: 1rem;
    color: var(--mp-text);
}

.mp-einkaufsliste-hinweis {
    margin: 0.35rem 0 0;
    font-size: 0.84rem;
    color: var(--mp-text-soft);
    font-weight: 500;
}

.mp-einkauf-meal {
    padding: 1rem;
}

.mp-einkauf-meal-main {
    display: flex;
    gap: 0.85rem;
    align-items: stretch;
}

.mp-einkauf-meal-image {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: 5.25rem;
}

.mp-einkauf-mitessen-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.15rem;
}

.mp-einkauf-mitessen-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    min-width: 0;
    margin-bottom: 8px;
}

.mp-einkauf-mitessen-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mp-einkauf-mitessen-icon i {
    font-size: 0.95rem;
    line-height: 1;
}

.mp-einkauf-mitessen-count {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.mp-einkauf-mitessen-col.is-ja .mp-einkauf-mitessen-icon,
.mp-einkauf-mitessen-col.is-ja .mp-einkauf-mitessen-count {
    color: #2f7a47;
}

.mp-einkauf-mitessen-col.is-unklar .mp-einkauf-mitessen-icon,
.mp-einkauf-mitessen-col.is-unklar .mp-einkauf-mitessen-count {
    color: #3b6fd8;
}

.mp-einkauf-mitessen-col.is-nein .mp-einkauf-mitessen-icon,
.mp-einkauf-mitessen-col.is-nein .mp-einkauf-mitessen-count {
    color: #c0392b;
}

.mp-einkauf-meal-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mp-einkauf-meal-title-row {
    margin-top: 0.35rem;
}

.mp-einkauf-meal-title {
    margin: 0.35rem 0 0;
    font-size: 1.05rem;
}

.mp-einkauf-meal-slot {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    color: var(--mp-text-soft);
}

.mp-einkauf-meal-meta .mp-gericht-badge-row {
    margin-top: 0;
}

.mp-einkauf-meal-controls-wrap {
    margin-top: auto;
    padding-top: 0.85rem;
}

.mp-einkauf-meal-controls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0;
    min-width: 0;
}

.mp-einkauf-stepper {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 9.5rem;
}

.mp-einkauf-stepper-btn {
    width: 2.5rem;
    border-color: rgba(16, 19, 26, 0.12);
    color: var(--mp-text);
}

.mp-einkauf-stepper-input {
    text-align: center;
    font-weight: 700;
    -moz-appearance: textfield;
    appearance: textfield;
}

.mp-einkauf-stepper-input::-webkit-outer-spin-button,
.mp-einkauf-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mp-einkauf-personen-toggle {
    width: 2.85rem;
    height: 2.85rem;
    min-width: 2.85rem;
    min-height: 2.85rem;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    border: 1px solid rgba(234, 107, 23, 0.18);
    background: rgba(234, 107, 23, 0.08);
    color: var(--mp-accent-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    padding: 0;
}

.mp-einkauf-personen-panel {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(16, 19, 26, 0.08);
}

.mp-einkauf-meal.is-personen-open .mp-einkauf-personen-panel {
    margin-top: 0.55rem;
    padding-top: 0;
    border-top: 0;
}

.mp-einkaufsliste-zutaten {
    display: grid;
    gap: 0.55rem;
}

.mp-einkaufsliste-zutaten-hinweis {
    margin: 0 0 0.85rem;
    color: var(--mp-text-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

.mp-einkaufsliste-zutat-hinzufuegen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.72rem 1rem;
    border: 1.5px solid #2f7a47;
    border-radius: 0.95rem;
    background: transparent;
    color: #2f7a47;
    font-weight: 700;
}

.mp-einkaufsliste-zutat-hinzufuegen-btn:hover,
.mp-einkaufsliste-zutat-hinzufuegen-btn:focus-visible {
    background: rgba(47, 122, 71, 0.08);
    border-color: #256338;
    color: #256338;
}

.mp-einkauf-zutat.is-manuell {
    background: linear-gradient(180deg, #f4fbf7 0%, #eaf7ee 100%);
    border-color: rgba(47, 122, 71, 0.22);
}

.mp-einkauf-zutat.is-manuell.is-removed {
    background: #f0f4f1;
    border-color: rgba(47, 122, 71, 0.18);
}

.mp-einkauf-zutat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(16, 19, 26, 0.08);
}

.mp-einkauf-zutat-label,
.mp-einkauf-check-label {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.mp-einkauf-zutat-text {
    display: grid;
    gap: 0.12rem;
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.25;
}

.mp-einkauf-check .mp-einkauf-zutat-text {
    flex: 1;
}

.mp-einkauf-zutat-meta {
    color: var(--mp-text);
    font-size: 0.92rem;
    font-weight: 700;
}

.mp-einkauf-zutat-name {
    font-weight: 400;
    color: var(--mp-text-soft);
    font-size: 0.88rem;
}

.mp-einkauf-zutat.is-removed {
    background: #f6f7f9;
    border-style: dashed;
}

.mp-einkauf-zutat.is-removed .mp-einkauf-zutat-meta,
.mp-einkauf-zutat.is-removed .mp-einkauf-zutat-name {
    font-weight: 400;
    color: var(--mp-text-soft);
    font-size: 0.82rem;
}

.mp-einkauf-zutat-removed-copy {
    flex: 1;
    font-size: 0.82rem;
    color: var(--mp-text-soft);
}

.mp-einkauf-zutat-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.mp-einkauf-zutat-remove {
    color: var(--mp-accent-strong);
}

.mp-einkauf-check {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.mp-einkauf-check .form-check-input {
    width: 1.65rem;
    height: 1.65rem;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.mp-einkauf-check .form-check-input:checked {
    background-color: #2f7a47;
    border-color: #2f7a47;
}

[data-mp-einkaufsliste-page="view"] .mp-einkaufsliste-overview {
    margin-top: 1.25rem;
}

[data-mp-einkaufsliste-page="view"] .mp-einkaufsliste-zutaten {
    gap: 0;
}

[data-mp-einkaufsliste-page="view"] .mp-einkauf-zutat {
    padding: 0.75rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid rgba(16, 19, 26, 0.08);
}

[data-mp-einkaufsliste-page="view"] .mp-einkauf-zutat:last-child {
    border-bottom: 0;
}

[data-mp-einkaufsliste-page="view"] .mp-einkauf-zutat.is-manuell,
[data-mp-einkaufsliste-page="view"] .mp-einkauf-zutat.is-manuell.is-removed {
    background: transparent;
    border-color: transparent;
}

[data-mp-einkaufsliste-page="view"] .mp-einkauf-zutat-meta,
[data-mp-einkaufsliste-page="view"] .mp-einkauf-zutat-name,
[data-mp-einkaufsliste-page="view"] .mp-einkauf-zutat-text {
    font-size: 1rem;
}

[data-mp-einkaufsliste-page="view"] .mp-einkauf-zutat.is-checked [data-mp-einkauf-zutat-bearbeiten] {
    display: none;
}

.mp-einkauf-zutat.is-checked .mp-einkauf-check-label {
    color: var(--mp-text-soft);
    text-decoration: line-through;
}

.mp-einkauf-zutat.is-checked .mp-einkauf-zutat-name {
    text-decoration: line-through;
    color: var(--mp-text-soft);
}

.mp-einkauf-zutat.is-checked .mp-einkauf-zutat-meta {
    text-decoration: line-through;
}

.mp-einkauf-zutat-modal-row {
    display: grid;
    grid-template-columns: 5.5rem 7rem 1fr;
    gap: 0.55rem;
}

.mp-einkaufsliste-overview-list {
    display: grid;
    gap: 0.55rem;
}

.mp-einkaufsliste-overview-item {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(16, 19, 26, 0.06);
}

.mp-einkaufsliste-overview-item:last-child {
    border-bottom: 0;
}

.mp-einkaufsliste-overview-datum,
.mp-einkaufsliste-overview-personen {
    font-size: 0.82rem;
    color: var(--mp-text-soft);
}

.mp-einkaufsliste-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1rem 0 1.5rem;
}

.mp-einkaufsliste-footer-actions--inline {
    margin: 0.85rem 0 0;
}

.mp-einkaufsliste-inline-back {
    margin-top: 0.85rem;
}

.mp-einkaufsliste-page-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 1rem 0 1.5rem;
}

.mp-einkaufsliste-back-btn {
    width: 100%;
}

.mp-einkaufsliste-delete-form {
    margin: 2.25rem 0 0;
}

.mp-einkaufsliste-delete-btn {
    align-self: flex-start;
    min-height: 1.85rem;
    padding: 0.3rem 0.7rem;
    border-radius: 0.7rem;
    background: #fff5f5;
    color: #c0392b;
    border: 1px solid rgba(192, 57, 43, 0.38);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}

.mp-einkaufsliste-delete-btn:hover,
.mp-einkaufsliste-delete-btn:focus-visible {
    background: #fdeaea;
    color: #a93226;
    border-color: rgba(169, 50, 38, 0.5);
}

[data-mp-einkaufsliste-page="view"] .mp-einkaufsliste-zutaten-section {
    padding-top: 1rem;
}

.mp-einkaufsliste-footer-actions--builder {
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 575.98px) {
    .mp-einkauf-zutat-modal-row {
        grid-template-columns: 1fr;
    }

    .mp-einkaufsliste-overview-item {
        grid-template-columns: 1fr;
    }
}

/* Credits-Shop (IAP-Look) */
.mp-body-credits-shop .mp-content {
    padding-top: 1.75rem;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 214, 79, 0.55), transparent 38%),
        radial-gradient(circle at 88% 18%, rgba(255, 159, 46, 0.35), transparent 32%),
        linear-gradient(180deg, #fff8e8 0%, #fff3cf 42%, #ffe9a8 100%);
}

.mp-credits-shop-content {
    display: grid;
    gap: 1.1rem;
    padding-top: 0.35rem;
    padding-bottom: 1.5rem;
}

.mp-credits-shop-hero {
    text-align: center;
    margin-top: 0.5rem;
}

.mp-credits-shop-hero-inner {
    display: grid;
    gap: 0.55rem;
    justify-items: center;
}

.mp-credits-shop-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd54f, #ffb300);
    color: #6b3f00;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 0.35rem 0.9rem rgba(255, 179, 0, 0.35);
}

.mp-credits-shop-hero h1 {
    margin: 0;
    font-size: 1.85rem;
    color: #5c3200;
}

.mp-credits-shop-hero-copy {
    margin: 0;
    color: #8a5a12;
    font-size: 1rem;
    font-weight: 700;
}

.mp-credits-shop-hero-copy-stacked {
    line-height: 1.45;
}

.mp-credits-shop-hero-copy-stacked strong {
    font-size: 1.08rem;
}

.mp-credits-shop-balance {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 2px solid rgba(255, 193, 7, 0.55);
    color: #6b3f00;
    font-weight: 800;
    box-shadow: 0 0.45rem 1rem rgba(180, 120, 0, 0.14);
}

.mp-credits-shop-balance [data-mp-credits-balance] {
    font-size: 2.1rem;
    line-height: 1.1;
}

.mp-credits-shop-balance i {
    color: #f59e0b;
    font-size: 1.15rem;
}

.mp-credits-shop-balance .mp-wallet-icon-inline {
    width: 1.25rem;
    height: 1.25rem;
}

.mp-credits-shop-balance .mp-wallet-icon-balance {
    flex-shrink: 0;
}

.mp-credits-shop-pakete {
    display: grid;
    gap: 0.95rem;
}

.mp-credits-shop-paket {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 1.15rem 1rem 1rem;
    border-radius: 1.25rem;
    border: 3px solid rgba(255, 193, 7, 0.65);
    background: linear-gradient(180deg, #ffffff 0%, #fff9e8 100%);
    box-shadow: 0 0.65rem 1.35rem rgba(180, 120, 0, 0.16);
    overflow: hidden;
}

.mp-credits-shop-paket.is-featured {
    border-color: #f59e0b;
    transform: scale(1.02);
    box-shadow:
        0 0 0 0.2rem rgba(245, 158, 11, 0.22),
        0 0.85rem 1.65rem rgba(245, 158, 11, 0.28);
}

.mp-credits-shop-paket.is-featured .mp-credits-shop-paket-meta {
    padding-right: 2.25rem;
}

.mp-credits-shop-paket-ribbon-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 6.5rem;
    height: 6.5rem;
    overflow: hidden;
    border-top-right-radius: calc(1.25rem - 3px);
    pointer-events: none;
    z-index: 2;
}

.mp-credits-shop-paket-ribbon {
    position: absolute;
    top: 1.05rem;
    right: -1.95rem;
    width: 8.5rem;
    padding: 0.34rem 0;
    display: block;
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(45deg);
    box-shadow: 0 0.25rem 0.65rem rgba(247, 147, 30, 0.45);
}

.mp-credits-shop-paket-badge {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 0.3rem 0.7rem rgba(22, 163, 74, 0.35);
}

.mp-credits-shop-paket-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mp-credits-shop-paket-meta .mp-credits-shop-paket-ersparnis {
    margin-left: auto;
}

.mp-credits-shop-paket-amount {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.mp-credits-shop-balance .mp-wallet-icon-inline {
    flex-shrink: 0;
}

.mp-credits-shop-paket-amount > .bi,
.mp-credits-shop-paket-amount > .mp-wallet-icon-inline {
    align-self: center;
}

.mp-credits-shop-paket-amount > .mp-wallet-icon-inline {
    width: 1.5rem;
    height: 1.5rem;
}

.mp-credits-shop-paket-amount > .mp-wallet-icon-shop-paket {
    align-self: center;
}

.mp-credits-shop-paket-number {
    font-size: 2.65rem;
    font-weight: 900;
    line-height: 1;
    color: #5c3200;
}

.mp-credits-shop-paket-label {
    font-size: 1.2rem;
    font-weight: 800;
    color: #8a5a12;
}

.mp-credits-shop-paket-ersparnis {
    padding: 0.3rem 0.6rem;
    border-radius: 0.55rem;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.28);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.mp-credits-shop-paket-preise {
    display: grid;
    gap: 0.15rem;
}

.mp-credits-shop-paket-alt {
    color: #9ca3af;
    font-size: 0.95rem;
}

.mp-credits-shop-paket-preis {
    font-size: 2rem;
    line-height: 1.1;
    color: #16a34a;
    font-weight: 900;
}

.mp-credits-shop-paket.is-featured .mp-credits-shop-paket-preis {
    color: #ca8a04;
    text-shadow: 0 0.12rem 0 rgba(255, 255, 255, 0.65);
}

.mp-credits-shop-paket-pro {
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 600;
}

.mp-credits-shop-kaufen-button {
    width: 100%;
    min-height: 3.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.95rem;
    background: linear-gradient(135deg, #34d399 0%, #22c55e 45%, #16a34a 100%);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 0.55rem 1.15rem rgba(22, 163, 74, 0.38);
    animation: mp-credits-shop-pulse 2.4s ease-in-out infinite;
}

.mp-credits-shop-paket.is-featured .mp-credits-shop-kaufen-button {
    background: linear-gradient(135deg, #fde047 0%, #facc15 42%, #f59e0b 100%);
    color: #5c3200;
    box-shadow: 0 0.55rem 1.15rem rgba(245, 158, 11, 0.42);
}

.mp-credits-shop-kaufen-button:hover,
.mp-credits-shop-kaufen-button:focus {
    color: inherit;
    transform: translateY(-1px);
}

@keyframes mp-credits-shop-pulse {
    0%,
    100% {
        box-shadow: 0 0.55rem 1.15rem rgba(22, 163, 74, 0.38);
    }

    50% {
        box-shadow: 0 0.7rem 1.45rem rgba(22, 163, 74, 0.52);
    }
}

.mp-credits-shop-hinweis {
    margin: 0;
    text-align: center;
    color: #8a5a12;
    font-size: 0.82rem;
    font-weight: 600;
}

.mp-credits-shop-footer {
    display: flex;
    justify-content: center;
    padding-top: 0.25rem;
}

@media (max-width: 575.98px) {
    .mp-body-credits-shop .mp-content {
        padding-top: 1rem;
    }

    .mp-credits-shop-paket.is-featured {
        transform: none;
    }

    .mp-credits-shop-paket-ribbon-wrap {
        width: 6rem;
        height: 6rem;
    }

    .mp-credits-shop-paket-ribbon {
        top: 1.55rem;
        right: -2rem;
        width: 8rem;
        font-size: 0.7rem;
    }

    .mp-credits-shop-paket-number {
        font-size: 2.35rem;
    }
}

.mp-body-landing .mp-shell {
    padding: 0;
}

.mp-landing {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    padding:
        max(1.25rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1.25rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    background:
        radial-gradient(circle at top right, rgba(255, 138, 61, 0.14), transparent 34%),
        radial-gradient(circle at bottom left, rgba(72, 160, 108, 0.1), transparent 30%),
        var(--mp-bg);
}

.mp-landing-inner {
    width: min(100%, 42rem);
    display: grid;
    gap: 2rem;
    align-content: center;
}

.mp-landing-hero {
    text-align: center;
    padding: 1.25rem 0.5rem 0.25rem;
}

.mp-landing-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.mp-landing-logo {
    display: block;
    width: min(100%, 17rem);
    height: auto;
}

.mp-landing-kicker {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mp-accent-strong);
}

.mp-landing-title {
    margin: 0 0 0.85rem;
    font-size: clamp(1.75rem, 5vw, 2.35rem);
    line-height: 1.15;
    font-weight: 800;
}

.mp-landing-lead {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--mp-text-soft);
    font-size: 1.05rem;
    line-height: 1.55;
}

.mp-landing-stores {
    padding: 1.35rem 1.1rem 1.15rem;
    border-radius: 1.55rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(234, 107, 23, 0.12);
    box-shadow:
        0 14px 34px rgba(27, 34, 48, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.mp-landing-stores-title {
    margin: 0 0 0.45rem;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
}

.mp-landing-stores-copy {
    margin: 0 auto 1.15rem;
    max-width: 30rem;
    text-align: center;
    color: var(--mp-text-soft);
    font-size: 0.96rem;
    line-height: 1.5;
}

.mp-landing-store-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.mp-landing-store-card {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    padding: 1rem 0.75rem 0.95rem;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255, 248, 241, 0.98) 0%, rgba(255, 255, 255, 0.96) 100%);
    border: 1px solid rgba(234, 107, 23, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.mp-landing-store-card--link {
    color: inherit;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.mp-landing-store-card--link:hover {
    border-color: rgba(234, 107, 23, 0.28);
    box-shadow:
        0 8px 20px rgba(234, 107, 23, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    transform: translateY(-1px);
}

.mp-landing-store-card--link:focus-visible {
    outline: 2px solid var(--mp-accent-strong);
    outline-offset: 2px;
}

.mp-landing-store-icon-wrap {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow:
        0 10px 22px rgba(27, 34, 48, 0.12),
        0 0 0 1px rgba(27, 34, 48, 0.04);
}

.mp-landing-store-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-landing-store-body {
    text-align: center;
}

.mp-landing-store-platform {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.2rem;
    font-size: 0.98rem;
    font-weight: 800;
}

.mp-landing-store-platform i {
    font-size: 1.1rem;
    color: var(--mp-accent-strong);
}

.mp-landing-store-soon {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mp-text-soft);
}

.mp-landing-store-cta {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mp-accent-strong);
}

.mp-landing-footer {
    text-align: center;
    padding: 0.25rem 0.5rem 0.5rem;
}

.mp-landing-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.45rem 0.55rem;
    margin-bottom: 0.65rem;
    font-size: 0.92rem;
}

.mp-landing-footer-nav a {
    color: var(--mp-text-soft);
    text-decoration: none;
    font-weight: 600;
}

.mp-landing-footer-nav a:hover {
    color: var(--mp-accent-strong);
}

.mp-landing-footer-copy {
    margin: 0;
    font-size: 0.82rem;
    color: var(--mp-text-soft);
}

@media (max-width: 575.98px) {
    .mp-landing-inner {
        gap: 1.5rem;
    }

    .mp-landing-store-grid {
        grid-template-columns: 1fr;
    }

    .mp-landing-store-card {
        grid-template-columns: auto 1fr;
        align-items: center;
        justify-items: start;
        text-align: left;
    }

    .mp-landing-store-body {
        text-align: left;
    }
}

/* History */
.mp-history-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.2rem;
    padding: 0.3rem 0.75rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b7cfa 0%, #3d4fd4 55%, #5a3fd1 100%);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(61, 79, 212, 0.28);
    flex-shrink: 0;
}

.mp-history-button:hover,
.mp-history-button:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #6b8bff 0%, #4a5fe0 55%, #6a4fe0 100%);
}

.mp-history-button i {
    font-size: 0.72rem;
    line-height: 1;
}

.mp-history-content {
    position: relative;
}

.mp-history-toolbar {
    position: sticky;
    top: 3.9rem;
    z-index: 1025;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    margin: 0 0 0.85rem;
    padding: 1rem 1rem 0.65rem;
    background: rgba(247, 241, 231, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(27, 34, 48, 0.08);
}

.mp-history-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.mp-history-title {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mp-text);
    text-shadow: 0 2px 14px rgba(61, 79, 212, 0.42), 0 0 2px rgba(91, 124, 250, 0.35);
}

.mp-history-search {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(27, 34, 48, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--mp-text);
    font-size: 0.92rem;
    font-weight: 600;
}

.mp-history-search:focus {
    outline: none;
    border-color: rgba(61, 79, 212, 0.45);
    box-shadow: 0 0 0 3px rgba(91, 124, 250, 0.18);
}

.mp-history-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(27, 34, 48, 0.12);
    background: rgba(255, 255, 255, 0.82);
    color: var(--mp-text);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}

.mp-history-back-button:hover,
.mp-history-back-button:focus {
    color: var(--mp-text);
    background: rgba(255, 255, 255, 0.96);
}

.mp-history-back-button i {
    font-size: 1.15rem;
    line-height: 1;
}

.mp-history-count-badge {
    font-size: 0.82rem;
    font-weight: 800;
    color: #8b95a7;
}

.mp-history-count-badge.has-attendees {
    color: #2f7a47;
}

.mp-history-count-badge span {
    line-height: 1;
}

.mp-history-teilnehmer-block {
    margin-top: 0;
}

.mp-history-teilnehmer-heading {
    margin: 0 0 0.65rem;
    font-size: 1rem;
}

.mp-history-teilnehmer-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mp-history-teilnehmer-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.mp-history-teilnehmer-avatar {
    width: 2.15rem;
    height: 2.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ffe0c7 0%, #fff1e6 100%);
    color: var(--mp-accent-strong);
}

.mp-history-teilnehmer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-history-teilnehmer-avatar i {
    font-size: 1.1rem;
}

.mp-history-teilnehmer-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mp-text);
}

.mp-history-teilnehmer-empty {
    margin: 0;
    font-size: 0.92rem;
    color: var(--mp-text-soft);
    font-style: italic;
}

/* Wallet: Aktivitätspunkte & Familien-Credits */
.mp-wallet-icon {
    display: block;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    flex-shrink: 0;
}

.mp-wallet-icon-inline {
    width: 1.35rem;
    height: 1.35rem;
}

.mp-wallet-icon-button {
    width: 1.2rem;
    height: 1.2rem;
}

.mp-wallet-icon-button-lg {
    width: 2.4rem;
    height: 2.4rem;
}

.mp-wallet-icon-cost {
    width: 1.75rem;
    height: 1.75rem;
}

.mp-wallet-icon.mp-wallet-icon-ki-inline {
    width: 1.8rem;
    height: 1.8rem;
}

.mp-wallet-icon-hero {
    width: 4.5rem;
    height: 4.5rem;
}

.mp-wallet-icon-hero-modal {
    width: 5.85rem;
    height: 5.85rem;
}

.mp-wallet-icon-hero-shop {
    width: 6rem;
    height: 6rem;
}

.mp-wallet-icon-gratis-credits-hero {
    width: 6rem;
    height: 6rem;
}

.mp-wallet-icon-gratis-credits-button {
    width: 2.35rem;
    height: 2.35rem;
}

.mp-wallet-icon-balance {
    width: 2.25rem;
    height: 2.25rem;
}

.mp-wallet-icon-shop-badge {
    width: 1.5rem;
    height: 1.5rem;
}

.mp-wallet-icon-shop-paket {
    width: 2.35rem;
    height: 2.35rem;
}

.mp-wallet-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem 0.45rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid var(--mp-border);
    font-size: 0.95rem;
    color: var(--mp-text);
}

.mp-wallet-badge-lg {
    padding: 0.55rem 1rem 0.55rem 0.65rem;
    font-size: 1.05rem;
}

.mp-wallet-badge-ap {
    border-color: rgba(76, 175, 80, 0.45);
    background: linear-gradient(180deg, #ffffff 0%, #f3fff5 100%);
}

.mp-wallet-badge-credit {
    border-color: rgba(255, 193, 7, 0.55);
    background: linear-gradient(180deg, #ffffff 0%, #fff9e8 100%);
}

.mp-wallet-badge-flow {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.45rem;
    max-width: 100%;
    white-space: nowrap;
    border-color: rgba(76, 175, 80, 0.35);
    background: linear-gradient(90deg, #f3fff5 0%, #ffffff 48%, #fff9e8 100%);
}

.mp-wallet-badge-segment {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.mp-wallet-badge-flow-arrow {
    flex-shrink: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mp-text-soft);
    line-height: 1;
}

.mp-wallet-badge-text strong {
    font-weight: 800;
}

.mp-wallet-inline-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.mp-wallet-inline-arrow {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mp-text-soft);
}

.mp-wallet-card-balance {
    display: flex;
    align-items: center;
}

.mp-wallet-modal-icon-wrap {
    display: flex;
    justify-content: center;
}

.mp-wallet-modal-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.mp-wallet-modal-balance-amount {
    font-size: 4.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mp-accent-strong);
    text-shadow:
        0 0 0.35rem rgba(234, 107, 23, 0.45),
        0 0 0.85rem rgba(234, 107, 23, 0.35),
        0 0 1.35rem rgba(255, 138, 61, 0.28),
        0 2px 0.2rem rgba(234, 107, 23, 0.25);
}

.mp-wallet-modal-hint {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--mp-text-soft);
}

.mp-ki-action-button {
    min-height: 4.35rem;
    padding: 0.85rem 1.1rem;
}

.mp-ki-action-button-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
}

.mp-ki-action-button-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.mp-ki-action-button-title {
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.15;
}

.mp-ki-action-button-sub {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.9);
}

.mp-ki-action-button .mp-ki-credit-cost-inline-amount {
    color: #ffffff;
}

.mp-ki-credit-cost {
    position: absolute;
    top: -0.55rem;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.28rem 0.62rem 0.28rem 0.38rem;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid var(--mp-accent-strong);
    box-shadow: 0 0.15rem 0.45rem rgba(0, 0, 0, 0.12);
    line-height: 1;
    pointer-events: none;
}

.mp-ki-credit-cost .mp-wallet-icon-cost {
    width: 2.1rem;
    height: 2.1rem;
}

.mp-ki-credit-cost-amount {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--mp-accent-strong);
}

.mp-credits-shop-hero-badge .mp-wallet-icon-inline,
.mp-credits-shop-hero-badge .mp-wallet-icon-shop-badge {
    width: 1.5rem;
    height: 1.5rem;
}

.mp-card-kicker-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mp-wallet-info-centered {
    text-align: center;
}

.mp-familie-erstellen-form {
    margin-top: 1.5rem;
    gap: 0;
}

.mp-familie-erstellen-name-field {
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.mp-familie-erstellen-name-field span:first-child {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mp-text);
}

.mp-familie-erstellen-name-field .mp-input {
    min-height: 3.85rem;
    font-size: 1.15rem;
    font-weight: 600;
    border: 2px solid rgba(234, 107, 23, 0.45);
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(234, 107, 23, 0.12);
}

.mp-familie-erstellen-name-field .mp-input:focus {
    border-color: var(--mp-accent);
    box-shadow:
        0 0 0 0.22rem rgba(255, 138, 61, 0.2),
        0 8px 22px rgba(234, 107, 23, 0.14);
}

.mp-familie-erstellen-actions {
    margin-top: 0.25rem;
}

.mp-wallet-info-badge-wrap {
    display: flex;
    justify-content: center;
}

.mp-wallet-badge-info .mp-wallet-icon-inline {
    width: 1.9rem;
    height: 1.9rem;
}

.mp-wallet-badge-info {
    padding: 0.5rem 0.9rem 0.5rem 0.65rem;
    font-size: 0.95rem;
}

.mp-wallet-badge-info.mp-wallet-badge-flow {
    gap: 0.4rem;
}

/* Familienverwaltung: Credits-Panel */
.mp-familien-credits-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mp-familien-credits-panel-balance {
    display: flex;
    justify-content: center;
    width: 100%;
}

.mp-familien-credits-panel-copy {
    display: block;
    max-width: 22rem;
    line-height: 1.45;
}

.mp-wallet-badge-xl {
    padding: 0.7rem 1.25rem 0.7rem 0.85rem;
    font-size: 1.35rem;
    gap: 0.65rem;
}

.mp-wallet-badge-xl .mp-wallet-icon-inline {
    width: 2.1rem;
    height: 2.1rem;
}

.mp-wallet-icon-familie-kaufen {
    width: 1.65rem;
    height: 1.65rem;
}

.mp-familien-credits-kaufen-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: min(100%, 16rem);
    min-height: 3.15rem;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd54f 0%, #ffb300 38%, #f59e0b 72%, #ea6b17 100%);
    color: #4a2800;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    box-shadow:
        0 0.45rem 1.1rem rgba(245, 158, 11, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mp-familien-credits-kaufen-button:hover,
.mp-familien-credits-kaufen-button:focus {
    color: #3d2000;
    transform: translateY(-2px);
    box-shadow:
        0 0.65rem 1.35rem rgba(245, 158, 11, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mp-ki-entwurf-preview {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(234, 107, 23, 0.18);
    background: #fff;
}

.mp-ki-entwurf-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.mp-ki-entwurf-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--mp-text-soft);
    font-size: 0.84rem;
    line-height: 1.45;
}

.mp-ki-entwurf-meta li + li {
    margin-top: 0.2rem;
}

.mp-ki-entwuerfe-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.15rem;
    padding: 0.75rem 1.35rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd54f 0%, #ffb300 38%, #f59e0b 72%, #ea6b17 100%);
    color: #4a2800;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    box-shadow:
        0 0.45rem 1.1rem rgba(245, 158, 11, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    animation: mp-ki-entwuerfe-button-glow 2.4s ease-in-out infinite;
}

.mp-ki-entwuerfe-button i {
    font-size: 1.15rem;
    line-height: 1;
}

.mp-ki-entwuerfe-button:hover,
.mp-ki-entwuerfe-button:focus {
    color: #3d2000;
    transform: translateY(-2px);
    box-shadow:
        0 0.65rem 1.35rem rgba(245, 158, 11, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

@keyframes mp-ki-entwuerfe-button-glow {
    0%,
    100% {
        box-shadow:
            0 0.45rem 1.1rem rgba(245, 158, 11, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    50% {
        box-shadow:
            0 0.65rem 1.4rem rgba(245, 158, 11, 0.52),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
}