@charset "UTF-8";
/* ==========================================================================
   Spieleversum — eigenständiger Stil-Aufsatz auf codelab365.css
   ==========================================================================
   Gilt NUR für die Spieleversum-Seiten (index.html, sammlung-uebersicht.html,
   preistraeger.html, spieleausleihe-tresen.html, spieleausleihe-
   verwaltung.html, spieleausleihe-dokumentation.html). Verändert nicht die
   gemeinsame codelab365.css, die auch von allen anderen codeLAB365-
   Projekten genutzt wird — diese Datei wird zusätzlich, danach eingebunden
   und überschreibt gezielt nur, was für Spieleversum professioneller und
   aufgeräumter wirken soll.

   Einbinden im <head>, NACH dem Link auf codelab365.css:
     <link rel="stylesheet" href="codelab365.css">
     <link rel="stylesheet" href="spieleversum-theme.css">

   Leitidee: Navy trägt die Struktur (aktive Zustände, Hierarchie), Cyan
   bleibt ein echter, sparsam eingesetzter Akzent statt Dauereinsatzfarbe.
   Etwas knapperer Schatten und etwas weniger Rundung wirken strukturierter
   als das "durchgehend runde Pillen"-Bild der Basisversion.
   ========================================================================== */

:root {
  /* Gedämpfterer, "ernsterer" Cyan-Ton — bleibt erkennbar Familie, wirkt
     aber weniger wie eine Spielzeug-/Marketing-Farbe im Dauereinsatz. */
  --cl-signal: #0A7F9C;
  --cl-signal-600: #086D87;

  /* Knapperer, weniger diffuser Schatten — präziser statt "soft SaaS". */
  --cl-shadow: 0 1px 2px rgba(0, 35, 66, .05), 0 4px 14px -8px rgba(0, 46, 89, .22);
  --cl-shadow-lg: 0 2px 6px rgba(0, 35, 66, .07), 0 12px 28px -14px rgba(0, 46, 89, .3);

  /* Etwas weniger rund — strukturierter als volle 14px auf jeder Karte. */
  --cl-radius: 12px;
  --cl-radius-sm: 8px;
}
@media (prefers-color-scheme: dark) {
  :root { --cl-signal: #3FA9C4; --cl-signal-600: #57B7CF; }
}
[data-theme="dark"] { --cl-signal: #3FA9C4; --cl-signal-600: #57B7CF; }

/* codelab365.css setzt für .cl-btn--signal fest dunklen Text (#04222B) —
   das war auf den ursprünglichen, helleren Cyan-Ton abgestimmt. Mit dem
   gedämpfteren, dunkleren --cl-signal oben ergibt das zu wenig Kontrast
   (dunkler Text auf dunklerem Grund) und der Button wirkt kaum erkennbar.
   Hier auf helle Schrift umgestellt, damit er wieder klar hervorsticht. */
.cl-btn--signal { --_fg: #FFFFFF; }

/* ---------- Karten: Rahmen statt Schatten als Haupt-Signal, etwas mehr Luft ---------- */
.cl-card {
  box-shadow: none;
  border: 1px solid var(--cl-line);
}
.cl-card--pad { padding: var(--cl-space-4); }

/* ---------- Buttons: sekundäre Aktionen zurückhaltender, Hauptaktionen unverändert klar ---------- */
.cl-btn { font-weight: 600; }
.cl-btn--ghost { font-weight: 500; border-color: var(--cl-line); }
.cl-btn--ghost.cl-btn--sm { color: var(--cl-muted); border-color: var(--cl-line); }
.cl-btn--ghost.cl-btn--sm:hover { color: var(--cl-text); border-color: var(--cl-navy-600); }

/* ---------- Kopfzeile: ruhiger, Nebenaktionen treten optisch zurück ---------- */
.cl-header { background: color-mix(in srgb, var(--cl-surface) 92%, transparent); }
.qb-tagline { letter-spacing: .01em; }

/* ---------- Tabellen: dezenter Header statt Marketing-Feel, ruhigerer Hover ---------- */
table.sv-table th, .cl-table th {
  font-family: var(--cl-font-mono);
  font-weight: 600;
  letter-spacing: .05em;
}
table.sv-table tbody tr:hover, .cl-table tbody tr:hover {
  background: color-mix(in srgb, var(--cl-surface-2) 70%, transparent);
}

/* ---------- Formularfelder: etwas knapperer Radius passend zu Karten/Buttons ---------- */
.cl-input, .cl-select, .cl-textarea { border-radius: var(--cl-radius-sm); }

/* ---------- Tabs (Verwaltungstool/Tresen): Unterstrich-Stil statt volle
   Farb-Pille im aktiven Zustand — liest sich als Dashboard-Reiter statt
   als bunte Auswahl-Buttons. !important, da die einzelnen Seiten ihre
   eigene .is-active-Regel schon lokal mitbringen und sonst je nach
   Reihenfolge im <head> gewinnen könnte. ---------- */
.sv-tabs { border-bottom: 1px solid var(--cl-line); padding-bottom: 0; gap: 0; margin-bottom: var(--cl-space-4); }
.sv-tab-btn {
  border: none !important; border-radius: 0 !important; background: transparent !important;
  color: var(--cl-muted) !important; padding: .75rem 1.1rem !important;
  border-bottom: 2.5px solid transparent !important; margin-bottom: -1px; font-weight: 500;
}
.sv-tab-btn:hover { color: var(--cl-text) !important; border-bottom-color: var(--cl-line) !important; }
.sv-tab-btn.is-active {
  color: var(--cl-navy) !important; border-bottom-color: var(--cl-navy) !important; font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .sv-tab-btn.is-active { color: var(--cl-signal) !important; border-bottom-color: var(--cl-signal) !important; }
}
[data-theme="dark"] .sv-tab-btn.is-active { color: var(--cl-signal) !important; border-bottom-color: var(--cl-signal) !important; }