/* Bearded Dwarf Forge — Gestaltung.
   Die Farben kommen aus dem Logo: Anthrazit als Grund, Stahl fuer Flaechen und
   Schrift, Bronze als einzige Akzentfarbe. */

@import url('/static/schriften.css');

:root {
  --grund:        #0c0c0e;
  --grund-tief:   #08080a;
  --flaeche:      #16171b;
  --flaeche-hoch: #1d1f24;
  --kante:        #2a2d34;
  --kante-hell:   #3a3e47;
  --stahl:        #d8dbe1;
  --stahl-matt:   #9aa0aa;
  --leise:        #7d838d;
  --bronze:       #b0793a;
  --bronze-hell:  #d59a55;
  --bronze-tief:  #7d5426;
  --gut:          #6fae6a;
  --gefahr:       #c0574f;
  --rund:         4px;
  --schatten:     0 2px 10px rgba(0,0,0,.5);
  --bahn:         1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, #17181d 0%, transparent 60%),
    var(--grund);
  color: var(--stahl);
  font: 16px/1.6 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, .marke-text, .system-marke, .siegel, .vs, .zahlen b {
  font-family: 'Cinzel', 'Iowan Old Style', Georgia, serif;
  letter-spacing: .02em;
}
h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.2; margin: 0 0 .4em; }
h2 { font-size: 1.25rem; margin: 0 0 .6em; }
h3 { font-size: 1.05rem; margin: 0 0 .4em; }

a { color: var(--bronze-hell); text-decoration: none; }
a:hover { color: var(--bronze); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--bronze-hell); outline-offset: 2px; }

.springen {
  position: absolute; left: -9999px;
  background: var(--bronze); color: #14100b; padding: .6em 1em;
}
.springen:focus { left: 8px; top: 8px; z-index: 100; }

.nur-lesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kante);
  box-shadow: 0 1px 0 rgba(176,121,58,.18);
}
.kopf-innen {
  max-width: var(--bahn); margin: 0 auto; padding: .5rem 1rem;
  display: flex; align-items: center; gap: 1.2rem;
}
.marke { display: flex; align-items: center; gap: .6rem; color: var(--stahl); }
.marke:hover { text-decoration: none; color: var(--bronze-hell); }
.marke img { height: 38px; width: auto; }
.marke-text { display: flex; flex-direction: column; line-height: 1.05; }
.marke-text b { font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; }
.marke-text em {
  font-style: normal; font-size: .72rem; letter-spacing: .34em;
  color: var(--bronze); text-transform: uppercase;
}
.haupt-nav { display: flex; gap: 1.1rem; margin-left: auto; }
.haupt-nav a {
  color: var(--stahl-matt); font-size: .93rem; letter-spacing: .04em;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.haupt-nav a:hover { color: var(--stahl); text-decoration: none; }
.haupt-nav a.hier { color: var(--bronze-hell); border-bottom-color: var(--bronze); }
.kopf-rechts { display: flex; align-items: center; gap: .6rem; }
.konto { display: flex; align-items: center; gap: .5rem; color: var(--stahl); font-size: .9rem; }
.hinweis-knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--kante); border-radius: var(--rund);
  color: var(--stahl-matt);
}
.hinweis-knopf.voll { color: var(--bronze-hell); border-color: var(--bronze-tief); }
.hinweis-knopf b {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
  background: var(--bronze); color: #14100b; border-radius: 9px;
  font: 600 11px/17px 'Inter', sans-serif; text-align: center; padding: 0 4px;
}

/* ------------------------------------------------------------- Grundraster */

main { min-height: 62vh; padding-bottom: 3rem; }
.bahn { max-width: var(--bahn); margin: 0 auto; padding: 1.4rem 1rem; }
.bahn.schmal { max-width: 760px; }
.leise { color: var(--leise); }
.mitte { text-align: center; }
.brotkrumen { margin: 0 0 1rem; font-size: .9rem; }

.reihe-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.reihe-kopf h1, .reihe-kopf h2 { margin: 0; }
.reihe-kopf.klein h2 { font-size: 1.05rem; }
.mehr { font-size: .88rem; }

/* ----------------------------------------------------------------- Buehne */

.buehne {
  border-bottom: 1px solid var(--kante);
  background:
    radial-gradient(700px 340px at 22% 30%, rgba(176,121,58,.13) 0%, transparent 70%),
    linear-gradient(180deg, #101116 0%, var(--grund) 100%);
}
.buehne-innen {
  display: grid; grid-template-columns: auto 1fr; gap: 2.4rem;
  align-items: center; padding-top: 2.4rem; padding-bottom: 2.6rem;
}
.buehne-logo { filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)); }
.buehne-text h1 { margin-bottom: .5em; }
.buehne-text p { max-width: 52ch; color: var(--stahl-matt); }
.buehne-knoepfe { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.4rem 0 1rem; }
.systeme-zeile { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }

.zahlen {
  display: flex; gap: 2.4rem; flex-wrap: wrap;
  border-block: 1px solid var(--kante); padding: 1rem 0;
}
.zahlen div, .zahlen span { display: flex; flex-direction: column; }
.zahlen b { font-size: 1.9rem; color: var(--bronze-hell); line-height: 1.1; }
.zahlen span { font-size: .85rem; color: var(--leise); }
.zahlen.klein { gap: 1.8rem; border: 0; padding: 0; }
.zahlen.klein b { font-size: 1.3rem; }

.ablauf {
  list-style: none; counter-reset: schritt; padding: 0; margin: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ablauf li {
  counter-increment: schritt; position: relative;
  padding: 1rem 1rem 1rem 3.2rem;
  background: var(--flaeche); border: 1px solid var(--kante); border-radius: var(--rund);
}
.ablauf li::before {
  content: counter(schritt);
  position: absolute; left: 1rem; top: 1rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--bronze-tief); color: #f2e6d6;
  font: 600 .9rem/1.7rem 'Cinzel', serif; text-align: center;
}
.ablauf b { display: block; }
.ablauf span { color: var(--leise); font-size: .9rem; }

/* ----------------------------------------------------------------- Karten */

.karten {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.karte {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--flaeche-hoch) 0%, var(--flaeche) 100%);
  border: 1px solid var(--kante); border-radius: var(--rund);
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: var(--schatten);
  display: flex; flex-direction: column; gap: .7rem;
}
.karte::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--system, var(--bronze)); opacity: .85;
}
.karte.gross { padding: 1.6rem; gap: 1rem; }
.karte.vergeben { opacity: .72; }
.karte h3 { margin: 0; }
.karte h3 a { color: var(--stahl); }
.karte h3 a:hover { color: var(--bronze-hell); text-decoration: none; }
.karte-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.karte-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-top: auto; padding-top: .7rem;
  border-top: 1px solid var(--kante); flex-wrap: wrap;
}
.karte-fuss.weit { gap: 1rem; }

.system-marke {
  display: inline-block; padding: .18em .6em;
  border: 1px solid color-mix(in srgb, var(--system, var(--bronze)) 55%, transparent);
  background: color-mix(in srgb, var(--system, var(--bronze)) 14%, transparent);
  color: color-mix(in srgb, var(--system, var(--bronze)) 78%, #ffffff);
  border-radius: 2px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
}
.system-marke.klein { font-size: .68rem; padding: .1em .45em; }
.art-marke {
  display: inline-block; padding: .18em .6em; border: 1px solid var(--kante-hell);
  border-radius: 2px; font-size: .74rem; color: var(--stahl-matt);
  letter-spacing: .06em; text-transform: uppercase;
}
.siegel {
  margin-left: auto; padding: .2em .7em;
  border: 1px solid var(--bronze-tief); color: var(--bronze-hell);
  border-radius: 2px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  transform: rotate(-2deg);
}
.siegel.ruhig { border-color: var(--kante-hell); color: var(--leise); }

.eckdaten { display: grid; gap: .35rem; margin: 0; }
.eckdaten div { display: flex; gap: .5rem; }
.eckdaten dt {
  min-width: 4.4rem; color: var(--leise); font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; padding-top: .12rem;
}
.eckdaten dd { margin: 0; }
.eckdaten.gross dd { font-size: 1.05rem; }

.notiz {
  background: var(--grund-tief); border-left: 2px solid var(--kante-hell);
  padding: .8rem 1rem; margin: 0; color: var(--stahl-matt);
}

.spieler-verweis { display: inline-flex; align-items: center; gap: .45rem; color: var(--stahl); font-size: .9rem; }
.spieler-verweis:hover { color: var(--bronze-hell); text-decoration: none; }
.avatar {
  display: inline-block; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--kante-hell); background: var(--flaeche-hoch); flex: none;
}
.avatar.ohne-bild {
  display: inline-block; text-align: center; vertical-align: middle;
  color: var(--bronze-hell); font-family: 'Cinzel', serif;
  background: radial-gradient(circle at 40% 30%, #24262c, #15161a);
}
.ersteller { display: flex; align-items: center; gap: .8rem; }
.ersteller .name { font-weight: 600; color: var(--stahl); }
.ersteller p { margin: .1rem 0 0; font-size: .88rem; }

/* ---------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .62rem 1.1rem; border: 1px solid var(--bronze-tief); border-radius: var(--rund);
  background: linear-gradient(180deg, var(--bronze) 0%, var(--bronze-tief) 100%);
  color: #17110a; font: 600 .92rem/1 'Inter', sans-serif; letter-spacing: .02em;
  cursor: pointer; text-align: center;
}
.knopf:hover { background: linear-gradient(180deg, var(--bronze-hell) 0%, var(--bronze) 100%); color: #17110a; text-decoration: none; }
.knopf.gross { padding: .85rem 1.5rem; font-size: 1rem; }
.knopf.klein { padding: .4rem .8rem; font-size: .84rem; }
.knopf.leise {
  background: transparent; color: var(--stahl); border-color: var(--kante-hell);
}
.knopf.leise:hover { background: var(--flaeche-hoch); color: var(--stahl); }
.knopf.gefahr { background: transparent; border-color: #6b3430; color: var(--gefahr); }
.knopf.gefahr:hover { background: rgba(192,87,79,.12); color: var(--gefahr); }
.knopf.annehmen { box-shadow: 0 0 0 0 rgba(176,121,58,.5); animation: puls 2.6s ease-out infinite; }
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(176,121,58,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(176,121,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(176,121,58,0); }
}
@media (prefers-reduced-motion: reduce) { .knopf.annehmen { animation: none; } }

.mini {
  background: none; border: 0; color: var(--leise); cursor: pointer;
  font: inherit; font-size: .85rem; padding: 0 .25rem;
}
.mini:hover { color: var(--bronze-hell); }
.mini.text { font-size: .8rem; }
.mini.gefahr:hover, .mini.text.gefahr:hover { color: var(--gefahr); }
.inline { display: inline; }
.inline-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .3rem 0; }
.tat-reihe { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.tat-spalte { white-space: nowrap; }
.zuruecksetzen { font-size: .85rem; align-self: center; }

/* -------------------------------------------------------------- Formulare */

.formular { display: grid; gap: .9rem; }
/* Beschriftung und der Zusatz „(freiwillig)" stehen nebeneinander, das
   Eingabefeld darunter über die volle Breite. */
.formular label, .filter label {
  display: grid; grid-template-columns: max-content 1fr;
  align-items: baseline; gap: .3rem .45rem;
  font-size: .9rem; color: var(--stahl-matt);
}
.formular label > input, .formular label > select, .formular label > textarea,
.filter label > input, .filter label > select, .filter label > textarea {
  grid-column: 1 / -1;
}
datalist { display: none; }
.formular label small, .formular h2 small { color: var(--leise); font-weight: 400; }
input, select, textarea {
  font: inherit; color: var(--stahl);
  background: var(--grund-tief); border: 1px solid var(--kante);
  border-radius: var(--rund); padding: .55rem .7rem; width: 100%;
}
input[type="color"] { padding: .2rem; height: 2.6rem; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--bronze); }
input:focus, select:focus, textarea:focus { border-color: var(--bronze-tief); outline: none; box-shadow: 0 0 0 2px rgba(176,121,58,.25); }
textarea { resize: vertical; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.dreier { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.kasten { display: flex !important; flex-direction: row !important; align-items: center; gap: .5rem; }
.kasten.gross-kasten b { font-size: 1.05rem; color: var(--stahl); }

.wahl { border: 0; padding: 0; margin: 0; }
.wahl legend { font-size: .9rem; color: var(--stahl-matt); padding: 0 0 .4rem; }
.wahl-reihe { display: flex; gap: .6rem; flex-wrap: wrap; }
.wahl-feld { position: relative; }
.wahl-feld input { position: absolute; opacity: 0; }
.wahl-feld span {
  display: block; padding: .7rem 1.1rem; cursor: pointer;
  border: 1px solid var(--kante); border-radius: var(--rund);
  background: var(--flaeche); font-weight: 600;
}
.wahl-feld input:checked + span {
  border-color: var(--system, var(--bronze));
  background: color-mix(in srgb, var(--system, var(--bronze)) 16%, var(--flaeche));
  color: #fff;
}
.wahl-feld input:focus-visible + span { outline: 2px solid var(--bronze-hell); outline-offset: 2px; }

.filter {
  display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap;
  background: var(--flaeche); border: 1px solid var(--kante); border-radius: var(--rund);
  padding: .9rem 1rem; margin-bottom: 1.2rem;
}
.filter .feld { min-width: 8rem; }
.filter select, .filter input { min-width: 7rem; }
.ergebnis-zeile { color: var(--stahl-matt); margin: 0 0 1rem; }
.ergebnis-zeile b { color: var(--bronze-hell); font-size: 1.1rem; }

.bild-reihe { display: flex; gap: 1rem; align-items: flex-start; }
.bild-reihe > div { flex: 1; display: grid; gap: .5rem; }
.system-block {
  border: 1px solid var(--kante); border-left: 3px solid var(--system, var(--bronze));
  border-radius: var(--rund); padding: 1rem; margin-bottom: .9rem; display: grid; gap: .7rem;
}
.zeiten { width: 100%; border-collapse: collapse; font-size: .9rem; }
.zeiten th { color: var(--stahl-matt); font-weight: 500; text-align: left; padding: .3rem .5rem; }
.zeiten thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); }
.zeiten td { text-align: center; padding: .3rem .5rem; border-top: 1px solid var(--kante); }
.zeiten td .kasten { justify-content: center; }

/* ---------------------------------------------------------------- Bloecke */

.block {
  background: var(--flaeche); border: 1px solid var(--kante); border-radius: var(--rund);
  padding: 1.2rem 1.3rem; margin-bottom: 1.2rem;
}
.block.wichtig { border-color: var(--bronze-tief); background: linear-gradient(180deg, rgba(176,121,58,.10), var(--flaeche)); }
.block h2 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.spalten { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.liste li { border-top: 1px solid var(--kante); }
.liste li:first-child { border-top: 0; }
.liste a { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; color: var(--stahl); flex-wrap: wrap; }
.liste a:hover { color: var(--bronze-hell); text-decoration: none; }
.liste .leise { font-size: .86rem; }
.hinweis-liste li.neu { border-left: 2px solid var(--bronze); padding-left: .6rem; }
.ergebnis-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; flex-wrap: wrap; }

.leer {
  text-align: center; padding: 2.4rem 1rem; color: var(--leise);
  border: 1px dashed var(--kante); border-radius: var(--rund);
}
.leer.gross { padding: 4rem 1rem; }
.leer h1 { font-size: 3rem; color: var(--kante-hell); }

.meldung {
  padding: .8rem 1rem; border-radius: var(--rund); margin: 0 0 1rem;
  border: 1px solid var(--kante); background: var(--flaeche);
}
.meldung.gut { border-color: #3f6b3c; background: rgba(111,174,106,.12); }
.meldung.fehler { border-color: #6b3430; background: rgba(192,87,79,.12); }
.meldung.hinweis { border-color: var(--bronze-tief); background: rgba(176,121,58,.10); }
.gut-text { color: var(--gut); }
.fehler-text { color: var(--gefahr); }

.marken { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .5rem 0 0; }
.marke-mit-x { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--kante); border-radius: 2px; padding: .15rem .45rem; font-size: .85rem; }

/* ------------------------------------------------------------------ Duell */

.duell {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  background: linear-gradient(180deg, var(--flaeche-hoch), var(--flaeche));
  border: 1px solid var(--kante); border-top: 2px solid var(--system, var(--bronze));
  border-radius: var(--rund); padding: 1.6rem 1rem; margin-bottom: .8rem;
}
.duell-seite { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.duell-seite a { color: var(--stahl); font-weight: 600; }
.duell-mitte { display: grid; justify-items: center; gap: .4rem; }
.vs { color: var(--bronze); font-size: 1.4rem; letter-spacing: .1em; }
.duell-daten { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; color: var(--stahl-matt); margin: 0 0 1.4rem; }
.ergebnis-zahlen { font-size: 1.1rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.ergebnis-zahlen b { font-family: 'Cinzel', serif; font-size: 2rem; color: var(--bronze-hell); }

.verlauf { display: grid; gap: .6rem; max-height: 460px; overflow-y: auto; padding-right: .3rem; margin-bottom: 1rem; }
.blase {
  background: var(--grund-tief); border: 1px solid var(--kante);
  border-radius: var(--rund); padding: .6rem .8rem; max-width: 80%;
}
.blase.meine { margin-left: auto; border-color: var(--bronze-tief); background: rgba(176,121,58,.10); }
.blase p { margin: 0 0 .2rem; }
.blase span { font-size: .78rem; }
.nachricht-form { display: flex; gap: .6rem; align-items: flex-end; }
.nachricht-form textarea { flex: 1; }
.kontakt { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.teilnehmer { list-style: none; margin: 0; padding: 0; display: flex; gap: .8rem; flex-wrap: wrap; }
.teilnehmer li { display: flex; align-items: center; gap: .2rem; }
.fraktionen { list-style: none; margin: .4rem 0; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.fraktionen li {
  display: flex; align-items: center; gap: .2rem; font-size: .85rem;
  border: 1px solid var(--kante); border-radius: 2px; padding: .15rem .5rem;
}

/* --------------------------------------------------------------- Tabellen */

.tabelle-rolle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th, .tabelle td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--kante); }
.tabelle thead th {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--leise); font-weight: 500; white-space: nowrap;
}
.tabelle tbody tr:hover { background: rgba(255,255,255,.02); }
.tabelle tr.ich { background: rgba(176,121,58,.10); }
.tabelle tr.ich td { border-color: var(--bronze-tief); }
.tabelle tr.gesperrt { opacity: .55; }
.tabelle input, .tabelle select { padding: .3rem .4rem; font-size: .85rem; width: auto; min-width: 3.4rem; }

/* -------------------------------------------------------------- Profil */

.profil-kopf { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1.4rem; flex-wrap: wrap; }
.profil-kopf h1 { margin: 0 0 .2rem; }
.profil-kurz { display: flex; gap: .9rem; align-items: center; }
.profil-kurz b { display: block; }
.profil-kurz span { font-size: .88rem; }
.system-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.system-liste li {
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
  border-left: 2px solid var(--system, var(--bronze)); padding-left: .8rem;
}
.spieler-karten .spieler-kopf { display: flex; gap: .8rem; align-items: center; color: var(--stahl); }
.spieler-karten .spieler-kopf:hover { text-decoration: none; color: var(--bronze-hell); }
.spieler-karten .spieler-kopf span { display: block; font-size: .85rem; }

/* ---------------------------------------------------------------- Admin */

.admin-nav {
  display: flex; gap: .2rem; overflow-x: auto;
  background: var(--flaeche); border-bottom: 1px solid var(--kante);
  padding: 0 max(1rem, calc((100vw - var(--bahn)) / 2));
}
.admin-nav a {
  padding: .7rem .9rem; color: var(--stahl-matt); font-size: .88rem; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.admin-nav a:hover { color: var(--stahl); text-decoration: none; }
.admin-nav a.hier { color: var(--bronze-hell); border-bottom-color: var(--bronze); }
.system-verwaltung { border-left: 3px solid var(--system, var(--bronze)); }

/* ------------------------------------------------------------------- Tor */

.tor {
  background: var(--flaeche); border: 1px solid var(--kante); border-radius: var(--rund);
  padding: 2rem; text-align: center; box-shadow: var(--schatten); margin-top: 1.5rem;
}
.tor-logo { margin-bottom: .8rem; }
.tor .formular { text-align: left; margin-top: 1.2rem; }
.tor h1 { font-size: 1.6rem; }

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

.fuss { border-top: 1px solid var(--kante); background: var(--grund-tief); }
.fuss-innen { text-align: center; color: var(--leise); font-size: .88rem; }
.fuss-innen b { color: var(--stahl-matt); }
.fuss-innen .leise { letter-spacing: .3em; font-size: .72rem; text-transform: uppercase; }

/* ------------------------------------------------------------------ Handy */

@media (max-width: 780px) {
  .buehne-innen { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 1.4rem; }
  .buehne-logo { width: 180px; }
  .buehne-text p { margin-inline: auto; }
  .buehne-knoepfe, .systeme-zeile { justify-content: center; }
  /* Am Telefon steckt die Navigation im Menü hinter dem Profilbild. */
  .haupt-nav { display: none; }
  .kopf-innen { gap: .7rem; }
  .kopf-rechts { margin-left: auto; }
  .nur-schmal-aus, .nur-breit { display: none; }
  .menue-haupt { display: grid; }
  .paar, .dreier { grid-template-columns: 1fr; }
  .duell { grid-template-columns: 1fr auto 1fr; gap: .4rem; padding: 1.2rem .6rem; }
  .zahlen { gap: 1.4rem; justify-content: space-between; }
  .blase { max-width: 92%; }
}

.fuss-verweise { margin: 0 0 .4rem; }
.fuss-verweise a { color: var(--stahl-matt); }
.fuss-verweise a:hover { color: var(--bronze-hell); }

/* ---- Teamauswahl im Profil: viele Einträge, wenig Platz ---- */
.teams { border: 0; padding: 0; margin: 0; }
.teams legend { font-size: .9rem; color: var(--stahl-matt); padding: 0 0 .5rem; }
.teams legend small { color: var(--leise); }
.team-suche { margin-bottom: .6rem; }
.team-liste {
  max-height: 15rem; overflow-y: auto;
  border: 1px solid var(--kante); border-radius: var(--rund);
  background: var(--grund-tief); padding: .3rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 .6rem;
}
.team {
  display: flex; align-items: center; gap: .4rem;
  padding: .18rem .4rem; border-radius: 2px;
}
.team:hover { background: rgba(255,255,255,.03); }
.team.an { background: color-mix(in srgb, var(--system, var(--bronze)) 12%, transparent); }
.team .kasten { flex: 1; font-size: .9rem; color: var(--stahl); cursor: pointer; }
.team.an .kasten span { color: #fff; }
.stern { cursor: pointer; line-height: 1; }
.stern input { position: absolute; opacity: 0; width: 0; }
.stern span[aria-hidden] { color: var(--kante-hell); font-size: 1.05rem; transition: color .15s; }
.stern:hover span[aria-hidden] { color: var(--bronze-tief); }
.stern input:checked + span[aria-hidden] { color: var(--bronze-hell); }
.stern input:focus-visible + span[aria-hidden] { outline: 2px solid var(--bronze-hell); outline-offset: 2px; }
.team[hidden] { display: none; }
.teams-leer { color: var(--leise); font-size: .88rem; padding: .5rem; }
.bevorzugt-marke { color: var(--bronze-hell); }

/* ---- Änderungsvorschläge ---- */
.vorschlag h2 { font-size: 1rem; }
.vorschlag .notiz { margin: .4rem 0 .6rem; }


/* ---- Menü hinter dem Profilbild ---- */
.menue { position: relative; }
/* Für Besucher ohne Konto gibt es am Rechner schon Leiste und Knöpfe --
   das Balkensymbol wäre dort doppelt gemoppelt. */
.menue.nur-schmal { display: none; }
.menue > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem .45rem; cursor: pointer; list-style: none;
  border: 1px solid transparent; border-radius: var(--rund);
  color: var(--stahl); font-size: .9rem;
}
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary:hover { border-color: var(--kante); background: var(--flaeche); }
.menue[open] > summary { border-color: var(--bronze-tief); background: var(--flaeche-hoch); }
.menue > summary:focus-visible { outline: 2px solid var(--bronze-hell); outline-offset: 2px; }

/* Das Symbol für Besucher ohne Konto */
.balken-symbol { display: grid; gap: 4px; width: 20px; padding: 4px 0; }
.balken-symbol span { display: block; height: 2px; background: var(--stahl-matt); border-radius: 2px; }
.menue[open] .balken-symbol span { background: var(--bronze-hell); }

.menue-blatt {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
  min-width: 15rem; padding: .4rem;
  background: var(--flaeche-hoch); border: 1px solid var(--kante-hell);
  border-radius: var(--rund); box-shadow: 0 14px 34px rgba(0,0,0,.6);
  animation: menue-auf .12s ease-out;
}
@keyframes menue-auf { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .menue-blatt { animation: none; } }

.menue-blatt a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .6rem .7rem; border-radius: 2px;
  color: var(--stahl); font-size: .95rem;
}
.menue-blatt a:hover { background: rgba(255,255,255,.05); color: var(--bronze-hell); text-decoration: none; }
.menue-blatt a.hier { color: var(--bronze-hell); background: rgba(176,121,58,.12); }
.menue-blatt a.leise { color: var(--leise); }
.menue-blatt .zahl {
  background: var(--bronze); color: #14100b; border-radius: 9px;
  padding: 0 .4em; font-size: .78rem;
}
.menue-haupt { display: none; }          /* am Rechner steht das schon in der Leiste */
.menue-teil { display: grid; }
.menue-haupt + .menue-teil,
.menue-teil + .menue-teil {
  border-top: 1px solid var(--kante); margin-top: .35rem; padding-top: .35rem;
}
.menue-kopf {
  margin: .3rem 0 .1rem; padding: 0 .7rem;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bronze); font-weight: 600;
}
.menue-admin a { padding-block: .45rem; font-size: .9rem; color: var(--stahl-matt); }
.menue-admin a:hover { color: var(--bronze-hell); }
/* Bei vielen Punkten darf das Blatt scrollen statt aus dem Bild zu wachsen. */
.menue-blatt { max-height: min(78vh, 40rem); overflow-y: auto; }

/* Muss ganz am Ende stehen: Diese Regel hebt das `display: none` der
   Menü-Hauptpunkte weiter oben auf. Stünde sie davor, gewänne die spätere. */
@media (max-width: 780px) {
  .menue-haupt { display: grid; }
  .menue.nur-schmal { display: block; }
}


/* ---- Ligen: schmalere Karten, die ganze Fläche ist ein Verweis ---- */
.karten.ligen { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.karte.liga { position: relative; transition: border-color .15s, transform .15s; }
.karte.liga:hover { border-color: var(--bronze-tief); transform: translateY(-2px); }
.karte.liga:focus-within { border-color: var(--bronze); }
/* Der Verweis in der Überschrift legt sich unsichtbar über die ganze Karte --
   so bleibt die Auszeichnung sauber und trotzdem ist alles anklickbar. */
.karte.liga h3 a::after { content: ''; position: absolute; inset: 0; }
.karte.liga h3 a:hover { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .karte.liga:hover { transform: none; } }


/* ---- Einleitung: was man auf dieser Seite tun kann ---- */
.einleitung {
  display: flex; align-items: flex-start; gap: 1rem;
  margin: 0 0 1.4rem; padding: 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(176,121,58,.10), var(--flaeche));
  border: 1px solid var(--bronze-tief); border-left-width: 3px;
  border-radius: var(--rund);
}
.einleitung h2 {
  font-size: 1rem; margin: 0 0 .3rem; color: var(--bronze-hell);
  letter-spacing: .04em;
}
.einleitung p { margin: 0; color: var(--stahl-matt); }
.einleitung ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--leise); font-size: .9rem; }
.einleitung li { margin-bottom: .2rem; }
.einleitung b { color: var(--stahl); }
.einleitung-text { flex: 1; }
.einleitung-zu {
  flex: none; background: none; border: 0; cursor: pointer;
  color: var(--leise); font-size: 1.3rem; line-height: 1; padding: 0 .2rem;
}
.einleitung-zu:hover { color: var(--bronze-hell); }
.einleitung[hidden] { display: none; }


/* ---- Band auf der örtlichen Fassung ---- */
.testband {
  margin: 0; padding: .5rem 1rem; text-align: center;
  background: repeating-linear-gradient(135deg, #3a2c14, #3a2c14 12px, #33270f 12px, #33270f 24px);
  border-bottom: 1px solid var(--bronze-tief);
  color: #e8d6b8; font-size: .85rem;
}
.testband b { color: #fff; }
.testband code { font-size: .8rem; color: var(--bronze-hell); }
.testband a { color: var(--bronze-hell); }

/* ---- Band für Konten ohne bestätigte Mailadresse ---- */
.mahnband {
  margin: 0; padding: .6rem 1rem; text-align: center;
  background: rgba(176,121,58,.16); border-bottom: 1px solid var(--bronze-tief);
  color: var(--stahl); font-size: .9rem;
}
.mahnband b { color: var(--bronze-hell); }
.mahnband a { margin-left: .4rem; }

/* ---- Spielplan und Partien ---- */
.partie {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem .2rem; border-bottom: 1px solid var(--kante); flex-wrap: wrap;
}
.partie:last-child { border-bottom: 0; }
.partie.frei { opacity: .55; }
.partie b { color: var(--stahl); }
.partie-ergebnis { display: inline-block; }
.partie-ergebnis > summary { cursor: pointer; list-style: none; display: inline-flex; }
.partie-ergebnis > summary::-webkit-details-marker { display: none; }
.mini-feld { display: inline-grid !important; gap: .1rem; font-size: .75rem; }
.mini-feld input { width: 4.5rem; padding: .3rem .4rem; }
.tabelle .form { white-space: nowrap; }
.tabelle .form span {
  display: inline-block; width: 1.15rem; height: 1.15rem; margin-right: 2px;
  border-radius: 2px; text-align: center; font-size: .7rem; line-height: 1.15rem;
  color: #14100b; font-weight: 600;
}
.tabelle .form .fS { background: var(--gut); }
.tabelle .form .fU { background: var(--kante-hell); color: var(--stahl); }
.tabelle .form .fN { background: var(--gefahr); }

/* ---- Ergebnisfelder je Spielsystem ---- */
.ergebnis-felder { display: grid; gap: .5rem; padding: .6rem 0; }
.feld-reihe { display: flex; align-items: end; gap: .6rem; flex-wrap: wrap; }
.feld-name { font-size: .8rem; color: var(--stahl-matt); min-width: 9rem; }

.regel-kasten { align-items: flex-start !important; font-size: .88rem; line-height: 1.5; }
.regel-kasten input { margin-top: .25rem; }

.news h2 { font-size: 1.1rem; }
.supporter-bild { max-width: 100%; height: auto; border-radius: var(--rund); margin-bottom: .5rem; }

/* ---- Ortskarte ---- */
.karte-kasten {
  position: relative; height: 26rem; margin-bottom: 1.4rem;
  border: 1px solid var(--kante); border-radius: var(--rund);
  background: var(--flaeche); overflow: hidden;
}
.karte-kasten.geladen { background: #0c0c0e; }
.karte-frage {
  position: absolute; inset: 0; display: grid; place-content: center;
  gap: .8rem; text-align: center; padding: 2rem;
  background:
    radial-gradient(600px 300px at 50% 40%, rgba(176,121,58,.10), transparent 70%),
    var(--flaeche);
}
.karte-frage p { margin: 0; color: var(--stahl-matt); max-width: 42ch; }
.karte-frage .leise { font-size: .85rem; }
.karte-kasten .leaflet-container { height: 100%; background: #16171b; }
/* Die Karte trägt die Farben der Seite, statt weiß zu leuchten */
.karte-kasten .leaflet-tile { filter: brightness(.82) saturate(.75) contrast(1.05); }
.karte-kasten .leaflet-popup-content-wrapper,
.karte-kasten .leaflet-popup-tip { background: var(--flaeche-hoch); color: var(--stahl); }
.karte-kasten .leaflet-popup-content a { color: var(--bronze-hell); }
.karte-kasten .leaflet-control-attribution {
  background: rgba(12,12,14,.8); color: var(--leise);
}
.karte-kasten .leaflet-control-attribution a { color: var(--stahl-matt); }
.karte-kasten .leaflet-bar a {
  background: var(--flaeche-hoch); color: var(--stahl); border-color: var(--kante);
}
.karte-kasten .leaflet-bar a:hover { background: var(--bronze-tief); color: #fff; }