/* Lustiges Rudel – Bereiche der Spiele (aion2/, wow/, wardogs/, grayzone/, erzeugt von bereiche.js). Nur auf diesen Seiten,
   nach stil.css. Je Spiel ein eigenes Thema nach den Entwürfen des Partners (05.11.2026, C:\Users\Administrator\Downloads\
   Lustiges Rudel: AION-Legion in Gold, WoW-Allianz-Gilde in Blau und Gold, WARDOGS „Command Center“, Gray Zone als Militär-Terminal),
   User: „nimm dies mit rein und mach es nur schicker und cooler, dem thema entsprechend“. Werte, die Peet9012 noch liefern
   muss, stehen als .folgt auf der Seite. Thema über die Klasse thema-… am body, Farben über --ak, --ak-hell, --rand, --g1, --g2. */

@font-face { font-family: 'Orbitron'; src: url(schriften/orbitron.woff2?v=5d281085) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url(schriften/rajdhani-500.woff2?v=98d75ef6) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url(schriften/rajdhani-600.woff2?v=ad9c55ec) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url(schriften/rajdhani-700.woff2?v=d5448938) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Black Ops One'; src: url(schriften/black-ops-one-400.woff2?v=cbfb766b) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Share Tech Mono'; src: url(schriften/share-tech-mono-400.woff2?v=65d3eea7) format('woff2'); font-weight: 400; font-display: swap; }

/* ----------------------------------------------------------------- gemeinsam */
.menue a[aria-current="page"]::after { background: var(--ak, var(--tuerkis-hell)); }
.bereich .marke, .bereich .zier { color: var(--ak); }
.th-held { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 92svh; padding: 9rem 0 5rem; overflow: hidden; }
.th-video { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; background: var(--g2); }
.th-held::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--schleier); }
.th-held::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.th-held-innen { position: relative; }
/* Übergang zur Seite aus Einzelteilen (uebergang.js) über allem: beginnt dunkel wie das Abdunkeln der alten Seite, mit dem ersten
   Bild der Teile liegt die Seite darunter frei (auf); weg = übersprungen. intro-notaus (stil.css): ohne Skript nach 15 s weg */
.uebergang { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%; background: var(--nacht); visibility: hidden;
  pointer-events: none; transition: background-color .5s ease, opacity .4s ease; }
.intro-an .uebergang { visibility: visible; pointer-events: auto; animation: intro-notaus 0s 15s forwards; }
.uebergang.auf { background-color: transparent; }
.uebergang.weg { opacity: 0; }
.pfad { margin: 0 0 1.4rem; color: var(--leise); font: 600 .86rem/1.3 var(--klein); letter-spacing: .16em; text-transform: uppercase; }
.pfad a { color: var(--silber); text-decoration: none; }
.pfad a:hover { color: #fff; }
.chips { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.chips li { padding: .45rem .9rem; border: 1px solid var(--rand); background: rgba(0, 0, 0, .45); color: #fff; font: 600 .86rem/1 var(--klein);
  letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(4px); }
.chips b { margin-right: .4rem; color: var(--ak); font-weight: 600; }
.th-text { max-width: 58ch; margin: 1.3rem auto 2.2rem; color: #fff; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.6; text-shadow: 0 2px 12px #000; }
.kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 860px; margin: 2.8rem auto 0; padding: 0; list-style: none; }
.kacheln li { display: grid; gap: .35rem; justify-items: center; padding: 1.15rem .8rem 1rem; border: 1px solid var(--rand);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g1) 85%, transparent), color-mix(in srgb, var(--g2) 92%, transparent)); }
.kacheln strong { color: var(--ak); font: 700 1.5rem/1 var(--titelschrift, var(--wappen)); letter-spacing: .04em; text-transform: uppercase; }
.kacheln span { color: var(--leise); font: 600 .74rem/1.2 var(--klein); letter-spacing: .2em; text-transform: uppercase; }
/* Platzhalter: Peet9012 liefert die Angabe noch */
.folgt { display: inline-block; padding: .2rem .55rem; border: 1px dashed color-mix(in srgb, var(--ak) 55%, transparent); color: var(--leise);
  font: 600 .74rem/1.2 var(--klein); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
strong .folgt, h3 .folgt { font-size: .7rem; vertical-align: middle; }
.th-raster { display: grid; gap: 1.1rem; }
.th-raster-2 { grid-template-columns: repeat(2, 1fr); }
.th-raster-3 { grid-template-columns: repeat(3, 1fr); }
.th-raster-4 { grid-template-columns: repeat(4, 1fr); }
.th-karte { position: relative; padding: 1.5rem 1.4rem 1.4rem; border: 1px solid var(--rand);
  background: var(--rauschen), linear-gradient(180deg, var(--g1), var(--g2)); transition: transform .25s, box-shadow .25s, border-color .25s; }
.th-karte:hover { transform: translateY(-4px); border-color: var(--ak); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ak) 55%, transparent); }
.th-karte h3 { font-size: 1.15rem; }
.th-karte p { margin: .55rem 0 0; color: var(--leise); font-size: .98rem; line-height: 1.5; }
.th-karte .knopf-text { display: inline-block; margin-top: 1rem; color: var(--ak); font: 600 .86rem/1 var(--klein); letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; }
.th-karte .knopf-text:hover { color: #fff; }
.th-symbol { width: 52px; height: 52px; padding: 12px; border: 1px solid var(--rand); border-radius: 50%; color: var(--ak);
  background: radial-gradient(circle, color-mix(in srgb, var(--ak) 18%, transparent), transparent 70%); }
.th-art { margin: 0 0 .5rem; color: var(--ak); font: 600 .76rem/1.2 var(--klein); letter-spacing: .22em; text-transform: uppercase; }
.quelle { margin: 1rem 0 0; color: var(--leise); font-size: .9rem; text-align: center; }
/* Patchnotes der Hersteller (seit 10.11.2026, rudel.js aus patchnotes.php): Datum links, Titel als Link zur Meldung */
.patch-liste { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--rand); background: var(--rand); }
.patch-liste li { display: grid; grid-template-columns: 6.6rem 1fr; gap: 1rem; align-items: baseline; padding: .85rem 1.2rem; background: var(--g2); }
.patch-liste .liste-leer { display: block; }
.patch-liste time { color: var(--ak); font: 600 .86rem/1.3 var(--klein); letter-spacing: .12em; }
.patch-liste a { color: #fff; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.patch-liste a:hover { color: var(--ak-hell); text-decoration: underline; }
/* Das Spiel: Angaben der Hersteller */
.intel { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.intel .lead { margin: 0; }
.intel dl { display: grid; gap: 1px; margin: 0; background: var(--rand); border: 1px solid var(--rand); }
.intel dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; background: var(--g2); }
.intel dt { color: var(--leise); font: 600 .82rem/1.3 var(--klein); letter-spacing: .18em; text-transform: uppercase; }
.intel dd { margin: 0; color: #fff; font: 700 1rem/1.3 var(--titelschrift, var(--wappen)); text-align: right; }
.marke-hinweis { margin: 1.4rem 0 0; color: var(--silber-dunkel); font-size: .82rem; }
.hinweis { margin: 2.4rem auto 0; max-width: 760px; padding: .9rem 1.2rem; border: 1px dashed color-mix(in srgb, var(--ak) 45%, transparent);
  color: var(--leise); font: 600 .84rem/1.45 var(--klein); letter-spacing: .08em; text-align: center; text-transform: uppercase; }

/* ----------------------------------------------------------------- AION 2: Legion der Elyos, Gold auf Nachtblau */
.thema-aion { --ak: #e9c46a; --ak-hell: #fff3c4; --rand: rgba(233, 196, 106, .3); --g1: #111a2b; --g2: #080d17;
  --schleier: radial-gradient(ellipse at 50% 40%, rgba(8, 13, 23, .25), rgba(8, 13, 23, .78) 70%), linear-gradient(transparent 60%, var(--nacht)); }
.thema-aion .th-held::after {   /* Lichtstrahlen von oben, langsam drehend */
  background: repeating-conic-gradient(from 0deg at 50% -10%, rgba(255, 228, 150, .07) 0 4deg, transparent 4deg 13deg);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 65%); animation: strahlen 40s linear infinite; }
@keyframes strahlen { to { rotate: 3deg; } }
/* Verlauf malt nur in der Box: ohne Polster oben fehlten die Punkte des Ö */
.th-titel-gold { margin: 0; padding: .16em .04em .04em; font: 900 clamp(1.9rem, 9.5vw, 7.2rem)/.95 var(--wappen); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #fffbe9 10%, #f3d480 45%, #b8862e 75%, #7a5516); -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 4px 0 #3b2a0b) drop-shadow(0 0 40px rgba(233, 196, 106, .35)); }
.th-ueber { margin: 0 0 .6rem; color: var(--ak); font: 600 1rem/1.2 var(--klein); letter-spacing: .42em; text-transform: uppercase; }
.knopf-gold-voll { color: #241803; filter: drop-shadow(0 12px 26px rgba(233, 196, 106, .4)); }
.knopf-gold-voll::before { background: linear-gradient(180deg, #fff6d3, #e9c46a 50%, #9c7426); }
.fokus-karten .th-karte { display: grid; justify-items: center; gap: .9rem; text-align: center; padding: 2rem 1.3rem 1.7rem; }
.fokus-karten .th-karte::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(233, 196, 106, .12); pointer-events: none; }
.timer-tafel { display: grid; gap: 1px; border: 1px solid var(--rand); background: var(--rand); }
.timer-zeile { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 1.1rem; padding: 1.1rem 1.4rem;
  background: linear-gradient(90deg, #121c2e, #0a101b); }
.timer-zeile svg { width: 34px; height: 34px; color: var(--ak); }
.timer-zeile h3 { font-size: 1.15rem; }
.timer-zeile p { margin: .25rem 0 0; color: var(--leise); font-size: .95rem; }
.timer-art { display: block; margin-bottom: .25rem; color: var(--ak); font: 600 .74rem/1 var(--klein); letter-spacing: .22em; text-transform: uppercase; }
.timer-uhr { display: grid; justify-items: end; gap: .3rem; }
.timer-uhr b { color: #fff; font: 700 1.4rem/1 'Share Tech Mono', monospace; letter-spacing: .08em; opacity: .55; }
.live { display: inline-flex; align-items: center; gap: .45rem; color: #ff7b7b; font: 600 .74rem/1 var(--klein); letter-spacing: .2em; text-transform: uppercase; }
.live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .25; } }

/* ----------------------------------------------------------------- WoW Forever: Allianz-Gilde Nachtwölfe, Blau und Gold wie ihr Logo
   (User 07.11.2026: „änder wow forever zu allianz“; vorher Horde in Glutrot) */
.thema-wow { --ak: #3d8bff; --ak-hell: #f2c66d; --rand: rgba(61, 139, 255, .32); --g1: #07101f; --g2: #040810; --titelschrift: var(--wappen);
  --schleier: radial-gradient(ellipse at 50% 45%, rgba(3, 7, 18, .2), rgba(3, 7, 18, .82) 72%), linear-gradient(transparent 55%, var(--nacht)); }
.thema-wow .th-held::after {   /* aufsteigende Gold- und Blaufunken */
  background: radial-gradient(2px 2px at 12% 80%, #f2c66d, transparent), radial-gradient(2px 2px at 28% 60%, #7fc4ff, transparent),
    radial-gradient(1.5px 1.5px at 46% 88%, #ffe7a8, transparent), radial-gradient(2px 2px at 63% 70%, #4da3ff, transparent),
    radial-gradient(1.5px 1.5px at 78% 84%, #f2c66d, transparent), radial-gradient(2px 2px at 90% 64%, #9fd3ff, transparent);
  background-size: 100% 60%; background-repeat: repeat-y; animation: funken 11s linear infinite; opacity: .85; }
@keyframes funken { from { background-position: 0 0; } to { background-position: 0 -120%; } }
/* Logo der Gilde statt Schriftzug (enthält den Namen; freigestellt aus marke\original\nachtwoelfe-logo.jpg) */
.th-logo { margin: 0; line-height: 0; }
.th-logo img { margin-inline: auto; width: clamp(220px, 32vw, 400px); height: auto; filter: drop-shadow(0 0 28px rgba(70, 150, 255, .55)) drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.th-ruf { margin: 1rem 0 0; color: var(--ak-hell); font: 700 clamp(1.1rem, 2vw, 1.45rem)/1.3 var(--wappen); letter-spacing: .12em; text-transform: uppercase; }
.knopf-allianz { color: #fff; filter: drop-shadow(0 12px 26px rgba(40, 110, 255, .45)); }
.knopf-allianz::before { background: linear-gradient(180deg, #6fb2ff, #1f5fd1 55%, #0b2a6b); }
.rollen { display: grid; gap: .6rem; margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.rollen li { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .35); }
.rollen svg { width: 20px; height: 20px; color: var(--ak-hell); flex: none; }
/* nur die Rolle selbst: die „folgt“-Marke steckt seit dem Rudel-Admin (09.11.2026) in einer eigenen Feld-Hülle */
.rollen li > span:first-of-type { flex: 1; color: #fff; font-weight: 600; }
.raid-tage .th-karte { border-left: 3px solid var(--ak); }
.raid-tage + .th-karte { margin-top: 1.1rem; }
.raid-tage .th-karte:last-child { border-left-color: var(--ak-hell); }
.raid-tage strong { display: block; margin-top: .3rem; color: var(--ak-hell); font: 700 1rem/1 'Share Tech Mono', monospace; letter-spacing: .06em; }
.kader-karten .th-karte { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-left: 3px solid var(--klasse); }
.kader-karten .klasse { color: var(--klasse); font: 700 1.05rem/1.1 var(--wappen); letter-spacing: .03em; }
.kader-karten small { display: block; margin-top: .25rem; color: var(--leise); font: 600 .78rem/1.2 var(--klein); letter-spacing: .14em; text-transform: uppercase; }
.kader-karten .zeichen { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--klasse);
  background: color-mix(in srgb, var(--klasse) 14%, #000); color: var(--klasse); font: 700 1rem/1 var(--wappen); }
/* Klassenfarben wie im Spiel, die acht Klassen der Allianz in der klassischen Zeit */
.k-krieger { --klasse: #c69b6d; } .k-paladin { --klasse: #f48cba; } .k-jaeger { --klasse: #aad372; } .k-schurke { --klasse: #fff468; }
.k-priester { --klasse: #ffffff; } .k-magier { --klasse: #3fc7eb; } .k-hexer { --klasse: #8788ee; }
.k-druide { --klasse: #ff7c0a; }

/* ----------------------------------------------------------------- WARDOGS: Command Center, Orange auf Schiefer, HUD */
.thema-wardogs { --ak: #ff7a1a; --ak-hell: #ffb26b; --rand: rgba(255, 122, 26, .3); --g1: #141922; --g2: #0b0e13; --titelschrift: 'Orbitron', sans-serif;
  --schleier: linear-gradient(rgba(8, 10, 14, .55), rgba(8, 10, 14, .82)), linear-gradient(transparent 60%, var(--nacht)); font-family: 'Rajdhani', var(--schrift); }
.thema-wardogs main { background: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 46px 46px,
  linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 46px 46px; }
.thema-wardogs .th-held::after { background: linear-gradient(rgba(255, 122, 26, .05) 1px, transparent 1px) 0 0 / 100% 4px; }
.thema-wardogs h2, .thema-wardogs h3 { font-family: 'Orbitron', sans-serif; letter-spacing: .04em; text-shadow: none; }
.thema-wardogs h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 900; }
.thema-wardogs .marke { font-family: 'Share Tech Mono', monospace; letter-spacing: .2em; }
.thema-wardogs .marke::before { content: '[ '; } .thema-wardogs .marke::after { content: ' ]'; }
.status-leiste { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; margin: 0 auto 2rem;
  color: var(--leise); font: 400 .82rem/1.3 'Share Tech Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.status-leiste .an { color: #4ade80; }
.status-leiste .an::before { content: '● '; }
.th-titel-hud { margin: 0; color: #fff; font: 900 clamp(2.6rem, 8vw, 6.4rem)/.95 'Orbitron', sans-serif; letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 0 30px rgba(0, 0, 0, .8); }
.th-titel-hud span { display: block; color: var(--ak); text-shadow: 0 0 24px rgba(255, 122, 26, .55); }
.knopf-hud { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.9rem; color: #120700; text-decoration: none;
  font: 700 .95rem/1 'Orbitron', sans-serif; letter-spacing: .12em; text-transform: uppercase; background: var(--ak);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); transition: filter .2s, transform .2s; }
.knopf-hud:hover { filter: brightness(1.12); transform: translateY(-2px); }
.knopf-hud svg { width: 20px; height: 20px; }
.knopf-hud-leer { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.thema-wardogs .kacheln li, .thema-wardogs .th-karte { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background: linear-gradient(180deg, #161c26, #0d1117); }
.thema-wardogs .kacheln strong { font-family: 'Orbitron', sans-serif; }
/* Ein Artwork, drei Ausschnitte per Zoom (16:9 in 16:9: object-position allein verschiebt nichts) */
.news-rahmen { display: block; aspect-ratio: 16 / 9; margin: -1.5rem -1.4rem 1.2rem; overflow: hidden; }
.news-bild { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05);
  transform: scale(var(--zoom, 1)); transform-origin: var(--fokus, 50% 50%); }
.news-bild.links { --zoom: 1.9; --fokus: 22% 62%; } .news-bild.mitte { --zoom: 2.1; --fokus: 50% 16%; } .news-bild.rechts { --zoom: 1.9; --fokus: 80% 62%; }
.etikett { display: inline-block; margin-bottom: .8rem; padding: .3rem .6rem; background: var(--ak); color: #120700; font: 700 .68rem/1 'Share Tech Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase; }
.etikett-blau { background: #3b82f6; color: #fff; } .etikett-gruen { background: #16a34a; color: #fff; }
.einsatz { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 1.3rem; }
.einsatz + .einsatz { margin-top: .9rem; }
.datum { display: grid; place-items: center; height: 76px; border: 1px solid var(--rand); background: #0a0d12; }
.datum b { color: var(--ak); font: 900 1.6rem/1 'Orbitron', sans-serif; }
.datum small { color: var(--leise); font: 600 .7rem/1 'Share Tech Mono', monospace; letter-spacing: .16em; }
.einsatz-plaetze { display: grid; justify-items: end; gap: .6rem; color: var(--leise); font: .82rem/1 'Share Tech Mono', monospace; }
.operator { display: grid; gap: .8rem; }
.operator-kopf { display: flex; align-items: center; gap: .8rem; }
.operator-kopf svg { width: 46px; height: 46px; padding: 10px; border: 1px solid var(--rand); color: var(--ak); background: #0a0d12; }
.operator-rolle { color: var(--ak); font: 600 .74rem/1 'Share Tech Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.operator dl { display: grid; gap: .35rem; margin: 0; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .07); font: .86rem/1.2 'Share Tech Mono', monospace; }
.operator dl div { display: flex; justify-content: space-between; }
.operator dt { color: var(--leise); } .operator dd { margin: 0; color: #fff; }
.galerie { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; }
.galerie figure { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--rand); }
.galerie figure:first-child { grid-row: 1 / 3; }
.galerie img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s; }
.galerie figure:hover img { scale: 1.05; }
.galerie figcaption { position: absolute; inset: auto 0 0; padding: 1.4rem 1.2rem 1rem; background: linear-gradient(transparent, rgba(0, 0, 0, .85));
  color: #fff; font: 700 1rem/1.2 'Orbitron', sans-serif; }
.galerie figcaption small { display: block; margin-top: .3rem; color: var(--ak-hell); font: .74rem/1.2 'Share Tech Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.galerie .g2 img { transform: scale(1.8); transform-origin: 25% 65%; } .galerie .g3 img { transform: scale(1.8); transform-origin: 50% 12%; }
.bewerbung { max-width: 760px; margin-inline: auto; padding: clamp(1.6rem, 4vw, 2.6rem); }
.bewerbung ol { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.4rem; margin: 1.4rem 0 1.8rem; padding: 0; list-style: none; counter-reset: feld; }
.bewerbung li { counter-increment: feld; padding: .75rem .9rem; border: 1px solid rgba(255, 255, 255, .1); background: #0a0d12; color: #fff;
  font: 500 1rem/1.3 'Rajdhani', sans-serif; }
.bewerbung li::before { content: counter(feld, decimal-leading-zero) ' // '; color: var(--ak); font-family: 'Share Tech Mono', monospace; }

/* ----------------------------------------------------------------- Gray Zone Warfare: Militär-Terminal, Oliv und Khaki */
.thema-grayzone { --ak: #c9d77a; --ak-hell: #e9f0b5; --rand: rgba(201, 215, 122, .28); --g1: #161d14; --g2: #0c110b; --titelschrift: 'Black Ops One', sans-serif;
  --warn: #e69500; --alarm: #ff453a;
  --schleier: linear-gradient(rgba(6, 9, 5, .5), rgba(6, 9, 5, .86)), linear-gradient(transparent 60%, var(--nacht)); }
.thema-grayzone main { font-family: 'Share Tech Mono', monospace; }
.thema-grayzone .th-held::after { background: repeating-linear-gradient(rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
.thema-grayzone h1, .thema-grayzone h2, .thema-grayzone h3 { font-family: 'Black Ops One', sans-serif; font-weight: 400; letter-spacing: .05em; text-shadow: none; }
.thema-grayzone h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.thema-grayzone .marke { font-family: 'Share Tech Mono', monospace; letter-spacing: .16em; }
.thema-grayzone .marke::before { content: '// '; }
.terminal-leiste { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1.4rem; margin: 0 0 2rem; padding: .7rem 1.2rem;
  border: 1px solid var(--rand); background: rgba(8, 12, 7, .82); color: var(--leise); font: .82rem/1.3 'Share Tech Mono', monospace; text-transform: uppercase; }
.terminal-leiste .an { color: #7cff6b; }
.terminal-leiste .an::before { content: '● '; animation: puls 2s ease-in-out infinite; }
.th-titel-stencil { margin: 0; color: var(--ak-hell); font: 400 clamp(2.6rem, 8vw, 6.4rem)/.95 'Black Ops One', sans-serif; letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 0 22px rgba(201, 215, 122, .25), 3px 3px 0 #000; }
.th-unter { margin: .9rem 0 0; color: var(--warn); font: 1rem/1.3 'Share Tech Mono', monospace; letter-spacing: .2em; text-transform: uppercase; }
.th-unter::after { content: '_'; animation: puls 1.1s steps(1) infinite; }
.knopf-terminal { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; border: 1px solid var(--ak); color: #0c110b; background: var(--ak);
  text-decoration: none; font: 1rem/1 'Share Tech Mono', monospace; letter-spacing: .14em; text-transform: uppercase; transition: filter .2s; }
.knopf-terminal:hover { filter: brightness(1.15); }
.knopf-terminal svg { width: 18px; height: 18px; }
.knopf-terminal-leer { color: var(--ak); background: rgba(0, 0, 0, .5); }
.leitstand { display: grid; grid-template-columns: 1fr 1.9fr 1fr; gap: 1.1rem; align-items: start; }
.konsole { position: relative; padding: 1.2rem 1.2rem 1.3rem; border: 1px solid var(--rand); background: linear-gradient(180deg, #131a11, #0b100a); }
.konsole::before, .konsole::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--ak); pointer-events: none; }
.konsole::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.konsole::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.konsole h3 { margin-bottom: 1rem; color: var(--ak-hell); font-size: 1.05rem; }
.konsole h3::before { content: '// '; color: var(--ak); }
.konsole + .konsole { margin-top: 1.1rem; }
.leitmenue { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.leitmenue a { display: flex; justify-content: space-between; padding: .6rem .75rem; border: 1px solid rgba(255, 255, 255, .07); color: var(--text);
  text-decoration: none; text-transform: uppercase; font-size: .86rem; letter-spacing: .08em; }
.leitmenue a:hover { border-color: var(--ak); color: #fff; background: rgba(201, 215, 122, .06); }
.leitmenue small { color: var(--ak); }
.werte { display: grid; gap: .45rem; margin: 0; font-size: .84rem; }
.werte div { display: flex; justify-content: space-between; gap: .8rem; }
.werte dt { color: var(--leise); text-transform: uppercase; } .werte dd { margin: 0; color: var(--ak-hell); text-align: right; }
.befehl { margin-bottom: 1.1rem; padding: 1rem 1.2rem 1rem 1.4rem; border: 1px solid var(--warn); color: #fff;
  background: linear-gradient(90deg, rgba(230, 149, 0, .16), rgba(230, 149, 0, .04)); box-shadow: inset 6px 0 0 var(--warn); }
.befehl b { display: block; margin-bottom: .35rem; color: var(--warn); letter-spacing: .1em; text-transform: uppercase; }
.operation { padding: 1.2rem 1.3rem 1.3rem; border: 1px solid var(--rand); border-left: 3px solid var(--warn); background: rgba(0, 0, 0, .35); }
.operation + .operation { margin-top: 1.1rem; border-left-color: var(--ak); }
.operation-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; }
.operation-kopf h3 { color: #fff; font-size: 1.2rem; }
.operation-meta { margin: .45rem 0 .9rem; color: var(--warn); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.slots li { padding: .6rem .7rem; border: 1px solid rgba(255, 255, 255, .1); background: #090d08; }
.slots small { display: block; color: var(--leise); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.slots b { color: var(--warn); font-weight: 400; font-size: .86rem; }
.stempel { padding: .25rem .55rem; border: 1px solid var(--alarm); color: var(--alarm); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.stempel-gruen { border-color: #7cff6b; color: #7cff6b; }
.lage { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .84rem; }
.lage li { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem .7rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .3); }
.thema-grayzone .th-karte { background: linear-gradient(180deg, #131a11, #0b100a); }
.thema-grayzone .th-karte h3 { color: var(--ak-hell); }

/* ----------------------------------------------------------------- Breiten */
@media (max-width: 1000px) {
  .kacheln, .th-raster-4 { grid-template-columns: repeat(2, 1fr); }
  .th-raster-3, .intel, .leitstand { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .galerie figure:first-child { grid-column: 1 / -1; grid-row: auto; }
  .einsatz { grid-template-columns: 64px 1fr; }
  .einsatz-plaetze { grid-column: 1 / -1; justify-items: start; grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
}
@media (max-width: 720px) {
  .th-held { min-height: 86svh; padding-top: 10rem; }
  .th-raster-2, .bewerbung ol { grid-template-columns: 1fr; }
  .slots { grid-template-columns: 1fr 1fr; }
  .timer-zeile { grid-template-columns: 40px 1fr; }
  .timer-uhr { grid-column: 2; justify-items: start; }
  .chips li { font-size: .76rem; padding: .4rem .7rem; }
}
@media (max-width: 420px) {
  .kacheln, .th-raster-4 { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kacheln strong { font-size: 1.15rem; }
  .patch-liste li { grid-template-columns: 1fr; gap: .2rem; }
}
/* ----------------------------------------------------------------- Kader und Termine aus dem Rudel-Admin (rudel.js, seit 09.11.2026)
   Farben der Listen (Klasse, Rolle, Rang, Status, Art) setzt rudel.js als --klasse bzw. --farbe mit der Klasse .farbig */
.liste-leer { margin: 0; padding: 1rem 1.2rem; color: var(--leise); font-style: italic; }
.th-raster > .liste-leer, .th-raster > .letzte-titel { grid-column: 1 / -1; }
.timer-tafel > .liste-leer, .timer-tafel > .letzte-titel { margin: 0; background: var(--g2, #080d17); }
.timer-tafel > .letzte-titel { padding: 1.1rem 1.4rem .5rem; }
.letzte-titel { margin: 1.8rem 0 .9rem; color: var(--leise); font: 600 .8rem/1.2 var(--klein); letter-spacing: .22em; text-transform: uppercase; }
.vorbei { opacity: .55; }
.timer-art.farbig, .operator-rolle.farbig, .th-art.farbig, .rang.farbig { color: var(--farbe); }
.etikett.farbig { background: var(--farbe); color: #0b0e13; }
.stempel.farbig { border-color: var(--farbe); color: var(--farbe); }
.abzeichen { display: inline-block; padding: .1rem .45rem; border: 1px solid var(--farbe, var(--rand)); border-radius: 2px; color: var(--farbe, var(--ak));
  font: 600 .66rem/1.3 var(--klein); letter-spacing: .14em; text-transform: uppercase; }
.termin-bis { color: var(--ak-hell); font: 600 .8rem/1.2 'Share Tech Mono', monospace; letter-spacing: .06em; }
.termin-bis.laeuft, .termin-bis.live { color: #7cff6b; }
.termin-text, .termin-ort, .termin-plaetze { margin: .35rem 0 0; }
.termin-text { white-space: pre-line; }   /* Beschreibung ist mehrzeilig */
.termin-ort, .termin-plaetze { color: var(--leise); font-size: .88rem; }
.termin-text:empty, .termin-ort:empty, .termin-plaetze:empty, .mitglied-notiz:empty, .einsatz-plaetze span:empty { display: none; }
.termin-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.termin-kopf svg { width: 26px; height: 26px; color: var(--ak); }
.termin-karte strong { display: block; margin-top: .3rem; }
.termin-karte .termin-bis, .termin-karte .knopf-text { display: inline-block; margin-top: .7rem; }
.termin-karte .knopf-text { margin-left: 1rem; }
/* Kader nach Klassen: eine Karte je Klasse, darin die Mitglieder */
.kader-karten .kader-klasse { display: block; }
.kader-klasse-kopf { display: flex; align-items: center; gap: .9rem; margin-bottom: .5rem; }
.mitglied { padding: .55rem 0 .45rem; border-top: 1px solid rgba(255, 255, 255, .06); }
.mitglied-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.mitglied-name { color: #fff; font: 600 1rem/1.25 var(--schrift); }
.kader-karten .mitglied-rang, .operator .mitglied-rang { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin-top: .2rem; color: var(--leise);
  font: 600 .72rem/1.3 var(--klein); letter-spacing: .12em; text-transform: uppercase; }
.mitglied-rang .status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%;
  background: var(--farbe, var(--leise)); vertical-align: .05em; }
.mitglied-rang .status.farbig { color: var(--text); }
.kader-karten .mitglied-notiz, .operator .mitglied-notiz { display: block; margin-top: .2rem; color: var(--leise); font: 400 .85rem/1.35 var(--schrift);
  letter-spacing: 0; text-transform: none; }
.kader-karten .noch-frei { margin-top: .2rem; font-style: italic; letter-spacing: .08em; text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  .th-held::after, .live::before, .terminal-leiste .an::before, .th-unter::after { animation: none; }
}