/* --- BRANIBEER GLOBAL DESIGN SYSTEM --- */

:root {
    --bb-red: #f62a00;
    --bb-petrol: #1e656d;
    --bb-glass: rgba(10, 10, 10, 0.4);
    --bb-blur: blur(20px) saturate(170%);
}

/* 1. HINTERGRUND (HTML-LEINWAND) */
html { background-color: #000 !important; }

html::before {
    content: "" !important;
    position: fixed !important;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-image: url('https://branibeer.com/wp-content/uploads/branibeer-social/brani-beer-hintergrundbild.png') !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    z-index: -9999 !important;
    display: block !important;
}

/* 2. TRANSPARENZ-REFORM (Alle Theme-Layer auf Durchzug) */
html, body, #page, #wrapper, .site, #content, .site-content, .buddyx-container, .container,
#primary, main, #main, .site-main, article, .ast-container, .site-layout-container, 
.content-area, #buddypress, .hfeed, .site-content-contain, .site-header-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. DIE GROSSEN GLAS-CONTAINER (Korrektur für Karten-Umschließung) */
.bb-expert-single-container, .branibeer-profile-wrapper, article.post, .profile-content,
#buddypress #item-header, #buddypress #item-body, #main .container:not(.bb-member-card), .entry-content {
    background: var(--bb-glass) !important;
    backdrop-filter: var(--bb-blur) !important;
    -webkit-backdrop-filter: var(--bb-blur) !important;
    border: 1px solid var(--bb-petrol) !important;
    border-radius: 20px;
    padding: 40px !important;
    margin: 40px auto !important;
    max-width: 1600px !important;
    width: 95% !important;

    /* DIESE ZEILEN FIXEN DAS ÜBERSTEHEN: */
    height: auto !important; 
    min-height: min-content !important; /* Zwingt ihn, mindestens so groß wie der Inhalt zu sein */
    display: flow-root !important; /* Erzeugt einen neuen Block-Formatierungskontext */
    overflow: visible !important; 
    padding-bottom: 120px !important; /* Viel Puffer unten für die letzte Kartenreihe */
    
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    clear: both !important; /* Verhindert, dass gefloatete Elemente stören */
}

/* 4. MITGLIEDER-KARTEN (Bento-Elemente) */
#buddypress ul.item-list li, .bb-member-card, .activity-item {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--bb-petrol) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
    color: #fff !important;
    list-style: none !important;
}

/* 5. NAVIGATIONSPILLE (Globaler Header) */
.site-header, #masthead {
    background: var(--bb-glass) !important;
    backdrop-filter: var(--bb-blur) !important;
    -webkit-backdrop-filter: var(--bb-blur) !important;
    border: 1px solid var(--bb-petrol) !important;
    border-radius: 50px !important;
    margin: 20px auto !important;
    width: 90% !important;
    max-width: 1600px !important;
    padding: 10px 0 !important;
    display: flex !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important;
    z-index: 9999 !important;
}

.site-header:hover { border-color: var(--bb-red) !important; transform: scale(1.01) !important; }

/* 6. HEADER STRUKTUR (Branding links, Navigation rechts) */
header#masthead.site-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 60px !important;
}

/* Avatar & Name innerhalb des Headers radikal entfernen */
#masthead .bp-user, 
#masthead .user-wrap, 
#masthead .header-profile-infos,
#masthead img.avatar,
#masthead .buddyx-header-profile, 
#masthead .header-account-settings {
    display: none !important;
}

/* Branding-Bereich (Links) */
.site-branding {
    display: flex !important;
    flex: 0 0 auto !important; /* Verhindert das Ausbreiten auf 1341px */
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-branding-inner {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
}

.site-title {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Schiebt nur das Desktop-Menü nach rechts */
.primary-menu-container.buddyx-desktop-menu {
    display: inline-flex !important;
    vertical-align: middle !important;
    margin-left: auto !important;
    flex: 0 1 auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#site-navigation.main-navigation {
    display: flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important; /* Drückt die Navi nach rechts */
    width: auto !important;
}

#site-navigation ul li a {
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* Verhindert die Navigation innerhalb des Branding-Blocks */
.site-branding-inner #site-navigation,
.site-branding #site-navigation {
    display: none !important;
}

/* Deaktiviert den mobilen Menü-Container im Header */
.primary-menu-container.buddy-mobile-menu {
    display: none !important;
}

/* Neutralisiert den inneren Wrapper, der oft den Umbruch erzwingt */
.site-header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

#masthead::before, 
#masthead::after {
    content: none !important;
    display: none !important;
}

/* 7. WEBSITE-TITEL (Weiß glühend) */
.site-title a {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6) !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
}

.site-title a:hover { 
    color: var(--bb-petrol) !important; 
    transform: scale(1.1) !important; 
    text-shadow: 0 0 15px var(--bb-petrol) !important;
}

/* 8. TYPOGRAFIE & SONSTIGES */
body { font-family: 'Inter', sans-serif !important; }
h1, h2, h3, h4, h5, h6 { color: var(--bb-red) !important; }
.entry-title, .page-title { display: none !important; }

/* Buttons */
button, .button, input[type="submit"] {
    background-color: var(--bb-red) !important;
    color: #fff !important;
    border: 1px solid var(--bb-petrol) !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
}

/* --- BRANIBEER FOOTER GLOBAL --- */

/* Gehäuse-Pille */
.site-footer, #colophon {
    background: var(--bb-glass) !important;
    backdrop-filter: var(--bb-blur) !important;
    -webkit-backdrop-filter: var(--bb-blur) !important;
    border: 1px solid var(--bb-petrol) !important;
    border-radius: 50px !important;
    margin: 40px auto 20px auto !important;
    width: 90% !important;
    max-width: 1600px !important;
    padding: 20px 0 !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5) !important;
}

/* Schwarze Balken eliminieren */
.site-footer .site-info, 
.site-footer .footer-bottom,
.site-footer .footer-top {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

/* Footer-Inhalt horizontal ausrichten */
.site-footer .container, 
.site-footer-inner,
.site-info .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 60px !important;
}

/* Footer-Listen (Rechtliches) nebeneinander */
.site-footer ul, 
.site-footer .menu {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important; /* Abstand zwischen den Links */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-footer ul li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important; /* Entfernt eventuelle Trennlinien */
}

/* Verhindert, dass die Links die volle Breite einnehmen */
.site-footer ul li a {
    display: inline-block !important;
    width: auto !important;
    border: none !important;
}

/* Copyright Text Styling */
.site-info-text, .copy-text {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.85rem !important;
}

/* Hover-Effekt für Footer-Links */
.site-footer a {
    color: var(--bb-red) !important;
    transition: 0.3s !important;
}

.site-footer a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px var(--bb-red) !important;
}

/* --- BRANIBEER BENTO GRID SYSTEM --- */

.bb-bento-wrapper {
    width: 90%;
    max-width: 1600px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Abstand zwischen den Reihen */
}

/* Grund-Struktur der Reihen */
.bb-grid-row {
    display: flex !important;
    gap: 25px;
    width: 100%;
}

/* Gemeinsames Design der Boxen */
.bento-box {
    background: var(--bb-glass) !important;
    backdrop-filter: var(--bb-blur) !important;
    -webkit-backdrop-filter: var(--bb-blur) !important;
    border: 1px solid var(--bb-petrol) !important;
    border-radius: 25px !important;
    padding: 35px;
    color: #ffffff;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.bento-box:hover {
    border-color: var(--bb-red) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

/* --- REIHE 1: 8 Einheiten / 4 Einheiten --- */
.row-1 .hero-box {
    flex: 8 !important; /* Nimmt 8 Teile ein */
}

.row-1 .register-box {
    flex: 4 !important; /* Nimmt 4 Teile ein */
}

/* Spezielle Hero-Gestaltung */
.hero-split-view {
    display: flex;
    gap: 30px;
    margin: 30px 0;
    text-align: left;
}

.split-column {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 15px;
}

/* --- REIHE 2: 50/50 Aufteilung --- */
.row-2 .profi-box, 
.row-2 .kunden-box {
    flex: 1 !important; /* Beide exakt gleich breit */
}

/* --- REIHE 3: Absolute Dominanz der News-Box --- */
.row-3 {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    /* ÄNDERUNG: Die Zeile darf nur so hoch wie die News-Box sein */
    grid-template-rows: auto !important; 
    gap: 25px !important;
    align-items: start !important; 
    height: auto !important;
}

/* Linke Box (Feed) - Muss sich der News-Box unterordnen */
.row-3 .feed-box {
    grid-column: span 8 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important; 
    
    /* ÄNDERUNG: Absolute Deckelung auf die News-Höhe */
    max-height: 100% !important; 
    height: 100% !important;
    min-height: 0 !important; 
    
    overflow: hidden !important; 
}

/* Rechte Box (News) - Der alleinige Taktgeber */
.row-3 .news-box {
    grid-column: span 4 !important;
    height: auto !important; /* Text bestimmt die Höhe der gesamten Reihe */
    display: block !important;
}

/* Der grüne Scroll-Inhalt */
.row-3 .feed-box .scroll-content {
    flex: 1 1 0 !important; 
    min-height: 0 !important; /* NEU: Verhindert das Aufdrücken von innen */
    max-height: 100% !important; /* NEU: Bleibt in der Box */
    overflow-y: auto !important; 
    padding-right: 15px;
}

/* Dein grüner (Petrol) Scrollbalken */
.row-3 .feed-box .scroll-content::-webkit-scrollbar {
    width: 8px;
}

.row-3 .feed-box .scroll-content::-webkit-scrollbar-thumb {
    background: var(--bb-petrol) !important;
    border-radius: 10px;
}

.row-3 .feed-box .scroll-content::-webkit-scrollbar-thumb:hover {
    background: var(--bb-red) !important;
}

/* --- INHALTS-STYLING --- */
.text-red { color: var(--bb-red); }

.bb-check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

.bb-check-list li {
    padding-left: 0;
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.bb-btn-main {
    background: var(--bb-red) !important;
    color: #fff !important;
    padding: 12px 25px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    margin-top: auto; /* Schiebt Buttons immer nach unten */
    text-align: center;
    transition: 0.3s;
}

.bb-btn-main:hover {
    background: var(--bb-petrol) !important;
    transform: scale(1.05);
}

/* Scrollbar Design für den Feed */
.scroll-content::-webkit-scrollbar { width: 6px; }
.scroll-content::-webkit-scrollbar-thumb { background: var(--bb-petrol); border-radius: 10px; }

/* Responsive: Auf dem Handy alles untereinander */
@media (max-width: 1024px) {
    .bb-grid-row {
        flex-direction: column !important;
        height: auto !important;
    }
    .row-3 { height: auto; }
    .hero-split-view { flex-direction: column; }
}

/* --- BRANIBEER GLOBAL FORM DESIGN --- */

/* 1. Formular-Container & Überschriften */
.bento-box form, 
.branibeer-form-wrapper {
    background: transparent !important;
}

.bento-box h1, 
.bento-box h2, 
.bento-box h3 {
    color: var(--bb-red) !important; /* Überschriften in Rot */
}

/* 2. Labels (Beschriftungen) */
label, 
.form-label {
    color: var(--bb-red) !important; /* Labels in Weiß */
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* 3. Inputs & Textareas (Glas-Look mit grüner Kante) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
textarea,
select {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: var(--bb-blur) !important;
    -webkit-backdrop-filter: var(--bb-blur) !important;
    border: 2px solid var(--bb-petrol) !important; /* Grüne Kante */
    border-radius: 12px !important;
    color: #ffffff !important;
    padding: 12px 15px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

/* 4. Hover & Focus (Wechsel auf Rot) */
input:hover, 
textarea:hover, 
select:hover {
    border-color: var(--bb-red) !important; /* Hover in Rot */
}

input:focus, 
textarea:focus, 
select:focus {
    border-color: var(--bb-red) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 10px rgba(246, 42, 0, 0.2) !important;
}

/* 5. Buttons & Links */
.bento-box a {
    color: var(--bb-red) !important; /* Links in Rot */
    text-decoration: none !important;
    transition: 0.3s !important;
}

.bento-box a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px var(--bb-red) !important;
}

/* Der Absende-Button */
input[type="submit"],
button[type="submit"],
.bb-btn-main {
    background: var(--bb-red) !important; /* Buttons in Rot */
    color: #ffffff !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    text-transform: uppercase !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background: var(--bb-petrol) !important; /* Button Hover zurück auf Grün */
    transform: translateY(-2px) !important;
}

/* 6. Placeholder */
::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* --- BUTTON-TEXT FIX --- */

/* Erzwingt weiß für alle Texte und Links in Buttons */
.bento-box .bb-btn-main, 
.bento-box input[type="submit"], 
.bento-box button[type="submit"],
.bento-box .bb-btn-main a,
.bento-box button a {
    color: #ffffff !important;
    text-shadow: none !important; /* Kein roter Schatten auf Buttons */
}

/* Verhindert den Hover-Farbwechsel auf dem Button-Text */
.bento-box .bb-btn-main:hover, 
.bento-box input[type="submit"]:hover {
    color: #ffffff !important;
}

/* --- ZENTRIERUNG FÜR LOGIN & REGISTRIERUNG --- */

/* 1. Den Container mittig setzen und Breite deckeln */
.bb-login-container, 
.bb-register-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 60vh !important; /* Gibt dem Formular vertikalen Raum */
    padding: 40px 20px !important;
    width: 100% !important;
}

/* 2. Die Glas-Pille (Das eigentliche Formular) */
.bb-form-glass-wrapper {
    max-width: 500px !important; /* Verhindert zu breite Inputs */
    width: 100% !important;
    background: var(--bb-glass) !important;
    backdrop-filter: var(--bb-blur) !important;
    -webkit-backdrop-filter: var(--bb-blur) !important;
    border: 1px solid var(--bb-petrol) !important;
    border-radius: 30px !important;
    padding: 50px !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.4) !important;
    margin: 0 auto !important;
}

/* 3. Abstände innerhalb des Formulars */
.bb-form-glass-wrapper form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* 4. Überschriften in diesen Containern zentrieren */
.bb-form-glass-wrapper h2, 
.bb-form-glass-wrapper h3,
.bb-form-glass-wrapper .form-title {
    text-align: center !important;
    margin-bottom: 25px !important;
    color: var(--bb-red) !important;
}

/* 5. Spezial-Fix für Buttons in diesen Containern */
.bb-form-glass-wrapper input[type="submit"], 
.bb-form-glass-wrapper button {
    width: 100% !important;
    margin-top: 10px !important;
}

.bb-form-title-login, 
.bb-form-title-reg {
    width: 100% !important;
    max-width: 500px !important; /* Gleiche Breite wie das Formular */
    text-align: center !important;
    margin-bottom: 30px !important; /* Abstand zum Formular darunter */
}

/* Falls es H1 oder H2 Tags innerhalb dieser Titel-Container sind */
.bb-form-title-login h1, 
.bb-form-title-login h2,
.bb-form-title-reg h1, 
.bb-form-title-reg h2 {
    color: var(--bb-red) !important;
    font-size: 2.5rem !important;
    margin: 0 !important;
}

@media (max-width: 600px) {
    .bb-form-title-login h1, 
    .bb-form-title-reg h1 {
        font-size: 1.8rem !important;
    }
    .bb-form-glass-wrapper {
        padding: 30px 20px !important; /* Etwas weniger Innenabstand auf kleinen Handys */
    }
}

/* --- BRANIBEER MEMBER CARDS: EXPERT LOOK --- */

/* 1. Entfernt den Site-Sub-Header komplett */
.site-sub-header, 
.site-sub-header .container {
    display: none !important;
}

/* 2. Das Grid-System (Nebeneinander stehen) */
.branibeer-member-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 30px !important;
    padding: 20px !important;
}

/* 3. Die Karte (Glas-Look & Struktur) */
.member-card {
    background: transparent !important;
    padding: 0 !important;
}

.member-card-content {
    background: var(--bb-glass) !important;
    backdrop-filter: var(--bb-blur) !important;
    -webkit-backdrop-filter: var(--bb-blur) !important;
    border: 1px solid rgba(30, 101, 109, 0.3) !important; /* Dezenter Petrol-Rand */
    border-radius: 0 0 25px 25px !important;
    border-top: none !important;
    padding: 0 0 20px 0 !important;
    transition: 0.3s ease-in-out !important;
    overflow: visible !important;
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.member-card-content:hover {
    border-color: var(--bb-red) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;
}

/* 4. Canvas / Banner (Hintergrundbild oben) */
.member-card-banner {
    height: 130px !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 23px 23px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* 5. Avatar & Status-Ring (Korrektur für die Leuchtfarben) */
img.member-card-avatar {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    margin: -50px auto 15px auto !important;
    display: block !important;
    z-index: 10 !important;
    position: relative !important;
    background: #111 !important;
    /* Wir starten mit einem transparenten oder neutralen Rand */
    border: 4px solid rgba(30, 101, 109, 0.5) !important; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* --- STATUS LOGIK --- */

/* ONLINE: Knallgrün und pulsierend */
img.member-card-avatar.status-online {
    border-color: #00ff00 !important; /* Erzwingt das helle Grün */
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6) !important;
    animation: bb-avatar-pulse 2s infinite !important;
}

/* OFFLINE: Brani-Rot (Statisch) */
img.member-card-avatar.status-offline {
    border-color: var(--bb-red) !important; /* Erzwingt dein Rot */
    box-shadow: 0 0 10px rgba(246, 42, 0, 0.2) !important;
    animation: none !important; /* Sicherstellen, dass nichts pulsiert */
}

/* Die Animation für den grünen Ring */
@keyframes bb-avatar-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
        border-color: #00ff00;
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
        border-color: #00ff00;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
        border-color: #00ff00;
    }
}

/* 6. Texte & Inhalte */
.member-card-name a {
    color: var(--bb-red) !important;
    font-weight: 700 !important;
    font-size: 1.2rem;
    display: block;
    text-decoration: none;
}

.member-card-job, 
.member-card-company {
    color: #ffffff !important;
    font-size: 0.85rem;
    opacity: 0.8;
    margin: 2px 0;
}

/* 7. Buttons (Actions) */
.member-card-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 20px 20px 20px !important;
    margin-top: auto !important; /* Drückt Buttons nach unten */
}

.button-view-profile, 
.follow-btn, 
.unfollow-btn {
    flex: 1 !important;
    white-space: nowrap !important;
    border-radius: 12px !important;
    padding: 10px 5px !important;
    text-transform: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    background: var(--bb-red) !important;
    color: white !important;
    font-weight: 600;
}

.button-view-profile:hover, 
.follow-btn:hover {
    background: var(--bb-petrol) !important;
}

/* --- BRANIBEER PROFILE PAGE: EXPERT GLASS DESIGN --- */

/* Banner exakt an die Container-Breite anpassen */
.bb-profile-header-banner {
    height: 300px !important; /* Gewünschte Höhe */
    width: 100% !important;
    max-width: 1600px !important; /* Symmetrie zu den Containern darunter */
    margin: 0 auto !important; /* Zentriert den Banner */
    background-size: cover !important;
    background-position: center !important;
    border-radius: 20px !important; /* Rundherum abgerundet */
    position: relative !important; /* Wichtig für die absolute Positionierung der Buttons */
    overflow: hidden !important; /* Hält alles innerhalb der Rundung */
}

/* Der Container darunter muss die gleiche max-width haben */
.bb-profile-content-container {
    max-width: 1600px !important;
    margin: 20px auto 40px auto !important;
    padding: 0 !important; /* Padding entfernen für bündigen Abschluss */
    display: flex !important;
    gap: 25px !important;
}

.bb-profile-sidebar {
    background: var(--bb-glass) !important;
    backdrop-filter: var(--bb-blur) !important;
    -webkit-backdrop-filter: var(--bb-blur) !important;
    border: 1px solid var(--bb-petrol) !important;
    border-radius: 20px !important;
    padding: 30px 20px !important;
    width: 300px !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
    text-align: center;
    margin-top: 0 !important;
    border-top: none !important;
}

/* 2. Großer Avatar mit Status-Ring */
.bb-profile-avatar-wrap {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 20px auto;
}

.bb-profile-avatar-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 5px solid var(--bb-petrol) !important;
    transition: all 0.4s ease !important;
}

/* Status: Online Pulsierend */
.bb-profile-avatar-wrap.is-online img {
    border-color: #00ff00 !important;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5) !important;
    animation: bb-avatar-pulse 2s infinite !important;
}

/* Status: Offline Rot */
.bb-profile-avatar-wrap.is-offline img {
    border-color: var(--bb-red) !important;
}

/* 3. Geschäftliche Angaben (Accordion-Stil) */
.bb-profile-details {
    margin-top: 25px;
    text-align: left;
}

.bb-profile-details summary {
    color: var(--bb-red) !important;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.bb-profile-details summary::-webkit-details-marker { display: none; }

.bb-profile-details[open] summary { border-bottom: none; }

.bb-profile-details p, .bb-profile-details div {
    padding: 10px 0;
    font-size: 0.85rem;
    line-height: 1.5;
    opacity: 0.9;
}

/* 4. Hauptbereich & Tab-Navigation */
.bb-profile-main {
    flex-grow: 1 !important;
    background: var(--bb-glass) !important;
    backdrop-filter: var(--bb-blur) !important;
    border: 1px solid var(--bb-petrol) !important;
    border-radius: 20px !important;
    padding: 25px !important;
}

.bb-tab-btn.active {
    background: var(--bb-red) !important;
    border-color: var(--bb-red) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(246, 42, 0, 0.3) !important;
}

.bb-profile-tabs-nav {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 25px !important;
    border: none !important;
}

.bb-tab-btn {
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    cursor: pointer;
    transition: 0.3s !important;
}

.bb-tab-btn.active, .bb-tab-btn:hover {
    background: var(--bb-red) !important;
    border-color: var(--bb-red) !important;
}

/* 5. Beitrags-Editor (Glaslook & Lesbarkeit) */
.bb-post-creator {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid var(--bb-petrol) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
}

.bb-post-creator input, .bb-post-creator textarea {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px !important;
    width: 100% !important;
}

.bb-post-creator input::placeholder, .bb-post-creator textarea::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

/* 6. Activity Stream (Beitragskarten) */
/* Titel: Grün, Hover: Rot */
.bb-activity-title, .bb-activity-title a {
    color: var(--bb-red) !important;
    transition: 0.3s !important;
}

/* Beitrags-Text in Weiß */
.bb-activity-text {
    color: #ffffff !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* Kontakt-Anfragen Textgröße */
.bb-contact-request-item {
    font-size: 1rem !important; /* Größer für Lesbarkeit */
    padding: 15px !important;
}

/* 7. Canvas Header Buttons */


.bb-header-actions {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 20;
}

.bb-header-actions .button {
    background: var(--bb-red) !important;
    color: #fff !important;
    border-radius: 10px !important;
    border: none !important;
    padding: 8px 15px !important;
    font-size: 0.8rem !important;
}

/* Gemeinsamer Stil für beide Buttons */
.bb-header-actions .button, 
.bb-profile-header-banner .button-action {
    background: var(--bb-red) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    transition: background 0.3s ease !important;
    position: absolute !important;
    z-index: 20 !important;
    display: inline-block !important;
}

/* Hover-Effekt: GRÜN */
.bb-header-actions .button:hover, 
.bb-profile-header-banner .button-action:hover {
    background: #00ff00 !important; /* Knalliges Grün für den Kontrast */
    color: #000000 !important; /* Schwarze Schrift auf grünem Grund für bessere Lesbarkeit */
}

/* Accordion Header & Animation */
.bb-accordion-header {
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 12px 15px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    border: 1px solid rgba(30, 101, 109, 0.3) !important;
    display: flex;
    justify-content: space-between;
}

/* Versteckt den Content standardmäßig */
.bb-accordion-content {
    display: none; /* Wird per JS/Klasse auf block gesetzt */
    padding: 15px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 0 0 10px 10px !important;
}

/* Falls dein JS die Klasse 'active' nutzt */
.bb-accordion-item.active .bb-accordion-content {
    display: block !important;
}

/* Stats schöner anordnen */
.bb-profile-stats {
    display: flex !important;
    justify-content: space-around !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.bb-stat-item {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--bb-petrol) !important;
}

/* Folgt-Tab: Grid & Karten wie auf Mitgliederseite */
#bb-tab-following {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
}

#bb-tab-following .member-card-content {
    border-radius: 0 0 20px 20px !important; /* Gleiches Prinzip wie auf Mitgliederseite */
}

/* Fix für die Follower-Karte im Tab */
#bb-tab-following .member-card {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-width: 320px !important; /* Begrenzt die Breite, damit sie nicht reißt */
    margin: 0 auto !important;
    overflow: hidden !important;
}

#bb-tab-following .member-card-content {
    flex-grow: 1 !important;
    padding: 20px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 0 0 20px 20px !important;
}

/* Medien-Tab: Alle Links Rot */
#bb-tab-media a {
    color: var(--bb-red) !important;
}

/* Einstellungen: Konto löschen auf Grau */
.bb-account-delete-btn, .delete-account-button {
    background: #555555 !important;
    color: #ffffff !important;
    border: none !important;
}

.bb-account-delete-btn:hover {
    background: #333333 !important;
}

/* 1. Das Grid NUR aktivieren, wenn der Tab NICHT versteckt ist */
#bb-tab-following:not([style*="display: none"]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Absolute Sicherheit: Wenn das System 'display: none' setzt, MUSS es weg sein */
#bb-tab-following[style*="display: none"] {
    display: none !important;
}

/* 3. Falls die Karte in anderen Tabs als 'Geist' erscheint, erzwingen wir dort Ruhe */
#bb-tab-activity:not([style*="display: none"]) ~ #bb-tab-following,
#bb-tab-posts:not([style*="display: none"]) ~ #bb-tab-following {
    display: none !important;
}

/* 1. Button in Grau mit weißer Schrift */
.bb-btn-danger-action, 
.bb-btn-danger-action:hover, 
.bb-btn-danger-action:active, 
.bb-btn-danger-action:focus {
    background: #555555 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important; /* Verhindert das typische "Hüpfen" beim Hover */
    transition: none !important;
    cursor: default !important;
}

/* 2. Kontakt-Policy Lesbarkeit erhöhen */
.bb-contact-policy, 
.bb-contact-policy p, 
.bb-contact-policy div {
    font-size: 1.1rem !important; /* Deutlich größer */
    line-height: 1.6 !important;
    color: #ffffff !important;
    padding: 10px 0 !important;
}

/* Schriftgröße und Sichtbarkeit für Kontakt-Optionen */
.bb-contact-policy, 
select[name="bb_contact_policy"],
.bb-input-field {
    font-size: 1.1rem !important;
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.7) !important; /* Dunkler Hintergrund für Kontrast */
    border: 1px solid var(--bb-petrol) !important;
    padding: 8px !important;
    border-radius: 8px !important;
    appearance: none; /* Entfernt Standard-Styling */
}

/* Fix für die Optionen innerhalb des Dropdowns */
select[name="bb_contact_policy"] option {
    background: #1a1a1a !important; /* Verhindert weiß auf weiß */
    color: #ffffff !important;
}


/* --- BRANIBEER BANNER-BUTTONS: ABSOLUTE POSITIONIERUNG --- */

/* 1. Grund-Styling für beide Buttons im Banner */
.bb-profile-header-banner .bb-edit-banner-link,
.bb-profile-header-banner .bb-contact-canvas-btn {
    background-color: #f62a00 !important; /* Dein Marken-Rot */
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    position: absolute !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

/* 2. Hover-Effekt: Wechsel auf Grün */
.bb-profile-header-banner .bb-edit-banner-link:hover,
.bb-profile-header-banner .bb-contact-canvas-btn:hover {
    background-color: #00ff00 !important; /* Dein Expert-Grün */
    color: #000000 !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4) !important;
}

/* 3. Positionierung: Profil bearbeiten (Oben Rechts) */
.bb-profile-header-banner .bb-edit-banner-link {
    top: 20px !important;
    right: 20px !important;
}

/* 4. Positionierung: Nachricht senden (Unten Rechts) */
.bb-profile-header-banner .bb-contact-canvas-btn {
    bottom: 20px !important;
    right: 20px !important;
}

/* 5. Fix für das Overlay-Container-Verhalten */
.bb-profile-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important; /* Erlaubt Klicks durch das Div hindurch auf den Banner */
}

.bb-profile-overlay .bb-edit-banner-link {
    pointer-events: auto !important; /* Aktiviert Klicks nur für den Button selbst */
}

/* Container für die Karten im Folgt-Tab */
#bb-tab-following .branibeer-member-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    padding: 20px 0 !important;
    align-items: start !important;
}

/* Die einzelne Mitgliedskarte */
#bb-tab-following .member-card {
    background: rgba(20, 20, 20, 0.9) !important; /* Dunkler Glas-Look wie in der Liste */
    border-radius: 20px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.3s ease !important;
}

#bb-tab-following .member-card:hover {
    transform: translateY(-5px);
}

/* Der kleine Banner oben in der Karte */
#bb-tab-following .member-card-banner {
    height: 120px !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Das Avatar-Bild in der Karte */
#bb-tab-following .member-card-avatar {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    border: 4px solid #f62a00 !important; /* Dein roter Rand */
    margin-top: -50px !important; /* Schiebt das Bild halb in den Banner */
    background: #222 !important;
    object-fit: cover !important;
}

/* Name des Mitglieds */
#bb-tab-following .member-card-content h2, 
#bb-tab-following .member-card-content .member-name {
    color: #f62a00 !important;
    font-size: 1.4rem !important;
    margin: 15px 0 5px 0 !important;
}

/* Firma / Beruf Info */
#bb-tab-following .member-card-content .member-meta {
    color: #ccc !important;
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
}

/* Button Styling (Profil ansehen) */
#bb-tab-following .member-card-content a.button {
    background: #f62a00 !important;
    color: #fff !important;
    padding: 10px 25px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
}

/* Status-Ring für die Member-Cards im Folgt-Tab */
#bb-tab-following .member-card-avatar {
    border-width: 4px !important;
    border-style: solid !important;
    transition: all 0.3s ease !important;
}

/* Online: Grün pulsierend */
#bb-tab-following .member-card.is-online .member-card-avatar {
    border-color: #00ff00 !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5) !important;
    animation: bb-avatar-pulse 2s infinite !important;
}

/* Offline: Rot */
#bb-tab-following .member-card.is-offline .member-card-avatar {
    border-color: #f62a00 !important; /* Dein Marken-Rot */
    box-shadow: none !important;
}

/* Button-Container in der Karte */
#bb-tab-following .member-card-actions {
    display: flex !important;
    flex-direction: column !important; /* Untereinander für bessere Klickbarkeit am Handy */
    gap: 12px !important; /* Genug Abstand gegen Vertippen */
    width: 100% !important;
    padding: 0 20px 20px 20px !important;
}

/* Gemeinsamer Stil für beide Buttons */
#bb-tab-following .member-card-actions a,
#bb-tab-following .member-card-actions button {
    width: 100% !important;
    padding: 10px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: 0.3s !important;
}

/* "Profil ansehen" - Dein Standard-Rot */
.bb-view-profile-btn {
    background: #f62a00 !important;
    color: #ffffff !important;
}

.bb-view-profile-btn:hover {
    background: #1e656d !important; /* Petrol beim Hover */
}

/* "Entfolgen" - Dezentes Grau, um versehentliches Klicken zu mindern */
.bb-unfollow-btn {
    background: #333333 !important;
    color: #bbbbbb !important;
    font-size: 0.85rem !important;
}

.bb-unfollow-btn:hover {
    background: #444444 !important;
    color: #ffffff !important;
}

/* Adminbar Suche entfernen */
#adminbar-search, 
.adminbar-input, 
input[name="s"]#adminbar-search {
    display: none !important;
}

.member-actions {
    display: flex !important;
    flex-direction: column !important; /* Untereinander */
    gap: 12px !important; /* Der Sicherheitsabstand gegen falsches Klicken */
    margin-top: 15px !important;
}

.member-actions a, 
.member-actions button {
    width: 100% !important;
    padding: 10px !important;
    border-radius: 8px !important;
    display: block !important;
    text-align: center !important;
}

/* --- 1. LAYOUT & HEADER --- */
.edit-main-header {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    text-align: left;
}

.edit-main-header h2 {
    font-size: 2rem !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.edit-main-header h2 span {
    color: #f62a00 !important;
}

.edit-profile-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    align-items: flex-start !important; /* Spalten fangen oben bündig an */
}

/* --- 2. SIDEBAR & FORMULAR STARTPUNKT --- */
.edit-sidebar, 
.bb-edit-form {
    margin-top: 0 !important; 
    padding-top: 0 !important;
}

.edit-sidebar {
    flex: 0 0 350px !important;
}

.sidebar-preview-card {
    background: rgba(30, 30, 30, 0.7) !important;
    padding: 25px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.preview-banner-small {
    width: 100% !important;
    height: 140px !important;
    border-radius: 12px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    margin-bottom: 60px !important;
}

.preview-avatar-wrap {
    position: absolute !important;
    bottom: -45px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.preview-avatar-wrap img {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50% !important;
    border: 4px solid #1a1a1a !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important;
    object-fit: cover !important;
}

/* --- 3. MAIN CONTENT (FORMULAR) --- */
.bb-edit-form {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.field-group-box {
    background: rgba(30, 30, 30, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.sidebar-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 18px 25px !important;
    font-size: 1rem !important;
    color: #f62a00 !important;
    cursor: pointer !important;
}

.bb-edit-form .sidebar-title::after {
    content: '+';
    font-size: 1.5rem;
    transition: transform 0.4s ease;
}

.field-group-box.is-active .sidebar-title::after {
    content: '×';
    color: #ffffff;
}

.sidebar-preview-card .sidebar-title::after {
    display: none !important;
}

.field-group-box .form-row {
    display: none !important;
    flex-direction: column !important;
    padding: 20px 25px !important;
    gap: 10px !important;
}

.field-group-box.is-active .form-row {
    display: flex !important;
}

/* --- 4. INPUTS & TEXTAREAS (GLAS-LOOK FINALE) --- */
.bb-input-field, 
textarea.bb-input-field {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.05) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    padding: 12px 15px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.bb-input-field:focus, 
textarea.bb-input-field:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #f62a00 !important;
    outline: none !important;
    box-shadow: 0 0 15px rgba(246, 42, 0, 0.2) !important;
}

textarea.bb-input-field {
    min-height: 120px;
    resize: vertical;
}

/* --- 5. CLEANUP & BUTTON --- */
/* Radikaler Hide für Bild anpassen und Navigation */
.field-group-box:has(h4:contains("Bild anpassen")),
.field-group-box:has(h4:contains("BILD ANPASSEN")),
.field-group-box:has(.sidebar-title:contains("Bild anpassen")),
.field-group-box:has(.sidebar-title:contains("BILD ANPASSEN")),
.edit-nav-menu, .bb-section-subtitle, #save-cropped-image, #stop-cropping {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.bb-submit-button-login {
    background: #f62a00 !important;
    padding: 15px 35px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    color: #fff !important;
    cursor: pointer;
    border: none;
    transition: all 0.3s;
    margin-top: 20px;
    display: inline-block;
}

.bb-submit-button-login:hover {
    background: #1e656d !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* --- OPTIMIERUNG DER LESBARKEIT --- */
.bb-post-body {
    background: rgba(15, 15, 15, 0.4) !important; /* Dünkleres Glas (0.85 statt 0.4 oder 0.6) */
    backdrop-filter: blur(15px) saturate(150%) !important; /* Verstärkt den Blur-Effekt */
    -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 30px !important;
    border-radius: 15px !important;
    color: #eeeeee !important; /* Leichtes Off-White für weniger Kontrast-Stress beim Lesen */
}

/* Optional: Damit Überschriften im Post richtig knallen */
.bb-post-body h1, 
.bb-post-body h2, 
.bb-post-body h3 {
    color: #ffffff !important;
    margin-top: 1.5em !important;
}

/* CONTAINER BREITER MACHEN */
.bb-single-post-container {
    max-width: 1000px !important; /* Von ca. 800px auf 1000px erhöht */
    width: 95% !important;        /* Flexibilität für kleinere Schirme */
    margin: 40px auto !important; /* Zentrierung */
    padding: 40px 50px !important; /* Mehr Innenabstand für edle Optik */
}

/* BACK-LINK FARBEN */
.bb-back-link a, 
.bb-back-link {
    color: #f62a00 !important;   /* Dein Branibeer Rot */
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bb-back-link a:hover, 
.bb-back-link:hover {
    color: #ffffff !important;    /* Weiß im Hover */
    transform: translateX(-5px); /* Kleiner Bewegungseffekt nach links */
}

/* Fix für Dropdowns im Experten-Editor */
#bb-expert-post-form select,
#bb-expert-post-form input[type="text"],
#bb-expert-post-form textarea {
    background-color: #2a2a2a !important; /* Dunkler Hintergrund */
    color: #ffffff !important;           /* Weiße Schrift */
    border: 1px solid #444 !important;
    padding: 10px !important;
    height: auto !important;             /* Verhindert abgeschnittene Schrift */
    min-height: 40px;
    appearance: auto;                    /* Stellt sicher, dass der Pfeil sichtbar ist */
}

#bb-expert-post-form option {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}

/* Speziell für die Sichtbarkeit und Status Dropdowns */
#bb_post_category, 
#bb_post_status, 
#bb_post_visibility {
    margin-bottom: 15px;
    width: 100%;
}

/* Social Interaction Section */
.bb-social-interaction-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bb-interaction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

/* Like Button */
.bb-like-btn {
    background: transparent;
    border: 2px solid #f62a00;
    color: #f62a00;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
}

.bb-like-btn.active, .bb-like-btn:hover {
    background: #f62a00;
    color: #fff;
}

/* Sterne-Rating Style */
.bb-rating-stars {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.bb-star-group {
    display: flex;
    flex-direction: row-reverse; /* Wichtig für die CSS-Hover Logik */
    justify-content: flex-end;
}

.bb-star-group input { display: none; }

.bb-star-group label {
    font-size: 24px;
    color: #444;
    cursor: pointer;
    transition: color 0.2s;
}

.bb-star-group input:checked ~ label,
.bb-star-group label:hover,
.bb-star-group label:hover ~ label {
    color: #f62a00;
}

/* Kommentar Formular */
#bb-social-form textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    min-height: 120px;
    margin-bottom: 15px;
}

.bb-guest-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.bb-guest-fields input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
}

.bb-submit-social {
    background: #1e656d;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

/* Kommentar Liste */
.bb-comment-item {
    display: flex;
    gap: 20px;
    background: rgba(255,255,255,0.03);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.bb-comment-avatar img {
    border-radius: 50%;
    border: 2px solid #1e656d;
}

.bb-comment-meta strong { color: #f62a00; font-size: 1.1em; }
.bb-comment-date { font-size: 0.85em; opacity: 0.6; margin-left: 10px; }
.bb-comment-rating { color: #f62a00; margin-top: 5px; }

.bb-newsbox-container {
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid #1e656d;
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    color: #fff;
}

.bb-newsbox-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.bb-newsbox-header h3 {
    margin: 0;
    color: #f62a00;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.bb-newsbox-item {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bb-newsbox-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.bb-newsbox-date {
    font-size: 0.8rem;
    color: #1e656d;
    font-weight: bold;
    min-width: 50px;
    text-transform: uppercase;
}

.bb-newsbox-content {
    font-size: 0.95rem;
    line-height: 1.4;
}

.bb-newsbox-content p {
    margin: 0;
}

.branibeer-report-wrapper:hover {
    opacity: 1 !important;
}

/* Vergrößert das Dropdown und optimiert die Lesbarkeit */
.bb-input-field {
    font-size: 16px !important; /* Etwas größer für bessere Lesbarkeit */
    padding: 10px 12px !important;
    background-color: rgba(255, 255, 255, 0.05) !important; /* Hintergrund des geschlossenen Feldes */
    color: #ffffff !important; /* Schriftfarbe des geschlossenen Feldes */
    border: 1px solid #1e656d !important;
    border-radius: 4px;
    width: 100%;
    height: auto;
}

/* Fix für das "Weiß auf Weiß" Problem in der Liste */
.bb-input-field option {
    background-color: #333333 !important; /* Hintergrund der Liste */
    color: #ffffff !important; /* Schriftfarbe der Liste */
    padding: 8px;
}

/* Hover-Effekt in der Liste (wird von manchen Browsern unterstützt) */
.bb-input-field option:hover,
.bb-input-field option:focus {
    background-color: #f62a00 !important;
    color: #ffffff !important;
}