/* League of Legends -- Clipkatalog
   Dieselbe Schriftfamilie wie die CS2-Seite, aber eigene Farben: tiefes
   Nachtblau und das Gold der LoL-Oberflaeche. Tuerkis steht fuer alles, was der
   Betrachter selbst angelegt hat (eigene Marken), Gold fuer das, was aus der
   Pipeline kommt. */

:root {
  --ink:      #091018;
  --ink-2:    #0d1621;
  --panel:    #111d2a;
  --panel-hi: #182838;
  --rule:     #24364a;

  --text:     #e6e9ee;
  --dim:      #93a2b3;
  /* Angehoben am 21.09.2026: #6a7b8e lag mit 3,9-4,4:1 unter der
     Lesbarkeitsgrenze von 4,5:1. Jetzt 4,9-5,5:1 auf beiden Flaechentoenen. */
  --dimmer:   #7a8c9e;

  --gold:     #c8aa6e;
  --gold-hi:  #f0e6d2;
  --hex:      #35c9bd;   /* Hextech-Tuerkis -- eigene Marken */
  --warn:     #e0705a;

  --pad:      clamp(1rem, 4vw, 2.75rem);
  --maxw:     1560px;
  --radius:   3px;

  --sans:  "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond:  "Barlow Condensed", "Barlow", "Segoe UI", sans-serif;

  caret-color: transparent;
}

input, textarea, select, [contenteditable] { caret-color: auto; }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-underline-offset: 3px;
}

h1, h2, h3 { margin: 0; font-family: var(--cond); font-weight: 700; line-height: 1.05; }
a { color: var(--gold); }
button, select, input, textarea { font: inherit; color: inherit; }

/* Knopfbeschriftungen sind keine Texte zum Markieren -- Werte in Listen schon. */
button, a.knopf, .reiter__r, summary { user-select: none; -webkit-user-select: none; }

:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; border-radius: 2px; }

.tabular { font-variant-numeric: tabular-nums; }

/* Klick-Rueckmeldung: Aufleuchten des Rahmens, keine Bewegung. */
@keyframes aufleuchten { from { box-shadow: 0 0 0 2px var(--gold-hi); } to { box-shadow: 0 0 0 2px transparent; } }
.geklickt { animation: aufleuchten .45s ease-out; }


/* ---------- Kopf --------------------------------------------------------- */

.kopf {
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse at 85% -40%, rgba(200, 170, 110, .16), transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}

.kopf__innen {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.75rem) var(--pad) clamp(1.1rem, 3vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.wechsel { margin: 0 0 .6rem; display: flex; gap: 1.25rem; font-size: .88rem; }
.wechsel a { color: var(--dim); text-decoration: none; }
.wechsel a:hover { color: var(--gold); }

.wortmarke {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.zahlen { display: flex; flex-wrap: wrap; gap: 0 clamp(1.25rem, 3vw, 2.5rem); margin: 0; }
.zahlen div { display: flex; flex-direction: column-reverse; }
.zahlen dt { font-size: .78rem; letter-spacing: .04em; color: var(--dimmer); }
.zahlen dd { margin: 0; font: 700 1.9rem/1.1 var(--cond); font-variant-numeric: tabular-nums; }

.reiter {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  gap: .25rem;
  overflow-x: auto;
}

.reiter__r {
  padding: .7rem 1.1rem .65rem;
  border-bottom: 3px solid transparent;
  color: var(--dim);
  text-decoration: none;
  font: 600 1.15rem/1 var(--cond);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reiter__r:hover { color: var(--text); }
.reiter__r[aria-current="page"] { color: var(--gold-hi); border-bottom-color: var(--gold); }
.reiter__n { margin-left: .3rem; font-size: .9rem; color: var(--dimmer); }


/* ---------- Leiste ------------------------------------------------------- */

.leiste {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(9, 16, 24, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.leiste__innen {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .7rem var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem .8rem;
}

.leiste__anzahl { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); color: var(--dim); font-size: .88rem; }
.leiste__anzahl:not(:empty) { padding-bottom: .55rem; }

.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }

.seg__k {
  padding: .45rem .8rem;
  border: 0;
  border-right: 1px solid var(--rule);
  background: var(--panel);
  color: var(--dim);
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
}

.seg__k:last-child { border-right: 0; }
.seg__k:hover { color: var(--text); background: var(--panel-hi); }
/* Gedrueckt: Farbe UND Unterstrich -- nicht nur ueber Farbe unterscheidbar. */
.seg__k[aria-pressed="true"] { color: var(--ink); background: var(--gold); font-weight: 600; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35); }

.feld { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; color: var(--dimmer); }
.feld--breit { flex: 1 1 14rem; }

.feld input {
  padding: .45rem .7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: .95rem;
  color: var(--text);
  min-width: 0;
}

.knopf {
  display: inline-block;
  padding: .45rem .85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.knopf:hover { border-color: var(--gold); }
.knopf[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-hi); background: rgba(200, 170, 110, .16); }
.knopf--leise { background: transparent; color: var(--dim); }


/* ---------- Raster ------------------------------------------------------- */

.katalog { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2rem) var(--pad) 3rem; }

.gruppe + .gruppe { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

.gruppe__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: .9rem; }
.gruppe__kopf h2 { font-size: 1.55rem; font-weight: 600; }
.gruppe__n { color: var(--dimmer); font-size: .88rem; margin-right: auto; }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }

.karte {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}

.karte:hover, .karte:focus-visible { border-color: var(--gold); transform: translateY(-2px); }

.karte__bild { position: relative; display: block; aspect-ratio: 16 / 9; background: #05090e; overflow: hidden; }
.karte__bild img, .karte__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.karte__dauer, .karte__rang, .karte__neu, .karte__gesehen {
  position: absolute;
  z-index: 1;
  padding: .1rem .4rem;
  border-radius: 2px;
  background: rgba(5, 9, 14, .82);
  font-size: .8rem;
  line-height: 1.4;
}

.karte__dauer { right: .4rem; bottom: .4rem; }
.karte__rang { left: .4rem; top: .4rem; font: 700 1rem/1.3 var(--cond); color: var(--gold-hi); border: 1px solid var(--gold); }
.karte__neu { right: .4rem; top: .4rem; background: var(--gold); color: var(--ink); font-weight: 600; }
.karte__gesehen { left: .4rem; top: .4rem; color: var(--hex); }

.karte__stand { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .18); }
.karte__stand span { display: block; height: 100%; background: var(--gold); }

.karte__text { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem .8rem; }
.karte__titel { font: 600 1.2rem/1.2 var(--cond); }
.karte__unter { color: var(--dim); font-size: .85rem; }
.karte__zeichen { display: flex; gap: .7rem; font-size: .8rem; color: var(--gold); }
.karte__zeichen:empty { display: none; }

.leer { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem var(--pad); color: var(--dim); }
.leer code { color: var(--warn); }


/* ---------- Fuss --------------------------------------------------------- */

.fuss { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem var(--pad) 3rem; border-top: 1px solid var(--rule); color: var(--dimmer); font-size: .88rem; }
.sicherung summary { cursor: pointer; color: var(--dim); }
.sicherung__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }


/* ---------- Abspieler ---------------------------------------------------- */

.spieler {
  width: min(1280px, 100vw - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink-2);
  color: var(--text);
  overflow-y: auto;
}

.spieler::backdrop { background: rgba(3, 6, 10, .86); }

.spieler__buehne { position: relative; background: #000; }
.spieler__buehne video { display: block; width: 100%; max-height: 68dvh; aspect-ratio: 16 / 9; background: #000; }

.spieler__nav, .spieler__zu {
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(5, 9, 14, .7);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.spieler__nav { top: 42%; }
.spieler__nav--vor { left: .6rem; }
.spieler__nav--nach { right: .6rem; }
.spieler__zu { top: .6rem; right: .6rem; }
.spieler__nav:disabled { opacity: .25; cursor: default; }
/* Beim ganzen Spiel wird nicht geblaettert -- die Pfeile laegen nur im Bild. */
.spieler[data-art="roh"] .spieler__nav { display: none; }

.spieler__fehler {
  position: absolute; inset: 0; margin: 0; padding: 2rem;
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  background: rgba(5, 9, 14, .92); text-align: center;
}
.spieler__fehler b { font: 600 1.4rem var(--cond); color: var(--warn); }

.streifen { padding: .9rem 1rem .2rem; }

.streifen__bahn {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--panel-hi);
  cursor: pointer;
}

.streifen__stand { height: 100%; width: 0; border-radius: 7px; background: rgba(200, 170, 110, .35); pointer-events: none; }

/* Clip-Stelle: goldener Kreis. Eigene Marke: tuerkise Raute -- die Form
   unterscheidet, nicht nur die Farbe. */
.streifen__marke {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  padding: 0;
  border: 2px solid var(--ink-2);
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}

.streifen__marke--eigen { border-radius: 2px; background: var(--hex); transform: rotate(45deg); }
.streifen__marke:hover, .streifen__marke:focus-visible { border-color: #fff; z-index: 1; }

.werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; padding: .7rem 1rem; border-bottom: 1px solid var(--rule); }
.werkzeug__status { color: var(--gold); font-size: .88rem; }
.werkzeug__pos { margin-left: auto; color: var(--dimmer); font-size: .88rem; }

.spieler__feld { padding: 1rem 1rem 1.25rem; display: grid; gap: .8rem; }
.spieler__pfad { margin: 0; color: var(--dim); font-size: .9rem; }
.spieler__titel { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--gold-hi); }
.spieler__grund { margin: 0; max-width: 75ch; color: var(--dim); }

.spieler__werte { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; }
.spieler__werte div { display: flex; flex-direction: column-reverse; }
.spieler__werte dt { font-size: .75rem; color: var(--dimmer); }
.spieler__werte dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.marken h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: .4rem; }
.marken__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; max-height: 14rem; overflow-y: auto; }
.marken__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }

.marken__zeit {
  min-width: 4.2rem;
  padding: .25rem .5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
}
.marken__zeit:hover { border-color: var(--gold); }

.marken__art { min-width: 4.2rem; font-size: .78rem; color: var(--gold); }
.marken__zeile--eigen .marken__art { color: var(--hex); }
.marken__titel { flex: 1 1 12rem; }
.marken__text { flex: 1 1 12rem; min-width: 0; padding: .25rem .5rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); }
.marken__weg { padding: .2rem .5rem; border: 0; background: none; color: var(--dimmer); font-size: .82rem; cursor: pointer; text-decoration: underline; }
.marken__weg:hover { color: var(--warn); }

.notiz { display: grid; gap: .25rem; font-size: .82rem; color: var(--dimmer); }
.notiz small { color: var(--hex); margin-left: .4rem; }
.notiz textarea { padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); color: var(--text); font-size: .95rem; resize: vertical; }

.spieler__taten { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.spieler__status { color: var(--hex); font-size: .88rem; }
.spieler__linkfeld { flex: 1 1 16rem; padding: .4rem .6rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); }
.spieler__tasten { color: var(--dimmer); font-size: .85rem; }
.spieler__tasten summary { cursor: pointer; }
.spieler__tasten p { margin: .4rem 0 0; }


@media (max-width: 640px) {
  .spieler { width: 100vw; max-height: 100dvh; border: 0; }
  .spieler__nav { display: none; }
  .werkzeug__pos { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .karte { transition: none; }
  .karte:hover, .karte:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------
   Weg zum Dojo (dojo.nidahub.de)
   Soll auffallen, ohne zu schreien: Das Hextech-Tuerkis ist im ganzen
   Farbschema sonst nur fuer eigene Marken vergeben und sticht deshalb
   gegen Gold und Dunkelblau heraus - ohne eine neue Farbe einzufuehren.

   Der Hinweis auf die Anmeldung steht sichtbar darunter, nicht nur im
   title: Der Knopf fuehrt von einer offenen Seite auf eine geschuetzte,
   und eine Google-Anmeldung als Ueberraschung waere aergerlich.
--------------------------------------------------------------------- */
.dojo { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }

.knopf--dojo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.5rem;
  font: 800 1.35rem/1 var(--cond);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #06231f;
  background: linear-gradient(135deg, var(--hex), #7ee8dd);
  border: 1px solid var(--hex);
  border-radius: var(--radius);
  box-shadow: 0 0 0 0 rgba(53, 201, 189, .55);
  overflow: hidden;
}

.knopf--dojo:hover,
.knopf--dojo:focus-visible {
  border-color: #7ee8dd;
  box-shadow: 0 0 18px -2px rgba(53, 201, 189, .75);
}

/* Ruhiges Pulsieren lenkt den Blick hin. Kein Versatz, keine Groessen-
   aenderung - nur der Schein, damit es neben den Zahlen nicht zappelt. */
@keyframes dojo-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53, 201, 189, .0); }
  50%      { box-shadow: 0 0 16px -2px rgba(53, 201, 189, .65); }
}
.knopf--dojo { animation: dojo-puls 3.2s ease-in-out infinite; }

/* Raute statt Symbolschrift: haelt die Seite frei von fremden Quellen. */
.knopf--dojo__mal {
  width: .74rem; height: .74rem;
  background: #06231f;
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.knopf--dojo__pfeil { font-size: .9em; opacity: .75; }

.dojo__hinweis {
  margin: 0;
  font-size: .78rem;
  color: var(--dimmer);
  max-width: 22ch;
}

@media (max-width: 720px) {
  .dojo { width: 100%; }
  .knopf--dojo { width: 100%; justify-content: center; }
  .dojo__hinweis { max-width: none; }
}

/* Nur Bewegung entfaellt - der Knopf bleibt farblich hervorgehoben, und
   die Klick-Rueckmeldung (.geklickt) bleibt ebenfalls erhalten. */
@media (prefers-reduced-motion: reduce) {
  .knopf--dojo { animation: none; box-shadow: 0 0 14px -3px rgba(53, 201, 189, .6); }
}

/* ---------- Was der Browser mitbringt ------------------------------------
   Textauswahl und Rollleiste kommen sonst in Systemfarben - helles Blau und
   ein breiter grauer Balken mitten im dunklen Bild. Sie gehoeren zur Seite
   wie alles andere; unter /cs2/ steht derselbe Block. */

::selection { background: rgb(200 170 110 / .32); color: #fff; }

html { scrollbar-width: thin; scrollbar-color: var(--rule) var(--ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: var(--rule);
  border: 3px solid var(--ink);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #31465f; }