/* 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.woff2") format("woff2"), url("../fonts/Cinzel-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"), url("../fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Medium.woff2") format("woff2"), url("../fonts/Barlow-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.woff2") format("woff2"), url("../fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

/* Kyrillisch und Griechisch (ru, gr): Barlow und Cinzel haben diese Zeichen nicht. Eigene Familien als Ausweich-
   schrift im Stapel; per unicode-range laedt der Browser sie nur, wenn solche Zeichen auf der Seite stehen.
   Fira Sans (Text) und Alegreya SC (Ueberschriften), beide SIL OFL, Subsets aus @fontsource. */
@font-face { font-family: "Raijin Sans X"; src: url("../fonts/FiraSans-cyrillic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Raijin Sans X"; src: url("../fonts/FiraSans-cyrillic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Raijin Sans X"; src: url("../fonts/FiraSans-cyrillic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Raijin Display X"; src: url("../fonts/AlegreyaSC-cyrillic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Raijin Sans X"; src: url("../fonts/FiraSans-greek-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: "Raijin Sans X"; src: url("../fonts/FiraSans-greek-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: "Raijin Sans X"; src: url("../fonts/FiraSans-greek-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: "Raijin Display X"; src: url("../fonts/AlegreyaSC-greek-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }

: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", "Raijin Display X", Georgia, "Times New Roman", serif;
  --font-body: "Barlow", "Raijin Sans X", "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, .tag--refunded { 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; white-space: nowrap; 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); }
/* Metin2 "bald" (METIN2_STATUS=soon): Menuepunkt ausgegraut mit kleinem Hinweis */
.site-nav__main a.nav-soon { color: rgba(230, 238, 255, 0.55); }
.nav-soon__badge { display: inline-block; margin-left: 4px; padding: 2px 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 2px; border: 1px solid rgba(230, 238, 255, 0.3); border-radius: 999px; color: rgba(230, 238, 255, 0.7); }
.site-nav__side { display: flex; align-items: center; gap: 8px; }
/* Lange Woerter (fr, es, ro, ru, gr ...): Kopfzeile bleibt einzeilig. Kontoname wird bei Bedarf gekuerzt (voller Name im title). */
.nav-user { display: block; max-width: 6.5em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1241px) {
  .site-nav { gap: 10px; }
  .site-nav__main a { padding: 8px 9px; }
  .site-nav__main a[aria-current="page"]::after { left: 9px; right: 9px; }
  .site-nav__side { gap: 6px; }
  .site-nav__side .btn--sm { padding: 0 11px; }
}
.inline-form { display: inline; margin: 0; }
/* Spielauswahl-Knopf (Metin2 | 4Story) in der Kopfzeile: auf breiten Schirmen nur das Symbol, im Klappmenue mit Text. */
.game-switch {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; min-width: 38px; padding: 0 9px;
  color: #e6eeff; text-decoration: none; border: 1px solid var(--line-soft); border-radius: 8px; transition: background-color 0.15s, border-color 0.15s;
}
.game-switch:hover { color: #fff; background: rgba(61, 123, 255, 0.16); border-color: var(--line); }
.game-switch svg { display: block; flex: none; }
.game-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* Sprachmenue (views/partials/lang_menu.njk): Knopf mit Flagge + Kuerzel, dunkles Klapp-Panel, aktuelle Sprache
   blau hinterlegt mit Haken. <details> funktioniert auch ohne JavaScript; site.js schliesst bei Klick daneben/Escape. */
.langmenu { position: relative; margin-right: 6px; }
.langmenu__btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px;
  font: 600 0.85rem/1 var(--font-body); letter-spacing: 0.04em; color: #e6eeff; white-space: nowrap;
  border: 1px solid var(--line-soft); border-radius: 8px; cursor: pointer; list-style: none; user-select: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.langmenu__btn::-webkit-details-marker { display: none; }
.langmenu__btn::marker { content: ""; }
.langmenu__btn:hover, .langmenu[open] > .langmenu__btn { color: #fff; background: rgba(61, 123, 255, 0.16); border-color: var(--line); }
.langmenu__btn:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.langmenu__chev { opacity: 0.75; transition: transform 0.15s; }
.langmenu[open] .langmenu__chev { transform: rotate(180deg); }
.langmenu__flag { display: block; flex: none; width: 21px; height: 14px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.langmenu__list {
  position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; min-width: 168px; margin: 0; padding: 6px; list-style: none;
  max-height: min(70vh, calc(100vh - 96px)); overflow-y: auto; overscroll-behavior: contain;
  background: #16161e; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.langmenu__item {
  display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 6px 10px; border-radius: 8px;
  font: 600 0.92rem/1.2 var(--font-body); letter-spacing: 0.03em; color: #d9deea; text-decoration: none; white-space: nowrap;
}
.langmenu__item:hover, .langmenu__item:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.06); outline: none; }
.langmenu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-hover); }
.langmenu__item.is-current { color: #fff; background: rgba(61, 123, 255, 0.22); }
.langmenu__label { flex: 1; }
.langmenu__check { flex: none; margin-left: 12px; color: var(--accent-hover); }
/* Variante im Itemshop/Einzahlung: Knopf in Chip-Optik */
.langmenu--chip { margin-right: 0; }
.langmenu--chip .langmenu__btn { min-height: 46px; padding: 0 12px; font-size: 0.86rem; background: rgba(7, 19, 56, 0.78); border-color: rgba(91, 140, 255, 0.42); border-radius: 10px; }
.paybar .langmenu--chip .langmenu__btn { min-height: 42px; }
.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. */
/* Ebenen (von unten): .hero__art (Bild, Verlauf, Blitze) = 0, .hero__fluid (Rauch) = 1, Inhalt = 2.
   WICHTIG: im Hero KEIN mix-blend-mode, kein isolation und keine negativen z-index-Werte. Firefox (WebRender, echte
   Grafikkarte) zeichnete mit einer Blend-Ebene im Hero beim Scrollen das beschnittene Bild (object-fit: cover) ueber
   die Hero-Box hinaus - das Artwork erschien hell unter dem Hero. Geprueft mit scripts/firefox-gpu-check.js. */
.hero {
  position: relative; z-index: 0; overflow: hidden; contain: paint; 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: 0; overflow: hidden; }
.hero__art picture { position: absolute; inset: 0; display: block; }
/* Das Artwork steht absolut still: keine Animation, kein transform. */
.hero__art img { position: absolute; inset: 0; 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; 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%; pointer-events: none; }
/* Rauch-Effekt (hero-fluid.js, WebGL): liegt ueber dem Bild, unter Text und Knoepfen. Nimmt keine Mausereignisse an,
   wird aufhellend eingeblendet (die Deckkraft je Bildpunkt rechnet hero-fluid.js) und ist 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; opacity: 0.8; }
.hero__content, .hero__status { position: relative; z-index: 2; }
.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; overflow-wrap: break-word; hyphens: auto; }
/* Lange Woerter (z. B. "Datenschutzerklaerung") passen auch auf schmale Handys */
@media (max-width: 480px) { .page-head h1 { font-size: clamp(1.3rem, 5.8vw, 2.2rem); } }
.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; }
.field--error select, .field--error textarea { border-color: var(--bad); }
input[type="file"] { width: 100%; padding: 10px; font: inherit; color: var(--muted); background: var(--field); border: 1px dashed rgba(175, 195, 238, 0.42); border-radius: var(--radius-sm); }
.field--error input[type="file"] { border-color: var(--bad); }
/* Falle fuer Bots (Bug melden): fuer Menschen unsichtbar, nicht per Tab erreichbar */
.field--hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Bug melden ---------- */
.side-stack { display: grid; gap: 22px; align-content: start; min-width: 0; }
.bug-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bug-form { padding: 26px 28px; }
.bug-tips { padding: 22px 24px; }
.bug-tips h2 { font-size: 1.2rem; }
.bug-tips ul { padding-left: 1.1em; color: var(--muted); }
.bug-tips li { margin-bottom: 8px; }
.bug-guest { margin: 0 0 16px; }
@media (max-width: 860px) { .bug-wrap { grid-template-columns: 1fr; } .bug-form { padding: 20px 18px; } }
/* Admin: Bug-Meldungen */
.bug-item { padding: 18px 20px; margin-bottom: 14px; }
.bug-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.bug-item__head h3 { margin: 0; font-size: 1.1rem; }
.bug-item__meta { font-size: 0.88rem; color: var(--muted); }
.bug-item__text { white-space: pre-wrap; word-break: break-word; margin: 0 0 10px; }
.bug-item__shot img { display: block; max-width: 320px; max-height: 200px; width: auto; height: auto; border-radius: 6px; border: 1px solid var(--line-faint); margin-bottom: 10px; }
.bug-item__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.bug-item__form select, .bug-item__form input[type="text"] { width: auto; min-height: 38px; padding: 6px 12px; }
.bug-item__form select { padding-right: 36px; background-position: calc(100% - 18px) 16px, calc(100% - 12px) 16px; }
.bug-item__form input[type="text"] { flex: 1 1 220px; }
.bug-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--line-soft); }
.bug-status--open { color: #ffd27a; border-color: rgba(255, 210, 122, 0.6); }
.bug-status--in_progress { color: #8fc0ff; border-color: rgba(143, 192, 255, 0.6); }
.bug-status--fixed { color: #7fe0a0; border-color: rgba(127, 224, 160, 0.6); }
.bug-status--rejected { color: #c9c9c9; border-color: rgba(201, 201, 201, 0.5); }

.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); }
/* "Metin2 - bald verfuegbar" (views/pages/metin2_soon.njk) und Hinweis in der Metin2-Vorschau */
.m2soon__badge { display: inline-block; margin: 0 0 12px; padding: 4px 10px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--muted); }
.m2soon__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.status-bar--soon { gap: 8px 22px; }
.status-bar__note { color: #e3ecff; }

/* ---------- 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; }

/* ---------- Bestellung (Itemshop und Einzahlung: public/css/shop.css) ---------- */
.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, .legal li { color: #e3ecff; }
.legal { line-height: 1.65; }
.legal h2 { scroll-margin-top: 92px; padding-top: 0.2em; }
.legal h2 + h3 { margin-top: 0.6em; }
.legal h3 { font-size: 1.06rem; color: #fff; scroll-margin-top: 92px; }
.legal a { color: var(--accent-hover); text-underline-offset: 2px; }
.legal a:hover { color: #fff; }
.legal address { font-style: normal; margin: 0 0 1em; color: #e3ecff; }
.legal .legal-box { margin: 0 0 1.2em; padding: 16px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(7, 19, 56, 0.55); }
.legal .legal-box > :last-child { margin-bottom: 0; }
.legal td { vertical-align: top; color: #e3ecff; font-size: 0.95rem; }
.legal-tbd { color: var(--warn); font-style: italic; }
.legal-toc { margin: 0 0 2em; padding: 18px 22px; border: 1px solid var(--line-faint); border-radius: var(--radius-sm); background: rgba(4, 11, 36, 0.45); }
.legal-toc h2 { margin: 0 0 0.6em; font: 600 0.82rem/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.legal-toc ol { margin: 0; padding-left: 1.5em; columns: 2; column-gap: 32px; }
.legal-toc li { break-inside: avoid; margin-bottom: 0.25em; }
.legal-toc a { color: #dbe6ff; text-decoration: none; }
.legal-toc a:hover { color: #fff; text-decoration: underline; }
.legal-draft { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 209, 102, 0.45); background: rgba(255, 209, 102, 0.08); color: #ffe6a8; font-size: 0.95rem; }
.legal-draft::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.legal-note { margin: 0 0 18px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: rgba(61, 123, 255, 0.1); color: #dbe6ff; font-size: 0.95rem; }
.legal-note a { color: var(--accent-hover); }
.legal-meta { margin: -0.4em 0 1.6em; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 700px) {
  .legal-toc ol { columns: 1; }
  .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; }
  .legal thead { display: none; }
  .legal tr { padding: 8px 0; border-bottom: 1px solid var(--line-faint); }
  .legal td { border: 0; padding: 2px 0; }
  .legal td:first-child { font-weight: 600; color: #fff; }
}

/* ---------- 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; }
.site-footer__note { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.45; opacity: 0.85; }

/* ---------- 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) {
  .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); }
}

/* Kopfzeile: Menue-Knopf statt Leiste schon unter 1241 px - mit 13 Sprachen sind Navigation und Knoepfe
   (z. B. FR/DE/RO) breiter, als die alte Grenze von 960 px vertrug. */
@media (max-width: 1240px) {
  .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; }
  .game-switch { padding: 0 12px; font: 600 0.95rem/1 var(--font-body); }
  .game-switch__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .site-nav .langmenu__list { left: 0; right: auto; max-height: min(60vh, 420px); }
}

@media (max-width: 960px) {
  .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: normal; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
  .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; }
  .hero h1 { max-width: none; }
  .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; }
}

/* Mein Account (Metin2): kleiner Link zum 4Story-Account */
.account-switch { margin: 22px 0 0; }
.account-switch a { font-weight: 600; }
.stat__unit { font-size: 1rem; font-weight: 500; color: var(--muted); }

/* =====================================================================================================
   Handy-Ueberarbeitung (Branch mobile, Oktober 2026). Ziele: kein waagerechtes Scrollen bei 360-430 px, Tap-Ziele
   mindestens 44 px, Klappmenue scrollt selbst, Hero-Knoepfe ohne zerbrochene Woerter, bequeme Formulare.
   Desktop bleibt unveraendert (alles ausser .reveal-* steht in Media-Queries).
   ===================================================================================================== */
/* Passwort anzeigen (public/js/site.js setzt Knopf und Huelle um Felder mit data-reveal) */
.reveal-wrap { position: relative; }
.reveal-wrap input { padding-right: 96px; }
.reveal-btn {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 44px; padding: 0 12px;
  font: 600 0.88rem/1 var(--font-body); color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer;
}
.reveal-btn:hover, .reveal-btn[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.08); }
/* Freunde werben: Einladungslink */
.ref-link { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.ref-link input { flex: 1 1 260px; min-width: 0; font-variant-numeric: tabular-nums; }
.ref-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 4px 0 12px; }
.ref-stats div { display: flex; flex-direction: column-reverse; }
.ref-stats dt { font-size: 0.88rem; color: var(--muted); }
.ref-stats dd { margin: 0; font-size: 1.6rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ref-note { font-size: 0.92rem; color: var(--muted); }
.ref-stats__ok dd { color: #8fe39a; }
.ref-reward { margin: 4px 0 14px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); }
.ref-reward h3 { margin: 0 0 8px; font-size: 1.05rem; }
.ref-reward__list { display: grid; gap: 6px; margin: 0 0 6px; }
.ref-reward__state, .ref-reward__mine { margin: 8px 0 0; font-size: 0.94rem; }
.ref-reward__mine--sent { color: #8fe39a; font-weight: 600; }
.ref-invited { margin: 0 0 18px; }
.ref-field { margin: 0 0 18px; }
.ref-field summary { cursor: pointer; color: var(--accent-hover); font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.ref-field[open] summary { margin-bottom: 6px; }

@media (max-width: 1240px) {
  /* Klappmenue: scrollt in sich, die Seite dahinter bleibt stehen */
  .js .site-nav.is-open { max-height: calc(100vh - 69px); max-height: calc(100svh - 69px); overflow-y: auto; overscroll-behavior: contain; }
  html.nav-open { overflow: hidden; }
  .site-nav__main a { display: flex; align-items: center; min-height: 50px; }
  /* Anmelden/Registrieren zuerst und gross, darunter Spielauswahl und Sprache */
  .site-nav__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .site-nav__side > * { min-width: 0; }
  .site-nav__side .btn, .site-nav__side .inline-form .btn { width: 100%; min-height: 48px; font-size: 1rem; }
  .site-nav__side .btn--primary { order: -2; grid-column: 1 / -1; }
  .site-nav__side > .btn--ghost, .site-nav__side > .inline-form { order: -1; }
  .site-nav__side .inline-form { display: block; }
  .site-nav__side .btn--text { border: 1px solid var(--line-soft); }
  .game-switch, .langmenu__btn { min-height: 48px; width: 100%; justify-content: center; }
  .langmenu { margin-right: 0; }
  .nav-user { max-width: 100%; }
}

@media (max-width: 700px) {
  /* Tap-Ziele */
  .btn { min-height: 48px; }
  .btn--sm { min-height: 44px; }
  .langmenu__item { min-height: 46px; }
  .tabs a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .rank-search input, .rank-search select { min-height: 46px; }
  .rank-search select { background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px; }
  .rank-search .btn { flex: 0 0 auto; }
  input[type="text"], input[type="email"], input[type="password"], input[type="search"], input:not([type]), select { min-height: 50px; font-size: 1rem; }
  select { background-position: calc(100% - 19px) 22px, calc(100% - 13px) 22px; }
  .check input { width: 24px; height: 24px; margin-top: 1px; }
  .check { gap: 4px 14px; }
  .site-footer li { margin: 0; }
  .site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__base a { display: inline-flex; align-items: center; min-height: 44px; }
  .back-link a, .auth__alt a, .auth__links a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Hero: ein grosser Hauptknopf, darunter zwei gleich breite Knoepfe. Woerter brechen nie mitten im Wort. */
  .hero h1 { min-height: 0; }
  .hero__pitch { min-height: 0; }
  .hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .hero__actions > .btn:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .hero__actions .btn { min-width: 0; min-height: 52px; padding: 6px 12px; white-space: normal; overflow-wrap: normal; line-height: 1.15; text-align: center; }
  .hero__actions .btn--play { min-height: 58px; font-size: clamp(0.95rem, 4.4vw, 1.12rem); letter-spacing: 0.04em; }
  .btn--play { white-space: normal; text-align: center; line-height: 1.15; }
  .status-bar { padding: 12px 14px; }

  /* Formulare und Kaesten: mehr Platz fuer den Inhalt */
  .auth { padding: 18px 12px 48px; min-height: 0; }
  .auth__panel { padding: 22px 16px; }
  .auth__panel h1 { font-size: 1.5rem; }
  .auth__panel .lead { margin-bottom: 1em; }
  .panel { padding: 18px 16px; }
  .features.panel, .table-wrap.panel { padding: 4px 0; }
  .news-list.panel { padding: 2px 16px; }
  .feature { padding: 18px 16px; }
  .facts { padding: 4px 16px; }
  .btn--play { min-height: 56px; padding: 6px 14px; font-size: clamp(0.95rem, 4.4vw, 1.12rem); letter-spacing: 0.04em; }
  .facts div { flex-wrap: wrap; gap: 2px 14px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table th, .table td { padding: 10px; }
  .prose { padding: 20px 16px; }
  .accordion summary { min-height: 52px; display: flex; align-items: center; }
}