/* ---- Generationen-Banner im Pokédex ----------------------------------
   Zugeklappt steht nur das Regionsschild da - kein Rahmen, kein Schatten,
   keine Textzeile darunter. Erst beim Aufklappen erscheint die gewohnte
   Kopfzeile mit Nummer, Name, Zaehler und Pfeil, und der Knopf bekommt
   wieder den Rahmen, der ihn mit der Liste darunter zu einer Karte macht.
   Dieses Stylesheet wird als letztes geladen und hat damit das letzte
   Wort gegenueber pokedex.css und ds-views.css. */
.genhead{
  flex-direction:column;align-items:stretch;gap:0;
  padding:0;overflow:hidden;
  background:transparent;border:0;box-shadow:none;
  border-radius:var(--r-lg,12px);
}
.genhead.open{
  background:var(--panel);
  border:1px solid var(--line);border-bottom-color:transparent;
  box-shadow:var(--sh-1,var(--shadow));
  border-radius:var(--r-lg,12px) var(--r-lg,12px) 0 0;
}
.genbar{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;text-align:left;
}

/* Das Banner ist kein <img>, sondern eine Flaeche mit Hintergrundbild.
   Nur so laedt der Browser von den beiden Fassungen genau die, die zum
   eingestellten Design gehoert - ohne eine Zeile JavaScript und ohne
   Ruckeln beim Umschalten.
   Grundfall = helles Design: ds-tokens.css setzt die hellen Werte
   ebenfalls ohne Bedingung, und bis app.js das gespeicherte Design
   setzt, traegt <html> noch gar kein data-theme. */
/* An jeder Bildadresse haengt ?v=<APP_VERSION>. Ohne den Stempel bliebe
   eine ausgetauschte Datei unter gleichem Namen bis zu einen Tag lang im
   Browser- und im Service-Worker-Speicher liegen - man laedt die neue
   Fassung der App und sieht trotzdem die alten Bilder. Die Liste MEDIA in
   sw.js haengt denselben Stempel an, damit Vorrat und Anfrage zusammenpassen.
   Die Schilder sind bereits innerhalb ihrer aufgemalten Umrandung
   zugeschnitten und haben ausgestanzte Ecken. Deshalb hier weder Rahmen
   noch border-radius - das Bild bringt seine Form selbst mit. */
.genbanner{
  display:block;width:100%;aspect-ratio:1100/196;
  background:transparent center/contain no-repeat;
}
/* Aufgeklappt sitzt das Schild in der Karte und bekommt etwas Luft, damit
   seine runden Ecken nicht gegen die der Karte stossen. */
.genhead.open .genbanner{width:auto;margin:8px 8px 2px}

.gb-kanto  {background-image:url("../img/regions/kanto-hell.webp?v=v0.31.35")}
.gb-johto  {background-image:url("../img/regions/johto-hell.webp?v=v0.31.35")}
.gb-hoenn  {background-image:url("../img/regions/hoenn-hell.webp?v=v0.31.35")}
.gb-sinnoh {background-image:url("../img/regions/sinnoh-hell.webp?v=v0.31.35")}
.gb-einall {background-image:url("../img/regions/einall-hell.webp?v=v0.31.35")}
.gb-kalos  {background-image:url("../img/regions/kalos-hell.webp?v=v0.31.35")}
.gb-alola  {background-image:url("../img/regions/alola-hell.webp?v=v0.31.35")}
.gb-galar  {background-image:url("../img/regions/galar-hell.webp?v=v0.31.35")}
.gb-paldea {background-image:url("../img/regions/paldea-hell.webp?v=v0.31.35")}

html[data-theme="dark"] .gb-kanto  {background-image:url("../img/regions/kanto.webp?v=v0.31.35")}
html[data-theme="dark"] .gb-johto  {background-image:url("../img/regions/johto.webp?v=v0.31.35")}
html[data-theme="dark"] .gb-hoenn  {background-image:url("../img/regions/hoenn.webp?v=v0.31.35")}
html[data-theme="dark"] .gb-sinnoh {background-image:url("../img/regions/sinnoh.webp?v=v0.31.35")}
html[data-theme="dark"] .gb-einall {background-image:url("../img/regions/einall.webp?v=v0.31.35")}
html[data-theme="dark"] .gb-kalos  {background-image:url("../img/regions/kalos.webp?v=v0.31.35")}
html[data-theme="dark"] .gb-alola  {background-image:url("../img/regions/alola.webp?v=v0.31.35")}
html[data-theme="dark"] .gb-galar  {background-image:url("../img/regions/galar.webp?v=v0.31.35")}
html[data-theme="dark"] .gb-paldea {background-image:url("../img/regions/paldea.webp?v=v0.31.35")}