/* ============================================================
   Beyond Kalonline — gemeinsame Bausteine
   Abgeleitet aus index.php (Fassung „Dark Cathedral"), 31.08.2026.

   Diese Datei aendert die Startseite NICHT. Sie schreibt nur auf,
   was dort schon gilt, damit die Unterseiten dieselbe Sprache
   sprechen, ohne dass jede sie neu erfindet.

   Geladen wird sie von includes/bk_shell.php, also automatisch
   auf jeder Unterseite mit gemeinsamem Rahmen.

   Aufbau:
     1. Tokens          Farbe, Mass, Bewegung
     2. Grundlagen      Fokus, Auswahl, Bildlaufleiste
     3. Knoepfe         alle Zustaende
     4. Formulare       Eingabe, Fokus, Fehler, Erfolg, gesperrt
     5. Tabellen        Kopf, Zeilen, Sortierung
     6. Filter/Suche
     7. Meldungen       Fehler, Erfolg, Hinweis
     8. Leer und Laden
     9. Modale Fenster
    10. Karten und Abzeichen
   ============================================================ */

/* ---------- 1. Tokens ----------
   Nur setzen, was fehlt: Seiten mit eigenem Block behalten ihre
   Werte. Deshalb steht das hier auf :root und nicht mit !important. */
:root{
  --bk-void:#050310; --bk-void-2:#0a0718; --bk-abyss:#120d22;
  --bk-surface:#1b1430; --bk-surface-2:#241a3d; --bk-surface-3:#2b1e3e;
  --bk-gold:#e3b341; --bk-gold-bright:#f0cd72; --bk-gold-deep:#8a6a1e;
  --bk-gold-rgb:227,179,65;
  --bk-cosmic:#4a4e8f; --bk-cosmic-light:#7176c4;
  --bk-ok:#5ec9a0; --bk-ok-rgb:94,201,160;
  --bk-warn:#e3b341;
  --bk-bad:#e5707e; --bk-bad-rgb:229,112,126;
  --bk-text:#e6e6fa; --bk-text-2:#c8c4e2; --bk-text-3:#9c96bd; --bk-text-mute:#8a85b0;
  --bk-frame:rgba(227,179,65,.26); --bk-frame-in:rgba(227,179,65,.10);

  --bk-r-sm:6px; --bk-r-md:10px; --bk-r-pill:999px;
  --bk-dur-fast:130ms; --bk-dur-mid:240ms; --bk-dur-calm:560ms;
  --bk-ease:cubic-bezier(.22,.7,.28,1);
  --bk-spring:cubic-bezier(.34,1.4,.5,1);
}

/* ---------- 2. Grundlagen ---------- */

/* Sichtbarer Tastaturfokus auf ALLEM, was bedienbar ist. Der
   Browserstandard ist auf dunklem Grund praktisch unsichtbar -
   und ohne Fokus ist eine Seite mit der Tastatur unbenutzbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--bk-gold-bright); outline-offset:2px; border-radius:var(--bk-r-sm)}

::selection{background:rgba(var(--bk-gold-rgb),.3);color:#fff}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 3. Knoepfe ----------
   Drei Zustaende sind Pflicht: Ruhe, Ueberfahren, Druck. Der
   Druckzustand wird am haeufigsten vergessen - ohne ihn fuehlt
   sich ein Knopf beim Klicken tot an. Dazu gesperrt und ladend. */
.bk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;position:relative;
  font-family:'Cinzel',serif;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;
  padding:11px 20px;border:1px solid rgba(var(--bk-gold-rgb),.5);color:var(--bk-gold-bright);
  background:linear-gradient(180deg,rgba(var(--bk-gold-rgb),.14),rgba(var(--bk-gold-rgb),.04));
  translate:0 0;scale:1;
  transition:background var(--bk-dur-mid) var(--bk-ease),
             color var(--bk-dur-mid) var(--bk-ease),
             border-color var(--bk-dur-mid) var(--bk-ease),
             box-shadow var(--bk-dur-mid) var(--bk-ease),
             translate var(--bk-dur-mid) var(--bk-spring),
             scale var(--bk-dur-fast) var(--bk-ease)}
.bk-btn:hover{color:#fff8e6;border-color:var(--bk-gold);translate:0 -2px;
  background:linear-gradient(180deg,rgba(var(--bk-gold-rgb),.3),rgba(var(--bk-gold-rgb),.1));
  box-shadow:0 0 22px -6px rgba(var(--bk-gold-rgb),.55)}
.bk-btn:active{translate:0 1px;scale:.976;box-shadow:inset 0 2px 9px rgba(0,0,0,.5)}

.bk-btn--solid{border-color:var(--bk-gold);color:#0a0718;
  background:linear-gradient(180deg,var(--bk-gold-bright),var(--bk-gold) 60%,var(--bk-gold-deep))}
.bk-btn--solid:hover{color:#0a0718;
  background:linear-gradient(180deg,#fff6e0,var(--bk-gold-bright) 55%,var(--bk-gold))}
.bk-btn--quiet{border-color:rgba(195,181,219,.3);color:var(--bk-text-2);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.bk-btn--quiet:hover{border-color:var(--bk-text-2);color:#fff;box-shadow:none}
.bk-btn--danger{border-color:rgba(var(--bk-bad-rgb),.55);color:var(--bk-bad);
  background:linear-gradient(180deg,rgba(var(--bk-bad-rgb),.14),rgba(var(--bk-bad-rgb),.04))}
.bk-btn--danger:hover{color:#fff;border-color:var(--bk-bad);
  background:linear-gradient(180deg,rgba(var(--bk-bad-rgb),.3),rgba(var(--bk-bad-rgb),.1));
  box-shadow:0 0 22px -6px rgba(var(--bk-bad-rgb),.5)}
.bk-btn--sm{padding:8px 14px;font-size:10.5px}
.bk-btn--lg{padding:15px 30px;font-size:13px}
.bk-btn--block{display:flex;width:100%}

/* Gesperrt: sichtbar tot, aber lesbar. Ein ausgegrauter Knopf,
   den man nicht mehr entziffern kann, ist keine Information. */
.bk-btn:disabled,.bk-btn[aria-disabled="true"],.bk-btn--disabled{
  cursor:not-allowed;opacity:.45;filter:grayscale(.5);
  translate:0 0!important;scale:1!important;box-shadow:none!important}

/* Ladend: der Knopf behaelt seine Groesse, die Beschriftung wird
   unsichtbar und ein Ring dreht sich darueber. Ohne feste Groesse
   springt das Layout bei jedem Klick. */
.bk-btn--loading{color:transparent!important;pointer-events:none;position:relative}
.bk-btn--loading::after{content:"";position:absolute;width:15px;height:15px;
  border:2px solid rgba(var(--bk-gold-rgb),.3);border-top-color:var(--bk-gold-bright);
  border-radius:50%;animation:bk-spin .7s linear infinite}
@keyframes bk-spin{to{transform:rotate(360deg)}}

/* ---------- 4. Formulare ---------- */
.bk-field{margin-bottom:15px}
.bk-label{display:block;font-family:'Cinzel',serif;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bk-text-3);margin-bottom:6px}
.bk-req{color:var(--bk-gold)}
.bk-input,.bk-select,.bk-textarea{
  width:100%;background:rgba(5,3,16,.6);border:1px solid var(--bk-frame);
  color:var(--bk-text);font-family:'Inter',system-ui,sans-serif;font-size:13.5px;
  padding:11px 14px;border-radius:var(--bk-r-sm);
  /* Mindestens 44 px hoch: alles darunter trifft man auf dem
     Handy mit dem Daumen nicht zuverlaessig. */
  min-height:44px;
  transition:border-color var(--bk-dur-mid) var(--bk-ease),
             background var(--bk-dur-mid) var(--bk-ease),
             box-shadow var(--bk-dur-mid) var(--bk-ease)}
.bk-textarea{min-height:120px;resize:vertical;line-height:1.6}
.bk-input::placeholder,.bk-textarea::placeholder{color:var(--bk-text-mute)}
.bk-input:hover,.bk-select:hover,.bk-textarea:hover{border-color:rgba(var(--bk-gold-rgb),.45)}
.bk-input:focus,.bk-select:focus,.bk-textarea:focus{outline:none;border-color:var(--bk-gold);
  background:rgba(27,20,48,.7);box-shadow:0 0 0 3px rgba(var(--bk-gold-rgb),.18)}
.bk-input:disabled,.bk-select:disabled,.bk-textarea:disabled{
  opacity:.5;cursor:not-allowed;background:rgba(5,3,16,.35)}
.bk-select option{background:var(--bk-abyss);color:var(--bk-text)}

/* Fehler und Erfolg am Feld selbst - eine Meldung ganz oben laesst
   den Nutzer suchen, welches Feld gemeint ist. */
.bk-input.is-error,.bk-select.is-error,.bk-textarea.is-error{
  border-color:var(--bk-bad);box-shadow:0 0 0 3px rgba(var(--bk-bad-rgb),.16)}
.bk-input.is-ok,.bk-select.is-ok,.bk-textarea.is-ok{
  border-color:var(--bk-ok);box-shadow:0 0 0 3px rgba(var(--bk-ok-rgb),.16)}
.bk-hint{display:block;font-size:11.5px;color:var(--bk-text-mute);margin-top:5px}
.bk-hint--error{color:var(--bk-bad)}
.bk-hint--ok{color:var(--bk-ok)}

/* ---------- 5. Tabellen ---------- */
.bk-tablewrap{overflow-x:auto;border:1px solid var(--bk-frame);border-radius:var(--bk-r-md)}
.bk-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.bk-table th{font-family:'Cinzel',serif;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bk-gold);text-align:left;padding:12px 14px;
  background:rgba(var(--bk-gold-rgb),.08);border-bottom:1px solid var(--bk-frame);
  white-space:nowrap;position:sticky;top:0;z-index:1}
.bk-table td{padding:11px 14px;color:var(--bk-text-2);
  border-bottom:1px solid rgba(var(--bk-gold-rgb),.12)}
.bk-table tbody tr:last-child td{border-bottom:0}
.bk-table tbody tr{transition:background var(--bk-dur-mid) var(--bk-ease)}
.bk-table tbody tr:hover td{background:rgba(var(--bk-gold-rgb),.06)}
.bk-table .num{font-family:'JetBrains Mono',Consolas,monospace;text-align:right}
.bk-table th.sortable{cursor:pointer;user-select:none}
.bk-table th.sortable::after{content:"↕";opacity:.4;margin-left:7px;font-size:10px}
.bk-table th[aria-sort="ascending"]::after{content:"↑";opacity:1}
.bk-table th[aria-sort="descending"]::after{content:"↓";opacity:1}

/* ---------- 6. Filter und Suche ---------- */
.bk-filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:14px}
.bk-chip{font-family:'Cinzel',serif;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 15px;border-radius:var(--bk-r-pill);cursor:pointer;
  border:1px solid var(--bk-frame);color:var(--bk-text-3);background:rgba(5,3,16,.4);
  transition:color var(--bk-dur-mid) var(--bk-ease),border-color var(--bk-dur-mid) var(--bk-ease),
             background var(--bk-dur-mid) var(--bk-ease),translate var(--bk-dur-fast) var(--bk-ease)}
.bk-chip:hover{color:var(--bk-gold-bright);border-color:rgba(var(--bk-gold-rgb),.5)}
.bk-chip:active{translate:0 1px}
.bk-chip[aria-pressed="true"],.bk-chip.is-on{color:var(--bk-gold-bright);border-color:var(--bk-gold);
  background:linear-gradient(180deg,rgba(var(--bk-gold-rgb),.22),rgba(var(--bk-gold-rgb),.07))}
.bk-search{position:relative;flex:1;min-width:190px}
.bk-search .bk-input{padding-left:38px}
.bk-search::before{content:"";position:absolute;left:14px;top:50%;translate:0 -50%;
  width:12px;height:12px;border:1.6px solid var(--bk-text-mute);border-radius:50%;
  pointer-events:none}

/* ---------- 7. Meldungen ---------- */
.bk-msg{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:var(--bk-r-sm);
  font-size:13.5px;line-height:1.6;margin-bottom:14px;border:1px solid}
.bk-msg strong{font-weight:700}
.bk-msg::before{font-size:14px;line-height:1.4;flex:none}
.bk-msg--error{color:#f3b3bb;border-color:rgba(var(--bk-bad-rgb),.45);
  background:rgba(var(--bk-bad-rgb),.10)}
.bk-msg--error::before{content:"⚠";color:var(--bk-bad)}
.bk-msg--ok{color:#a8e6cd;border-color:rgba(var(--bk-ok-rgb),.45);
  background:rgba(var(--bk-ok-rgb),.10)}
.bk-msg--ok::before{content:"✓";color:var(--bk-ok)}
.bk-msg--info{color:var(--bk-text-2);border-color:var(--bk-frame);
  background:rgba(var(--bk-gold-rgb),.07)}
.bk-msg--info::before{content:"◆";color:var(--bk-gold);font-size:10px;padding-top:3px}

/* ---------- 8. Leer und Laden ---------- */
.bk-empty{text-align:center;padding:54px 22px;border:1px dashed var(--bk-frame);
  border-radius:var(--bk-r-md);color:var(--bk-text-mute)}
.bk-empty-mark{font-family:'Noto Serif SC',serif;font-size:44px;color:rgba(var(--bk-gold-rgb),.22);
  line-height:1;margin-bottom:14px}
.bk-empty h3{font-family:'Cinzel',serif;font-size:15px;color:var(--bk-text-2);margin-bottom:7px}
.bk-empty p{font-size:13px;max-width:42ch;margin:0 auto}

/* Ladeplatzhalter statt Dreh-Ring, wo Inhalt erscheinen wird:
   ein Balken in der Form des kommenden Inhalts laesst die Seite
   ruhiger wirken als ein Kreisel im Nichts. */
.bk-skel{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,
  rgba(var(--bk-gold-rgb),.10) 37%,rgba(255,255,255,.04) 63%);
  background-size:400% 100%;animation:bk-shimmer 1.5s ease-in-out infinite;
  border-radius:var(--bk-r-sm);height:15px;margin-bottom:9px}
.bk-skel:last-child{margin-bottom:0}
.bk-skel--title{height:24px;width:44%}
.bk-skel--row{height:38px}
@keyframes bk-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.bk-loading{display:inline-flex;align-items:center;gap:10px;color:var(--bk-text-3);font-size:13px}
.bk-loading::before{content:"";width:15px;height:15px;border:2px solid rgba(var(--bk-gold-rgb),.28);
  border-top-color:var(--bk-gold);border-radius:50%;animation:bk-spin .7s linear infinite}

/* ---------- 9. Modale Fenster ---------- */
.bk-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;
  background:rgba(3,2,10,.9);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity var(--bk-dur-mid) var(--bk-ease)}
.bk-modal.is-open{opacity:1;pointer-events:auto}
.bk-modal-box{width:min(560px,100%);max-height:88vh;overflow:auto;position:relative;
  border:1px solid var(--bk-frame);background:linear-gradient(180deg,rgba(43,30,62,.85),rgba(8,5,18,.95));
  box-shadow:inset 0 0 0 1px var(--bk-frame-in),0 40px 110px -50px #000;
  transform:translateY(14px) scale(.99);transition:transform var(--bk-dur-mid) var(--bk-ease)}
.bk-modal.is-open .bk-modal-box{transform:none}
.bk-modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--bk-frame)}
.bk-modal-title{font-family:'Cinzel',serif;font-size:14px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bk-gold-bright)}
.bk-modal-body{padding:20px}
.bk-modal-foot{display:flex;gap:9px;justify-content:flex-end;padding:15px 20px;
  border-top:1px solid var(--bk-frame);flex-wrap:wrap}
.bk-modal-x{width:36px;height:36px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--bk-frame);background:rgba(5,3,16,.5);color:var(--bk-gold);font-size:15px;
  transition:border-color var(--bk-dur-mid) var(--bk-ease),rotate var(--bk-dur-mid) var(--bk-ease)}
.bk-modal-x:hover{border-color:var(--bk-gold);rotate:90deg}
body.bk-locked{overflow:hidden}

/* ---------- 10. Karten und Abzeichen ---------- */
.bk-card{position:relative;padding:20px 22px;
  border:1px solid var(--bk-frame);
  background:linear-gradient(180deg,rgba(43,30,62,.5),rgba(10,7,24,.7));
  box-shadow:inset 0 0 0 1px var(--bk-frame-in)}
/* Eckbeschlaege wie auf der Startseite - kleine Winkel, die den
   Rahmen schneiden statt ihn zu ueberdecken. */
.bk-card::before,.bk-card::after{content:"";position:absolute;width:12px;height:12px;
  border:1px solid var(--bk-gold);opacity:.7}
.bk-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.bk-card::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.bk-card-title{font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bk-gold);margin-bottom:12px}

.bk-badge{display:inline-flex;align-items:center;gap:6px;font-family:'Cinzel',serif;font-size:9.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;
  border-radius:var(--bk-r-pill);border:1px solid var(--bk-frame);color:var(--bk-gold)}
.bk-badge--ok{color:var(--bk-ok);border-color:rgba(var(--bk-ok-rgb),.45)}
.bk-badge--bad{color:var(--bk-bad);border-color:rgba(var(--bk-bad-rgb),.45)}
.bk-badge--mute{color:var(--bk-text-mute);border-color:rgba(255,255,255,.12)}
.bk-dot{width:7px;height:7px;border-radius:50%;background:var(--bk-text-mute);flex:none}
.bk-dot--ok{background:var(--bk-ok);box-shadow:0 0 0 3px rgba(var(--bk-ok-rgb),.16)}
.bk-dot--bad{background:var(--bk-bad);box-shadow:0 0 0 3px rgba(var(--bk-bad-rgb),.14)}

/* ---------- Mobil ----------
   Unter 640 px werden Knopfreihen zu Spalten und Polster kleiner.
   Klickflaechen bleiben bei mindestens 44 px. */
@media(max-width:640px){
  .bk-modal-foot{flex-direction:column-reverse}
  .bk-modal-foot .bk-btn{width:100%}
  .bk-filters{gap:6px}
  .bk-chip{padding:10px 13px}
  .bk-card{padding:16px 15px}
  .bk-table th,.bk-table td{padding:10px 11px}
}