/* ByteBandit Official – Partnerseite von Draco-Gaming. Seit 06.11.2026 im Stil seines Logos (User: „mach die seite mehr wie
   das logo selbst“): geschmiedete Eisenplatten mit Bronzekante und Nieten, Namensplaketten wie unter dem Medaillon, Schrift in
   Goldglut wie „BYTEBANDIT“, Runenbänder wie im Ring, Glut steigt aus der brennenden Stadt (funken.js). Schriften Grenze,
   Alegreya Sans und Noto Sans Runic (OFL, lokal). Kein style="…" und kein Inline-Skript (CSP style-src/script-src 'self'). */

@font-face { font-family: 'Grenze'; font-weight: 700 800; src: url(schriften/grenze-latin.woff2?v=00777d7b) format('woff2'); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Grenze'; font-weight: 700 800; src: url(schriften/grenze-latin-ext.woff2?v=5cb6af4a) format('woff2'); font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Alegreya Sans'; font-weight: 400; src: url(schriften/alegreyasans-400-latin.woff2?v=dec96422) format('woff2'); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-weight: 400; src: url(schriften/alegreyasans-400-latin-ext.woff2?v=19c52c5e) format('woff2'); font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Alegreya Sans'; font-weight: 700; src: url(schriften/alegreyasans-700-latin.woff2?v=c198fa60) format('woff2'); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya Sans'; font-weight: 700; src: url(schriften/alegreyasans-700-latin-ext.woff2?v=b10558b0) format('woff2'); font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Sans Runic'; font-weight: 400; src: url(schriften/notorunic-400-runic.woff2?v=ab5e7e5b) format('woff2'); font-display: swap;
  unicode-range: U+16A0-16F8; }

:root {
  --nacht: #0b0706;
  --bronze: #a9764a;
  --bronze-hell: #d9a96f;
  --bronze-tief: #4a2c19;
  --glut: #ff6a1a;
  --feuer: #ffa23a;
  --flamme: #ffd98a;
  --text: #f2e2cb;
  --leise: #b99c7c;
  --rot: #d83a1c;
  --rand: rgba(217, 169, 111, .3);
  /* wie die Buchstaben auf seiner Plakette: hell oben, glühend unten */
  --gold-verlauf: linear-gradient(180deg, #fff1b8 0%, #ffd06a 34%, #f39a2a 66%, #c85612 100%);
  --glut-verlauf: linear-gradient(180deg, #ffe7a0 0%, #ffab3d 45%, #ff5a14 100%);
  --eisen-verlauf: linear-gradient(180deg, #1d140f, #130d0a 70%, #0e0907);
  /* Draco-Gaming-Teile (Knopf oben, Herkunft unten) in Dracos Farben */
  --draco: #f2a23a;
  --draco-hell: #ffd48f;
  --titel: 'Grenze', Georgia, serif;
  --schrift: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --runen: 'Noto Sans Runic', 'Segoe UI Historic', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; color: var(--text); font: 400 1.06rem/1.65 var(--schrift); -webkit-font-smoothing: antialiased; background: var(--nacht); }
/* Die brennende Stadt unten, fest hinter allem: als Standbild (marke\logostil.py) und darüber als Film (.stadt-film, gleiche
   Lage, 2 : 1). Am Handy breiter als der Schirm (125vh), damit die Skyline nicht zum schmalen Streifen wird. Der Glutschein liegt
   auf der Funken-Leinwand, also über dem Film */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url(bilder/stadt.webp?v=a508e52a) center bottom / max(100%, 125vh) auto no-repeat, var(--nacht);
}
/* Film über dem Standbild (stadt.webp hat seine Ausblendung eingebaut, der Film bekommt sie per Maske); bei „weniger Bewegung“
   lädt die <source> nicht (media-Attribut), und das Standbild bleibt */
.stadt-film {
  position: fixed; z-index: -2; left: 50%; bottom: 0; width: max(100%, 125vh); height: auto; translate: -50% 0; pointer-events: none;
  opacity: .92; -webkit-mask-image: linear-gradient(transparent 12%, #000 52%); mask-image: linear-gradient(transparent 12%, #000 52%);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
svg { width: 1.15em; height: 1.15em; flex: none; }
.versteckt { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--flamme); outline-offset: 3px; }
::selection { background: var(--glut); color: #1a0a03; }
.glut-hintergrund {
  position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  background: radial-gradient(140% 55% at 50% 118%, rgba(255, 92, 18, .2), rgba(150, 40, 10, .08) 45%, transparent 70%),
    radial-gradient(70% 45% at 50% -12%, rgba(160, 96, 44, .12), transparent 70%);
}

/* Goldglut-Schrift (Überschriften, Wortmarke, Plaketten) */
h1, h2, .wortmarke, .plakette > span, .lobby-zahl b {
  background: var(--gold-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1 em, h2 em, .plakette b { font-style: normal; background: var(--glut-verlauf); -webkit-background-clip: text; background-clip: text; }

/* ------------------------------------------------------------------ Leiste */
.leiste {
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(30, 21, 15, .96), rgba(14, 9, 7, .95));
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--bronze) 12%, var(--bronze-hell) 50%, var(--bronze) 88%, transparent) 1;
  box-shadow: 0 8px 26px -12px #000;
}
.leiste-innen { display: flex; align-items: center; gap: .9rem 1.4rem; width: min(1280px, 100% - 2rem); min-height: 66px; margin-inline: auto; }
.zurueck {
  display: inline-flex; align-items: center; gap: .45rem; padding: .28rem .55rem .28rem .3rem; flex: none;
  border: 1px solid color-mix(in srgb, var(--draco) 50%, transparent); border-radius: 3px;
  color: var(--draco-hell); text-decoration: none; font: 700 .84rem/1 var(--schrift); white-space: nowrap;
  background: color-mix(in srgb, var(--draco) 10%, transparent);
  transition: border-color .2s, color .2s, background-color .2s;
}
.zurueck:hover { border-color: var(--draco); color: #fff; background: color-mix(in srgb, var(--draco) 18%, transparent); }
.zurueck img { width: 26px; height: 26px; object-fit: contain; border-radius: 3px; }
/* Draco-Logos als <picture>: nicht display: contents, sonst werden die leeren <source> zu Flex-Elementen */
.zurueck picture, .fuss-herkunft picture { display: flex; }
.marke { display: flex; align-items: center; gap: .6rem; min-width: 0; text-decoration: none; }
.marke img { width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(255, 106, 26, .55)); }
.wortmarke {
  font: 800 1.6rem/1 var(--titel); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  filter: drop-shadow(0 1px 0 #1d0d05) drop-shadow(0 0 8px rgba(255, 106, 26, .45));
}
.menue { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.menue a {
  position: relative; padding: .5rem .7rem; color: var(--bronze-hell); text-decoration: none; white-space: nowrap;
  font: 700 .86rem/1 var(--schrift); letter-spacing: .12em; text-transform: uppercase; transition: color .15s, text-shadow .15s;
}
.menue a::after { content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .15rem; height: 2px; background: linear-gradient(90deg, transparent, var(--glut), transparent); opacity: 0; transition: opacity .15s; }
.menue a:hover, .menue a:focus-visible { color: var(--flamme); text-shadow: 0 0 10px rgba(255, 140, 40, .6); }
.menue a:hover::after, .menue a:focus-visible::after { opacity: 1; }
.lampe-chip {
  display: inline-flex; align-items: center; gap: .45rem; flex: none; padding: .4rem .7rem; border: 1px solid var(--rand); border-radius: 2px;
  background: linear-gradient(180deg, #24180f, #120c08); color: var(--text); text-decoration: none;
  font: 700 .78rem/1 var(--schrift); letter-spacing: .1em; text-transform: uppercase;
}
.lampe-chip[hidden] { display: none; }
.lampe-chip b { color: var(--flamme); }
.lampe { width: 8px; height: 8px; border-radius: 50%; background: var(--glut); box-shadow: 0 0 0 0 rgba(255, 106, 26, .7); animation: puls 1.8s ease-out infinite; }
@keyframes puls { to { box-shadow: 0 0 0 9px rgba(255, 106, 26, 0); } }

/* ------------------------------------------------------------------ Namensplakette wie unter dem Medaillon */
/* Gerendert (marke\logostil.py) und aus vier Stücken zusammengesetzt, so passt sie zu jeder Textlänge: Enden mit Klinge,
   Mitte mit den Spitzen, dazwischen der glatte Körper nur im Inhaltsfeld (sonst schiene er unter den Klingen durch).
   Nur Zierde, kein Knopf */
.plakette {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 34px 3px; font: 800 .98rem/1 var(--titel); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  background: url(bilder/plakette-links.webp?v=701431e0) left center / auto 100% no-repeat border-box,
    url(bilder/plakette-rechts.webp?v=ac76966f) right center / auto 100% no-repeat border-box,
    url(bilder/plakette-spitze.webp?v=ace4f004) center / auto 100% no-repeat border-box,
    url(bilder/plakette-band.webp?v=1bab9c96) center / auto 100% repeat-x content-box;
}

/* ------------------------------------------------------------------ Runenband wie im Ring, eine Lichtwelle läuft durch */
.runen {
  margin: 0; padding: .5rem 0 .42rem; overflow: hidden; white-space: nowrap; text-align: center;
  background: linear-gradient(180deg, #1e140e, #0f0a07); border-block: 1px solid rgba(217, 169, 111, .35);
  box-shadow: inset 0 1px 0 rgba(255, 200, 140, .07), 0 6px 18px -12px #000;
  font: 400 1rem/1 var(--runen); letter-spacing: .62em;
}
.runen span {
  display: inline-block; padding-left: .62em;
  /* linkes und rechtes Drittel gleich dunkel, sonst springt die Welle alle 9 s zurück */
  background: linear-gradient(90deg, #a04818 0 33.4%, #ff7a24 44%, #ffd88f 50%, #ff7a24 56%, #a04818 66.6% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: runenwelle 9s linear infinite;
}
@keyframes runenwelle { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ------------------------------------------------------------------ Eisenplatten */
.pult {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.6rem 1.4rem; align-items: start;
  width: min(1280px, 100% - 2rem); margin: 2rem auto 3.4rem;
}
.start, .squad, .links { grid-column: 1 / -1; }
.lobby, .twitch { grid-column: span 4; }
.feed, .youtube { grid-column: span 8; }
.ueber { grid-column: span 7; }
.welten { grid-column: span 5; }
/* Rahmen aus geschmiedetem Eisen mit Nietplatten und Glutrunen (gerendert, marke\logostil.py): Ecken fest, Kanten wiederholt;
   ragt 8px nach außen und 24px nach innen, daher das breitere Polster */
.fenster {
  position: relative; padding: 2.5rem 2.1rem 1.9rem;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 150, 70, .06), transparent 62%), var(--eisen-verlauf);
  border: 2px solid transparent; border-image: url(bilder/rahmen.webp?v=5185ca9c) 100 / 26px / 8px round;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, .55), 0 26px 52px -30px #000;
}
.fenster > .fenster-kopf { position: absolute; z-index: 2; top: 0; left: 50%; max-width: calc(100% - 5rem); margin: 0; translate: -50% -55%; }
.fenster > .fenster-kopf > span { overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ Schrift */
h1, h2 {
  margin: 0 0 .9rem; font-family: var(--titel); font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  filter: drop-shadow(0 2px 0 rgba(22, 9, 3, .95)) drop-shadow(0 0 16px rgba(255, 100, 20, .32));
}
h1 { font-size: clamp(3rem, 7.2vw, 6.2rem); line-height: .92; }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1; }
h2.klein { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
h3 { margin: 0 0 .3rem; color: var(--flamme); font: 700 1.16rem/1.2 var(--titel); text-transform: uppercase; letter-spacing: .06em; }
p { margin: 0 0 1rem; color: rgba(242, 226, 203, .86); }
.zeile { margin: 0 0 .8rem; color: var(--bronze-hell); font: 700 .95rem/1.4 var(--titel); letter-spacing: .18em; text-transform: uppercase; }
.zeile::before { content: '◆'; margin-right: .6em; color: var(--glut); }
.lead { color: var(--text); font-size: 1.14rem; }
.satz { max-width: 62ch; }
.fein { margin: .9rem 0 0; color: var(--leise); font-size: .84rem; line-height: 1.55; }
.weiter { display: inline-block; margin-top: 1rem; color: var(--feuer); font: 700 .92rem var(--schrift); letter-spacing: .04em; text-underline-offset: 3px; }
.weiter:hover { color: var(--flamme); }

/* Knöpfe: dunkles Eisen mit Bronzekante und Goldschrift, der wichtigste glüht wie flüssiges Metall */
.befehle { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.befehl {
  display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.25rem; cursor: pointer; text-decoration: none;
  border: 1px solid var(--bronze); border-radius: 2px; background: linear-gradient(180deg, #2f2117, #150e0a);
  box-shadow: inset 0 1px 0 rgba(255, 214, 160, .18), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 6px 16px -10px #000;
  color: var(--flamme); font: 800 1.02rem/1 var(--titel); letter-spacing: .08em; text-transform: uppercase;
  transition: box-shadow .2s, color .2s, border-color .2s, filter .2s;
}
.befehl:hover, .befehl:focus-visible { border-color: var(--bronze-hell); color: #fff3d6; box-shadow: inset 0 1px 0 rgba(255, 214, 160, .25), 0 0 22px -4px rgba(255, 106, 26, .7); }
.befehl-voll {
  border-color: #ffc46a; background: linear-gradient(180deg, #ffd27a, #ff9a32 48%, #e0521a); color: #2a1105;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(120, 30, 0, .45), 0 8px 22px -10px rgba(255, 90, 20, .8);
}
.befehl-voll:hover, .befehl-voll:focus-visible { color: #1a0a03; filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 26px -2px rgba(255, 120, 30, .8); }

/* ------------------------------------------------------------------ Start */
.start { padding-top: 1.6rem; }
.start-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); padding: .4rem 0 1.6rem; }
/* der drehende Glutring vergrößerte als gedrehter Kasten die Seite (seitlicher Überlauf): 3rem Rand reichen für Schein und Unschärfe */
.hud { position: relative; justify-self: center; width: min(100%, 440px); margin: .4rem 0 2.8rem; isolation: isolate; overflow: clip; overflow-clip-margin: 3rem; }
@keyframes drehen { to { rotate: 360deg; } }
.glutring {
  position: absolute; z-index: -1; inset: -9%; border-radius: 50%; filter: blur(30px); opacity: .75;
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(255, 122, 31, .7) 18%, transparent 32%, rgba(229, 56, 29, .55) 48%,
    transparent 62%, rgba(255, 191, 94, .45) 78%, transparent 92%);
  mask-image: radial-gradient(circle, transparent 24%, #000 40%, #000 58%, transparent 71%);
  animation: drehen 24s linear infinite;
}
.hud > .plakette { position: absolute; left: 50%; bottom: -1.7rem; translate: -50% 0; font-size: .82rem; }
/* „zum Abenteuer.“ bleibt in einer Zeile und ist in Grenze 8,02 Schriftgrößen breit: Größe darum aus der Spaltenbreite (12cqi) */
.am-stueck { white-space: nowrap; }
.start-text { container-type: inline-size; }
.start-text h1 { font-size: clamp(1.8rem, 12cqi, 6.2rem); }
/* Servername in der schmalen Lobby-Spalte: Größe aus deren Breite („ByteBandit~Offiziell~“ brach sonst mitten im Wort) */
.lobby { container-type: inline-size; }
.lobby h2 { font-size: clamp(1.2rem, 7.5cqi, 2.1rem); overflow-wrap: anywhere; }
.start-text .satz { font-size: 1.12rem; color: var(--text); }

/* Medaillon lebt: WAN-Schleife als AVIF (marke\animiert.py: Feuer, Glut, Augen; bei „weniger Bewegung“ logo.webp), darüber
   Leuchtebenen über genau den Stellen des Bilds (Masken aus marke\masken.py, gleicher Ausschnitt wie das Bild).
   Neigung zum Mauszeiger über --neig-x/--neig-y (bytebandit.js) */
.medaillon-rahmen { position: relative; transform: perspective(1100px) rotateX(var(--neig-x, 0deg)) rotateY(var(--neig-y, 0deg)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.medaillon-rahmen picture { display: block; }   /* sonst Grundlinien-Lücke unter dem Bild: die Masken säßen zu tief */
.medaillon { width: 100%; filter: drop-shadow(0 16px 36px rgba(255, 90, 20, .35)); animation: atmen 5s ease-in-out infinite; }
@keyframes atmen { 50% { filter: drop-shadow(0 16px 48px rgba(255, 110, 30, .6)); } }
.leuchten, .augen-schein { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.leuchten { overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.leuchten-runen { -webkit-mask-image: url(bilder/maske-runen.webp?v=6ef1e26c); mask-image: url(bilder/maske-runen.webp?v=6ef1e26c); }
.leuchten-runen::before {
  content: ''; position: absolute; inset: 0; transform-origin: 49.85% 49.14%;
  background: conic-gradient(from 0deg at 49.85% 49.14%, transparent 0 60%, rgba(255, 190, 100, .3) 76%, #ffd98f 88%, transparent 93%);
  animation: drehen 5.5s linear infinite;
}
.leuchten-schaltkreis { -webkit-mask-image: url(bilder/maske-schaltkreis.webp?v=cb295001); mask-image: url(bilder/maske-schaltkreis.webp?v=cb295001); background: rgba(255, 170, 80, .22); animation: schaltkreis 2.6s ease-in-out infinite; }
.leuchten-schaltkreis::before { content: ''; position: absolute; left: 0; right: 0; top: 24%; height: 7%; background: linear-gradient(transparent, #fff3d6 50%, transparent); animation: datenfall 2.6s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes schaltkreis { 50% { background-color: rgba(255, 170, 80, .5); } }
@keyframes datenfall { 0% { transform: translateY(0); opacity: 0; } 10%, 70% { opacity: 1; } 80%, 100% { transform: translateY(260%); opacity: 0; } }
.leuchten-augen { -webkit-mask-image: url(bilder/maske-augen.webp?v=ad114ca8); mask-image: url(bilder/maske-augen.webp?v=ad114ca8); background: #fff1d0; animation: augen 4.4s ease-in-out infinite; }
.augen-schein {
  background: radial-gradient(ellipse 6% 3.6% at 46.3% 26.3%, rgba(255, 150, 50, .8), rgba(255, 110, 30, .25) 45%, transparent 75%),
    radial-gradient(ellipse 6% 3.6% at 52.6% 26.3%, rgba(255, 150, 50, .8), rgba(255, 110, 30, .25) 45%, transparent 75%);
  animation: augen 4.4s ease-in-out infinite;
}
@keyframes augen { 0%, 100% { opacity: .1; } 35% { opacity: .55; } 42% { opacity: 1; } 47% { opacity: .35; } 53% { opacity: .9; } 70% { opacity: .25; } }

/* ------------------------------------------------------------------ Discord-Lobby (bytebandit.js, Daten aus live.php) */
.lobby-zahl { margin: -.3rem 0 1rem; color: var(--bronze-hell); font: 700 .92rem/1.4 var(--schrift); }
.lobby-zahl[hidden] { display: none; }
.befehle + .lobby-zahl { margin-top: .9rem; }   /* Nordstreitmacht-Zahl unter den Knöpfen statt dicht an der Überschrift */
.lobby-zahl b { font: 800 1.7rem/1 var(--titel); }
.lobby-liste { display: grid; gap: .2rem; max-height: 420px; margin: 0 0 1.2rem; padding: 0; overflow-y: auto; list-style: none; scrollbar-color: var(--bronze-tief) transparent; }
.lobby-liste li, .lobby-sprache li { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); align-items: center; gap: .7rem; padding: .32rem .4rem; }
.lobby-liste li:hover { background: rgba(255, 140, 50, .07); }
/* Kürzel als kleine Bronzemünze */
.kuerzel {
  position: relative; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3c281a, #140d09 70%); box-shadow: inset 0 0 0 2px var(--bronze), 0 0 0 1px #000;
  color: var(--flamme); font: 800 .95rem/1 var(--titel); letter-spacing: .02em;
}
/* Status wie bei Discord: online hell, abwesend gedämpft, nicht stören rot */
.kuerzel::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border: 2px solid #120c09; border-radius: 50%; background: var(--feuer); }
.st-idle .kuerzel::after { background: #8a6a2c; }
.st-dnd .kuerzel::after { background: var(--rot); }
.lobby-name { overflow: hidden; color: var(--text); font: 700 .98rem/1.3 var(--schrift); text-overflow: ellipsis; white-space: nowrap; }
.lobby-name small { display: block; overflow: hidden; color: var(--leise); font-weight: 400; font-size: .82rem; text-overflow: ellipsis; }
.lobby-sprache { margin: 0 0 1rem; padding: .7rem .8rem; border: 1px solid var(--rand); background: rgba(255, 106, 26, .06); }
.lobby-sprache[hidden] { display: none; }
.lobby-sprache h3 { display: flex; align-items: center; gap: .45rem; color: var(--feuer); font-size: 1rem; }
.lobby-sprache ul { margin: .3rem 0 .4rem; padding: 0; list-style: none; }
.lobby-sprache p { margin: 0 0 .5rem; color: var(--leise); font-size: .84rem; }

/* ------------------------------------------------------------------ Einbettung (Twitch) erst nach Klick; TikTok seit 07.11.2026
   nur als Link (User: „tikotk nur link auf tiktok machen ohne iframe“) */
.einbettung {
  position: relative; display: grid; place-items: center; border: 1px solid rgba(217, 169, 111, .25);
  background: radial-gradient(circle at 50% 42%, rgba(255, 106, 26, .1), transparent 62%), #0c0806; box-shadow: inset 0 0 34px #000;
}
.twitch-rahmen { aspect-ratio: 16 / 9; }
.einbettung-vorhang { max-width: 46ch; padding: 1.6rem 1.2rem; text-align: center; }
.einbettung-vorhang .befehl { margin: .4rem 0 .9rem; }
.einbettung-zeichen { width: 2.7rem; height: 2.7rem; margin-bottom: .8rem; color: var(--feuer); filter: drop-shadow(0 0 10px rgba(255, 120, 30, .55)); }
.merken { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--leise); font-size: .86rem; cursor: pointer; }
.merken input { accent-color: var(--glut); }
.einbettung iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.twitch-rahmen.geladen { display: block; }

/* ------------------------------------------------------------------ YouTube */
.video-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.video {
  display: flex; flex-direction: column; width: 100%; padding: 0; cursor: pointer; border: 1px solid var(--rand);
  background: linear-gradient(180deg, #1a120d, #0e0907); color: inherit; font: inherit; text-align: left; transition: border-color .2s, box-shadow .2s;
}
.video:hover, .video:focus-visible { border-color: var(--bronze-hell); box-shadow: 0 0 20px -6px rgba(255, 106, 26, .6); }
.video-bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #140d07; }
/* Vorschaubilder warm wie Glutlicht, beim Zeigen in voller Farbe */
.video-bild img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(1.15) brightness(.86); transition: filter .3s; }
.video:hover img, .video:focus-visible img { filter: none; }
.video-play { position: absolute; inset: 0; width: 46px; height: 46px; margin: auto; padding: 12px; border: 1px solid var(--bronze-hell); border-radius: 50%; background: rgba(14, 9, 7, .8); color: var(--flamme); }
.video-titel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: .55rem .7rem 0; color: var(--text); font: 700 .92rem/1.35 var(--schrift); }
.video-datum { padding: .2rem .7rem .6rem; color: var(--leise); font-size: .8rem; }
.video-kurz { position: absolute; left: .45rem; top: .45rem; padding: .18rem .45rem; background: var(--glut-verlauf); color: #2a1105; font: 700 .7rem/1 var(--schrift); letter-spacing: .1em; text-transform: uppercase; }

/* ------------------------------------------------------------------ Spielwelten */
.module { margin: 0; padding: 0; list-style: none; }
.module li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .9rem; padding: .95rem 0; border-top: 1px solid rgba(217, 169, 111, .16); }
.module li > svg { width: 1.7rem; height: 1.7rem; margin-top: .1rem; color: var(--feuer); filter: drop-shadow(0 0 8px rgba(255, 120, 30, .5)); }
.module p { margin: 0; }
.schlagwort { display: block; margin-top: .4rem; color: var(--glut); font: 700 .74rem/1 var(--schrift); letter-spacing: .16em; text-transform: uppercase; }

/* ------------------------------------------------------------------ Nordstreitmacht */
.squad-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); }
.squad-bild { width: 100%; border: 1px solid var(--rand); filter: sepia(.3) saturate(1.1) brightness(.92); transition: filter .4s; }
.squad-bild:hover { filter: none; }
.weg { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--rand); background: rgba(10, 6, 4, .6); }
.weg ol { margin: .6rem 0 1rem; padding: 0; list-style: none; counter-reset: schritt; }
.weg li { position: relative; margin: 0 0 .6rem; padding-left: 2.4rem; counter-increment: schritt; }
.weg li::before { content: counter(schritt); position: absolute; left: 0; color: var(--feuer); font: 800 1.45rem/1.05 var(--titel); }
.weg li strong { color: var(--flamme); }
.server-id { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0; }
.server-id span { color: var(--leise); font: 700 .76rem/1 var(--schrift); letter-spacing: .14em; text-transform: uppercase; }
.server-id code { padding: .4rem .6rem; border: 1px solid var(--rand); background: #0b0705; color: var(--flamme); font: 400 .86rem/1.2 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
.kopieren { padding: .4rem .75rem; cursor: pointer; border: 1px solid var(--bronze); background: transparent; color: var(--flamme); font: 700 .84rem/1.2 var(--schrift); }
.kopieren[hidden] { display: none; }
.kopieren:hover { border-color: var(--bronze-hell); background: rgba(255, 140, 50, .12); }

/* ------------------------------------------------------------------ Links */
/* zehn Kacheln (seit Medal, 07.11.2026): 5 × 2 breit, sonst 2 je Zeile, damit keine allein steht */
.kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.kacheln a, .linkliste a {
  display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 1px solid var(--rand);
  background: linear-gradient(180deg, #1d140e, #110b08); box-shadow: inset 0 1px 0 rgba(255, 214, 160, .06);
  color: var(--text); text-decoration: none; font: 700 1rem/1.25 var(--schrift); transition: border-color .15s, box-shadow .15s, color .15s;
}
.kacheln a > svg, .linkliste a > svg:first-child { width: 1.6rem; height: 1.6rem; color: var(--feuer); }
.kacheln small, .linkliste small { display: block; overflow: hidden; color: var(--leise); font-weight: 400; font-size: .82rem; text-overflow: ellipsis; }
.kacheln span, .linkliste span { min-width: 0; }
.kacheln a:hover, .kacheln a:focus-visible, .linkliste a:hover, .linkliste a:focus-visible { border-color: var(--bronze-hell); color: var(--flamme); box-shadow: inset 0 1px 0 rgba(255, 214, 160, .12), 0 0 20px -6px rgba(255, 106, 26, .6); }

/* ------------------------------------------------------------------ Spieler (YouTube) */
.spieler { width: min(980px, 100% - 2rem); max-width: none; padding: 0 1.2rem 1rem; border: 2px solid var(--bronze); background: #0e0907; color: var(--text); }
.spieler::backdrop { background: rgba(0, 0, 0, .84); backdrop-filter: blur(3px); }
.spieler-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 -1.2rem 1rem; padding: .6rem 1.2rem; border-bottom: 1px solid var(--rand); background: linear-gradient(180deg, #24180f, #130c08); color: var(--flamme); font: 700 1.05rem/1.2 var(--titel); letter-spacing: .04em; }
.spieler-kopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spieler-zu { padding: 0 .45rem; cursor: pointer; border: 1px solid var(--rand); background: transparent; color: var(--flamme); font: 700 1.2rem/1.2 var(--schrift); }
.spieler-zu:hover { border-color: var(--bronze-hell); background: rgba(255, 140, 50, .12); }
.spieler-bild { aspect-ratio: 16 / 9; background: #000; }
.spieler-bild iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ Fuß */
.fuss { padding: 0 0 2.2rem; background: linear-gradient(180deg, rgba(16, 10, 7, .96), rgba(6, 4, 3, .98)); }
.fuss .runen { margin-bottom: 1.6rem; }
.fuss-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.6rem; width: min(1280px, 100% - 2rem); margin-inline: auto; font-size: .9rem; }
.fuss-innen p { margin: 0; color: var(--leise); }
.fuss-links { display: flex; gap: 1.4rem; }
.fuss-links a { color: var(--bronze-hell); text-decoration: none; }
.fuss-links a:hover { color: var(--flamme); }
.fuss-herkunft { margin: 2rem auto 0; padding-top: 1.8rem; border-top: 1px solid rgba(217, 169, 111, .12); text-align: center; color: var(--text); }
.fuss-herkunft a { display: inline-flex; flex-direction: column; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.fuss-herkunft a:hover { color: #fff; }
.fuss-herkunft img { width: 171px; height: 179px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(255, 90, 40, .3)); }
.fuss-herkunft span { font-size: 1.05rem; }
.fuss-herkunft b { color: var(--draco-hell); font-weight: 700; white-space: nowrap; }
.fuss-herkunft .fuss-adresse {
  padding: .5rem 1.1rem; border: 1px solid color-mix(in srgb, var(--draco) 50%, transparent); border-radius: 3px;
  color: var(--draco-hell); font: 700 1rem/1 var(--schrift); background: color-mix(in srgb, var(--draco) 10%, transparent);
  transition: border-color .2s, color .2s, background-color .2s;
}
.fuss-herkunft a:hover .fuss-adresse { border-color: var(--draco); color: #fff; background: color-mix(in srgb, var(--draco) 18%, transparent); }

/* ------------------------------------------------------------------ Linkseite (links/) */
.linkbaum { width: min(580px, 100% - 2rem); margin: 2.6rem auto 3rem; }
.linkbaum .fenster { text-align: center; }
.linkbaum-bild { position: relative; width: 210px; margin: .4rem auto 1.2rem; isolation: isolate; overflow: clip; overflow-clip-margin: 3rem; }
.linkbaum h1 { font-size: clamp(2.5rem, 9vw, 3.5rem); }
.linkbaum .zeile::after { content: '◆'; margin-left: .6em; color: var(--glut); }
.linkliste { display: grid; gap: .55rem; margin: 1.4rem 0 0; padding: 0; list-style: none; text-align: left; }
.linkliste .pfeil { width: 1rem; height: 1rem; margin-left: auto; color: var(--leise); }
.linkliste .hervor a { border-color: var(--bronze); background: linear-gradient(180deg, #3a2414, #1a0f09); }

/* ------------------------------------------------------------------ Einblenden beim Scrollen (bytebandit.js) */
.hat-js .einblenden { transition: opacity .7s ease var(--verzug, 0ms), translate .7s cubic-bezier(.2, .7, .2, 1) var(--verzug, 0ms); }
.hat-js .einblenden:not(.sichtbar) { opacity: 0; translate: 0 24px; }

/* ------------------------------------------------------------------ Zündung (intro.js) */
/* Dunkel, Glut steigt (funken.js, Art intro), das Medaillon entflammt, dann erlischt der Schleier. Zeiten hier und ENDE in
   intro.js gehören zusammen */
.boot { display: none; }
.boot-an { overflow: hidden; }
.boot-an .boot {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(circle at 50% 64%, #2c1307, #070403 64%); animation: verloeschen .6s 1.9s ease-in forwards;
}
.boot-funken { position: absolute; inset: 0; width: 100%; height: 100%; }
.boot-medaillon { position: relative; width: min(240px, 52vw); opacity: 0; animation: zuenden 1.1s .1s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes zuenden {
  0% { opacity: 0; transform: scale(.72); filter: brightness(.2); }
  45% { opacity: 1; filter: brightness(2.3) drop-shadow(0 0 60px rgba(255, 140, 40, .95)); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) drop-shadow(0 0 30px rgba(255, 106, 26, .55)); }
}
@keyframes verloeschen { to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------------ Breiten */
@media (max-width: 1100px) {
  .lobby, .twitch, .feed, .youtube, .ueber, .welten { grid-column: 1 / -1; }
  .video-liste, .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Leiste bis 1000 px zweizeilig: das Menü rutscht in eine eigene Zeile */
@media (max-width: 1000px) {
  .leiste-innen { flex-wrap: wrap; min-height: 0; padding: .55rem 0; }
  .menue { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .lampe-chip { margin-left: auto; }
}
@media (max-width: 860px) {
  .start-raster, .squad-raster { grid-template-columns: minmax(0, 1fr); }
  .hud { width: min(80%, 340px); }
}
/* Schmale Tablets und Handys: Draco-Logo ohne Text */
@media (max-width: 720px) {
  .zurueck span { display: none; }
  .zurueck { padding: .28rem; }
  .menue { justify-content: space-between; }
  .menue a { padding: .45rem .35rem; font-size: .76rem; letter-spacing: .06em; }
  .menue a::after { left: .35rem; right: .35rem; }
  .fenster { padding: 2.3rem 1.4rem 1.5rem; border-image-width: 20px; border-image-outset: 6px; }
}
@media (max-width: 520px) {
  .video-liste, .kacheln { grid-template-columns: minmax(0, 1fr); }
  .wortmarke { font-size: 1.3rem; }
  .lampe-chip { padding: .32rem .5rem; font-size: .7rem; }
  .plakette { height: 42px; padding: 0 30px 3px; font-size: .84rem; letter-spacing: .1em; }
}
/* sonst ragt das Menü unter 414 px über den Rand („Nordstreitmacht“ ist lang; kopf-test.js) */
@media (max-width: 420px) {
  .menue a { padding: .4rem .2rem; font-size: .66rem; letter-spacing: .03em; }
}
@media (max-width: 380px) {
  .marke img { width: 36px; height: 36px; }
  .wortmarke { font-size: 1.12rem; }
}

/* Weniger Bewegung gewünscht: alles steht still */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lampe, .glutring, .medaillon, .runen span { animation: none; }
  .leuchten, .augen-schein, .stadt-film { display: none; }
  .medaillon-rahmen { transform: none; }
  *, *::before { transition: none !important; }
}