/* ERZEUGT von _bau/stil.py – nicht von Hand ändern.
 * Quellen: design/farben.css und _bau/bausteine.css
 */

/* AkiroTTV SkyPvP – die festgelegten Werte.
 *
 * Dieselben Zahlen stehen in design/farben.json und in design/UEBERGABE.md.
 * Weichen die drei Dateien voneinander ab, ist die Übergabe kaputt.
 *
 * DIE DUNKLE SICHT IST DIE HAUPTSICHT. Sie steht deshalb in :root, und die
 * helle wird davon abgeleitet – nicht umgekehrt. Begründung in UEBERGABE.md.
 */

:root {
  color-scheme: dark light;

  /* Flächen – der Abgrund unter den Inseln, nicht Schwarz.
     BLAU STATT NEUTRALGRAU: Was man auf dieser Karte sieht, wenn man
     über die Kante schaut, ist tiefes Blau. Ein neutraler Grauton
     könnte zu jedem Produkt gehören; dieser gehört hierher. */
  --grund: #0d1526;
  --flaeche: #16203a;
  --flaeche-tief: #101828;
  --kante: #26324f;
  --kante-stark: #3b4a70;

  /* Schrift */
  --schrift: #e4eaf5;
  --schrift-leise: #97a6c2;

  /* Bedeutungen – jede Farbe hat genau eine Aufgabe */
  /* BERNSTEIN STATT LILA.
     Lila kam auf dieser Karte nirgends vor - nicht auf den Inseln,
     nicht in den Crates, nicht bei den Rängen. Es ist die Farbe, die
     jede Vorlage mitbringt, und genau deshalb sah die Seite
     austauschbar aus. Bernstein ist die Farbe des Goldes: der Währung,
     der Crates, der Sonne über den Inseln. */
  --bedienung: #e0a93b;        /* Verweise, Knöpfe, aktive Seite */
  --bedienung-stark: #f2c05c;  /* schwebend und gedrückt */
  --auf-bedienung: #1a1204;    /* Schrift auf der Bedienfarbe */
  --fokus: #5ce1ff;            /* Tastaturfokus, nur dafür */
  --betrag: #ffaa00;           /* ausschließlich Beträge in Spielwährung */
  --erfolg: #3fb950;           /* online, gelungen */
  --warnung: #e3b341;          /* Vorsicht */
  --fehler: #ef6b6b;           /* Gefahr, Bann, fehlende Angabe */

  /* Je Warengruppe eine eigene Farbe.
     WOZU: Sechs Abschnitte in derselben Farbe unterscheidet man erst
     beim Lesen. Jede dieser Farben kommt aus dem, was man kauft -
     Gold ist golden, Schlüssel öffnen Smaragd-Crates, Ausrüstung ist
     aus Eisen. */
  --gruppe-raenge: #e0a93b;
  --gruppe-ausruestung: #7aa5d2;
  --gruppe-gold: #f2c05c;
  --gruppe-schluessel: #4fb477;
  --gruppe-guthaben: #a887d9;
  --gruppe-aussehen: #46b8c4;

  /* Der Eintrag der Serverliste bleibt in beiden Sichten dunkel. */
  --spielfeld-grund: #12161f;
  --spielfeld-kante: #38435a;

  /* Schrift */
  --anzeige: "Archivo", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fest: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Größen – 13 15 16 18 21 25 30 36 48 px */
  --gr-1: 0.8125rem;
  --gr-2: 0.9375rem;
  --gr-3: 1rem;
  --gr-4: 1.125rem;
  --gr-5: 1.3125rem;
  --gr-6: 1.5625rem;
  --gr-7: 1.875rem;
  --gr-8: 2.25rem;
  --gr-9: 3rem;

  /* Abstände – Vielfache von 4 px */
  --ab-1: 0.25rem;
  --ab-2: 0.5rem;
  --ab-3: 0.75rem;
  --ab-4: 1rem;
  --ab-5: 1.5rem;
  --ab-6: 2rem;
  --ab-7: 3rem;
  --ab-8: 4rem;
  --ab-9: 6rem;

  /* Radien und Schatten – je drei Stufen, mehr nicht */
  --rad-klein: 4px;
  --rad-mittel: 8px;
  --rad-pille: 999px;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --schatten-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --schatten-3: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* Bewegung */
  --zeit-zustand: 150ms;
  --zeit-einblenden: 220ms;
  --zeit-auftritt: 420ms;
  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Die helle Sicht. Sie gilt, wenn das Gerät sie verlangt – oder wenn
   data-theme="hell" gesetzt ist. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dunkel"]) {
    --grund: #eef3fa;
    --flaeche: #ffffff;
    --flaeche-tief: #eceff5;
    --kante: #d5dbe6;
    --kante-stark: #b9c2d2;
    --schrift: #101c2e;
    --schrift-leise: #55617a;
    --bedienung: #a8721a;
    --bedienung-stark: #86590f;
    --auf-bedienung: #ffffff;
    --fokus: #0a6c85;
    --betrag: #8a5a00;
    --erfolg: #1a7f37;
    --warnung: #8a6d00;
    --fehler: #b3261e;
    --schatten-1: 0 1px 2px rgba(20, 25, 36, 0.10);
    --schatten-2: 0 4px 16px rgba(20, 25, 36, 0.12);
    --schatten-3: 0 12px 40px rgba(20, 25, 36, 0.16);
  }
}

:root[data-theme="hell"] {
  --grund: #eef3fa;
  --flaeche: #ffffff;
  --flaeche-tief: #eceff5;
  --kante: #d5dbe6;
  --kante-stark: #b9c2d2;
  --schrift: #101c2e;
  --schrift-leise: #55617a;
  --bedienung: #a8721a;
  --bedienung-stark: #86590f;
  --auf-bedienung: #ffffff;
  --fokus: #0a6c85;
  --betrag: #8a5a00;
  --erfolg: #1a7f37;
  --warnung: #8a6d00;
  --fehler: #b3261e;
  --schatten-1: 0 1px 2px rgba(20, 25, 36, 0.10);
  --schatten-2: 0 4px 16px rgba(20, 25, 36, 0.12);
  --schatten-3: 0 12px 40px rgba(20, 25, 36, 0.16);
}

/* Wer keine Bewegung will, bekommt keine. Das ist keine Höflichkeit,
   sondern eine Anforderung aus WCAG 2.2 (2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Bausteine. Die Werte stehen NICHT hier, sondern in design/farben.css –
   diese Datei benutzt sie nur. `python3 _bau/stil.py` setzt beide zu
   grund.css zusammen, damit es keine vierte Kopie der Farben gibt.
   ═══════════════════════════════════════════════════════════════════════ */

/* VERBORGEN HEISST VERBORGEN.
   Ein Browser gibt [hidden] von sich aus display:none - aber jede
   Klassenregel wiegt schwerer als ein Attributselektor. Steht irgendwo
   .kontomenue { display: flex }, gewinnt die, und das Element bleibt
   sichtbar, obwohl das Skript korrekt hidden gesetzt hat.

   Genau so stand am 08.09.2026 das Konto-Menue dauerhaft offen und die
   Shop-Sperre auch fuer Angemeldete da. Beim ersten Mal wurde am
   Skript gesucht - das Symptom verschwand kurz, die Ursache blieb und
   kam an der naechsten Stelle wieder.

   !important ist hier richtig und nicht faul: Die Alternative waere,
   jeder einzelnen Klasse eine eigene [hidden]-Ausnahme mitzugeben -
   und die naechste zu vergessen. */
[hidden] { display: none !important; }


@font-face {
  font-family: "Archivo";
  src: url("/schrift/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/schrift/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: var(--gr-3)/1.7 var(--text);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--anzeige);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 0.55em;
}
h1 { font-size: clamp(var(--gr-8), 5.5vw, var(--gr-9)); }
h2 { font-size: clamp(var(--gr-6), 3vw, var(--gr-7)); margin-top: var(--ab-7); }
h3 { font-size: var(--gr-4); font-weight: 600; margin-top: var(--ab-5); }
section > h2:first-child, section > h1:first-child { margin-top: 0; }

p, li { max-width: 42rem; }
/* DIE HÜLLE - das Grundraster der ganzen Seite.
   VIER STATT ZWEI SPALTEN AUF BREITEN SCHIRMEN: 64rem waren gut fuer
   einen Laptop; auf einem 27-Zoll-Schirm stand die Seite als schmaler
   Streifen in der Mitte, und rechts und links war nichts.

   ABER NICHT RANDLOS: Ein Absatz, der ueber 1800 Bildpunkte laeuft,
   ist unlesbar - das Auge findet den Zeilenanfang nicht wieder.
   Deshalb wird die FLAECHE breit und der TEXT bleibt schmal (siehe
   p, li weiter oben). Breites Layout, schmale Lesespalte: Das ist der
   Unterschied zwischen "nutzt den Schirm" und "ist auseinandergezogen".

   Der Rand waechst mit: auf dem Handy knapp, auf dem grossen Schirm
   grosszuegig. clamp() macht das ohne Haltepunkte. */
.hülle {
  max-width: 96rem;
  margin: 0 auto;
  padding: 0 clamp(var(--ab-4), 4vw, var(--ab-8));
}

a { color: var(--bedienung); text-underline-offset: 0.18em; }
a:hover { color: var(--bedienung-stark); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }

code, .fest { font-family: var(--fest); }

.nur-vorlesen:where(:not(:focus-within, :active)) {
  position: absolute !important; clip-path: inset(50%) !important;
  overflow: hidden !important; width: 1px !important; height: 1px !important;
  white-space: nowrap !important;
}
.sprungmarke {
  position: fixed; top: var(--ab-2); left: var(--ab-2); z-index: 100;
  background: var(--bedienung); color: var(--auf-bedienung);
  padding: var(--ab-3) var(--ab-4); border-radius: var(--rad-klein);
  font-weight: 700; text-decoration: none;
}

/* ───────────────────────────────────────────────────────────────── Kopf */
/* DER KOPF.
   Vorher: eine graue Leiste mit einer Linie darunter - dieselbe, die
   jede Vorlage mitbringt. Jetzt traegt er oben einen schmalen
   Farbstreifen in den Gruppenfarben des Shops; er kostet zwei
   Bildpunkte und ist das Erste, was man sieht.

   Der Streifen ist keine Zierde: Er nimmt die Farben auf, nach denen
   die Seite weiter unten sortiert ist. */
.kopf {
  border-bottom: 1px solid var(--kante);
  background: color-mix(in srgb, var(--grund) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  position: sticky; top: 0; z-index: 10;
}
.kopf::before {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg,
      var(--gruppe-raenge) 0%, var(--gruppe-gold) 22%,
      var(--gruppe-schluessel) 44%, var(--gruppe-ausruestung) 66%,
      var(--gruppe-guthaben) 84%, var(--gruppe-aussehen) 100%);
}
.kopf__innen {
  display: flex; align-items: center; gap: var(--ab-5); flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--ab-3) clamp(var(--ab-4), 4vw, var(--ab-8));
  max-width: 96rem; margin: 0 auto;
}
.marke {
  display: inline-flex; align-items: center; gap: var(--ab-3);
  font-family: var(--anzeige); font-weight: 700; font-size: var(--gr-3);
  color: var(--schrift); text-decoration: none;
}
.marke img {
  width: 30px; height: 30px; image-rendering: pixelated;
  border-radius: var(--rad-klein);
  transition: width var(--zeit-zustand) var(--kurve),
              height var(--zeit-zustand) var(--kurve);
}

/* Beim Scrollen wird der Kopf schmaler. Auf einer langen Seite ist ein
   hoher Kopf verschenkter Platz - aber ganz verschwinden darf er nicht,
   sonst ist der Weg zurueck weg. */
.kopf--klein .kopf__innen { padding-top: var(--ab-2); padding-bottom: var(--ab-2); }
.kopf--klein .marke { font-size: var(--gr-2); }
.kopf--klein .marke img { width: 22px; height: 22px; }

.kopf__rechts {
  display: flex; align-items: center; gap: var(--ab-3);
  margin-left: auto;
}

/* Der Live-Status steht auf jeder Seite. Wer im Shop liest, will wissen,
   ob gerade jemand spielt. */
.kopf__status {
  display: inline-flex; align-items: center; gap: var(--ab-2);
  font-size: var(--gr-1); color: var(--schrift-leise);
  font-family: var(--fest);
}
/* ── Angemeldet oder nicht ─────────────────────────────────────
   Oben rechts, auf jeder Seite. Ohne diese Anzeige ist der Zustand
   unsichtbar: Man verknüpft sein Konto, die Seite sieht danach aus wie
   vorher, und man weiß nicht, ob es geklappt hat. Genau diese
   Unsicherheit führt dazu, dass jemand es dreimal macht und aufgibt. */
.kopf__konto {
  display: inline-flex; align-items: center; gap: var(--ab-1);
  font-size: var(--gr-1); font-weight: 600;
  color: var(--schrift-leise); text-decoration: none;
  padding: var(--ab-1) var(--ab-2);
  border: 1px solid var(--kante); border-radius: var(--rad-klein);
  white-space: nowrap;
}
.kopf__konto:hover { color: var(--schrift); border-color: var(--schrift-leise); }
.kopf__konto--an { color: var(--gut, #7bd88f); border-color: currentColor; }
.kopf__konto__name { font-family: var(--fest); }

/* Das Kontomenü. Sitzt unter der Anzeige, nicht daneben - im Kopf ist
   rechts kein Platz, und auf dem Handy schon gar nicht. */
.kopf__kontobox { position: relative; }
.kontomenue {
  position: absolute; right: 0; top: calc(100% + var(--ab-1)); z-index: 50;
  min-width: 13rem; padding: var(--ab-2);
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rad-mittel);
  box-shadow: 0 10px 30px rgb(0 0 0 / .35);
  display: flex; flex-direction: column; gap: var(--ab-1);
}
.kontomenue__wer {
  margin: 0; padding: var(--ab-1) var(--ab-2);
  font-size: var(--gr-1); color: var(--schrift-leise);
}
.kontomenue__punkt {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: var(--gr-1);
  padding: var(--ab-2); border: 0; border-radius: var(--rad-klein);
  background: transparent; color: var(--schrift);
  text-decoration: none; cursor: pointer;
}
.kontomenue__punkt:hover { background: var(--kante); }
.kontomenue__punkt--weg { color: var(--warnung, #e0655f); }
.kontomenue form { margin: 0; }

.kopf__punkt {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--schrift-leise); flex: none;
}
.kopf__status--an .kopf__punkt { background: #4ade80; }
.kopf__status--aus .kopf__punkt { background: #f87171; }

.kopf__beitreten {
  font: inherit; font-size: var(--gr-1); font-weight: 600;
  color: var(--grund); background: var(--betrag);
  border: 0; border-radius: var(--rad-klein);
  padding: .4rem .8rem; cursor: pointer;
  transition: filter var(--zeit-zustand) var(--kurve);
}
.kopf__beitreten:hover { filter: brightness(1.1); }
.kopf__beitreten:focus-visible { outline: 2px solid var(--schrift); outline-offset: 2px; }

/* Auf schmalen Geraeten hat der Status keinen Platz - der Knopf bleibt,
   er ist der Grund, warum jemand die Seite besucht. */
@media (max-width: 34rem) {
  .kopf__status { display: none; }
}
.navigation { display: flex; gap: var(--ab-4); flex-wrap: wrap; }
.navigation a {
  position: relative;
  color: var(--schrift-leise); text-decoration: none;
  padding: var(--ab-1) 0;
  transition: color var(--zeit-zustand) var(--kurve);
}
.navigation a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--bedienung);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--zeit-zustand) var(--kurve);
}
.navigation a:hover { color: var(--schrift); }
.navigation a:hover::after { transform: scaleX(1); }
.navigation a[aria-current="page"] { color: var(--schrift); }
.navigation a[aria-current="page"]::after { transform: scaleX(1); }

/* ──────────────────────────────────── Der Eintrag der Serverliste
 *
 * Bleibt in BEIDEN Sichten dunkel: Er zeigt den Server so, wie Minecraft ihn
 * zeigt – ein Bildausschnitt, kein Bedienelement. Ein heller
 * Serverlisten-Eintrag wäre so falsch wie ein aufgehelltes Foto. Deshalb
 * stehen hier feste Werte und keine Sicht-Marken.
 */
.eintrag {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--ab-4);
  align-items: start;
  background: linear-gradient(180deg, #191f2c 0%, var(--spielfeld-grund) 100%);
  border: 1px solid var(--spielfeld-kante);
  border-radius: var(--rad-klein);
  padding: var(--ab-3) var(--ab-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #dbe2ee;
}
.eintrag__symbol {
  width: 64px; height: 64px; image-rendering: pixelated;
  border-radius: 2px; background: #0b0d13;
}
.eintrag__name {
  font-family: var(--anzeige); font-weight: 600; font-size: var(--gr-3);
  margin: 0 0 var(--ab-1); color: #dbe2ee;
}
.eintrag__motd {
  /* Der Rückfall ist kein Schmuck: Das MOTD enthält ☠ und ☢, die in fast
     jeder Monospace-Schrift fehlen. Ohne diese Kette stünden dort Kästchen. */
  font-family: var(--fest), "Noto Sans Symbols 2", "DejaVu Sans", sans-serif;
  font-size: var(--gr-1); line-height: 1.45;
  margin: 0; word-break: break-word; max-width: none;
}
.eintrag__rechts {
  text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: var(--ab-1); white-space: nowrap;
  font-family: var(--fest); font-size: var(--gr-2); color: #93a0b5;
}
.eintrag__rechts strong { color: #dbe2ee; }

.balken { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.balken i {
  display: block; width: 3px; border-radius: 1px; background: #38435a;
  transition: background-color var(--zeit-einblenden) var(--kurve);
}
.balken i:nth-child(1) { height: 4px; }
.balken i:nth-child(2) { height: 7px; }
.balken i:nth-child(3) { height: 10px; }
.balken i:nth-child(4) { height: 12px; }
.balken i:nth-child(5) { height: 14px; }
.eintrag--an .balken i { background: #3fb950; }
.eintrag--aus .balken i { background: #ef6b6b; }

/* ─────────────────────────────────────────────── Beitrittsadresse */
.beitritt {
  display: inline-flex; align-items: stretch; margin-top: var(--ab-5);
  border: 1px solid var(--kante-stark); border-radius: var(--rad-klein);
  background: var(--flaeche-tief); max-width: 100%;
}
.beitritt code {
  padding: var(--ab-3) var(--ab-5); font-size: var(--gr-4); font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap; overflow-x: auto;
}
.beitritt button {
  border: 0; border-left: 1px solid var(--kante-stark);
  background: var(--bedienung); color: var(--auf-bedienung);
  font: inherit; font-weight: 700; font-size: var(--gr-2);
  padding: 0 var(--ab-5); cursor: pointer; white-space: nowrap;
  transition: background-color var(--zeit-zustand) var(--kurve),
              transform var(--zeit-zustand) var(--kurve);
}
.beitritt button:hover { background: var(--bedienung-stark); }
.beitritt button:active { transform: translateY(1px); }
.beitritt__hinweis {
  display: block; margin-top: var(--ab-3);
  color: var(--schrift-leise); font-size: var(--gr-2);
}
#status-namen {
  display: block; margin-top: var(--ab-3);
  color: var(--schrift-leise); font-size: var(--gr-2);
}

@media (max-width: 27rem) {
  /* Die Serveradresse ist der einzige Grund, warum jemand herkommt. Sie darf
     nie abgeschnitten hinter einem Scrollbalken stehen. */
  .beitritt { display: flex; flex-direction: column; width: 100%; }
  .beitritt code { text-align: center; font-size: var(--gr-3); }
  .beitritt button {
    border-left: 0; border-top: 1px solid var(--kante-stark);
    padding: var(--ab-3) var(--ab-4);
  }
  .eintrag { grid-template-columns: 48px 1fr; }
  .eintrag__symbol { width: 48px; height: 48px; }
  .eintrag__rechts {
    grid-column: 1 / -1; align-items: flex-start; text-align: left;
    flex-direction: row; gap: var(--ab-3);
  }
}

/* ──────────────────────────────────────────────────── Abschnitte */
main { padding-bottom: var(--ab-4); }
.kopfbereich { padding: var(--ab-8) 0 var(--ab-6); }
.vorspann {
  color: var(--schrift-leise); font-size: var(--gr-4); max-width: 40rem;
}
section { padding: var(--ab-7) 0; border-top: 1px solid var(--kante); }
section:first-of-type { border-top: 0; }

.tafeln {
  display: grid; gap: var(--ab-4); margin-top: var(--ab-5);
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}
.tafel {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rad-mittel); padding: var(--ab-5);
  transition: transform var(--zeit-zustand) var(--kurve),
              border-color var(--zeit-zustand) var(--kurve);
}
.tafel:hover { transform: translateY(-2px); border-color: var(--kante-stark); }
.tafel h3 { margin: 0 0 var(--ab-2); font-size: var(--gr-4); }
.tafel p { color: var(--schrift-leise); margin: 0; }
.tafel--gefahr { border-left: 3px solid var(--fehler); }
.tafel--gefahr:hover { border-color: var(--kante-stark); border-left-color: var(--fehler); }
.tafel__rolle {
  display: block; margin-bottom: var(--ab-2); color: var(--bedienung);
  font-size: var(--gr-1); font-weight: 600;
}

/* ──────────────────────────────────────────────────── Tabellen */
.tabelle-hülle {
  overflow-x: auto; margin: 0 0 var(--ab-6);
  border: 1px solid var(--kante); border-radius: var(--rad-mittel);
  background: var(--flaeche);
}
table { width: 100%; border-collapse: collapse; min-width: 20rem; }
caption {
  text-align: left; padding: var(--ab-3) var(--ab-4) var(--ab-1);
  color: var(--schrift-leise); font-size: var(--gr-2);
}
th, td {
  text-align: left; padding: var(--ab-2) var(--ab-4);
  border-top: 1px solid var(--kante);
}
thead th { color: var(--schrift-leise); font-weight: 600; font-size: var(--gr-1); }
tbody tr { transition: background-color var(--zeit-zustand) var(--kurve); }
tbody tr:hover { background: var(--flaeche-tief); }
.preis, .zahl {
  text-align: right; font-family: var(--fest);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.preis { color: var(--betrag); }
.platz {
  width: 2.5rem; color: var(--schrift-leise); font-family: var(--fest);
  text-align: right; font-variant-numeric: tabular-nums;
}
.stufen { color: var(--schrift-leise); font-size: var(--gr-1); }

/* ──────────────────────────────────────────────────────── Listen */
ol.regeln { padding-left: var(--ab-5); }
ol.regeln li { margin-bottom: var(--ab-5); color: var(--schrift-leise); }
ol.regeln li strong { display: block; margin-bottom: var(--ab-1); color: var(--schrift); }
ol.schritte { padding-left: var(--ab-5); }
ol.schritte li { margin-bottom: var(--ab-3); }
ol.schritte code, p code, li code, td code {
  background: var(--flaeche-tief); border: 1px solid var(--kante);
  padding: 0.08rem 0.38rem; border-radius: var(--rad-klein); font-size: 0.92em;
}

/* Fragen und Antworten */
.frage {
  border: 1px solid var(--kante); border-radius: var(--rad-mittel);
  background: var(--flaeche); margin-bottom: var(--ab-2);
  transition: border-color var(--zeit-zustand) var(--kurve);
}
.frage:hover { border-color: var(--kante-stark); }
.frage summary {
  cursor: pointer; padding: var(--ab-3) var(--ab-4); font-weight: 600;
  list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::before {
  content: "+"; display: inline-block; width: 1.1rem;
  color: var(--bedienung); font-family: var(--fest);
}
.frage[open] summary::before { content: "–"; }
.frage__inhalt {
  padding: 0 var(--ab-4) var(--ab-4) 2.1rem;
  animation: aufklappen var(--zeit-einblenden) var(--kurve) both;
}
.frage__inhalt p { margin: 0 0 var(--ab-3); color: var(--schrift-leise); }
.frage__inhalt p:last-child { margin-bottom: 0; }

@keyframes aufklappen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────── Hinweise */
.hinweis {
  border-left: 3px solid var(--bedienung); background: var(--flaeche);
  padding: var(--ab-3) var(--ab-4); border-radius: 0 var(--rad-mittel) var(--rad-mittel) 0;
  color: var(--schrift-leise); max-width: 42rem;
}
.hinweis strong { color: var(--schrift); }
.hinweis--luecke { border-left-color: var(--fehler); }

/* ─────────────────────────────────────────────────────────── Fuß */
.fuss {
  border-top: 1px solid var(--kante); background: var(--flaeche);
  padding: var(--ab-6) 0; margin-top: var(--ab-6);
  color: var(--schrift-leise); font-size: var(--gr-2);
}
.fuss a { color: var(--schrift-leise); }
.fuss a:hover { color: var(--schrift); }
.fuss__reihe {
  display: flex; gap: var(--ab-5); flex-wrap: wrap;
  justify-content: space-between; align-items: center;
}
.fuss nav { display: flex; gap: var(--ab-4); flex-wrap: wrap; }

/* ────────────────────────────────────── Der eine Auftritt beim Laden
 *
 * EIN orchestrierter Moment, nicht überall Einblendungen. Ein
 * Fade-and-slide-up an jedem Abschnitt ist der Standardgriff und sieht nach
 * Baukasten aus. Deshalb nur der Kopfbereich, gestaffelt, und danach nie
 * wieder.
 *
 * `both` sorgt dafür, dass der Endzustand steht – wer Bewegung abgeschaltet
 * hat, sieht die Seite sofort fertig statt gar nicht.
 */
@keyframes auftritt {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.kopfbereich > * {
  animation: auftritt var(--zeit-auftritt) var(--kurve) both;
}
.kopfbereich > *:nth-child(1) { animation-delay: 0ms; }
.kopfbereich > *:nth-child(2) { animation-delay: 60ms; }
.kopfbereich > *:nth-child(3) { animation-delay: 120ms; }
.kopfbereich > *:nth-child(4) { animation-delay: 180ms; }
.kopfbereich > *:nth-child(5) { animation-delay: 240ms; }
.kopfbereich > *:nth-child(6) { animation-delay: 300ms; }

/* ═══════════════════════════════════════════════════════════════════════
   Zweite Ausbaustufe: Zusammenstellungen statt gestapelter Blöcke
   ═══════════════════════════════════════════════════════════════════════ */

/* Der Kopfbereich der Startseite steht auf breiten Schirmen ZWEISPALTIG:
   links, warum man hier ist, rechts, wie der Server gerade dasteht. Auf
   schmalen Geräten fällt das untereinander – die Adresse zuerst. */
.hero {
  display: grid;
  gap: var(--ab-6);
  align-items: center;
  padding: var(--ab-8) 0 var(--ab-7);
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: 1.05fr 0.95fr; gap: var(--ab-7); }
}
.hero__text > h1 { margin-bottom: var(--ab-3); }
.hero__text .vorspann { margin: 0 0 var(--ab-5); }
.hero__bilanz {
  margin: var(--ab-5) 0 0;
  color: var(--schrift-leise);
  font-size: var(--gr-2);
  max-width: 34rem;
}
.hero__bilanz b { color: var(--schrift); font-weight: 600; }

/* Die Ping-Balken färben sich gestaffelt ein, wenn der Status eintrifft –
   von links nach rechts, so wie Minecraft es beim Anpingen tut.
 *
 * SIE WERDEN NICHT EINGEBLENDET, sondern nur umgefärbt. Ein erster Versuch
 * ließ sie aus scaleY(0.2) und opacity 0.3 hochwachsen. Bleibt die
 * Animation aus irgendeinem Grund stehen – eine Verzögerung, die noch
 * läuft, ein Neustart durch den nächsten Statusabruf –, hängen sie in
 * diesem Startzustand fest und sind fünf dunkle Punkte. Ein sichtbares
 * Element darf nie in einem unsichtbaren Zustand geparkt werden. */
.eintrag--an .balken i { transition-delay: 0ms; }
.eintrag--an .balken i:nth-child(2) { transition-delay: 60ms; }
.eintrag--an .balken i:nth-child(3) { transition-delay: 120ms; }
.eintrag--an .balken i:nth-child(4) { transition-delay: 180ms; }
.eintrag--an .balken i:nth-child(5) { transition-delay: 240ms; }

/* ───────────────────────────────────────────── Kit als Marken statt Tabelle
   Zwölf Zeilen Tabelle für „1× Bogen" sind zwölf Zeilen zu viel. */
.kit {
  display: flex; flex-wrap: wrap; gap: var(--ab-2);
  margin: var(--ab-5) 0 var(--ab-4); padding: 0; list-style: none;
}
.kit li {
  display: inline-flex; align-items: baseline; gap: var(--ab-2);
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rad-pille);
  padding: var(--ab-1) var(--ab-4);
  font-size: var(--gr-2); max-width: none;
}
.kit .anzahl {
  font-family: var(--fest); font-variant-numeric: tabular-nums;
  color: var(--schrift-leise);
}

/* ─────────────────────────────────────────────────────── Händlerkarten */
.haendler {
  display: grid; gap: var(--ab-4); margin-top: var(--ab-5);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.haendler article {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-left: 3px solid var(--bedienung);
  border-radius: 0 var(--rad-mittel) var(--rad-mittel) 0;
  padding: var(--ab-4) var(--ab-5);
  transition: transform var(--zeit-zustand) var(--kurve),
              border-color var(--zeit-zustand) var(--kurve);
}
.haendler article:hover { transform: translateX(2px); }
.haendler h3 { margin: 0 0 var(--ab-1); font-size: var(--gr-4); }
.haendler p { margin: 0; color: var(--schrift-leise); font-size: var(--gr-2); }

/* ──────────────────────────────────────────────────────────── Podest
   Die ersten drei der Bestenliste. Die Reihenfolge ist echt – deshalb
   dürfen hier Ziffern stehen. */
.podest {
  display: grid; gap: var(--ab-4); margin: var(--ab-5) 0 var(--ab-6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.podest article {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rad-mittel); padding: var(--ab-5);
  display: flex; flex-direction: column; gap: var(--ab-1);
}
.podest article:first-child { border-color: var(--betrag); }
.podest .rang {
  font-family: var(--fest); font-size: var(--gr-1);
  color: var(--schrift-leise); font-variant-numeric: tabular-nums;
}
.podest article:first-child .rang { color: var(--betrag); }
.podest .name {
  font-family: var(--anzeige); font-weight: 700; font-size: var(--gr-5);
  word-break: break-word;
}
.podest .wert { color: var(--schrift-leise); font-size: var(--gr-2); }
.podest .wert b {
  color: var(--schrift); font-family: var(--fest); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────── Tabellen nebeneinander im Shop
   Acht Tabellen untereinander sind eine Rolle Papier. */
/* Mehrspaltiger Fluss statt Raster: Acht Preistabellen sind unterschiedlich
   hoch. Im Raster richtet sich jede Zeile nach der höchsten – daneben stünde
   Leerraum. Der Fluss füllt die Bahnen, wie ein Satzspiegel es täte. */
.paare { columns: 21rem 2; column-gap: var(--ab-6); }
.paare .gruppe { break-inside: avoid; }
.paare .gruppe > h2 { margin-top: 0; margin-bottom: var(--ab-3); }
.paare .gruppe { margin-bottom: var(--ab-6); }

/* ──────────────────────────────────────────────────────── Fuß in Bahnen */
.fuss__bahnen {
  display: grid; gap: var(--ab-5);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: var(--ab-5);
}
.fuss__bahnen h3 {
  margin: 0 0 var(--ab-2); font-size: var(--gr-1); font-weight: 600;
  color: var(--schrift); font-family: var(--text);
}
.fuss__bahnen ul { list-style: none; margin: 0; padding: 0; }
.fuss__bahnen li { margin-bottom: var(--ab-1); }
.fuss__bahnen a { text-decoration: none; }
.fuss__bahnen a:hover { text-decoration: underline; }
.fuss__schluss {
  border-top: 1px solid var(--kante); padding-top: var(--ab-4);
  display: flex; gap: var(--ab-5); flex-wrap: wrap;
  justify-content: space-between; align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   Dritte Ausbaustufe: der Kopfbereich als Bühne
   ═══════════════════════════════════════════════════════════════════════ */

.buehne {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--kante);

  /* DIE BÜHNE BLEIBT IN BEIDEN SICHTEN DUNKEL. Sie zeigt den Nachthimmel
     über den Inseln; in der hellen Sicht liefe das Bild sonst unten in ein
     Weiß aus, als hätte jemand vergessen, es fertig zu zeichnen. Dieselbe
     Begründung wie beim Serverlisten-Eintrag: Das ist ein Bild, kein
     Bedienelement. Die Marken werden hier örtlich überschrieben, damit der
     Text darauf lesbar bleibt. */
  --grund: #0a0c12;
  --flaeche: #141924;
  --flaeche-tief: #0e1219;
  --kante: #262e3f;
  --kante-stark: #38435a;
  --schrift: #dbe2ee;
  --schrift-leise: #93a0b5;
  --bedienung: #b06cff;
  --bedienung-stark: #c890ff;
  --auf-bedienung: #150a26;
  background: var(--grund);
  color: var(--schrift);
}
/* Die Kulisse liegt als Bild dahinter, nicht als Verlauf. Sie ist mit
   _bau/kulisse.py gezeichnet – Inseln über dem Nichts, dieselben Farben. */
.buehne::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("/bilder/kulisse.png");
  background-size: cover;
  background-position: center 30%;
  opacity: 0.9;
}
/* Darüber ein Verlauf, der nach unten in den Grund läuft – sonst steht der
   Text auf Sternen und die Kante zur nächsten Sektion springt. */
.buehne::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--grund) 35%, transparent) 0%,
              color-mix(in srgb, var(--grund) 55%, transparent) 45%,
              var(--grund) 100%);
}
.buehne > * { position: relative; z-index: 1; }

.buehne__innen {
  max-width: 96rem; margin: 0 auto;
  padding: var(--ab-8) clamp(var(--ab-4), 4vw, var(--ab-8)) var(--ab-7);
  display: grid; gap: var(--ab-6); align-items: end;
}
@media (min-width: 56rem) {
  .buehne__innen {
    grid-template-columns: 1.15fr 0.85fr;
    padding-top: var(--ab-9); padding-bottom: var(--ab-5);
  }
}

.buehne h1 {
  font-size: clamp(2.4rem, 6.5vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 var(--ab-4);
}
.buehne .vorspann { font-size: var(--gr-5); margin: 0 0 var(--ab-5); }

/* Die Figuren sind die echten Skins des Teams, beim Bauen von Mojang
   geholt und hier ausgeliefert – siehe _bau/koepfe.py. Sie stehen auf der
   Grundlinie, deshalb align-items: end. */
.figuren {
  display: flex; align-items: flex-end; justify-content: center;
  gap: var(--ab-2); margin: 0;
}
.figuren figure { margin: 0; text-align: center; }
.figuren img {
  display: block; image-rendering: pixelated;
  height: clamp(11rem, 26vw, 19rem); width: auto;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.6));
}
.figuren figure:nth-child(2) img { height: clamp(9rem, 21vw, 15.5rem); }
.figuren figcaption {
  margin-top: var(--ab-2); font-size: var(--gr-1);
  color: var(--schrift-leise); font-family: var(--fest);
}
@media (max-width: 56rem) {
  .figuren { display: none; }   /* am Handy zählt die Adresse, nicht die Deko */
}

/* Die Statusleiste sitzt unter der Bühne und trägt den Serverlisten-Eintrag. */
.statusleiste { padding: var(--ab-5) 0 0; }

/* Symbole in den Tafeln – schlichte Zeichen, keine Bildchen. */
.tafel__symbol {
  display: block; width: 2rem; height: 2rem; margin-bottom: var(--ab-3);
  color: var(--bedienung);
}
.tafel--gefahr .tafel__symbol { color: var(--fehler); }

/* Die Gesichter in der Bestenliste und auf dem Podest.
 *
 * HEISST NICHT .kopf. Die Kopfleiste der Seite trägt diese Klasse bereits,
 * und `width: 2rem` traf beides – die Navigation stand danach senkrecht
 * untereinander. Ein Klassenname, den es schon gibt, ist kein Detail.
 */
.spielerkopf {
  width: 2rem; height: 2rem; image-rendering: pixelated;
  border-radius: 3px; vertical-align: middle; margin-right: var(--ab-2);
  background: var(--flaeche-tief);
}
.podest .spielerkopf { width: 3.25rem; height: 3.25rem; margin: 0 0 var(--ab-2); }
td .spielerkopf { width: 1.75rem; height: 1.75rem; }

/* ═══════════════════════════════════════════════════════════════════════
   Ware – was gegen echtes Geld zu haben ist
   ═══════════════════════════════════════════════════════════════════════
   Bewusst nüchtern: kein „nur noch heute", keine durchgestrichenen
   Fantasiepreise, kein vorausgewähltes Abo. Wer hier etwas kauft, soll
   danach nicht das Gefühl haben, überredet worden zu sein.
*/
/* DIE WARENGRUPPEN.
   Siebzehn Artikel untereinander waren eine Liste, kein Laden: Wer Gold
   suchte, scrollte an vier Abos vorbei. Jetzt ordnet eine Ueberschrift
   mit Zeichen jeden Abschnitt - man erfasst ihn, bevor man ihn liest. */
.warengruppe { margin: var(--ab-6) 0; }
.warengruppe__kopf {
  display: flex; align-items: center; gap: var(--ab-2);
  margin: 0 0 var(--ab-1); font-size: var(--gr-4);
}
.ware__zeichen { flex: none; color: var(--gruppenfarbe, var(--bedienung)); }

/* Jede Gruppe traegt ihre Farbe - im Zeichen, in der Kante der Karten
   und in der Zahl. So sieht man beim Scrollen, wo ein Abschnitt
   anfaengt, ohne die Ueberschrift zu lesen. */
.warengruppe--raenge      { --gruppenfarbe: var(--gruppe-raenge); }
.warengruppe--ausruestung { --gruppenfarbe: var(--gruppe-ausruestung); }
.warengruppe--gold        { --gruppenfarbe: var(--gruppe-gold); }
.warengruppe--schluessel  { --gruppenfarbe: var(--gruppe-schluessel); }
.warengruppe--guthaben    { --gruppenfarbe: var(--gruppe-guthaben); }
.warengruppe--aussehen    { --gruppenfarbe: var(--gruppe-aussehen); }
.warengruppe__zahl {
  font-size: var(--gr-1); font-weight: 700;
  color: var(--gruppenfarbe, var(--schrift-leise));
  background: color-mix(in srgb, var(--gruppenfarbe, var(--kante)) 16%, transparent);
  border-radius: 999px;
  padding: .1em .6em; margin-left: auto;
}
.warengruppe__unter {
  margin: 0 0 var(--ab-3); color: var(--schrift-leise);
  font-size: var(--gr-1); max-width: 46ch;
}

/* Auf breiten Schirmen mehr Spalten - aber keine Karten, die so breit
   werden, dass die Ueberschrift allein in der Zeile steht. */
.waren {
  display: grid; gap: var(--ab-4); margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

/* DIE KARTEN.
   Vorher unterschieden sie sich nur durch ihren Text. Ein farbiger
   Kopfbalken und ein spuerbarer Schatten geben jeder Karte einen
   Koerper - man sieht, dass es einzelne Dinge sind und nicht Absaetze
   einer Seite. */
.ware {
  position: relative; overflow: hidden;
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rad-mittel); padding: var(--ab-5);
  display: flex; flex-direction: column; gap: var(--ab-2);
  transition: border-color var(--zeit-zustand) var(--kurve),
              transform var(--zeit-zustand) var(--kurve),
              box-shadow var(--zeit-zustand) var(--kurve);
}
.ware::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg,
      var(--gruppenfarbe, var(--bedienung)), transparent 85%);
}
.ware:hover {
  border-color: var(--kante-stark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgb(0 0 0 / .22);
}
/* Wer die Bewegung nicht will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .ware, .ware:hover { transition: none; transform: none; }
}
/* Der Preis ist das, wonach gesucht wird - er darf gross sein. */
/* Bild und Name als eine Einheit. */
.ware__kopf {
  display: flex; align-items: center; gap: var(--ab-3);
  margin: 0 0 var(--ab-1); font-size: var(--gr-3);
}
/* Die gezeichneten Produktbilder.
   image-rendering: pixelated ist hier keine Feinheit, sondern der Kern:
   Ohne sie glaettet der Browser das 16x16-Raster zu Matsch, und der
   ganze Grund, Pixel zu zeichnen, ist weg. */
.ware__bild {
  flex: none; color: var(--gruppenfarbe, var(--bedienung));
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / .3));
}
.ware:hover .ware__bild { color: var(--bedienung-hell, var(--bedienung)); }

.ware .ware__preis {
  font-size: var(--gr-4); font-weight: 700; color: var(--schrift);
  margin: auto 0 0;
}
.ware form { margin-top: var(--ab-2); }
.ware button { width: 100%; }
.ware h3 { margin: 0; font-size: var(--gr-4); }
.ware p { margin: 0; color: var(--schrift-leise); font-size: var(--gr-2); }
.ware__preis {
  font-family: var(--fest); font-size: var(--gr-5); font-weight: 600;
  color: var(--betrag) !important; margin-top: auto !important;
  padding-top: var(--ab-2);
}
/* ── Verbundenes Minecraft-Konto ───────────────────────────────── */
.verbindungshinweis {
  margin: var(--ab-3) 0 0 !important;
  padding: var(--ab-3) var(--ab-4);
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rad-mittel);
  font-size: var(--gr-2); color: var(--schrift-leise) !important;
}
/* Steht anstelle des Namensfelds, sobald ein Konto verbunden ist. Ruhig
   gehalten - es ist eine Feststellung, keine Werbung. */
.ware__kaeufer {
  margin: 0 !important; padding: var(--ab-2) 0;
  font-family: var(--fest); font-size: var(--gr-2);
  color: var(--schrift) !important;
}

/* Die Schritte auf der Verbinden-Seite. */
.schritte {
  display: flex; flex-direction: column; gap: var(--ab-2);
  margin: var(--ab-4) 0; padding-left: var(--ab-5);
}
.schritte li { padding-left: var(--ab-1); }
.codeformular {
  display: flex; flex-direction: column; gap: var(--ab-3);
  max-width: 22rem; margin-top: var(--ab-4);
}
.codeformular input {
  font-family: var(--fest); font-size: var(--gr-4);
  letter-spacing: .12em; text-transform: uppercase;
}

/* Zweitnamen eines Befehls - leiser als der Befehl selbst. */
.alias {
  font-size: var(--gr-1); color: var(--schrift-leise);
  font-family: var(--fest); white-space: nowrap;
}

/* ── Die Rangleiter ────────────────────────────────────────────
   Vier Stufen nebeneinander. Auf schmalen Geräten untereinander -
   eine Tabelle mit vier Spalten wird auf dem Handy unlesbar. */
.stufen {
  display: grid; gap: var(--ab-4); margin: var(--ab-5) 0;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.stufe {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rad-mittel); padding: var(--ab-4);
  display: flex; flex-direction: column; gap: var(--ab-2);
}
.stufe h3 { margin: 0; font-size: var(--gr-4); }
.stufe__preis {
  margin: 0 !important; font-family: var(--fest);
  font-size: var(--gr-3); font-weight: 600; color: var(--betrag) !important;
}
.stufe__vorher {
  margin: 0 !important; font-size: var(--gr-1) !important;
  color: var(--schrift-leise) !important; font-style: italic;
}
.stufe__neu {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--ab-1);
  font-size: var(--gr-2);
}
.stufe__neu li { display: flex; gap: var(--ab-2); align-items: baseline; }
.stufe__neu li::before {
  content: "+"; color: var(--betrag); font-family: var(--fest);
  font-weight: 600; flex: none;
}

/* Was im Artikel steckt - erzeugt aus der Serverkonfiguration. */
.ware__inhaltkopf {
  font-size: var(--gr-1) !important; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--schrift-leise) !important; padding-top: var(--ab-2);
}
.ware__inhalt {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--ab-1);
  font-size: var(--gr-2); color: var(--schrift);
}
.ware__inhalt li { display: flex; gap: var(--ab-2); align-items: baseline; }
.ware__inhalt li::before {
  content: "+"; color: var(--betrag); font-family: var(--fest);
  font-weight: 600; flex: none;
}
/* Eine sachliche Markierung. Keine Uhr, keine Stueckzahl, kein Druck. */
.ware__empfehlung {
  align-self: flex-start; font-size: var(--gr-1) !important; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--betrag) !important;
  border: 1px solid var(--kante-stark); border-radius: var(--rad-klein);
  padding: .15rem .5rem;
}
.ware form { display: flex; flex-direction: column; gap: var(--ab-2); }
.ware__feld { display: flex; flex-direction: column; gap: var(--ab-1); }
.ware__feld span { font-size: var(--gr-1); color: var(--schrift-leise); }
.ware__feld input {
  font: inherit; font-family: var(--fest); font-size: var(--gr-2);
  padding: var(--ab-2) var(--ab-3);
  background: var(--flaeche-tief); color: var(--schrift);
  border: 1px solid var(--kante-stark); border-radius: var(--rad-klein);
}
.ware__feld input:invalid:not(:placeholder-shown) {
  border-color: var(--fehler);
}
/* ── Knöpfe ────────────────────────────────────────────────────
   EINE Regel für alle. Vorher gab es sie nur innerhalb von .ware und
   .beitritt – ein Knopf außerhalb (etwa auf /verbinden) sah aus wie ein
   Browser-Standardknopf mitten in einer gestalteten Seite. Genau das ist
   passiert, und es fiel erst in einem Bildschirmfoto auf. */
.knopf, .ware button, .beitritt button {
  font: inherit; font-weight: 700; border: 0;
  border-radius: var(--rad-klein); padding: var(--ab-3) var(--ab-4);
  background: var(--bedienung); color: var(--auf-bedienung); cursor: pointer;
  text-align: center; text-decoration: none;
  transition: background-color var(--zeit-zustand) var(--kurve),
              transform var(--zeit-zustand) var(--kurve);
}
.knopf:hover, .ware button:hover, .beitritt button:hover {
  background: var(--bedienung-stark);
}
.knopf:active, .ware button:active, .beitritt button:active {
  transform: translateY(1px);
}

/* Für Handlungen, die man selten und nie versehentlich tun will -
   „Verbindung trennen" etwa. Sichtbar, aber nicht einladend. */
.knopf--leise {
  background: transparent; color: var(--schrift-leise);
  border: 1px solid var(--kante); font-weight: 600;
}
.knopf--leise:hover { background: var(--flaeche); color: var(--schrift); }


/* ── Stellenanzeige ────────────────────────────────────────────
   Die Stellen als Karten wie die Rangleiter - wer eine sucht,
   vergleicht sie, statt sie zu lesen. */
.stellen {
  display: grid; gap: var(--ab-4); margin: var(--ab-5) 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.stelle {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rad-mittel); padding: var(--ab-4);
  display: flex; flex-direction: column; gap: var(--ab-2);
}
.stelle h3 { margin: 0; font-size: var(--gr-4); }
.stelle p { margin: 0; }
.stelle__fakten {
  margin: auto 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--ab-1);
  font-size: var(--gr-1); color: var(--schrift-leise);
}

.bewerbung {
  display: flex; flex-direction: column; gap: var(--ab-4);
  max-width: 38rem; margin-top: var(--ab-4);
}
.bewerbung textarea, .bewerbung select, .bewerbung input {
  font: inherit; padding: var(--ab-2);
  background: var(--grund); color: var(--schrift);
  border: 1px solid var(--kante); border-radius: var(--rad-klein);
}
.bewerbung textarea { resize: vertical; min-height: 9rem; }

/* ── Das Bewerbungsportal ──────────────────────────────────────
   Eine Karte je Bewerbung. Der Text des Bewerbers behält seine
   Absätze (pre-line), ohne dass aus ihm HTML entsteht. */
.bewerbungskarte {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rad-mittel); padding: var(--ab-4);
  margin-bottom: var(--ab-4);
}
.bewerbungskarte h2 { margin-top: 0; }
.bewerbungskarte__text {
  white-space: pre-line; background: var(--grund);
  border-radius: var(--rad-klein); padding: var(--ab-3);
}
.bewerbungskarte__form {
  display: flex; flex-wrap: wrap; gap: var(--ab-2); align-items: center;
}
.bewerbungskarte__form input {
  flex: 1 1 12rem; font: inherit; padding: var(--ab-2);
  background: var(--grund); color: var(--schrift);
  border: 1px solid var(--kante); border-radius: var(--rad-klein);
}


/* ── Der gesperrte Shop ────────────────────────────────────────
   Sichtbar gesperrt, nicht nur wirkungslos: Ein Knopf, der nichts
   tut, sieht aus wie ein Fehler der Seite. */
.shopsperre {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-left: 3px solid var(--bedienung);
  border-radius: var(--rad-mittel); padding: var(--ab-4);
  margin: var(--ab-4) 0;
  display: flex; flex-direction: column; gap: var(--ab-3);
  align-items: flex-start;
}
.shopsperre p { margin: 0; }

/* Für wen gerade gekauft wird. Steht an JEDER Karte, nicht nur oben:
   Wer scrollt, sieht den Hinweis oben nicht mehr, wenn er klickt. */
.ware__fuer {
  margin: 0 0 var(--ab-2); font-size: var(--gr-1);
  color: var(--schrift-leise); font-family: var(--fest);
}
.ware button[disabled] { opacity: .45; cursor: not-allowed; }


/* Der Abo-Rabatt am Artikel. Leiser als der Preis - er ist ein
   Hinweis, keine zweite Preisangabe. */
.ware__rabatt {
  margin: calc(var(--ab-1) * -1) 0 var(--ab-2);
  font-size: var(--gr-1); color: var(--schrift-leise);
}
.ware__rabatt span {
  color: var(--betrag); font-weight: 700; font-family: var(--fest);
}


/* ── Wissensseiten ─────────────────────────────────────────────
   Die Übersicht als Karten, die Seiten selbst als Fließtext.
   Fließtext braucht eine Zeilenlänge, bei der das Auge die nächste
   Zeile findet - über 75 Zeichen verliert man sie. */
.wissensliste {
  display: grid; gap: var(--ab-4); margin: var(--ab-5) 0;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.wissenskarte {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: var(--rad-mittel); padding: var(--ab-4);
}
.wissenskarte h2 { margin: 0 0 var(--ab-2); font-size: var(--gr-3); }
.wissenskarte h2 a { color: var(--schrift); text-decoration: none; }
.wissenskarte h2 a:hover { color: var(--bedienung); }
.wissenskarte p { margin: 0; color: var(--schrift-leise); font-size: var(--gr-1); }

/* Der Aufruf zum Beitreten. Unten statt oben: Wer die Seite
   aufgeschlagen hat, wollte etwas wissen - ein Knopf vor der Antwort
   verscheucht ihn, einer danach trifft jemanden, der überzeugt ist. */
.cta {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-left: 3px solid var(--bedienung);
  border-radius: var(--rad-mittel); padding: var(--ab-5);
  margin: var(--ab-5) 0;
}
.cta h2 { margin-top: 0; }
.cta__adresse {
  font-size: var(--gr-4); font-family: var(--fest);
  margin: var(--ab-3) 0;
}
.cta__adresse code { color: var(--betrag); }


/* Die Rückmeldung beim Kaufen. Zwischen Klick und Stripe-Seite liegen
   ein bis drei Sekunden; ohne Rückmeldung hält man den Knopf für
   kaputt und klickt noch einmal. */
.ware__laedt {
  margin: var(--ab-2) 0 0; font-size: var(--gr-1);
  color: var(--schrift-leise);
}


/* ═══════════════════════════════════════════════════════════════════════
   Die Einstellungsseite (/admin)
   ═══════════════════════════════════════════════════════════════════════

   SIE SAH ZUERST AUS WIE EIN ROHER HTML-ENTWURF: Text am linken Rand,
   fingernagelgrosse Eingabefelder, keine Trennung zwischen den Feldern.
   Die Vorlage war da, die Klassen nicht - ein Formular ohne CSS ist
   kein Formular, sondern eine Zumutung.

   HIER WERDEN ZAHLUNGSSCHLUESSEL EINGETRAGEN. Ein Feld, bei dem man
   raet, was hineingehoert, ist an dieser Stelle gefaehrlich. Deshalb
   traegt jedes seinen Titel, seine Erklaerung und den Hinweis, ob schon
   etwas hinterlegt ist. */

/* Zwei Spalten, sobald Platz ist. Sieben Einstellungen untereinander
   sind auf einem breiten Schirm eine sehr lange Rolle. */
.einstellungen {
  display: grid; gap: var(--ab-4); margin: var(--ab-5) 0;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  align-items: start;
}
.einstellung__hilfe, .einstellung__schritt { max-width: 100%; }

.einstellung {
  background: var(--flaeche); border: 1px solid var(--kante);
  border-left: 3px solid var(--bedienung);
  border-radius: var(--rad-mittel); padding: var(--ab-4);
  display: grid; gap: var(--ab-2);
}

.einstellung__titel {
  font-family: var(--anzeige); font-weight: 700; font-size: var(--gr-2);
  color: var(--schrift);
}

.einstellung__hilfe {
  margin: 0; font-size: var(--gr-1); color: var(--schrift-leise);
  max-width: 60ch;
}

/* Ob etwas hinterlegt ist - die wichtigste Zeile bei einem Geheimnis.
   Der Wert selbst steht nie hier; nur seine ersten und letzten Zeichen,
   damit man ihn wiedererkennt, ohne ihn benutzen zu koennen. */
/* Der Schritt, den man bei Stripe tun muss - und die Adresse dafuer.
   Die erste Frage nach dem Bau dieser Seite war "Wie ist die
   Webhook-URL?". Wer sie hier braucht, soll sie hier finden. */
.einstellung__schritt {
  margin: 0; font-size: var(--gr-1); color: var(--schrift);
  background: var(--flaeche-tief); border-radius: var(--rad-klein);
  padding: var(--ab-3);
}
.einstellung__adresse {
  display: inline-block; margin-top: var(--ab-2);
  font-family: var(--fest); color: var(--bedienung);
  user-select: all;   /* ein Klick markiert die ganze Adresse */
}

.einstellung__stand {
  margin: 0; font-size: var(--gr-1);
  color: var(--schrift-leise);
}
.einstellung__stand code {
  background: var(--flaeche-tief); padding: .15em .5em;
  border-radius: var(--rad-klein); font-family: var(--fest);
  color: var(--betrag);
}
.einstellung__stand strong { color: var(--warnung); }

.einstellung input {
  width: 100%; box-sizing: border-box;
  padding: var(--ab-3); font: inherit; font-family: var(--fest);
  background: var(--flaeche-tief); color: var(--schrift);
  border: 1px solid var(--kante-stark); border-radius: var(--rad-klein);
}
.einstellung input:focus-visible {
  outline: 2px solid var(--fokus); outline-offset: 2px;
  border-color: var(--fokus);
}
.einstellung input::placeholder { color: var(--schrift-leise); opacity: .7; }

.gespeichert {
  background: color-mix(in srgb, var(--erfolg) 14%, transparent);
  border-left: 3px solid var(--erfolg);
  border-radius: var(--rad-klein);
  padding: var(--ab-3) var(--ab-4); margin: var(--ab-4) 0;
  color: var(--schrift);
}