:root { color-scheme: dark; font-family: "Segoe UI", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #071b31; color: #ecf4fb; }
header { padding: 3rem max(1.5rem, calc((100vw - 1050px) / 2)); background: linear-gradient(120deg, #aa171f, #661014 58%, #071b31); }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.04em; }
header p { margin: .6rem 0 0; color: #ffe9e9; font-size: 1.1rem; }
main { max-width: 1050px; margin: 0 auto; padding: 2.25rem 1.5rem 3rem; }
h2 { margin: 0 0 1.1rem; font-size: 1.15rem; color: #b9d7ed; text-transform: uppercase; letter-spacing: .08em; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
a.tile { display: block; min-height: 145px; padding: 1.35rem; color: inherit; text-decoration: none; background: #102b46; border: 1px solid #254967; border-radius: .8rem; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
a.tile:hover, a.tile:focus-visible { transform: translateY(-3px); background: #153a5e; border-color: #65b5e8; outline: none; }
.icon { display: block; margin-bottom: .7rem; font-size: 1.8rem; }
.title { display: block; font-size: 1.2rem; font-weight: 700; }
.description { display: block; margin-top: .35rem; color: #b9d7ed; line-height: 1.4; }
/* Zähler auf der Kachel des Aufgabenmanagers: rot = zu bestätigen (Handlungsbedarf), blau = neue Infos.
   Weißer Rand trennt die Kreise von der Kachel, weiße Schrift auf kräftigem Grund bleibt gut lesbar. */
a.tile { position: relative; }
a.tile.tile--infos { border-color: #5aa9ff; box-shadow: 0 0 0 1px #5aa9ff; }
a.tile.tile--bestaetigen { border-color: #ff6b6b; box-shadow: 0 0 0 1px #ff6b6b; }
.tile-kreise { position: absolute; top: -.6rem; right: -.6rem; display: flex; gap: .35rem; }
.tile-kreis { min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem; display: flex; align-items: center; justify-content: center; border: 3px solid #ffffff; border-radius: 999px; color: #ffffff; font-size: 1.05rem; font-weight: 800; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); animation: zaehler-erscheint .35s ease-out; }
.tile-kreis--bestaetigen { background: #d0161f; }
.tile-kreis--infos { background: #1565c0; }
.tile-hinweise { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.tile-hinweis { display: inline-block; padding: .2rem .65rem; border-radius: 999px; color: #ffffff; font-size: .85rem; font-weight: 700; }
.tile-hinweis--bestaetigen { background: #d0161f; }
.tile-hinweis--infos { background: #1565c0; }
@keyframes zaehler-erscheint { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tile-kreis { animation: none; } }
.badge { display: inline-block; margin-top: .75rem; padding: .15rem .55rem; border-radius: 999px; background: #254967; color: #d7e6f2; font-size: .8rem; }
.notice { margin-top: 2rem; padding: 1rem 1.15rem; border-left: 4px solid #e3b341; background: #182d43; color: #d7e6f2; }
footer { max-width: 1050px; margin: 0 auto; padding: 0 1.5rem 2rem; color: #93b3cb; font-size: .9rem; }
footer p { margin: 0 0 .3rem; }
/* Versionsanzeige wie im Aufgabenmanager: klein und unauffällig, bei Störung deutlich. */
.versionsanzeige { font-size: .75rem; color: #7f9fb8; }
.versionsanzeige--fehler { color: #ffd27a; font-weight: 600; }

/* Angemeldete Person und Abmelden im Kopfbereich */
.session { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; color: #ffe9e9; }
.session[hidden] { display: none; }
button { font: inherit; cursor: pointer; }
.session button { padding: .35rem .9rem; color: #ffe9e9; background: transparent; border: 1px solid #ffe9e9; border-radius: .5rem; }
.session button:hover, .session button:focus-visible { background: rgba(255, 233, 233, .15); outline: none; }

/* Anmelde- und Störungsseite */
.card { max-width: 420px; margin: 2.5rem auto; padding: 1.75rem; background: #102b46; border: 1px solid #254967; border-radius: .8rem; }
.card h2 { margin-bottom: 1.25rem; }
.card p { margin: 0 0 1rem; color: #d7e6f2; line-height: 1.5; }
label { display: block; margin: 0 0 .35rem; font-weight: 600; }
input { width: 100%; margin: 0 0 1.1rem; padding: .7rem .8rem; font: inherit; color: #ecf4fb; background: #071b31; border: 1px solid #254967; border-radius: .5rem; }
input:focus-visible { border-color: #65b5e8; outline: 2px solid #65b5e8; outline-offset: 1px; }
.primary { width: 100%; padding: .75rem; font-weight: 700; color: #fff; background: #aa171f; border: 0; border-radius: .5rem; }
.primary:hover, .primary:focus-visible { background: #c41d27; outline: none; }
.primary:disabled { cursor: wait; opacity: .7; }
a.primary { display: block; text-align: center; text-decoration: none; }
.error { margin: 0 0 1.1rem; padding: .75rem .9rem; border-left: 4px solid #e5534b; background: #3a1d24; color: #ffe9e9; }
.error[hidden] { display: none; }
.card .hint { margin: 1.25rem 0 0; color: #93b3cb; font-size: .9rem; }

/* Link zur Verwaltung / zurück zur Startseite im Kopfbereich */
.session-link { color: #ffe9e9; }
.session-link[hidden] { display: none; }

/* Verwaltung: Kacheln mit ihren Freischaltungen */
.intro { max-width: 70ch; margin: 0 0 1.25rem; color: #d7e6f2; line-height: 1.5; }
code { padding: .05rem .3rem; border-radius: .3rem; background: #182d43; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.admin-tile { display: flex; flex-direction: column; gap: .6rem; padding: 1.2rem; background: #102b46; border: 1px solid #254967; border-radius: .8rem; }
.admin-tile-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.admin-tile-head .icon { margin: 0; font-size: 1.4rem; }
.admin-tile-head h3 { margin: 0; font-size: 1.15rem; }
.admin-tile-head .badge { margin: 0; }
.admin-tile-url { margin: 0; color: #93b3cb; font-size: .85rem; word-break: break-all; }
.admin-tile-warning { margin: 0; padding: .5rem .7rem; border-left: 4px solid #e3b341; background: #182d43; color: #ffe9b0; }
.admin-tile > .secondary { align-self: flex-start; margin-top: auto; }
.admin-tile-description { margin: 0; color: #d7e6f2; }
.admin-tile-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.admin-tile-actions button { width: auto; }
.admin-tile-actions button:disabled { opacity: .4; cursor: default; }
.admin-new { width: auto; padding: .55rem 1.2rem; }
.admin-new:disabled { opacity: .5; cursor: default; }
button.danger { border-color: #e3b341; color: #ffe9b0; }
.picker label.checkbox { display: flex; gap: .6rem; align-items: center; font-weight: 400; }
.picker label.checkbox input { width: auto; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.chip { padding: .2rem .6rem; border-radius: 999px; background: #1f4b70; color: #ecf4fb; font-size: .85rem; }
.chip-missing { background: #3a1d24; color: #ffd3d3; text-decoration: line-through; }
.secondary { padding: .45rem .9rem; color: #ecf4fb; background: #153a5e; border: 1px solid #65b5e8; border-radius: .5rem; }
.secondary:hover, .secondary:focus-visible { background: #1d4d7a; outline: none; }
.changes { margin: 0; padding-left: 1.2rem; color: #d7e6f2; line-height: 1.6; }
.changes-time { margin-right: .6rem; color: #93b3cb; }

/* Gruppenauswahl */
.picker { width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.5rem; color: #ecf4fb; background: #102b46; border: 1px solid #254967; border-radius: .8rem; }
.picker::backdrop { background: rgba(3, 12, 22, .7); }
.picker h2 { margin-bottom: 1rem; text-transform: none; letter-spacing: 0; color: #ecf4fb; }
.picker input[type="search"] { margin-bottom: .5rem; }
.picker-count { margin: 0 0 .6rem; color: #93b3cb; font-size: .9rem; }
.picker-groups { max-height: 50vh; overflow-y: auto; padding-right: .3rem; }
.picker-category { margin-bottom: .5rem; border-bottom: 1px solid #254967; }
.picker-category summary { padding: .4rem 0; font-weight: 700; color: #b9d7ed; cursor: pointer; }
.picker-option { display: flex; gap: .6rem; align-items: center; margin: 0; padding: .3rem .2rem; font-weight: 400; cursor: pointer; }
.picker-option:hover { background: #153a5e; }
.picker-option input { width: auto; margin: 0; }
.picker-members { margin-left: auto; color: #93b3cb; font-size: .8rem; white-space: nowrap; }
.picker-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.picker-actions .primary { width: auto; padding: .55rem 1.2rem; }

/* Mitteilungen an alle Mitglieder (Startseite) */
.announcements { margin-top: 2.5rem; padding: 1.4rem; background: #102b46; border: 1px solid #254967; border-radius: .8rem; }
.announcements[hidden] { display: none; }
.announcements h3 { margin: 1.5rem 0 .6rem; font-size: 1rem; color: #b9d7ed; }
.announcement-form { max-width: 640px; }
textarea { width: 100%; margin: 0; padding: .7rem .8rem; font: inherit; color: #ecf4fb; background: #071b31; border: 1px solid #254967; border-radius: .5rem; resize: vertical; }
textarea:focus-visible { border-color: #65b5e8; outline: 2px solid #65b5e8; outline-offset: 1px; }
.field-hint { margin: .25rem 0 1rem; color: #93b3cb; font-size: .85rem; text-align: right; }
.announcement-form input[type="date"] { width: auto; min-width: 12rem; }
.announcement-form .primary { width: auto; padding: .65rem 1.3rem; }
.announcement-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.announcement { padding: .8rem 1rem; background: #071b31; border: 1px solid #254967; border-radius: .6rem; }
.announcement-text { margin: 0 0 .35rem; white-space: pre-line; }
.announcement-meta { margin: 0 0 .6rem; color: #93b3cb; font-size: .85rem; }
.announcement-empty { color: #93b3cb; }