/*
 * style_mobile.css
 * Schicksalssterne - mobile Zusatzoptimierungen
 * NUR mobile Ansicht bis 930px.
 *
 * Wichtig:
 * Die Desktop-Beraterliste nutzt .ss9-advisor-area.
 * Die neue mobile Beraterliste nutzt .ssm2-area.
 * Auf dem Handy wird .ss9 komplett ausgeblendet, damit keine halben/alten Karten mehr sichtbar sind.
 */

.ss-mobilstatus {
    display: none !important;
}

.ssm2-area {
    display: none;
}

@media (max-width: 930px) {

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .main_wrapper,
    .main {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /*
       ENTSCHEIDENDER FIX:
       Alte/Desktop-Beraterkarten auf dem Handy ausblenden.
       Genau diese .ss9-Karten erzeugen das große halbe Foto.
    */
    .ss9-advisor-area,
    .ss9-advisor-grid,
    .ss9-advisor-card {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* =====================================================
       MOBILSTATUS
       ===================================================== */

    .ss-mobilstatus {
        display: block !important;
        width: calc(100% - 16px);
        margin: 10px auto 16px !important;
        padding: 10px 8px 12px !important;
        box-sizing: border-box !important;
        border-radius: 24px !important;
        border: 1px solid rgba(125, 190, 235, .42) !important;
        background:
            radial-gradient(circle at 12% 20%, rgba(255,255,255,.28), transparent 32%),
            radial-gradient(circle at 88% 80%, rgba(188,232,255,.14), transparent 38%),
            linear-gradient(135deg, rgba(255,255,255,.11), rgba(214,240,255,.05)) !important;
        box-shadow:
            0 0 14px rgba(255,255,255,.38),
            0 0 20px rgba(130,205,255,.16),
            inset 0 0 16px rgba(255,255,255,.10) !important;
        -webkit-backdrop-filter: blur(1.5px) saturate(1.06);
        backdrop-filter: blur(1.5px) saturate(1.06);
        overflow: hidden !important;
        position: relative !important;
        z-index: 8 !important;
    }

    .ss-mobilstatus::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient(118deg, transparent 0%, rgba(255,255,255,.22) 38%, rgba(192,242,255,.14) 48%, transparent 68%);
        opacity: .50;
    }

    .ss-mobilstatus-head {
        position: relative !important;
        z-index: 1 !important;
        display: flex !important;
        align-items: baseline !important;
        justify-content: center !important;
        gap: 6px !important;
        margin: 0 0 8px !important;
        font-family: Georgia, "Times New Roman", serif !important;
        color: #0756b2 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        text-shadow:
            0 1px 0 rgba(255,255,255,.95),
            0 0 10px rgba(210,242,255,.90) !important;
    }

    .ss-mobilstatus-head small {
        color: #b58222 !important;
        font-family: Tahoma, Verdana, sans-serif !important;
        font-size: 9px !important;
        letter-spacing: .04em !important;
        font-weight: 900 !important;
    }

    .ss-mobilstatus-spark {
        color: #d4a23a !important;
        text-shadow:
            0 0 7px rgba(255,255,255,.95),
            0 0 12px rgba(212,162,58,.55) !important;
    }

    .ss-mobilstatus-row {
        position: relative !important;
        z-index: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
        align-items: stretch !important;
    }

    .ss-mobilstatus-card {
        min-width: 0 !important;
        padding: 6px 3px 5px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(120,185,225,.34) !important;
        background:
            radial-gradient(circle at top left, rgba(255,255,255,.34), transparent 38%),
            linear-gradient(135deg, rgba(255,255,255,.13), rgba(214,240,255,.05)) !important;
        box-shadow:
            0 0 8px rgba(255,255,255,.34),
            inset 0 0 10px rgba(255,255,255,.12) !important;
        text-decoration: none !important;
        color: #063f82 !important;
        text-align: center !important;
        overflow: hidden !important;
    }

    .ss-mobilstatus-photo {
        width: 43px !important;
        height: 43px !important;
        display: block !important;
        margin: 0 auto 4px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        border: 1px solid rgba(214,180,123,.65) !important;
        background: rgba(255,255,255,.28) !important;
        box-shadow:
            0 0 8px rgba(255,255,255,.60),
            0 0 10px rgba(130,205,255,.22) !important;
    }

    .ss-mobilstatus-photo img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    .ss-mobilstatus-name {
        display: block !important;
        width: 100% !important;
        min-height: 22px !important;
        color: #063f82 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: .01em !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.95) !important;
    }

    .ss-mobilstatus-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        max-width: 100% !important;
        margin-top: 3px !important;
        padding: 2px 5px !important;
        border-radius: 999px !important;
        font-family: Tahoma, Verdana, sans-serif !important;
        font-size: 8px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        background: rgba(255,255,255,.36) !important;
        border: 1px solid rgba(255,255,255,.48) !important;
        color: #254e72 !important;
    }

    .ss-mobilstatus-badge i {
        width: 6px !important;
        height: 6px !important;
        display: inline-block !important;
        border-radius: 50% !important;
        background: #97a4ae !important;
        box-shadow: 0 0 5px rgba(151,164,174,.45) !important;
    }

    .ss-mobilstatus-frei .ss-mobilstatus-badge { color: #08724f !important; }
    .ss-mobilstatus-frei .ss-mobilstatus-badge i {
        background: #14b37b !important;
        box-shadow: 0 0 7px rgba(20,179,123,.55) !important;
    }

    .ss-mobilstatus-besetzt .ss-mobilstatus-badge { color: #9d2d32 !important; }
    .ss-mobilstatus-besetzt .ss-mobilstatus-badge i {
        background: #e44b52 !important;
        box-shadow: 0 0 7px rgba(228,75,82,.55) !important;
    }

    /* =====================================================
       HEADER MOBIL
       ===================================================== */

    header img,
    header .logo img,
    header #logo img {
        max-width: 88vw !important;
        height: auto !important;
    }

    header h1,
    .header h1,
    .site-title,
    .logo-title,
    header .site-title,
    header .logo-title,
    header [class*="title"],
    header [class*="logo"] h1,
    header [class*="schrift"],
    header [class*="name"] {
        font-size: clamp(28px, 8.8vw, 42px) !important;
        line-height: 1.02 !important;
        max-width: 98vw !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* =====================================================
       SSM2 MOBILE BERATERKARTEN
       Wird zusätzlich zur Inline-CSS aus list_berater_neu_mobile.php geladen.
       ===================================================== */

    .ssm2-area {
        display: block !important;
    }
}

@media (max-width: 380px) {

    .ss-mobilstatus {
        width: calc(100% - 10px) !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .ss-mobilstatus-row {
        gap: 5px !important;
    }

    .ss-mobilstatus-photo {
        width: 38px !important;
        height: 38px !important;
    }

    .ss-mobilstatus-name {
        font-size: 9px !important;
    }

    .ss-mobilstatus-badge {
        font-size: 7px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}