/* Mein-Rosapineta App Shell 1.4.6 */

@media (max-width: 960px) {
    html {
        width: 100%;
        max-width: 100%;
        font-size: 16px !important;
        -webkit-text-size-adjust: none !important;
        text-size-adjust: none !important;
        overflow-x: hidden;
    }

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.mr-mobile-shell {
        --mr-ink: #0e2b58;
        --mr-blue: #0b68ef;
        --mr-line: #d8e5f2;
        --mr-soft: #eef8ff;
        --mr-sand: #fff5e7;
        --mr-shadow: 0 10px 28px rgba(26, 70, 119, .11);
        background:
            radial-gradient(circle at 86% 4%, rgba(43, 161, 239, .13), transparent 28%),
            linear-gradient(180deg, #edf8ff 0%, #f8fbff 28%, #ffffff 72%, #eefaff 100%);
    }

    body.mr-mobile-shell,
    body.mr-mobile-shell button,
    body.mr-mobile-shell input,
    body.mr-mobile-shell select,
    body.mr-mobile-shell textarea,
    body.mr-mobile-shell a,
    body.mr-mobile-shell label,
    body.mr-mobile-shell span,
    body.mr-mobile-shell p,
    body.mr-mobile-shell small,
    body.mr-mobile-shell strong,
    body.mr-mobile-shell h1,
    body.mr-mobile-shell h2,
    body.mr-mobile-shell h3,
    body.mr-mobile-shell h4,
    body.mr-mobile-shell h5,
    body.mr-mobile-shell h6 {
        font-family: Arial, Helvetica, sans-serif !important;
        font-style: normal;
    }

    body.mr-mobile-shell .mobile-bottom-nav,
    body.mr-mobile-shell .site-footer {
        display: none !important;
    }

    body.mr-mobile-shell .site-main {
        padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.mr-mobile-shell .mr-app-nav-item.is-locked {
        opacity: .34 !important;
        filter: grayscale(.7);
        pointer-events: none;
    }

    body.mr-mobile-shell .site-header {
        position: sticky;
        top: 0;
        z-index: 2500;
        overflow: hidden;
        background: linear-gradient(120deg, #082d69 0%, #0759bd 58%, #149bd7 100%) !important;
        box-shadow: 0 5px 18px rgba(8, 43, 91, .18);
    }

    body.mr-mobile-shell .site-header::after {
        content: "🌴";
        position: absolute;
        right: 88px;
        bottom: -30px;
        z-index: 0;
        font-size: 120px;
        line-height: 1;
        opacity: .09;
        transform: rotate(-9deg);
        pointer-events: none;
    }

    body.mr-mobile-shell .site-header > * {
        position: relative;
        z-index: 1;
    }

    /*
     * Avatar-Fix 1.1.2
     * Wichtig: img.avatar darf NIEMALS width:100% bekommen.
     * Nur ein Bild innerhalb eines kleinen Avatar-Containers darf dessen 100% nutzen.
     */
    body.mr-mobile-shell .avatar:not(img),
    body.mr-mobile-shell .user-avatar:not(img),
    body.mr-mobile-shell .profile-avatar:not(img),
    body.mr-mobile-shell .member-avatar:not(img) {
        --avatar-size: 42px;
        width: var(--avatar-size) !important;
        height: var(--avatar-size) !important;
        min-width: var(--avatar-size) !important;
        max-width: var(--avatar-size) !important;
        min-height: var(--avatar-size) !important;
        max-height: var(--avatar-size) !important;
        aspect-ratio: 1 / 1;
        flex: 0 0 var(--avatar-size) !important;
        display: inline-grid !important;
        place-items: center;
        overflow: hidden !important;
        border: 2px solid rgba(255,255,255,.98) !important;
        border-radius: 50% !important;
        background: linear-gradient(145deg, #0a2a61, #164b8f) !important;
        color: #fff !important;
        box-shadow: 0 4px 12px rgba(12, 43, 86, .19);
        font-size: .78rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .035em;
        text-align: center;
        text-transform: uppercase;
    }

    body.mr-mobile-shell .avatar:not(img) > img,
    body.mr-mobile-shell .user-avatar:not(img) > img,
    body.mr-mobile-shell .profile-avatar:not(img) > img,
    body.mr-mobile-shell .member-avatar:not(img) > img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        display: block !important;
        border: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    body.mr-mobile-shell img.avatar,
    body.mr-mobile-shell img.user-avatar,
    body.mr-mobile-shell img.profile-avatar,
    body.mr-mobile-shell img.member-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        aspect-ratio: 1 / 1 !important;
        flex: 0 0 42px !important;
        display: block !important;
        overflow: hidden !important;
        border: 2px solid rgba(255,255,255,.98) !important;
        border-radius: 50% !important;
        background: #113a72 !important;
        box-shadow: 0 4px 12px rgba(12, 43, 86, .19);
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Kontextgrößen: diese Regeln verhindern erneut riesige echte Fotos. */
    body.mr-mobile-shell .composer-top .avatar:not(img),
    body.mr-mobile-shell .composer-top img.avatar {
        --avatar-size: 42px;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex-basis: 42px !important;
    }

    body.mr-mobile-shell .post-head .avatar:not(img),
    body.mr-mobile-shell .post-head img.avatar {
        --avatar-size: 44px;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        flex-basis: 44px !important;
    }

    body.mr-mobile-shell .mr-home-post .avatar:not(img),
    body.mr-mobile-shell .mr-home-post img.avatar {
        --avatar-size: 38px;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        flex-basis: 38px !important;
    }

    body.mr-mobile-view-profile .profile-hero-main .avatar:not(img),
    body.mr-mobile-view-profile .profile-hero-main img.avatar {
        --avatar-size: 112px;
        width: 112px !important;
        height: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        min-height: 112px !important;
        max-height: 112px !important;
        flex-basis: 112px !important;
        border-width: 4px !important;
        box-shadow: 0 8px 24px rgba(10, 45, 88, .24), 0 0 0 1px rgba(28,105,194,.14);
    }

    /* Eigenständige Urlaubsoptik der App */
    body.mr-mobile-shell .community-intro,
    body.mr-mobile-shell .composer,
    body.mr-mobile-shell .community-post,
    body.mr-mobile-view-profile .profile-hero,
    body.mr-mobile-view-profile .profile-grid > .card,
    body.mr-mobile-view-profile .profile-level-card,
    body.mr-mobile-view-profile .profile-stats .stat-card {
        position: relative;
        isolation: isolate;
    }

    body.mr-mobile-shell .composer::after,
    body.mr-mobile-shell .community-post::after,
    body.mr-mobile-view-profile .profile-hero::after,
    body.mr-mobile-view-profile .profile-grid > .card::after {
        content: "";
        position: absolute;
        z-index: -1;
        right: -10px;
        bottom: -12px;
        width: 210px;
        height: 94px;
        pointer-events: none;
        opacity: .44;
        background:
            radial-gradient(ellipse at 78% 88%, rgba(229,188,126,.65) 0 31%, transparent 32%),
            radial-gradient(ellipse at 40% 87%, rgba(94,190,233,.20) 0 28%, transparent 29%),
            linear-gradient(166deg, transparent 0 54%, rgba(106,202,239,.24) 55% 61%, transparent 62%),
            linear-gradient(176deg, transparent 0 64%, rgba(44,153,211,.17) 65% 69%, transparent 70%);
        border-radius: 48% 0 0 0;
    }

    body.mr-mobile-shell .composer::before,
    body.mr-mobile-view-profile .profile-hero::before {
        content: "⛱️";
        position: absolute;
        z-index: -1;
        right: 35px;
        bottom: 20px;
        font-size: 46px;
        opacity: .14;
        transform: rotate(-6deg);
        pointer-events: none;
    }

    body.mr-mobile-shell .community-intro::after,
    body.mr-mobile-view-profile .profile-hero-main::after {
        content: "🌿";
        position: absolute;
        z-index: -1;
        right: -12px;
        top: -20px;
        font-size: 92px;
        opacity: .08;
        transform: rotate(24deg);
        pointer-events: none;
    }

    body.mr-mobile-shell .community-post:nth-of-type(even)::after {
        left: -12px;
        right: auto;
        transform: scaleX(-1);
    }

    /* Profil stärker an die gewünschte App-Karte annähern. */
    body.mr-mobile-view-profile .site-main {
        background:
            radial-gradient(circle at 84% 14%, rgba(65,184,235,.14), transparent 25%),
            linear-gradient(180deg, #eef8ff 0%, #ffffff 72%);
    }

    body.mr-mobile-view-profile .profile-hero {
        width: calc(100% - 20px) !important;
        max-width: 880px !important;
        margin: 12px auto 16px !important;
        padding: 24px 18px 18px !important;
        overflow: hidden !important;
        border: 1px solid #d5e3ef !important;
        border-radius: 25px !important;
        background:
            radial-gradient(circle at 74% 18%, rgba(255,214,91,.28) 0 42px, transparent 43px),
            linear-gradient(135deg, rgba(255,255,255,.97), rgba(235,248,255,.94) 64%, rgba(255,245,225,.94)) !important;
        box-shadow: var(--mr-shadow) !important;
    }

    body.mr-mobile-view-profile .profile-hero-main {
        position: relative;
        display: grid !important;
        grid-template-columns: 112px minmax(0,1fr) !important;
        gap: 18px !important;
        align-items: center !important;
    }

    body.mr-mobile-view-profile .profile-hero-main .eyebrow {
        margin: 0 0 4px !important;
        color: #0d6ff0 !important;
        font-size: .72rem !important;
        font-weight: 900 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
    }

    body.mr-mobile-view-profile .profile-hero-main h1 {
        margin: 0 0 7px !important;
        color: #09275a !important;
        font-size: 2rem !important;
        line-height: 1 !important;
    }

    body.mr-mobile-view-profile .profile-hero-main p:last-child {
        margin: 0 !important;
        color: #48658a !important;
        font-size: .86rem !important;
        line-height: 1.45 !important;
    }

    body.mr-mobile-view-profile .mr-profile-quick-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px;
        margin-top: 18px;
    }

    body.mr-mobile-view-profile .mr-profile-quick-actions a {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid #d4e0ec;
        border-radius: 14px;
        background: rgba(255,255,255,.83);
        color: #0d69e7;
        font-size: .82rem;
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 4px 13px rgba(28,67,111,.06);
    }

    body.mr-mobile-view-profile .profile-hero > .hero-actions {
        display: none !important;
    }

    body.mr-mobile-view-profile .profile-stats {
        width: calc(100% - 20px) !important;
        max-width: 880px !important;
        margin: 0 auto 14px !important;
        grid-template-columns: repeat(4,minmax(0,1fr)) !important;
        gap: 7px !important;
    }

    body.mr-mobile-view-profile .profile-stats .stat-card {
        min-width: 0 !important;
        padding: 10px 5px !important;
        border: 1px solid #dce7f1 !important;
        border-radius: 15px !important;
        background: rgba(255,255,255,.92) !important;
        box-shadow: 0 4px 13px rgba(24,65,111,.06) !important;
    }

    body.mr-mobile-view-profile .profile-stats .stat-card span {
        font-size: .9rem !important;
    }

    body.mr-mobile-view-profile .profile-stats .stat-card b {
        font-size: .9rem !important;
    }

    body.mr-mobile-view-profile .profile-stats .stat-card small {
        font-size: .58rem !important;
    }

    body.mr-mobile-view-profile .profile-level-card,
    body.mr-mobile-view-profile .profile-grid {
        width: calc(100% - 20px) !important;
        max-width: 880px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.mr-mobile-view-profile .profile-level-card {
        border-radius: 20px !important;
        box-shadow: var(--mr-shadow) !important;
    }

    body.mr-mobile-view-profile .profile-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.mr-mobile-view-profile .profile-grid > .card {
        overflow: hidden !important;
        border: 1px solid #d9e5ef !important;
        border-radius: 20px !important;
        background: rgba(255,255,255,.96) !important;
        box-shadow: var(--mr-shadow) !important;
    }

    /* Gemeinsame 7-Punkte-Navigation */
    .mr-app-bottom-nav {
        position: fixed;
        z-index: 2147482000;
        left: 10px;
        right: 10px;
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        align-items: end;
        min-height: 78px;
        padding: 8px 4px 7px;
        border: 1px solid #e0e7ef;
        border-radius: 22px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -4px 22px rgba(20, 55, 99, .09), 0 8px 28px rgba(20,55,99,.12);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .mr-app-nav-item {
        position: relative;
        min-width: 0;
        height: 61px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        padding: 4px 1px 2px;
        border-radius: 14px;
        color: #556d8f;
        border: 0;
        background: transparent;
        font: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mr-app-nav-item svg {
        width: 23px;
        height: 23px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mr-app-nav-item > span {
        display: block;
        width: 100%;
        min-height: 18px;
        overflow: hidden;
        color: inherit;
        font-size: 10.5px !important;
        font-weight: 900 !important;
        line-height: 1.08;
        text-align: center;
        white-space: normal;
    }

    .mr-app-nav-item.is-active {
        color: #0769ed;
        background: linear-gradient(145deg, #eef7ff, #e4f2ff);
        box-shadow: inset 0 0 0 1px #cfe4f7;
    }

    .mr-app-nav-item.is-camera .mr-app-nav-icon {
        width: 48px;
        height: 48px;
        margin-top: -19px;
        display: grid;
        place-items: center;
        border: 3px solid #fff;
        border-radius: 50%;
        background: linear-gradient(135deg, #0b6ff0, #158edb);
        color: #fff;
        box-shadow: 0 7px 20px rgba(38, 117, 208, .31);
    }

    .mr-app-nav-item.is-camera .mr-app-nav-icon svg {
        width: 25px;
        height: 25px;
    }

    .mr-app-nav-item.is-camera > span:last-child {
        margin-top: 1px;
        color: #49637f;
    }

    .mr-app-nav-icon {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
    }

    .mr-app-nav-item:active {
        transform: translateY(1px);
        background-color: #f0f6fc;
    }

    body.mr-mobile-shell .site-main > :last-child {
        margin-bottom: 12px;
    }
}

@media (max-width: 430px) {
    body.mr-mobile-view-profile .profile-hero-main {
        grid-template-columns: 92px minmax(0,1fr) !important;
        gap: 13px !important;
    }

    body.mr-mobile-view-profile .profile-hero-main .avatar:not(img),
    body.mr-mobile-view-profile .profile-hero-main img.avatar {
        --avatar-size: 92px;
        width: 92px !important;
        height: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        min-height: 92px !important;
        max-height: 92px !important;
        flex-basis: 92px !important;
    }

    body.mr-mobile-view-profile .profile-hero-main h1 {
        font-size: 1.65rem !important;
    }
}

@media (min-width: 961px) {
    .mr-app-bottom-nav {
        display: none !important;
    }
}


/* 1.3.1 – kompakte App-Formulare auf PHP-Fallbackseiten */
@media (max-width:960px){
body.mr-mobile-shell input[type="checkbox"],body.mr-mobile-shell input[type="radio"]{appearance:auto!important;-webkit-appearance:checkbox!important;width:21px!important;height:21px!important;min-width:21px!important;max-width:21px!important;min-height:21px!important;max-height:21px!important;flex:0 0 21px!important;margin:1px 0 0!important;padding:0!important;border:0!important;box-shadow:none!important;accent-color:#0872ef!important}
body.mr-mobile-shell .portal-check-list{display:grid!important;gap:8px!important}
body.mr-mobile-shell .portal-check-list>label,body.mr-mobile-shell label.profile-check{display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;gap:11px!important;min-height:50px!important;padding:12px 14px!important;border:1px solid #e0e9f1!important;border-radius:14px!important;background:#f8fbff!important;color:#19375d!important;font-size:.82rem!important;font-weight:700!important;line-height:1.35!important}
body.mr-mobile-shell .portal-stay-row{padding:14px!important;gap:10px!important;border-radius:16px!important}
body.mr-mobile-shell .portal-stay-row>label{display:flex!important;align-items:center!important;gap:9px!important;min-height:42px!important;font-size:.76rem!important;font-weight:700!important}
body.mr-mobile-shell .portal-account-grid{gap:12px!important}
body.mr-mobile-shell .portal-account-grid>.card{padding:18px 16px!important;border-radius:19px!important}
body.mr-mobile-shell .portal-account-grid .form-row select,body.mr-mobile-shell .portal-account-grid .form-row input:not([type="checkbox"]),body.mr-mobile-shell .profile-grid .form-row input:not([type="checkbox"]),body.mr-mobile-shell .profile-grid .form-row select,body.mr-mobile-shell .profile-grid .form-row textarea{min-height:48px!important;border-radius:13px!important;padding:10px 12px!important;font-size:.9rem!important}
body.mr-mobile-shell .portal-account-hero{padding:20px 16px!important;border-radius:20px!important}
body.mr-mobile-shell .portal-account-hero h1{font-size:2rem!important;line-height:1.05!important}
body.mr-mobile-shell .portal-account-hero .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
body.mr-mobile-shell .portal-account-hero .hero-actions .button{min-height:46px!important;padding:10px 12px!important;border-radius:13px!important;font-size:.82rem!important}
body.mr-mobile-shell .profile-map-benefits-web{margin:8px 0 14px;padding:12px;border:1px solid #d9e8f2;border-radius:15px;background:linear-gradient(135deg,#eef8ff,#fff9ec)}
body.mr-mobile-shell .profile-map-benefits-web strong{display:block;color:#173861;font-size:.82rem!important;margin-bottom:5px}.profile-map-benefits-web ul{margin:0;padding-left:18px;color:#627891;font-size:.76rem;line-height:1.55}
}

/* 1.8.0ac – neue Profilübersicht auch innerhalb der PWA/App kompakt halten */
@media(max-width:960px){
body.mr-mobile-view-profile .mr-profile-overview.profile-hero{display:block!important;padding:0!important;background:rgba(255,255,255,.96)!important}
body.mr-mobile-view-profile .mr-profile-cover{display:grid!important;grid-template-columns:1fr!important;gap:15px!important;padding:19px 15px!important}
body.mr-mobile-view-profile .mr-profile-cover .profile-hero-main{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;gap:13px!important}
body.mr-mobile-view-profile .mr-profile-avatar-wrap,body.mr-mobile-view-profile .mr-profile-avatar-wrap .avatar:not(img),body.mr-mobile-view-profile .mr-profile-avatar-wrap img.avatar{width:92px!important;height:92px!important;min-width:92px!important;max-width:92px!important}
body.mr-mobile-view-profile .mr-profile-identity h1{font-size:1.72rem!important}
body.mr-mobile-view-profile .mr-profile-email{font-size:.72rem!important}
body.mr-mobile-view-profile .mr-profile-tags{display:flex!important;gap:5px!important;margin-top:8px!important}
body.mr-mobile-view-profile .mr-profile-tags span{min-height:26px!important;padding:3px 7px!important;font-size:.6rem!important}
body.mr-mobile-view-profile .mr-profile-primary-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
body.mr-mobile-view-profile .mr-profile-primary-actions .button{min-height:44px!important;padding:9px 11px!important;font-size:.76rem!important}
body.mr-mobile-view-profile .mr-profile-quick-actions{display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin:0!important;border-top:1px solid #dce7ef!important}
body.mr-mobile-view-profile .mr-profile-quick-actions a{display:grid!important;grid-template-columns:43px minmax(0,1fr) auto!important;justify-content:stretch!important;min-height:66px!important;padding:10px 13px!important;border:0!important;border-bottom:1px solid #e2ebf2!important;border-radius:0!important;background:#fff!important;text-align:left!important;box-shadow:none!important}
body.mr-mobile-view-profile .mr-profile-quick-actions a:last-child{border-bottom:0!important}
body.mr-mobile-view-profile .mr-profile-quick-actions a>span:first-child{width:43px!important;height:43px!important;border-radius:13px!important}
body.mr-mobile-view-profile .mr-profile-quick-actions a strong{font-size:.76rem!important}body.mr-mobile-view-profile .mr-profile-quick-actions a small{font-size:.62rem!important}
body.mr-mobile-view-profile .mr-profile-section-title{width:calc(100% - 20px)!important;margin:17px auto 8px!important}
body.mr-mobile-view-profile .mr-profile-section-title h2{font-size:1.15rem!important}body.mr-mobile-view-profile .mr-profile-section-title p{font-size:.7rem!important}
}

/* 1.4.6 – kompakte Strandzentrale innerhalb der App */
@media (max-width:960px){
body.mr-mobile-view-beach .site-header{min-height:72px!important;border-bottom:1px solid rgba(255,255,255,.24)!important;background:radial-gradient(circle at 82% 20%,rgba(74,201,239,.28),transparent 24%),linear-gradient(118deg,#082d69 0%,#075fc5 56%,#12a4dc 100%)!important;box-shadow:0 7px 22px rgba(7,50,105,.18)!important}
body.mr-mobile-view-beach .site-header::after{right:66px!important;bottom:-42px!important;font-size:112px!important;opacity:.08!important}
body.mr-mobile-view-beach .site-header .container,body.mr-mobile-view-beach .site-header .header-inner{min-height:72px!important;padding-top:8px!important;padding-bottom:8px!important}
body.mr-mobile-view-beach .site-header .brand{max-width:70%!important;gap:9px!important;color:#fff!important;text-decoration:none!important}
body.mr-mobile-view-beach .site-header .brand img{width:46px!important;height:46px!important;min-width:46px!important;border:1px solid rgba(255,255,255,.5)!important;border-radius:14px!important;box-shadow:0 6px 16px rgba(3,37,81,.24)!important}
body.mr-mobile-view-beach .site-header .brand strong,body.mr-mobile-view-beach .site-header .brand span{overflow:hidden!important;color:#fff!important;font-size:1.05rem!important;font-weight:900!important;line-height:1.08!important;white-space:nowrap!important;text-overflow:ellipsis!important}
body.mr-mobile-view-beach .site-header button,body.mr-mobile-view-beach .site-header .icon-button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border:1px solid rgba(255,255,255,.26)!important;border-radius:15px!important;background:rgba(255,255,255,.1)!important;color:#fff!important;box-shadow:none!important}
body.mr-mobile-view-beach .site-main{padding:0 10px calc(22px + env(safe-area-inset-bottom,0px))!important;background:linear-gradient(180deg,#eaf8ff 0%,#f9fcff 48%,#fff8e8 100%)!important}
body.mr-mobile-view-beach .weather-page{width:100%!important;max-width:720px!important;margin:0 auto!important;padding:10px 0 18px!important;display:grid!important;gap:10px!important}
body.mr-mobile-view-beach .weather-hero{margin:0!important;padding:18px 16px!important;border:1px solid #d0e2ee!important;border-radius:23px!important;background:radial-gradient(circle at 82% 18%,rgba(255,215,87,.42) 0 36px,transparent 37px),linear-gradient(145deg,#f9fdff,#eaf8ff 62%,#fff3da)!important;box-shadow:var(--mr-shadow)!important}
body.mr-mobile-view-beach .weather-hero h1{margin:3px 0 6px!important;font-size:1.75rem!important;line-height:1.06!important;color:#102f5c!important}
body.mr-mobile-view-beach .weather-hero>div>p:not(.eyebrow){margin:0!important;max-width:520px!important;color:#647991!important;font-size:.78rem!important;line-height:1.42!important}
body.mr-mobile-view-beach .weather-center-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:12px!important}
body.mr-mobile-view-beach .weather-center-actions .button{min-height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:9px!important;border-radius:13px!important;font-size:.72rem!important;text-align:center!important}
body.mr-mobile-view-beach .weather-source-state{margin-top:10px!important;padding:7px 9px!important;border-radius:11px!important;background:rgba(255,255,255,.72)!important;font-size:.65rem!important}
body.mr-mobile-view-beach .beach-status-grid{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
body.mr-mobile-view-beach .beach-auto-card,body.mr-mobile-view-beach .beach-community-card{padding:14px!important;border:1px solid #d7e5ee!important;border-radius:20px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 7px 18px rgba(25,68,108,.07)!important}
body.mr-mobile-view-beach .beach-auto-main,body.mr-mobile-view-beach .beach-community-main{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;gap:9px!important;align-items:center!important}
body.mr-mobile-view-beach .beach-auto-main h2,body.mr-mobile-view-beach .beach-community-main h2{margin:0!important;font-size:1rem!important;line-height:1.2!important}
body.mr-mobile-view-beach .beach-auto-main p,body.mr-mobile-view-beach .beach-community-main p{margin:3px 0 0!important;color:#6a7f96!important;font-size:.68rem!important;line-height:1.35!important}
body.mr-mobile-view-beach .beach-metric-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;margin-top:11px!important}
body.mr-mobile-view-beach .beach-metric-grid>div{min-width:0!important;padding:8px 2px!important;border:1px solid #e0e9f0!important;border-radius:12px!important;text-align:center!important}
body.mr-mobile-view-beach .beach-metric-grid span{font-size:1rem!important}body.mr-mobile-view-beach .beach-metric-grid strong{display:block!important;margin-top:2px!important;font-size:.72rem!important}body.mr-mobile-view-beach .beach-metric-grid small{display:block!important;margin-top:2px!important;overflow:hidden!important;font-size:.52rem!important;white-space:nowrap!important;text-overflow:ellipsis!important}
body.mr-mobile-view-beach .beach-source-note{display:block!important;margin-top:8px!important;color:#74869a!important;font-size:.58rem!important;line-height:1.35!important}
body.mr-mobile-view-beach .beach-community-signals{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:9px!important}
body.mr-mobile-view-beach .beach-community-signals>div{padding:8px!important;border-radius:12px!important;background:#f5f9fc!important}body.mr-mobile-view-beach .beach-community-signals strong,body.mr-mobile-view-beach .beach-community-signals span{display:block!important;font-size:.62rem!important;line-height:1.3!important}
body.mr-mobile-view-beach .beach-auto-warning{padding:10px 12px!important;border-radius:16px!important}
body.mr-mobile-view-beach .weather-section-head{margin:2px 1px 0!important;align-items:center!important}body.mr-mobile-view-beach .weather-section-head h2{font-size:1.08rem!important}body.mr-mobile-view-beach .weather-section-head .button{display:none!important}
body.mr-mobile-view-beach .beach-report-list{display:grid!important;gap:7px!important}
body.mr-mobile-view-beach .beach-report-card{padding:11px!important;border-radius:16px!important}body.mr-mobile-view-beach .beach-report-card header{display:flex!important;gap:6px!important;align-items:flex-start!important}body.mr-mobile-view-beach .beach-report-card header strong{font-size:.75rem!important}body.mr-mobile-view-beach .beach-report-card header time{font-size:.57rem!important;white-space:nowrap!important}
body.mr-mobile-view-beach .beach-report-meta{display:flex!important;gap:5px!important;overflow-x:auto!important;margin-top:7px!important;padding-bottom:2px!important;scrollbar-width:none!important}body.mr-mobile-view-beach .beach-report-meta span{flex:0 0 auto!important;padding:5px 7px!important;border-radius:999px!important;background:#f1f7fb!important;font-size:.58rem!important}
body.mr-mobile-view-beach .beach-report-card>p,body.mr-mobile-view-beach .beach-report-card>img,body.mr-mobile-view-beach .beach-report-card>footer{display:none!important}
body.mr-mobile-view-beach .weather-notice{margin:0!important;padding:11px!important;border-radius:15px!important}body.mr-mobile-view-beach .weather-notice p{margin:3px 0 0!important;font-size:.62rem!important;line-height:1.35!important}

body.mr-mobile-view-beach .mr-beach-report-page{display:grid!important;gap:10px!important;padding:10px 0 18px!important}
body.mr-mobile-view-beach .mr-beach-report-hero{position:relative!important;overflow:hidden!important;padding:17px 15px!important;border:1px solid #d2e2ee!important;border-radius:21px!important;background:radial-gradient(circle at 80% 15%,rgba(255,216,83,.45) 0 34px,transparent 35px),linear-gradient(145deg,#f7fdff,#eaf8ff 62%,#fff4dc)!important;box-shadow:var(--mr-shadow)!important}
body.mr-mobile-view-beach .mr-beach-report-hero:after{content:"🏖️";position:absolute;right:17px;bottom:7px;font-size:42px;opacity:.15}
body.mr-mobile-view-beach .mr-beach-report-hero h1{margin:3px 0 5px!important;font-size:1.55rem!important}body.mr-mobile-view-beach .mr-beach-report-hero p{margin:0!important;max-width:80%!important;color:#667b92!important;font-size:.72rem!important;line-height:1.4!important}
body.mr-mobile-view-beach .mr-beach-report-form{padding:13px!important;border:1px solid #d6e4ef!important;border-radius:20px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 8px 20px rgba(25,68,108,.08)!important}
body.mr-mobile-view-beach .mr-beach-report-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}body.mr-mobile-view-beach .mr-beach-report-grid .is-wide{grid-column:1/-1!important}
body.mr-mobile-view-beach .mr-beach-field{display:block!important;min-width:0!important;margin:0!important}body.mr-mobile-view-beach .mr-beach-field>span{display:block!important;margin:0 2px 4px!important;color:#3d5876!important;font-size:.62rem!important;font-weight:800!important}
body.mr-mobile-view-beach .mr-beach-field input,body.mr-mobile-view-beach .mr-beach-field select,body.mr-mobile-view-beach .mr-beach-field textarea{width:100%!important;min-height:43px!important;margin:0!important;border:1px solid #d5e2ec!important;border-radius:12px!important;background:#f9fcff!important;padding:8px 10px!important;color:#183553!important;font-size:.76rem!important;outline:none!important}body.mr-mobile-view-beach .mr-beach-field textarea{min-height:66px!important;resize:vertical!important}
body.mr-mobile-view-beach .mr-beach-more{grid-column:1/-1!important;margin-top:1px!important;border:1px solid #d6e4ee!important;border-radius:14px!important;background:#f7fbfe!important}body.mr-mobile-view-beach .mr-beach-more summary{padding:11px!important;color:#285779!important;font-size:.7rem!important;font-weight:850!important;cursor:pointer!important}body.mr-mobile-view-beach .mr-beach-more[open] summary{border-bottom:1px solid #e1eaf1!important}body.mr-mobile-view-beach .mr-beach-more>.mr-beach-report-grid{padding:10px!important}
body.mr-mobile-view-beach .mr-beach-primary{width:100%!important;min-height:47px!important;margin-top:10px!important;border:0!important;border-radius:14px!important;background:linear-gradient(115deg,#096ceb,#0da6df)!important;color:#fff!important;font-size:.82rem!important;font-weight:900!important;box-shadow:0 7px 18px rgba(9,108,235,.22)!important}
body.mr-mobile-view-beach .mr-beach-report-tip{margin:9px 2px 0!important;color:#75879a!important;font-size:.6rem!important;line-height:1.4!important;text-align:center!important}
}

@media(max-width:370px){body.mr-mobile-view-beach .weather-center-actions{grid-template-columns:1fr!important}body.mr-mobile-view-beach .beach-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}


/* UI 256 – gemeinsame Sprachauswahl auf allen eingebetteten App-Seiten. */
.mr-app-page-menu .mr-page-language{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 0 10px;padding:10px 11px;border:1px solid #d6e5f2;border-radius:14px;background:linear-gradient(145deg,#f8fcff,#fffdf4)}
.mr-app-page-menu .mr-page-language>span{display:flex;align-items:center;gap:7px;min-width:0;color:#17365d;font-size:11px}
.mr-app-page-menu .mr-page-language>span b{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:#e8f3ff;font-size:14px}
.mr-app-page-menu .mr-page-language>div{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mr-app-page-menu .mr-page-language button{display:flex;align-items:center;justify-content:center;gap:3px;min-width:42px;height:31px;padding:0 6px;border:1px solid #cedeed;border-radius:9px;background:#fff;color:#365476;font:800 10px/1 Arial,sans-serif;cursor:pointer}
.mr-app-page-menu .mr-page-language button.is-active{border-color:#2f7ee8;background:#e8f3ff;color:#1258bb;box-shadow:inset 0 0 0 1px rgba(47,126,232,.15)}
@media(max-width:390px){.mr-app-page-menu .mr-page-language{grid-template-columns:1fr}.mr-app-page-menu .mr-page-language>div{width:100%}.mr-app-page-menu .mr-page-language button{min-width:0}}

/* UI 262 – Strandberichte bleiben auf kleinen Bildschirmen kompakt und unterschiedlich hoch. */
body.mr-mobile-view-beach .beach-report-list{align-items:start!important}
body.mr-mobile-view-beach .beach-report-card{align-self:start!important;padding:0!important;border-radius:18px!important}
body.mr-mobile-view-beach .beach-report-card>header{padding:12px 12px 4px!important}
body.mr-mobile-view-beach .beach-report-card>.beach-report-meta{margin:8px 10px 2px!important}
body.mr-mobile-view-beach .beach-report-card .beach-report-more{margin:9px!important}
body.mr-mobile-view-beach .beach-report-author>img,body.mr-mobile-view-beach .beach-report-author>span{display:grid!important;flex:0 0 36px!important;width:36px!important;height:36px!important}
body.mr-mobile-view-beach .beach-report-author>img{display:block!important}
body.mr-mobile-view-beach .beach-report-author small{font-size:.55rem!important}
body.mr-mobile-view-beach .beach-report-author strong{font-size:.76rem!important}
body.mr-mobile-view-beach .beach-report-card header time{display:grid!important;margin:0!important}
@media(max-width:370px){body.mr-mobile-view-beach .beach-report-author>img,body.mr-mobile-view-beach .beach-report-author>span{display:none!important}}