/* =========================================================================
   Unterseite "Im Chat" (Prototyp) — eigenstaendige, NICHT minifizierte CSS
   bewusst ausserhalb des main.(min.)css-Bundles (cssmin/clean-css kaputt).
   Karten nutzen die bestehenden .box-layout-Klassen (native Optik); hier nur
   Ansicht-Segment, Chat-CTAs, Online-Punkt, Best-Badge, Empty-/Pagination.
   Farben: Pink #E1409E, Dunkelpink #6F2050, Aktiv #993770, Gruen #38C172/#008E18.
   ========================================================================= */

/* min-height, damit bei wenig Inhalt (z.B. Zuletzt/Favoriten mit 1 Karte) der
   Footer nicht weit hochrutscht, sondern unten bleibt (Viewport minus Header/Portal-Bar). */
#im_chat_container { position: relative; min-height: calc(100vh - 240px); }

/* --- Kopfleiste: Desktop = eine Zeile (Head links, Chips rechts) --- */
#im_chat_container .ic-topbar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 14px;
    padding: 20px 4px 0;   /* mehr Abstand nach oben zum Portal-Header */
    margin-bottom: 18px;
}
#im_chat_container .ic-head {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 14px;
}
#im_chat_container .ic-eyebrow {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #E1409E;
}
#im_chat_container .ic-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 2px 0 0;
    line-height: 1.1;
}
/* Element-Anzahl vor dem Titel: nur mobil sichtbar (Regel im <=1023px-Block). */
#im_chat_container .ic-title-count { display: none; }
#im_chat_container .ic-count {
    color: #BBBBBB;
    background: #2A2A2A;
    border: 1px solid #424242;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 3px;
}

/* --- Toolbar: Live-Pill links, Ansicht-Chips rechts --- */
#im_chat_container .ic-toolbar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 12px;
    padding: 0 4px;
    margin-bottom: 16px;
}
#im_chat_container .ic-live-pill {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    color: #38C172;
    background: #353535;
    border: 1px solid #38C172;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}
#im_chat_container .ic-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38C172;
    box-shadow: 0 0 0 3px rgba(56, 193, 114, 0.25);
    -webkit-animation: ic-pulse 2s infinite;
            animation: ic-pulse 2s infinite;
}
@-webkit-keyframes ic-pulse {
    0% { box-shadow: 0 0 0 0 rgba(56, 193, 114, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(56, 193, 114, 0); }
    100% { box-shadow: 0 0 0 0 rgba(56, 193, 114, 0); }
}
@keyframes ic-pulse {
    0% { box-shadow: 0 0 0 0 rgba(56, 193, 114, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(56, 193, 114, 0); }
    100% { box-shadow: 0 0 0 0 rgba(56, 193, 114, 0); }
}

/* Wrapper der Chips: rechtsbuendiger Platz (Desktop), Reveal + Fade-Indikatoren (Mobile) */
#im_chat_container .ic-chipsbar { margin-left: auto; }
#im_chat_container .ic-chips {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#im_chat_container .ic-chips::-webkit-scrollbar { display: none; }
#im_chat_container .ic-chip {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: #FFFFFF;
    background: #333333;
    border: 1px solid #424242;
    text-decoration: none;
    -webkit-transition: background 0.15s ease, border-color 0.15s ease;
            transition: background 0.15s ease, border-color 0.15s ease;
}
#im_chat_container .ic-chip > i { font-size: 13px; }
#im_chat_container .ic-chip:hover,
#im_chat_container .ic-chip:focus {
    background: #6F2050;
    border-color: #6F2050;
    color: #FFFFFF;
    text-decoration: none;
}
#im_chat_container .ic-chip.on {
    background: #E1409E;
    border-color: transparent;
    color: #FFFFFF;
}
/* Reveal-Platzhalter: standardmaessig unsichtbar (JS setzt Hoehe/Sichtbarkeit nur mobil) */
#im_chat_container .ic-chips-spacer { display: none; }

/* --- Karten-Grid: Bootstrap-Cols floaten -> Clearfix --- */
#im_chat_container .ic-grid::before,
#im_chat_container .ic-grid::after {
    content: " ";
    display: table;
}
#im_chat_container .ic-grid::after { clear: both; }

/* --- Status-/Zitat-Overlay am UNTEREN Bildrand (nicht ueber dem CTA) --- */
#im_chat_container .ic-card .avatar { position: relative; }
#im_chat_container .ic-card .ic-quote {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 22px 12px 10px;
    color: #FFFFFF;
    font-style: italic;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* --- Namenszeile: Name + Alter + Badge in EINER Flex-Zeile, vertikal zentriert.
   Das box-layout-CSS setzt .age auf position:absolute (top:9px) -> im Flex-Kontext
   auf static zuruecknehmen, sonst ueberlappt das Badge das Alter ("rutscht unter"). --- */
#im_chat_container .ic-card .head .name {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 4px 6px;
    padding: 6px 22px 5px 6px;   /* rechts Platz fuer das absolut positionierte Favor-Herz */
}
#im_chat_container .ic-card .head .name .age {
    position: static;
    top: auto;
    padding-left: 0;
}
/* Hohe Spezifitaet, damit main-CSS die Badge-Optik nicht ueberschreibt. */
#im_chat_container .ic-card .head .name .ic-best-badge {
    display: inline-block;
    background: #E1409E;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.5;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
}
#im_chat_container .ic-card .head .name .ic-best-badge > i { margin-right: 3px; }

/* --- CTA-Leiste unter der Karte --- */
#im_chat_container .ic-card .ic-cta {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    padding: 8px;
    background: #333333;
}
/* CTA-Buttons container-weit definiert -> von Kachel (.ic-card) UND Liste (.ic-lrow) genutzt */
#im_chat_container .ic-cta-btn {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    -webkit-transition: background 0.15s ease, border-color 0.15s ease;
            transition: background 0.15s ease, border-color 0.15s ease;
}
#im_chat_container .ic-cta-btn > i { font-size: 13px; }

/* Anchatten = primaerer Umsatzpfad -> gefuelltes Gruen */
#im_chat_container .ic-cta-chat {
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    background: #008E18;
    border: 1px solid #008E18;
    color: #FFFFFF;
}
#im_chat_container .ic-cta-chat:hover,
#im_chat_container .ic-cta-chat:focus {
    background: #006E12;
    border-color: #006E12;
    color: #FFFFFF;
}
/* Livecam = abgesetzt, aber gefuellt (frueheres Hover-Design ist jetzt Default);
   Hover wird — wie der Chat-CTA — nur etwas dunkler. */
#im_chat_container .ic-cta-cam {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    background: #993770;
    border: 1px solid #993770;
    color: #FFFFFF;
}
#im_chat_container .ic-cta-cam > i { color: #FFFFFF; }
#im_chat_container .ic-cta-cam:hover,
#im_chat_container .ic-cta-cam:focus {
    background: #6F2050;
    border-color: #6F2050;
    color: #FFFFFF;
}
#im_chat_container .ic-cta-cam:hover > i,
#im_chat_container .ic-cta-cam:focus > i { color: #FFFFFF; }

/* Desktop, enge Kachel-Tiles (1024px .. 1250px, col-md-3/col-lg-3 = 25% -> schmal):
   "Livecam"-Text im Kachel-CTA ausblenden, nur Kamera-Icon zeigen, damit die zwei
   Buttons nebeneinander passen (verhindert das fruehere "abgeschnitten"). Nur Kachel
   (.ic-card); die Liste regelt ihr Icon-only ueber .ic-lcta separat. "Livecam" steckt
   in .ic-cta-camword. Untergrenze = ueber dem Mobile-Breakpoint (1023px). */
@media (min-width: 1024px) and (max-width: 1250px) {
    #im_chat_container .ic-card .ic-cta-camword { display: none; }
}

/* --- Pagination --- */
#im_chat_container .ic-pagination {
    clear: both;
    text-align: center;
    padding: 22px 0 8px;
}
#im_chat_container .ic-page-btn {
    display: inline-block;
    padding: 9px 18px;
    margin: 0 6px;
    background: #2A2A2A;
    color: #FFFFFF;
    border: 1px solid #424242;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
}
#im_chat_container .ic-page-btn:hover,
#im_chat_container .ic-page-btn:focus {
    background: #993770;
    border-color: #993770;
    color: #FFFFFF;
    text-decoration: none;
}
#im_chat_container .ic-page-info { color: #BBBBBB; font-size: 13px; }

/* --- Empty-State --- */
#im_chat_container .ic-empty {
    clear: both;
    background: #2A2A2A;
    border-top: 5px solid #424242;
    color: #FFFFFF;
    text-align: center;
    padding: 48px 24px;
}
#im_chat_container .ic-empty-icon { font-size: 46px; color: #6F2050; margin-bottom: 16px; }
#im_chat_container .ic-empty-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
#im_chat_container .ic-empty-text {
    font-size: 14px;
    color: #BBBBBB;
    max-width: 460px;
    margin: 0 auto 20px;
    line-height: 1.5;
}
#im_chat_container .ic-empty-cta.btn {
    background: #993770;
    border-color: #993770;
    color: #FFFFFF;
    padding: 9px 22px;
    font-weight: 700;
    text-transform: uppercase;
}
#im_chat_container .ic-empty-cta.btn:hover,
#im_chat_container .ic-empty-cta.btn:focus {
    background: #6F2050;
    border-color: #6F2050;
    color: #FFFFFF;
}

/* =========================================================================
   Ansicht-Umschalter (Kacheln <-> Liste) + Listen-Ansicht.
   Beides NUR mobil (<=1023px); Desktop bleibt immer Kachel-Grid. Die Liste ist
   bewusst an den Kacheln orientiert (gleiche Dark-Card / gruene Statuszeile /
   gleiche CTA-Buttons), nur als kompakte horizontale Zeile.
   ========================================================================= */

/* Toggle standardmaessig aus (Desktop); Mobile-Media schaltet ihn ein. */
#im_chat_container .ic-viewtoggle { display: none; }

/* Liste standardmaessig aus; nur mobil + .ic-mode-list sichtbar (siehe Media-Query). */
#im_chat_container .ic-list { display: none; }

/* --- Listen-Zeile = kompakte, horizontale Dark-Card --- */
#im_chat_container .ic-lrow {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    background: #2A2A2A;
    border: 1px solid #3A3A3A;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
    min-height: 100px;   /* Bild fuellt die volle Hoehe -> Mindesthoehe fuer knappe Zeilen */
}
#im_chat_container .ic-lthumb {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
            align-self: stretch;   /* volle Zeilenhoehe */
    display: block;
    position: relative;
    overflow: hidden;
    max-width: 150px;              /* Sicherung gegen extrem breite (Landscape-)Bilder */
    background: #2A2A2A;
}
#im_chat_container .ic-lthumb img {
    height: 100%;                  /* fuellt die volle Hoehe */
    width: auto;                   /* Breite ergibt sich aus dem Bild -> ganzes Bild, kein Ausschnitt */
    max-width: 150px;
    -o-object-fit: cover;
       object-fit: cover;          /* greift nur, falls max-width bindet (Landscape) */
    display: block;
}
#im_chat_container .ic-lmain {
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-width: 0;                 /* erlaubt Text-Ellipsis im Flexkind */
    padding: 6px 10px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2px;
}
/* Kopfzeile: Name/Alter/Zert/Badge links, Favorit-Herz rechts */
#im_chat_container .ic-ltop {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 6px;
}
#im_chat_container .ic-lhead {
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-width: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 4px 6px;
    text-decoration: none;
}
#im_chat_container .ic-lname {
    color: #FFFFFF;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.1;
}
#im_chat_container .ic-lage { color: #BBBBBB; font-size: 12px; font-weight: 600; }
#im_chat_container .ic-lcert { color: #E1409E; font-size: 14px; line-height: 1; }
#im_chat_container .ic-lbest {
    display: inline-block;
    background: #E1409E;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.5;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
}
#im_chat_container .ic-lbest > i { margin-right: 3px; }
/* Favorit-Herz: site-uebliches Sprite-Icon der globalen .favor-Klasse
   (sprite_fav_all.png; .active schaltet auf gefuellt). Das Sprite ist ein
   Hintergrundbild -> das Element MUSS eine feste Groesse haben, sonst kollabiert
   es auf 0 und das Herz ist unsichtbar. Bewusst OHNE .favorit (dessen absolute
   Positionierung + 15x15 wuerde die Flex-Kopfzeile stoeren). */
#im_chat_container .ic-lfav {
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    position: static;
    width: 26px;
    height: 26px;
    margin: 2px 0 0;
    cursor: pointer;
}
/* Gruene "CHAT ONLINE!"-Zeile im Kachel-Look */
#im_chat_container .ic-lstatus {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 7px;
    color: #38C172;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#im_chat_container .ic-ldot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38C172;
    box-shadow: 0 0 0 3px rgba(56, 193, 114, 0.25);
    -webkit-animation: ic-pulse 2s infinite;
            animation: ic-pulse 2s infinite;
}
/* --- OFFLINE-Zustand (favorites/zuletzt enthalten auch offline Amateurinnen) --- */
/* Listen-Zeile: gedaempft grau statt gruen, Punkt ohne Puls. */
#im_chat_container .ic-lstatus.ic-lstatus-off { color: #8A8A8A; }
#im_chat_container .ic-lstatus.ic-lstatus-off .ic-ldot {
    background: #8A8A8A;
    box-shadow: 0 0 0 3px rgba(138, 138, 138, 0.22);
    -webkit-animation: none;
            animation: none;
}
/* Kachel-Statusbalken: gruene Alt-Regel (main.min.css) mit hoher Spezifitaet + !important
   uebersteuern ([[reference_timeline_less_span_specificity]]) -> gedaempftes Grau. */
#im_chat_container .box-layout .avatar .bg_statusbar.ic-sb-off {
    background: #4A4A4A !important;
    color: #D0D0D0 !important;
}
#im_chat_container .box-layout .avatar .bg_statusbar.ic-sb-off .status { color: #D0D0D0 !important; }
#im_chat_container .ic-lquote {
    color: #DDDDDD;
    font-style: italic;
    font-size: 12.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* CTA-Reihe: nutzt die container-weiten .ic-cta-btn/.ic-cta-chat/.ic-cta-cam */
#im_chat_container .ic-lcta {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    margin-top: auto;   /* CTA immer an den unteren Rand der Zeile schieben */
}
/* CTA-Buttons in der Liste etwas flacher (Kacheln bleiben unveraendert) */
#im_chat_container .ic-lcta .ic-cta-btn { padding: 7px 10px; }
/* Wide Mobile (z. B. iPad): CTA bleibt vollzeilig (Chat waechst), aber gedeckelt auf
   max. 400px, damit die Buttons auf breiten Tablets nicht uebermaessig breit werden. */
#im_chat_container .ic-lcta { max-width: 400px; }

/* Handy (<450px): CTA-Buttons in der LISTE kompakter (weniger Padding). Nur Liste. */
@media (max-width: 449px) {
    #im_chat_container .ic-lcta .ic-cta-btn { padding: 6px 8px; }
}
/* Sehr schmale Handys (<390px): "Private " im Listen-CTA ausblenden -> nur "Nachricht".
   Das Wort steckt in .ic-cta-priv (nur im Listen-Template gesetzt). */
@media (max-width: 389px) {
    #im_chat_container .ic-lcta .ic-cta-priv { display: none; }
}
/* Extrem schmale Handys (<350px): Livecam-Button nur noch als Icon (Text ausblenden),
   sonst ueberschneiden sich die beiden CTAs. "Livecam" steckt in .ic-cta-camword
   (nur im Listen-Template gesetzt). */
@media (max-width: 349px) {
    #im_chat_container .ic-lcta .ic-cta-camword { display: none; }
}

/* --- Tablet/Mobile (<=1023px): Kopf zentriert, Chips als Reveal-Leiste --- */
@media (max-width: 1023px) {
    /* Ansicht-Umschalter: kompakter Icon-only-Toggle, rechtsbuendig */
    #im_chat_container .ic-viewtoggle {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0;    /* Position via .ic-head space-between + align-items:center */
        gap: 3px;
        padding: 3px;
        background: #262626;
        border: 1px solid #3A3A3A;
        border-radius: 10px;
    }
    #im_chat_container .ic-vt-btn {
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 36px;
        height: 30px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #BBBBBB;
        font-size: 14px;
        border-radius: 8px;
        cursor: pointer;
        -webkit-appearance: none;
                appearance: none;
    }
    #im_chat_container .ic-vt-btn > i { pointer-events: none; }
    #im_chat_container .ic-vt-btn.on { background: #E1409E; color: #FFFFFF; }

    /* Umschalten: .ic-mode-list zeigt Liste, versteckt Grid (nur hier, nie Desktop).
       !important, damit keine hoch-spezifische Alt-Regel die Sichtbarkeit lautlos
       ueberschreibt ([[reference_timeline_less_span_specificity]]). */
    #im_chat_container.ic-mode-list .ic-grid { display: none !important; }
    #im_chat_container.ic-mode-list .ic-list { display: block !important; }

    /* Kopfleiste gestapelt, Kopf zentriert */
    #im_chat_container .ic-topbar {
        display: block;
        padding-top: 16px;
        margin-bottom: 14px;
    }
    /* Kopf bleibt eine Reihe: Titel-Block links, Kachel/Liste-Toggle rechts
       (Live-Pill stillgelegt 2026-07-20) -> auseinandergezogen. */
    #im_chat_container .ic-head {
        -webkit-justify-content: space-between;
                justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }
    /* Mobil: Element-Anzahl vor dem Titel ("207 Amateure Im Chat") einblenden. */
    #im_chat_container .ic-title-count { display: inline; }

    /* Chips-Wrapper volle Breite; traegt Fade-Indikatoren + Reveal */
    #im_chat_container .ic-chipsbar {
        position: relative;
        margin-left: 0;
        width: 100%;
    }
    #im_chat_container .ic-chips {
        width: 100%;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        justify-content: safe center;   /* zentriert wenn es passt, sonst linksbuendig + scrollbar */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Scrollbar aus -> Fade-Rand ist der Indikator */
    }
    #im_chat_container .ic-chips::-webkit-scrollbar { display: none; }

    /* Fade-Indikatoren an den Raendern: zeigen dauerhaft an, dass mehr da ist.
       JS toggelt .can-left / .can-right je nach Scroll-Position. */
    #im_chat_container .ic-chipsbar::before,
    #im_chat_container .ic-chipsbar::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 34px;
        pointer-events: none;
        opacity: 0;
        z-index: 2;
        -webkit-transition: opacity 0.15s ease;
                transition: opacity 0.15s ease;
    }
    #im_chat_container .ic-chipsbar::before {
        left: 0;
        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
    #im_chat_container .ic-chipsbar::after {
        right: 0;
        background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    }
    #im_chat_container .ic-chipsbar.can-left::before { opacity: 1; }
    #im_chat_container .ic-chipsbar.can-right::after { opacity: 1; }

    /* Reveal beim Hochscrollen (wie Timeline-Rail): JS pinnt den WRAPPER.
       Platzhalter .ic-chips-spacer haelt die Flow-Hoehe (kein Sprung). */
    #im_chat_container .ic-chips-spacer { display: none; }
    #im_chat_container .ic-chipsbar.ic-chips--fixed {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        z-index: 1000;                 /* unter Header (.header 1003), ueber dem Feed */
        background: #2A2A2A;
        padding: 8px 10px;
        -webkit-box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
                box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
        -webkit-transform: translateY(0);
                transform: translateY(0);
        -webkit-transition: -webkit-transform 0.25s ease;
                transition: transform 0.25s ease;
        will-change: transform;
    }
    #im_chat_container .ic-chipsbar.ic-chips--fixed.ic-chips--hidden {
        -webkit-transform: translateY(-115%);
                transform: translateY(-115%);
    }

    /* etwas Abstand zwischen gestapelten Karten */
    #im_chat_container .ic-card { margin-bottom: 12px; }
}
@media (max-width: 767px) {
    #im_chat_container .ic-title { font-size: 20px; }
    #im_chat_container .ic-chip { padding: 8px 13px; font-size: 12.5px; }
}

/* --- Infinite-Load (eingeloggt): Lade-Indikator + Sentinel --- */
#im_chat_container .ic-loading {
    text-align: center;
    color: #aaa;
    padding: 18px 0;
    font-size: 14px;
}
#im_chat_container .ic-loading .fa { margin-right: 6px; }
/* Sentinel triggert den IntersectionObserver kurz VOR dem echten Seitenende. */
#im_chat_container .ic-sentinel { width: 100%; height: 1px; }

/* =========================================================================
   SEO / ausgeloggte Variante (#im_chat_container.ic-seo). Betrifft NUR die
   oeffentliche Seite (tmpl/seo/im_chat.php); die eingeloggte Seite traegt die
   .ic-seo-Klasse nicht. Alle CTAs/Herzen oeffnen das Register-Modal.
   ========================================================================= */
#im_chat_container.ic-seo .favorit.register,
#im_chat_container.ic-seo .ic-lfav.register,
#im_chat_container.ic-seo .ic-chip.register,
#im_chat_container.ic-seo .ic-cta-btn.register { cursor: pointer; }

/* Register-CTA-Banner unter dem Grid (ersetzt die Pagination) */
#im_chat_container.ic-seo .ic-seo-cta {
    margin: 22px auto 6px;
    max-width: 640px;
    text-align: center;
    padding: 18px 16px;
    background: #2A2A2A;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
}
#im_chat_container.ic-seo .ic-seo-cta-text {
    color: #eee;
    font-size: 16px;
    margin-bottom: 12px;
}
#im_chat_container.ic-seo .ic-seo-cta-btn {
    display: inline-block;
    padding: 11px 22px;
    background: #009118;
    background: -webkit-linear-gradient(top, #009118, #006f19);
    background: linear-gradient(to bottom, #009118, #006f19);
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
}
#im_chat_container.ic-seo .ic-seo-cta-btn:hover { background: #007a14; }

/* --- SEO-Wording-Textblock (nur ausgeloggte /im_chat-Seite) -----------------
   Standalone-Block: liegt in #content, AUSSERHALB von #im_chat_container (nach
   dem Body-Include in tmpl/seo/im_chat.php). Dark-Style passend zum Rest,
   Ueberschriften pink wie jetzt_live. Ausreichend spezifisch (#content ...)
   gegen hoch-spezifische Alt-Regeln (siehe Timeline-Spezifitaetsfalle). */
#content .ic-seo-text {
    max-width: 900px;
    margin: 30px auto 10px;
    padding: 22px 18px 6px;
    border-top: 1px solid #333333;
    color: #BBBBBB;
    font-size: 14px;
    line-height: 1.7;
}
#content .ic-seo-text h2 {
    color: #E1409E;
    font-size: 22px;
    margin: 0 0 14px;
}
#content .ic-seo-text h3 {
    color: #FFFFFF;
    font-size: 17px;
    margin: 20px 0 8px;
}
#content .ic-seo-text p { margin: 0 0 12px; }
#content .ic-seo-text strong { color: #FFFFFF; }
#content .ic-seo-text a { color: #E1409E; text-decoration: underline; }
#content .ic-seo-text a:hover { color: #FF66B2; }
@media (max-width: 767px) {
    #content .ic-seo-text { margin: 20px 12px 6px; padding: 18px 4px 4px; }
    #content .ic-seo-text h2 { font-size: 19px; }
    #content .ic-seo-text h3 { font-size: 16px; }
}

/* --- SEO-Mobile: grossen Footer-Abstand neutralisieren -----------------------
   main_seo.min.css setzt @media(max-width:1023px){ .page-content{ padding-bottom:300px } }
   (reserviert Platz, den die im_chat-SEO-Seite nicht braucht -> grosser Leerraum vor
   dem Footer). Nur fuer DIESE Seite zuruecksetzen: .page-content ist Vorfahre von
   #im_chat_container, daher Parent-Selektion via :has(). Wird :has() nicht unterstuetzt,
   bleibt schlicht das bisherige Verhalten (kein Bruch). Muster wie avsv2/avsv3
   (padding-bottom:0). Nur ausgeloggt (.ic-seo), eingeloggte Seite bleibt unberuehrt. */
@media (max-width: 1023px) {
    .page-content:has(#im_chat_container.ic-seo) {
        padding-bottom: 0;
    }
}