/* Raijin2 – Look "Royal Storm" (wie Launcher und Login im Client)
   Navy-Basis, Glas-Panels, weisse Schrift, Elektrisch-Blau als Akzent.
   Schriften: Cinzel (Ueberschriften), Barlow (Text) – beide SIL OFL, selbst gehostet. */

@font-face { font-family: "Cinzel"; src: url("../fonts/Cinzel-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --navy: #071338;
  --navy-deep: #040b24;
  --panel: #0b1d55;
  --panel-glass: rgba(11, 29, 85, 0.72);
  --field: rgba(7, 19, 56, 0.7);
  --line: #5b8cff;
  --line-soft: rgba(91, 140, 255, 0.32);
  --line-faint: rgba(91, 140, 255, 0.16);
  --accent: #3d7bff;
  --accent-hover: #6fa0ff;
  --text: #ffffff;
  --muted: #afc3ee;
  --ok: #5fe3a1;
  --bad: #ff7b86;
  --warn: #ffd166;
  --shinsoo: #ff6b6b;
  --chunjo: #ffd166;
  --jinno: #6fa0ff;
  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 1180px;
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --shadow: 0 18px 50px rgba(2, 8, 30, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--navy-deep); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 82% 0, rgba(61, 123, 255, 0.2), transparent 62%) no-repeat,
    radial-gradient(900px 700px at -10% 900px, rgba(61, 123, 255, 0.1), transparent 60%) no-repeat,
    linear-gradient(180deg, var(--navy) 0, var(--navy-deep) 1600px) no-repeat,
    var(--navy-deep);
}
main { flex: 1 0 auto; outline: none; }
img { max-width: 100%; height: auto; }
a { color: var(--accent-hover); text-underline-offset: 0.18em; }
a:hover { color: #fff; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
kbd {
  display: inline-block; min-width: 2.1em; padding: 0.05em 0.5em; margin-left: 0.4em;
  font: 600 0.78rem/1.6 var(--font-body); text-align: center; vertical-align: 0.15em;
  color: #dfe9ff; background: rgba(61, 123, 255, 0.2); border: 1px solid var(--line-soft); border-bottom-width: 2px; border-radius: 6px;
}
:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 820px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 62ch; }
.pos { color: var(--ok); }
.neg { color: var(--bad); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.show-sm { display: none; }
.placeholder { color: var(--warn); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: var(--navy); border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ---------- Panels ---------- */
.panel {
  background: var(--panel-glass);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 24px 28px;
}
.panel.empty { color: var(--muted); text-align: center; padding: 40px 24px; }
.after-panel { margin-top: 16px; }
.back-link { margin-top: 24px; }
.fineprint { color: var(--muted); font-size: 0.92rem; margin-top: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 46px; padding: 0 22px;
  font: 600 1rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
  color: #fff; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn--ghost { border-color: var(--line-soft); background: rgba(11, 29, 85, 0.5); }
.btn--ghost:hover, .btn--ghost[aria-current="page"] { border-color: var(--line); background: rgba(61, 123, 255, 0.18); color: #fff; }
.btn--outline { border-color: rgba(255, 255, 255, 0.75); background: rgba(7, 19, 56, 0.35); }
.btn--outline:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }
.btn--text { color: var(--muted); padding: 0 10px; }
.btn--text:hover { color: #fff; }
.btn--danger { border-color: rgba(255, 123, 134, 0.6); color: var(--bad); }
.btn--danger:hover { background: rgba(255, 123, 134, 0.14); color: #fff; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 0.95rem; }
.btn--lg { min-height: 60px; padding: 0 30px; font-size: 1.1rem; }
.btn--block { width: 100%; }
.btn.is-disabled, .btn:disabled { opacity: 0.4; pointer-events: none; }
/* "Spielen"-Knopf wie im Launcher: helles Silber, Cinzel, Navy-Schrift */
.btn--play {
  min-height: 60px; padding: 0 38px;
  font: 700 1.2rem/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
  color: #0a1a4a; background: linear-gradient(180deg, #ffffff 0%, #d9e5ff 100%);
  border-color: #fff; box-shadow: 0 0 0 1px rgba(111, 160, 255, 0.6), 0 10px 34px rgba(61, 123, 255, 0.5);
}
.btn--play:hover { color: #0a1a4a; background: #fff; box-shadow: 0 0 0 1px #6fa0ff, 0 12px 44px rgba(111, 160, 255, 0.75); }

/* ---------- Hinweise ---------- */
.notice-bar { background: linear-gradient(90deg, #7a4d00, #a86b00); color: #fff; padding: 9px 0; font-size: 0.98rem; text-align: center; }
.alert { padding: 13px 16px; margin: 0 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: rgba(61, 123, 255, 0.14); }
.alert a { color: #fff; }
.alert--error { border-color: rgba(255, 123, 134, 0.6); background: rgba(255, 90, 105, 0.14); }
.alert--success { border-color: rgba(95, 227, 161, 0.55); background: rgba(95, 227, 161, 0.12); }
.flash-stack { padding-top: 18px; }
.flash-stack .alert:last-child { margin-bottom: 0; }

.tag { display: inline-block; padding: 2px 10px; font-size: 0.82rem; font-weight: 600; line-height: 1.6; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--muted); white-space: nowrap; }
.tag--patch, .tag--paid { color: var(--ok); border-color: rgba(95, 227, 161, 0.45); }
.tag--event, .tag--pending { color: var(--warn); border-color: rgba(255, 209, 102, 0.45); }
.tag--maintenance, .tag--failed, .tag--cancelled { color: var(--bad); border-color: rgba(255, 123, 134, 0.45); }

/* ---------- Kopfzeile ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(5, 13, 42, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-faint); }
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; flex: none; margin-left: -8px; }
.brand img { display: block; width: 112px; height: 56px; }
.site-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 16px; }
.site-nav__main { display: flex; gap: 2px; }
.site-nav__main a { display: block; padding: 8px 13px; color: #e6eeff; font-weight: 500; text-decoration: none; border-radius: 8px; position: relative; }
.site-nav__main a:hover { color: #fff; background: rgba(61, 123, 255, 0.16); }
.site-nav__main a[aria-current="page"] { color: #fff; }
.site-nav__main a[aria-current="page"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--accent-hover); }
.site-nav__side { display: flex; align-items: center; gap: 8px; }
.inline-form { display: inline; margin: 0; }
.lang-switch { display: inline-flex; margin-right: 6px; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.lang-switch span { padding: 5px 9px; color: var(--muted); }
.lang-switch span.is-active { background: rgba(61, 123, 255, 0.28); color: #fff; }
.lang-switch:hover span:not(.is-active) { color: #fff; }
.nav-toggle { display: none; }

/* ---------- Hero (Startseite) ---------- */
/* Der Hero fuellt genau die sichtbare Hoehe: Er beginnt unter der (klebenden) Navigation ganz oben und endet am
   unteren Fensterrand. --hero-top setzt site.js, falls darueber noch etwas steht (Wartungsbanner).
   Aufbau: Der Block Logo + Ueberschrift + Text + Knoepfe steht mittig im freien Raum, die Statusleiste unten. Ueberschrift
   und Text reservieren feste Zeilenhoehen - so stehen alle Teile in DE und EN an derselben Stelle, egal wie lang der Text ist.
   Passt der Inhalt nicht in ein sehr niedriges Fenster, wird der Hero hoeher statt etwas zu ueberdecken. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: calc(100vh - var(--hero-top, 0px)); min-height: calc(100svh - var(--hero-top, 0px));
  margin-top: -69px; padding-top: 69px;
}
.hero__art { position: absolute; inset: 0; z-index: -2; }
/* Das Artwork steht absolut still: keine Animation, kein transform. */
.hero__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 18%; }
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 13, 42, 0.94) 0%, rgba(7, 19, 56, 0.78) 28%, rgba(7, 19, 56, 0.2) 56%, rgba(7, 19, 56, 0) 72%),
    linear-gradient(180deg, rgba(5, 13, 42, 0.55) 0%, rgba(7, 19, 56, 0) 22%, rgba(7, 19, 56, 0) 70%, rgba(7, 19, 56, 0.86) 100%);
}
/* Blitz-Effekt (site.js): weiches Aufleuchten nur im Blitz-Bereich des Bildes + feine Blitzlinien auf einer Zeichenflaeche.
   Beides liegt UNTER dem Verlauf von .hero__art::after - die Textseite bleibt dunkel und gut lesbar. */
.hero__flash {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(38% 46% at var(--flash-x, 78%) var(--flash-y, 24%), rgba(196, 220, 255, 0.5), rgba(120, 165, 255, 0.16) 55%, transparent 76%);
}
.hero__bolts { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
/* Rauch-Effekt (hero-fluid.js, WebGL): liegt ueber dem Bild, unter Text und Knoepfen. Nimmt keine Mausereignisse an,
   wird aufgehellt eingeblendet (screen) und ist in der Deckkraft begrenzt, damit Bild und Text erkennbar bleiben.
   Ohne WebGL oder bei "Bewegung reduzieren" bleibt die Flaeche leer. */
/* Im Hero wird mit gedrueckter Maustaste "gemalt": Text dort nicht markieren, Bilder nicht ziehen. */
.hero { -webkit-user-select: none; user-select: none; }
.hero img { -webkit-user-drag: none; }
.hero__fluid { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: 0.8; }
.hero__content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: clamp(14px, 4vh, 48px); padding-bottom: clamp(14px, 2.6vh, 28px); }
.hero__logo { display: block; width: min(clamp(230px, 34vw, 470px), 41vh); height: auto; margin: 0 0 4px -3.2%; filter: drop-shadow(0 6px 30px rgba(61, 123, 255, 0.55)); }
.hero h1 { max-width: 15ch; font-size: clamp(1.7rem, min(4vw, 5.4vh), 3.1rem); min-height: 3.6em; text-shadow: 0 2px 22px rgba(4, 11, 36, 0.8); margin-bottom: 0.4em; }
.hero__pitch { max-width: 50ch; font-size: clamp(1.02rem, 1.4vw, 1.18rem); min-height: 6.4em; color: #e3ecff; text-shadow: 0 1px 12px rgba(4, 11, 36, 0.9); margin-bottom: clamp(12px, 2.4vh, 1.6em); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__status { padding-bottom: clamp(16px, 3vh, 32px); }

/* Statusleiste: Echo der Leiste unten im Launcher */
.status-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px;
  padding: 16px 24px;
  background: rgba(8, 21, 64, 0.78); border: 1px solid var(--line-soft); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow);
}
.status-bar p { margin: 0; }
.status-bar__state { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.status-bar__players strong { font-size: 1.5rem; font-weight: 600; margin-right: 4px; font-variant-numeric: tabular-nums; }
.status-bar__players { color: var(--muted); }
.status-bar__players strong { color: #fff; }
.status-bar__channels { display: flex; gap: 8px; }
.channel { padding: 4px 12px; font-size: 0.88rem; font-weight: 600; border-radius: 8px; border: 1px solid rgba(175, 195, 238, 0.4); color: var(--muted); }
.channel--on { border-color: var(--ok); color: #eafff4; background: rgba(95, 227, 161, 0.12); }
.channel--off { border-color: var(--bad); color: #ffe3e6; background: rgba(255, 123, 134, 0.1); }
.status-bar__totals { display: flex; gap: 26px; margin: 0 0 0 auto; }
.status-bar__totals div { display: flex; flex-direction: column-reverse; }
.status-bar__totals dt { font-size: 0.85rem; color: var(--muted); }
.status-bar__totals dd { margin: 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #8a97b8; flex: none; }
.dot--on { background: var(--ok); box-shadow: 0 0 0 4px rgba(95, 227, 161, 0.18), 0 0 14px rgba(95, 227, 161, 0.8); }
.dot--off { background: var(--bad); box-shadow: 0 0 0 4px rgba(255, 123, 134, 0.18); }

/* ---------- Abschnitte ---------- */
.section { padding: 46px 0; }
.section--tight { padding: 30px 0 64px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.section__head h2 { margin: 0; }
.section h2 + .lead { margin-top: -0.2em; margin-bottom: 1.3em; }
.link-more { font-weight: 500; }
.h-section { font-size: 1.35rem; margin: 40px 0 14px; }
.h-section:first-child { margin-top: 0; }
.h-sub { margin: 22px 0 10px; }
.duo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.duo--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.page-head { position: relative; isolation: isolate; padding: 56px 0 34px; overflow: hidden; border-bottom: 1px solid var(--line-faint); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/hero-1280.webp") 60% 14% / cover no-repeat; opacity: 0.5; }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 13, 42, 0.96) 0%, rgba(7, 19, 56, 0.82) 45%, rgba(7, 19, 56, 0.45) 100%), linear-gradient(180deg, transparent 40%, var(--navy) 100%); }
.page-head--plain::before { display: none; }
.page-head h1 { margin-bottom: 0.25em; }
.page-head .lead { margin: 0; color: #d5e1ff; }
.page-head__meta { display: flex; align-items: center; gap: 12px; color: var(--muted); margin-bottom: 10px; }
.page-head .tabs { margin-top: 18px; }

/* Schritte (echte Reihenfolge: registrieren, laden, spielen) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: step; border-top: 1px solid var(--line-soft); margin-top: 20px; }
.steps li { counter-increment: step; position: relative; padding: 22px 28px 6px 0; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--line-faint); }
.steps li::before { content: counter(step); display: block; font: 700 2.4rem/1 var(--font-display); color: var(--accent-hover); margin-bottom: 10px; }
.steps h3 a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--line); }
.steps h3 a:hover { border-bottom-color: #fff; }
.steps p { color: var(--muted); margin: 0; }

/* News */
.news-list { padding: 4px 28px; }
.news-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 6px 22px; align-items: start; padding: 20px 0; border-top: 1px solid var(--line-faint); }
.news-row:first-child { border-top: 0; }
.news-row time { color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.news-row h2, .news-row h3 { font: 600 1.2rem/1.3 var(--font-body); letter-spacing: 0; margin: 0 0 4px; }
.news-row h2 a, .news-row h3 a { color: #fff; text-decoration: none; }
.news-row h2 a:hover, .news-row h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent-hover); }
.news-row p { margin: 0; color: var(--muted); }

/* Systeme: eine grosse Tafel mit zwei Spalten statt vieler Kacheln */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px 0; }
.feature { padding: 22px 30px; border-top: 1px solid var(--line-faint); }
.feature:nth-child(-n+2) { border-top: 0; }
.feature:nth-child(odd) { border-right: 1px solid var(--line-faint); }
.feature h3 { margin-bottom: 6px; }
.feature p { margin: 0; color: var(--muted); }

/* Wochenplan */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.week__day { padding: 16px 14px 18px; border: 1px solid var(--line-faint); border-radius: var(--radius-sm); background: rgba(11, 29, 85, 0.45); }
.week__day p { margin: 0; }
.week__name { font-size: 0.9rem; color: var(--muted); margin-bottom: 10px !important; }
.week__event { font-weight: 600; line-height: 1.25; }
.week__time { font-size: 0.92rem; color: #dfe9ff; font-variant-numeric: tabular-nums; margin: 4px 0 8px !important; }
.week__effect { font-size: 0.9rem; color: var(--muted); line-height: 1.4; }
.week__day.is-empty { background: transparent; border-style: dashed; }
.week__day.is-today { border-color: var(--line); background: rgba(61, 123, 255, 0.2); box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(61, 123, 255, 0.25); }
.week__today { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 600; }

.discord h2 { font-size: 1.35rem; }
.discord p { color: var(--muted); }
.discord .placeholder { margin: 16px 0 0; font-size: 0.95rem; }

/* ---------- Tabellen ---------- */
.table-wrap { padding: 6px 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 18px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line-faint); }
.table th.num, .table td.num { text-align: right; }
.table thead th, .table thead td { border-top: 0; font-size: 0.85rem; font-weight: 500; color: var(--muted); white-space: nowrap; padding-top: 10px; padding-bottom: 10px; }
.table tbody th { font-weight: 600; }
.table tbody tr:hover { background: rgba(61, 123, 255, 0.08); }
.table .sub { font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.table .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.table .actions form { margin: 0; }
.table--log .detail { font-size: 0.85rem; color: var(--muted); word-break: break-word; max-width: 46ch; }
.col-rank { width: 76px; }
.rank { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.rank--1, .rank--2, .rank--3 { font-family: var(--font-display); font-size: 1.1rem; color: #0a1a4a; }
.rank--1 { background: linear-gradient(180deg, #ffe9a8, #f0b93b); box-shadow: 0 0 18px rgba(240, 185, 59, 0.45); }
.rank--2 { background: linear-gradient(180deg, #f3f6ff, #b9c6e6); }
.rank--3 { background: linear-gradient(180deg, #f4c9a4, #c98552); }
.empire { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.empire::before { content: ""; width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); background: currentColor; }
.empire--shinsoo::before { background: var(--shinsoo); }
.empire--chunjo::before { background: var(--chunjo); }
.empire--jinno::before { background: var(--jinno); }
.coin { display: inline-block; vertical-align: -0.28em; }

.tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-soft); border-radius: 11px; background: rgba(7, 19, 56, 0.6); flex-wrap: wrap; }
.tabs a { padding: 7px 18px; border-radius: 8px; color: var(--muted); font-weight: 600; text-decoration: none; }
.tabs a:hover { color: #fff; }
.tabs a[aria-current="page"] { background: var(--accent); color: #fff; }
.tabs--sub { margin-bottom: 18px; }
.rank-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.rank-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
form.rank-search:not(.rank-tools form) { margin-bottom: 16px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.pagination__info { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Formulare ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  font: 400 1rem/1.4 var(--font-body); color: #fff;
  background: var(--field); border: 1px solid rgba(175, 195, 238, 0.42); border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { resize: vertical; min-height: 90px; }
select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, #afc3ee 50%), linear-gradient(135deg, #afc3ee 50%, transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 13px) 20px; background-size: 6px 6px; background-repeat: no-repeat; }
select option { background: var(--navy); color: #fff; }
input::placeholder { color: rgba(175, 195, 238, 0.7); }
input:hover, select:hover, textarea:hover { border-color: rgba(175, 195, 238, 0.7); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-hover); box-shadow: 0 0 0 3px rgba(111, 160, 255, 0.3); }
.rank-search input, .rank-search select { width: auto; min-height: 38px; padding: 6px 12px; }
.rank-search select { padding-right: 36px; background-position: calc(100% - 18px) 16px, calc(100% - 12px) 16px; }
.input--pin { letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }
label { display: block; font-weight: 500; margin-bottom: 6px; }
.field { margin-bottom: 18px; min-width: 0; }
.field__help { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); line-height: 1.4; }
.field__error { margin: 6px 0 0; font-size: 0.93rem; color: var(--bad); font-weight: 500; }
.field--error input { border-color: var(--bad); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; margin: 4px 0 22px; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); }
.check label { margin: 0; font-weight: 400; }
.check .field__error { grid-column: 2; margin-top: 0; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-panel { max-width: 640px; }
.form-panel--wide { max-width: none; }

.auth { position: relative; isolation: isolate; display: flex; justify-content: center; padding: 56px 24px 80px; min-height: 70vh; }
.auth::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/hero-1280.webp") 66% 12% / cover no-repeat; opacity: 0.55; }
.auth::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 50% 30%, rgba(7, 19, 56, 0.35), rgba(7, 19, 56, 0.9) 75%), linear-gradient(180deg, transparent 60%, var(--navy-deep) 100%); }
.auth__panel { width: 100%; max-width: 440px; align-self: flex-start; padding: 32px 34px; background: rgba(11, 29, 85, 0.86); box-shadow: var(--shadow); }
.auth__panel--wide { max-width: 640px; }
.auth__panel h1 { font-size: 1.8rem; }
.auth__panel .lead { font-size: 1rem; margin-bottom: 1.4em; }
.auth__links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; font-size: 0.97rem; }
.auth__alt { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line-faint); color: var(--muted); }

/* ---------- Account ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { padding: 20px 22px; text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--line); color: inherit; }
.stat h2 { font: 500 0.92rem/1.3 var(--font-body); letter-spacing: 0; color: var(--muted); margin-bottom: 8px; }
.stat__value { font-size: 1.7rem; font-weight: 600; line-height: 1.2; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.stat__value--on { font-size: 1.1rem; color: var(--ok); }
.stat__value--off { font-size: 1.1rem; color: var(--muted); }
.stat__value--text { font-size: 1.05rem; word-break: break-all; margin-bottom: 6px; }
.stat p:last-child { margin-bottom: 0; }

.accordion { display: grid; gap: 10px; }
.accordion details { padding: 0; }
.accordion summary { padding: 16px 52px 16px 24px; font-weight: 600; cursor: pointer; list-style: none; position: relative; border-radius: var(--radius); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
.accordion details[open] > summary::after { transform: rotate(225deg); margin-top: -2px; }
.accordion details > summary:hover { background: rgba(61, 123, 255, 0.08); }
.accordion details > :not(summary) { margin-left: 24px; margin-right: 24px; }
.accordion details > p { color: var(--muted); max-width: 70ch; }
.accordion details > :last-child { margin-bottom: 22px; }
.accordion .reveal { margin-bottom: 18px; }
.accordion .reveal summary { display: inline-block; padding: 0; color: var(--accent-hover); text-decoration: underline; font-weight: 500; }
.accordion .reveal summary::after { display: none; }
.accordion .reveal > :not(summary) { margin-left: 0; }
.reveal__value { font: 600 1.5rem/1.4 var(--font-body); letter-spacing: 0.25em; margin: 8px 0 0 !important; font-variant-numeric: tabular-nums; }

/* ---------- Download ---------- */
.download { padding: 34px; margin-bottom: 36px; }
.download__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.download__option p { margin: 12px 0 0; }
.download__soon { font-size: 1.15rem; max-width: 60ch; }
.guide { counter-reset: guide; display: grid; gap: 16px; }
.guide li { counter-increment: guide; display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.guide li::before { content: counter(guide); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); font-weight: 600; color: var(--accent-hover); }
.bullet-list { display: grid; gap: 12px; }
.bullet-list li, .bonus-list li { position: relative; padding-left: 22px; }
.bullet-list li::before, .bonus-list li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--accent-hover); }
.bonus-list { display: grid; gap: 10px; margin-bottom: 18px; font-weight: 500; font-size: 1.1rem; }

/* ---------- Shop ---------- */
.balance { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; padding: 18px 26px; }
.balance span { color: var(--muted); }
.balance strong { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.packages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.package { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 18px 20px; }
.package form, .package > .btn { width: 100%; margin-top: auto; }
.package form select { margin-bottom: 8px; }
.package__coin { width: 72px; height: 72px; margin-bottom: 14px; filter: drop-shadow(0 8px 20px rgba(61, 123, 255, 0.6)); }
.package__coins { font-size: 1.75rem; font-weight: 600; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.package__coins span { display: block; font-size: 0.9rem; font-weight: 400; color: var(--muted); margin-top: 4px; }
.package__bonus { margin: 10px 0 0; font-weight: 600; color: var(--ok); min-height: 1.6em; }
.package__price { font-size: 1.2rem; font-weight: 500; margin: 10px 0 18px; }
.package--highlight { border-color: var(--line); background: linear-gradient(180deg, rgba(61, 123, 255, 0.32), rgba(11, 29, 85, 0.78) 60%); box-shadow: 0 0 0 1px var(--line), 0 18px 46px rgba(61, 123, 255, 0.3); }
.package__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); margin: 0; padding: 2px 14px; border-radius: 999px; background: var(--accent); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.facts { display: grid; gap: 0; padding: 6px 28px; margin: 0 0 22px; }
.facts div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--line-faint); }
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; text-align: right; }

/* ---------- Vote ---------- */
.vote-sites { display: grid; gap: 12px; }
.vote-site { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 20px 24px; }
.vote-site h3, .vote-site p { margin: 0; }
.vote-site__action { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vote-site__action form { margin: 0; }
.vote-site__hint { grid-column: 1 / -1; color: var(--muted); font-size: 0.93rem; }
.vote-site:target { border-color: var(--line); }

/* ---------- Fliesstext (News, Rechtliches) ---------- */
.prose { padding: 30px 34px; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font: 600 1.35rem/1.3 var(--font-body); letter-spacing: 0; margin: 1.7em 0 0.5em; }
.prose h3 { margin: 1.4em 0 0.4em; }
.prose p, .prose li { max-width: 72ch; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.3em; }
.prose li::marker { color: var(--accent-hover); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; }
.prose th, .prose td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-faint); }
.prose th { color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.prose code { padding: 1px 6px; border-radius: 5px; background: rgba(7, 19, 56, 0.8); font-size: 0.92em; }
.prose blockquote { margin: 0 0 1em; padding: 2px 0 2px 16px; border-left: 3px solid var(--line); color: var(--muted); }
.prose img { border-radius: var(--radius-sm); }
.legal p { color: #e3ecff; }

/* ---------- Fusszeile ---------- */
.site-footer { margin-top: 40px; padding: 44px 0 0; background: rgba(4, 11, 36, 0.75); border-top: 1px solid var(--line-faint); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; }
.site-footer__brand img { display: block; margin: -14px 0 4px -10px; }
.site-footer__brand p { color: var(--muted); font-size: 0.95rem; max-width: 34ch; }
.site-footer h2 { font: 600 0.95rem/1.3 var(--font-body); letter-spacing: 0; color: var(--muted); margin-bottom: 10px; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: #e6eeff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__base { padding-top: 22px; padding-bottom: 24px; margin-top: 26px; border-top: 1px solid var(--line-faint); color: var(--muted); font-size: 0.92rem; }

/* ---------- Fehlerseite ---------- */
.error-page { align-items: center; justify-content: center; padding: 24px; }
.error-page__box { max-width: 520px; text-align: center; padding: 40px 34px; }
.error-page__code { font: 700 4.4rem/1 var(--font-display); color: var(--accent-hover); margin: 10px 0 6px; }
.error-page__box h1 { font-size: 1.7rem; }
.error-page__box p { color: var(--muted); }

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width: 1080px) {
  .packages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .status-bar__totals { margin-left: 0; width: 100%; padding-top: 12px; border-top: 1px solid var(--line-faint); }
}

@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 0 14px;
    font: 600 1rem var(--font-body); color: #fff; background: rgba(11, 29, 85, 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); cursor: pointer;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .site-header__inner { flex-wrap: wrap; gap: 0 16px; }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 14px; padding: 8px 0 18px; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; }
  .no-js .nav-toggle { display: none; }
  .site-nav__main { flex-direction: column; gap: 0; }
  .site-nav__main a { padding: 12px 6px; border-bottom: 1px solid var(--line-faint); border-radius: 0; font-size: 1.08rem; }
  .site-nav__main a[aria-current="page"]::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; margin-left: -8px; }
  .site-nav__side { flex-wrap: wrap; }
  .duo, .duo--even { grid-template-columns: minmax(0, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  body { font-size: 1rem; }
  .wrap { padding: 0 16px; }
  .panel { padding: 20px; }
  .section { padding: 34px 0; }
  .hide-sm { display: none !important; }
  .show-sm { display: block; }

  .hero__art img { object-position: 64% 0; }
  .hero__art::after { background: linear-gradient(180deg, rgba(5, 13, 42, 0.5) 0%, rgba(7, 19, 56, 0) 16%, rgba(7, 19, 56, 0.55) 36%, rgba(7, 19, 56, 0.92) 54%, var(--navy) 100%); }
  .hero__content { padding-top: 0; padding-bottom: 16px; justify-content: flex-end; }
  .hero__logo { width: min(56vw, 250px, 30vh); margin-left: -3%; }
  .hero h1 { font-size: clamp(1.5rem, min(7vw, 4vh), 2.1rem); min-height: 2.4em; }
  .hero__pitch { font-size: 0.98rem; line-height: 1.5; min-height: 7.5em; margin-bottom: 14px; }
  .hero__actions { width: 100%; flex-wrap: nowrap; gap: 10px; }
  .hero__actions .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
  .hero__status { padding-bottom: 16px; }
  .status-bar { padding: 12px 16px; gap: 8px 18px; }
  .status-bar__totals { gap: 0; justify-content: space-between; padding-top: 8px; }

  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding: 18px 0 18px 58px; border-left: 0; border-top: 1px solid var(--line-faint); }
  .steps li:first-child { border-top: 0; }
  .steps li::before { position: absolute; left: 4px; top: 16px; margin: 0; }
  .news-list { padding: 2px 20px; }
  .news-row { grid-template-columns: 1fr auto; }
  .news-row time { grid-column: 1; grid-row: 1; padding: 0; font-size: 0.9rem; }
  .news-row .tag { grid-column: 2; grid-row: 1; }
  .news-row__body { grid-column: 1 / -1; }
  .features { grid-template-columns: 1fr; }
  .feature { padding: 18px 20px; }
  .feature:nth-child(-n+2) { border-top: 1px solid var(--line-faint); }
  .feature:first-child { border-top: 0; }
  .feature:nth-child(odd) { border-right: 0; }
  .week { grid-template-columns: 1fr; gap: 8px; }
  .week__day { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 12px; padding: 12px 14px; }
  .week__name { grid-row: span 3; margin: 0 !important; }
  .week__today { display: table; margin: 4px 0 0; }
  .week__time { margin: 2px 0 !important; }

  .table th, .table td { padding: 11px 12px; }
  .col-rank { width: 54px; }
  .rank-tools { flex-direction: column; align-items: stretch; }
  .tabs { display: flex; }
  .tabs a { flex: 1; text-align: center; padding: 8px 10px; }
  .rank-search input[type="search"] { flex: 1 1 100%; }
  .rank-search select { flex: 1; }

  .field-row { grid-template-columns: 1fr; }
  .auth { padding: 28px 16px 56px; }
  .auth__panel { padding: 26px 20px; }
  .stat-grid { grid-template-columns: 1fr; gap: 12px; }
  .packages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .package { padding: 26px 12px 16px; }
  .package .btn { white-space: normal; padding: 8px 10px; line-height: 1.25; }
  .package:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero h1 { max-width: none; }
  .package__coins { font-size: 1.45rem; }
  .vote-site { grid-template-columns: 1fr; }
  .vote-site__action { justify-content: flex-start; }
  .prose { padding: 22px 20px; }
  .download { padding: 24px 20px; }
  .download .btn { width: 100%; white-space: normal; text-align: center; }
  .page-head { padding: 36px 0 26px; }
  .site-footer__grid { gap: 24px 16px; }
}

@media (max-width: 420px) {
  .btn--play { padding: 0 20px; font-size: 1.05rem; }
  .accordion details > :not(summary) { margin-left: 18px; margin-right: 18px; }
  .accordion summary { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__flash, .hero__bolts, .hero__fluid { display: none; }
  * { transition-duration: 0.01ms !important; }
}

@media print {
  .site-header, .site-footer, .hero__art, .notice-bar { display: none; }
  body { background: #fff; color: #000; }
  .panel { border: 1px solid #999; background: none; }
}