/*
 * Gestaltung der Brotherhood of Azeroth.
 *
 * Maße, Farben und Schriftbild sind am Original von 2005 ausgemessen und
 * werden auf dem Desktop unveraendert uebernommen. Neu ist allein die
 * Technik darunter: CSS Grid statt verschachtelter Tabellen.
 *
 * Ausgemessen am Original:
 *   Gesamtbreite 990px = 10 Rand + 970 Inhalt + 10 Rand
 *   Dreispalter  140 | 690 | 140
 *   Kopfgrafik   970x129, Menuegrafiken 140x26
 *   Schrift      11px Verdana, Menue 10px, Ueberschrift 18px Georgia fett
 *
 * Regeln, die auch der Look BoA Forever braucht, stehen in basis.css.
 */

:root {
  --farbe-aussen: #bd904f;
  --farbe-grund: #141311;
  --farbe-menue: #3d0c06;
  --farbe-inhalt: #140101;
  --farbe-text: #b78f59;
  --farbe-akzent: #f1ab25;
  --farbe-ueberschrift: #e18b18;
  --farbe-akzent-hover: #e78a1c;
  --farbe-rahmen: #30160c;
  --farbe-linie: #8c620d;

  --schrift: Verdana, Geneva, "DejaVu Sans", sans-serif;
  --schrift-ueberschrift: Georgia, "Times New Roman", serif;

  --text-basis: 11px;
  --text-klein: 10px;
  --text-ueberschrift: 18px;

  --breite-gesamt: 990px;
  --breite-inhaltsflaeche: 970px;
  --breite-menue: 140px;
  --breite-mitte: 690px;
  --breite-rand: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background-color: var(--farbe-aussen);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: var(--text-basis);
  line-height: 1.5;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.5rem 1rem;
  background: var(--farbe-menue);
  color: var(--farbe-akzent);
  font-size: var(--text-basis);
  z-index: 10;
}
.sprungmarke:focus { left: 0; }

a { color: var(--farbe-akzent); text-decoration: none; font-weight: bold; }
a:hover { color: var(--farbe-akzent-hover); text-decoration: underline; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 1px;
}

/* Aeusserer Seitenkoerper mit den beiden Randgrafiken links und rechts. */
.rahmenaussen {
  width: var(--breite-gesamt);
  margin: 0 auto;
  background-color: var(--farbe-grund);
  background-image: url("/img/rand_left.gif"), url("/img/rand_right.gif");
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  padding: 0 var(--breite-rand);
}

.kopf { line-height: 0; }
.kopf picture { display: block; }
.kopf img { display: block; width: var(--breite-inhaltsflaeche); height: auto; }

.dreispalter {
  display: grid;
  grid-template-columns: var(--breite-menue) var(--breite-mitte) var(--breite-menue);
  width: var(--breite-inhaltsflaeche);
  align-items: stretch;
}

.spalte--menue,
.spalte--status {
  background-color: var(--farbe-menue);
  background-image: url("/img/menue_bg.gif");
  text-align: center;
}

.spalte--inhalt {
  background-color: var(--farbe-inhalt);
  background-image: url("/img/background.jpg");
  padding-bottom: 1.5em;
  min-width: 0;
}

/* Menuebloecke */
.menue__block { margin-bottom: 0.5em; }
.menue__titel { margin: 0; line-height: 0; }
.menue__titel img { display: block; width: var(--breite-menue); height: auto; }

.menue__liste {
  list-style: none;
  margin: 0;
  padding: 0.4em 0;
  text-align: left;
}
.menue__liste li { padding: 0; }

.menue__link {
  display: block;
  padding: 3px 0 3px 10px;
  font-size: var(--text-klein);
}
.menue__link--unter { padding-left: 22px; }
.menue__link--unter::before { content: "» "; }

/* Unsere Banner: Abstaende wie die Tabellen mit cellspacing="3" im
   Original, 3px unter dem Titel und 6px zwischen den Bannern. */
.menue__banner { padding: 1em 0 0.5em; text-align: center; }
.menue__banner-titel { margin: 0 0 3px; font-size: var(--text-klein); }
.menue__banner img { display: block; margin: 0 auto; }
.menue__banner img + img { margin-top: 6px; }

.anmeldung { padding: 0.5em 8px; text-align: left; }
.anmeldung__hinweis { margin: 0; font-size: var(--text-klein); }

/* Statusspalte */
.status__liste { margin: 0; padding: 0.4em 8px; font-size: var(--text-klein); text-align: left; }
.status__zeile { display: flex; justify-content: space-between; gap: 0.5em; }
.status__liste dt { margin: 0; }
.status__liste dd { margin: 0; }

/*
 * Steinrahmen.
 *
 * Im Original aus acht Einzelgrafiken in einer Tabelle zusammengesetzt:
 * vier Ecken zu 6x6 Pixeln und vier kachelnde Kanten. Hier dieselben
 * Grafiken als mehrfacher Hintergrund auf einem Element. Die 6 Pixel
 * breite, durchsichtige Umrandung gibt den Kanten ihren Platz.
 */
.steinrahmen {
  border: 6px solid transparent;
  background-color: #241009;
  background-image:
    url("/img/links_oben.gif"),
    url("/img/rechts_oben.gif"),
    url("/img/links_unten.gif"),
    url("/img/rechts_unten.gif"),
    url("/img/rahmen_oben.gif"),
    url("/img/rahmen_unten.gif"),
    url("/img/rahmen_links.gif"),
    url("/img/rahmen_rechts.gif"),
    url("/img/background2.jpg");
  background-position:
    left top, right top, left bottom, right bottom,
    left top, left bottom, left top, right top,
    left top;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-x, repeat-x, repeat-y, repeat-y,
    repeat;
  background-origin:
    border-box, border-box, border-box, border-box,
    border-box, border-box, border-box, border-box,
    padding-box;
  background-clip:
    border-box, border-box, border-box, border-box,
    border-box, border-box, border-box, border-box,
    padding-box;
}

/* Inhaltsrahmen um einen Beitrag */
.rahmen {
  padding: 10px;
  margin: 12px auto;
  width: 85%;
}

/* Ein Beitrag */
.beitrag__kopf { display: flex; align-items: flex-start; gap: 8px; }
.beitrag__symbol { flex: 0 0 auto; width: 62px; height: 38px; }
.beitrag__titelgruppe { flex: 1 1 auto; min-width: 0; }

.beitrag__titel {
  margin: 0;
  font-family: var(--schrift-ueberschrift);
  font-size: var(--text-ueberschrift);
  font-weight: bold;
  color: var(--farbe-ueberschrift);
  line-height: 1.2;
  overflow-wrap: break-word;
}
.beitrag__titel a { font-family: inherit; font-weight: bold; }

.beitrag__meta { margin: 2px 0 0; font-size: var(--text-klein); }

.beitrag__linie {
  height: 7px;
  margin: 8px 0;
  border: 0;
  background: url("/img/newslinie.gif") repeat-x center;
}

.beitrag__inhalt { overflow-wrap: break-word; display: flow-root; }
.beitrag__inhalt img { max-width: 100%; height: auto; }
.beitrag__inhalt p:first-child { margin-top: 0; }
.beitrag__inhalt p:last-child { margin-bottom: 0; }

.beitrag__fuss { margin-top: 8px; font-size: var(--text-klein); text-align: right; }

.archivmarke,
.fixiertmarke {
  display: inline-block;
  font-family: var(--schrift);
  font-size: var(--text-klein);
  font-weight: bold;
  color: var(--farbe-akzent);
  border: 1px solid var(--farbe-linie);
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.fixiertmarke { color: var(--farbe-ueberschrift); border-color: var(--farbe-akzent); }

.bereichstitel {
  font-family: var(--schrift-ueberschrift);
  color: var(--farbe-ueberschrift);
  font-size: var(--text-ueberschrift);
  margin: 12px 0 4px;
}
.bereichshinweis { font-size: var(--text-klein); margin: 0 0 12px; }

/* Titel und Hinweise ausserhalb eines Rahmens stehen in einer Flucht mit
   den Rahmen darunter (85 % breit, mittig). Beides gab es 2005 nicht. */
.spalte--inhalt > .bereichstitel,
.spalte--inhalt > .bereichshinweis,
.spalte--inhalt > .formular__hinweis { width: 85%; margin-inline: auto; }

/* Gaestebuch: Antwort der Gilde unter einem Eintrag */
.gb-eintrag__kopf { margin-bottom: 4px; }
.gb-antwort {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(241, 171, 37, 0.08);
  border: 1px solid var(--farbe-rahmen);
}
.gb-antwort__label {
  margin: 0 0 4px;
  font-size: var(--text-klein);
  font-weight: bold;
  color: var(--farbe-akzent);
}

/* Umfragen: Frage, Optionen mit Balken, Gesamtsumme */
.umfrage__kopf { margin-bottom: 4px; }
.umfrage__optionen { list-style: none; margin: 8px 0 0; padding: 0; }
.umfrage__option { margin: 0 0 8px; }
.umfrage__optionkopf {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--text-klein);
  margin-bottom: 2px;
}
.umfrage__balken {
  height: 10px;
  background: var(--farbe-rahmen);
  border: 1px solid var(--farbe-linie);
}
.umfrage__balkenfuellung { height: 100%; background: var(--farbe-akzent); }
.umfrage__gesamt { margin: 6px 0 0; font-size: var(--text-klein); text-align: right; }
.umfrage__eigenmarke {
  display: inline-block;
  font-size: var(--text-klein);
  color: var(--farbe-akzent);
  margin-left: 4px;
}

/* Umfragen: Abstimmformular */
.umfrage__formular { margin-top: 10px; }
.umfrage__wahl { border: 1px solid var(--farbe-linie); margin: 8px 0; padding: 6px 8px; }
.umfrage__wahl legend { color: var(--farbe-akzent); font-weight: bold; font-size: var(--text-klein); padding: 0 4px; }
.umfrage__wahloption { display: block; margin: 4px 0; }
.umfrage__wahloption input { margin-right: 6px; vertical-align: middle; }

/*
 * Unsere Brueder wie 2005: je Volk ein Rahmen, Portraet links, rechts die
 * Tabelle. Spaltenkoepfe wie td.topicc (Georgia, kursiv, fett, #E18B18),
 * Zellen wie td.stextc. Kontrast auf #241009: #E18B18 6,9:1, #B78F59 6,1:1,
 * #F1AB25 (Namen) 9,2:1.
 */
.mitglieder-kopf { margin: 12px 0 0; text-align: center; line-height: 0; }
.mitglieder-kopf img { max-width: 100%; height: auto; }
.mitglieder-titel { text-align: center; }
.mitglieder-volk { display: flex; align-items: flex-start; gap: 12px; }
.mitglieder-volk__bild { flex: 0 0 auto; width: 192px; height: auto; }
/* Platzhalter fuer Voelker ohne Portraet, in der Schrift der Spaltenkoepfe. */
.mitglieder-volk__ohne-bild {
  flex: 0 0 192px;
  align-self: center;
  margin: 0;
  text-align: center;
  font-family: var(--schrift-ueberschrift);
  font-size: var(--text-ueberschrift);
  font-style: italic;
  font-weight: bold;
  color: var(--farbe-ueberschrift);
}
/* Der Rahmen nimmt den Platz neben dem Portraet und scrollt bei Bedarf in
   sich; die Tabelle darin fuellt ihn wie 2005 (width="100%"). */
.mitglieder-volk__rahmen { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.mitglieder-volk__tabelle { width: 100%; border-collapse: separate; border-spacing: 5px; font-size: var(--text-klein); }
.mitglieder-volk__tabelle th {
  text-align: left;
  font-family: var(--schrift-ueberschrift);
  font-size: var(--text-ueberschrift);
  font-style: italic;
  font-weight: bold;
  color: var(--farbe-ueberschrift);
}
.mitglieder-volk__tabelle td { vertical-align: top; }
.mitglieder-volk__name { color: var(--farbe-akzent); font-weight: bold; }
.mitglieder-volk__name a { color: inherit; font-weight: inherit; }

/* Wanderer wie 2005: dieselbe Tabelle ueber die ganze Rahmenbreite; die
   Spaltenkoepfe standen mit <font size="2"> in td.topicc, also 13px und
   zentriert, Rasse, Klasse und Details zentriert (td.stextc); 2px
   Innenabstand haelt die Links 24px auseinander (WCAG 2.5.8). */
.wanderer-tabelle { width: 100%; }
.wanderer-tabelle th { font-size: 13px; text-align: center; }
.wanderer-tabelle td { text-align: center; padding-block: 2px; }
.wanderer-tabelle td:first-child { text-align: left; }
.wanderer-tabelle a { white-space: nowrap; }

/*
 * Profilseite eines Bruders (Mitglieder.inc.php::showMemberDetails von
 * 2005). Bewusst ohne farbige Akzentkante am Rahmen -- der steht schon im
 * Steinrahmen, eine zusaetzliche Linie waere reine Dekoration.
 */
.profil__zwischentitel { font-size: 15px; margin-top: 18px; }
.profil__kopf { display: flex; align-items: flex-start; gap: 14px; margin: 8px 0; }
.profil__bild {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid var(--farbe-linie);
  background: var(--farbe-rahmen);
}
.profil__tabelle {
  flex: 1 1 auto;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: var(--text-basis);
  width: 100%;
}
.profil__tabelle th {
  text-align: left;
  vertical-align: top;
  width: 40%;
  padding-right: 10px;
  color: var(--farbe-ueberschrift);
  font-weight: bold;
}
.profil__tabelle td { vertical-align: top; overflow-wrap: break-word; }
.profil__status-aktiv { color: #4caf50; }

.boa-bildquellen { margin-top: 14px; color: var(--farbe-text); opacity: 0.85; }
.boa-bildquellen a { color: inherit; }

/* Bibliothek: Uebersicht der Rubriken, aehnlich der Mitglieder-Kaesten */
.bibliothek__rubriken {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.bibliothek__rubrik {
  flex: 1 1 220px;
  padding: 8px 10px;
  border: 1px solid var(--farbe-rahmen);
  background: rgba(241, 171, 37, 0.05);
}
.bibliothek__rubrik--leer { opacity: 0.65; }
.bibliothek__rubrikname {
  margin: 0 0 4px;
  font-family: var(--schrift-ueberschrift);
  font-size: 15px;
  color: var(--farbe-ueberschrift);
}
.bibliothek__rubrikbeschreibung { margin: 0 0 4px; font-size: var(--text-klein); }
.bibliothek__rubrikanzahl { margin: 0; font-size: var(--text-klein); }

/* Bibliothek: einzelner Eintrag, mit optionaler Bildvorschau */
.bibliothek__eintragkopf { display: flex; align-items: flex-start; gap: 10px; }
.bibliothek__vorschau {
  flex: 0 0 auto;
  width: 90px;
  height: auto;
  border: 1px solid var(--farbe-rahmen);
}
.bibliothek__eintraginhalt { flex: 1 1 auto; min-width: 0; }
.bibliothek__fehlt { font-style: italic; opacity: 0.75; }
.bibliothek__aktion { margin-top: 8px; }

/* Blaetternavigation */
.blaettern { margin: 12px 0; text-align: center; }
.blaettern ul {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px; padding: 0; margin: 0;
}
.blaettern a, .blaettern span {
  display: inline-block; min-width: 20px; padding: 2px 5px;
  font-size: var(--text-klein); border: 1px solid var(--farbe-rahmen);
}
.blaettern [aria-current="page"] {
  color: var(--farbe-inhalt); background: var(--farbe-akzent); font-weight: bold;
}

/* Abschlussgrafik unter den Menuespalten */
.menue__abschluss { display: block; width: var(--breite-menue); height: auto; }

/*
 * Wie 2005 schliesst die Grafik die Spalte unten ab, nicht den letzten
 * Block: die Spalten sind so hoch wie der Inhalt, margin-top: auto schiebt
 * sie ans Ende. Mobil ist sie ausgeblendet (siehe unten).
 */
@media (min-width: 1011px) {
  .spalte--menue,
  .spalte--status,
  .menue__innen { display: flex; flex-direction: column; }
  .menue__innen { flex: 1 0 auto; }
  .menue__abschluss { margin-top: auto; }
}

/*
 * Checkbox-Hack fuer das Akkordeon der Menuebloecke (siehe Media Query
 * weiter unten). Die Checkbox ist die einzige neue Regel ausserhalb einer
 * Media Query: am Desktop bleibt sie komplett unsichtbar und nicht
 * fokussierbar, die Bloecke sind dort immer offen wie bisher.
 */
.menue__umschalter,
.burger__umschalter,
.burger { display: none; }

/* Fusszeile: im Original ein eigenes Rahmenpanel mit dem Rechtetext,
   ohne Navigation. Derselbe Steinrahmen wie um die Beitraege. */
.fuss {
  width: var(--breite-inhaltsflaeche);
  background-color: #1a0c06;
  padding: 0 4px 4px;
}
.fuss__panel {
  padding: 6px 10px;
}
.fuss__text {
  margin: 0;
  /* Entspricht <font size="1"> im Original. */
  font-size: var(--text-klein);
  text-align: center;
  line-height: 1.5;
}

/*
 * Forum. Farben aus world.css von 2005: topiccbg (Spaltenkoepfe),
 * stextbg/stextcbg2 (Zellen), bg1/bg2 (Beitragszeilen).
 */
:root {
  --forum-kopf-grund: #220e06;
  --forum-zelle-grund: #421d0f;
  --forum-zelle-grund-2: #472214;
  --forum-zeile-1: #271007;
  --forum-zeile-2: #220e06;
  --forum-abstand: 3px;
}

.forum-kopf { margin: 12px 0 0; text-align: center; line-height: 0; }
.forum-kopf img { max-width: 100%; height: auto; }
.forum-titel {
  font-family: var(--schrift-ueberschrift);
  font-size: var(--text-ueberschrift);
  font-style: italic;
  color: var(--farbe-ueberschrift);
  text-align: center;
  margin: 8px 0;
  overflow-wrap: break-word;
}
.forum-pfad, .forum-knoepfe { text-align: center; margin: 6px 0; }
.forum-knoepfe img { vertical-align: middle; }
.forum-hinweis { text-align: center; color: var(--farbe-akzent); font-weight: bold; }

/* Tabellen duerfen seitlich scrollen: sie sind zweidimensional (WCAG 1.4.10). */
.forum-tabellenrahmen { overflow-x: auto; margin: 0 0 12px; }
.forum-tabelle { width: 100%; border-collapse: separate; border-spacing: 1px; font-size: var(--text-klein); }
.forum-tabelle th {
  background: var(--forum-kopf-grund);
  color: var(--farbe-akzent);
  font-size: var(--text-basis);
  padding: var(--forum-abstand);
}
.forum-tabelle td { background: var(--forum-zelle-grund); padding: var(--forum-abstand); vertical-align: middle; }
.forum-tabelle td:nth-child(even) { background: var(--forum-zelle-grund-2); }
.forum-kategorie {
  font-family: var(--schrift-ueberschrift);
  font-size: var(--text-ueberschrift);
  font-style: italic;
  font-weight: bold;
  color: var(--farbe-ueberschrift);
  text-align: center;
  padding: 6px 0;
}
.forum-zelle--symbol { width: 20px; text-align: center; }
/* Bezeichnungen, die am Desktop der Spaltenkopf traegt (siehe Karten unten). */
.nur-mobil { display: none; }
.forum-zelle--zahl { text-align: center; }
/* Datum und Uhrzeit stehen wie 2005 in einer Zeile. */
.forum-tabelle time { white-space: nowrap; }
.forum-einrueckung-1 { padding-left: 24px !important; }
.forum-einrueckung-2 { padding-left: 44px !important; }

.forum-blaettern { margin: 8px 0; text-align: center; font-size: var(--text-klein); }
/* Kursiv statt blasser: Transparenz braechte den Kontrast unter 4,5:1. */
.forum-zeile--ausgeblendet td { font-style: italic; }

/* Kontrast #C78730 auf #271007: 5,96:1, auf #220E06: 6,2:1. */
.forum-beitraege { display: grid; gap: 1px; margin: 8px 0; }
.forum-beitrag {
  display: grid;
  grid-template-columns: 25% 1fr;
  background: var(--forum-zeile-1);
}
.forum-beitrag:nth-of-type(even) { background: var(--forum-zeile-2); }
.forum-beitrag__autor { padding: 6px; text-align: center; font-size: var(--text-klein); color: #c78730; }
.forum-beitrag__autor p { margin: 0 0 4px; }
.forum-beitrag__nummer { text-align: left; }
.forum-beitrag__name { font-weight: bold; color: var(--farbe-akzent); overflow-wrap: anywhere; }
.forum-beitrag__avatar { display: block; margin: 4px auto; max-width: 100%; height: auto; }
.forum-beitrag__banner { display: block; margin: 4px auto; max-width: 100%; height: auto; }
.forum-beitrag__text { padding: 6px; min-width: 0; overflow-wrap: anywhere; }
.forum-beitrag__vermerk { font-size: var(--text-klein); font-style: italic; }
.forum-beitrag__signatur { margin-top: 8px; padding-top: 4px; border-top: 1px dashed var(--farbe-linie); font-size: var(--text-klein); }
.forum-beitrag--ausgeblendet .forum-beitrag__text { font-style: italic; }
.forum-fortsetzung {
  margin: 12px 0 4px;
  padding: 4px;
  text-align: center;
  font-family: var(--schrift-ueberschrift);
  font-size: var(--text-basis);
  color: var(--farbe-ueberschrift);
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
}

@media (max-width: 600px) {
  /* Tabellenzeilen als Karten: Symbole links, Titel oben, darunter Zahlen
     und letzter Beitrag. Der Kopf bleibt fuer Screenreader im Baum. */
  .nur-mobil { display: inline; }
  .forum-tabelle, .forum-tabelle caption, .forum-tabelle tbody, .forum-tabelle td { display: block; }
  .forum-tabelle thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .forum-tabelle tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 2px;
    margin-bottom: 2px;
    padding: 6px 8px 6px 36px;
    background: var(--forum-zelle-grund);
  }
  .forum-tabelle td,
  .forum-tabelle td:nth-child(even) { background: none; padding: 0; }
  .forum-tabelle td.forum-zelle--symbol { position: absolute; left: 6px; top: 6px; width: 24px; }
  .forum-tabelle td.forum-zelle--symbol + td.forum-zelle--symbol { top: 30px; }
  .forum-tabelle .forum-zelle--titel { flex: 1 1 100%; font-size: var(--text-basis); }
  .forum-tabelle .forum-zelle--zahl { text-align: left; }
  .forum-tabelle .forum-zelle--letzte { flex: 1 1 100%; }
  .forum-tabelle .forum-zelle--letzte br { display: none; }
  .forum-zeile--ankuendigung td:not(.forum-zelle--titel) { display: none; }

  .forum-beitrag { grid-template-columns: 1fr; }
  .forum-beitrag__autor { text-align: left; }
  .forum-beitrag__avatar, .forum-beitrag__banner { margin: 4px 0; }
}

/* Rahmen #8C620D auf #271007: 3,05:1 fuer das Bedienelement. */
.forum-formular textarea {
  width: 100%;
  font-family: var(--schrift);
  font-size: var(--text-basis);
  background: var(--forum-zeile-1);
  color: var(--farbe-text);
  border: 1px solid var(--farbe-linie);
  padding: 4px;
}
.forum-formular textarea:focus-visible,
.forum-formular input:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }

.forum-unterueberschrift { font-family: var(--schrift-ueberschrift); color: var(--farbe-ueberschrift); font-size: var(--text-basis); margin: 12px 0 4px; }

.forum-beitrag__knoepfe { margin: 0 0 6px; text-align: right; }
.forum-beitrag__knoepfe img { vertical-align: middle; }

/* Knopf, der wie ein Link aussieht, wie 2005. */
.forum-textknopf {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: bold; color: var(--farbe-akzent);
}
.forum-textknopf:hover { color: var(--farbe-akzent-hover); text-decoration: underline; }

.forum-avatare { display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid var(--farbe-linie); padding: 8px; }
.forum-avatare legend { color: var(--farbe-akzent); font-weight: bold; }
.forum-avatare__wahl { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.forum-avatare__wahl input:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.forum-avatare__wahl img { max-width: 80px; height: auto; }

.forum-moderation { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin-top: 4px; }
.forum-moderation form { margin: 0; }
.forum-bildknopf { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.forum-bildknopf:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }

.forum-inline { display: inline; margin: 0; }

.forum-auswahl { display: block; padding: 2px 0; }
.forum-auswahl__gruppe { margin: 8px 0 2px; }
.forum-warnung { border: 1px solid var(--farbe-akzent); padding: 8px; margin: 8px 0; }
.forum-formular fieldset { border: 1px solid var(--farbe-linie); margin: 8px 0; }
.forum-formular legend { color: var(--farbe-akzent); font-weight: bold; }

/* Inhaltsbloecke neuer Beitraege */
.block { margin: 0 0 10px; }
.block--bild { margin: 0 0 10px; }
.block--bild img { max-width: 100%; height: auto; border: 1px solid var(--farbe-rahmen); }
.block--bild figcaption,
.block--textbild__bild figcaption { font-size: var(--text-klein); margin-top: 3px; }
/* Die Breite kommt aus basis.css; hier nur der Rahmen wie beim Bild-Baustein. */
.block--textbild__bild img { border: 1px solid var(--farbe-rahmen); }
.block--galerie img { width: 100%; height: auto; border: 1px solid var(--farbe-rahmen); }
.block--galerie figure { margin: 0; }
.block--galerie figcaption { font-size: var(--text-klein); margin-top: 3px; }

/* Zitate als Karte in den Farben von 2005, Gegenstueck zur Goldkarte im Forever-Look. */
:is(.block--text, .block--textbild__text) blockquote,
.block--zitat {
  position: relative;
  display: flow-root;
  margin: 10px 0;
  padding: 12px 14px 10px 46px;
  border: 1px solid var(--farbe-linie);
  border-radius: 6px;
  background: var(--farbe-rahmen);
}
:is(.block--text, .block--textbild__text) blockquote::before,
.block--zitat::before {
  content: "\201C";
  position: absolute;
  top: 10px;
  left: 13px;
  color: var(--farbe-akzent);
  font: bold 36px/1 var(--schrift-ueberschrift);
}
:is(.block--text, .block--textbild__text) blockquote p,
.block--zitat p { margin: 0 0 6px; color: var(--farbe-text); font-family: var(--schrift-ueberschrift); font-style: italic; }
:is(.block--text, .block--textbild__text) blockquote p:last-of-type,
.block--zitat p:last-of-type { margin-bottom: 0; }
.zitat__urheber,
.block--zitat footer {
  margin-top: 6px;
  color: var(--farbe-ueberschrift);
  font-size: var(--text-klein);
  font-weight: bold;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}


/* Rechtliche Seiten */
.rechtstitel {
  font-family: var(--schrift-ueberschrift);
  color: var(--farbe-ueberschrift);
  font-size: 13px;
  margin: 14px 0 4px;
}
.rahmen ul { margin: 4px 0; padding-left: 18px; }
.rahmen code {
  font-family: "Courier New", monospace;
  color: var(--farbe-akzent);
}

.hinweis-fehlend {
  border: 1px solid var(--farbe-warnung);
  padding: 6px 8px;
  margin: 8px 0 12px;
}

/* Formulare */
.formular { margin: 8px 0; }
.formular__feld { margin: 0 0 8px; }
.formular__feld label { display: block; margin-bottom: 2px; }
.formular input[type="text"],
.formular input[type="email"],
.formular input[type="password"] {
  width: 100%;
  max-width: 260px;
  padding: 3px 4px;
  background: #100000;
  border: 1px solid var(--farbe-rahmen);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: var(--text-basis);
}
.formular button {
  padding: 3px 12px;
  background: var(--farbe-menue);
  border: 1px solid var(--farbe-linie);
  color: var(--farbe-akzent);
  font-family: var(--schrift);
  font-size: var(--text-basis);
  font-weight: bold;
  cursor: pointer;
}
.formular button:hover { color: var(--farbe-akzent-hover); }
.formular__fehler {
  border: 1px solid var(--farbe-warnung);
  padding: 6px 8px;
  margin: 8px 0;
}
.formular__hinweis { font-size: var(--text-klein); margin: 4px 0 8px; }

/* Anmeldekasten in der Menuespalte */
/*
 * Wie includes/menu_user.inc.php von 2005: Beschriftung links, Feld
 * rechts, die Links darunter rechtsbuendig. Felder und Knopf tragen die
 * INPUT-Regel aus world.css: randlos, Pergament, fett 11px.
 * Kontrast: #220E06 auf #BD904F 6,4:1; Feld gegen #3D0C06 5,8:1;
 * Beschriftung #B78F59 auf #3D0C06 5,7:1; Knopf beim Zeigen #220E06 auf
 * #F1AB25 9,4:1.
 */
:root {
  --feld-grund: #bd904f;
  --feld-text: #220e06;
}
.anmeldung { padding: 0 8px; text-align: left; }
.anmeldung__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 0 0 2px;
  font-size: var(--text-klein);
}
.anmeldung__zeile input[type="email"],
.anmeldung__zeile input[type="password"],
.anmeldung__absenden button {
  border: 0;
  border-radius: 0;
  background: var(--feld-grund);
  color: var(--feld-text);
  font-family: var(--schrift);
  font-size: var(--text-basis);
  font-weight: bold;
}
.anmeldung__zeile input[type="email"],
.anmeldung__zeile input[type="password"] { flex: 0 0 64px; width: 64px; padding: 1px 2px; }
.anmeldung__zeile input[type="checkbox"] { margin: 0; accent-color: var(--feld-grund); }
.anmeldung__absenden { margin: 4px 0 0; text-align: center; }
.anmeldung__absenden button { padding: 1px 8px; cursor: pointer; }
.anmeldung__absenden button:hover { background: var(--farbe-akzent); }
.anmeldung input:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.anmeldung__links { text-align: right; }
.anmeldung__links .menue__link { padding-right: 8px; }
.anmeldung__name { margin: 0; font-weight: bold; color: var(--farbe-akzent); }
.anmeldung__rang { margin: 0 0 4px; font-size: var(--text-klein); }
.anmeldung__abmelden {
  background: none;
  border: 0;
  padding: 3px 0 3px 10px;
  color: var(--farbe-akzent);
  font-family: var(--schrift);
  font-size: var(--text-klein);
  font-weight: bold;
  cursor: pointer;
}
.anmeldung__abmelden:hover { color: var(--farbe-akzent-hover); text-decoration: underline; }

/*
 * Die Karte: Deutschlandkarte von 2005 (600x732) mit Punkten heutiger
 * Mitglieder (gold, gross) und den Punkten aus dem Bestand von 2005
 * (gedeckter, kleiner). Beide Arten koennen einen Gildennamen tragen
 * (Tooltip bei Hover/Fokus) oder namenlos bleiben - Farbe/Groesse zeigen
 * allein die Herkunft (heute/2005), nicht ob ein Name vorhanden ist. Die
 * Flaeche haelt ueber aspect-ratio das Seitenverhaeltnis, Punkte sitzen
 * prozentual darueber, damit sie mit der Grafik mitskalieren. Lage der
 * Punkte und Sichtbarkeit der Sprechblase stehen in basis.css, hier nur
 * das Aussehen von 2005.
 *
 * Im ausdrücklich aktivierten Eingabemodus ist diese eine Karte das
 * Eingabefeld (input type=image). Die Punkte bleiben sichtbar und lassen
 * Klicks zur Karte durch. Namen stehen zusätzlich als Liste darunter.
 */
.karte__flaeche--eingabe .karte__bild { cursor: crosshair; border: 1px solid var(--farbe-linie); }

/* Zwei Klassen, damit das hoeher spezifische ".formular button" aus dem
   Eingabeformular (der Marker steckt dort drin) diese Form nicht ueberschreibt. */
.karte__flaeche .karte__marker {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: var(--farbe-akzent);
  border: 1px solid var(--farbe-rahmen);
  cursor: pointer;
}
/* Archivpunkte von 2005: kleiner und gedeckter, unabhaengig davon, ob ein
   Name dabeisteht. Gleiche Spezifitaet wie oben, aber danach deklariert -
   die Kaskade entscheidet, welche Regel bei Gleichstand gewinnt. */
.karte__flaeche .karte__marker--archiv {
  width: 7px;
  height: 7px;
  background: var(--farbe-text);
  opacity: 0.9;
}
.karte__flaeche .karte__marker--stumm { cursor: default; }

/* Aussehen der barrierefreien Sprechblase; sie erscheint bei Hover UND
   Tastaturfokus (basis.css). */
.karte__tooltip {
  background: var(--farbe-rahmen);
  color: var(--farbe-akzent);
  border: 1px solid var(--farbe-linie);
  padding: 2px 6px;
  font-size: var(--text-klein);
}

.karte__legende {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: var(--text-klein);
}
.karte__legende li { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.karte__legende-punkt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--farbe-rahmen);
  flex: 0 0 auto;
}
.karte__legende-punkt--aktuell { background: var(--farbe-akzent); }
.karte__legende-punkt--archiv { width: 7px; height: 7px; background: var(--farbe-text); }

/* Namen der eingetragenen Mitglieder als Text, Ersatz fuer den Hover-Tooltip
   (die Punkte auf der Eingabekarte reagieren nicht auf die Maus, siehe oben). */
.karte__namen { font-size: var(--text-klein); margin: 8px 0 0; }

/* Formular zum Setzen des eigenen Punkts */
.karte__feldpaar { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .karte__feldpaar { flex-direction: column; gap: 0; }
}

.anmeldung__zaehler { color: var(--farbe-akzent); font-weight: bold; }

/* Nachrichten (private Nachrichten) */
.nachrichten-reiter { margin: 0 0 16px; }
.nachrichten-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--farbe-rahmen);
}
.nachrichten-zeile--ungelesen { background: rgba(225, 139, 24, 0.08); }
.nachrichten-zeile__betreff { flex: 1 1 260px; }
.nachrichten-zeile__von { color: var(--farbe-text-gedaempft, #b78f59); font-size: var(--text-klein); }
.nachrichten-zeile__datum { color: var(--farbe-text-gedaempft, #b78f59); font-size: var(--text-klein); white-space: nowrap; }
.nachrichten-tabelle { width: 100%; margin-bottom: 16px; border-collapse: collapse; }
.nachrichten-tabelle th { text-align: left; padding: 3px 12px 3px 0; width: 15%; white-space: nowrap; }
.nachrichten-tabelle td { padding: 3px 0; }
.nachrichten-aktionen { margin-top: 16px; }
.nachrichten-loeschen-formular { display: inline; }
.nachrichten-loeschen-knopf {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--farbe-akzent);
  font-family: var(--schrift);
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.nachrichten-loeschen-knopf:hover { color: var(--farbe-akzent-hover); }

/* Profil bearbeiten */
.profil-formular__abschnitt { margin: 0 0 24px; }
.profil-formular__abschnitt h2 { margin-bottom: 8px; }
.profil-formular__bild { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.profil-formular__bild img { border: 1px solid var(--farbe-rahmen); }
.profil-formular__reihe { display: flex; gap: 12px; flex-wrap: wrap; }
.profil-formular__reihe .formular__feld { flex: 1 1 100px; }
.profil-formular__links { margin: 0 0 16px; }
.profil-formular__gildenname { font-weight: bold; }
.profil-formular__unterueberschrift {
  margin: 16px 0 4px;
  font-family: var(--schrift-ueberschrift);
  font-size: 13px;
  color: var(--farbe-ueberschrift);
}

/* What's new? */
.neuigkeiten-rubrik { margin: 0 0 24px; }
.neuigkeiten-rubrik h2 { margin-bottom: 6px; }
.neuigkeiten-rubrik ul { margin: 0; padding-left: 20px; }
.neuigkeiten-rubrik li { margin-bottom: 4px; }
.neuigkeiten-leer { color: var(--farbe-text-gedaempft, #b78f59); font-style: italic; }

@media (max-width: 1010px) {
  .nachrichten-zeile { flex-direction: column; gap: 2px; }
  /* flex: 1 1 100px zielt auf die Breite in der Reihe; in der gestapelten
     Spalte wuerde dieselbe Angabe die Hoehe strecken und riesige Luecken
     zwischen Beschriftung und Feld reissen -- deshalb hier zurueckgesetzt. */
  .profil-formular__reihe { flex-direction: column; }
  .profil-formular__reihe .formular__feld { flex: none; }
}

/* Umschalter zwischen den Looks, neu seit 2026; Dropdown in basis.css. */
.darstellung { padding: 6px 8px 8px; }
.darstellung__zusatz { display: block; font-weight: normal; color: var(--farbe-text); }
.darstellung--menue { display: none; }

.profil-formular__wahl { border: 1px solid var(--farbe-linie); margin: 0 0 8px; }
.profil-formular__wahl legend { color: var(--farbe-akzent); font-weight: bold; }
.profil-formular__wahl label { display: block; }

/* ---------- Benachrichtigungen ---------- */

.benachrichtigungen { margin: 0 0 16px; padding: 0; list-style: none; }
.benachrichtigung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--farbe-rahmen);
}
.benachrichtigung--neu .benachrichtigung__text { font-weight: bold; }
.benachrichtigung__neu { color: var(--farbe-akzent); font-size: 0.85em; text-transform: uppercase; }
.benachrichtigung__zeit { margin-left: auto; font-size: 0.85em; }
.benachrichtigungen-leer { font-style: italic; }
.benachrichtigungsmatrix { width: 100%; margin: 0 0 16px; border-collapse: collapse; }
.benachrichtigungsmatrix caption { padding: 4px 0; color: var(--farbe-ueberschrift); font-weight: bold; text-align: left; }
.benachrichtigungsmatrix th,
.benachrichtigungsmatrix td { padding: 4px 6px; border-bottom: 1px solid var(--farbe-rahmen); }
.benachrichtigungsmatrix thead th { text-align: center; }
.benachrichtigungsmatrix thead th:first-child,
.benachrichtigungsmatrix tbody th { font-weight: normal; text-align: left; }
.benachrichtigungsmatrix td { width: 4.5em; text-align: center; }
.benachrichtigungsmatrix input[type="checkbox"] { width: 20px; height: 20px; }
.benachrichtigungen-hinweis { font-size: 0.9em; }
.beobachtete-themen { margin: 0 0 16px; padding-left: 20px; }
.beobachtete-themen li { margin-bottom: 6px; }
.beobachtete-themen__form { display: inline; margin: 0 0 0 8px; }
.push-geraete__liste { width: 100%; margin: 0 0 16px; border-collapse: collapse; }
.push-geraete__liste th,
.push-geraete__liste td { padding: 4px 6px; border-bottom: 1px solid var(--farbe-rahmen); text-align: left; vertical-align: top; }
.push-geraete__liste tbody th { font-weight: normal; }
.push-geraete__liste form { margin: 0; }

/*
 * Kleine und mittlere Bildschirme: die Spalten werden untereinander gelegt
 * (beziehungsweise auf Tablet-Breite in der Regel weiter unten neu
 * angeordnet), Menue und Statusspalte lassen sich per Checkbox-Hack als
 * Akkordeon auf- und zuklappen, Schrift und Tippziele wachsen mit. Ab 1011px
 * bleibt die Desktop-Darstellung oben davon unberuehrt (siehe die
 * Bildvergleiche in docs/ bzw. der Aufgabenbeschreibung zur Umsetzung).
 */
@media (max-width: 1010px) {
  /* Schrift insgesamt etwas groesser, das Original ist auf 11px Verdana am
     Bildschirmarbeitsplatz von 2005 ausgemessen und bleibt auf schmalen
     Geraeten sonst zu klein. */
  :root {
    --text-basis: 13px;
    --text-klein: 12px;
    --rand-mobil: 12px;
    --kopf-hoehe-mobil: 110px;
    --tippziel: 44px;
  }

  .rahmenaussen {
    width: 100%;
    padding: 0;
    background-image: none;
  }
  .kopf img,
  .dreispalter,
  .fuss { width: 100%; }
  .dreispalter { grid-template-columns: 1fr; }
  /* Ohne min-width:0 zwingt ein nicht schrumpfbares Formularfeld (Login,
     "Autologin") in der Menuespalte die ganze Grid-Spur ueber die
     Geraetebreite hinaus, das reisst dann auch den Inhalt und die
     Statusspalte in denselben Ueberlauf mit. */
  .spalte { min-width: 0; }

  /* Ein Rand fuer alles in der Inhaltsspalte: Titel, Hinweise, Rahmen,
     Banner und Blaetterleisten stehen buendig untereinander. */
  .spalte--inhalt { padding-inline: var(--rand-mobil); }
  .rahmen { width: auto; margin-inline: 0; }
  .spalte--inhalt > .bereichstitel,
  .spalte--inhalt > .bereichshinweis,
  .spalte--inhalt > .formular__hinweis { width: auto; margin-inline: 0; }

  /* Kopfgrafik: der eigene Ausschnitt header-mobil.jpg in fester Hoehe,
     das BoA-Logo sitzt links und bleibt durch object-position: left top
     vollstaendig sichtbar, beschnitten wird nur rechts. */
  .kopf img {
    height: var(--kopf-hoehe-mobil);
    object-fit: cover;
    object-position: left top;
  }

  /* Menue und Status: Holztextur der Desktop-Spalte, nur in die Breite
     gestreckt -- gekachelt stuenden die Goldkanten der 140px-Grafik alle
     140px im Bild, gleichmaessig vergroessert wirkte die Maserung grob. */
  .spalte--menue,
  .spalte--status {
    background-image: url("/img/menue_bg.gif");
    background-size: 100% 68px;
  }

  /*
   * Checkbox-Hack: die Bloecke im Burger-Menue und die Statusspalte lassen
   * sich einzeln auf- und zuklappen, ganz ohne JavaScript. Die Checkbox liegt visuell verborgen,
   * aber weiterhin per Tastatur erreichbar und fokussierbar.
   */
  .menue__umschalter {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    padding: 0;
  }
  .menue__klappinhalt { display: none; }
  .menue__umschalter:checked ~ .menue__klappinhalt { display: block; }

  .menue__block {
    margin-bottom: 0;
    border-bottom: 1px solid var(--farbe-linie);
  }
  .menue__titel { position: relative; }
  .menue__titel label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: var(--tippziel);
    padding: 9px var(--rand-mobil);
    cursor: pointer;
  }
  .menue__titel img { width: 140px; max-width: 140px; }
  .menue__titel label::after {
    content: "\25BE";
    position: absolute;
    right: var(--rand-mobil);
    top: 50%;
    transform: translateY(-50%);
    color: var(--farbe-akzent);
    font-size: 13px;
    transition: transform 200ms ease-out;
  }
  .menue__umschalter:checked ~ .menue__titel label::after {
    transform: translateY(-50%) rotate(180deg);
  }
  .menue__umschalter:focus-visible ~ .menue__titel label {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: -3px;
  }

  /*
   * Burger-Menue: der Knopf sitzt rechts auf der Kopfgrafik, das Menue
   * klappt darunter auf. Die Hoehe animiert ueber grid-template-rows
   * (0fr -> 1fr), visibility nimmt die Links im geschlossenen Zustand aus
   * der Tab-Reihenfolge.
   */
  .kopf { position: relative; }
  .burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(20, 1, 1, 0.8);
    border: 1px solid var(--farbe-linie);
    cursor: pointer;
  }
  .burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--farbe-akzent);
    transition: transform 250ms ease-out, opacity 200ms ease-out;
  }
  body:has(.burger__umschalter:checked) .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body:has(.burger__umschalter:checked) .burger span:nth-child(2) { opacity: 0; }
  body:has(.burger__umschalter:checked) .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  body:has(.burger__umschalter:focus-visible) .burger {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 2px;
  }

  .burger__umschalter {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    padding: 0;
  }
  .spalte--menue {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease-out;
  }
  .burger__umschalter:checked ~ .spalte--menue { grid-template-rows: 1fr; }
  .menue__innen {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 300ms;
  }
  .burger__umschalter:checked ~ .spalte--menue .menue__innen {
    visibility: visible;
    transition-delay: 0s;
  }

  /* Im geoeffneten Burger-Menue ist jeder Block ein eigenes Untermenue
     (Akkordeon unten); der Block der aktuellen Seite steht schon offen. */
  .menue__klappinhalt .menue__liste { padding: 0 0 6px; }
  .status__liste { padding-inline: var(--rand-mobil); }

  /* Touch-Ziele: Menuelinks auf gut 44px Zeilenhoehe bringen. */
  .menue__link {
    padding: 13px var(--rand-mobil) 13px calc(var(--rand-mobil) + 4px);
    font-size: var(--text-basis);
  }
  .menue__link--unter { padding-left: calc(var(--rand-mobil) + 16px); }

  /* Aktuelle Seite: Akzentkante links. #F1AB25 auf #3D0C06: 8,45:1. */
  .menue__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--farbe-akzent); }

  /* Anmeldekasten: volle Breite, 16px verhindert das automatische Hineinzoomen
     von iOS in Formularfelder, groesserer Abmelden-Knopf. */
  .anmeldung { padding: 10px var(--rand-mobil); }
  /* Gestapelt: Beschriftung ueber dem Feld, nur der Haken bleibt neben
     seiner Beschriftung. Die Links folgen den uebrigen Menuelinks. */
  .anmeldung__zeile {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 8px;
    font-size: var(--text-basis);
  }
  .anmeldung__zeile--haken { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
  .anmeldung__zeile input[type="email"],
  .anmeldung__zeile input[type="password"] {
    flex: none;
    width: 100%;
    min-height: var(--tippziel);
    font-size: 16px;
    padding: 8px;
  }
  .anmeldung__absenden { text-align: left; }
  .anmeldung__absenden button { font-size: 14px; min-height: var(--tippziel); padding: 8px 20px; }
  .anmeldung__links { text-align: left; }
  .anmeldung__abmelden { padding: 10px 0 10px 10px; }

  /* Formularseiten (Anmelden, Registrieren, Passwort vergessen): dieselben
     Ziele, volle Breite statt der festen 260px. */
  .formular input[type="text"],
  .formular input[type="email"],
  .formular input[type="password"] {
    max-width: none;
    width: 100%;
    font-size: 16px;
    padding: 8px;
  }
  .formular button { font-size: 15px; min-height: var(--tippziel); padding: 10px 20px; }

  /* Checkboxen (Autologin, "Angemeldet bleiben") deutlich groesser als die
     winzige Browservorgabe, das umschaltende Akkordeon bleibt unberuehrt. */
  .formular input[type="checkbox"],
  .anmeldung input[type="checkbox"],
  .umfrage__wahloption input {
    width: 18px;
    height: 18px;
  }

  /* Blaetterleisten. Im Forum reicht die Mindestgroesse nach WCAG 2.2 AA
     (24px): innen gepolsterte Links auf weiten Zeilen, damit die Leiste im
     Stil von 2005 kompakt bleibt und sich die Flaechen nicht ueberlappen. */
  .forum-blaettern { line-height: 2.6; }
  .forum-blaettern a { padding: 6px 4px; }
  /* Umbruch nur zwischen den Eintraegen, nie mitten in "[ 12 ]". Am Desktop
     bleibt der Umbruch wie bisher. */
  .forum-blaettern__eintrag { white-space: nowrap; }
  .blaettern a, .blaettern span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--tippziel); min-height: var(--tippziel); padding: 0 10px;
  }

  /* Lange Adressen (Homepage) brechen um statt ueber den Rand zu ragen. */
  .profil__tabelle td { overflow-wrap: anywhere; }

  /* Archivtexte: die Schriftgroessen 1 und 2 von 2005 (0.75em und 0.85em,
     siehe LegacyContentConverter::FONT_SIZES) und 8pt aus den festen Seiten
     ergaeben mobil 10 bis 11px. !important, weil sie als Inline-Stil
     vorliegen; der gespeicherte Inhalt bleibt unveraendert. */
  .beitrag__inhalt [style*="font-size:0.75em"],
  .beitrag__inhalt [style*="font-size:0.85em"],
  .beitrag__inhalt [style*="font-size:8pt"] { font-size: 12px !important; }

  /* Umfragen: Balken auf schmalen Geraeten etwas kraeftiger, die Antwort
     der Gilde bekommt mehr Luft um den Text. */
  .umfrage__balken { height: 14px; }
  .gb-antwort { padding: 10px 12px; }

  /* Unsere Brueder: das Portraet steht ueber der Tabelle. */
  .mitglieder-volk { flex-direction: column; align-items: center; }
  .mitglieder-volk__ohne-bild { flex: none; }
  .mitglieder-volk__rahmen { align-self: stretch; }

  /* Profilseite: Bild ueber statt neben der Tabelle, wie beim Volk-Kasten. */
  .profil__kopf { flex-direction: column; align-items: center; }
  .profil__tabelle { align-self: stretch; }
  .profil__tabelle th { width: 45%; }

  /* Bibliothek: Rubriken einspaltig, Vorschaubild etwas kleiner. */
  .bibliothek__rubrik { flex: 1 1 100%; }
  .bibliothek__vorschau { width: 72px; }

  /* Ueberschrift der rechtlichen Seiten nutzte eine feste, mobil zu kleine
     Groesse statt einer Variable. */
  .rechtstitel { font-size: 15px; }

  /* Archivinhalte koennen alte Tabellen mit fester Breite enthalten, die
     sonst die ganze Seite verbreitern. */
  .beitrag__inhalt { overflow-x: auto; }
  .beitrag__inhalt table { max-width: 100%; }

  .fuss__panel { padding: 10px 14px; }

  /* Die Abschlussgrafik rundete frueher die schmale 140px-Spalte optisch ab.
     Bei voller Breite haengt sie nur noch als schmaler Streifen links, jeder
     Menueblock hat ohnehin schon seinen eigenen unteren Rand. */
  .menue__abschluss { display: none; }
}

/* Kopfgrafik auf sehr schmalen Geraeten noch einmal niedriger, damit sie
   nicht unverhaeltnismaessig viel Platz einnimmt. */
@media (max-width: 600px) {
  :root { --kopf-hoehe-mobil: 84px; }

  /* Wanderer: vier Spalten passen nicht unter gut 300px, jede Zeile wird
     wie bei den Forentabellen zur Karte - oben der Name, darunter Rasse,
     Klasse und der Link. Der Kopf bleibt fuer Screenreader im Baum. */
  .wanderer-tabelle, .wanderer-tabelle tbody, .wanderer-tabelle td { display: block; }
  .wanderer-tabelle thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .wanderer-tabelle tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--farbe-rahmen);
  }
  .wanderer-tabelle td { text-align: left; }
  .wanderer-tabelle td:first-child { flex: 1 1 100%; color: var(--farbe-akzent); font-weight: bold; }
  .wanderer-tabelle a { display: inline-block; padding: 6px 0; }
}

/*
 * Tablet-Breite: Menue oben ueber die volle Breite (eingeklappt), darunter
 * Inhalt und Statusspalte nebeneinander. Unterhalb von 700px greift wieder
 * die einfache Stapelung (Menue, Inhalt, Status) aus der Regel oben.
 */
@media (min-width: 700px) and (max-width: 1010px) {
  .dreispalter {
    grid-template-columns: 1fr var(--breite-menue);
    grid-template-areas:
      "menue menue"
      "inhalt status";
  }
  .spalte--menue { grid-area: menue; }
  .spalte--inhalt { grid-area: inhalt; }
  .spalte--status { grid-area: status; }

  /* Hier hat die Statusspalte wieder ihre Originalbreite von 140px. Sie
     steht deshalb offen wie am Desktop und traegt wieder die Holztextur;
     zugeklappt bliebe neben dem Inhalt nur eine leere Flaeche. */
  .spalte--status { background-image: url("/img/menue_bg.gif"); background-size: auto; }
  .spalte--status .menue__klappinhalt { display: block; }
  .spalte--status .menue__titel label { cursor: default; padding: 0; }
  .spalte--status .menue__titel label::after { content: none; }
}

/* Der Umschalter im Burger-Menue, solange die Statusspalte unter dem Inhalt steht. */
@media (max-width: 699.98px) {
  .darstellung--menue { display: block; }
}