/* Lustiges Rudel – Partnerseite von Draco-Gaming, Entwurf 2 (04.11.2026): Gildenseite mit Wolf-Thema.
   User: „sieht genauso aus wie die von bytebandit und wirbeli. mach es bitte komplett anders … wie eine coole gilden seite.
   markant, wolf thema, grafiken später rendern, nimm erstmal platzhalter.“ Deshalb: Kopfleiste über dem Vollbild-Held, Wappen
   und Gildenname in Cinzel (die Schrift ihrer Aion-Legionsseite), hängende Banner, Fraktionstafeln, Beute-Tooltips.
   Seit 04.11.2026 abends („bau die grafiken alle animiert, der header mit rudel wolf das durchs bild läuft … eigene bereiche“):
   gerenderte Schleifen statt Platzhalter (marke\render-auftrag.js), Bereiche je Spiel (bereiche.js). Schriften lokal, kein
   style="…", kein Inline-Skript (CSP style-src/script-src 'self'; img-src erlaubt data: für das Rauschen). */

@font-face { font-family: 'Cinzel'; src: url(schriften/Cinzel.ttf?v=1508f55a) format('truetype'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(schriften/barlow-400.woff2?v=81419bf5) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(schriften/barlow-500.woff2?v=8e986e86) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(schriften/barlow-600.woff2?v=a1e2a2d7) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(schriften/barlow-condensed-600.woff2?v=ba451349) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(schriften/barlow-condensed-700.woff2?v=e1180918) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --nacht: #05080c;
  --stein: #0b1016;
  --stein-hell: #121a22;
  --silber: #c9d3da;
  --silber-hell: #eef3f5;
  --silber-dunkel: #6c7b87;
  --tuerkis: #3cc2c0;
  --tuerkis-hell: #9ef0ec;
  --tuerkis-tief: #0f5556;
  --gold: #d9b65e;
  --blut: #c0392b;
  --text: #dfe6ea;
  --leise: #93a1ab;
  --linie: rgba(201, 211, 218, .16);
  /* Seltenheit der Beute wie in MMOs */
  --legendaer: #ff8a1d;
  --episch: #b057ff;
  --selten: #2f8fff;
  --benutzen: #3ddc4a;
  /* Draco-Gaming-Teile (Knopf oben, Herkunft unten) in Dracos Farben wie auf allen Partnerseiten */
  --draco: #f2a23a;
  --draco-hell: #ffd48f;
  --wappen: 'Cinzel', Georgia, serif;
  --schrift: 'Barlow', system-ui, sans-serif;
  --klein: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font: 400 1.075rem/1.65 var(--schrift); -webkit-font-smoothing: antialiased; background: var(--rauschen), var(--nacht); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
svg { width: 1.2em; height: 1.2em; flex: none; }
.versteckt { position: absolute; width: 0; height: 0; overflow: hidden; }
.bahn { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.schmal { width: min(900px, 100% - 2.5rem); }
.mittig { text-align: center; }
:focus-visible { outline: 2px solid var(--tuerkis-hell); outline-offset: 3px; }

/* ----------------------------------------------------------------- Kopfleiste über dem Held */
.kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 10; background: linear-gradient(rgba(5, 8, 12, .85), transparent); }
.kopf-innen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; width: min(1320px, 100% - 2.5rem); margin-inline: auto; padding: 1.1rem 0; }
.zurueck {
  justify-self: start; display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .55rem .28rem .3rem;
  border: 1px solid color-mix(in srgb, var(--draco) 50%, transparent); border-radius: 3px;
  color: var(--draco-hell); text-decoration: none; font: 700 1.02rem/1 var(--klein); letter-spacing: .03em;
  background: color-mix(in srgb, var(--draco) 10%, transparent); white-space: nowrap;
  box-shadow: 0 0 16px -6px color-mix(in srgb, var(--draco) 70%, transparent);
  transition: border-color .2s, color .2s, background-color .2s, box-shadow .2s;
}
.zurueck:hover { border-color: var(--draco); color: #fff; background: color-mix(in srgb, var(--draco) 18%, transparent); box-shadow: 0 0 22px -4px color-mix(in srgb, var(--draco) 80%, transparent); }
.zurueck img { width: 28px; height: 28px; object-fit: contain; border-radius: 3px; filter: drop-shadow(0 0 6px rgba(255, 90, 40, .45)); }
/* Draco-Logos als <picture>: nicht display: contents, sonst werden die leeren <source> zu Flex-Elementen */
.zurueck picture, .fuss-herkunft picture { display: flex; }
.menue { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.menue a {
  position: relative; padding: .5rem 1.15rem; color: var(--silber); text-decoration: none; white-space: nowrap;
  font: 700 .92rem/1 var(--wappen); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
  transition: color .2s;
}
/* Raute zwischen den Punkten, Strich darunter beim Zeigen */
.menue a + a::before { content: '◆'; position: absolute; left: -.3em; top: 50%; translate: 0 -50%; font-size: .5rem; color: var(--tuerkis); opacity: .75; }
.menue a::after { content: ''; position: absolute; left: 1.15rem; right: 1.15rem; bottom: .1rem; height: 1px; background: var(--tuerkis-hell); scale: 0 1; transition: scale .25s; }
.menue a:hover { color: #fff; }
.menue a:hover::after { scale: 1 1; }
.kopf-beitreten {
  justify-self: end; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.15rem; color: #04191a; text-decoration: none;
  font: 700 .86rem/1 var(--wappen); letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(180deg, #c3fbf7, var(--tuerkis) 60%, #1f8f8d);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); transition: filter .2s;
}
.kopf-beitreten:hover { filter: brightness(1.1); }
/* rechte Zelle des Kopfs: Admin (Rudel-Admin, seit 09.11.2026) klein und silbern vor „Beitreten“; bis 1240 px nur der Schlüssel */
.kopf-rechts { justify-self: end; display: flex; align-items: center; gap: .55rem; }
.kopf-admin {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .65rem; border: 1px solid var(--linie); border-radius: 3px;
  color: var(--silber); text-decoration: none; font: 700 .78rem/1 var(--wappen); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(5, 8, 12, .55); transition: color .2s, border-color .2s;
}
.kopf-admin:hover { color: #fff; border-color: var(--tuerkis); }
.kopf-admin svg { width: 1.05rem; height: 1.05rem; }
/* Musikknopf (musik.js): fest unten rechts, die Kopfleiste scrollt mit weg; pulsiert leicht, solange die Musik auf den ersten
   Klick wartet. Liegt in .kopf (z-index 10): über dem Inhalt, unter den Übergängen */
.musik { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: row-reverse; align-items: center; gap: .5rem; }
.musik-knopf {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--silber); background: color-mix(in srgb, var(--nacht) 80%, transparent); border: 1px solid var(--linie);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6); transition: color .2s, border-color .2s, box-shadow .2s;
}
.musik-knopf[hidden] { display: none; }
.musik-knopf:hover { color: #fff; border-color: var(--tuerkis); box-shadow: 0 0 20px -4px var(--tuerkis); }
.musik-knopf svg { width: 22px; height: 22px; }
.musik-knopf .an, .musik-knopf[aria-pressed="true"] .aus { display: none; }
.musik-knopf[aria-pressed="true"] .an { display: block; }
.musik-knopf[aria-pressed="true"] { color: var(--tuerkis-hell); border-color: color-mix(in srgb, var(--tuerkis) 55%, transparent); }
.musik-knopf.wartet { animation: musik-wartet 2.4s ease-in-out infinite; }
@keyframes musik-wartet { 50% { box-shadow: 0 0 0 7px rgba(60, 194, 192, .2); } }
/* Lautstärke (User 10.11.2026, per Formular: „klappt am Knopf auf“): nur bei Musik an, am PC mit Maus oder Fokus am Knopf,
   am Handy (kein Hover) immer */
.musik-laut { display: none; width: 7.5rem; height: 46px; margin: 0; padding: 0 .9rem; border: 1px solid var(--linie); border-radius: 23px;
  background: color-mix(in srgb, var(--nacht) 80%, transparent); box-shadow: 0 4px 18px rgba(0, 0, 0, .6); accent-color: var(--tuerkis); cursor: pointer; }
.musik:is(:hover, :focus-within) > [aria-pressed="true"] + .musik-laut:not([hidden]) { display: block; }
@media (hover: none) { [aria-pressed="true"] + .musik-laut:not([hidden]) { display: block; } }

/* ----------------------------------------------------------------- Held */
/* Inhalt oben, das untere Viertel bleibt frei: dort läuft das Rudel über den Grat (Film rudel-lauf.mp4, rudel.js) */
.held { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: start; min-height: 100svh;
  padding: 6.6rem 1.25rem 30svh; overflow: hidden; text-align: center; }
.held-szene { position: absolute; inset: 0; z-index: -4; background: var(--nacht); }
.held-grund, .held-rudel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
/* Der Film beginnt und endet am Bildrand mit nur zwei Wölfen im Bild, deshalb blendet er über dem leeren Standbild ein und aus */
.held-rudel { opacity: 0; transition: opacity .25s ease; }   /* Film beginnt und endet leer wie das Standbild; der Querlauf hat ab Bild 3 einen Wolf im Bild */
.held-rudel.laeuft { opacity: 1; }
/* Übergänge der Seiten bildfüllend über allem (User 07.11.2026: „übergänge der webseite … nicht im intro sondern fullscreen“):
   fruh.js setzt intro-an vor dem ersten Bild, rudel.js nimmt es nach dem Film weg; der Film endet auf dem Hintergrund der Seite */
.held-intro { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%;
  background: var(--nacht); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.4s ease, visibility 0s linear 1.4s; }
.intro-an .held-intro { opacity: 1; visibility: visible; pointer-events: auto; transition: none; animation: intro-notaus 0s 15s forwards; }
@keyframes intro-notaus { to { opacity: 0; visibility: hidden; } }   /* lädt rudel.js nicht, bleibt die Seite nicht verdeckt */
/* Beim Klick auf eine eigene Seite erst ins Dunkle (rudel.js), die neue Seite beginnt dunkel mit ihrem Übergang */
html::after { content: ''; position: fixed; inset: 0; z-index: 101; background: var(--nacht); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
html.weg::after { opacity: 1; }
/* oben dunkel für Kopfleiste und Schrift, unten nur ein Saum, damit das Rudel sichtbar bleibt */
.held-szene::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(5, 8, 12, .7), rgba(5, 8, 12, .25) 34%, transparent 55%, transparent 86%, var(--nacht)); }
.held-schnee { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.held-nebel {
  position: absolute; left: -15%; right: -15%; bottom: 0; height: 40%; z-index: -1; pointer-events: none;
  /* Abblendung zuerst, also obenauf: sonst bleibt unten ein heller Nebelstreifen und der Held endet mit harter Kante */
  background: linear-gradient(transparent 70%, var(--nacht) 98%),
    radial-gradient(55% 45% at 28% 100%, rgba(150, 178, 188, .14), transparent 70%),
    radial-gradient(50% 40% at 74% 100%, rgba(150, 178, 188, .11), transparent 70%);
  animation: nebel 24s ease-in-out infinite alternate;
}
@keyframes nebel { to { translate: 6% 0; } }
.held-innen { position: relative; max-width: 1100px; margin-top: clamp(0rem, 3vh, 2.5rem); }
/* Wappen: Wolfskopf aus dem Logo im Silberring, darum ein langsam drehender Strichkreis */
.wappen {
  position: relative; display: grid; place-items: center; width: clamp(110px, 13vw, 170px); aspect-ratio: 1; margin: 0 auto 1.2rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #17282f, #070b0f 72%);
  box-shadow: 0 0 0 2px rgba(201, 211, 218, .6), 0 0 0 7px rgba(5, 8, 12, .9), 0 0 0 8px rgba(201, 211, 218, .25),
    0 0 70px rgba(60, 194, 192, .35), 0 24px 50px rgba(0, 0, 0, .8);
}
.wappen::before { content: ''; position: absolute; inset: -20px; border-radius: 50%; border: 1px dashed rgba(158, 240, 236, .35); animation: drehen 80s linear infinite; }
@keyframes drehen { to { rotate: 360deg; } }
/* Mondschein pulsiert langsam um das Wappen */
.wappen::after { content: ''; position: absolute; inset: -8px; z-index: -1; border-radius: 50%; box-shadow: 0 0 60px 10px rgba(60, 194, 192, .28); animation: schein 6s ease-in-out infinite; }
@keyframes schein { 50% { box-shadow: 0 0 90px 22px rgba(60, 194, 192, .45); } }
/* ganzer Kopf (hochkant) im runden Ring: absolut und contain, sonst streckt das Bild den Ring zum Oval */
.wappen img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
/* lebender Kopf (WAN, User 05.11.2026: „den kopf animieren“): Ringhintergrund eingebacken, rund über dem Standbild */
.wappen-film { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.held-spiele { margin: 0 0 .5rem; color: var(--tuerkis-hell); font: 600 .98rem/1.5 var(--klein); letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
/* Name wie aus Metall: helle Kante, dunkle Stufen, Schatten und ein Hauch Mondlicht (kein Verlauf im Text, siehe draco-gaming) */
.held-titel {
  margin: 0; color: var(--silber-hell); font: 900 clamp(2.5rem, 6.2vw, 6.2rem)/.95 var(--wappen); letter-spacing: .03em; text-transform: uppercase;
  text-shadow: 0 1px 0 #a3b0b8, 0 3px 0 #5a6871, 0 6px 0 #29333a, 0 16px 34px rgba(0, 0, 0, .85), 0 0 50px rgba(60, 194, 192, .32);
}
/* Spruchband mit eingekerbten Enden; der Schatten hängt am Absatz, weil clip-path ihn sonst abschneidet */
.spruchband { margin: 1.6rem 0 2.3rem; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .65)); }
.spruchband span {
  display: inline-block; padding: .75rem 2.8rem; color: #fff; font: 700 clamp(.92rem, 1.8vw, 1.28rem)/1.35 var(--wappen); letter-spacing: .07em;
  background: linear-gradient(180deg, #17696a, #0b3a3b); box-shadow: inset 0 1px 0 rgba(158, 240, 236, .55), inset 0 -2px 0 rgba(0, 0, 0, .45);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 50%, 100% 100%, 0 100%, 20px 50%);
}
.knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.3rem; }

/* ----------------------------------------------------------------- Knöpfe: Platten mit Spitzen statt Schrägen */
.knopf {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .65rem; padding: 1rem 2.1rem;
  color: #03191a; text-decoration: none; font: 700 1rem/1 var(--wappen); letter-spacing: .1em; text-transform: uppercase;
  filter: drop-shadow(0 10px 22px rgba(60, 194, 192, .32)); transition: transform .2s, filter .2s;
}
.knopf::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #c3fbf7, var(--tuerkis) 55%, #1f8f8d);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
}
.knopf:hover { transform: translateY(-2px); filter: brightness(1.08) drop-shadow(0 14px 28px rgba(60, 194, 192, .5)); }
/* Silber, Gold, Blut: Rand aus der Platte, dunkle Fläche darin */
.knopf-silber, .knopf-blut { color: var(--silber-hell); filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }
.knopf-silber::before { background: linear-gradient(180deg, #eef3f5, #7d8b94); }
.knopf-silber::after, .knopf-blut::after {
  content: ''; position: absolute; inset: 2px; z-index: -1; background: linear-gradient(180deg, #17222b, #0a0f14);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.knopf-blut::before { background: linear-gradient(180deg, #ff9d8f, var(--blut)); }
.knopf-blut::after { background: linear-gradient(180deg, #3a0f0b, #170605); }
.knopf-gold { color: #2a1d05; filter: drop-shadow(0 10px 22px rgba(217, 182, 94, .3)); }
.knopf-gold::before { background: linear-gradient(180deg, #fff1c8, var(--gold) 55%, #8f6c25); }
.knopf-gross { padding: 1.25rem 2.7rem; font-size: 1.2rem; }

/* ----------------------------------------------------------------- Abschnitte und Überschriften */
.abschnitt { position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.abschnitt-stein {
  background: var(--rauschen), linear-gradient(180deg, var(--nacht), var(--stein-hell) 14%, var(--stein-hell) 86%, var(--nacht));
  border-block: 1px solid rgba(201, 211, 218, .07);
}
.titel { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.marke { margin: 0 0 .45rem; color: var(--tuerkis); font: 600 .98rem/1.2 var(--klein); letter-spacing: .38em; text-transform: uppercase; }
h2 {
  margin: 0; color: var(--silber-hell); font: 800 clamp(2.2rem, 5vw, 3.8rem)/1.05 var(--wappen); letter-spacing: .03em; text-transform: uppercase;
  text-shadow: 0 2px 0 #3d4a53, 0 12px 28px rgba(0, 0, 0, .75);
}
h3 { margin: 0; color: #fff; font: 700 1.5rem/1.15 var(--wappen); letter-spacing: .04em; text-transform: uppercase; }
/* Zierlinie mit Pfote */
.zier { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: 1rem; color: var(--tuerkis); }
.zier::before, .zier::after { content: ''; width: min(130px, 22vw); height: 1px; background: linear-gradient(90deg, transparent, var(--silber-dunkel)); }
.zier::after { scale: -1 1; }
.zier svg { width: 20px; height: 20px; }
.zier-links { justify-content: flex-start; }
.zier-links::before { content: none; }
.lead { max-width: 52ch; margin: 0 auto; color: #fff; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.55; }

/* Das Rudel: vier Steine mit Kerben */
.steine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2.8rem 0 0; padding: 0; list-style: none; }
.steine li {
  display: grid; justify-items: center; align-content: center; gap: .5rem; min-height: 132px; padding: 1.2rem .8rem;
  background: var(--rauschen), linear-gradient(180deg, #16202a, var(--stein));
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  box-shadow: inset 0 0 0 1px var(--linie), inset 0 18px 30px -20px rgba(158, 240, 236, .25);
}
.steine b { color: var(--tuerkis-hell); font: 900 2.5rem/1 var(--wappen); text-shadow: 0 0 22px rgba(60, 194, 192, .45); }
.steine b svg { display: block; width: 2.3rem; height: 2.3rem; }
.steine span { color: var(--leise); font: 600 .92rem/1.2 var(--klein); letter-spacing: .18em; text-transform: uppercase; }

/* Spiele: hängende Banner an Silberstangen, unten eingekerbt; schwingen beim Zeigen */
.banner-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.6vw, 2.2rem); align-items: start; }
/* Banner sind Links in den Bereich des Spiels */
.banner { position: relative; display: block; padding-top: 6px; color: inherit; text-decoration: none; transform-origin: 50% 0;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .3s; }
.banner:hover, .banner:focus-visible { transform: rotate(-1.5deg); filter: brightness(1.1) drop-shadow(0 18px 30px color-mix(in srgb, var(--b-akzent) 25%, transparent)); }
/* Überstand fest: mit 7 % der Breite ragten Stange und Spitze bei 721–1180 px über den Seitenrand (kopf-test.js) */
.stange { position: absolute; top: 0; left: -6px; right: -6px; height: 10px; border-radius: 5px; z-index: 1;
  background: linear-gradient(180deg, #eef3f5, #75838c 55%, #353f46); box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.stange::before, .stange::after { content: ''; position: absolute; top: 50%; width: 15px; height: 15px; translate: 0 -50%; rotate: 45deg;
  background: linear-gradient(135deg, #f6f9fa, #6c7a83); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.stange::before { left: -7px; }
.stange::after { right: -7px; }
.tuch {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px 12px 4.4rem; text-align: center;
  background: var(--rauschen), linear-gradient(180deg, var(--b1), var(--b2));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 44px), 0 100%);
}
/* Saum: feine Innenlinie, unten der Kerbe nach */
.tuch::before { content: ''; position: absolute; inset: 5px 5px 0; border: 1px solid rgba(255, 255, 255, .13); border-bottom: 0; pointer-events: none; }
.banner-bild { display: block; width: 100%; aspect-ratio: 4 / 5; margin-bottom: 1.2rem; object-fit: cover; background: var(--b2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.tuch-titel { color: #fff; font: 700 clamp(1.1rem, 1.7vw, 1.45rem)/1.15 var(--wappen); letter-spacing: .04em; text-transform: uppercase; }
.art { margin: .4rem 0 0; color: var(--b-akzent); font: 600 .88rem/1 var(--klein); letter-spacing: .26em; text-transform: uppercase; }
.gildenmarke {
  margin: .9rem 0 0; padding: .32rem .7rem; color: #fff; font: 600 .82rem/1.2 var(--klein); letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--b-akzent) 60%, transparent); background: rgba(0, 0, 0, .3);
}
.banner-mehr { margin-top: .9rem; color: var(--b-akzent); font: 600 .86rem/1 var(--klein); letter-spacing: .16em; text-transform: uppercase; opacity: .75; transition: opacity .2s; }
.banner:hover .banner-mehr, .banner:focus-visible .banner-mehr { opacity: 1; }
.b-wow { --b1: #102a5c; --b2: #050c1d; --b-akzent: #f2c66d; }   /* Allianz: Blau und Gold */
.b-aion { --b1: #1d3a5e; --b2: #0a1525; --b-akzent: #f1d38a; }
.b-wardogs { --b1: #30363b; --b2: #111416; --b-akzent: #c9d0d4; }
.b-grayzone { --b1: #1f3d29; --b2: #0a160f; --b-akzent: #a6dc95; }

/* Leitwolf: Porträt im Beschlagrahmen, daneben Name und Rolle */
.leitwolf { display: grid; grid-template-columns: minmax(240px, 400px) 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.leitwolf-rahmen { position: relative; aspect-ratio: 4 / 5; background: var(--stein);
  box-shadow: 0 0 0 1px rgba(201, 211, 218, .3), 0 0 0 7px var(--stein), 0 0 0 8px rgba(201, 211, 218, .2), 0 30px 60px -30px #000; }
.leitwolf-bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.leitwolf-text h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.rolle { margin: 1.2rem 0 1.8rem; color: var(--tuerkis-hell); font: 600 1.05rem/1.4 var(--klein); letter-spacing: .22em; text-transform: uppercase; }

/* Lager: Partner und Shop als Beute-Tooltips mit Seltenheit */
.beute { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; }
.gegenstand {
  --s: var(--selten); padding: 1.15rem 1.25rem 1.3rem; border: 1px solid color-mix(in srgb, var(--s) 55%, #1b2330); border-radius: 6px;
  background: linear-gradient(180deg, rgba(14, 22, 40, .97), rgba(6, 10, 18, .97));
  box-shadow: 0 0 0 1px #000, 0 0 28px -10px color-mix(in srgb, var(--s) 75%, transparent), inset 0 0 34px -22px var(--s);
  transition: transform .25s, box-shadow .25s;
}
.gegenstand:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #000, 0 0 44px -8px color-mix(in srgb, var(--s) 85%, transparent), inset 0 0 34px -18px var(--s); }
.legendaer { --s: var(--legendaer); }
.episch { --s: var(--episch); }
.selten { --s: var(--selten); }
.gegenstand-kopf { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.gegenstand-symbol {
  display: grid; place-items: center; flex: none; width: 60px; height: 60px; border: 2px solid var(--s); border-radius: 6px; color: #fff;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--s) 38%, #0a0f18), #05080c 75%); box-shadow: 0 0 14px -4px var(--s); object-fit: cover;
}
.gegenstand-symbol svg { width: 28px; height: 28px; }
.gegenstand h3 { color: var(--s); font-size: 1.28rem; letter-spacing: .02em; text-transform: none; }
.seltenheit { margin: .3rem 0 0; color: var(--leise); font: 600 .8rem/1 var(--klein); letter-spacing: .16em; text-transform: uppercase; }
.gegenstand .zeile { margin: 0 0 .5rem; color: #f2f4f5; }
.benutzen { margin: 0 0 .6rem; color: var(--benutzen); }
.code { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0 0 1rem; }
.code code { padding: .45rem .75rem; border: 1px dashed var(--s); border-radius: 4px; background: #04070c; color: #fff; font: 700 1.1rem/1.2 var(--wappen); letter-spacing: .12em; user-select: all; }
.kopieren { padding: .45rem .8rem; border: 1px solid var(--s); border-radius: 4px; background: color-mix(in srgb, var(--s) 12%, transparent); color: #fff;
  cursor: pointer; font: 600 .95rem/1.2 var(--klein); letter-spacing: .08em; text-transform: uppercase; }
.kopieren[hidden] { display: none; }
.kopieren:hover { background: color-mix(in srgb, var(--s) 25%, transparent); }
.gegenstand-link { display: inline-flex; align-items: center; gap: .4rem; color: #ffd36b; font: 600 1rem/1.3 var(--klein); letter-spacing: .05em; text-decoration: none; overflow-wrap: anywhere; }
.gegenstand-link svg { width: 16px; height: 16px; }
.gegenstand-link:hover { color: #fff; }

/* Ruf: Aufruf über dem heulenden Wolf (Schleife ruf.mp4, der Wolf steht rechts) */
.ruf { position: relative; isolation: isolate; padding: clamp(6rem, 14vw, 10rem) 0; overflow: hidden; }
.ruf-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
/* oben und unten in die Nacht, dazu ein dunkler Hof hinter dem Text (der Mond steht links hell dahinter) */
.ruf::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 42% at 50% 54%, rgba(5, 8, 12, .62), transparent 72%),
    linear-gradient(var(--nacht), transparent 28%, transparent 72%, var(--nacht)); }
.ruf .satz { max-width: 52ch; margin: 1.5rem auto 2.3rem; color: var(--text); font-size: 1.15rem; }
.einladung { margin: 1.3rem 0 0; color: var(--leise); letter-spacing: .05em; }

/* ----------------------------------------------------------------- Fuß */
.fuss { padding: 2.6rem 0 2.2rem; background: #030508; border-top: 1px solid var(--linie); }
.fuss-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.fuss-innen p { margin: 0; }
.fuss-marke { display: flex; align-items: center; gap: .8rem; color: var(--silber); font: 700 1.05rem/1 var(--wappen); letter-spacing: .12em; text-transform: uppercase; }
.fuss-marke img { width: auto; height: 48px; }
.fuss-recht { color: var(--leise); font-size: .95rem; }
.fuss-links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.fuss-links a { color: var(--leise); text-decoration: none; transition: color .2s; }
.fuss-links a:hover { color: #fff; }
.fuss .fuss-herkunft { margin: 2.4rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(201, 211, 218, .08); 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.12rem; }
.fuss-herkunft b { color: var(--draco-hell); font-weight: 600; 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 1.2rem/1 var(--klein); letter-spacing: .04em;
  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); }

/* ----------------------------------------------------------------- Bereiche der Spiele (aion2/, wow/, grayzone/, wardogs/, bereiche.js) */
/* Farben des Spiels (--b1, --b2, --b-akzent) über die Klasse b-… am body */
.menue a[aria-current="page"] { color: #fff; }
.menue a[aria-current="page"]::after { scale: 1 1; background: var(--b-akzent, var(--tuerkis-hell)); }
.banner-reihe-drei { grid-template-columns: repeat(3, 1fr); max-width: 940px; margin-inline: auto; }

/* Einblenden beim Scrollen (rudel.js); versteckt nur mit JavaScript, Hover-Übergänge bleiben ohne Verzug */
.hat-js .einblenden {
  transition: opacity .8s ease var(--verzug, 0ms), translate .8s cubic-bezier(.2, .7, .2, 1) var(--verzug, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.hat-js .einblenden:not(.sichtbar) { opacity: 0; translate: 0 28px; }

/* ----------------------------------------------------------------- Die nächsten Termine (Startseite, rudel.js, seit 09.11.2026)
   Farben je Spiel aus .b-wow, .b-aion … (--b1, --b2, --b-akzent wie bei den Bannern) */
.abschnitt-termine { padding-block: clamp(3rem, 6vw, 4.5rem); }
.abschnitt-termine[hidden] { display: none; }
.termin-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.termin-kachel {
  display: grid; gap: .35rem; padding: 1.1rem 1.2rem; color: var(--text); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--b-akzent, var(--tuerkis)) 35%, transparent); border-left: 3px solid var(--b-akzent, var(--tuerkis));
  background: linear-gradient(160deg, var(--b1, var(--stein)), var(--b2, var(--nacht))); transition: transform .2s, border-color .2s;
}
.termin-kachel:hover { transform: translateY(-2px); border-color: var(--b-akzent, var(--tuerkis)); }
.termin-spiel { color: var(--b-akzent, var(--tuerkis-hell)); font: 700 .74rem/1.2 var(--klein); letter-spacing: .2em; text-transform: uppercase; }
.termin-kachel b { color: #fff; font: 700 1.15rem/1.25 var(--wappen); }
.termin-wann { color: var(--silber); font-size: .92rem; }
.termin-kachel .termin-bis { color: var(--tuerkis-hell); font: 600 .8rem/1.2 var(--klein); letter-spacing: .1em; }
.termin-kachel .termin-bis.laeuft { color: #7cff6b; }

/* ----------------------------------------------------------------- Breiten */
/* bei 1001–1024 px brach das Menü mit den Spielnamen sonst zweizeilig um (kopf-test.js) */
@media (max-width: 1240px) {
  .menue a { padding: .5rem .8rem; font-size: .86rem; letter-spacing: .1em; }
  .menue a::after { left: .8rem; right: .8rem; }
  .kopf-admin span { display: none; }
}
@media (max-width: 1000px) {
  /* Kopf zweizeilig: Draco links, Beitreten rechts, Menü darunter */
  .kopf-innen { grid-template-columns: auto auto; grid-template-areas: 'draco beitreten' 'menue menue'; justify-content: space-between; row-gap: .5rem; padding: .8rem 0; }
  .zurueck { grid-area: draco; }
  .kopf-rechts { grid-area: beitreten; }
  .menue { grid-area: menue; }
  .held { padding-top: 8.5rem; }
  /* drei Knöpfe passen ab ~940 px nicht mehr in eine Reihe: untereinander, Discord bleibt in der Mitte (sonst 2 + 1) */
  .held .knoepfe { flex-direction: column; align-items: center; }
  .banner-reihe { grid-template-columns: 1fr 1fr; row-gap: 2.6rem; }
  .leitwolf, .beute { grid-template-columns: 1fr; }
  .leitwolf-rahmen { width: min(100%, 340px); margin-inline: auto; }
  .leitwolf-text { text-align: center; }
  .zier-links { justify-content: center; }
  .zier-links::before { content: ''; }
  .steine { grid-template-columns: 1fr 1fr; }
  /* drei Banner in zwei Spalten: das dritte mittig darunter */
  .banner-reihe-drei > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem); }
}
@media (max-width: 720px) {
  .zurueck span { display: none; }
  .zurueck { padding: .28rem; }
  .menue a { padding: .45rem .75rem; font-size: .8rem; letter-spacing: .1em; }
  .held-spiele { font-size: .85rem; letter-spacing: .16em; }
  .spruchband span { padding: .7rem 1.9rem; }
}
@media (max-width: 420px) {
  .menue a { padding: .4rem .55rem; font-size: .74rem; letter-spacing: .06em; }
  .banner-reihe { gap: 2.2rem .9rem; }
  .tuch { padding: 8px 8px 3.6rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 32px), 0 100%); }
  .tuch-titel { font-size: 1rem; }
  .banner-mehr { font-size: .74rem; letter-spacing: .08em; }
  .art { font-size: .76rem; letter-spacing: .16em; }
  .gildenmarke { font-size: .7rem; letter-spacing: .06em; }
  .knopf { padding: .95rem 1.6rem; font-size: .92rem; }
}

/* Weniger Bewegung gewünscht: alles steht still */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .held-nebel, .wappen::before, .wappen::after, .musik-knopf.wartet { animation: none; }
  .held-rudel, .wappen-film, .held-intro { display: none; }
  *, *::before, *::after { transition: none !important; }
}