/* Spicy Media – Mitgliederbereich (gleiches Design wie die Webseite: Schwarz / Rot / Silber) */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-standard-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --black: #0B0B0C; --graphite: #18191C; --graphite-2: #1F2024; --line: #2C2E33;
  --red: #ED2226; --red-deep: #B3121A; --silver: #C8CCD2; --silver-light: #EEF0F2; --white: #fff;
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--body); font-size: 1rem; line-height: 1.55; color: var(--white);
  background:
    radial-gradient(50rem 30rem at 85% -10%, rgba(237,34,38,.18), transparent 70%),
    radial-gradient(40rem 24rem at 0% 110%, rgba(140,14,20,.25), transparent 70%),
    var(--black);
  background-attachment: fixed;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--silver); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.page { flex: 1; padding-block: clamp(2rem, 6vw, 4rem); }
h1, h2 { font-family: var(--display); font-stretch: 112%; letter-spacing: -.01em; line-height: 1.12; margin: 0; }
h1 { font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.6rem); }
h2 { font-weight: 800; font-size: 1.2rem; margin-bottom: .6rem; }
.muted { color: var(--silver); }
.lead { color: var(--silver); font-size: 1.08rem; margin: .9rem 0 1.6rem; }

/* Kopfzeile */
.top { background: rgba(11,11,12,.92); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.brand img { height: 2.2rem; width: auto; }
.tag { font-family: var(--body); font-weight: 700; font-size: .72rem; background: var(--red); padding: .1rem .5rem; border-radius: 999px; }
.usernav { display: flex; align-items: center; gap: .9rem; }
.usernav form { margin: 0; }
.navlink { text-decoration: none; font-weight: 700; color: var(--silver); }
.navlink:hover { color: var(--white); }
.me { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
@media (max-width: 34rem) { .me-name, .tag { display: none; } }

/* Avatare */
.av { border-radius: 50%; object-fit: cover; flex: none; background: var(--graphite-2); }
.av-sm { width: 2rem; height: 2rem; }
.av-lg { width: 4.5rem; height: 4.5rem; border: 2px solid var(--red); }
.av-empty { display: inline-grid; place-items: center; font-weight: 800; color: var(--silver); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .55rem; font: inherit; font-weight: 800; font-size: 1.02rem; text-decoration: none; cursor: pointer;
  padding: .85rem 1.3rem; border-radius: 999px; border: 0; transition: background-color .15s, color .15s; }
.btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
.btn-main { background: var(--red); color: var(--white); }
.btn-main:hover { background: var(--white); color: var(--black); }
.btn-discord { background: var(--red); color: var(--white); }
.btn-discord:hover { background: var(--white); color: var(--black); }
.btn-ghost { background: transparent; color: var(--white); border: 1.5px solid #6E747C; }
.btn-ghost:hover { border-color: var(--silver); }
.btn-sm { padding: .4rem .9rem; font-size: .88rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.actions form { margin: 0; }

/* Anmelde-Karte */
.login-card { max-width: 36rem; margin: clamp(1rem, 6vh, 4rem) auto; background: rgba(24,25,28,.85); border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.5rem, 5vw, 2.75rem); }
.live { display: inline-flex; align-items: center; gap: .45rem; background: var(--red); font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: .78rem; padding: .3rem .7rem .3rem .55rem; border-radius: 6px; margin-bottom: 1rem; }
.live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--white); }
.help { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.help summary { cursor: pointer; font-weight: 700; color: var(--silver); }
.help p { color: var(--silver); margin: .5rem 0 0; }
.error { background: rgba(237,34,38,.15); border: 1px solid var(--red); border-radius: 10px; padding: .7rem 1rem; }
.flash { background: rgba(200,204,210,.1); border: 1px solid var(--line); border-radius: 10px; padding: .7rem 1rem; margin: 0 0 1.5rem; }

/* Übersicht */
.hello { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 2rem; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .5rem 0 0; }
.badge { background: var(--red); font-weight: 800; font-size: .8rem; padding: .15rem .6rem; border-radius: 999px; }
.badge-silver { background: var(--silver); color: var(--black); }
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
.card { background: rgba(24,25,28,.88); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem; margin-bottom: 1.25rem; }
.grid .card { margin: 0; }
.card p { color: var(--silver); margin: 0 0 1.1rem; }
.card-wide { grid-column: 1 / -1; }
.count { font-family: var(--body); font-size: .85rem; background: var(--graphite-2); border: 1px solid var(--line); padding: .05rem .55rem; border-radius: 999px; vertical-align: middle; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.people li, .who { display: flex; align-items: center; gap: .65rem; }
.people b, .people li > span:not(.av), .who > span:not(.av) { display: block; }
.people small, .who small { display: block; color: var(--silver); font-size: .82rem; }

/* Tabellen */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th { text-align: left; font-size: .8rem; color: var(--silver); font-weight: 700; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.table td { padding: .7rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr.is-blocked td { opacity: .55; }
.acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.acts form { margin: 0; }
.chip { font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; color: var(--white); background: transparent; border: 1.5px solid #6E747C; border-radius: 999px; padding: .25rem .7rem; }
.chip:hover:not(:disabled) { border-color: var(--silver); }
.chip:disabled { opacity: .45; cursor: not-allowed; }
.chip-on { background: var(--silver); color: var(--black); border-color: var(--silver); }
.chip-danger { background: var(--red-deep); border-color: var(--red-deep); }
.warn { font-size: .78rem; color: #FFB4B4; }
@media (max-width: 52rem) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border-bottom: 1px solid var(--line); padding: .5rem 0; }
  .table td { border: 0; padding: .25rem 0; }
}
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .92rem; }
.log time { color: var(--silver); margin-right: .4rem; }

/* Fußzeile */
.foot { border-top: 1px solid var(--line); color: var(--silver); font-size: .88rem; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; padding-block: 1.5rem; }
.foot nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--white); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.badge-new { font-size: .72rem; font-weight: 800; background: var(--silver); color: var(--black); padding: .05rem .45rem; border-radius: 999px; }

/* ===================== Kalender ===================== */
.back { display: inline-block; margin-bottom: 1rem; color: var(--silver); text-decoration: none; font-weight: 700; }
.back:hover { color: var(--white); }
.small { font-size: .85rem; }
.cal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.month-nav { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.month-nav .chip { text-decoration: none; }
.month-name { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.15rem; min-width: 10.5rem; text-align: center; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-bottom: 1.25rem; color: var(--silver); font-size: .92rem; }
.filter { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.filter input { accent-color: var(--red); }

/* Farben je Termin-Art */
.dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; flex: none; }
.dot-schulung { background: var(--silver); }
.dot-event { background: var(--red); }
.dot-match { background: #FF8A1F; }
.dot-team { background: transparent; border: 2px solid var(--silver); }
.dot-live { background: #7A1015; box-shadow: 0 0 0 2px var(--red) inset; }
.dot-rsvp-yes { background: #3FB56B; } .dot-rsvp-maybe { background: #E0A400; } .dot-rsvp-no { background: #6E747C; }

/* Monatsraster (ab Tablet) */
.cal { padding: 1rem; }
.cal-grid { display: none; }
@media (min-width: 52rem) {
  .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .cal .agenda { display: none; }
}
.wd { background: var(--graphite-2); color: var(--silver); font-size: .78rem; font-weight: 700; padding: .45rem .6rem; }
.day { background: #141518; min-height: 7.2rem; padding: .4rem; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.day-empty { background: #0F1012; }
.day-num { font-size: .82rem; font-weight: 700; color: var(--silver); }
.day-today { box-shadow: inset 0 0 0 2px var(--red); }
.day-today .day-num { color: var(--white); }
.ev { display: block; font-size: .78rem; line-height: 1.3; padding: .2rem .4rem; border-radius: 6px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--white); background: var(--graphite-2); border-left: 3px solid var(--silver); }
.ev:hover { background: #2A2C31; }
.ev-time { color: var(--silver); font-weight: 700; }
.ev-event { border-left-color: var(--red); }
.ev-match { border-left-color: #FF8A1F; }
.ev-team { border-left-color: var(--silver); border-left-style: dashed; }
.ev-live { border-left-color: #7A1015; background: rgba(179,18,26,.18); }
.more { font-size: .74rem; color: var(--silver); }

/* Terminliste (Handy + Übersicht) */
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.agenda h3 { font-family: var(--display); font-stretch: 112%; font-size: 1rem; margin: 0 0 .5rem; }
.agenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.agenda a { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "dot when title" "dot when sub"; column-gap: .65rem; align-items: center; text-decoration: none; padding: .55rem .7rem; border-radius: 10px; background: var(--graphite-2); }
.agenda a:hover { background: #2A2C31; }
.agenda .dot { grid-area: dot; }
.agenda .when { grid-area: when; color: var(--silver); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.agenda b { grid-area: title; }
.agenda small { grid-area: sub; color: var(--silver); }
.agenda em { color: #8FE3AE; font-style: normal; }
.agenda-compact { margin-bottom: 1rem; }
.agenda-compact a { grid-template-columns: auto 1fr; grid-template-areas: "dot title" "dot when" "dot sub"; row-gap: .1rem; }
.agenda-compact .when { white-space: normal; font-size: .82rem; }
.today-tag { font-family: var(--body); font-size: .72rem; background: var(--red); padding: .05rem .45rem; border-radius: 999px; vertical-align: middle; }

/* Termin-Details */
.event-detail .meta { display: flex; align-items: center; gap: .5rem; color: var(--silver); margin: 0 0 .5rem; }
.when-big { font-size: 1.1rem; font-weight: 700; color: var(--white) !important; margin: .8rem 0 1rem !important; }
.desc { color: var(--white) !important; }
.rsvp { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.rsvp .chip { font-size: .95rem; padding: .45rem 1rem; }
.rsvp-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.rsvp-list li { display: flex; align-items: center; gap: .5rem; }
.rsvp-list small { color: var(--silver); }

/* Formular */
.form-card { max-width: 40rem; }
.form-card form { display: grid; gap: 1rem; margin-top: 1rem; }
.form-card label { display: grid; gap: .35rem; font-weight: 700; }
.form-card label small { font-weight: 400; color: var(--silver); }
.form-card input, .form-card select, .form-card textarea, .copy {
  font: inherit; color: var(--white); background: #0F1012; border: 1.5px solid var(--line); border-radius: 10px; padding: .6rem .75rem; width: 100%;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: var(--silver); }
.form-card input[type="date"], .form-card input[type="time"] { color-scheme: dark; }
.row3 { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .row3 { grid-template-columns: 1.4fr 1fr 1fr; } }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.form-card label.check { display: flex; align-items: center; gap: .55rem; font-weight: 600; }
.form-card label.check input { width: auto; accent-color: var(--red); }
.copy { margin-bottom: .8rem; font-size: .85rem; }
@media (max-width: 30rem) { .brand-text { display: none; } .usernav { gap: .6rem; } .top .wrap { gap: .5rem; } }
.note { color: var(--silver); font-size: .92rem; background: rgba(200,204,210,.06); border: 1px solid var(--line); border-radius: 10px; padding: .75rem 1rem; margin: 0 0 1.5rem; }
.note b { color: var(--white); }
.lead a { color: var(--white); }

/* Kalender-Abo */
.abo-ways { display: grid; gap: 1rem; margin: 1.25rem 0; }
@media (min-width: 52rem) { .abo-ways { grid-template-columns: repeat(3, 1fr); } }
.abo-way { background: var(--graphite-2); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; display: flex; flex-direction: column; }
.abo-way h3 { font-family: var(--display); font-stretch: 112%; font-size: 1rem; margin: 0 0 .5rem; }
.abo-way ol { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--silver); font-size: .92rem; display: grid; gap: .3rem; align-content: start; flex: 1; }
.abo-way ol b { color: var(--white); }
.abo-way .btn { align-self: flex-start; }
.copy-label { display: block; font-weight: 700; margin-bottom: .4rem; }
.copy-label small { font-weight: 400; color: var(--silver); }
.copy-label .copy { margin: 0; }
.copy-row { display: flex; gap: .5rem; align-items: stretch; margin-bottom: .75rem; }
.copy-row .copy { flex: 1; min-width: 0; margin: 0; }
.copy-btn { flex: none; white-space: nowrap; }
.copy-btn.copied { background: #2f9e5b; border-color: #2f9e5b; }

/* ---------- Chat ---------- */
.unread { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--red); color: var(--white); font-size: .72rem; font-weight: 800; line-height: 1; margin-left: auto; }
.unread[hidden] { display: none; }
.nav-unread { margin-left: .35rem; vertical-align: 1px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: .85rem; }

.chat { display: grid; grid-template-columns: 17rem 1fr; gap: 1rem; height: calc(100dvh - 10rem); min-height: 26rem; }
.chat-side, .chat-pane { background: rgba(24,25,28,.88); border: 1px solid var(--line); border-radius: 18px; min-height: 0; }
.chat-side { padding: 1rem .6rem; overflow-y: auto; }
.side-h { font-family: var(--body); font-stretch: 100%; font-size: .8rem; font-weight: 800; color: var(--silver); margin: .4rem .5rem .4rem; }
.side-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; padding-right: .3rem; }
.side-row .chip { text-decoration: none; white-space: nowrap; }
.side-empty { padding: .3rem .6rem; }
.rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.room { display: flex; align-items: center; gap: .6rem; padding: .5rem .55rem; border-radius: 12px; text-decoration: none; }
.room:hover { background: var(--graphite-2); }
.room-on { background: var(--graphite-2); box-shadow: inset 3px 0 0 var(--red); }
.room-icon { width: 2rem; height: 2rem; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--line); font-weight: 800; color: var(--silver); }
.room-name { display: grid; min-width: 0; font-weight: 700; line-height: 1.25; }
.room-name, .room-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-name small { font-weight: 500; color: var(--silver); font-size: .78rem; }

.chat-pane { display: flex; flex-direction: column; overflow: hidden; }
.chat-pane-empty { display: grid; place-items: center; }
.pane-head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); }
.pane-head h1 { font-size: 1.25rem; }
.pane-head p { margin: .1rem 0 0; }
.back { display: none; text-decoration: none; font-size: 2rem; line-height: 1; color: var(--silver); padding: 0 .3rem; }
.msgs { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem; overscroll-behavior: contain; }
.msgs:focus-visible { outline-offset: -3px; }
.older { align-self: center; font-size: .85rem; color: var(--silver); margin-bottom: .5rem; }
.empty { margin: auto; color: var(--silver); }
.day-sep { display: flex; align-items: center; gap: .8rem; color: var(--silver); font-size: .78rem; font-weight: 700; margin: .9rem 0 .4rem; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.msg { position: relative; display: flex; gap: .7rem; padding: .45rem .6rem; border-radius: 12px; }
.msg:hover { background: rgba(255,255,255,.03); }
.msg .av { margin-top: .15rem; }
.msg-body { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; }
.msg-head time { color: var(--silver); font-size: .75rem; }
.msg-role { font-size: .7rem; font-weight: 700; color: var(--black); background: var(--silver); border-radius: 999px; padding: 0 .45rem; }
.msg-mine .msg-head b { color: #ff6b6e; }
.msg-text { margin: .1rem 0 0; overflow-wrap: anywhere; color: var(--silver-light); }
.msg-text a { color: #ff8a8c; }
.msg-deleted .msg-text { color: #80858c; }
.msg-del { position: absolute; top: .35rem; right: .4rem; margin: 0; opacity: 0; transition: opacity .1s; }
.msg:hover .msg-del, .msg-del:focus-within { opacity: 1; }
@media (hover: none) { .msg-del { opacity: .6; } }
.msg-del button { font: inherit; font-size: 1.1rem; line-height: 1; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--line); background: var(--graphite); color: var(--silver); cursor: pointer; }
.msg-del button:hover { color: var(--white); border-color: var(--red); }

.composer { display: flex; gap: .6rem; align-items: flex-end; padding: .8rem 1.2rem .3rem; border-top: 1px solid var(--line); }
.composer textarea { flex: 1; resize: none; font: inherit; color: var(--white); background: var(--black); border: 1px solid var(--line); border-radius: 14px; padding: .6rem .85rem; min-height: 2.6rem; max-height: 10rem; }
.composer textarea:focus { outline: none; border-color: var(--silver); }
.composer .btn { min-height: 2.6rem; }
.composer .btn:disabled { opacity: .6; cursor: wait; }
.composer-error { margin: .6rem 1.2rem 0; }
.composer-off { padding: .9rem 1.2rem; margin: 0; border-top: 1px solid var(--line); }
.hint { margin: 0; padding: 0 1.2rem .7rem; font-size: .75rem; }

.back-link { color: var(--silver); text-decoration: none; font-weight: 700; }
.dm-search { margin-bottom: 1rem; }
.dm-people { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .25rem; }
@media (min-width: 40rem) { .dm-people { grid-template-columns: repeat(2, 1fr); } }
.dm-people a { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 12px; text-decoration: none; }
.dm-people a:hover { background: var(--graphite-2); }
.dm-people span { display: grid; min-width: 0; }
.dm-people small { color: var(--silver); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 52rem) {
  .page:has(.chat) { padding-block: .75rem; }
  .chat { grid-template-columns: 1fr; height: calc(100dvh - 5.5rem); }
  .chat-open .chat-side { display: none; }
  .chat:not(.chat-open) { height: auto; min-height: 0; }
  .chat:not(.chat-open) .chat-pane { display: none; }
  .back { display: block; }
  .pane-head, .msgs, .composer { padding-inline: .8rem; }
  .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .msg-del { transition: none; } }
@media (max-width: 52rem) { body:has(.chat) .foot { display: none; } }

/* Rundnachricht */
.side-row-top { margin-top: 0; }
.msg-bc { background: var(--red); color: var(--white); }
.bc-form label { margin-bottom: 1rem; }
.bc-preview { margin: 0 0 1.2rem; padding: .9rem 1.1rem; border-left: 3px solid var(--red); background: var(--graphite-2); border-radius: 0 12px 12px 0; color: var(--silver-light); overflow-wrap: anywhere; }
.bc-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.bc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bc-list li { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; padding: .8rem 0; border-top: 1px solid var(--line); font-size: .9rem; color: var(--silver); }
.bc-list li:first-child { border-top: 0; }
.bc-list b { color: var(--white); }
.bc-list p { margin: .3rem 0 0; color: var(--silver-light); overflow-wrap: anywhere; }
.bc-list form { margin: 0; flex: none; }
.bc-withdrawn p { color: #80858c; }
.bc-actions .btn { width: auto; }

/* ---------- Hintergründe ---------- */
/* Innenseiten: ruhige, abgedunkelte Variante des Webseiten-Hintergrunds (fest stehend, auch auf dem iPhone) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/bg-ruhig-mobile.jpg") center top / cover no-repeat, var(--black);
}
@media (min-width: 60rem) { body::before { background: url("img/bg-ruhig-desktop.jpg") right center / cover no-repeat, var(--black); } }
body { background: var(--black); }

/* Anmeldeseite: wie die Webseite – brennendes Logo mit Glutring und silbernen Ringen */
body.page-login .page { max-width: none; overflow: clip; }
.login-hero { max-width: 68rem; margin-inline: auto; }
body.page-login::before { background: #060203; }
.login-hero { position: relative; display: grid; justify-items: center; gap: 1rem; }
.logo-badge { position: relative; width: min(52vw, 14rem); aspect-ratio: 1; margin: .5rem 0 1rem; }
.logo-badge video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; clip-path: circle(48.3% at 50% 50%); }
.logo-badge canvas { position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.badge-bg {
  display: block; position: absolute; z-index: -1; pointer-events: none;
  width: 268%; max-width: none; height: auto; left: 50%; top: 50%; transform: translate(-50.56%, -23.59%);
  -webkit-mask-image: radial-gradient(ellipse 50% 42% at 50.5% 30%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 42% at 50.5% 30%, #000 62%, transparent 100%);
}
.login-hero .login-card { position: relative; z-index: 1; margin: 0 auto; }
@media (min-width: 60rem) {
  .login-hero { grid-template-columns: minmax(0, 36rem) 1fr; align-items: center; gap: 3rem; min-height: calc(100vh - 14rem); }
  .logo-badge { order: 2; justify-self: center; width: min(20rem, 24vw); margin: 0; }
  .login-hero .login-card { order: 1; margin: 0; }
  .badge-bg {
    width: 340%; transform: translate(-72.06%, -48.21%);
    -webkit-mask-image: radial-gradient(ellipse 50% 52% at 72% 48%, #000 60%, transparent 100%);
            mask-image: radial-gradient(ellipse 50% 52% at 72% 48%, #000 60%, transparent 100%);
  }
}