/* Light-Theme (Angel) Defaults: rain-cloud gray + sky blue accents */
:root {
  --bg: #d6dde5;       /* noch dunkleres regenwolken-grau */
  --surface: #e3e9f0;  /* kuehles hellgrau fuer Karten */
  --text: #171e25;     /* guter Lesekontrast */
  --muted: #45525f;
  --primary: #1e98ff;  /* himmelblau Akzent staerker */
  --primary-600: #0f81e0;
  --card-border: rgba(0,0,0,0.14);
}

/* Basis anwenden (Light) */
body { background: var(--bg); color: var(--text); }

/* subtiler globaler Hintergrund mit mehr Himmelblau */
html { background: linear-gradient(180deg, rgba(30,152,255,0.10) 0%, rgba(30,152,255,0.06) 40%, rgba(30,152,255,0.02) 80%, rgba(30,152,255,0.00) 100%); }

/* Links und Fokus in Blau betonen */
a { color: var(--primary); }
a:hover, a:focus { color: var(--primary-600); }
.form-select:focus, .form-control:focus, .btn:focus { box-shadow: 0 0 0 .2rem rgba(30,152,255,.18); border-color: var(--primary); }

/* Navbar / Header (Light) */
.navbar,
.navbar .container,
.navbar .container-fluid,
.navbar-brand { background: var(--surface) !important; color: var(--text) !important; border-bottom: 1px solid var(--card-border) !important; }
.navbar .nav-link:hover { color: var(--primary); text-decoration: none; }

/* Karten/Listen/Dropdowns (Light) */
.card,
.modal-content,
.dropdown-menu,
.list-group-item { background: var(--surface); color: var(--text); border-color: var(--card-border); }

/* Buttons */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { color: #fff; background: var(--primary); }

/* Panels und Boxen (Light) */
.profile-photo-box { background: var(--surface); border: 1px solid var(--card-border); }

.bb-spoiler { background: var(--surface); color: var(--text); border: 1px solid var(--card-border); }
.bb-spoiler .bb-spoiler-body { border-top: 1px solid var(--card-border); }

.bb-player { background: var(--surface); border: 1px solid var(--card-border); }

/* Hero (Angel) etwas dunkler */
.hero-urh { background: radial-gradient(120% 140% at 50% 0%, #e6edf5 0%, #dee6ef 55%, #d5e0eb 100%); }
.hero-urh::after { height: 130px; background: radial-gradient(60% 80% at 50% 100%, rgba(30,152,255,.26), rgba(30,152,255,0) 70%); }

.hero-urh-logo { max-height: 220px; width: auto; filter: drop-shadow(0 6px 24px rgba(0,0,0,.45)); }
.hero-urh-title { font-family: 'Nosifer', system-ui, sans-serif; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); line-height: 1.1; margin: .25rem 0 .5rem 0; }
.hero-urh-lead { max-width: 46rem; color: var(--muted); }

a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid rgba(46,163,255,0.18); outline-offset: 2px; }

.pagination .page-link { color: var(--text); }
.badge { background: rgba(0,0,0,0.06); color: var(--text); }

.invert-on-light img { filter: invert(1) hue-rotate(180deg) brightness(0.95); }

@media (max-width: 767.98px) { .navbar .form-select.form-select-sm { min-width: 70px; } .chat-area { min-height: 30vh; } }

.bb-preview { transition: background .12s ease, color .12s ease, border-color .12s ease; }

.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { flex: 1 0 auto; }
.footer { background: transparent; }

.bb-spoiler { border: 1px solid var(--card-border); background: var(--surface); color: var(--text); border-radius: .375rem; margin: .5rem 0; overflow: hidden; }
.bb-spoiler summary { cursor: pointer; padding: .5rem .75rem; display: block; font-weight: 700; background: rgba(0,0,0,0.025); list-style: none; }
.bb-spoiler .bb-spoiler-body { padding: .75rem; border-top: 1px solid var(--card-border); color: var(--text); }
.bb-spoiler[open] summary { background: rgba(0,0,0,0.05); }

.bb-player { border: 1px solid var(--card-border); background: var(--surface); padding: .5rem; border-radius: .375rem; margin: .5rem 0; }
.bb-player .bb-player-title { font-weight: 600; margin-bottom: .5rem; color: var(--text); }
.bb-player audio,
.bb-player video { width: 100%; max-width: 100%; display: block; border-radius: .25rem; background: #000; }
.bb-player a { color: var(--primary); }

/* -- VOLLBREITE usw. (unverändert) -- */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl { max-width: 100% !important; width: 100% !important; }

.navbar .container,
.navbar .container-fluid { max-width: 100% !important; width: 100% !important; padding-left: 1rem; padding-right: 1rem; }

html, body, .page-wrapper { width: 100%; overflow-x: hidden; }

.chat-area { background: var(--surface); color: var(--text); border: 1px solid var(--card-border); border-radius: .375rem; padding: .5rem; height: 60vh; min-height: 28vh; }
@media (max-width: 1200px) { .chat-area { height: 56vh; } }
@media (max-width: 992px)  { .chat-area { height: 50vh; } }
@media (max-width: 576px)  { .chat-area { height: 45vh; } }

#messageInput.form-control { background: var(--surface); color: var(--text); border: 1px solid var(--card-border); min-height: 2.25rem; line-height: 1.35; }

.chat-area a.member-link { text-decoration: none; font-weight: 600; }
.chat-area a.member-link:hover { text-decoration: underline; }

@media (min-width: 992px) { .members-col { width: 12.5% !important; max-width: 420px !important; } .chat-col { width: 87.5% !important; }
}
@media (min-width: 1400px) { .members-col { max-width: 360px !important; } }

.site-title { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--card-border); }
.site-title .site-title-link { font-family: 'Nosifer', system-ui, sans-serif; color: var(--text); display: inline-block; line-height: 1.1; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); text-decoration: none; }
.site-title .site-title-link:hover, .site-title .site-title-link:focus { text-decoration: none; opacity: .95; }
.site-title .site-title-banner { display: block; margin: 0 auto; height: auto; width: auto; max-height: 180px; filter: drop-shadow(0 6px 24px rgba(0,0,0,.45)); }
@media (max-width: 576px) { .site-title .site-title-banner { max-height: 120px; } }
.font-nosifer { font-family: 'Nosifer', system-ui, sans-serif !important; }

@font-face { font-family: 'Nosifer'; src: url('/fonts/Nosifer/Nosifer-Regular.woff2') format('woff2'), url('/fonts/Nosifer/Nosifer-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }@font-face { font-family: 'Nosifer'; src: url('/fonts/Nosifer/Nosifer-Regular.woff2') format('woff2'), url('/fonts/Nosifer/Nosifer-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }