/* =========================================================================
   Adminbereich.
   Gleiche Farbwelt wie die Website, aber dichter und ruhiger: hier wird
   gearbeitet, nicht überzeugt. Keine Animationen, keine Effekte.
   ========================================================================= */

:root {
  --ground: #0A0C12; --surface: #11141C; --surface-2: #181C26;
  --line: rgba(190,205,232,.11); --line-soft: rgba(190,205,232,.06);
  --ink: #F2EFE9; --ink-2: rgba(242,239,233,.62); --ink-3: rgba(242,239,233,.38);
  /* Gleiche Aufteilung wie auf der Website: Blau ist die Identität,
     Rot bleibt dem Speichern, Löschen und Warnen vorbehalten. */
  --brand: #4286D7; --brand-deep: #286DBD;
  --action: #E11B38; --action-deep: #B01128;
  --ok: #4ADE80; --warn: #FBBF24;
  --r: 2px;
  --side: 250px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif; font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------------------------------------------------------- Anmeldung */
.gate {
  min-height: 100svh; display: grid; place-items: center; padding: 2rem 1.25rem;
}
.gate__card {
  width: 100%; max-width: 25rem;
  border: 1px solid var(--line); background: var(--surface); padding: 2.25rem;
}
.gate__kind {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
.gate__name { font-variation-settings: 'wdth' 116, 'wght' 750; font-size: 1.25rem; letter-spacing: -.02em; }
.gate h1 { font-size: 1rem; font-weight: 600; margin: 1.75rem 0 .35rem; }
.gate p.sub { color: var(--ink-2); margin: 0 0 1.5rem; font-size: .88rem; }

/* ------------------------------------------------------------- Gerüst */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100svh; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }

.side {
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100svh;
}
@media (max-width: 900px) { .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); } }
.side__head { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--line); }
/* Das Logo bringt seine eigenen Maße mit. In der schmalen Seitenleiste und
   auf der Anmeldekarte darf es nicht überlaufen, deshalb hier gedeckelt. */
.side__head img, .gate__card img { max-width: 100%; height: auto; display: block; }
.gate__card img { margin-bottom: 1.5rem; }
.side__nav { padding: .5rem; overflow-y: auto; flex: 1; }
.side__group {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); padding: 1rem .75rem .35rem;
}
.side a {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .75rem; color: var(--ink-2); border-radius: var(--r);
}
.side a:hover { background: var(--surface-2); color: var(--ink); }
.side a[aria-current="page"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--brand); }
.side__foot { padding: .75rem; border-top: 1px solid var(--line); display: grid; gap: .4rem; }

.main { min-width: 0; }
.bar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.bar h1 { font-size: 1.05rem; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.bar__right { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.pane { padding: 1.5rem; max-width: 78rem; }

/* -------------------------------------------------------------- Karten */
.card {
  border: 1px solid var(--line); background: var(--surface);
  margin-bottom: 1.25rem;
}
.card__h {
  padding: .9rem 1.15rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.card__h h2 { font-size: .9rem; font-weight: 650; margin: 0; }
.card__h .right { margin-left: auto; display: flex; gap: .5rem; }
.card__b { padding: 1.15rem; }
.card__b > :first-child { margin-top: 0; }

.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 1.25rem; }
@media (min-width: 640px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: 1.15rem; }
.stat b {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.7rem; line-height: 1; letter-spacing: -.04em; font-weight: 600;
}
.stat span { display: block; color: var(--ink-3); font-size: .78rem; margin-top: .4rem; }

/* ------------------------------------------------------------ Formular */
.f { display: grid; gap: .4rem; margin-bottom: 1rem; }
.f > label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.f input, .f select, .f textarea {
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r);
  padding: .6rem .75rem; width: 100%;
}
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--brand); }
.f textarea { resize: vertical; min-height: 5.5rem; line-height: 1.6; }
.f ::placeholder { color: var(--ink-3); opacity: 1; }
.f small { color: var(--ink-3); font-size: .76rem; }
.row { display: grid; gap: 1rem; }
@media (min-width: 700px) { .row-2 { grid-template-columns: 1fr 1fr; } .row-3 { grid-template-columns: repeat(3,1fr); } .row-4 { grid-template-columns: repeat(4,1fr); } }

.check { display: flex; gap: .6rem; align-items: center; color: var(--ink-2); font-size: .86rem; }
.check input { width: 1rem; height: 1rem; accent-color: var(--brand); flex: none; }

/* -------------------------------------------------------------- Knöpfe */
.b {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; border: 1px solid transparent; border-radius: var(--r);
  font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.b:active { transform: scale(.98); }
.b-p { background: var(--action); color: #fff; }
.b-p:hover { background: var(--action-deep); }
.b-g { border-color: var(--line); color: var(--ink); background: transparent; }
.b-g:hover { border-color: var(--ink-3); }
.b-d { border-color: rgba(225,27,56,.35); color: var(--action); background: transparent; }
.b-d:hover { background: var(--action); color: #fff; border-color: var(--action); }
.b-sm { padding: .35rem .65rem; font-size: .76rem; }
.b[disabled] { opacity: .45; cursor: not-allowed; }

/* -------------------------------------------------------------- Tabelle */
.t { width: 100%; border-collapse: collapse; font-size: .84rem; }
.t th {
  text-align: left; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding: .6rem .8rem; border-bottom: 1px solid var(--line); font-weight: 400; white-space: nowrap;
}
.t td { padding: .6rem .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr:hover td { background: var(--surface-2); }
.t .num { font-family: 'JetBrains Mono', ui-monospace, monospace; text-align: right; }
.t .act { text-align: right; white-space: nowrap; }
.t-wrap { overflow-x: auto; }

.thumb { width: 42px; height: 32px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }

/* --------------------------------------------------------------- Chips */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; padding: .15rem .45rem; border: 1px solid var(--line);
  border-radius: var(--r); color: var(--ink-2); white-space: nowrap;
}
.chip-ok { color: var(--ok); border-color: rgba(74,222,128,.3); }
.chip-w  { color: var(--warn); border-color: rgba(251,191,36,.32); }
.chip-r  { color: var(--action); border-color: rgba(225,27,56,.32); }

/* ------------------------------------------------------------- Hinweise */
.msg {
  border: 1px solid var(--line); border-left: 2px solid var(--ink-3);
  padding: .8rem 1rem; margin-bottom: 1.25rem; font-size: .86rem; color: var(--ink-2);
}
.msg strong { color: var(--ink); }
.msg-ok  { border-left-color: var(--ok); }
.msg-err { border-left-color: var(--action); }
.msg-warn{ border-left-color: var(--warn); }
.msg ul { margin: .4rem 0 0; padding-left: 1.1rem; }

.empty { padding: 2.5rem 1.15rem; text-align: center; color: var(--ink-3); }

/* -------------------------------------------------------- Öffnungszeiten */
.day {
  display: grid; gap: .75rem; align-items: end;
  padding: .8rem 0; border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 820px) { .day { grid-template-columns: 8rem 1fr 1fr auto 1fr 1fr; } }
.day:last-child { border-bottom: 0; }
.day__name { font-weight: 600; }
.day[data-closed="true"] .day__times { opacity: .35; pointer-events: none; }

/* Nur für Screenreader: beschriftet die Kästchen der Sichtbarkeitsspalte,
   ohne die Tabelle mit Text zu füllen. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap; }