/* voiguad. – gemeinsame Grundlage für Admin und Band-App (nicht für die Website).
   Schriften, Tokens und Buttons mit denselben Werten wie styles.css (Regelwerk),
   damit Admin, App und Website gleich aussehen. Die Website lädt diese Datei nicht. */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/lato-latin-900.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/playfair-display-latin-900.woff2") format("woff2"); }

/* Tokens (Auszug aus dem Regelwerk) */
:root {
  --color-ground: #0a0a0a;
  --color-surface: #121212;
  --color-raised: #141414;
  --color-line: #262626;
  --color-line-strong: #333333;
  --color-ink: #f5f2ec;
  --color-ink-soft: #cfc9bf;
  --color-ink-muted: #9a948a;
  --color-on-area: #0a0a0a;
  --color-start: #2ec4b6;
  --color-party: #ff3a6e;
  --color-hochzeit: #b89cff;
  --color-gala: #e2b85c;
  --color-bierzelt: #4c9aff;
  --area: var(--color-start);

  --font-display: "Playfair Display", Georgia, serif;
  --font-text: "Lato", "Helvetica Neue", Arial, sans-serif;
  --fs-h4: 22px;
  --fs-body: 17px;
  --fs-button: 17px;
  --fs-small: 15px;
  --fs-label: 13px;

  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  --radius-field: 12px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --ease: 0.2s ease;
  color-scheme: dark;
}
@media screen and (min-width: 992px) {
  :root { --fs-h4: 26px; --fs-body: 18px; --fs-button: 18px; }
}

[hidden] { display: none !important; }

/* Icons (icons-app.svg) */
.icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; }

/* Buttons – wie die Website: gefüllt wird beim Hover zur Kontur, Kontur wird gefüllt */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 48px;
  padding: 15px 24px;
  border: 1.5px solid var(--area);
  border-radius: var(--radius-pill);
  background-color: var(--area);
  color: var(--color-on-area);
  font-family: var(--font-text);
  font-size: var(--fs-button);
  font-weight: 900;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background-color var(--ease);
}
.btn:hover { background-color: transparent; color: var(--area); }
.btn-line { border-color: var(--color-ink); background-color: transparent; color: var(--color-ink); }
.btn-line:hover { border-color: var(--area); background-color: var(--area); color: var(--color-on-area); }
.btn-danger { border-color: var(--color-party); background-color: transparent; color: var(--color-party); }
.btn-danger:hover { border-color: var(--color-party); background-color: var(--color-party); color: var(--color-on-area); }
.btn-small { min-height: 0; padding: 10px 18px; font-size: var(--fs-small); letter-spacing: 0.02em; }
.btn-small .icon { width: 18px; height: 18px; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; height: 44px; min-height: 0; padding: 0; }
.btn:disabled { opacity: .5; cursor: wait; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.btn-group > .btn { flex: 1 1 auto; padding-right: var(--space-16); padding-left: var(--space-16); }

@media screen and (min-width: 992px) {
  .btn { padding: 15px 30px; }
  .btn-small { padding: 11px 21px; }
  .btn-icon { padding: 0; }
  .btn-group { gap: var(--space-16); }
  .btn-group > .btn { flex: 0 0 auto; padding-right: 30px; padding-left: 30px; }
}

/* Status eines Auftritts – Farben aus den Bereichsfarben des Regelwerks */
.status { display: inline-block; padding: 1px 10px; border: 1.5px solid currentColor; border-radius: var(--radius-pill); font-size: var(--fs-label); font-weight: 700; line-height: 1.6; white-space: nowrap; }
.status-option { color: var(--color-gala); }
.status-abstimmung { color: var(--color-bierzelt); }
.status-vertrag { color: var(--color-hochzeit); }
.status-gebucht { border-color: var(--color-start); background-color: var(--color-start); color: var(--color-on-area); }
.status-gespielt { color: var(--color-ink-muted); }
.status-abgesagt { color: var(--color-party); text-decoration: line-through; }

/* Status einer Anfrage (wer ist dran) und Ergebnis */
.status-inq-new { border-color: var(--color-start); background-color: var(--color-start); color: var(--color-on-area); }
.status-inq-open { border-color: var(--color-gala); background-color: var(--color-gala); color: var(--color-on-area); }
.status-inq-waiting { color: var(--color-bierzelt); }
.status-inq-done { color: var(--color-ink-muted); }
.status-res-gig { color: var(--color-start); }
.status-res-busy { color: var(--color-party); }
.status-res-lost { color: var(--color-ink-muted); }
.status-res-junk { color: var(--color-ink-muted); text-decoration: line-through; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }