/* SecondWind RO — hell und freundlich ("Midgard am Vormittag").
   Eigenstaendiges Stylesheet.

   Die Palette ist kein freier Entwurf: Pergament, Tinte und der
   Gold-Verlauf standen in diesem Projekt schon in den Wiki-Weiterleitungen
   (classes.html & Co.) und haben sich dort bewaehrt. Der Rest ist aus dem
   Hero-Artwork gezogen - Himmelblau, warmes Holz, heller Stein.

   Kontrast: jede Farbe, die Text traegt, erreicht auf --bg-0 mindestens
   4.5:1 (WCAG AA). Das ist der Grund, warum es --gold-ink neben --gold
   gibt: das helle Gold kommt auf Creme nur auf 2.45:1 und taugt fuer
   Raender und Flaechen, nicht fuer Schrift. */

:root {
  /* Grundflaechen. Warmes Pergament, Karten eine Spur heller als der Grund. */
  --bg-0: #F6F1E4;
  --bg-1: #FFFDF6;
  --bg-2: #EFE7D4;

  /* Karten auf dem Hero-Artwork. Auf hellem Grund traegt Deckkraft besser
     als Transparenz: durchscheinendes Weiss auf einem bunten Bild wird
     milchig, eine deckende Karte mit weichem Schatten bleibt lesbar. */
  --glass: rgba(255, 253, 246, 0.94);
  --glass-strong: #FFFDF6;
  --glass-border: rgba(176, 126, 34, 0.30);
  --line: rgba(176, 126, 34, 0.20);
  --line-soft: rgba(176, 126, 34, 0.11);

  /* Gold. Der Verlauf bleibt unveraendert - er sitzt auf Creme genauso
     gut wie vorher auf Nachtblau. */
  --gold: #C89438;
  --gold-bright: #E7C063;
  --gold-pale: #F3D488;
  --gold-deep: #B07E22;
  --gold-ink: #8A6220;
  --gold-ink-strong: #6B4A14;
  --goldgrad: linear-gradient(180deg, #E7C063, #C89438 55%, #B07E22);
  --on-gold: #221805;

  /* Schrift. Drei Stufen, alle ueber der AA-Schwelle:
     12.7:1 / 6.6:1 / 4.5:1 */
  --text: #2E2A24;
  --muted: #5C5545;
  --faint: #776E5D;
  --heading: #241F18;

  /* Zweiter Akzent, aus dem Himmel im Hero. --sky traegt Text,
     --sky-bright ist die Flaeche darunter. */
  --sky: #2E6FA8;
  --sky-bright: #4E9BD8;
  --sky-deep: #245780;
  --sky-soft: #E4F0FA;

  /* Zustaende, fuer hellen Grund abgedunkelt. Die Nachtwerte
     (#3DBE7B / #E05252) fielen auf Creme durch. */
  --green: #17754F;
  --red: #C0392B;
  --blue: #2F6FB5;

  --font-display: "Marcellus", "Palatino Linotype", Georgia, serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;

  --radius: 14px;
  --maxw: 1280px;
  /* Warm getoent statt neutral schwarz - reines Schwarz wirkt auf Creme
     schmutzig. */
  --shadow: 0 6px 18px rgba(120, 95, 55, 0.16);

  /* Heights of the two sticky bars. The status strip docks below the
     topbar and the hero artwork reaches up behind both, so these values
     are pinned rather than left to the content. */
  --topbar-h: 64px;
  --statusbar-h: 48px;
  --chrome-h: calc(var(--topbar-h) + var(--statusbar-h));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Column layout so the footer sits at the bottom of the viewport even on a
   short page like the login form, instead of floating mid screen. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page-main { flex: 1 0 auto; }
.footer { flex: none; }

/* Short pages (login, account creation) balance their card in the space
   that is left instead of clinging to the top. */
.page-main.is-centered { display: flex; flex-direction: column; }
.page-main.is-centered > * { flex: 1; align-content: center; }

img { max-width: 100%; }

a { color: var(--gold-ink); text-decoration: none; }
a:hover { color: var(--gold-ink-strong); }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--heading);
  margin: 0;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.mono { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 246, 0.94);
  border-bottom: 1px solid var(--line);
}

.topbar::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 126, 34, 0.55), transparent);
}

.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  height: calc(var(--topbar-h) - 2px);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 40px; width: auto; }
.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--heading);
  letter-spacing: 0.5px;
}
.brand-name em { font-style: normal; color: var(--gold-ink); }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav > a {
  color: var(--text);
  font-size: 14.5px;
  padding: 8px 12px;
  border-radius: 8px;
}
.nav > a:hover { color: var(--gold-ink-strong); background: rgba(176, 126, 34, 0.08); }
.nav > a[aria-current="page"] { color: var(--gold-ink); }

.nav-cta {
  background: var(--goldgrad);
  color: var(--on-gold) !important;
  font-weight: 600;
  padding: 9px 18px !important;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(176, 126, 34, 0.35);
}
/* Must beat the generic .nav > a:hover rule, otherwise the gold button
   loses its gradient on hover and the dark label becomes unreadable. */
.nav > .nav-cta:hover, .nav-cta:hover {
  background: var(--goldgrad);
  color: var(--on-gold) !important;
  filter: brightness(1.07);
}

.nav-account { font-size: 13.5px; color: var(--muted); padding-left: 8px; white-space: nowrap; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gold-bright);
  margin: 4px 0;
  border-radius: 2px;
}

/* ---------------------------------------------------------- status strip */

/* Sticks directly under the topbar so the live numbers stay visible while
   scrolling. One below the topbar's z-index, so the open mobile menu
   (which lives inside the topbar) covers it instead of the other way round. */
.statusbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 49;
  background: rgba(246, 241, 228, 0.94);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(120, 95, 55, 0.11);
}

.statusbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: calc(var(--statusbar-h) - 1px);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 13px;
}
.statusbar-inner::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.78);
  color: var(--muted);
  white-space: nowrap;
}
.chip strong { color: var(--text); font-weight: 600; }
.chip .mono { color: var(--gold-ink); }

.chip a { color: inherit; }
.chip a strong { color: var(--gold-ink); }

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}
/* Vor der Eroeffnung: weder gruen noch rot, sondern wartend. Derselbe
   Puls wie der Punkt im "Opening soon"-Kasten, damit beides zusammengehoert. */
.dot.is-soon {
  background: var(--gold);
  animation: freshPulse 2.4s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(176, 126, 34, 0.65);
}
@media (prefers-reduced-motion: reduce) {
  .dot.is-soon { animation: none; }
}

.dot.is-online {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(23, 117, 79, 0.6);
  animation: pulse 2.2s infinite;
}
.dot.is-offline { background: var(--red); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(23, 117, 79, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(23, 117, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 117, 79, 0); }
}

/* Next automated event, same countdown the homepage card shows. */
.chip-next a { display: inline-flex; align-items: center; gap: 7px; }
.chip-next strong { color: var(--text); font-weight: 600; }
.chip-next .mono { color: var(--gold-ink); }
.chip-next:hover { border-color: var(--glass-border); }

/* War of Emperium state. Reuses .dot with is-online/is-offline so the
   green/red reading is the same as the server chip next to it. */
.chip-woe a, .chip-koe a { display: inline-flex; align-items: center; gap: 7px; }
.chip-woe strong, .chip-koe strong { color: var(--text); font-weight: 600; }
.chip-woe .mono, .chip-koe .mono { color: var(--muted); }
.chip-woe:hover, .chip-koe:hover { border-color: var(--glass-border); }

.chip-clock { margin-left: auto; }

/* ------------------------------------------------------------------ hero */

/* Das Artwork traegt keinen Schriftzug, das Logo liegt als eigenes Bild
   darueber (.hero-mark). Der obere Teil des Abschnitts gehoert dem Bild,
   der Inhalt beginnt unterhalb der Figuren. */
/* Fills the screen: the section covers the viewport minus the two sticky
   bars, and the artwork layer reaches up behind them (they are translucent,
   so the scene shows through). No overflow clipping, the background layer
   is sized explicitly. */
/* Der Vorgaenger fuellte den ganzen Abschnitt mit `cover`. Das ging nur so
   lange gut, wie das Artwork oben einen leeren Logo-Bereich hatte: die
   Karten lagen dann ueber dem unteren, ohnehin abgedunkelten Teil.

   Dieses Artwork hat seine fuenf Figuren in der Mitte - genau dort, wo die
   Login-Karte und die Newsliste sitzen. Mit `cover` waren sie komplett
   verdeckt. Deshalb wird das Bild jetzt in voller Breite und im eigenen
   Verhaeltnis oben angeschlagen (siehe .hero-bg), und der Inhalt beginnt
   erst unterhalb der Koepfe. Was darunter noch Abschnitt ist, ist
   Seitenflaeche - das Bild waechst nicht mit. */
.hero {
  position: relative;
  background: var(--bg-0);
  /* Mindestens so hoch, dass das Bildband vollstaendig hineinpasst.
     55.8% ist 1/1.792, das Verhaeltnis des Artworks. */
  min-height: calc(55.8vw - var(--chrome-h));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(10px, 1.1vw, 22px) 0 56px;
}

/* Das Bildband. Reicht hinter die beiden Leisten hinauf, weil die
   durchscheinend sind.

   Hoehe ueber padding-top statt vw: Prozentwerte beziehen sich auf die
   Breite des Elternelements, und die kennt im Gegensatz zu 100vw die
   Breite der Bildlaufleiste. Mit 100vw waere das Bild auf Rechnern mit
   sichtbarer Leiste ein paar Pixel zu breit und die Seite haette einen
   waagerechten Ueberlauf.

   55.8% = 1/1.792, das Verhaeltnis von hero-wide.jpg. Zusammen mit
   `100% auto` heisst das: volle Breite, nichts beschnitten. */
.hero-bg {
  position: absolute;
  top: calc(-1 * var(--chrome-h));
  right: 0;
  left: 0;
  height: 0;
  padding-top: 55.8%;
  background: url("../assets/hero-wide.jpg") center top / 100% auto no-repeat;
}

/* Grain. Inline SVG noise, so no extra request. */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
}

/* Im dunklen Vorgaenger lag hier ein Schleier, der das helle Artwork so weit
   abdunkelte, dass weisse Schrift darauf lesbar blieb. Der ist weg: die
   Leisten sind jetzt cremefarben, und jeder Text im Hero sitzt auf einer
   deckenden Karte. Was bleibt, sind zwei Aufgaben, die nichts mit Lesbarkeit
   zu tun haben - die Naht nach oben zu den Leisten und die Naht nach unten
   zur Seitenflaeche. Beide loesen jetzt helle Verlaeufe, nicht dunkle.

   Der Verlauf muss ganz unten wirklich bei var(--bg-0) ankommen, sonst
   sieht man die Kante zwischen Bild und Seite. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(246, 241, 228, 0.88) 0%,
      rgba(246, 241, 228, 0.12) 15%,
      rgba(246, 241, 228, 0) 36%,
      rgba(246, 241, 228, 0.18) 62%,
      rgba(246, 241, 228, 0.78) 89%,
      var(--bg-0) 100%),
    /* Weiche helle Vignette. Haelt den Blick in der Mitte, ohne dass die
       Raender abgeschnitten wirken. */
    radial-gradient(132% 92% at 50% 30%, transparent 44%, rgba(246, 241, 228, 0.40) 100%);
}

/* ------------------------------------------------------------- Schriftzug

   Steht als Text im Hero, nicht im Bild. Sitzt im offenen Himmel oberhalb
   der Figuren.

   Warum ein Lichthof statt einer Karte: der Himmel im Artwork reicht von
   fast weissen Wolken bis zu grauen Turmspitzen, gegen beides gleichzeitig
   traegt keine einzelne Schriftfarbe. Der cremefarbene Schein legt eine
   eigene helle Flaeche unter die Buchstaben - dagegen kommt das tiefe Gold
   auf 7.9:1, unabhaengig davon, was im Bild dahinter liegt. */

.hero-mark {
  /* Der Abstand nach unten ist kein Gestaltungsspielraum, er ist Rechnung.
     Die Gesichter der fuenf Figuren enden bei rund 55 Prozent der
     Bandhoehe; das Band ist 55.8vw hoch, der Kasten darunter darf also
     nicht vor 30.7vw beginnen. Davon abzuziehen sind Leisten, Polster und
     die Hoehe des Logos (26vw / 1.7025 = 15.3vw) - bleiben 14.6vw minus
     der Leistenhoehe.
     Die Leisten sind der Grund, warum hier eine Rechnung und kein reiner
     vw-Wert steht: 112px sind auf einem schmalen Fenster ein Fuenftel des
     Bandes und auf einem breiten ein Zwanzigstel. Ein fester vw-Wert
     stimmt deshalb immer nur bei genau einer Fensterbreite. */
  margin: 0 auto max(20px, calc(14.6vw - var(--chrome-h)));
  text-align: center;
  line-height: 0;
}
.hero-mark picture { display: inline-block; }
.hero-mark img {
  /* Das Logo ist 1190x699. Breite in vw, damit es im selben Verhaeltnis
     zum Artwork bleibt, egal wie breit das Fenster ist - ein fester
     Pixeldeckel liesse es auf grossen Schirmen verloren wirken und auf
     kleinen die Szene erschlagen. */
  width: clamp(220px, 26vw, 720px);
  height: auto;
  /* Weicher heller Schein, damit die dunklen Konturen sich auch dort vom
     Artwork loesen, wo eine Turmspitze oder ein Dach dahinterliegt. */
  filter: drop-shadow(0 0 18px rgba(255, 253, 246, 0.85))
          drop-shadow(0 4px 10px rgba(120, 95, 55, 0.28));
}

@media (max-width: 760px) {
  /* Auf dem Handy ist das Bildband nur rund 200px hoch. Ein Logo darauf
     wuerde den Figuren ins Gesicht fallen - also steht es darunter auf der
     Cremeflaeche. Der Abstand nach oben kommt aus der Hoehe des Bandes
     (55.8vw), er wird bei .hero als padding-top gesetzt. */
  .hero-mark { margin-bottom: 22px; }
  .hero-mark img { width: min(300px, 76vw); }
}

.hero-inner { position: relative; width: 100%; }

/* Hinweis, dass der Server jung ist. Steht im freien Bereich des Heros
   ueber den Schaltflaechen, wo vorher nur das Artwork zu sehen war. */
.fresh {
  max-width: 620px;
  margin: 0 auto 26px;
  padding: 16px 22px 18px;
  text-align: center;
  border: 1px solid rgba(176, 126, 34, 0.45);
  border-radius: 14px;
  background: rgba(255, 253, 246, 0.95);
  box-shadow: 0 0 0 1px rgba(120, 95, 55, 0.13), 0 14px 40px rgba(120, 95, 55, 0.17);
}
.fresh-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.fresh-dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 0 rgba(176, 126, 34, 0.65);
  animation: freshPulse 2.4s ease-out infinite;
  vertical-align: middle;
}
@keyframes freshPulse {
  70% { box-shadow: 0 0 0 9px rgba(176, 126, 34, 0); }
  100% { box-shadow: 0 0 0 0 rgba(176, 126, 34, 0); }
}
.fresh-main {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.25;
  color: var(--heading);
}
.fresh-main strong { color: var(--gold-ink); font-weight: normal; }
.fresh-note { margin: 0; font-size: 14.5px; color: var(--muted); }
.fresh-note strong { color: var(--gold-ink); }

/* Begruendung unter einem Kartentext, etwas zurueckgenommen. */
.blurb.why {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 760px) {
  .fresh { padding: 13px 16px 15px; margin-bottom: 20px; }
  .fresh-main { font-size: 21px; }
  .fresh-note { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fresh-dot { animation: none; }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* Small plate instead of a giant centred headline. */
.tagline {
  display: inline-block;
  margin-bottom: 14px;
  padding: 9px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-strong);
  /* Wie die uebrigen Karten im Hero. Ohne Schatten verschwamm die Plakette
     auf dem hellen Steinpflaster des Artworks zu einem Fleck. */
  box-shadow: 0 8px 22px rgba(120, 95, 55, 0.20);
  font-size: 15px;
  letter-spacing: 0.4px;
  color: var(--gold-ink);
  text-align: center;
  width: 100%;
}

/* Panels sit on the bright artwork now, so they carry more of their own
   darkness than the panels further down the page. */
.hero .panel {
  background: var(--glass-strong);
  box-shadow: 0 14px 40px rgba(120, 95, 55, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------ login card */

.login-card { padding: 20px; text-align: left; }

.login-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--heading);
  margin: 0 0 14px;
}

.login-note { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }

.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.field input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid var(--glass-border);
  background: #FFFFFF;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
}
.field input:focus {
  outline: none;
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px rgba(176, 126, 34, 0.18);
}

.remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  cursor: pointer;
}
.remember input { accent-color: var(--gold-ink); }

/* Honeypot: off screen rather than display:none, so bots still fill it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.login-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

/* ------------------------------------------------------------- hero CTAs */

.hero-cta { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.hero-cta .btn { flex: 1 1 200px; text-align: center; }

.btn-lg { padding: 16px 28px; font-size: 16.5px; letter-spacing: 0.3px; }

.btn-blue {
  /* Verlauf von --sky abwaerts, nicht von --sky-bright: weisse Schrift
     auf dem helleren Ton kam nur auf 3.0:1. So sind es 5.4:1 oben und
     7.6:1 unten. --sky-bright bleibt fuer Flaechen ohne Text. */
  background: linear-gradient(180deg, var(--sky), var(--sky-deep));
  color: #FFFFFF;
  border-color: rgba(46, 111, 168, 0.55);
  box-shadow: 0 4px 16px rgba(46, 111, 168, 0.28);
}
.btn-blue:hover { filter: brightness(1.09); color: #fff; }

/* Draws the eye to the account signup without shouting. */
.btn-glow { box-shadow: 0 6px 22px rgba(176, 126, 34, 0.42), 0 0 0 1px rgba(176, 126, 34, 0.45); }

/* ------------------------------------------------------------- news feed */

.feed { padding: 16px 18px 10px; }

.feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 6px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
}
.feed-row:hover { background: rgba(176, 126, 34, 0.07); color: var(--gold-ink-strong); }

.feed-when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-ink);
  flex: none;
  width: 92px;
}
.feed-title {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-row .tag { flex: none; }
.feed-more { margin: 12px 6px 6px; font-size: 13.5px; text-align: right; }

/* ---------------------------------------------------------------- badges */

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.badge {
  padding: 5px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(176, 126, 34, 0.10);
  font-size: 12.5px;
  color: var(--text);
}
.badge.gold {
  color: var(--on-gold);
  background: var(--goldgrad);
  border-color: transparent;
  font-weight: 600;
}

.btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--goldgrad);
  color: var(--on-gold);
  box-shadow: 0 4px 18px rgba(176, 126, 34, 0.4);
}
.btn-primary:hover { filter: brightness(1.07); color: var(--on-gold); }
.btn-ghost {
  border-color: var(--glass-border);
  color: var(--gold-ink);
  background: rgba(255, 253, 246, 0.72);
}
.btn-ghost:hover { background: rgba(176, 126, 34, 0.1); color: var(--gold-ink-strong); }
.btn-block { display: block; text-align: center; }

/* -------------------------------------------------------------- sections */

.band { padding: 64px 0; }
.band-alt { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Keep in-page jumps clear of both sticky bars. */
.band[id], .hero[id] { scroll-margin-top: calc(var(--topbar-h) + 52px); }

.fancy-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: clamp(24px, 3vw, 32px);
  text-align: center;
  margin-bottom: 10px;
}
.fancy-title i {
  flex: 0 1 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.fancy-title i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }

.band-lede {
  text-align: center;
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 36px;
}

/* --------------------------------------------------------- glass panels */

.panel {
  /* Kein backdrop-filter: jede weichgezeichnete Flaeche muss der Browser
     beim Scrollen neu berechnen, und davon gibt es Dutzende. Auf hellem
     Grund braucht es ihn auch nicht - die Karte hebt sich durch die
     hellere Fuellung, die Goldkante und einen warmen Schatten ab. */
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 24px;
}

.eyebrow {
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  /* Steht auf den Unterseiten im Verlauf des Seitenkopfs, also auf --bg-2
     statt --bg-0. Dort kaeme --gold-ink nur auf 4.43:1. */
  color: var(--gold-ink-strong);
  margin-bottom: 6px;
}

.panel-title { font-size: 21px; margin-bottom: 12px; }

/* ------------------------------------------------------- happening band */

.now-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.countdown {
  font-family: var(--font-mono);
  font-size: clamp(30px, 3vw, 38px);
  color: var(--gold-ink);
  letter-spacing: 2px;
  margin: 4px 0 10px;
}
.countdown.small { font-size: 24px; }

.live-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid rgba(192, 57, 43, 0.5);
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  animation: livepulse 1.6s infinite;
}
@keyframes livepulse { 50% { opacity: 0.55; } }

.meta-line { color: var(--muted); font-size: 13.5px; margin: 2px 0; }
.meta-line strong { color: var(--text); font-weight: 600; }
.local-hint { color: var(--faint); }

.blurb { font-size: 14px; color: var(--text); opacity: 0.85; margin: 10px 0 14px; }

.sched-title {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--faint);
  margin: 14px 0 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* Column-major so the left column reads top to bottom in order. --rows is
   set inline from the slot count. */
.sched {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 8), auto);
  grid-auto-flow: column;
  gap: 3px 14px;
  font-size: 12.5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sched li { display: flex; gap: 8px; color: var(--text); white-space: nowrap; overflow: hidden; }
.sched .t { font-family: var(--font-mono); color: var(--gold-ink); flex: none; width: 68px; }
.sched li.done { opacity: 0.38; }
.sched li.done .t { color: var(--muted); }
.sched li.next { color: var(--gold-ink); font-weight: 600; }
.sched li.next .t { color: var(--gold-ink); }
.sched li.next::after {
  content: "next";
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--on-gold);
  background: var(--goldgrad);
  border-radius: 4px;
  padding: 1px 5px;
  align-self: center;
}

.alw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.alw span {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 10px;
  border: 1px dashed var(--line);
  border-radius: 999px;
}
.alw span strong { color: var(--text); font-weight: 600; }

/* KoE standings + castle rows */

.row-list { list-style: none; margin: 0; padding: 0; }
.row-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.row-list li:last-child { border-bottom: none; }
.row-list img.emblem { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
.row-list .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-list .sub { color: var(--muted); font-size: 12px; display: block; }
.row-list .val { font-family: var(--font-mono); color: var(--gold-ink); font-size: 13px; }

.minibar {
  width: 74px;
  height: 5px;
  border-radius: 3px;
  background: rgba(120, 95, 55, 0.14);
  overflow: hidden;
  flex: none;
}
.minibar i { display: block; height: 100%; background: var(--goldgrad); }

.empty-state {
  color: var(--muted);
  font-size: 14px;
  padding: 18px 0;
  text-align: center;
}

.card-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}

/* ------------------------------------------------------------------ news */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.news-card { display: flex; flex-direction: column; transition: transform 0.25s ease, border-color 0.25s ease; }
.news-card:hover { transform: translateY(-4px); border-color: rgba(176, 126, 34, 0.5); }

.news-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(176, 126, 34, 0.15);
  border: 1px solid var(--glass-border);
  color: var(--gold-ink);
}

.news-card time { color: var(--faint); font-size: 12.5px; }
.news-card h3 { font-size: 18px; margin-bottom: 8px; line-height: 1.35; }
.news-card p { font-size: 14px; color: var(--muted); margin: 0 0 12px; flex: 1; }
.news-more { font-size: 13.5px; }

.center-cta { text-align: center; margin-top: 32px; }

/* -------------------------------------------------------------- rankings */

.board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.board { padding: 0; overflow: hidden; }

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}
.board-title { font-size: 20px; }

/* Segmented switch for two related boards in one card. */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(176, 126, 34, 0.10);
  flex: none;
}
.seg-btn {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn:hover { color: var(--gold-ink-strong); }
.seg-btn.is-active { color: var(--on-gold); background: var(--goldgrad); font-weight: 600; }

/* Rank 1 gets the portrait and the full stat block, the rest is a table. */
.champion {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(176, 126, 34, 0.12), transparent 70%);
}

.champ-sprite {
  width: 92px;
  height: 112px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.champ-sprite img { max-height: 112px; max-width: 92px; image-rendering: pixelated; }
.champ-sprite img.portrait { border-radius: 10px; image-rendering: auto; }

.champ-info { flex: 1; min-width: 0; font-size: 13.5px; }
.champ-rank {
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--gold-ink);
  margin: 0 0 6px;
}
.champ-info p {
  margin: 2px 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.champ-info p span { color: var(--muted); display: inline-block; min-width: 66px; }

.board-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; }
.board-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-align: left;
  padding: 9px 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.board-table th:first-child { width: 74px; }
.board-table th:last-child, .board-table .v { text-align: right; width: 96px; }
/* Zeny and other long numbers need more room than the default column. */
.board-table.wide-v th:last-child, .board-table.wide-v .v { width: 134px; }
.board-table td {
  padding: 9px 20px;
  border-bottom: 1px solid rgba(176, 126, 34, 0.07);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-table tr:last-child td { border-bottom: none; }
.board-table .r { font-family: var(--font-mono); color: var(--faint); }
.board-table .v { font-family: var(--font-mono); color: var(--gold-ink); }

.board-more { padding: 13px 20px 16px; font-size: 13.5px; margin: 0; }

/* The highlight belongs on the row, not on each cell. Per-cell gradients
   restart in every column and read as stripes. */
.board-table tr.lead { background: linear-gradient(90deg, rgba(176, 126, 34, 0.15), rgba(176, 126, 34, 0.02) 78%, transparent); }
.board-table tr.lead .r, .board-table tr.lead .v { color: var(--gold-ink); }
.board-table tr.lead td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.board-table .n .sub { display: block; font-size: 11.5px; color: var(--faint); }
.board-table .n .muted, .muted { color: var(--faint); }
.board-table img.emblem {
  width: 20px; height: 20px;
  vertical-align: -4px;
  margin-right: 7px;
  image-rendering: pixelated;
}

.board-note {
  padding: 12px 20px 16px;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------- page header */

.page-head {
  position: relative;
  padding: 46px 0 34px;
  background:
    linear-gradient(180deg, var(--bg-2), transparent 70%),
    var(--bg-0);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 10px; }
.page-lede { color: var(--muted); max-width: 720px; margin: 0 0 26px; font-size: 14.5px; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 720px; }
.tile {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: center;
}
.t-val { display: block; font-family: var(--font-mono); font-size: 22px; color: var(--gold-ink); }
.t-label { display: block; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.band-tabs { padding: 34px 20px 72px; }

/* --------------------------------------------------------------- tabs */

.tabbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.tab {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--muted);
  background: rgba(255, 253, 246, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
}
.tab:hover { color: var(--gold-ink-strong); border-color: var(--glass-border); }
.tab.is-active {
  color: var(--on-gold);
  background: var(--goldgrad);
  border-color: transparent;
  font-weight: 600;
}

.board-wide { grid-column: 1 / -1; }

/* ------------------------------------------------------------- podium */

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
}
.podium-spot {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px 14px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.podium-spot.place-1 {
  border-color: rgba(176, 126, 34, 0.55);
  background: linear-gradient(180deg, rgba(176, 126, 34, 0.16), var(--glass) 55%);
  box-shadow: 0 10px 34px rgba(176, 126, 34, 0.18);
  padding-top: 26px;
}
.podium-art { height: 116px; display: flex; align-items: flex-end; justify-content: center; }
.podium-art img { max-height: 116px; image-rendering: pixelated; }
.podium-art img.portrait { border-radius: 10px; image-rendering: auto; max-height: 96px; }
.podium-rank { font-family: var(--font-mono); font-size: 20px; color: var(--gold-ink); margin-top: 8px; }
.podium-spot.place-1 .podium-rank { font-size: 26px; }
.podium-name { font-size: 17px; color: var(--heading); font-family: var(--font-display); }
.podium-meta { font-size: 12.5px; color: var(--muted); }
.podium-guild { font-size: 12px; color: var(--gold-ink); margin-top: 4px; }

/* ------------------------------------------------------- data table */

.table-panel { padding: 0; overflow: hidden; }

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.filters input, .filters select {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--glass-border);
  background: #FFFFFF;
  color: var(--text);
}
.filters input { flex: 1 1 220px; }
.filters input:focus, .filters select:focus {
  outline: none;
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px rgba(176, 126, 34, 0.18);
}

.table-scroll { overflow-x: auto; }

.datatable { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 660px; }
.datatable th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-ink);
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.datatable th[data-sort] { cursor: pointer; user-select: none; }
.datatable th[data-sort]:hover { color: var(--gold-ink-strong); }
.datatable th.is-sorted::after { content: " ▾"; color: var(--gold-ink); }
.datatable td { padding: 10px 16px; border-bottom: 1px solid rgba(176, 126, 34, 0.07); }
.datatable tr:last-child td { border-bottom: none; }
.datatable .r { font-family: var(--font-mono); color: var(--faint); width: 56px; }
.datatable .v { font-family: var(--font-mono); color: var(--gold-ink); text-align: right; white-space: nowrap; }
.datatable th.v { text-align: right; }
.datatable tr.lead { background: linear-gradient(90deg, rgba(176, 126, 34, 0.15), rgba(176, 126, 34, 0.02) 78%, transparent); }
.datatable tr.lead .r, .datatable tr.lead .v { color: var(--gold-ink); }
.datatable tr.lead td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.datatable tr:hover { background: rgba(176, 126, 34, 0.06); }

/* Wiki-Seitenliste im Staff-Tab. Die Basistabelle steht auf table-layout:
   fixed mit nowrap und Ellipse, bei vier Spalten blieb vom Pfad nur
   "Class Cha..." uebrig. Hier bekommt die Namensspalte den Loewenanteil und
   darf umbrechen, die Zahlenspalten bleiben schmal. */
.board-table.wiki-pages td.n {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.board-table.wiki-pages .p-name { display: block; }
.board-table.wiki-pages .p-path {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}

.table-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 16px;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* Blaetterband unter der Charakterliste. Die Knoepfe erben Groesse und
   Rahmen von den Filtern darueber, damit beide Leisten zusammenpassen. */
.pager { display: flex; flex-wrap: wrap; gap: 6px; }
.pager .pg {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  min-width: 34px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: #FFFFFF;
  color: var(--text);
  cursor: pointer;
}
.pager .pg:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-ink-strong); }
.pager .pg:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pager .pg.is-current {
  border-color: var(--gold-ink);
  background: rgba(176, 126, 34, 0.16);
  /* Auf der getoenten Flaeche kaeme --gold-ink nur auf 4.49:1 - ein Hauch
     unter AA. Der kraeftigere Ton ist hier ohnehin richtig, es ist die
     aktive Seite. */
  color: var(--gold-ink-strong);
  font-weight: 600;
}
/* Deaktiviert sind zwei Faelle: die Enden des Bandes und die Luecken
   zwischen den Seitenzahlen. Beide sollen nicht anklickbar aussehen. */
.pager .pg:disabled { opacity: 0.4; cursor: default; }
.pager .pg.is-current:disabled { opacity: 1; }

/* ------------------------------------------------- who is online ---- */

.where-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.where-label {
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-right: 4px;
}
.where-chip {
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(176, 126, 34, 0.10);
}
.where-chip strong { color: var(--gold-ink); font-family: var(--font-mono); margin-left: 4px; }

/* Heading between the playing block and the vendor block. */
.datatable tr.group-row td {
  padding: 20px 16px 7px;
  border-bottom: 1px solid var(--glass-border);
}
.datatable tr.group-row:first-child td { padding-top: 10px; }
.datatable tr.group-row:hover { background: none; }
.group-row span {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.group-row em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
  margin-left: 8px;
}

.state-tag {
  font-size: 11.5px;
  letter-spacing: 0.6px;
  color: var(--green);
  border: 1px solid rgba(23, 117, 79, 0.4);
  background: rgba(23, 117, 79, 0.1);
  border-radius: 999px;
  padding: 3px 10px;
}

.shop-link {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--gold-ink);
  background: rgba(176, 126, 34, 0.12);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.shop-link:hover { background: rgba(176, 126, 34, 0.22); color: var(--gold-ink-strong); }

/* --------------------------------------------------------- modal ---- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(60, 48, 30, 0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-backdrop[hidden] { display: none; }

.modal {
  width: min(560px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--bg-1);
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--goldgrad);
}
.modal-head h3 { flex: 1; font-size: 17px; color: var(--on-gold); }
.modal-close {
  background: rgba(120, 95, 55, 0.06);
  border: 0;
  color: var(--on-gold);
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { background: rgba(120, 95, 55, 0.11); }
.modal-sub {
  margin: 0;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.modal-body { overflow-y: auto; padding: 6px 0; }
.modal-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.modal-foot span:last-child { color: var(--gold-ink); font-family: var(--font-mono); }

.shop-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(176, 126, 34, 0.07);
  font-size: 13.5px;
}
.shop-row:last-child { border-bottom: none; }
.shop-amount {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-ink);
  min-width: 42px;
  flex: none;
}
.shop-item { flex: 1; color: var(--text); }
.shop-cards { display: block; font-size: 11.5px; color: var(--faint); }
.shop-price { font-family: var(--font-mono); color: var(--gold-ink); white-space: nowrap; }

/* ------------------------------------------------------- market ---- */

.market-section { margin-bottom: 34px; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 20px;
  margin-bottom: 14px;
}
.section-head span {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Copies "/navi <map> <x>/<y>", which the client turns into a route your
   character walks on its own. */
.navi-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-ink);
  background: rgba(176, 126, 34, 0.1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 7px;
  margin-left: 8px;
  cursor: pointer;
  vertical-align: 1px;
  white-space: nowrap;
}
.navi-btn:hover { background: rgba(176, 126, 34, 0.22); color: var(--gold-ink-strong); }
.navi-btn.is-copied { background: rgba(23, 117, 79, 0.18); border-color: rgba(23, 117, 79, 0.5); color: var(--green); }

.item-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
  flex: none;
}

.sold-grid, .stock-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sold-card, .stock-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  font-family: var(--font-body);
  color: var(--text);
  min-width: 0;
}
.stock-card { cursor: pointer; }
.stock-card:hover { border-color: var(--glass-border); background: rgba(176, 126, 34, 0.08); }

.sold-main, .stock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sold-main strong, .stock-main strong {
  font-weight: 600;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sold-card .sub, .stock-card .sub {
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sold-price {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--green);
  white-space: nowrap;
  flex: none;
}
.stock-price { font-family: var(--font-mono); font-size: 13.5px; color: var(--gold-ink); }

.datatable th.ico, .datatable td.ico { width: 44px; padding-right: 0; }
.datatable td.n .sub { display: block; font-size: 11.5px; color: var(--faint); }

.tabbar .tab em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11.5px;
  opacity: 0.75;
  margin-left: 6px;
}

/* --------------------------------------------------- account ------- */

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.kv { margin: 0; display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 2px 14px; font-size: 14px; }
.kv dt { color: var(--muted); padding: 7px 0; border-bottom: 1px solid var(--line); }
.kv dd {
  margin: 0;
  padding: 7px 0;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
}
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: none; }

.char-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.char-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  color: var(--text);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
a.char-card:hover {
  transform: translateY(-3px);
  border-color: rgba(176, 126, 34, 0.5);
  color: var(--text);
}

.char-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.char-head h1 { display: flex; align-items: center; gap: 12px; }
.char-head-art { width: 88px; height: 108px; flex: none; display: flex; align-items: center; justify-content: center; }
.char-head-art img { max-height: 108px; max-width: 88px; image-rendering: pixelated; }
.char-head-art img.portrait { border-radius: 10px; image-rendering: auto; max-height: 92px; }

.statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.statbox {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.s-name { font-size: 11.5px; letter-spacing: 1.4px; color: var(--gold-ink); }
.s-num { font-family: var(--font-mono); font-size: 17px; color: var(--text); }
.char-art { width: 74px; height: 92px; flex: none; display: flex; align-items: center; justify-content: center; }
.char-art img { max-height: 92px; max-width: 74px; image-rendering: pixelated; }
.char-art img.portrait { border-radius: 8px; image-rendering: auto; max-height: 76px; }
.char-info { min-width: 0; flex: 1; }
.char-name {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--heading);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.char-name .state-tag { font-size: 10px; padding: 2px 8px; flex: none; }

.vote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vote-card { display: flex; flex-direction: column; }
.vote-card .side-note { flex: 1; }
.vote-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.vote-head h3 { font-size: 17px; }
.vote-points { font-family: var(--font-mono); color: var(--gold-ink); font-size: 14px; }
/* RateMyServer sitzt in derselben Kachelreihe, zahlt aber keine Punkte. Gedeckte
   Farbe, damit die Reihe nicht so aussieht, als gaebe es dort etwas zu holen. */
.vote-points.is-free { color: var(--muted); }
.btn.is-disabled { opacity: 0.45; cursor: default; pointer-events: none; }

/* --------------------------------------------- auth and forms ------ */

.auth-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 22px;
  align-items: start;
  padding: 44px 20px 72px;
}

.auth-card { padding: 26px 28px 24px; }
.auth-card.is-wide { max-width: none; }
.auth-head { margin-bottom: 18px; }
.auth-head h1, .auth-head h2 { font-size: clamp(24px, 3vw, 30px); }

.auth-side { padding: 24px; }
.auth-side p, .side-note { color: var(--muted); font-size: 14px; }
.auth-side .steps { margin-bottom: 18px; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.field textarea, .field select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid var(--glass-border);
  background: #FFFFFF;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px rgba(176, 126, 34, 0.18);
}

.hint { font-size: 12px; color: var(--faint); margin: 5px 0 0; }

.radios { display: flex; gap: 16px; padding: 9px 0; }
.radios label { display: flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--text); cursor: pointer; }
.radios input { accent-color: var(--gold-ink); }

.form-note {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid var(--line);
}
.form-note ul { margin: 0; padding-left: 18px; }
.form-note li + li { margin-top: 4px; }
.form-note.is-error {
  border-color: rgba(192, 57, 43, 0.5);
  background: rgba(192, 57, 43, 0.1);
  color: var(--red);
}
.form-note.is-ok {
  border-color: rgba(23, 117, 79, 0.45);
  background: rgba(23, 117, 79, 0.1);
  color: var(--green);
}

.tick-list { list-style: none; margin: 0 0 16px; padding: 0; }
.tick-list li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 14px;
  color: var(--muted);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--goldgrad);
}
.tick-list strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------- support ------- */

.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 22px;
  align-items: start;
}
.support-side { display: grid; gap: 16px; }

.faq-list { display: grid; gap: 12px; }
.faq-item { padding: 0; }
.faq-item summary {
  padding: 15px 20px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--heading);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--gold-ink);
  font-size: 18px;
  flex: none;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--gold-ink-strong); }
.faq-item p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

/* --------------------------------------------------- class bars ---- */

.classbars { list-style: none; margin: 0; padding: 0; }
.classbars li {
  display: grid;
  grid-template-columns: 150px 1fr 110px;
  gap: 14px;
  align-items: center;
  padding: 7px 0;
  font-size: 13.5px;
}
.cb-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-bar { background: rgba(120, 95, 55, 0.14); border-radius: 4px; height: 9px; overflow: hidden; }
.cb-bar i { display: block; height: 100%; background: var(--goldgrad); border-radius: 4px; }
.cb-val { font-family: var(--font-mono); font-size: 12.5px; color: var(--gold-ink); text-align: right; }

/* -------------------------------------------------------------- features */

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.feat {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.feat:hover { transform: translateY(-4px); border-color: rgba(176, 126, 34, 0.5); }

.feat-img {
  position: relative;
  aspect-ratio: 5 / 2.6;
  overflow: hidden;
}
.feat-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.feat-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 253, 246, 0) 45%, rgba(255, 253, 246, 0.96));
}

.feat-body { padding: 16px 20px 20px; }
.feat-body h3 { font-size: 18px; margin-bottom: 6px; }
.feat-body p { font-size: 13.5px; color: var(--muted); margin: 0; }
.feat-body code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(176, 126, 34, 0.12);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--gold-ink);
}

/* --------------------------------------------------- regions ------- */

.regions {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
}

.regions-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.regions-head h2 { font-size: 22px; margin-bottom: 6px; }
.regions-head p { margin: 0; color: var(--muted); font-size: 14px; max-width: 720px; }
.regions-head .btn { flex: none; padding: 10px 18px; font-size: 14px; }

.region-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.region {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-1);
  min-width: 0;
}
.region-name { font-family: var(--font-display); font-size: 16px; color: var(--heading); }
.region-where { font-size: 12.5px; color: var(--gold-ink); }
.region-entry {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------- grow cards ---- */

.grow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.grow-card { display: flex; flex-direction: column; }
.grow-card h3 { font-size: 20px; margin-bottom: 8px; }
.grow-card p { color: var(--muted); font-size: 14px; flex: 1; margin: 0 0 16px; }

/* ------------------------------------------------------------------ join */

.join-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.join-media { position: relative; min-height: 320px; }
.join-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.join-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 253, 246, 0), rgba(255, 253, 246, 0.72) 85%);
}

.join-body { padding: 28px 30px; }

.steps { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--muted);
}
.steps li::before {
  content: counter(step);
  font-family: var(--font-mono);
  color: var(--gold-ink);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  position: relative;
  top: 4px;
}
.steps strong { color: var(--text); }

.community { display: grid; gap: 10px; }

/* ---------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  padding: 48px 0 0;
  font-size: 14px;
}
.footer::before {
  content: "";
  display: block;
  height: 2px;
  margin-top: -50px;
  margin-bottom: 48px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}
.footer h4 { font-size: 16px; margin-bottom: 12px; }
.footer p { color: var(--muted); margin: 0; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 6px 0; }
.footer li a { color: var(--muted); }
.footer li a:hover { color: var(--gold-ink-strong); }

.footer-bottom {
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding: 18px 20px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
}

/* ---------------------------------------------------------------- reveal */

/* Reveal styles only apply once JS confirmed itself (html.js), so the page
   is fully visible without JavaScript. */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .dot.is-online, .live-badge { animation: none; }
  .news-card, .feat { transition: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
  .now-grid { grid-template-columns: minmax(0, 1fr); }
  .board-grid { grid-template-columns: minmax(0, 1fr); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sold-grid, .stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-bottom: 44px; }
  .hero-left { max-width: 520px; margin: 0 auto; width: 100%; }
}

@media (max-width: 760px) {
  /* Solid rather than glass: this panel sits inside the topbar, which
     already has a backdrop-filter, and nested backdrop layers do not
     reliably blur what is behind the page. The artwork used to shine
     straight through the menu labels. */
  .nav {
    display: none;
    position: absolute;
    top: calc(var(--topbar-h) - 2px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-1);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 20px 44px rgba(120, 95, 55, 0.22);
    padding: 6px 14px 14px;
    gap: 0;
  }
  .nav.open { display: flex; }
  .nav > a {
    padding: 13px 10px;
    border-bottom: 1px solid rgba(176, 126, 34, 0.1);
    border-radius: 0;
  }
  .nav > a:last-of-type { border-bottom: none; }
  .nav-cta { margin-top: 8px; text-align: center; }
  .nav-account { padding: 10px; }
  .nav-toggle { display: block; }

  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .sold-grid, .stock-grid { grid-template-columns: minmax(0, 1fr); }
  .join-grid { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .podium { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .podium-spot.place-1 { order: -1; }
  .podium-art { height: 92px; }
  .podium-art img { max-height: 92px; }
  .classbars li { grid-template-columns: 110px 1fr 84px; gap: 10px; font-size: 12.5px; }
  .tab { font-size: 13px; padding: 7px 14px; }
  .auth-wrap, .support-grid, .account-grid, .grow-grid { grid-template-columns: minmax(0, 1fr); }
  .region-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regions-head { flex-direction: column; gap: 14px; }
  .char-grid, .vote-grid { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); font-size: 13.5px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .auth-card { padding: 20px 18px; }
  .board-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .board-head, .board-note, .board-table th, .board-table td { padding-left: 14px; padding-right: 14px; }
  .seg { width: 100%; }
  .seg-btn { flex: 1; }
  /* Portrait screens: "cover" would scale the 16:9 artwork by height and
     crop away most of its width, leaving a magnified middle strip with the
     logo cut off. Fitting it to the width instead shows the whole scene as
     a banner under the bars, and the overlay fades it out exactly where the
     image ends (768/1376 of the viewport width, so 56vw). */
  /* Auf dem Handy beginnt das Bildband erst unter den Leisten - darueber
     laege es sonst hinter zwei Balken, die fast die halbe Bildhoehe
     ausmachen. Der Inhalt beginnt vollstaendig unterhalb des Bandes. */
  .hero {
    padding-top: calc(55.8vw + 20px);
  }
  .hero-bg {
    /* Kleinere Fassung: auf dem Handy wird nur 375 px breit angezeigt,
       das grosse Bild waere reine Dekodierarbeit. Gleiches Verhaeltnis
       (760x424), deshalb dieselben 55.8% plus der Versatz nach unten. */
    padding-top: calc(55.8% + var(--chrome-h));
    background-image: url("../assets/hero-narrow.jpg");
    background-size: 100% auto;
    background-position: center var(--chrome-h);
  }
  .hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(246, 241, 228, 0.72) 0,
        rgba(246, 241, 228, 0.04) calc(var(--chrome-h) + 9vw),
        rgba(246, 241, 228, 0.34) calc(var(--chrome-h) + 40vw),
        var(--bg-0) calc(var(--chrome-h) + 56vw));
  }
  .hero-bg::before { display: none; }

  /* The same entries sit in the news band below, so the hero stays short. */
  .hero .feed { display: none; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { flex: 1 1 auto; }
  .feed-when { width: auto; font-size: 11px; }
  .feed-row .tag { display: none; }
  .champ-sprite { width: 72px; height: 92px; }
  .champ-sprite img { max-height: 92px; max-width: 72px; }
  .board-table th, .board-table td { padding-left: 14px; padding-right: 14px; }
  .board-title, .champion, .board-more { padding-left: 14px; padding-right: 14px; }
  .join-media { min-height: 200px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sched { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
  .band { padding: 46px 0; }

  /* Two sticky bars eat into a phone screen, so the strip gets tighter.
     The variable drives the strip height and the artwork's reach behind
     it, so it is overridden rather than the padding. */
  :root { --statusbar-h: 42px; }
  .statusbar-inner { padding: 0 14px; gap: 7px; font-size: 12.5px; }
  .chip { padding: 3px 10px; }
}

/* ------------------------------------------------- Hilfsklassen fuer die CSP

   Diese Klassen ersetzen die 17 style=""-Attribute, die vorher in den
   Vorlagen standen. Ohne sie braeuchte die Content-Security-Policy
   style-src 'unsafe-inline', und damit waere jede eingeschmuggelte
   Formatierung erlaubt.

   Warum !important bei den Abstaenden: sie ersetzen Inline-Stile, und ein
   Inline-Stil schlaegt jeden Selektor. Ohne !important wuerde etwa
   .mt-20 (eine Klasse) gegen .panel.table-panel (zwei Klassen) verlieren,
   und der Abstand waere nach dem Umbau ein anderer als vorher. Bei den
   Balkenbreiten und --rows ist es unnoetig, dort setzt sonst niemand die
   Eigenschaft. */

.m-0     { margin: 0 !important; }
.mt-0    { margin-top: 0 !important; }
.mb-0    { margin-bottom: 0 !important; }
.mt-14   { margin-top: 14px !important; }
.mt-16   { margin-top: 16px !important; }
.mt-18   { margin-top: 18px !important; }
.mt-20   { margin-top: 20px !important; }
.mt-34   { margin-top: 34px !important; }
.mb-8    { margin-bottom: 8px !important; }
.mb-16   { margin-bottom: 16px !important; }
.mb-18   { margin-bottom: 18px !important; }
.mb-20   { margin-bottom: 20px !important; }
.mw-none { max-width: none !important; }

/* Spaltenbreiten der Tabelle "Most read wiki pages" in account.php. */
.col-52 { width: 52%; }
.col-16 { width: 16%; }

/* Zeilenzahl des Event-Rasters auf der Startseite. Der Wert ist
   ceil(Anzahl / 2), bleibt also klein; acht deckt sechzehn Termine ab. */
.sched.rows-1 { --rows: 1; }
.sched.rows-2 { --rows: 2; }
.sched.rows-3 { --rows: 3; }
.sched.rows-4 { --rows: 4; }
.sched.rows-5 { --rows: 5; }
.sched.rows-6 { --rows: 6; }
.sched.rows-7 { --rows: 7; }
.sched.rows-8 { --rows: 8; }

/* Balkenbreiten in 5-Prozent-Schritten. Die Balken sind 74 bzw. wenige
   hundert Pixel breit und dekorativ; der exakte Wert steht als Zahl
   daneben, feinere Abstufung waere auf dem Schirm nicht zu sehen. */
.w-0   { width: 0; }
.w-5   { width: 5%; }
.w-10  { width: 10%; }
.w-15  { width: 15%; }
.w-20  { width: 20%; }
.w-25  { width: 25%; }
.w-30  { width: 30%; }
.w-35  { width: 35%; }
.w-40  { width: 40%; }
.w-45  { width: 45%; }
.w-50  { width: 50%; }
.w-55  { width: 55%; }
.w-60  { width: 60%; }
.w-65  { width: 65%; }
.w-70  { width: 70%; }
.w-75  { width: 75%; }
.w-80  { width: 80%; }
.w-85  { width: 85%; }
.w-90  { width: 90%; }
.w-95  { width: 95%; }
.w-100 { width: 100%; }