/* Zocktastic — Shell nach PRD §7: Kachel-Hub, Statusblock, Bottom-Nav < 768 px.
   Reines statisches CSS, kein Build-Schritt (Entscheidung wie hydra). */
:root {
    --bg: #0f1117;
    --bg-elev: #171a23;
    --bg-elev2: #1f2330;
    --fg: #e8eaf0;
    --fg-muted: #9aa0b4;
    --line: #2a2f3d;
    --accent: #ffb020;
    --gold: #d4a017;
    --accent-fg: #1a1200;
    --steam: #1b2838;
    --steam-fg: #c7d5e0;
    --discord: #5865f2;
    --discord-fg: #fff;
    --ok: #35c46a;
    --err: #ff5c5c;
    --radius: 14px;
    --touch: 88px;        /* Mindesthöhe für Kacheln/Buttons (PRD §7) */
    --nav-h: 64px;
    --gutter: 16px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--fg-muted); }

/* Kopfzeile */
.topbar {
    display: flex; align-items: center; gap: 1rem;
    padding: 0 var(--gutter); height: 56px;
    background: var(--bg-elev); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; color: var(--fg); }
.brand:hover { text-decoration: none; color: var(--accent); }
.topnav { display: none; gap: 1.25rem; margin-left: 1rem; }
.topnav a { color: var(--fg-muted); font-weight: 600; }
.topnav a:hover { color: var(--fg); text-decoration: none; }
.topbar-right { margin-left: auto; display: flex; gap: 1rem; align-items: center; }
.topbar-right .lang { color: var(--fg-muted); font-weight: 700; font-size: .85rem; }
.topbar-right .me { font-weight: 600; }
.topbar-right .bell { display: inline-flex; align-items: center; gap: .35rem; color: var(--fg-muted); font-weight: 600; }
.topbar-right .bell:hover, .topbar-right .bell.active { color: var(--fg); text-decoration: none; }
.topbar-right .bell-label { display: none; }

/* Seite */
.page { max-width: 960px; margin: 0 auto; padding: var(--gutter); }
.narrow { max-width: 480px; margin: 0 auto; }
.card, .status {
    background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; margin-bottom: 1rem;
}
.status-login h2, .status-user h2 { text-align: center; }
.flash { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; background: var(--bg-elev2); }
.flash-success { border-left: 4px solid var(--ok); }
.flash-error { border-left: 4px solid var(--err); }

/* Buttons — Steam und Discord prominent (PRD §4.1) */
.btn {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; min-height: 56px; padding: .75rem 1rem;
    border: 0; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer;
    text-decoration: none !important;
}
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-secondary { background: var(--bg-elev2); color: var(--fg); border: 1px solid var(--line); }
.btn-steam { background: var(--steam); color: var(--steam-fg); border: 1px solid #2f4a63; }
.btn-discord { background: var(--discord); color: var(--discord-fg); }
.btn-small { min-height: 40px; width: auto; display: inline-flex; padding: .4rem .9rem; font-size: .9rem; }
.btn-link { background: none; color: var(--fg-muted); min-height: 40px; width: auto; display: inline-flex; padding: .4rem .6rem; font-weight: 600; }
.btn-link:hover { color: var(--fg); }
.ext-buttons { display: grid; gap: .75rem; margin: 1rem 0; }
.ext-buttons .btn { min-height: 64px; font-size: 1.05rem; }
.divider { display: flex; align-items: center; gap: .75rem; color: var(--fg-muted); font-size: .85rem; margin: 1rem 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Formulare */
.form-native, form.form-native { display: grid; gap: .9rem; }
form[name] { display: grid; gap: .9rem; }
label, .form-row { display: grid; gap: .3rem; }
label > span:first-child, .form-row > span:first-child { font-size: .85rem; color: var(--fg-muted); font-weight: 600; }
input[type=text], input[type=password], input[type=email], select {
    width: 100%; min-height: 48px; padding: .6rem .8rem;
    background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
label.check { display: flex; align-items: center; gap: .6rem; }
label.check input { width: 22px; height: 22px; }
.form-row.invalid input { border-color: var(--err); }
.error { color: var(--err); font-size: .85rem; }
.form-inline { display: inline; }
.links { text-align: center; color: var(--fg-muted); font-size: .95rem; }
.native-login[hidden], [data-native-only][hidden] { display: none; }

/* Kacheln */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    min-height: var(--touch); padding: 1rem;
    background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--fg); font-weight: 700; text-decoration: none !important;
}
.tile:hover { border-color: var(--accent); }
.tile .ico { width: 32px; height: 32px; }

/* Profil */
.facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.facts dt { color: var(--fg-muted); }
.facts dd { margin: 0; }
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--bg-elev2); font-size: .8rem; font-weight: 700; }
.badge-steam { background: var(--steam); color: var(--steam-fg); }
.badge-discord { background: var(--discord); color: var(--discord-fg); }
.linklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.linklist li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-height: 44px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; }
.identity { display: flex; align-items: center; gap: .75rem; font-size: 1.1rem; }
.placeholder { text-align: center; padding: 3rem 1rem; }
.placeholder .ico.big { width: 64px; height: 64px; margin: 0 auto 1rem; opacity: .7; }

/* Bottom-Nav: die mobile Shell auf ALLEN Seiten (PRD §7 D) */
.bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-elev); border-top: 1px solid var(--line);
}
.bottomnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--fg-muted); font-size: .72rem; font-weight: 600; text-decoration: none !important;
}
.bottomnav a.active { color: var(--accent); }
.bottomnav .ico { width: 24px; height: 24px; }

/* Icons als CSS-Masken (ein Pfad je Symbol, keine Icon-Font, kein Build) */
.ico { display: inline-block; width: 20px; height: 20px; background: currentColor; mask: var(--i) center / contain no-repeat; -webkit-mask: var(--i) center / contain no-repeat; }
.ico-home { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 2 12h3v8h5v-6h4v6h5v-8h3z'/></svg>"); }
.ico-seat { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 3h12v9H6zM4 13h16v3H4zm1 4h3v4H5zm11 0h3v4h-3z'/></svg>"); }
.ico-games { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 6h10a5 5 0 0 1 5 5v2a4 4 0 0 1-7 2.6L14 15h-4l-1 .6A4 4 0 0 1 2 13v-2a5 5 0 0 1 5-5zm0 3v2H5v2h2v2h2v-2h2v-2H9V9zm9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm2 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>"); }
.ico-food { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h2v7a3 3 0 0 1-1 2.2V22H6V11.2A3 3 0 0 1 5 9V2h2zm9 0c2 0 3 2 3 5v15h-2v-7h-3V7c0-3 .5-5 2-5z'/></svg>"); }
.ico-schedule { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v16H4zm2 5v9h12V9zm1 2h3v3H7z'/></svg>"); }
.ico-travel { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 4h14l2 7v8h-2v2h-3v-2H8v2H5v-2H3v-8zm2 2-1 5h12l-1-5zm-1 7v3h3v-3zm10 0v3h3v-3z'/></svg>"); }
.ico-sleep { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h2v8h8V8h8v10h-2v-2H5v2H3zM7 9a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/></svg>"); }
.ico-drinks { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 3h12l-1 12a3 3 0 0 1-3 3h-4a3 3 0 0 1-3-3zm2 2 .4 4h7.2l.4-4zM9 20h6v1H9z'/></svg>"); }
.ico-packlist { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 2h6l1 2h3v18H5V4h3zm1 2v2h4V4zm-3 6 1.4-1.4L10 10.2l3.6-3.6L15 8l-5 5zm0 7 1.4-1.4 1.6 1.6 3.6-3.6L15 15l-5 5z'/></svg>"); }
.ico-bell { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a6 6 0 0 0-6 6v4l-2 3v1h16v-1l-2-3V8a6 6 0 0 0-6-6zm-2 16a2 2 0 0 0 4 0z'/></svg>"); }
.ico-me { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 11c4 0 8 2 8 5v2H4v-2c0-3 4-5 8-5z'/></svg>"); }
.ico-steam { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-4.6 0-8.5-3.1-9.6-7.4l3.8 1.6a2.8 2.8 0 0 0 5.5-.6l3.4-2.5h.1a3.7 3.7 0 1 0-3.7-3.7v.1l-2.4 3.5a2.8 2.8 0 0 0-1.7.5L2 12.2A10 10 0 0 1 12 2zm3.3 5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM8.5 15l-1.4-.6a2 2 0 0 0 3.7.3 2 2 0 0 0-1.1-2.6l1.5.6a1.5 1.5 0 0 1-.9 2.8z'/></svg>"); }
.ico-discord { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.5 5.3A17 17 0 0 0 15.4 4l-.5 1a16 16 0 0 0-5.8 0l-.5-1a17 17 0 0 0-4.1 1.3C1.9 9.2 1.2 13 1.5 16.7A17 17 0 0 0 6.6 19l1-1.7a11 11 0 0 1-1.7-.8l.4-.3a12 12 0 0 0 11.4 0l.4.3-1.7.8 1 1.7a17 17 0 0 0 5.1-2.3c.4-4.3-.7-8-3-11.4zM8.7 14.4c-1 0-1.8-.9-1.8-2s.8-2 1.8-2 1.8.9 1.8 2-.8 2-1.8 2zm6.6 0c-1 0-1.8-.9-1.8-2s.8-2 1.8-2 1.8.9 1.8 2-.8 2-1.8 2z'/></svg>"); }

@media (min-width: 768px) {
    body { padding-bottom: 0; }
    .bottomnav { display: none; }
    .topbar-right .bell-label { display: inline; }
    .topnav { display: flex; }
    .tiles { grid-template-columns: repeat(3, 1fr); }
    .ext-buttons { grid-template-columns: 1fr 1fr; }
}

/* Statusblock für Angemeldete (PRD §7, E20) */
.status-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.progress { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .25rem; min-width: 140px; }
.progress-bar { display: block; width: 140px; height: 6px; border-radius: 3px; background: var(--bg-elev2); position: relative; overflow: hidden; }
.progress-bar::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--accent); border-radius: 3px; }
.progress-text { font-size: .8rem; color: var(--fg-muted); }
.tasklist { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.task:first-child { border-top: 0; }
.task-mark { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; background: var(--bg-elev2); color: var(--fg-muted); }
.task-done .task-mark { background: var(--ok); color: #04210f; }
.task-open .task-mark { border: 2px solid var(--accent); color: var(--accent); background: transparent; }
.task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.task-title { font-weight: 700; }
.task-state { font-size: .9rem; }
.task-preview { opacity: .55; }
.task-action { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.task-action .btn-small { min-height: 40px; }
.taskgroup { margin-top: .75rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.taskgroup summary { cursor: pointer; font-weight: 700; color: var(--fg-muted); list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 40px; }
.taskgroup summary::-webkit-details-marker { display: none; }
.taskgroup summary::before { content: "›"; display: inline-block; transition: transform .15s; }
.taskgroup[open] summary::before { transform: rotate(90deg); }

/* Eckdaten */
.facts-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1rem; padding: .75rem var(--gutter); margin: 0 0 1rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); font-size: .95rem; }
.facts-bar div { display: flex; flex-direction: column; }
.facts-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); }
@media (min-width: 768px) { .facts-bar { grid-template-columns: repeat(4, 1fr); } }

/* Badges */
.badge-ok { background: rgba(53,196,106,.18); color: var(--ok); }
.badge-warn { background: rgba(255,176,32,.18); color: var(--accent); }
.danger { color: var(--err); }

/* Verwaltung */
.subnav { display: flex; gap: 1rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); overflow-x: auto; }
.subnav a { padding: .5rem 0; color: var(--fg-muted); font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; }
.subnav a.active, .subnav a:hover { color: var(--fg); border-color: var(--accent); text-decoration: none; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.table .actions { white-space: nowrap; }
.table .actions form { margin: 0 .25rem .25rem 0; }
.table-wrap { overflow-x: auto; }
.form-row-inline { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.form-row-inline input[type=text] { width: auto; min-width: 200px; }
.input-small { width: 160px !important; min-height: 40px !important; padding: .3rem .5rem !important; }

/* Programm / Fahrplan: Zeitraster je Programmtag (Vorbild CCC-Fahrplan).
   Stundenachse links, Events als Blöcke (Zeile = 15 min, Höhe = Dauer),
   parallele Events nebeneinander in 12 Spalten, Programmtag 6:00–6:00.
   Tagesmarken kleben unter der Topbar, „Jetzt" ist eine Linie im Raster. */
.tl-bar { position: sticky; top: 56px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.tl-actions { display: flex; gap: .4rem; align-items: center; }
.tl-plan[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.clock { display: flex; flex-direction: column; line-height: 1.15; }
.clock-time { font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.clock-date { font-size: .8rem; color: var(--fg-muted); }
.timeline { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.tl-day { position: sticky; top: calc(56px + 3.6rem); z-index: 5; margin: .6rem 0 0; padding: .55rem 0 .35rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.cal-dayhead { font-size: .95rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.tgrid { --row: 12px; position: relative; display: grid; grid-template-columns: 3rem repeat(12, minmax(0, 1fr)); grid-auto-rows: var(--row); grid-template-rows: repeat(var(--rows, 4), var(--row)); column-gap: 3px; background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(var(--row) * 4)); border-radius: 6px; }
.tg-hour { grid-column: 1; font-size: .72rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; padding: 1px 0 0; line-height: 1; }
.tgrid.drop-over { background-color: rgba(255,176,32,.05); }
.is-dragging .tgrid[data-drop] { outline: 2px dashed var(--line); outline-offset: 2px; }
.tg-cursor { position: absolute; left: 3rem; right: 0; height: 0; border-top: 2px solid var(--accent); pointer-events: none; z-index: 4; }
.tg-cursor b { position: absolute; right: .4rem; top: -.8rem; padding: .05rem .4rem; border-radius: 4px; background: var(--accent); color: var(--accent-fg); font-size: .75rem; }
.tl-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--accent); z-index: 3; pointer-events: none; color: var(--accent); font-weight: 800; font-size: .72rem; letter-spacing: .04em; line-height: 1; padding-top: 2px; text-align: right; scroll-margin-top: 200px; }
.cal-item { position: relative; min-height: 0; min-width: 0; z-index: 2; margin: 1px 0; }
.cal-event { display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: .2rem 2rem .2rem .45rem; border-radius: 6px; color: var(--fg); border-left: 4px solid var(--line); background: var(--bg-elev); font-size: .8rem; line-height: 1.25; }
.cal-event:hover { text-decoration: none; background: var(--bg-elev2); }
.cal-event.running { outline: 2px solid var(--accent); }
.cal-event.past { opacity: .55; }
.cal-event.draft { opacity: .6; border-style: dashed; }
.cal-event[draggable="true"] { cursor: grab; }
.cal-head { display: flex; gap: .4rem; align-items: baseline; min-width: 0; }
.cal-time { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .72rem; }
.cal-end { font-weight: 400; color: var(--fg-muted); }
.cal-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-meta { font-size: .72rem; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item.is-short .cal-event { justify-content: center; padding-top: 0; padding-bottom: 0; }
/* Schmale Bildschirme: Titel umbrechen statt abschneiden, Endzeit weglassen */
@media (max-width: 600px) {
    .cal-head { flex-wrap: wrap; row-gap: 0; }
    .cal-end { display: none; }
    .cal-title { white-space: normal; }
    .cal-event { padding-right: 1.4rem; }
    .tgrid { grid-template-columns: 2.6rem repeat(12, minmax(0, 1fr)); }
}
.cal-item.is-short .cal-meta { display: none; }
.cal-cover { position: absolute; right: 1.6rem; top: .2rem; bottom: .2rem; height: auto; max-height: 48px; border-radius: 4px; opacity: .85; }
.cal-mine { position: absolute; right: .4rem; bottom: .25rem; padding: 0 .35rem; font-size: .7rem; }
.cal-resize { position: absolute; left: 4px; right: 0; bottom: -3px; height: 8px; cursor: ns-resize; z-index: 3; touch-action: none; border-radius: 0 0 6px 6px; }
.cal-resize::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 28px; height: 3px; margin-left: -14px; border-radius: 2px; background: var(--fg-muted); opacity: 0; }
.cal-item:hover .cal-resize::after, .cal-item.resizing .cal-resize::after { opacity: .7; }
.cal-item.resizing .cal-event { outline: 2px solid var(--accent); }
.cal-del { position: absolute; right: 0; top: 0; }
.cal-del .btn-link { min-height: 24px; padding: 0 .4rem; font-size: 1rem; line-height: 1; opacity: .5; }
.cal-del .btn-link:hover { opacity: 1; }
.cat-game { border-left-color: #4f8cff; }
.cat-tournament { border-left-color: var(--accent); }
.cat-food { border-left-color: #ff7a59; }
.cat-orga { border-left-color: #9aa0b4; }
.cat-other { border-left-color: #b57bff; }
.badge-cat { font-size: .7rem; }
.crumbs { margin: 0 0 .5rem; font-size: .9rem; }
.facts-inline { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.facts-inline dt { color: var(--fg-muted); }
.facts-inline dd { margin: 0; }
.signup-form { display: grid; gap: .75rem; margin: .5rem 0 1rem; }
.btn-group { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.userlist { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.userlist li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .45rem; }
.chip-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--bg-elev2); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }
.chip-name { font-weight: 600; }
.mod-tools summary { cursor: pointer; color: var(--fg-muted); font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.prose :is(h1, h2, h3) { margin-top: 1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose table { border-collapse: collapse; }
.prose td, .prose th { border: 1px solid var(--line); padding: .3rem .5rem; }
.prose img { max-width: 100%; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
textarea { width: 100%; min-height: 120px; padding: .6rem .75rem; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input[type=time], input[type=number], input[type=datetime-local] { width: 100%; min-height: 48px; padding: .6rem .75rem; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
label.check.form-row { flex-direction: row; }

/* Guthaben */
.balance-big { font-size: 2.2rem; font-weight: 800; margin: .25rem 0; font-variant-numeric: tabular-nums; }
.balance-big.neg, .tx-amount.neg { color: var(--danger, #e5484d); }
.balance-big.pos, .tx-amount.pos { color: var(--ok, #2ecc71); }
.status-balance { margin: .25rem 0 .75rem; }
.pay-box { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.openlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.openlist li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.txlist li { grid-template-columns: 70px 1fr auto auto; }
.kiosk-tx { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.kiosk-tx li { display: grid; grid-template-columns: 70px 1fr auto auto; gap: .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.kiosk-tx li.deleted .tx-label, .kiosk-tx li.deleted .tx-amount { text-decoration: line-through; opacity: .6; }
.tx-time { color: var(--fg-muted); font-variant-numeric: tabular-nums; font-size: .9rem; }
.tx-amount { font-variant-numeric: tabular-nums; font-weight: 700; }
.key-reveal { font-family: ui-monospace, monospace; word-break: break-all; background: var(--bg); padding: .5rem; border-radius: 8px; display: block; }

/* Essen: schlichte Liste, „zu spät" ausgegraut */
.food-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.food-item { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; background: var(--bg-elev); }
.food-item.late { opacity: .5; }
.food-item.draft { border-style: dashed; }
.food-link { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .25rem .9rem; align-items: center; padding: .55rem .75rem; color: var(--fg); }
.food-link:hover { text-decoration: none; background: var(--bg-elev2); border-radius: 10px; }
.food-when { font-size: .8rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; line-height: 1.3; }
.food-when b { font-size: 1rem; color: var(--fg); }
.food-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.food-title { font-weight: 700; }
.food-meta { font-size: .8rem; color: var(--fg-muted); }
.food-state { font-size: .8rem; color: var(--fg-muted); white-space: nowrap; text-align: right; }
.food-cover { width: 64px; height: 30px; object-fit: cover; border-radius: 4px; }
@media (max-width: 600px) {
    .food-link { grid-template-columns: minmax(0, 1fr) auto; }
    .food-when { grid-column: 1 / -1; }
    .food-when br { display: none; }
    .food-when b { margin-left: .4rem; }
}

/* Sitzplan */
.plan-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; overflow: auto; }
.plan-wrap svg.plan { width: 100%; height: auto; max-height: 80vh; display: block; }
.plan a.seat { cursor: pointer; }
.plan a.seat circle { fill: #e9ecef; stroke: #495057; stroke-width: 1.5; }
.plan a.seat:hover circle, .plan a.seat:focus circle { stroke: var(--accent); stroke-width: 3; }
.plan a.seat-reserved circle { fill: #ffd166; }
.plan a.seat-arrived circle { fill: #06d6a0; }
.plan a.seat-admin_assigned circle { fill: #8ecae6; }
.plan a.seat-adminonly circle { fill: #dee2e6; stroke-dasharray: 3 2; }
.plan a.seat-mine circle { stroke: #e63946; stroke-width: 3; }
.plan a.seat-selected circle { stroke: var(--accent); stroke-width: 4; }
.plan .seat-initial { font: 700 13px system-ui, sans-serif; fill: #212529; pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; font-size: .85rem; color: var(--fg-muted); margin: .5rem 0 1rem; }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #495057; display: inline-block; background: #e9ecef; }
.dot-reserved { background: #ffd166; } .dot-arrived { background: #06d6a0; } .dot-adminonly { border-style: dashed; } .dot-mine { border-color: #e63946; border-width: 3px; }
.seat-panel h3 { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.seat-table summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; color: var(--fg-muted); }
.table tr.active td { background: var(--bg-elev2); }
.flash-warning { background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; }
.flash .form-inline { display: inline-block; margin-left: .5rem; }

/* Ansagen / Nachrichten */
.noticelist { list-style: none; padding: 0; margin: 0; }
.noticelist li { display: flex; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.noticelist li:first-child { border-top: 0; }
.noticelist time { flex: 0 0 4.5rem; font-variant-numeric: tabular-nums; }
.notice-broadcast strong { color: var(--accent); }
.push { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }

/* Spiele */
.checklist { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .5rem 0; }
.shared-form .form-row-inline { margin-top: .5rem; }
.small { font-size: .8rem; }

/* Turnier & Lobbys */
.t-round { margin: .75rem 0; }
.t-round.t-current { border-left: 3px solid var(--accent); padding-left: .6rem; }
.t-groups { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.t-group { background: var(--bg-elev2); border-radius: var(--radius); padding: .6rem .75rem; }
.t-group h5, .t-group h6 { margin: 0 0 .35rem; }
.t-slots { list-style: none; margin: 0; padding: 0; }
.t-slots li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .15rem 0; }
.t-tools { border-top: 1px dashed var(--line); margin-top: .4rem; padding-top: .4rem; font-size: .85rem; }
.t-team { border: 1px solid var(--line); border-radius: 6px; padding: .4rem .5rem; margin: .3rem 0; }
.t-team.t-won { border-color: #06d6a0; }
.t-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; align-items: center; }
.input-rank { width: 3.2rem; }
.podium .champion { font-size: 1.1rem; font-weight: 700; }
.podium .medal { font-size: 1.2rem; }
.lobby { border-top: 1px solid var(--line); padding: .6rem 0; }
.lobby-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0; }
.lobby-form input[type=text] { flex: 1 1 10rem; }
.connect code { font-size: 1.1rem; padding: .1rem .4rem; background: var(--bg-elev2); border-radius: 4px; }

/* Redaktionelle Seiten (Schritt 8) */
.prose img { max-width: 100%; height: auto; border-radius: 8px; }
.prose code { background: var(--surface-2, rgba(127,127,127,.15)); padding: .1em .35em; border-radius: 4px; }
.about-link { text-align: center; margin: 1rem 0; }
.page-locales { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .page-locales { grid-template-columns: 1fr 1fr; } }
.page-editor fieldset { border: 1px solid var(--border, #ccc); border-radius: 8px; padding: .75rem; min-width: 0; }
.page-editor textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
/* Markdown-Felder: Leiste über dem Feld, Vorschau darunter */
.md-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .3rem .4rem; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg-elev); }
.md-tools button { min-width: 2rem; min-height: 2rem; padding: 0 .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); cursor: pointer; font-size: .9rem; }
.md-tools button:hover { background: var(--bg-elev2); }
.md-sep { width: 1px; height: 1.4rem; background: var(--line); margin: 0 .2rem; }
.md-spacer { flex: 1; }
.md-preview-toggle { font-size: .85rem; margin: 0; }
.md-head { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }
.md-field textarea, label.md-field textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.md-preview { border: 1px dashed var(--line); border-radius: 0 0 8px 8px; padding: .5rem .75rem; margin-top: -.5rem; margin-bottom: .5rem; max-height: 24rem; overflow: auto; font-size: .95rem; min-height: 2rem; }
.md-preview[hidden] { display: none; }

/* Startseite: Über-Teaser, Nächste LAN, Questlog */
.about-teaser summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 40px; }
.about-teaser summary::-webkit-details-marker { display: none; }
.about-teaser summary::before { content: "›"; display: inline-block; font-weight: 800; transition: transform .15s; }
.about-teaser[open] summary::before { transform: rotate(90deg); }
.about-teaser summary h2 { margin: 0; font-size: 1.1rem; }
.about-teaser .prose { margin-top: .5rem; }
.next-edition h2 { margin-top: 0; font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.next-edition .facts-bar { margin: 0; }
.quest-profile { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .25rem 0 .75rem; }
.level-badge { background: var(--accent); color: #0b0b0b; font-weight: 800; border-radius: 999px; padding: .15rem .65rem; }
.quest-rank { font-weight: 700; }
.progress.xp { align-items: flex-start; }
.honor { color: #d4a017; font-weight: 700; }
.chip { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .05rem .45rem; background: var(--bg-elev2); color: var(--fg-muted); vertical-align: middle; white-space: nowrap; }
.chip.honor { color: #d4a017; }
.quest-group { margin: .75rem 0 .25rem; font-size: .95rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.page-edit-row { margin: .5rem 0 0; text-align: right; }
.safety-note { margin-top: 1rem; }
.safety-note h2 { margin-top: 0; font-size: 1.05rem; }
.status-user:not(.show-done) .task-done { display: none; }
.status-user.show-done .task-alldone { display: none; }
.task-alldone { font-size: .9rem; padding: .4rem 0; }
.taskgroup summary .progress { margin-left: auto; }
.taskgroup[data-remember] { margin-top: .5rem; }

/* Spiele: Galerie der Vorschläge (Jellyfin/Steam-Store-Optik), Stimmen als Balken. */
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 1rem; border-bottom: 1px solid var(--line); }
.tabs a { padding: .5rem .8rem; border-radius: 10px 10px 0 0; color: var(--fg-muted); font-weight: 700; text-decoration: none; }
.tabs a:hover { color: var(--fg); background: var(--bg-elev); }
.tabs a.active { color: var(--accent); background: var(--bg-elev); border: 1px solid var(--line); border-bottom-color: var(--bg-elev); margin-bottom: -1px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.gcard { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .12s, box-shadow .12s; }
.gcard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.gcard.voted .gvote-n { color: var(--accent); }
/* Favoriten der Orga: Goldrand statt eigener Tab */
.gcard.fav { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(212,160,23,.25); }
.gcover { position: relative; aspect-ratio: 460 / 215; background: var(--bg-elev2); }
.gcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcover-ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; font-weight: 800; color: var(--fg-muted); }
.gbadge { position: absolute; left: .5rem; bottom: .5rem; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: rgba(0,0,0,.65); color: #fff; text-decoration: none; }
.gbadge-fav { background: var(--gold); color: #1a1200; }
.gbadge-sched { left: auto; right: .5rem; background: var(--accent); color: var(--accent-fg); }
.gbadge-sched + .gbadge-sched { bottom: 2rem; }
.gbody { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .8rem .8rem; }
.gtitle { margin: 0; font-size: 1rem; line-height: 1.25; }
.gtitle a { color: var(--fg); }
.gmeta, .gnote { margin: 0; font-size: .8rem; color: var(--fg-muted); }
.gnote { color: var(--fg); }
.gvote { display: flex; align-items: center; gap: .6rem; margin-top: .2rem; }
.gvote-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-elev2); overflow: hidden; }
.gvote-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.gcard.fav .gvote-bar span { background: var(--gold); }
.gvote-n { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gactions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .3rem; }
.gactions form { display: inline; }
.gactions .btn-link { min-height: 32px; padding: .2rem .4rem; }
.gcard.proposed { opacity: .75; }
/* Spiel vorschlagen: Suchfeld mit Dropdown über der Vorschlagsliste */
.propose { margin-bottom: 1.25rem; }
.gs { position: relative; }
.gs-form { display: flex; gap: .5rem; }
.gs-form input[type="search"] { flex: 1; min-width: 10rem; }
.gs-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: .25rem 0 0; padding: .25rem; list-style: none; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.45); max-height: 60vh; overflow: auto; }
.gs-item { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; border-radius: 8px; cursor: pointer; }
.gs-item:hover, .gs-item.active { background: var(--bg-elev2); }
.gs-item img, .gs-item .gs-ph { width: 64px; height: 30px; object-fit: cover; border-radius: 4px; background: var(--bg-elev2); flex: none; }
.gs-item .gs-ph { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--fg-muted); }
.gs-item .gs-name { flex: 1; font-weight: 600; }
.gs-item .gs-meta { font-size: .8rem; color: var(--fg-muted); white-space: nowrap; }
.gs-item.gs-proposed .gs-name { color: var(--fg-muted); }
.gs-item.gs-custom { border-top: 1px solid var(--line); margin-top: .25rem; padding-top: .55rem; color: var(--accent); font-weight: 600; }
.gs-item.gs-custom .gs-ph { color: var(--accent); }
.propose .custom { margin-top: .75rem; }
.propose .custom summary { cursor: pointer; font-weight: 600; color: var(--fg-muted); }
.gallery-hits { margin-top: 1rem; }
.gdur { margin-top: .15rem; }
.gdur summary { cursor: pointer; list-style: none; color: var(--fg-muted); }
.gdur summary:hover { color: var(--fg); }
.gdur summary::-webkit-details-marker { display: none; }
.gdur-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0; font-size: .8rem; }
.gdur-form .input-small { width: 5rem !important; min-height: 32px !important; }
.gdur-form .btn-small { min-height: 32px; }
.custom-form { display: grid; gap: .6rem; max-width: 420px; }
.custom-form label { display: grid; gap: .2rem; }
.custom-form label span { font-size: .85rem; color: var(--fg-muted); }
.cal-cover { width: 56px; height: 26px; object-fit: cover; border-radius: 6px; flex: none; align-self: center; }

/* Programm planen (Mods): Seitenleiste mit Vorschlägen, Ablageziele in der Zeitleiste. */
.schedule-wrap { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 900px) {
    .schedule-wrap.has-side { grid-template-columns: 260px minmax(0, 1fr); }
    .schedule-wrap.has-side .tl-side { grid-column: 1; grid-row: 1; }
    .schedule-wrap.has-side .timeline { grid-column: 2; grid-row: 1; }
}
/* Leiste „Ohne Termin" links: undatierte Events und offene Vorschläge, Ablageziel „Termin weg" */
.tl-side { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; min-width: 0; }
@media (min-width: 900px) { .tl-side { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; } }
.tl-side h3 { margin-bottom: .2rem; }
.tl-side h4 { margin: .8rem 0 .3rem; font-size: .85rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.tl-side .small { font-size: .8rem; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.side-game, .side-ev { display: flex; align-items: center; gap: .5rem; padding: .35rem .45rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.side-ev { flex-direction: column; align-items: stretch; gap: .1rem; border-left-width: 4px; }
.side-game[draggable="true"], .side-ev[draggable="true"] { cursor: grab; }
.side-game:active, .side-ev:active { cursor: grabbing; }
.side-game.fav { border-color: var(--gold); }
.side-game img, .side-ph { width: 52px; height: 26px; object-fit: cover; border-radius: 6px; flex: none; }
.side-ph { display: flex; align-items: center; justify-content: center; background: var(--bg-elev2); font-weight: 800; }
.side-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.side-title { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.side-meta { font-size: .75rem; color: var(--fg-muted); }
.side-add { min-height: 32px; padding: .2rem .6rem; flex: none; }
.dragging { opacity: .4; }
.is-dragging [data-drop] * { pointer-events: none; }
.is-dragging .tl-side[data-drop] { outline: 2px dashed var(--line); outline-offset: 2px; }
.tl-side[data-drop].drop-over { outline: 2px dashed var(--accent); background: rgba(255,176,32,.1); }

/* Sammelbestellung (Essen): Posten je Besteller, Host-Werkzeuge, Abrechnung. */
.order-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.order-add input[type="text"]:first-of-type { flex: 1; min-width: 12rem; }
.input-qty { width: 4.5rem !important; }
.input-price { width: 6.5rem !important; }
.order-user { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.order-user h4 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .25rem; }
.order-user.mine { background: rgba(255,176,32,.05); border-radius: 10px; padding: .5rem; }
.order-user-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.order-items td { padding: .35rem .4rem; }
.order-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-items tr.item-unavailable .order-text, .order-items tr.item-unavailable .order-price { text-decoration: line-through; color: var(--fg-muted); }
.order-items tr.item-requested { opacity: .8; }
.order-edit { display: inline-block; }
.order-edit summary { list-style: none; display: inline; cursor: pointer; }
.order-edit summary::-webkit-details-marker { display: none; }
.order-edit[open] { display: block; }
.order-bill { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.order-total { margin-top: 1rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.event-cover { max-width: 460px; width: 100%; border-radius: var(--radius); margin: 0 0 1rem; display: block; }

/* Schlafen: Liste wie Essen, Detail mit Belegungstabelle */
.sleep-item.orga { border-left-color: var(--accent); }
.sleep-item .food-when { text-align: center; }
.sleep-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin: 0 0 .5rem; }
.sleep-meta > span { color: var(--fg-muted); }
.sleep-features { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.sleep-desc { white-space: pre-line; }
.sleep-mine { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 0; }
.sleep-occupants { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.sleep-occupants li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sleep-spots td:first-child { white-space: nowrap; }
.sleep-manage { padding: .75rem 1rem; }
.sleep-manage > summary { margin: 0; }
.sleep-manage > form { margin-top: .75rem; }
.sleep-spot-editor input[type=text] { min-height: 40px; padding: .35rem .6rem; }
.sleep-spot-editor .input-small { width: 7em; }
.sleep-holder { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin-bottom: .3rem; }
.sleep-nights { margin-bottom: .75rem; }
.sleep-nights > summary { cursor: pointer; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 999px; background: var(--bg-elev2); border: 1px solid var(--line); font-size: .9rem; list-style: none; width: auto; }
.sleep-nights > summary::-webkit-details-marker { display: none; }
.sleep-nights > summary::before { content: '▸'; font-size: .8rem; color: var(--fg-muted); transition: transform .15s; }
.sleep-nights[open] > summary::before { transform: rotate(90deg); }
.sleep-nights > summary:hover { border-color: var(--accent); }
.sleep-nights-list { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .25rem 0; }
.sleep-nights-list label.check { min-height: 36px; }
.sleep-book { margin-top: .5rem; }
.plan a.spot circle { fill: #e9ecef; }
.plan a.spot.seat-requested circle { fill: #ffd166; }
.plan a.spot.seat-confirmed circle { fill: #06d6a0; }
tr:target td { background: var(--bg-elev2); outline: 2px solid var(--accent); }

/* Sichtbarkeitsblöcke (ContentGate): Hinweis anstelle eines verborgenen Blocks */
.gated { border-left: 3px solid var(--line); padding-left: .6rem; font-style: italic; }
.page-visibility { max-width: 24rem; margin-bottom: .75rem; }