/*
 * 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;
}

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: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 16px rgba(27, 34, 48, 0.12);
}

.mp-topbar-logo {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-decoration: none;
}

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

.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;
}

.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-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;
    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: linear-gradient(135deg, #ffb067 0%, var(--mp-accent) 45%, var(--mp-accent-strong) 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: none;
}

.mp-gericht-filter-button.is-active i {
    color: #ffffff;
}

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

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

.mp-primary-button,
.mp-secondary-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-secondary-button,
.mp-footer-button {
    background: var(--mp-surface);
    color: var(--mp-text);
    border: 1px solid var(--mp-border);
}

.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;
    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-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-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
}

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

.mp-heute-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--mp-accent-soft);
    color: var(--mp-accent-strong);
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

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

.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 {
    border-top: 1px solid var(--mp-border);
}

.mp-meal-trigger {
    width: 100%;
    border: 0;
    padding: 0.95rem 1rem;
    background: transparent;
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    text-align: left;
}

.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 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-copy h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.mp-meal-chevron {
    color: var(--mp-text-soft);
    transition: transform 0.2s ease;
}

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

.mp-meal-details {
    padding: 0 1rem 1rem 7.15rem;
    border-top: 1px solid rgba(27, 34, 48, 0.08);
    border-bottom: 1px solid rgba(27, 34, 48, 0.14);
    background: rgba(255, 255, 255, 0.3);
}

.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-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 {
    overflow: hidden;
    border-radius: 1.2rem;
    background: #f3f5f8;
    border: 1px solid var(--mp-border);
}

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

.mp-gericht-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

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

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

.mp-gericht-collapse-card {
    border: 1px solid var(--mp-border);
    border-radius: 1rem;
    background: #fafbfd;
    overflow: hidden;
}

.mp-gericht-collapse-trigger {
    width: 100%;
    border: 0;
    padding: 0.9rem 0.95rem;
    background: transparent;
    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);
}

.mp-gericht-collapse-trigger i {
    color: var(--mp-text-soft);
    transition: transform 0.2s ease;
}

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

.mp-gericht-collapse-body {
    padding: 0.85rem 0.95rem 0.95rem;
    border-top: 1px solid rgba(27, 34, 48, 0.08);
}

.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-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 {
    position: relative;
    overflow: hidden;
    border-radius: 1.3rem;
    border: 1px dashed rgba(19, 94, 203, 0.36);
    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 img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.mp-gericht-preview-placeholder {
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding: 1rem 0.75rem;
    display: grid;
    place-items: center;
    gap: 0.35rem;
    color: var(--mp-text);
    text-align: center;
}

.mp-gericht-preview-placeholder i {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #135ecb;
    font-size: 1.65rem;
    box-shadow: 0 0.55rem 1.25rem rgba(19, 94, 203, 0.14);
}

.mp-gericht-preview-placeholder span {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    font-weight: 800;
}

.mp-croppie-wrap-gericht {
    display: flex;
    justify-content: center;
    min-height: 14.1rem;
}

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

.mp-crop-rotate-actions {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    margin: -0.95rem 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-ingredient-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.mp-ingredient-fields [data-mp-zutat-name] {
    grid-column: 1 / -1;
}

.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-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-card-pro {
    grid-column: 1 / -1;
}

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

.mp-pro-accordion-item {
    overflow: hidden;
    border: 1px solid var(--mp-border);
    border-radius: 1.1rem;
}

.mp-pro-accordion-item .accordion-button {
    box-shadow: none;
    background: #fafbfd;
}

.mp-pro-accordion-item .accordion-button:not(.collapsed) {
    color: var(--mp-text);
    background: #fff7f1;
}

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

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

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

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

.mp-ingredient-add-card {
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem;
    border-radius: 1.1rem;
    background: #fafbfd;
    border: 1px solid var(--mp-border);
}

.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;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.65rem;
    padding: 0.8rem 0.95rem;
    border-radius: 1rem;
    background: #fafbfd;
    border: 1px solid var(--mp-border);
}

.mp-ingredient-input-row [data-mp-zutat-input] {
    grid-column: 1 / -1;
}

.mp-ingredient-input-row [data-mp-zutat-hinzufuegen] {
    grid-column: 1 / -1;
}

.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-ingredient-remove {
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 50%;
    background: rgba(234, 107, 23, 0.1);
    color: var(--mp-accent-strong);
}

.mp-textarea {
    min-height: 9rem;
    padding-block: 0.9rem;
    resize: vertical;
}

.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: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border-top: 1px solid var(--mp-border);
}

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

.mp-empty-day-icon i {
    font-size: 2rem;
}

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

.mp-day-footer {
    display: grid;
    gap: 0.6rem;
    padding: 0.45rem 0.55rem 0.55rem;
    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-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-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: flex;
    justify-content: center;
}

.mp-abstimmung-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.mp-abstimmung-status-badge.is-open {
    background: #fff1e6;
    color: var(--mp-accent-strong);
}

.mp-abstimmung-status-badge.is-done {
    background: #eef8f1;
    color: #2f7a47;
}

.mp-abstimmung-status-badge.is-closed {
    background: #f4f5f7;
    color: var(--mp-text-soft);
}

.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 1rem;
}

.mp-body-gerichte .mp-content {
    padding: 0 0.55rem 1rem;
}

.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 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: 0.76rem;
    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-welcome-card p {
    margin-top: 0.65rem;
    color: rgba(27, 34, 48, 0.78);
    line-height: 1.5;
}

.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;
}

.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-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-abstimmung-delete-button {
    color: #8a2d15;
}

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

.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-card-toggle {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--mp-border);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--mp-text-soft);
}

.mp-card-toggle i {
    transition: transform 0.2s ease;
}

.mp-card-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-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-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-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-button {
    width: 100%;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    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-button:hover,
.mp-family-admin-button:focus {
    border-color: rgba(234, 107, 23, 0.45);
    box-shadow: 0 0 0 0.18rem rgba(255, 138, 61, 0.12);
}

.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-empty-card {
    background: rgba(255, 255, 255, 0.82);
}

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

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

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

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

.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-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 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-plan-modal-form {
    display: grid;
    gap: 0.95rem;
}

.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-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);
}

.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;
}

.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;
    gap: 0.45rem;
    min-height: 1.2rem;
}

.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);
}

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

.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;
}

.mp-plan-modal-neu-button {
    margin-top: 0.7rem;
    min-height: 2.5rem;
    width: auto;
    margin-left: auto;
    justify-self: end;
    padding: 0.35rem 0.85rem;
    border-radius: 0.9rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.mp-plan-modal-neu-button.is-muted {
    color: var(--mp-text-soft);
    border-color: rgba(102, 112, 133, 0.22);
    background: rgba(255, 255, 255, 0.42);
}

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

.mp-abstimmung-option-picker,
.mp-abstimmung-option-list {
    display: grid;
    gap: 0.8rem;
}

.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-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-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;
}

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

.mp-empty-state-compact {
    padding: 0.85rem 0.95rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.6);
}

.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-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-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-croppie-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
}

#mp-croppie,
#mpGerichtCroppie {
    width: 100%;
}

#mp-croppie .cr-boundary,
#mpGerichtCroppie .cr-boundary {
    border-radius: 1.3rem;
    background: linear-gradient(180deg, #fff7f1 0%, #fff1e6 100%);
}

#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);
}

.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 {
    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: max(0.75rem, env(safe-area-inset-bottom));
    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);
}

.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) minmax(0, 1fr);
        align-items: center;
    }

    .mp-ingredient-input-row {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr) auto;
    }

    .mp-ingredient-input-row [data-mp-zutat-input] {
        grid-column: auto;
    }

    .mp-ingredient-input-row [data-mp-zutat-hinzufuegen] {
        grid-column: auto;
    }

    .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-date {
        font-size: 0.72rem;
    }

    .mp-day-header h2 {
        font-size: 1.15rem;
    }

    .mp-heute-badge {
        margin-left: 0.2rem;
        padding-inline: 0.45rem;
    }

    .mp-meal-trigger,
    .mp-empty-day {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .mp-meal-trigger {
        grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    }

    .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: zusaetzliche Safe-Area via JS-Bridge */
.mp-android-app {
    --mp-app-safe-top: 0px;
    --mp-app-safe-bottom: 0px;
    --mp-app-safe-left: 0px;
    --mp-app-safe-right: 0px;
}

.mp-android-app .mp-topbar {
    padding-top: max(max(0.75rem, env(safe-area-inset-top)), var(--mp-app-safe-top));
}

.mp-android-app .mp-shell {
    padding-bottom: max(max(1rem, env(safe-area-inset-bottom)), var(--mp-app-safe-bottom));
}

.mp-android-app .mp-scroll-top-button {
    bottom: max(max(0.75rem, env(safe-area-inset-bottom)), var(--mp-app-safe-bottom));
}

.mp-android-app .mp-page-bottom-spacer {
    height: max(1.25rem, var(--mp-app-safe-bottom));
    min-height: max(1.25rem, var(--mp-app-safe-bottom));
}

.mp-android-app .mp-form-footer,
.mp-android-app .mp-sticky-footer {
    padding-bottom: max(0.75rem, var(--mp-app-safe-bottom));
}

.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;
    }
}