/* ======================================================================
   VEYTRION - WEBSITE
   ======================================================================

   Eine Datei, keine Baukette. Dieselbe Begruendung wie beim Panel: ein
   Bauwerkzeug, das uebersetzt, minimiert und buendelt, ist ein zweites
   Programm, das gepflegt werden will - und zwar genau dann nicht, wenn
   man gerade etwas anderes repariert.

   Die Farben stammen aus dem abgenommenen Entwurf. Sie stehen hier als
   Variablen, damit eine Umfaerbung EINE Stelle ist und nicht
   dreihundert.
   ====================================================================== */

:root {
  --grund: #0f1116;
  --flaeche: #171a21;
  --flaeche-hoch: #1c2029;
  --flaeche-tief: #141720;
  --knopf: #222631;

  --rand: #262a35;
  --rand-stark: #2f3443;

  --schrift: #e9ebf0;
  --schrift-matt: #a9b0bf;
  --schrift-leise: #8d94a5;

  --lila: #7a4ee0;
  --lila-hell: #a78bfa;
  --lila-tief: #2a2340;

  --gruen: #5fd08a;
  --gruen-tief: #16251c;
  --gruen-rand: #2c6e49;

  --orange: #e0a05d;
  --orange-tief: #2e2519;

  --rot: #e05d5d;
  --rot-tief: #2e1f1f;

  --blau: #6fb3e0;
  --discord: #5865f2;

  --rund: 13px;
  --rund-klein: 9px;
  --breite: 1200px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--grund);
  color: var(--schrift);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Sora', system-ui, sans-serif; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: 36px; font-weight: 800; }
h2 { font-size: 28px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 14px; }

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

button, input, textarea, select { font-family: inherit; font-size: 15px; }

/* Tastaturbedienung sichtbar lassen. Ein unsichtbarer Fokus ist fuer
   jeden, der nicht mit der Maus arbeitet, eine blinde Seite. */
:focus-visible { outline: 2px solid var(--lila-hell); outline-offset: 2px; }

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

.bahn { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

/* ===================== Kopfleiste ===================== */

.kopf { border-bottom: 1px solid var(--rand); background: var(--flaeche); }
.kopf .bahn {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px; min-height: 50px; padding-top: 10px; padding-bottom: 10px;
}
.marke { display: flex; align-items: center; gap: 10px; color: var(--schrift); }
.marke:hover { text-decoration: none; }
.marke span { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: 0.04em; }

.menue { display: flex; flex-wrap: wrap; gap: 2px; flex-grow: 1; }
.menue a {
  padding: 9px 12px; border-radius: 8px;
  color: var(--schrift-matt); font-weight: 500; font-size: 14.5px;
}
.menue a:hover { background: var(--knopf); color: var(--schrift); text-decoration: none; }
.menue a[aria-current="page"] { background: var(--knopf); color: var(--schrift); font-weight: 600; }

.zaehler {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 8px;
  background: var(--gruen-tief); border: 1px solid var(--gruen-rand);
  font-size: 13px; font-weight: 600; color: var(--gruen);
}
.punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

.konto {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px 6px 6px; border-radius: var(--rund-klein);
  background: var(--knopf); border: 1px solid var(--rand-stark); color: var(--schrift);
  font-weight: 600; font-size: 14px;
}
.konto:hover { text-decoration: none; border-color: var(--lila); }

/* Burger - nur auf schmalen Schirmen. Ohne JavaScript, ueber ein
   verstecktes Kaestchen: ein Menue, das erst nach dem Laden eines
   Skripts aufgeht, ist auf einem langsamen Handy eine Sackgasse. */
.burger { display: none; }
#menue-schalter { display: none; }

/* ===================== Knoepfe ===================== */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 11px; border: 1px solid var(--rand-stark);
  background: var(--knopf); color: var(--schrift);
  font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  min-height: 44px;
}
.knopf:hover { text-decoration: none; border-color: var(--lila); }
.knopf.haupt { background: var(--lila); border-color: var(--lila); color: #fff; }
.knopf.haupt:hover { background: #8c63e8; }
.knopf.discord { background: var(--discord); border-color: var(--discord); color: #fff; }
.knopf[disabled] { background: var(--flaeche-tief); color: var(--schrift-leise); cursor: default; border-color: var(--rand); }

/* ===================== Flaechen ===================== */

.karte {
  border-radius: var(--rund); border: 1px solid var(--rand);
  background: var(--flaeche); overflow: hidden;
}
.karte.betont { border-color: var(--lila); }
.karte.gut { border-color: var(--gruen-rand); }
.karte.warnung { border-color: var(--orange); }

.feld { padding: 20px; }
.zeile { padding: 15px 20px; border-bottom: 1px solid #222631; }
.zeile:last-child { border-bottom: 0; }

.raster { display: grid; gap: 18px; }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.spalten { display: flex; flex-wrap: wrap; gap: 28px; }
.spalten > .haupt { flex: 999 1 560px; min-width: 0; }
.spalten > .seite { flex: 1 1 280px; min-width: 0; }

.marke-etikett {
  display: inline-block; padding: 3px 8px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.schlagwort {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  background: var(--knopf); border: 1px solid var(--rand-stark);
  font-size: 11.5px; font-weight: 600; color: var(--schrift-matt);
}

.matt { color: var(--schrift-matt); }
.leise { color: var(--schrift-leise); font-size: 13.5px; }

/* ===================== Formulare ===================== */

label.feldname { display: block; font-size: 13.5px; font-weight: 600; color: var(--schrift-matt); margin-bottom: 7px; }

input[type="text"], input[type="search"], input[type="email"], textarea, select {
  width: 100%; padding: 13px 15px; border-radius: 10px;
  background: var(--grund); border: 1px solid var(--rand-stark); color: var(--schrift);
  line-height: 1.6;
}
input[disabled], textarea[disabled] { background: var(--flaeche-tief); color: var(--schrift-leise); border-color: var(--rand); }
textarea { resize: vertical; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--lila); }

/* ===================== Avatare ===================== */

.kopfbild { border-radius: 8px; display: block; image-rendering: pixelated; background: var(--knopf); }
.kopfbild.gross { border-radius: 16px; }

/* Der Skin-Ausschnitt. Ein Minecraft-Skin ist 64x64; der Kopf liegt bei
   (8,8) und ist 8x8 gross. Achtfach vergroessert fuellt er genau einen
   64er-Rahmen - alles andere skaliert ueber die Variable mit. */
.skin { display: inline-block; overflow: hidden; position: relative; border-radius: 8px; background: var(--knopf); flex-shrink: 0; }
.skin img {
  position: absolute; image-rendering: pixelated;
  width: 800%; height: 800%; max-width: none;
  left: -100%; top: -100%;
}
.skin.figur { border-radius: 8px; }
.skin.figur img { width: 400%; height: 400%; left: -50%; top: -50%; }
.skin.gross { border-radius: 16px; }
.buchstabe {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lila-tief); color: var(--lila-hell);
  font-family: 'Sora', sans-serif; font-weight: 700; border-radius: 8px;
}

/* ===================== Tabellen ===================== */

.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
  text-align: left; padding: 14px 20px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--schrift-leise); border-bottom: 1px solid var(--rand);
}
.tabelle td { padding: 12px 20px; border-bottom: 1px solid #222631; font-size: 14.5px; }
.tabelle tr:last-child td { border-bottom: 0; }
.scrollbar { overflow-x: auto; }

/* ===================== Fuss ===================== */

.fuss { border-top: 1px solid var(--rand); background: var(--flaeche); margin-top: 72px; }
.fuss .bahn { padding-top: 44px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 44px; }
.fuss h3 {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--schrift-leise); margin-bottom: 14px;
}
.fuss a { color: var(--schrift-matt); font-size: 14px; display: block; margin-bottom: 9px; }
.rechtsleiste {
  border-top: 1px solid #222631; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--schrift-leise);
}
.rechtsleiste a { color: var(--schrift-leise); display: inline; margin: 0; }

/* ======================================================================
   FORMULARE
   ======================================================================

   Ein Eingabefeld sieht hier aus wie ein Eingabefeld und nicht wie ein
   Kunstwerk. Der Grund ist nicht Bescheidenheit: wer auf einer dunklen
   Seite ein Feld sucht, sucht einen hellen Rahmen, und jede Abweichung
   davon kostet eine Sekunde Suchen - bei jedem Feld, bei jedem Besuch.
   ====================================================================== */

.bahn.schmal { max-width: 780px; }
h1.gross { font-size: 52px; line-height: 1.06; }

.feldblock { display: block; margin-bottom: 18px; }
.feldname {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--schrift-matt); margin-bottom: 7px;
}
.feldhilfe { display: block; font-size: 12.5px; color: var(--schrift-leise); margin-top: 6px; line-height: 1.55; }
.feldhilfe a { color: var(--lila-hell); }

.eingabe {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  background: var(--flaeche-tief); border: 1px solid var(--rand-stark);
  border-radius: var(--rund-klein); color: var(--schrift);
  font-family: inherit; font-size: 15px; line-height: 1.5;
}
.eingabe:focus { outline: 2px solid var(--lila); outline-offset: 1px; border-color: var(--lila); }
.eingabe[disabled] { opacity: 0.5; cursor: not-allowed; }
textarea.eingabe { resize: vertical; min-height: 90px; }
select.eingabe { appearance: none; cursor: pointer; }
input[type="file"].eingabe { padding: 10px; font-size: 13.5px; }

.schalterzeile {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid #222631;
}
.schalterzeile:first-of-type { border-top: 0; }
.schalterzeile input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--lila); flex-shrink: 0; }
.zeichenzahl { display: block; font-size: 12px; color: var(--schrift-leise); margin-top: 5px; text-align: right; }

/* Ein Band fuer "gespeichert", "zu lang", "wird geprueft". */
.band {
  border: 1px solid; border-radius: var(--rund-klein);
  padding: 13px 16px; margin-bottom: 18px; font-size: 14px; line-height: 1.55;
}
.band strong { font-weight: 700; }
.band a { color: inherit; text-decoration: underline; }

.knopf.still {
  background: var(--flaeche-tief); border-color: var(--rand);
  color: var(--schrift-leise); cursor: default;
}

.kleinknopf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; font-size: 12.5px; font-weight: 600;
  background: var(--knopf); border: 1px solid var(--rand-stark);
  border-radius: 9px; color: var(--schrift-matt); cursor: pointer;
  font-family: inherit;
}
.kleinknopf:hover { color: var(--schrift); border-color: var(--lila); text-decoration: none; }
.kleinknopf.an { color: var(--lila-hell); border-color: var(--lila); background: var(--lila-tief); }
.kleinknopf.gefahr:hover { color: #f08a8a; border-color: var(--rot); }
.kleinknopf.still { background: transparent; border-color: transparent; cursor: default; }

/* ======================================================================
   ANMELDEN
   ====================================================================== */

.anmeldeknopf {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--rund-klein);
  border: 1px solid var(--rand-stark); background: var(--knopf);
  color: var(--schrift); font-weight: 600; font-size: 15px;
}
.anmeldeknopf:hover { text-decoration: none; border-color: var(--lila); }
.anmeldeknopf.discord { background: var(--discord); border-color: var(--discord); color: #fff; }
.anmeldeknopf.discord:hover { filter: brightness(1.12); }
.anmeldeknopf.google { background: #fff; border-color: #fff; color: #1f1f1f; }
.anmeldeknopf.google:hover { filter: brightness(0.95); }
.anmeldeknopf.aus { opacity: 0.45; cursor: not-allowed; flex-wrap: wrap; }

/* ======================================================================
   NAVIGATION
   ====================================================================== */

.krumen { font-size: 13px; color: var(--schrift-leise); margin-bottom: 18px; }
.krumen a { color: var(--schrift-leise); }
.krumen a:hover { color: var(--schrift); }

.reiter { display: flex; flex-wrap: wrap; gap: 3px; border-bottom: 1px solid var(--rand); }
.reiter a {
  padding: 11px 15px; font-size: 14px; font-weight: 500;
  color: var(--schrift-leise); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.reiter a:hover { color: var(--schrift); text-decoration: none; }
.reiter a[aria-current="page"] { color: var(--schrift); border-bottom-color: var(--lila); font-weight: 600; }
.blase {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 4px;
  background: var(--orange); color: #1a1205; border-radius: 9px;
  font-size: 11px; font-weight: 700; text-align: center;
}

.blaettern { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 20px; align-items: center; }
.blaettern a, .blaettern span {
  min-width: 36px; padding: 8px 10px; text-align: center;
  border: 1px solid var(--rand-stark); border-radius: 9px;
  font-size: 13.5px; color: var(--schrift-matt);
}
.blaettern a:hover { border-color: var(--lila); color: var(--schrift); text-decoration: none; }
.blaettern span[aria-current="page"] { background: var(--lila); border-color: var(--lila); color: #fff; font-weight: 700; }
.blaettern .luecke { border-color: transparent; min-width: 20px; padding: 8px 2px; }

/* ======================================================================
   TEXTE, DIE JEMAND GETIPPT HAT
   ======================================================================

   `.inhalt` umschliesst alles, was aus einem Forenbeitrag oder einem
   Rechtstext kommt. Die Regeln hier gelten also fuer Markup, das NICHT
   in diesen Dateien entstanden ist - deshalb stehen sie beisammen und
   deshalb ist `max-width` dabei: eine Zeile ueber die ganze Breite
   eines Bildschirms liest niemand zu Ende.
   ====================================================================== */

.inhalt { font-size: 15px; line-height: 1.7; color: var(--schrift-matt); max-width: 70ch; }
.inhalt p { margin: 0 0 14px; }
.inhalt p:last-child { margin-bottom: 0; }
.inhalt strong { color: var(--schrift); font-weight: 700; }
.inhalt code {
  background: var(--flaeche-tief); border: 1px solid var(--rand);
  border-radius: 5px; padding: 1px 5px; font-size: 13.5px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
.inhalt blockquote {
  margin: 0 0 14px; padding: 10px 14px;
  border-left: 3px solid var(--lila); background: var(--flaeche-tief);
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  color: var(--schrift-leise); font-size: 14px;
}
.inhalt blockquote p:last-child { margin-bottom: 0; }
.inhalt.zitat { font-size: 14px; color: var(--schrift-leise); }
.inhalt.recht h2 { font-size: 20px; margin: 28px 0 12px; color: var(--schrift); }
.inhalt.recht h3 { font-size: 16px; margin: 22px 0 10px; color: var(--schrift); }
.inhalt.recht ul, .inhalt.recht ol { margin: 0 0 14px; padding-left: 22px; }
.inhalt.recht li { margin-bottom: 6px; }
.inhalt.recht a { color: var(--lila-hell); }

.codeanzeige {
  font-family: 'Sora', ui-monospace, monospace; font-weight: 700;
  font-size: 18px; letter-spacing: 0.14em;
  background: var(--flaeche-hoch); border: 1px solid var(--rand-stark);
  border-radius: var(--rund-klein); padding: 13px 16px; color: var(--schrift);
  overflow-wrap: anywhere;
}
.codeblock {
  margin: 8px 0 0; padding: 13px 16px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--flaeche-tief); border: 1px solid var(--rand-stark);
  border-radius: var(--rund-klein); font-size: 13.5px; line-height: 1.6;
  color: var(--schrift-matt); font-family: ui-monospace, Menlo, monospace;
}

/* ======================================================================
   FORUM
   ====================================================================== */

.gruppentitel {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--schrift-leise); margin-bottom: 11px;
}
.bereichname { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; }
.thematitel { font-family: 'Sora', sans-serif; font-size: 15.5px; font-weight: 600; color: var(--schrift); }
.zahlgross { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; }

.themazeile { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.themazeile .letzter { text-align: right; font-size: 12.5px; line-height: 1.5; }
.schlagwort.angeheftet { color: var(--lila-hell); border-color: var(--lila); }
.schlagwort.erledigt { color: var(--gruen); border-color: var(--gruen-rand); }
.schlagwort.geschlossen { color: var(--schrift-leise); }

.themakopf { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.modleiste {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  padding: 11px 13px; background: var(--flaeche); border: 1px solid var(--rand-stark);
  border-radius: var(--rund-klein);
}

.beitraege { display: flex; flex-direction: column; gap: 14px; }
.beitrag {
  display: flex; background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--rund); overflow: hidden; scroll-margin-top: 20px;
}
.beitrag.geloescht { opacity: 0.6; display: block; }
.beitrag-wer {
  flex: 0 0 160px; padding: 20px 16px; text-align: center;
  background: var(--flaeche-tief); border-right: 1px solid var(--rand);
}
.beitrag-wer .skin, .beitrag-wer .buchstabe, .beitrag-wer .kopfbild { margin: 0 auto 10px; }
.beitrag-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.beitrag-name a { color: var(--schrift); }
.beitrag-text { flex: 999 1 300px; min-width: 0; padding: 18px 20px; }
.beitrag-kopf { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 12px; font-size: 12.5px; }
.beitrag-fuss {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #222631;
}
.zitathinweis { font-size: 12.5px; color: var(--schrift-leise); margin-bottom: 10px; }
.signatur {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--rand-stark);
  font-size: 13px; color: var(--schrift-leise); line-height: 1.6; white-space: pre-line;
}

.frage { border-bottom: 1px solid #222631; }
.frage:last-child { border-bottom: 0; }
.frage summary {
  padding: 16px 20px; cursor: pointer; font-family: 'Sora', sans-serif;
  font-weight: 600; font-size: 15px; list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::before { content: '+ '; color: var(--lila-hell); font-weight: 700; }
.frage[open] summary::before { content: '− '; }
.frage p { margin: 0; padding: 0 20px 18px; color: var(--schrift-matt); line-height: 1.7; max-width: 70ch; }

/* ======================================================================
   PROFIL
   ====================================================================== */

.profilkopf {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start;
  padding: 24px; margin-bottom: 22px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--rund);
}
.profilbild { flex: 0 0 auto; }
.profilbild .skin, .profilbild .buchstabe, .profilbild .kopfbild { border-radius: 18px; }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 16px; }
.kennzahl { text-align: center; }
.kennzahl-wert { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.2; }
.kennzahl-name { font-size: 11.5px; color: var(--schrift-leise); margin-top: 3px; }

.rangschild {
  display: inline-block; font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
}

.verknuepfen { border-color: var(--lila); }

.mitglieder { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; }
.mitglied {
  text-align: center; padding: 16px 10px; border-radius: var(--rund-klein);
  background: var(--flaeche); border: 1px solid var(--rand); color: var(--schrift);
}
.mitglied:hover { border-color: var(--lila); text-decoration: none; }
.mitglied .skin, .mitglied .buchstabe, .mitglied .kopfbild { margin: 0 auto 9px; }
.mitglied-name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }

/* ======================================================================
   SHOP
   ====================================================================== */

.ipfeld {
  display: flex; align-items: stretch; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--rand-stark); background: var(--flaeche-hoch);
}
.ipfeld > span { padding: 15px 18px; font-family: 'Sora', monospace; font-size: 17px; font-weight: 700; }

.spielkachel { display: block; color: inherit; }
.spielkachel:hover { border-color: var(--lila); text-decoration: none; }

.shopkarte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--rund); }
.shopkarte.aufstieg { border-color: var(--gruen-rand); }
.shopkarte.matt { opacity: 0.62; }
.shoprang { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: 0.02em; }
.shoppreis { font-family: 'Sora', sans-serif; display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.shoppreis .neu { font-weight: 800; font-size: 26px; }
.shoppreis .alt { color: var(--schrift-leise); text-decoration: line-through; font-size: 16px; }
.aufstiegshinweis { color: var(--gruen); font-size: 13.5px; line-height: 1.6; }

.rechnung { font-size: 14.5px; }
.rechnung > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid #222631; color: var(--schrift-matt);
}
.rechnung > div.gut { color: var(--gruen); }
.rechnung > div.summe {
  border-bottom: 0; border-top: 1px solid var(--rand-stark); margin-top: 4px;
  padding-top: 13px; font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 17px; color: var(--schrift);
}

/* ======================================================================
   TEAMBEREICH
   ====================================================================== */

.kasten { display: block; color: inherit; }
.kasten:hover { border-color: var(--lila); text-decoration: none; }
.kasten.wartet { border-color: var(--orange); }
.kasten-zahl { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 32px; line-height: 1; margin-bottom: 9px; }

.meldungen { display: flex; flex-direction: column; gap: 14px; }
.meldung { background: var(--flaeche); border: 1px solid var(--orange); border-radius: var(--rund); }
.meldung.erledigt { border-color: var(--rand); opacity: 0.68; }
.zitatkasten {
  padding: 13px 15px; background: var(--flaeche-tief);
  border: 1px solid var(--rand); border-radius: var(--rund-klein);
}
.strafhinweis {
  margin-top: 7px; font-size: 12.5px; color: var(--orange);
  background: var(--orange-tief); border-radius: 7px; padding: 5px 9px; display: inline-block;
}
.pruefbild {
  max-width: 100%; width: 128px; height: 128px; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--rand-stark); display: block; margin: 0 auto;
}

.rangzeile { display: flex; gap: 16px; align-items: center; }
.platz {
  flex: 0 0 38px; text-align: center; font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 16px; color: var(--schrift-leise);
}
.platz.podest { color: var(--lila-hell); }

.teampunkt { color: var(--orange) !important; }

/* ======================================================================
   SCHMALE SCHIRME
   ======================================================================

   Keine eigene Handy-Seite, sondern dieselbe. Eine zweite Fassung waere
   eine zweite Fassung, die veraltet - und zwar immer die, auf die
   gerade niemand schaut.
   ====================================================================== */

@media (max-width: 860px) {
  .raster.drei, .raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
}

@media (max-width: 640px) {
  .bahn { padding: 0 16px; }
  .raster.drei, .raster.vier { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 27px; }

  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--knopf); border: 1px solid var(--rand-stark); cursor: pointer;
  }
  .menue {
    display: none; flex-direction: column; flex-basis: 100%;
    border-top: 1px solid var(--rand); padding: 10px 0 4px; margin-top: 4px;
  }
  #menue-schalter:checked ~ .menue { display: flex; }
  .menue a { padding: 14px; font-size: 16px; }
  .zaehler { font-size: 12.5px; padding: 6px 10px; }
  .fuss .bahn { gap: 28px; }
}

/* Die neuen Bausteine auf schmalen Schirmen. */
@media (max-width: 860px) {
  h1.gross { font-size: 38px; }
  .beitrag-wer { flex-basis: 128px; padding: 16px 10px; }
  .themazeile .letzter { display: none; }
}

@media (max-width: 640px) {
  h1.gross { font-size: 31px; }
  /*
     Der Verfasser wandert UEBER den Beitrag statt daneben.
     Nebeneinander blieben fuer den Text 150 Pixel - und ein Beitrag,
     von dem drei Woerter je Zeile zu sehen sind, wird nicht gelesen.
  */
  .beitrag { flex-direction: column; }
  .beitrag-wer {
    flex: 0 0 auto; display: flex; align-items: center; gap: 11px;
    text-align: left; padding: 13px 16px;
    border-right: 0; border-bottom: 1px solid var(--rand);
  }
  .beitrag-wer .skin, .beitrag-wer .buchstabe, .beitrag-wer .kopfbild { margin: 0; }
  .beitrag-wer .beitrag-name { margin-right: auto; }
  .beitrag-wer > div:last-child { display: none; }
  .beitrag-text { padding: 16px; }

  .profilkopf { padding: 18px; gap: 16px; }
  .ipfeld { width: 100%; }
  .ipfeld > span { flex: 1 1 auto; font-size: 15px; padding: 13px 14px; }
  .reiter { overflow-x: auto; flex-wrap: nowrap; }
  .reiter a { white-space: nowrap; }
  .kennzahlen { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 12px; }
  .kennzahl-wert { font-size: 19px; }
  .mitglieder { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}