/* ============================================================
   MT2GOLD · sections.css — Kopf der Seite und das Raster darunter
   Hero · Servertafel · Einstieg · Portal-Raster · Seitenspalte

   Die Inhaltsblöcke IM Raster (Neuigkeiten, Rangliste, FAQ, Finale)
   stehen in inhalte.css. Getrennt, weil diese Datei sonst über
   500 Zeilen gewachsen wäre.
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(120px, 15vh, 170px) var(--pad) clamp(20px, 3vh, 36px);
  display: grid;
  place-items: center;
  text-align: center;
}
.hero-inner { max-width: 860px; display: flex; flex-direction: column; align-items: center; }
.hero-logo {
  width: min(82vw, 560px);
  height: auto;
  /* Logo-PNG hat schwarzen Grund: screen-Blend macht Schwarz unsichtbar,
     das Gold bleibt voll erhalten. Maske federt die Ränder zusätzlich ab. */
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(78% 78% at 50% 50%, #000 55%, transparent 88%);
  mask-image: radial-gradient(78% 78% at 50% 50%, #000 55%, transparent 88%);
  filter: drop-shadow(0 14px 46px rgba(217, 166, 58, 0.3));
}
.hero-claim {
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  letter-spacing: 0.04em;
  color: var(--paper);
}
.hero-claim em {
  font-style: normal;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-claim em { background: none; color: var(--gold-300); }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8rem; justify-content: center; }
.hero-actions.center { justify-content: center; }

/* ============================================================
   SERVERTAFEL — was für ein Server ist das?
   ============================================================
   Aufbau nach Baerim: eine Reihe „Wertplatten", jede mit goldener
   Beschriftung oben und hellem Wert darunter. Genau so stapelt der
   Begleiter-Bildschirm dort seine Werte neben dem Porträt.

   Die Platten sind bewusst gleich breit und gleich laut: keine davon
   ist wichtiger als die andere, und keine soll wie eine Sensations-
   zahl wirken. Bei einem Server mit zwei Konten ist Zurückhaltung
   glaubwürdiger als Größe.                                         */
.servertafel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1px;                       /* die Fugen sind die Trennlinien */
  margin-top: 2rem;
  background: var(--haar-linie);  /* scheint durch die Fugen */
  border: 1px solid var(--haar-linie);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}
/* flex-basis auto, nicht 108px: sonst bekommt jede Platte gleich viel
   Platz, und „Deutsch" ragt aus seiner heraus, während in „×6" die Hälfte
   leer bleibt. So richtet sich jede Platte nach ihrem Inhalt und wächst
   dann gleichmäßig mit. */
.servertafel > div {
  flex: 1 1 auto;
  padding: 13px clamp(12px, 1.6vw, 20px);
  background: linear-gradient(180deg, var(--platte-hell) 0%, var(--platte) 60%);
  text-align: center;
}
.servertafel dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  /* Goldene Beschriftung, heller Wert — die Grundregel aus den
     Baerim-Fenstern. Vorher war es genau andersherum: die Zahl golden,
     die Beschriftung grau. */
  color: var(--gold-500);
  white-space: nowrap;
}
.servertafel dd {
  margin-top: 3px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: #f4ead8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

/* Statuszeile unter der Tafel — klein, weil sie klein bleiben darf. */
.hero-statusline {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 1.1rem;
  font-size: 0.84rem;
  color: var(--paper-dim);
}
.hero-statusline .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5da065;
  animation: pulse 2.4s infinite;
}
.hero-statusline.offline .dot { background: var(--crimson); animation: none; }
/* Solange die erste Antwort aussteht: grau und still. Ein grüner,
   pulsierender Punkt, bevor irgendetwas geprüft wurde, wäre eine
   Behauptung. */
.hero-statusline.unbekannt .dot { background: var(--paper-mute); animation: none; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(93, 160, 101, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(93, 160, 101, 0); }
  100% { box-shadow: 0 0 0 0 rgba(93, 160, 101, 0); }
}

/* ============================================================
   EINSTIEG — die drei Schritte ins Spiel
   ============================================================
   Zeilenform 1:1 aus den Baerim-Listen: hohe Zeile, links ein Symbol
   im Sockel, daneben Text, rechts die Aktion. Dort sind das
   Kategorien und Dungeons — hier sind es die drei Schritte.        */
.schritte { display: grid; gap: 9px; }
.schritte li {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 18px);
  min-height: 62px;
  padding: 13px clamp(12px, 1.8vw, 18px);
  background: linear-gradient(180deg, var(--platte-hell) 0%, var(--platte) 55%);
  border: 1px solid var(--haar-linie);
  border-radius: var(--radius);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.schritte li:hover { border-color: var(--haar-hell); transform: translateY(-1px); }
/* Die Nummer sitzt in einer Raute — dasselbe Ornament wie im Logo und
   in den Kopfbändern. Ein Motiv, überall dasselbe. */
.schritt-nr {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #2a1e0a;
  background: var(--gold-grad);
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.schritt-text { flex: 1 1 auto; min-width: 0; }
.schritt-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--paper);
}
.schritt-text p { font-size: 0.87rem; color: var(--paper-dim); margin-top: 2px; }
.schritt-text code {
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 0.92em;
  color: var(--gold-300);
  background: rgba(6, 5, 4, 0.6);
  border: 1px solid var(--haar-linie);
  border-radius: 2px;
  padding: 1px 6px;
  white-space: nowrap;
}
.schritt-tat { flex: none; padding: 11px 20px; font-size: 0.72rem; }
/* Kein Knopf, sondern eine Angabe — für Schritte, die man nicht
   anklicken kann. Baerim beschriftet Gesperrtes mit dem Grund, statt
   es nur auszugrauen; hier steht deshalb der Weg dabei. */
.schritt-hinweis {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper-mute);
  border: 1px dashed var(--haar-linie);
  border-radius: var(--radius);
  padding: 9px 14px;
  white-space: nowrap;
}

/* ---------- Portal-Raster ---------- */
.portal { max-width: var(--max); margin: 0 auto; padding: clamp(22px, 3vh, 40px) var(--pad) 0; }
.portal-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}
.portal-side { display: grid; gap: clamp(14px, 2vh, 20px); }
.portal-main { display: grid; gap: clamp(14px, 2vh, 20px); }

/* ---------- Anmeldung ---------- */
.login-form label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Beschriftungen in Gold — Baerim-Regel. Vorher waren sie stumpfgrau
     und der Kasten wirkte dadurch tot. */
  color: var(--gold-500);
  margin-bottom: 12px;
}
.login-form input {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: rgba(6, 5, 4, 0.7);
  border: 1px solid var(--haar-linie);
  border-radius: var(--radius);
  color: var(--paper);
  font: inherit;
  padding: 11px 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login-form input:focus {
  outline: none;
  border-color: var(--gold-300);
  box-shadow: 0 0 0 3px rgba(217, 166, 58, 0.18);
}
.login-form .btn { margin-top: 4px; }
.form-links {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 12px;
  font-size: 0.8rem;
}
.form-links a { color: var(--gold-500); }
.form-links a:hover { color: var(--gold-100); }

/* ---------- Serverstatus ---------- */
.status-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--haar-linie);
  font-size: 0.9rem;
}
.status-list li:last-child { border-bottom: 0; }
/* Beschriftung gold, Wert weiss und rechtsbündig — genau so stehen die
   Schlüssel-Wert-Zeilen in den Baerim-Detailspalten. */
.status-list span { color: var(--gold-500); font-size: 0.78rem;
                    text-transform: uppercase; letter-spacing: 0.1em; }
.status-list strong { color: var(--paper); font-family: var(--font-display); text-align: right; }
.status-list strong.ok { color: #6db575; }
.status-list strong.off { color: var(--crimson); }

/* Erklärender Kleinsatz unter einer Liste. */
.kleingedruckt {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--haar-linie);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--paper-mute);
}

/* ---------- Helden-Widget (Top 3) ---------- */
.heroes { display: grid; gap: 7px; }
.heroes li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  background: linear-gradient(180deg, var(--platte-hell) 0%, var(--platte) 60%);
  border: 1px solid var(--haar-linie);
  border-radius: var(--radius);
}
.heroes li:first-child { border-color: rgba(217, 166, 58, 0.45); }
.heroes .h-rank {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: #241a08;
  background: var(--gold-grad);
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.heroes li:nth-child(2) .h-rank { background: linear-gradient(180deg, #e8e8e8, #9c9c9c); }
.heroes li:nth-child(3) .h-rank { background: linear-gradient(180deg, #d3925c, #8a5a30); }
.heroes .h-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--paper);
}
.heroes .h-meta { font-size: 0.76rem; color: var(--paper-mute); }
.heroes .h-val {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-300);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ---------- Event-Countdown ---------- */
.event-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--paper);
  margin-bottom: 12px;
}
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.countdown div {
  text-align: center;
  background: linear-gradient(180deg, var(--platte-hell) 0%, var(--platte) 60%);
  border: 1px solid var(--haar-linie);
  border-radius: var(--radius);
  padding: 10px 4px;
}
.countdown b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .countdown b { background: none; color: var(--gold-300); }
}
.countdown span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--paper-mute);
}

/* ---------- Discord-Kasten ---------- */
.panel.discord {
  display: flex; align-items: center; gap: 14px;
  padding-left: clamp(14px, 2vw, 20px);
  padding-right: clamp(14px, 2vw, 20px);
  color: var(--paper-dim);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.panel.discord:hover { border-color: var(--haar-hell); transform: translateY(-2px); }
.panel.discord svg { color: var(--gold-300); flex: none; }
.panel.discord strong { color: var(--paper); font-family: var(--font-display); letter-spacing: 0.04em; }
.panel.discord span { font-size: 0.84rem; line-height: 1.45; }

/* ============================================================
   Responsive — Kopf und Raster
   ============================================================ */
@media (max-width: 1000px) {
  .portal-grid { grid-template-columns: 1fr; }
  /* „start" statt „stretch": auf dem Tablett stehen zwei Fenster
     nebeneinander, und das kürzere wurde bisher auf die Höhe des längeren
     gezogen — beim Serverstatus blieb dadurch eine halbe Fensterhöhe leer.
     Jedes Fenster ist jetzt so hoch wie sein Inhalt. */
  .portal-side { grid-template-columns: 1fr 1fr; align-items: start; }
  .portal-side .panel.discord { grid-column: 1 / -1; }
  /* Der Event-Kasten geht über beide Spalten: er ist der Grund, warum ein
     Wiederkehrer die Seite öffnet, und soll nicht halbiert werden. */
  .portal-side #eventPanel { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .portal-side { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .stage-pagoda { display: none; }
  /* Auf dem Handy wird aus der Servertafel ein Raster: fünf Platten
     nebeneinander wären je 60 px breit und unlesbar. */
  .servertafel { display: grid; grid-template-columns: 1fr 1fr; }
  .servertafel > div:last-child { grid-column: 1 / -1; }
  /* Die Schrittzeile bricht um: Nummer und Titel oben, Taste darunter
     über die volle Breite — kleiner als 44 px darf sie nicht werden,
     sonst trifft sie kein Daumen. */
  .schritte li { flex-wrap: wrap; }
  /* calc, nicht 100 %: width:100% zählt den linken Aussenabstand NICHT mit,
     die Taste stand deshalb 46 Pixel über den Kartenrand hinaus und wurde
     rechts abgeschnitten. Gemessen im Handy-Rendering bei 390 Pixel. */
  .schritt-tat, .schritt-hinweis {
    width: calc(100% - 46px);
    margin-left: 46px;
  }
  .schritt-hinweis { text-align: center; }
}