/* Brezelbub — die Seite um das Spiel herum.
   Farben aus dem Spiel selbst: die Nacht des Menüs, das Gold der Brezel. */
:root{
  --nacht:#14101f; --nacht-2:#1c1630; --nacht-3:#251e3c;
  --linie:#3a3054; --gold:#ffd98a; --gold-tief:#c8901f;
  --hell:#f2eefb; --leise:#a99cc4; --blau:#9ad0ff; --gruen:#7cc08f;
  --breite:1000px;
  --textbreite:68ch;
}
*{box-sizing:border-box}
/* hidden ist nur display:none aus der Browser-Grundregel und wird von jeder
   eigenen Klasse mit display-Angabe ausgestochen — der Installieren-Knopf
   war auf dem iPhone deshalb sichtbar, obwohl er dort nichts tun kann.
   Diese Zeile macht hidden wieder verbindlich. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--nacht); color:var(--hell);
  font:16px/1.6 Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold)}
h1,h2,h3{font-family:"Arial Black",Arial,sans-serif; letter-spacing:-.01em; line-height:1.15; text-wrap:balance}

/* Kopf */
.kopf{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  max-width:var(--breite); margin:0 auto; padding:18px 20px;
  border-bottom:1px solid var(--linie);
}
.wortmarke{display:flex; align-items:center; gap:10px; font:700 20px "Arial Black",Arial,sans-serif; color:var(--gold); text-decoration:none}
.brezel{font-size:24px}
.kopf nav{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.kopf nav a{color:var(--leise); text-decoration:none; font-size:15px}
.kopf nav a:hover{color:var(--hell)}
.wer{font-size:14px; color:var(--leise)}
.wer strong{color:var(--blau)}

/* Knöpfe */
.knopf{
  display:inline-block; background:var(--gold); color:#2a1a08 !important;
  padding:9px 18px; border-radius:7px; font-weight:bold; text-decoration:none;
}
.knopf:hover{background:#ffe7ae}
.knopf.gross{padding:15px 28px; font-size:18px}
a:focus-visible,.knopf:focus-visible{outline:3px solid var(--blau); outline-offset:3px}

main{max-width:var(--breite); margin:0 auto; padding:0 20px 80px}

/* Bühne */
.buehne{padding:64px 0 52px; border-bottom:1px solid var(--linie)}
.marke{margin:0 0 16px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-tief); font-weight:bold}
.buehne h1{margin:0 0 18px; font-size:clamp(32px,6vw,52px)}
.vor{margin:0 0 28px; font-size:19px; color:var(--leise); max-width:60ch}
.tasten{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:0}
.klein{font-size:13.5px; color:var(--leise)}

/* Welten */
.welten{padding:48px 0}
.welten h2{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--leise); margin:0 0 20px}
.weltliste{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:8px}
.welt{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:16px;
  background:var(--nacht-2); border:1px solid var(--linie); border-radius:8px; padding:14px 18px;
}
.welt-nr{font:800 22px "Arial Black",Arial,sans-serif; color:var(--gold); text-align:center; font-variant-numeric:tabular-nums}
.welt-text strong{display:block; font-size:17px}
.welt-text span{font-size:14px; color:var(--leise)}
.welt-stand{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--leise); white-space:nowrap}
.welt.frei{border-color:#2f5b3d}
.welt.frei .welt-stand{color:var(--gruen)}
.welt.konto .welt-stand{color:var(--blau)}
.welt.bau{opacity:.55}
.welt.bau .welt-nr{color:var(--leise)}

/* Textseiten */
.text{padding:48px 0; max-width:none}
.text h1{font-size:32px; margin:0 0 20px}
.text h2{font-size:18px; margin:32px 0 10px}
.text ul{padding-left:22px}
.text li{margin-bottom:10px}

/* Fuß */
.fuss{
  border-top:1px solid var(--linie); max-width:var(--breite); margin:0 auto;
  /* 88 px rechts, nicht 20: Der Knopf "nach oben" sitzt fest in genau dieser
     Ecke und deckte die Links Kontakt/Impressum/Datenschutz zu, sobald man
     ganz unten war. Ueber die Stilvorlage geloest und nicht ueber eine Lage,
     die JavaScript ausrechnet — das legte ein style-Attribut an. */
  padding:24px 88px 40px 20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:14px; color:var(--leise);
}
.fuss p{margin:0}
.fuss nav{display:flex; gap:18px}
.fuss a{color:var(--leise)}

@media (max-width:640px){
  .welt{grid-template-columns:36px 1fr; }
  .welt-stand{grid-column:2; }
}

/* Bestenliste */
.liste-kopf{padding:48px 0 28px}
.liste-kopf h1{font-size:32px; margin:0 0 12px}
.leer{padding:40px 0; color:var(--leise)}
.tabelle-rahmen{overflow-x:auto; border:1px solid var(--linie); border-radius:8px; background:var(--nacht-2)}
.rangliste{border-collapse:collapse; width:100%; min-width:600px; font-size:15px}
.rangliste th{
  text-align:left; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--leise); padding:13px 16px; border-bottom:1px solid var(--linie); white-space:nowrap;
}
.rangliste td{padding:12px 16px; border-bottom:1px solid var(--linie)}
.rangliste tr:last-child td{border-bottom:none}
.rangliste .r{text-align:right}
.zahl,.platz{font-variant-numeric:tabular-nums}
.platz{color:var(--leise); font-weight:bold}
.name{font-weight:bold}
.wann{color:var(--leise); font-size:14px; white-space:nowrap}
.podest .platz{color:var(--gold); font-size:17px}
.podest.p1{background:rgba(255,217,138,.07)}
.blaettern{display:flex; align-items:center; justify-content:center; gap:22px; padding:24px 0; font-size:14px; color:var(--leise); flex-wrap:wrap}

/* Bühne mit Figur */
.buehne{display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center}
.buehne-figur{text-align:center}
/* Laufende Figur: ein Streifen aus vier Bildern, weitergeschaltet per steps(4).
   Kein Zwischenbild, keine Weichzeichnung — so laeuft er wie im Spiel. */
.laeufer{
  width:180px; height:360px; margin:0 auto;
  /* Feste Pixelwerte, KEINE Prozente: background-position in Prozent bezieht
     sich auf die Differenz zwischen Rahmen und Bild, nicht auf die Bildbreite —
     damit wandert der Streifen in die falsche Richtung und die Figur ist weg. */
  background:url('/bilder/bub-laufstreifen.png') 0 0 no-repeat;
  background-size:720px 360px;          /* 4 Bilder à 180px */
  image-rendering:pixelated;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.5));
  animation:laufen .62s steps(4) infinite;
}
@keyframes laufen{ from{background-position-x:0} to{background-position-x:-720px} }
@media (prefers-reduced-motion:reduce){
  .laeufer{ animation:none; }
}
.figur-name{
  margin:14px 0 0; font:700 15px "Arial Black",Arial,sans-serif; color:var(--gold);
  letter-spacing:.04em;
}

/* Spielausschnitte */
.schau{padding:48px 0; border-bottom:1px solid var(--linie)}
.schau h2{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--leise); margin:0 0 12px}
.schau-vor{margin:0 0 24px; max-width:var(--textbreite); color:var(--leise); font-size:15.5px}
/* Fuenf Weltbilder: drei in der ersten Reihe, zwei darunter mittig. */
.schau-gitter{display:grid; grid-template-columns:repeat(6,1fr); gap:22px}
.schau-gitter > figure{grid-column:span 2}
.schau-gitter > figure:nth-child(4){grid-column:2 / span 2}
.schau-gitter > figure:nth-child(5){grid-column:4 / span 2}
@media (max-width:1000px){
  .schau-gitter{grid-template-columns:repeat(4,1fr)}
  .schau-gitter > figure,
  .schau-gitter > figure:nth-child(4),
  .schau-gitter > figure:nth-child(5){grid-column:span 2}
}
@media (max-width:620px){
  .schau-gitter{grid-template-columns:1fr}
  .schau-gitter > figure,
  .schau-gitter > figure:nth-child(4),
  .schau-gitter > figure:nth-child(5){grid-column:auto}
}
.schau figure{margin:0; background:var(--nacht-2); border:1px solid var(--linie); border-radius:10px; overflow:hidden}
.schau img{display:block; width:100%; height:auto; image-rendering:pixelated; border-bottom:1px solid var(--linie)}
.schau figcaption{padding:14px 16px; font-size:14px; line-height:1.45}
.schau figcaption strong{display:block; color:var(--hell); margin-bottom:3px}
.schau figcaption span{color:var(--leise)}

@media (max-width:760px){
  .buehne{grid-template-columns:1fr; gap:28px}
  .buehne-figur{order:-1; text-align:left}
  .buehne-figur img{width:130px}
}

/* Lupe an den Ausschnitten */
.schau figure{position:relative}
.lupe{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  position:relative; line-height:0;
}
.lupe-zeichen{
  position:absolute; right:10px; bottom:14px; padding:5px 11px; border-radius:999px;
  background:rgba(20,16,31,.86); color:var(--gold); font:bold 12px Arial,sans-serif;
  line-height:1.4; opacity:0; transition:opacity .16s;
}
.lupe:hover .lupe-zeichen, .lupe:focus-visible .lupe-zeichen{opacity:1}
.lupe:focus-visible{outline:3px solid var(--blau); outline-offset:3px}

/* Lightbox */
#lupe-schleier{
  position:fixed; inset:0; z-index:60; background:rgba(8,5,16,.93);
  display:flex; align-items:center; justify-content:center; padding:28px;
}
#lupe-schleier[hidden]{display:none}
#lupe-schleier figure{margin:0; max-width:min(1100px,94vw); text-align:center}
#lupe-bild{
  display:block; max-width:100%; max-height:78vh; width:auto; height:auto;
  image-rendering:pixelated; border:1px solid var(--linie); border-radius:8px;
  background:var(--nacht-2);
}
#lupe-text{margin:16px 0 0; color:var(--leise); font-size:15px}
#lupe-zu{
  position:absolute; top:18px; right:22px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--linie); background:var(--nacht-2); color:var(--hell);
  font-size:26px; line-height:1; cursor:pointer;
}
#lupe-zu:hover{background:var(--nacht-3)}
#lupe-zu:focus-visible{outline:3px solid var(--blau); outline-offset:2px}

/* SEO-Erklaerblock auf der Startseite */
.seo-spiel{padding:48px 0; border-bottom:1px solid var(--linie)}
.seo-spiel h2{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--leise); margin:0 0 22px}
.seo-karten{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.seo-karten article{background:var(--nacht-2); border:1px solid var(--linie); border-radius:10px; padding:20px}
.seo-karten h3{margin:0 0 10px; font-size:17px; color:var(--gold)}
.seo-karten p{margin:0; color:var(--leise); font-size:14.5px; line-height:1.55}
@media (max-width:760px){.seo-karten{grid-template-columns:1fr}}

/* Ausbaustufen der Figur */
.figuren{padding:48px 0; border-bottom:1px solid var(--linie)}
.figuren h2{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--leise); margin:0 0 22px}
.figurenreihe{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px;
}
.figurenreihe li{
  background:var(--nacht-2); border:1px solid var(--linie); border-radius:10px;
  padding:18px 16px 16px; text-align:center;
}
.figurenreihe img{width:74px; height:auto; image-rendering:pixelated; margin:0 auto 14px; display:block}
.figurenreihe strong{display:block; font-size:15px; margin-bottom:4px}
.figurenreihe span{font-size:13.5px; color:var(--leise); line-height:1.45}
.reihenfolge{margin:-8px 0 20px}

/* Formularseiten */
.formular{padding:48px 0; max-width:44ch}
.formular h1{font-size:32px; margin:0 0 12px}
.formular .vor{font-size:16px; margin-bottom:28px}
.formular label{
  display:block; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blau); margin:22px 0 6px;
}
.freiwillig{text-transform:none; letter-spacing:0; color:var(--leise); font-size:12.5px}
.formular input{
  width:100%; box-sizing:border-box; padding:12px 14px; font-size:16px;
  border-radius:7px; border:1px solid var(--linie); background:var(--nacht-2); color:var(--hell);
}
.formular input:focus{outline:2px solid var(--gold); outline-offset:1px}
.hilfe{margin:7px 0 0; font-size:13px; color:var(--leise)}
.formular button{margin-top:28px; border:0; cursor:pointer; font-size:17px}
.meldung{
  margin:0 0 22px; padding:12px 14px; border-radius:7px; font-size:15px;
  background:#3a1420; color:#ffb0b0; border:1px solid #6a2436;
}
.wechsel{margin-top:26px; font-size:14.5px; color:var(--leise)}

/* --- Kontaktformular ------------------------------------------------------
   Breiter als die Anmeldeformulare: in 44ch tippt sich keine Nachricht.
   Aus- und eingeblendet wird ueber das hidden-Attribut, nicht ueber eine
   Klasse und schon gar nicht ueber style="…" — das verbietet die strenge CSP
   der Seite, und hidden versteht der Browser auch ohne Stilvorlage. */
.kontakt{max-width:62ch}
.kontakt.breit{max-width:none}
/* Der Browser blendet [hidden] selbst aus; das !important ist nur dagegen da,
   dass eine display-Regel weiter unten es versehentlich wieder einblendet. */
[hidden]{display:none !important}

.formular textarea{
  width:100%; box-sizing:border-box; padding:12px 14px; font:16px/1.5 inherit;
  border-radius:7px; border:1px solid var(--linie); background:var(--nacht-2); color:var(--hell);
  resize:vertical; min-height:150px;
}
.formular textarea:focus{outline:2px solid var(--gold); outline-offset:1px}

/* Der Sicherheitscode. Feste Zeichenbreite und weiter Sperrsatz, damit sich
   die Zeichen einzeln abtippen lassen; nicht auswaehlbar, weil Kopieren den
   Zweck aushebelt. */
.codezeile{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.code{
  font:700 22px/1 "Courier New",monospace; letter-spacing:.34em; padding:13px 10px 13px 20px;
  border-radius:7px; border:1px solid var(--linie); background:#241a35; color:var(--gold);
  user-select:none; -webkit-user-select:none; min-width:9ch; text-align:center;
}
/* ".formular .klein-knopf", nicht ".klein-knopf": ".formular button" gibt
   JEDEM Knopf im Formular 28 px Abstand nach oben, und diese Regel ist
   spezifischer (0,1,1 gegen 0,1,0) — sie gewinnt also unabhaengig davon, wer
   weiter unten steht. Der Knopf neben dem Code stand dadurch 18 px tiefer als
   das Feld daneben, obwohl die Zeile auf "align-items:center" steht.
   Erst gemessen, dann geglaubt. */
.formular .klein-knopf{padding:9px 15px; font-size:14px; margin-top:0}

/* Koederfeld: fuer Menschen weg, fuer Ausfuellprogramme im Quelltext da.
   Nicht display:none — manche Programme ueberspringen genau das. */
.koeder{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.haken{display:flex; align-items:flex-start; gap:11px; margin-top:26px}
.haken input{width:auto; margin-top:3px; flex:0 0 auto; accent-color:var(--gold)}
.haken label{
  margin:0; text-transform:none; letter-spacing:0; font-size:14.5px;
  color:var(--leise); line-height:1.55;
}
.haken a{color:var(--gold)}

.gelungen{
  margin:0 0 22px; padding:13px 15px; border-radius:7px; font-size:15px;
  background:#142f1c; color:#a6e6b4; border:1px solid #2f5b3d;
}
.knopf.zweit{background:transparent; color:var(--gold) !important; border:2px solid var(--linie)}
.knopf.zweit:hover{border-color:var(--gold); background:rgba(255,217,138,.08)}
.text .offen{
  background:#3a2a14; border:1px solid #6a5426; border-radius:7px;
  padding:12px 14px; color:#ffd98a; font-size:14.5px;
}
.text .mono{font-family:ui-monospace,Menlo,monospace; font-size:.92em}
a.wer{text-decoration:none}
a.wer:hover strong{color:var(--gold)}
.loeschform{margin-top:18px; max-width:44ch}
.loeschform label{display:block; font-size:14px; margin-bottom:8px; color:var(--leise)}
.loeschform input{width:100%; box-sizing:border-box; padding:11px 13px; font-size:16px;
  border-radius:7px; border:1px solid var(--linie); background:var(--nacht-2); color:var(--hell)}
.knopf.warnung{background:#a8412c; color:#fff !important; margin-top:16px; border:0; cursor:pointer; font-size:16px}
.knopf.warnung:hover{background:#c04d34}
.marke-ja{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gruen);
  border:1px solid currentColor; border-radius:999px; padding:2px 8px; margin-left:6px}
.marke-nein{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#e0a35f;
  border:1px solid currentColor; border-radius:999px; padding:2px 8px; margin-left:6px}
.hinweis-gut{margin:0 0 16px; padding:12px 14px; border-radius:7px; font-size:14.5px;
  background:#16321f; color:#a8e0b8; border:1px solid #2f5b3d}

/* Steuerung */
.steuerung{padding:48px 0; border-bottom:1px solid var(--linie)}
.steuerung h2{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--leise); margin:0 0 22px}
.steuer-gitter{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:18px; align-items:start}
.steuer-karte{background:var(--nacht-2); border:1px solid var(--linie); border-radius:10px; padding:22px}
.steuer-karte.hervor{border-color:var(--gold-tief); background:var(--nacht-3)}
.steuer-titel{margin:0 0 10px; font:700 17px "Arial Black",Arial,sans-serif; color:var(--gold)}
.steuer-karte p{margin:0 0 12px; font-size:14.5px; color:var(--leise); line-height:1.55}
.steuer-karte p strong{color:var(--hell)}
.belegung{list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--linie)}
.belegung li{display:flex; justify-content:space-between; gap:14px; padding:7px 0;
  border-bottom:1px solid var(--linie); font-size:13.5px}
.belegung li:last-child{border-bottom:none}
.belegung span:first-child{color:var(--blau); font-weight:bold; white-space:nowrap}
.belegung span:last-child{color:var(--leise); text-align:right}
@media (max-width:800px){ .steuer-gitter{grid-template-columns:1fr} }

/* Aufs Handy legen */
.mitnehmen{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin:0 0 8px; padding:20px 22px;
  background:var(--nacht-3); border:1px solid var(--gold-tief); border-radius:12px;
}
.mitnehmen[hidden]{ display:none; }
.mitnehmen-text{ flex:1 1 260px }
.mitnehmen-titel{ margin:0 0 6px; font:700 17px "Arial Black",Arial,sans-serif; color:var(--gold) }
.mitnehmen-text p{ margin:0; font-size:14.5px; color:var(--leise); line-height:1.5 }
.mitnehmen-weg{ flex:1 1 100%; margin:4px 0 0; font-size:14.5px; color:var(--hell) }
.mitnehmen-weg strong{ color:var(--gold) }

/* Ein einzelnes, breites Bild in der Galerie (die Gegnertafel auf der
   Anleitungsseite) — sonst zoege das Sechs-Spalten-Raster es auf ein Drittel. */
.schau-gitter.breit{grid-template-columns:1fr}
/* Linksbuendig wie die Textspalte, NICHT mittig: mittig gesetzt begann die
   Tafel bei 239 px, der Text daneben bei 160 — das sah versetzt aus. */
.schau-gitter.breit > figure{grid-column:auto; max-width:820px; margin:0}

/* Gegnertabelle auf der Anleitungsseite */
.gegnerliste{width:100%; border-collapse:collapse; font-size:15px; line-height:1.5}
.gegnerliste th, .gegnerliste td{padding:10px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--linie)}
.gegnerliste th{color:var(--hell); font-size:13px; text-transform:uppercase;
  letter-spacing:.06em; white-space:nowrap}
.gegnerliste td:first-child{color:var(--hell); font-weight:700; white-space:nowrap}
.gegnerliste td:nth-child(2){color:var(--leise); white-space:nowrap}
.gegnerliste tr:last-child td{border-bottom:0}
@media (max-width:620px){
  .gegnerliste, .gegnerliste tbody, .gegnerliste tr, .gegnerliste td{display:block; width:100%}
  .gegnerliste thead{display:none}
  .gegnerliste tr{border-bottom:1px solid var(--linie); padding:10px 0}
  .gegnerliste td{border:0; padding:2px 0}
  .gegnerliste td:nth-child(2){font-size:13px}
}

/* „Oma befreit" in der Bestenliste — der eine Eintrag, der zählt. */
.befreit{color:#8ae86a; font-weight:700; white-space:nowrap}
.befreit::before{content:"★ "; color:#ffd24a}

/* --- Nach oben ------------------------------------------------------------
   Liegt fest unten rechts. Sichtbar erst ab 500 px Scrollhöhe (js/hoch.js);
   ohne JavaScript bleibt er über "hidden" ganz weg. */
.hoch{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--nacht-2); border:1px solid var(--linie);
  color:var(--gold) !important; font-size:18px; line-height:1; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, border-color .16s ease, background .16s ease;
}
.hoch.da{opacity:1; transform:none; pointer-events:auto}
.hoch:hover{border-color:var(--gold); background:var(--nacht-3)}
.hoch:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
/* Der Seitenanfang bekommt den Fokus nach dem Sprung — aber ohne Rahmen
   drumherum, den hat sich niemand mit der Maus verdient. */
#seitenanfang:focus{outline:none}
#seitenanfang:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
@media (prefers-reduced-motion: reduce){
  .hoch{transition:opacity .01s; transform:none}
}
@media (max-width:640px){
  .hoch{right:14px; bottom:14px; width:44px; height:44px}
  .fuss{padding-right:20px}   /* schmal steht der Fuß ohnehin untereinander */
}

/* BrezelBubs Zustaende */
.zustaende{padding:48px 0; border-bottom:1px solid var(--linie)}
.zustaende h2,.gegner-block h2,.sammeln h2{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--leise); margin:0 0 22px}
.zustand-gitter{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.zustand{background:var(--nacht-2); border:1px solid var(--linie); border-radius:12px; padding:16px; text-align:center; position:relative; overflow:hidden}
.zustand img{width:82px; height:auto; image-rendering:pixelated; margin:0 auto; display:block}
.zustand strong{display:block; color:var(--hell); font-size:16px; margin-bottom:6px}
.zustand p{margin:0; color:var(--leise); font-size:14px; line-height:1.45}
.zustand .marke-ja{position:absolute; top:12px; right:12px; margin:0}
.gegner-block{padding:48px 0; border-bottom:1px solid var(--linie)}
.gegnerkarten{display:grid; grid-template-columns:1fr; gap:12px}
.gegnerkarte{display:grid; grid-template-columns:86px minmax(150px,220px) minmax(0,1fr); gap:16px; align-items:center; background:var(--nacht-2); border:1px solid var(--linie); border-radius:12px; padding:14px 16px}
.gegnerbild{width:72px; height:72px; border-radius:10px; background:var(--nacht-3); border:1px solid var(--linie); display:flex; align-items:center; justify-content:center; color:var(--gold); font:700 30px "Arial Black",Arial,sans-serif; image-rendering:pixelated}
.gegnerkopf h3{margin:0 0 4px; color:var(--hell); font-size:16px}
.gegnerkopf .ort{margin:0; color:var(--blau); font-size:12px; letter-spacing:.07em; text-transform:uppercase}
.gegnerkarte > p{margin:0; color:var(--leise); font-size:14.5px; line-height:1.5; max-width:none}
.sammeln{padding:48px 0; border-bottom:1px solid var(--linie)}
.sammel-gitter{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.sammel{display:grid; grid-template-columns:58px 1fr; gap:14px; align-items:center; background:var(--nacht-2); border:1px solid var(--linie); border-radius:12px; padding:14px}
.sammel img{width:52px; height:52px; image-rendering:pixelated; object-fit:contain}
.sammel strong{display:block; color:var(--hell); margin-bottom:3px}
.sammel span{display:block; color:var(--leise); font-size:13.5px; line-height:1.4}
@media (max-width:900px){.zustand-gitter,.sammel-gitter{grid-template-columns:repeat(2,1fr)}.gegnerkarte{grid-template-columns:80px 1fr}.gegnerkarte > p{grid-column:2; max-width:none}}
@media (max-width:560px){.zustand-gitter,.sammel-gitter{grid-template-columns:1fr}.gegnerkarte{grid-template-columns:64px 1fr; gap:12px; padding:12px}.gegnerkarte > p{grid-column:1 / -1}.gegnerbild{width:56px;height:56px;font-size:23px}}

.gegnerbild img{max-width:100%; max-height:100%; object-fit:contain; image-rendering:pixelated; display:block}

/* Zustandskarten exakt ausrichten: feste Bildzone, dann Titel, dann Text. */
.figurenreihe li,.zustand{
  display:grid;
  grid-template-rows:220px auto 1fr;
  justify-items:center;
  align-items:start;
}
.figurenreihe li > img,.zustand > img{
  align-self:end;
  margin:0 auto 18px;
}
.figurenreihe .zustand-klein img,.zustand.zustand-klein img{width:58px; margin-top:0}
.figurenreihe .zustand-gross img,.zustand.zustand-gross img{width:78px; margin-top:0}
.figurenreihe .zustand-rot img,.zustand.zustand-rot img{width:82px; margin-top:0}
.figurenreihe .zustand-brille img,.zustand.zustand-brille img{width:78px; margin-top:0}
.figurenreihe li strong,.zustand strong{margin-top:0}
@media (max-width:760px){
  .figurenreihe li,.zustand{grid-template-rows:190px auto 1fr}
}

/* Breite Inhaltsseiten: vorhandenen Inhaltsrahmen nutzen, ohne künstliche Spalten. */
.text.breit,.formular.breit{max-width:none}
.text.breit > p,.text.breit > ul{max-width:none}
.rechtstext{display:block}
.kontakt-breit .vor{max-width:none}
.kontakt-breit form{display:block; max-width:none}
.kontakt-breit textarea{min-height:210px}
.konto-breit .tabelle-rahmen{max-width:none}

/* Sprachwahl: echte Links, aktuelle Sprache auch ohne Farbe erkennbar. */
.kopf .sprachwahl{gap:10px; margin-left:auto; font-size:14px}
.kopf .sprachwahl a{padding:6px 3px}
.kopf .sprachwahl [aria-current="true"]{color:var(--gold); font-weight:bold; text-decoration:underline; text-underline-offset:5px}
.kopf .sprachwahl span{color:var(--linie)}
@media (max-width:640px){.kopf nav{gap:12px}.kopf .sprachwahl{margin-left:0}}