/* ============================================================
   MT2GOLD · inhalte.css — die Inhaltsblöcke in den Fenstern
   Neuigkeiten · Stärken · Rangliste · Häufige Fragen · Finale

   Abgetrennt von sections.css (Kopf und Raster der Seite), damit beide
   Dateien unter 500 Zeilen bleiben.

   Durchgängig gilt die Baerim-Regel „drei Helligkeitsstufen":
   Fensterfläche → Kopfband → Zeilenplatte. Jede Zeile, jede Karte, jede
   Tabellenzeile hier benutzt dieselbe Plattenfarbe. Vorher hatte fast
   jeder Block seinen eigenen Goldschleier — daher wirkte die Seite
   zusammengesetzt statt wie ein Stück.
   ============================================================ */

/* ---------- Neuigkeiten ---------- */
.news-list { display: grid; gap: 9px; }
/* Leerzustand: Wenn nichts da ist, sagt das ein einzelner Satz — der aber
   auf einer eigenen Platte steht und ein Stück Höhe bekommt. Ein Fenster,
   das auf drei Zeilen zusammenschnurrt, sobald der Inhalt fehlt, sieht aus
   wie ein Ladefehler. Mit Platte sieht es aus wie eine Antwort.
   Wichtig, weil das der Normalfall ist: account.hp_news ist heute leer. */
.news-list > .rank-note:only-child {
  display: grid;
  place-items: center;
  min-height: 132px;
  margin: 0;
  padding: 22px;
  background: linear-gradient(180deg, var(--platte-hell) 0%, var(--platte) 55%);
  border: 1px solid var(--haar-linie);
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 38ch;
  margin-inline: auto;
  width: 100%;
}
.nitem {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 16px;
  background: linear-gradient(180deg, var(--platte-hell) 0%, var(--platte) 55%);
  border: 1px solid var(--haar-linie);
  /* Der farbige Streifen links sagt auf einen Blick, worum es geht —
     dieselbe Rolle wie die Kategoriesymbole in den Baerim-Listen. */
  border-left: 3px solid var(--gold-700);
  border-radius: var(--radius);
  transition: background 0.25s, border-color 0.25s;
}
.nitem:hover { border-color: var(--haar-hell); }
.nitem.hidden { display: none; }
.ntag {
  flex: none;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ntag.event { background: rgba(168, 53, 42, 0.22); color: #e08a80; border: 1px solid rgba(168, 53, 42, 0.5); }
.ntag.patch { background: rgba(217, 166, 58, 0.16); color: var(--gold-300); border: 1px solid rgba(217, 166, 58, 0.45); }
.ntag.fix   { background: rgba(92, 123, 163, 0.18); color: #9db8d8; border: 1px solid rgba(92, 123, 163, 0.5); }
.nbody h3 { margin-bottom: 4px; }
.nbody p { font-size: 0.9rem; color: var(--paper-dim); }
.nbody time {
  display: block;
  margin-top: 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--paper-mute);
}

/* ---------- Stärken-Kacheln ---------- */
.usp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 18px);
}
.usp {
  background: linear-gradient(180deg, var(--flaeche-hell) 0%, var(--panel-bg) 40%);
  border: 1px solid var(--haar-linie);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.usp:hover { border-color: var(--haar-hell); transform: translateY(-2px); }
.usp-glyph {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold-500);
  opacity: 0.65;
  margin-bottom: 8px;
}
.usp h3 { margin-bottom: 5px; font-size: 1rem; }
.usp p { font-size: 0.86rem; color: var(--paper-dim); }

/* ---------- Rangliste ---------- */
.rank-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--haar-linie);
  border-radius: var(--radius);
}
.rank-table { width: 100%; border-collapse: collapse; min-width: 560px; }
/* Die Kopfzeile der Tabelle bekommt dasselbe Band wie ein Fensterkopf —
   ein Muster, nicht zwei. */
.rank-table th {
  font-family: var(--font-display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-500);
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--haar-linie);
  background: var(--band);
  white-space: nowrap;
}
.rank-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--haar-linie);
  font-size: 0.92rem;
  color: var(--paper-dim);
  white-space: nowrap;
  background: var(--flaeche);
}
.rank-table tbody tr { transition: background 0.2s; }
.rank-table tbody tr:hover td { background: var(--platte); }
.rank-table tbody tr:last-child td { border-bottom: 0; }
/* Die ersten drei Plätze werden über die Plakette markiert, nicht mehr
   über einen Farbverlauf quer durch die Zeile. Der Verlauf sah bei drei
   von vier gewerteten Charakteren so aus, als wäre die halbe Tabelle
   hervorgehoben. */
.rank-table tr.top1 td { background: linear-gradient(90deg, rgba(217, 166, 58, 0.12), var(--flaeche) 60%); }
.r-badge {
  display: inline-grid; place-items: center;
  width: 25px; height: 25px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  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%);
}
tr.top2 .r-badge { background: linear-gradient(180deg, #e8e8e8, #9c9c9c); }
tr.top3 .r-badge { background: linear-gradient(180deg, #d3925c, #8a5a30); }
.r-plain { font-family: var(--font-display); font-weight: 700; color: var(--gold-700); }
.rank-table .r-name { color: var(--paper); font-weight: 500; }
.rank-table .r-val { color: var(--gold-300); font-weight: 700; font-family: var(--font-display); }
/* Reichsfarbe als Punkt. Rot = Shinsoo, Gold = Chunjo, Blau = Jinno —
   dieselbe Zuordnung wie im Spiel. */
.emp {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 7px;
}
.emp.e1 { background: var(--realm-red); }
.emp.e2 { background: var(--realm-gold); }
.emp.e3 { background: var(--realm-blue); }
.rank-note {
  margin-top: 12px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--paper-mute);
}

/* ---------- Häufige Fragen ---------- */
.faq { display: grid; gap: 7px; }
.faq details {
  border: 1px solid var(--haar-linie);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--platte-hell) 0%, var(--platte) 55%);
  padding: 0 18px;
  transition: border-color 0.3s;
}
.faq details[open] { border-color: var(--haar-hell); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 32px 15px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  position: relative;
  color: var(--paper);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary::after {
  content: "+";
  position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  color: var(--gold-300);
  font-size: 1.3rem;
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--paper-dim); padding-bottom: 16px; font-size: 0.92rem; }

/* ---------- Finale ---------- */
.finale {
  text-align: center;
  padding: clamp(70px, 10vh, 120px) var(--pad) 0;
}
.finale h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.finale .hero-actions { margin-top: 2.2rem; }

/* ============================================================
   Responsive — Inhaltsblöcke
   ============================================================ */
@media (max-width: 760px) {
  .usp-row { grid-template-columns: 1fr; }
  /* Auf dem Handy fällt der Kategorie-Streifen unter die Überschrift,
     damit die Meldung nicht auf eine Handbreit Text zusammenschrumpft. */
  .nitem { flex-direction: column; gap: 9px; }
  .ntag { margin-top: 0; align-self: flex-start; }
}