/*
 * Gemeinsame Regeln beider Looks (2005 und BoA Forever). Was hier steht,
 * gilt unabhaengig vom Rahmen; alles Gestalterische steht in boa.css bzw.
 * forever.css.
 */

/*
 * Farben aus den Artikeln von 2005, die auf dem Rahmen (#241009) unter
 * 4,5:1 liegen, werden nur in der Anzeige angehoben; der gespeicherte
 * Inhalt bleibt unveraendert (Entscheidung vom 24.09.2026). !important,
 * weil die Farben als Inline-Stil vorliegen.
 *   #CC0000 3,1:1 -> #FF4D4D 5,6:1 (auf dem hellsten Punkt der Textur 4,9:1)
 *   #CC0033 3,2:1 -> #FF4D6D 5,7:1
 *   #000000 1,15:1 und #152B4D 1,3:1 -> Textfarbe
 */
.beitrag__inhalt [style*="color:#cc0000" i] { color: #ff4d4d !important; }
.beitrag__inhalt [style*="color:#cc0033" i] { color: #ff4d6d !important; }
.beitrag__inhalt [style*="color:#000000" i],
.beitrag__inhalt [style*="color:#152b4d" i] { color: inherit !important; }

/* Nur fuer Screenreader, etwa Tabellenbeschriftungen ohne sichtbare Entsprechung. */
.unsichtbar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Umfliessende Bilder und Galerien in Beitraegen: die Anordnung stammt aus
 * den Inhalten selbst (Bildbloecke, LegacyContentConverter::alignImages)
 * und gilt in beiden Looks. Luft nach unten wie vspace=5 von 2005.
 */
.block--bild--links,
.beitrag__inhalt .archivbild--links { float: left; margin-right: 10px; max-width: 45%; }
.block--bild--rechts,
.beitrag__inhalt .archivbild--rechts { float: right; margin-left: 10px; max-width: 45%; }
.beitrag__inhalt .archivbild--links,
.beitrag__inhalt .archivbild--rechts { margin-bottom: 5px; }
.block--bild--mitte { float: none; text-align: center; }

/*
 * Text mit Bild: das Bild steht links, rechts oder ueber dem Text, der Text
 * fliesst darum. flow-root haelt das Umfliessen im Baustein, der naechste
 * beginnt immer unter dem Bild.
 */
.block--textbild { display: flow-root; }
.block--textbild__bild { margin: 0 0 8px; }
.block--textbild__bild img { display: block; width: 100%; height: auto; }
.block--textbild--links .block--textbild__bild { float: left; margin-right: 14px; }
.block--textbild--rechts .block--textbild__bild { float: right; margin-left: 14px; }
.block--textbild--schmal .block--textbild__bild { width: calc(100% / 3); }
.block--textbild--halb .block--textbild__bild { width: 50%; }
.block--textbild__text > :first-child { margin-top: 0; }

.block--galerie {
  display: grid;
  grid-template-columns: repeat(var(--galerie-spalten, 3), 1fr);
  gap: 8px;
  clear: both;
}
.block--zitat,
.block--trenner { clear: both; }

@media (max-width: 30rem) {
  .block--bild--links,
  .block--bild--rechts,
  .beitrag__inhalt .archivbild--links,
  .beitrag__inhalt .archivbild--rechts { float: none; max-width: 100%; margin-inline: 0; }
  .beitrag__inhalt .archivbild--links,
  .beitrag__inhalt .archivbild--rechts { display: block; }
  .block--galerie { grid-template-columns: repeat(2, 1fr); }
  .block--textbild--links .block--textbild__bild,
  .block--textbild--rechts .block--textbild__bild { float: none; width: 100%; margin-inline: 0; }
}

/*
 * Die Karte: Punkte sitzen prozentual ueber der Grafik und skalieren mit.
 * Auf der Eingabekarte lassen sie Klicks durch; die Sprechblase erscheint
 * bei Hover und Tastaturfokus ohne JavaScript. Farben stehen im jeweiligen Look.
 */
.karte__flaeche {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 732;
  margin: 0 auto;
}
.karte__bild { display: block; width: 100%; height: 100%; }
.karte__flaeche--eingabe .karte__punkt { pointer-events: none; }
.karte__punkt {
  position: absolute;
  transform: translate(-50%, -50%);
}
.karte__tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
}
.karte__marker:hover + .karte__tooltip,
.karte__marker:focus-visible + .karte__tooltip { display: block; }
.karte__modus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid currentColor;
  border-radius: 8px;
}
.karte__modus p { margin: 0; }
.karte__modus-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: 6px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}
.karte__modus-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .karte__modus { flex-direction: column; align-items: stretch; }
}

/* Umschalter der Originale (x-look-chooser), neu seit 2026: Knopf mit dem
   aktuellen Look, darunter schwebend die Auswahl, in den Farben des
   jeweiligen Originals. Kontraste 2005/2006: Knopf 10,2/6,8:1, Rand zur
   Spalte 3,1/3,7:1, Eintraege 8,5/9,5:1, Gruppen 6,3/6,5:1, aktiver Look
   5,7/6,6:1, beim Zeigen 7,8/8,1:1. */
.darstellung__knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--farbe-linie);
  background: var(--farbe-inhalt);
  color: var(--farbe-akzent);
  font: bold var(--text-klein) var(--schrift);
  text-align: left;
  cursor: pointer;
}
.darstellung__knopf::after { content: "\25BE" / ""; }
.darstellung__knopf:hover,
.darstellung__knopf:focus-visible,
.darstellung:has(.darstellung__auswahl:popover-open) .darstellung__knopf {
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent-hover);
}

.darstellung__auswahl {
  min-width: 170px;
  padding: 6px 0;
  border: 1px solid var(--farbe-akzent);
  background: var(--farbe-menue);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: var(--text-klein);
  text-align: left;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.6);
}
/* Unter dem Knopf, wo der Platz reicht; ohne Anchor Positioning bleibt es
   bei der mittigen Lage, die Browser fuer Popover vorsehen. */
@supports (position-area: bottom) {
  .darstellung__auswahl {
    margin: 4px 0 0;
    position-area: bottom span-left;
    position-try-fallbacks: flip-inline, flip-block;
  }
}
.darstellung__gruppe {
  margin: 2px 10px 2px;
  color: var(--farbe-ueberschrift);
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.darstellung__liste { margin: 0; padding: 0; list-style: none; }
.darstellung__liste + .darstellung__gruppe {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--farbe-linie);
}
.darstellung__wahl { margin: 0; }
.darstellung__wahl button,
.darstellung__wahl--aktiv {
  display: block;
  width: 100%;
  padding: 4px 10px 4px 24px;
  border: 0;
  background: none;
  font: bold var(--text-klein) var(--schrift);
  text-align: left;
}
.darstellung__wahl button { color: var(--farbe-akzent); cursor: pointer; }
.darstellung__wahl button:hover,
.darstellung__wahl button:focus-visible {
  background: var(--farbe-inhalt);
  color: var(--farbe-akzent-hover);
  text-decoration: underline;
}
.darstellung__wahl--aktiv { position: relative; color: var(--farbe-text); }
.darstellung__wahl--aktiv::before {
  content: "\2713" / "";
  position: absolute;
  left: 10px;
  color: var(--farbe-akzent);
}
@media (max-width: 1010px) {
  .darstellung__knopf,
  .darstellung__wahl button,
  .darstellung__wahl--aktiv { min-height: 44px; }
  .darstellung__wahl--aktiv { display: flex; align-items: center; }
  .darstellung__wahl--aktiv::before { position: static; margin: 0 6px 0 -14px; }
}

/* Spielerliste aus dem Bestand (mitglieder/roster): die Anzahl ueber der
   Tabelle, je Rang eine Kopfzeile, Texte linksbuendig. Doppelte Klasse, weil
   die Regeln der Wanderer-Tabelle in boa.css spaeter geladen werden. */
.spielerliste__tabelle .spielerliste__anzahl { caption-side: top; padding: 4px 0 6px; font-weight: bold; text-align: left; }
.spielerliste__tabelle.wanderer-tabelle th,
.spielerliste__tabelle.wanderer-tabelle td { text-align: left; }
.spielerliste__tabelle .spielerliste__rang th { padding-top: 10px; }
@media (max-width: 600px) {
  .spielerliste__tabelle .spielerliste__rang th { flex: 1 1 100%; }
}