/* ============================================================
   Medienakkreditierung — Projekt-CSS
   Basis ist das BTV UI-Kit (~/Claude/projekte/btv-ui/): Tokens + Komponenten.
   Hier stehen nur Klassen, die das Kit nicht mitbringt.
   ============================================================ */
@import "btv-tokens.css";
@import "btv-ui.css";

/* Schmale Inhaltsspalte für Formulare, Login, Diagnose. */
.narrow { max-width: 46rem; margin-inline: auto; }

/* Hinweisband im Demo-Modus — bewusst auffällig, damit niemand vergisst,
   dass hier ohne Passwort angemeldet wird. */
.demo-bar {
  background: var(--accent-20);
  border-bottom: 2px solid var(--accent);
  color: var(--ink);
  padding: .6rem 1rem;
  text-align: center;
  font-size: .95rem;
}
.demo-bar code { background: rgba(255,255,255,.6); padding: .1em .35em; border-radius: var(--radius-xs); }

/* Rollenauswahl im Demo-Login. */
.radio { display: flex; align-items: flex-start; gap: .7rem; padding: .6rem 0; cursor: pointer; }
.radio input { margin-top: .35rem; }
.radio span { display: flex; flex-direction: column; }
.radio small { color: var(--muted); }

/* Noch nicht verlinkte Dokumente (offene Punkte O3–O5). */
.pending { border-bottom: 1px dotted var(--muted); color: var(--ink-soft); cursor: help; }

.note { color: var(--muted); font-size: .9rem; margin-top: 1rem; }

/* Landingpage: zwei nebeneinanderliegende Karten, mobil untereinander. */
.cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin-top: 2rem; }

/* Self-Check-Tabelle. */
table.check { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
table.check th, table.check td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.check tr.ok   td:nth-child(2) { color: var(--ok);  font-weight: 700; }
table.check tr.fail td:nth-child(2) { color: var(--bad); font-weight: 700; }
table.check tr.fail { background: var(--bad-bg); }
table.check td:nth-child(3) { color: var(--muted); font-size: .9rem; }

/* ---- Formular ---------------------------------------------------------- */

/* Honeypot: für Menschen unerreichbar, aber nicht display:none — manche Bots
   überspringen versteckte Felder gezielt. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.form legend { font-family: var(--font-head); font-size: 1.15rem; margin-bottom: .8rem; color: var(--blue); }
.form label { display: block; margin-bottom: 1rem; font-weight: 600; }
.form input[type=text], .form input[type=email], .form input[type=tel],
.form input[type=date], .form select, .form textarea, .form input[type=file] {
  display: block; width: 100%; margin-top: .35rem;
  padding: .6rem .7rem; font: inherit; font-weight: 400;
  border: 1px solid var(--line); border-radius: var(--radius-xs); background: #fff;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; box-shadow: var(--ring); border-color: var(--blue); }
.form [aria-invalid="true"] { border-color: var(--bad); background: #fff8f7; }

/* Zwei Felder nebeneinander, mobil untereinander. */
.row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.req { color: var(--bad); }

/* Ort und Zeitraum einer hinterlegten Veranstaltung (Info, kein Eingabefeld). */
.ver-info { background: var(--blue-20); color: var(--blue-d); padding: .5rem .7rem;
  border-radius: var(--radius-xs); font-size: .9rem; margin: -.5rem 0 1rem; }
.field-error { color: var(--bad); font-size: .875rem; font-weight: 400; margin: .3rem 0 0; }
.hint { color: var(--muted); font-size: .875rem; margin: -.5rem 0 1.2rem; }
.hidden { display: none; }

.alert-error {
  background: var(--bad-bg); border-left: 4px solid var(--bad);
  padding: .8rem 1rem; border-radius: var(--radius-xs); margin-bottom: 1.5rem;
}

/* Zustimmungs-Checkboxen: Text neben der Box, nicht darunter. Die Box bekommt
   eine feste, gut sichtbare Größe — ohne diese Angabe rendert sie in manchen
   Browsern als kaum erkennbarer Punkt. */
.form label.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-weight: 400; }
.form label.check input[type=checkbox] {
  width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; flex: none;
  accent-color: var(--blue); cursor: pointer;
}

.changelog h2 { margin-top: 2rem; }
.changelog code { background: var(--line-soft); padding: .1em .35em; border-radius: var(--radius-xs); }

/* Mail-Protokoll: Textkörper monospaced und umbrechend. */
.mailbody {
  white-space: pre-wrap; word-break: break-word;
  background: var(--line-soft); padding: .8rem; border-radius: var(--radius-xs);
  font-size: .85rem; margin: .5rem 0 0; max-width: 60ch;
}

/* ---- Board -------------------------------------------------------------- */
.board-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.board-actions { display: flex; gap: .6rem; }

/* Statuszähler als klickbare Filter. */
.counters { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; }
.counter {
  display: flex; flex-direction: column; align-items: center; min-width: 6.5rem;
  padding: .6rem .8rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-s); text-decoration: none; color: var(--ink);
}
.counter strong { font-size: 1.4rem; font-family: var(--font-head); }
.counter span { font-size: .75rem; color: var(--muted); text-align: center; }
.counter.active { border-color: var(--blue); box-shadow: var(--ring); }
.counter.leer { opacity: .55; }

.board-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.board-filters label { flex: 1 1 12rem; margin: 0; font-weight: 600; }
.board-filters input, .board-filters select {
  width: 100%; margin-top: .3rem; padding: .5rem; font: inherit; font-weight: 400;
  border: 1px solid var(--line); border-radius: var(--radius-xs);
}
.filter-buttons { display: flex; gap: .5rem; }

.board-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.board-table th, .board-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.board-table th a { color: var(--ink); text-decoration: none; }
.board-table small { color: var(--muted); }
.board-table tr.widerrufen { opacity: .6; text-decoration: line-through; }
.fehlt { color: var(--bad); font-weight: 600; }

/* Status als farbige Pille. Reihenfolge des Prozesses von neutral nach grün. */
.status-pill { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--line-soft); color: var(--ink-soft); white-space: nowrap; }
.status-eingegangen      { background: var(--blue-20); color: var(--blue-d); }
.status-in-pruefung      { background: #fff3cd; color: #7a5b00; }
.status-rueckfrage-offen { background: #ffe3cf; color: #8a4b00; }
.status-genehmigt        { background: var(--ok-bg); color: var(--ok); }
.status-abgelehnt        { background: var(--bad-bg); color: var(--bad); }
.status-badge-erstellt   { background: var(--ok-bg); color: var(--ok); }
.status-badge-ausgegeben { background: var(--ok); color: #fff; }
.status-akkreditierung-widerrufen { background: var(--bad); color: #fff; }

/* Detailansicht */
.narrow-wide { max-width: 68rem; margin-inline: auto; }
.detail-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.detail-head h1 { margin: 0; }
.tag { background: var(--line-soft); color: var(--ink-soft); padding: .2rem .6rem; border-radius: var(--radius-xs); font-size: .8rem; }
.detail-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); margin: 1.5rem 0; }
.detail-grid dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; }
.detail-grid dt { color: var(--muted); font-size: .85rem; }
.detail-grid dd { margin: 0; }
.pre { white-space: pre-wrap; }
.files { list-style: none; padding: 0; }
.files li { padding: .4rem 0; border-bottom: 1px solid var(--line-soft); }
.files small { display: block; color: var(--muted); }
.verlauf { padding-left: 1.2rem; }
.verlauf li { margin-bottom: .8rem; }
.verlauf small { display: block; color: var(--muted); font-size: .8rem; }

.alert-info { background: var(--blue-20); border-left: 4px solid var(--blue); padding: .8rem 1rem; border-radius: var(--radius-xs); margin: 1rem 0; }

/* Mail-Editor: Vorlagen-Reiter */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.tab { padding: .45rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-xs); text-decoration: none; color: var(--ink-soft); background: var(--card); font-size: .9rem; }
.tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.form textarea[name="body"] { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .875rem; }
.inline-form { display: inline; }
button[disabled] { opacity: .5; cursor: not-allowed; }

/* Einstellungen */
.tpl { border: 1px solid var(--line); border-radius: var(--radius-xs); padding: .6rem .8rem; margin-bottom: .6rem; }
.tpl summary { cursor: pointer; font-weight: 600; }
.btn-ghost.small { padding: .25rem .5rem; font-size: .8rem; }
.aktionen { display: flex; gap: .3rem; flex-wrap: wrap; }

/* ---- Wettkampfleitungs-Live-Seite (E2) ---- */
.wl-head h1 { margin-bottom: .2rem; }
.wl-block { margin-bottom: 1.5rem; }
.wl-count { color: var(--muted); font-weight: 400; font-size: .9rem; }
.wl-table { font-size: .95rem; }
.wl-revoked { border-left: 4px solid var(--bad); }
.wl-revoked h2 { color: var(--bad); }
.wl-rejected { opacity: .85; }
.badge-cell small { color: var(--muted); }
.badge-gemailt   { color: var(--ok); font-weight: 600; }
.badge-vorort    { color: var(--warn); font-weight: 600; }
.badge-keiner    { color: var(--muted); }
.badge-ausgegeben{ color: var(--blue); font-weight: 600; }
.wl-action { white-space: nowrap; }
.wl-highlight { animation: wlflash 1.2s ease; }
@keyframes wlflash { from { background: var(--blue-20); } to { background: transparent; } }
body.bare .topbar nav { display: none; }

/* Badge-Verifikation (E6) */
.verify-card { border-left: 5px solid var(--muted); }
.verify-card.ok { border-color: var(--ok); }
.verify-card.bad { border-color: var(--bad); }
.verify-card.warn { border-color: var(--warn); }
.verify-ampel { font-size: 1.3rem; margin-bottom: 1rem; }

/* Durchsuchbare Veranstaltungsauswahl (Combobox) */
.ver-combo { position: relative; margin-bottom: 1rem; }
.ver-list { list-style: none; margin: .2rem 0 0; padding: .25rem; position: absolute; z-index: 30;
  left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md); max-height: 16rem; overflow-y: auto; }
.ver-list li { padding: .5rem .6rem; border-radius: var(--radius-xs); cursor: pointer; }
.ver-list li strong { font-weight: 600; font-size: .95rem; }
.ver-list li small { display: block; color: var(--muted); font-size: .8rem; }
.ver-list li.aktiv, .ver-list li:hover { background: var(--blue-20); }
.ver-list li.leer { color: var(--muted); cursor: default; }

/* Mehrfachauswahl im Board (Verbesserungsideen 4–7) */
.board-table .sel-col { width: 2.2rem; text-align: center; }
.board-table .sel-col input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--blue); cursor: pointer; }
.btn-primary.small { padding: .3rem .7rem; font-size: .85rem; }
/* Aktionsleiste: schwebt unten, sobald etwas ausgewählt ist. */
.bulk-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  margin: 1rem 0 0; padding: .7rem .9rem;
  background: var(--card); border: 1px solid var(--blue); border-radius: var(--radius-s);
  box-shadow: var(--shadow-md);
}
.bulk-count { margin-right: auto; font-size: .95rem; }
.bulk-count strong { font-family: var(--font-head); font-size: 1.15rem; color: var(--blue); }

/* Sammel-Vorschau */
.bulk-list { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.bulk-list th, .bulk-list td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.bulk-skip { color: var(--muted); }
.bulk-skip td { color: var(--muted); }

/* Suche über die Veranstaltungstabelle */
.ev-suche-feld { display: block; margin: 0 0 .8rem; font-weight: 600; max-width: 26rem; }
.ev-suche-feld input { width: 100%; margin-top: .3rem; padding: .5rem .6rem; font: inherit; font-weight: 400;
  border: 1px solid var(--line); border-radius: var(--radius-xs); }
.ev-suche-feld input:focus { outline: none; box-shadow: var(--ring); border-color: var(--blue); }

/* Datenschutzhinweis vor dem Absenden — bewusst gut sichtbar (kein Kleingedrucktes). */
.datenschutz-hinweis {
  background: var(--blue-20); color: var(--ink);
  border-left: 4px solid var(--blue); border-radius: var(--radius-xs);
  padding: .8rem 1rem; margin: 0 0 1.5rem; font-size: .95rem;
}

/* Datenschutz-/Löschbereich im Antragsdetail */
.loeschen-card { border: 1px solid var(--line); }
.btn-danger, .btn-danger.small {
  background: var(--bad); color: #fff; border: 1px solid var(--bad);
  padding: .3rem .7rem; font-size: .85rem; border-radius: var(--radius-xs);
  cursor: pointer;
}
.btn-danger:hover { filter: brightness(.92); }

/* SAFE-SPORT-Merkblatt: muss vor der Bestätigung geöffnet werden (O4). */
.safesport-block { background: var(--line-soft); border-radius: var(--radius-xs); padding: .8rem 1rem; margin-bottom: 1rem; }
.safesport-doc { margin: 0 0 .6rem; font-weight: 600; }
.safesport-doc a { color: var(--blue-d); }
.safesport-status { display: inline-block; margin-left: .5rem; font-weight: 400; font-size: .85rem; color: var(--muted); }
.safesport-block[data-gesehen="1"] .safesport-status { color: var(--ok); font-weight: 600; }
/* Gesperrte Checkbox klar als „noch nicht möglich" kennzeichnen. */
.safesport-block input[type=checkbox]:disabled { cursor: not-allowed; opacity: .5; }
.safesport-block input[type=checkbox]:disabled + span { color: var(--muted); }