
:root{
 --rd-bg:#f6f7f8;
 --rd-card:#fff;
 --rd-text:#11181c;
 --rd-muted:#75848c;
 --rd-line:#dfe6e9;
 --rd-accent:#ef2851;
 --rd-dark:#0b1115;
 --rd-blue:#315e74;
}
.content-page-shell:has(.residents-discovery){max-width:none!important;margin:0!important;padding:0!important}
.residents-discovery{background:var(--rd-bg);color:var(--rd-text);min-height:72vh;padding:44px 0 60px}
.residents-shell{width:min(1180px,calc(100% - 36px));margin:0 auto}
.residents-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.residents-head>div:first-child>span{font-size:13px;letter-spacing:.16em;font-weight:850;color:var(--rd-accent)}
.residents-head h1{font-size:clamp(52px,7vw,92px);line-height:.82;letter-spacing:-.055em;margin:10px 0 13px}
.residents-head p{font-size:16px;color:#6d7c84;margin:0}
.residents-head-count{text-align:right}.residents-head-count strong,.residents-head-count span{display:block}.residents-head-count strong{font-size:28px;line-height:1}.residents-head-count span{font-size:12px;color:#849199;text-transform:uppercase;letter-spacing:.12em;margin-top:5px}
.residents-controls{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:center;padding:12px 0 20px;border-top:1px solid var(--rd-line)}
.resident-filter-tabs{display:flex;gap:6px;overflow:auto}.resident-filter-tabs button{border:0;background:transparent;border-radius:999px;padding:8px 12px;font-size:14px;font-weight:750;color:#687981;cursor:pointer;white-space:nowrap}.resident-filter-tabs button.active{background:var(--rd-dark);color:#fff}
.resident-search{height:42px;border:1px solid var(--rd-line);background:#fff;border-radius:999px;display:flex;align-items:center;gap:8px;padding:0 13px}.resident-search span{font-size:16px;color:#718089}.resident-search input{border:0;outline:0;background:transparent;width:100%;font-size:15px}
.resident-discovery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.resident-discovery-card{min-width:0}.resident-card-link{display:block;text-decoration:none;color:inherit;background:var(--rd-card);border:1px solid var(--rd-line);transition:.2s;overflow:hidden}.resident-discovery-card:hover .resident-card-link{transform:translateY(-3px);box-shadow:0 18px 40px rgba(29,47,57,.1);border-color:#ccd7dc}
.resident-card-image{position:relative;aspect-ratio:4/5;background:#dfe5e8 center/cover no-repeat;overflow:hidden}
.resident-card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,13,16,.72),transparent 44%);pointer-events:none}
.resident-card-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:90px;font-weight:950;color:#c3cdd2;background:linear-gradient(135deg,#e9edef,#cfd8dc)}
.resident-card-topline{position:absolute;z-index:3;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.resident-card-tag{font-size:11px;font-weight:850;letter-spacing:.12em;color:#fff;background:rgba(7,12,15,.62);backdrop-filter:blur(7px);padding:6px 7px;border-radius:999px}
.resident-card-live,.resident-card-soon{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:900;letter-spacing:.06em;color:#fff;background:rgba(7,12,15,.72);backdrop-filter:blur(8px);padding:6px 8px;border-radius:999px}
.resident-card-live{background:var(--rd-accent)}.resident-card-live i,.resident-card-soon i{width:6px;height:6px;border-radius:50%;background:#fff}.resident-card-soon i{background:var(--rd-accent)}
.resident-card-live i{animation:rdPulse 1.25s infinite}@keyframes rdPulse{50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}
.resident-card-hover{position:absolute;z-index:3;left:14px;right:14px;bottom:12px;display:flex;justify-content:space-between;align-items:center;color:#fff;transform:translateY(12px);opacity:0;transition:.2s}.resident-card-hover span{font-size:12px;font-weight:850;letter-spacing:.08em}.resident-card-hover b{font-size:17px}.resident-card-image{transition:.25s}.resident-discovery-card:hover .resident-card-image{background-size:108%}.resident-discovery-card:hover .resident-card-hover{transform:none;opacity:1}
.resident-card-copy{padding:15px 15px 14px}.resident-card-copy h2{font-size:24px;line-height:.95;letter-spacing:-.035em;text-transform:uppercase;margin:0 0 10px}
.resident-card-meta{display:flex;flex-wrap:wrap;gap:5px}.resident-card-meta span{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:#77868e}.resident-card-meta span+span:before{content:"·";margin-right:5px}
.resident-card-broadcast{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-top:1px solid #edf0f2;margin-top:13px;padding-top:11px}.resident-card-broadcast div span,.resident-card-broadcast div strong{display:block}.resident-card-broadcast div span{font-size:11px;letter-spacing:.1em;color:#89969d}.resident-card-broadcast div strong{font-size:14px;margin-top:4px}.resident-card-broadcast time{font-size:12px;color:#7d8c94}.resident-card-broadcast em{font-size:11px;font-style:normal;font-weight:900;color:var(--rd-accent);letter-spacing:.08em}
.resident-discovery-card.is-live .resident-card-link{border-color:rgba(239,40,81,.48);box-shadow:0 0 0 1px rgba(239,40,81,.11)}.resident-discovery-card.is-live .resident-card-copy{background:linear-gradient(180deg,#fff,#fff7f9)}
.resident-discovery-card.is-soon .resident-card-broadcast div strong{color:var(--rd-accent)}
.resident-empty-state{text-align:center;padding:60px 20px}.resident-empty-state strong,.resident-empty-state span{display:block}.resident-empty-state strong{font-size:16px}.resident-empty-state span{font-size:14px;color:#849199;margin-top:5px}
@media(max-width:900px){.resident-discovery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.residents-controls{grid-template-columns:1fr}.resident-search{max-width:none}}
@media(max-width:580px){.residents-discovery{padding-top:28px}.residents-shell{width:min(100% - 24px,1180px)}.residents-head{display:grid}.residents-head-count{text-align:left}.resident-discovery-grid{grid-template-columns:1fr}.resident-card-copy h2{font-size:22px}}

/* 0.44.0 dark discovery + rotating generated hero */
:root{
 --rd-bg:#050708;
 --rd-card:#0b1013;
 --rd-text:#f5f7f8;
 --rd-muted:#819097;
 --rd-line:#1b252a;
 --rd-accent:#ef2851;
 --rd-dark:#0b1115;
 --rd-blue:#315e74;
}
.residents-discovery{background:var(--rd-bg);color:var(--rd-text);padding:0 0 64px}
.residents-dynamic-hero{position:relative;min-height:540px;background:#080c0f center/cover no-repeat;border-bottom:1px solid #1d282d;overflow:hidden}
.residents-dynamic-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,8,.97) 0%,rgba(5,7,8,.78) 31%,rgba(5,7,8,.27) 66%,rgba(5,7,8,.7) 100%)}
.residents-hero-overlay{position:absolute;inset:0;background:linear-gradient(0deg,#050708 0%,transparent 42%),radial-gradient(circle at 72% 33%,transparent 0 18%,rgba(5,7,8,.24) 66%)}
.residents-hero-noise{position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:repeating-linear-gradient(115deg,transparent 0 17px,rgba(255,255,255,.025) 17px 18px)}
.residents-hero-content{position:relative;z-index:2;min-height:540px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr);grid-template-rows:1fr auto;align-items:end;gap:30px;padding-top:90px;padding-bottom:26px}
.residents-hero-title{align-self:center}.residents-hero-title>span{display:block;font-size:12px;letter-spacing:.18em;color:var(--rd-accent);font-weight:900}.residents-hero-title h1{font-size:clamp(72px,9vw,138px);line-height:.72;letter-spacing:-.065em;margin:18px 0 22px;color:#fff}.residents-hero-title p{font-size:15px;color:#b3bec3;margin:0}
.residents-hero-status{align-self:center;justify-self:end;width:min(390px,100%);border:1px solid rgba(255,255,255,.16);background:rgba(7,12,15,.72);backdrop-filter:blur(16px);padding:20px;text-decoration:none;color:#fff}
.residents-hero-status>span,.residents-hero-status>strong,.residents-hero-status>b,.residents-hero-status>em{display:block}
.residents-hero-status>span{font-size:12px;letter-spacing:.14em;font-weight:900;color:#c7d0d4}.residents-hero-status>span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rd-accent);margin-right:6px}
.residents-hero-status>strong{font-size:31px;line-height:.96;letter-spacing:-.04em;text-transform:uppercase;margin-top:12px}.residents-hero-status>b{font-size:13px;color:#aeb9be;margin-top:7px}.residents-hero-status>em{font-size:13px;font-style:normal;font-weight:900;letter-spacing:.09em;color:var(--rd-accent);margin-top:18px}.residents-hero-status mark{background:none;color:#fff;font-size:16px}
.residents-hero-status.is-live{border-color:rgba(239,40,81,.62);background:linear-gradient(135deg,rgba(239,40,81,.25),rgba(7,12,15,.86) 62%)}.residents-hero-status.is-live>span i{background:#fff;animation:rdHeroPulse 1.25s infinite}.residents-hero-status.is-live>em{color:#fff}
@keyframes rdHeroPulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
.residents-hero-meta{grid-column:1/-1;display:flex;gap:34px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px}.residents-hero-meta>div{display:flex;align-items:baseline;gap:7px}.residents-hero-meta strong{font-size:18px}.residents-hero-meta span{font-size:11px;color:#7d8c94;text-transform:uppercase;letter-spacing:.11em}

.residents-shell>.residents-controls{margin-top:24px}.residents-controls{border-top-color:#1c262b}.resident-filter-tabs button{color:#8d9aa1}.resident-filter-tabs button.active{background:#f2f4f5;color:#10171b}.resident-search{background:#0b1013;border-color:#202b31}.resident-search input{color:#edf1f3}.resident-search input::placeholder{color:#697980}
.resident-card-link{background:var(--rd-card);border-color:var(--rd-line);color:var(--rd-text)}.resident-discovery-card:hover .resident-card-link{border-color:#34444c;box-shadow:0 18px 46px rgba(0,0,0,.28)}
.resident-card-image{background:#10171b}.resident-card-fallback{color:#36464e;background:linear-gradient(135deg,#121a1e,#0a0f12)}
.resident-card-copy h2{color:#fff}.resident-card-meta span{color:#788890}.resident-card-broadcast{border-top-color:#1b252a}.resident-card-broadcast div span{color:#718089}.resident-card-broadcast time{color:#7b8b93}
.resident-discovery-card.is-live .resident-card-copy{background:linear-gradient(180deg,#0b1013,#160c10)}.resident-discovery-card.is-live .resident-card-link{border-color:rgba(239,40,81,.52)}
.resident-empty-state span{color:#78878f}

@media(max-width:900px){
 .residents-hero-content{grid-template-columns:1fr;align-content:end;padding-top:80px}.residents-hero-status{justify-self:start}.residents-hero-meta{grid-column:auto}.residents-dynamic-hero{min-height:650px}.residents-hero-content{min-height:650px}
}
@media(max-width:580px){
 .residents-dynamic-hero{min-height:620px}.residents-hero-content{min-height:620px;padding-top:62px}.residents-hero-title h1{font-size:70px}.residents-hero-meta{gap:16px;flex-wrap:wrap}.residents-hero-status>strong{font-size:26px}
}

/* ==========================================================
   320 FM · Resident photo rendering fix
   Ein Bild, vollständiges Portrait, kein Doppel-Rollover
   ========================================================== */

.resident-card-image{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;

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

    background:
        radial-gradient(
            circle at 50% 36%,
            rgba(42,175,225,.08),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #121b21,
            #080d11
        ) !important;

    background-image:none !important;
    background-size:auto !important;
}

.resident-card-photo{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;
    object-position:center center;

    transform:scale(1);
    transform-origin:center center;

    filter:
        saturate(.92)
        contrast(1.02);

    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        filter .35s ease;

    z-index:1;
}


/*
 * Eine dunkle, weiche Ebene über genau demselben Bild.
 * Kein zweites Bild.
 */
.resident-card-image::after{
    content:"";
    position:absolute;
    inset:0;

    z-index:2;
    pointer-events:none;

    background:
        linear-gradient(
            0deg,
            rgba(5,9,12,.76) 0%,
            rgba(5,9,12,.24) 32%,
            transparent 56%
        );
}


/*
 * Alte Background-Zoom-Regel vollständig neutralisieren.
 */
.resident-discovery-card:hover .resident-card-image{
    background-size:auto !important;
}


/*
 * Nur das EINE Bild wird sehr dezent bewegt.
 */
.resident-discovery-card:hover .resident-card-photo{
    transform:scale(1.025);

    filter:
        saturate(1.04)
        contrast(1.03);
}


/*
 * Status, Hover-Text und Labels über dem Foto halten.
 */
.resident-card-topline,
.resident-card-hover{
    z-index:4 !important;
}


/*
 * Placeholder weiterhin sauber darstellen.
 */
.resident-card-fallback{
    z-index:1;
}


/*
 * Auf kleinen Geräten kein unnötiger Zoom.
 */
@media(max-width:760px){
    .resident-discovery-card:hover .resident-card-photo{
        transform:none;
    }
}


/* ==========================================================
   320 FM · Adaptive Resident Portrait Rendering
   ========================================================== */

.resident-card-image{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;

    background:#0c1217 !important;
}


/*
 * Hauptbild:
 * Karte wird vollständig gefüllt.
 * Gesichter liegen meist oberhalb der geometrischen Mitte.
 */
.resident-card-photo{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:50% 35%;

    image-rendering:auto;

    transform:scale(1);

    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        filter .35s ease;

    filter:
        saturate(.94)
        contrast(1.025);

    z-index:1;
}


/*
 * Keine aggressiven Zoomstufen.
 * Dadurch werden kleinere Quelldateien nicht unnötig
 * zusätzlich hochskaliert.
 */
.resident-discovery-card:hover .resident-card-photo{
    transform:scale(1.018);

    filter:
        saturate(1.03)
        contrast(1.035);
}


/*
 * Weiches Overlay für Lesbarkeit der Beschriftungen.
 */
.resident-card-image::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:2;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(4,8,10,.08) 0%,
            transparent 36%,
            rgba(4,8,10,.12) 58%,
            rgba(4,8,10,.76) 100%
        );
}


/*
 * Status und Rollover-Inhalt immer oberhalb des Fotos.
 */
.resident-card-topline,
.resident-card-hover{
    position:absolute;
    z-index:4 !important;
}


/*
 * Alte Hintergrundbild-Logik vollständig deaktivieren.
 */
.resident-card-image{
    background-image:none !important;
    background-size:auto !important;
    background-position:center !important;
}

.resident-discovery-card:hover .resident-card-image{
    background-size:auto !important;
}


/*
 * Sehr schmale Mobile-Karten:
 * Fokus leicht höher, weil Portraits dort stärker beschnitten
 * würden.
 */
@media(max-width:580px){

    .resident-card-photo{
        object-position:50% 30%;
    }

    .resident-discovery-card:hover .resident-card-photo{
        transform:none;
    }
}


/* ==========================================================
   320 FM · Adaptive Resident Portrait Rendering
   ========================================================== */

.resident-card-image{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;

    background:#0c1217 !important;
}


/*
 * Hauptbild:
 * Karte wird vollständig gefüllt.
 * Gesichter liegen meist oberhalb der geometrischen Mitte.
 */
.resident-card-photo{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:50% 35%;

    image-rendering:auto;

    transform:scale(1);

    transition:
        transform .35s cubic-bezier(.2,.7,.2,1),
        filter .35s ease;

    filter:
        saturate(.94)
        contrast(1.025);

    z-index:1;
}


/*
 * Keine aggressiven Zoomstufen.
 * Dadurch werden kleinere Quelldateien nicht unnötig
 * zusätzlich hochskaliert.
 */
.resident-discovery-card:hover .resident-card-photo{
    transform:scale(1.018);

    filter:
        saturate(1.03)
        contrast(1.035);
}


/*
 * Weiches Overlay für Lesbarkeit der Beschriftungen.
 */
.resident-card-image::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:2;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(4,8,10,.08) 0%,
            transparent 36%,
            rgba(4,8,10,.12) 58%,
            rgba(4,8,10,.76) 100%
        );
}


/*
 * Status und Rollover-Inhalt immer oberhalb des Fotos.
 */
.resident-card-topline,
.resident-card-hover{
    position:absolute;
    z-index:4 !important;
}


/*
 * Alte Hintergrundbild-Logik vollständig deaktivieren.
 */
.resident-card-image{
    background-image:none !important;
    background-size:auto !important;
    background-position:center !important;
}

.resident-discovery-card:hover .resident-card-image{
    background-size:auto !important;
}


/*
 * Sehr schmale Mobile-Karten:
 * Fokus leicht höher, weil Portraits dort stärker beschnitten
 * würden.
 */
@media(max-width:580px){

    .resident-card-photo{
        object-position:50% 30%;
    }

    .resident-discovery-card:hover .resident-card-photo{
        transform:none;
    }
}

