/* ================================================================
   INDEX - RED TEMPTATION
   ================================================================ */

.index-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}
.index-container a,
.index-container a:link,
.index-container a:visited { color: #993234 !important; text-decoration: none; }
.index-container a:hover   { color: #7a2628 !important; text-decoration: underline !important; }
.index-container .block-header a,
.index-container .block-header a:link,
.index-container .block-header a:visited { color: #fff !important; }
.index-container .block-header a:hover   { color: #fff !important; text-decoration: underline !important; }

/* ===== ACTION BAR ===== */
.index-actions { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; }
.index-actions .action-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #993234; color: #fff !important;
    padding: 8px 18px; border-radius: 8px;
    font-size: 14px; font-weight: 600; border: none; cursor: pointer;
    transition: all 0.15s ease;
}
.index-actions .action-btn:hover {
    background: #7a2628; color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(153,50,52,0.3);
    text-decoration: none !important;
}
/* "User Online"-Panel (Admin): Trigger-Button, Modal-HTML + zugehöriges
   CSS/JS sitzen in system/header.php, siehe dort "ONLINE-PUNKT (Admin)".
   Die oeffentliche Variante (Avatar+Name, keine Details) ist jetzt die
   "Wer ist online"-Box im Footer (system/footer.php), site-weit statt nur
   auf dem Index - das bisherige ".index-benutzer-online-leiste"-Popup ist
   deshalb entfallen. */

/* ===== FORUM BLOCK ===== */
.forum-block {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 3px #f2c4c5, 0 0 0 1px #e8b8b9;
    overflow: hidden;
    margin-bottom: 20px;
}

/* ===== BLOCK HEADER ===== */
.block-header {
    padding: 8px 16px;
    background: linear-gradient(to right, #993234, #b03638);
    border-bottom: 1px solid #7a2628;
    font-size: 14px; font-weight: 700;
    display: flex; justify-content: space-between; align-items: center;
    color: #fff;
}
.block-header .badge {
    background: rgba(255,255,255,0.15); color: #fff;
    padding: 2px 12px; border-radius: 12px;
    font-size: 12px; font-weight: 600;
}
#artikel-ungelesen-badge {
    background: #ff4757;
    margin-left: 6px;
    padding: 1px 8px;
}

/* ===== ARTIKEL-SLIDER (KOMPAKT) ===== */
.artikel-slider-wrap {
    position: relative;
}
.artikel-slider {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 10px 12px;
    scrollbar-width: thin;
}
.artikel-slider::-webkit-scrollbar { height: 5px; }
.artikel-slider::-webkit-scrollbar-thumb { background: #d5b8b8; border-radius: 4px; }

/* Modernisiert 2026-08-24: Bild fuellt jetzt die ganze Karte, Titel liegt als
   weisser Text auf einem dunklen Verlauf direkt ueber dem Bild (Magazin-/
   Streaming-App-Kartenstil) statt Bild oben + separater Textblock darunter -
   wirkt kompakter UND moderner, gleiche Slider-Mechanik (Scroll-Snap)
   bleibt unveraendert. */
.artikel-slide {
    position: relative;
    flex: 0 0 auto;
    width: 150px;
    height: 96px;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: hidden;
    background: #2a1414;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.artikel-slide:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 6px 16px rgba(153,50,52,0.3);
    text-decoration: none;
    color: inherit;
}
.artikel-slide-bild {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    background: #eee;
}
.artikel-slide-bild-platzhalter {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#993234,#5a1c1d);
    display: flex; align-items: center; justify-content: center;
}
.artikel-slide-bild-platzhalter i { color: rgba(255,255,255,0.5); font-size: 1.4rem; }
.artikel-slide-scrim {
    position: absolute; left: 0; right: 0; bottom: 0; height: 75%;
    background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0));
    pointer-events: none;
}
.artikel-slide-titel {
    position: absolute; left: 0; right: 0; bottom: 0;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.28;
    padding: 8px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.artikel-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(153,50,52,0.9);
    color: #fff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 12px;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.artikel-slider-nav:hover { background: #7a2628; }
.artikel-slider-nav.prev { left: 4px; }
.artikel-slider-nav.next { right: 4px; }

@media (max-width: 480px) {
    .artikel-slide { width: 128px; height: 84px; }
    .artikel-slider-nav { display: none; }
}

/* ===== UNREAD-DOT (KARTEN) ===== */
.artikel-unread-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #ff4757;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* ===== "ALLE GELESEN" ICON-BUTTON (NUR ICON, KEIN TEXT) ===== */
.mark-read-icon {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.mark-read-icon:hover { background: rgba(255,255,255,0.3); }
.mark-read-icon:active { transform: scale(0.9); }
.mark-read-icon.done { background: #27ae60; }

/* ===== SPALTEN-HEADER ===== */
.themen-col-header {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 90px 140px;
    align-items: center; column-gap: 12px;
    background: #f5f5f5; border-bottom: 1px solid #e0d0d0;
    padding: 6px 16px;
    font-size: 12px; font-weight: 700; color: #666;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.themen-col-header .col-thema  { grid-column: 2; }
.themen-col-header .col-count  { grid-column: 3; text-align: right; padding-right: 12px; }
.themen-col-header .col-last   { grid-column: 4; }

/* ===== THEMEN LISTE ===== */
.themen-list { display: flex; flex-direction: column; }

.thema-row {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 90px 140px;
    grid-template-areas: "avatar main count last";
    align-items: center;
    column-gap: 12px;
    padding: 9px 16px; border-bottom: 1px solid #f0e0e0;
    cursor: pointer; transition: background 0.1s;
    min-height: 52px;
}
.thema-row:hover       { background: #f9efef; }
.thema-row:last-child  { border-bottom: none; }
.thema-row.pinned      { background: #fefaf5; }
.thema-row.pinned:hover { background: #fef5ee; }

/* Ersteller-Avatar (oben) - wird durch Letzter-Avatar ersetzt */
.thema-avatar {
    grid-area: avatar;
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%; overflow: hidden;
    background: #f2e0e0;
    display: flex; align-items: center; justify-content: center;
    position: relative; font-size: 13px; font-weight: 700; color: #fff;
}
.thema-avatar img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.thema-avatar .avatar-placeholder { font-size: 16px; color: #993234; }
.thema-avatar .unread-dot {
    position: absolute; top: 2px; right: 2px;
    width: 9px; height: 9px;
    background: #22c55e; border-radius: 50%; border: 1px solid #fff;
    animation: led-pulse 1.8s ease-in-out infinite;
}
@keyframes led-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

/* Thema Mitte */
.thema-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.thema-main-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thema-titel-link {
    font-weight: 700; font-size: 14px; color: #993234 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.thema-titel-link:hover { color: #7a2628 !important; text-decoration: underline !important; }
.thema-pin-icon    { color: #993234; font-size: 10px; flex-shrink: 0; }
.thema-logos       { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }
.thema-logos img   { height: 18px; width: auto; max-width: 26px; object-fit: contain; }

.thema-meta {
    font-size: 11px; color: #999;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thema-meta a { color: #993234 !important; font-weight: 600; }
.thema-meta a:hover { color: #7a2628 !important; }

/* Beitraege/Aufrufe - bewusst eigene Klasse statt .thema-meta/.thema-count,
   die auf Mobile per @media ausgeblendet werden (Nutzer-Wunsch 2026-09-08:
   auf Mobile UND Desktop sichtbar). */
.thema-stats {
    font-size: 11px; color: #999;
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thema-stats i { font-size: 10px; color: #bbb; }
.thema-stats-sep { color: #ccc; }

.thema-pages { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 1px; }
.thema-pages .pg {
    display: inline-block; background: #f0f0f0; border: 1px solid #ddd;
    color: #993234 !important; font-size: 10px; font-weight: 600;
    padding: 0 5px; border-radius: 3px; line-height: 1.6; text-decoration: none !important;
}
.thema-pages .pg:hover { background: #f5d7d8; border-color: #993234; }
.thema-pages .pg-dots  { font-size: 10px; color: #aaa; }

/* Antworten */
.thema-count {
    grid-area: count;
    text-align: right; padding-right: 12px;
    font-size: 15px; font-weight: 700; color: #333;
}
.thema-count .count-label { display: none; }

/* Letzte Antwort - Avatar zeigt oben bereits diesen User, hier nur Name+Zeit */
.thema-last {
    grid-area: last;
    display: flex; align-items: center; min-width: 0;
}
.thema-last-info       { display: flex; flex-direction: column; min-width: 0; }
.thema-last-info .last-author {
    font-size: 12px; font-weight: 600; color: #993234 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thema-last-info .last-zeit { font-size: 11px; color: #999; white-space: nowrap; }
.user-link { text-decoration: none; }
.user-link:hover { text-decoration: underline; }

/* Unread badge */
.unread-badge-inline {
    background: #22c55e; color: #fff !important;
    font-size: 9px; font-weight: 700;
    padding: 1px 7px; border-radius: 10px;
    flex-shrink: 0; line-height: 1.6;
}

/* Empty state */
.empty-state { padding: 24px 20px; text-align: center; color: #999; }
.empty-state > i { display: none; }
.empty-state h3 { font-size: 14px; color: #555; margin: 0 0 8px 0; }
.empty-state p  { font-size: 14px; margin: 0 0 12px 0; }
.empty-state .btn {
    display: inline-block; background: #993234; color: #fff !important;
    padding: 6px 16px; border-radius: 5px; font-weight: 600; font-size: 12px;
}

/* ================================================================
   FEED - MODERNE BEITRAGS-KARTEN ("Letzte Beitraege")
   Ganze Karte = ein Link zum Original-Beitrag (.feed-stretch)
   ================================================================ */
#feed-block .feed-wrap { padding: 10px; background: #faf6f6; }
.feed-list { display: flex; flex-direction: column; gap: 6px; }

.feed-card {
    position: relative; display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 12px; background: #fff; border: 1px solid #efdede; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.feed-card:hover { border-color: #d9a0a2; box-shadow: 0 4px 14px rgba(153,50,52,.14); transform: translateY(-1px); }
.feed-stretch { position: absolute; inset: 0; z-index: 5; border-radius: 10px; -webkit-tap-highlight-color: rgba(153,50,52,.12); }
.feed-stretch:focus-visible { outline: 2px solid #993234; outline-offset: 2px; }
.feed-card * { pointer-events: none; }
.feed-card .feed-stretch { pointer-events: auto; }

/* Avatar */
.feed-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; font-size: 11px; font-weight: 700; color: #fff;
}
.feed-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.feed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Kopf */
.feed-kopf { display: flex; align-items: center; gap: 8px; line-height: 1.3; min-width: 0; }
.feed-autor { font-weight: 700; font-size: 13px; color: #993234; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-shrink: 0; max-width: 40%; }
.feed-antworten { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #8a6a6a; background: none; padding: 0; border: 0; border-radius: 0; flex-shrink: 0; }
.feed-antworten i { font-size: 10px; color: #b98a8a; }
.feed-zeit { margin-left: auto; font-size: 11px; color: #8a8a8a; white-space: nowrap; flex-shrink: 0; }

/* Thema */
.feed-thema { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; line-height: 1.3; color: #1a202c; min-width: 0; }
.feed-thema-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }

/* Forum-Chip */
.feed-forum { min-width: 0; flex: 0 1 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #993234; background: #f8eaea; padding: 1px 8px; border-radius: 99px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-forum i { font-size: 10px; opacity: .8; }

.feed-erweitert { min-width: 0; flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 12.5px; font-weight: 700; color: #7a2a2c; line-height: 1.3; }
.feed-erweitert-logos { display: inline-flex; gap: 3px; align-items: center; flex-shrink: 0; }
.feed-erweitert-logos img { height: 17px; width: auto; max-width: 22px; object-fit: contain; }
.feed-erweitert-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Inhalt (gekuerzt) */
.feed-inhalt { font-size: 13.5px; color: #3d4350; line-height: 1.45; max-height: 4.4em; overflow: hidden; word-break: break-word; }
.feed-inhalt.ist-lang { -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.feed-inhalt p { margin: 0 0 .35em; }
.feed-inhalt img { max-width: 100%; max-height: 120px; border-radius: 8px; }
.feed-inhalt blockquote { margin: 6px 0; padding: 6px 10px; border-left: 3px solid #993234; background: #fbeeee; font-size: 13px; color: #555; }
.feed-inhalt a { color: #993234; }
.feed-embed-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 600; color: #993234; background: #f8eaea; padding: 3px 10px; border-radius: 99px; }

/* ================================================================
   BBCODE-KARTEN IM FEED (Social-Embeds, Artikel-Snippet, Spieler-Karte,
   Artikel-Teilen-Karte) - 1:1 aus thema/inhalt.php übernommen. Der Feed
   rendert Beiträge über dieselbe bbcodeToHtml()-Funktion wie die Thread-
   Ansicht, hatte für diese Karten bisher aber kein eigenes CSS und zeigte
   sie daher unformatiert als nackten Text/Links an.
   ================================================================ */
.feed-inhalt .social-preview { max-width: 100% !important; margin: 4px 0 !important; }
.feed-inhalt .social-preview,
.feed-inhalt .social-preview * { max-width: 100% !important; min-width: 0 !important; }
.feed-inhalt .social-preview iframe { width: 100% !important; }
.feed-inhalt .social-preview .video-container {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
    background: #000; border-radius: 6px;
}
.feed-inhalt .social-preview .video-container iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.feed-inhalt .social-preview-footer {
    padding: 2px 6px; background: transparent; font-size: 0.6rem; color: #888;
    display: flex; align-items: center; gap: 4px;
}
.feed-inhalt .social-preview-wrapper { width: 100%; border-radius: 6px; overflow: hidden; }
.feed-inhalt .social-preview-wrapper iframe { width: 100% !important; max-height: 350px !important; }

.feed-inhalt .artikel-snippet {
    max-width: 100% !important; margin: 4px 0 !important;
    border: 1px dashed #94a3b8; border-left-width: 4px; border-radius: 0 8px 8px 0;
    overflow: hidden; background: #f4f6f8; padding: 0.7rem 0.9rem;
}
.feed-inhalt .artikel-snippet-badge {
    display: flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; color: #475569; margin-bottom: 6px;
}
.feed-inhalt .artikel-snippet-ausschnitt { font-size: 0.9rem; color: #333; line-height: 1.5; font-style: italic; }
.feed-inhalt .artikel-snippet-quelle {
    display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #475569;
    margin-top: 8px; text-decoration: none; font-weight: 600;
}
.feed-inhalt .artikel-snippet-quelle:hover { text-decoration: underline; }
.feed-inhalt .artikel-snippet-quelle img { border-radius: 3px; }

.feed-inhalt .spieler-karte {
    display: flex; align-items: center; gap: 0.5rem; width: fit-content; max-width: 260px !important;
    margin: 4px 0 !important; padding: 0.4rem 0.6rem;
    background: linear-gradient(135deg, #fef8f8, #faf3f3); border: 1px solid rgba(167, 9, 9, 0.18);
    border-radius: 8px; text-decoration: none; color: inherit;
}
.feed-inhalt .spieler-karte:hover { border-color: #a70909; }
.feed-inhalt .spieler-karte-foto,
.feed-inhalt .spieler-karte-foto-platz {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f0e6e6;
}
.feed-inhalt .spieler-karte-foto-platz { display: flex; align-items: center; justify-content: center; color: #c9a5a5; font-size: 0.8rem; }
.feed-inhalt .spieler-karte-info { flex: 1; min-width: 0; }
.feed-inhalt .spieler-karte-name { font-size: 0.82rem; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-inhalt .spieler-karte-meta { display: flex; align-items: center; gap: 4px; font-size: 0.68rem; color: #888; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-inhalt .spieler-karte-vereinslogo { width: 12px; height: 12px; object-fit: contain; flex-shrink: 0; }
.feed-inhalt .spieler-karte-marktwert { text-align: center; padding: 0.15rem 0.4rem; background: #f4faf6; border-radius: 6px; flex-shrink: 0; }
.feed-inhalt .spieler-karte-marktwert .wert { display: block; font-size: 0.68rem; font-weight: 800; color: #1a8a3d; white-space: nowrap; }
.feed-inhalt .spieler-karte-marktwert .label { display: block; font-size: 0.5rem; color: #888; text-transform: uppercase; }
.feed-inhalt .spieler-karte i.fa-chevron-right { color: #d5c5c5; font-size: 0.7rem; flex-shrink: 0; }
.feed-inhalt .spieler-karte-fehlt { display: block; padding: 0.6rem 0.9rem; color: #999; font-style: italic; font-size: 0.85rem; }

.feed-inhalt .artikel-teilen-karte {
    display: block; max-width: 420px !important; margin: 4px 0 !important;
    background: linear-gradient(135deg, #fef8f8, #faf3f3); border: 1px solid rgba(167, 9, 9, 0.18);
    border-radius: 10px; overflow: hidden;
}
.feed-inhalt .artikel-teilen-karte-hauptlink { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; text-decoration: none; color: inherit; }
.feed-inhalt .artikel-teilen-karte-quelle {
    display: flex; align-items: center; gap: 6px; padding: 0.4rem 0.8rem; border-top: 1px solid rgba(167, 9, 9, 0.14);
    font-size: 0.7rem; color: #a70909; text-decoration: none; font-weight: 600;
}
.feed-inhalt .artikel-teilen-karte-quelle:hover { text-decoration: underline; }
.feed-inhalt .artikel-teilen-karte-quelle img { border-radius: 3px; }
.feed-inhalt .artikel-teilen-karte-bild,
.feed-inhalt .artikel-teilen-karte-bild-platz { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 10px 2px rgba(167, 9, 9, 0.4); }
.feed-inhalt .artikel-teilen-karte-bild-platz { display: flex; align-items: center; justify-content: center; background: #f0e6e6; color: #c9a5a5; font-size: 1.1rem; }
.feed-inhalt .artikel-teilen-karte-info { flex: 1; min-width: 0; }
.feed-inhalt .artikel-teilen-karte-badge { display: flex; align-items: center; gap: 4px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #a70909; margin-bottom: 2px; }
.feed-inhalt .artikel-teilen-karte-titel { font-size: 0.85rem; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-inhalt .artikel-teilen-karte-anriss { font-size: 0.72rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.feed-inhalt .artikel-teilen-karte-fehlt { display: block; padding: 0.6rem 0.9rem; color: #999; font-style: italic; font-size: 0.85rem; }
.feed-inhalt .artikel-teilen-karte-aktionen { display: flex; gap: 6px; padding: 0 0.8rem 0.55rem; }
.feed-inhalt .artikel-teilen-karte-aktion-btn { display: inline-flex; align-items: center; gap: 5px; background: #f6ebeb; color: #a70909; border: none; padding: 4px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s; }
.feed-inhalt .artikel-teilen-karte-aktion-btn:hover { background: #eedcdc; }

.feed-inhalt .bookmark-teilen-embed {
    display: block; max-width: 420px !important; margin: 4px 0 !important;
    background: linear-gradient(135deg, #fef8f8, #faf3f3); border: 1px solid rgba(167, 9, 9, 0.18);
    border-radius: 10px; overflow: hidden; padding: 0.5rem 0.5rem 0;
}
.feed-inhalt .bookmark-teilen-embed .image-wrapper,
.feed-inhalt .bookmark-teilen-embed .eplayer,
.feed-inhalt .bookmark-teilen-embed .rwe-video-wrapper,
.feed-inhalt .bookmark-teilen-embed .rwe-pdf-wrapper { margin: 0 !important; }
.feed-inhalt .bookmark-teilen-herkunft { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 0.5rem 0.2rem; font-size: 0.72rem; color: #888; }
.feed-inhalt .bookmark-teilen-herkunft i { color: #a70909; margin-right: 2px; }
.feed-inhalt .bookmark-teilen-herkunft a { color: #a70909 !important; font-weight: 600; text-decoration: none; }
.feed-inhalt .bookmark-teilen-herkunft a:hover { text-decoration: underline; }
.feed-inhalt .bookmark-teilen-fehlt {
    padding: 0.6rem 0.9rem; color: #999; font-style: italic; font-size: 0.85rem;
    background: linear-gradient(135deg, #fef8f8, #faf3f3); border: 1px solid rgba(167, 9, 9, 0.18); border-radius: 10px;
}

/* Transfergerücht-Teilen-Karte ([geruecht]id[/geruecht]) - bewusst im
   selben kompakten Stil wie .spieler-karte, siehe thema/inhalt.php für
   dieselben Regeln (NICHT die große Karte des Liga-/Vereins-Gerüchte-Tabs). */
.feed-inhalt .geruecht-teilen-karte {
    display: block; width: 100%; max-width: 320px !important;
    margin: 6px 0 !important; padding: 0;
    background: #fff; border: 1px solid #eadcdc;
    border-radius: 10px; text-decoration: none !important; color: inherit; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.feed-inhalt .geruecht-teilen-karte:hover { border-color: #a70909; box-shadow: 0 4px 14px rgba(167,9,9,0.16); transform: translateY(-1px); }
.feed-inhalt .geruecht-teilen-karte.ist-rwe { border-color: #a70909; border-width: 2px; }
.feed-inhalt .geruecht-teilen-karte-kopf { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; background: linear-gradient(to right, #993234, #a70909); }
.feed-inhalt .geruecht-teilen-karte-body { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.7rem; }
.feed-inhalt .geruecht-teilen-karte-foto,
.feed-inhalt .geruecht-teilen-karte-foto-platz { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f0e6e6; }
.feed-inhalt .geruecht-teilen-karte-foto-platz { display: flex; align-items: center; justify-content: center; color: #c9a5a5; font-size: 0.85rem; }
.feed-inhalt .geruecht-teilen-karte-info { flex: 1; min-width: 0; }
.feed-inhalt .geruecht-teilen-karte-name { font-size: 0.84rem; font-weight: 700; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-inhalt .geruecht-teilen-karte-meta { display: flex; align-items: center; gap: 4px; font-size: 0.66rem; color: #888; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-inhalt .geruecht-teilen-karte-meta i.fa-long-arrow-alt-right { font-size: 0.6rem; flex-shrink: 0; }
.feed-inhalt .geruecht-teilen-karte-vereinslogo { width: 12px; height: 12px; object-fit: contain; flex-shrink: 0; }
.feed-inhalt .geruecht-teilen-karte-prozent { text-align: center; padding: 0.18rem 0.45rem; background: #f4faf6; border-radius: 8px; flex-shrink: 0; }
.feed-inhalt .geruecht-teilen-karte-prozent.trend-auf { background: #eafaf0; }
.feed-inhalt .geruecht-teilen-karte-prozent.trend-ab { background: #fdedee; }
.feed-inhalt .geruecht-teilen-karte-prozent .wert { display: block; font-size: 0.7rem; font-weight: 800; color: #a70909; white-space: nowrap; }
.feed-inhalt .geruecht-teilen-karte-prozent .wert i.fa-arrow-up { color: #1a8a3d; }
.feed-inhalt .geruecht-teilen-karte-prozent .wert i.fa-arrow-down { color: #b91c1c; }
.feed-inhalt .geruecht-teilen-karte-prozent .label { display: block; font-size: 0.5rem; color: #888; text-transform: uppercase; }
.feed-inhalt .geruecht-teilen-karte-chevron { color: #d5c5c5; font-size: 0.72rem; flex-shrink: 0; }
.feed-inhalt .geruecht-teilen-karte-fehlt { display: block; padding: 0.6rem 0.9rem; color: #999; font-style: italic; font-size: 0.85rem; }
.feed-inhalt .geruecht-teilen-karte.ist-fix .geruecht-teilen-karte-kopf { background: linear-gradient(to right, #16612f, #1c7a3e); }
.feed-inhalt .geruecht-teilen-karte.ist-gescheitert .geruecht-teilen-karte-kopf { background: linear-gradient(to right, #6b6b6b, #888); }
.feed-inhalt .geruecht-teilen-karte-status { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; }
.feed-inhalt .geruecht-teilen-karte-status img { width: 28px; height: 28px; object-fit: contain; }
.feed-inhalt .geruecht-teilen-karte-status .wert { font-size: 0.66rem; font-weight: 800; }
.feed-inhalt .geruecht-teilen-karte-status.ist-fix .wert { color: #1c7a3e; }
.feed-inhalt .geruecht-teilen-karte-status.ist-gescheitert .wert { color: #888; }

/* Anhaenge: Vorschaubilder (nicht klickbar - die Karte fuehrt zum Beitrag) */
.feed-medien { display: grid; gap: 6px; margin-top: 6px; }
.feed-medien-1 { grid-template-columns: 1fr; }
.feed-medien-2 { grid-template-columns: 1fr 1fr; }
.feed-medien-3 { grid-template-columns: repeat(3, 1fr); }
.feed-medium { position: relative; border-radius: 10px; overflow: hidden; background: #2b2f38; display: flex; align-items: center; justify-content: center; }
.feed-medien-1 .feed-medium { height: 280px; }
.feed-medien-2 .feed-medium { aspect-ratio: 4 / 3; }
.feed-medien-3 .feed-medium { aspect-ratio: 1 / 1; }
.feed-medium img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-medium-audio, .feed-medium-pdf { background: #f4e9e9; aspect-ratio: auto !important; min-height: 54px; }
.feed-datei { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: #993234; padding: 14px; }
.feed-play { position: absolute; width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; padding-left: 3px; border: 2px solid rgba(255,255,255,.85); }
.feed-play-yt { background: rgba(200,0,0,.85); border-color: #fff; }
.feed-medium-social { background: radial-gradient(circle at 30% 20%, #5a0b0b, #1c0505 70%); }
.feed-social-badge { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; display: inline-flex; gap: 5px; align-items: center; }
.feed-mehr { position: absolute; inset: 0; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; }

/* Logos im Feed */
.feed-logos { display: inline-flex; gap: 5px; align-items: center; flex-shrink: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.feed-logos img { height: 24px; width: auto; max-width: 32px; object-fit: contain; }

/* ================================================================
   POPUP / MODAL
   Die generische Modal-Hülle (.forum-modal-overlay/.forum-modal/…) sitzt
   jetzt in system/header.php, da sie site-weit gebraucht wird (User-Online-
   Modal läuft jetzt über den Header). Header wird VOR diesem <style>-Block
   eingebunden, gilt also auch für die beiden Modals hier (Forum-Auswahl,
   Feed-Filter).
   ================================================================ */
.forum-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.forum-card {
    display:flex; flex-direction:column; align-items:center;
    padding:14px 10px; border:2px solid #e5dfdf; border-radius:10px;
    cursor:pointer; transition:all 0.2s ease; background:#faf8f8;
    text-decoration:none; text-align:center;
}
.forum-card:hover { border-color:#a70909; background:#fef5f5; transform:translateY(-2px); box-shadow:0 4px 16px rgba(167,9,9,0.12); }
.forum-card img { width:48px; height:48px; object-fit:contain; border-radius:8px; margin-bottom:6px; }
.forum-card .forum-name     { font-weight:600; font-size:0.85rem; color:#4a3a3a; line-height:1.2; }
.forum-card .forum-category { font-size:0.65rem; color:#b0a8a8; margin-top:2px; }

/* ================================================================
   FILTER-POPUP "UNGELESENE INHALTE" - ROT-WEISS-STYLE
   ================================================================ */
.rwe-modal-header {
    background: linear-gradient(to right, #993234, #b03638) !important;
    border-bottom: 1px solid #7a2628 !important;
}
.rwe-modal-header h3 { color:#fff; }
.rwe-modal-header h3 i { color:#fff; }
.rwe-modal-close { color:rgba(255,255,255,0.75) !important; }
.rwe-modal-close:hover { color:#fff !important; }

.rwe-filter-section-title { margin:0 0 8px 0; font-size:0.9rem; font-weight:700; color:#4a3a3a; }
.rwe-filter-hint { margin:0 0 12px 0; font-size:0.82rem; color:#6b7280; }
.rwe-filter-scroll-box {
    max-height:220px; overflow-y:auto; border:1px solid #e5dfdf; border-radius:10px;
    padding:10px 14px; margin-bottom:18px; background:#faf8f8;
}
.rwe-filter-kategorie { font-size:0.75rem; font-weight:700; text-transform:uppercase; color:#a70909; margin:12px 0 6px 0; }
.rwe-filter-kategorie:first-child { margin-top:0; }
.rwe-filter-checkbox-zeile { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:0.9rem; cursor:pointer; color:#4a3a3a; }
.rwe-filter-checkbox-zeile input[type="checkbox"],
.rwe-filter-checkbox-zeile input[type="radio"] { accent-color:#a70909; width:16px; height:16px; flex-shrink:0; }

.rwe-filter-speichern-btn {
    width:100%; justify-content:center; display:flex; align-items:center; gap:8px;
    padding:12px; border-radius:10px; border:none; cursor:pointer;
    background: linear-gradient(to right, #993234, #b03638); color:#fff;
    font-weight:700; font-size:0.95rem; margin-top:6px;
    transition: filter 0.15s;
}
.rwe-filter-speichern-btn:hover { filter:brightness(1.08); }
.rwe-filter-speichern-btn:disabled { opacity:0.6; cursor:default; }

.rwe-filter-suche { position:relative; margin-bottom:18px; }
.rwe-filter-suche-input {
    width:100%; box-sizing:border-box; padding:9px 12px; border:1px solid #e5dfdf; border-radius:8px;
    font-size:0.88rem; color:#4a3a3a;
}
.rwe-filter-suche-input:focus { outline:none; border-color:#a70909; }
.rwe-filter-suche-ergebnisse {
    position:absolute; top:100%; left:0; right:0; z-index:10;
    background:#fff; border:1px solid #e5dfdf; border-radius:8px; margin-top:4px;
    max-height:220px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.12); display:none;
}
.rwe-filter-suche-ergebnisse.active { display:block; }
.rwe-filter-suche-treffer {
    display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; font-size:0.85rem; color:#4a3a3a;
}
.rwe-filter-suche-treffer:hover { background:#fef5f5; }
.rwe-filter-suche-treffer img { width:22px; height:22px; object-fit:contain; border-radius:4px; }
.rwe-filter-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.rwe-filter-chip {
    display:inline-flex; align-items:center; gap:6px; background:#fef5f5; border:1px solid #f2c4c5;
    color:#a70909; font-size:0.8rem; font-weight:600; padding:4px 6px 4px 10px; border-radius:20px;
}
.rwe-filter-chip button {
    background:none; border:none; color:#a70909; cursor:pointer; font-size:0.9rem; line-height:1; padding:2px;
}

/* Toggle-Zeilen wie in profil.php ("wie die anderen") */
.push-toggle-zeile {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    background: #faf8f8; border: 1px solid #e5dfdf; border-radius: 8px;
    padding: 0.55rem 0.8rem; font-size: 0.88rem; color: #4a3a3a; cursor: pointer;
}
.push-toggle-zeile > span:first-child { display: flex; align-items: center; gap: 0.5rem; }
.push-toggle-zeile i { color: #a70909; }
.push-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.push-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.push-switch-slider {
    position: absolute; inset: 0; background: #cbd5e0; border-radius: 22px; transition: background .2s; cursor: pointer;
}
.push-switch-slider::before {
    content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform .2s;
}
.push-switch input:checked + .push-switch-slider { background: #28a745; }
.push-switch input:checked + .push-switch-slider::before { transform: translateX(16px); }

/* ================================================================
   MOBILE
   ================================================================ */
@media (max-width: 768px) {
    .index-container { padding: 0 8px; }
    .themen-col-header { display: none; }

    /* Themen-Zeile: Nutzer-Feedback 2026-08-24 ("mehr einbauen, aber in einer
       Reihe bleiben") - vorher wurden auf dem Handy Avatar, Ungelesen-Zahl,
       Autor und Antwortenzahl komplett ausgeblendet (nur nackter Titel
       blieb). Jetzt Avatar (mit Ungelesen-Punkt) + Titel + Ungelesen-Zahl in
       EINER Zeile statt mehrzeilig gestapelt. Seitenzahlen (Nutzer-Feedback:
       "müssen immer sichtbar sein, mit einem Klick drauf") kommen als
       kompakte zweite Zeile direkt darunter zurueck - Klick auf eine
       Seitenzahl springt gezielt dorthin (event.stopPropagation() verhindert
       den Zeilen-Klick), Klick auf die Zeile selbst bleibt wie gewohnt der
       Sprung zum ersten ungelesenen Beitrag. Autor/Antwortenzahl bleiben aus
       Platzgruenden weiterhin ausgeblendet, das Thema oeffnen zeigt sie
       ohnehin sofort. */
    .thema-row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px; min-height: 0;
    }
    .thema-meta,
    .thema-count,
    .thema-last {
        display: none;
    }
    .thema-avatar {
        display: flex;
        width: 32px; height: 32px;
        margin-top: 2px;
    }
    .thema-avatar img { width: 32px; height: 32px; }
    .thema-main {
        flex: 1 1 auto; min-width: 0;
        flex-direction: column;
        gap: 3px;
    }
    .thema-main-top {
        flex-wrap: nowrap; min-width: 0;
    }
    .thema-titel-link {
        flex: 1 1 auto; min-width: 0;
        font-size: 13px; white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis;
    }
    .thema-logos { flex-shrink: 0; }
    .unread-badge-inline { display: inline-flex; flex-shrink: 0; }
    .thema-pin-icon { display: inline-flex; flex-shrink: 0; }
    .thema-pages { flex-wrap: nowrap; margin-top: 0; }
    #feed-block .feed-wrap { padding: 8px; }
    .feed-card { padding: 7px 9px; gap: 7px; border-radius: 10px; }
    .feed-stretch { border-radius: 10px; }
    .feed-avatar { width: 24px; height: 24px; font-size: 9px; }
    .feed-autor { font-size: 12px; max-width: 34%; }
    .feed-zeit { font-size: 10px; }
    .feed-antworten { font-size: 10px; padding: 0; }
    .feed-thema { font-size: 14px; gap: 6px; }
    .feed-logos { padding: 0; gap: 4px; }
    .feed-logos img { height: 22px; max-width: 28px; }
    .feed-inhalt { font-size: 12.5px; max-height: 4.2em; }
    .feed-forum { font-size: 9.5px; padding: 1px 6px; }
    .feed-kopf { flex-wrap: wrap; row-gap: 1px; }
    .feed-erweitert { font-size: 11.5px; padding: 0; order: 5; flex: 1 1 100%; }
    .feed-erweitert-logos img { height: 15px; max-width: 20px; }
    .feed-medien-1 .feed-medium { height: 190px; }
    .feed-play { width: 40px; height: 40px; font-size: 15px; }
    input, select, textarea, button { font-size: 16px !important; }
}
@media (max-width: 480px) {
    .forum-grid { grid-template-columns:1fr 1fr; gap:8px; }
    .forum-card { padding:10px 6px; }
    .forum-card img { width:36px; height:36px; }
    .forum-card .forum-name { font-size:0.75rem; }
}

/* Button "Neueste Themen (7 Tage)" im Kopf von Ungelesene Inhalte - bewusst anders als die runden Icons, ganz vorne */
.block-header a.btn-sieben-tage,.index-container .block-header a.btn-sieben-tage:link,.index-container .block-header a.btn-sieben-tage:visited{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#a70909 !important;font-weight:800;font-size:12px;line-height:1;padding:6px 12px;border-radius:999px;text-decoration:none !important;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 2px 10px rgba(0,0,0,.25);white-space:nowrap;transition:transform .15s,box-shadow .15s}
.block-header a.btn-sieben-tage:hover{transform:translateY(-1px);box-shadow:0 0 0 2px rgba(255,255,255,.6),0 4px 14px rgba(0,0,0,.3)}
.block-header a.btn-sieben-tage i{font-size:12px}