/* ================================================================
   LaunchBro Community CSS – Modern & Responsive
   Integrates with Design System Tokens
   ================================================================ */

:root {
  /* Community-specific aliases (map to design system) */
  --lbro-c-primary:        var(--lbro-color-primary);
  --lbro-c-primary-dark:   var(--lbro-color-primary-dark);
  --lbro-c-primary-light:  var(--lbro-color-primary-light);
  --lbro-c-accent:         var(--lbro-color-secondary);
  --lbro-c-success:        var(--lbro-color-success);
  --lbro-c-danger:         var(--lbro-color-danger);
  --lbro-c-button:         var(--lbro-color-button, var(--lbro-color-primary));
  --lbro-c-button-text:    var(--lbro-button-text-color, #fff);
  --lbro-c-button-radius:  var(--lbro-button-radius, var(--lbro-radius-sm));

  --lbro-c-bg:             var(--lbro-bg-secondary);
  --lbro-c-surface:        var(--lbro-bg-primary);
  --lbro-c-border:         var(--lbro-border);
  --lbro-c-border-light:   var(--lbro-border);

  --lbro-c-text:           var(--lbro-text-primary);
  --lbro-c-text-muted:     var(--lbro-text-secondary);
  --lbro-c-text-subtle:    var(--lbro-text-tertiary);

  --lbro-radius:           var(--lbro-radius-lg);
  --lbro-radius-sm:        var(--lbro-radius-md);
  /* --lbro-radius-full existiert bereits identisch in design-system.css –
     keine Alias-Neudeklaration nötig (und eine Selbstreferenz wie zuvor
     hier würde die Variable seitenweit invalidieren, siehe --lbro-shadow-*
     unten). */

  --lbro-shadow:           var(--lbro-shadow-md);
  /* --lbro-shadow-sm und --lbro-shadow-lg existieren ebenfalls bereits
     identisch in design-system.css – vormals hier als Selbstreferenz
     (var(--lbro-shadow-sm) etc.) redeklariert, was den Wert nach CSS-Spec
     "invalid at computed-value time" macht (zirkulär) und dadurch jeden
     var(--lbro-shadow-sm)/var(--lbro-radius-full) ohne Fallback-Wert auf
     jeder Seite mit geladenem community.css brach (nicht nur innerhalb von
     .lbro-community, da :root global gilt). Ersatzlos gestrichen – die
     Werte kaskadieren jetzt unverändert aus design-system.css durch. */

  --lbro-font:             var(--lbro-font-family);
  --lbro-font-size:        var(--lbro-font-size-base);
  --lbro-line-height:      var(--lbro-line-height-normal);

  --lbro-transition:       var(--lbro-transition-normal);
  --lbro-max-width:        1140px;
}

/* ------------------------------------------------------------------ */
/* Basis                                                                 */
/* ------------------------------------------------------------------ */

#lbro-community-wrapper {
    font-family:  var(--lbro-font);
    font-size:    var(--lbro-font-size);
    line-height:  var(--lbro-line-height);
    color:        var(--lbro-c-text);
    background:   var(--lbro-c-bg);
    min-height:   100vh;
}

/* Seitentitel auf Community-Seiten ausblenden */
body.lbro-community-page h1.wp-block-post-title,
body.lbro-community-page h1.entry-title,
body.lbro-community-page h1.page-title,
body.lbro-community-page .post-title,
body.lbro-community-page .page-header {
    display: none !important;
}

/* Full-Bleed-Wrapper: funktioniert in Block-Themes (alignfull) und Classic-Themes */
.lbro-community-fullwidth {
    width:        100vw !important;
    max-width:    100vw !important;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding:      0 !important;
    box-sizing:   border-box;
    overflow-x:   hidden;
}

.lbro-community {
    width:      100%;
    max-width:  100%;
    padding:    56px 24px 64px;
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    .lbro-community {
        padding-left:  48px;
        padding-right: 48px;
    }
}

/* ------------------------------------------------------------------ */
/* Layout: Hub (Sidebar + Feed)                                          */
/* ------------------------------------------------------------------ */

.lbro-community__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 860px) {
    .lbro-community__layout {
        grid-template-columns: 1fr;
    }
    .lbro-community__sidebar {
        position: static !important;
    }
}

/* ------------------------------------------------------------------ */
/* Community Header (Branding)                                           */
/* ------------------------------------------------------------------ */

.lbro-community__header {
    color: var(--lbro-button-text-color, #fff);
    padding:         0;
    border-radius:   var(--lbro-radius);
    margin-bottom:   28px;
    text-align:      center;
    position:        relative;
    overflow:        hidden;
    min-height:      200px;
    display:         flex;
    align-items:     stretch;
}

.lbro-community__header-gradient {
    position:  absolute;
    inset:     0;
    background: linear-gradient(135deg,
        var(--lbro-c-primary) 0%,
        color-mix(in srgb, var(--lbro-c-primary) 70%, #7c3aed) 60%,
        color-mix(in srgb, var(--lbro-c-primary) 40%, #0ea5e9) 100%);
    z-index: 0;
}

/* Hintergrundbild via inline style="background-image:url(...)" */
.lbro-community__header[style*="background-image"] {
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}

/* Overlay für Lesbarkeit über Hintergrundbild */
.lbro-community__header-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, .38);
    z-index:    1;
}

.lbro-community__header-inner {
    position:        relative;
    z-index:         2;
    padding:         48px 32px 36px;
    width:           100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
}

.lbro-community__header-logo {
    width:         80px;
    height:        80px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid rgba(255,255,255,.5);
    margin-bottom: 14px;
    box-shadow:    0 4px 16px rgba(0,0,0,.2);
}

.lbro-community__header-title {
    font-size:      32px;
    font-weight:    800;
    margin:         0 0 6px;
    letter-spacing: -.02em;
    text-shadow:    0 1px 3px rgba(0,0,0,.15);
}

.lbro-community__header-tagline {
    font-size:  16px;
    opacity:    .9;
    margin:     0 0 20px;
    max-width:  520px;
    line-height: 1.5;
}

.lbro-community__header-stats {
    display:        flex;
    gap:            24px;
    justify-content: center;
    flex-wrap:      wrap;
}

.lbro-community__header-stat {
    display:     flex;
    flex-direction: column;
    align-items: center;
    background:  rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border:      1px solid rgba(255,255,255,.25);
    border-radius: var(--lbro-radius-md, 10px);
    padding:     8px 20px;
    font-size:   12px;
    font-weight: 500;
    gap:         2px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.lbro-community__header-stat strong {
    font-size:   22px;
    font-weight: 700;
    line-height: 1;
    display:     block;
    text-transform: none;
    letter-spacing: -.01em;
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                               */
/* ------------------------------------------------------------------ */

.lbro-community__sidebar {
    background:    var(--lbro-c-surface);
    border-radius: var(--lbro-radius);
    box-shadow:    var(--lbro-shadow-sm);
    border:        1px solid var(--lbro-c-border);
    overflow:      hidden;
    position:      sticky;
    top:           24px;
    transition:    box-shadow var(--lbro-transition);
}

.lbro-community__sidebar:hover {
    box-shadow: var(--lbro-shadow);
}

.lbro-community__sidebar-header {
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          var(--lbro-c-text-muted);
    padding:        14px 16px 10px;
    border-bottom:  1px solid var(--lbro-c-border-light);
}

.lbro-community__sidebar-empty {
    padding:   14px 16px;
    font-size: 13px;
    color:     var(--lbro-c-text-muted);
    margin:    0;
}

.lbro-community__group-list {
    list-style: none;
    margin:     0;
    padding:    6px 0;
}

.lbro-community__group-list li {
    margin: 0;
    padding: 0;
}

.lbro-community__group-item {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 16px;
    text-decoration: none;
    color:           var(--lbro-c-text);
    font-size:       14px;
    font-weight:     500;
    transition:      background var(--lbro-transition), color var(--lbro-transition);
    border-left:     3px solid transparent;
}

.lbro-community__group-item:hover {
    background:   var(--lbro-c-primary-light);
    border-color: var(--lbro-c-primary);
    color:        var(--lbro-c-primary);
    text-decoration: none;
}

.lbro-community__group-item--member {
    border-color: var(--lbro-c-primary);
    color:        var(--lbro-c-primary);
}

.lbro-community__group-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--lbro-c-border);
    flex-shrink:   0;
    transition:    background var(--lbro-transition);
}

.lbro-community__group-item--member .lbro-community__group-dot,
.lbro-community__group-item:hover .lbro-community__group-dot {
    background: var(--lbro-c-primary);
}

/* ------------------------------------------------------------------ */
/* Main-Bereich (Feed + Tabs)                                            */
/* ------------------------------------------------------------------ */

.lbro-community__main {
    min-width: 0;   /* verhindert Overflow aus dem Grid */
    width:     100%;
}

/* ------------------------------------------------------------------ */
/* Tabs                                                                  */
/* ------------------------------------------------------------------ */

.lbro-community__tabs {
    display:         flex;
    gap:             4px;
    margin-bottom:   20px;
    background:      var(--lbro-c-bg);
    border-radius:   var(--lbro-radius);
    padding:         4px;
    border:          1px solid var(--lbro-c-border);
}

.lbro-community__tab {
    background:    transparent;
    border:        none;
    border-radius: calc(var(--lbro-radius) - 3px);
    padding:       8px 18px;
    font-size:     14px;
    font-weight:   600;
    color:         var(--lbro-c-text-muted);
    cursor:        pointer;
    transition:    background var(--lbro-transition), color var(--lbro-transition), box-shadow var(--lbro-transition);
    font-family:   var(--lbro-font);
    flex:          1;
}

.lbro-community__tab:hover {
    color:      var(--lbro-c-text);
    background: rgba(0,0,0,.04);
}

.lbro-community__tab--active {
    background:  var(--lbro-c-surface);
    color:       var(--lbro-c-primary);
    box-shadow:  0 1px 4px rgba(0,0,0,.08);
}

/* ------------------------------------------------------------------ */
/* Leer-Zustand Feed                                                      */
/* ------------------------------------------------------------------ */

.lbro-community__empty-feed {
    text-align:    center;
    padding:       56px 24px;
    color:         var(--lbro-c-text-muted);
    font-size:     15px;
    background:    var(--lbro-c-surface);
    border-radius: var(--lbro-radius);
    border:        1px dashed var(--lbro-c-border);
    margin-top:    4px;
}

.lbro-community__empty-icon {
    font-size:     48px;
    margin-bottom: 14px;
    filter:        drop-shadow(0 2px 4px rgba(0,0,0,.08));
}

/* ------------------------------------------------------------------ */
/* Post-Formular                                                          */
/* ------------------------------------------------------------------ */

.lbro-post-form {
    background:    var(--lbro-c-surface);
    border-radius: var(--lbro-radius);
    border:        1px solid var(--lbro-c-border);
    box-shadow:    var(--lbro-shadow-sm);
    padding:       18px;
    margin-bottom: 20px;
}

.lbro-post-form__input {
    width:         100%;
    min-height:    80px;
    border:        1px solid var(--lbro-c-border);
    border-radius: var(--lbro-radius-sm);
    padding:       12px 14px;
    font-family:   var(--lbro-font);
    font-size:     14px;
    color:         var(--lbro-c-text);
    resize:        vertical;
    transition:    border-color var(--lbro-transition), box-shadow var(--lbro-transition);
    box-sizing:    border-box;
}

.lbro-post-form__input:focus {
    outline:      none;
    border-color: var(--lbro-c-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}

.lbro-post-form__toolbar {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-top:  12px;
    padding-top: 12px;
    border-top:  1px solid var(--lbro-c-border-light);
}

.lbro-post-form__tool {
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:          36px;
    height:         36px;
    border-radius:  var(--lbro-radius-sm);
    border:         1px solid var(--lbro-c-border);
    background:     transparent;
    cursor:         pointer;
    font-size:      18px;
    line-height:    1;
    transition:     background var(--lbro-transition), border-color var(--lbro-transition);
    text-decoration: none;
    color:          var(--lbro-c-text-muted);
}

.lbro-post-form__tool:hover {
    background:   var(--lbro-c-primary-light);
    border-color: var(--lbro-c-primary);
}

.lbro-post-form__file-input {
    display: none;
}

.lbro-post-form__preview {
    position:      relative;
    margin-top:    12px;
    border-radius: var(--lbro-radius-sm);
    overflow:      hidden;
    border:        1px solid var(--lbro-c-border);
}

.lbro-post-form__preview-image {
    width:      100%;
    max-height: 280px;
    object-fit: cover;
    display:    block;
}

.lbro-post-form__preview-images {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin-top: 12px;
}

.lbro-post-form__preview-image-item {
    position:      relative;
    width:         84px;
    height:        84px;
    border-radius: var(--lbro-radius-sm);
    overflow:      hidden;
    border:        1px solid var(--lbro-c-border);
}

.lbro-post-form__preview-image-item .lbro-post-form__preview-image {
    width:      100%;
    height:     100%;
    max-height: none;
    object-fit: cover;
    display:    block;
}

.lbro-post-form__preview-add {
    width:           84px;
    height:          84px;
    border-radius:   var(--lbro-radius-sm);
    border:          1px dashed var(--lbro-c-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    color:           var(--lbro-c-text-muted);
    cursor:          pointer;
    transition:      background var(--lbro-transition), border-color var(--lbro-transition);
}

.lbro-post-form__preview-add:hover {
    background:   var(--lbro-c-primary-light);
    border-color: var(--lbro-c-primary);
}

.lbro-post-form__preview-video,
.lbro-post-form__preview-file,
.lbro-post-form__preview-link {
    padding:    12px 14px;
    font-size:  13px;
    color:      var(--lbro-c-text-muted);
    background: var(--lbro-c-border-light);
}

.lbro-post-form__remove-attachment {
    position:      absolute;
    top:           8px;
    right:         8px;
    background:    rgba(0,0,0,.55);
    color: var(--lbro-button-text-color, #fff);
    border:        none;
    border-radius: 50%;
    width:         24px;
    height:        24px;
    font-size:     12px;
    cursor:        pointer;
    line-height:   24px;
    text-align:    center;
}

.lbro-post-form__link-input {
    display:   flex;
    gap:       8px;
    margin-top: 10px;
}

.lbro-post-form__link-url {
    flex:          1;
    padding:       8px 12px;
    border:        1px solid var(--lbro-c-border);
    border-radius: var(--lbro-radius-sm);
    font-size:     13px;
    font-family:   var(--lbro-font);
}

.lbro-post-form__link-url:focus {
    outline:      none;
    border-color: var(--lbro-c-primary);
}

/* ------------------------------------------------------------------ */
/* Activity Feed                                                          */
/* ------------------------------------------------------------------ */

.lbro-activity-feed {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.lbro-activity-item {
    background:    var(--lbro-c-surface);
    border-radius: var(--lbro-radius);
    border:        1px solid var(--lbro-c-border);
    box-shadow:    var(--lbro-shadow-sm);
    padding:       18px;
    transition:    box-shadow var(--lbro-transition);
}

.lbro-activity-item:hover {
    box-shadow: var(--lbro-shadow);
}

.lbro-activity-item__header {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin-bottom: 12px;
}

.lbro-activity-item__avatar {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
    border:        2px solid var(--lbro-c-border);
}

.lbro-activity-item__meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lbro-activity-item__author {
    font-weight: 600;
    font-size:   14px;
    color:       var(--lbro-c-text);
}

.lbro-activity-item__time {
    font-size: 12px;
    color:     var(--lbro-c-text-subtle);
}

.lbro-activity-item__group-badge {
    font-size:       11px;
    font-weight:     600;
    color:           var(--lbro-color-primary);
    background:      var(--lbro-color-primary-light);
    padding:         2px 8px;
    border-radius:   var(--lbro-radius-full, 999px);
    width:           fit-content;
    text-decoration: none;
}

.lbro-activity-item__group-badge:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Icon-Buttons (Löschen, Melden) – ersetzt rohe Emoji-in-<button>      */
/* ------------------------------------------------------------------ */

.lbro-icon-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    flex-shrink:     0;
    padding:         0;
    border:          none;
    border-radius:   var(--lbro-radius-full);
    background:      transparent;
    color:           var(--lbro-c-text-subtle);
    cursor:          pointer;
    transition:      background var(--lbro-transition-fast), color var(--lbro-transition-fast), transform var(--lbro-transition-fast);
}

.lbro-icon-btn svg {
    display: block;
}

.lbro-icon-btn:hover {
    background: var(--lbro-c-bg);
    color:      var(--lbro-c-text);
    transform:  scale(1.06);
}

.lbro-icon-btn:active {
    transform: scale(.94);
}

.lbro-icon-btn--danger:hover {
    background: color-mix(in srgb, var(--lbro-c-danger) 12%, transparent);
    color:      var(--lbro-c-danger);
}

.lbro-icon-btn--sm {
    width:  26px;
    height: 26px;
}

.lbro-icon-btn--sm svg {
    width:  13px;
    height: 13px;
}

.lbro-activity-item__delete {
    opacity:    0;
    margin-left: auto;
}

.lbro-activity-item:hover .lbro-activity-item__delete {
    opacity: 1;
}

.lbro-activity-item__content {
    font-size:   15px;
    line-height: 1.65;
    color:       var(--lbro-c-text);
    margin-bottom: 14px;
}

.lbro-activity-item__content p { margin: 0 0 8px; }
.lbro-activity-item__content p:last-child { margin-bottom: 0; }

.lbro-activity-item__content--join {
    color:       var(--lbro-c-text-muted);
    font-style:  italic;
    font-size:   14px;
}

.lbro-activity-item__actions {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding-top: 12px;
    border-top:  1px solid var(--lbro-c-border-light);
    margin-top:  4px;
}

.lbro-activity-item__like {
    display:       flex;
    align-items:   center;
    gap:           5px;
    background:    none;
    border:        none;
    color:         var(--lbro-c-text-muted);
    font-size:     13px;
    font-weight:   500;
    cursor:        pointer;
    padding:       4px 8px;
    border-radius: var(--lbro-radius-full);
    transition:    background var(--lbro-transition), color var(--lbro-transition);
}

.lbro-activity-item__like:hover,
.lbro-activity-item__like--active {
    background: color-mix(in srgb, var(--lbro-color-danger) 10%, white);
    color:      var(--lbro-color-danger);
}

.lbro-activity-item__like--active svg {
    fill: currentColor;
}

.lbro-activity-item__reply-btn,
.lbro-activity-item__compose-btn {
    display:       flex;
    align-items:   center;
    gap:           5px;
    background:    none;
    border:        none;
    color:         var(--lbro-c-text-muted);
    font-size:     13px;
    font-weight:   500;
    cursor:        pointer;
    padding:       4px 8px;
    border-radius: var(--lbro-radius-full);
    transition:    background var(--lbro-transition), color var(--lbro-transition);
}

.lbro-activity-item__reply-btn:hover,
.lbro-activity-item__compose-btn:hover {
    background: var(--lbro-c-primary-light);
    color:      var(--lbro-c-primary);
}

.lbro-activity-item__reply-count {
    color:     var(--lbro-c-text-subtle);
    font-size: 12px;
}

.lbro-activity-item__like svg,
.lbro-activity-item__reply-btn svg,
.lbro-activity-item__compose-btn svg,
.lbro-activity-reply__like svg,
.lbro-icon-svg svg {
    display: block;
}

.lbro-icon-svg {
    display:     flex;
    align-items: center;
}

.lbro-activity-item__report-btn {
    margin-left: auto;
}

.lbro-activity-item__report-btn:hover {
    background: color-mix(in srgb, var(--lbro-color-warning) 14%, transparent);
    color:      var(--lbro-color-warning);
}

/* ------------------------------------------------------------------ */
/* Antworten                                                              */
/* ------------------------------------------------------------------ */

.lbro-activity-replies {
    margin-top:  14px;
    padding-top: 14px;
    border-top:  1px solid var(--lbro-c-border-light);
    display:     flex;
    flex-direction: column;
    gap:         12px;
}

/*
 * Flex statt CSS-Grid: verhindert die Klasse Bug, bei der ein Kind ohne
 * explizites grid-column in der schmalen "auto"-Spalte landet (betraf zuvor
 * .lbro-reply-form – Antwortfeld wurde nur so breit wie die Avatar-Spalte).
 * Avatar + Inhalt liegen in .lbro-activity-reply__row, alles danach
 * (Formular, verschachtelte Antworten) ist normaler Block-Flow und damit
 * automatisch spaltenfüllend.
 */
.lbro-activity-reply {
    padding:       12px 14px;
    background:    var(--lbro-c-bg);
    border-radius: var(--lbro-radius-sm);
}

.lbro-activity-reply__row {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
}

.lbro-activity-reply__avatar {
    width:         28px;
    height:        28px;
    border-radius: var(--lbro-radius-full);
    flex-shrink:   0;
    box-shadow:    0 0 0 2px var(--lbro-c-surface);
}

.lbro-activity-reply__body {
    flex:      1;
    min-width: 0;
}

.lbro-activity-reply__meta {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.lbro-activity-reply__author {
    font-weight: 600;
    font-size:   13px;
}

.lbro-activity-reply__time {
    font-size: 12px;
    color:     var(--lbro-c-text-subtle);
}

.lbro-activity-reply .lbro-icon-btn {
    margin-left: auto;
    opacity:     0;
}

.lbro-activity-reply:hover .lbro-icon-btn {
    opacity: 1;
}

.lbro-activity-reply__content {
    font-size:   14px;
    color:       var(--lbro-c-text);
    line-height: 1.55;
    margin-top:  2px;
}

.lbro-activity-reply__content p { margin: 0 0 6px; }
.lbro-activity-reply__content p:last-child { margin-bottom: 0; }

.lbro-activity-reply__actions {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  4px;
}

.lbro-activity-reply__like,
.lbro-activity-reply__reply-btn {
    display:       flex;
    align-items:   center;
    gap:           4px;
    background:    none;
    border:        none;
    color:         var(--lbro-c-text-muted);
    font-size:     12px;
    font-weight:   500;
    cursor:        pointer;
    padding:       3px 7px;
    border-radius: var(--lbro-radius-full);
    transition:    background var(--lbro-transition-fast), color var(--lbro-transition-fast);
}

.lbro-activity-reply__like:hover,
.lbro-activity-reply__like--active {
    background: color-mix(in srgb, var(--lbro-c-danger) 10%, transparent);
    color:      var(--lbro-c-danger);
}

.lbro-activity-reply__like--active svg {
    fill: currentColor;
}

.lbro-activity-reply__reply-btn:hover {
    background: var(--lbro-c-primary-light);
    color:      var(--lbro-c-primary);
}

.lbro-activity-reply__children {
    margin-top:     10px;
    padding-left:   16px;
    border-left:    2px solid var(--lbro-c-border-light);
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.lbro-reply-form {
    margin-top:    12px;
    padding:       12px;
    background:    var(--lbro-c-surface);
    border:        1px solid var(--lbro-c-border);
    border-radius: var(--lbro-radius-sm);
    display:       flex;
    flex-direction: column;
    gap:           8px;
    box-sizing:    border-box;
    animation:     lbro-reply-form-in var(--lbro-transition-fast) ease-out;
}

@keyframes lbro-reply-form-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lbro-reply-form__input {
    width:         100%;
    padding:       10px 12px;
    border:        1px solid var(--lbro-c-border);
    border-radius: var(--lbro-radius-sm);
    font-family:   var(--lbro-font);
    font-size:     14px;
    line-height:   1.5;
    resize:        vertical;
    box-sizing:    border-box;
    min-height:    64px;
    background:    var(--lbro-c-bg);
    color:         var(--lbro-c-text);
    transition:    border-color var(--lbro-transition-fast), box-shadow var(--lbro-transition-fast), background var(--lbro-transition-fast);
}

.lbro-reply-form__input::placeholder {
    color: var(--lbro-c-text-subtle);
}

.lbro-reply-form__input:focus {
    outline:      none;
    border-color: var(--lbro-c-primary);
    background:   var(--lbro-c-surface);
    box-shadow:   0 0 0 3px var(--lbro-c-primary-light);
}

.lbro-reply-form form {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.lbro-reply-form .lbro-btn {
    align-self: flex-end;
}

/* ------------------------------------------------------------------ */
/* Anhänge                                                               */
/* ------------------------------------------------------------------ */

.lbro-attachment {
    margin-top:    12px;
    border-radius: var(--lbro-radius-sm);
    overflow:      hidden;
    border:        1px solid var(--lbro-c-border);
}

.lbro-attachment--image .lbro-attachment__image {
    width:      100%;
    max-height: 420px;
    object-fit: cover;
    display:    block;
    transition: opacity var(--lbro-transition);
}

.lbro-attachment--image .lbro-attachment__image:hover {
    opacity: .92;
}

/* Mehrbild-Karussell: natives horizontales Scroll-Snap trägt die Swipe-Geste,
   JS (initLbroCarousel in community.js) ergänzt nur Punkte/Zähler/Pfeile. */
.lbro-carousel {
    position:   relative;
    background: #000;
}

.lbro-carousel__track {
    display:                    flex;
    overflow-x:                 auto;
    scroll-snap-type:           x mandatory;
    scroll-behavior:            smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
}

.lbro-carousel__track::-webkit-scrollbar {
    display: none;
}

.lbro-carousel__slide {
    flex:               0 0 100%;
    scroll-snap-align:  center;
    display:            block;
}

.lbro-carousel__slide .lbro-attachment__image {
    aspect-ratio: 1 / 1;
    max-height:   none;
}

.lbro-carousel__nav {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           32px;
    height:          32px;
    border-radius:   50%;
    border:          none;
    background:      rgba(0,0,0,.45);
    color: var(--lbro-button-text-color, #fff);
    font-size:       18px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--lbro-transition);
}

.lbro-carousel__nav:hover {
    background: rgba(0,0,0,.7);
}

.lbro-carousel__nav--prev { left: 8px; }
.lbro-carousel__nav--next { right: 8px; }

.lbro-carousel__dots {
    position:  absolute;
    bottom:    10px;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    gap:       5px;
}

.lbro-carousel__dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    rgba(255,255,255,.5);
    transition:    background var(--lbro-transition), transform var(--lbro-transition);
}

.lbro-carousel__dot--active {
    background: var(--lbro-color-surface, #fff);
    transform:  scale(1.2);
}

.lbro-carousel__count {
    position:      absolute;
    top:           10px;
    right:         10px;
    background:    rgba(0,0,0,.55);
    color: var(--lbro-button-text-color, #fff);
    font-size:     11px;
    font-weight:   600;
    padding:       2px 8px;
    border-radius: var(--lbro-radius-xl, 999px);
}

@media (max-width: 640px) {
    .lbro-carousel__nav { display: none; }
}

.lbro-attachment--video .lbro-attachment__video {
    width:   100%;
    display: block;
    max-height: 420px;
    background: #000;
}

.lbro-attachment--file .lbro-attachment__file-link {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        14px 16px;
    text-decoration: none;
    color:          var(--lbro-c-text);
    background:     var(--lbro-c-border-light);
    transition:     background var(--lbro-transition);
}

.lbro-attachment--file .lbro-attachment__file-link:hover {
    background: var(--lbro-c-primary-light);
    color:      var(--lbro-c-primary);
}

.lbro-attachment__file-icon { font-size: 22px; flex-shrink: 0; }
.lbro-attachment__file-name { font-weight: 500; font-size: 14px; flex: 1; word-break: break-all; }
.lbro-attachment__file-size { font-size: 12px; color: var(--lbro-c-text-subtle); flex-shrink: 0; }

.lbro-attachment--link {
    display:         flex;
    text-decoration: none;
    color:           var(--lbro-c-text);
    transition:      box-shadow var(--lbro-transition);
}

.lbro-attachment--link:hover {
    box-shadow: var(--lbro-shadow);
}

.lbro-attachment__link-image {
    width:      160px;
    flex-shrink: 0;
    object-fit:  cover;
    display:     block;
}

@media (max-width: 480px) {
    .lbro-attachment__link-image { width: 100px; }
}

.lbro-attachment__link-body {
    padding:  14px 16px;
    display:  flex;
    flex-direction: column;
    gap:      4px;
    flex:     1;
}

.lbro-attachment__link-title {
    font-weight: 600;
    font-size:   14px;
    color:       var(--lbro-c-text);
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.lbro-attachment__link-desc {
    font-size:  13px;
    color:      var(--lbro-c-text-muted);
    display:    -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:   hidden;
}

.lbro-attachment__link-domain {
    font-size:   12px;
    color:       var(--lbro-c-text-subtle);
    margin-top:  auto;
}

/* ------------------------------------------------------------------ */
/* Gruppen-Seite: Hero + Body + Sidebar                                  */
/* ------------------------------------------------------------------ */

/* Hero */
.lbro-group-hero {
    background:    linear-gradient(135deg, var(--lbro-color-primary) 0%, var(--lbro-color-primary-dark) 100%);
    border-radius: var(--lbro-radius);
    margin-bottom: 28px;
    overflow:      hidden;
    position:      relative;
}

.lbro-group-hero--image {
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}

.lbro-group-hero--image::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 100%);
}

.lbro-group-hero__inner {
    position: relative;
    padding:  32px 36px;
}

.lbro-group-hero__back {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-size:       13px;
    font-weight:     500;
    color:           rgba(255,255,255,.75);
    text-decoration: none;
    margin-bottom:   20px;
    transition:      color .15s;
}
.lbro-group-hero__back:hover { color: var(--lbro-button-text-color, #fff); text-decoration: none; }

.lbro-group-hero__content { max-width: 680px; }

.lbro-group-hero__title {
    font-size:   28px;
    font-weight: 700;
    color: var(--lbro-button-text-color, #fff);
    margin:      0 0 8px;
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
    line-height: 1.2;
}

.lbro-group-hero__privacy-badge {
    font-size: 20px;
}

.lbro-group-hero__desc {
    color:        rgba(255,255,255,.8);
    font-size:    15px;
    margin:       0 0 18px;
    line-height:  1.6;
}

.lbro-group-hero__meta {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
}

.lbro-group-hero__stat {
    display:     flex;
    align-items: center;
    gap:         5px;
    color:       rgba(255,255,255,.85);
    font-size:   14px;
    font-weight: 500;
}

.lbro-group-hero__member-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    background:    rgba(255,255,255,.18);
    color: var(--lbro-button-text-color, #fff);
    font-size:     12px;
    font-weight:   600;
    padding:       4px 10px;
    border-radius: var(--lbro-radius-xl, 20px);
    backdrop-filter: blur(4px);
}

.lbro-group-hero__mod-badge {
    background:    rgba(255,255,255,.12);
    color:         rgba(255,255,255,.9);
    font-size:     11px;
    font-weight:   600;
    padding:       3px 9px;
    border-radius: var(--lbro-radius-xl, 20px);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.lbro-group-hero__pending {
    color:       rgba(255,255,255,.7);
    font-size:   13px;
    font-style:  italic;
}

/* Body: Feed + Sidebar */
.lbro-group-body {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   28px;
    align-items:           start;
}

.lbro-group-main { min-width: 0; }

/* Sidebar */
.lbro-group-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    position:       sticky;
    top:            24px;
}

.lbro-group-sidebar__card {
    background:    var(--lbro-c-surface);
    border:        1px solid var(--lbro-c-border);
    border-radius: var(--lbro-radius);
    padding:       20px;
    box-shadow:    var(--lbro-shadow-sm);
}

.lbro-group-sidebar__heading {
    font-size:     13px;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color:         var(--lbro-c-text-muted);
    margin:        0 0 14px;
}

.lbro-group-sidebar__desc {
    font-size:   14px;
    color:       var(--lbro-c-text);
    line-height: 1.6;
    margin:      0 0 16px;
}

.lbro-group-sidebar__stats {
    display: flex;
    gap:     24px;
}

.lbro-group-sidebar__stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            2px;
    flex:           1;
    text-align:     center;
    padding:        12px 0;
    background:     var(--lbro-color-primary-light, rgba(57,99,158,.07));
    border-radius: var(--lbro-radius-md, 8px);
}

.lbro-group-sidebar__stat-value {
    font-size:   22px;
    font-weight: 700;
    color:       var(--lbro-color-primary);
    line-height: 1;
}

.lbro-group-sidebar__stat-label {
    font-size: 11px;
    color:     var(--lbro-c-text-muted);
    font-weight: 500;
}

.lbro-group-sidebar__privacy {
    margin-top:  12px;
    font-size:   12px;
    color:       var(--lbro-c-text-muted);
    padding-top: 12px;
    border-top:  1px solid var(--lbro-c-border);
}

.lbro-group-sidebar__members {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    margin-bottom: 12px;
}

.lbro-group-sidebar__member {
    display:      block;
    border-radius: 50%;
    transition:   transform .15s, box-shadow .15s;
}
.lbro-group-sidebar__member:hover {
    transform:  scale(1.1);
    box-shadow: 0 0 0 2px var(--lbro-color-primary);
}

.lbro-group-sidebar__avatar {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
}

.lbro-group-sidebar__more-members {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    background:    var(--lbro-c-bg);
    border:        1px solid var(--lbro-c-border);
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    font-size:     11px;
    font-weight:   600;
    color:         var(--lbro-c-text-muted);
}

.lbro-group-sidebar__see-all {
    background:  none;
    border:      none;
    padding:     0;
    font-size:   13px;
    color:       var(--lbro-color-primary);
    cursor:      pointer;
    font-weight: 500;
}
.lbro-group-sidebar__see-all:hover { text-decoration: underline; }

/* Mitglieder-Tab Grid (vollständig) */
.lbro-group-members-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap:                   14px;
    margin-top:            8px;
}

.lbro-group-member {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             8px;
    padding:         16px 10px;
    background:      var(--lbro-c-surface);
    border:          1px solid var(--lbro-c-border);
    border-radius:   var(--lbro-radius);
    text-decoration: none;
    color:           var(--lbro-c-text);
    font-size:       13px;
    font-weight:     500;
    text-align:      center;
    transition:      box-shadow .15s, border-color .15s;
}
.lbro-group-member:hover {
    box-shadow:   var(--lbro-shadow);
    border-color: var(--lbro-color-primary);
    text-decoration: none;
}

.lbro-group-member__avatar {
    width:         56px;
    height:        56px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--lbro-c-border);
}

.lbro-group-member__name {
    line-height: 1.3;
    word-break:  break-word;
}

.lbro-group-member__role {
    font-size:     10px;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:         var(--lbro-color-primary);
    background:    var(--lbro-color-primary-light, rgba(57,99,158,.08));
    padding:       2px 7px;
    border-radius: var(--lbro-radius-md, 10px);
}

/* Gesperrte Gruppe */
.lbro-group-page__locked {
    padding:     48px 24px;
    text-align:  center;
    flex-direction: column;
    gap:         16px;
}
.lbro-group-page__locked svg { color: var(--lbro-c-text-muted); }

/* Responsive */
@media (max-width: 900px) {
    .lbro-group-body {
        grid-template-columns: 1fr;
    }
    .lbro-group-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .lbro-group-sidebar__card { flex: 1 1 260px; }
}

@media (max-width: 600px) {
    .lbro-group-hero__inner { padding: 24px 20px; }
    .lbro-group-hero__title { font-size: 22px; }
    .lbro-group-sidebar { flex-direction: column; }
    .lbro-group-members-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 400px) {
    .lbro-group-members-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Gruppen-Header (alt – Kompatibilität)                                 */
/* ------------------------------------------------------------------ */

.lbro-community__back {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-size:       13px;
    color:           var(--lbro-c-text-muted);
    text-decoration: none;
    margin-bottom:   16px;
    transition:      color var(--lbro-transition);
}

.lbro-community__back:hover { color: var(--lbro-c-primary); }

.lbro-community__group-title {
    font-size:   24px;
    font-weight: 700;
    margin:      0 0 8px;
}

.lbro-community__group-desc {
    color:        var(--lbro-c-text-muted);
    font-size:    15px;
    margin:       0 0 16px;
}

.lbro-community__group-meta {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
}

/* ------------------------------------------------------------------ */
/* Gruppen-Karten-Grid                                                   */
/* ------------------------------------------------------------------ */

.lbro-community__group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.lbro-community__group-card {
    background:    var(--lbro-c-surface);
    border:        1px solid var(--lbro-c-border);
    border-radius: var(--lbro-radius);
    padding:       20px;
    text-decoration: none;
    color:         var(--lbro-c-text);
    transition:    box-shadow var(--lbro-transition), border-color var(--lbro-transition), transform var(--lbro-transition);
    display:       flex;
    flex-direction: column;
    gap:           6px;
}

.lbro-community__group-card:hover {
    box-shadow:   var(--lbro-shadow);
    border-color: var(--lbro-c-primary);
    transform:    translateY(-2px);
}

.lbro-community__group-card-name {
    font-weight: 600;
    font-size:   16px;
}

.lbro-community__group-card-meta {
    font-size: 13px;
    color:     var(--lbro-c-text-muted);
}

/* ------------------------------------------------------------------ */
/* Mitglieder-Verzeichnis                                                 */
/* ------------------------------------------------------------------ */

.lbro-member-search {
    display:      flex;
    align-items:  center;
    gap:          8px;
    margin-bottom: 16px;
}

.lbro-member-search__input {
    flex:          1;
    max-width:     320px;
    padding:       9px 14px;
    border:        1px solid var(--lbro-c-border);
    border-radius: var(--lbro-radius);
    font-size:     14px;
    color:         var(--lbro-c-text);
    background:    var(--lbro-c-surface);
}

.lbro-member-search__input:focus {
    outline:      none;
    border-color: var(--lbro-c-primary);
}

.lbro-member-search__clear {
    font-size:       13px;
    color:           var(--lbro-c-text-muted);
    text-decoration: underline;
}

.lbro-member-directory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 8px;
}

.lbro-member-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             10px;
    padding:         18px 12px;
    background:      var(--lbro-c-surface);
    border:          1px solid var(--lbro-c-border);
    border-radius:   var(--lbro-radius);
    text-decoration: none;
    color:           var(--lbro-c-text);
    font-size:       14px;
    font-weight:     500;
    text-align:      center;
    transition:      box-shadow var(--lbro-transition), border-color var(--lbro-transition);
}

.lbro-member-card:hover {
    box-shadow:   var(--lbro-shadow);
    border-color: var(--lbro-c-primary);
}

.lbro-member-card__avatar {
    width:         52px;
    height:        52px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--lbro-c-border);
}

/* ------------------------------------------------------------------ */
/* Profil                                                                 */
/* ------------------------------------------------------------------ */

.lbro-profile {
    background:    var(--lbro-c-surface);
    border:        1px solid var(--lbro-c-border);
    border-radius: var(--lbro-radius);
    overflow:      hidden;
    box-shadow:    var(--lbro-shadow-sm);
}

.lbro-profile__header {
    display:     flex;
    align-items: flex-start;
    gap:         20px;
    padding:     28px;
    border-bottom: 1px solid var(--lbro-c-border-light);
}

@media (max-width: 480px) {
    .lbro-profile__header {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
    }
}

.lbro-profile__avatar {
    width:         80px !important;
    height:        80px !important;
    border-radius: 50% !important;
    object-fit:    cover;
    border:        3px solid var(--lbro-c-border);
    flex-shrink:   0;
}

.lbro-profile__info {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.lbro-profile__name {
    font-size:   22px;
    font-weight: 700;
    margin:      0;
}

.lbro-profile__since {
    font-size: 13px;
    color:     var(--lbro-c-text-muted);
}

.lbro-profile__bio {
    font-size:  15px;
    color:      var(--lbro-c-text-muted);
    margin:     4px 0 0;
}

.lbro-profile__groups,
.lbro-profile__feed {
    padding: 24px 28px;
}

.lbro-profile__groups {
    border-bottom: 1px solid var(--lbro-c-border-light);
}

.lbro-profile__groups h3,
.lbro-profile__feed h3 {
    font-size:     15px;
    font-weight:   600;
    color:         var(--lbro-c-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin:        0 0 16px;
}

/* Header/Cover-Bild */
.lbro-profile__cover {
    position:            relative;
    height:              160px;
    background:          linear-gradient(135deg, var(--lbro-c-primary, #2563eb), var(--lbro-c-primary-dark, #1e40af));
    background-size:     cover;
    background-position: center;
}

.lbro-profile__edit-toggle {
    position:        absolute;
    top:             14px;
    right:           14px;
    padding:         7px 14px;
    border:          none;
    border-radius: var(--lbro-radius-xl, 999px);
    background:      rgba(0,0,0,.45);
    color: var(--lbro-button-text-color, #fff);
    font-size:       13px;
    font-weight:     600;
    cursor:          pointer;
    backdrop-filter: blur(4px);
}

.lbro-profile__edit-toggle:hover,
.lbro-profile__edit-toggle.is-active {
    background: rgba(0,0,0,.65);
}

.lbro-profile__avatar {
    box-shadow: 0 0 0 4px var(--lbro-c-surface);
}

.lbro-profile__name {
    display:      flex;
    align-items:  center;
    gap:          8px;
    flex-wrap:    wrap;
}

/* Tab-Leiste */
.lbro-profile__tabs {
    display:       flex;
    gap:           4px;
    padding:       0 28px;
    border-bottom: 1px solid var(--lbro-c-border-light);
}

.lbro-profile__tab {
    padding:       12px 16px;
    border:        none;
    background:    none;
    font-size:     14px;
    font-weight:   600;
    color:         var(--lbro-c-text-muted);
    cursor:        pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.lbro-profile__tab:hover {
    color: var(--lbro-c-text);
}

.lbro-profile__tab--active {
    color:                var(--lbro-c-primary, #2563eb);
    border-bottom-color:  var(--lbro-c-primary, #2563eb);
}

.lbro-profile__panel {
    padding: 24px 28px;
}

.lbro-profile__section-title {
    font-size:     14px;
    font-weight:   600;
    color:         var(--lbro-c-text);
    margin:        0 0 12px;
}

.lbro-friend-request-list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.lbro-friend-request {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 14px;
    background:    var(--lbro-c-surface);
    border:        1px solid var(--lbro-c-border);
    border-radius: var(--lbro-radius);
}

.lbro-friend-request__avatar {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
}

.lbro-friend-request__name {
    flex:            1;
    font-weight:     600;
    color:           var(--lbro-c-text);
    text-decoration: none;
}

.lbro-friend-request__name:hover {
    color: var(--lbro-c-primary);
}

.lbro-friend-request__actions {
    display:      flex;
    align-items:  center;
    gap:          8px;
    flex-shrink:  0;
}

.lbro-profile--private .lbro-profile__header {
    margin-top: 0;
}

/* Profil bearbeiten: zweispaltiges Layout (Nav links, Einstellungen rechts) */
.lbro-profile-edit__layout {
    display:               grid;
    grid-template-columns: 200px 1fr;
    gap:                   32px;
    align-items:           start;
}

.lbro-profile-edit__nav {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    position:       sticky;
    top:            24px;
}

.lbro-profile-edit__nav-item {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 14px;
    border:          none;
    background:      none;
    border-radius:   var(--lbro-radius);
    font-size:       14px;
    font-weight:     600;
    color:           var(--lbro-c-text-muted);
    cursor:          pointer;
    text-align:      left;
    width:           100%;
    transition:      background var(--lbro-transition), color var(--lbro-transition);
}

.lbro-profile-edit__nav-icon {
    font-size:   15px;
    line-height: 1;
    flex-shrink: 0;
}

.lbro-profile-edit__nav-item:hover {
    background: var(--lbro-c-bg);
    color:      var(--lbro-c-text);
}

.lbro-profile-edit__nav-item--active {
    background: var(--lbro-c-primary);
    color: var(--lbro-button-text-color, #fff);
}

.lbro-profile-edit__content {
    min-width:     0;
    background:    var(--lbro-c-surface);
    border:        1px solid var(--lbro-c-border-light);
    border-radius: var(--lbro-radius);
    padding:       24px 28px;
}

.lbro-profile-edit__section h3 {
    font-size:   14px;
    font-weight: 700;
    margin:      0 0 16px;
}

.lbro-profile-edit__actions {
    display:       flex;
    gap:           8px;
    margin-top:    24px;
    padding-top:   20px;
    border-top:    1px solid var(--lbro-c-border-light);
}

@media (max-width: 720px) {
    .lbro-profile-edit__layout {
        grid-template-columns: 1fr;
    }

    .lbro-profile-edit__nav {
        flex-direction:           row;
        overflow-x:               auto;
        position:                 static;
        gap:                      6px;
        padding-bottom:           6px;
        -webkit-overflow-scrolling: touch;
    }

    .lbro-profile-edit__nav-item {
        white-space: nowrap;
        width:       auto;
        flex-shrink: 0;
    }

    .lbro-profile-edit__content {
        padding: 20px;
    }
}

.lbro-profile-upload-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
}

@media (max-width: 560px) {
    .lbro-profile-upload-grid {
        grid-template-columns: 1fr;
    }
}

.lbro-profile-upload {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.lbro-profile-upload__preview {
    background:           var(--lbro-c-border-light);
    background-size:      cover;
    background-position:  center;
}

.lbro-profile-upload__preview--round {
    width:         64px;
    height:        64px;
    border-radius: 50%;
    object-fit:    cover;
}

.lbro-profile-upload__preview--cover {
    width:         100%;
    height:        70px;
    border-radius: var(--lbro-radius);
}

.lbro-checkbox-inline {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
    color:       var(--lbro-c-text-muted);
}

/* Switch-Komponente (Sichtbarkeit, Push) */
.lbro-switch-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         12px 0;
}

.lbro-switch-row .lbro-help-text {
    display:    block;
    margin-top: 2px;
}

.lbro-switch {
    position:    relative;
    display:     inline-block;
    width:       42px;
    height:      24px;
    flex-shrink: 0;
}

.lbro-switch input {
    opacity: 0;
    width:   0;
    height:  0;
}

.lbro-switch__track {
    position:      absolute;
    inset:         0;
    background:    var(--lbro-c-border);
    border-radius: var(--lbro-radius-xl, 999px);
    cursor:        pointer;
    transition:    background var(--lbro-transition, .15s);
}

.lbro-switch__track::before {
    content:       "";
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         18px;
    height:        18px;
    background: var(--lbro-color-surface, #fff);
    border-radius: 50%;
    transition:    transform var(--lbro-transition, .15s);
    box-shadow:    0 1px 3px rgba(0,0,0,.25);
}

.lbro-switch input:checked + .lbro-switch__track {
    background: var(--lbro-c-primary, #2563eb);
}

.lbro-switch input:checked + .lbro-switch__track::before {
    transform: translateX(18px);
}

/* Push-Steuerung */
.lbro-push-control {
    padding-bottom: 12px;
    margin-bottom:  12px;
    border-bottom:  1px solid var(--lbro-c-border-light);
}

/* Benachrichtigungs-Präferenzen-Tabelle */
.lbro-notify-prefs {
    width:           100%;
    border-collapse: collapse;
    font-size:       14px;
}

.lbro-notify-prefs th {
    text-align:      left;
    font-size:       12px;
    text-transform:  uppercase;
    letter-spacing:  .04em;
    color:           var(--lbro-c-text-muted);
    padding:         6px 8px;
}

.lbro-notify-prefs td {
    padding:    10px 8px;
    border-top: 1px solid var(--lbro-c-border-light);
}

.lbro-notify-prefs td:not(:first-child) {
    text-align: center;
    width:      70px;
}

.lbro-badge--muted {
    display:       inline-block;
    background:    var(--lbro-c-border-light);
    color:         var(--lbro-c-text-muted);
    font-size:     11px;
    padding:       2px 8px;
    border-radius: var(--lbro-radius-xl, 999px);
    font-weight:   600;
}

/* ------------------------------------------------------------------ */
/* Benachrichtigungs-Glocke                                               */
/* ------------------------------------------------------------------ */

#lbro-notification-bell .lbro-notification-bell__btn {
    transition: transform var(--lbro-transition), box-shadow var(--lbro-transition);
}

#lbro-notification-bell .lbro-notification-bell__btn:hover {
    transform:  scale(1.08);
    box-shadow: 0 4px 16px rgba(37,99,235,.35);
}

/* ------------------------------------------------------------------ */
/* Badges & Buttons                                                       */
/* ------------------------------------------------------------------ */

.lbro-badge--green {
    background:    color-mix(in srgb, var(--lbro-color-success) 15%, white);
    color:         color-mix(in srgb, var(--lbro-color-success) 70%, black);
    border-radius: var(--lbro-radius-full);
    font-size:     11px;
    font-weight:   600;
    padding:       2px 8px;
}

.lbro-badge--red {
    background:    #fee2e2;
    color:         #b91c1c;
    border-radius: var(--lbro-radius-full);
    font-size:     11px;
    font-weight:   600;
    padding:       2px 8px;
}

.lbro-community-fullwidth .lbro-btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    gap:           6px;
    padding:       9px 18px;
    border-radius: var(--lbro-radius-sm);
    font-family:   var(--lbro-font);
    font-size:     14px;
    font-weight:   500;
    cursor:        pointer;
    border:        1px solid var(--lbro-c-border);
    background:    var(--lbro-c-surface);
    color:         var(--lbro-c-text);
    text-decoration: none;
    transition:    background var(--lbro-transition), border-color var(--lbro-transition), box-shadow var(--lbro-transition);
    white-space:   nowrap;
}

.lbro-community-fullwidth .lbro-btn:hover {
    background:   var(--lbro-c-bg);
    border-color: var(--lbro-c-text-muted);
}

.lbro-community-fullwidth .lbro-btn--primary {
    background:   var(--lbro-c-button);
    border-color: var(--lbro-c-button);
    border-radius: var(--lbro-c-button-radius);
    color:        var(--lbro-c-button-text);
}

.lbro-community-fullwidth .lbro-btn--primary:hover {
    background:   color-mix(in srgb, var(--lbro-c-button) 80%, black);
    border-color: color-mix(in srgb, var(--lbro-c-button) 80%, black);
    color:        var(--lbro-c-button-text);
}

.lbro-community-fullwidth .lbro-btn--sm {
    padding:   6px 12px;
    font-size: 13px;
}

.lbro-community-fullwidth .lbro-btn:disabled {
    opacity: .5;
    cursor:  not-allowed;
}

/* ------------------------------------------------------------------ */
/* Leer-Zustand                                                           */
/* ------------------------------------------------------------------ */

.lbro-empty {
    text-align: center;
    padding:    40px 20px;
    color:      var(--lbro-c-text-muted);
    font-size:  15px;
}

.lbro-notice {
    padding:       14px 18px;
    background:    var(--lbro-c-border-light);
    border-radius: var(--lbro-radius-sm);
    font-size:     14px;
    color:         var(--lbro-c-text-muted);
}

/* ------------------------------------------------------------------ */
/* Responsive Tweaks                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .lbro-community {
    padding-left: var(--lbro-spacing-xl);
    padding-right: var(--lbro-spacing-xl);
  }
}

@media (max-width: 640px) {
  .lbro-community {
    padding: var(--lbro-spacing-md) var(--lbro-spacing-sm) var(--lbro-spacing-3xl);
  }

  .lbro-community__group-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lbro-member-directory {
    grid-template-columns: repeat(3, 1fr);
  }

  .lbro-activity-item {
    padding: var(--lbro-spacing-md);
  }

  .lbro-post-form {
    padding: var(--lbro-spacing-md);
  }

  .lbro-community__header {
    padding: var(--lbro-spacing-2xl) var(--lbro-spacing-lg);
  }

  .lbro-community__layout {
    grid-template-columns: 1fr;
  }

  .lbro-profile__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .lbro-community__group-grid {
    grid-template-columns: 1fr;
  }

  .lbro-member-directory {
    grid-template-columns: 1fr 1fr;
  }

  .lbro-attachment__link-image {
    width: 100px;
  }

  .lbro-community__header {
    padding: var(--lbro-spacing-xl) var(--lbro-spacing-md);
  }

  .lbro-community__header-logo {
    width: 56px;
    height: 56px;
  }

  .lbro-community__header-title {
    font-size: var(--lbro-font-size-xl);
  }

  .lbro-community__header-tagline {
    font-size: var(--lbro-font-size-sm);
  }
}

/* ------------------------------------------------------------------ */
/* Private Nachrichten                                                    */
/* ------------------------------------------------------------------ */

.lbro-messages__layout {
    display:               grid;
    grid-template-columns: 260px 1fr;
    gap:                   var(--lbro-spacing-lg);
    min-height:            480px;
}

.lbro-messages__list {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    border-right:   1px solid var(--lbro-gray-200);
    padding-right:  var(--lbro-spacing-md);
    overflow-y:     auto;
    max-height:     560px;
    position:       relative;
}

.lbro-messages__new-btn {
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            6px;
    width:          100%;
    padding:        var(--lbro-spacing-sm);
    margin-bottom:  8px;
    border:         1px dashed var(--lbro-c-primary);
    border-radius:  var(--lbro-radius-sm);
    background:     transparent;
    color:          var(--lbro-c-primary);
    font-weight:    600;
    font-size:      var(--lbro-font-size-sm);
    cursor:         pointer;
    transition:     background var(--lbro-transition);
}

.lbro-messages__new-btn:hover {
    background: var(--lbro-c-primary-light, var(--lbro-gray-100));
}

.lbro-messages__picker {
    position:      absolute;
    top:           40px;
    left:          0;
    right:         0;
    z-index:       20;
    background:    var(--lbro-c-surface);
    border:        1px solid var(--lbro-c-border);
    border-radius: var(--lbro-radius-sm);
    box-shadow:    var(--lbro-shadow);
    padding:       var(--lbro-spacing-sm);
}

.lbro-messages__picker-search {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid var(--lbro-gray-200);
    border-radius: var(--lbro-radius-sm);
    font-size:     var(--lbro-font-size-sm);
    margin-bottom: 6px;
    box-sizing:    border-box;
}

.lbro-messages__picker-list {
    max-height: 220px;
    overflow-y: auto;
}

.lbro-messages__picker-item {
    display:       block;
    width:         100%;
    text-align:    left;
    padding:       8px 10px;
    border:        none;
    background:    transparent;
    border-radius: var(--lbro-radius-sm);
    cursor:        pointer;
    font-size:     var(--lbro-font-size-sm);
    color:         var(--lbro-c-text);
}

.lbro-messages__picker-item:hover {
    background: var(--lbro-c-primary-light, var(--lbro-gray-100));
}

.lbro-messages__picker-empty {
    padding: 8px 10px;
    color:   var(--lbro-gray-500);
    font-size: 13px;
    margin: 0;
}

.lbro-messages__conv {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            2px;
    padding:        var(--lbro-spacing-sm);
    border:         none;
    background:     transparent;
    border-radius:  var(--lbro-radius-sm);
    cursor:         pointer;
    text-align:     left;
    width:          100%;
    position:       relative;
}

.lbro-messages__conv:hover {
    background: var(--lbro-c-primary-light, var(--lbro-gray-100));
}

.lbro-messages__conv--active {
    background: var(--lbro-c-primary-light, var(--lbro-gray-100));
}

.lbro-messages__conv-name {
    font-weight: 600;
    font-size:   var(--lbro-font-size-sm);
    color:       var(--lbro-c-text);
}

.lbro-messages__conv-preview {
    font-size:     12px;
    color:         var(--lbro-gray-500);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     100%;
}

.lbro-messages__conv .lbro-badge--red {
    position: absolute;
    top:      8px;
    right:    8px;
}

.lbro-messages__thread {
    display: flex;
    flex-direction: column;
}

.lbro-messages__thread-inner {
    display:        flex;
    flex-direction: column;
    height:         100%;
}

.lbro-messages__thread-header {
    font-weight:     600;
    padding-bottom:  var(--lbro-spacing-sm);
    border-bottom:   1px solid var(--lbro-gray-200);
    margin-bottom:   var(--lbro-spacing-md);
}

.lbro-messages__thread-body {
    flex:           1;
    overflow-y:     auto;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    max-height:     400px;
    padding:        4px;
}

.lbro-messages__bubble {
    align-self:    flex-start;
    background:    var(--lbro-gray-100);
    color:         var(--lbro-c-text);
    padding:       8px 12px;
    border-radius: var(--lbro-radius-lg, 14px);
    max-width:     70%;
    font-size:     var(--lbro-font-size-sm);
    word-wrap:     break-word;
}

.lbro-messages__bubble--own {
    align-self: flex-end;
    background: var(--lbro-c-primary, #2563eb);
    color: var(--lbro-button-text-color, #fff);
}

.lbro-messages__form {
    display:    flex;
    gap:        8px;
    margin-top: var(--lbro-spacing-md);
}

.lbro-messages__input {
    flex:          1;
    border:        1px solid var(--lbro-gray-200);
    border-radius: var(--lbro-radius-sm);
    padding:       8px 12px;
    font-family:   inherit;
    font-size:     var(--lbro-font-size-sm);
    resize:        vertical;
}

@media (max-width: 640px) {
    .lbro-messages__layout {
        grid-template-columns: 1fr;
    }

    .lbro-messages__list {
        border-right: none;
        border-bottom: 1px solid var(--lbro-gray-200);
        padding-right: 0;
        padding-bottom: var(--lbro-spacing-md);
        max-height: 200px;
    }
}

/* ------------------------------------------------------------------ */
/* Report-Modal                                                            */
/* ------------------------------------------------------------------ */

.lbro-report-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: var(--lbro-spacing-md);
}

.lbro-report-modal__content {
  background: white;
  border-radius: var(--lbro-radius);
  max-width: 400px;
  width: 100%;
  padding: var(--lbro-spacing-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.lbro-report-modal__content h3 {
  margin: 0 0 var(--lbro-spacing-sm) 0;
  font-size: var(--lbro-font-size-lg);
  color: var(--lbro-c-text);
}

.lbro-report-modal__content > p {
  margin: 0 0 var(--lbro-spacing-md) 0;
  font-size: var(--lbro-font-size-sm);
  color: var(--lbro-c-text);
}

.lbro-report-modal__reasons {
  display: flex;
  flex-direction: column;
  gap: var(--lbro-spacing-sm);
  margin-bottom: var(--lbro-spacing-md);
}

.lbro-report-reason {
  display: flex;
  align-items: center;
  gap: var(--lbro-spacing-sm);
  cursor: pointer;
  padding: var(--lbro-spacing-sm);
  border-radius: calc(var(--lbro-radius-sm) / 2);
  transition: background-color 0.15s ease;
}

.lbro-report-reason:hover {
  background-color: var(--lbro-c-primary-light);
}

.lbro-report-reason input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.lbro-report-reason span {
  font-size: var(--lbro-font-size-sm);
  color: var(--lbro-c-text);
}

.lbro-report-modal__description {
  width: 100%;
  padding: var(--lbro-spacing-sm);
  border: 1px solid var(--lbro-gray-200);
  border-radius: calc(var(--lbro-radius-sm) / 2);
  font-family: inherit;
  font-size: var(--lbro-font-size-sm);
  color: var(--lbro-c-text);
  resize: vertical;
  margin-bottom: var(--lbro-spacing-md);
}

.lbro-report-modal__description::placeholder {
  color: var(--lbro-gray-400);
}

.lbro-report-modal__actions {
  display: flex;
  gap: var(--lbro-spacing-md);
  justify-content: flex-end;
}

.lbro-report-modal__actions .lbro-btn {
  flex: 0 1 auto;
}

/* ------------------------------------------------------------------ */
/* Alpine x-cloak                                                         */
/* ------------------------------------------------------------------ */

[x-cloak] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Sidebar Widgets                                                         */
/* ------------------------------------------------------------------ */

.lbro-widget {
    background: var(--lbro-c-surface);
    border:     1px solid var(--lbro-gray-200);
    border-radius: var(--lbro-radius);
    padding:    var(--lbro-spacing-md);
    margin-bottom: var(--lbro-spacing-md);
}

.lbro-widget__header {
    font-size:   var(--lbro-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       var(--lbro-gray-500);
    margin-bottom: var(--lbro-spacing-sm);
}

.lbro-widget__empty {
    font-size: var(--lbro-font-size-sm);
    color:     var(--lbro-gray-400);
    margin:    0;
}

/* Mitglieder-Avatare */
.lbro-widget__members {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
}

.lbro-widget__member {
    display:      block;
    border-radius: 50%;
    overflow:     hidden;
    flex-shrink:  0;
    width:        36px;
    height:       36px;
    transition:   opacity .15s;
}

.lbro-widget__member:hover { opacity: .8; }

.lbro-widget__member-avatar {
    display: block !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    object-fit: cover;
}

/* Aktivitätsliste */
.lbro-widget__activity {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        var(--lbro-spacing-sm);
}

.lbro-widget__activity-item {
    display:    flex;
    align-items: center;
    gap:        8px;
}

.lbro-widget__activity-avatar {
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    object-fit: cover;
}

.lbro-widget__activity-text {
    display:        flex;
    flex-direction: column;
    font-size:      var(--lbro-font-size-sm);
    min-width:      0;
}

.lbro-widget__activity-text strong {
    color:         var(--lbro-c-text);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.lbro-widget__activity-time {
    color:     var(--lbro-gray-400);
    font-size: 11px;
}

/* Widget: Header mit Icon */
.lbro-widget__header-icon {
    margin-right: 4px;
}

/* Widget: Ankündigungen */
.lbro-widget__announcements {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        10px;
}

.lbro-widget__announcement-item {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding-bottom: 10px;
    border-bottom:  1px solid var(--lbro-gray-100);
}

.lbro-widget__announcement-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lbro-widget__announcement-link {
    font-size:   13px;
    font-weight: 500;
    color:       var(--lbro-color-primary);
    text-decoration: none;
    line-height: 1.4;
}

.lbro-widget__announcement-link:hover { text-decoration: underline; }

.lbro-widget__announcement-time {
    font-size: 11px;
    color:     var(--lbro-gray-400);
}

/* Widget: Events */
.lbro-widget__events {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        12px;
}

.lbro-widget__event-item {
    padding-bottom: 12px;
    border-bottom:  1px solid var(--lbro-gray-100);
}

.lbro-widget__event-item:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

.lbro-widget__event-date {
    font-size:   11px;
    font-weight: 600;
    color:       var(--lbro-color-primary);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}

.lbro-widget__event-title {
    font-size:   13px;
    font-weight: 500;
    color:       var(--lbro-gray-800);
    line-height: 1.35;
}

.lbro-widget__event-btn {
    display:         inline-block;
    margin-top:      6px;
    font-size:       12px;
    font-weight:     600;
    color:           var(--lbro-color-primary);
    text-decoration: none;
}

.lbro-widget__event-btn:hover { text-decoration: underline; }

/* Widget: Kurs-Fortschritt */
.lbro-widget__progress-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        14px;
}

.lbro-widget__progress-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lbro-widget__progress-header {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             8px;
}

.lbro-widget__progress-title {
    font-size:       13px;
    font-weight:     500;
    color:           var(--lbro-gray-800);
    text-decoration: none;
    overflow:        hidden;
    text-overflow:   ellipsis;
    white-space:     nowrap;
    flex: 1;
}

a.lbro-widget__progress-title:hover { color: var(--lbro-color-primary); }

.lbro-widget__progress-pct {
    font-size:   12px;
    font-weight: 600;
    color:       var(--lbro-color-primary);
    white-space: nowrap;
}

.lbro-widget__progress-bar {
    height:        6px;
    background:    var(--lbro-gray-100);
    border-radius: var(--lbro-radius-xl, 99px);
    overflow:      hidden;
}

.lbro-widget__progress-fill {
    height:        100%;
    background:    var(--lbro-color-primary);
    border-radius: var(--lbro-radius-xl, 99px);
    transition:    width .3s ease;
}

.lbro-widget__progress-meta {
    font-size: 11px;
    color:     var(--lbro-gray-400);
}

/* Gruppen-Listenitem-Name (flex text label) */
.lbro-community__group-item-name {
    flex: 1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* Gruppen-Dot aktiv */
.lbro-community__group-dot--active {
    background: var(--lbro-c-primary);
}

/* ------------------------------------------------------------------ */
/* Post-Formular – Gruppen-Selektor                                      */
/* ------------------------------------------------------------------ */

.lbro-post-form__group-selector {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: var(--lbro-spacing-sm);
}

.lbro-post-form__group-label {
    font-size:   var(--lbro-font-size-sm);
    font-weight: 500;
    color:       var(--lbro-gray-600);
    white-space: nowrap;
}

.lbro-post-form__group-select {
    flex:            1;
    padding:         6px 10px;
    border:          1px solid var(--lbro-gray-200);
    border-radius:   var(--lbro-radius-sm);
    font-size:       var(--lbro-font-size-sm);
    color:           var(--lbro-c-text);
    background:      var(--lbro-c-surface);
    cursor:          pointer;
}

.lbro-post-form__group-select:focus {
    outline:     none;
    border-color: var(--lbro-c-primary);
    box-shadow:  0 0 0 3px var(--lbro-c-primary-light);
}

/* ------------------------------------------------------------------ */
/* Notification-Glocke (FAB + Panel)                                    */
/* ------------------------------------------------------------------ */

.lbro-notif-bell {
    position: fixed;
    bottom:   24px;
    right:    24px;
    z-index:  9999;
}

.lbro-notif-bell__fab {
    position:      relative;
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         52px;
    height:        52px;
    border:        none;
    border-radius: var(--lbro-radius-full);
    background:    var(--lbro-c-primary);
    color: var(--lbro-button-text-color, #fff);
    cursor:        pointer;
    box-shadow:    0 4px 14px color-mix(in srgb, var(--lbro-c-primary) 45%, transparent);
    transition:    transform var(--lbro-transition-fast), box-shadow var(--lbro-transition-fast);
}

.lbro-notif-bell__fab:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--lbro-c-primary) 50%, transparent);
}

.lbro-notif-bell__fab:active,
.lbro-notif-bell__fab--open {
    transform: scale(.96);
}

.lbro-notif-bell__fab-icon {
    font-size: 21px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

.lbro-notif-bell__fab-badge {
    position:      absolute;
    top:           -3px;
    right:         -3px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    min-width:     20px;
    height:        20px;
    padding:       0 5px;
    border:        2px solid var(--lbro-c-surface);
    border-radius: var(--lbro-radius-full);
    background:    var(--lbro-c-danger);
    color: var(--lbro-button-text-color, #fff);
    font-size:     11px;
    font-weight:   var(--lbro-font-weight-bold);
    line-height:   1;
    animation:     lbro-notif-pop .25s ease-out;
}

@keyframes lbro-notif-pop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

.lbro-notif-bell__panel {
    position:      absolute;
    bottom:        64px;
    right:         0;
    width:         340px;
    max-width:     calc(100vw - 32px);
    max-height:    min(420px, calc(100vh - 140px));
    display:       flex;
    flex-direction: column;
    background:    var(--lbro-c-surface);
    border-radius: var(--lbro-radius);
    box-shadow:    0 12px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
    overflow:      hidden;
    transform-origin: bottom right;
}

.lbro-notif-bell__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px;
    border-bottom:   1px solid var(--lbro-c-border);
    flex-shrink:     0;
}

.lbro-notif-bell__title {
    font-size:   var(--lbro-font-size-sm);
    color:       var(--lbro-c-text);
}

.lbro-notif-bell__mark-all {
    font-size:  11px;
    font-weight: var(--lbro-font-weight-medium);
    color:      var(--lbro-c-primary);
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    4px 6px;
    border-radius: var(--lbro-radius-sm);
    transition: background var(--lbro-transition-fast);
}

.lbro-notif-bell__mark-all:hover {
    background: var(--lbro-c-primary-light);
}

.lbro-notif-bell__list {
    overflow-y: auto;
    flex:       1;
}

.lbro-notif-bell__empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    padding:        36px 16px;
    color:          var(--lbro-c-text-subtle);
    text-align:     center;
}

.lbro-notif-bell__empty-icon {
    font-size: 26px;
    opacity:   .6;
}

.lbro-notif-bell__empty p {
    margin:    0;
    font-size: var(--lbro-font-size-sm);
}

.lbro-notif-bell__item {
    position:        relative;
    display:         flex;
    align-items:     flex-start;
    gap:             10px;
    padding:         12px 16px;
    border-bottom:   1px solid var(--lbro-c-border);
    text-decoration: none;
    color:           inherit;
    transition:      background var(--lbro-transition-fast);
}

.lbro-notif-bell__item:last-child {
    border-bottom: none;
}

.lbro-notif-bell__item:hover {
    background: var(--lbro-c-bg);
}

.lbro-notif-bell__item--unread {
    background: var(--lbro-c-primary-light);
}

.lbro-notif-bell__item--unread:hover {
    background: color-mix(in srgb, var(--lbro-c-primary-light) 70%, var(--lbro-c-bg));
}

.lbro-notif-bell__item-icon {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    border-radius:   var(--lbro-radius-full);
    background:      var(--lbro-c-surface);
    box-shadow:      inset 0 0 0 1px var(--lbro-c-border);
    font-size:       15px;
}

.lbro-notif-bell__item-body {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
    flex:           1;
}

.lbro-notif-bell__item-message {
    font-size: 13px;
    color:     var(--lbro-c-text);
    line-height: 1.4;
}

.lbro-notif-bell__item-time {
    font-size: 11px;
    color:     var(--lbro-c-text-subtle);
}

.lbro-notif-bell__item-dot {
    flex-shrink:   0;
    width:         8px;
    height:        8px;
    margin-top:    5px;
    border-radius: var(--lbro-radius-full);
    background:    var(--lbro-c-primary);
}

@media (max-width: 480px) {
    .lbro-notif-bell {
        bottom: 16px;
        right:  16px;
    }

    .lbro-notif-bell__fab {
        width:  48px;
        height: 48px;
    }

    .lbro-notif-bell__panel {
        position:   fixed;
        left:       12px;
        right:      12px;
        bottom:     80px;
        width:      auto;
        max-width:  none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lbro-notif-bell__fab,
    .lbro-notif-bell__fab-badge,
    .lbro-notif-bell__panel {
        transition: none;
        animation:  none;
    }
}