/* ============================================================
   Warp of War — Theme
   Palette (Farbpalette.xlsx, rechts von "Warp of War" N62):
   #5F0F40 #D4AF37 #420217 #6B0504 · #4C243B #E3DDAF #A3320B #550C18
   Leitfarbe: Lila/Violett dominant, Gold als metallischer Akzent.
   ============================================================ */

:root {
    --navy:        #1A152E;   /* fast-schwarzes Navy — Leitgrund */
    --slate:       #2B3149;   /* Slate-Blau — Flächen */
    --slate-2:     #38405F;   /* helleres Slate-Blau */
    --blueviolet:  #54457F;   /* Blauviolett — Sekundär-Akzent/Hover */
    --teal:        #074F6A;   /* Teal-Blau — kühler Akzent */
    --gold:        #D4AF37;   /* Gold — Primär-Akzent */
    --gold-soft:   #b8973a;
    --parch:       #E3DDAF;   /* Pergament — helle Schrift */
    --purple:      #5F0F40;   /* Magenta-Lila — nur noch Akzent */
    --plum:        #4C243B;   /* Pflaume */
    --crimson:     #6B0504;   /* Blutrot — warmer Akzent (Chaos) */
    --crimson-dk:  #550C18;
    --maroon:      #420217;
    --rust:        #A3320B;   /* Rost — aktiv / Warnung */

    --bg:      #16122a;        /* Navy/Blau als Leitgrund */
    --bg2:     #1d1b3a;
    --panel:   #20213c;        /* Navy-Slate Fläche */
    --panel-2: #2a2c4c;
    --line:    rgba(212,175,55,.22);   /* Gold-Haarlinie */
    --line-s:  rgba(212,175,55,.12);
    --text:    #E3DDAF;
    --muted:   #a8afd0;                 /* kühles Blau-Lavendel */
    --muted-2: #7e86ab;

    --f-disp: "Cinzel", "Times New Roman", serif;
    --f-body: "Barlow", system-ui, sans-serif;
    --maxw: 1240px;
    --radius: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--f-body);
    color: var(--text);
    background: var(--bg);
    background-image:
        radial-gradient(1100px 620px at 50% -8%, rgba(84,69,127,.48), transparent 62%),
        radial-gradient(900px 520px at 92% 6%, rgba(56,64,95,.5), transparent 60%),
        radial-gradient(760px 620px at 4% 22%, rgba(7,79,106,.28), transparent 60%),
        linear-gradient(180deg, #1a1638 0%, var(--bg) 42%, #120f24 100%);
    background-attachment: fixed;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--f-disp); font-weight: 700; margin: 0; line-height: 1.14; letter-spacing: .01em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }

/* Gold-Text mit metallischem Verlauf */
.gold {
    background: linear-gradient(180deg, #f6e6a8 0%, var(--gold) 46%, #9a7d24 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--gold);
}

/* ---------------- Navigation ---------------- */
.wow-nav {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 26px;
    padding: 10px 26px;
    background: linear-gradient(180deg, rgba(18,8,24,.96), rgba(18,8,24,.82));
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
}
.wow-nav .brand { display: flex; align-items: center; gap: 12px; margin-right: 6px; }
.wow-nav .brand img { height: 42px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.wow-nav .brand .bt {
    font-family: var(--f-disp); font-weight: 900; font-size: 20px; letter-spacing: .06em;
    line-height: 1; text-transform: uppercase;
}
.wow-nav .brand .bt small { display: block; font-size: 9.5px; letter-spacing: .42em; color: var(--muted-2); font-weight: 700; }

.wow-nav .menu { display: flex; align-items: center; gap: 6px; }
.nav-item { position: relative; }
.nav-item > a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; font-weight: 600; font-size: 14.5px;
    text-transform: uppercase; letter-spacing: .08em; color: var(--parch);
    border-radius: var(--radius); cursor: pointer;
}
.nav-item > a .car { font-size: 10px; opacity: .7; transition: transform .18s; }
.nav-item:hover > a, .nav-item.open > a { color: var(--gold); background: rgba(84,69,127,.32); }
.nav-item.open > a .car { transform: rotate(180deg); }
.nav-item > a.active { color: var(--gold); }

.dropdown {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line); border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0,0,0,.55);
    padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
    display: block; padding: 9px 12px; border-radius: var(--radius);
    font-size: 14px; font-weight: 500; color: var(--parch); letter-spacing: .02em;
}
.dropdown a:hover { background: rgba(84,69,127,.5); color: var(--gold); }
.dropdown a .sub { display: block; font-size: 11.5px; color: var(--muted-2); font-weight: 400; }

.wow-nav .spacer { flex: 1; }
.konto {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
    font-weight: 600; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--parch);
}
.konto:hover { border-color: var(--gold); color: var(--gold); }
.konto svg { width: 16px; height: 16px; }

/* ---------------- Buttons ---------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 26px; font-family: var(--f-disp); font-weight: 700;
    font-size: 14.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
    color: #1a0d06; border: none; border-radius: var(--radius);
    background: linear-gradient(180deg, #f0d879 0%, var(--gold) 52%, #a9852a 100%);
    box-shadow: 0 6px 20px rgba(212,175,55,.18), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .12s, box-shadow .18s, filter .18s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(212,175,55,.34); filter: brightness(1.05); }
.btn.ghost {
    background: transparent; color: var(--parch);
    border: 1px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.btn.rust {
    background: linear-gradient(180deg, #c9531f, var(--rust)); color: #fbe7d6;
    box-shadow: 0 6px 20px rgba(163,50,11,.3), inset 0 1px 0 rgba(255,255,255,.18);
}

/* ---------------- Hero (Home) ---------------- */
.hero {
    position: relative; min-height: calc(100vh - 63px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 40px 26px 70px; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media .fallback {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-media .fallback {
    background:
        radial-gradient(80% 60% at 50% 30%, rgba(84,69,127,.5), transparent 70%),
        radial-gradient(60% 50% at 78% 80%, rgba(7,79,106,.42), transparent 70%),
        radial-gradient(50% 60% at 18% 70%, rgba(43,49,73,.6), transparent 72%),
        linear-gradient(180deg, #1a1638, #0f0c1c);
}
.hero-media::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(12,6,18,.65) 100%),
        linear-gradient(180deg, rgba(15,13,28,.35), rgba(15,13,28,.78));
}
.hero-in { position: relative; z-index: 2; max-width: 900px; width: 100%; }
.hero-logo { width: min(560px, 82vw); margin: 0 auto 6px; filter: drop-shadow(0 10px 34px rgba(0,0,0,.7)); }
.hero-sub {
    font-family: var(--f-disp); font-size: clamp(15px, 2vw, 20px); letter-spacing: .34em;
    text-transform: uppercase; color: var(--gold); margin: 2px 0 30px; font-weight: 500;
}

/* Turnierbewerbung-Box im Hero */
.hero-card {
    margin: 0 auto; max-width: 640px;
    background: linear-gradient(180deg, rgba(42,44,76,.86), rgba(22,20,42,.92));
    border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,.5); padding: 26px 30px;
    backdrop-filter: blur(3px);
}
.hero-card h2 { font-size: 25px; margin-bottom: 8px; }
.hero-card p { color: var(--muted); margin: 0 auto 18px; max-width: 520px; font-size: 15.5px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.scroll-ind {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 2; color: var(--gold); opacity: .8; font-size: 24px; animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,9px); } }

/* Kicker / Section header */
.kicker {
    font-family: var(--f-disp); font-size: 12.5px; letter-spacing: .34em; text-transform: uppercase;
    color: var(--gold); font-weight: 600;
}
.sec { padding: 84px 0; position: relative; }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.sec-head h2 { font-size: clamp(28px, 4vw, 44px); margin: 10px 0 12px; }
.sec-head p { color: var(--muted); font-size: 16px; }
.rule {
    width: 120px; height: 2px; margin: 14px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------------- Zeitalter des Krieges (Home) ----------------
   Volle Breite. Text sitzt im ersten schrägen Streifen, rechts davon
   3 schräge Bild-Panels über die volle Höhe. 3 Diagonalen insgesamt:
   die linke Kante von Panel 1 ist die Grenze zum Text.
   Überlappung (margin) = Schräge (100px), damit die Nähte aufgehen. */
.zeit { position: relative; height: 80vh; min-height: 560px; overflow: hidden; background: var(--bg); }
.zeit-text {
    position: absolute; z-index: 3; top: 50%; left: max(30px, 5vw); transform: translateY(-50%);
    width: min(34%, 420px);
}
.zeit-text h2 { font-size: clamp(28px, 3.6vw, 46px); margin: 12px 0 16px; }
.zeit-text p { color: var(--muted); font-size: 16px; margin: 0 0 26px; }

.zeit-panels { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 58%; display: flex; }
.zpanel {
    position: relative; flex: 1 1 0; display: block; overflow: hidden; background: var(--panel);
    clip-path: polygon(100px 0, 100% 0, calc(100% - 100px) 100%, 0 100%);
}
.zpanel + .zpanel { margin-left: -100px; }
.zpanel:last-child { clip-path: polygon(100px 0, 100% 0, 100% 100%, 0 100%); }
.zpanel img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    filter: brightness(.8) saturate(.95); transition: transform .55s, filter .35s;
}
/* Bildausschnitt je Panel: Imperium weiter links, Chaos weiter rechts */
.zeit-panels .zpanel:nth-child(1) img { object-position: 35% center; }
.zeit-panels .zpanel:nth-child(2) img { object-position: 68% center; }
.zpanel:hover { z-index: 2; }
.zpanel:hover img { transform: scale(1.05); filter: brightness(.98) saturate(1.05); }

/* ---------------- Fraktionen-Seite ---------------- */
.tagline {
    text-align: center; font-family: var(--f-disp); font-style: italic;
    font-size: clamp(17px, 2.4vw, 26px); color: var(--parch);
    max-width: 900px; margin: 0 auto; padding: 60px 26px 10px; letter-spacing: .02em;
}
.tagline .gold { font-style: normal; }
.kat-block { padding: 56px 0; border-top: 1px solid var(--line-s); scroll-margin-top: 72px; }
.kat-block:first-of-type { border-top: none; }
.kat-block .kb-head { display: flex; justify-content: center; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.kat-block .kb-head h2 { font-size: clamp(26px, 3.4vw, 40px); text-transform: uppercase; }
.kat-block .kb-tag { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); }
.kat-block .kb-desc { color: var(--muted); max-width: 820px; font-size: 15.5px; margin: 0 auto 30px; text-align: center; }

.frak-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.frak-card {
    position: relative; width: 220px; flex: 0 0 220px; border-radius: 6px; overflow: hidden; cursor: pointer;
    border: 1px solid var(--line-s); background: var(--panel); aspect-ratio: 1/1;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.frak-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: brightness(.9) saturate(.95); transition: transform .45s, filter .3s; }
.frak-card .fc-plus {
    position: absolute; z-index: 2; top: 10px; right: 10px; width: 28px; height: 28px;
    display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line);
    color: var(--gold); background: rgba(15,13,28,.5); opacity: 0; transition: .2s; font-size: 15px;
}
.frak-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 18px 38px rgba(0,0,0,.5); }
.frak-card:hover img { transform: scale(1.07); filter: brightness(1) saturate(1.05); }
.frak-card:hover .fc-plus { opacity: 1; }

/* Fraktion-Detail Modal */
.modal-bg {
    position: fixed; inset: 0; z-index: 200; background: rgba(9,5,13,.82);
    display: none; align-items: center; justify-content: center; padding: 24px;
    backdrop-filter: blur(5px);
}
.modal-bg.open { display: flex; }
.modal {
    max-width: 900px; width: 100%; height: min(72vh, 520px); max-height: 88vh; overflow: hidden;
    display: grid; grid-template-columns: auto 1fr;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
    animation: pop .22s ease;
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal .m-img { position: relative; height: 100%; aspect-ratio: 1 / 1; background: var(--navy); }
.modal .m-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.modal .m-body { padding: 34px 34px 30px; overflow-y: auto; }
.modal .m-kat { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.modal .m-body h3 { font-size: 30px; margin: 8px 0 16px; }
.modal .m-body p { color: var(--muted); font-size: 15.5px; line-height: 1.72; }
.modal .m-close {
    position: absolute; top: 14px; right: 16px; z-index: 3; width: 38px; height: 38px;
    border-radius: 50%; border: 1px solid var(--line); background: rgba(15,13,28,.7);
    color: var(--parch); font-size: 20px; cursor: pointer; display: grid; place-items: center;
}
.modal .m-close:hover { color: var(--gold); border-color: var(--gold); }

/* ---------------- Turnier-Info-Seite ---------------- */
.turnier-hero { text-align: center; padding: 92px 26px 40px; position: relative; }
.turnier-hero h1 { font-size: clamp(34px, 5.4vw, 62px); text-transform: uppercase; }
.turnier-hero .poem { margin: 26px auto 0; max-width: 720px; color: var(--parch); font-size: clamp(15px,1.9vw,19px); line-height: 2; font-family: var(--f-disp); }
.turnier-hero .poem .last { color: var(--gold); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 30px 0 90px; }
.tc-card {
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line); border-radius: 10px; padding: 34px 32px;
    display: flex; flex-direction: column;
}
.tc-card h3 { font-size: 24px; margin-bottom: 14px; }
.tc-card p { color: var(--muted); font-size: 15.5px; margin: 0 0 12px; }
.tc-card .grow { flex: 1; }
.tc-card .forum-link { color: var(--gold); font-weight: 600; border-bottom: 1px solid var(--line); }
.tc-card .forum-link:hover { color: var(--rust); }
.tc-card .btn { align-self: flex-start; margin-top: 10px; }

/* ---------------- Turnierarchiv ---------------- */
.arch-head { text-align: center; padding: 74px 26px 8px; }
.arch-head h1 { font-size: clamp(30px, 4.6vw, 52px); text-transform: uppercase; }
.arch-head p { color: var(--muted); max-width: 640px; margin: 12px auto 0; }

.filter-bar {
    display: flex; gap: 18px; align-items: flex-end; justify-content: center; flex-wrap: wrap;
    padding: 26px; margin: 20px auto 8px; max-width: 720px;
    background: linear-gradient(180deg, rgba(42,44,76,.6), rgba(22,20,42,.6));
    border: 1px solid var(--line-s); border-radius: 10px;
}
.filter-bar .fld { display: flex; flex-direction: column; gap: 6px; }
.filter-bar label { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.filter-bar input[type="date"] {
    background: var(--bg2); border: 1px solid var(--line); color: var(--parch);
    padding: 10px 12px; border-radius: var(--radius); font-family: var(--f-body); font-size: 14px;
    color-scheme: dark;
}
.filter-bar input:focus { outline: none; border-color: var(--gold); }
.filter-bar .reset { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 11px 6px; text-decoration: underline; }
.filter-bar .reset:hover { color: var(--gold); }

.arch-count { text-align: center; color: var(--muted-2); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 10px 0 4px; }

.turn-list { display: flex; flex-direction: column; gap: 16px; }
.turn-card {
    display: grid; grid-template-columns: 92px 1fr; gap: 0;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line-s); border-radius: 10px; overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.turn-card:hover { border-color: var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.turn-card.fix { border-color: rgba(212,175,55,.5); box-shadow: 0 0 0 1px rgba(212,175,55,.22), 0 14px 34px rgba(84,69,127,.3); }
.turn-banner {
    display: grid; place-items: center; position: relative;
    background:
        radial-gradient(circle at 50% 30%, rgba(84,69,127,.6), transparent 70%),
        linear-gradient(180deg, var(--slate), var(--navy));
    border-right: 1px solid var(--line-s);
}
.turn-banner .rune { font-family: var(--f-disp); font-weight: 900; font-size: 24px; color: var(--gold); line-height: 1; }
.turn-banner .lbl { position: absolute; bottom: 8px; font-size: 9px; letter-spacing: .16em; color: var(--muted-2); text-transform: uppercase; }
.turn-main { padding: 18px 20px; }
.turn-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.turn-title { font-family: var(--f-disp); font-size: 19px; font-weight: 700; }
.turn-title .fixbadge { font-family: var(--f-body); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1a0d06; background: var(--gold); padding: 2px 8px; border-radius: 999px; margin-left: 10px; vertical-align: middle; }
.turn-date { color: var(--muted); font-size: 13.5px; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.pod {
    display: flex; align-items: center; gap: 11px; padding: 11px 13px;
    background: rgba(15,13,28,.5); border: 1px solid var(--line-s); border-radius: 7px;
}
.pod .medal { font-size: 22px; line-height: 1; flex-shrink: 0; }
.pod.p1 { border-color: rgba(212,175,55,.4); }
.pod .pi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pod .rank { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }
.pod .tag { font-weight: 600; font-size: 15px; color: var(--parch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod .frak { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.frak-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.frak-dot.gold { background: var(--gold); }
.frak-dot.crimson { background: var(--crimson); }
.frak-dot.purple { background: var(--blueviolet); }

.turn-actions { margin-top: 14px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.report-btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
    background: none; border: 1px solid var(--line); color: var(--parch);
    padding: 8px 15px; border-radius: 999px; font-family: var(--f-body); font-weight: 600; font-size: 13px;
}
.report-btn:hover { border-color: var(--gold); color: var(--gold); }
.report-btn .ic { font-size: 15px; line-height: 1; }
.tl-toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: none; border: 1px solid var(--line); color: var(--parch);
    padding: 8px 15px; border-radius: 999px; font-family: var(--f-body); font-weight: 600;
    font-size: 13px; letter-spacing: .04em;
}
.tl-toggle:hover { border-color: var(--gold); color: var(--gold); }
.tl-toggle .car { transition: transform .2s; font-size: 10px; }
.tl-toggle.open .car { transform: rotate(180deg); }

.teil-liste { display: none; margin-top: 14px; border-top: 1px solid var(--line-s); padding-top: 14px; }
.teil-liste.open { display: block; }
.teil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.teil-row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.03); }
.teil-row .pl { width: 26px; text-align: right; color: var(--muted-2); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px; }
.teil-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teil-row .fr { color: var(--muted); font-size: 11.5px; }
.teil-row.hi { background: rgba(163,50,11,.16); border-radius: 4px; }
.teil-row.hi .nm { color: var(--gold); font-weight: 700; }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 30px 0 90px; flex-wrap: wrap; }
.pager button {
    min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--radius);
    background: var(--panel); border: 1px solid var(--line-s); color: var(--parch);
    font-family: var(--f-body); font-weight: 600; cursor: pointer; font-size: 14px;
}
.pager button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.pager button.active { background: var(--blueviolet); border-color: var(--gold); color: var(--gold); }
.pager button:disabled { opacity: .35; cursor: default; }

.loading { text-align: center; color: var(--muted); padding: 60px 0; font-family: var(--f-disp); letter-spacing: .1em; }

/* ---------------- Footer ---------------- */
.wow-foot {
    border-top: 1px solid var(--line); margin-top: 40px;
    background: linear-gradient(180deg, transparent, rgba(11,5,15,.7));
    padding: 44px 0 30px;
}
.wow-foot .foot-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.studio { display: flex; align-items: center; gap: 12px; }
.studio .slogo {
    font-family: var(--f-disp); font-weight: 900; font-size: 20px; letter-spacing: .12em;
    padding: 8px 16px; border: 1px solid var(--line); border-radius: 4px; color: var(--parch);
}
.studio .slogo b { color: var(--gold); }
.studio .stx { font-size: 12.5px; color: var(--muted-2); }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { font-size: 13.5px; color: var(--muted); letter-spacing: .04em; }
.foot-links a:hover { color: var(--gold); }
.foot-copy { text-align: center; color: var(--muted-2); font-size: 12px; margin-top: 26px; letter-spacing: .06em; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
    .zeit { height: auto; min-height: 0; }
    .zeit-text { position: static; transform: none; width: auto; padding: 44px 22px 6px; }
    .zeit-panels { position: static; width: 100%; height: 44vh; min-height: 320px; }
    .zpanel, .zpanel:last-child { clip-path: none; }
    .zpanel + .zpanel { margin-left: 0; }
    .two-col { grid-template-columns: 1fr; }
    .modal { grid-template-columns: 1fr; height: auto; max-height: 90vh; overflow-y: auto; }
    .modal .m-img { aspect-ratio: 1 / 1; height: auto; }
    .podium { grid-template-columns: 1fr; }
    .wow-nav .menu .nav-item > a { padding: 10px; }
}
@media (max-width: 680px) {
    .wow-nav { gap: 12px; padding: 8px 14px; flex-wrap: wrap; }
    .wow-nav .menu { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; }
    .wrap { padding: 0 16px; }
    .turn-card { grid-template-columns: 60px 1fr; }
}